@exponential_app/eui 0.2.1 → 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",
@@ -1813,11 +1924,28 @@
           "responsive": false,
           "default": true,
           "description": "Shows the page dots."
+        },
+        {
+          "name": "counter",
+          "type": "boolean",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "default": false,
+          "description": "Shows `i / n`."
+        },
+        {
+          "name": "thumbnails",
+          "type": "[url]",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "A thumbnail URL per page."
         }
       ],
       "accessibility": {
         "role": "region",
-        "notes": "region, roledescription carousel; each page a group `page i of n`",
+        "notes": "region, roledescription carousel; each page a group `page i of n`; the counter `$string.pageCounter` is hidden (each page already says page i of n); each thumbnail a button `page i of n`, aria-current on the current one",
         "keys": [
           "ArrowLeft/ArrowRight: previous/next page while focus is inside",
           "Home/End: first/last page"
@@ -1831,6 +1959,68 @@
       },
       "macro": null
     },
+    {
+      "name": "Mosaic",
+      "kind": "macro",
+      "group": "media",
+      "lite": false,
+      "specimenId": "exponential-ui-mosaic",
+      "description": "Pictures: halves, or one large + two small with `+N`; press fires `select {index}`.",
+      "children": "none",
+      "slots": [],
+      "events": [
+        "select"
+      ],
+      "basic": [],
+      "props": [
+        {
+          "name": "pictures",
+          "type": "[picture]",
+          "required": true,
+          "bindable": false,
+          "responsive": false,
+          "description": "The pictures in order."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "The a11y label."
+        }
+      ],
+      "accessibility": {
+        "role": "group",
+        "notes": "group labelled `label`; each tile a button named its picture's `alt`; the `+N` tile reads `alt` then `+N` ($string.morePictures).",
+        "keys": [
+          "Tab through the tiles; Enter, Space: select"
+        ]
+      },
+      "example": {
+        "id": "example",
+        "component": "Mosaic",
+        "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"
+          }
+        ]
+      },
+      "macro": "Expands to natives (see catalog/macros.json); the theme styles its parts by recipe Mosaic/<part>."
+    },
     {
       "name": "Tabs",
       "kind": "native",
@@ -1913,8 +2103,8 @@
             "value": "issue"
           },
           {
-            "label": "Run",
-            "value": "run"
+            "label": "Session",
+            "value": "session"
           }
         ],
         "value": "issue"
@@ -2481,6 +2671,76 @@
       },
       "macro": "Expands to natives (see catalog/macros.json); the theme styles its parts by recipe Breadcrumb/<part>."
     },
+    {
+      "name": "Outline",
+      "kind": "macro",
+      "group": "navigation",
+      "lite": true,
+      "specimenId": "exponential-ui-outline",
+      "description": "Anchor rows under a caption, one active; press fires `select {id}`.",
+      "children": "none",
+      "slots": [],
+      "events": [
+        "select"
+      ],
+      "basic": [],
+      "props": [
+        {
+          "name": "items",
+          "type": "[outlineItem]",
+          "required": true,
+          "bindable": false,
+          "responsive": false,
+          "description": "The rows in order."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "bindable": true,
+          "responsive": false,
+          "description": "The active row id."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "bindable": false,
+          "responsive": false,
+          "description": "The heading."
+        }
+      ],
+      "accessibility": {
+        "role": "navigation",
+        "notes": "navigation labelled by `caption`; each row a link (aria-current=location on the active row) named `title` then the count; press fires `select {id}`.",
+        "keys": [
+          "Tab through the rows; Enter, Space: select"
+        ]
+      },
+      "example": {
+        "id": "example",
+        "component": "Outline",
+        "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
+          }
+        ]
+      },
+      "macro": "Expands to natives (see catalog/macros.json); the theme styles its parts by recipe Outline/<part>."
+    },
     {
       "name": "Stepper",
       "kind": "macro",
@@ -3980,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": [
         "*"
@@ -4084,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": {
@@ -6778,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/package-format.md

@@ -7,7 +7,7 @@ store, tool runners, extensions), never how (Exponential serves records from
 its synced store, spezl from a p2p store over eNet). `catalog/host.json`
 `package` is the machine-readable contract; this page is the prose spec other
 docs link to (spezl `docs/spec/blocks.md`). The TS reference is `src/host/`
