@toolpath/dfm 0.1.0 → 0.2.1

package/README.md

@@ -9,6 +9,12 @@ as one JSON file.
 It also draws a feature's reach chart: the walls beside the feature, how high
 they stand and how far out.
 
+And it shows a feature as the Engine read it — the feature panel: the features
+a clicked face could mean, the rules the chosen one breaks, what was measured
+of it, its reach, and its datasheet as sent. Its pinch points, the widest tool
+standing where the feature is tightest, are placed here and drawn by
+`@toolpath/viewer`.
+
 The rules and the checker that counts them ship too, with no React, under
 `@toolpath/dfm/model`.
 
@@ -28,15 +34,16 @@ Add the styles after Tailwind and the `@toolpath/ui` theme:
 
 ## Exports
 
-| Entry point             | What it is                                                                                   |
-| ----------------------- | -------------------------------------------------------------------------------------------- |
-| `@toolpath/dfm`         | `RuleList`, `Swatch`, the list's keyboard helpers, `ReachChart`, `ReachDrawing`, their types |
-| `@toolpath/dfm/model`   | The rules, `checkPart`, the rule-set file — no React, no DOM                                 |
-| `@toolpath/dfm/dfm.css` | Lets the app's Tailwind see the list's and chart's classes                                   |
+| Entry point             | What it is                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `@toolpath/dfm`         | `RuleList`, `Swatch`, the list's keyboard helpers, `ReachChart`, `ReachDrawing`, the feature panel (`FeaturePanel`, `FeatureDetails`, `CandidateList`, `ComparisonTable`, `storageFolds`), their types |
+| `@toolpath/dfm/model`   | The rules, `checkPart`, the rule-set file, the feature panel's rows, pinch points — no React, no DOM                                                                                                   |
+| `@toolpath/dfm/dfm.css` | Lets the app's Tailwind see the list's and chart's classes                                                                                                                                             |
 
 ## The rules are an input
 
-The package ships no default rules and stores nothing. The app keeps the rules
+The package ships no default rules and stores nothing — not the rules, nor
+which of the feature panel's sections are open. The app keeps the rules
 — in memory, `localStorage`, a server — and passes them in with the functions
 that change them:
 
@@ -96,3 +103,112 @@ height; `ReachDrawing` says so in its note.
 This is not the clearance overlay in `@toolpath/tool-drawing/clearance`: that
 draws the walls beside a cutting tool, to show whether the tool fits. This
 draws the walls alone.
