@exponential_app/eui 0.2.1 → 0.3.0

package/dist/types/src/catalog.generated.d.ts

@@ -7,12 +7,12 @@ export declare const BASIC_VERSION = "v0.9";
 export declare const CATALOG_VERSION = "1";
 export declare const UNKNOWN_COMPONENT_NAME = "Unknown";
 /** Every component in source order (the hidden placeholder included). */
-export declare const COMPONENT_NAMES: readonly ["Box", "Stack", "Grid", "Card", "Separator", "List", "Resizable", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Text", "Heading", "Markdown", "CodeBlock", "Kbd", "Label", "Image", "Icon", "Video", "AudioPlayer", "Avatar", "QrCode", "Carousel", "Tabs", "Segmented", "Accordion", "Collapsible", "Trace", "TraceItem", "Plan", "Pagination", "Breadcrumb", "Stepper", "Dialog", "Drawer", "DockCard", "AlertDialog", "Popover", "Tooltip", "Menu", "Toast", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "Ring", "Spinner", "Skeleton", "VoiceWave", "CallSurface", "Table", "Chart", "Sparkline", "StatTile", "Button", "Link", "Toggle", "Form", "FieldGroup", "FormActions", "Input", "Textarea", "NumberField", "Checkbox", "Radio", "ChoiceTiles", "Switch", "Slider", "Rating", "Select", "SearchList", "ChipInput", "DatePicker", "DateRangePicker", "TimePicker", "FileUpload", "QrScanner", "Composer", "Row", "MessageBubble", "TreeGuides", "Unknown"];
+export declare const COMPONENT_NAMES: readonly ["Box", "Stack", "Grid", "Card", "Separator", "List", "Resizable", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Text", "Heading", "Markdown", "CodeBlock", "Kbd", "Label", "Image", "Icon", "Video", "AudioPlayer", "Avatar", "QrCode", "Carousel", "Mosaic", "Tabs", "Segmented", "Accordion", "Collapsible", "Trace", "TraceItem", "Plan", "Pagination", "Breadcrumb", "Outline", "Stepper", "Dialog", "Drawer", "DockCard", "AlertDialog", "Popover", "Tooltip", "Menu", "Toast", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "Ring", "Spinner", "Skeleton", "VoiceWave", "CallSurface", "Table", "Chart", "Sparkline", "StatTile", "Button", "Link", "Toggle", "Form", "FieldGroup", "FormActions", "Input", "Textarea", "NumberField", "Checkbox", "Radio", "ChoiceTiles", "Switch", "Slider", "Rating", "Select", "SearchList", "ChipInput", "DatePicker", "DateRangePicker", "TimePicker", "FileUpload", "QrScanner", "Composer", "Row", "MessageBubble", "TreeGuides", "Unknown"];
 export type ComponentName = (typeof COMPONENT_NAMES)[number];
 export declare const NATIVE_COMPONENTS: readonly ["Box", "List", "Resizable", "Text", "Markdown", "CodeBlock", "Image", "Icon", "Video", "AudioPlayer", "Avatar", "QrCode", "Carousel", "Tabs", "Segmented", "Accordion", "Dialog", "Drawer", "Popover", "Tooltip", "Menu", "Toast", "Ring", "Spinner", "Skeleton", "VoiceWave", "Table", "Chart", "Button", "Link", "Toggle", "Form", "Input", "Textarea", "NumberField", "Checkbox", "Radio", "ChoiceTiles", "Switch", "Slider", "Select", "SearchList", "ChipInput", "DatePicker", "DateRangePicker", "TimePicker", "FileUpload", "QrScanner", "Composer", "TreeGuides", "Unknown"];
-export declare const MACRO_COMPONENTS: readonly ["Stack", "Grid", "Card", "Separator", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Heading", "Kbd", "Label", "Collapsible", "Trace", "TraceItem", "Plan", "Pagination", "Breadcrumb", "Stepper", "DockCard", "AlertDialog", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "CallSurface", "Sparkline", "StatTile", "FieldGroup", "FormActions", "Rating", "Row", "MessageBubble"];
+export declare const MACRO_COMPONENTS: readonly ["Stack", "Grid", "Card", "Separator", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Heading", "Kbd", "Label", "Mosaic", "Collapsible", "Trace", "TraceItem", "Plan", "Pagination", "Breadcrumb", "Outline", "Stepper", "DockCard", "AlertDialog", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "CallSurface", "Sparkline", "StatTile", "FieldGroup", "FormActions", "Rating", "Row", "MessageBubble"];
 /** The core-lite subset (no overlays, media or Chart). */
-export declare const LITE_COMPONENTS: readonly ["Box", "Stack", "Grid", "Card", "Separator", "List", "Resizable", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Text", "Heading", "Markdown", "CodeBlock", "Kbd", "Label", "Icon", "Avatar", "Tabs", "Segmented", "Collapsible", "Trace", "TraceItem", "Plan", "Breadcrumb", "Stepper", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "Ring", "Skeleton", "StatTile", "Button", "Link", "Form", "FieldGroup", "FormActions", "Input", "Textarea", "NumberField", "Checkbox", "Switch", "Rating", "Select", "SearchList", "ChipInput", "DatePicker", "DateRangePicker", "TimePicker", "FileUpload", "Composer", "Row", "MessageBubble"];
+export declare const LITE_COMPONENTS: readonly ["Box", "Stack", "Grid", "Card", "Separator", "List", "Resizable", "ScrollArea", "Sidebar", "SplitView", "AppBar", "Page", "Toolbar", "Section", "Group", "Text", "Heading", "Markdown", "CodeBlock", "Kbd", "Label", "Icon", "Avatar", "Tabs", "Segmented", "Collapsible", "Trace", "TraceItem", "Plan", "Breadcrumb", "Outline", "Stepper", "Badge", "Alert", "Chip", "EmptyState", "Progress", "Meter", "Ring", "Skeleton", "StatTile", "Button", "Link", "Form", "FieldGroup", "FormActions", "Input", "Textarea", "NumberField", "Checkbox", "Switch", "Rating", "Select", "SearchList", "ChipInput", "DatePicker", "DateRangePicker", "TimePicker", "FileUpload", "Composer", "Row", "MessageBubble"];
 export declare const COMPONENT_GROUPS: Record<ComponentName, string>;
 /** The specimen id each component has on ui.exponential.at. */
 export declare const SPECIMEN_IDS: Record<ComponentName, string>;
@@ -250,6 +250,15 @@ export interface Shapes {
         icon?: IconName;
         status?: TraceStatusValue;
     };
+    outlineItem: {
+        id: string;
+        title: string | Dynamic;
+        count?: number | Dynamic;
+    };
+    picture: {
+        src: string;
+        alt?: string;
+    };
 }
 /** Every component's props, by name. */
 export interface ComponentProps {
@@ -426,6 +435,12 @@ export interface ComponentProps {
         page?: number | Dynamic;
         loop?: boolean;
         indicators?: boolean;
+        counter?: boolean;
+        thumbnails?: string[];
+    };
+    Mosaic: {
+        pictures: Shapes["picture"][];
+        label?: string;
     };
     Tabs: {
         tabs: Shapes["tab"][];
@@ -482,6 +497,11 @@ export interface ComponentProps {
     Breadcrumb: {
         items: Shapes["option"][];
     };
+    Outline: {
+        items: Shapes["outlineItem"][];
+        value?: string | Dynamic;
+        caption?: string;
+    };
     Stepper: {
         steps: Shapes["step"][];
         current?: number | Dynamic;

package/dist/types/src/host/contract.d.ts

@@ -84,6 +84,23 @@ export declare const HOST_CONTRACT: {
             transports: string[];
             functionPrefix: string;
         };
+        exposes: {
+            $comment: string;
+            limits: {
+                namePattern: string;
+                nameMax: number;
+                titleMax: number;
+                descriptionMax: number;
+                maxTools: number;
+                separator: string;
+            };
+            runKinds: string[];
+            recordOps: string[];
+            readRecordOps: string[];
+            readOpWords: string[];
+            destructiveWords: string[];
+            actionPattern: string;
+        };
         extensions: {
             $comment: string;
             versionPattern: string;

package/dist/types/src/host/exposes.d.ts

@@ -0,0 +1,68 @@
+import type { PackageIssue } from "./package.js";
+export declare const EXPOSES_LIMITS: {
+    namePattern: string;
+    nameMax: number;
+    titleMax: number;
+    descriptionMax: number;
+    maxTools: number;
+    separator: string;
+};
+export declare const EXPOSE_RUN_KINDS: readonly string[];
+export type ExposeAccess = `read` | `write`;
+export interface PackageExpose {
+    /** `^[a-z][a-z0-9_]*$`, at most `limits.nameMax`, never `__`. */
+    name: string;
+    title: string;
+    description: string;
+    /** A JSON Schema of `type: "object"`: the tool's inputSchema. */
+    input: {
+        type: `object`;
+        properties?: Record<string, unknown>;
+        required?: string[];
+    };
+    access: ExposeAccess;
+    /** Exactly one of `records`, `action`, `upstream`; every string may hold
+     *  `${input.<path>}` templates. */
+    run: {
+        records: {
+            op: `list` | `get` | `upsert`;
+            kind: string;
+            id?: unknown;
+            where?: Record<string, unknown>;
+            data?: Record<string, unknown>;
+            limit?: unknown;
+        };
+    } | {
+        action: string;
+        args?: Record<string, unknown>;
+    } | {
+        upstream: string;
+        tool: string;
+        args?: Record<string, unknown>;
+    };
+}
+/** One problem with a binding: the eMCP error `code` (`fixtures/exposes.json`
+ *  `errors`), the binding's `index` (null = the list) and the package issue. */
+export interface ExposeIssue extends PackageIssue {
+    index: number | null;
+    code: string;
+}
+/** The input paths a run's templates name (`${input.a.b}` → `a.b`), in
+ *  document order. */
+export declare function exposeTemplatePaths(value: unknown): string[];
+/** An action reads when the last word of its name is a read word
+ *  (`exponential.issues.list`); a verb writes. */
+export declare function exposeActionAccess(action: string): ExposeAccess;
+/** A tool or action name holding a destructive word (delete, merge, close,
+ *  end, remove, trash) is never exposed. */
+export declare function exposeNameDestructive(name: string): boolean;
+/** Every problem with a package's `upstreams`: the team MCP server names
+ *  its upstream bindings may call. */
+export declare function validateUpstreams(upstreams: unknown): PackageIssue[];
+/** Every problem with a package's `exposes`, in binding order, with its
+ *  eMCP code. `records` and `upstreams` = the package's (a binding reads
+ *  only its own kinds and calls only its own upstreams). */
+export declare function exposeIssues(exposes: unknown, records: unknown, upstreams: unknown): ExposeIssue[];
+/** Every problem with a package's `exposes` (`exposeIssues` as package
+ *  issues). */
+export declare function validatePackageExposes(exposes: unknown, records: unknown, upstreams: unknown): PackageIssue[];

package/dist/types/src/host/index.d.ts

@@ -6,6 +6,7 @@ export * from "./package.js";
 export * from "./records.js";
 export * from "./record-store.js";
 export * from "./tools.js";
+export * from "./exposes.js";
 export * from "./signature.js";
 export { HostRouter, normalizePath } from "./router.js";
 export type { HostRouterOptions, SurfaceInfo } from "./router.js";

package/dist/types/src/host/package.d.ts

@@ -2,6 +2,7 @@ import type { FlatComponent } from "../types.js";
 import type { ServerMessage } from "./contract.js";
 import type { RecordKind } from "./records.js";
 import type { PackageTool } from "./tools.js";
+import type { PackageExpose } from "./exposes.js";
 /** VAPP-161: the package format version this host reads
  *  (catalog/host.json `package.formatVersion`; docs/package-format.md).
  *  A package without `formatVersion` is version 1; every version-1
@@ -56,6 +57,13 @@ export interface AppPackage {
     tools?: Record<string, PackageTool>;
     /** VAPP-161: the extension catalogs it needs beyond `catalogId`. */
     extensions?: PackageExtension[];
+    /** VAPP-180: the MCP tools it exposes to a host's MCP broker
+     *  (`host/exposes.ts`): declarative bindings over its records, the host's
+     *  actions or its upstreams, run as the calling person. */
+    exposes?: PackageExpose[];
+    /** VAPP-180: the MCP server names (the host's, e.g. a team's servers) its
+     *  `upstream` bindings call. */
+    upstreams?: string[];
 }
 /** VAPP-161: an extension catalog a package needs: its id, the minimum
  *  `MAJOR.MINOR.PATCH` (caret) and the components it uses from it. */

package/dist/types/src/web/primitives/carousel.d.ts

@@ -0,0 +1,17 @@
+export declare const CAROUSEL_GEOMETRY: {
+    readonly thumbnail: 52;
+    readonly ring: 2;
+    readonly thumbnailGap: 8;
+    readonly counterInset: 8;
+};
+/** The counter's text: `i / n` (1-based). */
+export declare function carouselCounterText(page: number, total: number): string;
+export declare const CAROUSEL_CLASSES: {
+    /** The pill over the slide; its parent is `relative`. */
+    readonly counter: "pointer-events-none absolute start-2 top-2 z-10 rounded-full bg-black/55 px-2 text-xs leading-5 font-medium text-white tabular-nums";
+    /** The filmstrip: one row, scrolling sideways when it overflows. */
+    readonly thumbnails: "flex flex-row gap-[8px] overflow-x-auto pt-2 [scrollbar-width:none]";
+    /** One thumbnail: a button; the current one `data-current=true`. */
+    readonly thumbnail: "relative size-[52px] shrink-0 cursor-pointer overflow-hidden rounded-md border-2 border-transparent bg-muted p-0 opacity-70 outline-none transition-opacity duration-fast hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[current=true]:border-foreground data-[current=true]:opacity-100";
+    readonly thumbnailImage: "size-full object-cover";
+};

package/dist/types/src/web/primitives/index.d.ts

@@ -7,6 +7,7 @@ export * from "./breadcrumb.js";
 export * from "./button.js";
 export * from "./calendar.js";
 export * from "./card.js";
+export * from "./carousel.js";
 export * from "./checkbox.js";
 export * from "./choice-tiles.js";
 export * from "./cn.js";
@@ -28,6 +29,8 @@ export * from "./kbd.js";
 export * from "./label.js";
 export * from "./menu-surface.js";
 export * from "./meter.js";
+export * from "./mosaic.js";
+export * from "./outline.js";
 export * from "./popover.js";
 export * from "./progress-ring.js";
 export * from "./progress.js";

package/dist/types/src/web/primitives/mosaic.d.ts

@@ -0,0 +1,30 @@
+export declare const MOSAIC_GEOMETRY: {
+    readonly gap: 10;
+    readonly largeFraction: 0.6;
+    readonly aspect: 1.6;
+    readonly radius: 10;
+};
+export type MosaicTileSize = `large` | `half` | `small`;
+export interface MosaicTile {
+    index: number;
+    size: MosaicTileSize;
+    /** The pictures past the third: "+N" over this tile (0 = none). */
+    more: number;
+}
+/** The tiles a group of `count` pictures draws. */
+export declare function mosaicTiles(count: number): MosaicTile[];
+export declare const MOSAIC_CLASSES: {
+    /** The group: `aspect` w/h, a row of the lead tile(s) and the side column. */
+    readonly root: "flex aspect-[1.6] w-full min-w-0 flex-row gap-[10px]";
+    /** The right column of the 3+ layout: the two small tiles stacked. */
+    readonly side: "flex min-w-0 flex-1 flex-col gap-[10px]";
+    /** One tile: a button holding its picture; `data-size` = the tile size. */
+    readonly tile: "relative min-h-0 min-w-0 cursor-pointer overflow-hidden rounded-[10px] border border-glass-stroke-card bg-muted p-0 outline-none transition-opacity duration-fast hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50";
+    /** A tile that shares its row or column equally (1, 2, the small two). */
+    readonly fill: "flex-1";
+    /** The large tile beside the side column: `largeFraction` of the width. */
+    readonly lead: "shrink-0 grow-0 basis-[60%]";
+    readonly image: "absolute inset-0 size-full object-cover";
+    /** The "+N" scrim over the last tile. */
+    readonly more: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/55 text-xl font-semibold text-white";
+};

package/dist/types/src/web/primitives/outline.d.ts

@@ -0,0 +1,22 @@
+export declare const OUTLINE_GEOMETRY: {
+    readonly rowHeight: 32;
+    readonly activeBar: 2;
+};
+export interface OutlineItem {
+    id: string;
+    title: string;
+    /** A muted `· n` after the title; 0 or unset = none. */
+    count?: number | null;
+}
+export declare const OUTLINE_CLASSES: {
+    readonly root: "flex min-w-0 flex-col gap-[2px]";
+    readonly caption: "px-2 py-1 text-[11px] leading-4 font-medium tracking-[0.5px] text-muted-foreground uppercase";
+    /** One row: a button, the active one `data-active=true`. */
+    readonly row: "relative flex h-[32px] w-full min-w-0 cursor-pointer items-center gap-1 overflow-hidden rounded-md px-2 text-start text-sm text-muted-foreground outline-none transition-colors duration-fast hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-foreground";
+    /** The leading-edge bar of the active row. */
+    readonly bar: "pointer-events-none absolute inset-y-0 start-0 w-[2px] bg-foreground";
+    readonly title: "min-w-0 flex-1 truncate";
+    readonly count: "shrink-0 text-xs text-muted-foreground tabular-nums";
+};
+/** The trailing count text (`· n`), or null when there is none. */
+export declare function outlineCountText(count: number | null | undefined): string | null;

package/dist/web/index.js

@@ -1133,6 +1133,12 @@ button:where([data-xui-part],.xui-calendar-nav,.xui-table-sort,.xui-carousel-nav
 .xui-carousel-dots{display:flex;justify-content:center;gap:var(--xui-spacing-xs);padding-top:var(--xui-spacing-sm)}
 .xui-Carousel-indicator{width:6px;height:6px;border-radius:9999px;background:var(--xui-color-border);padding:0;cursor:pointer}
 .xui-Carousel-indicator[data-xs~="selected"]{background:var(--xui-color-primary)}
+.xui-carousel-stage{position:relative;display:flex;flex-direction:column;min-width:0}
+.xui-Carousel-counter{position:absolute;top:var(--xui-spacing-sm);inset-inline-start:var(--xui-spacing-sm);z-index:1;pointer-events:none;display:inline-flex;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums}
+.xui-Carousel-thumbnails{display:flex;flex-direction:row;justify-content:flex-start;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
+.xui-Carousel-thumbnails::-webkit-scrollbar{display:none}
+.xui-Carousel-thumbnail{position:relative;flex:0 0 auto;overflow:hidden;cursor:pointer;padding:0;border-style:solid}
+.xui-carousel-thumb{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
 [data-xui-c="Tabs"].xui-el{flex-direction:column}
 .xui-Tabs-list{display:flex;flex-direction:row;align-self:flex-start;flex-shrink:0}
 .xui-Tabs-list[data-fill="true"]{align-self:stretch}
@@ -2378,7 +2384,7 @@ var PLACED = {
   SearchList: [`head`, `search`, `count`, `body`, `list`, `empty`, `fade`],
   Menu: [`trigger`, `head`, `search`, `count`, `body`, `list`, `empty`, `fade`],
   Table: [`header`, `body`, `caption`, `empty`],
-  Carousel: [`page`, `indicator`, `controls`, `previous`, `next`],
+  Carousel: [`page`, `indicator`, `controls`, `previous`, `next`, `counter`, `thumbnails`],
   Tooltip: [`anchor`],
   FileUpload: [`label`, `dropzone`, `icon`, `title`, `hint`, `browse`, `description`],
   CodeBlock: [`header`, `title`, `copy`, `body`],
@@ -2561,5 +2567,5 @@ export {
   withinSlop
 };
 
-//# debugId=3DD32DA39743EA9764756E2164756E21
+//# debugId=1A8295752F81FE6764756E2164756E21
 //# sourceMappingURL=index.js.map