@conductor-by-89soone/react 0.3.0 → 0.4.0

package/README.md

@@ -36,3 +36,234 @@ Node.js 20 or newer, React 18 or 19, React DOM 18 or 19, and `lucide-react` 0.40
 ## License
 
 MIT
+
+## Workbench APIs (CR-041, review extension)
+
+The additions below are a local review extension; installing a previously published
+0.3.1 package does not provide them. Build and install the matching tokens, CSS,
+and React tarballs together when evaluating this change. No component fetches,
+authenticates, parses a search language, infers relationships, or retries work
+without a consumer callback.
+
+Load `@conductor-by-89soone/css` once in the application root. Set
+`data-cdt-theme="dark"` or `data-cdt-theme="light"` on `html`; both palettes use the
+same semantic keys. There is no new provider or remote font requirement. For a
+locally themed island, pass that island's element as `Popover.Content container`
+so portalled content inherits its theme. A body portal inherits the document
+theme, not the trigger's nested theme.
+
+In Next App Router, import CSS from the root layout and put state/callback code in
+a small `"use client"` component. The package preserves client directives on
+component modules and keeps its re-export barrel unmarked. A Server Component
+can render a client component with serializable data; callback functions must be
+created inside a client boundary. SSR output alone does not demonstrate hydration
+or RSC compatibility; see the local verification record for executed consumers.
+
+### Disclosure and overlay
+
+```tsx
+"use client";
+import { Tabs, Popover, Collapsible, Button } from "@conductor-by-89soone/react";
+
+export function Filters() {
+  return <Tabs.Root defaultValue="results" activationMode="manual">
+    <Tabs.List aria-label="Investigation view">
+      <Tabs.Trigger value="results">Results</Tabs.Trigger>
+      <Tabs.Trigger value="history">History</Tabs.Trigger>
+      <Tabs.Trigger value="restricted" disabled>Unavailable</Tabs.Trigger>
+    </Tabs.List>
+    <Tabs.Content value="results" forceMount>
+      <Popover.Root>
+        <Popover.Trigger asChild><Button>More filters</Button></Popover.Trigger>
+        <Popover.Content aria-label="Additional filters">
+          <Collapsible.Root>
+            <Collapsible.Trigger>Advanced conditions</Collapsible.Trigger>
+            <Collapsible.Content>Consumer-owned filter fields</Collapsible.Content>
+          </Collapsible.Root>
+          <Popover.Close asChild><Button>Close</Button></Popover.Close>
+        </Popover.Content>
+      </Popover.Root>
+    </Tabs.Content>
+    <Tabs.Content value="history">History supplied by the consumer</Tabs.Content>
+  </Tabs.Root>;
+}
+```
+
+- `Tabs.Root` accepts Radix `value/onValueChange`, `defaultValue`, `orientation`
+  and `activationMode`. Conductor defaults to **manual**: arrows/Home/End move
+  focus, Enter/Space activate. `automatic` is opt-in for inexpensive content.
+  Disabled triggers are skipped. Provide an initial value. Inactive contents
+  unmount by default; `forceMount` preserves child state but keeps inactive
+  panels hidden. Maintaining a panel can keep its consumer effects running.
+- `Popover` provides `Root/Trigger/Anchor/Content/Close/Arrow`, with Radix open
+  state, Escape/outside dismissal, and focus restoration. Give its content an
+  accessible name; use `asChild` to avoid nesting buttons.
+- `Collapsible` provides `Root/Trigger/Content`, Radix controlled or uncontrolled
+  expansion and disabled props. Enter/Space toggle its trigger. The component
+  does not request data on expansion: keep first-load, cached reopen, and explicit
+  retry policy in the consumer. It is a disclosure, not a complete Accordion API.
+
+### Search, filtering, and results
+
+| API | Data and interaction contract | Consumer responsibility / incorrect use |
+| --- | --- | --- |
+| `Combobox` | Required `label`, `options: {id,label,disabled?}[]`, `value`, `query`, `onValueChange`, `onQueryChange`. `state` is ready/loading/error; `resultsQuery` hides stale option batches. Downshift owns single-selection keyboard behavior. IME composition does not commit Enter. `inputRef` targets input; forwarded ref targets wrapper. | Associate responses with their original query, supply error/retry UI as needed, and keep selected value separate from typed text. Do not label the single-selection popup as multi-select or publish stale results with the current query key. |
+| `MultiSelect` | `label/options/value/onValueChange`, optional disabled; a fieldset/legend with existing Radix Checkbox controls, local option search, and removable selected chips. Tab reaches controls; Space toggles a checkbox. | Supply stable unique IDs and your approved options. Fetch/loading/error state is external. Do not treat this checkbox group as a single Combobox or infer authorization from disabled controls. |
+| `FilterChip` | Text children plus required `removeLabel/onRemove`; optional disabled. Removal is a separate named button. | Use a specific label such as “Remove repository filter”; removing a chip does not parse or rewrite a query automatically. |
+| `FilterToolbar` | A styled div forwarding HTML attributes/ref. It groups normal tabbable controls. | Give a group name if needed; this is not an ARIA toolbar with a roving arrow-key model. |
+| `DataTable<Row>` | Required `label/rows/columns/rowId/rowLabel`. Columns supply `id/header/cell`, optional sortable/numeric. `sort/onSortChange` is external; `visibleColumns` and density control display. Semantic table, separately named preview buttons, no row click handler. | Sort the full local source or request server sorting before passing rows. Do not sort one cursor page and claim global order. Stable IDs must survive sorting/appending. Links in cells remain independent of selection. |
+| DataTable selection/paging | `selectedId/onSelect(id, trigger)` selects one loaded row for preview. `hasMore/onLoadMore/loadingMore` exposes cursor continuation. No page counts or cursor storage. | Preserve opaque cursors in session state; share conditions in the URL without cursors. This is not “select all results”. Own URL replace/push and permission-bound resets. |
+| DataTable states | `state`: ready/loading/error/partial, optional `message`; an empty rows array yields empty state. Loading is busy, partial/error retain provided rows. Density defaults comfortable; compact is explicit. | Announce whether rows are stale/partial using message. The component has no sorting, resizing, pinning, or virtualization engine. |
+
+```tsx
+"use client";
+import { useRef, useState } from "react";
+import { DataTable, DetailInspector, WorkbenchLayout, CopyButton,
+  type DataColumn } from "@conductor-by-89soone/react";
+
+type Row = { id: string; title: string };
+const rows: Row[] = [{ id: "sample:change:1", title: "검색 맥락 보존 / preserve context" }];
+const columns: DataColumn<Row>[] = [
+  { id: "title", header: "Title", cell: row => row.title },
+];
+export function SearchPreview() {
+  const [selectedId, select] = useState<string | null>(null);
+  const [width, setWidth] = useState(40);
+  const trigger = useRef<HTMLButtonElement | null>(null);
+  const selected = rows.find(row => row.id === selectedId);
+  return <WorkbenchLayout width={width} onWidthChange={setWidth}
+    inspector={selected && <DetailInspector label="Selected change"
+      returnFocusRef={trigger} onClose={() => select(null)}>
+      <p>{selected.title}</p><code>{selected.id}</code>
+      <CopyButton value={selected.id} label="Copy identifier" />
+    </DetailInspector>}>
+    <DataTable label="Loaded changes" rows={rows} columns={columns}
+      rowId={row => row.id} rowLabel={row => row.title} selectedId={selectedId}
+      onSelect={(id, button) => { trigger.current = button; select(id); }} />
+  </WorkbenchLayout>;
+}
+```
+
+`WorkbenchLayout` accepts children and an optional inspector, with a controlled
+25–60 percent inspector `width` (default 40) and `onWidthChange`. The native range
+control supports keyboard adjustment; small screens stack the areas. This is not
+a draggable separator or a modal focus trap. `DetailInspector` closes on its
+button or unhandled Escape, calls `onClose`, then focuses `returnFocusRef` without
+scrolling. Keep the selecting row mounted; if it disappears, the consumer must
+choose a meaningful fallback. Preview uses existing row data and makes no request.
+
+`PathList` takes `items: {id,label,children?,state?}[]`, optional
+`selectedId/onPathSelect`. Folders are initially collapsed native details; Tab and
+Enter/Space operate summaries, leaves are buttons. `state: loading/error` reports
+lazy-data state; fetching/retry is external. It is a **path list**, not an ARIA
+TreeView: there is no tree arrow-key or typeahead promise. `Breadcrumb` is a nav
+wrapper (default accessible name “경로”); supply links/separators/current-page
+semantics as children. `Skeleton` requires `label` and reports loading status.
+`CopyButton` reports clipboard success/failure and ignores feedback for another
+current value; display selectable text alongside it for unavailable clipboard
+fallback. None of these APIs store navigation or clipboard data persistently.
+
+### Relationship exploration
+
+The graph is also available from the optional `@conductor-by-89soone/react/relation`
+entry, exporting `RelationGraph`, `layoutRelationNodes`, and their public types.
+It uses the same implementation and shared Conductor stylesheet, with no extra
+visualization dependency. Use this entry in a client component or dynamic import
+to isolate graph loading; importing Button alone does not load graph code.
+
+```tsx
+import { RelationGraph } from "@conductor-by-89soone/react";
+
+export function Relations() {
+  return <RelationGraph label="Synthetic change relationships" state="partial"
+    stateMessage="Synthetic data; production relationship service is not connected"
+    nodes={[
+      { id: "sample:change:a", label: "Change A" },
+      { id: "sample:change:b", label: "Change B" },
+    ]}
+    edges={[{ id: "sample:edge:ab", source: "sample:change:a",
+      target: "sample:change:b", type: "references", label: "references",
+      evidence: "Synthetic example text links A to B", confidence: "inferred",
+      ambiguous: true }]} />;
+}
+```
+
+`RelationGraph` receives nodes and edges; node IDs and edge IDs are independent,
+stable, consumer-defined identifiers. An edge is read as **source → label →
+target**. Optional `unresolved/ambiguous/retracted` flags are independent;
+map a consumer's detached state to `retracted` without discarding other flags.
+Missing endpoint metadata is displayed as unavailable information, not fetched.
+`confidence` and `evidence` are text, not an inference engine or HTML renderer.
+Sanitize the *data scope* on the server before passing it: `unavailable` is a
+presentation hint, not authorization, and does not hide a supplied private label.
+Never pass unauthorized nodes, hidden counts, or inaccessible connecting edges.
+
+Node search, type filtering, node/edge selection, neighbor emphasis, zoom,
+directional pan buttons, fit view, and selected evidence form one read-only flow.
+The SVG is hidden from assistive technology; semantic node/edge tables expose the
+same selection and information with normal links/buttons. There is no graph
+editing, drag-to-connect, deletion, node movement, or recursive fetch. Nodes use
+deterministic ID ordering; geometric placement is not time, dependency order,
+merge sequence, confidence, or importance. Cycles are allowed.
+
+`selection/onSelectionChange` and `viewport/onViewportChange` can be controlled;
+otherwise their state is local to the mounted instance. A consumer can retain
+these values across its own navigation, but the package adds no persistence.
+`state` supports ready/loading/empty/error/partial and `stateMessage` supplies
+context. `onRetry` renders an explicit retry only for error; it does not auto-poll.
+A filter can hide a selected edge without resetting selection; details say so.
+Use an empty state only for confirmed absence, not for unresolved or partial data.
+The generic component has no production graph endpoint; demos are synthetic.
+
+### Processing status
+
+```tsx
+import { ProcessingStatus } from "@conductor-by-89soone/react";
+
+export function Processing() {
+  return <ProcessingStatus label="Synthetic processing stages" stages={[
+    { id: "received", label: "Received", status: "complete", detail: "Receipt confirmed" },
+    { id: "stored", label: "Durably stored", status: "complete", detail: "Storage confirmed" },
+    { id: "processed", label: "Processed", status: "delayed", detail: "Waiting for the consumer worker" },
+    { id: "indexed", label: "Indexed", status: "unknown", detail: "Search freshness not confirmed" },
+  ]} />;
+}
+```
+
+`ProcessingStatus` accepts `label` and `stages` with stable `id`, `label`,
+`status: complete/pending/delayed/failed/unknown`, and explanatory `detail`.
+An optional `action` has `label/onAction/disabledReason/busy`; omit it when there
+is no allowed action, show a reason when it is unavailable, and make callback
+outcomes visible. Existing Timeline, Badge, and Button render the pattern.
+Native button keyboard behavior applies. There are no percentages, ETAs, requests,
+automatic retries, or timers. A complete receipt stage says nothing about durable
+storage or index freshness. Preserve successful stages alongside partial failures.
+Consumers retain their already approved polling and authorization policies.
+
+### Migration from consumer-owned compositions
+
+1. Build and pack all three packages, install matching tarballs, import CSS once,
+   and verify React peer resolution and Next hydration before application rollout.
+2. Replace local Tabs with compound `Tabs` parts; explicitly choose manual or
+   automatic activation, initial value, controlled selection, and panel lifetime.
+   Keep expensive fetching out of mere keyboard focus changes.
+3. Map local filter values/options into `Combobox`, `MultiSelect`, and `FilterChip`.
+   Keep query parsing, stale-request generations, session-bound cursors, and URL
+   replace/push semantics in the consumer.
+4. Replace table/workbench presentation with `DataTable/WorkbenchLayout/DetailInspector`.
+   Keep stable identity, current-row reuse, detail routing, and return-focus refs.
+   Add compact density explicitly; existing Card styling is unchanged.
+5. Adapt already authorized relations into `RelationNode/RelationEdge`; retain
+   direction, ambiguity, unresolved/detached states, evidence, and confidence.
+   Preserve lazy first expansion and cached reopen; do not turn one pending
+   relation category into “all relationships absent”. A planned graph API still
+   requires a consumer adapter and production integration work.
+6. Connect menu controls using `AppShellNavTrigger` under the same `AppShell`
+   context (use `asChild` with an existing Button). Keep route-to-main focus.
+   Remove any old animation-frame fallback only after the consumer reproduces
+   Escape/outside-close/navigation focus with the new package; package regression
+   tests alone do not prove the original consumer has migrated.
+
+This repository change does not migrate or write to a production consumer.
+Published version changes, visual/API snapshots, browser matrices, measured bundle
+costs, and checks that could not run must be reviewed with the implementation log.

