@exponential_app/eui 0.3.0 → 0.4.0

package/catalog/layout.json

@@ -1,5 +1,5 @@
 {
-  "$comment": "Round 2 (docs/round-2-contract.md §7): the layout NUMBERS every painter shares where no theme token decides (px unless noted). `windowThreshold` = items past which List and Table window; `windowOverscan` = items rendered beyond each viewport edge; `resizeStep` = percentage points per arrow key on a Resizable handle; `panelMin` = a panel's min (percent) when unset; `resizeHandleHit` = a handle's hit area across its hairline; `fieldIntrinsicWidth` = the max-content width of a text field (Input, Textarea, NumberField, ChipInput: never the browser's `size` default) — picker triggers (Select, DatePicker, DateRangePicker, TimePicker) size to their content; `mediaIntrinsicWidth` = the max-content width of an Image/Video without a width (its min-content is 0); `mediaAspectRatio` = width/height of an Image without `aspectRatio` or a height (Video: its `aspectRatio` default); `treeGuideColumn` = one TreeGuides gutter column (the recipe's `line` width is the STROKE; round 3: 14, the ×4 app indent, the elbow lands on the parent's lead glyph); `treeGuideRadius` = the elbow's corner radius; `treeGuideBridge` = how far the guide verticals overshoot the row's TOP edge (paint only) so a Section's hairline divider never breaks the line. EXP-1259 (packages/domain-contract/fixtures/feedback-states.json + search-list.json): `pendingDelayMs` = how long a `loading` Button waits before it shows the spinner and its `pendingLabel` (a fast action never flashes; presses are refused at once); `skeletonPulseMs` / `skeletonOpacityLow` / `skeletonOpacityHigh` = the placeholder's ONE opacity pulse (low → high → low, ease-in-out), `skeletonReducedOpacity` = its static opacity under reduce motion; `searchListFade` = the bottom fade over a SearchList (or a searchable submenu) while more rows sit below. Generated into every target; src/layout.ts reads it.",
+  "$comment": "Round 2 (docs/round-2-contract.md §7): the layout NUMBERS every painter shares where no theme token decides (px unless noted). `windowThreshold` = items past which List and Table window; `windowOverscan` = items rendered beyond each viewport edge; `resizeStep` = percentage points per arrow key on a Resizable handle; `panelMin` = a panel's min (percent) when unset; `resizeHandleHit` = a handle's hit area across its hairline; `fieldIntrinsicWidth` = the max-content width of a text field (Input, Textarea, NumberField, ChipInput: never the browser's `size` default) — picker triggers (Select, DatePicker, DateRangePicker, TimePicker) size to their content; `mediaIntrinsicWidth` = the max-content width of an Image/Video without a width (its min-content is 0); `mediaAspectRatio` = width/height of an Image without `aspectRatio` or a height (Video: its `aspectRatio` default); `treeGuideColumn` = one TreeGuides gutter column (the recipe's `line` width is the STROKE; round 3: 14, the ×4 app indent, the elbow lands on the parent's lead glyph); `treeGuideRadius` = the elbow's corner radius; `treeGuideBridge` = how far the guide verticals overshoot the row's TOP edge (paint only) so a Section's hairline divider never breaks the line. EXP-1259 (packages/domain-contract/fixtures/feedback-states.json + search-list.json): `pendingDelayMs` = how long a `loading` Button waits before it shows the spinner and its `pendingLabel` (a fast action never flashes; presses are refused at once); `skeletonPulseMs` / `skeletonOpacityLow` / `skeletonOpacityHigh` = the placeholder's ONE opacity pulse (low → high → low, ease-in-out), `skeletonReducedOpacity` = its static opacity under reduce motion; `searchListFade` = the bottom fade over a SearchList (or a searchable submenu) while more rows sit below. EXP-1548: `tableColumnMin` = the narrowest a Table column without a `width` gets; a table whose columns need more than its box scrolls horizontally. Generated into every target; src/layout.ts reads it.",
   "windowThreshold": 50,
   "windowOverscan": 5,
   "resizeStep": 10,
@@ -16,5 +16,6 @@
   "skeletonOpacityLow": 0.45,
   "skeletonOpacityHigh": 0.9,
   "skeletonReducedOpacity": 0.6,
-  "searchListFade": 24
+  "searchListFade": 24,
+  "tableColumnMin": 120
 }

