@conductor-by-89soone/react 0.3.1 → 0.4.1

package/dist/relation.js

@@ -0,0 +1,215 @@
+"use client";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useState } from "react";
+import { Button } from "./action.js";
+import { Table } from "./data.js";
+import { cx } from "./cx.js";
+function layoutRelationNodes(nodes) {
+  const ordered = [...nodes].sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+  const columns = Math.max(1, Math.ceil(Math.sqrt(ordered.length)));
+  return ordered.map((node, index) => ({ ...node, x: 130 + index % columns * 280, y: 90 + Math.floor(index / columns) * 150 }));
+}
+function edgeState(edge) {
+  return [edge.retracted && "\uD574\uC81C\uB428", edge.unresolved && "\uBBF8\uD574\uACB0", edge.ambiguous && "\uBAA8\uD638\uD568"].filter(Boolean).join(" \xB7 ") || "\uD655\uC778\uB428";
+}
+const RelationGraph = forwardRef(function RelationGraph2({
+  nodes,
+  edges,
+  label,
+  selection: controlledSelection,
+  onSelectionChange,
+  viewport: controlledViewport,
+  onViewportChange,
+  state = "ready",
+  stateMessage,
+  onRetry,
+  className,
+  ...props
+}, ref) {
+  const uid = useId().replace(/:/g, "");
+  const [localSelection, setSelection] = useState(null);
+  const [localViewport, setViewport] = useState({ x: 0, y: 0, zoom: 1 });
+  const [query, setQuery] = useState("");
+  const [type, setType] = useState("");
+  const selection = controlledSelection === void 0 ? localSelection : controlledSelection;
+  const viewport = controlledViewport ?? localViewport;
+  const positioned = useMemo(() => layoutRelationNodes(nodes), [nodes]);
+  const byId = useMemo(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
+  const types = useMemo(() => [...new Set(edges.map((edge) => edge.type))].sort(), [edges]);
+  const visibleEdges = useMemo(() => [...edges].sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0).filter((edge) => !type || edge.type === type), [edges, type]);
+  const found = positioned.filter((node) => `${node.label} ${node.id}`.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+  const neighbors = useMemo(() => {
+    const result = /* @__PURE__ */ new Set();
+    if (selection?.kind === "node") {
+      result.add(selection.id);
+      for (const edge of visibleEdges) if (edge.source === selection.id || edge.target === selection.id) {
+        result.add(edge.source);
+        result.add(edge.target);
+      }
+    }
+    return result;
+  }, [selection, visibleEdges]);
+  const width = Math.max(560, ...positioned.map((node) => node.x + 150));
+  const height = Math.max(300, ...positioned.map((node) => node.y + 90));
+  const zoom = Math.min(8, Math.max(0.5, Number.isFinite(viewport.zoom) ? viewport.zoom : 1));
+  const changeSelection = (next) => {
+    if (controlledSelection === void 0) setSelection(next);
+    onSelectionChange?.(next);
+  };
+  const changeViewport = (next) => {
+    if (!controlledViewport) setViewport(next);
+    onViewportChange?.(next);
+  };
+  const pan = (x, y) => changeViewport({ x: viewport.x + x * width / zoom / 4, y: viewport.y + y * height / zoom / 4, zoom });
+  const selectedNode = selection?.kind === "node" ? byId.get(selection.id) : void 0;
+  const selectedEdge = selection?.kind === "edge" ? edges.find((edge) => edge.id === selection.id) : void 0;
+  const endpointLabel = (id) => byId.get(id)?.label ?? "\uB300\uC0C1 \uC815\uBCF4 \uC5C6\uC74C";
+  const selectedHidden = selectedEdge && !visibleEdges.some((edge) => edge.id === selectedEdge.id);
+  const blocked = state === "loading" || state === "error" || state === "empty";
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-relation", className), "aria-label": props["aria-label"] ?? label, "aria-busy": props["aria-busy"] ?? (state === "loading" || void 0), children: [
+    /* @__PURE__ */ jsxs("div", { className: "cdt-relation__toolbar", children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: `${uid}-find`, children: [
+        "\uB178\uB4DC \uCC3E\uAE30",
+        /* @__PURE__ */ jsx("input", { id: `${uid}-find`, className: "cdt-input", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "\uC774\uB984 \uB610\uB294 \uC548\uC815 ID" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { htmlFor: `${uid}-type`, children: [
+        "\uAD00\uACC4 \uC720\uD615",
+        /* @__PURE__ */ jsxs("select", { id: `${uid}-type`, className: "cdt-input", value: type, onChange: (event) => setType(event.target.value), children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "\uBAA8\uB4E0 \uC720\uD615" }),
+          types.map((value) => /* @__PURE__ */ jsx("option", { value, children: value }, value))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("a", { href: `#${uid}-list`, onClick: (event) => {
+        event.preventDefault();
+        const list = event.currentTarget.ownerDocument.getElementById(`${uid}-list`);
+        list?.focus({ preventScroll: true });
+        list?.scrollIntoView({ block: "start" });
+      }, children: "\uB3D9\uC77C \uC815\uBCF4 \uBAA9\uB85D\uC73C\uB85C \uC774\uB3D9" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "cdt-relation__legend", children: "\uD654\uC0B4\uD45C: \uCD9C\uBC1C \u2192 \uAD00\uACC4 \u2192 \uB3C4\uCC29. \uC2E4\uC120: \uD655\uC778\uB428 \xB7 \uC810\uC120: \uBBF8\uD574\uACB0/\uBAA8\uD638\uD568 \xB7 \uD30C\uC120: \uD574\uC81C\uB428. \uC704\uCE58\uB294 ID \uC21C\uC11C\uC774\uBA70 \uC2DC\uAC04\xB7\uBCD1\uD569\xB7\uC758\uC874 \uC21C\uC11C\uB97C \uB73B\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." }),
+    /* @__PURE__ */ jsx("p", { role: state === "error" ? "alert" : "status", children: stateMessage ?? { ready: `${nodes.length}\uAC1C \uB178\uB4DC \xB7 ${visibleEdges.length}\uAC1C \uAD00\uACC4`, loading: "\uAD00\uACC4 \uBD88\uB7EC\uC624\uB294 \uC911", empty: "\uD655\uC778\uB41C \uAD00\uACC4 \uC5C6\uC74C", error: "\uAD00\uACC4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4", partial: "\uBD80\uBD84 \uACB0\uACFC: \uD45C\uC2DC\uB418\uC9C0 \uC54A\uC740 \uAD00\uACC4\uAC00 \uC788\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4" }[state] }),
+    state === "error" && onRetry && /* @__PURE__ */ jsx(Button, { type: "button", onClick: onRetry, children: "\uAD00\uACC4 \uB2E4\uC2DC \uC2DC\uB3C4" }),
+    !blocked && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "cdt-relation__toolbar", "aria-label": "\uADF8\uB798\uD504 \uBCF4\uAE30 \uC870\uC808", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", disabled: zoom >= 8, onClick: () => changeViewport({ ...viewport, zoom: Math.min(8, zoom * 1.5) }), children: "\uD655\uB300" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", disabled: zoom <= 0.5, onClick: () => changeViewport({ ...viewport, zoom: Math.max(0.5, zoom / 1.5) }), children: "\uCD95\uC18C" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => changeViewport({ x: 0, y: 0, zoom: 1 }), children: "\uC804\uCCB4 \uBCF4\uAE30" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", "aria-label": "\uADF8\uB798\uD504 \uC67C\uCABD\uC73C\uB85C \uC774\uB3D9", onClick: () => pan(-1, 0), children: "\u2190" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", "aria-label": "\uADF8\uB798\uD504 \uC624\uB978\uCABD\uC73C\uB85C \uC774\uB3D9", onClick: () => pan(1, 0), children: "\u2192" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", "aria-label": "\uADF8\uB798\uD504 \uC704\uB85C \uC774\uB3D9", onClick: () => pan(0, -1), children: "\u2191" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", "aria-label": "\uADF8\uB798\uD504 \uC544\uB798\uB85C \uC774\uB3D9", onClick: () => pan(0, 1), children: "\u2193" }),
+        /* @__PURE__ */ jsxs("output", { "aria-label": "\uD655\uB300 \uBC30\uC728", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("svg", { className: "cdt-relation__canvas", "aria-hidden": "true", focusable: "false", viewBox: `${viewport.x} ${viewport.y} ${width / zoom} ${height / zoom}`, children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "cdt-relation__arrow" }) }) }),
+        visibleEdges.map((edge, index) => {
+          const source = byId.get(edge.source);
+          const target = byId.get(edge.target);
+          if (!source || !target) return null;
+          const dx = target.x - source.x;
+          const dy = target.y - source.y;
+          const distance = Math.hypot(dx, dy) || 1;
+          const offset = dy === 0 ? -Math.sign(dx) * (100 + index % 3 * 20) : 28 + index % 3 * 12;
+          const inset = Math.min(Math.abs(dx) > 0 ? 118 / Math.abs(dx) : Infinity, Math.abs(dy) > 0 ? 34 / Math.abs(dy) : Infinity);
+          const path = source.id === target.id ? `M ${source.x} ${source.y - 26} C ${source.x - 90} ${source.y - 105}, ${source.x + 90} ${source.y - 105}, ${source.x + 30} ${source.y - 26}` : `M ${source.x} ${source.y} Q ${(source.x + target.x) / 2 - dy / distance * offset} ${(source.y + target.y) / 2 + dx / distance * offset} ${target.x - dx * inset} ${target.y - dy * inset}`;
+          return /* @__PURE__ */ jsxs("g", { "data-edge-id": edge.id, "data-selected": selectedEdge?.id === edge.id || void 0, "data-dimmed": neighbors.size > 0 && !(neighbors.has(edge.source) && neighbors.has(edge.target)) || void 0, className: "cdt-relation__edge", onClick: () => changeSelection({ kind: "edge", id: edge.id }), children: [
+            /* @__PURE__ */ jsx("path", { d: path, className: "cdt-relation__edge-hit" }),
+            /* @__PURE__ */ jsx("path", { d: path, markerEnd: `url(#${uid}-arrow)`, "data-state": edge.retracted ? "retracted" : edge.unresolved || edge.ambiguous ? "uncertain" : "confirmed" }),
+            (nodes.length <= 50 || selectedEdge?.id === edge.id) && /* @__PURE__ */ jsx("text", { x: (source.x + target.x) / 2 - dy / distance * offset / 2, y: (source.y + target.y) / 2 + dx / distance * offset / 2 - 8, textAnchor: "middle", className: "cdt-relation__edge-label", children: edge.label }),
+            /* @__PURE__ */ jsx("title", { children: `${endpointLabel(edge.source)} \u2192 ${edge.label} \u2192 ${endpointLabel(edge.target)} \xB7 ${edgeState(edge)}` })
+          ] }, edge.id);
+        }),
+        positioned.map((node) => /* @__PURE__ */ jsxs("g", { "data-node-id": node.id, className: "cdt-relation__node", "data-selected": selectedNode?.id === node.id || void 0, "data-dimmed": neighbors.size > 0 && !neighbors.has(node.id) || void 0, onClick: () => changeSelection({ kind: "node", id: node.id }), children: [
+          /* @__PURE__ */ jsx("rect", { x: node.x - 110, y: node.y - 26, width: 220, height: 52, rx: 8 }),
+          /* @__PURE__ */ jsx("text", { x: node.x, y: node.y + 5, textAnchor: "middle", children: node.label.length > 24 ? `${node.label.slice(0, 23)}\u2026` : node.label }),
+          /* @__PURE__ */ jsx("title", { children: node.label })
+        ] }, node.id))
+      ] }),
+      /* @__PURE__ */ jsxs("section", { "aria-label": "\uC120\uD0DD\uD55C \uAD00\uACC4 \uC0C1\uC138", className: "cdt-relation__detail", "aria-live": "polite", children: [
+        selectedNode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("strong", { children: selectedNode.label }),
+          /* @__PURE__ */ jsx("p", { children: selectedNode.description ?? "\uCD94\uAC00 \uC124\uBA85 \uC5C6\uC74C" }),
+          /* @__PURE__ */ jsx("p", { children: selectedNode.unavailable ? "\uB300\uC0C1 \uB0B4\uC6A9\uC744 \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." : "\uC5F0\uACB0\uB41C \uC774\uC6C3\uC774 \uAC15\uC870\uB418\uC5C8\uC2B5\uB2C8\uB2E4." })
+        ] }) : selectedEdge ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            endpointLabel(selectedEdge.source),
+            " \u2192 ",
+            selectedEdge.label,
+            " \u2192 ",
+            endpointLabel(selectedEdge.target)
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "\uC720\uD615: ",
+            selectedEdge.type,
+            " \xB7 \uC0C1\uD0DC: ",
+            edgeState(selectedEdge),
+            " \xB7 \uC2E0\uB8B0\uB3C4: ",
+            selectedEdge.confidence ?? "\uC54C \uC218 \uC5C6\uC74C"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "\uADFC\uAC70: ",
+            selectedEdge.evidence || "\uC81C\uACF5\uB418\uC9C0 \uC54A\uC74C"
+          ] }),
+          selectedHidden && /* @__PURE__ */ jsx("p", { children: "\uC120\uD0DD\uD55C \uAD00\uACC4\uB294 \uD604\uC7AC \uC720\uD615 \uD544\uD130\uC5D0\uC11C \uC228\uACA8\uC838 \uC788\uC2B5\uB2C8\uB2E4." })
+        ] }) : /* @__PURE__ */ jsx("p", { children: selection ? "\uC120\uD0DD\uD55C \uD56D\uBAA9\uC774 \uD604\uC7AC \uB370\uC774\uD130\uC5D0 \uC5C6\uC2B5\uB2C8\uB2E4." : "\uB178\uB4DC \uB610\uB294 \uAD00\uACC4\uB97C \uC120\uD0DD\uD558\uBA74 \uBC29\uD5A5, \uC0C1\uD0DC, \uADFC\uAC70\uB97C \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }),
+        selection && /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => changeSelection(null), children: "\uC120\uD0DD \uD574\uC81C" })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { id: `${uid}-list`, tabIndex: -1, "aria-label": "\uAD00\uACC4 \uB300\uCCB4 \uBAA9\uB85D", children: [
+        /* @__PURE__ */ jsxs("details", { open: query.length > 0 || nodes.length <= 12, children: [
+          /* @__PURE__ */ jsxs("summary", { children: [
+            "\uB178\uB4DC \uBAA9\uB85D \xB7 ",
+            found.length,
+            "\uAC1C (\uACE0\uB9BD\uB41C \uB178\uB4DC \uD3EC\uD568)"
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "cdt-relation__nodes", children: found.map((node) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", "aria-pressed": selectedNode?.id === node.id, onClick: () => {
+              changeSelection({ kind: "node", id: node.id });
+              if (query) changeViewport({ x: node.x - width / zoom / 2, y: node.y - height / zoom / 2, zoom });
+            }, children: node.label }),
+            node.unavailable && /* @__PURE__ */ jsx("span", { children: " \xB7 \uB0B4\uC6A9 \uD45C\uC2DC \uBD88\uAC00" })
+          ] }, node.id)) }),
+          found.length === 0 && /* @__PURE__ */ jsx("p", { children: "\uC77C\uCE58\uD558\uB294 \uB178\uB4DC \uC5C6\uC74C" })
+        ] }),
+        /* @__PURE__ */ jsxs(Table, { caption: `${label} \u2014 \uBC29\uD5A5\uACFC \uADFC\uAC70 \uBAA9\uB85D`, children: [
+          /* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+            /* @__PURE__ */ jsx(Table.HeaderCell, { children: "\uCD9C\uBC1C \u2192 \uAD00\uACC4 \u2192 \uB3C4\uCC29" }),
+            /* @__PURE__ */ jsx(Table.HeaderCell, { children: "\uC720\uD615 \xB7 \uC0C1\uD0DC" }),
+            /* @__PURE__ */ jsx(Table.HeaderCell, { children: "\uC2E0\uB8B0\uB3C4 \xB7 \uADFC\uAC70" }),
+            /* @__PURE__ */ jsx(Table.HeaderCell, { children: "\uC120\uD0DD" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Body, { children: visibleEdges.map((edge) => /* @__PURE__ */ jsxs(Table.Row, { "data-selected": selectedEdge?.id === edge.id || void 0, children: [
+            /* @__PURE__ */ jsxs(Table.Cell, { children: [
+              endpointLabel(edge.source),
+              " \u2192 ",
+              edge.label,
+              " \u2192 ",
+              endpointLabel(edge.target)
+            ] }),
+            /* @__PURE__ */ jsxs(Table.Cell, { children: [
+              edge.type,
+              " \xB7 ",
+              edgeState(edge),
+              (!byId.has(edge.source) || !byId.has(edge.target)) && " \xB7 \uB05D\uC810 \uC815\uBCF4 \uC5C6\uC74C"
+            ] }),
+            /* @__PURE__ */ jsxs(Table.Cell, { children: [
+              edge.confidence ?? "\uC54C \uC218 \uC5C6\uC74C",
+              " \xB7 ",
+              edge.evidence || "\uADFC\uAC70 \uC81C\uACF5\uB418\uC9C0 \uC54A\uC74C"
+            ] }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Button, { type: "button", "aria-pressed": selectedEdge?.id === edge.id, "aria-label": `\uAD00\uACC4 \uC120\uD0DD: ${edge.id}`, onClick: () => changeSelection({ kind: "edge", id: edge.id }), children: "\uADFC\uAC70 \uBCF4\uAE30" }) })
+          ] }, edge.id)) })
+        ] }),
+        visibleEdges.length === 0 && /* @__PURE__ */ jsx("p", { children: "\uD604\uC7AC \uD544\uD130\uC5D0\uC11C \uD45C\uC2DC\uD560 \uAD00\uACC4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+      ] })
+    ] })
+  ] });
+});
+RelationGraph.displayName = "RelationGraph";
+export {
+  RelationGraph,
+  layoutRelationNodes
+};

