@elaraai/east-ui 1.0.4 → 1.0.5

package/dist/src/runtime/runtime.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * JSX runtime for east-ui — author `UIComponentType` trees with JSX syntax
+ * (`<Box>…</Box>`) that desugar to the east-ui component factories.
+ *
+ * A JSX element here is **not** a React element: it evaluates to a built
+ * east-ui value (`ExprType<UIComponentType>`), exactly what `Box.Root(…)`
+ * returns. The IR/renderer split is preserved — JSX is pure authoring sugar
+ * that produces serializable East IR.
+ *
+ * @remarks
+ * This module is the compiler-facing runtime; you never import it by hand.
+ * Point the compiler at it per file with a pragma:
+ *
+ * ```tsx
+ * /** @jsxImportSource @elaraai/east-ui *\/
+ * ```
+ *
+ * or project-wide in `tsconfig.json`:
+ *
+ * ```json
+ * { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@elaraai/east-ui" } }
+ * ```
+ *
+ * The capitalized component tags (`Box`, `VStack`, `Text`, …) live in
+ * `@elaraai/east-ui`. JSX only works in `.tsx` files — the `.ts` parser
+ * reads `<Box>` as a type assertion, so there is no pragma that enables it in
+ * `.ts`.
+ *
+ * @packageDocumentation
+ */
+import type { ExprType } from "@elaraai/east";
+import type { UIComponentType } from "../component.js";
+/** A built east-ui element — what every JSX element expression evaluates to. */
+export type UIElement = ExprType<UIComponentType>;
+/** A JSX component: a function from a single props object to a built element. */
+export type Component<P> = (props: P) => UIElement;
+/**
+ * Fragment marker. `<>…</>` collects its children with no wrapper element;
+ * the enclosing container coalesces them into its own child list.
+ */
+export declare const Fragment: unique symbol;
+export type Fragment = typeof Fragment;
+/**
+ * Automatic-runtime entry point. The compiler emits calls to this (and to
+ * {@link jsxs}) when `jsxImportSource` is `@elaraai/east-ui`.
+ *
+ * `props.children` carries the nested elements; each component function does
+ * its own child normalization (see `@elaraai/east-ui`). A fragment is
+ * routed through the shared child coalescer so it yields a well-typed children
+ * value independent of the enclosing tag.
+ */
+export declare function jsx(type: Component<unknown> | Fragment, props: {
+    children?: unknown;
+} | null): UIElement;
+/** Static-children variant — identical behaviour for this runtime. */
+export declare const jsxs: typeof jsx;
+/** Development entry point — same behaviour, extra compiler args ignored. */
+export declare function jsxDEV(type: Component<unknown> | Fragment, props: {
+    children?: unknown;
+} | null): UIElement;
+/**
+ * Classic-runtime factory (`@jsxFactory h`). Folds positional children into
+ * `props.children` and delegates to {@link jsx}, so both runtimes share one
+ * code path.
+ */
+export declare function h(type: Component<unknown> | Fragment, props: Record<string, unknown> | null, ...children: unknown[]): UIElement;
+/**
+ * JSX type contract consumed by the compiler under
+ * `jsxImportSource: "@elaraai/east-ui"`.
+ *
+ * A `namespace` is the only shape the compiler accepts for the `JSX` type
+ * contract, so the module-syntax lint rule is disabled here intentionally.
+ */
+export declare namespace JSX {
+    /** Every JSX element expression evaluates to a built `UIComponentType`. */
+    type Element = UIElement;
+    /** Names the prop (`children`) that carries nested elements. */
+    interface ElementChildrenAttribute {
+        children: object;
+    }
+    /**
+     * No intrinsic (lowercase) tags: `<div>` is not an east-ui component.
+     * Only the capitalized component tags are valid.
+     */
+    interface IntrinsicElements {
+    }
+}
+//# sourceMappingURL=runtime.d.ts.map

