@exponential_app/eui 0.0.0-stage → 0.2.1

package/catalog/recipes.json

@@ -0,0 +1,64 @@
+{
+  "$comment": "VAPP-92: the RECIPE contract. A theme styles a component PART under a `when` selector (the node's recipe props + the interaction `state`); this file fixes what a theme may name. `states` = the interaction states a painter reports (`default` is the absence of all; round 1 adds `invalid` = a field whose checks failed, `dragover` = a drop zone a drag hovers); `keys` = the whitelist a recipe style may set: a SUBSET of style.json's visual keys plus the padding/gap/size keys a part's box needs and `native` (true = the painter may use the platform's own control for this part, geometry still from the tokens); round 1 lets a recipe set `transition`/`transitionEasing` (so a theme's motion tokens finally animate hover/press/open), `transform` (a chevron that rotates when `open`), `borderStyle`, the four per-side border widths (an app bar's bottom rule, a tab bar's top rule), `textDecoration`, `letterSpacing`, `fontStyle`, `textTransform`. A part-level discriminator the painter supplies per drawn piece: CodeBlock/token `kind` (the codeToken enum), Table/headerCell+cell `align` and Table/row `striped` (true on ODD rows of a striped table), Stepper's step `status` (a macro `$recipe`). `native` lists every native component's PARTS (the painter paints each part with its resolved recipe) and the PROPS a `when` may key on (the component's enum/boolean props; the catalog default fills an unset one, so a theme always sees a concrete value; a part-level discriminator the PAINTER supplies is listed too, see below). Macro parts come from macros.json (every template `part`) and their `when` props from the macro's `recipeProps` (+ a part's `$recipe` keys); src/recipes.ts derives them. Both lists are append-only. Round 2 (docs/round-2-contract.md §6): `parts` lists EVERY part a painter lays out (the conformance dump names each `<node id>.<part>[.<index or row key>]`), so the layout-only parts are here too (Switch/body, Radio/items, Slider/header, Table/body, CodeBlock/body+code, FileUpload/title+browse+fileIcon, the fields' `input`, Tooltip/anchor, Accordion/count, List/section, Carousel/controls+previous+next); keys add `backdropBlur` (`$blur.*`) and `animation`; Resizable is new. EXP-1259: SearchList is new (its parts are also a searchable Menu submenu's: head, search, count, list, empty, fade), Tabs gain `close` + `new` (props `closable`, `addable`), Skeleton gains its rows (`row`, `dot`, `bar`). EXP-1324: CodeBlock gains the `variant` (default|destructive) and `size` (default|sm) props, shadcn's code-block. VAPP-162 (docs/round-5-contract.md): Segmented gains `orientation` + the `badge` part (an option `count`), VoiceWave the `variant` prop + the `bar` part (the `bars` meter), QrCode and QrScanner are new.",
+  "states": ["hover", "pressed", "focus", "disabled", "checked", "open", "selected", "invalid", "dragover"],
+  "keys": [
+    "backgroundColor", "color", "borderColor", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderStyle",
+    "padding", "paddingHorizontal", "paddingVertical", "gap",
+    "width", "height", "minWidth", "minHeight",
+    "fontSize", "fontWeight", "lineHeight", "fontFamily", "letterSpacing", "textDecoration", "textTransform", "fontStyle",
+    "boxShadow", "opacity", "transition", "transitionEasing", "transform", "backdropBlur", "animation", "native"
+  ],
+  "native": {
+    "Box": { "parts": ["root"], "props": ["pressable"] },
+    "List": { "parts": ["root", "divider", "section"], "props": ["direction", "divided", "stickyHeaders"] },
+    "Resizable": { "parts": ["root", "panel", "handle", "grip"], "props": ["direction", "handle"] },
+    "Text": { "parts": ["root"], "props": ["variant", "tone"] },
+    "Markdown": { "parts": ["root", "paragraph", "heading", "link", "code", "codeBlock", "quote", "table", "listItem"], "props": [] },
+    "Image": { "parts": ["root", "fallback"], "props": ["fit"] },
+    "Icon": { "parts": ["root"], "props": ["size", "tone"] },
+    "Video": { "parts": ["root", "controls", "poster"], "props": ["autoplay"] },
+    "AudioPlayer": { "parts": ["root", "controls", "track"], "props": [] },
+    "Avatar": { "parts": ["root", "image", "fallback"], "props": ["size"] },
+    "QrCode": { "parts": ["root", "plate", "module", "label"], "props": ["level"] },
+    "Carousel": { "parts": ["root", "page", "indicator", "controls", "previous", "next"], "props": ["loop", "indicators"] },
+    "Tabs": { "parts": ["root", "list", "tab", "indicator", "content", "close", "new"], "props": ["fill", "closable", "addable"] },
+    "Segmented": { "parts": ["root", "item", "icon", "label", "badge"], "props": ["type", "variant", "size", "fill", "orientation"] },
+    "Accordion": { "parts": ["root", "item", "trigger", "content", "count"], "props": ["type"] },
+    "Dialog": { "parts": ["overlay", "content", "title", "description", "footer", "close"], "props": ["dismissible"] },
+    "Drawer": { "parts": ["overlay", "content", "handle", "title", "description", "footer"], "props": ["side", "dismissible"] },
+    "Popover": { "parts": ["content", "arrow"], "props": ["side", "openOn"] },
+    "Tooltip": { "parts": ["content", "arrow", "anchor"], "props": ["side"] },
+    "Menu": { "parts": ["trigger", "content", "item", "separator", "label", "shortcut", "check", "submenuIndicator", "head", "search", "count", "list", "empty", "fade"], "props": ["openOn"] },
+    "Toast": { "parts": ["root", "icon", "title", "description", "action", "close"], "props": ["type"] },
+    "Ring": { "parts": ["root", "track", "fill", "label"], "props": ["size", "tone"] },
+    "Spinner": { "parts": ["root"], "props": ["size"] },
+    "Skeleton": { "parts": ["root", "row", "dot", "bar"], "props": ["rounded", "dot"] },
+    "VoiceWave": { "parts": ["root", "outer", "mid", "inner", "child", "bar"], "props": ["activity", "size", "variant"] },
+    "Chart": { "parts": ["root", "title", "axis", "grid", "legend", "tooltip", "valueLabel"], "props": ["kind"] },
+    "Table": { "parts": ["root", "caption", "header", "headerCell", "sortIcon", "row", "cell", "checkbox", "empty", "body"], "props": ["selectable", "striped", "density", "stickyHeader", "align"] },
+    "Button": { "parts": ["root", "icon", "label", "spinner"], "props": ["variant", "size", "disabled", "loading"] },
+    "Link": { "parts": ["root"], "props": ["external"] },
+    "Toggle": { "parts": ["root", "icon", "label"], "props": ["variant", "size", "pressed"] },
+    "Form": { "parts": ["root", "summary"], "props": ["disabled", "busy"] },
+    "Input": { "parts": ["root", "label", "field", "placeholder", "description", "error"], "props": ["type", "disabled"] },
+    "Textarea": { "parts": ["root", "label", "field", "placeholder", "description", "error"], "props": ["disabled"] },
+    "NumberField": { "parts": ["root", "label", "field", "decrement", "increment", "unit", "description", "error", "input"], "props": ["disabled"] },
+    "Checkbox": { "parts": ["root", "box", "check", "label", "description"], "props": ["checked", "disabled"] },
+    "Radio": { "parts": ["root", "item", "dot", "label", "items"], "props": ["orientation"] },
+    "ChoiceTiles": { "parts": ["root", "tile", "picture", "label", "description"], "props": ["type", "columns"] },
+    "Switch": { "parts": ["root", "track", "thumb", "label", "description", "body"], "props": ["checked", "disabled"] },
+    "Slider": { "parts": ["root", "track", "range", "thumb", "label", "value", "header"], "props": [] },
+    "Select": { "parts": ["root", "label", "trigger", "placeholder", "content", "search", "item", "check", "empty"], "props": ["multiple", "searchable", "disabled"] },
+    "SearchList": { "parts": ["root", "head", "search", "count", "list", "item", "icon", "identifier", "label", "check", "empty", "fade"], "props": [] },
+    "ChipInput": { "parts": ["root", "label", "field", "chip", "chipLabel", "remove", "placeholder", "description", "error", "input"], "props": ["disabled"] },
+    "DatePicker": { "parts": ["root", "label", "trigger", "calendar", "day"], "props": [] },
+    "DateRangePicker": { "parts": ["root", "label", "trigger", "calendar", "day", "range"], "props": [] },
+    "TimePicker": { "parts": ["root", "label", "trigger", "placeholder", "list", "item"], "props": ["disabled"] },
+    "FileUpload": { "parts": ["root", "label", "dropzone", "icon", "hint", "file", "fileName", "fileMeta", "remove", "description", "error", "title", "browse", "fileIcon"], "props": ["multiple", "disabled"] },
+    "QrScanner": { "parts": ["root", "viewfinder", "feed", "corner", "scanLine", "placeholder", "placeholderIcon", "hint"], "props": ["disabled"] },
+    "CodeBlock": { "parts": ["root", "header", "title", "copy", "gutter", "line", "lineNumber", "token", "body", "code"], "props": ["lineNumbers", "wrap", "kind", "variant", "size"] },
+    "Composer": { "parts": ["root", "field", "placeholder", "attachment", "send"], "props": ["attachments", "busy"] },
+    "TreeGuides": { "parts": ["root", "line"], "props": ["tee"] },
+    "Unknown": { "parts": ["root", "label"], "props": [] }
+  }
+}