+
+## Feature panel
+
+`FeaturePanel` is the card a click on the part opens: every feature the face
+belongs to, then the details of the one being read. With several faces
+shift-clicked, each face's candidates sit under a letter, above a table of
+what each was read as. It fills what it is put in — where it sits, and
+whether it can be dragged, is the app's — and the app decides what a click
+means: which faces, which candidates in which order, which is read.
+
+```tsx
+import { FeatureDetails, FeaturePanel, storageFolds } from '@toolpath/dfm'
+import { brokenRules, featureMeasurements, featureProfile } from '@toolpath/dfm/model'
+
+const folds = storageFolds(localStorage, 'toolpath.fold.')
+
+export const Inspector = () => (
+  <FeaturePanel
+    faces={[{ region, rows, selected }]}
+    active={0}
+    onSelect={(tag) => setSelected(tag)}
+    onHover={setHovered}
+    onClose={close}
+    folds={folds}
+  >
+    <FeatureDetails
+      feature={feature}
+      units="mm"
+      directionColor={directionHex}
+      profile={featureProfile(sheets[key], feature.featureType)}
+      required={check.required.has(key)}
+      onFrame={() => frame(feature.tag)}
+      rules={brokenRules(check, feature.tag, 'mm')}
+      measurements={{
+        status: 'ready',
+        value: featureMeasurements({ features, feature, sheets, units: 'mm' }),
+      }}
+      record={{ status: 'ready', value: records[key] ?? null }}
+      PopOut={AppWindow}
+      folds={folds}
+    />
+  </FeaturePanel>
+)
+```
+
+The parts work alone too. An app with an inspect panel of its own puts
+`CandidateList` and `FeatureDetails` in it and fills their slots with its own
+controls — a folder in a row's `detail`, a Pin button in its `action`, Zoom to
+in the details' `actions`, a folder badge in `status`.
+
+- **Rules broken** are `BrokenRule` rows: a colour, the rule's text, the figure
+  that broke it, and optionally the limit and a note on hover. `brokenRules`
+  builds them from this package's check; an app with a checker of its own
+  builds them from its hits.
+- **Measurements** are `featureMeasurements` rows, each with how it was worked
+  out behind an ⓘ. `inchMark` writes inches as `0.46"`.
+- **Reach, the datasheet fields and the raw record** read the feature's
+  `FeatureRecord`: its report entry and datasheet as the API sent them.
+- **Reads take time.** `measurements` and `record` are `Loadable`. While
+  `loading`, a section says what it is reading; on `error` it shows the app's
+  message and a Retry, held until `retryAt`.
+- **The look** differs where apps want it to: `look.rules`, `look.selected` and
+  `look.muted`. Left out, it is the CAD viewer's.
+- **Folds** are kept in the app's `FoldStore`; `storageFolds(storage, prefix)`
+  builds one over a `Storage`. Without one, a section remembers only while it
+  is mounted.
+- **Pop-outs** need `PopOut`, the app's window component: the panel decides
+  what is open and fills it, and the app draws the frame. Define it at module
+  level, and render it through a portal to the page's body: the panel's blur
+  makes it the box a `fixed` window inside it would be placed in.
+- **Keys:** Escape closes the panel and the arrow keys walk the candidates. On
+  a `CandidateList` used alone, put `candidateListKeys` on whatever holds it.
+
+## Pinch points
+
+The widest tool a feature admits, standing where the feature is tightest. The
+data is here; the drawing is `@toolpath/viewer`'s `<ToolMarks>`, which knows
+nothing of datasheets:
+
+```tsx
+import { useMemo } from 'react'
+import { pinchLabel, pinchMark, placePinchTool } from '@toolpath/dfm/model'
+import { featureTriangles, ToolMarks, usePartContext } from '@toolpath/viewer'
+
+// A child of <EnginePart> or <PartMesh>, which gives it the part.
+export const PinchPoints = ({ datasheet, sheet, feature, units, shown }) => {
+  const { model, geometry } = usePartContext()
+  // Placing the tool searches the feature's faces: once per feature, not once per render.
+  const marks = useMemo(() => {
+    const mark = pinchMark(datasheet, sheet, feature.featureType)
+    const triangles = featureTriangles(model, geometry, feature.tag)
+    const tool = mark ? placePinchTool(mark, triangles, feature.machiningDirection) : null
+    return tool && mark ? [{ ...tool, ...pinchLabel(mark, units) }] : []
+  }, [datasheet, sheet, feature, model, geometry, units])
+  return <ToolMarks marks={marks} visible={shown} />
+}
+```
+
+`placePinchTool` finds the datasheet's tool frame against the feature's faces —
+the API gives its discs across the tool without saying which way x and y lie —
+and stands the tool on the tightest disc, turned toward the wall that pinches
+it. If the app moved the geometry to centre it, pass `origin`: where the CAD
+file's zero now sits.
+
+Show and hide it from the viewer's toolbar — `ViewerToolbar.ToolsButton` on a
+`tools` control — with the state held by the app; start it shown. The tool is
+an end mill made from its diameter and corner; to draw it as the app's other
+tools are drawn, give the mark a `profile` from `@toolpath/tool-drawing`'s
+outline of a flat or bull nose end mill that size.

package/dfm.css

