@toolpath/dfm 0.1.0 → 0.2.0

package/dist/index.js

@@ -23,6 +23,7 @@ import {
   parseRuleSetFile,
   peakHeight,
   quantityUnit,
+  readReachCurve,
   runStart,
   serializeRuleSet,
   subjectLabel,
@@ -800,14 +801,24 @@ var countLabel = (count, others) => {
 };
 
 // src/rule-list/rule-set-actions.tsx
-import {
-  useCallback,
-  useEffect as useEffect2,
-  useRef as useRef3,
-  useState as useState6
-} from "react";
+import { useRef as useRef3 } from "react";
 import { CheckIcon, CopyIcon, DownloadSimpleIcon, UploadSimpleIcon } from "@phosphor-icons/react";
 import { Button, cn as cn8 } from "@toolpath/ui";
+
+// src/rule-list/use-timed-value.ts
+import { useCallback, useEffect as useEffect2, useState as useState6 } from "react";
+var useTimedValue = (ms) => {
+  const [box, setBox] = useState6(null);
+  useEffect2(() => {
+    if (box === null) return;
+    const timer = setTimeout(() => setBox(null), ms);
+    return () => clearTimeout(timer);
+  }, [box, ms]);
+  const set = useCallback((value) => setBox({ value }), []);
+  return [box?.value ?? null, set];
+};
+
+// src/rule-list/rule-set-actions.tsx
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var NOTE_MS = 4e3;
 var COPIED_MS = 2e3;
@@ -888,16 +899,6 @@ var ActionLabel = ({ icon, children, hidden = false }) => /* @__PURE__ */ jsxs10
     ]
   }
 );
-var useTimedValue = (ms) => {
-  const [box, setBox] = useState6(null);
-  useEffect2(() => {
-    if (box === null) return;
-    const timer = setTimeout(() => setBox(null), ms);
-    return () => clearTimeout(timer);
-  }, [box, ms]);
-  const set = useCallback((value) => setBox({ value }), []);
-  return [box?.value ?? null, set];
-};
 var downloadRuleSet = (rules) => {
   const url = URL.createObjectURL(
     new Blob([serializeRuleSet(rules.rules)], { type: "application/json" })
@@ -1617,12 +1618,869 @@ var ReachDrawing = ({ curve, units, feature }) => {
     ] })
   ] });
 };
