@echothink-ui/templates 0.2.0

package/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * `@echothink-ui/templates` — genuine templates built from the layout system.
+ *
+ * Each template is a declarative `LayoutNode` AST composed from
+ * `@echothink-ui/layout` page-layouts and populated with `@echothink-ui`
+ * components by name. Render via `LayoutRoot` (with a component resolver) or
+ * flatten into Puck data for editing in the builder.
+ */
+import { softCardCampaignTemplate } from "./templates/soft-card-campaign.js";
+import { brightEventsTemplate } from "./templates/bright-events.js";
+import { glassFlowchartTemplate } from "./templates/glass-flowchart.js";
+import { studioDarkCheckBoxTemplate } from "./templates/studio-dark-check-box.js";
+import { TemplateRegistry, type TemplateDefinition } from "./types.js";
+
+export type { TemplateDefinition } from "./types.js";
+export { TemplateRegistry, collectComponentNames } from "./types.js";
+
+export {
+  softCardCampaignTemplate,
+  brightEventsTemplate,
+  glassFlowchartTemplate,
+  studioDarkCheckBoxTemplate,
+};
+
+/** All builtin templates, in catalog order. */
+export const templateCatalog: TemplateDefinition[] = [
+  softCardCampaignTemplate,
+  brightEventsTemplate,
+  glassFlowchartTemplate,
+  studioDarkCheckBoxTemplate,
+];
+
+export type TemplateId = (typeof templateCatalog)[number]["id"];
+
+/** A registry preloaded with the builtin templates. */
+export function createTemplateRegistry(): TemplateRegistry {
+  return new TemplateRegistry().registerAll(templateCatalog);
+}

package/src/templates/bright-events.ts

@@ -0,0 +1,64 @@
+import { layout, componentSlot, layoutSlot, fragmentSlot } from "@echothink-ui/layout";
+import type { TemplateDefinition } from "../types.js";
+
+/**
+ * Bright event workspace — a `DataGridInspector`: a task list grid with a toolbar
+ * and a task-detail inspector. Replaces the former `BrightEventWorkspaceTemplate`.
+ */
+const taskColumns = [
+  { key: "task", header: "Task" },
+  { key: "statusLabel", header: "Status" },
+  { key: "due", header: "Due" },
+  { key: "comments", header: "Comments", align: "end" },
+];
+
+const taskRows = [
+  { id: "t1", task: "Schedule endocrinologist appointment", statusLabel: "At risk", due: "15d", comments: 6 },
+  { id: "t2", task: "Help DStudio get more customers", statusLabel: "In progress", due: "15d", comments: 23 },
+  { id: "t3", task: "Plan an event", statusLabel: "Running", due: "15d", comments: 7 },
+  { id: "t4", task: "Return a package", statusLabel: "Completed", due: "15d", comments: 34 },
+];
+
+export const brightEventsTemplate: TemplateDefinition = {
+  id: "bright-events",
+  name: "Bright event workspace",
+  description: "Task list with toolbar filters and a task-detail inspector.",
+  stylePreset: "bright",
+  tags: ["tasks", "events", "list-detail", "bright"],
+  layout: layout({
+    id: "bright-events",
+    type: "PageLayout.DataGridInspector",
+    styleIntent: { preset: "bright", taskMode: "crud" },
+    slots: {
+      toolbar: fragmentSlot(
+        [
+          componentSlot("CarbonSearchInput", { placeholder: "Search tasks" }),
+          componentSlot("CarbonButton", { label: "Filter", intent: "tertiary" }),
+          componentSlot("CarbonButton", { label: "New task", intent: "primary" }),
+        ],
+        { op: "stack", direction: "horizontal", slots: [] },
+      ),
+      grid: componentSlot("CarbonDataTable", { rows: taskRows, columns: taskColumns, rowKey: "id" }),
+      inspector: layoutSlot(
+        layout({
+          id: "task-detail",
+          type: "Primitive.Panel",
+          styleIntent: { surface: "panel" },
+          slots: {
+            header: componentSlot("CarbonSectionHeader", { title: "Task detail" }),
+            body: fragmentSlot(
+              [
+                componentSlot("CarbonStatusDot", { status: "in-progress", label: "15d left" }),
+                componentSlot("CarbonBadge", { severity: "info", children: "Medium priority" }),
+                componentSlot("CarbonTextInput", { labelText: "Owner", defaultValue: "Alex Rivera" }),
+                componentSlot("CarbonTextarea", { labelText: "Notes", rows: 5, defaultValue: "" }),
+                componentSlot("CarbonButton", { label: "Mark complete", intent: "primary" }),
+              ],
+              { op: "stack", direction: "vertical", slots: [] },
+            ),
+          },
+        }),
+      ),
+    },
+  }),
+};

