@echothink-ui/layout 0.2.0

package/src/layout-system/inference/style.ts

@@ -0,0 +1,128 @@
+/**
+ * Component style inference (`layout-spec.md` §7).
+ *
+ * Components do NOT pick their own preset/density/typeScale. The engine infers
+ * `ComponentStyleParams` from the layout runtime context using a scoring
+ * resolver for `preset` plus rule tables for `density` and `typeScale`.
+ */
+import type {
+  ComponentDensity,
+  ComponentStyleParams,
+  ComponentStylePreset,
+  ComponentTypeScale,
+  StyleInferenceInput,
+} from "../schema/types.js";
+
+export const defaultComponentStyle: ComponentStyleParams = {
+  preset: "carbon-like",
+  palette: "default",
+  density: "standard",
+  typeScale: "standard",
+};
+
+function matches(value: string | undefined, candidates: string[]): boolean {
+  if (!value) return false;
+  return candidates.some((c) => value === c || value.endsWith(`.${c}`) || value.includes(c));
+}
+
+function chooseHighestScore(
+  scores: Record<ComponentStylePreset, number>,
+  fallback: ComponentStylePreset,
+): ComponentStylePreset {
+  let best: ComponentStylePreset = fallback;
+  let bestScore = -Infinity;
+  // Deterministic: iterate in a fixed key order.
+  const order: ComponentStylePreset[] = [
+    "carbon-like",
+    "soft-card",
+    "glass",
+    "bright",
+    "studio-dark",
+  ];
+  for (const key of order) {
+    if (scores[key] > bestScore) {
+      bestScore = scores[key];
+      best = key;
+    }
+  }
+  return bestScore <= 0 ? fallback : best;
+}
+
+/** §7.4 density rules. */
+export function inferDensity(input: StyleInferenceInput): ComponentDensity {
+  if (input.explicit?.density) return input.explicit.density;
+  const role = input.slotRole;
+  if (input.dataIntensity === "high" || input.dataIntensity === "realtime") return "compact";
+  if (
+    matches(role, ["console", "timeline", "filter", "toolbar", "navigation"]) ||
+    matches(input.layoutType, ["DataGridInspector", "MonitoringOps"])
+  ) {
+    return "compact";
+  }
+  if (input.visualEmphasis === "expressive" || input.visualEmphasis === "immersive") {
+    return "comfortable";
+  }
+  if (matches(role, ["form", "inspector", "summary", "content", "preview"])) return "standard";
+  if (input.taskMode === "wizard" || input.taskMode === "copilot") return "comfortable";
+  if (input.breakpoint === "mobile" && input.parent?.density === "compact") return "standard";
+  return input.parent?.density ?? "standard";
+}
+
+/** §7.5 typeScale rules. */
+export function inferTypeScale(input: StyleInferenceInput): ComponentTypeScale {
+  if (input.explicit?.typeScale) return input.explicit.typeScale;
+  const role = input.slotRole;
+  if (typeof input.containerWidth === "number" && input.containerWidth < 360) return "compact";
+  if (matches(role, ["toolbar", "navigation", "console", "timeline"])) return "compact";
+  if (matches(input.layoutType, ["DataGridInspector", "MonitoringOps"])) return "compact";
+  if (input.taskMode === "wizard" || matches(role, ["summary", "emptyState"])) return "large";
+  if (input.breakpoint === "mobile") return "standard";
+  if (matches(role, ["form", "inspector", "content", "preview"])) return "standard";
+  return input.parent?.typeScale ?? "standard";
+}
+
+/** §7.6 scoring preset resolver. */
+export function inferComponentStyle(input: StyleInferenceInput): ComponentStyleParams {
+  const presetScores: Record<ComponentStylePreset, number> = {
+    "carbon-like": 0,
+    "soft-card": 0,
+    glass: 0,
+    bright: 0,
+    "studio-dark": 0,
+  };
+
+  if (matches(input.layoutType, ["AdminShell", "DataGridInspector", "SettingsConsole"])) {
+    presetScores["carbon-like"] += 4;
+  }
+  if (matches(input.layoutType, ["DashboardBento", "SearchCatalog"])) {
+    presetScores["soft-card"] += 4;
+  }
+  if (matches(input.layoutType, ["SpatialHud"]) || input.surface === "floating") {
+    presetScores.glass += 4;
+  }
+  if (matches(input.layoutType, ["WizardComposer"]) || input.taskMode === "wizard") {
+    presetScores.bright += 4;
+  }
+  if (
+    matches(input.layoutType, ["Workbench", "CanvasInspector", "MonitoringOps", "Playground"]) ||
+    matches(input.slotRole, ["console", "canvas", "timeline"])
+  ) {
+    presetScores["studio-dark"] += 4;
+  }
+
+  // Deep nested form/filter/inspector → bias toward stable carbon.
+  if (input.depth >= 2 && matches(input.slotRole, ["form", "filter", "inspector"])) {
+    presetScores["carbon-like"] += 2;
+  }
+
+  const preset =
+    input.explicit?.preset ??
+    chooseHighestScore(presetScores, input.parent?.preset ?? defaultComponentStyle.preset);
+
+  return {
+    preset,
+    palette: input.explicit?.palette ?? input.parent?.palette ?? "default",
+    density: inferDensity(input),
+    typeScale: inferTypeScale(input),
+  };
+}