package/dist/src/runtime/runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../src/runtime/runtime.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,gFAAgF;AAChF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAElD,iFAAiF;AACjF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;AAEnD;;;GAGG;AACH,eAAO,MAAM,QAAQ,eAA0C,CAAC;AAChE,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAEvC;;;;;;;;GAQG;AACH,wBAAgB,GAAG,CACf,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,QAAQ,EACnC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,GACrC,SAAS,CAOX;AAED,sEAAsE;AACtE,eAAO,MAAM,IAAI,EAAE,OAAO,GAAS,CAAC;AAEpC,6EAA6E;AAC7E,wBAAgB,MAAM,CAClB,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,QAAQ,EACnC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,GACrC,SAAS,CAEX;AAED;;;;GAIG;AACH,wBAAgB,CAAC,CACb,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,QAAQ,EACnC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,EACrC,GAAG,QAAQ,EAAE,OAAO,EAAE,GACvB,SAAS,CAKX;AAED;;;;;;GAMG;AAEH,yBAAiB,GAAG,CAAC;IACjB,2EAA2E;IAC3E,KAAY,OAAO,GAAG,SAAS,CAAC;IAChC,gEAAgE;IAChE,UAAiB,wBAAwB;QACrC,QAAQ,EAAE,MAAM,CAAC;KACpB;IACD;;;OAGG;IAEH,UAAiB,iBAAiB;KAAG;CACxC"}

package/dist/src/runtime/runtime.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { coalesceChildren } from "./children.js";
+/**
+ * Fragment marker. `<>…</>` collects its children with no wrapper element;
+ * the enclosing container coalesces them into its own child list.
+ */
+export const Fragment = Symbol("@elaraai/east-ui.jsx.Fragment");
+/**
+ * Automatic-runtime entry point. The compiler emits calls to this (and to
+ * {@link jsxs}) when `jsxImportSource` is `@elaraai/east-ui`.
+ *
+ * `props.children` carries the nested elements; each component function does
+ * its own child normalization (see `@elaraai/east-ui`). A fragment is
+ * routed through the shared child coalescer so it yields a well-typed children
+ * value independent of the enclosing tag.
+ */
+export function jsx(type, props) {
+    if (type === Fragment) {
+        // A fragment yields its coalesced children (a JS array or an East array
+        // expression); the enclosing container re-coalesces it into place.
+        return coalesceChildren(props?.children);
+    }
+    return type((props ?? {}));
+}
+/** Static-children variant — identical behaviour for this runtime. */
+export const jsxs = jsx;
+/** Development entry point — same behaviour, extra compiler args ignored. */
+export function jsxDEV(type, props) {
+    return jsx(type, props);
+}
+/**
+ * Classic-runtime factory (`@jsxFactory h`). Folds positional children into
+ * `props.children` and delegates to {@link jsx}, so both runtimes share one
+ * code path.
+ */
+export function h(type, props, ...children) {
+    const merged = { ...(props ?? {}) };
+    if (children.length === 1)
+        merged.children = children[0];
+    else if (children.length > 1)
+        merged.children = children;
+    return jsx(type, merged);
+}
+//# sourceMappingURL=runtime.js.map

package/dist/src/runtime/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../../../src/runtime/runtime.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAmCH,OAAO,EAAE,gBAAgB,EAA8B,MAAM,eAAe,CAAC;AAQ7E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,+BAA+B,CAAC,CAAC;AAGhE;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,CACf,IAAmC,EACnC,KAAoC;IAEpC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QACpB,wEAAwE;QACxE,mEAAmE;QACnE,OAAO,gBAAgB,CAAC,KAAK,EAAE,QAAiC,CAAyB,CAAC;IAC9F,CAAC;IACD,OAAQ,IAA2B,CAAC,CAAC,KAAK,IAAI,EAAE,CAAY,CAAC,CAAC;AAClE,CAAC;AAED,sEAAsE;AACtE,MAAM,CAAC,MAAM,IAAI,GAAe,GAAG,CAAC;AAEpC,6EAA6E;AAC7E,MAAM,UAAU,MAAM,CAClB,IAAmC,EACnC,KAAoC;IAEpC,OAAO,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,CAAC,CACb,IAAmC,EACnC,KAAqC,EACrC,GAAG,QAAmB;IAEtB,MAAM,MAAM,GAA4B,EAAE,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;IAC7D,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;SACpD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;QAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzD,OAAO,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC7B,CAAC"}

