@exponential_app/eui 0.2.1 → 0.4.0

package/generated/core.descriptions.json

@@ -487,6 +487,44 @@
         "aspectRatio": 1.7777778
       }
     },
+    "ZoomableImage": {
+      "props": {
+        "src": {
+          "description": "The image URL."
+        },
+        "alt": {
+          "description": "The accessibility description."
+        },
+        "naturalWidth": {
+          "description": "Pixel width."
+        },
+        "naturalHeight": {
+          "description": "Pixel height."
+        },
+        "initial": {
+          "description": "auto = fitWidth when tall."
+        },
+        "maxScale": {
+          "description": "Largest zoom."
+        },
+        "controls": {
+          "description": "The zoom pill."
+        },
+        "scale": {
+          "description": "1 = 100%."
+        },
+        "style": {
+          "description": "Extra Box styles for the viewport."
+        }
+      },
+      "description": "A picture that zooms (pinch, ⌘-wheel, double-tap) and pans.",
+      "example": {
+        "src": "https://example.com/screenshot.png",
+        "alt": "Screenshot",
+        "naturalWidth": 1440,
+        "naturalHeight": 900
+      }
+    },
     "Icon": {
       "props": {
         "name": {
@@ -605,6 +643,12 @@
         },
         "indicators": {
           "description": "Shows the page dots."
+        },
+        "counter": {
+          "description": "Shows `i / n`."
+        },
+        "thumbnails": {
+          "description": "A thumbnail URL per page."
         }
       },
       "description": "A horizontally paging scroller; each child is one page.",
@@ -613,6 +657,37 @@
         "indicators": true
       }
     },
+    "Mosaic": {
+      "props": {
+        "pictures": {
+          "description": "The pictures in order."
+        },
+        "label": {
+          "description": "The a11y label."
+        }
+      },
+      "description": "Pictures: halves, or one large + two small with `+N`; press fires `select {index}`.",
+      "example": {
+        "pictures": [
+          {
+            "src": "https://example.com/editor.png",
+            "alt": "Editor"
+          },
+          {
+            "src": "https://example.com/preview.png",
+            "alt": "Preview"
+          },
+          {
+            "src": "https://example.com/data.png",
+            "alt": "Data"
+          },
+          {
+            "src": "https://example.com/versions.png",
+            "alt": "Versions"
+          }
+        ]
+      }
+    },
     "Tabs": {
       "props": {
         "tabs": {
@@ -639,8 +714,8 @@
             "value": "issue"
           },
           {
-            "label": "Run",
-            "value": "run"
+            "label": "Session",
+            "value": "session"
           }
         ],
         "value": "issue"
@@ -857,6 +932,40 @@
         ]
       }
     },
