@tensor_1/react 2.11.0 → 2.13.0

package/dist/components/RelationshipGraph.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode } from "../relationship-graph-model.js";
+import { cx } from "../cx.js";
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+const EMPTY_LEGEND = [];
+function RelationshipGraph({
+  nodes,
+  edges,
+  selectedId,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails,
+  maxNodes = 40,
+  density = "standard",
+  highlightedNodeIds = EMPTY_IDS,
+  conflictedNodeIds = EMPTY_IDS,
+  highlightedEdgeIds = EMPTY_IDS,
+  conflictedEdgeIds = EMPTY_IDS,
+  legend = EMPTY_LEGEND,
+  loading,
+  error,
+  onRetry,
+  className
+}) {
+  const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
+  const positioned = useMemo(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
+  const positionedById = useMemo(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [focusedId, setFocusedId] = useState(selectedId ?? positioned[0]?.id);
+  const svgRef = useRef(null);
+  const select = (id) => {
+    const node = bounded.nodes.find((item) => item.id === id);
+    if (node) onSelect?.(node);
+  };
+  const focusNode = (id) => {
+    if (!id) return;
+    setFocusedId(id);
+    requestAnimationFrame(() => svgRef.current?.querySelector(`[data-node-id="${id}"]`)?.focus());
+  };
+  const onNodeKeyDown = (event, id) => {
+    if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      focusNode(traverseRelationshipNode(positioned, id, event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      select(id);
+    }
+  };
+  const reset = () => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  };
+  if (loading) return /* @__PURE__ */ jsx("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "status", children: "Loading relationships\u2026" });
+  if (error) return /* @__PURE__ */ jsxs("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "alert", children: [
+    /* @__PURE__ */ jsx("p", { children: error }),
+    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+  ] });
+  if (bounded.nodes.length === 0) return /* @__PURE__ */ jsxs("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), children: [
+    /* @__PURE__ */ jsx("p", { children: "No relationships to display." }),
+    /* @__PURE__ */ jsx("p", { children: "Adjust the neighborhood or filters to include a node." })
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": "Relationship graph", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", "aria-label": "Graph view controls", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": "Pan left", children: "Left" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": "Pan up", children: "Up" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": "Pan down", children: "Down" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": "Pan right", children: "Right" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": "Zoom in", children: "Zoom in" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": "Zoom out", children: "Zoom out" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, children: "Reset view" }),
+      /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+        "Zoom ",
+        Math.round(zoom * 100),
+        "%"
+      ] })
+    ] }),
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsxs("p", { className: "uix-relationship-graph__bounded", role: "status", children: [
+      "Showing ",
+      bounded.nodes.length,
+      " nodes; ",
+      bounded.omittedNodeCount,
+      " outside this bounded neighborhood."
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ jsx("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": `Graph with ${bounded.nodes.length} nodes and ${bounded.edges.length} relationships`, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
+      bounded.edges.map((edge) => {
+        const source = positionedById.get(edge.source);
+        const target = positionedById.get(edge.target);
+        return /* @__PURE__ */ jsx("line", { x1: source.x * 6, y1: source.y * 4, x2: target.x * 6, y2: target.y * 4, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? "Relationship" }) }, edge.id);
+      }),
+      positioned.map((node) => /* @__PURE__ */ jsxs(
+        "g",
+        {
+          transform: `translate(${node.x * 6} ${node.y * 4})`,
+          role: "button",
+          "aria-label": `${node.label}${node.type ? `, ${node.type}` : ""}${conflictedNodeIds.has(node.id) ? ", conflict" : ""}`,
+          tabIndex: focusedId === node.id ? 0 : -1,
+          "data-node-id": node.id,
+          className: "uix-relationship-graph__node",
+          "data-selected": selectedId === node.id || void 0,
+          "data-highlighted": highlightedNodeIds.has(node.id) || void 0,
+          "data-conflicted": conflictedNodeIds.has(node.id) || void 0,
+          onFocus: () => setFocusedId(node.id),
+          onKeyDown: (event) => onNodeKeyDown(event, node.id),
+          onClick: () => select(node.id),
+          children: [
+            /* @__PURE__ */ jsx("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
+            /* @__PURE__ */ jsx("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
+          ]
+        },
+        node.id
+      ))
+    ] }) }) }),
+    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": "Relationship types", children: legend.map((item) => /* @__PURE__ */ jsx("li", { "data-type": item.id, children: item.label }, item.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": "Accessible relationship list", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Relationship list" }),
+      /* @__PURE__ */ jsx("ul", { children: bounded.nodes.map((node) => {
+        const neighbors = relationshipNeighbors(node.id, bounded.edges).map((id) => bounded.nodes.find((item) => item.id === id)?.label ?? id);
+        return /* @__PURE__ */ jsxs("li", { "data-selected": selectedId === node.id || void 0, children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => select(node.id), "aria-pressed": selectedId === node.id, children: [
+            /* @__PURE__ */ jsx("strong", { children: node.label }),
+            node.type && /* @__PURE__ */ jsx("span", { children: node.type }),
+            /* @__PURE__ */ jsx("span", { children: neighbors.length ? `Connected to ${neighbors.join(", ")}` : "No visible connections" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-relationship-graph__list-actions", children: [
+            onExpandNeighbors && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onExpandNeighbors(node), children: "Expand neighbors" }),
+            onOpenDetails && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onOpenDetails(node), children: "Open details" })
+          ] })
+        ] }, node.id);
+      }) })
+    ] })
+  ] });
+}
+export {
+  RelationshipGraph
+};