@@ -1,6 +1,7 @@
 /*
- * Lets the app's Tailwind see the classes the rule list uses. Import it after
- * Tailwind and `@toolpath/ui/theme.css`, whose colours the list is drawn in:
+ * Lets the app's Tailwind see the classes the rule list and the feature panel
+ * use. Import it after Tailwind and `@toolpath/ui/theme.css`, whose colours
+ * they are drawn in:
  *
  *   @import 'tailwindcss';
  *   @import '@toolpath/ui/theme.css';

package/dist/{reach-CfmYU_yQ.d.ts → feature-record-BUoFFjN6.d.ts}

@@ -412,4 +412,92 @@ interface FeatureProfile {
 }
 declare const featureProfile: (sheet: FeatureSheet | undefined, featureType: string) => FeatureProfile;
 
-export { featureTypeLabel as A, isNoReading as B, CRITICAL_COLOR as C, type DfmRule as D, makeRule as E, type FeatureSheets as F, parseRules as G, peakHeight as H, readPinch as I, readReachCurve as J, runStart as K, trimmedCurve as L, withSurroundedFaces as M, PINCH_TOOL_MM as P, type ReachCurve as R, type Units as U, WARNING_COLOR as W, type DfmCheck as a, type DfmFeature as b, type FeatureProfile as c, type DfmHit as d, type FeatureSheet as e, type ClearanceFit as f, type DfmMetric as g, type DfmOp as h, type DfmQuantity as i, type DfmSources as j, type FactsKind as k, type FeatureAcross as l, type FeaturePinch as m, type FeatureThreading as n, type PinchDisc as o, RULE_COLORS as p, type RangeHigh as q, type RangeLow as r, type ReportFeature as s, type RuleResult as t, checkPart as u, compareColors as v, describeRule as w, dfmFeatures as x, featureProfile as y, featureSheet as z };
+/**
+ * A rule a feature breaks, as a row of its details says it: a coloured dot,
+ * the rule, and the figure that broke it. Neutral, so an app with rules of its
+ * own — the quoting app's, by severity — fills it from those, and an app on
+ * this package's checker fills it with {@link brokenRules}.
+ */
+interface BrokenRule {
+    /** Unique among one feature's rows: the rule's id. */
+    readonly key: string;
+    /** The dot: the rule's colour, or the app's colour for its severity. */
+    readonly color: string;
+    /** The rule: `Holes with L/D to top of part ≥ 8`, or a short label where `limit` says the rest. */
+    readonly text: string;
+    /** What the feature measured: `9.8`. Absent for a yes/no. */
+    readonly figure?: string;
+    /** The line it crossed, where `text` does not already say it: `≥ 8`. */
+    readonly limit?: string;
+    /** On hover: the rule written out, and why it matters. */
+    readonly note?: string;
+}
+/** The rules a feature breaks, as its details list them: one a measure, the worst, palette first. */
+declare const brokenRules: (check: DfmCheck, tag: string, units: Units) => BrokenRule[];
+/**
+ * The colour a feature is painted on the part: the one earliest in the
+ * palette of the rules it breaks, for a required feature. Read from a face
+ * painted alone (`region`), that face's colour where it is painted for this
+ * feature; a feature painted whole, its colour. Undefined otherwise.
+ */
+declare const featureColor: (check: DfmCheck, tag: string, region?: number | null) => string | undefined;
+
+/** One row of a feature's details. */
+interface Measurement {
+    /** Stable, so a list can key its rows. */
+    readonly key: string;
+    readonly label: string;
+    readonly value: string;
+    /** The same number in the other unit. Absent on a ratio or a count. */
+    readonly alt?: string;
+    /**
+     * How it was worked out from the datasheet, a line at a time: the fields it
+     * reads, by their path in the raw record, and the arithmetic, in the
+     * Engine's millimetres.
+     */
+    readonly derivation: readonly string[];
+    /**
+     * A machining consideration rather than a measurement of the feature's own
+     * shape: the tool that cuts it, and how far it has to reach. The panel lists
+     * these under their own heading, for every kind of feature.
+     */
+    readonly milling?: true;
+    /** A row that stands for a tool the viewer can draw on the part, by its kind. */
+    readonly tool?: SurfaceToolKind;
+}
+/** Which of a surface's finishing tools: a ball nose, or a bull nose with a flat between its corners. */
+type SurfaceToolKind = 'ball' | 'bull';
+/** Whether a feature type is read as a surface: see `SURFACE_TYPES`. */
+declare const isSurfaceType: (featureType: string) => boolean;
+/**
+ * The biggest ball nose a surface admits, mm: a ball's corner radius is half
+ * its diameter, so it is held under the tool fit's diameter and corner radius
+ * at once. None where the surface reports no fit, or admits no corner at all.
+ */
+declare const maxBallDiameter: (sheet: Pick<FeatureSheet, "fitToolDiameter" | "fitCornerRadius">) => number | undefined;
+/**
+ * The rows a feature gets, in {@link ROW_ORDER}: its own geometry first, then
+ * where it sits in the part and the reach that makes, then the tools a
+ * surface admits. A row is left out rather than shown empty: "—" against a
+ * field this kind never reports reads as a measurement that failed.
+ */
+declare const featureMeasurements: ({ features, feature, sheets, units, inchMark, }: {
+    features: readonly DfmFeature[];
+    feature: DfmFeature;
+    sheets: FeatureSheets;
+    units: Units;
+    /** Writes inches as `0.46"` rather than `0.46 in`. */
+    inchMark?: boolean;
+}) => Measurement[];
+
+/**
+ * Everything the API said about one feature: its entry in the part report and
+ * its datasheet, both as sent, so fields newer than any SDK are still there.
+ */
+interface FeatureRecord {
+    readonly feature: unknown;
+    /** Null where the API sent no datasheet for the feature. */
+    readonly datasheet: unknown;
+}
+
+export { featureColor as A, type BrokenRule as B, CRITICAL_COLOR as C, type DfmRule as D, featureMeasurements as E, type FeatureSheets as F, featureProfile as G, featureSheet as H, featureTypeLabel as I, isNoReading as J, isSurfaceType as K, makeRule as L, type Measurement as M, maxBallDiameter as N, parseRules as O, PINCH_TOOL_MM as P, peakHeight as Q, type ReachCurve as R, type SurfaceToolKind as S, readPinch as T, type Units as U, readReachCurve as V, WARNING_COLOR as W, runStart as X, trimmedCurve as Y, withSurroundedFaces as Z, type DfmCheck as a, type DfmFeature as b, type FeatureProfile as c, type FeatureRecord as d, type DfmHit as e, type FeaturePinch as f, type FeatureSheet as g, type ClearanceFit as h, type DfmMetric as i, type DfmOp as j, type DfmQuantity as k, type DfmSources as l, type FactsKind as m, type FeatureAcross as n, type FeatureThreading as o, type PinchDisc as p, RULE_COLORS as q, type RangeHigh as r, type RangeLow as s, type ReportFeature as t, type RuleResult as u, brokenRules as v, checkPart as w, compareColors as x, describeRule as y, dfmFeatures as z };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { FC, KeyboardEvent, Ref } from 'react';
-import { D as DfmRule, a as DfmCheck, b as DfmFeature, F as FeatureSheets, U as Units, R as ReachCurve, c as FeatureProfile } from './reach-CfmYU_yQ.js';
+import { FC, KeyboardEvent, Ref, ComponentType, ReactNode, ReactElement, HTMLAttributes } from 'react';
+import { D as DfmRule, a as DfmCheck, b as DfmFeature, F as FeatureSheets, U as Units, R as ReachCurve, c as FeatureProfile, B as BrokenRule, M as Measurement, d as FeatureRecord } from './feature-record-BUoFFjN6.js';
 
 /**
  * The rules the list shows, and how to change them. The app owns them —
@@ -114,4 +114,255 @@ declare const ReachChart: FC<ReachChartProps>;
 /** A larger window's contents: the section, large, with what it is and how to read it. */
 declare const ReachDrawing: FC<ReachChartProps>;
 
