/
Foundations
Components
Blocks
Pages
Screens
Library
Playground
Grab Pro Now
Customize your admin
Highlights from each release
A shortcut that works on the page and dies inside a dialog is the default outcome, not an edge case — overlays trap keys in the capture phase, where the usual window listener never runs. The law now has a hook, a spec, and a page where you can flip the failure on and off.
Binding happens on the document's capture phase, so a dialog's focus trap can no longer swallow the keys a panel advertises. Space and enter still belong to a focused button, and letters stay text inside a form field.
/foundations/keyboard makes the failure switchable: bind on bubble, open the dialog, press an arrow and watch nothing happen — then flip back to capture and the same keys walk the board.
Framework and runtime moved up a patch each.
Four rows across the site had each solved “too many to fit on one line” a different way, none of them the way the repo had already written down. They now share one shell — and extracting it turned up a behaviour that had been quietly dead since the engine migration.
One row always, the overflow scrolls, the edges fade only where content actually remains, arrows nudge, and the thing you picked is scrolled into view. Which recipe a row wants is measured rather than chosen: the films row shows seven of twelve without a click, and a row drops to a menu only once the arrows have stopped being a nudge.
Picking a film replaces the video, the facts and the description, which is what makes it tabs rather than a filter — so it now carries the roles and the arrow-key roaming it never had. The fact line moved under the video where that film's other facts already lived, taking the tab row from 40% of its set to 58%.
The overflow recipe looked for an attribute the previous component engine used to set, so its scroll-into-view had matched nothing since the migration — and a scroll that no longer happens looks exactly like a scroll nobody asked for. It now keys off what the control promises the reader instead.
Pages inside the app shell carried two, one nested in the other, because the sidebar's inset renders one and the shell added its own. Assistive technology now finds a single main region.
The sixth film pair, and the first whose subject is type rather than motion — half its runtime is words arriving on a blank gradient, so the whole thing was built off a cadence counted frame by frame. The tooling that measured it then found a defect in the film it had just measured, which is the best argument for it there is.
Two films of 31.680s on one measured cut list: a replication, and a yBlocks original that runs the same twelve cuts with this repo's own material — the composition pyramid assembling bottom-up, an architecture diagram drawing itself, a control room waking, the inventory counting. Every figure in it is live, read from the registries the home page reads.
What the impossible effects in a top-tier product film are made of: three code layers — a timeline moving things, a 3D scene placing them, a fragment shader deciding what every pixel is — all pure functions of one clock, composited and rendered offline frame by frame. No After Effects anywhere in the frame.
The energy maintenance page asked Solar for a glyph the set does not carry, so its header icon had been silently empty since the page landed. It now wears the real one.
It looked only for a fixed render filename, so a whole film could be passed over without a word. A sync tool that silently copies nothing is worse than one that fails, so it now falls back to the newest render in the directory.
The home page had been the starter template's e-commerce dashboard since day one — revenue and purchase orders for a shop that does not exist. It is the site's own overview now: seven layers, one verb each, and not a single figure on it invented.
Seven layers — read, pick, copy, compose, assemble, learn, play — each with the argument for why it exists, its live count and its way in. The rail joins the five that are built out of each other with a solid accent line and goes quiet for the two that nothing is built out of, which is the half of the story a sidebar cannot tell.
Every figure is counted from a registry that already exists for another reason: the sidebar's nav data, the card registry, the diagram taxonomy, the changelog. Adding a page updates the front door in the same edit — and there are no deltas or status colours, because a stock count is not a KPI.
The widget board that used to be the home page now lives at /layout/dashboard, where every other page class keeps its living example. The board is unchanged down to its widget list.
Diagrams are wide artifacts pinned inside a reading column, and on a 1280px screen the architecture canvas was losing 54 pixels off its right edge to a scrollbar nobody wanted to use. Every diagram now opens full screen — and the frame-rate readout learned to get out of the way.
A toggle in the canvas's top-right corner, or press F with the pointer over it; Escape leaves. Fixed-size canvases are scaled to fit rather than cropped — a transform, so type and strokes stay vector — and the fluid families simply take the viewport and reflow.
Click the chevron and it becomes a pill carrying just the number and an expand icon, remembered separately from the HUD's own on/off. Only the toggle is clickable: the card stays transparent to the pointer, because an instrument that eats clicks over the thing it is profiling is measuring itself.
Two of the diagram shells also back eleven registered cards, so making them expandable would have grown a full-screen button on eleven gallery tiles. The affordance now belongs to the page being read rather than to the component, and the gallery is untouched.
Four more films and the studio they produced. A reference arrived as an example of spring animation, so this round measured the motion instead of watching it — and the numbers turned out to be much harder than they look: entrances settle in seven frames, position never overshoots while scale does, and nothing in fifty-eight seconds is ever still. Those findings became a page you can operate.
A spring is not an easing curve with a bouncier name — it is the step response of a damped harmonic oscillator, two parameters instead of four control points, with settle time, overshoot and time-to-peak all derived. The rig plots it against ease-out at the same duration and travel, and drives its demo objects with a CSS linear() sampled from that same curve, so the picture cannot disagree with the motion.
Two 58-second films, sixteen shots each, sharing one measured cut list so they can be compared frame for frame: a replication of a capture tool's launch film, and an original about the thing this repo actually enforces — a page is not designed, it is classified.
Two films of 15.083 seconds running beat for beat, and the first replication whose reference is a template rather than a real product's film — the brand inside it is a placeholder, which leaves the grammar itself as the subject. The original beside it has to make every frame true.
Position-critical over scale-bouncy is the split that makes motion read as spring rather than as wobble, and it needs independent translate and scale to express at all. Plus stagger counted in frames, the constant drift under every spring, linear() sample count as a quality dial, and the four places a spring is the wrong answer.
The render sync walked every film directory in the motion studio, which also holds films made of a company product's screens. It now works from an allow-list rather than a deny-list: forgetting to allow-list a film means it does not appear, which is visible and harmless — the other way round is invisible and is not.
The gallery opened with one replication and now holds three replications and three originals, in that order on purpose: each original is built from the grammar the replication before it earned, which is the whole thesis being tested. Plus the workflow behind them drawn as an architecture, and the card gallery's first canvas piece.
The first original introduces zero new grammar and swaps the film's one hue to brand blue; the second replication is built entirely of hard cuts where the first film never cut at all; the longest is a 57.5-second launch film whose recorded operations are real — a scripted headless browser walking this product with a synthetic cursor. Fifty-six shot cards now loop below the stage, grouped by film.
The three repositories that turn a running product into a finished film, drawn as an architecture: the components are steps, the arrows are artifacts crossing a repo boundary, and the two boxes outside every region are the live product being filmed and the private delivery the public gallery never sees.
The card gallery's first canvas piece: twelve intake sources fanning through capture and process lanes into shelves and outputs, ~430 strands carrying travelling light at 120fps. Hover an intake family to spotlight its share of the flow — it stops at the shelves, because past that point every shelf really is fed by all three.
Flash-burst frames are posters of a single card or diagram on its own page ground rather than whole-page screenshots — a full page held for 0.13s reads as clutter, one element reads as product.
Every film's dark ground was drifting off-neutral about one step per encode and compounding when a master re-encoded its shots; all masters and shot loops are re-rendered through an exact bt709 pipeline, so a near-black ground round-trips precisely.
The concept-promo studio's output becomes browsable: a films stage with the shot vocabulary looping under it, exhibited as renders — the sources are authored for a fixed-frame deterministic renderer, not for a themed, responsive site, so the render is the honest exhibit form. Plus a catalog poster for the four shapes an agent deployment takes, keyed to how long you have between work arriving and an answer being due.
Finished films play on a stage, one tab per cut — the first is a 46.9-second frame-for-frame replication — and seventeen shot cards loop below, each with its grammar badge, source timestamps and the one-line principle it was measured to learn. Cards play only while on screen.
Batch, stream, request and edge as four lanes of one pipeline grammar, each stating its answer window up front and carrying its own failure mode — the flow dots run at four different periods, so the argument is visible before any label is read.
A new way for the architecture diagrams to draw themselves — a centre with things belonging to it, rather than a stack of boxes — and the first diagram built on it: the sixteen capabilities inside a harnessed agent, and which of the four domains owns each one. Hovering a domain lights everything it holds; hovering one capability lights it and its domain, because “what is in here” and “what is this part of” are different questions.
Sixteen capabilities across four domains, with the harness at the centre — it is what makes having the other three mean anything, so every link leaves from it. Pick any circle to read what it is for.
A composition has no “above” for a grid to encode, so regions are now drawn as circles around their centre rather than as boxes around their members.
Seven circles were rendering empty. Their icon classes were being assembled at runtime, and only classes written out literally in the source ever reach the stylesheet.
Clicking a record used to cost you the list — its scroll, its filter, the column the card sat in. It now opens beside the list instead, because triage is asking a different question than a detail page answers: not “tell me everything”, but “is this the one?”. The page is still one click away, and it is where anything that needs width still lives.
A record opens in a column of the page rather than an overlay, so the list stays visible, stays scrolled and stays clickable — on a board, the columns you drag toward stay reachable. Narrow screens get the same panel as a sliding drawer.
The selection lives in the URL, so a preview survives a refresh and can be sent to someone — and it replaces rather than pushes, so walking a queue of twenty does not bury the page you came from.
The whole card is now the target instead of the small key link, the ring marks which card the panel belongs to, the arrows walk the board in reading order, and Complete writes the same event the list does.
A social-cover generator assembled from parts this site already owns: a mark from Mark Studio's archetypes, the house type rhythm, and the course's ten beliefs as one-click presets. One SVG string is the single source — the preview, the copied markup, the downloaded file and the 2× PNG are the same image by construction.
Three formats, dark and light, eight accents, and a mark referenced by coordinate rather than re-tuned — composing a cover is this studio's job, tuning geometry is the other one's.
The preview is an image of the same SVG the buttons emit, with concrete colours that survive outside any stylesheet and deterministic CJK-aware line wrapping.
Lesson seven argues that consistency is structural, not aesthetic — and its diagram draws the claim: both columns hold the same 47 coloured surfaces, and the only variable is where the colour lives. Alongside it, six Mondays on which a component being YOURS stops being philosophy, a demo slot that mounts Mark Studio itself, and a catalog kit extracted two instances later than the house rule allows.
First believe a decision is made once, then ask who owns the component — only with both in place does code-as-prototype stop being bravado.
47 literals are 47 decisions and three get missed without erroring; one token flips all 47 surfaces in the frame its one line changes.
The owned answer arrives with a receipt — +2 −2 shipped today, −214 lines — because a diff stat is evidence and a slogan is not.
Four posters had hand-copied the same chrome and a fifth was due; the shell now owns what must be identical, including the rule that no entrance animation may gate visibility.
A rotational-mark generator with deliberately no shape library. The whole genre — pinwheels, dials, apertures, petals, crescents — shares one grammar, a single primitive rotated N times, so the engine offers one parametric element and nine numbers instead of templates. The presets are live miniatures of themselves: load one, drag a slider, and watch how close the archetypes actually live to each other.
One parametric element — a spine that bends and leans, a width profile that tapers, bulges and caps — from which every radial archetype falls out as a coordinate.
A favicon ladder at real pixel sizes, a wordmark row and an on-light/on-dark pair sit under the canvas, because a mark is judged at 16px beside a domain name long before 240px.
Wide petals with round caps clipped into a solid square; scanning the path's control points bounds the outline, and scaling that bound onto the rim gives every preset the same optical size for free.
The fifth lesson argues that consistency is not a talent problem and not a model problem — every choice in its left column is defensible on its own, and four styles still appear in one week. It also stops treating “how not to be fooled” as an aside: each failure that survives careful reading is where a codex line comes from. Underneath, the versus family finally got the shell its members had been writing out by hand three times over.
Its structure is its argument, so the chapter order carries weight — and the demo uses no invented data: five real rules, and the rework that forced each one.
Divergence is the shape ten independent reasonable decisions make, which is why asking for consistency never produces it and writing three lines does.
Only failures that survive careful reading qualify, so every catch names a mechanism rather than an attitude — and each mechanism written down is one rule.
Three members had grown the same chrome independently; it now lives in one place, and the three shrank by a third while the newest member carries none of it.
The first of the ten lessons opens the course, and it argues about the thing everybody has already suffered through: setting up a machine. Two diagrams carry it — a pair of transcripts whose metric is decisions taken by a human rather than minutes saved, and six decision points an agent puts in front of you, each marking the one field to read.
Three chapters ordered by trust rather than difficulty: swap one action, hand over the wheel, and only then talk about making practices stick.
Step five is the hinge — the first four are a fair fight, and the fifth exposes the asymmetry: a machine cannot be handed to the next person, a procedure can.
Decision points rather than tips, because “be careful” is not a skill and “read the path before the diff” is — and the sixth is the one no permission prompt will ever stop.
Transcript lines began at zero opacity, so anywhere animation frames do not run there was grey text and no way to know why.
The second lesson of the ten arrives, and it is the first one not written for engineers: it opens on the email everybody in the room actually received last week. Two new diagrams carry it — a five-step walk where one side accumulates filenames while the other accumulates reasons, and a field guide of six things a document can do once it stops being an attachment.
Three chapters, a Friday afternoon done two ways, and a migration checklist for exactly one document — start with the one that changes most often, not the one that matters most.
The failure is not at step one, which is why it walks five: a copy is harmless until someone edits it, and only unanswerable when somebody asks who changed a line and why.
Diff, blame, review, revert, branch and gate, all acting on the same five lines — and each panel names what a team does today without it, which is the half that lands.
A second lesson needed it, and the second instance is when a private component becomes family vocabulary rather than a copy.
Its panels were wrapped in an element starting at zero opacity, so anywhere animation frames do not run there was nothing to see.
The ten-lesson training now has an overview instead of a redirect — and its rows are built around the pair of beliefs rather than the lesson titles, because what a course sells is what you believe walking in versus walking out. The titles retreat beside the numbers; the struck-through assumption and the sentence replacing it take the weight.
Four arcs rather than ten list items, because a reader has to know the blocks before they can place themselves in one — and an entry that cannot name the belief it breaks is still a topic, not a lesson.
On a family's base route the band fell back to the first member and marked it active, highlighting something the reader was not looking at.
The first three layers of the agent lineage each got the diagram their SHAPE earns, not the one their topic suggests — a field guide of prompt levers, a versus that walks two context windows through twelve turns of real work, and a harness drawn as the membrane between a model with no hands and a filesystem where the effects are real. They landed in three different families, which is the taxonomy working. Then lesson 04 was refitted so every layer mounts its library diagram in Chinese, on the same components and the same simulation as the English pages.
Every panel redraws the same fifteen-column strip, so six unrelated techniques read as six reshapings of one thing: the room the prompt leaves the model.
Two static windows would be a preference; the same two walked through twelve turns of real work is a demonstration — one hits the ceiling at turn three and starts paying twice for files it evicted.
Drawn as membership, because only membership states the claim: swap the model and the abilities stay, delete the membrane and they all vanish at once.
One card per node rather than a restated caption, so the fan-out step is three cards side by side and parallel has been said before a word is read.
The Chinese versions inherit the shapes and override only words, because the shape of a run is the argument and keeping two copies is permission for the languages to disagree.
The cause was not a narrow container: the card was pinned at 768px and the canvas is 758px, so ten pixels of anything squeezed it out.
Two artifacts that report on themselves. The Runs family finally has its own renderer, and its first two instances walk the fourth and fifth layers of the agent lineage — a loop that closes through a gate rather than through confidence, and a graph where a rejected branch goes back alone while the branches that were already right keep their results. Alongside it, an oklch ramp you build with curves instead of a colour picker, and which then tells you whether the ramp survives being used.
A run is a structure plus a schedule — three branches leaving at once, two of them kept while the third goes back, and a reading that exists only because the walk happened. New instances are one data file.
The fourth layer as one narrow lane where a gate, not the model, decides when to stop; the fifth as the answer to it — seven tasks in five units of time, and only the branch that failed had to run again.
An oklch ramp that is computed rather than picked: one curve each for lightness, chroma and hue, with every swatch sitting on top of its own bar instead of in a separate box.
The ramp spent as real surfaces, light scheme and dark, each carrying two contrast ratios — because a strip of swatches can look handsome while every pairing in it fails.
A traversed edge keeps the hue of the node it left, tiles stay grey until the walk reaches them, and the edge carrying work right now flows — a colour change alone cannot say which way anything is going.
Several lightness curves folded the ramp back on itself, because k and d were held per channel and d means a different thing in every function — an inflection, a peak, a vertex.
The sixth diagram family draws what a ladder cannot: several independent axes at once, and the shape they make together. Its founding instance is AI fluency — also drawn as a corrected six-level ladder, because the two artifacts answer different questions. The argument is a preset called “the power user”: near the top of four axes, trust at zero, top of any ladder ever written, and unable to defend a line of what it produces. Plus a card for the approval queue an agent stops at.
n independent axes and one position on each — high on one says nothing about the others, so the content is the shape they make together. The headline is the weakest axis, because a profile's useful claim is almost always “this one is holding the rest back”.
Six levels as a ladder and five axes as a profile. The ladder is re-originated rather than replicated from two circulating infographics: four of their ten rungs are prompt craft sliced thin, their top levels are honorifics nobody can observe, and neither has a level for verification — which is the real dividing line.
The queue an autonomous run stops at when it needs a human: a plan with a countdown that will approve it on silence, a three-question wizard whose last option is always a text field, and a summary of what you actually decided.
Lineage stages can now carry the observation that places a person at one, and the single move that climbs out — a maturity ladder without an observable tell is unfalsifiable.
On narrow screens the arrow ended in mid-air: a fixed spine met transition text that wraps to four lines at 375px, falling up to 68px short of the next stage.
Every animated diagram here is now typed — by the SHAPE of what it has to say, never by its topic. Five families with written admission tests: architectures, versus comparisons, catalogs, lineages and runs. A new Lineage family arrives with them, where the edges carry the argument: each transition names the ceiling that forced the next stage. Diagrams and Lessons also move to top-level URLs.
An overview page that classifies every diagram by data shape and says out loud what admits one into each family — so a new diagram joins a family instead of becoming a one-off page.
The fifth family: ordered stages whose edges carry the argument — every transition names the ceiling that forced the next stage. It opens with the five layers of agent engineering, from prompt to graph.
An audit of all 72 gallery cards found six more that are really runs — including the execution timeline, the egress firewall and the CRM trio, which is now reunited as flows, schema and access side by side.
Diagrams and Lessons graduated out of the playground to /diagrams and /lessons, old links redirect straight through, and a nav group no longer collapses the moment you step into one of its pages.
A new Lessons family where courseware is a living page instead of a slide deck: one lesson per tab, one belief broken per lesson. The exemplar walks the five layers of agent engineering with a device you can operate at every layer — assemble a prompt, fill a context window two ways, replay a loop until the gates go green. Plus a font fix that ends the two-weight Chinese text.
Courseware as living pages — each lesson opens on the belief it breaks, walks the knowledge with interactive devices instead of bullet lists, demos one real task, and closes with a self-test you can act on.
Five layers from prompt to graph, argued on the edges: every layer’s ceiling is the next one’s reason to exist. Five hands-on devices, thirty terms, five pitfalls — and the same bug fixed five ways.
Simplified-only characters no longer render bolder than their neighbours: the CJK fallback that never actually shipped is replaced by a self-hosted Noto Sans SC, so every machine renders one weight.
An elbow edge blocked by a node in its own column now mirrors around it instead of drawing straight through — found when three parallel searchers fanned into one merge point.
A field for the numbers nobody nudges — amounts, quantities, reference numbers — grouped at rest, raw while you edit, and empty meaning none rather than zero. Beside it, the table that decides which of the four number parts a case actually wants, told apart by the gesture rather than the digit count. And three more architecture stacks: rented services on AWS, a cluster you operate yourself, and the shape of an agent app.
Amounts, quantities and reference numbers get their own field: right-aligned figures grouped at rest, raw while you edit so separators never fight the caret, units riding the shell instead of the value, and clearing it means none rather than zero.
Four kinds of number entry told apart by the gesture rather than the digit count — the stepper spends 56 of its 96 pixels on buttons, which is the right trade only when ±step is the interaction.
AWS serverless, a Kubernetes cluster and an AI agent app — each one data file, each answering a question the first two diagrams could not: what you rent, what you operate, and what an agent actually is.
Non-square logos were being stretched to fill their tile, four of them were invisible on the dark theme, and four boxes wore a generic glyph instead of the product they named — every service now wears its own mark, at its own proportions, in both themes.
Architecture diagrams built as data rather than drawn: boxes on a grid, arrows between ids, and regions that are the bounding box of what they hold — so nothing can fall outside the region it belongs to. Hover a box and everything it does not touch dims; pick one and it tells you why it is in the stack. Plus a sidebar filter that finally reports its own result.
Two stacks to walk — an app that never leaves Cloudflare, and the one running this site — where a packet travels the request path, an arrow hops any box it merely passes, and picking a box prints the reasoning behind it.
The renderer does not know which system it is drawing, so the site's own diagram is a data file with no changes to the kit — which is the claim the first tab makes and the second one tests.
Press / to jump into it from anywhere, watch the hit count while you type, clear it in one click, and see the matched letters lit inside each result.
Two new gallery cards, both about showing rather than claiming: a watchdog whose agents you can kill to watch it notice, and a model poster that calls a tool while you read it. Plus two seams tightened — a select's prefix glyph now keeps the same rhythm as the input beside it, and the sidebar opens the section you just walked into.
Three supervised agents, each lane an ECG at its own resting rate. Tap one to kill it: the waveform collapses onto the baseline, a grace ring drains for three seconds, then SIGKILL — and a new process answers on a new pid with the restart tally one higher.
A release poster for an open-weight model, built around the one thing it claims to be good at: a question in plain words, then the tool call typing itself out, the check landing a beat later and `resolved` a beat after that.
A glyph in front of a select's value sat flush against it while the input beside it kept a 6px step; the spacing is now pinned at the seam and matched across the date and time fields too.
Sections stopped opening for the page you navigated to after the first client navigation — they are controlled now, so an untouched section follows the route while one you opened or closed by hand stays where you put it.
A task tracker built to show what a view actually is. The same tasks become a board, a timeline, a calendar, a workload chart, a priority matrix and five more — and because the projection decides which attribute is on which axis, it also decides what dragging means. Drop a card on a board and you wrote its status; drop it two lanes down and you also changed who owns it.
Overview, My Work, List, Board, Table, Timeline, Calendar, Workload, Matrix and Activity — each one is the same tasks with a different attribute promoted to a spatial axis, and every one of them can write back to the others.
A board drop sets status, a timeline drop sets the due date, a workload drop reassigns, and a matrix drop sets priority and impact at once — the only place in the app where one gesture changes two attributes.
Tasks are folded from an append-only event stream, so the activity feed cannot disagree with the board and a change made in any view is already true in the other nine — including the history on a task's own page.
One record unfolded: attributes, dates, sub-tasks and the dependency edges it blocks or waits on — listed rather than drawn, next to the slice of the log the whole page was folded from.
Timeline bars, calendar chips, workload chips and matrix chips are real controls: the arrow keys reschedule, reassign and re-rank, because a chart you can only operate with a mouse is not finished.
Three release notes contained a bare colon, which YAML reads as a nested mapping — so the file had failed to parse since mid-August and nineteen shipped features never reached the Ship Log.
The map page becomes a family: a store locator whose pins are clocks, a geo dashboard where the map is the filter and the chart is its clock, and a delivery run you can rewind along a route that is its own progress bar. Tabs rather than cards, because every map is a live WebGL context and only one should be alive at a time.
List and map kept in lockstep by one selection — and each pin wears today's opening window as a swept ring, so the map ranks the shops by how long you have left before you read a single label.
The map as a control: click a metro and the tiles, leaderboard and chart re-scope to it, hover a week and the bubbles resize to that frame — plus a density layer that bins the raw orders into a hex grid rather than shipping a borders file.
A delivery run you can rewind, where the route is the progress bar and the speed profile is derived from the path's own curvature — so its dips land on the bends and its flat stretches at zero on the stops.
They resize themselves, their layers wait for a style rather than for tiles, and the loading veil lifts when the map has painted — three failures that each left a map looking broken while nothing had errored.
A single-thumb slider was putting its label on a wrapper instead of on the control a screen reader actually reaches, so every one of them shipped unnamed.
The picker roster's last reserved seat, filled by a record picker you can walk into and back out of — and the Playground's first WebGL engine, a globe that wears this theme and counts what it costs you.
A record picker that behaves like a place: # descends into a tag facet, picking one re-titles the header, Backspace climbs back out — and the recency shelf yields to the first keystroke, so no record is ever on screen twice.
Map, markers, popups, controls, routes, arcs, GeoJSON and clusters, with MapLibre GL as the engine and no API key anywhere — the default basemap needs none, and one prop drops tiles entirely.
A globe of edge regions with traffic running along the hops: theme tokens are sampled into the engine a pixel at a time because a canvas inherits no CSS, and the footer counts cross-origin requests so "no key needed" is a number rather than a claim.
The renderer's worker is served from our own origin instead of a CDN, so a tile-less map makes no external request at all — and the globe now sizes itself from its container, because a projection has no intrinsic scale.
Two new pickers built deliberately to a pattern four earlier controls had arrived at on their own — a curated shelf of presets over a professional editor, each half making the other usable. Plus twelve page shapes drawn as live wireframes, two cards, and a root-cause fix that gave every glyph gradient in Icon Studio its full ramp back.
Twelve curves grouped by job — enter, move, exit, character — over the cubic-bezier plot itself, with draggable handles, headroom so overshoot is drawn rather than clipped, and a dot running the current curve as proof.
The value is a list of layers, because real elevation is a key line plus a soft ambient; nine presets grouped by job sit over a stage tile, a layer stack, and geometry sliders for the selected layer.
Twelve page archetypes as live wireframes on one declarative grid, each naming the pages in this repo that already wear it; hovering tints only the regions that define the shape.
Two retrieval architectures as living circuit diagrams, every edge carrying a pulse and all pulses leaving in phase — one synchronized tick of data through both pipelines, with no JavaScript involved.
A task relayed through four agents from a single clock: the agent holding the baton breathes, and the rail underneath is a relay rather than a progress bar — each segment wears the colour of the agent it leaves.
A neutral graphite slab under a glyph cut from metal, seated by nothing but its own shadow; the two neutral ramps it needs now lead the gradient picker's list.
The ramp was bound to the full canvas while the mark occupied the middle 40% of it, so every gradient arrived squeezed into its own midtones; pinned to the mark now, every gradient preset gains its full range.
A receipt printer that feeds paper a line at a time, a 90-year life drawn as 4,680 weekly cells, and an effort picker whose track turns into a dot matrix at the top stop — plus Icon Studio finally speaking the studio kit's own vocabulary.
Paper feeds out of the card's mouth a line at a time and the card grows with it; the torn edge is cut rather than drawn, and the line under the print head stays grey until the next one prints.
A 90-year life as 4,680 cells, a column per year — moving the age scrubber dissolves the frontier cell by cell instead of wiping it, and hovering a legend entry isolates its life stage.
A chip opens a track with two forms: a plain rail of stop dots for the normal levels, and a shimmering dot matrix once you land on the top one.
The inspector swaps its home-grown controls for the kit's, gaining arrow-key roving between segments, the repo's own colour picker with a hex readout, and collapsible sections.
The picker recipes tab gains a typed @ mention, a grouped timezone picker and an aspect-ratio popup with a live preview — each a new dimension, none a new component — while the roster legislates the family's boundary and the studio panel settles on one field recipe.
Typing @ inside ordinary text opens the picker — the token filters people and picking splices @Name back into the message, on both the pointer and the Enter path.
A grouped Combobox with city + mono UTC offset rows and an id-aware filter, so searching "asia" works; swap the dataset for countries or currencies.
The popup pairs five fixed ratios with a rule-of-thirds preview that morphs to whatever the cursor or keyboard highlights — also shipped as the studio panel's RatioRow.
The pickers Overview now legislates who is NOT a member: fully-visible selection controls and surface-owning composites — the membership card is the collapsed popup.
Kit-owned fields wear the site's field-shell contract, the three select-shaped rows share one trigger dress, number values stop jumping sizes on focus, and units finally render at panel scale.
Two motion studies join the gallery — a pill that grows around a notification and counts itself down, and a curved rail that threads a whole timeline — while the number field swaps to the Appica stepper and nineteen demo pages finally obey the Max Width setting.
The notification sits at full size and the pill is what animates, growing until it wraps the content; the tone glyph wears a countdown ring that drains over the hold and closes the capsule when it empties.
One continuous curved rail threads every dot — straight between entries, S-bent at each day marker — and the lit head follows your pointer with a comet tail behind the direction of travel.
Six variants, the full size ladder with icon-only twins, the data-icon adornment vocabulary, loading through the Spinner seam, and asChild rendering a real anchor.
The form-grade slot becomes the − value + stepper with per-digit roll animation and Intl formatting; the repo-owned engine moves to the studio kit, where its scrub handle and unit suffix belong.
Nineteen demo pages wrapped their content in a hardcoded width cap, so the setting did nothing on them; page width is PageContainer's decision alone again.
The month dropdown formatted with the runtime locale, so the server and a ja/zh browser disagreed — a hydration mismatch on every dropdown-caption calendar.
Pickers become a family with their own page: Select and Combobox move in, Autocomplete joins as the free-text member, a live overview audits the family contract clause by clause, and a recipes layer builds domain pickers — assignee, creatable labels, a ⌘K command palette — without a single new component.
Select and Combobox get their own family page; the Overview tab renders every member side by side on the same data and shell, lists the pinned contract clauses, and keeps the roster of members, engines and reserved seats.
The free-text member on Base UI — the committed value is the input text itself; suggestions filter or complete inline, never constraining what can be typed, with the popup wearing the family contract verbatim.
Assignee picker, creatable labels and a ⌘K command palette (Autocomplete inline-open in a Dialog) — each an engine part plus an item recipe plus a dataset, per the new recipes-not-new-parts rule.
The family roster reorganizes into content models (listbox / grid / tree / continuous) × recipes, with reserved seats for native select, icon picker, tree select, timezone and relation pickers.
Grouped autocomplete lists render through the engine's Collection — statically rendered items didn't filter and desynced keyboard navigation.
Pressing Enter in the creatable-labels recipe commits the typed label (creating it if new) instead of silently discarding the text.
The whole site moves onto Base UI — shadcn's default engine — family by family, until radix-ui, cmdk and vaul leave package.json. A searchable Combobox joins the picker family, the studio's colour module gets its own page, and one field ladder finally holds everywhere.
Pickers, menus, modals and the form parts migrate in four batches; nine zero-consumer parts are deleted instead, ~2,800 net lines disappear, and call sites keep their API through wrapper shims.
Modals and popups share one engine, so popups inside dialogs just work — the re-portaling mechanism, outside-interaction guards and pointer-events patches are all deleted.
The picker family's searchable member — type-ahead fields, button triggers with in-popup search, groups, and chips multi-select — wearing the select popup's spring and item recipe.
A studio living example where every control paints a poster: a searchable 337-preset gradient shelf, per-stop alpha, house-preset injection, and a chip that is its own colour picker.
Selects, date, time and picker fields all wear the Input shell at default size — the event dialog's three competing heights collapse into one.
A bare bridge selector had flattened every popover's dark-mode ring; elevation corrections are now engine-scoped, soft shadow in light and hairline in dark.
The default trigger drops from 40px onto the field ladder, flush with inputs and buttons.
The sidebar becomes the composition pyramid itself — six sections, one verb each — component families collapse into single tabbed pages, a filter box gives the tree a direct line, and the studio panel finishes moving onto the standard parts.
One section per pyramid layer — Foundations, Components, Blocks, Pages, Screens, Playground — nine sections collapse into six, half the first-level entries disappear, and 21 permanent redirects keep every old path alive.
Component entries are now families — Actions, Tabs, Inputs, Date & Time, Feedback, Data Display — each a single page whose header tabs walk the members, with the underline gliding on the tabs spring.
Type a few letters and the tree collapses to flat, clickable hits ("CRM · Deals"); picking one navigates and resets the filter.
An opt-in scrub prop turns the prefix into a drag handle — one step per 2px, ×10 with Shift — the parameter-panel idiom, off by default in forms.
The panel's mask, segmented, date and number controls retire their private implementations for the repo's standard components — same 28px rows, more capability.
The Appica-engined popup now wears the shadcn vocabulary — radius, overlay border, item spacing, accent hover — while keeping its springy motion.
Two-month range calendars lay out side by side instead of stacking into a tower the popup clips near the bottom of the viewport.
Studio panel fields share one left edge, readouts stop clipping, both date fields speak one interaction model, and the smallest hit targets grow to usable sizes.
The tab family grows up — a gliding spring indicator, three recipes for tab sets that outgrow their row — while the page header shows everything it can carry and Toggle Group gets its living example.
Three answers for too many tabs: a scrollable row with edge fades, arrows and auto-scroll-into-view; a More (+N) menu whose trigger is taken over by a hidden pick; and an icons-first row where only the active tab keeps its label.
Exclusive and additive selection, outline and fused segmented looks, three sizes and vertical rails — with the Button Group boundary spelled out.
Three new specimens on the header page — a sticky band pinned inside a scrolling frame, an everything-at-once band, and a props quick reference.
The active pill and underline are one shared-layout element that slides between triggers on a weighty spring, and the incoming panel fades in with a small rise.
Prev/Today/next fused into one button group and the view switch became a fused segmented control.
The tabs indicator no longer glides in from afar while a freshly loaded page settles — its animation waits for the first real switch.
A mask input joins the input family — phone, card, locale-aware currency and custom patterns formatted as you type — while the date picker learns to escape its dialog and dark fields stop reading as holes.
Fifteen built-in masks plus custom patterns, formatting as you type and handing back masked and raw values separately — with blur-time validation on the card-details example.
The date-picker calendar is no longer clipped by the dialog's bounds — corner painting moved to the header and footer so the popup can breathe.
Selects and date/time fields float on dark dialogs and cards with a translucent tint, and popups rise on the proper overlay surface and shadow.
A muted clock glyph now marks the time field by default — the calendar trigger's twin.
Toasts, spinners, switches and carousels swap onto Appica's motion engines under a newly written component-engine doctrine — seams, admission gates and token checks — while tabs tried the engine and chose home.
shadcn stays the skeleton and Appica powers the motion-rich organs — one slot one engine behind seams, admitted through a living example, an in-dialog interop test and a visual parity audit.
Stacked toasts that expand on hover, swipe to dismiss, and carry tone glyphs locked to the title line — the firing API keeps its old shape, so every call site just worked.
A thumb that stretches mid-travel and lands drawing a check, and an Embla carousel with autoplay, fade and pagination — each with its own living example page.
Loading now spins an arc on a soft track (dots and sparkle variants included), inheriting the surrounding text color.
/ui/button-group exercises the whole grouped-action vocabulary with a Solar-vs-Lucide face-off; /ui/tabs stays on shadcn and gains a panel entrance fade.
Chevrons, clear buttons, calendar triggers and steppers rest muted and earn full strength on hover or open — one standard across every input.
Buttons size iconify glyphs on the same ladder as their svgs, ending the quietly-undersized icon.
The countdown bar actually counts down (neutral, off by default), the description regains its grey step, and the card wears the shared overlay shadow.
The thumb's drawn check is painted primary — visible in dark mode instead of white-on-white.
The date, time and select controls are reborn on Appica UI through a one-stylesheet theme bridge — segmented keyboard-first inputs, an aligned springy select, and popups that finally behave inside dialogs.
Calendar, DateField, DatePicker and TimeField — segmented spinbutton inputs with letter type-ahead months, three picker modes with time pairing, and month/year dropdown captions — all wearing this theme through a token bridge.
Every dropdown gains springy open/close motion and a popup that aligns the selected item with the trigger; the wrapper auto-builds the label map so triggers show labels, never raw values.
The event dialog picks dates and times with the new inputs, the date field can no longer be squeezed, and the five view icons speak one calendar family — muted at rest.
Two invisible fights between the dialog and the new popups — pointer events and focus stealing — are settled by portalling popups into the dialog itself, verified with real pointer input.
A five-view team calendar with drag-to-move events, a new Inputs kit — NumberField, DateField, DatePicker — and dialogs that finally pin their header and footer.
Month, week, day, year and agenda views with direction-aware transitions, drag-to-move chips that toast, a live now-line — and a week view that scrolls on phones instead of refusing to render.
Draft-then-commit editing with clamp and precision, hold-to-repeat steppers — and motion that means something: steps roll like a dial, commits flash, hitting the wall shakes.
Segmented keyboard-first dates — the format string decides the segments, digits auto-advance — paired with a calendar popover you can type into or pick from.
Header and footer stay pinned while long content scrolls between them, with clear dashed seams — and toasts now share the card family's rounded face.
An auth skeleton that legislates the seam, not the provider: a mock identity behind a stable session shape, an httpOnly cookie, a middleware guard and ranked role gates — swap in a real provider and nothing downstream moves.
A chromeless /login with three one-click demo roles; the middleware bounces guarded routes there and back, preserving where you were headed.
useSession reads one httpOnly-cookie window, and <Can min=…> gates UI by ranked roles — viewer, member, admin — while the server stays the real enforcer.
A guarded page where the session card and three role gates re-render as you switch accounts — sign out and watch the middleware bounce.
Two cross-cutting laws land: a data language that pins everything TanStack Query doesn't decide, and an icon language whose one thesis is that a glyph at rest is never pure black.
Every request is zod-parsed before it enters the cache, failures normalize to one ApiError shape, keys come from a factory, and writes flow through a pipeline that toasts, retries and invalidates by default.
A real HTTP playground at /ui/data — 450ms of honest latency, a failure switch, and an optimistic pin you can watch roll back.
One family, weight by role, sizes from a ladder, and a color ladder where darker or brighter is earned — hover, active, tone or brand.
Empty-state wells, the view-options trigger and pager arrows now rest in the muted grey instead of near-black — light mode stops looking inky.
An eighth page law for settings pages, and a cross-cutting feedback language: one tone vocabulary now drives every alert, toast, badge, loading, empty and error state.
A control panel, not an interview: every section is its own card, and each card commits to one apply semantic — instant changes toast, identity fields save per card, and the danger zone arms only when you type the resource name.
Five tones pinned once — Solar glyph, colors, dot — now drive alerts, status badges, empty states and error states, with a skeleton-first loading ruling and a three-piece empty-state contract.
Loading regions wrap in one component that handles pending, failure and a working retry — a crashed widget no longer takes the page down — and routes get their first error and loading fallbacks.
Same engine, new voice: Solar tone glyphs replace the old icons and the surface now floats on the overlay elevation tokens, matching the in-page alerts.
Dashboard tiles and KPI strips now share the one tone vocabulary, so “failing” is the same rose on every surface instead of three different reds.
The page-law system grows from three classes to seven — Detail, Kanban, Form and Workbench join Data view, Dashboard and Studio — plus filter chips that make hidden narrowing visible and a frame-rate HUD for hunting jank.
An identity band with a breadcrumb and the status chip pinned to the title, a figure strip on the shared tile, a 320px fact rail, and prev/next within the record’s own list. The deal detail and the filing review are the living examples.
A kanban is a data view whose body is a column scroller: shell and toolbar come from the data-view kit, and the kit adds drag that toasts every real move, WIP limits that turn amber then red, and a dashed drop slot that keeps empty columns targets.
A form is an interview, and an interview happens in one column — one narrow Card, dashed section seams, and a footer where Save and Reset both wake only when something changed. The form layout page graduates from placeholder to living example.
Full-screen tools codified against Icon Studio: pick assets on the left, tune properties on the right, one document behind every zone, and exports that serialize exactly what the stage rendered.
A filter hidden in the options panel now declares itself as a removable chip under the toolbar — the × lifts that one narrowing, Reset still restores defaults, and a chip can only remove, never edit.
A translucent readout bottom-right — fps against the display’s real refresh rate, p50/p95 frame times, late-frame share and blocked time — built to not disturb what it measures. Alt+P toggles it anywhere.
The deals pipeline drops its hand-rolled drag wiring for the kanban kit, and both detail pages upgrade bare back-arrows to breadcrumbs with pagers over their own datasets.
All twelve Industries screens became dashboards you can drag, resize and hide — and the component that makes them boards now owns the wiring, so a dashboard page is a widget list and nothing else.
One component owns the toolbar, the grid and the visible-set state that binds them. The three boards that predated it each carried an identical copy of that wiring — the same copy-paste drift the data-view kit removed a version ago.
Finance, the four Agent Ops views, the grid control room and its four deep dives, and the open-source matrix: drag, resize, or hide any widget, with the default layout reproducing the arrangement it replaces.
Four screens had each hand-rolled the same Card-shaped tile. One component now, on a standard Card, with tone names that mean the same thing on every surface.
The run identity, the changes log, the cost-by-agent table — anything that renders on a board is a card in the widget list, not a band floating above it.
Customize already answers “show me only these” for the whole board, so the operational grid’s own scope tabs went; its live badge and export affordances moved up to the page header.
A gallery card used as a widget stretches to its cell instead of leaving a ragged gap underneath, and the five Finance cards gained the prop the other twelve already had.
A card is taller at 350px than at 600px, so desktop-tuned heights used to cut off their own content in one-column mode. Below md the board is a plain content-height stack — a standing bug on the home and CRM boards too.
Every table, list and card-list page now composes one shared kit instead of its own chrome — and the rules that keep them identical live in the components' defaults, not in a document someone has to remember.
Shell, toolbar, scope tabs, options panel, sortable heads, KPI strip, pagination and empty state, plus a hook holding view state and reset. Ten galleries had converged on this anatomy by copy-paste and then drifted — four different rules for which way a fresh sort goes, three different Resets — and defaults that are the rules do not drift.
Layout, sort, filters and density persist per view, with a version stamp that drops stale data outright. The page number and the search query stay out of it — a stored query is a trap, because you forget it is there and think the data is gone.
A routing table maps each page class to its kit, its law and its living example; docs/data-view.md and docs/dashboard.md are the first two, and a /new-page skill walks classify → read the law → compose → verify. A page class with no law gets legislated before it gets built.
A standard card is now the boundary of a feature, and the only solid line it gets is its own edge; every seam inside drops to a dashed hairline, so a divider is never heavier than the thing containing it.
It moves to the left of the toolbar, next to the count and directly above the category tabs. Search narrows the set exactly like the tabs do, so changing one no longer means travelling across the toolbar to change the other.
The centred strip of every page number becomes a real footer: range readout on the left, page size and a windowed pager on the right. It no longer grows wider because the data did.
Signals showed its status filter in both the toolbar and the panel; CRM customers kept filters where Reset could not reach them. Seven toolbars also carried a permanently disabled back/forward pair copied from a file browser — nothing here has a history to walk.
Two teaching posters about how agents get things wrong — and both of them let you reproduce the failure rather than take their word for it.
One context window drawn as an attention U-curve, with a token strip underneath that dims along the same shape. The amber rule is a probe you can drag anywhere in the window; its reliability, its colour and the verdict at the foot of the poster all re-read as it moves, and one button snaps it to the position that survives.
Two verification chains from the same task, identical for three steps and then divergent: one loops the output back into the agent that wrote it, the other hands it to a test that never reads it. Flip the scenario switch to "output is wrong" and the external chain blocks while the self-review chain, unchanged, still accepts.
The v0.24.0 release replaced the 0.23.0 heading instead of inserting above it, which left three cards' worth of notes filed under the wrong version in both changelogs. Restored and checked against the tag.
The studio kit grows from seven controls to twenty, starting with a colour picker that is finally ours.
A saturation/value square, a hue rail, an alpha rail, plus a hex box that takes whatever a human pastes, R/G/B fields, a screen eyedropper and app-wide recents. It replaces the OS colour input, which could not express alpha and looked foreign in every theme.
Number steppers and precision, masked text, date and date-range fields, a two-handled range slider, a searchable combobox, an XY pad, an angle dial, single- and multi-line text, a cycling stepper select, chip entry and a drop target — all on the panel's shared grid, except the two that have a shape and earn their own space.
It lived inside Icon Studio, but a gradient is not an icon-only parameter. Its 337 presets come along, the preset list is injectable, and each stop now opens the colour picker instead of pairing a swatch with its own opacity slider.
The framework moves up to 16.3.0: dev sessions use up to 90% less memory, repeat production builds read unchanged artifacts from cache, and server-side rendering handles up to ~22% more load.
A studio is a parameter panel at heart, so the panel becomes a design system — and Icon Studio drops the costume.
One collapsible section shell, one label/control/value row grid, and seven control words that cover most of any parameter panel. Every numeric value is typeable and every number prefix scrubs on drag, so each new studio inherits the feel of a professional tool instead of re-earning it. /layout/studio/panel is the living spec.
Scrub a UTC hour across four cities: each row is a heatline of its own working hours, the local readout takes the city's colour only inside them, and Find best time springs the scrubber to the one hour that works everywhere.
The workbench panels were set in monospace with opened-up tracking — the card gallery's rhythm borrowed into a tool, where it reads as costume. Labels, readouts and hex values now inherit Outfit like everything else.
Icon Studio opens up: the whole Solar set behind the curated 87, and a gradient picker that actually owns the ramp.
The Glyphs tab gains a scope switch — the curated 87, or everything Solar draws, with category filter and search. Bold only, because the studio masks a filled silhouette and the five stroke styles would cost five times the bytes for the same wrong answer. Nothing loads until you ask, and matches render 120 at a time.
Fills carry an ordered list of stops now, so three-colour ramps are expressible. The colour row is a bar painted with the current ramp; it opens 337 named presets, a swatch per stop with add and remove, an opacity slider on each, and a button that turns the gradient 45° per click.
It used to tint each icon its own hue, which argued the wrong case. The claim is that coherence comes from the recipe, so the grid now holds every parameter fixed and varies only the silhouette.
Every control now sits on one label/control/value grid — the rows had been ragged in ways you could measure. Development also stops logging React's script-tag warning on every page, which came from the pre-paint theme script.
The studio outgrew a page of cards. It's now a full-screen workbench — library, stage, inspector — at /icon-studio.
Library on the left (recipes and glyphs you can load), stage in the middle, inspector on the right — the split every drawing app converges on. It left the dashboard shell for its own full-viewport route, and a toolbar now carries the view switch, backdrop, 1024pt zoom and export. Old links redirect.
Styles and field replicas are the same kind of object — a recipe you can load — so they share one list. A style keeps the glyph you have loaded; a replica brings its own, because it replicates a whole icon.
An icon is always judged against something, so the stage backdrop became a control: checkerboard reads alpha, flat surfaces read contrast, wallpaper gives glass something to refract. The glyph library also gained a filter, since 87 is past the point where scanning beats typing.
A new tool built on one claim: the premium feel of an icon set isn't hand magic, it's a recipe — a background crossed with a glyph — and a set looks coherent because one recipe is applied to every glyph. So the recipe is what you operate.
Seven shape words, an inset ring, and glass / rim light / shade / gloss / grain / elevation as sliders, crossed with a glyph you can scale, rotate and paint. An anatomy strip explodes the passes; a size ramp down to 20px keeps a recipe honest. Copy the SVG or download a 512px PNG — one render path means the export is exactly what you previewed.
Recognizable icon languages decomposed into the same parameters, from Obsidian and Candy to Clay, Synth and Ink. Glass is genuine: the recipe carries translucency that survives export, and the stage adds a backdrop blur clipped to the exact silhouette, over a wallpaper — because glass only exists relative to what's behind it.
Your recipe stamped across 87 curated glyphs, each tinted its own semantic colour — phone green, mail blue — from a curated palette rather than an arbitrary walk around the hue wheel. If it still reads as one family across 87 silhouettes, the coherence was never in the glyphs.
Six real icons read back out as parameters, one click to load, with honest notes naming the public stand-in wherever the centre is a brand mark. For the marks no public set carries, paste your own SVG or path data: it's sanitized, measured and centred like a library glyph, and everything downstream treats it as one.
Three designs replicated into the gallery's own language — a repayment plan that runs, a spend sheet whose header is a budget thermometer, and a five-band EQ.
Four balances take their minimums while every spare dollar goes at the smallest one, and when it clears, its minimum rolls onto the next. One clock replays all 52 months and accelerates as it goes; the single payment pill flies to each new target and counts up as the freed minimum lands on it.
The cumulative curve splits at now — measured behind it, dashed forecast ahead — over the three agents that moved the month. Set an annual cap in the footer and the header aurora becomes a budget thermometer, recolouring with the year-end projection along with the forecast line and the verdict.
Five faders, five presets and bypass, under a response curve that is the same five gains drawn a second way — smoothed through the fader centres and closed on the 0 dB line, so a cut reads as a hole rather than a short bar.
Effects gains a badge on a strap you can grab, swing and throw — and it doubles as the light switch for the whole site.
A staff badge hangs from a printed strap under real physics: a verlet rope whose constraints are one-sided, the way webbing actually behaves, so it goes slack when you toss the badge up and stretches when you haul on it. Grab it, swing it, throw it — the strap follows, and the badge swings from its clip rather than its middle.
Haul the badge past the trigger and it arms; let go and it spins one full turn, swapping light for dark at 90° — while it is edge-on and neither face is readable, so the theme changes in the one frame you cannot see it change. Enter or Space does the same thing without a pointer.
The asset allocation card splits into a summary and a detail that can never disagree, and the repo starts keeping a machine-readable ledger of every capability it ships.
The 13-row card split in two: a summary with the donuts and class-level compare table, and a detail card with the class/subclass breakdown, headlined by the 45.0 pt turnover its diff bars imply. Both derive from the same data, and the Investment plan board carries them as two widgets, so Customize can keep the donuts and drop the breakdown.
A machine-readable record (.roadmap/features.yaml) of every shipped and planned capability, drafted by feature archaeology and collected by the yPulse matrix — with the convention that finishing a feature updates it in the same commit.
The settings panel stops speaking five dialects of "selected", the page title band becomes a set of slots and sticks under the app header, and the header's icon row lines up with the sibling yStage site.
Every picker now shares one selected treatment, and every option carries a name — presets, radius steps and base colours can be said out loud, not just recognised. The three unexplained switches gained one-line descriptions, the layout and nav tiles preview each other's setting, and Reset moved to a footer that counts how many settings differ from the defaults.
The page title band (formerly AppHeader) takes an icon, a badge pinned to the heading, a toolbar row, and tabs that land on its bottom border — and it now sticks under the app header, offset by the header's measured height.
One Solar family at one weight, a palette glyph for the theming drawer, GitHub / X links and a language panel. The glyphs stay a soft grey in light mode and on the dark nav panel instead of going pure black or muddy.
One card on the dynamic-workflow method behind a million-line port, plus a three-card CRM set that reconciles with itself: how the process runs, how the records connect, and who can see what.
The method behind a 535,496-line port done in eleven days with 64 agents, as a working graph. The graph is coloured by which principle governs each part, so selecting a rule lights exactly its region — and killing the run proves it resumes where it died, because the queue is on disk.
What a standard CRM actually runs, as one revenue lifecycle instead of a feature list. The spine narrows honestly, and selecting any of the eight steps plays that workflow's own animation and names its trigger, records, owner and automation.
How the records connect: the schema walks itself from one Account out to its contacts, opportunities, quote, cases and activities, and the five relationship shapes are selectable — including the N:M that needs a junction object of its own.
Who can see which record, and which layer decided. A resolver rather than a matrix: profile caps, then owner, org default, hierarchy, sharing rule and team share, where the most permissive layer wins and only field-level security subtracts.
A poster of everything an agent does before it answers, staged so it reads as one turn walking its pipeline — plus the judgment half of SVG Studio: when SVG is the right tool at all.
Fifteen panels replay one turn on a shared clock — a template resolves, context is admitted then trimmed, one tool wins and its arguments get guessed, a silent retry recovers, history compacts, and one line reaches you. A turn rail tracks the live stage.
SVG Studio now opens with the judgment call: the sweet spots (data viz, icon micro-interactions, flow diagrams), where a raster asset or Lottie or Canvas wins instead, and how to split a feature section between the two.
A speedometer credit-score gauge, an interactive tax-bracket calculator, and a professional 404 page that catches any wrong turn.
A FICO gauge whose needle sweeps to today's score while the grade pill crossfades through its bands, then a Score Factors panel breaks down the drivers. Replay re-runs it.
Drag gross income and watch it get taxed in slices — each bracket bar fills with the income landing in it, and total tax, effective rate and the marginal pill recompute live. Preset chips jump the income.
A global not-found for any unmatched URL: a broken-dial "404", a headline, and two ways back — to the dashboard or the gallery. Token-driven and theme-aware.
A poster of ten evaluation techniques AI engineers reach for, plus SVG Studio — an operable rig that lays bare the SVG + CSS animation idiom behind the agent posters.
A reference poster of ten evaluation techniques — golden set, LLM as judge, rubric scoring, trajectory eval, and more. One clock replays each panel's own micro-story: cases pass or fail, a judge settles on a score, a regression flips, a breach slips through.
An operable rig for the poster animation idiom: one clock feeds five tracks through editable ramp() windows, with play/pause, speed, loop and scrub. Six recipes cover the tricks that keep motion stable across themes, sizes and SSR — each with its key code.
A poster of the eight ways an agent loop should stop, plus two new Card List pages — a specialist directory and a project board — both wearing the unified grid/list chrome.
A reference poster of the eight ways an agent loop should stop. One clock replays every panel on a shared run timeline — each playhead hits its threshold marker, freezes with a halted pill, and the cycle resets.
A find-a-psychologist directory: four labelled filters narrow the deck live, rating tones are earned (emerald / amber / red), and every card ends in one booking action. Grid or sortable list.
A project board where colour is earned — Completed only at 100%, one fixed hue per category, real summaries behind view more, and progress bars that fill on mount. Filter by status, sort in either view.
Three new cards: an agent run that walks a five-node graph through its stages, a poster of the six agent patterns, and a sandbox egress firewall that decides what gets out.
One run as a five-node graph a single clock walks through three stages. Nodes glow in the stage colour, connectors flow, the activity panel swaps from prompt to tools to answer, and the meter accrues tokens, cost and time. Pause or run it again.
A poster of the six agent-orchestration patterns — chaining, routing, parallelization, orchestrator, evaluator loop, autonomous — each a little diagram with an accent flow dot and a one-line usage.
Tap a host and a request travels from the sandbox to a default-deny wall — allowlisted hosts pass to a 200, everything else is bounced as EPERM. A terminal logs each verdict and the header tallies pass and drop.
Two new blocks — a gear-rental order book with a live rental timeline, and an alert-rule builder whose preview flips Healthy ⇄ Breaching as you drag the threshold. Brand logos now come from the svg-logos set.
A gear-rental order book — one card per booking with an earned status colour and a rental timeline that tracks where today sits in the window. A KPI strip, status tabs, channel filter, search, and grid or table views top the browser, all reconciling against a fixed as-of day.
Pick a metric and condition, drag a threshold, and watch a live preview flip Healthy ⇄ Breaching as its dashed line crosses the latest reading. Notify channels carry real brand logos and count how many are active; the actions confirm via toast.
When a brand mark is the data — integration lists, channel pickers — cards now show the real logo from the svg-logos set instead of a de-branded stand-in.
The CRM suite rounds out with an activity agenda and a quarter-in-review reports screen, plus two board fixes.
Every open touch across the pipeline, bucketed by due day (Overdue → Today → Tomorrow → This week → Later). Check one off to complete it live; type segments and an owner filter narrow the list, and each links back to its deal.
Quarter in review — closed won, win rate, avg deal size and sales cycle over a 2×2 grid of revenue by rep, funnel conversion, deals created vs won, and loss reasons. Every figure reconciles with the dashboard and the board.
The kanban board now scrolls inside its own container instead of pushing the whole page sideways — a shell min-width fix that hardens wide-content overflow on every page.
The New leads weekly bars were collapsing to zero height; they now render in proportion to each week's intake.
A new Apps section opens the Screens tier with a four-screen CRM suite — dashboard, customer book, kanban pipeline and deal detail — all reading from one reconciled dataset.
Nine widgets on the same customizable Gridstack board as the home page (drag, resize, show/hide): an open-pipeline hero with a proportional stage strip and weighted forecast, leads and win-rate stats, revenue vs target, a stage funnel, top deals, lead sources, the team leaderboard and an activity feed.
The account book as a card-list page — a derived KPI strip, search plus segment and status filters, and one record rendered as a card grid or a selectable, sortable table with the same columns in both layouts.
The pipeline as a kanban board with native drag between stages. Column headers carry each stage's full truth, so a drag moves the counts and the weighted forecast by exactly that deal while the open total stays conserved.
One prerendered page per deal: an interactive stage stepper, Mark won / lost with reopen, a deterministically derived activity timeline, and a sidebar joining the deal facts with its primary contact from the customer book.
Card List gains a fifth type — an AI-extraction review screen for company filings with live sum-mismatch checks — and Japanese text gets a proper typeface.
A fifth Card List type in two pages: a filing browser (derived KPI strip, dropzone intake, search, grid or a sortable table) and an extraction detail with a four-figure hero, a low-confidence callout, and key financials recomputed live from their basis rows — sum mismatches are flagged inline, manual entries edit with revert, and Save stays disabled until something changed. Six invented companies, every statement arithmetically consistent.
Japanese text renders in Noto Sans JP app-wide via a CJK fallback in every font stack, while the Latin UI keeps the active sans from the font picker.
Card List gains a fourth type — a financial-report template library with a per-type report preview on every card.
A fourth Card List type: a financial-report template library. Each card leads with a miniature report preview — a cover page for templates that have one, or a skeleton keyed to the type (P&L, balance sheet, cash flow, management, budget) — with a derived KPI strip, category tabs, and grid or a sortable table.
Card List gains a third type — a prediction-market signal feed that tracks what the sharpest wallets are backing.
A third Card List type: a smart-money signal feed. Each card leads with a glowing red/green implied-probability meter, then the price and potential payout, a consensus panel of the wallets on that side with their win records and conviction, and Follow / view actions — across a derived KPI strip, category tabs, an All / Active / Settled filter, and grid or list.
Outline action buttons kept their brand-colour outline on card-hover but went grey when hovered directly; a direct hover now holds the brand outline.
Card List gains a second type — an Integrations manager — and every brand logo now renders as a crisp icon, not a squished wordmark.
A second Card List type: an integration manager with a derived KPI strip and one connection card per tool — brand logo, health badge, a three-figure metric panel (or a state banner), and a settings + toggle — across category tabs, a status filter, and grid or a sortable table.
Brand tiles now use the icon-only mark instead of the wide wordmark version, so logos stay crisp in the flow chips and connection cards.
Housekeeping — the Simplified Chinese changelog is realigned with the English one.
The Simplified Chinese changelog is back in lockstep with the English one, backfilled through 0.13.0–0.15.0.
A new Card List family opens under Layouts with Auto Templates — a professional info card that draws each automation's app chain, in real brand logos, on a workflow canvas, and renders as a filterable grid or a sortable table.
A new Card List family under Layouts opens with a template gallery — one professional info card that draws each automation's app chain, in real brand logos, on a dotted workflow canvas, above category tabs, a recently-used strip, and pagination.
One template set renders as a filterable card grid or a sortable table, driven by a view-options panel (layout, sorting, density) — the same toolbar chrome as Layout → List.
The Energy control room gains a gallery presence and four deep-dive sub-screens, the Open Source screen picks up category colour, and the operational grid breathes at any width.
Two standalone cards distilled from the grid control room — Power system operations (a subsystem toggle over single-tone meters and a stability gauge) and Energy mix (a renewable-vs-fossil split with category-hued sources) — join the Analytics gallery.
Industries ▸ Energy expands into Generation, Transmission, Substations and Maintenance deep-dives, each with focused KPIs, a domain table, and the relevant telemetry cards.
The Open Source screen now tints repositories and languages by a fixed category hue across its panels, with slimmer activity and composition bars.
The real-time operational grid now sizes to its own column instead of the viewport, so wide screens no longer pack four cramped cards with truncated labels.
A power-grid control room lands in Industries — replicated from a widely-shared energy dashboard and elevated into the design language — alongside a correlation matrix card that fixes the reference's confusing red/green scale.
A national power-grid operations screen (Industries ▸ Energy) — an eight-tile KPI strip with a distinct signature each, three generation cards, and a scope-filtered grid of eight real-time operational-parameter cards, all on self-reconciling sample data.
The reference's decorative gradient bars are re-expressed as single-tone semantic meters — status colours for outcomes, one fixed hue per energy source — keeping a diverging gradient only where it maps a real good-to-bad axis.
An asset-correlation heatmap on an honest diverging scale (blue positive, grey neutral, amber negative) with |r| driving the shade, a crosshair row / column highlight on hover, and a 10Y / 1Y toggle.
A new Open Source screen ports yPulse's project-matrix dashboard into the gallery — KPIs, activity, traffic, a commit heatmap, code composition, and the matrix table, all on self-reconciling sample data.
A new Industries screen monitors a repo portfolio — KPI headlines, a ranked activity list, a traffic area chart, the commit heatmap, code composition, and the matrix table, with hover linking the activity bars, heatmap, and table.
The whole screen runs on an invented, self-reconciling project matrix, so it renders without any live data source.
A four-card wealth-planning suite on one Current / Proposed 70/30 universe, plus a new Investment plan screen that composes them into a draggable board.
The four planning cards live together on one Gridstack board (Industries ▸ Finance) — drag, resize, and show or hide each with the Customize toolbar.
Four new cards — risk-return scatter, return distribution, return & risk metrics, and asset allocation — share one 70/30 universe, so every figure reconciles across them.
The metrics card flips between modeled assumptions and realized results (with a lookback period), re-tweening each KPI; the allocation card's diverging bars trace every rebalance.
The home dashboard gets a Customize toolbar to show or hide each widget, and every draggable board now shares one unified grid look.
A toolbar on the home dashboard opens a panel to show or hide each widget, with a reset — the rest of the grid reflows to fill.
Every draggable board now shares one resize handle — a theme-aware corner grip — and the standard card surface, with the old drag-grip icon removed.
The Agent Ops Costs screen lands — a FinOps view built from three new cost cards — alongside a live-rendering million-point chart and a steadier Live activity feed.
A FinOps view for the fleet: spend KPIs, a daily trend, cost by model, a monthly-budget meter and a cost-by-agent table — all reconciling to one month-to-date total.
Cost by model with a Cost / Tokens toggle that shows price (not volume) drives the bill, a daily-spend trend with a run-rate projection, and a monthly-budget meter.
A line chart whose slider re-renders a damped cosine live — drag from a few points to a million and the x-axis rescales to match.
The live feed now holds a fixed height as rows stream in, so the cards below it no longer bounce on every update.
Two Agent Ops screens — a fleet Overview and an Alerts console — land in the gallery, composed from seven new observability cards, alongside a site-wide elevation cleanup and a Bento redesign.
An observability landing view for the agent fleet: three KPI sparklines over a runs time-series, the tool and model splits, and a live activity stream.
A rule-based monitoring console — an alert-rules list beside an incident feed whose featured incident charts a metric breaching its threshold.
Agent runs chart, metric sparkline, live activity, model split, top tools, alert rules and incident feed — the pieces both new screens are composed from.
Gallery cards and KPI tiles now share the standard Card's soft-shadow elevation instead of a hard border, so every surface sits on one system.
The Bento layout gets color-differentiated tiles and a grid that animates its reflow.
Agent-run observability lands in the gallery: a timeline that replays a run step by step and a decision-branch picker, composed into the second Industries screen.
An agent run replays on a Gantt timeline — each step's bar reveals by its real start and duration, model steps count tokens up, and Show tool I/O and Raw trace open the details.
The strategy branch the planner picked, with a diagram that tracks the selected candidate, utility scores, and the reasoning behind each of the four options.
A second Industries screen composes the two cards over a run header whose duration, tokens and cost all derive from the same run — so the whole screen quotes one run.
The monitoring card's status bars now carry the opt-in meter's self-colored glow instead of a stray blue wash, so the two read as one system.
A chrome-free recording studio for the gallery: any card opens on a clean, dark stage built for screen capture, and every card now ships a branded cover image for when its link is shared.
A chrome-free stage for screen-recording any card — dark by default, with width presets, a flat/soft surface and a replay button; the index lists every gallery card, all derived from the registry.
Every card and the showcase index get a build-time Open Graph cover, so sharing a stage link renders a branded poster — and the index doubles as a cover-thumbnail wall.
The Layouts section gains App Shells — the four canonical application frames (sidebar, topbar, dual sidebar, mobile tabs), each a responsive mini-app preview that any gallery card drops into.
Sidebar, topbar, dual-sidebar and mobile-tabs frames, each shown in a device-constrained preview that collapses, drawers and reflows via container queries — one nav/content model across all four.
Device-switcher controls are labeled for their icon-only narrow state across every shell.
The site reorganizes around a composition pyramid — foundations, primitives, cards, layouts — and gets its first industry screen: a Finance dashboard assembled from gallery cards with zero one-offs.
The first Industries screen: wealth, expenses, FX and transactions cards composed on one grid, a KPI strip derived from the same data modules, and a composed-of band tracing every ingredient back to the gallery.
Currency swap (a crypto UI translated to fiat FX), three elevations — decision matrix, EV market, performance audit — and two originals pulled in by the screen: transactions and FX watchlist.
The gallery lives at /cards with seven domain routes and meta chips; every card registers once with its domain, kind and reusable patterns.
The sidebar encodes the composition hierarchy, and a Design Language page renders the four theses, live type samples and the upgrade rubric in-app.
The gallery's design language gets written down — then put to work: one more replica joins, and four ordinary designs are elevated into the house style instead of copied.
A net-worth tracker: range pills re-tween the delta and redraw the glowing sparkline, the allocation bar re-flows as holdings sync in, and the footer hides balances, filters and refreshes.
Trip plan, monthly expenses, concept explainer and sleep score — ordinary designs rebuilt with one earned color system each, click-to-trace categories, and numbers that reconcile.
The gallery's rules — surface anatomy, two-font rhythm, color discipline, signature elements — are now a written reference with an upgrade rubric for elevating mediocre designs.
Sparkline coordinates are rounded before hitting the DOM, ending server/client mismatch warnings.
The Card Gallery grows by six: agent orchestration and run panels, a model quantization and training dashboard, a task list, and a deployment modal — each fully interactive.
A multi-agent orchestration panel with staggered queues and an animated reset, plus a single coding-agent run whose stage color themes the whole card as it works.
An 8×8 weight grid that re-quantizes as bit depth drops with a GPU-fit verdict, and a training monitor whose loss curves grow past epoch checkpoints into a deploy state.
A task list with live subtask progress, sorting and filters, and a deployment modal whose status rows build sequentially with streaming activity waveforms.
A new Card Gallery replicates seven complex, fully interactive cards from designs in the wild, and a Bento Grid playground joins the layout section.
Seven interactive replicas — credit usage, podcast player, monitor overview, subscription plan, opt-in rate, a share modal, and an AI agent overview — all theme-driven with invented data.
Drag the viewport ruler to watch a grid-template-areas layout re-flow across breakpoints, with the matching CSS shown live.
Gallery cards share one tick-meter style, count-up motion, and gradient avatars, so related views stay consistent.
Demo actions now surface bottom-center toasts — the toaster was never mounted before.
A new List layout for browsing collections, an in-app changelog, and a cleaner component style across the board.
Browse a collection as a waterfall, grid, or list — with zoom, search, and a panel to switch layout, sorting, and which fields show.
This page — curated highlights for every release, categorized and dated.
Buttons, inputs, and menus adopt a more restrained rounding, so the Radius setting stays useful across all four steps instead of jumping straight to a pill.
The first cut of yBlocks — a growing gallery of reusable UI blocks, layouts, tools, and effects on the yTemplate dashboard shell.
The sidebar organizes demos into UI, Layout, Widgets, Tools, and Effects sections, each a home for a family of blocks.
A page of card hover and active effects, ready to lift into product surfaces.
Eleven theme-token loader demos under Effects ▸ Animation ▸ Loading — every spinner follows the active palette.
Its own name, logo, and favicon on top of the themeable yTemplate base (settings drawer, token-driven theming, Solar icons).