package/dist/shell.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
 
 interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     readonly nav: ReactNode;
@@ -10,9 +11,14 @@ interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     /** Accessible name of the mobile navigation scrim, which closes the drawer. */
     readonly navCloseLabel?: string;
     readonly mainId?: string;
+    /** Changing this consumer-owned route identity closes navigation and focuses main. */
+    readonly routeKey?: string;
+    readonly navLabel?: string;
     readonly children: ReactNode;
 }
 declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
+/** Place inside AppShell, normally in TopBar.menuButton. Use asChild for IconButton. */
+declare const AppShellNavTrigger: react.ForwardRefExoticComponent<Omit<RadixDialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 interface NavItem {
     readonly id: string;
     readonly label: string;
@@ -40,4 +46,4 @@ interface TopBarProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "ti
 }
 declare const TopBar: react.ForwardRefExoticComponent<TopBarProps & react.RefAttributes<HTMLElement>>;
 
-export { AppShell, type AppShellProps, type NavItem, type NavLinkRenderProps, NavList, type NavListProps, TopBar, type TopBarProps };
+export { AppShell, AppShellNavTrigger, type AppShellProps, type NavItem, type NavLinkRenderProps, NavList, type NavListProps, TopBar, type TopBarProps };

package/dist/shell.js