+    "Outline": {
+      "props": {
+        "items": {
+          "description": "The rows in order."
+        },
+        "value": {
+          "description": "The active row id."
+        },
+        "caption": {
+          "description": "The heading."
+        }
+      },
+      "description": "Anchor rows under a caption, one active; press fires `select {id}`.",
+      "example": {
+        "caption": "Outline",
+        "value": "part-a",
+        "items": [
+          {
+            "id": "current",
+            "title": "Current state"
+          },
+          {
+            "id": "part-a",
+            "title": "Part A: editor-first creation",
+            "count": 5
+          },
+          {
+            "id": "part-b",
+            "title": "Part B: MCP for eApps",
+            "count": 2
+          }
+        ]
+      }
+    },
     "Stepper": {
       "props": {
         "steps": {
@@ -1418,10 +1527,10 @@
           "description": "Row height class."
         },
         "stickyHeader": {
-          "description": "Keeps the header visible while the rows scroll."
+          "description": "Pins the header while rows scroll."
         }
       },
-      "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.",
       "example": {
         "columns": [
           {
@@ -2431,6 +2540,131 @@
       "example": {
         "component": "Gauge"
       }
+    },
+    "Motion": {
+      "props": {
+        "layers": {
+          "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."
+        },
+        "size": {
+          "description": "The composition [width, height] px (with layers)."
+        },
+        "duration": {
+          "description": "Length in ms (with layers)."
+        },
+        "fps": {
+          "description": "Frames per second."
+        },
+        "assets": {
+          "description": "Precomps {id: {layers}}."
+        },
+        "markers": {
+          "description": "Named segments [{name, time, duration}] ms."
+        },
+        "lottie": {
+          "description": "Lottie JSON instead of layers (no expressions)."
+        },
+        "src": {
+          "description": "An attached .json or .lottie instead of layers."
+        },
+        "autoplay": {
+          "description": "Plays when visible; false shows the poster."
+        },
+        "loop": {
+          "description": "Repeats; false plays once and holds."
+        },
+        "plays": {
+          "description": "Plays this many times (overrides loop)."
+        },
+        "direction": {
+          "description": "Forward, reverse, or back and forth."
+        },
+        "speed": {
+          "description": "Speed multiplier."
+        },
+        "segment": {
+          "description": "Plays only [from, to] ms."
+        },
+        "marker": {
+          "description": "Plays only this marker."
+        },
+        "progress": {
+          "description": "Scrubs (0–1) instead of playing."
+        },
+        "play": {
+          "description": "Pauses while false."
+        },
+        "poster": {
+          "description": "The still frame (ms) for reduced motion and before play."
+        },
+        "fit": {
+          "description": "How it fills the box."
+        },
+        "slots": {
+          "description": "Lottie slot overrides {slotId: value}."
+        },
+        "stateMachine": {
+          "description": "A dotLottie state machine driving playback (a .lottie src brings its own)."
+        },
+        "inputs": {
+          "description": "State-machine inputs {name: value}; bind to drive states from data."
+        },
+        "label": {
+          "description": "What it shows, for screen readers."
+        },
+        "style": {
+          "description": "Extra Box styles for the box."
+        }
+      },
+      "description": "A vector animation (Lottie-compatible) drawn identically everywhere: loaders, success states, illustrated empty states, small explainers.",
+      "example": {
+        "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
+              }
+            ]
+          }
+        ]
+      }
     }
   },
   "defs": {
@@ -2622,7 +2856,7 @@
           "description": "For `type: slot`: the Table slot whose component renders each cell with the row as its data scope."
         },
         "width": {
-          "description": "A fixed width in px; otherwise columns share the width."
+          "description": "A fixed width in px; otherwise columns share the width, never under 120 (a wider table scrolls)."
         },
         "align": {
           "description": "Cell alignment (numbers read best at `end`)."
@@ -2635,6 +2869,9 @@
         },
         "decimals": {
           "description": "Fixed fraction digits of a number, currency or percent column."
+        },
+        "truncate": {
+          "description": "One line with an ellipsis; cells wrap otherwise."
         }
       },
       "description": "One table column."
@@ -2697,6 +2934,31 @@
         }
       },
       "description": "One step of a Plan."
+    },
+    "outlineItem": {
+      "properties": {
+        "id": {
+          "description": "Reported by `select`."
+        },
+        "title": {
+          "description": "The row text."
+        },
+        "count": {
+          "description": "A muted count."
+        }
+      },
+      "description": "One Outline row."
+    },
+    "picture": {
+      "properties": {
+        "src": {
+          "description": "The image URL."
+        },
+        "alt": {
+          "description": "The accessibility description."
+        }
+      },
+      "description": "One picture of a Mosaic."
     }
   },
   "functions": {

package/generated/core.runtime.json

@@ -318,6 +318,27 @@
       "running",
       "done",
       "declined"
+    ],
+    "zoomInitial": [
+      "auto",
+      "fit",
+      "fitWidth",
+      "actual"
+    ],
+    "zoomControls": [
+      "auto",
+      "always",
+      "none"
+    ],
+    "motionDirection": [
+      "forward",
+      "reverse",
+      "alternate"
+    ],
+    "motionFit": [
+      "contain",
+      "cover",
+      "fill"
     ]
   },
   "defs": {
@@ -556,6 +577,10 @@
         },
         "decimals": {
           "type": "number"
+        },
+        "truncate": {
+          "type": "boolean",
+          "default": false
         }
       }
     },
@@ -619,6 +644,34 @@
           "enum": "traceStatus"
         }
       }
+    },
+    "outlineItem": {
+      "properties": {
+        "id": {
+          "type": "string",
+          "required": true
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "bindable": true
+        },
+        "count": {
+          "type": "number",
+          "bindable": true
+        }
+      }
+    },
+    "picture": {
+      "properties": {
+        "src": {
+          "type": "url",
+          "required": true
+        },
+        "alt": {
+          "type": "string"
+        }
+      }
     }
   },
   "functions": {
@@ -937,7 +990,10 @@
     "Toast.icon.success": "ui-success",
     "Toast.icon.warning": "ui-warning",
     "Toast.icon.error": "ui-error",
-    "Unknown.root": "ui-warning"
+    "Unknown.root": "ui-warning",
+    "ZoomableImage.zoomOut": "ui-minus",
+    "ZoomableImage.zoomIn": "ui-add",
+    "ZoomableImage.fit": "ui-fullscreen"
   },
   "components": {
     "Box": {
@@ -1565,6 +1621,55 @@
         }
       }
     },