package/catalog/strings.json

@@ -0,0 +1,84 @@
+{
+  "$comment": "Round 1 (docs/round-1-contract.md §4): the built-in UI STRINGS every renderer shows — the copy no author writes (a Select's search placeholder, the calendar's month buttons, the copy button, the Pagination arrows' labels). Keys are the ids, values the English defaults. A renderer ships this table (generated into TS/Swift/Kotlin/Rust as STRING_IDS + STRING_DEFAULTS) and lets the HOST override any id per surface (`strings: {search: \"Suchen…\"}`); the catalog refers to an entry as `$string.<id>` in a prop default or a macro template (`$string.previous`), which the renderer resolves at bind time like a token. `{name}` placeholders are filled by the renderer (src/strings.ts formatString; a macro template uses `$fill` → the core `fill` function): a sentence is ONE id with placeholders, never concatenated fragments. Round 2 adds the names the renderers still hard-coded (`invalidValue` = a failed check without a message, `message` = the Composer field, `codeBlock` = an untitled CodeBlock, `dialog` = an untitled Dialog/Drawer, `table` = an uncaptioned Table, `carousel`/`slide` = the carousel's role descriptions, `resize` = a Resizable handle). EXP-1259 adds `closeTab` and `newTab` (the Tabs close glyph and + button). Append-only (round 1 dropped the unused fragment `of`). VAPP-162 adds the call buttons (`mute`, `unmute`, `speaker`, `speakerOff`, `endCall`), the Plan answers (`yes`, `no`), the MessageBubble delivery labels (`sending`, `sent`, `read`) and the QrScanner's `scanQrCode` + `cameraUnavailable`.",
+  "strings": {
+    "back": "Back",
+    "breadcrumb": "Breadcrumb",
+    "browse": "Browse",
+    "cameraUnavailable": "Camera unavailable",
+    "cancel": "Cancel",
+    "carousel": "Carousel",
+    "chartSummary": "Chart of {series}, values from {min} to {max}",
+    "choose": "Choose",
+    "clear": "Clear",
+    "close": "Close",
+    "closeTab": "Close {name}",
+    "codeBlock": "Code",
+    "collapse": "Collapse",
+    "confirm": "Confirm",
+    "copied": "Copied",
+    "copy": "Copy",
+    "decrement": "Decrease",
+    "dialog": "Dialog",
+    "dismiss": "Dismiss",
+    "dropFiles": "Drop files here",
+    "endCall": "End call",
+    "expand": "Expand",
+    "fileTooLarge": "File too large",
+    "fileTooLargeNamed": "{name}: File too large",
+    "increment": "Increase",
+    "invalidFields": "Check the highlighted fields",
+    "invalidValue": "Invalid value",
+    "loading": "Loading",
+    "menu": "Menu",
+    "message": "Message",
+    "more": "More",
+    "mute": "Mute",
+    "newTab": "New tab",
+    "next": "Next",
+    "nextMonth": "Next month",
+    "no": "No",
+    "noResults": "No results",
+    "optional": "Optional",
+    "pageOf": "Page {page} of {total}",
+    "pagination": "Pagination",
+    "previous": "Previous",
+    "previousMonth": "Previous month",
+    "ratingStar": "{value} of {max}",
+    "ratingValue": "Rated {value} of {max}",
+    "read": "Read",
+    "remove": "Remove",
+    "removeItem": "Remove {name}",
+    "required": "Required",
+    "resize": "Resize",
+    "scanQrCode": "Scan a QR code",
+    "search": "Search…",
+    "selectAll": "Select all",
+    "selectedCount": "{count} selected",
+    "selectRow": "Select row",
+    "send": "Send",
+    "sending": "Sending",
+    "sent": "Sent",
+    "showLess": "Show less",
+    "showMore": "Show more",
+    "slide": "Slide",
+    "sortAscending": "Sort ascending",
+    "sortByAscending": "{name}: Sort ascending",
+    "sortByDescending": "{name}: Sort descending",
+    "sortDescending": "Sort descending",
+    "sparklineSummary": "Trend from {first} to {last}, low {min}, high {max}",
+    "speaker": "Speaker",
+    "speakerOff": "Speaker off",
+    "stepCurrent": "Step {step} of {total}: {label}, current",
+    "stepDone": "Step {step} of {total}: {label}, completed",
+    "stepUpcoming": "Step {step} of {total}: {label}",
+    "stop": "Stop",
+    "submit": "Submit",
+    "table": "Table",
+    "today": "Today",
+    "unknownComponent": "Unknown component",
+    "unmute": "Unmute",
+    "unsupportedFile": "Unsupported file",
+    "unsupportedFileNamed": "{name}: Unsupported file",
+    "yes": "Yes"
+  }
+}

