@echothink-ui/layout 0.2.0

package/dist/index.js

@@ -0,0 +1,1546 @@
+// src/index.tsx
+import {
+  StyleScope as StyleScope2,
+  defaultStylePreset,
+  ethDensityModes,
+  ethStylePresetDescriptions,
+  ethStylePresetLabels,
+  ethStylePresets,
+  ethTypeScales
+} from "@echothink-ui/style";
+
+// src/layout-system/schema/validate.ts
+var DEFAULT_MAX_DEPTH = 8;
+function acceptsContent(accepts, content) {
+  return accepts.some((spec) => {
+    switch (content.kind) {
+      case "component":
+        return spec.kind === "component" && (!spec.componentTypes || spec.componentTypes.includes(content.component));
+      case "layout":
+        return spec.kind === "layout" && (!spec.layoutTypes || spec.layoutTypes.includes(content.layout.type));
+      case "template":
+        return spec.kind === "template" && (!spec.templateTypes || spec.templateTypes.includes(content.template));
+      case "fragment":
+        return spec.kind === "fragment";
+      case "empty":
+        return spec.kind === "empty";
+      default:
+        return false;
+    }
+  });
+}
+function* childLayouts(content) {
+  if (content.kind === "layout") {
+    yield content.layout;
+  } else if (content.kind === "fragment") {
+    for (const item of content.items) yield* childLayouts(item);
+  }
+}
+function validateLayout(root, registry, opts = {}) {
+  const diagnostics = [];
+  const maxDepth = opts.maxDepth ?? DEFAULT_MAX_DEPTH;
+  const visiting = /* @__PURE__ */ new Set();
+  function walk(node, path, depth) {
+    const nodePath = [...path, node.id];
+    if (depth > maxDepth) {
+      diagnostics.push({
+        level: "error",
+        code: "MAX_DEPTH_EXCEEDED",
+        path: nodePath,
+        message: `Layout nesting exceeds maxDepth=${maxDepth}.`
+      });
+      return;
+    }
+    if (visiting.has(node.id)) {
+      diagnostics.push({
+        level: "error",
+        code: "CYCLE_DETECTED",
+        path: nodePath,
+        message: `Cycle detected at node "${node.id}".`
+      });
+      return;
+    }
+    visiting.add(node.id);
+    const item = registry.get(node.type);
+    if (!item) {
+      diagnostics.push({
+        level: "error",
+        code: "UNKNOWN_LAYOUT_TYPE",
+        path: nodePath,
+        message: `Unknown layout type "${node.type}".`,
+        suggestion: `Register "${node.type}" or use one of: ${registry.types().slice(0, 8).join(", ")}\u2026`
+      });
+      visiting.delete(node.id);
+      return;
+    }
+    const slotByName = new Map(
+      item.slots.map((s) => [s.name, s])
+    );
+    for (const slotName of Object.keys(node.slots)) {
+      if (!slotByName.has(slotName)) {
+        diagnostics.push({
+          level: "warning",
+          code: "UNKNOWN_SLOT",
+          path: [...nodePath, slotName],
+          message: `Slot "${slotName}" is not declared by "${node.type}".`
+        });
+      }
+    }
+    for (const slot of item.slots) {
+      const content = node.slots[slot.name];
+      if (content === void 0) {
+        if (slot.required && !slot.fallback?.empty) {
+          diagnostics.push({
+            level: "error",
+            code: "SLOT_REQUIRED",
+            path: [...nodePath, slot.name],
+            message: `Required slot "${slot.name}" of "${node.type}" has no content or fallback.`
+          });
+        }
+        continue;
+      }
+      if (!acceptsContent(slot.accepts, content)) {
+        diagnostics.push({
+          level: "error",
+          code: "SLOT_ACCEPTS_VIOLATION",
+          path: [...nodePath, slot.name],
+          message: `Slot "${slot.name}" of "${node.type}" does not accept ${content.kind} content.`
+        });
+      }
+      if (content.kind === "fragment" && slot.cardinality?.max && slot.cardinality.max !== "unbounded") {
+        if (content.items.length > slot.cardinality.max) {
+          diagnostics.push({
+            level: "error",
+            code: "SLOT_CARDINALITY_VIOLATION",
+            path: [...nodePath, slot.name],
+            message: `Slot "${slot.name}" allows at most ${slot.cardinality.max} items.`
+          });
+        }
+      }
+      for (const child of childLayouts(content)) {
+        walk(child, [...nodePath, slot.name], depth + 1);
+      }
+    }
+    visiting.delete(node.id);
+  }
+  walk(root, [], 0);
+  return diagnostics;
+}
+function hasErrors(diagnostics) {
+  return diagnostics.some((d) => d.level === "error");
+}
+
+// src/layout-system/tokens/preset-tokens.ts
+var presetTokenMap = {
+  "carbon-like": {
+    surface: "var(--eth-surface, var(--eth-color-surface))",
+    surfaceMuted: "var(--eth-surface-muted, var(--eth-color-surface-muted))",
+    border: "var(--eth-border-subtle, var(--eth-color-border))",
+    text: "var(--eth-text-primary, var(--eth-color-text))",
+    textMuted: "var(--eth-text-secondary, var(--eth-color-text-secondary))",
+    accent: "var(--eth-accent, var(--eth-color-accent))",
+    radius: "var(--eth-radius-sm, 0.125rem)",
+    shadow: "var(--eth-shadow-none, none)"
+  },
+  "soft-card": {
+    surface: "var(--eth-surface, var(--eth-color-surface))",
+    surfaceMuted: "var(--eth-surface-muted, var(--eth-color-surface-muted))",
+    border: "var(--eth-border-soft, var(--eth-color-border))",
+    text: "var(--eth-text-primary, var(--eth-color-text))",
+    textMuted: "var(--eth-text-secondary, var(--eth-color-text-secondary))",
+    accent: "var(--eth-accent, var(--eth-color-accent))",
+    radius: "var(--eth-radius-lg, 0.75rem)",
+    shadow: "var(--eth-shadow-card, 0 1px 2px rgba(15,23,42,0.08))"
+  },
+  glass: {
+    surface: "var(--eth-surface-glass, var(--eth-color-surface))",
+    surfaceMuted: "var(--eth-surface-glass-muted, var(--eth-color-surface-muted))",
+    border: "var(--eth-border-glass, var(--eth-color-border))",
+    text: "var(--eth-text-on-glass, var(--eth-color-text))",
+    textMuted: "var(--eth-text-on-glass-muted, var(--eth-color-text-secondary))",
+    accent: "var(--eth-accent, var(--eth-color-accent))",
+    radius: "var(--eth-radius-xl, 1rem)",
+    shadow: "var(--eth-shadow-floating, 0 8px 32px rgba(15,23,42,0.18))",
+    backdrop: "blur(16px)"
+  },
+  bright: {
+    surface: "var(--eth-surface, var(--eth-color-surface))",
+    surfaceMuted: "var(--eth-surface-muted, var(--eth-color-surface-muted))",
+    border: "var(--eth-border-bright, var(--eth-color-border))",
+    text: "var(--eth-text-primary, var(--eth-color-text))",
+    textMuted: "var(--eth-text-secondary, var(--eth-color-text-secondary))",
+    accent: "var(--eth-accent, var(--eth-color-accent))",
+    radius: "var(--eth-radius-md, 0.5rem)",
+    shadow: "var(--eth-shadow-sm, 0 1px 2px rgba(15,23,42,0.06))"
+  },
+  "studio-dark": {
+    surface: "var(--eth-surface-studio, var(--eth-color-surface))",
+    surfaceMuted: "var(--eth-surface-studio-muted, var(--eth-color-surface-muted))",
+    border: "var(--eth-border-studio, var(--eth-color-border))",
+    text: "var(--eth-text-on-dark, var(--eth-color-text))",
+    textMuted: "var(--eth-text-on-dark-muted, var(--eth-color-text-secondary))",
+    accent: "var(--eth-accent, var(--eth-color-accent))",
+    radius: "var(--eth-radius-sm, 0.125rem)",
+    shadow: "var(--eth-shadow-none, none)"
+  }
+};
+var densityGap = {
+  compact: "var(--eth-space-sm, 0.5rem)",
+  standard: "var(--eth-space-md, 0.75rem)",
+  comfortable: "var(--eth-space-lg, 1rem)"
+};
+function resolveTokens(style) {
+  return { ...presetTokenMap[style.preset], gap: densityGap[style.density] };
+}
+
+// src/layout-system/inference/style.ts
+var defaultComponentStyle = {
+  preset: "carbon-like",
+  palette: "default",
+  density: "standard",
+  typeScale: "standard"
+};
+function matches(value, candidates) {
+  if (!value) return false;
+  return candidates.some((c) => value === c || value.endsWith(`.${c}`) || value.includes(c));
+}
+function chooseHighestScore(scores, fallback) {
+  let best = fallback;
+  let bestScore = -Infinity;
+  const order = [
+    "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;
+}
+function inferDensity(input) {
+  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";
+}
+function inferTypeScale(input) {
+  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";
+}
+function inferComponentStyle(input) {
+  const presetScores = {
+    "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;
+  }
+  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)
+  };
+}
+
+// src/layout-system/inference/context.ts
+var defaultContextPolicy = {
+  inheritStyle: true,
+  inheritDensity: true,
+  inheritTypeScale: true,
+  inheritSurface: false,
+  isolateState: false,
+  isolateScroll: true,
+  allowComponentOverride: true,
+  maxDepth: 8
+};
+var defaultViewport = {
+  breakpoint: "desktop",
+  width: 1440,
+  height: 900,
+  pointer: "fine",
+  colorScheme: "light"
+};
+function createRootContext(input = {}) {
+  const viewport = { ...defaultViewport, ...input.viewport };
+  const componentStyle = {
+    ...defaultComponentStyle,
+    ...input.style
+  };
+  return {
+    path: [],
+    depth: 0,
+    ancestry: [],
+    viewport,
+    container: { width: viewport.width, height: viewport.height },
+    route: input.route,
+    surface: input.surface ?? "app",
+    componentStyle,
+    tokens: resolveTokens(componentStyle),
+    stateScope: "session",
+    permissions: input.permissions ? { granted: new Set(input.permissions) } : void 0
+  };
+}
+function inferChildSurface(parent, node, slot) {
+  return slot.contextTransform?.surface ?? node.styleIntent?.surface ?? (parent.surface === "app" ? "page" : parent.surface);
+}
+function buildStyleInferenceInput(args) {
+  const { parent, node, slot, content } = args;
+  const surface = inferChildSurface(parent, node, slot);
+  const explicit = {
+    ...node.styleIntent,
+    ...slot.contextTransform?.styleIntent,
+    ...slot.contextTransform?.densityHint ? { density: slot.contextTransform.densityHint } : {},
+    ...slot.contextTransform?.typeScaleHint ? { typeScale: slot.contextTransform.typeScaleHint } : {},
+    ...content.kind === "component" ? content.styleOverride : void 0
+  };
+  return {
+    parent: parent.componentStyle,
+    explicit,
+    layoutType: node.type,
+    layoutTier: node.tier,
+    layoutVariant: node.variant,
+    surface,
+    slotRole: slot.role,
+    taskMode: node.styleIntent?.taskMode ?? parent.taskMode,
+    dataIntensity: node.styleIntent?.dataIntensity ?? parent.dataIntensity,
+    interactionMode: node.styleIntent?.interactionMode ?? parent.interactionMode,
+    visualEmphasis: node.styleIntent?.visualEmphasis ?? parent.visualEmphasis,
+    depth: parent.depth + 1,
+    breakpoint: parent.viewport.breakpoint,
+    containerWidth: parent.container.width
+  };
+}
+function composeLayoutContext(args) {
+  const { parent, node, slot, content } = args;
+  const styleInput = buildStyleInferenceInput(args);
+  const componentStyle = inferComponentStyle(styleInput);
+  const surface = styleInput.surface;
+  return {
+    ...parent,
+    path: [...parent.path, node.id, slot.name],
+    depth: parent.depth + 1,
+    ancestry: [
+      ...parent.ancestry,
+      {
+        id: node.id,
+        type: node.type,
+        tier: node.tier,
+        surface: node.styleIntent?.surface,
+        slotRole: slot.role
+      }
+    ],
+    slot: {
+      name: slot.name,
+      role: slot.role,
+      priority: slot.priority?.value,
+      surface: slot.contextTransform?.surface
+    },
+    surface,
+    taskMode: node.styleIntent?.taskMode ?? parent.taskMode,
+    dataIntensity: node.styleIntent?.dataIntensity ?? parent.dataIntensity,
+    interactionMode: node.styleIntent?.interactionMode ?? parent.interactionMode,
+    visualEmphasis: node.styleIntent?.visualEmphasis ?? parent.visualEmphasis,
+    componentStyle,
+    tokens: resolveTokens(componentStyle),
+    stateScope: node.state?.scope ?? parent.stateScope
+  };
+}
+
+// src/layout-system/inference/responsive.ts
+var BREAKPOINT_ORDER = [
+  "mobile",
+  "tablet",
+  "laptop",
+  "desktop",
+  "wide",
+  "ultra"
+];
+function breakpointRank(bp) {
+  return BREAKPOINT_ORDER.indexOf(bp);
+}
+function isNarrow(bp) {
+  return breakpointRank(bp) <= breakpointRank("tablet");
+}
+var PLACEMENT_BY_ROLE = {
+  navigation: "inline-start",
+  filter: "inline-start",
+  inspector: "inline-end",
+  secondary: "inline-end",
+  toolbar: "block-start",
+  search: "block-start",
+  status: "block-start",
+  console: "block-end",
+  footer: "block-end",
+  timeline: "block-end",
+  summary: "inline-end",
+  preview: "inline-end",
+  drawer: "overlay",
+  modal: "overlay",
+  overlay: "overlay"
+};
+function placementFor(slot) {
+  return PLACEMENT_BY_ROLE[slot.role] ?? "center";
+}
+function resolvePhysicalPlan(input) {
+  const { node, item, viewport, state } = input;
+  const narrow = isNarrow(viewport.breakpoint);
+  const bpRank = breakpointRank(viewport.breakpoint);
+  const regions = item.slots.map((slot) => {
+    const present = node.slots[slot.name] !== void 0;
+    const persisted = state?.panels?.[slot.name];
+    const placement = placementFor(slot);
+    let visible = present;
+    let collapsed = persisted?.collapsed ?? false;
+    let layer;
+    let regionPlacement = placement;
+    if (slot.responsive?.hideBelow && bpRank < breakpointRank(slot.responsive.hideBelow)) {
+      visible = false;
+    }
+    if (slot.responsive?.collapseBelow && bpRank < breakpointRank(slot.responsive.collapseBelow)) {
+      collapsed = true;
+    }
+    if (narrow && slot.priority) {
+      switch (slot.priority.behaviorOnNarrow) {
+        case "collapse":
+          collapsed = true;
+          break;
+        case "hide":
+          if (!slot.required) visible = false;
+          break;
+        case "move-to-drawer":
+          regionPlacement = "overlay";
+          layer = "drawer";
+          break;
+        case "move-to-bottom-sheet":
+          regionPlacement = "overlay";
+          layer = "sheet";
+          break;
+        case "route-stack":
+        case "tabs":
+        case "keep":
+        default:
+          break;
+      }
+    }
+    return {
+      slot: slot.name,
+      placement: regionPlacement,
+      visible,
+      collapsed,
+      mounted: present,
+      layer,
+      size: persisted?.width ? { width: persisted.width } : persisted?.height ? { height: persisted.height } : void 0
+    };
+  });
+  const mode = narrow ? regions.some((r) => r.layer === "drawer" || r.layer === "sheet") ? "drawer-assisted" : "single-pane" : "multi-pane";
+  return { layoutId: node.id, mode, regions };
+}
+function regionFor(plan, slot) {
+  return plan.regions.find((r) => r.slot === slot);
+}
+
+// src/layout-system/registry/registry.ts
+var LayoutRegistry = class {
+  items = /* @__PURE__ */ new Map();
+  register(item) {
+    this.items.set(item.type, item);
+    return this;
+  }
+  registerAll(items) {
+    for (const item of items) this.register(item);
+    return this;
+  }
+  get(type) {
+    return this.items.get(type);
+  }
+  has(type) {
+    return this.items.has(type);
+  }
+  list() {
+    return [...this.items.values()];
+  }
+  types() {
+    return [...this.items.keys()];
+  }
+  byTier(tier) {
+    return this.list().filter((i) => i.tier === tier);
+  }
+  byCategory(category) {
+    return this.list().filter((i) => i.category === category);
+  }
+};
+
+// src/layout-system/primitives/index.tsx
+import * as React3 from "react";
+
+// src/layout-system/renderer/renderer.tsx
+import * as React2 from "react";
+import { StyleScope } from "@echothink-ui/style";
+
+// src/layout-system/renderer/context.tsx
+import * as React from "react";
+
+// src/layout-system/runtime/state.ts
+function emptyState(layoutId) {
+  return {
+    schemaVersion: 2,
+    layoutId,
+    panels: {},
+    updatedAt: ""
+  };
+}
+function createMemoryLayoutStateStore(opts) {
+  const cache = /* @__PURE__ */ new Map();
+  const persistKey = opts?.persistKey;
+  function load() {
+    if (!persistKey || typeof localStorage === "undefined") return;
+    try {
+      const raw = localStorage.getItem(persistKey);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      for (const [id, st] of Object.entries(parsed)) cache.set(id, st);
+    } catch {
+    }
+  }
+  function flush() {
+    if (!persistKey || typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(persistKey, JSON.stringify(Object.fromEntries(cache)));
+    } catch {
+    }
+  }
+  load();
+  return {
+    get(layoutId) {
+      return cache.get(layoutId);
+    },
+    set(layoutId, state) {
+      cache.set(layoutId, state);
+      flush();
+    },
+    patchPanel(layoutId, slot, patch) {
+      const current = cache.get(layoutId) ?? emptyState(layoutId);
+      const next = {
+        ...current,
+        panels: { ...current.panels, [slot]: { ...current.panels[slot], ...patch } },
+        // `updatedAt` is set by the caller environment; left as a marker here.
+        updatedAt: current.updatedAt || "pending"
+      };
+      cache.set(layoutId, next);
+      flush();
+      return next;
+    }
+  };
+}
+
+// src/layout-system/renderer/context.tsx
+import { jsx } from "react/jsx-runtime";
+var RuntimeContext = React.createContext(createRootContext());
+var EngineContext = React.createContext(null);
+function LayoutContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(RuntimeContext.Provider, { value, children });
+}
+function useLayoutContext() {
+  return React.useContext(RuntimeContext);
+}
+function LayoutEngineProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(EngineContext.Provider, { value, children });
+}
+function useLayoutEngine() {
+  const engine = React.useContext(EngineContext);
+  if (!engine) {
+    throw new Error(
+      "useLayoutEngine must be used within <LayoutRoot> / <LayoutEngineProvider>."
+    );
+  }
+  return engine;
+}
+function buildEngine(input) {
+  return {
+    registry: input.registry,
+    componentResolver: input.componentResolver,
+    templateResolver: input.templateResolver,
+    stateStore: input.stateStore ?? createMemoryLayoutStateStore(),
+    onDiagnostics: input.onDiagnostics
+  };
+}
+
+// src/layout-system/renderer/renderer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function UnknownLayout({ type }) {
+  return /* @__PURE__ */ jsxs("div", { "data-ls-unknown-layout": type, className: "eth-ls-unknown", role: "note", children: [
+    "Unknown layout type: ",
+    /* @__PURE__ */ jsx2("code", { children: type })
+  ] });
+}
+function UnknownComponent({ name }) {
+  return /* @__PURE__ */ jsxs("div", { "data-ls-unknown-component": name, className: "eth-ls-unknown", role: "note", children: [
+    "Unknown component: ",
+    /* @__PURE__ */ jsx2("code", { children: name })
+  ] });
+}
+function EmptySlot({ reason }) {
+  return /* @__PURE__ */ jsx2("div", { "data-ls-empty": reason ?? "not-configured", className: "eth-ls-empty", "aria-hidden": "true" });
+}
+function ComponentRenderer({
+  content,
+  context
+}) {
+  const engine = useLayoutEngine();
+  const Component = engine.componentResolver(content.component);
+  if (!Component) return /* @__PURE__ */ jsx2(UnknownComponent, { name: content.component });
+  const s = context.componentStyle;
+  return /* @__PURE__ */ jsx2(
+    StyleScope,
+    {
+      preset: s.preset,
+      palette: s.palette,
+      density: s.density,
+      typeScale: s.typeScale,
+      global: false,
+      className: "eth-ls-component",
+      "data-ls-component": content.component,
+      children: /* @__PURE__ */ jsx2(Component, { ...content.props ?? {} })
+    }
+  );
+}
+function renderContent(content, context, engine) {
+  switch (content.kind) {
+    case "component":
+      return /* @__PURE__ */ jsx2(ComponentRenderer, { content, context });
+    case "layout":
+      return /* @__PURE__ */ jsx2(LayoutRenderer, { node: content.layout });
+    case "template": {
+      const resolved = engine.templateResolver?.(content.template);
+      if (!resolved) return /* @__PURE__ */ jsx2(UnknownComponent, { name: `template:${content.template}` });
+      return /* @__PURE__ */ jsx2(LayoutRenderer, { node: resolved });
+    }
+    case "fragment": {
+      const direction = content.composition?.op === "stack" && content.composition.direction === "horizontal" ? "row" : "column";
+      return /* @__PURE__ */ jsx2("div", { className: "eth-ls-fragment", style: { display: "flex", flexDirection: direction, gap: context.tokens.gap }, children: content.items.map((item, i) => /* @__PURE__ */ jsx2(React2.Fragment, { children: renderContent(item, context, engine) }, i)) });
+    }
+    case "empty":
+      return /* @__PURE__ */ jsx2(EmptySlot, { reason: content.reason });
+    default:
+      return null;
+  }
+}
+function SlotContentRenderer({
+  node,
+  slot,
+  content,
+  parentContext
+}) {
+  const engine = useLayoutEngine();
+  const childContext = React2.useMemo(
+    () => composeLayoutContext({ parent: parentContext, node, slot, content }),
+    [parentContext, node, slot, content]
+  );
+  return /* @__PURE__ */ jsx2(LayoutContextProvider, { value: childContext, children: renderContent(content, childContext, engine) });
+}
+function LayoutRenderer({ node }) {
+  const parentContext = useLayoutContext();
+  const engine = useLayoutEngine();
+  const item = engine.registry.get(node.type);
+  if (!item) return /* @__PURE__ */ jsx2(UnknownLayout, { type: node.type });
+  const slots = {};
+  for (const slotDef of item.slots) {
+    const content = node.slots[slotDef.name] ?? slotDef.fallback?.empty;
+    if (content === void 0) continue;
+    slots[slotDef.name] = /* @__PURE__ */ jsx2(
+      SlotContentRenderer,
+      {
+        node,
+        slot: slotDef,
+        content,
+        parentContext
+      }
+    );
+  }
+  const plan = resolvePhysicalPlan({
+    node,
+    item,
+    viewport: parentContext.viewport,
+    state: engine.stateStore.get(node.id)
+  });
+  const Renderer = item.renderer;
+  return /* @__PURE__ */ jsx2(
+    Renderer,
+    {
+      node,
+      variant: node.variant,
+      props: { ...item.defaultProps, ...node.props },
+      slots,
+      context: parentContext,
+      composition: node.composition ?? item.defaultComposition,
+      plan
+    }
+  );
+}
+
+// src/layout-system/renderer/region.tsx
+var ANY_ACCEPTS = [
+  { kind: "component" },
+  { kind: "layout" },
+  { kind: "template" },
+  { kind: "fragment" },
+  { kind: "empty" }
+];
+function inlineSlot(name, role = "content") {
+  return { name, role, accepts: ANY_ACCEPTS };
+}
+function isVisible(plan, slot) {
+  const region = regionFor(plan, slot);
+  return region ? region.visible : true;
+}
+function isCollapsed(plan, slot) {
+  return regionFor(plan, slot)?.collapsed ?? false;
+}
+
+// src/layout-system/primitives/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PanelRenderer({ slots, context }) {
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: "eth-ls-panel",
+      style: {
+        background: context.tokens.surface,
+        border: `1px solid ${context.tokens.border}`,
+        borderRadius: context.tokens.radius,
+        boxShadow: context.tokens.shadow,
+        color: context.tokens.text
+      },
+      children: [
+        slots.header ? /* @__PURE__ */ jsx3("header", { className: "eth-ls-panel__header", children: slots.header }) : null,
+        /* @__PURE__ */ jsx3("div", { className: "eth-ls-panel__body", children: slots.body }),
+        slots.footer ? /* @__PURE__ */ jsx3("footer", { className: "eth-ls-panel__footer", children: slots.footer }) : null
+      ]
+    }
+  );
+}
+var PanelLayout = {
+  type: "Primitive.Panel",
+  displayName: "Panel",
+  tier: "primitive",
+  category: "primitive",
+  description: "A bounded surface with optional header/body/footer.",
+  slots: [
+    { name: "header", role: "toolbar", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+    {
+      name: "body",
+      role: "content",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }]
+    },
+    { name: "footer", role: "footer", accepts: [{ kind: "component" }, { kind: "fragment" }] }
+  ],
+  defaultStyleIntent: { surface: "panel" },
+  renderer: PanelRenderer
+};
+function SplitPaneRenderer({ slots, context, composition, variant }) {
+  const orientation = variant === "vertical" ? "vertical" : "horizontal";
+  const parallel = composition?.op === "parallel" ? composition : void 0;
+  const primaryBasis = parallel?.sizing?.primary?.basis;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `eth-ls-split eth-ls-split--${orientation}`,
+      style: {
+        display: "grid",
+        gap: parallel?.gapToken ? `var(${parallel.gapToken})` : context.tokens.gap,
+        gridTemplateColumns: orientation === "horizontal" ? `${primaryBasis ? cssSize(primaryBasis) : "1fr"} 1fr` : void 0,
+        gridTemplateRows: orientation === "vertical" ? `${primaryBasis ? cssSize(primaryBasis) : "1fr"} 1fr` : void 0,
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "eth-ls-split__pane eth-ls-split__pane--primary", style: { minWidth: 0, minHeight: 0 }, children: slots.primary }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "eth-ls-split__pane eth-ls-split__pane--secondary",
+            role: "separator",
+            "aria-orientation": orientation,
+            style: { minWidth: 0, minHeight: 0 },
+            children: slots.secondary
+          }
+        )
+      ]
+    }
+  );
+}
+function cssSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var SplitPaneLayout = {
+  type: "Primitive.SplitPane",
+  displayName: "Split Pane",
+  tier: "primitive",
+  category: "primitive",
+  description: "Two resizable panes split horizontally or vertically.",
+  variants: [
+    { id: "horizontal", label: "Left / Right" },
+    { id: "vertical", label: "Top / Bottom" }
+  ],
+  slots: [
+    {
+      name: "primary",
+      role: "primary",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "template" }, { kind: "fragment" }]
+    },
+    {
+      name: "secondary",
+      role: "secondary",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "template" }, { kind: "fragment" }]
+    }
+  ],
+  defaultComposition: {
+    op: "parallel",
+    axis: "x",
+    slots: ["primary", "secondary"],
+    sizing: { primary: { basis: "1fr", resizable: true }, secondary: { grow: 1 } }
+  },
+  renderer: SplitPaneRenderer
+};
+function TabsRenderer({ node, context, composition }) {
+  const switchSpec = composition?.op === "switch" ? composition : void 0;
+  const items = switchSpec?.items ?? [];
+  const initial = switchSpec?.activeKey ?? items[0]?.key;
+  const [active, setActive] = React3.useState(initial);
+  const activeItem = items.find((i) => i.key === active) ?? items[0];
+  return /* @__PURE__ */ jsxs2("div", { className: "eth-ls-tabs", style: { color: context.tokens.text }, children: [
+    /* @__PURE__ */ jsx3("div", { className: "eth-ls-tabs__list", role: "tablist", children: items.map((item) => {
+      const selected = item.key === activeItem?.key;
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          id: `tab-${node.id}-${item.key}`,
+          "aria-selected": selected,
+          "aria-controls": `tabpanel-${node.id}-${item.key}`,
+          tabIndex: selected ? 0 : -1,
+          className: `eth-ls-tabs__tab${selected ? " eth-ls-tabs__tab--active" : ""}`,
+          onClick: () => setActive(item.key),
+          children: item.label
+        },
+        item.key
+      );
+    }) }),
+    activeItem ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "eth-ls-tabs__panel",
+        role: "tabpanel",
+        id: `tabpanel-${node.id}-${activeItem.key}`,
+        "aria-labelledby": `tab-${node.id}-${activeItem.key}`,
+        children: /* @__PURE__ */ jsx3(
+          SlotContentRenderer,
+          {
+            node,
+            slot: inlineSlot(`tab:${activeItem.key}`, "content"),
+            content: activeItem.content,
+            parentContext: context
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+var TabsLayout = {
+  type: "Primitive.Tabs",
+  displayName: "Tabs",
+  tier: "primitive",
+  category: "primitive",
+  description: "Switch composition rendering one panel at a time with tablist semantics.",
+  slots: [],
+  defaultComposition: { op: "switch", mode: "tabs", items: [] },
+  renderer: TabsRenderer
+};
+function StepperRenderer({ node, context, composition }) {
+  const stepper = composition?.op === "stepper" ? composition : void 0;
+  const steps = stepper?.steps ?? [];
+  const firstActive = steps.findIndex((s) => s.status === "active");
+  const [activeIndex, setActiveIndex] = React3.useState(firstActive >= 0 ? firstActive : 0);
+  const orientation = stepper?.orientation ?? "horizontal";
+  const activeStep = steps[activeIndex];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `eth-ls-stepper eth-ls-stepper--${orientation}`,
+      style: { display: "flex", flexDirection: orientation === "vertical" ? "row" : "column", gap: context.tokens.gap, color: context.tokens.text },
+      children: [
+        /* @__PURE__ */ jsx3("ol", { className: "eth-ls-stepper__steps", "aria-label": "Steps", children: steps.map((step, index) => {
+          const current = index === activeIndex;
+          return /* @__PURE__ */ jsx3(
+            "li",
+            {
+              className: `eth-ls-stepper__step eth-ls-stepper__step--${step.status ?? "pending"}${current ? " eth-ls-stepper__step--current" : ""}`,
+              "aria-current": current ? "step" : void 0,
+              children: /* @__PURE__ */ jsxs2("button", { type: "button", className: "eth-ls-stepper__step-button", onClick: () => setActiveIndex(index), children: [
+                /* @__PURE__ */ jsx3("span", { className: "eth-ls-stepper__index", children: index + 1 }),
+                /* @__PURE__ */ jsx3("span", { className: "eth-ls-stepper__label", children: step.label })
+              ] })
+            },
+            step.id
+          );
+        }) }),
+        activeStep ? /* @__PURE__ */ jsx3("div", { className: "eth-ls-stepper__content", children: /* @__PURE__ */ jsx3(
+          SlotContentRenderer,
+          {
+            node,
+            slot: inlineSlot(`step:${activeStep.id}`, "form"),
+            content: activeStep.content,
+            parentContext: context
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+var StepperLayout = {
+  type: "Primitive.Stepper",
+  displayName: "Stepper",
+  tier: "primitive",
+  category: "primitive",
+  description: "Flow-oriented step container with validation/navigation semantics.",
+  variants: [{ id: "horizontal" }, { id: "vertical" }, { id: "with-preview" }],
+  slots: [],
+  defaultComposition: {
+    op: "stepper",
+    orientation: "horizontal",
+    stepSlot: "stepper",
+    contentSlot: "content",
+    steps: []
+  },
+  defaultStyleIntent: { taskMode: "wizard", visualEmphasis: "balanced" },
+  renderer: StepperRenderer
+};
+var primitiveLayouts = [
+  PanelLayout,
+  SplitPaneLayout,
+  TabsLayout,
+  StepperLayout
+];
+
+// src/layout-system/regions/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ToolbarRenderer({ slots, context }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "eth-ls-toolbar",
+      role: "toolbar",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: context.tokens.gap,
+        background: context.tokens.surfaceMuted,
+        borderBottom: `1px solid ${context.tokens.border}`,
+        color: context.tokens.text
+      },
+      children: [
+        slots.start ? /* @__PURE__ */ jsx4("div", { className: "eth-ls-toolbar__start", children: slots.start }) : null,
+        slots.center ? /* @__PURE__ */ jsx4("div", { className: "eth-ls-toolbar__center", style: { flex: 1, minWidth: 0 }, children: slots.center }) : /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }),
+        slots.end ? /* @__PURE__ */ jsx4("div", { className: "eth-ls-toolbar__end", children: slots.end }) : null
+      ]
+    }
+  );
+}
+var ToolbarLayout = {
+  type: "Region.Toolbar",
+  displayName: "Toolbar",
+  tier: "region",
+  category: "region",
+  description: "Horizontal toolbar with start/center/end groups and roving focus.",
+  slots: [
+    { name: "start", role: "toolbar", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+    { name: "center", role: "toolbar", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+    { name: "end", role: "toolbar", accepts: [{ kind: "component" }, { kind: "fragment" }] }
+  ],
+  defaultStyleIntent: { surface: "region" },
+  renderer: ToolbarRenderer
+};
+function InspectorRenderer({ slots, context }) {
+  return /* @__PURE__ */ jsxs3(
+    "aside",
+    {
+      className: "eth-ls-inspector",
+      "aria-label": "Inspector",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        background: context.tokens.surface,
+        borderInlineStart: `1px solid ${context.tokens.border}`,
+        color: context.tokens.text
+      },
+      children: [
+        slots.header ? /* @__PURE__ */ jsx4("header", { className: "eth-ls-inspector__header", children: slots.header }) : null,
+        /* @__PURE__ */ jsx4("div", { className: "eth-ls-inspector__body", style: { overflow: "auto", flex: 1, minHeight: 0 }, children: slots.body }),
+        slots.footer ? /* @__PURE__ */ jsx4("footer", { className: "eth-ls-inspector__footer", children: slots.footer }) : null
+      ]
+    }
+  );
+}
+var InspectorLayout = {
+  type: "Region.Inspector",
+  displayName: "Inspector",
+  tier: "region",
+  category: "region",
+  description: "An inline-end inspector panel with header/body/footer.",
+  slots: [
+    { name: "header", role: "toolbar", accepts: [{ kind: "component" }, { kind: "fragment" }] },
+    {
+      name: "body",
+      role: "inspector",
+      required: true,
+      accepts: [{ kind: "component" }, { kind: "layout" }, { kind: "fragment" }]
+    },
+    { name: "footer", role: "footer", accepts: [{ kind: "component" }, { kind: "fragment" }] }
+  ],
+  defaultStyleIntent: { surface: "panel", interactionMode: "edit" },
+  renderer: InspectorRenderer
+};
+var regionLayouts = [ToolbarLayout, InspectorLayout];
+
+// src/layout-system/page-layouts/index.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function frameStyle(context) {
+  return {
+    display: "grid",
+    height: "100%",
+    minHeight: 0,
+    background: context.tokens.surfaceMuted,
+    color: context.tokens.text
+  };
+}
+function AdminShellRenderer({ slots, context, plan }) {
+  const navVisible = slots.navigation && isVisible(plan, "navigation");
+  const navCollapsed = isCollapsed(plan, "navigation");
+  return /* @__PURE__ */ jsxs4(
+    "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"`
+      },
+      children: [
+        slots.topbar ? /* @__PURE__ */ jsx5("header", { className: "eth-ls-admin-shell__topbar", style: { gridArea: "topbar" }, children: slots.topbar }) : null,
+        navVisible ? /* @__PURE__ */ jsx5("nav", { className: "eth-ls-admin-shell__nav", style: { gridArea: "nav", overflow: "auto", borderInlineEnd: `1px solid ${context.tokens.border}` }, children: slots.navigation }) : null,
+        /* @__PURE__ */ jsx5("main", { className: "eth-ls-admin-shell__content", style: { gridArea: "content", overflow: "auto", minWidth: 0 }, children: slots.content }),
+        slots.footer ? /* @__PURE__ */ jsx5("footer", { className: "eth-ls-admin-shell__footer", style: { gridArea: "footer", borderBlockStart: `1px solid ${context.tokens.border}` }, children: slots.footer }) : null
+      ]
+    }
+  );
+}
+var AdminShellLayout = {
+  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
+};
+function DataGridInspectorRenderer({ slots, context, plan }) {
+  const inspectorVisible = slots.inspector && isVisible(plan, "inspector");
+  return /* @__PURE__ */ jsxs4(
+    "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"`
+      },
+      children: [
+        slots.toolbar ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-datagrid__toolbar", style: { gridArea: "toolbar" }, children: slots.toolbar }) : null,
+        /* @__PURE__ */ jsx5("div", { className: "eth-ls-datagrid__grid", style: { gridArea: "grid", overflow: "auto", minWidth: 0 }, children: slots.grid }),
+        inspectorVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-datagrid__inspector", style: { gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }, children: slots.inspector }) : null
+      ]
+    }
+  );
+}
+var DataGridInspectorLayout = {
+  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
+};
+function WorkbenchRenderer({ slots, context, plan }) {
+  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 /* @__PURE__ */ jsxs4(
+    "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(" ")}"`
+      },
+      children: [
+        slots.toolbar ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-workbench__toolbar", style: { gridArea: "toolbar" }, children: slots.toolbar }) : null,
+        explorerVisible ? /* @__PURE__ */ jsx5("nav", { className: "eth-ls-workbench__explorer", style: { gridArea: "explorer", overflow: "auto", borderInlineEnd: `1px solid ${context.tokens.border}` }, children: slots.explorer }) : null,
+        /* @__PURE__ */ jsx5("main", { className: "eth-ls-workbench__primary", style: { gridArea: "primary", overflow: "auto", minWidth: 0, minHeight: 0 }, children: slots.primary }),
+        inspectorVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-workbench__inspector", style: { gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }, children: slots.inspector }) : null,
+        consoleVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-workbench__console", style: { gridArea: "console", overflow: "auto", borderBlockStart: `1px solid ${context.tokens.border}` }, children: slots.console }) : null
+      ]
+    }
+  );
+}
+var WorkbenchLayout = {
+  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
+};
+function WizardComposerRenderer({ slots, context, plan }) {
+  const previewVisible = slots.preview && isVisible(plan, "preview");
+  return /* @__PURE__ */ jsxs4(
+    "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
+      },
+      children: [
+        slots.stepper ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-wizard__stepper", style: { gridArea: "stepper" }, children: slots.stepper }) : null,
+        /* @__PURE__ */ jsx5("main", { className: "eth-ls-wizard__content", style: { gridArea: "content", overflow: "auto", minWidth: 0 }, children: slots.content }),
+        previewVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-wizard__preview", style: { gridArea: "preview", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }, children: slots.preview }) : null,
+        slots.footerActions ? /* @__PURE__ */ jsx5("footer", { className: "eth-ls-wizard__footer", style: { gridArea: "footer", borderBlockStart: `1px solid ${context.tokens.border}` }, children: slots.footerActions }) : null
+      ]
+    }
+  );
+}
+var WizardComposerLayout = {
+  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
+};
+function MonitoringOpsRenderer({ slots, context, plan }) {
+  const consoleVisible = slots.console && isVisible(plan, "console");
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "eth-ls-monitoring",
+      style: {
+        ...frameStyle(context),
+        gridTemplateRows: `auto auto 1fr ${consoleVisible ? "minmax(8rem, 14rem)" : "0"}`,
+        gridTemplateAreas: `"toolbar" "metrics" "primary" "console"`
+      },
+      children: [
+        slots.toolbar ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-monitoring__toolbar", style: { gridArea: "toolbar" }, children: slots.toolbar }) : null,
+        slots.metrics ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-monitoring__metrics", style: { gridArea: "metrics" }, children: slots.metrics }) : null,
+        /* @__PURE__ */ jsx5("main", { className: "eth-ls-monitoring__primary", style: { gridArea: "primary", overflow: "auto", minHeight: 0 }, children: slots.primary }),
+        consoleVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-monitoring__console", style: { gridArea: "console", overflow: "auto", borderBlockStart: `1px solid ${context.tokens.border}` }, children: slots.console }) : null
+      ]
+    }
+  );
+}
+var MonitoringOpsLayout = {
+  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
+};
+function CanvasInspectorRenderer({ slots, context, plan }) {
+  const inspectorVisible = slots.inspector && isVisible(plan, "inspector");
+  return /* @__PURE__ */ jsxs4(
+    "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"`
+      },
+      children: [
+        slots.toolbar ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-canvas__toolbar", style: { gridArea: "toolbar" }, children: slots.toolbar }) : null,
+        /* @__PURE__ */ jsx5("div", { className: "eth-ls-canvas__stage", style: { gridArea: "canvas", overflow: "hidden", minWidth: 0, minHeight: 0 }, children: slots.canvas }),
+        inspectorVisible ? /* @__PURE__ */ jsx5("div", { className: "eth-ls-canvas__inspector", style: { gridArea: "inspector", overflow: "auto", borderInlineStart: `1px solid ${context.tokens.border}` }, children: slots.inspector }) : null
+      ]
+    }
+  );
+}
+var CanvasInspectorLayout = {
+  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
+};
+var pageLayouts = [
+  AdminShellLayout,
+  DataGridInspectorLayout,
+  WorkbenchLayout,
+  WizardComposerLayout,
+  MonitoringOpsLayout,
+  CanvasInspectorLayout
+];
+
+// src/layout-system/registry/builtins.ts
+var builtinLayouts = [
+  ...primitiveLayouts,
+  ...regionLayouts,
+  ...pageLayouts
+];
+function createDefaultLayoutRegistry() {
+  return new LayoutRegistry().registerAll(builtinLayouts);
+}
+
+// src/layout-system/runtime/viewport.ts
+import * as React4 from "react";
+var BREAKPOINTS = [
+  { bp: "ultra", minWidth: 1920 },
+  { bp: "wide", minWidth: 1536 },
+  { bp: "desktop", minWidth: 1280 },
+  { bp: "laptop", minWidth: 1024 },
+  { bp: "tablet", minWidth: 768 },
+  { bp: "mobile", minWidth: 0 }
+];
+function breakpointForWidth(width) {
+  for (const { bp, minWidth } of BREAKPOINTS) {
+    if (width >= minWidth) return bp;
+  }
+  return "mobile";
+}
+function readViewport() {
+  if (typeof window === "undefined") return defaultViewport;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const pointer = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches ? "coarse" : "fine";
+  const colorScheme = typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return { breakpoint: breakpointForWidth(width), width, height, pointer, colorScheme };
+}
+function useViewport(opts = {}) {
+  const { initial = defaultViewport, debounceMs = 120 } = opts;
+  const [viewport, setViewport] = React4.useState(initial);
+  React4.useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    setViewport(readViewport());
+    let timer;
+    const onResize = () => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setViewport(readViewport()), debounceMs);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      if (timer) clearTimeout(timer);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [debounceMs]);
+  return viewport;
+}
+
+// src/layout-system/renderer/root.tsx
+import * as React5 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function LayoutRoot({
+  node,
+  componentResolver,
+  templateResolver,
+  registry,
+  context,
+  stateStore,
+  observeViewport = true,
+  onDiagnostics
+}) {
+  const resolvedRegistry = React5.useMemo(
+    () => registry ?? createDefaultLayoutRegistry(),
+    [registry]
+  );
+  const observed = useViewport({ initial: context?.viewport });
+  const viewport = observeViewport ? observed : context?.viewport;
+  const rootContext = React5.useMemo(
+    () => createRootContext({ ...context, viewport }),
+    [context, viewport]
+  );
+  const engine = React5.useMemo(
+    () => buildEngine({
+      registry: resolvedRegistry,
+      componentResolver,
+      templateResolver,
+      stateStore,
+      onDiagnostics
+    }),
+    [resolvedRegistry, componentResolver, templateResolver, stateStore, onDiagnostics]
+  );
+  React5.useEffect(() => {
+    if (!onDiagnostics) return;
+    onDiagnostics(validateLayout(node, resolvedRegistry));
+  }, [node, resolvedRegistry, onDiagnostics]);
+  return /* @__PURE__ */ jsx6(LayoutEngineProvider, { value: engine, children: /* @__PURE__ */ jsx6(LayoutContextProvider, { value: rootContext, children: /* @__PURE__ */ jsx6(LayoutRenderer, { node }) }) });
+}
+
+// src/layout-system/builders.ts
+function layout(input) {
+  return { kind: "layout", ...input };
+}
+function componentSlot(component, props, styleOverride) {
+  return { kind: "component", component, props, styleOverride };
+}
+function layoutSlot(node) {
+  return { kind: "layout", layout: node };
+}
+function templateSlot(template, props) {
+  return { kind: "template", template, props };
+}
+function fragmentSlot(items, composition) {
+  return { kind: "fragment", items, composition };
+}
+function emptySlot(reason) {
+  return { kind: "empty", reason };
+}
+
+// src/index.tsx
+var ethBreakpoints = {
+  sm: "36rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem"
+};
+export {
+  LayoutContextProvider,
+  LayoutEngineProvider,
+  LayoutRegistry,
+  LayoutRenderer,
+  LayoutRoot,
+  SlotContentRenderer,
+  StyleScope2 as StyleScope,
+  breakpointForWidth,
+  breakpointRank,
+  buildEngine,
+  buildStyleInferenceInput,
+  builtinLayouts,
+  componentSlot,
+  composeLayoutContext,
+  createDefaultLayoutRegistry,
+  createMemoryLayoutStateStore,
+  createRootContext,
+  defaultComponentStyle,
+  defaultContextPolicy,
+  defaultStylePreset,
+  defaultViewport,
+  emptySlot,
+  ethBreakpoints,
+  ethDensityModes,
+  ethStylePresetDescriptions,
+  ethStylePresetLabels,
+  ethStylePresets,
+  ethTypeScales,
+  fragmentSlot,
+  hasErrors,
+  inferComponentStyle,
+  inferDensity,
+  inferTypeScale,
+  isNarrow,
+  layout,
+  layoutSlot,
+  pageLayouts,
+  presetTokenMap,
+  primitiveLayouts,
+  regionFor,
+  regionLayouts,
+  resolvePhysicalPlan,
+  resolveTokens,
+  templateSlot,
+  useLayoutContext,
+  useLayoutEngine,
+  useViewport,
+  validateLayout
+};
+//# sourceMappingURL=index.js.map