@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/chunk-FP3WIKTC.js

@@ -0,0 +1,303 @@
+import { STATE_COLORS } from './chunk-DFNZUYX4.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isTypeVariable } from '@almadar/core';
+
+var PERSISTENCE_STROKE = {
+  persistent: { strokeWidth: 2.5 },
+  runtime: { strokeDasharray: "6 3", strokeWidth: 2 }
+};
+var AvlEntity = ({
+  x = 0,
+  y = 0,
+  r = 18,
+  fieldCount = 0,
+  persistence = "persistent",
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const strokeProps = PERSISTENCE_STROKE[persistence];
+  const facets = Array.from({ length: fieldCount }, (_, i) => {
+    const angle = Math.PI * 2 * i / fieldCount - Math.PI / 2;
+    const innerR = r + 2;
+    const outerR = r + 10;
+    return {
+      x1: x + innerR * Math.cos(angle),
+      y1: y + innerR * Math.sin(angle),
+      x2: x + outerR * Math.cos(angle),
+      y2: y + outerR * Math.sin(angle)
+    };
+  });
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r, fill: color, opacity: 0.15 }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth: strokeProps.strokeWidth,
+        strokeDasharray: strokeProps.strokeDasharray
+      }
+    ),
+    facets.map((f, i) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: f.x1,
+        y1: f.y1,
+        x2: f.x2,
+        y2: f.y2,
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.6
+      },
+      i
+    )),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + r + (fieldCount > 0 ? 18 : 14),
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlEntity.displayName = "AvlEntity";
+var AvlPage = ({
+  x = 0,
+  y = 0,
+  size = 12,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const half = size / 2;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x - half,
+        y: y - half,
+        width: size,
+        height: size,
+        fill: color,
+        opacity: 0.3,
+        stroke: color,
+        strokeWidth: 1.5
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + half + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlPage.displayName = "AvlPage";
+function computeWidth(explicit, transitionCount) {
+  if (explicit != null) return explicit;
+  if (transitionCount == null) return 100;
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 100;
+}
+var AvlState = ({
+  x = 0,
+  y = 0,
+  name,
+  isInitial = false,
+  isTerminal = false,
+  width: explicitWidth,
+  height = 40,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className,
+  role,
+  transitionCount
+}) => {
+  const width = computeWidth(explicitWidth, transitionCount);
+  const rx = height / 2;
+  const roleColors = role ? STATE_COLORS[role] : null;
+  const fillColor = roleColors ? roleColors.fill : "none";
+  const strokeColor = roleColors ? roleColors.border : color;
+  const textColor = roleColors ? roleColors.border : color;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
+    isInitial && /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: -16,
+        cy: height / 2,
+        r: 6,
+        fill: strokeColor
+      }
+    ),
+    isTerminal && /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: -4,
+        y: -4,
+        width: width + 8,
+        height: height + 8,
+        rx: rx + 4,
+        ry: rx + 4,
+        fill: "none",
+        stroke: strokeColor,
+        strokeWidth: 1,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: 0,
+        y: 0,
+        width,
+        height,
+        rx,
+        ry: rx,
+        fill: fillColor,
+        stroke: strokeColor,
+        strokeWidth: 2
+      }
+    ),
+    name && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: width / 2,
+        y: height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: textColor,
+        fontSize: role ? 14 : 11,
+        fontWeight: role ? 600 : 400,
+        fontFamily: "inherit",
+        children: name
+      }
+    )
+  ] });
+};
+AvlState.displayName = "AvlState";
+var FIELD_TYPE_SHAPES = {
+  string: "circle",
+  email: "circle",
+  url: "circle",
+  phone: "circle",
+  uuid: "circle",
+  field: "circle",
+  number: "triangle",
+  int: "triangle",
+  money: "triangle",
+  boolean: "square",
+  date: "diamond",
+  timestamp: "diamond",
+  datetime: "diamond",
+  instant: "diamond",
+  enum: "ring",
+  union: "ring",
+  object: "hexagon",
+  image: "hexagon",
+  file: "hexagon",
+  bytes: "hexagon",
+  trait: "hexagon",
+  orbital: "hexagon",
+  behavior: "hexagon",
+  slot: "hexagon",
+  pattern: "hexagon",
+  node: "hexagon",
+  event: "hexagon",
+  EventAddress: "hexagon",
+  CallKey: "hexagon",
+  SExpr: "hexagon",
+  array: "bars",
+  tuple: "bars",
+  relation: "link"
+};
+function fieldTypeShape(kind) {
+  return isTypeVariable(kind) ? "variable" : FIELD_TYPE_SHAPES[kind];
+}
+function drawShape(shape, x, y, s, color) {
+  switch (shape) {
+    case "circle":
+      return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: color });
+    case "triangle":
+      return /* @__PURE__ */ jsx("polygon", { points: `${x},${y - s} ${x + s},${y + s * 0.7} ${x - s},${y + s * 0.7}`, fill: color });
+    case "square":
+      return /* @__PURE__ */ jsx("rect", { x: x - s * 0.8, y: y - s * 0.8, width: s * 1.6, height: s * 1.6, fill: color });
+    case "diamond":
+      return /* @__PURE__ */ jsx("polygon", { points: `${x},${y - s} ${x + s},${y} ${x},${y + s} ${x - s},${y}`, fill: color });
+    case "ring":
+      return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 });
+    case "variable":
+      return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5, strokeDasharray: "2 2" });
+    case "hexagon":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: Array.from({ length: 6 }, (_, i) => {
+            const a = Math.PI * 2 * i / 6 - Math.PI / 6;
+            return `${x + s * Math.cos(a)},${y + s * Math.sin(a)}`;
+          }).join(" "),
+          fill: color,
+          opacity: 0.8
+        }
+      );
+    case "bars":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x + s, y2: y - s * 0.6, stroke: color, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y + s * 0.6, x2: x + s, y2: y + s * 0.6, stroke: color, strokeWidth: 2 })
+      ] });
+    case "link":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x - s * 0.45, cy: y, r: s * 0.55, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("circle", { cx: x + s * 0.45, cy: y, r: s * 0.55, fill: "none", stroke: color, strokeWidth: 1.5 })
+      ] });
+  }
+}
+var AvlFieldType = ({
+  x = 0,
+  y = 0,
+  kind,
+  size = 5,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    drawShape(fieldTypeShape(kind), x, y, size, color),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + size + 10,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlFieldType.displayName = "AvlFieldType";
+
+export { AvlEntity, AvlFieldType, AvlPage, AvlState, FIELD_TYPE_SHAPES };

package/dist/chunk-G7DCAZ22.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+export { __export, __reExport };

package/dist/chunk-GAR5TQ5B.js

@@ -0,0 +1,199 @@
+import { getStateRole } from './chunk-DFNZUYX4.js';
+import { useState, useLayoutEffect } from 'react';
+
+function useContainerWidth(ref) {
+  const [width, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+  return width;
+}
+
+// src/lib/avl-elk-layout.ts
+function stateWidth(transitionCount) {
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 110;
+}
+var STATE_H = 40;
+var elk;
+function loadElk() {
+  elk ??= import('elkjs/lib/elk.bundled.js').then(({ default: Elk }) => new Elk());
+  return elk;
+}
+function flowOrder(data) {
+  const byName = new Map(data.states.map((s) => [s.name, s]));
+  const seen = /* @__PURE__ */ new Set();
+  const queue = data.states.filter((s) => s.isInitial).map((s) => s.name);
+  const out = [];
+  while (queue.length > 0) {
+    const name = queue.shift();
+    if (seen.has(name)) continue;
+    const state = byName.get(name);
+    if (!state) continue;
+    seen.add(name);
+    out.push(state);
+    for (const t of data.transitions) if (t.from === name && !seen.has(t.to)) queue.push(t.to);
+  }
+  for (const s of data.states) if (!seen.has(s.name)) out.push(s);
+  return out;
+}
+async function computeTraitLayout(data, metrics) {
+  const transitionCounts = {};
+  for (const s of data.states) transitionCounts[s.name] = 0;
+  for (const t of data.transitions) {
+    transitionCounts[t.from] = (transitionCounts[t.from] ?? 0) + 1;
+    transitionCounts[t.to] = (transitionCounts[t.to] ?? 0) + 1;
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  const LABEL_BASE_W = 100;
+  const LABEL_H = 44;
+  const states = metrics ? flowOrder(data) : data.states;
+  const elkGraph = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": metrics?.direction === "rtl" ? "LEFT" : "RIGHT",
+      "elk.spacing.nodeNode": String(metrics?.nodeSpacing ?? 80),
+      "elk.spacing.edgeNode": "30",
+      "elk.spacing.edgeEdge": "24",
+      "elk.spacing.edgeLabel": "10",
+      "elk.spacing.labelLabel": "8",
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(metrics?.layerSpacing ?? 100),
+      ...metrics?.orthogonal ? { "elk.edgeRouting": "ORTHOGONAL" } : {},
+      ...metrics ? { "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES", "elk.layered.cycleBreaking.strategy": "MODEL_ORDER" } : {},
+      "elk.edgeLabels.placement": "CENTER",
+      "elk.layered.mergeEdges": "false",
+      "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX"
+    },
+    children: states.map((s) => {
+      const tc = transitionCounts[s.name] ?? 0;
+      const size = metrics ? metrics.nodeSize(s.name) : { width: stateWidth(tc), height: STATE_H };
+      return {
+        id: s.name,
+        width: size.width,
+        height: size.height,
+        labels: [{ text: s.name, width: size.width - 10, height: 14 }],
+        ...metrics && s.isInitial ? { layoutOptions: { "elk.layered.layering.layerConstraint": "FIRST" } } : {}
+      };
+    }),
+    edges: data.transitions.map((t, i) => {
+      const textW = Math.max(t.event.length * 8, 60);
+      const iconsW = Math.min(t.effects.length, 6) * 28 + 20;
+      const label = metrics ? metrics.labelSize(t) : { width: Math.max(textW, iconsW, LABEL_BASE_W), height: LABEL_H };
+      return {
+        id: `e${i}`,
+        sources: [t.from],
+        targets: [t.to],
+        labels: [{
+          text: t.event,
+          width: label.width,
+          height: label.height,
+          ...metrics ? { layoutOptions: { "elk.edgeLabels.inline": "true" } } : {}
+        }]
+      };
+    })
+  };
+  const layout = await (await loadElk()).layout(elkGraph);
+  const layoutChildren = layout.children ?? [];
+  const layoutEdges = layout.edges ?? [];
+  const nodeXMap = {};
+  for (const n of layoutChildren) {
+    nodeXMap[n.id] = n.x ?? 0;
+  }
+  const nodes = layoutChildren.map((n) => {
+    const name = n.id;
+    const stateInfo = data.states.find((s) => s.name === name);
+    const tc = transitionCounts[name] ?? 0;
+    return {
+      id: name,
+      x: n.x ?? 0,
+      y: n.y ?? 0,
+      width: n.width ?? 110,
+      height: n.height ?? STATE_H,
+      isInitial: stateInfo?.isInitial ?? void 0,
+      isTerminal: stateInfo?.isTerminal ?? void 0,
+      role: getStateRole(stateInfo?.isInitial ?? void 0, stateInfo?.isTerminal ?? void 0, tc, maxTC),
+      transitionCount: tc
+    };
+  });
+  const edges = layoutEdges.map((e, i) => {
+    const t = data.transitions[i];
+    const labels = e.labels ?? [];
+    const label = labels[0];
+    const sections = e.sections ?? [];
+    const points = [];
+    for (const section of sections) {
+      const bendPoints = section.bendPoints ?? [];
+      points.push({ x: section.startPoint.x, y: section.startPoint.y });
+      for (const bp of bendPoints) points.push({ x: bp.x, y: bp.y });
+      points.push({ x: section.endPoint.x, y: section.endPoint.y });
+    }
+    const isSelf = t.from === t.to;
+    const toX = nodeXMap[t.to] ?? 0;
+    const fromX = nodeXMap[t.from] ?? 0;
+    const isBackward = !isSelf && (metrics?.direction === "rtl" ? toX >= fromX : toX <= fromX);
+    const lw = label?.width ?? LABEL_BASE_W;
+    const lh = label?.height ?? LABEL_H;
+    return {
+      id: e.id,
+      from: t.from,
+      to: t.to,
+      event: t.event,
+      effects: t.effects,
+      guard: !!t.guard,
+      guardExpr: typeof t.guard === "string" ? t.guard : void 0,
+      index: t.index,
+      labelX: label?.x ?? 0,
+      labelY: label?.y ?? 0,
+      labelW: lw,
+      labelH: lh,
+      points,
+      isSelf,
+      isBackward
+    };
+  });
+  return {
+    nodes,
+    edges,
+    width: layout.width ?? 600,
+    height: layout.height ?? 400
+  };
+}
+function roundedEdgePath(points, radius) {
+  if (points.length < 3) return edgePath(points);
+  let d = `M ${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const cur = points[i];
+    const next = points[i + 1];
+    const inLen = Math.hypot(cur.x - prev.x, cur.y - prev.y);
+    const outLen = Math.hypot(next.x - cur.x, next.y - cur.y);
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    if (r <= 0) {
+      d += ` L ${cur.x},${cur.y}`;
+      continue;
+    }
+    const ax = cur.x - (cur.x - prev.x) / inLen * r;
+    const ay = cur.y - (cur.y - prev.y) / inLen * r;
+    const bx = cur.x + (next.x - cur.x) / outLen * r;
+    const by = cur.y + (next.y - cur.y) / outLen * r;
+    d += ` L ${ax},${ay} Q ${cur.x},${cur.y} ${bx},${by}`;
+  }
+  const last = points[points.length - 1];
+  return `${d} L ${last.x},${last.y}`;
+}
+function edgePath(points) {
+  if (points.length === 0) return "";
+  let d = `M ${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length; i++) d += ` L ${points[i].x},${points[i].y}`;
+  return d;
+}
+
+export { computeTraitLayout, edgePath, roundedEdgePath, useContainerWidth };

package/dist/chunk-GKIFONTE.js

@@ -0,0 +1,131 @@
+import { FileTree } from './chunk-YDNJLLG6.js';
+import { parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, traitTransitionRenderUi } from './chunk-VFF5OO47.js';
+import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function isSExprObject(value) {
+  return value !== null && value !== void 0 && typeof value === "object" && !Array.isArray(value);
+}
+function normalizeChildren(children) {
+  if (children === void 0 || children === null) return [];
+  return Array.isArray(children) ? children : [children];
+}
+function distinguishingSuffix(config) {
+  if (typeof config.label === "string" && config.label.length > 0) return config.label;
+  if (typeof config.text === "string" && config.text.length > 0) return config.text;
+  if (typeof config.content === "string" && config.content.length > 0) return config.content;
+  return void 0;
+}
+function patternRowLabel(value) {
+  if (isSExprObject(value)) {
+    const type = typeof value.type === "string" ? value.type : "unknown";
+    const suffix = distinguishingSuffix(value);
+    return suffix ? `${type} \u2014 ${suffix}` : type;
+  }
+  return value === void 0 || value === null ? "unknown" : String(value);
+}
+function pushPatternRows(items, slotId, slotIndex, parentRowId, patternPath, config) {
+  const id = `${slotId}/pattern:${slotIndex}:${patternPath}`;
+  items.push({ id, label: patternRowLabel(config), parentId: parentRowId, icon: "component" });
+  if (!isSExprObject(config)) return;
+  normalizeChildren(config.children).forEach((child, index) => {
+    if (!isSExprObject(child)) return;
+    pushPatternRows(items, slotId, slotIndex, id, `${patternPath}.children.${index}`, child);
+  });
+}
+function schemaToLayerItems(schema) {
+  const items = [];
+  const seenSlotIds = /* @__PURE__ */ new Set();
+  for (const appOrbital of parseApplicationLevel(schema).orbitals) {
+    const orbitalId = `orbital:${appOrbital.name}`;
+    items.push({ id: orbitalId, label: appOrbital.name, icon: "box" });
+    const orbitalData = parseOrbitalLevel(schema, appOrbital.name);
+    if (!orbitalData) continue;
+    for (const page of orbitalData.pages) {
+      items.push({
+        id: `${orbitalId}/page:${page.name}`,
+        label: page.name,
+        parentId: orbitalId,
+        icon: "file-text"
+      });
+    }
+    for (const traitInfo of orbitalData.traits) {
+      const traitId = `${orbitalId}/trait:${traitInfo.name}`;
+      items.push({ id: traitId, label: traitInfo.name, parentId: orbitalId, icon: "git-branch" });
+      const traitData = parseTraitLevel(schema, appOrbital.name, traitInfo.name);
+      if (!traitData) continue;
+      const renderUi = traitTransitionRenderUi(schema, appOrbital.name, traitInfo.name);
+      traitData.transitions.forEach((transition, transitionIndex) => {
+        const transitionId = `${traitId}/transition:${transitionIndex}`;
+        items.push({
+          id: transitionId,
+          label: transition.event || `${transition.from} \u2192 ${transition.to}`,
+          parentId: traitId,
+          icon: "zap"
+        });
+        (renderUi[transitionIndex] ?? []).forEach((entry, slotIndex) => {
+          const slotName = entry.slot;
+          const slotId = `${transitionId}/slot:${slotName}`;
+          if (!seenSlotIds.has(slotId)) {
+            seenSlotIds.add(slotId);
+            items.push({ id: slotId, label: slotName, parentId: transitionId, icon: "layout-panel-top" });
+          }
+          pushPatternRows(items, slotId, slotIndex, slotId, "root", entry.pattern);
+        });
+      });
+    }
+  }
+  return items;
+}
+function parseLayerId(id) {
+  const [head, ...rest] = id.split("/");
+  const orbitalMatch = /^orbital:(.+)$/.exec(head ?? "");
+  if (!orbitalMatch) return null;
+  const parts = { orbitalName: orbitalMatch[1] };
+  for (const segment of rest) {
+    const pageMatch = /^page:(.+)$/.exec(segment);
+    if (pageMatch) {
+      parts.pageName = pageMatch[1];
+      continue;
+    }
+    const traitMatch = /^trait:(.+)$/.exec(segment);
+    if (traitMatch) {
+      parts.traitName = traitMatch[1];
+      continue;
+    }
+    const transitionMatch = /^transition:(\d+)$/.exec(segment);
+    if (transitionMatch) {
+      parts.transitionIndex = Number(transitionMatch[1]);
+      continue;
+    }
+    const slotMatch = /^slot:(.+)$/.exec(segment);
+    if (slotMatch) {
+      parts.slotName = slotMatch[1];
+      continue;
+    }
+    const patternMatch = /^pattern:(\d+):(.+)$/.exec(segment);
+    if (patternMatch) {
+      parts.patternSlotIndex = Number(patternMatch[1]);
+      parts.patternPath = patternMatch[2];
+      continue;
+    }
+    return null;
+  }
+  return parts;
+}
+var LayersPanel = ({ schema, selectedId, onSelect, onReorder }) => {
+  const items = useMemo(() => schemaToLayerItems(schema), [schema]);
+  return /* @__PURE__ */ jsx(
+    FileTree,
+    {
+      items,
+      look: "nav",
+      selectedId,
+      onNodeSelect: onSelect,
+      onNodeReorder: onReorder
+    }
+  );
+};
+LayersPanel.displayName = "LayersPanel";
+
+export { LayersPanel, parseLayerId, schemaToLayerItems };