-(`package.ts`, `records.ts`, `record-store.ts`, `tools.ts`, `signature.ts`);
+(`package.ts`, `records.ts`, `record-store.ts`, `tools.ts`, `exposes.ts`, `signature.ts`);
 the Rust core (`apps/desktop/crates/eui-core/src/host/`) mirrors every
 pure rule. Fixtures: `fixtures/host-router.json` (package validation, replayed
 by every renderer through the core) and `fixtures/host-package.json` (records
@@ -37,6 +37,7 @@ renders against keeps its own version in its id (`catalogId`,
   "sources": ["records:*"],                         // allowlist for bindings, unset = any
   "records": { "entry": { "title": "Entry", "schema": { "type": "object", "properties": { "date": { "type": "string", "format": "date" } } } } },
   "tools": { "weather": { "kind": "mcp", "title": "Weather", "url": "https://mcp.example.com/weather" } },
+  "upstreams": ["m5"], "exposes": [/* MCP tools a host's broker runs: "Exposes" below */],
   "extensions": [{ "id": "https://acme.example/catalogs/charts/v1", "version": "1.4.0", "components": ["Gantt"] }],
   "theme": "exponential", "icon": { "glyph": "clock" }, "description": "…"
 }
@@ -126,6 +127,60 @@ Exponential's app hosts run no package tools: its server refuses a package
 with `tools` (an app reaches tools through `exponential.<noun>.<op>` and
 `harness.mcp`).
 
+## Exposes
+
+`exposes: [Expose]` lists MCP TOOLS the package offers to a host's MCP broker
+(Exponential: `/api/mcp/apps`). They are declarative bindings, never code:
+the broker lists them as `<app>__<name>` and runs them as the CALLING person,
+so no device has to be online and nothing is hosted. `upstreams: [name]`
+names the MCP servers the package's upstream bindings call; the host provides
+them (Exponential: the team's MCP servers, Settings › MCP).
+
+```jsonc
+"upstreams": ["m5"],
+"exposes": [
+  { "name": "list_entries", "title": "List entries", "description": "The time entries of a day.",
+    "input": { "type": "object", "properties": { "day": { "type": "string" } } },
+    "access": "read",
+    "run": { "records": { "op": "list", "kind": "entry", "where": { "date": "${input.day}" } } } },
+  { "name": "log_comment", "title": "Log a comment", "description": "Comment the logged hours on an issue.",
+    "input": { "type": "object", "properties": { "issue": { "type": "string" }, "hours": { "type": "number" } }, "required": ["issue", "hours"] },
+    "access": "write",
+    "run": { "action": "exponential.comments.create", "args": { "issueId": "${input.issue}", "body": "Logged ${input.hours} h" } } },
+  { "name": "find_customer", "title": "Find a customer", "description": "Search m5 customers.",
+    "input": { "type": "object", "properties": { "q": { "type": "string" } } },
+    "access": "read",
+    "run": { "upstream": "m5", "tool": "search_customers", "args": { "query": "${input.q}" } } }
+]
+```
+
+| key | rule |
+| --- | --- |
+| `name` | `^[a-z][a-z0-9_]*$`, at most 40, never `__`, unique |
+| `title` / `description` | non-blank, at most 80 / 1024 characters |
+| `input` | a JSON Schema `{type: "object", properties?}`: the tool's `inputSchema` |
+| `access` | `read` or `write`: who may see it (a read-only connection never lists a write tool) |
+| `run` | EXACTLY ONE of `records` / `action` / `upstream` |
+
+- `records: {op: list | get | upsert, kind, id?, where?, data?, limit?}` reads
+  or writes the package's OWN records of a declared kind. A delete is
+  destructive and never exposed.
+- `action` (+ `args`) calls a host function (`exponential.<noun>.<op>`). It
+  reads when the last word of its name is list, get, show, catalog,
+  activity or files; anything else writes.
+- `upstream` (+ `tool`, `args`) calls a tool of one of the package's
+  `upstreams` with the person's own credential. Its level is the tool's live
+  annotations: it reads only with `readOnlyHint: true`.
+
+Every string in `run` may hold `${input.<path>}` (dotted keys into the
+call's input; the first key must be a declared input property). A string
+that is exactly one template keeps the value's type; inside text the value
+is printed. Destructive is never exposed: a name holding delete, merge, close,
+end, remove or trash is refused, and a `read` binding whose run writes is
+refused. At most 32 tools. `exposeIssues` returns every issue with its eMCP
+error code; the host adds its own rules on top (Exponential: only grantable,
+non-destructive actions; upstreams the team has).
+
 ## Extensions
 
 `extensions: [{id, version, components?}]` declares the custom component