package/dist/src/runtime/slice.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * The `<Slice.*>` tag namespace — a family of slice-bound controls that read
+ * and write one shared narrowing state, plus the platform that creates and
+ * applies it. A *slice* is a typed view over a row collection: a range, a set
+ * of filter predicates, a search, a breakdown dimension, and saved cohorts.
+ * You build it with the platform members (`Slice.config` declares the fields,
+ * `Slice.bind` binds rows + initial `Slice.state` under a stable id) and then
+ * drop in whichever `<Slice.*>` controls a surface needs — they all stay in
+ * sync because they target the same bound handle.
+ *
+ * Component tags fall into three roles:
+ * - **Controls** (`<Slice.Summary>`, `<Slice.Range>`, `<Slice.Filter>`,
+ *   `<Slice.Breakdown>`, `<Slice.Legend>`, `<Slice.Search>`, `<Slice.Cohort>`)
+ *   — self-driving widgets that mutate the bound state on interaction; each
+ *   takes a flat options bag whose only required prop is `slice`.
+ * - **Strip** (`<Slice.Rail>`) — the affordance cluster standalone; components
+ *   with the `slice` chrome option mount the same cluster in their own header.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, StructType, StringType, IntegerType, ArrayType, none } from "@elaraai/east";
+ * import { Reactive, Slice, Table, UIComponentType } from "@elaraai/east-ui";
+ *
+ * const view = East.function([], UIComponentType, _$ => {
+ *     const EventType = StructType({ scenario: StringType, sessions: IntegerType });
+ *     const cfg = Slice.config(EventType, {
+ *         fields: { scenario: { label: "Scenario" }, sessions: { label: "Sessions" } },
+ *         searchFieldIds: ["scenario"],
+ *     });
+ *     return (
+ *         <Reactive>{$ => {
+ *             const data = $.const([{ scenario: "v3", sessions: 42n }], ArrayType(EventType));
+ *             const slice = $.let(Slice.bind([EventType], "ex.slice", cfg, Slice.state(), data, none));
+ *             const filtered = $.let(Slice.apply.where([EventType], slice.read(), cfg, data));
+ *             return (
+ *                 <Slice.Frame slice={slice} affordances={["filter", "search"]}>
+ *                     <Table data={filtered} columns={{ scenario: { header: "Scenario" }, sessions: { header: "Sessions" } }} />
+ *                 </Slice.Frame>
+ *             );
+ *         }}</Reactive>
+ *     );
+ * });
+ * ```
+ *
+ * @remarks
+ * Carries the slice platform alongside the tags: `Slice.config` (declares the
+ * fields), `Slice.bind` (binds rows + initial state under a stable id),
+ * `Slice.state` (the initial-state builder), `Slice.apply` (the pure
+ * narrowing — `Slice.apply.where`, `.breakdown`, …), and `Slice.Types` (every
+ * East type: `State`, `Predicate`, `Range`, `Breakdown`, `Cohort`,
+ * `SearchMatch`, …). One import from `@elaraai/east-ui` wires the whole
+ * surface.
+ */
+import { Slice as SliceFactory } from "../slice/index.js";
+import { type OptionsProps, type JsxTag } from "./combinators.js";
+/** The `<Slice.*>` tag namespace: component tags + the carried platform API. */
+type SliceTags = {
+    Summary: JsxTag<OptionsProps<typeof SliceFactory.Summary.Root>>;
+    Range: JsxTag<OptionsProps<typeof SliceFactory.Range.Root>>;
+    Filter: JsxTag<OptionsProps<typeof SliceFactory.Filter.Root>>;
+    Breakdown: JsxTag<OptionsProps<typeof SliceFactory.Breakdown.Root>>;
+    Legend: JsxTag<OptionsProps<typeof SliceFactory.Legend.Root>>;
+    Search: JsxTag<OptionsProps<typeof SliceFactory.Search.Root>>;
+    Cohort: JsxTag<OptionsProps<typeof SliceFactory.Cohort.Root>>;
+    Rail: JsxTag<OptionsProps<typeof SliceFactory.Rail.Root>>;
+    config: typeof SliceFactory.config;
+    bind: typeof SliceFactory.bind;
+    rows: typeof SliceFactory.rows;
+    state: typeof SliceFactory.state;
+    apply: typeof SliceFactory.apply;
+    Types: typeof SliceFactory.Types;
+};
+/**
+ * The slice-bound component family + the slice platform. See the namespace
+ * doc above for the full surface; each tag below carries its own TypeDoc.
+ */
+export declare const Slice: SliceTags;
+export {};
+//# sourceMappingURL=slice.d.ts.map

package/dist/src/runtime/slice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slice.d.ts","sourceRoot":"","sources":["../../../src/runtime/slice.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAc,KAAK,YAAY,EAAE,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE9E,gFAAgF;AAChF,KAAK,SAAS,GAAG;IACb,OAAO,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5D,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9D,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9D,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,OAAO,YAAY,CAAC,MAAM,CAAC;IACnC,IAAI,EAAE,OAAO,YAAY,CAAC,IAAI,CAAC;IAC/B,IAAI,EAAE,OAAO,YAAY,CAAC,IAAI,CAAC;IAC/B,KAAK,EAAE,OAAO,YAAY,CAAC,KAAK,CAAC;IACjC,KAAK,EAAE,OAAO,YAAY,CAAC,KAAK,CAAC;IACjC,KAAK,EAAE,OAAO,YAAY,CAAC,KAAK,CAAC;CACpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,SAyTnB,CAAC"}

package/dist/src/runtime/slice.js

@@ -0,0 +1,379 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * The `<Slice.*>` tag namespace — a family of slice-bound controls that read
+ * and write one shared narrowing state, plus the platform that creates and
+ * applies it. A *slice* is a typed view over a row collection: a range, a set
+ * of filter predicates, a search, a breakdown dimension, and saved cohorts.
+ * You build it with the platform members (`Slice.config` declares the fields,
+ * `Slice.bind` binds rows + initial `Slice.state` under a stable id) and then
+ * drop in whichever `<Slice.*>` controls a surface needs — they all stay in
+ * sync because they target the same bound handle.
+ *
+ * Component tags fall into three roles:
+ * - **Controls** (`<Slice.Summary>`, `<Slice.Range>`, `<Slice.Filter>`,
+ *   `<Slice.Breakdown>`, `<Slice.Legend>`, `<Slice.Search>`, `<Slice.Cohort>`)
+ *   — self-driving widgets that mutate the bound state on interaction; each
+ *   takes a flat options bag whose only required prop is `slice`.
+ * - **Strip** (`<Slice.Rail>`) — the affordance cluster standalone; components
+ *   with the `slice` chrome option mount the same cluster in their own header.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, StructType, StringType, IntegerType, ArrayType, none } from "@elaraai/east";
+ * import { Reactive, Slice, Table, UIComponentType } from "@elaraai/east-ui";
+ *
+ * const view = East.function([], UIComponentType, _$ => {
+ *     const EventType = StructType({ scenario: StringType, sessions: IntegerType });
+ *     const cfg = Slice.config(EventType, {
+ *         fields: { scenario: { label: "Scenario" }, sessions: { label: "Sessions" } },
+ *         searchFieldIds: ["scenario"],
+ *     });
+ *     return (
+ *         <Reactive>{$ => {
+ *             const data = $.const([{ scenario: "v3", sessions: 42n }], ArrayType(EventType));
+ *             const slice = $.let(Slice.bind([EventType], "ex.slice", cfg, Slice.state(), data, none));
+ *             const filtered = $.let(Slice.apply.where([EventType], slice.read(), cfg, data));
+ *             return (
+ *                 <Slice.Frame slice={slice} affordances={["filter", "search"]}>
+ *                     <Table data={filtered} columns={{ scenario: { header: "Scenario" }, sessions: { header: "Sessions" } }} />
+ *                 </Slice.Frame>
+ *             );
+ *         }}</Reactive>
+ *     );
+ * });
+ * ```
+ *
+ * @remarks
+ * Carries the slice platform alongside the tags: `Slice.config` (declares the
+ * fields), `Slice.bind` (binds rows + initial state under a stable id),
+ * `Slice.state` (the initial-state builder), `Slice.apply` (the pure
+ * narrowing — `Slice.apply.where`, `.breakdown`, …), and `Slice.Types` (every
+ * East type: `State`, `Predicate`, `Range`, `Breakdown`, `Cohort`,
+ * `SearchMatch`, …). One import from `@elaraai/east-ui` wires the whole
+ * surface.
+ */
+import { Slice as SliceFactory } from "../slice/index.js";
+import { optionsTag } from "./combinators.js";
+/**
+ * The slice-bound component family + the slice platform. See the namespace
+ * doc above for the full surface; each tag below carries its own TypeDoc.
+ */
+export const Slice = {
+    /**
+     * One-line `N results · M filters · clear all` status bar bound to a
+     * slice. Reach for it as the unobtrusive footer of a slice surface — the
+     * result count comes from the rows bound at `Slice.bind`, the filter count
+     * from the bound state, and `clear all` resets every predicate. Props are
+     * flat ({@link SliceSummaryOptions}); the only required one is `slice`.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, variant, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ country: StringType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, { fields: { country: { label: "Country" }, sessions: { label: "Sessions" } } });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ country: "US", sessions: 42n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.summary", cfg, Slice.state({
+     *                 filters: [variant("integer", { fieldId: "sessions", op: variant("gte", 10n) })],
+     *             }), data, none));
+     *             return <Slice.Summary slice={slice} />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Summary.Types` (the `Summary` East type). Desugars to
+     * `Slice.Summary.Root(options)`.
+     */
+    Summary: optionsTag(SliceFactory.Summary.Root),
+    /**
+     * A single time-range pill bound to a slice. Click it to open the picker
+     * popover with presets (`Today / 7d / 30d / 90d / YTD / Custom…`), an
+     * optional compare row, and the resolved window. Use it wherever a surface
+     * narrows by a `DateTime` field (the slice's `rangeFieldId`). Props are
+     * flat ({@link SliceRangeOptions}); the only required one is `slice`.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, DateTimeType, IntegerType, ArrayType, variant, some, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ timestamp: DateTimeType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { timestamp: { label: "Time" }, sessions: { label: "Sessions" } },
+     *         rangeFieldId: "timestamp",
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ timestamp: new Date(), sessions: 42n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.range", cfg, Slice.state({
+     *                 range: some(variant("datetimePreset", variant("last30d", null))),
+     *             }), data, none));
+     *             return <Slice.Range slice={slice} />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Range.Types` (the `Range` picker East type). Desugars to
+     * `Slice.Range.Root(options)`.
+     */
+    Range: optionsTag(SliceFactory.Range.Root),
+    /**
+     * Faceted predicate chips bound to a slice. Each filter in the bound state
+     * renders as a chip (field · operator · value) with a remove `×`; the
+     * built-in `+ add filter` builder (driven by the slice's fields) appends
+     * new predicates with no host wiring. Reach for it as the primary
+     * narrowing control of a table surface. Props are flat
+     * ({@link SliceFilterOptions}); `density` defaults from the surrounding rail.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, variant, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ scenario: StringType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { scenario: { label: "Scenario" }, sessions: { label: "Sessions" } },
+     *         searchFieldIds: ["scenario"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ scenario: "v3", sessions: 42n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.filter", cfg, Slice.state({
+     *                 filters: [variant("string", { fieldId: "scenario", op: variant("eq", "v3") })],
+     *             }), data, none));
+     *             return <Slice.Filter slice={slice} unit="events" density="compact" />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Filter.Types` (the `Filter` East type). Desugars to
+     * `Slice.Filter.Root(options)`.
+     */
+    Filter: optionsTag(SliceFactory.Filter.Root),
+    /**
+     * Split-by-dimension picker bound to a slice. Dimension chips (the fields
+     * declared as `breakdownFieldIds`) set the active breakdown — the chosen
+     * one is brand-tinted with a remove `×` — and a preview of the resulting
+     * series is rendered from the platform-computed groups. Pair it with a
+     * a `Chart.Series` layer / `Slice.Legend` to split a chart into series. Props are
+     * flat ({@link SliceBreakdownOptions}); `density` defaults from the
+     * surrounding `Slice.Frame`.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, some, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ country: StringType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { country: { label: "Country" }, sessions: { label: "Sessions" } },
+     *         breakdownFieldIds: ["country"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ country: "US", sessions: 12n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.breakdown", cfg, Slice.state({
+     *                 breakdown: some({ fieldId: "country", limit: none }),
+     *             }), data, none));
+     *             return <Slice.Breakdown slice={slice} density="compact" />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Breakdown.Types` (the `Breakdown` picker East type).
+     * Desugars to `Slice.Breakdown.Root(options)`.
+     */
+    Breakdown: optionsTag(SliceFactory.Breakdown.Root),
+    /**
+     * Inline `swatch · label · count · toggle` rail over the slice's active
+     * breakdown series. Toggling a chip flips that group's visibility in the
+     * bound state (none hidden ⇒ all visible), and its colours match whatever
+     * `Chart.Series` is rendering the same series. Drop it beneath a slice
+     * chart to label and gate the series. Props are flat
+     * ({@link SliceLegendOptions}); the only required one is `slice`.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, some, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ region: StringType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { region: { label: "Region" }, sessions: { label: "Sessions" } },
+     *         breakdownFieldIds: ["region"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ region: "EU", sessions: 12n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.legend", cfg, Slice.state({
+     *                 breakdown: some({ fieldId: "region", limit: none }),
+     *             }), data, none));
+     *             return <Slice.Legend slice={slice} />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Legend.Types` (the `Legend` East type). Desugars to
+     * `Slice.Legend.Root(options)`.
+     */
+    Legend: optionsTag(SliceFactory.Legend.Root),
+    /**
+     * Combobox typeahead over a slice dimension. Typing drives the bound
+     * search state; suggestions come from the rows the bind projects through
+     * its `toMatch` function (so this control needs a slice bound with a
+     * `toMatch`), and selecting a suggestion commits it. Use it for
+     * find-by-id / find-by-name narrowing. Props are flat
+     * ({@link SliceSearchOptions}); `density` defaults from the surrounding rail.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, ArrayType, some } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ sku: StringType, name: StringType, note: StringType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { sku: { label: "SKU" }, name: { label: "Name" }, note: { label: "Note" } },
+     *         searchFieldIds: ["sku"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ sku: "SKU-001", name: "Industrial fan", note: "spike" }], ArrayType(EventType));
+     *             const toMatch = $.const(East.function([EventType], Slice.Types.SearchMatch, ($, r) =>
+     *                 ({ id: r.sku, label: r.name, meta: some(r.note) })));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.search", cfg, Slice.state({
+     *                 search: some("SKU-001"),
+     *             }), data, some(toMatch)));
+     *             return <Slice.Search slice={slice} density="compact" />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Search.Types` (`Search`, the `Match` row-projection
+     * struct, and the `Matches` array). Desugars to
+     * `Slice.Search.Root(options)`.
+     */
+    Search: optionsTag(SliceFactory.Search.Root),
+    /**
+     * Saved-segment chips bound to a slice. Each cohort in the bound state is a
+     * named bundle of AND-ed predicates rendered as a chip (active ones
+     * brand-tinted with a remove `×`); toggling one applies it. The focused
+     * cohort's clauses expand into a detail block with Edit / Apply / Remove,
+     * captioned with the author / freshness / re-evaluation meta you pass.
+     * Use it to let people save and recall named segments. Props are flat
+     * ({@link SliceCohortOptions}); the only required one is `slice`.
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, variant, none } from "@elaraai/east";
+     * import { Reactive, Slice, UIComponentType } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ sessions: IntegerType, plan_tier: StringType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { sessions: { label: "Sessions" }, plan_tier: { label: "Plan tier" } },
+     *         searchFieldIds: ["plan_tier"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ sessions: 18n, plan_tier: "pro" }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.cohort", cfg, Slice.state({
+     *                 cohorts: [{ id: "power-users", name: "Power users", filters: [
+     *                     variant("integer", { fieldId: "sessions", op: variant("gte", 10n) }),
+     *                 ] }],
+     *                 activeCohorts: new Set(["power-users"]),
+     *             }), data, none));
+     *             return <Slice.Cohort slice={slice} createdBy="d.park" reevaluateEvery="every 10 min" />;
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Carries `Slice.Cohort.Types` (the `Cohort` picker East type). Desugars
+     * to `Slice.Cohort.Root(options)`.
+     */
+    Cohort: optionsTag(SliceFactory.Cohort.Root),
+    /**
+     * The slice affordance cluster as a standalone strip — one row that never
+     * wraps, compressing along the chip ladder (whole chips → `+M more` within
+     * a family → family count chips → one `N narrowed` chip); under
+     * compression every chip opens the sectioned `Slice.Edit` popover floating
+     * over whatever sits below. Place it above components reading
+     * `Slice.rows([RowType], slice)` and the rail narrows them all — the new
+     * composition model: data flows explicitly, chrome sits where the author
+     * puts it. Props are flat ({@link SliceRailOptions}).
+     *
+     * @example
+     * ```tsx
+     * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+     * import { East, StructType, StringType, IntegerType, ArrayType, none } from "@elaraai/east";
+     * import { Reactive, Slice, Table, UIComponentType, VStack } from "@elaraai/east-ui";
+     *
+     * const view = East.function([], UIComponentType, _$ => {
+     *     const EventType = StructType({ scenario: StringType, sessions: IntegerType });
+     *     const cfg = Slice.config(EventType, {
+     *         fields: { scenario: { label: "Scenario" }, sessions: { label: "Sessions" } },
+     *         searchFieldIds: ["scenario"],
+     *     });
+     *     return (
+     *         <Reactive>{$ => {
+     *             const data = $.const([{ scenario: "v3", sessions: 42n }], ArrayType(EventType));
+     *             const slice = $.let(Slice.bind([EventType], "ex.slice.rail", cfg, Slice.state(), data, none));
+     *             const narrowed = $.let(Slice.rows([EventType], slice));
+     *             return (
+     *                 <VStack gap="3" align="stretch">
+     *                     <Slice.Rail slice={slice} affordances={["filter", "search"]} />
+     *                     <Table data={narrowed} columns={{ scenario: { header: "Scenario" }, sessions: { header: "Sessions" } }} />
+     *                 </VStack>
+     *             );
+     *         }}</Reactive>
+     *     );
+     * });
+     * ```
+     *
+     * @remarks
+     * Desugars to `Slice.Rail.Root(options)`. Components that take a `slice`
+     * chrome option mount this same rail inside their own header.
+     */
+    Rail: optionsTag(SliceFactory.Rail.Root),
+    config: SliceFactory.config,
+    bind: SliceFactory.bind,
+    /** Narrowed rows for a bound slice — the typed data feed (`Slice.rows([RowType], slice)`). */
+    rows: SliceFactory.rows,
+    state: SliceFactory.state,
+    apply: SliceFactory.apply,
+    Types: SliceFactory.Types,
+};
+//# sourceMappingURL=slice.js.map

