@elaraai/e3-ui 1.0.83 → 1.0.84

package/dist/src/studio/builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../../src/studio/builder.ts"],"names":[],"mappings":"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"}

package/dist/src/studio/builder.js

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * `<Studio.Builder>` (#1000) — the builder as one component: the open page's
+ * canvas under its one toolbar, the palette before it and the inspector after
+ * it, and the publish preview, which Preview and Publish open in the canvas's
+ * place.
+ *
+ * The builder is an interface — the pages record bound with its patch, the
+ * listed components, the project, and the preview's words — which the
+ * `StudioBuilder` renderer draws. Its parts are the renderer's: the palette
+ * (#994), the canvas (#995), the inspector (#996) and the publish preview
+ * (#998), each computed in East by this package and drawn in the browser.
+ * `<Studio.Library>` opens pages in it, shared by `id`.
+ *
+ * @packageDocumentation
+ */
+import { ArrayType, OptionType, StringType, StructType, none, some, } from "@elaraai/east";
+import { EastUI, optionsTag, } from "@elaraai/east-ui/internal";
+import { StudioComponentType } from "./component.js";
+import { StudioPagesHandleType } from "./pages.js";
+// ============================================================================
+// The renderer's payload
+// ============================================================================
+/**
+ * The `StudioBuilder` renderer's payload — the builder's interface.
+ *
+ * @property pages - The pages record, bound with its patch — what the builder reads, and saves and publishes through
+ * @property components - The components the surface lists, in palette order
+ * @property project - The project whose pages the builder opens
+ * @property env - Where the publish preview publishes to — its Env pill, and "Publish vN to <env>"
+ * @property audience - Who sees a published page — the preview's Audience row
+ * @property rollout - When they see it — the preview's Rollout row
+ * @property id - Names the builder, when a surface holds two — and the page library that opens its pages
+ */
+export const StudioBuilderPayloadType = StructType({
+    pages: StudioPagesHandleType,
+    components: ArrayType(StudioComponentType),
+    project: StringType,
+    env: OptionType(StringType),
+    audience: OptionType(StringType),
+    rollout: OptionType(StringType),
+    id: OptionType(StringType),
+});
+/**
+ * Internal {@link EastUI.component} carrier. The React renderer registers
+ * against this in `@elaraai/e3-ui-components` via `implementUIComponent`.
+ */
+export const StudioBuilderComponent = EastUI.component("StudioBuilder", StudioBuilderPayloadType, { optional: true });
+/**
+ * The builder: the open page's canvas, with the palette and the inspector
+ * beside it, and the publish preview.
+ *
+ * @remarks
+ * - **The canvas** is the open page's grid under the builder's one toolbar —
+ *   the page's status, the grid chip, the zoom, the history item, Desktop ·
+ *   Tablet, Save as template, Preview and Publish. Every gesture is a draft
+ *   the history item undoes, and Apply saves the page as one patch commit.
+ * - **The palette**, before the canvas, is its component library: the listed
+ *   components by category, each naming what it reads, dragged onto the grid;
+ *   and the project's pages, a click opening one.
+ * - **The inspector**, after it, is the selected placement: its component,
+ *   what it reads, its description, and its span, row, height and alignment.
+ * - **Preview** and **Publish** open the publish preview in the canvas's
+ *   place, full-bleed — the open page as it will publish, what changed since
+ *   its live version, and Save as draft and Publish; **Exit** returns to the
+ *   canvas, its drafts as they were.
+ *
+ * The builder fills its parent's height and draws no border around itself.
+ * The page open in it is shared by `id` with a `<Studio.Library>`, which
+ * opens pages in it.
+ *
+ * @param options - The bound record, the listed components, the project and the preview's words ({@link StudioBuilderOptions})
+ * @returns An East expression of type `UIComponentType`
+ *
+ * @example
+ * ```tsx
+ * import { East } from "@elaraai/east";
+ * import { Reactive, UIComponentType } from "@elaraai/east-ui";
+ * import { Record, Studio, ui } from "@elaraai/e3-ui";
+ *
+ * // The builder, for operators: it reads the pages and writes their patch.
+ * export const builder = ui("builder", [], East.function([], UIComponentType, _$ => (
+ *     <Reactive>{$ => {
+ *         const components = $.let([kpiRail, revenueTrend, breakdownBars]);
+ *         const pages      = $.let(Record.bind(d.pages, [d.pagesPatch]));
+ *         return <Studio.Builder pages={pages} components={components} project="Ops console"
+ *             env="Staging" audience="Field ops · 24 users" rollout="Immediate" />;
+ *     }}</Reactive>
+ * )));
+ * ```
+ */
+function createBuilder(options) {
+    return StudioBuilderComponent.Root({
+        pages: { read: options.pages.read, history: options.pages.history, commit: { patch: options.pages.commit.patch } },
+        components: options.components,
+        project: options.project,
+        env: options.env === undefined ? none : some(options.env),
+        audience: options.audience === undefined ? none : some(options.audience),
+        rollout: options.rollout === undefined ? none : some(options.rollout),
+        id: options.id === undefined ? none : some(options.id),
+    });
+}
+// ============================================================================
+// Tag
+// ============================================================================
+/**
+ * `<Studio.Builder>` — the builder as one component: the open page's canvas,
+ * the palette and the inspector beside it, and the publish preview. See
+ * {@link createBuilder}.
+ */
+export const StudioBuilder = optionsTag(createBuilder);
+//# sourceMappingURL=builder.js.map

package/dist/src/studio/builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","sourceRoot":"","sources":["../../../src/studio/builder.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACH,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,GAGP,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,MAAM,EACN,UAAU,GAIb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAA0B,MAAM,YAAY,CAAC;AAE3E,+EAA+E;AAC/E,yBAAyB;AACzB,+EAA+E;AAE/E;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,UAAU,CAAC;IAC/C,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE,SAAS,CAAC,mBAAmB,CAAC;IAC1C,OAAO,EAAE,UAAU;IACnB,GAAG,EAAE,UAAU,CAAC,UAAU,CAAC;IAC3B,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC;IAChC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC;IAC/B,EAAE,EAAE,UAAU,CAAC,UAAU,CAAC;CAC7B,CAAC,CAAC;AAKH;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,SAAS,CAAC,eAAe,EAAE,wBAAwB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAkCtH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,SAAS,aAAa,CAAC,OAA6B;IAChD,OAAO,sBAAsB,CAAC,IAAI,CAAC;QAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE;QAClH,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,GAAG,EAAE,OAAO,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;QACzD,QAAQ,EAAE,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QACxE,OAAO,EAAE,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;QACrE,EAAE,EAAE,OAAO,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;KACzD,CAAC,CAAC;AACP,CAAC;AAED,+EAA+E;AAC/E,MAAM;AACN,+EAA+E;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAA+C,UAAU,CAAC,aAAa,CAAC,CAAC"}

package/dist/src/studio/canvas.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * The builder's canvas (#995) — what its tiles and its toolbar's Save as
+ * template show, for the `StudioBuilder` renderer, which draws the canvas: the
+ * open page's grid under the builder's one toolbar, every gesture a draft of
+ * the page's editing session and Apply one patch commit on the page.
+ *
+ * @packageDocumentation
+ */
+import { ArrayType, AsyncFunctionType, BooleanType, DictType, OptionType, SetType, StringType, StructType } from "@elaraai/east";
+/**
+ * A listed component, as its placements' tiles show it on the canvas.
+ *
+ * @property frame - Drawn in a tile frame, or bare
+ * @property name - Its name — a placement's label when it has no title of its own
+ * @property icon - Its icon, in the selection bar
+ * @property meta - Its key and the datasets it reads, in the selection bar
+ */
+export declare const CanvasTileType: StructType<{
+    readonly frame: BooleanType;
+    readonly name: StringType;
+    readonly icon: StringType;
+    readonly meta: StringType;
+}>;
+/**
+ * Each listed component's tile, by key: framed or bare, its name and icon,
+ * and its meta line — its key and the datasets and records its code reads,
+ * joined with ` · ` ("revenue_trend · sales_daily"). A key two components
+ * share keeps the first one's tile.
+ */
+export declare const canvasTiles: import("@elaraai/east").CallableFunctionExpr<[ArrayType<StructType<{
+    readonly key: StringType;
+    readonly name: StringType;
+    readonly category: StringType;
+    readonly icon: StringType;
+    readonly span: import("@elaraai/east").IntegerType;
+    readonly description: OptionType<StringType>;
+    readonly frame: import("@elaraai/east").VariantType<{
+        readonly card: import("@elaraai/east").NullType;
+        readonly none: import("@elaraai/east").NullType;
+    }>;
+    readonly tags: ArrayType<StringType>;
+    readonly collections: ArrayType<StringType>;
+    readonly deprecated: BooleanType;
+    readonly reads: StructType<{
+        readonly paths: ArrayType<ArrayType<import("@elaraai/east").VariantType<{
+            readonly field: StringType;
+        }>>>;
+        readonly functions: ArrayType<StringType>;
+        readonly records: ArrayType<StringType>;
+        readonly pages: ArrayType<ArrayType<import("@elaraai/east").VariantType<{
+            readonly field: StringType;
+        }>>>;
+    }>;
+    readonly fingerprint: StringType;
+    readonly render: import("@elaraai/east").FunctionType<[], import("@elaraai/east").RecursiveType<import("@elaraai/east-ui").UIComponentNode>>;
+}>>], DictType<StringType, StructType<{
+    readonly frame: BooleanType;
+    readonly name: StringType;
+    readonly icon: StringType;
+    readonly meta: StringType;
+}>>>;
+/**
+ * The builder toolbar's Save as template, as the `StudioBuilder` renderer
+ * draws it: its button, and the popover beside it that names the template.
+ *
+ * @property title - The open page's title — the popover's head names it, and offers a name from it
+ * @property enabled - Whether the open entry is a page, which it saves; a template is not saved again
+ * @property taken - The names the project holds, pages and templates — the template's must be none of them
+ * @property onSave - Saves the open page, as last saved, as a template under a name — one commit; `none` when it was saved, else what refused it
+ */
+export declare const StudioSaveTemplatePayloadType: StructType<{
+    readonly title: StringType;
+    readonly enabled: BooleanType;
+    readonly taken: SetType<StringType>;
+    readonly onSave: AsyncFunctionType<[StringType], OptionType<StringType>>;
+}>;
+/** Type representing the builder toolbar's Save as template. */
+export type StudioSaveTemplatePayloadType = typeof StudioSaveTemplatePayloadType;
+//# sourceMappingURL=canvas.d.ts.map

package/dist/src/studio/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/studio/canvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;GAOG;AAEH,OAAO,EACH,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,QAAQ,EAER,UAAU,EACV,OAAO,EACP,UAAU,EACV,UAAU,EACb,MAAM,eAAe,CAAC;AAOvB;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;EAKzB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBvB,CAAC;AAMF;;;;;;;;GAQG;AACH,eAAO,MAAM,6BAA6B;;;;;EAKxC,CAAC;AAEH,gEAAgE;AAChE,MAAM,MAAM,6BAA6B,GAAG,OAAO,6BAA6B,CAAC"}

package/dist/src/studio/canvas.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * The builder's canvas (#995) — what its tiles and its toolbar's Save as
+ * template show, for the `StudioBuilder` renderer, which draws the canvas: the
+ * open page's grid under the builder's one toolbar, every gesture a draft of
+ * the page's editing session and Apply one patch commit on the page.
+ *
+ * @packageDocumentation
+ */
+import { ArrayType, AsyncFunctionType, BooleanType, DictType, East, OptionType, SetType, StringType, StructType, } from "@elaraai/east";
+import { StudioComponentType } from "./component.js";
+// ============================================================================
+// What a placement's tile shows
+// ============================================================================
+/**
+ * A listed component, as its placements' tiles show it on the canvas.
+ *
+ * @property frame - Drawn in a tile frame, or bare
+ * @property name - Its name — a placement's label when it has no title of its own
+ * @property icon - Its icon, in the selection bar
+ * @property meta - Its key and the datasets it reads, in the selection bar
+ */
+export const CanvasTileType = StructType({
+    frame: BooleanType,
+    name: StringType,
+    icon: StringType,
+    meta: StringType,
+});
+/**
+ * Each listed component's tile, by key: framed or bare, its name and icon,
+ * and its meta line — its key and the datasets and records its code reads,
+ * joined with ` · ` ("revenue_trend · sales_daily"). A key two components
+ * share keeps the first one's tile.
+ */
+export const canvasTiles = East.function([ArrayType(StudioComponentType)], DictType(StringType, CanvasTileType), ($, components) => {
+    const tiles = $.let(new Map(), DictType(StringType, CanvasTileType));
+    $.for(components, ($2, component) => {
+        const reads = $2.let(component.reads.paths.concat(component.reads.pages)
+            .map((_$3, path) => path.get(path.size().subtract(1n)).unwrap("field")));
+        const meta = $2.let(reads.size().equal(0n).ifElse(() => component.key, () => East.str `${component.key} · ${reads.stringJoin(" · ")}`));
+        $2(tiles.insertOrUpdate(component.key, {
+            frame: component.frame.hasTag("card"),
+            name: component.name,
+            icon: component.icon,
+            meta,
+        }, (_$3, existing) => existing));
+    });
+    return tiles;
+});
+// ============================================================================
+// Save as template — the toolbar's item
+// ============================================================================
+/**
+ * The builder toolbar's Save as template, as the `StudioBuilder` renderer
+ * draws it: its button, and the popover beside it that names the template.
+ *
+ * @property title - The open page's title — the popover's head names it, and offers a name from it
+ * @property enabled - Whether the open entry is a page, which it saves; a template is not saved again
+ * @property taken - The names the project holds, pages and templates — the template's must be none of them
+ * @property onSave - Saves the open page, as last saved, as a template under a name — one commit; `none` when it was saved, else what refused it
+ */
+export const StudioSaveTemplatePayloadType = StructType({
+    title: StringType,
+    enabled: BooleanType,
+    taken: SetType(StringType),
+    onSave: AsyncFunctionType([StringType], OptionType(StringType)),
+});
+//# sourceMappingURL=canvas.js.map

package/dist/src/studio/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/studio/canvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;GAOG;AAEH,OAAO,EACH,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,UAAU,EACV,UAAU,GACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,+EAA+E;AAC/E,gCAAgC;AAChC,+EAA+E;AAE/E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC;IACrC,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,UAAU;CACnB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CACpC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAChC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,EACpC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;IACd,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,EAAE,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;aACnE,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7E,MAAM,IAAI,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAC7C,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EACnB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAA,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAChE,CAAC,CAAC;QACH,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;YACnC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;YACrC,IAAI,EAAE,SAAS,CAAC,IAAI;YACpB,IAAI,EAAE,SAAS,CAAC,IAAI;YACpB,IAAI;SACP,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACjB,CAAC,CACJ,CAAC;AAEF,+EAA+E;AAC/E,wCAAwC;AACxC,+EAA+E;AAE/E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,UAAU,CAAC;IACpD,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClE,CAAC,CAAC"}

package/dist/src/studio/component.d.ts

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * Studio components (#991) — a component is self-contained: an East UI
+ * function written exactly like a `ui()` body, which binds its own data, sets
+ * up its own slices and returns its UI. Different data is a different
+ * component.
+ *
+ * `Studio.component(key, meta, fn)` returns it as a `Studio.Types.Component`
+ * struct, the way `Slice.config` returns a slice config: what the palette
+ * shows, what the function reads, the fingerprint of its code, and the
+ * function itself. A surface lists the components it offers, and the Studio's
+ * renderers draw a placement by calling its component's function, so a
+ * surface's `ui()` task holds every listed component's function and its
+ * manifest is the union of theirs.
+ *
+ * @packageDocumentation
+ */
+import { ArrayType, BooleanType, FunctionType, IntegerType, NullType, OptionType, StringType, StructType, VariantType, type CallableFunctionExpr, type ExprType, type IR } from "@elaraai/east";
+import { UIComponentType } from "@elaraai/east-ui/internal";
+/**
+ * How a component's placements are drawn.
+ *
+ * @property card - In a tile frame (the default)
+ * @property none - Bare, on the canvas and published alike
+ */
+export declare const StudioFrameType: VariantType<{
+    readonly card: NullType;
+    readonly none: NullType;
+}>;
+/** Type representing how a component's placements are drawn. */
+export type StudioFrameType = typeof StudioFrameType;
+/** Literal shorthand for {@link StudioFrameType}. */
+export type StudioFrameLiteral = "card" | "none";
+/**
+ * A Studio component — what the palette shows, what the component reads, the
+ * fingerprint of its code, and the East UI function that renders it.
+ *
+ * @property key - The component's identity; a cell stores it
+ * @property name - Its name, in the palette and the inspector
+ * @property category - The palette group it sits in
+ * @property icon - A Font Awesome solid icon name
+ * @property span - The span a new placement takes, in columns of 12
+ * @property description - What it shows — the inspector's "fixed by developer" block
+ * @property frame - Drawn in a tile frame, or bare
+ * @property tags - Its tags, which the palette's Filter menu offers
+ * @property collections - Its collections, which the palette's Filter menu offers
+ * @property deprecated - Hidden from the palette; placements keep rendering
+ * @property reads - The datasets, functions and records its function binds, derived from its code
+ * @property fingerprint - A hash of its code; a cell stores it when placed and when its page publishes, so a code change since shows
+ * @property render - The East UI function that renders it
+ */
+export declare const StudioComponentType: StructType<{
+    readonly key: StringType;
+    readonly name: StringType;
+    readonly category: StringType;
+    readonly icon: StringType;
+    readonly span: IntegerType;
+    readonly description: OptionType<StringType>;
+    readonly frame: VariantType<{
+        readonly card: NullType;
+        readonly none: NullType;
+    }>;
+    readonly tags: ArrayType<StringType>;
+    readonly collections: ArrayType<StringType>;
+    readonly deprecated: BooleanType;
+    readonly reads: StructType<{
+        readonly paths: ArrayType<ArrayType<VariantType<{
+            readonly field: StringType;
+        }>>>;
+        readonly functions: ArrayType<StringType>;
+        readonly records: ArrayType<StringType>;
+        readonly pages: ArrayType<ArrayType<VariantType<{
+            readonly field: StringType;
+        }>>>;
+    }>;
+    readonly fingerprint: StringType;
+    readonly render: FunctionType<[], import("@elaraai/east").RecursiveType<import("@elaraai/east-ui").UIComponentNode>>;
+}>;
+/** Type representing a Studio component. */
+export type StudioComponentType = typeof StudioComponentType;
+/**
+ * What the palette shows of a component — its `meta`. Only `name`,
+ * `category` and `icon` are required.
+ *
+ * @property name - Its name, in the palette and the inspector
+ * @property category - The palette group it sits in
+ * @property icon - A Font Awesome solid icon name
+ * @property span - The span a new placement takes; `12n` when omitted
+ * @property description - What it shows — the inspector's "fixed by developer" block
+ * @property frame - `"card"` (the default) or `"none"`, which renders bare
+ * @property tags - Its tags, which the palette's Filter menu offers
+ * @property collections - Its collections, which the palette's Filter menu offers
+ * @property deprecated - Hidden from the palette; placements keep rendering
+ */
+export interface StudioComponentMeta {
+    /** Its name, in the palette and the inspector. */
+    name: string;
+    /** The palette group it sits in. */
+    category: string;
+    /** A Font Awesome solid icon name. */
+    icon: string;
+    /** The span a new placement takes, in columns of 12; `12n` when omitted. */
+    span?: bigint;
+    /** What it shows — the inspector's "fixed by developer" block. */
+    description?: string;
+    /** `"card"` (the default) or `"none"`, which renders bare, on the canvas and published. */
+    frame?: StudioFrameLiteral;
+    /** Its tags, which the palette's Filter menu offers. */
+    tags?: string[];
+    /** Its collections, which the palette's Filter menu offers. */
+    collections?: string[];
+    /** Hidden from the palette; placements keep rendering. */
+    deprecated?: boolean;
+}
+/**
+ * A function's fingerprint: the SHA-256 of its IR in canonical form. The same
+ * code fingerprints the same; a change to it changes the fingerprint.
+ *
+ * @param fn - The function
+ * @returns The fingerprint, hex
+ */
+export declare function fingerprintOf(fn: {
+    toIR(): {
+        ir: IR;
+    };
+}): string;
+/**
+ * Declares a Studio component — a self-contained East UI function, and what
+ * the palette shows of it.
+ *
+ * @remarks
+ * `fn` is exactly what `ui()` takes, so a component written for a `ui()` body
+ * moves into `Studio.component` unchanged. Its `reads` come from its code
+ * (`deriveManifest`), and its `fingerprint` from its IR — neither is written.
+ * Call it at module scope or inside an East function, as `Slice.config` is.
+ *
+ * @param key - The component's identity; a cell stores it
+ * @param meta - What the palette shows ({@link StudioComponentMeta})
+ * @param fn - The East UI function that renders it
+ * @returns The component, a {@link StudioComponentType} value
+ *
+ * @example
+ * ```tsx
+ * import { East, IntegerType, NullType } from "@elaraai/east";
+ * import { Button, HStack, Reactive, State, Text, UIComponentType } from "@elaraai/east-ui";
+ * import { Studio } from "@elaraai/e3-ui";
+ *
+ * // A counter: its own state, shared by every placement of it.
+ * export const counter = Studio.component("counter", {
+ *     name: "Counter", category: "Display", icon: "gauge-high", span: 4n,
+ *     description: "Clicks so far",
+ * }, East.function([], UIComponentType, _$ => (
+ *     <Reactive>{$ => {
+ *         const clicks = $.let(State.bind([IntegerType], "counter.clicks", 0n));
+ *         const add = $.const(East.function([], NullType, $2 => { $2(clicks.write(clicks.read().add(1n))); }));
+ *         return (
+ *             <HStack gap="3" align="center">
+ *                 <Text>{East.str`${East.print(clicks.read())} clicks`}</Text>
+ *                 <Button size="xs" onClick={add}>Add</Button>
+ *             </HStack>
+ *         );
+ *     }}</Reactive>
+ * )));
+ * ```
+ */
+declare function createComponent(key: string, meta: StudioComponentMeta, fn: CallableFunctionExpr<[], typeof UIComponentType>): ExprType<StudioComponentType>;
+/** What {@link createComponent} is, on the `Studio` namespace. */
+export interface StudioComponentNamespace {
+    /** Declares a component ({@link createComponent}). */
+    component: typeof createComponent;
+}
+/** The component half of the `Studio` namespace. */
+export declare const StudioComponents: StudioComponentNamespace;
+export {};
+//# sourceMappingURL=component.d.ts.map

package/dist/src/studio/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/studio/component.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EACH,SAAS,EACT,WAAW,EAEX,YAAY,EAEZ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EAMX,KAAK,oBAAoB,EACzB,KAAK,QAAQ,EACb,KAAK,EAAE,EACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAQ5D;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;EAG1B,CAAC;AAEH,gEAAgE;AAChE,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC;AAErD,qDAAqD;AACrD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;EAc9B,CAAC;AAEH,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAChC,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA8CD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE;IAAE,IAAI,IAAI;QAAE,EAAE,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,GAAG,MAAM,CAEhE;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,eAAe,CACpB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,mBAAmB,EACzB,EAAE,EAAE,oBAAoB,CAAC,EAAE,EAAE,OAAO,eAAe,CAAC,GACrD,QAAQ,CAAC,mBAAmB,CAAC,CAiB/B;AAED,kEAAkE;AAClE,MAAM,WAAW,wBAAwB;IACrC,sDAAsD;IACtD,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAED,oDAAoD;AACpD,eAAO,MAAM,gBAAgB,EAAE,wBAE9B,CAAC"}