@exponential_app/eui 0.3.0 → 0.4.0

package/docs/components.generated.json

@@ -1457,6 +1457,117 @@
       },
       "macro": null
     },
+    {
+      "name": "ZoomableImage",
+      "kind": "native",
+      "group": "media",
+      "lite": false,
+      "specimenId": "exponential-ui-zoomable-image",
+      "description": "A picture that zooms (pinch, ⌘-wheel, double-tap) and pans.",
+      "children": "none",
+      "slots": [],
+      "events": [
+        "zoom",
+        "tap"
+      ],
+      "basic": [],
+      "props": [
+        {
+          "name": "src",
+          "type": "url",
+          "required": true,
+          "bindable": true,
+          "responsive": false,
+          "description": "The image URL."
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "required": true,
+          "bindable": true,
+          "responsive": false,
+          "description": "The accessibility description."
+        },
+        {
+          "name": "naturalWidth",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Pixel width."
+        },
+        {
+          "name": "naturalHeight",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Pixel height."
+        },
+        {
+          "name": "initial",
+          "type": "auto | fit | fitWidth | actual",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": "auto",
+          "description": "auto = fitWidth when tall."
+        },
+        {
+          "name": "maxScale",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": 8,
+          "description": "Largest zoom."
+        },
+        {
+          "name": "controls",
+          "type": "auto | always | none",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": "auto",
+          "description": "The zoom pill."
+        },
+        {
+          "name": "scale",
+          "type": "number",
+          "required": false,
+          "bindable": true,
+          "responsive": false,
+          "description": "1 = 100%."
+        },
+        {
+          "name": "style",
+          "type": "style",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Extra Box styles for the viewport."
+        }
+      ],
+      "accessibility": {
+        "role": "img",
+        "notes": "img (alt = name), focusable; the zoom pill's buttons are named `$string.zoomOut`, `$string.zoomIn`, `$string.zoomToFit` (pressed while at rest) and the percent button `$string.zoomLevel` (its value = the percent, opening a menu whose first row is `$string.zoomFit`)",
+        "keys": [
+          "+ / =: zoom in a step",
+          "-: zoom out a step",
+          "0: back to the opening zoom",
+          "1: 100%"
+        ]
+      },
+      "example": {
+        "id": "example",
+        "component": "ZoomableImage",
+        "src": "https://example.com/screenshot.png",
+        "alt": "Screenshot",
+        "naturalWidth": 1440,
+        "naturalHeight": 900
+      },
+      "macro": null
+    },
     {
       "name": "Icon",
       "kind": "native",
@@ -1992,8 +2103,8 @@
             "value": "issue"
           },
           {
-            "label": "Run",
-            "value": "run"
+            "label": "Session",
+            "value": "session"
           }
         ],
         "value": "issue"
@@ -4129,7 +4240,7 @@
       "group": "data",
       "lite": false,
       "specimenId": "exponential-ui-table",
-      "description": "A data table of typed columns: sorting, selection, widths, alignment, windowed; `slot` columns render components.",
+      "description": "A table of typed columns: sorting, selection, widths, alignment, windowed; `slot` columns render components.",
       "children": "none",
       "slots": [
         "*"
@@ -4233,7 +4344,7 @@
           "bindable": false,
           "responsive": false,
           "default": false,
-          "description": "Keeps the header visible while the rows scroll."
+          "description": "Pins the header while rows scroll."
         }
       ],
       "accessibility": {
@@ -6927,6 +7038,283 @@
         "status": "read"
       },
       "macro": "Expands to natives (see catalog/macros.json); the theme styles its parts by recipe MessageBubble/<part>."
