@elaraai/e3-ui 1.0.83 → 1.0.85

package/dist/src/studio/page.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * `<Studio.Page>` (#993) — a page as operators see it. It reads the pages
+ * record's value and never writes it.
+ *
+ * The page is an interface — the record's value, the listed components, the
+ * page's key and which of its layouts to draw — and the `StudioPage` renderer
+ * draws it: the layout's placements on the snap grid, each its component's own
+ * UI, so a surface's `ui()` task holds every listed component's reads. A
+ * solution places it where it wants, in a layout of its own.
+ *
+ * @packageDocumentation
+ */
+import { ArrayType, NullType, StructType, VariantType, variant, } from "@elaraai/east";
+import { EastUI, optionsTag, } from "@elaraai/east-ui/internal";
+import { StudioComponentType } from "./component.js";
+import { StudioKeyType, StudioPagesType } from "./pages.js";
+// ============================================================================
+// Types
+// ============================================================================
+/**
+ * Which layout of a page to draw.
+ *
+ * @property live - The published version — what a published page shows
+ * @property draft - The layout as last saved — what the builder edits
+ */
+export const StudioVersionType = VariantType({
+    live: NullType,
+    draft: NullType,
+});
+/**
+ * The `StudioPage` renderer's payload — one page, to draw.
+ *
+ * @property pages - The pages record's value
+ * @property components - The components the surface lists
+ * @property page - The page's key
+ * @property version - Which of its layouts to draw
+ */
+export const StudioPagePayloadType = StructType({
+    pages: StudioPagesType,
+    components: ArrayType(StudioComponentType),
+    page: StudioKeyType,
+    version: StudioVersionType,
+});
+/**
+ * Internal {@link EastUI.component} carrier. The React renderer registers
+ * against this in `@elaraai/e3-ui-components` via `implementUIComponent`.
+ */
+export const StudioPageComponent = EastUI.component("StudioPage", StudioPagePayloadType, { optional: true });
+/**
+ * Draws one page with no chrome: its live or draft layout on the snap grid,
+ * each placement its component's own UI.
+ *
+ * @remarks
+ * A component renders the same way here and in the builder: a frameless one
+ * (`frame: "none"`) is bare, and a tile's label is its title or its
+ * component's name. Two placements of one component share its State and Slice
+ * keys. A placement whose component the surface does not list is a
+ * placeholder naming its key. A page the record does not hold, or a live
+ * version not yet published, is a placeholder that says so. Under a narrow
+ * container the tiles stack in row order. The page draws no border around
+ * itself.
+ *
+ * @param options - The record's value, the listed components, the page and
+ *   its version ({@link StudioPageOptions})
+ * @returns An East expression of type `UIComponentType`
+ *
+ * @example
+ * ```tsx
+ * import { East } from "@elaraai/east";
+ * import { Reactive, UIComponentType } from "@elaraai/east-ui";
+ * import { Data, Studio, ui } from "@elaraai/e3-ui";
+ *
+ * // The published Overview page, for everyone else: it only reads the pages.
+ * export const opsConsole = ui("ops_console", [], East.function([], UIComponentType, _$ => (
+ *     <Reactive>{$ => {
+ *         const components = $.let([kpiRail, revenueTrend, breakdownBars]);
+ *         const all        = $.let(Data.bind(pages));
+ *         return <Studio.Page pages={all.read()} components={components}
+ *             page={{ project: "Ops console", page: "Overview" }} />;
+ *     }}</Reactive>
+ * )));
+ * ```
+ */
+function createPage(options) {
+    const version = options.version ?? "live";
+    return StudioPageComponent.Root({
+        pages: options.pages,
+        components: options.components,
+        page: options.page,
+        version: typeof version === "string" ? variant(version, null) : version,
+    });
+}
+// ============================================================================
+// Tag
+// ============================================================================
+/**
+ * `<Studio.Page>` — one page with no chrome, its live or draft layout on the
+ * snap grid. See {@link createPage}.
+ */
+export const StudioPage = optionsTag(createPage);
+//# sourceMappingURL=page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../src/studio/page.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;GAWG;AAEH,OAAO,EACH,SAAS,EACT,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,GAGV,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,MAAM,EACN,UAAU,GAIb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE5D,+EAA+E;AAC/E,QAAQ;AACR,+EAA+E;AAE/E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACzC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;CAClB,CAAC,CAAC;AAQH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAAC;IAC5C,KAAK,EAAE,eAAe;IACtB,UAAU,EAAE,SAAS,CAAC,mBAAmB,CAAC;IAC1C,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,iBAAiB;CAC7B,CAAC,CAAC;AAKH;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAyB7G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,UAAU,CAAC,OAA0B;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,MAAM,CAAC;IAC1C,OAAO,mBAAmB,CAAC,IAAI,CAAC;QAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;KAC1E,CAAC,CAAC;AACP,CAAC;AAED,+EAA+E;AAC/E,MAAM;AACN,+EAA+E;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAA4C,UAAU,CAAC,UAAU,CAAC,CAAC"}