@toolpath/dfm 0.2.0 → 0.2.1

package/dist/index.js

@@ -37,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
@@ -70,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;
@@ -122,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";
@@ -132,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(
@@ -145,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";
 
@@ -247,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";
@@ -256,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;
@@ -374,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",
@@ -389,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,
@@ -435,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,
@@ -468,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,
@@ -480,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",
@@ -514,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",
@@ -569,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,
@@ -581,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,
@@ -597,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",
@@ -622,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,
@@ -639,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;
@@ -655,7 +793,7 @@ var RuleRow = ({
       onToggle();
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs7(
     "li",
     {
       className: cn7(
@@ -664,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) => {
@@ -675,7 +813,7 @@ var RuleRow = ({
               canOpen && "cursor-pointer"
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -687,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",
@@ -696,7 +834,7 @@ var RuleRow = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx10(
                 Swatch,
                 {
                   ref: swatchRef,
@@ -708,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",
@@ -723,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,
@@ -741,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,
@@ -752,7 +890,7 @@ var RuleRow = ({
             }
           }
         ) }) : null,
-        open && result && check && features && sheets ? /* @__PURE__ */ jsx11(
+        open && result && check && features && sheets ? /* @__PURE__ */ jsx10(
           FeatureRows,
           {
             rule,
@@ -777,7 +915,7 @@ var CountPill = ({
   open,
   canOpen,
   onToggle
-}) => /* @__PURE__ */ jsx11(
+}) => /* @__PURE__ */ jsx10(
   "button",
   {
     type: "button",
@@ -801,15 +939,15 @@ var countLabel = (count, others) => {
 };
 
 // src/rule-list/rule-set-actions.tsx
-import { useRef as useRef3 } 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";
 
 // src/rule-list/use-timed-value.ts
-import { useCallback, useEffect as useEffect2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState7 } from "react";
 var useTimedValue = (ms) => {
-  const [box, setBox] = useState6(null);
-  useEffect2(() => {
+  const [box, setBox] = useState7(null);
+  useEffect3(() => {
     if (box === null) return;
     const timer = setTimeout(() => setBox(null), ms);
     return () => clearTimeout(timer);
@@ -819,14 +957,14 @@ var useTimedValue = (ms) => {
 };
 
 // src/rule-list/rule-set-actions.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+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;
@@ -854,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,
@@ -885,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,
@@ -917,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,
@@ -927,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);
@@ -944,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,
@@ -965,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) => {
@@ -980,7 +1118,7 @@ var RuleList = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13(RuleSetActions, { rules })
+      /* @__PURE__ */ jsx12(RuleSetActions, { rules })
     ] })
   );
 };
@@ -989,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";
@@ -1064,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),
@@ -1087,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,
@@ -1100,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,
@@ -1200,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,
@@ -1211,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,
@@ -1228,7 +1366,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_FILL
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "rect",
       {
         x: floorLeft,
@@ -1238,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,
@@ -1251,7 +1389,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1262,7 +1400,7 @@ var SectionShapes = ({ geometry }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1278,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,
@@ -1291,7 +1429,7 @@ var SectionHeadings = ({ geometry }) => {
         children: geometry.featureHeading
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: right,
@@ -1305,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),
@@ -1318,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,
@@ -1331,7 +1469,7 @@ var FeatureDepth = ({ geometry, units }) => {
         className: FEATURE_LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1343,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,
@@ -1354,7 +1492,7 @@ var FeatureDepth = ({ geometry, units }) => {
         children: "depth"
       }
     ) : null,
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "text",
       {
         x: datumX + 4,
@@ -1370,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),
@@ -1384,7 +1522,7 @@ var ReadRun = ({ geometry, units, arrowId }) => {
         className: LINE
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(last),
@@ -1395,7 +1533,7 @@ var ReadRun = ({ geometry, units, arrowId }) => {
         className: LINE
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs11(
       "text",
       {
         x: (x(0) + x(last)) / 2,
@@ -1414,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(
@@ -1430,7 +1568,7 @@ var OffsetOrdinates = (props) => {
         children: "XY PLANE DISTANCE FROM FEATURE"
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       "line",
       {
         x1: x(0),
@@ -1441,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),
@@ -1455,7 +1593,7 @@ var OffsetOrdinates = (props) => {
           className: LINE
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx14(
         "text",
         {
           x: x(riser.at),
@@ -1467,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,
@@ -1487,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}`,
@@ -1530,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;
@@ -1558,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,
@@ -1581,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),
@@ -1596,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,
@@ -1612,9 +1750,9 @@ 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 })
     ] })
   ] });
 };
@@ -1638,7 +1776,7 @@ var storageFolds = (storage, prefix) => ({
 });
 
 // src/feature-panel/feature-details.tsx
-import { useCallback as useCallback2, useMemo as useMemo7, useState as useState12 } from "react";
+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";
 
@@ -1655,22 +1793,22 @@ var secondaryText = (look) => look.muted === "strong" ? "text-gray dark:text-zin
 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: [
+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__ */ jsxs16("span", { className: cn9("font-normal", faintText(look)), children: [
+  /* @__PURE__ */ jsxs14("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" });
+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 useState10 } from "react";
+import { useState as useState11 } 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";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var FoldSection = ({
   id,
   title: title2,
@@ -1680,10 +1818,10 @@ var FoldSection = ({
   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(
+  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",
@@ -1698,14 +1836,14 @@ var FoldSection = ({
             "outline-none focus-visible:ring-2 focus-visible:ring-info/75"
           ),
           children: [
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx18(
               CaretRightIcon3,
               {
                 weight: "bold",
                 className: cn10("size-3 shrink-0 transition-transform duration-150", open && "rotate-90")
               }
             ),
-            /* @__PURE__ */ jsx19("span", { className: "truncate", children: title2 })
+            /* @__PURE__ */ jsx18("span", { className: "truncate", children: title2 })
           ]
         }
       ),
@@ -1716,22 +1854,22 @@ var FoldSection = ({
 };
 
 // src/feature-panel/read-state.tsx
-import { useEffect as useEffect3, useState as useState11 } from "react";
+import { useEffect as useEffect4, useState as useState12 } 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 });
+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__ */ 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
+  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] = useState11(void 0);
-  useEffect3(() => {
+  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);
@@ -1751,7 +1889,7 @@ 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 { 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
@@ -1784,7 +1922,7 @@ var datasheetFields = (datasheet) => {
 };
 
 // src/feature-panel/record-sections.tsx
-import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var COPIED_MS2 = 1500;
 var RecordSections = ({
   record,
@@ -1796,10 +1934,10 @@ var RecordSections = ({
   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 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__ */ jsxs19(Fragment8, { children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
+    /* @__PURE__ */ jsx20(
       FoldSection,
       {
         id: "datasheet",
@@ -1807,37 +1945,37 @@ var RecordSections = ({
         title: value ? `All datasheet fields (${count})` : "All datasheet fields",
         action: value ? popOut?.("datasheet") : null,
         folds,
-        children: waiting ?? /* @__PURE__ */ jsx21(DatasheetFields, { record: value, look })
+        children: waiting ?? /* @__PURE__ */ jsx20(DatasheetFields, { record: value, look })
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx20(
       FoldSection,
       {
         id: "raw",
         defaultOpen: false,
         title: "Raw API record",
-        action: value ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
-          /* @__PURE__ */ jsx21(CopyButton, { text: json }),
+        action: value ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
+          /* @__PURE__ */ jsx20(CopyButton, { text: json }),
           popOut?.("raw")
         ] }) : null,
         folds,
-        children: waiting ?? /* @__PURE__ */ jsx21(RawRecord, { json })
+        children: waiting ?? /* @__PURE__ */ jsx20(RawRecord, { json })
       }
     )
   ] });
 };
 var DatasheetFields = ({ record, look, wide = false }) => {
   const { fields } = useMemo5(() => datasheetFields(record?.datasheet), [record]);
-  return record?.datasheet ? /* @__PURE__ */ jsx21(
+  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__ */ jsxs19("div", { className: "contents", children: [
-        /* @__PURE__ */ jsx21("dt", { className: cn11("truncate font-mono", secondaryText(look)), title: field.path, children: field.path }),
-        /* @__PURE__ */ jsx21(
+      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(
@@ -1850,12 +1988,12 @@ var DatasheetFields = ({ record, look, wide = false }) => {
         )
       ] }, field.path))
     }
-  ) : /* @__PURE__ */ jsx21("p", { className: cn11("text-sm", secondaryText(look), wide && "p-4"), children: "The API sent no datasheet for this feature." });
+  ) : /* @__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__ */ jsx21(
+}) => /* @__PURE__ */ jsx20(
   "pre",
   {
     className: cn11(
@@ -1867,7 +2005,7 @@ var RawRecord = ({
 );
 var CopyButton = ({ text }) => {
   const [copied, setCopied] = useTimedValue(COPIED_MS2);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     IconButton2,
     {
       "aria-label": copied ? "Copied" : "Copy raw record",
@@ -1877,13 +2015,13 @@ var CopyButton = ({ text }) => {
       onClick: () => {
         void navigator.clipboard?.writeText(text).then(() => setCopied(true)).catch(() => void 0);
       },
-      children: copied ? /* @__PURE__ */ jsx21(CheckIcon2, { weight: "bold" }) : /* @__PURE__ */ jsx21(CopyIcon2, { weight: "bold" })
+      children: copied ? /* @__PURE__ */ jsx20(CheckIcon3, { weight: "bold" }) : /* @__PURE__ */ jsx20(CopyIcon2, { weight: "bold" })
     }
   );
 };
 
 // src/feature-panel/pop-outs.tsx
-import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var TITLES = {
   reach: "Reach",
   datasheet: "All datasheet fields",
@@ -1897,7 +2035,7 @@ var LABELS = {
 var PopOutButton = ({
   id,
   onOpen
-}) => /* @__PURE__ */ jsx22(
+}) => /* @__PURE__ */ jsx21(
   IconButton3,
   {
     "aria-label": LABELS[id],
@@ -1905,7 +2043,7 @@ var PopOutButton = ({
     variant: "muted",
     size: "sm",
     onClick: () => onOpen(id),
-    children: /* @__PURE__ */ jsx22(ArrowSquareOutIcon, { weight: "bold" })
+    children: /* @__PURE__ */ jsx21(ArrowSquareOutIcon, { weight: "bold" })
   }
 );
 var PopOuts = ({
@@ -1921,46 +2059,46 @@ var PopOuts = ({
   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(
+  return /* @__PURE__ */ jsxs18(Fragment9, { children: [
+    open.has("reach") && curve ? /* @__PURE__ */ jsx21(
       Window,
       {
         id: "reach",
         title: TITLES.reach,
         subtitle,
-        icon: /* @__PURE__ */ jsx22(ChartLineIcon, { weight: "bold" }),
+        icon: /* @__PURE__ */ jsx21(ChartLineIcon, { weight: "bold" }),
         onClose: () => onClose("reach"),
-        children: /* @__PURE__ */ jsx22(ReachDrawing, { curve, units, feature: profile })
+        children: /* @__PURE__ */ jsx21(ReachDrawing, { curve, units, feature: profile })
       }
     ) : null,
-    open.has("datasheet") ? /* @__PURE__ */ jsx22(
+    open.has("datasheet") ? /* @__PURE__ */ jsx21(
       Window,
       {
         id: "datasheet",
         title: TITLES.datasheet,
         subtitle,
-        icon: /* @__PURE__ */ jsx22(TableIcon, { weight: "bold" }),
+        icon: /* @__PURE__ */ jsx21(TableIcon, { weight: "bold" }),
         onClose: () => onClose("datasheet"),
-        children: /* @__PURE__ */ jsx22(DatasheetFields, { record, look, wide: true })
+        children: /* @__PURE__ */ jsx21(DatasheetFields, { record, look, wide: true })
       }
     ) : null,
-    open.has("raw") ? /* @__PURE__ */ jsx22(
+    open.has("raw") ? /* @__PURE__ */ jsx21(
       Window,
       {
         id: "raw",
         title: TITLES.raw,
         subtitle,
-        icon: /* @__PURE__ */ jsx22(BracketsCurlyIcon, { weight: "bold" }),
-        action: /* @__PURE__ */ jsx22(CopyButton, { text: json }),
+        icon: /* @__PURE__ */ jsx21(BracketsCurlyIcon, { weight: "bold" }),
+        action: /* @__PURE__ */ jsx21(CopyButton, { text: json }),
         onClose: () => onClose("raw"),
-        children: /* @__PURE__ */ jsx22(RawRecord, { json, wide: true })
+        children: /* @__PURE__ */ jsx21(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";
+import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var FeatureDetails = ({
   feature,
   units,
@@ -1980,8 +2118,8 @@ var FeatureDetails = ({
   folds
 }) => {
   const look = resolveLook(lookOption);
-  const name = /* @__PURE__ */ jsx23(FeatureName, { feature, label, look });
-  const [out, setOut] = useState12(/* @__PURE__ */ new Set());
+  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) => {
@@ -1991,31 +2129,31 @@ var FeatureDetails = ({
     }),
     []
   );
-  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" }),
+  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__ */ jsx23(RequiredBadge, {}) : null,
+            required ? /* @__PURE__ */ jsx22(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" }),
+        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__ */ jsx23(FoldSection, { id: "rules", title: "Rules broken", folds, children: /* @__PURE__ */ jsx23(BrokenRuleList, { rules, look }) }),
-    /* @__PURE__ */ jsx23(MeasurementSections, { measurements, look, folds }),
-    /* @__PURE__ */ jsx23(
+    /* @__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,
@@ -2025,8 +2163,8 @@ var FeatureDetails = ({
         action: popOut?.("reach")
       }
     ),
-    /* @__PURE__ */ jsx23(RecordSections, { record, look, folds, popOut }),
-    PopOut ? /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22(RecordSections, { record, look, folds, popOut }),
+    PopOut ? /* @__PURE__ */ jsx22(
       PopOuts,
       {
         open: out,
@@ -2044,14 +2182,14 @@ var FeatureDetails = ({
 var BrokenRuleList = ({
   rules,
   look
-}) => rules.length > 0 ? /* @__PURE__ */ jsx23("ul", { className: "flex flex-col gap-1", children: rules.map((rule) => /* @__PURE__ */ jsxs21(
+}) => 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__ */ 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(
+      /* @__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(
@@ -2061,15 +2199,15 @@ var BrokenRuleList = ({
           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
+            look.rules === "result" && rule.limit ? /* @__PURE__ */ jsx22("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(
+)) }) : /* @__PURE__ */ jsx22(None, { look });
+var Explained = ({ note, children }) => note ? /* @__PURE__ */ jsx22(Tooltip, { tip: note, side: "left", children: /* @__PURE__ */ jsx22(
   "span",
   {
     tabIndex: 0,
@@ -2077,35 +2215,35 @@ var Explained = ({ note, children }) => note ? /* @__PURE__ */ jsx23(Tooltip, {
     children
   }
 ) }) : children;
-var None = ({ look }) => /* @__PURE__ */ jsx23("p", { className: cn12("text-sm", secondaryText(look)), children: "None" });
+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__ */ 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 }) }) });
+    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__ */ 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
+  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__ */ 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: [
+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__ */ jsx23(Derivation, { lines: row.derivation, look })
+    /* @__PURE__ */ jsx22(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 });
+  /* @__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__ */ jsx23(
+}) => lines.length > 0 ? /* @__PURE__ */ jsx22(
   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(
+    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",
@@ -2114,7 +2252,7 @@ var Derivation = ({
           "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" })
+        children: /* @__PURE__ */ jsx22(InfoIcon, { weight: "bold", className: "size-3" })
       }
     )
   }
@@ -2125,19 +2263,19 @@ var ReachSection2 = ({ record, units, profile, folds, action }) => {
     [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 });
+  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 jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+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__ */ jsx24(
+}) => /* @__PURE__ */ jsx23(
   "span",
   {
     className: cn13(
@@ -2158,27 +2296,27 @@ var CandidateList = ({
 }) => {
   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(
+  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__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx24(FaceLetter, { index: face.index, active: face.active }),
+      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__ */ jsx24(
+      action: face?.onStop ? /* @__PURE__ */ jsx23(
         IconButton4,
         {
           "aria-label": `Stop comparing face ${faceLetter(face.index)}`,
           variant: "muted",
           size: "sm",
           onClick: face.onStop,
-          children: /* @__PURE__ */ jsx24(XIcon, { weight: "bold" })
+          children: /* @__PURE__ */ jsx23(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(
+      children: /* @__PURE__ */ jsx23("ul", { className: "-mx-2 flex flex-col gap-0.5", children: rows.map((row) => /* @__PURE__ */ jsx23(
         Row,
         {
           row,
@@ -2195,7 +2333,7 @@ var CandidateList = ({
 var Row = ({ row, chosen, onSelect, onHover, look }) => {
   const { feature } = row;
   const info = look.selected === "info";
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs20(
     "li",
     {
       className: cn13(
@@ -2204,7 +2342,7 @@ var Row = ({ row, chosen, onSelect, onHover, look }) => {
         info && (chosen ? "border-info/60 bg-info/15" : "border-transparent")
       ),
       children: [
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -2222,18 +2360,18 @@ var Row = ({ row, chosen, onSelect, onHover, look }) => {
               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: [
+              /* @__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__ */ 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.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__ */ jsx24("span", { className: "pl-6 text-2xs text-warning-darken", children: row.note }) : null
+              row.note ? /* @__PURE__ */ jsx23("span", { className: "pl-6 text-2xs text-warning-darken", children: row.note }) : null
             ]
           }
         ),
@@ -2246,7 +2384,7 @@ var Row = ({ row, chosen, onSelect, onHover, look }) => {
 // 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";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var DASH = "\u2014";
 var ComparisonTable = ({
   faces,
@@ -2274,8 +2412,8 @@ var ComparisonTable = ({
         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" }),
+          node: /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx24(Swatch, { color: face.directionColor, className: "size-2.5" }),
             text
           ] })
         };
@@ -2283,14 +2421,14 @@ var ComparisonTable = ({
       ...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(
+        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__ */ jsx25(Swatch, { color: rule.color, className: "size-2.5" }, rule.key)),
-              /* @__PURE__ */ jsx25("span", { className: "ml-0.5", children: face.rules.length })
+              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"
@@ -2304,16 +2442,16 @@ var ComparisonTable = ({
       return {
         key,
         label,
-        cells: values.map((value) => value ? /* @__PURE__ */ jsx25("span", { title: value.alt, children: value.value }) : DASH),
+        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__ */ 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(
+  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",
@@ -2328,14 +2466,14 @@ var ComparisonTable = ({
             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" })
+            /* @__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__ */ jsx25("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs23("tr", { "data-differs": row.differs || void 0, children: [
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs21("tr", { "data-differs": row.differs || void 0, children: [
+      /* @__PURE__ */ jsx24(
         "th",
         {
           scope: "row",
@@ -2346,7 +2484,7 @@ var ComparisonTable = ({
           children: row.label
         }
       ),
-      row.cells.map((cell, index) => /* @__PURE__ */ jsx25(
+      row.cells.map((cell, index) => /* @__PURE__ */ jsx24(
         "td",
         {
           className: cn14(
@@ -2364,7 +2502,7 @@ var ComparisonTable = ({
 // 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";
+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)
@@ -2391,7 +2529,7 @@ var FeaturePanel = ({
   const comparing = faces.length > 1;
   const face = faces[active];
   const heading = title(faces, active, group);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs22(
     "section",
     {
       "aria-label": heading,
@@ -2407,7 +2545,7 @@ var FeaturePanel = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs22(
           "header",
           {
             ...headerProps,
@@ -2416,15 +2554,15 @@ var FeaturePanel = ({
               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__ */ 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__ */ jsxs24(ScrollArea2, { className: "min-h-0 flex-1", children: [
-          comparing ? /* @__PURE__ */ jsxs24(Fragment11, { children: [
-            faces.map((each, index) => /* @__PURE__ */ jsx26(
+        /* @__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,
@@ -2441,7 +2579,7 @@ var FeaturePanel = ({
               },
               `${each.region ?? "list"}-${index}`
             )),
-            comparison ? /* @__PURE__ */ jsx26(
+            comparison ? /* @__PURE__ */ jsx25(
               ComparisonTable,
               {
                 faces: comparison,
@@ -2452,7 +2590,7 @@ var FeaturePanel = ({
                 folds
               }
             ) : null
-          ] }) : face && face.region !== null ? /* @__PURE__ */ jsx26(
+          ] }) : face && face.region !== null ? /* @__PURE__ */ jsx25(
             CandidateList,
             {
               rows: face.rows,
@@ -2463,7 +2601,7 @@ var FeaturePanel = ({
               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." })
+          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." })
         ] })
       ]
     }