package/catalog/limits.json

@@ -5,5 +5,14 @@
   "maxMessageBytes": 4194304,
   "maxTemplateItems": 10000,
   "maxPointerBytes": 1024,
-  "maxPointerSegments": 64
+  "maxPointerSegments": 64,
+  "motion": {
+    "$comment": "EXP-1584/1602: the eUI Motion (Lottie) limits, enforced by the one engine (apps/desktop/crates/eui-motion, src/validate.rs Limits) on every renderer through its WASM and uniffi builds. A source past maxBytes (UTF-8 JSON), maxShapes (shape items: objects with a string `ty` inside a layer's `shapes` or a group's `it`) or maxSeconds ((op − ip) / fr) is refused with an issue (`limit-bytes`, `limit-shapes`, `limit-duration`; expressions are refused too: `expression`); maxVertices = path vertices in one sampled frame (checked per frame by the player, not by the validator); maxFps = the highest frame rate a player samples at; maxPlayingPerSurface = Motion components one surface animates at once. Cases: fixtures/motion-validate.json.",
+    "maxBytes": 2097152,
+    "maxShapes": 5000,
+    "maxVertices": 100000,
+    "maxSeconds": 120,
+    "maxFps": 60,
+    "maxPlayingPerSurface": 8
+  }
 }

package/catalog/macros.json

@@ -2025,6 +2025,7 @@
             }
           },
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },

package/catalog/recipes.json

@@ -1,5 +1,5 @@
 {
-  "$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. EXP-1495 (docs/round-6-contract.md): Carousel gains `counter` (prop + part) and the `thumbnails` strip (parts `thumbnails`, `thumbnail`, state `selected` = the current page).",
+  "$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. EXP-1495 (docs/round-6-contract.md): Carousel gains `counter` (prop + part) and the `thumbnails` strip (parts `thumbnails`, `thumbnail`, state `selected` = the current page). EXP-1586: ZoomableImage is new (the picture `image` + THE zoom pill: `pill`, `zoomOut`, `percent`, `zoomIn`, `divider`, `fit`; `fit` reports `selected` while the view is at rest).",
   "states": ["hover", "pressed", "focus", "disabled", "checked", "open", "selected", "invalid", "dragover"],
   "keys": [
     "backgroundColor", "color", "borderColor", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderStyle",
@@ -15,11 +15,13 @@
     "Text": { "parts": ["root"], "props": ["variant", "tone"] },
     "Markdown": { "parts": ["root", "paragraph", "heading", "link", "code", "codeBlock", "quote", "table", "listItem"], "props": [] },
     "Image": { "parts": ["root", "fallback"], "props": ["fit"] },
+    "Motion": { "parts": ["root"], "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"] },
+    "ZoomableImage": { "parts": ["root", "image", "pill", "zoomOut", "percent", "zoomIn", "divider", "fit"], "props": ["controls"] },
     "Carousel": { "parts": ["root", "page", "indicator", "controls", "previous", "next", "counter", "thumbnails", "thumbnail"], "props": ["loop", "indicators", "counter"] },
     "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"] },

package/catalog/strings.json

@@ -1,5 +1,5 @@
 {
-  "$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`.",
+  "$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`. EXP-1586 adds the ZoomableImage pill (`zoomIn`, `zoomOut`, `zoomToFit`, `zoomLevel` = the percent button's label, `zoomFit` = its Menu's Fit row).",
   "strings": {
     "back": "Back",
     "breadcrumb": "Breadcrumb",
@@ -46,6 +46,8 @@
     "pageCounter": "{page} / {total}",
     "pageOf": "Page {page} of {total}",
     "pagination": "Pagination",
+    "pause": "Pause",
+    "play": "Play",
     "previous": "Previous",
     "previousMonth": "Previous month",
     "ratingStar": "{value} of {max}",
@@ -84,6 +86,11 @@
     "unmute": "Unmute",
     "unsupportedFile": "Unsupported file",
     "unsupportedFileNamed": "{name}: Unsupported file",
-    "yes": "Yes"
+    "yes": "Yes",
+    "zoomFit": "Fit",
+    "zoomIn": "Zoom in",
+    "zoomLevel": "Zoom level",
+    "zoomOut": "Zoom out",
+    "zoomToFit": "Zoom to fit"
   }
 }

