@toolpath/dfm 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1628 @@
+import {
+  FEATURE_SUBJECTS,
+  OPS,
+  PRESENCE_METRIC,
+  QUICK_METRICS,
+  QUICK_SUBJECTS,
+  RANGE_HIGHS,
+  RANGE_LOWS,
+  RULE_COLORS,
+  featureRows,
+  featureTypeLabel,
+  formatMeasured,
+  fromField,
+  highOf,
+  hitFigure,
+  lengthValue,
+  llmRulePrompt,
+  lowOf,
+  makeRule,
+  metricInfo,
+  metricsForSubject,
+  opSymbol,
+  parseRuleSetFile,
+  peakHeight,
+  quantityUnit,
+  runStart,
+  serializeRuleSet,
+  subjectLabel,
+  toField,
+  trimmedCurve,
+  unitLabel,
+  upperOf,
+  withMetric,
+  withOp,
+  withSubject
+} from "./chunk-5MPHT7BC.js";
+
+// src/rule-list/rule-list.tsx
+import { useMemo as useMemo2, useState as useState7 } from "react";
+import { ScrollArea } from "@toolpath/ui";
+
+// src/rule-list/list-keys.ts
+var listKeys = (name, orientation = "vertical") => (event) => {
+  const [back, forward] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+  if (![back, forward, "Home", "End"].includes(event.key) || isField(event.target)) return;
+  const items = [
+    ...event.currentTarget.querySelectorAll(`[data-list-item="${name}"]`)
+  ];
+  if (items.length === 0) return;
+  const at = currentIndex(items, document.activeElement);
+  const chosen = items.findIndex((item) => item.getAttribute("aria-pressed") === "true");
+  const step = (from) => Math.min(Math.max(from + (event.key === forward ? 1 : -1), 0), items.length - 1);
+  const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : at !== -1 ? step(at) : chosen !== -1 ? items[chosen]?.dataset.follow !== void 0 ? step(chosen) : chosen : event.key === forward ? 0 : items.length - 1;
+  const target = items[index];
+  if (!target) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (target === document.activeElement) return;
+  target.focus();
+  if (target.dataset.follow !== void 0) target.click();
+};
+var currentIndex = (items, active) => {
+  if (!active) return -1;
+  const exact = items.indexOf(active);
+  if (exact !== -1) return exact;
+  const row = active.closest("li");
+  return row ? items.findIndex((item) => item.closest("li") === row) : -1;
+};
+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";
+
+// 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
+}) => {
+  const quick = [...QUICK_SUBJECTS, ...QUICK_SUBJECTS.includes(current) ? [] : [current]];
+  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")
+  ] });
+};
+var MetricOptions = ({
+  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
+  ] });
+};
+var rank = (key) => {
+  const at = QUICK_METRICS.indexOf(key);
+  return at === -1 ? QUICK_METRICS.length : at;
+};
+var grouped = (items) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) groups.set(item.group, [...groups.get(item.group) ?? [], item]);
+  return [...groups];
+};
+
+// src/rule-list/styles.ts
+import { cn } from "@toolpath/ui";
+var FOCUS_RING = "outline-none focus-visible:ring-2 focus-visible:ring-info/75";
+var WORD = cn(
+  "cursor-pointer appearance-none rounded bg-transparent px-0.5 font-medium text-gray-700 field-sizing-content",
+  "underline decoration-gray-300 decoration-dotted underline-offset-4 hover:bg-gray-100",
+  "dark:text-zinc-100 dark:decoration-zinc-600 dark:hover:bg-zinc-700",
+  "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/new-rule.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var NewRule = ({ onAdd }) => {
+  const [all, setAll] = useState(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(
+      "span",
+      {
+        "aria-hidden": true,
+        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",
+      {
+        "aria-label": "New rule",
+        className: cn2(WORD, "font-normal text-gray-400 dark:text-zinc-500"),
+        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 })
+        ]
+      }
+    ) })
+  ] });
+};
+
+// src/rule-list/rule-row.tsx
+import { useRef as useRef2, useState as useState5 } from "react";
+import { CaretRightIcon as CaretRightIcon2, TrashIcon } from "@phosphor-icons/react";
+import { IconButton, cn as cn7 } from "@toolpath/ui";
+
+// src/rule-list/feature-rows.tsx
+import { useMemo } from "react";
+
+// src/rule-list/direction-label.ts
+var EPSILON = 1e-6;
+var trim = (value) => Number.parseFloat(value.toFixed(3)).toString();
+var directionLabel = (direction) => {
+  const axes = [
+    ["X", direction.x],
+    ["Y", direction.y],
+    ["Z", direction.z]
+  ];
+  const nonZero = axes.filter(([, value]) => Math.abs(value) > EPSILON);
+  const [axis] = nonZero;
+  if (nonZero.length === 1 && axis && Math.abs(Math.abs(axis[1]) - 1) < EPSILON) {
+    return `${axis[1] > 0 ? "+" : "\u2212"}${axis[0]}`;
+  }
+  return axes.map(([, value]) => trim(value)).join(", ");
+};
+
+// src/rule-list/feature-button.tsx
+import { cn as cn3 } from "@toolpath/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FEATURE_ROW = cn3(
+  "flex w-full cursor-pointer items-baseline gap-2 rounded px-2 py-1 text-left text-xs",
+  "text-gray-500 hover:bg-gray-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+  "aria-pressed:bg-gray-100 aria-pressed:font-semibold aria-pressed:text-gray-700",
+  "dark:aria-pressed:bg-zinc-800 dark:aria-pressed:text-zinc-100",
+  FOCUS_RING
+);
+var ruleHit = (check, rule, tag) => check.hitsByTag.get(tag.toLowerCase())?.find((each) => each.rule.id === rule.id);
+var HitFigure = ({
+  hit,
+  units
+}) => hit ? /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-gray-400 tabular-nums dark:text-zinc-400", children: hitFigure(hit, units) }) : null;
+var FeatureButton = ({
+  tag,
+  featureOf,
+  rule,
+  check,
+  units,
+  selected,
+  selectedGroup,
+  onInspect,
+  onHover,
+  onBack
+}) => {
+  const feature = featureOf.get(tag);
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      "data-list-item": "rules",
+      "data-follow": true,
+      "data-feature-row": true,
+      "aria-pressed": selected === tag && !selectedGroup,
+      onClick: () => onInspect(tag),
+      onKeyDown: (event) => {
+        if (event.key !== "ArrowLeft") return;
+        event.preventDefault();
+        onBack();
+      },
+      onPointerEnter: () => onHover(tag),
+      onPointerLeave: () => onHover(null),
+      className: FEATURE_ROW,
+      children: [
+        /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate", children: [
+          featureTypeLabel(feature?.featureType ?? "feature"),
+          " ",
+          /* @__PURE__ */ jsx3("span", { className: "font-normal text-gray-300 dark:text-zinc-500", children: feature ? `from ${directionLabel(feature.machiningDirection)}` : "" })
+        ] }),
+        /* @__PURE__ */ jsx3(HitFigure, { hit: ruleHit(check, rule, tag), units })
+      ]
+    }
+  );
+};
+
+// src/rule-list/hole-group-row.tsx
+import { useRef, useState as useState2 } 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";
+var HoleGroupRow = ({
+  row,
+  direction,
+  ...context
+}) => {
+  const [open, setOpen] = useState2(false);
+  const groupRef = useRef(null);
+  const { rule, check, units, selectedGroup, featureOf, onInspect, onHover, onBack } = context;
+  const [first] = row.tags;
+  const chosen = selectedGroup?.[0] === first;
+  return /* @__PURE__ */ jsxs4("li", { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "aria-label": open ? "Hide holes" : "Show holes",
+          "aria-expanded": open,
+          tabIndex: -1,
+          onClick: () => setOpen((was) => !was),
+          className: "-ml-5 flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-300 dark:text-zinc-500",
+          children: /* @__PURE__ */ jsx4(
+            CaretRightIcon,
+            {
+              weight: "bold",
+              className: cn4("size-3 transition-transform", open && "rotate-90")
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          ref: groupRef,
+          type: "button",
+          "data-list-item": "rules",
+          "data-follow": true,
+          "data-feature-row": true,
+          "aria-pressed": chosen,
+          onClick: () => onInspect(first, row.tags),
+          onKeyDown: (event) => {
+            if (event.key === "ArrowRight" && !open) {
+              event.preventDefault();
+              setOpen(true);
+            } else if (event.key === "ArrowLeft") {
+              event.preventDefault();
+              if (open) setOpen(false);
+              else onBack();
+            }
+          },
+          onPointerEnter: () => onHover(row.tags),
+          onPointerLeave: () => onHover(null),
+          className: FEATURE_ROW,
+          children: [
+            /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1 truncate", children: [
+              featureTypeLabel(featureOf.get(first)?.featureType ?? "hole"),
+              " \u2300",
+              formatMeasured("length", row.diameter, units),
+              " ",
+              /* @__PURE__ */ jsxs4("span", { className: "font-normal text-gray-400 dark:text-zinc-400", children: [
+                "\xD7",
+                row.tags.length,
+                " \xB7 from ",
+                direction
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4(HitFigure, { hit: ruleHit(check, rule, first), units })
+          ]
+        }
+      )
+    ] }),
+    open ? /* @__PURE__ */ jsx4("ul", { className: "pl-4", children: row.tags.map((tag) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(FeatureButton, { ...context, tag, onBack: () => groupRef.current?.focus() }) }, tag)) }) : null
+  ] });
+};
+
+// src/rule-list/feature-rows.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FeatureRows = ({
+  tags,
+  otherTags,
+  features,
+  sheets,
+  ...rest
+}) => {
+  const featureOf = useMemo(
+    () => new Map(features.map((feature) => [feature.tag, feature])),
+    [features]
+  );
+  const required = useMemo(() => featureRows(tags, features, sheets), [tags, features, sheets]);
+  const others = useMemo(
+    () => featureRows(otherTags, features, sheets),
+    [otherTags, features, sheets]
+  );
+  const context = { ...rest, featureOf };
+  const list = (rows) => rows.map(
+    (row) => row.kind === "holes" ? /* @__PURE__ */ jsx5(
+      HoleGroupRow,
+      {
+        row,
+        direction: directionOf(featureOf.get(row.key)),
+        ...context
+      },
+      row.key
+    ) : /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(FeatureButton, { tag: row.tag, ...context }) }, row.tag)
+  );
+  return /* @__PURE__ */ jsxs5("ul", { className: "pb-1 pl-12", children: [
+    list(required),
+    otherTags.length > 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "li",
+        {
+          className: "pt-1 pb-0.5 text-2xs font-semibold text-gray-400 uppercase dark:text-zinc-500",
+          title: "Readings of faces another feature also cuts: not counted or painted, since a plan may never cut them this way",
+          children: "Other readings, not required"
+        }
+      ),
+      /* @__PURE__ */ jsx5("div", { className: "opacity-70", children: list(others) })
+    ] }) : null
+  ] });
+};
+var directionOf = (feature) => feature ? directionLabel(feature.machiningDirection) : "";
+
+// src/rule-list/rule-sentence.tsx
+import { useState as useState4 } from "react";
+
+// src/rule-list/ops.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var OP_TITLES = {
+  gte: "at least",
+  gt: "more than",
+  lte: "at most",
+  lt: "less than",
+  eq: "equal to",
+  ne: "not equal to",
+  between: "a range, between two numbers"
+};
+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 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",
+  {
+    "aria-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, {})
+    ]
+  }
+) : /* @__PURE__ */ jsx7(
+  "select",
+  {
+    "aria-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))
+  }
+);
+
+// src/rule-list/value-field.tsx
+import { useEffect, useState as useState3 } from "react";
+import { cn as cn5 } from "@toolpath/ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ValueField = ({
+  label,
+  info,
+  value,
+  units,
+  onChange
+}) => {
+  const shown = toField(info.quantity, value, units);
+  const [text, setText] = useState3(shown);
+  const [typing, setTyping] = useState3(false);
+  useEffect(() => {
+    if (!typing) setText(shown);
+  }, [shown, typing]);
+  const invalid = fromField(info, text, units) === null;
+  return /* @__PURE__ */ jsx8(
+    "input",
+    {
+      "aria-label": label,
+      "aria-invalid": invalid,
+      inputMode: "decimal",
+      className: cn5(
+        WORD,
+        "min-w-[2ch] cursor-text tabular-nums",
+        invalid && "text-danger decoration-danger"
+      ),
+      value: text,
+      onFocus: () => setTyping(true),
+      onBlur: () => setTyping(false),
+      onChange: (event) => {
+        setText(event.target.value);
+        const typed = fromField(info, event.target.value, units);
+        if (typed !== null) onChange(typed);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+      }
+    }
+  );
+};
+
+// src/rule-list/rule-sentence.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var RuleSentence = ({
+  rule,
+  units,
+  onChange,
+  autoFocus
+}) => {
+  const info = metricInfo(rule.metric);
+  const flag = info?.quantity === "flag" || info?.quantity === "presence";
+  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",
+      {
+        "aria-label": "Features",
+        className: WORD,
+        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 })
+      }
+    ),
+    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(
+            ValueField,
+            {
+              label: "From",
+              info,
+              value: rule.value,
+              units,
+              onChange: (value) => onChange({ ...rule, value })
+            }
+          ),
+          unitSpan
+        ] }),
+        " ",
+        /* @__PURE__ */ jsxs8(
+          "select",
+          {
+            "aria-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, {})
+            ]
+          }
+        ),
+        " "
+      ] }) : null,
+      /* @__PURE__ */ jsx9(
+        "select",
+        {
+          "aria-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 })
+        }
+      ),
+      info && !flag ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        " ",
+        /* @__PURE__ */ jsx9(Comparison, { rule, ranged, onChange }),
+        " ",
+        /* @__PURE__ */ jsxs8("span", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx9(
+            ValueField,
+            {
+              label: ranged ? "Up to" : "Value",
+              info,
+              value: ranged ? upperOf(rule) : rule.value,
+              units,
+              onChange: (value) => onChange(ranged ? { ...rule, max: value } : { ...rule, value })
+            }
+          ),
+          unitSpan
+        ] })
+      ] }) : null
+    ] })
+  ] });
+};
+
+// src/rule-list/swatch.tsx
+import { cn as cn6 } from "@toolpath/ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var swatchKeys = listKeys("swatches", "horizontal");
+var Swatch = ({
+  color,
+  label,
+  onClick,
+  onKeyDown,
+  listItem,
+  className,
+  ref
+}) => {
+  const dot = cn6("size-4 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/15", className);
+  return onClick ? /* @__PURE__ */ jsx10(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": label,
+      "data-list-item": listItem,
+      onClick,
+      onKeyDown,
+      className: cn6(
+        dot,
+        "cursor-pointer hover:ring-2 hover:ring-gray-300 dark:hover:ring-zinc-500",
+        FOCUS_RING
+      ),
+      style: { backgroundColor: color }
+    }
+  ) : /* @__PURE__ */ jsx10("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(
+  "button",
+  {
+    type: "button",
+    "data-list-item": "swatches",
+    "aria-label": each.name,
+    "aria-pressed": value === each.value,
+    title: each.name,
+    autoFocus: value === each.value,
+    onClick: () => onChange(each.value),
+    className: cn6(
+      "size-5 cursor-pointer rounded-full ring-1 ring-black/10 outline-none focus-visible:ring-2 focus-visible:ring-info dark:ring-white/15",
+      value === each.value && "ring-2 ring-gray-600 ring-offset-1 dark:ring-zinc-100 dark:ring-offset-zinc-900"
+    ),
+    style: { backgroundColor: each.value }
+  },
+  each.value
+)) });
+
+// src/rule-list/rule-row.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var isControl = (target) => target instanceof Element && target.closest("button, select, input, a") !== null;
+var RuleRow = ({
+  rule,
+  result,
+  checking,
+  open,
+  focusOnMount,
+  onToggle,
+  onChange,
+  onRemove,
+  check,
+  features,
+  sheets,
+  units,
+  ...list
+}) => {
+  const [picking, setPicking] = useState5(false);
+  const swatchRef = useRef2(null);
+  const count = result?.tags.length ?? 0;
+  const others = result?.otherTags.length ?? 0;
+  const canOpen = count + others > 0;
+  const onRowKey = (event) => {
+    if (event.key === "ArrowRight" && canOpen) {
+      event.preventDefault();
+      if (!open) onToggle();
+      else
+        event.currentTarget.closest("li")?.querySelector("[data-feature-row]")?.focus();
+    } else if (event.key === "ArrowLeft" && open) {
+      event.preventDefault();
+      onToggle();
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "li",
+    {
+      className: cn7(
+        "group/rule",
+        // Nothing on the part breaks it: dimmed, until pointed at or worked in.
+        !checking && count === 0 && "opacity-55 transition-opacity focus-within:opacity-100 hover:opacity-100"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            onClick: (event) => {
+              if (canOpen && !isControl(event.target)) onToggle();
+            },
+            className: cn7(
+              "flex items-start gap-1.5 rounded py-1 pr-1.5 hover:bg-gray-50 dark:hover:bg-zinc-800/60",
+              canOpen && "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": open ? "Hide features" : "Show features",
+                  disabled: !canOpen,
+                  onClick: onToggle,
+                  className: cn7(
+                    "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(
+                    CaretRightIcon2,
+                    {
+                      weight: "bold",
+                      className: cn7("size-4 transition-transform duration-150", open && "rotate-90")
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                Swatch,
+                {
+                  ref: swatchRef,
+                  color: rule.color,
+                  label: "Change colour",
+                  onClick: () => setPicking((was) => !was),
+                  onKeyDown: onRowKey,
+                  listItem: "rules",
+                  className: "mt-1.5"
+                }
+              ),
+              /* @__PURE__ */ jsx11(RuleSentence, { rule, units, onChange, autoFocus: focusOnMount }),
+              /* @__PURE__ */ jsxs9("div", { className: "relative mt-1 shrink-0", children: [
+                /* @__PURE__ */ jsx11(
+                  IconButton,
+                  {
+                    "aria-label": "Remove rule",
+                    variant: "muted",
+                    size: "sm",
+                    onClick: onRemove,
+                    className: cn7(
+                      "absolute top-1/2 right-full mr-1 -translate-y-1/2 bg-white dark:bg-zinc-800",
+                      "pointer-events-none opacity-0 transition-opacity",
+                      "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" })
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  CountPill,
+                  {
+                    count,
+                    others,
+                    checking,
+                    open,
+                    canOpen,
+                    onToggle
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        picking ? /* @__PURE__ */ jsx11("div", { className: "pb-1 pl-[34px]", children: /* @__PURE__ */ jsx11(
+          ColorPicker,
+          {
+            value: rule.color,
+            onChange: (color) => {
+              onChange({ ...rule, color });
+              setPicking(false);
+              swatchRef.current?.focus();
+            }
+          }
+        ) }) : null,
+        open && result && check && features && sheets ? /* @__PURE__ */ jsx11(
+          FeatureRows,
+          {
+            rule,
+            tags: result.tags,
+            otherTags: result.otherTags,
+            check,
+            features,
+            sheets,
+            units,
+            onBack: () => swatchRef.current?.focus(),
+            ...list
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var CountPill = ({
+  count,
+  others,
+  checking,
+  open,
+  canOpen,
+  onToggle
+}) => /* @__PURE__ */ jsx11(
+  "button",
+  {
+    type: "button",
+    "aria-label": checking ? void 0 : countLabel(count, others),
+    title: others > 0 ? `${count} required \xB7 ${others} other ${readings(others)} not counted` : void 0,
+    "aria-expanded": canOpen ? open : void 0,
+    disabled: !canOpen,
+    onClick: onToggle,
+    className: cn7(
+      "flex h-5 min-w-8 items-center justify-center rounded-full px-1.5 text-xs font-semibold tabular-nums",
+      canOpen ? "cursor-pointer bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700" : "text-gray-300 dark:text-zinc-600",
+      FOCUS_RING
+    ),
+    children: checking ? "\u2026" : count
+  }
+);
+var readings = (count) => count === 1 ? "reading" : "readings";
+var countLabel = (count, others) => {
+  const required = `${count} required ${count === 1 ? "feature breaks" : "features break"} it`;
+  return others > 0 ? `${required}, and ${others} other ${readings(others)}` : required;
+};
+
+// 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 { Button, cn as cn8 } from "@toolpath/ui";
+import { jsx as jsx12, jsxs as jsxs10 } 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 importRules = async (file) => {
+    if (!file) return;
+    let text;
+    try {
+      text = await file.text();
+    } catch {
+      setNote("Could not import: the file could not be read.");
+      return;
+    }
+    const read = parseRuleSetFile(text);
+    if ("error" in read) {
+      setNote(`Could not import: ${read.error}`);
+      return;
+    }
+    rules.replace(read.rules);
+    setNote(importedNote(read.rules.length, read.skipped, read.name));
+  };
+  const copyPrompt = async () => {
+    try {
+      await navigator.clipboard.writeText(llmRulePrompt(rules.rules));
+    } catch {
+      setNote("Could not copy the prompt. Allow clipboard access and try again.");
+      return;
+    }
+    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(
+        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" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          ref: fileInput,
+          type: "file",
+          "aria-label": "Rule set file",
+          accept: ".json,application/json",
+          className: "hidden",
+          onChange: (event) => {
+            void importRules(event.currentTarget.files?.[0]);
+            event.currentTarget.value = "";
+          }
+        }
+      )
+    ] }),
+    note ? /* @__PURE__ */ jsx12("p", { className: "text-xs text-gray-500 dark:text-zinc-400", role: "status", children: note }) : null
+  ] });
+};
+var ActionLabel = ({ icon, children, hidden = false }) => /* @__PURE__ */ jsxs10(
+  "span",
+  {
+    "aria-hidden": hidden || void 0,
+    className: cn8("flex items-center gap-1.5 [&>svg]:size-3.5", hidden && "invisible"),
+    children: [
+      icon,
+      children
+    ]
+  }
+);
+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" })
+  );
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = EXPORT_FILE_NAME;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+var importedNote = (count, skipped, name) => {
+  const rulesRead = `Imported ${count} rule${count === 1 ? "" : "s"}`;
+  const named = name ? ` (${name})` : "";
+  const skippedSome = skipped > 0 ? `, ${skipped} skipped` : "";
+  return `${rulesRead}${named}${skippedSome}`;
+};
+
+// src/rule-list/rule-list.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var ruleListKeys = listKeys("rules");
+var RuleList = ({
+  rules,
+  check,
+  features,
+  sheets,
+  units,
+  ...list
+}) => {
+  const [openIds, setOpenIds] = useState7(/* @__PURE__ */ new Set());
+  const [added, setAdded] = useState7(null);
+  const toggleOpen = (id) => setOpenIds((was) => {
+    const next = new Set(was);
+    if (!next.delete(id)) next.add(id);
+    return next;
+  });
+  const byId = useMemo2(
+    () => new Map(check?.byRule.map((result) => [result.rule.id, result])),
+    [check]
+  );
+  const found = (rule) => {
+    const result = byId.get(rule.id);
+    return check === null || rule.id === added || (result?.tags.length ?? 0) + (result?.otherTags.length ?? 0) > 0;
+  };
+  const active = rules.rules.filter(found);
+  const none = rules.rules.filter((rule) => !found(rule));
+  const row = (rule) => /* @__PURE__ */ jsx13(
+    RuleRow,
+    {
+      rule,
+      result: byId.get(rule.id) ?? null,
+      checking: check === null,
+      open: openIds.has(rule.id),
+      focusOnMount: added === rule.id,
+      onToggle: () => toggleOpen(rule.id),
+      onChange: rules.update,
+      onRemove: () => rules.remove(rule.id),
+      check,
+      features,
+      sheets,
+      units,
+      ...list
+    },
+    rule.id
+  );
+  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: [
+        active.map(row),
+        none.map(row),
+        /* @__PURE__ */ jsx13(
+          NewRule,
+          {
+            onAdd: (subject) => {
+              const rule = makeRule(subject, PRESENCE_METRIC.key, units);
+              rules.add(rule);
+              setAdded(rule.id);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx13(RuleSetActions, { rules })
+    ] })
+  );
+};
+
+// src/reach/reach-chart.tsx
+import { useMemo as useMemo4 } from "react";
+
+// src/reach/reach-section.tsx
+import { useId, useMemo as useMemo3, useState as useState8 } from "react";
+
+// src/reach/reading.tsx
+import { heightAt } from "@toolpath/tool-support";
+
+// src/reach/section-layout.ts
+var SECTION_PAD = { left: 12, right: 64, top: 24, bottom: 62 };
+var SECTION_MAX_H = 380;
+var SECTION_MIN_H = 120;
+var FEATURE_SHARE = 0.4;
+var FEATURE_SHARE_MIN = 0.06;
+var FEATURE_SHARE_MAX = 0.6;
+var LABEL_GAP_X = 40;
+var LABEL_GAP_Y = 14;
+var WALL_LABEL_GAP_X = 30;
+var READ_CHAR_PX = 6.4;
+var HEADING_CHAR_PX = 6.5;
+var READ_INSET = 8;
+var AXIS_LABEL_HALF_PX = 84;
+var FLOOR_STRIP = 6;
+var DEPTH_WORD_PX = 34;
+var BREAK_STEP = 8;
+var BREAK_SWAY = 3;
+var risersOf = (curve) => {
+  const risers = [];
+  let level = 0;
+  curve.heights.forEach((height, index) => {
+    if (height > level) risers.push({ at: runStart(curve, index), from: level, to: height });
+    level = Math.max(level, height);
+  });
+  return risers;
+};
+var spaced = (items, position, gap) => {
+  const kept = [];
+  items.forEach((item, index) => {
+    const last = kept[kept.length - 1];
+    const clear = last === void 0 || Math.abs(position(item) - position(last)) >= gap;
+    if (clear) kept.push(item);
+    else if (index === items.length - 1) kept[kept.length - 1] = item;
+  });
+  return kept;
+};
+var breakSteps = (top, bottom) => Math.max(2, Math.round((bottom - top) / BREAK_STEP));
+var featureBreak = (left, top, bottom) => {
+  const steps = breakSteps(top, bottom);
+  let path = `M ${left} ${top}`;
+  for (let step = 1; step <= steps; step += 1) {
+    const sway = step === steps ? 0 : step % 2 === 1 ? BREAK_SWAY : -BREAK_SWAY;
+    path += ` L ${left + sway} ${top + (bottom - top) * step / steps}`;
+  }
+  return path;
+};
+var wallBreak = (right, top, bottom) => {
+  const steps = breakSteps(top, bottom);
+  let path = "";
+  for (let step = 1; step < steps; step += 1) {
+    const sway = step % 2 === 1 ? -BREAK_SWAY : BREAK_SWAY;
+    path += ` L ${right + sway} ${top + (bottom - top) * step / steps}`;
+  }
+  return path;
+};
+
+// src/reach/styles.ts
+var LINE = "stroke-gray-500 dark:stroke-zinc-400";
+var TEXT = "fill-gray-600 dark:fill-zinc-300";
+var MATERIAL = "fill-neutral-300 stroke-neutral-400 dark:fill-neutral-600 dark:stroke-neutral-500";
+var FLOOR = "fill-neutral-300 dark:fill-neutral-600";
+var ARROW = "fill-gray-500 dark:fill-zinc-400";
+var FEATURE_FILL = "fill-blue-500/15 dark:fill-blue-400/15";
+var FEATURE_LINE = "stroke-blue-600 dark:stroke-blue-400";
+var FEATURE_TEXT = "fill-blue-600 dark:fill-blue-400";
+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";
+var readingAt = ({ offsets, heights }, offset) => ({
+  offset,
+  height: heightAt({ horizontalOffset: offsets, verticalOffset: heights }, offset),
+  past: offset > (offsets[offsets.length - 1] ?? 0)
+});
+var readingText = ({ offset, height, past }, units) => `${lengthValue(offset, units)} ${unitLabel(units)} \u2192 ${lengthValue(height, units)} ${unitLabel(units)} reach${past ? " \xB7 past the last reading" : ""}`;
+var offsetUnder = (clientX, box, geometry) => {
+  const at = (clientX - box.left) * (geometry.width / box.width);
+  const offset = (at - SECTION_PAD.left) / geometry.scale + geometry.x0;
+  return offset >= 0 && at <= geometry.right ? offset : null;
+};
+var ReadingMark = ({
+  geometry,
+  reading,
+  units
+}) => {
+  const { x, y, width, floorY } = geometry;
+  const text = readingText(reading, units);
+  const textWidth = text.length * READ_CHAR_PX;
+  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(
+      "line",
+      {
+        x1: pointerX,
+        x2: pointerX,
+        y1: SECTION_PAD.top,
+        y2: floorY,
+        strokeWidth: 1,
+        strokeDasharray: "3 3",
+        className: READ
+      }
+    ),
+    /* @__PURE__ */ jsx14("circle", { cx: pointerX, cy: y(reading.height), r: 4, className: READ_DOT }),
+    /* @__PURE__ */ jsx14(
+      "text",
+      {
+        x: labelX,
+        y: SECTION_PAD.top + 14,
+        textAnchor: onRight ? "start" : "end",
+        fontSize: 11,
+        fontWeight: 600,
+        className: TEXT,
+        children: text
+      }
+    )
+  ] });
+};
+
+// src/reach/section-geometry.ts
+var materialPath = (curve, cut, x, y, floorY, right) => {
+  let path = `M ${x(0)} ${floorY}`;
+  let level = 0;
+  curve.offsets.forEach((offset, index) => {
+    level = curve.heights[index] ?? 0;
+    path += ` L ${x(runStart(curve, index))} ${y(level)} L ${Math.min(x(offset), right)} ${y(level)}`;
+  });
+  path += ` L ${right} ${y(level)}`;
+  if (cut) path += wallBreak(right, y(level), floorY);
+  return `${path} L ${right} ${floorY} Z`;
+};
+var featureShare = (feature, x1) => {
+  const trueShare = feature.across ? feature.across.width / (feature.across.width + x1) : FEATURE_SHARE;
+  return {
+    share: Math.min(Math.max(trueShare, FEATURE_SHARE_MIN), FEATURE_SHARE_MAX),
+    cut: feature.across !== null && trueShare > FEATURE_SHARE_MAX
+  };
+};
+var plotScale = (width, spanMm, topMm) => {
+  const fitted = (width - SECTION_PAD.left - SECTION_PAD.right) / spanMm;
+  if (topMm * fitted > SECTION_MAX_H) return { scale: SECTION_MAX_H / topMm, plotH: SECTION_MAX_H };
+  return { scale: fitted, plotH: Math.max(topMm * fitted, SECTION_MIN_H) };
+};
+var heightLabels = (risers, depth, y) => spaced(
+  [...new Set(risers.map((riser) => riser.to))].sort((a, b) => a - b),
+  (h) => -y(h),
+  LABEL_GAP_Y
+).filter((h) => depth === null || Math.abs(y(h) - y(depth)) >= LABEL_GAP_Y);
+var offsetLabels = (risers, x) => spaced(
+  risers.filter((riser) => x(riser.at) - x(0) >= WALL_LABEL_GAP_X),
+  (riser) => x(riser.at),
+  LABEL_GAP_X
+);
+var headingFor = (feature) => feature.through ? "THROUGH FEATURE" : "FEATURE";
+var headingMiddle = (heading, wallX) => Math.max(
+  (SECTION_PAD.left + wallX) / 2,
+  SECTION_PAD.left + heading.length * HEADING_CHAR_PX / 2
+);
+var sectionGeometry = (whole, feature, width) => {
+  const { curve, cut } = trimmedCurve(whole);
+  const last = curve.offsets[curve.offsets.length - 1] ?? 0;
+  const peak = peakHeight(curve);
+  const span = last > 0 ? last : Math.max(peak, 1);
+  const x1 = span * 1.08;
+  const { share, cut: featureCut } = featureShare(feature, x1);
+  const x0 = -x1 * share / (1 - share);
+  const top = Math.max(peak * 1.06, (feature.depth ?? 0) * 1.06, span * 0.08);
+  const { scale, plotH } = plotScale(width, x1 - x0, top);
+  const floorY = SECTION_PAD.top + plotH;
+  const x = (mm) => SECTION_PAD.left + (mm - x0) * scale;
+  const y = (mm) => floorY - mm * scale;
+  const right = Math.min(x(x1), width - SECTION_PAD.right);
+  const risers = risersOf(curve);
+  const { depth } = feature;
+  const heading = headingFor(feature);
+  return {
+    curve,
+    cut,
+    last,
+    width,
+    height: plotH + SECTION_PAD.top + SECTION_PAD.bottom,
+    scale,
+    x0,
+    x,
+    y,
+    floorY,
+    right,
+    materialPath: materialPath(curve, cut, x, y, floorY, right),
+    across: offsetLabels(risers, x),
+    up: heightLabels(risers, depth, y),
+    feature,
+    featureCut,
+    featureHeading: heading,
+    featureHeadingX: headingMiddle(heading, x(0)),
+    featureTopY: depth === null ? SECTION_PAD.top : y(depth),
+    featureBottomY: feature.through ? floorY + FLOOR_STRIP : floorY,
+    wallTop: y(curve.heights[0] ?? 0),
+    datumX: right + 8,
+    ordinateY: floorY + 22
+  };
+};
+
+// 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(
+  "marker",
+  {
+    id,
+    viewBox: "0 0 10 10",
+    refX: "10",
+    refY: "5",
+    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 })
+  }
+) });
+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(
+      "rect",
+      {
+        x: SECTION_PAD.left,
+        y: featureTopY,
+        width: x(0) - SECTION_PAD.left,
+        height: featureBottomY - featureTopY,
+        className: FEATURE_FILL
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "rect",
+      {
+        x: floorLeft,
+        y: floorY,
+        width: right - floorLeft,
+        height: FLOOR_STRIP,
+        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(
+      "line",
+      {
+        x1: SECTION_PAD.left,
+        x2: x(0),
+        y1: floorY,
+        y2: floorY,
+        strokeWidth: 2,
+        className: FEATURE_LINE
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "line",
+      {
+        x1: x(0),
+        x2: x(0),
+        y1: featureBottomY,
+        y2: wallTop,
+        strokeWidth: 2,
+        className: FEATURE_LINE
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "line",
+      {
+        x1: x(0),
+        x2: x(0),
+        y1: wallTop,
+        y2: SECTION_PAD.top,
+        strokeWidth: 0.75,
+        strokeDasharray: "3 2",
+        className: FEATURE_LINE
+      }
+    )
+  ] });
+};
+var SectionHeadings = ({ geometry }) => {
+  const { right } = geometry;
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: geometry.featureHeadingX,
+        y: SECTION_PAD.top - 8,
+        textAnchor: "middle",
+        fontSize: 9,
+        fontWeight: 600,
+        className: FEATURE_TEXT,
+        children: geometry.featureHeading
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: right,
+        y: SECTION_PAD.top - 8,
+        textAnchor: "end",
+        fontSize: 9,
+        className: TEXT,
+        opacity: 0.7,
+        children: "ADJACENT WALL HEIGHT"
+      }
+    )
+  ] });
+};
+var FeatureBreak = ({ geometry }) => geometry.featureCut ? /* @__PURE__ */ jsx15(
+  "path",
+  {
+    d: featureBreak(SECTION_PAD.left, geometry.featureTopY, geometry.featureBottomY),
+    strokeWidth: 1,
+    fill: "none",
+    className: FEATURE_LINE
+  }
+) : null;
+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(
+      "line",
+      {
+        x1: SECTION_PAD.left,
+        x2: x(0),
+        y1: featureTopY,
+        y2: featureTopY,
+        strokeWidth: 2,
+        className: FEATURE_LINE
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "line",
+      {
+        x1: x(0),
+        x2: datumX,
+        y1: featureTopY,
+        y2: featureTopY,
+        strokeWidth: 0.75,
+        strokeDasharray: "4 2",
+        className: FEATURE_LINE
+      }
+    ),
+    x(0) - SECTION_PAD.left >= DEPTH_WORD_PX ? /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: SECTION_PAD.left + 4,
+        y: featureTopY - 4,
+        fontSize: 9,
+        fontWeight: 600,
+        className: FEATURE_TEXT,
+        children: "depth"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: datumX + 4,
+        y: featureTopY + 3.5,
+        fontSize: 10,
+        fontWeight: 600,
+        className: FEATURE_TEXT,
+        children: lengthValue(depth, 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(
+      "line",
+      {
+        x1: x(0),
+        x2: x(last),
+        y1: ordinateY - 8,
+        y2: ordinateY - 8,
+        strokeWidth: 0.75,
+        markerStart: `url(#${arrowId})`,
+        markerEnd: `url(#${arrowId})`,
+        className: LINE
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "line",
+      {
+        x1: x(last),
+        x2: x(last),
+        y1: floorY,
+        y2: ordinateY - 4,
+        strokeWidth: 0.5,
+        className: LINE
+      }
+    ),
+    /* @__PURE__ */ jsxs13(
+      "text",
+      {
+        x: (x(0) + x(last)) / 2,
+        y: ordinateY - 11,
+        textAnchor: "middle",
+        fontSize: 10,
+        className: TEXT,
+        children: [
+          lengthValue(last, units),
+          " read"
+        ]
+      }
+    )
+  ] });
+};
+var OffsetOrdinates = (props) => {
+  const { geometry, units } = props;
+  const { x, y, right, width, floorY, ordinateY } = geometry;
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: Math.min(
+          Math.max((x(0) + right) / 2, AXIS_LABEL_HALF_PX + READ_INSET),
+          width - AXIS_LABEL_HALF_PX - READ_INSET
+        ),
+        y: ordinateY + 32,
+        textAnchor: "middle",
+        fontSize: 9,
+        className: TEXT,
+        opacity: 0.7,
+        children: "XY PLANE DISTANCE FROM FEATURE"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "line",
+      {
+        x1: x(0),
+        x2: x(0),
+        y1: floorY,
+        y2: ordinateY + 4,
+        strokeWidth: 0.75,
+        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(
+        "line",
+        {
+          x1: x(riser.at),
+          x2: x(riser.at),
+          y1: y(riser.from) + 2,
+          y2: ordinateY + 4,
+          strokeWidth: 0.5,
+          strokeDasharray: "2 2",
+          className: LINE
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "text",
+        {
+          x: x(riser.at),
+          y: ordinateY + 15,
+          textAnchor: "middle",
+          fontSize: 10,
+          className: TEXT,
+          children: lengthValue(riser.at, units)
+        }
+      )
+    ] }, `x:${riser.at}`)),
+    /* @__PURE__ */ jsx15(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(
+        "line",
+        {
+          x1: right - 2,
+          x2: datumX,
+          y1: y(h),
+          y2: y(h),
+          strokeWidth: 0.5,
+          strokeDasharray: "2 2",
+          className: LINE
+        }
+      ),
+      /* @__PURE__ */ jsx15("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";
+var ReachSection = ({
+  curve: whole,
+  units,
+  feature,
+  width
+}) => {
+  const [hover, setHover] = useState8(null);
+  const geometry = useMemo3(() => sectionGeometry(whole, feature, width), [whole, feature, width]);
+  const reactId = useId();
+  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 })
+    ] }),
+    [arrowId, geometry, units]
+  );
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${geometry.height}`,
+      width,
+      height: geometry.height,
+      className: "select-none",
+      role: "img",
+      "aria-label": "Reach curve, dimensioned",
+      onPointerMove: (event) => setHover(offsetUnder(event.clientX, event.currentTarget.getBoundingClientRect(), geometry)),
+      onPointerLeave: () => setHover(null),
+      children: [
+        drawing,
+        reading ? /* @__PURE__ */ jsx16(ReadingMark, { geometry, reading, units }) : null
+      ]
+    }
+  );
+};
+
+// src/reach/use-element-size.ts
+import { useLayoutEffect, useRef as useRef4, useState as useState9 } from "react";
+var useElementSize = () => {
+  const ref = useRef4(null);
+  const [size, setSize] = useState9({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setSize(
+        (was) => Math.abs(was.width - width) < 0.5 && Math.abs(was.height - height) < 0.5 ? was : { width, height }
+      );
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, size];
+};
+
+// src/reach/reach-chart.tsx
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs15 } 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(
+    ReachSection,
+    {
+      curve,
+      units,
+      feature,
+      width: Math.max(size.width, CHART_MIN_W)
+    }
+  ) });
+};
+var CutNote = ({
+  curve,
+  units
+}) => {
+  const trimmed = useMemo4(() => trimmedCurve(curve), [curve]);
+  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: [
+    " ",
+    "It is at full height from ",
+    lengthValue(drawnTo, units),
+    " ",
+    unitLabel(units),
+    " out, so the drawing stops there; the Engine read it to ",
+    lengthValue(readTo, units),
+    " ",
+    unitLabel(units),
+    "."
+  ] });
+};
+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: [
+        "Section at the wall \xB7 to scale \xB7 ",
+        unitLabel(units)
+      ] }),
+      /* @__PURE__ */ jsx17(
+        ReachSection,
+        {
+          curve,
+          units,
+          feature,
+          width: Math.max(size.width, DRAWING_MIN_W)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs15("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 })
+    ] })
+  ] });
+};
+export {
+  ReachChart,
+  ReachDrawing,
+  RuleList,
+  Swatch,
+  isField,
+  listKeys,
+  ruleListKeys
+};