@toolpath/dfm 0.1.0 → 0.2.1

package/dist/index.js

@@ -23,6 +23,7 @@ import {
   parseRuleSetFile,
   peakHeight,
   quantityUnit,
+  readReachCurve,
   runStart,
   serializeRuleSet,
   subjectLabel,
@@ -36,7 +37,7 @@ import {
 } from "./chunk-5MPHT7BC.js";
 
 // src/rule-list/rule-list.tsx
-import { useMemo as useMemo2, useState as useState7 } from "react";
+import { useMemo as useMemo2, useState as useState8 } from "react";
 import { ScrollArea } from "@toolpath/ui";
 
 // src/rule-list/list-keys.ts
@@ -69,48 +70,31 @@ var currentIndex = (items, active) => {
 var isField = (target) => target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && target.type !== "color" && target.type !== "button" || target instanceof HTMLElement && target.isContentEditable;
 
 // src/rule-list/new-rule.tsx
-import { useState } from "react";
-import { cn as cn2 } from "@toolpath/ui";
+import { useState as useState2 } from "react";
 
-// src/rule-list/options.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MORE = "__more";
-var showMore = (select, setAll) => {
-  setAll(true);
-  requestAnimationFrame(() => {
-    try {
-      select.showPicker();
-    } catch {
-      select.focus();
-    }
-  });
-};
-var option = (value, label) => /* @__PURE__ */ jsx("option", { value, children: label }, value);
-var SubjectOptions = ({
-  current,
-  all
-}) => {
+// src/rule-list/options.ts
+var subjectChoices = (current, all) => {
   const quick = [...QUICK_SUBJECTS, ...QUICK_SUBJECTS.includes(current) ? [] : [current]];
+  const first = { choices: quick.map((value) => ({ value, label: subjectLabel(value) })) };
+  if (!all) return { groups: [first], more: "More feature types\u2026" };
   const rest = FEATURE_SUBJECTS.filter((each) => !quick.includes(each.value));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    quick.map((value) => option(value, subjectLabel(value))),
-    all ? /* @__PURE__ */ jsx("optgroup", { label: "More feature types", children: rest.map((each) => option(each.value, each.label)) }) : option(MORE, "More feature types\u2026")
-  ] });
+  return { groups: [first, { heading: "More feature types", choices: rest }] };
 };
-var MetricOptions = ({
-  subject,
-  current,
-  all
-}) => {
+var metricChoices = (subject, current, all) => {
   const offered = metricsForSubject(subject);
   const quick = offered.filter((each) => QUICK_METRICS.includes(each.key) || each.key === current);
   quick.sort((a, b) => rank(a.key) - rank(b.key));
   const rest = offered.filter((each) => !quick.includes(each));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    quick.map((each) => option(each.key, each.label)),
-    all ? grouped(rest).map(([group, metrics]) => /* @__PURE__ */ jsx("optgroup", { label: group, children: metrics.map((each) => option(each.key, each.label)) }, group)) : rest.length > 0 ? option(MORE, "More measures\u2026") : null
-  ] });
+  const first = { choices: quick.map(choice) };
+  if (!all) return { groups: [first], more: rest.length > 0 ? "More measures\u2026" : void 0 };
+  return {
+    groups: [
+      first,
+      ...grouped(rest).map(([heading, metrics]) => ({ heading, choices: metrics.map(choice) }))
+    ]
+  };
 };
+var choice = ({ key, label }) => ({ value: key, label });
 var rank = (key) => {
   const at = QUICK_METRICS.indexOf(key);
   return at === -1 ? QUICK_METRICS.length : at;
@@ -121,6 +105,17 @@ var grouped = (items) => {
   return [...groups];
 };
 
+// src/rule-list/picker.tsx
+import {
+  Fragment,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { CheckIcon } from "@phosphor-icons/react";
+import { Menu, cn as cn2 } from "@toolpath/ui";
+
 // src/rule-list/styles.ts
 import { cn } from "@toolpath/ui";
 var FOCUS_RING = "outline-none focus-visible:ring-2 focus-visible:ring-info/75";
@@ -131,10 +126,157 @@ var WORD = cn(
   "outline-none focus-visible:bg-gray-100 focus-visible:ring-2 focus-visible:ring-info/75 dark:focus-visible:bg-zinc-700"
 );
 
+// src/rule-list/picker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HEADING = "px-2 pt-1.5 pb-1 text-[10px] font-semibold tracking-wider text-gray-300 uppercase font-body dark:text-zinc-500";
+var Picker = ({
+  label,
+  value,
+  choices,
+  onChange,
+  onMore,
+  placeholder,
+  title: title2,
+  className,
+  autoFocus
+}) => {
+  const id = useId();
+  const held = useRef(null);
+  const [holding, setHolding] = useState(0);
+  const hold = (next) => {
+    held.current = next;
+    if (next) setHolding((count) => count + 1);
+  };
+  const flat = choices.groups.flatMap((group) => group.choices);
+  const at = flat.findIndex((choice2) => choice2.value === value);
+  const shown = flat[at]?.label ?? placeholder ?? value;
+  const starts = choices.groups.map(
+    (_, g) => choices.groups.slice(0, g).reduce((count, group) => count + group.choices.length, 0)
+  );
+  useEffect(() => {
+    if (holding === 0) return;
+    const frame = requestAnimationFrame(() => focusHeld(id, held.current));
+    return () => cancelAnimationFrame(frame);
+  }, [holding, id]);
+  return (
+    // A click on the word, in its menu or on the menu's backdrop is the picker's: React would carry
+    // it up through the portal to the row, which opens on a click.
+    /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxs(Menu, { onOpenChange: (open) => hold(open && at !== -1 ? { index: at, reveal: false } : null), children: [
+      /* @__PURE__ */ jsx(
+        Menu.Trigger,
+        {
+          nativeButton: true,
+          render: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": at === -1 ? label : `${label}: ${shown}`,
+              title: title2,
+              className: cn2(
+                WORD,
+                "data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-zinc-700",
+                className
+              ),
+              autoFocus
+            }
+          ),
+          children: shown
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Menu.Popover,
+        {
+          align: "start",
+          sideOffset: 4,
+          collisionPadding: 8,
+          className: "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto py-1 shadow-lg",
+          onFocus: (event) => {
+            const item = held.current && document.getElementById(itemId(id, held.current.index));
+            if (item && event.target !== item) focusHeld(id, held.current);
+          },
+          onPointerMove: () => hold(null),
+          onKeyDownCapture: () => hold(null),
+          onKeyDown: keepKeys,
+          children: [
+            choices.groups.map((group, g) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              g > 0 ? /* @__PURE__ */ jsx(Menu.Divider, { className: "my-1" }) : null,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-labelledby": group.heading ? `${id}-group-${g}` : void 0,
+                  className: "flex flex-col",
+                  children: [
+                    group.heading ? /* @__PURE__ */ jsx("div", { id: `${id}-group-${g}`, className: HEADING, children: group.heading }) : null,
+                    group.choices.map((choice2, c) => {
+                      const chosen = choice2.value === value;
+                      return /* @__PURE__ */ jsxs(
+                        Menu.Item,
+                        {
+                          id: itemId(id, (starts[g] ?? 0) + c),
+                          label: choice2.label,
+                          onClick: () => {
+                            if (!chosen) onChange(choice2.value);
+                          },
+                          className: "gap-3",
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: choice2.label }),
+                            /* @__PURE__ */ jsx(
+                              CheckIcon,
+                              {
+                                "aria-hidden": true,
+                                weight: "bold",
+                                className: cn2(
+                                  "size-3.5 text-gray-400 dark:text-zinc-300",
+                                  !chosen && "invisible"
+                                )
+                              }
+                            )
+                          ]
+                        },
+                        choice2.value
+                      );
+                    })
+                  ]
+                }
+              )
+            ] }, group.heading ?? g)),
+            choices.more && onMore ? /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                closeOnClick: false,
+                onClick: () => {
+                  hold({ index: flat.length, reveal: true });
+                  onMore();
+                },
+                className: "text-gray-400 dark:text-zinc-400",
+                children: choices.more
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }) })
+  );
+};
+var focusHeld = (picker, held) => {
+  const item = held && document.getElementById(itemId(picker, held.index));
+  if (!item) return;
+  item.focus({ preventScroll: held.reveal });
+  const menu = item.closest('[role="menu"]');
+  const group = item.closest('[role="group"]');
+  if (held.reveal && menu && group)
+    menu.scrollTop += group.getBoundingClientRect().top - menu.getBoundingClientRect().top - 8;
+};
+var itemId = (picker, index) => `${picker}-${index}`;
+var keepKeys = (event) => {
+  if (event.key !== "Tab") event.stopPropagation();
+};
+
 // src/rule-list/new-rule.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var NewRule = ({ onAdd }) => {