package/src/templates/glass-flowchart.ts

@@ -0,0 +1,84 @@
+import { layout, componentSlot, layoutSlot, fragmentSlot } from "@echothink-ui/layout";
+import type { TemplateDefinition } from "../types.js";
+
+/**
+ * Liquid-glass flowchart studio — a `CanvasInspector`: a full-bleed visualization
+ * canvas with a floating toolbar and a node-config inspector. Replaces the former
+ * `LiquidGlassFlowchartTemplate`.
+ */
+const throughput = [
+  { label: "00:00", value: 120 },
+  { label: "04:00", value: 98 },
+  { label: "08:00", value: 187 },
+  { label: "12:00", value: 240 },
+  { label: "16:00", value: 210 },
+  { label: "20:00", value: 168 },
+];
+
+export const glassFlowchartTemplate: TemplateDefinition = {
+  id: "glass-flowchart",
+  name: "Liquid glass flowchart",
+  description: "Visualization canvas with KPI overlays and a node-config inspector.",
+  stylePreset: "glass",
+  tags: ["canvas", "flow", "analytics", "glass"],
+  layout: layout({
+    id: "glass-flowchart",
+    type: "PageLayout.CanvasInspector",
+    styleIntent: { preset: "glass", taskMode: "authoring", visualEmphasis: "immersive" },
+    slots: {
+      toolbar: fragmentSlot(
+        [
+          componentSlot("CarbonSectionHeader", { title: "Flow studio" }),
+          componentSlot("CarbonButton", { label: "Run", intent: "primary" }),
+          componentSlot("CarbonButton", { label: "Snapshot", intent: "tertiary" }),
+        ],
+        { op: "stack", direction: "horizontal", slots: [] },
+      ),
+      canvas: fragmentSlot(
+        [
+          fragmentSlot(
+            [
+              componentSlot("CarbonKPIBlock", { title: "Throughput", value: "240/min", description: "peak 12:00" }),
+              componentSlot("CarbonKPIBlock", { title: "Errors", value: "0.4%", description: "-0.1% today" }),
+              componentSlot("CarbonKPIBlock", { title: "Latency p95", value: "182ms", description: "stable" }),
+            ],
+            { op: "stack", direction: "horizontal", slots: [] },
+          ),
+          componentSlot("CarbonAreaChart", {
+            title: "Pipeline throughput",
+            data: throughput,
+            valueKey: "value",
+          }),
+        ],
+        { op: "stack", direction: "vertical", slots: [] },
+      ),
+      inspector: layoutSlot(
+        layout({
+          id: "node-config",
+          type: "Primitive.Panel",
+          styleIntent: { surface: "panel" },
+          slots: {
+            header: componentSlot("CarbonSectionHeader", { title: "Node config" }),
+            body: fragmentSlot(
+              [
+                componentSlot("CarbonTextInput", { labelText: "Node name", defaultValue: "Transform" }),
+                componentSlot("CarbonSelect", {
+                  labelText: "Kind",
+                  defaultValue: "map",
+                  options: [
+                    { value: "map", label: "Map" },
+                    { value: "filter", label: "Filter" },
+                    { value: "aggregate", label: "Aggregate" },
+                  ],
+                }),
+                componentSlot("CarbonToggle", { labelText: "Enabled", defaultToggled: true }),
+                componentSlot("CarbonTextarea", { labelText: "Expression", rows: 4, defaultValue: "" }),
+              ],
+              { op: "stack", direction: "vertical", slots: [] },
+            ),
+          },
+        }),
+      ),
+    },
+  }),
+};