package/dist/components/RuleBuilder.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { JsonValue } from '../json-value.js';
+import { RuleAction, RuleDefinition, RuleCondition, RuleValidationIssue } from '../rule-builder-model.js';
+
+interface RuleValueEditorProps {
+    condition: RuleCondition;
+    onChange: (value: JsonValue | undefined) => void;
+    disabled?: boolean;
+}
+interface RuleFieldDefinition {
+    id: string;
+    label: string;
+    description?: string;
+    operators?: string[];
+    renderValueEditor?: (props: RuleValueEditorProps) => ReactNode;
+}
+interface RuleOperatorDefinition {
+    id: string;
+    label: string;
+    requiresValue?: boolean;
+}
+interface RuleActionDefinition {
+    id: string;
+    label: string;
+    renderParameters?: (action: RuleAction, onChange: (parameters: Record<string, JsonValue>) => void, disabled: boolean) => ReactNode;
+}
+interface RuleBuilderProps {
+    value: RuleDefinition;
+    onChange: (value: RuleDefinition) => void;
+    fields: RuleFieldDefinition[];
+    operators: RuleOperatorDefinition[];
+    actions: RuleActionDefinition[];
+    maxDepth?: number;
+    readOnly?: boolean;
+    validate?: (value: RuleDefinition) => RuleValidationIssue[];
+    className?: string;
+    addConditionLabel?: string;
+    addGroupLabel?: string;
+    addActionLabel?: string;
+}
+/** Declarative controlled when-conditions-to-actions editor with bounded nesting. */
+declare function RuleBuilder({ value, onChange, fields, operators, actions, maxDepth, readOnly, validate, className, addConditionLabel, addGroupLabel, addActionLabel, }: RuleBuilderProps): react.JSX.Element;
+
+export { type RuleActionDefinition, RuleBuilder, type RuleBuilderProps, type RuleFieldDefinition, type RuleOperatorDefinition, type RuleValueEditorProps };

package/dist/components/RuleBuilder.js