package/dist/action.js

@@ -1,3 +1,62 @@
-export { Button, IconButton } from './chunk-G7TRTZRR.js';
-import './chunk-NF3ZHADJ.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+import { Spinner } from "./feedback.js";
+function buttonClasses({ variant = "secondary", tone = "neutral", size = "md", blockedReason, className }) {
+  return cx(
+    "cdt-btn",
+    `cdt-btn--${variant}`,
+    `cdt-btn--tone-${tone}`,
+    size === "sm" && "cdt-btn--sm",
+    blockedReason !== void 0 && "cdt-btn--blocked",
+    className
+  );
+}
+const Button = forwardRef(function Button2({ blockedReason, className, disabled, iconEnd, iconStart, loading = false, onClick, title, variant, tone, size, children, ...props }, ref) {
+  const isBlocked = blockedReason !== void 0;
+  const isDisabled = disabled || isBlocked;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      className: buttonClasses({ variant, tone, size, blockedReason, className, children }),
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      title: isBlocked ? blockedReason : title,
+      onClick: (event) => {
+        if (loading) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClick?.(event);
+      },
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "", "aria-hidden": "true" }) : iconStart === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconStart }),
+        children,
+        iconEnd === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconEnd })
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+const IconButton = forwardRef(function IconButton2({ icon, size, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      ref,
+      size,
+      iconStart: icon,
+      className: cx("cdt-btn--icon", props.className),
+      children: null
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+export {
+  Button,
+  IconButton
+};

package/dist/cx.js

@@ -1 +1,10 @@
-export { cx } from './chunk-WEIMKRZV.js';
+import { scheduleStylesheetWarning } from "./stylesheet-warning.js";
+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
+};

package/dist/data.js

@@ -1,2 +1,65 @@
-export { CodeBlock, Kbd, Table, Timeline } from './chunk-RBD5Z2LR.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useEffect
+} from "react";
+import { cx } from "./cx.js";
+const TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("thead", { ...props, ref, className: cx("cdt-table__head", className) });
+});
+TableHead.displayName = "Table.Head";
+const TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("tbody", { ...props, ref, className: cx("cdt-table__body", className) });
+});
+TableBody.displayName = "Table.Body";
+const TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("tr", { ...props, ref, className: cx("cdt-table__row", className) });
+});
+TableRow.displayName = "Table.Row";
+const TableHeaderCell = forwardRef(function TableHeaderCell2({ className, scope = "col", ...props }, ref) {
+  return /* @__PURE__ */ jsx("th", { ...props, ref, scope, className: cx("cdt-table__header-cell", className) });
+});
+TableHeaderCell.displayName = "Table.HeaderCell";
+const TableCell = forwardRef(function TableCell2({ className, numeric = false, ...props }, ref) {
+  return /* @__PURE__ */ jsx("td", { ...props, ref, className: cx("cdt-table__cell", numeric && "cdt-num", className) });
+});
+TableCell.displayName = "Table.Cell";
+const Table = Object.assign(forwardRef(function Table2({ "aria-label": ariaLabel, caption, children, className, scrollContainerProps, ...props }, ref) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && caption == null && ariaLabel === void 0) {
+      console.warn("[conductor] Table requires a caption or aria-label.");
+    }
+  }, [ariaLabel, caption]);
+  return /* @__PURE__ */ jsx("div", { ...scrollContainerProps, ...props, ref, tabIndex: props.tabIndex ?? scrollContainerProps?.tabIndex ?? 0, "aria-label": ariaLabel, className: cx("cdt-table__scroll", scrollContainerProps?.className, className), children: /* @__PURE__ */ jsxs("table", { "aria-label": ariaLabel, className: "cdt-table", children: [
+    caption == null ? null : /* @__PURE__ */ jsx("caption", { children: caption }),
+    children
+  ] }) });
+}), { Head: TableHead, Body: TableBody, Row: TableRow, HeaderCell: TableHeaderCell, Cell: TableCell });
+const TimelineStep = forwardRef(function TimelineStep2({ children, className, marker, onSelect, selected = false, ...props }, ref) {
+  const stepClassName = cx("cdt-timeline__step", onSelect !== void 0 && "cdt-timeline__step--interactive", className);
+  const markerNode = /* @__PURE__ */ jsx("span", { className: "cdt-timeline__marker", "aria-hidden": "true", children: marker });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    markerNode,
+    children
+  ] });
+  return /* @__PURE__ */ jsx("li", { ref, children: onSelect === void 0 ? /* @__PURE__ */ jsx("div", { ...props, "aria-current": selected ? "step" : void 0, className: stepClassName, children: content }) : /* @__PURE__ */ jsx("button", { ...props, type: "button", "aria-current": selected ? "step" : void 0, onClick: () => onSelect(), className: stepClassName, children: content }) });
+});
+TimelineStep.displayName = "Timeline.Step";
+const Timeline = Object.assign(forwardRef(function Timeline2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("ol", { ...props, ref, className: cx("cdt-timeline", className) });
+}), { Step: TimelineStep });
+const CodeBlock = forwardRef(function CodeBlock2({ className, code, language, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, role: "region", tabIndex: 0, "data-language": language, className: cx("cdt-code-block", className), children: /* @__PURE__ */ jsx("pre", { className: "cdt-code-block__pre", children: /* @__PURE__ */ jsx("code", { className: "cdt-code-block__code", children: code }) }) });
+});
+CodeBlock.displayName = "CodeBlock";
+const Kbd = forwardRef(function Kbd2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("kbd", { ...props, ref, className: cx("cdt-kbd", className) });
+});
+Kbd.displayName = "Kbd";
+export {
+  CodeBlock,
+  Kbd,
+  Table,
+  Timeline
+};

