@exponential-at/ui 0.0.0-stage → 0.1.0

package/catalog/recipes.json

@@ -0,0 +1,61 @@
+{
+  "$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.",
+  "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"] },
+    "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"], "props": ["type", "variant", "size", "fill"] },
+    "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"] },
+    "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"] },
+    "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,72 @@
+{
+  "$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`).",
+  "strings": {
+    "back": "Back",
+    "breadcrumb": "Breadcrumb",
+    "browse": "Browse",
+    "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",
+    "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",
+    "newTab": "New tab",
+    "next": "Next",
+    "nextMonth": "Next month",
+    "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}",
+    "remove": "Remove",
+    "removeItem": "Remove {name}",
+    "required": "Required",
+    "resize": "Resize",
+    "search": "Search…",
+    "selectAll": "Select all",
+    "selectedCount": "{count} selected",
+    "selectRow": "Select row",
+    "send": "Send",
+    "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}",
+    "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",
+    "unsupportedFile": "Unsupported file",
+    "unsupportedFileNamed": "{name}: Unsupported file"
+  }
+}

package/catalog/style.json

@@ -0,0 +1,128 @@
+{
+  "$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
+  }
+}