+
+// src/feature-panel/fold-store.ts
+var storageFolds = (storage, prefix) => ({
+  read: (id) => {
+    try {
+      const stored = storage?.getItem(`${prefix}${id}`);
+      return stored === "open" ? true : stored === "shut" ? false : void 0;
+    } catch {
+      return void 0;
+    }
+  },
+  write: (id, open) => {
+    try {
+      storage?.setItem(`${prefix}${id}`, open ? "open" : "shut");
+    } catch {
+    }
+  }
+});
+
+// src/feature-panel/feature-details.tsx
+import { useCallback as useCallback2, useMemo as useMemo7, useState as useState12 } from "react";
+import { CrosshairIcon, InfoIcon } from "@phosphor-icons/react";
+import { Button as Button3, Tooltip, cn as cn12 } from "@toolpath/ui";
+
+// src/feature-panel/feature-name.tsx
+import { cn as cn9 } from "@toolpath/ui";
+
+// src/feature-panel/look.ts
+var resolveLook = (look) => ({
+  rules: look?.rules ?? "sentence",
+  selected: look?.selected ?? "grey",
+  muted: look?.muted ?? "pale"
+});
+var secondaryText = (look) => look.muted === "strong" ? "text-gray dark:text-zinc-300" : "text-gray-400 dark:text-zinc-400";
+var faintText = (look) => look.muted === "strong" ? "text-gray dark:text-zinc-300" : "text-gray-300 dark:text-zinc-500";
+
+// src/feature-panel/feature-name.tsx
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var FeatureName = ({ feature, label, look }) => /* @__PURE__ */ jsxs16(Fragment7, { children: [
+  label ?? featureTypeLabel(feature.featureType),
+  " ",
+  /* @__PURE__ */ jsxs16("span", { className: cn9("font-normal", faintText(look)), children: [
+    "from ",
+    directionLabel(feature.machiningDirection)
+  ] })
+] });
+var RequiredBadge = () => /* @__PURE__ */ jsx18("span", { className: "rounded-full bg-gray-100 px-1.5 text-2xs font-semibold text-gray-500 uppercase dark:bg-zinc-800 dark:text-zinc-300", children: "Required" });
+
+// src/feature-panel/fold-section.tsx
+import { useState as useState10 } from "react";
+import { CaretRightIcon as CaretRightIcon3 } from "@phosphor-icons/react";
+import { cn as cn10 } from "@toolpath/ui";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var FoldSection = ({
+  id,
+  title: title2,
+  action,
+  defaultOpen = true,
+  folds,
+  className,
+  children
+}) => {
+  const [open, setOpen] = useState10(() => folds?.read(id) ?? defaultOpen);
+  return /* @__PURE__ */ jsxs17("section", { className: cn10("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          onClick: () => {
+            setOpen(!open);
+            folds?.write(id, !open);
+          },
+          className: cn10(
+            "flex min-w-0 flex-1 cursor-pointer items-center gap-1 rounded text-left text-2xs font-semibold text-gray-400 uppercase",
+            "hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300",
+            "outline-none focus-visible:ring-2 focus-visible:ring-info/75"
+          ),
+          children: [
+            /* @__PURE__ */ jsx19(
+              CaretRightIcon3,
+              {
+                weight: "bold",
+                className: cn10("size-3 shrink-0 transition-transform duration-150", open && "rotate-90")
+              }
+            ),
+            /* @__PURE__ */ jsx19("span", { className: "truncate", children: title2 })
+          ]
+        }
+      ),
+      action
+    ] }),
+    open ? children : null
+  ] });
+};
+
+// src/feature-panel/read-state.tsx
+import { useEffect as useEffect3, useState as useState11 } from "react";
+import { Button as Button2 } from "@toolpath/ui";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var Reading = ({ children }) => /* @__PURE__ */ jsx20("p", { className: "text-sm text-gray-400 dark:text-zinc-400", role: "status", children });
+var ReadFailure = ({
+  failure
+}) => {
+  const waiting = useWaiting(failure.retryAt);
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-start gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx20("p", { className: "text-danger", role: "alert", children: failure.message }),
+    failure.retry ? /* @__PURE__ */ jsx20(Button2, { variant: "secondary", size: "sm", disabled: waiting, onClick: failure.retry, children: "Retry" }) : null
+  ] });
+};
+var useWaiting = (until) => {
+  const [passed, setPassed] = useState11(void 0);
+  useEffect3(() => {
+    if (until === void 0) return;
+    const timer = setTimeout(() => setPassed(until), Math.max(until - Date.now(), 0));
+    return () => clearTimeout(timer);
+  }, [until]);
+  return until !== void 0 && passed !== until;
+};
+
+// src/feature-panel/pop-outs.tsx
+import { useMemo as useMemo6 } from "react";
+import {
+  ArrowSquareOutIcon,
+  BracketsCurlyIcon,
+  ChartLineIcon,
+  TableIcon
+} from "@phosphor-icons/react";
+import { IconButton as IconButton3 } from "@toolpath/ui";
+
+// src/feature-panel/record-sections.tsx
+import { useMemo as useMemo5 } from "react";
+import { CheckIcon as CheckIcon2, CopyIcon as CopyIcon2 } from "@phosphor-icons/react";
+import { IconButton as IconButton2, cn as cn11 } from "@toolpath/ui";
+
+// src/model/feature-record.ts
+var MAX_DATASHEET_FIELDS = 500;
+var formatLeaf = (value) => typeof value === "number" ? String(Number(value.toFixed(4))) : typeof value === "string" ? value : value === null ? "null" : String(value);
+var datasheetFields = (datasheet) => {
+  const fields = [];
+  let more = false;
+  const walk = (value, path) => {
+    if (fields.length >= MAX_DATASHEET_FIELDS) {
+      more = true;
+      return;
+    }
+    if (Array.isArray(value)) {
+      if (value.every((each) => typeof each !== "object" || each === null)) {
+        fields.push({ path, value: value.length === 0 ? "[]" : value.map(formatLeaf).join(", ") });
+      } else {
+        value.forEach((each, index) => walk(each, `${path}[${index}]`));
+      }
+    } else if (typeof value === "object" && value !== null) {
+      const entries = Object.entries(value);
+      if (entries.length === 0) fields.push({ path, value: "{}" });
+      for (const [key, each] of entries) walk(each, path ? `${path}.${key}` : key);
+    } else {
+      fields.push({ path, value: formatLeaf(value) });
+    }
+  };
+  if (datasheet !== null && datasheet !== void 0) walk(datasheet, "");
+  return { fields, more };
+};
+
+// src/feature-panel/record-sections.tsx
+import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var COPIED_MS2 = 1500;
+var RecordSections = ({
+  record,
+  look,
+  folds,
+  popOut
+}) => {
+  const value = record.status === "ready" ? record.value : null;
+  const { fields, more } = useMemo5(() => datasheetFields(value?.datasheet), [value]);
+  const json = useMemo5(() => value ? JSON.stringify(value, null, 2) : "", [value]);
+  if (record.status === "ready" && !value) return null;
+  const waiting = record.status === "loading" ? /* @__PURE__ */ jsx21(Reading, { children: "Reading the feature\u2019s record\u2026" }) : record.status === "error" ? /* @__PURE__ */ jsx21(ReadFailure, { failure: record }) : null;
+  const count = more ? `${MAX_DATASHEET_FIELDS}+` : String(fields.length);
+  return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    /* @__PURE__ */ jsx21(
+      FoldSection,
+      {
+        id: "datasheet",
+        defaultOpen: false,
+        title: value ? `All datasheet fields (${count})` : "All datasheet fields",
+        action: value ? popOut?.("datasheet") : null,
+        folds,
+        children: waiting ?? /* @__PURE__ */ jsx21(DatasheetFields, { record: value, look })
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      FoldSection,
+      {
+        id: "raw",
+        defaultOpen: false,
+        title: "Raw API record",
+        action: value ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
+          /* @__PURE__ */ jsx21(CopyButton, { text: json }),
+          popOut?.("raw")
+        ] }) : null,
+        folds,
+        children: waiting ?? /* @__PURE__ */ jsx21(RawRecord, { json })
+      }
+    )
+  ] });
+};
+var DatasheetFields = ({ record, look, wide = false }) => {
+  const { fields } = useMemo5(() => datasheetFields(record?.datasheet), [record]);
+  return record?.datasheet ? /* @__PURE__ */ jsx21(
+    "dl",
+    {
+      className: cn11(
+        "grid grid-cols-[minmax(0,1fr)_auto] gap-y-0.5 text-xs",
+        wide ? "gap-x-4 p-4" : "gap-x-3"
+      ),
+      children: fields.map((field) => /* @__PURE__ */ jsxs19("div", { className: "contents", children: [
+        /* @__PURE__ */ jsx21("dt", { className: cn11("truncate font-mono", secondaryText(look)), title: field.path, children: field.path }),
+        /* @__PURE__ */ jsx21(
+          "dd",
+          {
+            className: cn11(
+              "truncate text-right font-mono text-gray-600 tabular-nums select-text dark:text-zinc-100",
+              wide ? "max-w-60" : "max-w-40"
+            ),
+            title: field.value,
+            children: field.value
+          }
+        )
+      ] }, field.path))
+    }
+  ) : /* @__PURE__ */ jsx21("p", { className: cn11("text-sm", secondaryText(look), wide && "p-4"), children: "The API sent no datasheet for this feature." });
+};
+var RawRecord = ({
+  json,
+  wide = false
+}) => /* @__PURE__ */ jsx21(
+  "pre",
+  {
+    className: cn11(
+      "font-mono text-2xs leading-relaxed text-gray-600 select-text dark:text-zinc-200",
+      wide ? "p-4" : "max-h-80 overflow-auto rounded bg-gray-50 p-2 dark:bg-zinc-800/60"
+    ),
+    children: json
+  }
+);
+var CopyButton = ({ text }) => {
+  const [copied, setCopied] = useTimedValue(COPIED_MS2);
+  return /* @__PURE__ */ jsx21(
+    IconButton2,
+    {
+      "aria-label": copied ? "Copied" : "Copy raw record",
+      title: "Copy",
+      variant: "muted",
+      size: "sm",
+      onClick: () => {
+        void navigator.clipboard?.writeText(text).then(() => setCopied(true)).catch(() => void 0);
+      },
+      children: copied ? /* @__PURE__ */ jsx21(CheckIcon2, { weight: "bold" }) : /* @__PURE__ */ jsx21(CopyIcon2, { weight: "bold" })
+    }
+  );
+};
+
+// src/feature-panel/pop-outs.tsx
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+var TITLES = {
+  reach: "Reach",
+  datasheet: "All datasheet fields",
+  raw: "Raw API record"
+};
+var LABELS = {
+  reach: "Pop out the reach drawing",
+  datasheet: "Pop out the datasheet fields",
+  raw: "Pop out the raw record"
+};
+var PopOutButton = ({
+  id,
+  onOpen
+}) => /* @__PURE__ */ jsx22(
+  IconButton3,
+  {
+    "aria-label": LABELS[id],
+    title: "Pop out, larger",
+    variant: "muted",
+    size: "sm",
+    onClick: () => onOpen(id),
+    children: /* @__PURE__ */ jsx22(ArrowSquareOutIcon, { weight: "bold" })
+  }
+);
+var PopOuts = ({
+  open,
+  onClose,
+  Window,
+  subtitle,
+  record,
+  units,
+  profile,
+  look
+}) => {
+  const curve = useMemo6(() => readReachCurve(record?.datasheet), [record]);
+  const json = useMemo6(() => record ? JSON.stringify(record, null, 2) : "", [record]);
+  if (!record) return null;
+  return /* @__PURE__ */ jsxs20(Fragment9, { children: [
+    open.has("reach") && curve ? /* @__PURE__ */ jsx22(
+      Window,
+      {
+        id: "reach",
+        title: TITLES.reach,
+        subtitle,
+        icon: /* @__PURE__ */ jsx22(ChartLineIcon, { weight: "bold" }),
+        onClose: () => onClose("reach"),
+        children: /* @__PURE__ */ jsx22(ReachDrawing, { curve, units, feature: profile })
+      }
+    ) : null,
+    open.has("datasheet") ? /* @__PURE__ */ jsx22(
+      Window,
+      {
+        id: "datasheet",
+        title: TITLES.datasheet,
+        subtitle,
+        icon: /* @__PURE__ */ jsx22(TableIcon, { weight: "bold" }),
+        onClose: () => onClose("datasheet"),
+        children: /* @__PURE__ */ jsx22(DatasheetFields, { record, look, wide: true })
+      }
+    ) : null,
+    open.has("raw") ? /* @__PURE__ */ jsx22(
+      Window,
+      {
+        id: "raw",
+        title: TITLES.raw,
+        subtitle,
+        icon: /* @__PURE__ */ jsx22(BracketsCurlyIcon, { weight: "bold" }),
+        action: /* @__PURE__ */ jsx22(CopyButton, { text: json }),
+        onClose: () => onClose("raw"),
+        children: /* @__PURE__ */ jsx22(RawRecord, { json, wide: true })
+      }
+    ) : null
+  ] });
+};
+
+// src/feature-panel/feature-details.tsx
+import { Fragment as Fragment10, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+var FeatureDetails = ({
+  feature,
+  units,
+  directionColor,
+  profile,
+  label,
+  required,
+  onFrame,
+  actions,
+  status,
+  children,
+  rules,
+  measurements,
+  record,
+  PopOut,
+  look: lookOption,
+  folds
+}) => {
+  const look = resolveLook(lookOption);
+  const name = /* @__PURE__ */ jsx23(FeatureName, { feature, label, look });
+  const [out, setOut] = useState12(/* @__PURE__ */ new Set());
+  const openOut = useCallback2((id) => setOut((was) => new Set(was).add(id)), []);
+  const closeOut = useCallback2(
+    (id) => setOut((was) => {
+      const next = new Set(was);
+      next.delete(id);
+      return next;
+    }),
+    []
+  );
+  const popOut = PopOut ? (id) => /* @__PURE__ */ jsx23(PopOutButton, { id, onOpen: openOut }) : void 0;
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx23("h3", { className: "truncate text-sm font-semibold text-gray-600 dark:text-zinc-100", children: name }),
+          /* @__PURE__ */ jsxs21("p", { className: cn12("flex flex-wrap items-center gap-1.5 text-xs", secondaryText(look)), children: [
+            /* @__PURE__ */ jsx23(Swatch, { color: directionColor, className: "size-2.5" }),
+            "Machined from ",
+            directionLabel(feature.machiningDirection),
+            required ? /* @__PURE__ */ jsx23(RequiredBadge, {}) : null,
+            status
+          ] })
+        ] }),
+        actions,
+        onFrame ? /* @__PURE__ */ jsx23(Button3, { variant: "secondary", size: "sm", onClick: onFrame, className: "shrink-0", children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx23(CrosshairIcon, { weight: "bold", className: "size-3.5" }),
+          "Show this feature"
+        ] }) }) : null
+      ] }),
+      children
+    ] }),
+    /* @__PURE__ */ jsx23(FoldSection, { id: "rules", title: "Rules broken", folds, children: /* @__PURE__ */ jsx23(BrokenRuleList, { rules, look }) }),
+    /* @__PURE__ */ jsx23(MeasurementSections, { measurements, look, folds }),
+    /* @__PURE__ */ jsx23(
+      ReachSection2,
+      {
+        record,
+        units,
+        profile,
+        folds,
+        action: popOut?.("reach")
+      }
+    ),
+    /* @__PURE__ */ jsx23(RecordSections, { record, look, folds, popOut }),
+    PopOut ? /* @__PURE__ */ jsx23(
+      PopOuts,
+      {
+        open: out,
+        onClose: closeOut,
+        Window: PopOut,
+        subtitle: name,
+        record: record.status === "ready" ? record.value : null,
+        units,
+        profile,
+        look
+      }
+    ) : null
+  ] });
+};
+var BrokenRuleList = ({
+  rules,
+  look
+}) => rules.length > 0 ? /* @__PURE__ */ jsx23("ul", { className: "flex flex-col gap-1", children: rules.map((rule) => /* @__PURE__ */ jsxs21(
+  "li",
+  {
+    className: "flex items-start gap-2 text-sm text-gray-600 dark:text-zinc-100",
+    children: [
+      /* @__PURE__ */ jsx23(Swatch, { color: rule.color, className: "mt-0.5" }),
+      /* @__PURE__ */ jsx23(Explained, { note: rule.note, children: /* @__PURE__ */ jsx23("span", { className: "min-w-0 flex-1", children: rule.text }) }),
+      rule.figure ? /* @__PURE__ */ jsxs21(
+        "span",
+        {
+          className: cn12(
+            "shrink-0 tabular-nums",
+            look.rules === "result" ? "font-semibold" : secondaryText(look)
+          ),
+          style: look.rules === "result" ? { color: rule.color } : void 0,
+          children: [
+            rule.figure,
+            look.rules === "result" && rule.limit ? /* @__PURE__ */ jsx23("span", { className: "ml-1 font-normal opacity-60", children: rule.limit }) : null
+          ]
+        }
+      ) : null
+    ]
+  },
+  rule.key
+)) }) : /* @__PURE__ */ jsx23(None, { look });
+var Explained = ({ note, children }) => note ? /* @__PURE__ */ jsx23(Tooltip, { tip: note, side: "left", children: /* @__PURE__ */ jsx23(
+  "span",
+  {
+    tabIndex: 0,
+    className: "min-w-0 flex-1 rounded outline-none focus-visible:ring-2 focus-visible:ring-info/75",
+    children
+  }
+) }) : children;
+var None = ({ look }) => /* @__PURE__ */ jsx23("p", { className: cn12("text-sm", secondaryText(look)), children: "None" });
+var MeasurementSections = ({ measurements, look, folds }) => {
+  if (measurements.status !== "ready") {
+    return /* @__PURE__ */ jsx23(Fragment10, { children: /* @__PURE__ */ jsx23(FoldSection, { id: "measurements", title: "Measurements", folds, children: measurements.status === "loading" ? /* @__PURE__ */ jsx23(Reading, { children: "Reading the feature\u2019s datasheet\u2026" }) : /* @__PURE__ */ jsx23(ReadFailure, { failure: measurements }) }) });
+  }
+  const measured = measurements.value.filter((row) => !row.milling);
+  const milling = measurements.value.filter((row) => row.milling);
+  return /* @__PURE__ */ jsxs21(Fragment10, { children: [
+    /* @__PURE__ */ jsx23(FoldSection, { id: "measurements", title: "Measurements", folds, children: /* @__PURE__ */ jsx23(MeasurementList, { rows: measured, look }) }),
+    milling.length > 0 ? /* @__PURE__ */ jsx23(FoldSection, { id: "milling", title: "Milling considerations", folds, children: /* @__PURE__ */ jsx23(MeasurementList, { rows: milling, look }) }) : null
+  ] });
+};
+var MeasurementList = ({ rows, look }) => rows.length > 0 ? /* @__PURE__ */ jsx23("dl", { className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 text-sm", children: rows.map((row) => /* @__PURE__ */ jsxs21("div", { className: "contents", children: [
+  /* @__PURE__ */ jsxs21("dt", { className: cn12("flex items-center gap-1", secondaryText(look)), children: [
+    row.label,
+    /* @__PURE__ */ jsx23(Derivation, { lines: row.derivation, look })
+  ] }),
+  /* @__PURE__ */ jsx23("dd", { className: "text-right text-gray-600 tabular-nums dark:text-zinc-100", title: row.alt, children: row.value })
+] }, row.key)) }) : /* @__PURE__ */ jsx23(None, { look });
+var Derivation = ({
+  lines,
+  look
+}) => lines.length > 0 ? /* @__PURE__ */ jsx23(
+  Tooltip,
+  {
+    side: "left",
+    hoverable: true,
+    tip: /* @__PURE__ */ jsx23("div", { className: "flex max-w-sm flex-col gap-0.5 font-mono text-2xs leading-snug whitespace-pre-wrap", children: lines.map((line, index) => /* @__PURE__ */ jsx23("span", { children: line }, index)) }),
+    children: /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        "aria-label": "How this was measured",
+        className: cn12(
+          "shrink-0 rounded outline-none hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-info/75 dark:hover:text-zinc-300",
+          faintText(look)
+        ),
+        children: /* @__PURE__ */ jsx23(InfoIcon, { weight: "bold", className: "size-3" })
+      }
+    )
+  }
+) : null;
+var ReachSection2 = ({ record, units, profile, folds, action }) => {
+  const curve = useMemo7(
+    () => record.status === "ready" ? readReachCurve(record.value?.datasheet) : null,
+    [record]
+  );
+  if (record.status === "ready" && !curve) return null;
+  return /* @__PURE__ */ jsx23(FoldSection, { id: "reach", title: "Reach", folds, action: curve ? action : null, children: record.status === "loading" ? /* @__PURE__ */ jsx23(Reading, { children: "Reading the reach curve\u2026" }) : record.status === "error" ? /* @__PURE__ */ jsx23(ReadFailure, { failure: record }) : curve ? /* @__PURE__ */ jsx23(ReachChart, { curve, units, feature: profile }) : null });
+};
+
+// src/feature-panel/candidate-list.tsx
+import { XIcon } from "@phosphor-icons/react";
+import { IconButton as IconButton4, cn as cn13 } from "@toolpath/ui";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var candidateListKeys = listKeys("candidates");
+var faceLetter = (index) => String.fromCharCode(65 + index % 26);
+var FaceLetter = ({
+  index,
+  active
+}) => /* @__PURE__ */ jsx24(
+  "span",
+  {
+    className: cn13(
+      "inline-flex size-4 shrink-0 items-center justify-center rounded-sm text-2xs font-bold",
+      active ? "bg-info text-white" : "bg-gray-100 text-gray-500 dark:bg-zinc-800 dark:text-zinc-300"
+    ),
+    children: faceLetter(index)
+  }
+);
+var CandidateList = ({
+  rows,
+  selected,
+  onSelect,
+  onHover,
+  face,
+  look: lookOption,
+  folds
+}) => {
+  const look = resolveLook(lookOption);
+  const count = `Candidate features (${rows.length})`;
+  return /* @__PURE__ */ jsx24("div", { className: "border-b border-gray-100 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx24(
+    FoldSection,
+    {
+      id: face ? `candidates-${faceLetter(face.index)}` : "candidates",
+      title: face ? /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx24(FaceLetter, { index: face.index, active: face.active }),
+        count
+      ] }) : count,
+      action: face?.onStop ? /* @__PURE__ */ jsx24(
+        IconButton4,
+        {
+          "aria-label": `Stop comparing face ${faceLetter(face.index)}`,
+          variant: "muted",
+          size: "sm",
+          onClick: face.onStop,
+          children: /* @__PURE__ */ jsx24(XIcon, { weight: "bold" })
+        }
+      ) : null,
+      folds,
+      className: "px-2",
+      children: /* @__PURE__ */ jsx24("ul", { className: "-mx-2 flex flex-col gap-0.5", children: rows.map((row) => /* @__PURE__ */ jsx24(
+        Row,
+        {
+          row,
+          chosen: row.feature.tag === selected,
+          onSelect,
+          onHover,
+          look
+        },
+        row.feature.tag
+      )) })
+    }
+  ) });
+};
+var Row = ({ row, chosen, onSelect, onHover, look }) => {
+  const { feature } = row;
+  const info = look.selected === "info";
+  return /* @__PURE__ */ jsxs22(
+    "li",
+    {
+      className: cn13(
+        "flex items-center gap-1",
+        info && "rounded border pr-1",
+        info && (chosen ? "border-info/60 bg-info/15" : "border-transparent")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            type: "button",
+            "data-list-item": "candidates",
+            "data-follow": true,
+            "aria-pressed": chosen,
+            onClick: () => onSelect(feature.tag),
+            onPointerEnter: onHover ? () => onHover(feature.tag) : void 0,
+            onPointerLeave: onHover ? () => onHover(null) : void 0,
+            className: cn13(
+              "flex min-w-0 flex-1 cursor-pointer flex-col rounded px-2 py-1.5 text-left text-sm",
+              "outline-none focus-visible:ring-2 focus-visible:ring-info/75",
+              "text-gray-600 dark:text-zinc-200",
+              info ? "hover:bg-gray-50 dark:hover:bg-zinc-800/60" : "hover:bg-gray-100 dark:hover:bg-zinc-800",
+              chosen && (info ? "font-medium" : "bg-gray-100 font-semibold dark:bg-zinc-800")
+            ),
+            children: [
+              /* @__PURE__ */ jsxs22("span", { className: "flex w-full items-center gap-2", children: [
+                row.color ? /* @__PURE__ */ jsx24(Swatch, { color: row.color }) : /* @__PURE__ */ jsx24("span", { "aria-hidden": true, className: "size-4 shrink-0" }),
+                /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 truncate", children: /* @__PURE__ */ jsx24(FeatureName, { feature, label: row.label, look }) }),
+                row.ruleCount ? /* @__PURE__ */ jsxs22("span", { className: cn13("text-2xs tabular-nums", secondaryText(look)), children: [
+                  row.ruleCount,
+                  " ",
+                  row.ruleCount === 1 ? "rule" : "rules"
+                ] }) : null,
+                row.required ? /* @__PURE__ */ jsx24(RequiredBadge, {}) : null,
+                row.detail ? /* @__PURE__ */ jsx24("span", { className: cn13("max-w-32 shrink-0 truncate text-xs", secondaryText(look)), children: row.detail }) : null
+              ] }),
+              row.note ? /* @__PURE__ */ jsx24("span", { className: "pl-6 text-2xs text-warning-darken", children: row.note }) : null
+            ]
+          }
+        ),
+        row.action
+      ]
+    }
+  );
+};
+
+// src/feature-panel/comparison-table.tsx
+import { useMemo as useMemo8 } from "react";
+import { cn as cn14 } from "@toolpath/ui";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+var DASH = "\u2014";
+var ComparisonTable = ({
+  faces,
+  active,
+  onSelect,
+  onHover,
+  look: lookOption,
+  folds
+}) => {
+  const look = resolveLook(lookOption);
+  const rows = useMemo8(() => {
+    const row = (key, label, read) => {
+      const values = faces.map((face) => face.feature ? read(face, face.feature) : null);
+      const texts = values.map((value) => value?.text ?? DASH);
+      return {
+        key,
+        label,
+        cells: values.map((value) => value?.node ?? value?.text ?? DASH),
+        differs: new Set(texts).size > 1
+      };
+    };
+    const fixed = [
+      row("type", "Type", (_, feature) => ({ text: featureTypeLabel(feature.featureType) })),
+      row("direction", "Machined from", (face, feature) => {
+        const text = directionLabel(feature.machiningDirection);
+        return {
+          text,
+          node: /* @__PURE__ */ jsxs23("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx25(Swatch, { color: face.directionColor, className: "size-2.5" }),
+            text
+          ] })
+        };
+      }),
+      ...faces.some((face) => face.required !== void 0) ? [row("required", "Required", (face) => ({ text: face.required ? "Yes" : "No" }))] : [],
+      row("rules", "Rules broken", (face) => ({
+        text: face.rules.map((rule) => rule.key).join(",") || "None",
+        node: face.rules.length > 0 ? /* @__PURE__ */ jsxs23(
+          "span",
+          {
+            className: "inline-flex items-center gap-0.5",
+            title: face.rules.map((rule) => rule.text).join("\n"),
+            children: [
+              face.rules.map((rule) => /* @__PURE__ */ jsx25(Swatch, { color: rule.color, className: "size-2.5" }, rule.key)),
+              /* @__PURE__ */ jsx25("span", { className: "ml-0.5", children: face.rules.length })
+            ]
+          }
+        ) : "None"
+      }))
+    ];
+    const labels = /* @__PURE__ */ new Map();
+    for (const face of faces)
+      for (const each of face.measurements) labels.set(each.key, labels.get(each.key) ?? each.label);
+    const measured = [...labels].map(([key, label]) => {
+      const values = faces.map((face) => face.measurements.find((each) => each.key === key));
+      return {
+        key,
+        label,
+        cells: values.map((value) => value ? /* @__PURE__ */ jsx25("span", { title: value.alt, children: value.value }) : DASH),
+        differs: new Set(values.map((value) => value?.value ?? DASH)).size > 1
+      };
+    });
+    return [...fixed, ...measured];
+  }, [faces]);
+  return /* @__PURE__ */ jsx25("div", { className: "border-b border-gray-100 p-4 dark:border-zinc-800", children: /* @__PURE__ */ jsx25(FoldSection, { id: "comparison", title: "Comparison", folds, children: /* @__PURE__ */ jsx25("div", { className: "-mx-1 overflow-x-auto", children: /* @__PURE__ */ jsxs23("table", { className: "w-full border-separate border-spacing-x-1 border-spacing-y-0.5 text-sm", children: [
+    /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs23("tr", { children: [
+      /* @__PURE__ */ jsx25("th", { className: "w-0" }),
+      faces.map(({ feature }, index) => /* @__PURE__ */ jsx25("th", { className: "text-left align-bottom font-normal", children: /* @__PURE__ */ jsxs23(
+        "button",
+        {
+          type: "button",
+          disabled: !feature,
+          onClick: () => feature && onSelect(feature.tag, index),
+          onPointerEnter: onHover ? () => onHover(feature?.tag ?? null) : void 0,
+          onPointerLeave: onHover ? () => onHover(null) : void 0,
+          className: cn14(
+            "flex w-full min-w-0 cursor-pointer items-center gap-1.5 rounded px-1 py-1 text-left text-xs",
+            "outline-none focus-visible:ring-2 focus-visible:ring-info/75",
+            "text-gray-600 hover:bg-gray-100 dark:text-zinc-200 dark:hover:bg-zinc-800",
+            index === active && "bg-gray-100 font-semibold dark:bg-zinc-800"
+          ),
+          children: [
+            /* @__PURE__ */ jsx25(FaceLetter, { index, active: index === active }),
+            /* @__PURE__ */ jsx25("span", { className: "min-w-0 truncate", children: feature ? /* @__PURE__ */ jsx25(FeatureName, { feature, look }) : "No feature" })
+          ]
+        }
+      ) }, index))
+    ] }) }),
+    /* @__PURE__ */ jsx25("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs23("tr", { "data-differs": row.differs || void 0, children: [
+      /* @__PURE__ */ jsx25(
+        "th",
+        {
+          scope: "row",
+          className: cn14(
+            "pr-2 text-left align-top font-normal whitespace-nowrap",
+            secondaryText(look)
+          ),
+          children: row.label
+        }
+      ),
+      row.cells.map((cell, index) => /* @__PURE__ */ jsx25(
+        "td",
+        {
+          className: cn14(
+            "px-1 align-top tabular-nums whitespace-nowrap",
+            row.differs ? "text-gray-600 dark:text-zinc-100" : "text-gray-400 dark:text-zinc-500"
+          ),
+          children: cell
+        },
+        index
+      ))
+    ] }, row.key)) })
+  ] }) }) }) });
+};
+
+// src/feature-panel/feature-panel.tsx
+import { CubeIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
+import { IconButton as IconButton5, ScrollArea as ScrollArea2, cn as cn15 } from "@toolpath/ui";
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+var title = (faces, active, group) => {
+  if (faces.length > 1) return `Comparing ${faces.length} faces`;
+  if (faces[active]?.region !== null && faces[active]?.region !== void 0)
+    return "Features on this face";
+  if (group !== void 0) return `${group} identical holes`;
+  return "Feature";
+};
+var FeaturePanel = ({
+  faces,
+  active,
+  group,
+  comparison,
+  onSelect,
+  onDropFace,
+  onHover,
+  onClose,
+  headerProps,
+  className,
+  look: lookOption,
+  folds,
+  children
+}) => {
+  const look = resolveLook(lookOption);
+  const comparing = faces.length > 1;
+  const face = faces[active];
+  const heading = title(faces, active, group);
+  return /* @__PURE__ */ jsxs24(
+    "section",
+    {
+      "aria-label": heading,
+      "data-list-root": true,
+      onKeyDown: (event) => {
+        if (event.defaultPrevented || !event.currentTarget.contains(event.target)) return;
+        if (event.key === "Escape") onClose();
+        else candidateListKeys(event);
+      },
+      className: cn15(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded bg-white/90 shadow-lg ring-1 ring-gray-200/70 backdrop-blur-md",
+        "dark:bg-zinc-900/90 dark:ring-zinc-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs24(
+          "header",
+          {
+            ...headerProps,
+            className: cn15(
+              "flex items-center gap-2 border-b border-gray-100 py-2 pr-2 pl-4 select-none dark:border-zinc-800",
+              headerProps?.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx26(CubeIcon, { weight: "bold", className: cn15("size-5 shrink-0", secondaryText(look)) }),
+              /* @__PURE__ */ jsx26("h2", { className: "flex-1 text-sm font-semibold text-gray-600 dark:text-zinc-100", children: heading }),
+              /* @__PURE__ */ jsx26(IconButton5, { "aria-label": "Close", variant: "muted", onClick: onClose, children: /* @__PURE__ */ jsx26(XIcon2, { weight: "bold" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs24(ScrollArea2, { className: "min-h-0 flex-1", children: [
+          comparing ? /* @__PURE__ */ jsxs24(Fragment11, { children: [
+            faces.map((each, index) => /* @__PURE__ */ jsx26(
+              CandidateList,
+              {
+                rows: each.rows,
+                selected: each.selected,
+                onSelect: (tag) => onSelect(tag, index),
+                onHover,
+                face: {
+                  index,
+                  active: index === active,
+                  ...onDropFace ? { onStop: () => onDropFace(index) } : {}
+                },
+                look: lookOption,
+                folds
+              },
+              `${each.region ?? "list"}-${index}`
+            )),
+            comparison ? /* @__PURE__ */ jsx26(
+              ComparisonTable,
+              {
+                faces: comparison,
+                active,
+                onSelect,
+                onHover,
+                look: lookOption,
+                folds
+              }
+            ) : null
+          ] }) : face && face.region !== null ? /* @__PURE__ */ jsx26(
+            CandidateList,
+            {
+              rows: face.rows,
+              selected: face.selected,
+              onSelect: (tag) => onSelect(tag, active),
+              onHover,
+              look: lookOption,
+              folds
+            }
+          ) : null,
+          face?.selected ? children : /* @__PURE__ */ jsx26("p", { className: cn15("px-4 py-3 text-sm", secondaryText(look)), children: face && face.rows.length > 0 ? "Choose a feature to read its details." : "No feature owns this face." })
+        ] })
+      ]
+    }
+  );
+};
 export {
+  CandidateList,
+  ComparisonTable,
+  FeatureDetails,
+  FeaturePanel,
   ReachChart,
   ReachDrawing,
   RuleList,
   Swatch,
+  candidateListKeys,
   isField,
   listKeys,
-  ruleListKeys
+  ruleListKeys,
+  storageFolds
 };