@exponential_app/eui 0.2.1 → 0.4.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.",
+  "$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,12 +15,14 @@
     "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"] },
-    "Carousel": { "parts": ["root", "page", "indicator", "controls", "previous", "next"], "props": ["loop", "indicators"] },
+    "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"] },
     "Accordion": { "parts": ["root", "item", "trigger", "content", "count"], "props": ["type"] },

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",
@@ -32,6 +32,8 @@
     "menu": "Menu",
     "message": "Message",
     "more": "More",
+    "morePictures": "+{count}",
+    "morePicturesLabel": "{alt}, {count} more",
     "mute": "Mute",
     "newTab": "New tab",
     "next": "Next",
@@ -39,8 +41,13 @@
     "no": "No",
     "noResults": "No results",
     "optional": "Optional",
+    "outline": "Outline",
+    "outlineRow": "{title}, {count}",
+    "pageCounter": "{page} / {total}",
     "pageOf": "Page {page} of {total}",
     "pagination": "Pagination",
+    "pause": "Pause",
+    "play": "Play",
     "previous": "Previous",
     "previousMonth": "Previous month",
     "ratingStar": "{value} of {max}",
@@ -79,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
+    }
   }
 }