+    },
+    {
+      "name": "Motion",
+      "kind": "native",
+      "group": "media",
+      "lite": true,
+      "specimenId": "exponential-ui-motion",
+      "description": "A vector animation (Lottie-compatible) drawn identically everywhere: loaders, success states, illustrated empty states, small explainers.",
+      "children": "none",
+      "slots": [],
+      "events": [
+        "press",
+        "hover",
+        "visible",
+        "complete",
+        "state"
+      ],
+      "basic": [],
+      "props": [
+        {
+          "name": "layers",
+          "type": "[object]",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "The animation, top layer first, in the composition's px (origin top-left). Layer: {type: shape|solid|null|precomp|text, id?, parent?: id, in?/out? ms, transform?: {anchor, position [x,y], scale [100,100] %, rotation deg clockwise, opacity 0–100}, shapes: […], matte?: {source: id, mode: alpha|luma}, masks?: [{path, mode: add|subtract|intersect}]}. Shapes draw top first; a style paints every shape before it in its group: rect {position (centre), size, radius}, ellipse {position, size}, star|polygon {points, outerRadius, innerRadius}, path {d: SVG path data}; fill {color}, stroke {color, width, cap, join, dash: [len, gap]}, gradient-fill {kind: linear|radial, start, end, stops: [[0, colour], [1, colour]]}; trim {start, end, offset} (percent, draw-on lines), repeater {copies, transform}, round-corners {radius}; group {shapes, transform}. Colours: $color.* tokens (follow light/dark), #hex, or {light, dark}. Animate any value: {keys: [{t: ms, v: value, ease: linear|ease-in|ease-out|ease-in-out|hold|[x1,y1,x2,y2]}, …]}; tokens cannot animate. Keep it small; loops end on their first pose. No expressions."
+        },
+        {
+          "name": "size",
+          "type": "[number]",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "The composition [width, height] px (with layers)."
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Length in ms (with layers)."
+        },
+        {
+          "name": "fps",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": 60,
+          "description": "Frames per second."
+        },
+        {
+          "name": "assets",
+          "type": "object",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Precomps {id: {layers}}."
+        },
+        {
+          "name": "markers",
+          "type": "[object]",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Named segments [{name, time, duration}] ms."
+        },
+        {
+          "name": "lottie",
+          "type": "object",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Lottie JSON instead of layers (no expressions)."
+        },
+        {
+          "name": "src",
+          "type": "url",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "An attached .json or .lottie instead of layers."
+        },
+        {
+          "name": "autoplay",
+          "type": "boolean",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": true,
+          "description": "Plays when visible; false shows the poster."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": true,
+          "description": "Repeats; false plays once and holds."
+        },
+        {
+          "name": "plays",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Plays this many times (overrides loop)."
+        },
+        {
+          "name": "direction",
+          "type": "forward | reverse | alternate",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": "forward",
+          "description": "Forward, reverse, or back and forth."
+        },
+        {
+          "name": "speed",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": 1,
+          "description": "Speed multiplier."
+        },
+        {
+          "name": "segment",
+          "type": "[number]",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Plays only [from, to] ms."
+        },
+        {
+          "name": "marker",
+          "type": "string",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Plays only this marker."
+        },
+        {
+          "name": "progress",
+          "type": "number",
+          "required": false,
+          "bindable": true,
+          "responsive": false,
+          "description": "Scrubs (0–1) instead of playing."
+        },
+        {
+          "name": "play",
+          "type": "boolean",
+          "required": false,
+          "bindable": true,
+          "responsive": false,
+          "default": true,
+          "description": "Pauses while false."
+        },
+        {
+          "name": "poster",
+          "type": "number",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "The still frame (ms) for reduced motion and before play."
+        },
+        {
+          "name": "fit",
+          "type": "contain | cover | fill",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": "contain",
+          "description": "How it fills the box."
+        },
+        {
+          "name": "slots",
+          "type": "object",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Lottie slot overrides {slotId: value}."
+        },
+        {
+          "name": "stateMachine",
+          "type": "object",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "A dotLottie state machine driving playback (a .lottie src brings its own)."
+        },
+        {
+          "name": "inputs",
+          "type": "object",
+          "required": false,
+          "bindable": true,
+          "responsive": false,
+          "description": "State-machine inputs {name: value}; bind to drive states from data."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "What it shows, for screen readers."
+        },
+        {
+          "name": "style",
+          "type": "style",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "Extra Box styles for the box."
+        }
+      ],
+      "accessibility": {
+        "role": "img",
+        "notes": "img named by label; decorative (hidden) without one; with on.press it is a button (focusable, named by label) and its state machine gets the click",
+        "keys": [
+          "Enter/Space: press (with on.press)"
+        ]
+      },
+      "example": {
+        "id": "example",
+        "component": "Motion",
+        "size": [
+          48,
+          48
+        ],
+        "duration": 1000,
+        "layers": [
+          {
+            "type": "shape",
+            "transform": {
+              "position": [
+                24,
+                24
+              ],
+              "rotation": {
+                "keys": [
+                  {
+                    "t": 0,
+                    "v": 0
+                  },
+                  {
+                    "t": 1000,
+                    "v": 360
+                  }
+                ]
+              }
+            },
+            "shapes": [
+              {
+                "type": "ellipse",
+                "size": [
+                  36,
+                  36
+                ]
+              },
+              {
+                "type": "trim",
+                "end": 70
+              },
+              {
+                "type": "stroke",
+                "color": "$color.primary",
+                "width": 4
+              }
+            ]
+          }
+        ]
+      },
+      "macro": null
     }
   ]
 }

package/docs/round-6-contract.md

@@ -65,9 +65,11 @@ group box (hosts draw none).
 
 Both only with TWO OR MORE pages (like the controls row).
 
-- `counter: true` = a pill over the TRACK's top-start corner (mirrored under
-  RTL), inset `$spacing.sm` (8) from the top and the start edge, above the
-  pages, never intercepting a press or a swipe: part `counter`, text
+- `counter: true` = a pill over the TRACK's top-END corner (mirrored under
+  RTL = top-left), inset `$spacing.sm` (8) from the top and the end edge,
+  above the pages (the end corner keeps it off the page's own heading, which
+  starts at the top-start corner, like a media gallery's counter), never
+  intercepting a press or a swipe: part `counter`, text
   `$string.pageCounter` {page: current + 1, total: n}, hidden from AT (each
   page is already `page i of n`). Neutral: height 20, padding-x sm, radius
   full, fill `#0000008c`, text `#ffffff` xs medium, tabular figures.

package/docs/themes.generated.json

@@ -2627,6 +2627,23 @@
         "fit"
       ]
     },
+    {
+      "name": "ZoomableImage",
+      "kind": "native",
+      "parts": [
+        "root",
+        "image",
+        "pill",
+        "zoomOut",
+        "percent",
+        "zoomIn",
+        "divider",
+        "fit"
+      ],
+      "props": [
+        "controls"
+      ]
+    },
     {
       "name": "Icon",
       "kind": "native",
@@ -3679,6 +3696,16 @@
         "label"
       ],
       "props": []
+    },
+    {
+      "name": "Motion",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "fit"
+      ]
     }
   ]
 }

package/fixtures/bind-time.json

@@ -612,6 +612,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -670,6 +671,7 @@
               "display": "flex",
               "flexDirection": "row",
               "alignItems": "stretch",
+              "gap": "$spacing.lg",
               "width": "100%",
               "minHeight": 0
             },
@@ -755,6 +757,7 @@
               "display": "flex",
               "flexDirection": "row",
               "alignItems": "stretch",
+              "gap": "$spacing.lg",
               "width": "100%",
               "minHeight": 0
             },
@@ -838,6 +841,7 @@
               "display": "flex",
               "flexDirection": "row",
               "alignItems": "stretch",
+              "gap": "$spacing.lg",
               "width": "100%",
               "minHeight": 0
             },