package/dist/src/runtime/slice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slice.js","sourceRoot":"","sources":["../../../src/runtime/slice.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAkC,MAAM,kBAAkB,CAAC;AAoB9E;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAc;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,OAAO,EAAE,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC;IAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCG;IACH,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;IAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;IAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;IACH,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC;IAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;IAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;IAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCG;IACH,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;IAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCG;IACH,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;IACxC,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI;IACvB,8FAA8F;IAC9F,IAAI,EAAE,YAAY,CAAC,IAAI;IACvB,KAAK,EAAE,YAAY,CAAC,KAAK;IACzB,KAAK,EAAE,YAAY,CAAC,KAAK;IACzB,KAAK,EAAE,YAAY,CAAC,KAAK;CAC5B,CAAC"}

package/dist/src/runtime/typography/code-block.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * Typography tag for a fenced, multi-line code block — a self-contained
+ * source listing with optional syntax highlighting, line numbers, line
+ * emphasis, and a scroll cap. For a short inline span use `<Code>`.
+ */
+import { CodeBlock as CodeBlockFactory } from "../../typography/code-block/index.js";
+import { type ContentProps, type JsxTag } from "../combinators.js";
+/**
+ * Fenced code block — a multi-line source listing. The code string is the
+ * single child; set `language` for syntax highlighting, `showLineNumbers`,
+ * `highlightLines` to emphasise rows, `title`, and `maxHeight` to make it
+ * scrollable, all via flat props ({@link CodeBlockStyle}).
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East } from "@elaraai/east";
+ * import { CodeBlock, UIComponentType } from "@elaraai/east-ui";
+ *
+ * const listing = East.function([], UIComponentType, _$ => (
+ *     <CodeBlock language="typescript" showLineNumbers highlightLines={[4n]}>
+ *         {"function calculate() {\n\tconst a = 10;\n\tconst b = 20;\n\treturn a + b;\n}"}
+ *     </CodeBlock>
+ * ));
+ * ```
+ *
+ * @remarks
+ * Carries `CodeBlock.Types` — the East data type and style struct.
+ * Desugars to `CodeBlock.Root(code, options)`.
+ */
+export declare const CodeBlock: JsxTag<ContentProps<typeof CodeBlockFactory.Root>> & {
+    Types: typeof CodeBlockFactory.Types;
+};
+//# sourceMappingURL=code-block.d.ts.map

package/dist/src/runtime/typography/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../src/runtime/typography/code-block.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;GAIG;AAEH,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAW,KAAK,YAAY,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,gBAAgB,CAAC,KAAK,CAAA;CAC/B,CAAC"}