@exponential_app/eui 0.3.0 → 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": {
@@ -676,8 +714,8 @@
             "value": "issue"
           },
           {
-            "label": "Run",
-            "value": "run"
+            "label": "Session",
+            "value": "session"
           }
         ],
         "value": "issue"
@@ -1489,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": [
           {
@@ -2502,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": {
@@ -2693,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`)."
@@ -2706,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."

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
         }
       }
     },
@@ -965,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": {
@@ -1593,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",
@@ -4025,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.3.0",
+  "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/",

package/themes/neutral.theme.json

@@ -735,6 +735,174 @@
         }
       ]
     },
+    "ZoomableImage": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "#00000000"
+          }
+        }
+      ],
+      "image": [
+        {
+          "style": {
+            "borderRadius": "$radius.md"
+          }
+        }
+      ],
+      "pill": [
+        {
+          "style": {
+            "padding": 4,
+            "gap": 2,
+            "borderRadius": "$radius.full",
+            "backgroundColor": "$color.popover",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "boxShadow": "$shadow.lg",
+            "backdropBlur": "$blur.lg"
+          }
+        }
+      ],
+      "zoomOut": [
+        {
+          "style": {
+            "width": 28,
+            "height": 28,
+            "borderRadius": "$radius.full",
+            "color": "$color.foreground",
+            "backgroundColor": "#00000000",
+            "transition": "$motion.fast"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.accentForeground"
+          }
+        },
+        {
+          "when": {
+            "state": "disabled"
+          },
+          "style": {
+            "opacity": "$opacity.disabled"
+          }
+        }
+      ],
+      "percent": [
+        {
+          "style": {
+            "height": 28,
+            "paddingHorizontal": "$spacing.md",
+            "borderRadius": "$radius.full",
+            "color": "$color.foreground",
+            "backgroundColor": "#00000000",
+            "fontFamily": "$type.family.sans",
+            "fontSize": "$type.size.sm",
+            "lineHeight": "$type.lineHeight.sm",
+            "fontWeight": "$type.weight.medium",
+            "transition": "$motion.fast"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.accentForeground"
+          }
+        },
+        {
+          "when": {
+            "state": "disabled"
+          },
+          "style": {
+            "opacity": "$opacity.disabled"
+          }
+        }
+      ],
+      "zoomIn": [
+        {
+          "style": {
+            "width": 28,
+            "height": 28,
+            "borderRadius": "$radius.full",
+            "color": "$color.foreground",
+            "backgroundColor": "#00000000",
+            "transition": "$motion.fast"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.accentForeground"
+          }
+        },
+        {
+          "when": {
+            "state": "disabled"
+          },
+          "style": {
+            "opacity": "$opacity.disabled"
+          }
+        }
+      ],
+      "divider": [
+        {
+          "style": {
+            "width": 1,
+            "height": 16,
+            "backgroundColor": "$color.border"
+          }
+        }
+      ],
+      "fit": [
+        {
+          "style": {
+            "width": 28,
+            "height": 28,
+            "borderRadius": "$radius.full",
+            "color": "$color.foreground",
+            "backgroundColor": "#00000000",
+            "transition": "$motion.fast"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.accentForeground"
+          }
+        },
+        {
+          "when": {
+            "state": "disabled"
+          },
+          "style": {
+            "opacity": "$opacity.disabled"
+          }
+        },
+        {
+          "when": {
+            "state": "selected"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.accentForeground"
+          }
+        }
+      ]
+    },
     "QrCode": {
       "root": [
         {
@@ -4620,8 +4788,9 @@
       "cell": [
         {
           "style": {
-            "height": "$control.row",
-            "paddingHorizontal": "$spacing.sm"
+            "minHeight": "$control.row",
+            "paddingHorizontal": "$spacing.sm",
+            "paddingVertical": "$spacing.xs"
           }
         },
         {
@@ -4629,7 +4798,7 @@
             "density": "compact"
           },
           "style": {
-            "height": "$control.rowCompact"
+            "minHeight": "$control.rowCompact"
           }
         }
       ],