package/catalog/style.json

@@ -0,0 +1,180 @@
+{
+  "$comment": "VAPP-85: the `Box` style whitelist, verbatim from the VAPP-4 spike (`vapp_spike::WHITELIST` + the logical inline properties the spike added), extended by round 1 (docs/round-1-contract.md) — ONE source for the TS keys (`src/style.ts`), the JSON Schema (`core.schema.json#/$defs/style`) and the Swift/Kotlin/Rust key lists. Numbers are px (≡ pt ≡ dp); `length` also takes `\"N%\"`, `\"Npx\"` and `\"auto\"`; every value may be a token reference `$<group>.<name>` from tokens.json; a COLOUR (`backgroundColor`, `color`, `borderColor`, gradient stops) is ONLY a `$color.<name>` token (round 4, VAPP-103: a literal `#hex` ignores the theme's light and dark modes, so validateStyle refuses it; themes keep literals). `borderWidth` and the four per-side widths are the visual keys with layout effect (a number or `$border.<name>`, VAPP-92); `fontFamily` (VAPP-92) takes only `$type.family.<name>`; `transition` takes only `$motion.<name>` (the duration every opacity/colour/transform/size change animates with; nothing animates without it) and `transitionEasing` only `$ease.<name>`; `transform` is PAINT-ONLY (`translate(Xpx, Ypx)`, `scale(N)`, `rotate(Ndeg)`, space-separated, never layout); `backgroundGradient` = `{angle, stops: [{color, offset 0..1}]}` painted OVER `backgroundColor` (CSS order: the colour shows only through transparent stops); `visibility: hidden` keeps the box in layout and paints nothing (`display: none` removes it); `cursor` is a pointer-platform hint touch platforms ignore. CONDITIONS nest one level and apply in SOURCE ORDER after the base (write narrow-first): `@media` keys match the ONE grammar in `conditions.media` — `min-width`/`max-width`/`min-height`/`max-height` against the SURFACE box (`min-*` = `size >= N`, `max-*` = `size < N`; `N` = px or a `$breakpoint.<name>` token the theme resolves BEFORE matching), `orientation` of the surface box, `hover: hover|none` = a hover-capable pointer, `prefers-reduced-motion: reduce|no-preference` from the platform; the state keys `:hover`, `:focus-visible`, `:pressed` against the node's own interaction state, applied after every media block in that order (pressed wins). `src/style.ts resolveConditions` is the reference flattening and fixtures/style-conditions.json locks it. Still not in v1 (confirmed by the spike, kept by round 1): calc(), named grid lines, gridAutoFlow, justifyItems, order, zIndex (paint order = tree order, absolute nodes LAST among siblings, overlays stack by LAYER), per-side border colours (gpui paints ONE border colour per box; per-side WIDTHS are in), multi-value shorthands. After macro expansion a style VALUE may be a binding or a function call (a bound macro input, e.g. Progress fill width = percent{…}); the renderer resolves it at bind time and then applies it like an authored value; authors cannot write one (validateStyle refuses). Round 2 (docs/round-2-contract.md §2): `position: sticky` = relative in layout, then pinned inside the nearest scrolling ancestor (`overflow` scroll/auto, else the surface scroller) by its `top`/`bottom`/`left`/`right`/`inset*` offsets while its parent is in view; `backdropBlur` takes only `$blur.<name>` (blurs what is BEHIND the box through its translucent background; a platform without backdrop blur paints the background alone, so pair it with a translucent `backgroundColor`); `animation` names a keyframe set of `animations` (`animationDuration` = `$motion.<name>` only); `direction` may sit on ANY node and is inherited (flex rows, logical insets/paddings, `textAlign` start/end and mirrored glyphs follow the node's resolved direction).",
+  "layout": {
+    "display": { "enum": ["flex", "grid", "block", "none"] },
+    "flexDirection": { "enum": ["row", "column", "row-reverse", "column-reverse"] },
+    "flexWrap": { "enum": ["nowrap", "wrap", "wrap-reverse"] },
+    "justifyContent": { "enum": ["flex-start", "flex-end", "start", "end", "center", "stretch", "space-between", "space-around", "space-evenly"] },
+    "alignItems": { "enum": ["flex-start", "flex-end", "start", "end", "center", "stretch", "baseline"] },
+    "alignContent": { "enum": ["flex-start", "flex-end", "start", "end", "center", "stretch", "space-between", "space-around", "space-evenly"] },
+    "alignSelf": { "enum": ["flex-start", "flex-end", "start", "end", "center", "stretch", "baseline"] },
+    "justifySelf": { "enum": ["flex-start", "flex-end", "start", "end", "center", "stretch", "baseline"] },
+    "flexGrow": { "type": "number" },
+    "flexShrink": { "type": "number" },
+    "flexBasis": { "type": "length" },
+    "gap": { "type": "length" },
+    "rowGap": { "type": "length" },
+    "columnGap": { "type": "length" },
+    "direction": { "enum": ["ltr", "rtl"] },
+    "overflow": { "enum": ["visible", "hidden", "clip", "scroll", "auto"] },
+    "overflowX": { "enum": ["visible", "hidden", "clip", "scroll", "auto"] },
+    "overflowY": { "enum": ["visible", "hidden", "clip", "scroll", "auto"] },
+    "width": { "type": "length" },
+    "height": { "type": "length" },
+    "minWidth": { "type": "length" },
+    "minHeight": { "type": "length" },
+    "maxWidth": { "type": "length" },
+    "maxHeight": { "type": "length" },
+    "aspectRatio": { "type": "ratio" },
+    "position": { "enum": ["relative", "absolute", "sticky"] },
+    "top": { "type": "length" },
+    "right": { "type": "length" },
+    "bottom": { "type": "length" },
+    "left": { "type": "length" },
+    "inset": { "type": "length" },
+    "insetInlineStart": { "type": "length" },
+    "insetInlineEnd": { "type": "length" },
+    "insetBlockStart": { "type": "length" },
+    "insetBlockEnd": { "type": "length" },
+    "padding": { "type": "length" },
+    "paddingTop": { "type": "length" },
+    "paddingRight": { "type": "length" },
+    "paddingBottom": { "type": "length" },
+    "paddingLeft": { "type": "length" },
+    "paddingHorizontal": { "type": "length" },
+    "paddingVertical": { "type": "length" },
+    "paddingInlineStart": { "type": "length" },
+    "paddingInlineEnd": { "type": "length" },
+    "margin": { "type": "length" },
+    "marginTop": { "type": "length" },
+    "marginRight": { "type": "length" },
+    "marginBottom": { "type": "length" },
+    "marginLeft": { "type": "length" },
+    "marginHorizontal": { "type": "length" },
+    "marginVertical": { "type": "length" },
+    "marginInlineStart": { "type": "length" },
+    "marginInlineEnd": { "type": "length" },
+    "gridTemplateColumns": { "type": "tracks" },
+    "gridTemplateRows": { "type": "tracks" },
+    "gridTemplateAreas": { "type": "areas" },
+    "gridArea": { "type": "string" },
+    "gridColumn": { "type": "string" },
+    "gridRow": { "type": "string" }
+  },
+  "visual": {
+    "backgroundColor": { "type": "color" },
+    "backgroundGradient": { "type": "gradient" },
+    "color": { "type": "color" },
+    "borderWidth": { "type": "number", "layoutEffect": true },
+    "borderTopWidth": { "type": "number", "layoutEffect": true },
+    "borderRightWidth": { "type": "number", "layoutEffect": true },
+    "borderBottomWidth": { "type": "number", "layoutEffect": true },
+    "borderLeftWidth": { "type": "number", "layoutEffect": true },
+    "borderColor": { "type": "color" },
+    "borderStyle": { "enum": ["solid", "dashed", "dotted"] },
+    "borderRadius": { "type": "length" },
+    "borderTopLeftRadius": { "type": "length" },
+    "borderTopRightRadius": { "type": "length" },
+    "borderBottomRightRadius": { "type": "length" },
+    "borderBottomLeftRadius": { "type": "length" },
+    "opacity": { "type": "number" },
+    "boxShadow": { "type": "token", "group": "shadow" },
+    "fontSize": { "type": "length" },
+    "fontWeight": { "enum": [300, 400, 500, 600, 700, 800] },
+    "lineHeight": { "type": "length" },
+    "letterSpacing": { "type": "length" },
+    "textAlign": { "enum": ["left", "right", "center", "start", "end", "justify"] },
+    "textDecoration": { "enum": ["none", "underline", "line-through"] },
+    "textTransform": { "enum": ["none", "uppercase", "lowercase", "capitalize"] },
+    "fontStyle": { "enum": ["normal", "italic"] },
+    "fontFamily": { "type": "token", "group": "type.family" },
+    "transition": { "type": "token", "group": "motion" },
+    "transitionEasing": { "type": "token", "group": "ease" },
+    "transform": { "type": "transform" },
+    "visibility": { "enum": ["visible", "hidden"] },
+    "pointerEvents": { "enum": ["auto", "none"] },
+    "userSelect": { "enum": ["auto", "none", "text"] },
+    "cursor": { "enum": ["auto", "default", "pointer", "text", "not-allowed", "grab", "grabbing", "move", "col-resize", "row-resize"] },
+    "backdropBlur": { "type": "token", "group": "blur" },
+    "animation": { "enum": ["pulse", "spin", "fade-in", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "shimmer"] },
+    "animationDuration": { "type": "token", "group": "motion" }
+  },
+  "animations": {
+    "$comment": "Round 2 (docs/round-2-contract.md §2): the keyframes behind the `animation` key. Channels: `opacity` (multiplies the node's), `translateX`/`translateY` (px), `rotate` (deg), `scale`, applied OUTSIDE the node's own `transform` about the box centre; `band` = the shimmer highlight's position across the box (-1 = one box width before it, 1 = one after), painted over the content and clipped to the border box. Duration = the theme's `duration` token (or the node's `animationDuration`) × `factor`; `easing` applies PER keyframe segment (CSS) and is a `$ease` token or `linear`; `iterations` = a count or `infinite`. An animation starts when the node enters the tree (first paint, `visible` turning true, a template item appearing). Reduced motion: no animation, the node shows the keyframe at `rest` (0 = the first, 1 = the last; shimmer draws no band). Channels are PHYSICAL, like `transform`: `direction` never mirrors them (in rtl too, `slide-in-left` moves leftwards and the shimmer band sweeps left → right).",
+    "pulse": { "duration": "$motion.slow", "factor": 7, "easing": "$ease.standard", "iterations": "infinite", "rest": 0, "keyframes": [{ "offset": 0, "opacity": 1 }, { "offset": 0.5, "opacity": 0.5 }, { "offset": 1, "opacity": 1 }] },
+    "spin": { "duration": "$motion.slow", "factor": 4, "easing": "linear", "iterations": "infinite", "rest": 0, "keyframes": [{ "offset": 0, "rotate": 0 }, { "offset": 1, "rotate": 360 }] },
+    "fade-in": { "duration": "$motion.standard", "factor": 1, "easing": "$ease.decelerate", "iterations": 1, "rest": 1, "keyframes": [{ "offset": 0, "opacity": 0 }, { "offset": 1, "opacity": 1 }] },
+    "slide-in-up": { "duration": "$motion.standard", "factor": 1, "easing": "$ease.decelerate", "iterations": 1, "rest": 1, "keyframes": [{ "offset": 0, "opacity": 0, "translateY": 8 }, { "offset": 1, "opacity": 1, "translateY": 0 }] },
+    "slide-in-down": { "duration": "$motion.standard", "factor": 1, "easing": "$ease.decelerate", "iterations": 1, "rest": 1, "keyframes": [{ "offset": 0, "opacity": 0, "translateY": -8 }, { "offset": 1, "opacity": 1, "translateY": 0 }] },
+    "slide-in-left": { "duration": "$motion.standard", "factor": 1, "easing": "$ease.decelerate", "iterations": 1, "rest": 1, "keyframes": [{ "offset": 0, "opacity": 0, "translateX": 8 }, { "offset": 1, "opacity": 1, "translateX": 0 }] },
+    "slide-in-right": { "duration": "$motion.standard", "factor": 1, "easing": "$ease.decelerate", "iterations": 1, "rest": 1, "keyframes": [{ "offset": 0, "opacity": 0, "translateX": -8 }, { "offset": 1, "opacity": 1, "translateX": 0 }] },
+    "shimmer": { "duration": "$motion.slow", "factor": 5, "easing": "linear", "iterations": "infinite", "rest": 0, "keyframes": [{ "offset": 0, "band": -1 }, { "offset": 1, "band": 1 }], "band": { "color": "$color.background", "stops": [{ "offset": 0, "alpha": 0 }, { "offset": 0.5, "alpha": 0.5 }, { "offset": 1, "alpha": 0 }] } }
+  },
+  "conditions": {
+    "media": "^@media \\((min-width|max-width|min-height|max-height): (\\d+(\\.\\d+)?px|\\$breakpoint\\.[a-zA-Z0-9]+)\\)$|^@media \\(orientation: (portrait|landscape)\\)$|^@media \\(hover: (hover|none)\\)$|^@media \\(prefers-reduced-motion: (reduce|no-preference)\\)$",
+    "states": [":hover", ":focus-visible", ":pressed"],
+    "transform": "^((translate\\(-?\\d+(\\.\\d+)?px, -?\\d+(\\.\\d+)?px\\)|scale\\(-?\\d+(\\.\\d+)?\\)|rotate\\(-?\\d+(\\.\\d+)?deg\\))( (?=\\S)|$))+$"
+  },
+  "textShimmer": {
+    "$comment": "EXP-1324: the Text `shimmer` prop (a running TraceItem title) = packages/design-tokens motion.shimmer (shadcn's `shimmer` utility), copied here because the SDK imports nothing from the app (src/text-shimmer.test.ts keeps them equal). The glyphs are filled with a linear gradient at 90deg + `angleDeg` (CSS angle: 90deg = left → right): base = the text colour, highlight (dark mode) = the text colour in OKLCH at lightness min(1, max(`highlightLightnessMin`, L + `highlightLightnessBoost`)), same a/b, alpha min(1, alpha + `highlightAlphaBoost`); light mode = the text colour at alpha × `lightAlphaFactor`; mid = the 50% OKLab mix of the two, alpha-premultiplied. Stops: base @ 50% - spread, mid @ 50% - spread/2, highlight @ 50%, mid @ 50% + spread/2, base @ 50% + spread (spread = `spreadPx`). The gradient is 200% of the text box width + 2 × spread wide and slides linearly from CSS background-position `100% 0` (its right edge on the box's right edge) to `0 0` (its left edge on the box's left edge) over `durationMs`, forever; rtl reverses. Reduced motion = the plain text. src/text-shimmer.ts textShimmer(colour, dark) is the reference (the Rust core `text_shimmer`, FFI `text_shimmer_json`); fixtures/text-shimmer.json locks the colours.",
+    "durationMs": 2000,
+    "angleDeg": 20,
+    "spreadPx": 60,
+    "highlightLightnessMin": 0.8,
+    "highlightLightnessBoost": 0.4,
+    "highlightAlphaBoost": 0.4,
+    "lightAlphaFactor": 0.2
+  },
+  "voiceWave": {
+    "$comment": "NEW-77: the VoiceWave native (the EXP-1268 draft made exact): a microphone or speaker level drawn as three closed polar waves around one optional centre child. Per ring k (0 outer, 1 mid, 2 inner): r(t) = size × radius[k] + Σ_j amp_k / (j + 1) × band(k, j) × sin(harmonics[k][j] × t + (phase0[k] + phase) × (j + 1)), t = 2π i / steps for i = 0..steps (the last point repeats the first), x = size/2 + r cos t, y = size/2 + r sin t (y down). amp_k = ringAmp[k] × size / 200 × (activity listening | speaking: ampBase + ampLevel × level; thinking: thinkingAmp; idle | muted: 0). band(k, j) = bands[(3k + j) mod len] clamped to 0..1, or 1 when bands is empty or the activity is thinking; level is clamped to 0..1 and only the first maxBands bands count. phase = the elapsed seconds × phaseSpeed (rad/s) while listening, thinking or speaking; 0 when idle or muted and under reduced motion. Each ring is filled with its part colour at fillAlpha[k] and stroked at strokeAlpha[k], width max(1, strokeWidth[k] × size / 200); the root recipe's opacity applies to the whole wave. THE CHILD RULE: the core lays the one child out centred in the box at its own size (flex, centre, centre); childSize = childScale × size (lg and xl: childScaleLarge; 0 at `sm`, below 40 px); the painter draws the child scaled about the box centre by min(1, childSize / the child's longer edge), never up, and at childSize 0 keeps it in the tree but paints nothing (no hit target, hidden from assistive tech). voiceWaveChildBox(size, child) is that box; the fixture's `child` cases lock it and every painter measures its drawn child against them. src/voice-wave.ts voiceWave(...) is the reference (the Rust core `voice_wave`, FFI `voice_wave_json`); fixtures/voice-wave.json locks the points. VAPP-162: this is `variant: ring` (the default); `variant: bars` is the level meter of `bars` below (same activity, level, bands and phase inputs).",
+    "steps": 120,
+    "radius": [0.33, 0.3, 0.26],
+    "harmonics": [[11, 17, 23], [9, 15, 21], [7, 13]],
+    "phase0": [0.4, 1.9, 3.1],
+    "ringAmp": [1, 0.85, 0.45],
+    "ampBase": 2,
+    "ampLevel": 6,
+    "thinkingAmp": 2.5,
+    "phaseSpeed": 0.9,
+    "fillAlpha": [0.1, 0.1, 0.15],
+    "strokeAlpha": [0.7, 0.8, 0.4],
+    "strokeWidth": [1.5, 1.5, 1],
+    "childScale": 0.3,
+    "childScaleLarge": 0.22,
+    "maxBands": 8,
+    "bars": {
+      "$comment": "VAPP-162: the `bars` variant (a horizontal level meter, no child; a child is kept in the tree but never painted, like `sm`): `count` rounded vertical bars side by side, sized per `sizes[size]` = {height, barWidth, gap} (the root box = count \u00d7 barWidth + (count \u2212 1) \u00d7 gap wide, `height` tall: the root recipe's `variant: bars` rules). Bar i (0-based): drive d = listening | speaking: (ampBase + ampLevel \u00d7 level) / (ampBase + ampLevel); thinking: thinkingAmp / (ampBase + ampLevel); idle | muted: 0; band b = bands[i mod len] clamped (1 when bands is empty or thinking); envelope e = 1 \u2212 envelope \u00d7 |2i / (count \u2212 1) \u2212 1| (the middle bars stand tallest); shape s = 0.5 + 0.5 \u00d7 sin(shapeFreq \u00d7 i + phase \u00d7 (1 + (i mod 3) \u00d7 0.5)) with the ring's phase (voiceWavePhase: 0 when idle, muted or under reduced motion = a static meter); fraction f = minFraction + (1 \u2212 minFraction) \u00d7 d \u00d7 b \u00d7 e \u00d7 (shapeBase + (1 \u2212 shapeBase) \u00d7 s); the bar is height \u00d7 f tall (rounded to 0.01), centred vertically (y = (height \u2212 h) / 2), at x = i \u00d7 (barWidth + gap), corner radius barWidth / 2, filled with the `bar` part colour at the root recipe's opacity. voiceWaveBars(input) is the reference; fixtures/voice-wave.json `bars` cases lock it.",
+      "count": 20,
+      "minFraction": 0.12,
+      "envelope": 0.5,
+      "shapeFreq": 1.7,
+      "shapeBase": 0.35,
+      "sizes": {
+        "sm": { "height": 16, "barWidth": 2, "gap": 2 },
+        "md": { "height": 24, "barWidth": 3, "gap": 3 },
+        "lg": { "height": 40, "barWidth": 4, "gap": 4 },
+        "xl": { "height": 56, "barWidth": 5, "gap": 5 }
+      }
+    }
+  },
+  "qrCode": {
+    "$comment": "VAPP-162: the QrCode native. THE MATRIX COMES FROM THE CORE: src/qr-code.ts qrMatrix(value, level) (a port of Project Nayuki's QR Code generator, MIT: byte mode over the value's UTF-8 bytes, the smallest version 1\u201340 that fits at the given ECC level, the level kept exact (no boost), the mask with the lowest penalty) \u2192 {size n, rows: n strings of '1' (dark) / '0' (light)}, no quiet zone; the Rust core ports it and fixtures/qr-code.json locks every matrix bit. An empty value, or one longer than maxValueBytes UTF-8 bytes at level L (fewer at higher levels: whatever version 40 holds), has NO matrix (`qrMatrix` returns null): the painter shows the plate empty with the label, never throws. PAINT: the root is a column (centred, gap labelGap) of the plate and the label. The plate is `size` px square (the prop, default 160) with radius = the plate recipe's borderRadius; it holds the matrix inside a quiet zone of quietZone modules on every side, so module = size / (n + 2 \u00d7 quietZone) px (fractional; painters snap module edges to device pixels, never round the module itself, so the code keeps its exact outer size). DARK MODULES ON A LIGHT PLATE ALWAYS: of the two resolved recipe colours (plate and module) the lighter one (higher relative luminance) fills the plate and the darker one the modules, so a dark theme still scans. The label (when given) is a caption Text, muted, centred, under the plate, and the accessibility label of the img.",
+    "quietZone": 4,
+    "labelGap": 8,
+    "maxValueBytes": 2953
+  },
+  "qrScanner": {
+    "$comment": "VAPP-162: the QrScanner native = the VIEWFINDER CHROME; THE CAMERA IS HOST-OWNED (like FileUpload's bytes). The renderer asks its host for a camera feed through a RENDERER-LEVEL hook each lane defines in its own package API (never catalog/host.json): React/Solid/element a `qrScanner` host option, SwiftUI an environment value, Compose a CompositionLocal, gpui a host trait; the host shows its live feed inside `feed`, decodes codes of the given `formats` and reports a decoded string, which the renderer dispatches as `scanned {value}` (once per distinct value until the value changes or the scanner re-mounts; `disabled` stops reporting). Geometry: the root is a column (centred, gap hintGap); the viewfinder is a square (aspectRatio 1) as wide as the root up to maxWidth px, radius = the viewfinder recipe's borderRadius, clipping; `feed` fills it (the host's video; without one the `feed` recipe colour at feedAlpha alpha); four `corner` brackets sit at the inside corners, each two strokes cornerLength px long and cornerStroke px wide in the corner recipe colour (rounded caps, the outer edge following the viewfinder radius); the `scanLine` is a scanLineHeight px bar inset scanLineInset px from the left and right edges, sweeping top \u2192 bottom \u2192 top over sweepMs (ease standard, alternate) while a feed shows; reduce motion (or disabled) = the line static at the vertical centre. No host camera = no feed and no line: the `placeholderIcon` (concept ui-scan = Lucide scan-line) placeholderIconSize px centred in the placeholderIcon colour and the built-in string `cameraUnavailable` as a caption under it. The `hint` (when given) is a muted Text centred under the viewfinder.",
+    "maxWidth": 280,
+    "aspectRatio": 1,
+    "cornerLength": 24,
+    "cornerStroke": 3,
+    "feedAlpha": 0.06,
+    "scanLineHeight": 2,
+    "scanLineInset": 16,
+    "sweepMs": 2000,
+    "hintGap": 12,
+    "placeholderIcon": "ui-scan",
+    "placeholderIconSize": 32
+  }
+}