+    "ZoomableImage": {
+      "kind": "native",
+      "group": "media",
+      "lite": false,
+      "children": "none",
+      "props": {
+        "src": {
+          "type": "url",
+          "required": true,
+          "bindable": true
+        },
+        "alt": {
+          "type": "string",
+          "required": true,
+          "bindable": true
+        },
+        "naturalWidth": {
+          "type": "number"
+        },
+        "naturalHeight": {
+          "type": "number"
+        },
+        "initial": {
+          "type": "enum",
+          "enum": "zoomInitial",
+          "default": "auto"
+        },
+        "maxScale": {
+          "type": "number",
+          "default": 8
+        },
+        "controls": {
+          "type": "enum",
+          "enum": "zoomControls",
+          "default": "auto"
+        },
+        "scale": {
+          "type": "number",
+          "bindable": true
+        },
+        "style": {
+          "type": "style"
+        }
+      },
+      "events": [
+        "zoom",
+        "tap"
+      ]
+    },
     "Icon": {
       "kind": "native",
       "group": "media",
@@ -1708,12 +1813,44 @@
         "indicators": {
           "type": "boolean",
           "default": true
+        },
+        "counter": {
+          "type": "boolean",
+          "default": false
+        },
+        "thumbnails": {
+          "type": "array",
+          "items": {
+            "type": "url"
+          }
         }
       },
       "events": [
         "change"
       ]
     },
+    "Mosaic": {
+      "kind": "macro",
+      "group": "media",
+      "lite": false,
+      "children": "none",
+      "props": {
+        "pictures": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "shape": "picture"
+          },
+          "required": true
+        },
+        "label": {
+          "type": "string"
+        }
+      },
+      "events": [
+        "select"
+      ]
+    },
     "Tabs": {
       "kind": "native",
       "group": "navigation",
@@ -1993,6 +2130,32 @@
         "select"
       ]
     },
+    "Outline": {
+      "kind": "macro",
+      "group": "navigation",
+      "lite": true,
+      "children": "none",
+      "props": {
+        "items": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "shape": "outlineItem"
+          },
+          "required": true
+        },
+        "value": {
+          "type": "string",
+          "bindable": true
+        },
+        "caption": {
+          "type": "string"
+        }
+      },
+      "events": [
+        "select"
+      ]
+    },
     "Stepper": {
       "kind": "macro",
       "group": "navigation",
@@ -3939,6 +4102,117 @@
           "type": "string"
         }
       }
+    },
+    "Motion": {
+      "kind": "native",
+      "group": "media",
+      "lite": true,
+      "children": "none",
+      "props": {
+        "layers": {
+          "type": "array",
+          "items": {
+            "type": "object"
+          }
+        },
+        "size": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          }
+        },
+        "duration": {
+          "type": "number"
+        },
+        "fps": {
+          "type": "number",
+          "default": 60
+        },
+        "assets": {
+          "type": "object"
+        },
+        "markers": {
+          "type": "array",
+          "items": {
+            "type": "object"
+          }
+        },
+        "lottie": {
+          "type": "object"
+        },
+        "src": {
+          "type": "url"
+        },
+        "autoplay": {
+          "type": "boolean",
+          "default": true
+        },
+        "loop": {
+          "type": "boolean",
+          "default": true
+        },
+        "plays": {
+          "type": "number"
+        },
+        "direction": {
+          "type": "enum",
+          "enum": "motionDirection",
+          "default": "forward"
+        },
+        "speed": {
+          "type": "number",
+          "default": 1
+        },
+        "segment": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          }
+        },
+        "marker": {
+          "type": "string"
+        },
+        "progress": {
+          "type": "number",
+          "bindable": true
+        },
+        "play": {
+          "type": "boolean",
+          "bindable": true,
+          "default": true
+        },
+        "poster": {
+          "type": "number"
+        },
+        "fit": {
+          "type": "enum",
+          "enum": "motionFit",
+          "default": "contain"
+        },
+        "slots": {
+          "type": "object"
+        },
+        "stateMachine": {
+          "type": "object"
+        },
+        "inputs": {
+          "type": "object",
+          "bindable": true
+        },
+        "label": {
+          "type": "string"
+        },
+        "style": {
+          "type": "style"
+        }
+      },
+      "events": [
+        "press",
+        "hover",
+        "visible",
+        "complete",
+        "state"
+      ]
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exponential_app/eui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Exponential UI: the core A2UI catalog (components, macros, model descriptions, token names), the A2UI basic catalog map, the TypeScript reference reducer, the runtime theme format with the built-in themes, and the theme builder.",
   "license": "Apache-2.0",
   "homepage": "https://exponential.at/ui/",