# @nannier/canvas ## 4.4.0 ### Minor Changes - 8442fcc: Badge: add `truncate`, which keeps the label on one line and lets the pill shrink in a tight row, ending the label with an ellipsis instead of overflowing its host. The board card's `noticeLabel` pill uses it, so a long notice no longer runs past the card's metadata row. Minor justification: a new public option on an existing component (`Badge truncate`). Badges without it render unchanged. - e8f0a59: Card: add `noticeLabel` to board tickets, a quiet outline pill after the type and priority for a short notice such as an outdated workflow version. Minor justification: a new public option on an existing component (`Card board noticeLabel`). Existing cards render unchanged. - 6f6409f: Chat: the default Chat returns to the v4 hand-off's look, and the Claude desktop window layout moves behind a new `assistant` prop. - Default (no `assistant`): the conversation card with its thread 16 in and messages 14 apart, 14 / 1.55 replies, the user bubble in the accent's soft wash at the 16 corner with its trailing bottom corner tucked to 4, 9 by 13 in, and the composer's sunken field under a hairline (the 16 corner on the field border, 6 in and 12 at the start, the draft and a 32 px round send button 8 apart, a paperclip attach action). - `assistant` (on Chat, ChatThread, ChatMessage and ChatComposer): the layout measured on the Claude desktop window: one centered column whose composer box is 768 wide at most, replies at 15 / 21 inset 20 from the composer and the user bubble 16, a neutral `muted` user bubble at its own 10 corner, turns that change speaker 40 apart and a turn's blocks 20 apart, a raised 44 px composer at its own 12 corner with a bare add icon and a send control that stays quiet until there is a draft, the `meta` model line, and 12 px gutters below 480 wide. Its corners are the new web shape roles `assistantBubble` (10) and `assistantComposer` (12); the hand-off's `composer` and `bubble` stay 16 and `bubbleTail` (4) returns. - `flush` keeps meaning only "drop the card frame"; combine it with `assistant` for a conversation that sits on its host's fill, as the Wizard `assistant` example does. Consumers that relied on the desktop layout Chat drew by default since 4.3 pass `assistant` to keep it. Minor justification: a new public option on an existing component (`Chat assistant`). - e7a942a: Chat, Wizard, Dialog, Steps and Textarea can now lay out a conversation like the Claude desktop window, and the same pieces serve a planning modal and a ticket drawer. - Chat: `flush` drops the card frame so the conversation sits on its host's fill; consecutive activity folds into one expandable line; author lines appear only when the app names an author or provider. The Claude desktop layout itself (the 768 column, 15 / 21 replies, the 40 / 20 turn rhythm, the 44 px composer with its quiet send control and the `meta` model line) is Chat `assistant`, described in its own changeset. - Wizard: `assistant` gives a full-height 287 px sidebar of step rows, a 44 px top bar with the title and status, `previous` and the actions in a bar under the conversation, and an unpadded body for an `assistant flush` Chat. - Dialog: `toolbar` (with `banded`) makes the header a 44 px top bar; `headerActions` places actions before the close action. - Steps: `rows` (with `vertical`) draws each step as a 32 px sidebar row, the current one filled and done ones checked. - Textarea: `composer` sets a chat composer's 15 / 20 metrics. Minor justification: new public options on existing components (`Chat flush` and `meta`, `Wizard assistant`, `Dialog toolbar` and `headerActions`, `Steps rows`, `Textarea composer`). Without them, components keep their layout. - 2c347bc: Add FlowEditor, a new public organism: a node-graph editor with cards on a pannable, zoomable canvas joined by directed, labelled edges. Cards move by drag or arrow keys and snap to a grid, edges are drawn from a card's port or with the toolbar's From and To selects, palette entries add nodes by press or drag, and a read-only mode shows a graph without editing it. Minor justification: a new public component (FlowEditor) with its types (FlowNode, FlowEdge, FlowPaletteItem, FlowSelection, FlowPoint, FlowEditorProps), which Argus's Workflow section builds on. The docs derivation script also learns to carry components the v4 hand-off predates. ### Patch Changes - 0be26c1: Chat docs: the "Assistant layout" example's first activity line now carries the `content` every `ChatMessageData` requires, so the generated example typechecks against the real props and expands to what was read. - 5e3596f: Chat: two Claude desktop metrics that still applied to the default Chat now apply only under `assistant`, so the default follows the v4 hand-off's message renderer. - The person's own turns carry no author line in the default Chat, even when the app names an `author`, `provider` or `providerIcon`; a reply keeps its author line when named, as before. With `assistant`, a named turn of either speaker keeps its author line, as the desktop layout drew it. - A folded activity line's label is 13 / 18 in the subtle ink in the default Chat (the hand-off draws no activity line, so it keeps the label activity lines were introduced with); `assistant` keeps the desktop window's 14 / 21 in the muted ink. - 57ca3bd: Docs: FlowEditor, which the v4 hand-off predates, now has its own card on the Data page (after the Board, under Workspace) and is tagged Organism in the Library index. Components added after the hand-off are declared once in a shared registry that the docs generators and checks read. - a79755f: FlowEditor: the iOS and Android builds now draw the web look (neither platform ships a node-graph editor, so no native shape is owed; the toolbar still uses each platform's Button and Select), and an edge's label is a true capsule drawn over the canvas instead of an SVG rectangle, in the same place, size and inks. - 6f6e2fe: Move GeoMap's pan-and-zoom math into a shared view camera so other zoomable surfaces reuse it. GeoMap behaves exactly as before. - 5d8cb30: Steps: a pressable `rows` step now gives the platform's press feedback, as the numbered marker does: iOS and the web dim it while pressed, and Android ripples inside the row's corner. ## 4.3.1 ### Patch Changes - c3e5cb7: Wizard moves its steps under the title as segmented bars when its panel is narrower than 520 points, instead of keeping the 170 point rail beside a squeezed body. Chat narrows its thread and composer gutters from 24 to 12 points below 480 points wide. Together they stop the composer's text box collapsing to zero width in a phone-width planning wizard. ## 4.3.0 ### Minor Changes - 0d5af5f: Chat now reads like a desktop assistant: a centered reading column, plain assistant replies, a neutral bubble for the person's own turns without an author line, and a raised rounded composer with round add and send buttons. Minor because it adds a public option: `activity` on `ChatMessageData` shows work the assistant did (a command, a tool call, a process log) as one folded line that expands to its content. ## 4.2.0 ### Minor Changes - d33952f: Every component now reports its named anatomy parts to an enclosing `AnatomyProvider`, so an Anatomy figure numbers the parts of any component, not only Button. `AnatomyPart` is exported to register an element as a named part, and a component's parts belong to it alone: kit components and content nested inside it register nothing of theirs. Outside a provider nothing changes. Minor justification: new public API (`AnatomyPart`, `AnatomyPartProps`) and a new capability across the kit (anatomy part reporting for every component). - 68dcdf4: Icon glyphs gain categories. Each `ICON_NAMES` entry now carries a `category`, and the new `ICON_CATEGORIES` export (typed `IconCategory`) lists the fifteen categories in menu order, so an icon picker can group and filter the set. Minor: this adds a public export and a field, a new capability for consumers building icon pickers. - 693ad6c: Add opt-in terminal transcripts and bare multiline prompts to Chat, ChatMessage, ChatThread, ChatComposer, and Markdown. Preserve semantic Markdown in monospace with flat scrolling tables, and support IME-safe hardware Enter sending, Shift+Enter newlines, and composer autofocus. Add terminal Textarea metrics and a Typography terminal face modifier that preserves reading sizes. Terminal transcripts, prompts, and CodeBlock transcript output use a modern system monospace stack independently of existing mono typography. Preserve all existing defaults. Minor justification: new public options (`terminal` on Chat, ChatMessage, ChatThread, ChatComposer, Markdown, Textarea and Typography) that consumers such as Argus use for terminal transcripts and prompts. - 0c67056: Add a solid inset terminal Drawer and a bare selectable CodeBlock transcript variant for execution sidebars. Minor justification: new public variants (`terminal` on Drawer, `transcript` on CodeBlock) for execution sidebars. ### Patch Changes - e5f2831: AvatarGroup stacks avatars the way the v4 hand-off does: each avatar after the first overlaps its neighbour by 10px at every size (it was 16px at the default size and 13px on small avatars, which crowded the initials); `snug` and `loose` stay looser. A stock initials disc now takes the hue the hand-off draws for the same name (its eight identity hues and hash), so a name's disc colour matches the design; Argus's reference discs keep their gradient hues. - 22f8af8: Prepare consumer plugin metadata for OpenAI and Claude distribution, and update the recipe scaffold to Canvas 4.1.0 with a package-derived version label and optional hosted subpath configuration. - 6437937: PieChart and RadialBarChart sit in the v4 hand-off's chart frame like every other chart (the card fill on a hairline at the card corner under the small shadow, a 16px inset, 12px compact), and take `plain` to drop it when nested in a card. RadialBarChart draws the hand-off's rings: 16 units apart from the outermost, a 10 unit stroke, scaled to its 160px disc (120px compact). - 3fe1a49: Make the README a concise introduction with a single-package npm install command and a first component up front. Preserve detailed setup, optional dependencies, overlays, and theming in a linked usage guide that also supplies the generated API documentation. - a55f54a: GridList lays its tiles out on the v4 hand-off's grid: three columns by default (`cols2` for two), each at least 140px wide, so a phone keeps two columns and only a very narrow grid drops to one, and a short last row keeps its columns instead of stretching. Gallery thumbnails take the hand-off's diagonal wash of the item's colour (a `blue-500` or `emerald-500` reads by its colour family, as the hand-off draws it), the gallery title sits on a 16px line, and a tappable gallery tile lifts to the medium shadow under the pointer on the web. A tappable people tile is now pressable across its whole card; it used to take presses only on its centred content. - b8e2dec: Heatmap draws the v4 hand-off's heatmap: the chart frame (the card fill on a hairline at the chart corner under the small shadow, a 16px inset, its rows 12px apart; `plain` drops it inside a card), `label` (or `caption`) as its 500 13px title, 11px cells on a 13px pitch in seven-row columns that scroll sideways where they overflow, an empty cell in the secondary surface and a valued one in the chart-1 wash from .18 to .98, and the hand-off's less-to-more legend. A plain `calendar` takes the same cells with day inspection and no axis labels, as the hand-off draws it; `detailed` keeps its unframed calendar with month and weekday labels. - dd363c6: Keep InputOTP's active cell and caret synchronized with an already focused input when hydrating prerendered autofocus markup. - 491f18d: Stats takes the v4 hand-off's layout and tile: by default the metrics sit in one bordered box with a hairline between each, and `framed` separates them into tiles 12px apart. The group lays out on the hand-off's auto-fit grid (a 180px floor for three or more metrics, 220px for one or two), so a narrow card stacks its metrics. Each tile has a 16px inset, a 13px label led by the accent's swatch and the icon, a small trend line beside the figure, a delta led by its direction arrow and, for `share`, a thin bar over a legend. Tappable metrics show a chevron and a hover wash on the web. The `compact` and `large` tiles are unchanged. - e56cdef: A titled Stats group draws its title above its bordered box, 10px over the metrics, instead of inside the box against its edge. - 50560bc: Characterize the terminal variants the kit's design rules check: Textarea's prompt metrics now resolve through `metricsOf` (terminal, then dense), CodeBlock's `transcript` and Drawer's `terminal` are members of their recorded axes, and the Drawer terminal screen's 12 corner is a declared kit corner (`terminalScreen`) instead of a bare number. No rendered value changes. - 4929ff8: Keep the native role scan's message-author exceptions in step with the regenerated Chat examples, and cite a commit in the audit reference test by a prefix that always holds a letter, so the test no longer fails on the 2% of SHAs that open with eight digits. ## 4.1.0 ### Minor Changes - 198c70e: Ship versioned agent-readable component references, a consumer skill for Codex and Claude Code, and offline documentation, setup diagnostics and recipe scaffolding commands in the existing Canvas package. Include settings, dashboard and booking recipes, and generate a sitemap for the documentation export. ### Patch Changes - 198c70e: Clarify Expo installation, required peer versions and published-package guidance. Update the independent starter to the released Canvas 4 package and add a repeatable consumer-agent evaluation protocol. ## 4.0.0 ### Major Changes - 01dace1: Release Canvas 4.0.0 with the Canvas v4 “Light as material” design across the universal kit and its documentation. This release replaces the Dark Factory appearance with the vendored v4 hand-off: authored colors and focus rings, Instrument Sans and Bricolage Grotesque typography, revised component skins, floating glass surfaces on the web, and the reference interactions and animations. The five accent palettes are violet (the default), cyan, mint, rose, and amber in both light and dark schemes; the former blush palette is removed. The docs adopt the v4 navigation, section pages, component details, examples, and responsive chart compositions. Existing keyboard interaction, accessible names, focus management, and Reduced Motion behavior are retained. When upgrading from v3, update `react-native-svg` to **15.8.0 or later**. Canvas 4's chart effects use its SVG filter exports; SVG 14 is no longer supported. The React and React Native minimums remain 18 and 0.74, respectively. Activity feeds retain actor and target labels alongside their timestamps. Pagination keeps both navigation arrows available in narrow containers by using its compact presentation when the numbered row cannot fit. Wizard follows the reference's vertical stage rail, header status, and opposing footer actions. Its default panel cap is 620 px. On the web, embedded wizards render as opaque panels without a modal backdrop; live modal wizards retain their backdrop and floating material. Compact vertical Steps and compact outlined Inputs support the reference's dense workflow layout. ### Minor Changes - bdc747f: Three looks the Canvas v4 hand-off's component page draws around its own components, carried by the kit so the docs pass a boolean instead of restyling (justification for the minor: new public options). Kbd gains `comfortable`, the page key beside its effect: the same cap padded 3 px above and below its label and 8 px at the sides, 25 px tall. Badge gains two metric steps: `token`, a code token chip (the 22 px pill with its 8 px inset under the small 11 px label in the code face, for a role, a state or an attribute name), and `tier`, a tier tag (a 24 px pill with a 10 px inset under an 11 px mono label in caps on its own line); the metric precedence is `notification` > `reference` > `navigationCount` > `count` > `tier` > `token` > `small`. DescriptionList gains `muted`, which sets each text value as a note beside its term, 400 13/19 in the muted ink on the web and Android, where the default value is the full-weight foreground data; the iOS value detail is already the secondary ink and keeps its type. - 438b3a5: Two new capabilities from the v4 hand-off's component page, the user-visible additions this minor carries. DescriptionList gains `ruled` on its rows axis (it wins over `divided`): every row, the first included, draws a 1 px top rule in the `border` token, pads 9 above and below with nothing beside, and in the two-column layout the term hugs its content over a 120 floor with 14 to the value, the hand-off's accessibility-card rows, so a list under a caption reads as a table that starts below it. Typography gains `pagerName`, the previous and next cards' name under their label: the display face, 500 18 on the face's own 22 line (the hand-off sets no ratio; the line is Chromium's `normal` for Bricolage Grotesque, measured on the hand-off page), in the foreground ink. The docs' accessibility cards take `ruled` and the previous/next cards take `pagerName`. - f576583: Two new options from the v4 hand-off's component page, the user-visible additions this minor carries. Badge gains `band` on its metrics axis (between `tier` and `small`): a group band's pill, the props table's "pick one" beside an axis's title, 20 px tall with a 7 px inset, no border and a 500 11 px label on the small pill's 14 px line, in the code face with `mono` and in the tone axis's fill (the accent's soft pill with none), where `small` is 18 tall with a 6 px inset. DescriptionList gains `compact`, its density axis: on a `ruled` list the rows take the hand-off's semantics-card metrics, 8 above and below the text, 12 to the value, the two-column term a fixed 110 column and the value at the top of its row (so a wrapping row of badges starts level with its term); the plain and divided rows have no compact step, and iOS keeps its centered 52pt Lists row with the fixed column and the gap. The docs' props-table bands take `band` and the accessibility Semantics list takes `compact`, so the Intent band is the hand-off's 41 px and the Semantics rows its 8 px inset. - 01dace1: Add Board pageScroll so an enclosing page can own horizontal overflow while plain lanes keep their equal widths and minimum lane size. - 2898f10: Extend Card with a board ticket layout: fixed clamped text slots, supplied move handle, blocked reason, active AI text shimmer with cycling dots, and optional authenticated image header. Image failures collapse the image well and reduced motion keeps progress text static. - e7df23d: A Button's icon slots take the button's label ink. An `Icon` in `iconLeft` or `iconRight` (and the icon-only body) with no tone of its own now paints in the label's colour for the intent, emphasis, body and state the button resolves (the primary's contrast ink on a primary button, the foreground on outline and ghost, the muted ink on a quiet or filter trigger, the link ink on a link, dimmed with the label while disabled), on web, iOS and Android, as the v4 hand-off draws its glyphs in `currentColor`. The seam is a kit ink context (`src/style/ink.tsx`): Button provides its resolved label ink around its slots, and Icon's colour precedence becomes the explicit tone or `color`, then the nearest ink, then the foreground, so every Icon that passes a tone keeps it and an Icon on the page is unchanged. The docs playground and Anatomy figure stop hand-toning the demo glyphs. Minor: a new capability, icons inherit the button's ink without a per-call tone. - 13423ca: Adds Button's `plainLink` body (justification for the minor: a new public option, a plain accent text action). It is the Canvas v4 hand-off's bare accent button, a panel's Reset and a table's show-all row: no box, no fill, no underline, a 500 13 px label in the accent text ink (12 px with `small`) that brightens to the foreground ink under the pointer on the web, while iOS and Android draw their own tint-coloured text button; it is still read as a button. Two corrections ride with it: a loading web Button now draws the hand-off's open arc (14 px, a 2 px stroke in the label's ink with the right edge open, one turn per 0.8 s on the loop primitive) in place of React Native's ring with its track, with iOS and Android keeping the platform's activity indicator through a `loader` the skin names; and `themeChoice` is the hand-off's 32 px border box around a 20 px colour disc (`` through `iconLeft`) instead of padding around the label line, so the disc centres in the pill. A loading button's loader also takes a special body's own label ink. - a80963b: Card takes the Canvas v4 component page's card geometry as new public booleans (justification for the minor: new component options). A Corners axis adds `calloutCorners` (14), `largeCorners` (18) and `stageCorners` (20) beside `smallCorners`, each read from the web row's callout, panel and stage corners, while iOS and Android keep their own card corner; `outlined` joins the elevation axis as the hairline on the card fill with no shadow (the Material 3 outlined card on Android); the density axis gains the page's insets, `panel` (18, a 12 px rhythm), `guide` (18 by 20, 10), `linkTile` (14 by 16, 6) and `pager` (16 by 18, 4), and a density on a sectioned card (an eyebrow, a title or a footer) now reshapes its sections' inset and rhythm instead of being ignored; and CardMedia's specimen well gains the `stage` step (320 px, an 80 by 40 inset, the anatomy figure) and the `playground` step (340 px, a 44 by 28 inset, growing beside a panel). The docs component page frames its playground, variants, anatomy, props, accessibility, platform, guidance, related and previous/next cards with them at the hand-off's radii, insets and fills, and the inherited-props note under a props table is the hand-off's one-line callout. - 01dace1: Add detailed composition legends, ordered outlined treemap partitions, tapered funnel stages, radar spokes and a wider gauge. Match the v4 chart showcase's ring, strip and value geometry. - 01dace1: Match the v4 hand-off's specialty chart presentations: detailed goal rows, metric breakdowns, status panels and outlined city maps; precise activity calendars and trend strips; and responsive metadata tags through Chip's small prop. Preserve chart selection, keyboard navigation, status summaries and Reduced Motion while restoring hover transitions. - 3bdfff0: The Charts section cards' pieces (justification for the minor: new public options). The chart value flag is the inverse ink pill (the Tooltip bubble's reading, mono 11 px, the `chartFlag` corner, the dense inverse tint under glass), and the cartesian charts mark the inspected category on the axis in the card ink with a dashed `3 4` guide. New options: `Chart` `formatValue`; `ChartSeries` `dashed` (LineChart, ComposedChart, CandlestickChart overlays, with a dashed legend rule); `CandlestickChart` `legendCaption`; `ProgressRing` `stacked`; `MetricBreakdown` `hideSparkTag`; `BulletChart` per-row `success` / `warning` / `destructive`; `DepthChart` `spread`; `UptimeBar` `midLabel`. Looks taken from the hand-off: the selected bar's gradient and glow, the ring and gauge arc glows, the completed ring's check, the radial bar's first series on the outer ring, the radar's quarter rings, the range area's selection marks, the scatter plot's solid selected point, the box plot's half-width whisker caps, the sparkline's range-scaled bars, the calendar heatmap filling its width, the treemap's 2:1 tiles and near-black ink, and the geo map's stacked zoom control. - 2ad40dc: Adds Chip's `href` and `hrefAttrs` props (justification for the minor: a new public option, a chip that is a link). A chip with `href` is one link to its destination: a real anchor on the web, so middle-click and open-in-new-tab work and assistive tech hears a link, with `hrefAttrs` forwarding `target`, `rel` and `download`; natively it pairs with an `onPress` that navigates through the app's router, as Button's `href` does. `onPress` now receives the press event, so a web app routing on the client can take the click. A hovering pointer turns a link chip's ink and edge to the accent (the Canvas v4 hand-off's component chips) instead of brightening it. While `disabled` the anchor is dropped, and `href` is ignored on a selectable chip or a ChipGroup option, which stay toggles. - 580288f: Minor: the hand-off's token chip and icon tile. Chip `token` is the tag of a colour role (a 32 px pill in the card fill inside the hairline, a 500 12 px mono label, 6 px beside its 20 px swatch), and Chip `square` holds an `option` chip to the 30 px tile an icon-only option takes, its label the tile's 500 10 px mono line. Swatch `tiny` is the 20 px disc that chip carries, and Swatch `ring` draws the edge as a 1 px inset ring in the field border in place of the hairline. - 0353907: CodeBlock gains `unbadged`, a new public option that keeps the header bar and `language` highlighting but draws no trailing language badge beside the copy chip, for a `filename` that already names the language (the hand-off's playground bar is "JSX · ButtonProps" and a Copy button only). Justification for the minor: a new component prop. Colour correction, carried in the same release: a tsx or jsx snippet now takes the hand-off's component-page highlighter (Component.dc.html `hl`) instead of the ts grammar. Only a Capitalised tag name is painted, in the accent text ink, with the brackets and slash neutral; an attribute name is cyan only before its `=`; strings stay mint and comments the subtle ink; keywords, numbers, function names, lowercase tags, bare boolean attributes and children text are the code ink. So `` reads as one label after one accent name instead of a cyan `