package/src/templates/soft-card-campaign.ts

@@ -0,0 +1,135 @@
+import { layout, componentSlot, layoutSlot, fragmentSlot } from "@echothink-ui/layout";
+import type { TemplateDefinition } from "../types.js";
+
+/**
+ * Soft-card campaign workspace — an `AdminShell` whose content is a master/detail
+ * split: a campaign dashboard (KPIs + chart + table) beside a campaign-info form
+ * panel. Replaces the former hard-coded `SoftCardCampaignTemplate`.
+ */
+const campaignColumns = [
+  { key: "name", header: "Campaign" },
+  { key: "channel", header: "Channel" },
+  { key: "statusLabel", header: "Status" },
+  { key: "audience", header: "Audience", align: "end" },
+  { key: "updated", header: "Updated" },
+];
+
+const campaignRows = [
+  { id: "c1", name: "Taste the Future", channel: "Instagram + Ads", statusLabel: "Running", audience: "10,000", updated: "24 Sep" },
+  { id: "c2", name: "Cybersecurity Week", channel: "Facebook", statusLabel: "In Progress", audience: "6,420", updated: "22 Sep" },
+  { id: "c3", name: "E-learning Essentials", channel: "Email", statusLabel: "Approval", audience: "3,890", updated: "21 Sep" },
+];
+
+const channelChart = [
+  { label: "Mon", sent: 32, opened: 19 },
+  { label: "Tue", sent: 46, opened: 22 },
+  { label: "Wed", sent: 38, opened: 27 },
+  { label: "Thu", sent: 54, opened: 31 },
+  { label: "Fri", sent: 49, opened: 36 },
+];
+
+export const softCardCampaignTemplate: TemplateDefinition = {
+  id: "soft-card-campaign",
+  name: "Soft card campaign",
+  description: "Campaign dashboard with a master/detail configuration panel.",
+  stylePreset: "soft-card",
+  tags: ["dashboard", "marketing", "crud", "soft-card"],
+  layout: layout({
+    id: "soft-card-campaign",
+    type: "PageLayout.AdminShell",
+    styleIntent: { preset: "soft-card", taskMode: "crud" },
+    slots: {
+      topbar: fragmentSlot(
+        [
+          componentSlot("CarbonSectionHeader", { title: "Metricmap" }),
+          componentSlot("CarbonSearchInput", { placeholder: "Search campaigns" }),
+          componentSlot("CarbonButton", { label: "New campaign", intent: "primary" }),
+        ],
+        { op: "stack", direction: "horizontal", slots: [] },
+      ),
+      navigation: componentSlot("CarbonSideNav", {
+        items: [
+          { label: "Summary of Key Metrics", href: "#summary" },
+          { label: "Recent Campaigns", href: "#recent", current: true },
+          { label: "Performance Snapshot", href: "#performance" },
+          { label: "Integrations", href: "#integrations" },
+          { label: "Social Media Metrics", href: "#social" },
+        ],
+      }),
+      content: layoutSlot(
+        layout({
+          id: "campaign-split",
+          type: "Primitive.SplitPane",
+          variant: "horizontal",
+          composition: {
+            op: "parallel",
+            axis: "x",
+            slots: ["primary", "secondary"],
+            sizing: { primary: { basis: "1.7fr" }, secondary: { basis: "1fr" } },
+          },
+          slots: {
+            primary: fragmentSlot(
+              [
+                componentSlot("CarbonPageHeader", {
+                  title: "Recent Campaign",
+                  description: "Campaign configuration, audience rules, and channel performance in one workspace.",
+                }),
+                fragmentSlot(
+                  [
+                    componentSlot("CarbonKPIBlock", { title: "Sent", value: "203 Mail", description: "+6% from last week" }),
+                    componentSlot("CarbonKPIBlock", { title: "Opened", value: "18%", description: "+3% from last week" }),
+                    componentSlot("CarbonKPIBlock", { title: "Conversions", value: "42", description: "12 awaiting review" }),
+                  ],
+                  { op: "stack", direction: "horizontal", slots: [] },
+                ),
+                componentSlot("CarbonChartBlock", {
+                  title: "Channel performance",
+                  subtitle: "Chosen period versus last period",
+                  chartType: "bar",
+                  data: channelChart,
+                  series: [
+                    { key: "sent", label: "Chosen period" },
+                    { key: "opened", label: "Last period" },
+                  ],
+                }),
+                componentSlot("CarbonDataTable", { rows: campaignRows, columns: campaignColumns, rowKey: "id" }),
+              ],
+              { op: "stack", direction: "vertical", slots: [] },
+            ),
+            secondary: layoutSlot(
+              layout({
+                id: "campaign-form",
+                type: "Primitive.Panel",
+                styleIntent: { surface: "card" },
+                slots: {
+                  header: componentSlot("CarbonSectionHeader", { title: "Campaign Info" }),
+                  body: fragmentSlot(
+                    [
+                      componentSlot("CarbonTextInput", { labelText: "Campaign name", defaultValue: "Taste the Future" }),
+                      componentSlot("CarbonTextInput", { labelText: "Brand", defaultValue: "Damory Food Indonesia" }),
+                      componentSlot("CarbonSelect", {
+                        labelText: "Channel",
+                        defaultValue: "instagram",
+                        options: [
+                          { value: "instagram", label: "Instagram + Google Ads" },
+                          { value: "email", label: "Email only" },
+                          { value: "social", label: "Social media" },
+                        ],
+                      }),
+                      componentSlot("CarbonTextarea", {
+                        labelText: "Description",
+                        rows: 4,
+                        defaultValue: "A social media and Google Ads campaign showcasing convenience and taste.",
+                      }),
+                    ],
+                    { op: "stack", direction: "vertical", slots: [] },
+                  ),
+                },
+              }),
+            ),
+          },
+        }),
+      ),
+    },
+  }),
+};