-  const [all, setAll] = useState(false);
+  const [all, setAll] = useState2(false);
   return /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-1.5 py-1 pr-1.5", children: [
     /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "size-7 shrink-0" }),
     /* @__PURE__ */ jsx2(
@@ -144,27 +286,23 @@ var NewRule = ({ onAdd }) => {
         className: "mt-1.5 size-4 shrink-0 rounded-full border border-dashed border-gray-300 dark:border-zinc-600"
       }
     ),
-    /* @__PURE__ */ jsx2("p", { className: "min-w-0 flex-1 text-sm leading-7", children: /* @__PURE__ */ jsxs2(
-      "select",
+    /* @__PURE__ */ jsx2("p", { className: "min-w-0 flex-1 text-sm leading-7", children: /* @__PURE__ */ jsx2(
+      Picker,
       {
-        "aria-label": "New rule",
-        className: cn2(WORD, "font-normal text-gray-400 dark:text-zinc-500"),
+        label: "New rule",
+        placeholder: "+ New Rule",
         value: "",
-        onChange: (event) => {
-          if (event.target.value === MORE) showMore(event.currentTarget, setAll);
-          else if (event.target.value) onAdd(event.target.value);
-        },
-        children: [
-          /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: "+ New Rule" }),
-          /* @__PURE__ */ jsx2(SubjectOptions, { current: "any", all })
-        ]
+        choices: subjectChoices("any", all),
+        onChange: onAdd,
+        onMore: () => setAll(true),
+        className: "font-normal text-gray-400 dark:text-zinc-500"
       }
     ) })
   ] });
 };
 
 // src/rule-list/rule-row.tsx
-import { useRef as useRef2, useState as useState5 } from "react";
+import { useRef as useRef3, useState as useState6 } from "react";
 import { CaretRightIcon as CaretRightIcon2, TrashIcon } from "@phosphor-icons/react";
 import { IconButton, cn as cn7 } from "@toolpath/ui";
 
@@ -246,7 +384,7 @@ var FeatureButton = ({
 };
 
 // src/rule-list/hole-group-row.tsx
-import { useRef, useState as useState2 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 import { CaretRightIcon } from "@phosphor-icons/react";
 import { cn as cn4 } from "@toolpath/ui";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -255,8 +393,8 @@ var HoleGroupRow = ({
   direction,
   ...context
 }) => {
-  const [open, setOpen] = useState2(false);
-  const groupRef = useRef(null);
+  const [open, setOpen] = useState3(false);
+  const groupRef = useRef2(null);
   const { rule, check, units, selectedGroup, featureOf, onInspect, onHover, onBack } = context;
   const [first] = row.tags;
   const chosen = selectedGroup?.[0] === first;
@@ -373,10 +511,9 @@ var FeatureRows = ({
 var directionOf = (feature) => feature ? directionLabel(feature.machiningDirection) : "";
 
 // src/rule-list/rule-sentence.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
-// src/rule-list/ops.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+// src/rule-list/ops.ts
 var OP_TITLES = {
   gte: "at least",
   gt: "more than",
@@ -388,44 +525,50 @@ var OP_TITLES = {
 };
 var LOW_SYMBOLS = { gte: "\u2264", gt: "<" };
 var ONE_SIDED = "one:";
-var OneSidedOptions = () => /* @__PURE__ */ jsx6("optgroup", { label: "One-sided", children: OPS.filter((op) => op !== "between").map((op) => /* @__PURE__ */ jsxs6("option", { value: `${ONE_SIDED}${op}`, children: [
-  opSymbol(op),
-  " ",
-  OP_TITLES[op]
-] }, op)) });
+var ONE_SIDED_CHOICES = {
+  heading: "One-sided",
+  choices: OPS.filter((op) => op !== "between").map((op) => ({
+    value: `${ONE_SIDED}${op}`,
+    label: `${opSymbol(op)} ${OP_TITLES[op]}`
+  }))
+};
 var rangeEnd = (rule, chosen, hold) => chosen.startsWith(ONE_SIDED) ? withOp(rule, chosen.slice(ONE_SIDED.length)) : { ...rule, ...hold(chosen) };
 
 // src/rule-list/comparison.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var Comparison = ({ rule, ranged, onChange }) => ranged ? /* @__PURE__ */ jsxs7(
-  "select",
+import { jsx as jsx6 } from "react/jsx-runtime";
+var COMPARISONS = {
+  groups: [{ choices: OPS.map((op) => ({ value: op, label: opSymbol(op) })) }]
+};
+var RANGE_HIGH = {
+  groups: [
+    { heading: "Range", choices: RANGE_HIGHS.map((op) => ({ value: op, label: opSymbol(op) })) },
+    ONE_SIDED_CHOICES
+  ]
+};
+var Comparison = ({ rule, ranged, onChange }) => ranged ? /* @__PURE__ */ jsx6(
+  Picker,
   {
-    "aria-label": "High end",
+    label: "High end",
     title: OP_TITLES[highOf(rule)],
-    className: WORD,
     value: highOf(rule),
-    onChange: (event) => onChange(rangeEnd(rule, event.target.value, (op) => ({ highOp: op }))),
-    children: [
-      /* @__PURE__ */ jsx7("optgroup", { label: "Range", children: RANGE_HIGHS.map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: opSymbol(op) }, op)) }),
-      /* @__PURE__ */ jsx7(OneSidedOptions, {})
-    ]
+    choices: RANGE_HIGH,
+    onChange: (value) => onChange(rangeEnd(rule, value, (op) => ({ highOp: op })))
   }
-) : /* @__PURE__ */ jsx7(
-  "select",
+) : /* @__PURE__ */ jsx6(
+  Picker,
   {
-    "aria-label": "Comparison",
+    label: "Comparison",
     title: OP_TITLES[rule.op],
-    className: WORD,
     value: rule.op,
-    onChange: (event) => onChange(withOp(rule, event.target.value)),
-    children: OPS.map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: opSymbol(op) }, op))
+    choices: COMPARISONS,
+    onChange: (value) => onChange(withOp(rule, value))
   }
 );
 
 // src/rule-list/value-field.tsx