@@ -0,0 +1,163 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import {
+  appendRuleNode,
+  isRuleGroup,
+  mapRuleGroup,
+  moveRuleNode,
+  removeRuleNode,
+  summarizeRule,
+  validateRuleDefinition
+} from "../rule-builder-model.js";
+let ruleId = 0;
+const nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(++ruleId).toString(36)}`;
+function defaultCondition(fields, operators) {
+  const field = fields[0];
+  const operator = operators.find((item) => field?.operators?.includes(item.id)) ?? operators[0];
+  return { id: nextId("condition"), field: field?.id ?? "", operator: operator?.id ?? "", value: "" };
+}
+function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disabled, onRootChange, labels }) {
+  const updateNode = (id, update) => onRootChange(mapRuleGroup(root, id, update));
+  const addCondition = () => onRootChange(appendRuleNode(root, group.id, defaultCondition(fields, operators), maxDepth));
+  const addGroup = () => onRootChange(appendRuleNode(root, group.id, {
+    id: nextId("group"),
+    combinator: "and",
+    conditions: [defaultCondition(fields, operators)]
+  }, maxDepth));
+  return /* @__PURE__ */ jsxs("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
+    /* @__PURE__ */ jsxs("legend", { className: "uix-rule-builder__group-heading", children: [
+      /* @__PURE__ */ jsx("span", { children: depth === 1 ? "When" : "Group" }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Match",
+        /* @__PURE__ */ jsxs("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
+          /* @__PURE__ */ jsx("option", { value: "and", children: "all (AND)" }),
+          /* @__PURE__ */ jsx("option", { value: "or", children: "any (OR)" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__nested", children: [
+      /* @__PURE__ */ jsx(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels } }),
+      /* @__PURE__ */ jsx(RowControls, { label: "group", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
+    ] }, node.id) : /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        condition: node,
+        fields,
+        operators,
+        disabled,
+        onChange: (condition) => updateNode(node.id, () => condition),
+        controls: /* @__PURE__ */ jsx(RowControls, { label: "condition", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
+      },
+      node.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__add", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: addCondition, disabled: disabled || fields.length === 0 || operators.length === 0, children: labels.addCondition }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: addGroup, disabled: disabled || depth >= maxDepth, children: labels.addGroup })
+    ] })
+  ] });
+}
+function ConditionRow({ condition, fields, operators, disabled, onChange, controls }) {
+  const field = fields.find((item) => item.id === condition.field);
+  const availableOperators = field?.operators?.length ? operators.filter((item) => field.operators.includes(item.id)) : operators;
+  const operator = operators.find((item) => item.id === condition.operator);
+  const setField = (id) => {
+    const nextField = fields.find((item) => item.id === id);
+    const nextOperator = operators.find((item) => nextField?.operators?.includes(item.id)) ?? availableOperators[0] ?? operators[0];
+    onChange({ ...condition, field: id, operator: nextOperator?.id ?? "" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__condition", children: [
+    /* @__PURE__ */ jsxs("label", { children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "Field" }),
+      /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "Operator" }),
+      /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.operator, onChange: (event) => onChange({ ...condition, operator: event.currentTarget.value }), disabled, children: availableOperators.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
+    ] }),
+    operator?.requiresValue !== false && /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ jsx("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": `Value for ${field?.label ?? "condition"}` }) }),
+    controls
+  ] });
+}
+function RowControls({ label, first, last, disabled, onUp, onDown, onRemove }) {
+  return /* @__PURE__ */ jsxs("span", { className: "uix-rule-builder__row-actions", children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": `Move ${label} up`, children: "Up" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": `Move ${label} down`, children: "Down" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": `Remove ${label}`, children: "Remove" })
+  ] });
+}
+function RuleBuilder({
+  value,
+  onChange,
+  fields,
+  operators,
+  actions,
+  maxDepth = 3,
+  readOnly = false,
+  validate,
+  className,
+  addConditionLabel = "Add condition",
+  addGroupLabel = "Add group",
+  addActionLabel = "Add action"
+}) {
+  const issues = [...validateRuleDefinition(value, maxDepth), ...validate?.(value) ?? []];
+  const fieldLabels = Object.fromEntries(fields.map((field) => [field.id, field.label]));
+  const operatorLabels = Object.fromEntries(operators.map((operator) => [operator.id, operator.label]));
+  const actionLabels = Object.fromEntries(actions.map((action) => [action.id, action.label]));
+  if (readOnly) return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": "Rule summary", children: [
+    /* @__PURE__ */ jsx("p", { children: summarizeRule(value, { fields: fieldLabels, operators: operatorLabels, actions: actionLabels }) }),
+    issues.length > 0 && /* @__PURE__ */ jsxs("p", { className: "uix-rule-builder__invalid", children: [
+      "Rule has ",
+      issues.length,
+      " validation issue",
+      issues.length === 1 ? "" : "s",
+      "."
+    ] })
+  ] });
+  const updateActions = (next) => onChange({ ...value, then: next });
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder", className), "aria-label": "Rule builder", children: [
+    /* @__PURE__ */ jsx(RuleGroupEditor, { group: value.when, depth: 1, root: value.when, fields, operators, maxDepth, disabled: readOnly, onRootChange: (when) => onChange({ ...value, when }), labels: { addCondition: addConditionLabel, addGroup: addGroupLabel } }),
+    /* @__PURE__ */ jsxs("fieldset", { className: "uix-rule-builder__actions", children: [
+      /* @__PURE__ */ jsx("legend", { children: "Then" }),
+      value.then.map((action, index) => {
+        const definition = actions.find((item) => item.id === action.type);
+        return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__action", children: [
+          /* @__PURE__ */ jsx("select", { className: "uix-select", value: action.type, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": "Action type", children: actions.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) }),
+          definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), false),
+          /* @__PURE__ */ jsx(
+            RowControls,
+            {
+              label: "action",
+              first: index === 0,
+              last: index === value.then.length - 1,
+              disabled: false,
+              onUp: () => {
+                const next = [...value.then];
+                [next[index - 1], next[index]] = [next[index], next[index - 1]];
+                updateActions(next);
+              },
+              onDown: () => {
+                const next = [...value.then];
+                [next[index + 1], next[index]] = [next[index], next[index + 1]];
+                updateActions(next);
+              },
+              onRemove: () => updateActions(value.then.filter((item) => item.id !== action.id))
+            }
+          )
+        ] }, action.id);
+      }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: actions.length === 0, onClick: () => updateActions([...value.then, { id: nextId("action"), type: actions[0]?.id ?? "", parameters: {} }]), children: addActionLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ jsx("span", { children: "Rule is valid." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        issues.length,
+        " validation issue",
+        issues.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { children: issues.map((issue, index) => /* @__PURE__ */ jsx("li", { children: issue.message }, `${issue.path}-${index}`)) })
+    ] }) })
+  ] });
+}
+export {
+  RuleBuilder
+};

package/dist/components/SchedulingCalendar.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SchedulingCalendarView = 'month' | 'week' | 'agenda';
+type SchedulingEntryState = 'scheduled' | 'conflicted' | 'in-progress' | 'blackout-violation';
+type SchedulingOverlayKind = 'maintenance' | 'blackout';
+interface SchedulingCalendarEntry {
+    id: string;
+    title: string;
+    start: string;
+    end: string;
+    state?: SchedulingEntryState;
+    meta?: string;
+}
+interface SchedulingCalendarOverlay {
+    id: string;
+    label: string;
+    start: string;
+    end: string;
+    kind: SchedulingOverlayKind;
+}
+interface SchedulingCalendarProps {
+    entries: SchedulingCalendarEntry[];
+    anchorDate: string;
+    timeZone: string;
+    view?: SchedulingCalendarView;
+    onViewChange?: (view: SchedulingCalendarView) => void;
+    onAnchorDateChange?: (date: string) => void;
+    onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
+    overlays?: SchedulingCalendarOverlay[];
+    filter?: (entry: SchedulingCalendarEntry) => boolean;
+    renderEntry?: (entry: SchedulingCalendarEntry) => ReactNode;
+    locale?: string;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    className?: string;
+}
+/** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
+declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, filter, renderEntry, locale, loading, error, onRetry, className, }: SchedulingCalendarProps): react.JSX.Element;
+
+export { SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingEntryState, type SchedulingOverlayKind };

package/dist/components/SchedulingCalendar.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { addCalendarDays, addCalendarMonths, buildMonthGrid, startOfMonth, zonedDateSpan } from "../calendar-model.js";
+import { cx } from "../cx.js";
+import { StatusPill } from "./StatusPill.js";
+const stateLabel = { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" };
+const stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
+const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+const EMPTY_OVERLAYS = [];
+function SchedulingCalendar({
+  entries,
+  anchorDate,
+  timeZone,
+  view: controlledView,
+  onViewChange,
+  onAnchorDateChange,
+  onSelectEntry,
+  overlays = EMPTY_OVERLAYS,
+  filter,
+  renderEntry,
+  locale,
+  loading,
+  error,
+  onRetry,
+  className
+}) {
+  const [internalView, setInternalView] = useState("month");
+  const view = controlledView ?? internalView;
+  const [activeDate, setActiveDate] = useState(anchorDate);
+  const gridRef = useRef(null);
+  const visibleEntries = useMemo(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
+  const entrySpans = useMemo(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
+  const overlaySpans = useMemo(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
+  const monthDays = useMemo(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
+  const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
+  const weekStart = addCalendarDays(anchorDate, -weekday);
+  const weekDays = useMemo(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
+  const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
+  useEffect(() => {
+    if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
+  }, [activeDate, days, view]);
+  const setView = (next) => {
+    if (controlledView === void 0) setInternalView(next);
+    onViewChange?.(next);
+  };
+  const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, direction * 7));
+  const focusDate = (date) => {
+    setActiveDate(date);
+    requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
+  };
+  const onDayKeyDown = (event, date) => {
+    const offset = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[event.key];
+    if (offset) {
+      event.preventDefault();
+      focusDate(addCalendarDays(date, offset));
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusDate(days[0]);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusDate(days[days.length - 1]);
+    }
+  };
+  const entriesFor = (date) => visibleEntries.filter((entry) => {
+    const span = entrySpans.get(entry.id);
+    return date >= span.start && date <= span.end;
+  });
+  const overlaysFor = (date) => overlays.filter((overlay) => {
+    const span = overlaySpans.get(overlay.id);
+    return date >= span.start && date <= span.end;
+  });
+  const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-scheduling-calendar", className), "aria-label": `Scheduling calendar in ${timeZone}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: "Previous" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: "Next" })
+      ] }),
+      /* @__PURE__ */ jsx("strong", { children: view === "month" ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)) : `${dateLabel(weekStart, locale)} \u2013 ${dateLabel(weekDays[weekDays.length - 1], locale)}` }),
+      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": "Calendar view", children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: [
+        option[0].toUpperCase(),
+        option.slice(1)
+      ] }, option)) })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: "Loading schedule\u2026" }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { children: error }),
+      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+    ] }) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": "Schedule agenda", children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No scheduled entries match the current filters." }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
+      const state = entry.state ?? "scheduled";
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("strong", { children: renderEntry?.(entry) ?? entry.title }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            formatInstant(entry.start),
+            " \u2013 ",
+            formatInstant(entry.end)
+          ] }),
+          entry.meta && /* @__PURE__ */ jsx("span", { children: entry.meta })
+        ] }),
+        /* @__PURE__ */ jsx(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
+      ] }) }, entry.id);
+    }) }) }) : /* @__PURE__ */ jsx("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), role: "group", "aria-label": `${view} schedule`, children: days.map((date, index) => {
+      const dayEntries = entriesFor(date);
+      const dayOverlays = overlaysFor(date);
+      return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateLabel(date, locale), children: Number(date.slice(-2)) }),
+        dayOverlays.map((overlay) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
+        /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__entries", children: dayEntries.map((entry) => {
+          const span = entrySpans.get(entry.id);
+          const state = entry.state ?? "scheduled";
+          return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": `${entry.title}, ${stateLabel[state]}, ${formatInstant(entry.start)} to ${formatInstant(entry.end)}`, children: [
+            /* @__PURE__ */ jsx("span", { children: renderEntry?.(entry) ?? entry.title }),
+            /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: stateLabel[state] })
+          ] }, entry.id);
+        }) })
+      ] }, date);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__legend", "aria-label": "Schedule state legend", children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ jsx("span", { "data-state": state, children: stateLabel[state] }, state)) })
+  ] });
+}
+export {
+  SchedulingCalendar
+};