package/src/templates/studio-dark-check-box.ts

@@ -0,0 +1,68 @@
+import { layout, componentSlot, fragmentSlot } from "@echothink-ui/layout";
+import type { TemplateDefinition } from "../types.js";
+
+/**
+ * Studio-dark monitoring board — a `MonitoringOps` layout: toolbar + metric strip
+ * + primary table + console activity feed. Replaces the former
+ * `StudioDarkCheckBoxTemplate`.
+ */
+const monitorColumns = [
+  { key: "check", header: "Check" },
+  { key: "statusLabel", header: "Status" },
+  { key: "latency", header: "Latency", align: "end" },
+  { key: "updated", header: "Updated" },
+];
+
+const monitorRows = [
+  { id: "m1", check: "Gateway /execute", statusLabel: "Healthy", latency: "42ms", updated: "now" },
+  { id: "m2", check: "Worker queue lease", statusLabel: "Healthy", latency: "11ms", updated: "now" },
+  { id: "m3", check: "Outcome committer", statusLabel: "Degraded", latency: "318ms", updated: "1m" },
+  { id: "m4", check: "Artifact store", statusLabel: "Healthy", latency: "73ms", updated: "now" },
+];
+
+const trend = [
+  { label: "T-5", value: 99.9 },
+  { label: "T-4", value: 99.8 },
+  { label: "T-3", value: 99.95 },
+  { label: "T-2", value: 99.7 },
+  { label: "T-1", value: 99.85 },
+];
+
+export const studioDarkCheckBoxTemplate: TemplateDefinition = {
+  id: "studio-dark-check-box",
+  name: "Studio dark monitoring",
+  description: "Realtime ops board with metric strip, health table, and activity console.",
+  stylePreset: "studio-dark",
+  tags: ["monitoring", "ops", "realtime", "studio-dark"],
+  layout: layout({
+    id: "studio-dark-check-box",
+    type: "PageLayout.MonitoringOps",
+    styleIntent: { preset: "studio-dark", taskMode: "monitoring", dataIntensity: "realtime" },
+    slots: {
+      toolbar: fragmentSlot(
+        [
+          componentSlot("CarbonSectionHeader", { title: "Runtime health" }),
+          componentSlot("CarbonButton", { label: "Acknowledge", intent: "tertiary" }),
+          componentSlot("CarbonButton", { label: "Snapshot", intent: "primary" }),
+        ],
+        { op: "stack", direction: "horizontal", slots: [] },
+      ),
+      metrics: fragmentSlot(
+        [
+          componentSlot("CarbonMetricTrend", { title: "Uptime", value: "99.85%", data: trend, valueKey: "value" }),
+          componentSlot("CarbonKPIBlock", { title: "Active jobs", value: "37", description: "4 retrying" }),
+          componentSlot("CarbonKPIBlock", { title: "Error rate", value: "0.6%", description: "+0.2%" }),
+        ],
+        { op: "stack", direction: "horizontal", slots: [] },
+      ),
+      primary: componentSlot("CarbonDataTable", { rows: monitorRows, columns: monitorColumns, rowKey: "id" }),
+      console: componentSlot("CarbonActivityList", {
+        items: [
+          { id: "a1", title: "Outcome committer latency spike", time: "1m ago", severity: "warning" },
+          { id: "a2", title: "Worker pool scaled to 8", time: "3m ago", severity: "info" },
+          { id: "a3", title: "Snapshot snap-29 committed", time: "5m ago", severity: "success" },
+        ],
+      }),
+    },
+  }),
+};

