@exponential_app/eui 0.2.0 → 0.3.0

package/generated/core.descriptions.json

@@ -605,6 +605,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 +619,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": {
@@ -857,6 +894,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": {
@@ -2697,6 +2768,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

@@ -619,6 +619,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": {
@@ -1708,12 +1736,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 +2053,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exponential_app/eui",
-  "version": "0.2.0",
+  "version": "0.3.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

@@ -3419,6 +3419,212 @@
             "backgroundColor": "$color.primary"
           }
         }
+      ],
+      "counter": [
+        {
+          "style": {
+            "height": 20,
+            "paddingHorizontal": "$spacing.sm",
+            "borderRadius": "$radius.full",
+            "backgroundColor": "#0000008c",
+            "color": "#ffffff",
+            "fontSize": "$type.size.xs",
+            "lineHeight": 20,
+            "fontWeight": "$type.weight.medium"
+          }
+        }
+      ],
+      "thumbnails": [
+        {
+          "style": {
+            "gap": "$spacing.sm"
+          }
+        }
+      ],
+      "thumbnail": [
+        {
+          "style": {
+            "width": 52,
+            "height": 52,
+            "borderRadius": "$radius.md",
+            "borderWidth": "$border.thick",
+            "borderColor": "#00000000",
+            "backgroundColor": "$color.muted",
+            "opacity": 0.7,
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "opacity": 1
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        },
+        {
+          "when": {
+            "state": "selected"
+          },
+          "style": {
+            "borderColor": "$color.foreground",
+            "opacity": 1
+          }
+        }
+      ]
+    },
+    "Mosaic": {
+      "root": [
+        {
+          "style": {
+            "gap": 10
+          }
+        }
+      ],
+      "side": [
+        {
+          "style": {
+            "gap": 10
+          }
+        }
+      ],
+      "lead": [
+        {
+          "style": {
+            "borderRadius": "$radius.lg",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "backgroundColor": "$color.muted",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "opacity": 0.92
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        }
+      ],
+      "pair": [
+        {
+          "style": {
+            "borderRadius": "$radius.lg",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "backgroundColor": "$color.muted",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "opacity": 0.92
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        }
+      ],
+      "top": [
+        {
+          "style": {
+            "borderRadius": "$radius.lg",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "backgroundColor": "$color.muted",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "opacity": 0.92
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        }
+      ],
+      "bottom": [
+        {
+          "style": {
+            "borderRadius": "$radius.lg",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "backgroundColor": "$color.muted",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "opacity": 0.92
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        }
+      ],
+      "more": [
+        {
+          "style": {
+            "backgroundColor": "#0000008c"
+          }
+        }
+      ],
+      "moreLabel": [
+        {
+          "style": {
+            "color": "#ffffff",
+            "fontSize": "$type.size.xl",
+            "lineHeight": "$type.lineHeight.xl",
+            "fontWeight": "$type.weight.semibold"
+          }
+        }
       ]
     },
     "AudioPlayer": {
@@ -5677,6 +5883,88 @@
         }
       ]
     },
+    "Outline": {
+      "caption": [
+        {
+          "style": {
+            "paddingHorizontal": "$spacing.sm",
+            "paddingVertical": "$spacing.xs",
+            "fontSize": 11,
+            "lineHeight": 16,
+            "fontWeight": "$type.weight.medium",
+            "letterSpacing": 0.5,
+            "textTransform": "uppercase",
+            "color": "$color.mutedForeground"
+          }
+        }
+      ],
+      "row": [
+        {
+          "style": {
+            "borderRadius": "$radius.sm",
+            "backgroundColor": "#00000000",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        },
+        {
+          "when": {
+            "state": "focus"
+          },
+          "style": {
+            "borderColor": "$color.ring"
+          }
+        },
+        {
+          "when": {
+            "active": true
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        }
+      ],
+      "bar": [
+        {
+          "style": {
+            "backgroundColor": "$color.foreground"
+          }
+        }
+      ],
+      "title": [
+        {
+          "style": {
+            "fontSize": "$type.size.sm",
+            "lineHeight": "$type.lineHeight.sm",
+            "color": "$color.mutedForeground"
+          }
+        },
+        {
+          "when": {
+            "active": true
+          },
+          "style": {
+            "color": "$color.foreground",
+            "fontWeight": "$type.weight.medium"
+          }
+        }
+      ],
+      "count": [
+        {
+          "style": {
+            "color": "$color.mutedForeground"
+          }
+        }
+      ]
+    },
     "AppBar": {
       "root": [
         {