-export { type DfmRules, type Hovered, ReachChart, type ReachChartProps, ReachDrawing, RuleList, type RuleListProps, Swatch, type SwatchProps, isField, listKeys, ruleListKeys };
+/**
+ * Where the feature panel keeps which of its sections are open, so a section
+ * put away stays away from one feature to the next, and from one visit to the
+ * next. The app supplies it: the package stores nothing of its own.
+ *
+ * Sections are named by fixed ids — `rules`, `measurements`, `milling`,
+ * `reach`, `datasheet`, `raw`, `comparison`, `candidates`, and `candidates-A`,
+ * `candidates-B`… while comparing faces.
+ */
+interface FoldStore {
+    /** Whether a section was left open; undefined for one never folded, which then opens as it starts. */
+    read: (id: string) => boolean | undefined;
+    write: (id: string, open: boolean) => void;
+}
+/**
+ * A fold store over a `Storage` — `localStorage`, `sessionStorage` — under a
+ * key prefix of the app's: `toolpath.fold.` keeps `toolpath.fold.reach` as
+ * `open` or `shut`. A storage that is missing, or that refuses (a private
+ * window, say), leaves the sections folding for as long as they are mounted.
+ */
+declare const storageFolds: (storage: Pick<Storage, "getItem" | "setItem"> | null | undefined, prefix: string) => FoldStore;
+
+/**
+ * How the feature panel looks where two apps want it to differ. Every field
+ * left out takes the first value, which is the CAD viewer's look.
+ */
+interface FeaturePanelLook {
+    /**
+     * A broken rule: `sentence` — the rule written out, the figure that broke it
+     * in grey; or `result` — a short label, the figure in the rule's colour, and
+     * the line it crossed, faded.
+     */
+    rules?: 'sentence' | 'result';
+    /** The chosen candidate: `grey` and bold, or an `info` blue border and tint. */
+    selected?: 'grey' | 'info';
+    /** Secondary text: `pale` grey, or a `strong` grey that reads at full contrast. */
+    muted?: 'pale' | 'strong';
+}
+
+/** What the panel needs to name a feature: its tag, its type, and the way it is machined from. */
+type FeatureIdentity = Pick<DfmFeature, 'tag' | 'featureType' | 'machiningDirection'>;
+/**
+ * Something the app reads for the panel, and how far it has got: the panel
+ * says what it is waiting on, or what went wrong, in place of the section.
+ */
+type Loadable<T> = {
+    readonly status: 'loading';
+} | {
+    readonly status: 'error';
+    /** In the app's own words: the API's answer, or that it asked to wait. */
+    readonly message: string;
+    /** Reads it again; left out, there is no Retry. */
+    readonly retry?: () => void;
+    /** No Retry before this, in `Date.now()` milliseconds: what a 429's `Retry-After` asks. */
+    readonly retryAt?: number;
+} | {
+    readonly status: 'ready';
+    readonly value: T;
+};
+/** Which of a feature's sections pops out into a window of its own. */
+type PopOutId = 'reach' | 'datasheet' | 'raw';
+/**
+ * The app's window for a section popped out of the panel. The panel decides
+ * when one is open and what is in it; the app draws the frame — moved and
+ * sized as its page allows — and calls `onClose`. Define it once, at module
+ * level: one written inline remounts the window on every render. Render it
+ * through a portal to the page's body: the panel blurs what is behind it,
+ * which makes the panel the box a `fixed` window inside it is placed in.
+ */
+interface PopOutWindowProps {
+    id: PopOutId;
+    title: string;
+    /** Under the title: the feature it is of. */
+    subtitle: ReactNode;
+    icon: ReactElement;
+    /** In the header, before the close button: a copy button, say. */
+    action?: ReactNode;
+    onClose: () => void;
+    children: ReactNode;
+}
+type PopOutWindow = ComponentType<PopOutWindowProps>;
+
+interface FeatureDetailsProps {
+    feature: FeatureIdentity;
+    /** Lengths in the reach chart; every other figure comes in written. */
+    units: Units;
+    /** The colour of the feature's machining direction, as the part shows it: any CSS colour. */
+    directionColor: string;
+    /** The feature beside its walls, for the reach chart: `featureProfile` of its sheet. */
+    profile: FeatureProfile;
+    /** In place of the feature's type: `Through hole ⌀ 6.35`. */
+    label?: ReactNode;
+    /** A feature the plan cannot do without: shows the REQUIRED pill. Left out, no pill. */
+    required?: boolean;
+    /** Turns the camera to the feature: shows a "Show this feature" button. */
+    onFrame?: () => void;
+    /** Right of the name: the app's own buttons. */
+    actions?: ReactNode;
+    /** At the end of the "Machined from" line: a folder badge, say. */
+    status?: ReactNode;
+    /** Under the title, before the sections: a sentence of the app's, its own action. */
+    children?: ReactNode;
+    /** The rules it breaks, as rows: see `brokenRules`. */
+    rules: readonly BrokenRule[];
+    /** Its measurements and milling considerations: `featureMeasurements`. */
+    measurements: Loadable<readonly Measurement[]>;
+    /** Its raw report entry and datasheet, for the reach chart. Null where the app has none. */
+    record: Loadable<FeatureRecord | null>;
+    /**
+     * The app's window, to pop the reach, the datasheet fields and the raw
+     * record out into, larger. Left out, there are no pop-out buttons.
+     */
+    PopOut?: PopOutWindow;
+    look?: FeaturePanelLook;
+    folds?: FoldStore;
+}
+/**
+ * One feature, as the Engine read it: its name and the way it is machined
+ * from, then the rules it breaks, what was measured of it, what that asks of
+ * the milling, and its reach.
+ *
+ * Then, shut until opened, every field of its datasheet and its raw API record,
+ * to read or copy.
+ *
+ * Each section folds away under its heading. A section waiting on something
+ * the app reads says so, and one whose read failed says why, with a Retry.
+ */
+declare const FeatureDetails: FC<FeatureDetailsProps>;
+
+/**
+ * Up, down, Home and End through the candidates: put them on whatever holds
+ * the list — the whole panel, or just the list — as `ruleListKeys` is put on
+ * the rules. Each row is chosen as it is reached.
+ */
+declare const candidateListKeys: (event: react.KeyboardEvent<HTMLElement>) => void;
+/** One feature a face could have meant, as its row says it. */
+interface CandidateRow {
+    readonly feature: FeatureIdentity;
+    /** In place of the feature's type: `Blind hole ⌀ 6.35 × 4`. */
+    readonly label?: ReactNode;
+    /** The dot before it: the colour it is painted, or its direction's. Left out, a gap keeps the rows aligned. */
+    readonly color?: string;
+    /** How many rules it breaks: `2 rules`. */
+    readonly ruleCount?: number;
+    readonly required?: boolean;
+    /** Right-aligned in the row: the folder it is in, say. */
+    readonly detail?: ReactNode;
+    /** A second line under it: a note on how it overlaps another. */
+    readonly note?: ReactNode;
+    /** Beside the row, outside its button: the app's own action on it. */
+    readonly action?: ReactNode;
+}
+/** When comparing faces, which face this list is: its letter, and how to stop comparing it. */
+interface ComparedFaceList {
+    readonly index: number;
+    /** The face being read: its letter is filled. */
+    readonly active: boolean;
+    readonly onStop?: () => void;
+}
+interface CandidateListProps {
+    /** In the app's order: the first is what a click meant first. */
+    rows: readonly CandidateRow[];
+    selected: string | null;
+    onSelect: (tag: string) => void;
+    /** A row under the pointer, and leaving it: left out, the rows preview nothing. */
+    onHover?: (tag: string | null) => void;
+    /** While comparing faces: this list's face. */
+    face?: ComparedFaceList;
+    look?: FeaturePanelLook;
+    folds?: FoldStore;
+}
+/**
+ * Every feature a clicked face belongs to, as rows to choose between: its
+ * colour, its name and the way it is machined from, how many rules it breaks,
+ * whether it is required, and whatever the app adds. The keys walk them, each
+ * chosen as it is reached; see {@link candidateListKeys}.
+ */
+declare const CandidateList: FC<CandidateListProps>;
+
+/** One compared face: the feature it is read as, and what that feature is and measures. */
+interface ComparedFace {
+    /** Null for a face no feature owns. */
+    readonly feature: FeatureIdentity | null;
+    /** Its machining direction's colour, as the part shows it. */
+    readonly directionColor: string;
+    /** Whether it is required. Left out on every face, the Required row goes. */
+    readonly required?: boolean;
+    readonly rules: readonly BrokenRule[];
+    readonly measurements: readonly Measurement[];
+}
+interface ComparisonTableProps {
+    faces: readonly ComparedFace[];
+    /** The face being read, whose column head is marked. */
+    active: number;
+    /** A column head chosen: that face's feature, to read. */
+    onSelect: (tag: string, face: number) => void;
+    onHover?: (tag: string | null) => void;
+    look?: FeaturePanelLook;
+    folds?: FoldStore;
+}
+/**
+ * What each compared face was read as, side by side: a column per face, its
+ * feature at the head, and a row for each thing any of them has — its type,
+ * the way it is machined from, whether it is required, the rules it breaks,
+ * then every measurement. Rows where the readings disagree stand out; the rest
+ * are greyed.
+ */
+declare const ComparisonTable: FC<ComparisonTableProps>;
+
+/** One face being inspected: the features it could mean, and the one being read. */
+interface InspectedFace {
+    /** The face clicked; null for a feature chosen from a list, which has no candidates to show. */
+    readonly region: number | null;
+    /** In the app's order: see `CandidateList`. */
+    readonly rows: readonly CandidateRow[];
+    readonly selected: string | null;
+}
+interface FeaturePanelProps {
+    /** One face, or several while comparing. */
+    faces: readonly InspectedFace[];
+    /** Which face's feature the details are of. */
+    active: number;
+    /** A group of identical holes chosen together: how many, for the title. */
+    group?: number;
+    /** What each compared face was read as: the comparison table, while comparing. */
+    comparison?: readonly ComparedFace[];
+    onSelect: (tag: string, face: number) => void;
+    /** Takes a face out of the comparison. */
+    onDropFace?: (face: number) => void;
+    onHover?: (tag: string | null) => void;
+    onClose: () => void;
+    /** Spread on the header: an app's drag handle, say. */
+    headerProps?: HTMLAttributes<HTMLElement>;
+    className?: string;
+    look?: FeaturePanelLook;
+    folds?: FoldStore;
+    /** The active face's feature: its `<FeatureDetails>`. */
+    children?: ReactNode;
+}
+/**
+ * The feature panel as a card: what a click on the part found — every feature
+ * the face belongs to, then the details of the one being read — or, with
+ * several faces shift-clicked, each face's candidates under a letter and a
+ * comparison of what each was read as.
+ *
+ * It fills what it is put in: where the card sits, and whether it moves, is
+ * the app's. Escape calls `onClose`, and the arrow keys walk the candidates
+ * from anywhere in it.
+ */
+declare const FeaturePanel: FC<FeaturePanelProps>;
+
+export { CandidateList, type CandidateListProps, type CandidateRow, type ComparedFace, type ComparedFaceList, ComparisonTable, type ComparisonTableProps, type DfmRules, FeatureDetails, type FeatureDetailsProps, type FeatureIdentity, FeaturePanel, type FeaturePanelLook, type FeaturePanelProps, type FoldStore, type Hovered, type InspectedFace, type Loadable, type PopOutId, type PopOutWindow, type PopOutWindowProps, ReachChart, type ReachChartProps, ReachDrawing, RuleList, type RuleListProps, Swatch, type SwatchProps, candidateListKeys, isField, listKeys, ruleListKeys, storageFolds };