@@ -1,2 +1,158 @@
-export { AppShell, NavList, TopBar } from './chunk-R5BLKHR2.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import {
+  Fragment as Fragment2,
+  forwardRef,
+  useRef,
+  useId,
+  useEffect,
+  useState
+} from "react";
+import { breakpoints } from "@conductor-by-89soone/tokens";
+import { cx } from "./cx.js";
+const AppShell = forwardRef(function AppShell2({
+  children,
+  className,
+  mainId: suppliedMainId,
+  routeKey,
+  navLabel = "Navigation",
+  nav,
+  navCloseLabel = "Close navigation",
+  navOpen,
+  onNavOpenChange,
+  skipLinkLabel,
+  topBar,
+  ...props
+}, ref) {
+  const mainRef = useRef(null);
+  const generatedId = useId();
+  const mainId = suppliedMainId ?? `cdt-main-${generatedId}`;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = navOpen ?? internalOpen;
+  const returnFocus = useRef(null);
+  const outsideInteraction = useRef(false);
+  const routeChanged = useRef(false);
+  const previousRoute = useRef(routeKey);
+  const changeOpen = (next) => {
+    setInternalOpen(next);
+    onNavOpenChange?.(next);
+  };
+  const changeOpenRef = useRef(changeOpen);
+  changeOpenRef.current = changeOpen;
+  useEffect(() => {
+    if (previousRoute.current === routeKey) return;
+    previousRoute.current = routeKey;
+    routeChanged.current = true;
+    changeOpenRef.current(false);
+    mainRef.current?.focus({ preventScroll: true });
+  }, [routeKey]);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia(`(max-width: ${breakpoints.md}px)`);
+    const onChange = () => {
+      if (!media.matches) {
+        routeChanged.current = true;
+        changeOpenRef.current(false);
+        mainRef.current?.focus({ preventScroll: true });
+      }
+    };
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return /* @__PURE__ */ jsxs(RadixDialog.Root, { modal: false, open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-app-shell", className), children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "cdt-skip-link",
+          href: `#${mainId}`,
+          onClick: (event) => {
+            event.preventDefault();
+            mainRef.current?.focus();
+          },
+          children: skipLinkLabel
+        }
+      ),
+      /* @__PURE__ */ jsx("aside", { className: "cdt-app-shell__nav", "aria-hidden": open || void 0, children: open ? null : nav }),
+      /* @__PURE__ */ jsxs("div", { className: "cdt-app-shell__content", children: [
+        topBar,
+        /* @__PURE__ */ jsx("main", { ref: mainRef, id: mainId, className: "cdt-app-shell__main", tabIndex: -1, children })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "cdt-app-shell__overlay", "aria-label": navCloseLabel }) }),
+      /* @__PURE__ */ jsxs(
+        RadixDialog.Content,
+        {
+          className: "cdt-app-shell__nav",
+          "data-mobile": "",
+          "aria-describedby": void 0,
+          onOpenAutoFocus: () => {
+            returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            outsideInteraction.current = false;
+            routeChanged.current = false;
+          },
+          onInteractOutside: (event) => {
+            const target = event.detail.originalEvent.target;
+            outsideInteraction.current = !(target instanceof Element && target.closest(".cdt-app-shell__overlay"));
+          },
+          onCloseAutoFocus: (event) => {
+            event.preventDefault();
+            if (routeChanged.current) mainRef.current?.focus({ preventScroll: true });
+            else if (!outsideInteraction.current && returnFocus.current?.isConnected) returnFocus.current.focus({ preventScroll: true });
+          },
+          children: [
+            /* @__PURE__ */ jsx(RadixDialog.Title, { className: "cdt-sr-only", children: navLabel }),
+            nav
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+AppShell.displayName = "AppShell";
+const AppShellNavTrigger = forwardRef(
+  function AppShellNavTrigger2({ className, asChild = false, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { ...props, asChild, ref, className: cx(!asChild && "cdt-btn cdt-btn--ghost", className) });
+  }
+);
+AppShellNavTrigger.displayName = "AppShellNavTrigger";
+const NavList = forwardRef(function NavList2({ className, items, renderLink, ...props }, ref) {
+  let previousSection;
+  return /* @__PURE__ */ jsx("nav", { ...props, ref, className: cx("cdt-nav-list", className), children: /* @__PURE__ */ jsx("ul", { className: "cdt-nav-list__items", children: items.map((item) => {
+    const showSection = item.section !== void 0 && item.section !== previousSection;
+    previousSection = item.section;
+    const linkProps = {
+      className: cx("cdt-nav-list__item", item.active && "cdt-nav-list__item--active"),
+      "aria-current": item.active ? "page" : void 0,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "cdt-nav-list__icon", "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsx("span", { children: item.label })
+      ] })
+    };
+    return /* @__PURE__ */ jsxs(Fragment2, { children: [
+      showSection ? /* @__PURE__ */ jsx("li", { className: "cdt-nav-list__section-label", children: item.section }) : null,
+      /* @__PURE__ */ jsx("li", { children: renderLink(item, linkProps) })
+    ] }, item.id);
+  }) }) });
+});
+NavList.displayName = "NavList";
+const TopBar = forwardRef(function TopBar2({ actions, className, eyebrow, menuButton, title, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("header", { ...props, ref, className: cx("cdt-topbar", className), title: typeof title === "string" ? title : void 0, children: [
+    menuButton === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-topbar__menu-button", children: menuButton }),
+    eyebrow === void 0 && title === void 0 ? null : /* @__PURE__ */ jsxs("div", { className: "cdt-topbar__context", children: [
+      eyebrow === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-topbar__eyebrow", children: eyebrow }),
+      title === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-topbar__title", children: title })
+    ] }),
+    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-topbar__actions", children: actions })
+  ] });
+});
+TopBar.displayName = "TopBar";
+export {
+  AppShell,
+  AppShellNavTrigger,
+  NavList,
+  TopBar
+};

package/dist/status.js

@@ -1,2 +1,35 @@
-export { Badge, SeverityTag, StatusBadge } from './chunk-535YGQAR.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SEVERITY_ICONS, STATUS_ICONS } from "@conductor-by-89soone/tokens";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+const Badge = forwardRef(function Badge2({ children, className, icon, tone = "neutral", ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", `cdt-badge--${tone}`, className), children: [
+    icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", children: icon }),
+    children
+  ] });
+});
+Badge.displayName = "Badge";
+const markerStatuses = ["queued", "neutralEnd"];
+const StatusBadge = forwardRef(function StatusBadge2({ className, icon, label, status, ...props }, ref) {
+  const isMarker = markerStatuses.includes(status);
+  const statusClass = status === "neutralEnd" ? "neutral-end" : status;
+  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-status-badge", `cdt-status-badge--${statusClass}`, className), children: [
+    isMarker ? /* @__PURE__ */ jsx("span", { className: cx("cdt-status-badge__marker", status === "neutralEnd" && "cdt-status-badge__marker--neutral-end"), "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": STATUS_ICONS[status], children: icon }),
+    label
+  ] });
+});
+StatusBadge.displayName = "StatusBadge";
+const SeverityTag = forwardRef(function SeverityTag2({ className, icon, label, severity, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-severity-tag", `cdt-severity-tag--${severity}`, className), children: [
+    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": SEVERITY_ICONS[severity], children: icon }),
+    label
+  ] });
+});
+SeverityTag.displayName = "SeverityTag";
+export {
+  Badge,
+  SeverityTag,
+  StatusBadge
+};