package/dist/feedback.js

@@ -1,2 +1,65 @@
-export { Banner, EmptyState, Meter, ProgressRing, Spinner } from './chunk-NF3ZHADJ.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { cx } from "./cx.js";
+const Banner = forwardRef(function Banner2({ action, children, className, icon, title, tone = "info", ...props }, ref) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && tone === "danger" && action === void 0) console.warn('[conductor] Banner tone="danger" requires a recovery action.');
+  }, [action, tone]);
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, role: tone === "danger" ? "alert" : "status", className: cx("cdt-banner", `cdt-banner--${tone}`, className), children: [
+    icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "cdt-banner__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "cdt-banner__body", children: [
+      title === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-banner__title", children: title }),
+      children
+    ] }),
+    action === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-banner__action", children: action })
+  ] });
+});
+Banner.displayName = "Banner";
+const EmptyState = forwardRef(function EmptyState2({ action, className, description, icon, title, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-empty-state", className), children: [
+    icon === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-empty-state__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("div", { className: "cdt-empty-state__title", children: title }),
+    description === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-empty-state__description", children: description }),
+    action === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "cdt-empty-state__action", children: action })
+  ] });
+});
+EmptyState.displayName = "EmptyState";
+const ratio = (value, min, max) => max <= min ? 0 : Math.min(1, Math.max(0, (value - min) / (max - min)));
+const Meter = forwardRef(function Meter2({ "aria-label": ariaLabel, className, exceededAt, max = 100, min = 0, style, value, valueText, warningAt, ...props }, ref) {
+  const tone = exceededAt !== void 0 && value >= exceededAt ? "exceeded" : warningAt !== void 0 && value >= warningAt ? "warning" : "normal";
+  const meterStyle = { ...style, "--cdt-meter-ratio": String(ratio(value, min, max)) };
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, style: meterStyle, role: "meter", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-valuetext": valueText, className: cx("cdt-meter", `cdt-meter--${tone}`, className), children: [
+    /* @__PURE__ */ jsx("div", { className: "cdt-meter__track", children: /* @__PURE__ */ jsx("div", { className: "cdt-meter__fill" }) }),
+    /* @__PURE__ */ jsx("span", { className: "cdt-meter__value", children: valueText })
+  ] });
+});
+Meter.displayName = "Meter";
+const ProgressRing = forwardRef(function ProgressRing2({ "aria-label": ariaLabel, className, max = 100, size = "md", style, value, valueText, ...props }, ref) {
+  const ringStyle = { ...style, "--cdt-progress-ring-ratio": String(ratio(value, 0, max)) };
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, style: ringStyle, role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": valueText, className: cx("cdt-progress-ring", size === "sm" && "cdt-progress-ring--sm", className), children: [
+    /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 32 32", children: [
+      /* @__PURE__ */ jsx("circle", { className: "cdt-progress-ring__track", cx: "16", cy: "16", r: "14" }),
+      /* @__PURE__ */ jsx("circle", { className: "cdt-progress-ring__indicator", cx: "16", cy: "16", r: "14" })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "cdt-progress-ring__label", children: valueText })
+  ] });
+});
+ProgressRing.displayName = "ProgressRing";
+const Spinner = forwardRef(function Spinner2({ className, label, size = "md", ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, role: "status", "aria-live": "polite", className: cx("cdt-spinner", size === "sm" && "cdt-spinner--sm", className), children: [
+    /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 32 32", children: [
+      /* @__PURE__ */ jsx("circle", { className: "cdt-spinner__track", cx: "16", cy: "16", r: "14" }),
+      /* @__PURE__ */ jsx("circle", { className: "cdt-spinner__indicator", cx: "16", cy: "16", r: "14" })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "cdt-spinner__label", children: label })
+  ] });
+});
+Spinner.displayName = "Spinner";
+export {
+  Banner,
+  EmptyState,
+  Meter,
+  ProgressRing,
+  Spinner
+};