package/catalog/style.json

@@ -176,5 +176,26 @@
     "hintGap": 12,
     "placeholderIcon": "ui-scan",
     "placeholderIconSize": 32
+  },
+  "zoomableImage": {
+    "$comment": "EXP-1586: the ZoomableImage native. THE MATHS COMES FROM THE CORE: src/zoom.ts (the Rust core's `zoom` ports it; fixtures/zoom.json locks it). THE BOX: as wide as its parent; its height = the style height, else width \u00d7 naturalHeight / naturalWidth (capped at the width for a TALL picture, so a full-page capture opens as a landscape window onto its top), else 16:9; the picture clips to it. A view = {scale, x, y}: scale = displayed px per image px (1 = 100%: one image pixel per point), x/y = the picture's top-left in the viewport. FIT = min(1, vw/iw, vh/ih) (never upscales) = the minimum scale; the maximum = max(fit, maxScale). REST = the scale it opens at: `fit`, `fitWidth` = min(1, vw/iw), `actual` = 1, `auto` = fitWidth when the picture is TALL (w/h < tallAspect) else fit. An axis where the scaled picture is no larger than the viewport is CENTRED; otherwise x is clamped to [vw \u2212 sw, 0] (no letterbox shows); rest views of a tall picture start at the top. Zoom keeps the anchor point fixed (the cursor, the fingers' midpoint, the double-tap point, the viewport centre for keys and the pill). Wheel with \u2318/ctrl (or a trackpad pinch) = factor exp(\u2212deltaY \u00d7 wheelRate) (lines \u00d7 wheelLinePx first); a plain wheel PANS. Steps (+ / \u2212 / the pill) = the next `presets` entry strictly above / below the current scale (fit joins the ladder), clamped. Double tap / click: at rest \u2192 max(1, 2 \u00d7 rest) capped at the max, about the point; otherwise \u2192 the rest view. Keys: + = step up, \u2212 = step down, 0 = the rest view, 1 = 100% about the centre. Drag past an edge = the overshoot through rubberBand(o, d) = (1 \u2212 1 / (o \u00d7 rubber / d + 1)) \u00d7 d (d = the viewport's extent on that axis), released = the clamped view (sprung with motion.standard; reduced motion snaps). A pinch past the min/max rubber-bands the scale the same way (d = the limit). Mouse-drag momentum: v(t) = v0 \u00d7 e^(\u2212t/momentumTauMs), travel = v0 \u00d7 \u03c4 \u00d7 (1 \u2212 e^(\u2212t/\u03c4)), stopping at the edges; touch and trackpads use the platform's own inertia. Pan ROOM = an axis whose scaled picture is larger than the viewport: a horizontal swipe with no x room belongs to the host (paging); with room the picture pans. A new src = the rest view; a resize at rest = the new rest view, zoomed = the same scale about the viewport centre, clamped. THE PILL (controls auto/always): one glass capsule bottom-centre `pill.inset` above the picture's bottom edge: Button ghost icon-sm `ui-minus`, the percent (round(scale \u00d7 100) + '%', tabular, a ghost button opening THE Menu of `menuPresets` (0 = Fit, the rest view; outside [min, max] dropped)), Button ghost icon-sm `ui-add`, a hairline divider, Button ghost icon-sm `ui-fullscreen` (pressed = the rest view; drawn ACTIVE while at rest). \u2212 is disabled at the min, + at the max. `auto` shows it on appear and hides it autoHideMs after the last pointer move / zoom / focus inside (kept while hovered or focused; a touch tap on the picture toggles it); `none` never draws it.",
+    "tallAspect": 0.3333333333333333,
+    "maxScale": 8,
+    "presets": [0.25, 0.33, 0.5, 0.67, 1, 1.5, 2, 3, 4, 6, 8],
+    "menuPresets": [0, 0.5, 1, 2, 4],
+    "doubleTapFactor": 2,
+    "wheelRate": 0.002,
+    "wheelLinePx": 16,
+    "rubber": 0.55,
+    "momentumTauMs": 325,
+    "autoHideMs": 2000,
+    "pill": {
+      "height": 36,
+      "inset": 16,
+      "padding": 4,
+      "gap": 2,
+      "percentMinWidth": 56,
+      "dividerHeight": 16
+    }
   }
 }