package/dist/stylesheet-warning.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Warn once when a consumer renders a Conductor class without loading the CSS
+ * package. The deferred check gives bundlers time to apply extracted styles and
+ * never runs during SSR.
+ */
+declare function scheduleStylesheetWarning(): void;
+
+export { scheduleStylesheetWarning };

package/dist/{chunk-WEIMKRZV.js → stylesheet-warning.js}

@@ -1,6 +1,5 @@
-// src/stylesheet-warning.ts
-var STYLE_MARKER = "--cdt-font-sans";
-var warningScheduled = false;
+const STYLE_MARKER = "--cdt-font-sans";
+let warningScheduled = false;
 function scheduleStylesheetWarning() {
   if (process.env.NODE_ENV !== "development" || typeof window === "undefined" || warningScheduled) return;
   warningScheduled = true;
@@ -11,13 +10,6 @@ function scheduleStylesheetWarning() {
     }
   }, 0);
 }
-
-// src/cx.ts
-function cx(...classNames) {
-  if (classNames.some((className) => typeof className === "string" && /(?:^|\s)cdt-/.test(className))) {
-    scheduleStylesheetWarning();
-  }
-  return classNames.filter((className) => typeof className === "string" && className !== "").join(" ");
-}
-
-export { cx };
+export {
+  scheduleStylesheetWarning
+};