package/dist/form.js

@@ -1,2 +1,115 @@
-export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-3YDK2JBK.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import * as RadixSelect from "@radix-ui/react-select";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId
+} from "react";
+import { cx } from "./cx.js";
+const FieldContext = createContext(null);
+function joinDescribedBy(...ids) {
+  const result = ids.filter((id) => id !== void 0).join(" ");
+  return result === "" ? void 0 : result;
+}
+function useFieldControl(invalid, describedBy) {
+  const field = useContext(FieldContext);
+  return {
+    id: field?.id ?? "",
+    descriptionId: field?.descriptionId,
+    errorId: field?.errorId,
+    invalid: invalid ?? field?.invalid ?? false,
+    required: field?.required ?? false,
+    describedBy: joinDescribedBy(describedBy, field?.descriptionId, field?.errorId)
+  };
+}
+const Field = forwardRef(function Field2({ children, className, description, error, id: providedId, label, required = false, ...props }, ref) {
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const descriptionId = description === void 0 ? void 0 : `${id}-description`;
+  const errorId = error === void 0 ? void 0 : `${id}-error`;
+  const invalid = error !== void 0;
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, descriptionId, errorId, invalid, required }, children: /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-field", className), children: [
+    /* @__PURE__ */ jsxs("label", { className: "cdt-field__label", htmlFor: id, children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "cdt-field__required", "aria-hidden": "true", children: "*" }) : null
+    ] }),
+    description === void 0 ? null : /* @__PURE__ */ jsx("div", { id: descriptionId, className: "cdt-field__description", children: description }),
+    children,
+    error === void 0 ? null : /* @__PURE__ */ jsx("div", { id: errorId, className: "cdt-field__error", children: error })
+  ] }) });
+});
+Field.displayName = "Field";
+function useMissingLabelWarning(name, hasField, ariaLabel, ariaLabelledBy) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && !hasField && ariaLabel === void 0 && ariaLabelledBy === void 0) {
+      console.warn(`[conductor] ${name} requires Field, aria-label, or aria-labelledby.`);
+    }
+  }, [ariaLabel, ariaLabelledBy, hasField, name]);
+}
+const TextField = forwardRef(function TextField2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, iconStart, id: ownId, invalid, required, size = "md", variant = "solid", ...props }, ref) {
+  const field = useContext(FieldContext);
+  const control = useFieldControl(invalid, ariaDescribedBy);
+  useMissingLabelWarning("TextField", field !== null, ariaLabel, ariaLabelledBy);
+  const input = /* @__PURE__ */ jsx("input", { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), required: required ?? control.required, className: cx("cdt-input", variant === "glass" && "cdt-input--glass", size === "sm" && "cdt-input--sm", control.invalid && "cdt-input--invalid", iconStart !== void 0 && "cdt-input--icon-start", className) });
+  return iconStart === void 0 ? input : /* @__PURE__ */ jsxs("span", { className: "cdt-input-wrap", children: [
+    /* @__PURE__ */ jsx("span", { className: "cdt-input__icon", "aria-hidden": "true", children: iconStart }),
+    input
+  ] });
+});
+TextField.displayName = "TextField";
+const TextArea = forwardRef(function TextArea2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, id: ownId, invalid, required, rows = 3, variant = "solid", ...props }, ref) {
+  const field = useContext(FieldContext);
+  const control = useFieldControl(invalid, ariaDescribedBy);
+  useMissingLabelWarning("TextArea", field !== null, ariaLabel, ariaLabelledBy);
+  return /* @__PURE__ */ jsx("textarea", { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), rows, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), required: required ?? control.required, className: cx("cdt-textarea", variant === "glass" && "cdt-textarea--glass", control.invalid && "cdt-textarea--invalid", className) });
+});
+TextArea.displayName = "TextArea";
+const SelectTrigger = forwardRef(function SelectTrigger2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, id: ownId, invalid, size = "md", ...props }, ref) {
+  const field = useContext(FieldContext);
+  const control = useFieldControl(invalid, ariaDescribedBy);
+  const requiredAttribute = ariaRequired ?? (control.required ? true : void 0);
+  return /* @__PURE__ */ jsx(RadixSelect.Trigger, { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), ...requiredAttribute === void 0 ? {} : { "aria-required": requiredAttribute }, className: cx("cdt-select__trigger", size === "sm" && "cdt-select__trigger--sm", control.invalid && "cdt-select__trigger--invalid", className) });
+});
+SelectTrigger.displayName = "Select.Trigger";
+const SelectContent = forwardRef(function SelectContent2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(RadixSelect.Content, { ...props, ref, className: cx("cdt-select__content", className), children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children }) }) });
+});
+SelectContent.displayName = "Select.Content";
+const SelectItem = forwardRef(function SelectItem2({ children, className, indicator = "\u2713", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(RadixSelect.Item, { ...props, ref, className: cx("cdt-select__item", className), children: [
+    /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
+    /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "cdt-select__indicator", "aria-hidden": "true", children: indicator })
+  ] });
+});
+SelectItem.displayName = "Select.Item";
+function SelectRoot({ required, ...props }) {
+  const field = useContext(FieldContext);
+  return /* @__PURE__ */ jsx(RadixSelect.Root, { ...props, required: required ?? field?.required });
+}
+SelectRoot.displayName = "Select.Root";
+const Select = { Root: SelectRoot, Trigger: SelectTrigger, Value: RadixSelect.Value, Content: SelectContent, Item: SelectItem, Group: RadixSelect.Group, Label: RadixSelect.Label };
+const Switch = forwardRef(function Switch2({ className, ...props }, ref) {
+  const field = useContext(FieldContext);
+  const control = useFieldControl(void 0, props["aria-describedby"]);
+  return /* @__PURE__ */ jsx(RadixSwitch.Root, { ...props, ref, id: props.id ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": control.invalid || void 0, required: props.required ?? control.required, className: cx("cdt-switch", control.invalid && "cdt-switch--invalid", className), children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: "cdt-switch__thumb" }) });
+});
+Switch.displayName = "Switch";
+const Checkbox = forwardRef(function Checkbox2({ className, indicator = "\u2713", ...props }, ref) {
+  const field = useContext(FieldContext);
+  const control = useFieldControl(void 0, props["aria-describedby"]);
+  return /* @__PURE__ */ jsx(RadixCheckbox.Root, { ...props, ref, id: props.id ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": control.invalid || void 0, required: props.required ?? control.required, className: cx("cdt-checkbox", control.invalid && "cdt-checkbox--invalid", className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "cdt-checkbox__indicator", "aria-hidden": "true", children: indicator }) });
+});
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox,
+  Field,
+  Select,
+  Switch,
+  TextArea,
+  TextField
+};

package/dist/index.d.ts

@@ -7,7 +7,10 @@ export { CodeBlock, CodeBlockProps, Kbd, KbdProps, Table, TableCellProps, TableH
 export { Dialog, DialogContentProps, Drawer, DrawerContentProps, DropdownMenu, DropdownMenuItemProps, Tooltip, TooltipContentProps } from './overlay.js';
 export { Checkbox, CheckboxProps, Field, FieldProps, Select, SelectItemProps, SelectTriggerProps, Switch, SwitchProps, TextArea, TextAreaProps, TextField, TextFieldProps } from './form.js';
 export { Banner, BannerProps, EmptyState, EmptyStateProps, Meter, MeterProps, ProgressRing, ProgressRingProps, Spinner, SpinnerProps } from './feedback.js';
-export { AppShell, AppShellProps, NavItem, NavLinkRenderProps, NavList, NavListProps, TopBar, TopBarProps } from './shell.js';
+export { AppShell, AppShellNavTrigger, AppShellProps, NavItem, NavLinkRenderProps, NavList, NavListProps, TopBar, TopBarProps } from './shell.js';
+export { Breadcrumb, Combobox, ComboboxProps, CopyButton, CopyButtonProps, DataColumn, DataSort, DataTable, DataTableProps, DetailInspector, DetailInspectorProps, FilterChip, FilterChipProps, FilterToolbar, MultiSelect, MultiSelectProps, PathItem, PathList, PathListProps, ProcessingStage, ProcessingStatus, ProcessingStatusProps, SearchOption, Skeleton, WorkbenchLayout, WorkbenchLayoutProps } from './workbench.js';
+export { Collapsible, Popover, PopoverContentProps, Tabs, TabsContentProps, TabsRootProps } from './interaction.js';
+export { RelationEdge, RelationGraph, RelationGraphProps, RelationNode, RelationSelection, RelationViewport, layoutRelationNodes } from './relation.js';
 import 'react';
 import '@radix-ui/react-dialog';
 import '@radix-ui/react-dropdown-menu';
@@ -15,6 +18,9 @@ import '@radix-ui/react-tooltip';
 import '@radix-ui/react-checkbox';
 import '@radix-ui/react-select';
 import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-collapsible';
 
 /** Published name of this package. */
 declare const PACKAGE_NAME: "@conductor-by-89soone/react";