-import { useEffect, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 import { cn as cn5 } from "@toolpath/ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ValueField = ({
   label,
   info,
@@ -434,13 +577,13 @@ var ValueField = ({
   onChange
 }) => {
   const shown = toField(info.quantity, value, units);
-  const [text, setText] = useState3(shown);
-  const [typing, setTyping] = useState3(false);
-  useEffect(() => {
+  const [text, setText] = useState4(shown);
+  const [typing, setTyping] = useState4(false);
+  useEffect2(() => {
     if (!typing) setText(shown);
   }, [shown, typing]);
   const invalid = fromField(info, text, units) === null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "input",
     {
       "aria-label": label,
@@ -467,7 +610,13 @@ var ValueField = ({
 };
 
 // src/rule-list/rule-sentence.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var RANGE_LOW = {
+  groups: [
+    { heading: "Range", choices: RANGE_LOWS.map((op) => ({ value: op, label: LOW_SYMBOLS[op] })) },
+    ONE_SIDED_CHOICES
+  ]
+};
 var RuleSentence = ({
   rule,
   units,
@@ -479,28 +628,25 @@ var RuleSentence = ({
   const presence = info?.quantity === "presence";
   const ranged = info !== void 0 && !flag && rule.op === "between";
   const unit = info ? quantityUnit(info.quantity, units) : "";
-  const [allSubjects, setAllSubjects] = useState4(false);
-  const [allMetrics, setAllMetrics] = useState4(false);
-  const unitSpan = unit ? /* @__PURE__ */ jsx9("span", { className: unit === "\xB0" || unit === "%" ? "" : "pl-1", children: unit }) : null;
-  return /* @__PURE__ */ jsxs8("p", { className: "min-w-0 flex-1 text-sm leading-7 text-gray-500 dark:text-zinc-400", children: [
-    /* @__PURE__ */ jsx9(
-      "select",
+  const [allSubjects, setAllSubjects] = useState5(false);
+  const [allMetrics, setAllMetrics] = useState5(false);
+  const unitSpan = unit ? /* @__PURE__ */ jsx8("span", { className: unit === "\xB0" || unit === "%" ? "" : "pl-1", children: unit }) : null;
+  return /* @__PURE__ */ jsxs6("p", { className: "min-w-0 flex-1 text-sm leading-7 text-gray-500 dark:text-zinc-400", children: [
+    /* @__PURE__ */ jsx8(
+      Picker,
       {
-        "aria-label": "Features",
-        className: WORD,
+        label: "Features",
         value: rule.subject,
-        onChange: (event) => {
-          if (event.target.value === MORE) showMore(event.currentTarget, setAllSubjects);
-          else onChange(withSubject(rule, event.target.value, units));
-        },
-        children: /* @__PURE__ */ jsx9(SubjectOptions, { current: rule.subject, all: allSubjects })
+        choices: subjectChoices(rule.subject, allSubjects),
+        onChange: (value) => onChange(withSubject(rule, value, units)),
+        onMore: () => setAllSubjects(true)
       }
     ),
     presence ? ", " : " with ",
-    /* @__PURE__ */ jsxs8("span", { className: ranged ? "whitespace-nowrap" : void 0, children: [
-      ranged ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsxs8("span", { className: "whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs6("span", { className: ranged ? "whitespace-nowrap" : void 0, children: [
+      ranged ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsxs6("span", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx8(
             ValueField,
             {
               label: "From",
@@ -513,43 +659,36 @@ var RuleSentence = ({
           unitSpan
         ] }),
         " ",
-        /* @__PURE__ */ jsxs8(
-          "select",
+        /* @__PURE__ */ jsx8(
+          Picker,
           {
-            "aria-label": "Low end",
+            label: "Low end",
             title: OP_TITLES[lowOf(rule)],
-            className: WORD,
             value: lowOf(rule),
-            onChange: (event) => onChange(rangeEnd(rule, event.target.value, (op) => ({ lowOp: op }))),
-            children: [
-              /* @__PURE__ */ jsx9("optgroup", { label: "Range", children: RANGE_LOWS.map((op) => /* @__PURE__ */ jsx9("option", { value: op, children: LOW_SYMBOLS[op] }, op)) }),
-              /* @__PURE__ */ jsx9(OneSidedOptions, {})
-            ]
+            choices: RANGE_LOW,
+            onChange: (value) => onChange(rangeEnd(rule, value, (op) => ({ lowOp: op })))
           }
         ),
         " "
       ] }) : null,
-      /* @__PURE__ */ jsx9(
-        "select",
+      /* @__PURE__ */ jsx8(
+        Picker,
         {
-          "aria-label": "Measure",
+          label: "Measure",
           title: info?.hint,
-          className: WORD,
           value: rule.metric,
-          onChange: (event) => {
-            if (event.target.value === MORE) showMore(event.currentTarget, setAllMetrics);
-            else onChange(withMetric(rule, event.target.value, units));
-          },
-          autoFocus,
-          children: /* @__PURE__ */ jsx9(MetricOptions, { subject: rule.subject, current: rule.metric, all: allMetrics })
+          choices: metricChoices(rule.subject, rule.metric, allMetrics),
+          onChange: (value) => onChange(withMetric(rule, value, units)),
+          onMore: () => setAllMetrics(true),
+          autoFocus
         }
       ),
-      info && !flag ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      info && !flag ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
         " ",
-        /* @__PURE__ */ jsx9(Comparison, { rule, ranged, onChange }),
+        /* @__PURE__ */ jsx8(Comparison, { rule, ranged, onChange }),
         " ",
-        /* @__PURE__ */ jsxs8("span", { className: "whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs6("span", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx8(
             ValueField,
             {
               label: ranged ? "Up to" : "Value",
@@ -568,7 +707,7 @@ var RuleSentence = ({
 
 // src/rule-list/swatch.tsx
 import { cn as cn6 } from "@toolpath/ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var swatchKeys = listKeys("swatches", "horizontal");
 var Swatch = ({
   color,
@@ -580,7 +719,7 @@ var Swatch = ({
   ref
 }) => {
   const dot = cn6("size-4 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/15", className);
-  return onClick ? /* @__PURE__ */ jsx10(
+  return onClick ? /* @__PURE__ */ jsx9(
     "button",
     {
       ref,
@@ -596,12 +735,12 @@ var Swatch = ({
       ),
       style: { backgroundColor: color }
     }
-  ) : /* @__PURE__ */ jsx10("span", { "aria-hidden": true, className: dot, style: { backgroundColor: color } });
+  ) : /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: dot, style: { backgroundColor: color } });
 };
 var ColorPicker = ({
   value,
   onChange
-}) => /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap items-center gap-1.5 py-1", onKeyDown: swatchKeys, children: RULE_COLORS.map((each) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap items-center gap-1.5 py-1", onKeyDown: swatchKeys, children: RULE_COLORS.map((each) => /* @__PURE__ */ jsx9(
   "button",
   {
     type: "button",
@@ -621,7 +760,7 @@ var ColorPicker = ({
 )) });
 
 // src/rule-list/rule-row.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var isControl = (target) => target instanceof Element && target.closest("button, select, input, a") !== null;
 var RuleRow = ({
   rule,
@@ -638,8 +777,8 @@ var RuleRow = ({
   units,
   ...list
 }) => {
-  const [picking, setPicking] = useState5(false);
-  const swatchRef = useRef2(null);
+  const [picking, setPicking] = useState6(false);
+  const swatchRef = useRef3(null);
   const count = result?.tags.length ?? 0;
   const others = result?.otherTags.length ?? 0;
   const canOpen = count + others > 0;
@@ -654,7 +793,7 @@ var RuleRow = ({
       onToggle();
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs7(
     "li",
     {
       className: cn7(
@@ -663,7 +802,7 @@ var RuleRow = ({
         !checking && count === 0 && "opacity-55 transition-opacity focus-within:opacity-100 hover:opacity-100"
       ),
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             onClick: (event) => {
@@ -674,7 +813,7 @@ var RuleRow = ({
               canOpen && "cursor-pointer"
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -686,7 +825,7 @@ var RuleRow = ({
                     "flex size-7 shrink-0 items-center justify-center rounded text-gray-400 dark:text-zinc-400",
                     canOpen ? "cursor-pointer hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-zinc-700 dark:hover:text-zinc-100" : "invisible"
                   ),
-                  children: /* @__PURE__ */ jsx11(
+                  children: /* @__PURE__ */ jsx10(
                     CaretRightIcon2,
                     {
                       weight: "bold",
@@ -695,7 +834,7 @@ var RuleRow = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx10(
                 Swatch,
                 {
                   ref: swatchRef,
@@ -707,9 +846,9 @@ var RuleRow = ({
                   className: "mt-1.5"
                 }
               ),
-              /* @__PURE__ */ jsx11(RuleSentence, { rule, units, onChange, autoFocus: focusOnMount }),
-              /* @__PURE__ */ jsxs9("div", { className: "relative mt-1 shrink-0", children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx10(RuleSentence, { rule, units, onChange, autoFocus: focusOnMount }),
+              /* @__PURE__ */ jsxs7("div", { className: "relative mt-1 shrink-0", children: [
+                /* @__PURE__ */ jsx10(
                   IconButton,
                   {
                     "aria-label": "Remove rule",
@@ -722,10 +861,10 @@ var RuleRow = ({
                       "group-focus-within/rule:pointer-events-auto group-focus-within/rule:opacity-100",
                       "group-hover/rule:pointer-events-auto group-hover/rule:opacity-100"
                     ),
-                    children: /* @__PURE__ */ jsx11(TrashIcon, { weight: "bold" })
+                    children: /* @__PURE__ */ jsx10(TrashIcon, { weight: "bold" })
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx10(
                   CountPill,
                   {
                     count,
@@ -740,7 +879,7 @@ var RuleRow = ({
             ]
           }
         ),
-        picking ? /* @__PURE__ */ jsx11("div", { className: "pb-1 pl-[34px]", children: /* @__PURE__ */ jsx11(
+        picking ? /* @__PURE__ */ jsx10("div", { className: "pb-1 pl-[34px]", children: /* @__PURE__ */ jsx10(
           ColorPicker,
           {
             value: rule.color,
@@ -751,7 +890,7 @@ var RuleRow = ({
             }
           }
         ) }) : null,
-        open && result && check && features && sheets ? /* @__PURE__ */ jsx11(
+        open && result && check && features && sheets ? /* @__PURE__ */ jsx10(
           FeatureRows,
           {
             rule,
@@ -776,7 +915,7 @@ var CountPill = ({
   open,
   canOpen,
   onToggle
-}) => /* @__PURE__ */ jsx11(
+}) => /* @__PURE__ */ jsx10(
   "button",
   {
     type: "button",
@@ -800,22 +939,32 @@ 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 { CheckIcon, CopyIcon, DownloadSimpleIcon, UploadSimpleIcon } from "@phosphor-icons/react";
+import { useRef as useRef4 } from "react";
+import { CheckIcon as CheckIcon2, CopyIcon, DownloadSimpleIcon, UploadSimpleIcon } from "@phosphor-icons/react";
 import { Button, cn as cn8 } from "@toolpath/ui";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/rule-list/use-timed-value.ts
+import { useCallback, useEffect as useEffect3, useState as useState7 } from "react";
+var useTimedValue = (ms) => {
+  const [box, setBox] = useState7(null);
+  useEffect3(() => {
+    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 jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var NOTE_MS = 4e3;
 var COPIED_MS = 2e3;
 var EXPORT_FILE_NAME = "dfm-rules.json";
 var RuleSetActions = ({ rules }) => {
   const [note, setNote] = useTimedValue(NOTE_MS);
   const [copied, setCopied] = useTimedValue(COPIED_MS);
-  const fileInput = useRef3(null);
+  const fileInput = useRef4(null);
   const importRules = async (file) => {
     if (!file) return;
     let text;
@@ -843,23 +992,23 @@ var RuleSetActions = ({ rules }) => {
     setCopied(true);
     setNote("Paste the prompt into an LLM, then import the JSON it writes.");
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 px-4 pt-2 pb-3", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx12(Button, { variant: "secondary", onClick: () => fileInput.current?.click(), children: /* @__PURE__ */ jsx12(ActionLabel, { icon: /* @__PURE__ */ jsx12(UploadSimpleIcon, { weight: "bold" }), children: "Import\u2026" }) }),
-      /* @__PURE__ */ jsx12(Button, { variant: "secondary", onClick: () => downloadRuleSet(rules), children: /* @__PURE__ */ jsx12(ActionLabel, { icon: /* @__PURE__ */ jsx12(DownloadSimpleIcon, { weight: "bold" }), children: "Export" }) }),
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2 px-4 pt-2 pb-3", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx11(Button, { variant: "secondary", onClick: () => fileInput.current?.click(), children: /* @__PURE__ */ jsx11(ActionLabel, { icon: /* @__PURE__ */ jsx11(UploadSimpleIcon, { weight: "bold" }), children: "Import\u2026" }) }),
+      /* @__PURE__ */ jsx11(Button, { variant: "secondary", onClick: () => downloadRuleSet(rules), children: /* @__PURE__ */ jsx11(ActionLabel, { icon: /* @__PURE__ */ jsx11(DownloadSimpleIcon, { weight: "bold" }), children: "Export" }) }),
+      /* @__PURE__ */ jsx11(
         Button,
         {
           variant: "secondary",
           title: "Copies a prompt that walks an LLM through writing a rule set for you",
           onClick: () => void copyPrompt(),
-          children: /* @__PURE__ */ jsxs10("span", { className: "grid justify-items-center *:col-start-1 *:row-start-1", children: [
-            /* @__PURE__ */ jsx12(ActionLabel, { hidden: copied !== null, icon: /* @__PURE__ */ jsx12(CopyIcon, { weight: "bold" }), children: "Copy LLM prompt" }),
-            /* @__PURE__ */ jsx12(ActionLabel, { hidden: copied === null, icon: /* @__PURE__ */ jsx12(CheckIcon, { weight: "bold" }), children: "Copied" })
+          children: /* @__PURE__ */ jsxs8("span", { className: "grid justify-items-center *:col-start-1 *:row-start-1", children: [
+            /* @__PURE__ */ jsx11(ActionLabel, { hidden: copied !== null, icon: /* @__PURE__ */ jsx11(CopyIcon, { weight: "bold" }), children: "Copy LLM prompt" }),
+            /* @__PURE__ */ jsx11(ActionLabel, { hidden: copied === null, icon: /* @__PURE__ */ jsx11(CheckIcon2, { weight: "bold" }), children: "Copied" })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           ref: fileInput,
@@ -874,10 +1023,10 @@ var RuleSetActions = ({ rules }) => {
         }
       )
     ] }),
-    note ? /* @__PURE__ */ jsx12("p", { className: "text-xs text-gray-500 dark:text-zinc-400", role: "status", children: note }) : null
+    note ? /* @__PURE__ */ jsx11("p", { className: "text-xs text-gray-500 dark:text-zinc-400", role: "status", children: note }) : null
   ] });
 };
-var ActionLabel = ({ icon, children, hidden = false }) => /* @__PURE__ */ jsxs10(
+var ActionLabel = ({ icon, children, hidden = false }) => /* @__PURE__ */ jsxs8(
   "span",
   {
     "aria-hidden": hidden || void 0,
@@ -888,16 +1037,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" })
@@ -916,7 +1055,7 @@ var importedNote = (count, skipped, name) => {
 };
 
 // src/rule-list/rule-list.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var ruleListKeys = listKeys("rules");
 var RuleList = ({
   rules,
@@ -926,8 +1065,8 @@ var RuleList = ({
   units,
   ...list
 }) => {
-  const [openIds, setOpenIds] = useState7(/* @__PURE__ */ new Set());
-  const [added, setAdded] = useState7(null);
+  const [openIds, setOpenIds] = useState8(/* @__PURE__ */ new Set());
+  const [added, setAdded] = useState8(null);
   const toggleOpen = (id) => setOpenIds((was) => {
     const next = new Set(was);
     if (!next.delete(id)) next.add(id);
@@ -943,7 +1082,7 @@ var RuleList = ({
   };
   const active = rules.rules.filter(found);
   const none = rules.rules.filter((rule) => !found(rule));
-  const row = (rule) => /* @__PURE__ */ jsx13(
+  const row = (rule) => /* @__PURE__ */ jsx12(
     RuleRow,
     {
       rule,
@@ -964,11 +1103,11 @@ var RuleList = ({
   );
   return (
     // Grows with its rules, and scrolls once the panel can grow no more.
-    /* @__PURE__ */ jsxs11(ScrollArea, { className: "min-h-0 flex-auto", children: [
-      /* @__PURE__ */ jsxs11("ul", { className: "flex flex-col gap-0.5 pt-2 pr-4 pl-2", children: [
+    /* @__PURE__ */ jsxs9(ScrollArea, { className: "min-h-0 flex-auto", children: [
+      /* @__PURE__ */ jsxs9("ul", { className: "flex flex-col gap-0.5 pt-2 pr-4 pl-2", children: [
         active.map(row),
         none.map(row),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12(
           NewRule,
           {
             onAdd: (subject) => {
@@ -979,7 +1118,7 @@ var RuleList = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13(RuleSetActions, { rules })
+      /* @__PURE__ */ jsx12(RuleSetActions, { rules })
     ] })
   );
 };
@@ -988,7 +1127,7 @@ var RuleList = ({
 import { useMemo as useMemo4 } from "react";
 
 // src/reach/reach-section.tsx
-import { useId, useMemo as useMemo3, useState as useState8 } from "react";
+import { useId as useId2, useMemo as useMemo3, useState as useState9 } from "react";
 
 // src/reach/reading.tsx
 import { heightAt } from "@toolpath/tool-support";
@@ -1063,7 +1202,7 @@ var READ = "stroke-sky-600 dark:stroke-sky-400";
 var READ_DOT = "fill-sky-600 dark:fill-sky-400";
 
 // src/reach/reading.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var readingAt = ({ offsets, heights }, offset) => ({
   offset,
   height: heightAt({ horizontalOffset: offsets, verticalOffset: heights }, offset),
@@ -1086,8 +1225,8 @@ var ReadingMark = ({
   const pointerX = x(reading.offset);
   const onRight = pointerX + READ_INSET + textWidth <= width - READ_INSET;
   const labelX = onRight ? pointerX + READ_INSET : Math.min(Math.max(pointerX - READ_INSET, READ_INSET + textWidth), width - READ_INSET);
-  return /* @__PURE__ */ jsxs12("g", { pointerEvents: "none", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx13(
       "line",
       {
         x1: pointerX,
@@ -1099,8 +1238,8 @@ var ReadingMark = ({
         className: READ
       }
     ),
-    /* @__PURE__ */ jsx14("circle", { cx: pointerX, cy: y(reading.height), r: 4, className: READ_DOT }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13("circle", { cx: pointerX, cy: y(reading.height), r: 4, className: READ_DOT }),
+    /* @__PURE__ */ jsx13(
       "text",
       {
         x: labelX,
@@ -1199,8 +1338,8 @@ var sectionGeometry = (whole, feature, width) => {
 };
 
 // src/reach/section-parts.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var Arrows = ({ id }) => /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15(
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var Arrows = ({ id }) => /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14(
   "marker",
   {
     id,
@@ -1210,14 +1349,14 @@ var Arrows = ({ id }) => /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__
     markerWidth: "7",
     markerHeight: "7",
     orient: "auto-start-reverse",
-    children: /* @__PURE__ */ jsx15("path", { d: "M 0 1.5 L 10 5 L 0 8.5 z", className: ARROW })
+    children: /* @__PURE__ */ jsx14("path", { d: "M 0 1.5 L 10 5 L 0 8.5 z", className: ARROW })
   }
 ) });
 var SectionShapes = ({ geometry }) => {
   const { x, floorY, right, featureTopY, featureBottomY, wallTop, feature } = geometry;
   const floorLeft = feature.through ? x(0) : SECTION_PAD.left;
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       "rect",
       {
         x: SECTION_PAD.left,
@@ -1227,7 +1366,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_FILL
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "rect",
       {
         x: floorLeft,
@@ -1237,9 +1376,9 @@ var SectionShapes = ({ geometry }) => {
         className: FLOOR
       }
     ),
-    /* @__PURE__ */ jsx15("path", { d: geometry.materialPath, strokeWidth: 1, className: MATERIAL }),
-    /* @__PURE__ */ jsx15("line", { x1: floorLeft, x2: right, y1: floorY, y2: floorY, strokeWidth: 1, className: LINE }),
-    feature.through ? null : /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14("path", { d: geometry.materialPath, strokeWidth: 1, className: MATERIAL }),
+    /* @__PURE__ */ jsx14("line", { x1: floorLeft, x2: right, y1: floorY, y2: floorY, strokeWidth: 1, className: LINE }),
+    feature.through ? null : /* @__PURE__ */ jsx14(
       "line",
       {
         x1: SECTION_PAD.left,
@@ -1250,7 +1389,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1261,7 +1400,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1277,8 +1416,8 @@ var SectionShapes = ({ geometry }) => {
 };
 var SectionHeadings = ({ geometry }) => {
   const { right } = geometry;
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: geometry.featureHeadingX,
@@ -1290,7 +1429,7 @@ var SectionHeadings = ({ geometry }) => {
         children: geometry.featureHeading
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: right,
@@ -1304,7 +1443,7 @@ var SectionHeadings = ({ geometry }) => {
     )
   ] });
 };
-var FeatureBreak = ({ geometry }) => geometry.featureCut ? /* @__PURE__ */ jsx15(
+var FeatureBreak = ({ geometry }) => geometry.featureCut ? /* @__PURE__ */ jsx14(
   "path",
   {
     d: featureBreak(SECTION_PAD.left, geometry.featureTopY, geometry.featureBottomY),
@@ -1317,9 +1456,9 @@ var FeatureDepth = ({ geometry, units }) => {
   const { x, featureTopY, datumX } = geometry;
   const { depth } = geometry.feature;
   if (depth === null) return null;
-  return /* @__PURE__ */ jsxs13("g", { children: [
-    /* @__PURE__ */ jsx15("title", { children: "Feature depth" }),
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11("g", { children: [
+    /* @__PURE__ */ jsx14("title", { children: "Feature depth" }),
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: SECTION_PAD.left,
@@ -1330,7 +1469,7 @@ var FeatureDepth = ({ geometry, units }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1342,7 +1481,7 @@ var FeatureDepth = ({ geometry, units }) => {
         className: FEATURE_LINE
       }
     ),
-    x(0) - SECTION_PAD.left >= DEPTH_WORD_PX ? /* @__PURE__ */ jsx15(
+    x(0) - SECTION_PAD.left >= DEPTH_WORD_PX ? /* @__PURE__ */ jsx14(
       "text",
       {
         x: SECTION_PAD.left + 4,
@@ -1353,7 +1492,7 @@ var FeatureDepth = ({ geometry, units }) => {
         children: "depth"
       }
     ) : null,
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: datumX + 4,
@@ -1369,8 +1508,8 @@ var FeatureDepth = ({ geometry, units }) => {
 var ReadRun = ({ geometry, units, arrowId }) => {
   const { x, last, cut, floorY, ordinateY } = geometry;
   if (last <= 0 || cut) return null;
-  return /* @__PURE__ */ jsxs13("g", { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11("g", { children: [
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1383,7 +1522,7 @@ var ReadRun = ({ geometry, units, arrowId }) => {
         className: LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(last),
@@ -1394,7 +1533,7 @@ var ReadRun = ({ geometry, units, arrowId }) => {
         className: LINE
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs11(
       "text",
       {
         x: (x(0) + x(last)) / 2,
@@ -1413,8 +1552,8 @@ var ReadRun = ({ geometry, units, arrowId }) => {
 var OffsetOrdinates = (props) => {
   const { geometry, units } = props;
   const { x, y, right, width, floorY, ordinateY } = geometry;
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: Math.min(
@@ -1429,7 +1568,7 @@ var OffsetOrdinates = (props) => {
         children: "XY PLANE DISTANCE FROM FEATURE"
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1440,9 +1579,9 @@ var OffsetOrdinates = (props) => {
         className: LINE
       }
     ),
-    /* @__PURE__ */ jsx15("text", { x: x(0), y: ordinateY + 15, textAnchor: "middle", fontSize: 10, className: TEXT, children: "0" }),
-    geometry.across.map((riser) => /* @__PURE__ */ jsxs13("g", { children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14("text", { x: x(0), y: ordinateY + 15, textAnchor: "middle", fontSize: 10, className: TEXT, children: "0" }),
+    geometry.across.map((riser) => /* @__PURE__ */ jsxs11("g", { children: [
+      /* @__PURE__ */ jsx14(
         "line",
         {
           x1: x(riser.at),
@@ -1454,7 +1593,7 @@ var OffsetOrdinates = (props) => {
           className: LINE
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx14(
         "text",
         {
           x: x(riser.at),
@@ -1466,15 +1605,15 @@ var OffsetOrdinates = (props) => {
         }
       )
     ] }, `x:${riser.at}`)),
-    /* @__PURE__ */ jsx15(ReadRun, { ...props })
+    /* @__PURE__ */ jsx14(ReadRun, { ...props })
   ] });
 };
 var HeightOrdinates = ({ geometry, units }) => {
   const { y, right, floorY, datumX } = geometry;
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx15("text", { x: datumX + 4, y: floorY + 3.5, fontSize: 10, className: TEXT, children: "0" }),
-    geometry.up.map((h) => /* @__PURE__ */ jsxs13("g", { children: [
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx14("text", { x: datumX + 4, y: floorY + 3.5, fontSize: 10, className: TEXT, children: "0" }),
+    geometry.up.map((h) => /* @__PURE__ */ jsxs11("g", { children: [
+      /* @__PURE__ */ jsx14(
         "line",
         {
           x1: right - 2,
@@ -1486,37 +1625,37 @@ var HeightOrdinates = ({ geometry, units }) => {
           className: LINE
         }
       ),
-      /* @__PURE__ */ jsx15("text", { x: datumX + 4, y: y(h) + 3.5, fontSize: 10, className: TEXT, children: lengthValue(h, units) })
+      /* @__PURE__ */ jsx14("text", { x: datumX + 4, y: y(h) + 3.5, fontSize: 10, className: TEXT, children: lengthValue(h, units) })
     ] }, `y:${h}`))
   ] });
 };
 
 // src/reach/reach-section.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var ReachSection = ({
   curve: whole,
   units,
   feature,
   width
 }) => {
-  const [hover, setHover] = useState8(null);
+  const [hover, setHover] = useState9(null);
   const geometry = useMemo3(() => sectionGeometry(whole, feature, width), [whole, feature, width]);
-  const reactId = useId();
+  const reactId = useId2();
   const arrowId = `reach-dim-arrow-${reactId.replace(/[^\w-]/g, "")}`;
   const reading = hover === null ? null : readingAt(whole, hover);
   const drawing = useMemo3(
-    () => /* @__PURE__ */ jsxs14(Fragment5, { children: [
-      /* @__PURE__ */ jsx16(Arrows, { id: arrowId }),
-      /* @__PURE__ */ jsx16(SectionShapes, { geometry }),
-      /* @__PURE__ */ jsx16(SectionHeadings, { geometry }),
-      /* @__PURE__ */ jsx16(FeatureBreak, { geometry }),
-      /* @__PURE__ */ jsx16(FeatureDepth, { geometry, units }),
-      /* @__PURE__ */ jsx16(OffsetOrdinates, { geometry, units, arrowId }),
-      /* @__PURE__ */ jsx16(HeightOrdinates, { geometry, units })
+    () => /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx15(Arrows, { id: arrowId }),
+      /* @__PURE__ */ jsx15(SectionShapes, { geometry }),
+      /* @__PURE__ */ jsx15(SectionHeadings, { geometry }),
+      /* @__PURE__ */ jsx15(FeatureBreak, { geometry }),
+      /* @__PURE__ */ jsx15(FeatureDepth, { geometry, units }),
+      /* @__PURE__ */ jsx15(OffsetOrdinates, { geometry, units, arrowId }),
+      /* @__PURE__ */ jsx15(HeightOrdinates, { geometry, units })
     ] }),
     [arrowId, geometry, units]
   );
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs12(
     "svg",
     {
       viewBox: `0 0 ${width} ${geometry.height}`,
@@ -1529,17 +1668,17 @@ var ReachSection = ({
       onPointerLeave: () => setHover(null),
       children: [
         drawing,
-        reading ? /* @__PURE__ */ jsx16(ReadingMark, { geometry, reading, units }) : null
+        reading ? /* @__PURE__ */ jsx15(ReadingMark, { geometry, reading, units }) : null
       ]
     }
   );
 };
 
 // src/reach/use-element-size.ts
-import { useLayoutEffect, useRef as useRef4, useState as useState9 } from "react";
+import { useLayoutEffect, useRef as useRef5, useState as useState10 } from "react";
 var useElementSize = () => {
-  const ref = useRef4(null);
-  const [size, setSize] = useState9({ width: 0, height: 0 });
+  const ref = useRef5(null);
+  const [size, setSize] = useState10({ width: 0, height: 0 });
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element) return;
@@ -1557,12 +1696,12 @@ var useElementSize = () => {
 };
 
 // src/reach/reach-chart.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var CHART_MIN_W = 200;
 var DRAWING_MIN_W = 240;
 var ReachChart = ({ curve, units, feature }) => {
   const [ref, size] = useElementSize();
-  return /* @__PURE__ */ jsx17("div", { ref, className: "w-full", children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16("div", { ref, className: "w-full", children: /* @__PURE__ */ jsx16(
     ReachSection,
     {
       curve,
@@ -1580,7 +1719,7 @@ var CutNote = ({
   if (!trimmed.cut) return null;
   const drawnTo = trimmed.curve.offsets[trimmed.curve.offsets.length - 1] ?? 0;
   const readTo = curve.offsets[curve.offsets.length - 1] ?? 0;
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     " ",
     "It is at full height from ",
     lengthValue(drawnTo, units),
@@ -1595,13 +1734,13 @@ var CutNote = ({
 };
 var ReachDrawing = ({ curve, units, feature }) => {
   const [ref, size] = useElementSize();
-  return /* @__PURE__ */ jsxs15("div", { ref, className: "flex flex-col gap-3 p-4", children: [
-    /* @__PURE__ */ jsxs15("figure", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxs15("figcaption", { className: "text-2xs font-semibold text-gray-400 uppercase dark:text-zinc-500", children: [
+  return /* @__PURE__ */ jsxs13("div", { ref, className: "flex flex-col gap-3 p-4", children: [
+    /* @__PURE__ */ jsxs13("figure", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs13("figcaption", { className: "text-2xs font-semibold text-gray-400 uppercase dark:text-zinc-500", children: [
         "Section at the wall \xB7 to scale \xB7 ",
         unitLabel(units)
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx16(
         ReachSection,
         {
           curve,
@@ -1611,18 +1750,875 @@ var ReachDrawing = ({ curve, units, feature }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs15("p", { className: "text-2xs text-gray-400 dark:text-zinc-500", children: [
+    /* @__PURE__ */ jsxs13("p", { className: "text-2xs text-gray-400 dark:text-zinc-500", children: [
       "Point at the walls to read them: the distance from the feature, then the reach a tool needs there.",
-      /* @__PURE__ */ jsx17(CutNote, { curve, units })
+      /* @__PURE__ */ jsx16(CutNote, { curve, units })
     ] })
   ] });
 };
+
+// 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 useState13 } 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 jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var FeatureName = ({ feature, label, look }) => /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  label ?? featureTypeLabel(feature.featureType),
+  " ",
+  /* @__PURE__ */ jsxs14("span", { className: cn9("font-normal", faintText(look)), children: [
+    "from ",
+    directionLabel(feature.machiningDirection)
+  ] })
+] });
+var RequiredBadge = () => /* @__PURE__ */ jsx17("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 useState11 } from "react";
+import { CaretRightIcon as CaretRightIcon3 } from "@phosphor-icons/react";
+import { cn as cn10 } from "@toolpath/ui";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+var FoldSection = ({
+  id,
+  title: title2,
+  action,
+  defaultOpen = true,
+  folds,
+  className,
+  children
+}) => {
+  const [open, setOpen] = useState11(() => folds?.read(id) ?? defaultOpen);
+  return /* @__PURE__ */ jsxs15("section", { className: cn10("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs15(
+        "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__ */ jsx18(
+              CaretRightIcon3,
+              {
+                weight: "bold",
+                className: cn10("size-3 shrink-0 transition-transform duration-150", open && "rotate-90")
+              }
+            ),
+            /* @__PURE__ */ jsx18("span", { className: "truncate", children: title2 })
+          ]
+        }
+      ),
+      action
+    ] }),
+    open ? children : null
+  ] });
+};
+
+// src/feature-panel/read-state.tsx
+import { useEffect as useEffect4, useState as useState12 } from "react";
+import { Button as Button2 } from "@toolpath/ui";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+var Reading = ({ children }) => /* @__PURE__ */ jsx19("p", { className: "text-sm text-gray-400 dark:text-zinc-400", role: "status", children });
+var ReadFailure = ({
+  failure
+}) => {
+  const waiting = useWaiting(failure.retryAt);
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-start gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx19("p", { className: "text-danger", role: "alert", children: failure.message }),
+    failure.retry ? /* @__PURE__ */ jsx19(Button2, { variant: "secondary", size: "sm", disabled: waiting, onClick: failure.retry, children: "Retry" }) : null
+  ] });
+};
+var useWaiting = (until) => {
+  const [passed, setPassed] = useState12(void 0);
+  useEffect4(() => {
+    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 CheckIcon3, 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 jsx20, jsxs as jsxs17 } 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__ */ jsx20(Reading, { children: "Reading the feature\u2019s record\u2026" }) : record.status === "error" ? /* @__PURE__ */ jsx20(ReadFailure, { failure: record }) : null;
+  const count = more ? `${MAX_DATASHEET_FIELDS}+` : String(fields.length);
+  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
+    /* @__PURE__ */ jsx20(
+      FoldSection,
+      {
+        id: "datasheet",
+        defaultOpen: false,
+        title: value ? `All datasheet fields (${count})` : "All datasheet fields",
+        action: value ? popOut?.("datasheet") : null,
+        folds,
+        children: waiting ?? /* @__PURE__ */ jsx20(DatasheetFields, { record: value, look })
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      FoldSection,
+      {
+        id: "raw",
+        defaultOpen: false,
+        title: "Raw API record",
+        action: value ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
+          /* @__PURE__ */ jsx20(CopyButton, { text: json }),
+          popOut?.("raw")
+        ] }) : null,
+        folds,
+        children: waiting ?? /* @__PURE__ */ jsx20(RawRecord, { json })
+      }
+    )
+  ] });
+};
+var DatasheetFields = ({ record, look, wide = false }) => {
+  const { fields } = useMemo5(() => datasheetFields(record?.datasheet), [record]);
+  return record?.datasheet ? /* @__PURE__ */ jsx20(
+    "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__ */ jsxs17("div", { className: "contents", children: [
+        /* @__PURE__ */ jsx20("dt", { className: cn11("truncate font-mono", secondaryText(look)), title: field.path, children: field.path }),
+        /* @__PURE__ */ jsx20(
+          "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__ */ jsx20("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__ */ jsx20(
+  "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__ */ jsx20(
+    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__ */ jsx20(CheckIcon3, { weight: "bold" }) : /* @__PURE__ */ jsx20(CopyIcon2, { weight: "bold" })
+    }
+  );
+};
+
+// src/feature-panel/pop-outs.tsx
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs18 } 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__ */ jsx21(
+  IconButton3,
+  {
+    "aria-label": LABELS[id],
+    title: "Pop out, larger",
+    variant: "muted",
+    size: "sm",
+    onClick: () => onOpen(id),
+    children: /* @__PURE__ */ jsx21(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__ */ jsxs18(Fragment9, { children: [
+    open.has("reach") && curve ? /* @__PURE__ */ jsx21(
+      Window,
+      {
+        id: "reach",
+        title: TITLES.reach,
+        subtitle,
+        icon: /* @__PURE__ */ jsx21(ChartLineIcon, { weight: "bold" }),
+        onClose: () => onClose("reach"),
+        children: /* @__PURE__ */ jsx21(ReachDrawing, { curve, units, feature: profile })
+      }
+    ) : null,
+    open.has("datasheet") ? /* @__PURE__ */ jsx21(
+      Window,
+      {
+        id: "datasheet",
+        title: TITLES.datasheet,
+        subtitle,
+        icon: /* @__PURE__ */ jsx21(TableIcon, { weight: "bold" }),
+        onClose: () => onClose("datasheet"),
+        children: /* @__PURE__ */ jsx21(DatasheetFields, { record, look, wide: true })
+      }
+    ) : null,
+    open.has("raw") ? /* @__PURE__ */ jsx21(
+      Window,
+      {
+        id: "raw",
+        title: TITLES.raw,
+        subtitle,
+        icon: /* @__PURE__ */ jsx21(BracketsCurlyIcon, { weight: "bold" }),
+        action: /* @__PURE__ */ jsx21(CopyButton, { text: json }),
+        onClose: () => onClose("raw"),
+        children: /* @__PURE__ */ jsx21(RawRecord, { json, wide: true })
+      }
+    ) : null
+  ] });
+};
+
+// src/feature-panel/feature-details.tsx
+import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs19 } 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__ */ jsx22(FeatureName, { feature, label, look });
+  const [out, setOut] = useState13(/* @__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__ */ jsx22(PopOutButton, { id, onOpen: openOut }) : void 0;
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx22("h3", { className: "truncate text-sm font-semibold text-gray-600 dark:text-zinc-100", children: name }),
+          /* @__PURE__ */ jsxs19("p", { className: cn12("flex flex-wrap items-center gap-1.5 text-xs", secondaryText(look)), children: [
+            /* @__PURE__ */ jsx22(Swatch, { color: directionColor, className: "size-2.5" }),
+            "Machined from ",
+            directionLabel(feature.machiningDirection),
+            required ? /* @__PURE__ */ jsx22(RequiredBadge, {}) : null,
+            status
+          ] })
+        ] }),
+        actions,
+        onFrame ? /* @__PURE__ */ jsx22(Button3, { variant: "secondary", size: "sm", onClick: onFrame, className: "shrink-0", children: /* @__PURE__ */ jsxs19("span", { className: "flex items-center gap-1 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx22(CrosshairIcon, { weight: "bold", className: "size-3.5" }),
+          "Show this feature"
+        ] }) }) : null
+      ] }),
+      children
+    ] }),
+    /* @__PURE__ */ jsx22(FoldSection, { id: "rules", title: "Rules broken", folds, children: /* @__PURE__ */ jsx22(BrokenRuleList, { rules, look }) }),
+    /* @__PURE__ */ jsx22(MeasurementSections, { measurements, look, folds }),
+    /* @__PURE__ */ jsx22(
+      ReachSection2,
+      {
+        record,
+        units,
+        profile,
+        folds,
+        action: popOut?.("reach")
+      }
+    ),
+    /* @__PURE__ */ jsx22(RecordSections, { record, look, folds, popOut }),
+    PopOut ? /* @__PURE__ */ jsx22(
+      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__ */ jsx22("ul", { className: "flex flex-col gap-1", children: rules.map((rule) => /* @__PURE__ */ jsxs19(
+  "li",
+  {
+    className: "flex items-start gap-2 text-sm text-gray-600 dark:text-zinc-100",
+    children: [
+      /* @__PURE__ */ jsx22(Swatch, { color: rule.color, className: "mt-0.5" }),
+      /* @__PURE__ */ jsx22(Explained, { note: rule.note, children: /* @__PURE__ */ jsx22("span", { className: "min-w-0 flex-1", children: rule.text }) }),
+      rule.figure ? /* @__PURE__ */ jsxs19(
+        "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__ */ jsx22("span", { className: "ml-1 font-normal opacity-60", children: rule.limit }) : null
+          ]
+        }
+      ) : null
+    ]
+  },
+  rule.key
+)) }) : /* @__PURE__ */ jsx22(None, { look });
+var Explained = ({ note, children }) => note ? /* @__PURE__ */ jsx22(Tooltip, { tip: note, side: "left", children: /* @__PURE__ */ jsx22(
+  "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__ */ jsx22("p", { className: cn12("text-sm", secondaryText(look)), children: "None" });
+var MeasurementSections = ({ measurements, look, folds }) => {
+  if (measurements.status !== "ready") {
+    return /* @__PURE__ */ jsx22(Fragment10, { children: /* @__PURE__ */ jsx22(FoldSection, { id: "measurements", title: "Measurements", folds, children: measurements.status === "loading" ? /* @__PURE__ */ jsx22(Reading, { children: "Reading the feature\u2019s datasheet\u2026" }) : /* @__PURE__ */ jsx22(ReadFailure, { failure: measurements }) }) });
+  }
+  const measured = measurements.value.filter((row) => !row.milling);
+  const milling = measurements.value.filter((row) => row.milling);
+  return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+    /* @__PURE__ */ jsx22(FoldSection, { id: "measurements", title: "Measurements", folds, children: /* @__PURE__ */ jsx22(MeasurementList, { rows: measured, look }) }),
+    milling.length > 0 ? /* @__PURE__ */ jsx22(FoldSection, { id: "milling", title: "Milling considerations", folds, children: /* @__PURE__ */ jsx22(MeasurementList, { rows: milling, look }) }) : null
+  ] });
+};
+var MeasurementList = ({ rows, look }) => rows.length > 0 ? /* @__PURE__ */ jsx22("dl", { className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 text-sm", children: rows.map((row) => /* @__PURE__ */ jsxs19("div", { className: "contents", children: [
+  /* @__PURE__ */ jsxs19("dt", { className: cn12("flex items-center gap-1", secondaryText(look)), children: [
+    row.label,
+    /* @__PURE__ */ jsx22(Derivation, { lines: row.derivation, look })
+  ] }),
+  /* @__PURE__ */ jsx22("dd", { className: "text-right text-gray-600 tabular-nums dark:text-zinc-100", title: row.alt, children: row.value })
+] }, row.key)) }) : /* @__PURE__ */ jsx22(None, { look });
+var Derivation = ({
+  lines,
+  look
+}) => lines.length > 0 ? /* @__PURE__ */ jsx22(
+  Tooltip,
+  {
+    side: "left",
+    hoverable: true,
+    tip: /* @__PURE__ */ jsx22("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__ */ jsx22("span", { children: line }, index)) }),
+    children: /* @__PURE__ */ jsx22(
+      "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__ */ jsx22(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__ */ jsx22(FoldSection, { id: "reach", title: "Reach", folds, action: curve ? action : null, children: record.status === "loading" ? /* @__PURE__ */ jsx22(Reading, { children: "Reading the reach curve\u2026" }) : record.status === "error" ? /* @__PURE__ */ jsx22(ReadFailure, { failure: record }) : curve ? /* @__PURE__ */ jsx22(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 jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+var candidateListKeys = listKeys("candidates");
+var faceLetter = (index) => String.fromCharCode(65 + index % 26);
+var FaceLetter = ({
+  index,
+  active
+}) => /* @__PURE__ */ jsx23(
+  "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__ */ jsx23("div", { className: "border-b border-gray-100 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx23(
+    FoldSection,
+    {
+      id: face ? `candidates-${faceLetter(face.index)}` : "candidates",
+      title: face ? /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx23(FaceLetter, { index: face.index, active: face.active }),
+        count
+      ] }) : count,
+      action: face?.onStop ? /* @__PURE__ */ jsx23(
+        IconButton4,
+        {
+          "aria-label": `Stop comparing face ${faceLetter(face.index)}`,
+          variant: "muted",
+          size: "sm",
+          onClick: face.onStop,
+          children: /* @__PURE__ */ jsx23(XIcon, { weight: "bold" })
+        }
+      ) : null,
+      folds,
+      className: "px-2",
+      children: /* @__PURE__ */ jsx23("ul", { className: "-mx-2 flex flex-col gap-0.5", children: rows.map((row) => /* @__PURE__ */ jsx23(
+        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__ */ jsxs20(
+    "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__ */ jsxs20(
+          "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__ */ jsxs20("span", { className: "flex w-full items-center gap-2", children: [
+                row.color ? /* @__PURE__ */ jsx23(Swatch, { color: row.color }) : /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: "size-4 shrink-0" }),
+                /* @__PURE__ */ jsx23("span", { className: "min-w-0 flex-1 truncate", children: /* @__PURE__ */ jsx23(FeatureName, { feature, label: row.label, look }) }),
+                row.ruleCount ? /* @__PURE__ */ jsxs20("span", { className: cn13("text-2xs tabular-nums", secondaryText(look)), children: [
+                  row.ruleCount,
+                  " ",
+                  row.ruleCount === 1 ? "rule" : "rules"
+                ] }) : null,
+                row.required ? /* @__PURE__ */ jsx23(RequiredBadge, {}) : null,
+                row.detail ? /* @__PURE__ */ jsx23("span", { className: cn13("max-w-32 shrink-0 truncate text-xs", secondaryText(look)), children: row.detail }) : null
+              ] }),
+              row.note ? /* @__PURE__ */ jsx23("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 jsx24, jsxs as jsxs21 } 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__ */ jsxs21("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx24(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__ */ jsxs21(
+          "span",
+          {
+            className: "inline-flex items-center gap-0.5",
+            title: face.rules.map((rule) => rule.text).join("\n"),
+            children: [
+              face.rules.map((rule) => /* @__PURE__ */ jsx24(Swatch, { color: rule.color, className: "size-2.5" }, rule.key)),
+              /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsx24("div", { className: "border-b border-gray-100 p-4 dark:border-zinc-800", children: /* @__PURE__ */ jsx24(FoldSection, { id: "comparison", title: "Comparison", folds, children: /* @__PURE__ */ jsx24("div", { className: "-mx-1 overflow-x-auto", children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-separate border-spacing-x-1 border-spacing-y-0.5 text-sm", children: [
+    /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs21("tr", { children: [
+      /* @__PURE__ */ jsx24("th", { className: "w-0" }),
+      faces.map(({ feature }, index) => /* @__PURE__ */ jsx24("th", { className: "text-left align-bottom font-normal", children: /* @__PURE__ */ jsxs21(
+        "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__ */ jsx24(FaceLetter, { index, active: index === active }),
+            /* @__PURE__ */ jsx24("span", { className: "min-w-0 truncate", children: feature ? /* @__PURE__ */ jsx24(FeatureName, { feature, look }) : "No feature" })
+          ]
+        }
+      ) }, index))
+    ] }) }),
+    /* @__PURE__ */ jsx24("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs21("tr", { "data-differs": row.differs || void 0, children: [
+      /* @__PURE__ */ jsx24(
+        "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__ */ jsx24(
+        "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 jsx25, jsxs as jsxs22 } 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__ */ jsxs22(
+    "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__ */ jsxs22(
+          "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__ */ jsx25(CubeIcon, { weight: "bold", className: cn15("size-5 shrink-0", secondaryText(look)) }),
+              /* @__PURE__ */ jsx25("h2", { className: "flex-1 text-sm font-semibold text-gray-600 dark:text-zinc-100", children: heading }),
+              /* @__PURE__ */ jsx25(IconButton5, { "aria-label": "Close", variant: "muted", onClick: onClose, children: /* @__PURE__ */ jsx25(XIcon2, { weight: "bold" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs22(ScrollArea2, { className: "min-h-0 flex-1", children: [
+          comparing ? /* @__PURE__ */ jsxs22(Fragment11, { children: [
+            faces.map((each, index) => /* @__PURE__ */ jsx25(
+              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__ */ jsx25(
+              ComparisonTable,
+              {
+                faces: comparison,
+                active,
+                onSelect,
+                onHover,
+                look: lookOption,
+                folds
+              }
+            ) : null
+          ] }) : face && face.region !== null ? /* @__PURE__ */ jsx25(
+            CandidateList,
+            {
+              rows: face.rows,
+              selected: face.selected,
+              onSelect: (tag) => onSelect(tag, active),
+              onHover,
+              look: lookOption,
+              folds
+            }
+          ) : null,
+          face?.selected ? children : /* @__PURE__ */ jsx25("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
 };