package/src/layout-system/page-layouts/index.tsx

@@ -0,0 +1,405 @@
+/**
+ * Page layouts (`layout-spec.md` §14, §19): AdminShell, DataGridInspector,
+ * Workbench, WizardComposer, MonitoringOps, CanvasInspector.
+ *
+ * Each renderer consumes the resolved `plan` so the same AST yields different
+ * desktop/tablet/mobile arrangements (collapsed/hidden supporting panes).
+ */
+import * as React from "react";
+import type { LayoutRegistryItem, LayoutRendererProps } from "../schema/types.js";
+import { isVisible, isCollapsed } from "../renderer/region.js";
+
+function frameStyle(context: LayoutRendererProps["context"]): React.CSSProperties {
+  return {
+    display: "grid",
+    height: "100%",
+    minHeight: 0,
+    background: context.tokens.surfaceMuted,
+    color: context.tokens.text,
+  };
+}
+
+/* --------------------------- AdminShell -------------------------- */
+
+function AdminShellRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const navVisible = slots.navigation && isVisible(plan, "navigation");
+  const navCollapsed = isCollapsed(plan, "navigation");
+  return (
+    <div
+      className="eth-ls-admin-shell"
+      style={{
+        ...frameStyle(context),
+        gridTemplateRows: "auto 1fr auto",
+        gridTemplateColumns: navVisible ? `${navCollapsed ? "3.5rem" : "16rem"} 1fr` : "1fr",
+        gridTemplateAreas: navVisible
+          ? `"topbar topbar" "nav content" "footer footer"`
+          : `"topbar" "content" "footer"`,
+      }}
+    >
+      {slots.topbar ? (
+        <header className="eth-ls-admin-shell__topbar" style={{ gridArea: "topbar" }}>
+          {slots.topbar}
+        </header>
+      ) : null}
+      {navVisible ? (
+        <nav className="eth-ls-admin-shell__nav" style={{ gridArea: "nav", overflow: "auto", borderInlineEnd: `1px solid ${context.tokens.border}` }}>
+          {slots.navigation}
+        </nav>
+      ) : null}
+      <main className="eth-ls-admin-shell__content" style={{ gridArea: "content", overflow: "auto", minWidth: 0 }}>
+        {slots.content}
+      </main>
+      {slots.footer ? (
+        <footer className="eth-ls-admin-shell__footer" style={{ gridArea: "footer", borderBlockStart: `1px solid ${context.tokens.border}` }}>
+          {slots.footer}
+        </footer>
+      ) : null}
+    </div>
+  );
+}
+
+export const AdminShellLayout: LayoutRegistryItem = {
+  type: "PageLayout.AdminShell",
+  displayName: "Admin Shell",
+  tier: "page",
+  category: "app-shell",
+  description: "Enterprise CRUD shell: topbar, navigation rail, content, footer.",
+  slots: [
+    { name: "topbar", role: "toolbar", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "navigation",
+      role: "navigation",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 40, behaviorOnNarrow: "move-to-drawer" },
+      responsive: { collapseBelow: "laptop" },
+    },
+    {
+      name: "content",
+      role: "content",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "template" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    { name: "footer", role: "footer", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+  ],
+  defaultStyleIntent: { surface: "app", taskMode: "crud" },
+  renderer: AdminShellRenderer,
+};
+
+/* ----------------------- DataGridInspector ----------------------- */
+
+function DataGridInspectorRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const inspectorVisible = slots.inspector && isVisible(plan, "inspector");
+  return (
+    <div
+      className="eth-ls-datagrid"
+      style={{
+        ...frameStyle(context),
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: inspectorVisible ? "1fr minmax(18rem, 24rem)" : "1fr",
+        gridTemplateAreas: inspectorVisible ? `"toolbar toolbar" "grid inspector"` : `"toolbar" "grid"`,
+      }}
+    >
+      {slots.toolbar ? (
+        <div className="eth-ls-datagrid__toolbar" style={{ gridArea: "toolbar" }}>{slots.toolbar}</div>
+      ) : null}
+      <div className="eth-ls-datagrid__grid" style={{ gridArea: "grid", overflow: "auto", minWidth: 0 }}>
+        {slots.grid}
+      </div>
+      {inspectorVisible ? (
+        <div className="eth-ls-datagrid__inspector" style={{ gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }}>
+          {slots.inspector}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export const DataGridInspectorLayout: LayoutRegistryItem = {
+  type: "PageLayout.DataGridInspector",
+  displayName: "Data Grid + Inspector",
+  tier: "page",
+  category: "page",
+  description: "High-density grid with a toolbar and an inline-end inspector.",
+  slots: [
+    { name: "toolbar", role: "toolbar", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "grid",
+      role: "content",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    {
+      name: "inspector",
+      role: "inspector",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 50, behaviorOnNarrow: "move-to-drawer" },
+    },
+  ],
+  defaultStyleIntent: { surface: "page", taskMode: "crud", dataIntensity: "high" },
+  renderer: DataGridInspectorRenderer,
+};
+
+/* ---------------------------- Workbench -------------------------- */
+
+function WorkbenchRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const explorerVisible = slots.explorer && isVisible(plan, "explorer");
+  const inspectorVisible = slots.inspector && isVisible(plan, "inspector");
+  const consoleVisible = slots.console && isVisible(plan, "console");
+  const cols = [explorerVisible ? "16rem" : null, "1fr", inspectorVisible ? "minmax(18rem, 22rem)" : null]
+    .filter(Boolean)
+    .join(" ");
+  const areaMid = [explorerVisible ? "explorer" : null, "primary", inspectorVisible ? "inspector" : null]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      className="eth-ls-workbench"
+      style={{
+        ...frameStyle(context),
+        gridTemplateColumns: cols,
+        gridTemplateRows: `auto 1fr ${consoleVisible ? "minmax(8rem, 16rem)" : "0"}`,
+        gridTemplateAreas: `"${new Array(cols.split(" ").length).fill("toolbar").join(" ")}" "${areaMid}" "${new Array(cols.split(" ").length).fill("console").join(" ")}"`,
+      }}
+    >
+      {slots.toolbar ? <div className="eth-ls-workbench__toolbar" style={{ gridArea: "toolbar" }}>{slots.toolbar}</div> : null}
+      {explorerVisible ? (
+        <nav className="eth-ls-workbench__explorer" style={{ gridArea: "explorer", overflow: "auto", borderInlineEnd: `1px solid ${context.tokens.border}` }}>
+          {slots.explorer}
+        </nav>
+      ) : null}
+      <main className="eth-ls-workbench__primary" style={{ gridArea: "primary", overflow: "auto", minWidth: 0, minHeight: 0 }}>
+        {slots.primary}
+      </main>
+      {inspectorVisible ? (
+        <div className="eth-ls-workbench__inspector" style={{ gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }}>
+          {slots.inspector}
+        </div>
+      ) : null}
+      {consoleVisible ? (
+        <div className="eth-ls-workbench__console" style={{ gridArea: "console", overflow: "auto", borderBlockStart: `1px solid ${context.tokens.border}` }}>
+          {slots.console}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export const WorkbenchLayout: LayoutRegistryItem = {
+  type: "PageLayout.Workbench",
+  displayName: "Workbench",
+  tier: "page",
+  category: "page",
+  description: "Authoring workbench: toolbar, explorer, primary canvas, inspector, console.",
+  variants: [{ id: "canvas-primary" }, { id: "split-primary" }],
+  slots: [
+    { name: "toolbar", role: "toolbar", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "explorer",
+      role: "navigation",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 40, behaviorOnNarrow: "move-to-drawer" },
+      responsive: { collapseBelow: "laptop" },
+    },
+    {
+      name: "primary",
+      role: "primary",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "template" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    {
+      name: "inspector",
+      role: "inspector",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 50, behaviorOnNarrow: "move-to-drawer" },
+    },
+    {
+      name: "console",
+      role: "console",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 30, behaviorOnNarrow: "move-to-bottom-sheet" },
+    },
+  ],
+  defaultStyleIntent: { surface: "workspace", taskMode: "authoring", visualEmphasis: "immersive" },
+  renderer: WorkbenchRenderer,
+};
+
+/* ------------------------- WizardComposer ------------------------ */
+
+function WizardComposerRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const previewVisible = slots.preview && isVisible(plan, "preview");
+  return (
+    <div
+      className="eth-ls-wizard"
+      style={{
+        ...frameStyle(context),
+        gridTemplateColumns: previewVisible ? "1fr minmax(20rem, 28rem)" : "1fr",
+        gridTemplateRows: "auto 1fr auto",
+        gridTemplateAreas: previewVisible
+          ? `"stepper stepper" "content preview" "footer footer"`
+          : `"stepper" "content" "footer"`,
+        background: context.tokens.surface,
+      }}
+    >
+      {slots.stepper ? <div className="eth-ls-wizard__stepper" style={{ gridArea: "stepper" }}>{slots.stepper}</div> : null}
+      <main className="eth-ls-wizard__content" style={{ gridArea: "content", overflow: "auto", minWidth: 0 }}>
+        {slots.content}
+      </main>
+      {previewVisible ? (
+        <div className="eth-ls-wizard__preview" style={{ gridArea: "preview", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }}>
+          {slots.preview}
+        </div>
+      ) : null}
+      {slots.footerActions ? (
+        <footer className="eth-ls-wizard__footer" style={{ gridArea: "footer", borderBlockStart: `1px solid ${context.tokens.border}` }}>
+          {slots.footerActions}
+        </footer>
+      ) : null}
+    </div>
+  );
+}
+
+export const WizardComposerLayout: LayoutRegistryItem = {
+  type: "PageLayout.WizardComposer",
+  displayName: "Wizard Composer",
+  tier: "page",
+  category: "page",
+  description: "Guided multi-step creation flow with optional live preview.",
+  slots: [
+    { name: "stepper", role: "stepper", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "content",
+      role: "form",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "template" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    {
+      name: "preview",
+      role: "preview",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 40, behaviorOnNarrow: "hide" },
+    },
+    { name: "footerActions", role: "footer", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+  ],
+  defaultStyleIntent: { surface: "page", taskMode: "wizard", visualEmphasis: "balanced" },
+  renderer: WizardComposerRenderer,
+};
+
+/* ------------------------- MonitoringOps ------------------------- */
+
+function MonitoringOpsRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const consoleVisible = slots.console && isVisible(plan, "console");
+  return (
+    <div
+      className="eth-ls-monitoring"
+      style={{
+        ...frameStyle(context),
+        gridTemplateRows: `auto auto 1fr ${consoleVisible ? "minmax(8rem, 14rem)" : "0"}`,
+        gridTemplateAreas: `"toolbar" "metrics" "primary" "console"`,
+      }}
+    >
+      {slots.toolbar ? <div className="eth-ls-monitoring__toolbar" style={{ gridArea: "toolbar" }}>{slots.toolbar}</div> : null}
+      {slots.metrics ? <div className="eth-ls-monitoring__metrics" style={{ gridArea: "metrics" }}>{slots.metrics}</div> : null}
+      <main className="eth-ls-monitoring__primary" style={{ gridArea: "primary", overflow: "auto", minHeight: 0 }}>
+        {slots.primary}
+      </main>
+      {consoleVisible ? (
+        <div className="eth-ls-monitoring__console" style={{ gridArea: "console", overflow: "auto", borderBlockStart: `1px solid ${context.tokens.border}` }}>
+          {slots.console}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export const MonitoringOpsLayout: LayoutRegistryItem = {
+  type: "PageLayout.MonitoringOps",
+  displayName: "Monitoring Ops",
+  tier: "page",
+  category: "page",
+  description: "Realtime ops dashboard: toolbar, metric strip, primary view, console.",
+  slots: [
+    { name: "toolbar", role: "toolbar", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    { name: "metrics", role: "summary", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "primary",
+      role: "content",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    {
+      name: "console",
+      role: "console",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 30, behaviorOnNarrow: "move-to-bottom-sheet" },
+    },
+  ],
+  defaultStyleIntent: { surface: "page", taskMode: "monitoring", dataIntensity: "realtime" },
+  renderer: MonitoringOpsRenderer,
+};
+
+/* ------------------------ CanvasInspector ------------------------ */
+
+function CanvasInspectorRenderer({ slots, context, plan }: LayoutRendererProps) {
+  const inspectorVisible = slots.inspector && isVisible(plan, "inspector");
+  return (
+    <div
+      className="eth-ls-canvas"
+      style={{
+        ...frameStyle(context),
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: inspectorVisible ? "1fr minmax(18rem, 24rem)" : "1fr",
+        gridTemplateAreas: inspectorVisible ? `"toolbar toolbar" "canvas inspector"` : `"toolbar" "canvas"`,
+      }}
+    >
+      {slots.toolbar ? <div className="eth-ls-canvas__toolbar" style={{ gridArea: "toolbar" }}>{slots.toolbar}</div> : null}
+      <div className="eth-ls-canvas__stage" style={{ gridArea: "canvas", overflow: "hidden", minWidth: 0, minHeight: 0 }}>
+        {slots.canvas}
+      </div>
+      {inspectorVisible ? (
+        <div className="eth-ls-canvas__inspector" style={{ gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }}>
+          {slots.inspector}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export const CanvasInspectorLayout: LayoutRegistryItem = {
+  type: "PageLayout.CanvasInspector",
+  displayName: "Canvas + Inspector",
+  tier: "page",
+  category: "page",
+  description: "Full-bleed canvas with a toolbar and inline-end inspector.",
+  slots: [
+    { name: "toolbar", role: "toolbar", accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }] },
+    {
+      name: "canvas",
+      role: "canvas",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 100, behaviorOnNarrow: "keep" },
+    },
+    {
+      name: "inspector",
+      role: "inspector",
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }],
+      priority: { value: 50, behaviorOnNarrow: "move-to-drawer" },
+    },
+  ],
+  defaultStyleIntent: { surface: "canvas", taskMode: "authoring", visualEmphasis: "immersive" },
+  renderer: CanvasInspectorRenderer,
+};
+
+export const pageLayouts: LayoutRegistryItem[] = [
+  AdminShellLayout,
+  DataGridInspectorLayout,
+  WorkbenchLayout,
+  WizardComposerLayout,
+  MonitoringOpsLayout,
+  CanvasInspectorLayout,
+];