package/dist/surface.js

@@ -1,2 +1,45 @@
-export { Card, CardGrid, Panel } from './chunk-TUHWL5JC.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { cx } from "./cx.js";
+const nestedInteractive = "a,button,input,select,textarea,[role=button]";
+const Card = forwardRef(function Card2({ as, children, className, href, onClick, size = "md", ...props }, forwardedRef) {
+  const rootRef = useRef(null);
+  const interactive = as === "a" || as === "button" || href !== void 0 || onClick !== void 0;
+  const element = as ?? (href === void 0 ? onClick === void 0 ? "div" : "button" : "a");
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && interactive && rootRef.current?.querySelector(nestedInteractive) !== null) {
+      console.warn("[conductor] Interactive Card must not contain nested interactive elements.");
+    }
+  }, [interactive]);
+  const setRef = (node) => {
+    rootRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef !== null) forwardedRef.current = node;
+  };
+  const classes = cx("cdt-card", interactive && "cdt-card--interactive", size === "sm" && "cdt-card--sm", className);
+  if (element === "a") {
+    return /* @__PURE__ */ jsx("a", { ...props, ref: setRef, href, className: classes, children });
+  }
+  if (element === "button") {
+    return /* @__PURE__ */ jsx("button", { ...props, ref: setRef, type: "button", onClick, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { ...props, ref: setRef, className: classes, children });
+});
+Card.displayName = "Card";
+const CardGrid = forwardRef(function CardGrid2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, className: cx("cdt-card-grid", className) });
+});
+CardGrid.displayName = "CardGrid";
+const Panel = forwardRef(function Panel2({ as = "div", className, size = "md", ...props }, ref) {
+  const classes = cx("cdt-panel", size === "sm" && "cdt-panel--sm", className);
+  if (as === "section") return /* @__PURE__ */ jsx("section", { ...props, ref, className: classes });
+  if (as === "aside") return /* @__PURE__ */ jsx("aside", { ...props, ref, className: classes });
+  return /* @__PURE__ */ jsx("div", { ...props, ref, className: classes });
+});
+Panel.displayName = "Panel";
+export {
+  Card,
+  CardGrid,
+  Panel
+};

package/dist/types.js

@@ -1 +0,0 @@
-