package/src/types.ts

@@ -0,0 +1,84 @@
+/**
+ * `@echothink-ui/templates` — template contract.
+ *
+ * A template is now a GENUINE template: a declarative `LayoutNode` AST built from
+ * `@echothink-ui/layout` page-layouts and populated with `@echothink-ui`
+ * components (referenced by name). It is rendered through the layout engine
+ * (`LayoutRoot`) and can be flattened into Puck data for editing in the builder.
+ */
+import type { EthStylePreset } from "@echothink-ui/style";
+import type { LayoutNode, SlotContent } from "@echothink-ui/layout";
+
+export interface TemplateDefinition {
+  /** Stable id. */
+  id: string;
+  /** Human label. */
+  name: string;
+  /** One-line description. */
+  description: string;
+  /** Preset this template was designed around (the engine still infers per-slot). */
+  stylePreset: EthStylePreset;
+  /** Discovery tags. */
+  tags: string[];
+  /** The root layout AST. */
+  layout: LayoutNode;
+}
+
+/** Walk a layout AST and collect every referenced component name (deduped). */
+export function collectComponentNames(node: LayoutNode): string[] {
+  const names = new Set<string>();
+  const visitContent = (content: SlotContent): void => {
+    switch (content.kind) {
+      case "component":
+        names.add(content.component);
+        break;
+      case "layout":
+        visitNode(content.layout);
+        break;
+      case "fragment":
+        content.items.forEach(visitContent);
+        break;
+      default:
+        break;
+    }
+  };
+  const visitNode = (n: LayoutNode): void => {
+    for (const content of Object.values(n.slots)) visitContent(content);
+    const comp = n.composition;
+    if (comp?.op === "switch") comp.items.forEach((i) => visitContent(i.content));
+    if (comp?.op === "stepper") comp.steps.forEach((s) => visitContent(s.content));
+  };
+  visitNode(node);
+  return [...names].sort();
+}
+
+/** A tiny registry over template definitions. */
+export class TemplateRegistry {
+  private readonly items = new Map<string, TemplateDefinition>();
+
+  register(def: TemplateDefinition): this {
+    this.items.set(def.id, def);
+    return this;
+  }
+
+  registerAll(defs: readonly TemplateDefinition[]): this {
+    for (const def of defs) this.register(def);
+    return this;
+  }
+
+  get(id: string): TemplateDefinition | undefined {
+    return this.items.get(id);
+  }
+
+  has(id: string): boolean {
+    return this.items.has(id);
+  }
+
+  list(): TemplateDefinition[] {
+    return [...this.items.values()];
+  }
+
+  byPreset(preset: EthStylePreset): TemplateDefinition[] {
+    return this.list().filter((t) => t.stylePreset === preset);
+  }
+}