package/dist/components/Segmented.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { cx } from "../cx.js";
 const SegmentedCtx = createContext({});
 function Segmented({ value, onChange, children, className, ...props }) {
-  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
+  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
 }
 function SegmentedOption({
   value,

package/dist/components/Table.d.ts

@@ -4,7 +4,7 @@ import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, TdHTMLAttributes, Tabl
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-declare function TableWrap({ children, className, ...props }: TableWrapProps): react.JSX.Element;
+declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
 type TableDensity = 'compact' | 'standard' | 'comfortable';
 type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {

package/dist/components/Table.js

@@ -1,9 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "../cx.js";
 import { highlightSegments } from "../table-engine.js";
-function TableWrap({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-table-wrap", className), ...props, children });
-}
+const TableWrap = forwardRef(function TableWrap2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+});
 function Table({
   density = "standard",
   zebra = true,

package/dist/components/Tabs.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { cx } from "../cx.js";
 const TabsCtx = createContext({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  return /* @__PURE__ */ jsx(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ jsx(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
   const ctx = useContext(TabsCtx);

package/dist/diff-model.d.ts

@@ -0,0 +1,23 @@
+import { JsonValue } from './json-value.js';
+
+type DiffKind = 'added' | 'removed' | 'changed' | 'conflicted';
+type DiffResolution = 'accept' | 'skip' | 'pending';
+interface DiffEntry {
+    path: string;
+    kind: DiffKind;
+    base?: JsonValue;
+    current?: JsonValue;
+    incoming?: JsonValue;
+}
+interface DiffSummary {
+    added: number;
+    removed: number;
+    changed: number;
+    conflicted: number;
+    resolved: number;
+    pending: number;
+}
+declare function buildThreeWayDiff(base: JsonValue | undefined, current: JsonValue | undefined, incoming: JsonValue | undefined, path?: string): DiffEntry[];
+declare function summarizeDiff(entries: DiffEntry[], resolutions?: Record<string, DiffResolution>): DiffSummary;
+
+export { type DiffEntry, type DiffKind, type DiffResolution, type DiffSummary, buildThreeWayDiff, summarizeDiff };