@ahoo-wang/wow-view-engine 9.2.0-rc.0

package/dist/ui/kit/summary.d.ts

@@ -0,0 +1,45 @@
+import { FilterSummaryItem, DurationComparison } from '../../filter/index.js';
+import { DisplayContext } from './display.js';
+import { MessageFormatters } from './MessagesProvider.js';
+/**
+ * The catalogue key for one deletion reading. The stored value is Wow's
+ * `DeletionState` token; a boolean's words are chosen the same way. Spelt
+ * as the tokens rather than the enum, because `/ui` does not import the
+ * protocol package — the kind that admits the token is the one that does.
+ */
+declare const DELETION_LABELS: {
+    readonly ACTIVE: "label.deletion.active";
+    readonly DELETED: "label.deletion.deleted";
+    readonly ALL: "label.deletion.all";
+};
+export declare function deletionLabel(state: keyof typeof DELETION_LABELS): (typeof DELETION_LABELS)[keyof typeof DELETION_LABELS];
+/**
+ * One applied condition as the bar says it, in the wording in force.
+ *
+ * `FilterSummaryItem.text` is the kind's own English line and stays what a
+ * host reading it gets; this is what the badge shows. The kernel hands over
+ * parts — a field, an operator and a closed union of value shapes — and the
+ * words come from the catalogue, the values from `display.ts`: option labels
+ * the kind already resolved, dates in the surface's language and zone,
+ * numbers in their field's format.
+ */
+export declare function summaryText(item: FilterSummaryItem, messages: MessageFormatters, context: DisplayContext): string;
+/**
+ * The conditions a result came back under, as one line — 「条件：状态 是
+ * 已发运 · 创建时间 在 本月」, or every record where there are none: what
+ * the export window says a file holds, and what a chart's picture says of
+ * the range it covers (D33 Q58).
+ */
+export declare function conditionsText(items: readonly FilterSummaryItem[], messages: MessageFormatters, context: DisplayContext): string;
+/**
+ * The whole of a metric's own condition as one sentence — 「只算 状态 是
+ * 已发运」 — in the words the applied bar uses for a condition. The card says
+ * it at rest under the metric, and a conditioned column's header says it as
+ * its description, so the header's short 「· 已发运」 and the full condition
+ * are one reading.
+ */
+export declare function onlyWhereText(items: readonly FilterSummaryItem[], messages: MessageFormatters, context: DisplayContext): string;
+/** A comparison as its sign, the same in every language. */
+export declare const COMPARISON_SIGN: Readonly<Record<DurationComparison, string>>;
+export {};
+//# sourceMappingURL=summary.d.ts.map

package/dist/ui/kit/summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary.d.ts","sourceRoot":"","sources":["../../../src/ui/kit/summary.ts"],"names":[],"mappings":"AAiBA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAExB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D;;;;;GAKG;AACH,QAAA,MAAM,eAAe;;;;CAIX,CAAC;AAEX,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,OAAO,eAAe,GAClC,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAExD;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,cAAc,GACtB,MAAM,CAIR;AAsFD;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,SAAS,iBAAiB,EAAE,EACnC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,cAAc,GACtB,MAAM,CAOR;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,iBAAiB,EAAE,EACnC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,cAAc,GACtB,MAAM,CAMR;AAwJD,4DAA4D;AAC5D,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAOxE,CAAC"}

package/dist/ui/kit/toolbar.d.ts

@@ -0,0 +1,92 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
+import * as React from 'react';
+/**
+ * A control bar that is one tab stop, with the arrow keys inside it.
+ *
+ * The shadcn registry carries no `toolbar`, so this is Base UI's primitive
+ * with nothing but a `data-slot` added — the same thin-wrapper shape
+ * `popups.tsx` uses, and for the same reason: the registry's part is the
+ * first choice, and where there is none the primitive is taken directly
+ * rather than hand-rolled.
+ *
+ * What the primitive answers for, and what this package used to re-decide at
+ * every bar: `role="toolbar"`, `aria-orientation`, and the roving tabindex —
+ * one stop for the whole bar, Arrow keys between the controls, wrapping at
+ * both ends. A dense row of icon buttons is exactly the case ARIA's toolbar
+ * pattern exists for: without it, eight controls stand between the rows and
+ * everything above them.
+ */
+export declare function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props): React.JSX.Element;
+export interface ToolbarItemProps extends React.ComponentProps<'button'> {
+    /**
+     * The control this item is. Every one of them is already a button of some
+     * kind — a popup's trigger, a tooltip's trigger over one — so the element
+     * comes in through `render` and no markup is added around it.
+     */
+    render: React.ReactElement<Record<string, unknown>>;
+}
+/**
+ * One control of a toolbar, which is an ordinary control anywhere else.
+ *
+ * Inside a {@link Toolbar} it joins the roving focus order; outside one it
+ * renders exactly what it was given, so a component whose trigger is a
+ * toolbar item stays usable — and testable — on its own.
+ */
+export declare function ToolbarItem(props: ToolbarItemProps): React.JSX.Element;
+/**
+ * A popover opened from a toolbar, whose content is drawn outside it.
+ *
+ * Base UI's `Toolbar` hands its roving-focus context to its whole React
+ * subtree — and a portal is still that subtree — so every control in a
+ * popover opened from a toolbar button believed it was an item of the bar:
+ * a checkbox, a pin toggle, a select trigger each left its `tabindex` to a
+ * bar that never gave it one. Chromium still reached the native buttons;
+ * Safari's default Tab, which stops only on fields and on what carries a
+ * `tabindex`, skipped them, and a checkbox (a `<span>`) was out of every
+ * browser's Tab order until each was given `tabIndex` by hand (the
+ * 2026-09-25 keyboard walkthrough).
+ *
+ * So the popover is split along the line the bar draws: the **trigger**
+ * stands in the toolbar and is one of its stops, the **popup** — the root
+ * and everything in it — is rendered beside the toolbar rather than inside
+ * it, and the two are joined by a handle (`Popover.createHandle`, Base UI's
+ * detached trigger). Nothing in the popup is under the bar any more, so no
+ * control in it needs to be told what it already is.
+ */
+export interface DetachedPopover {
+    handle: PopoverHandle;
+    /** Which half this rendering is: the bar's button, or the popup. */
+    part: 'trigger' | 'popup';
+}
+/** The handle `DetachedPopover` joins its two halves by. */
+export type PopoverHandle = PopoverPrimitive.Handle<unknown>;
+/** One handle for the life of the component, for one detached popover. */
+export declare function usePopoverHandle(): PopoverHandle;
+/**
+ * A window opened from a toolbar, whose content is drawn outside it: the
+ * export's (`ExportButton`, `ExportMenu`). The same split as
+ * `DetachedPopover`, for the same reason — the Close, Cancel and Export of
+ * a window drawn under the bar each took itself for one of its items and
+ * wrote no `tabindex` — joined by `Dialog.createHandle`.
+ */
+export interface DetachedDialog {
+    handle: DialogHandle;
+    /**
+     * What the keyboard goes back to as the window closes, where the window
+     * is opened by something that is not its own trigger — a menu's item,
+     * gone with the menu, so the menu's button in the bar.
+     */
+    opener: React.RefObject<HTMLButtonElement | null>;
+    /** Which half this rendering is: the bar's button, or the window. */
+    part: 'trigger' | 'popup';
+}
+/** The handle `DetachedDialog` joins its two halves by. */
+export type DialogHandle = DialogPrimitive.Handle<unknown>;
+/**
+ * One handle and one opener for the life of the component, for one
+ * detached window; the caller adds which half it draws.
+ */
+export declare function useDialogHandle(): Omit<DetachedDialog, 'part'>;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/ui/kit/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/kit/toolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAGrE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAU3E;AAcD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACtE;;;;OAIG;IACH,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACrD;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBASlD;AAYD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,oEAAoE;IACpE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B;AAED,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAO7D,0EAA0E;AAC1E,wBAAgB,gBAAgB,IAAI,aAAa,CAGhD;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,YAAY,CAAC;IACrB;;;;OAIG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAClD,qEAAqE;IACrE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B;AAED,2DAA2D;AAC3D,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAO3D;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAI9D"}

package/dist/ui/kit/variants.d.ts

@@ -0,0 +1,464 @@
+import { VariantProps } from 'class-variance-authority';
+import { FieldTone } from '../../model/index.js';
+import { AlertDialogAction } from '../components/alert-dialog.js';
+import { Badge } from '../components/badge.js';
+import { Button } from '../components/button.js';
+import { Card } from '../components/card.js';
+import { ComboboxChips, ComboboxInput } from '../components/combobox.js';
+import { Input } from '../components/input.js';
+import { SelectTrigger } from '../components/select.js';
+import { Separator } from '../components/separator.js';
+import { TableRow } from '../components/table.js';
+/**
+ * The colours and edges a vendored component does not ship, in one place.
+ *
+ * Two rules of this package meet here and used to contradict each other:
+ * `components/**` is vendored and is never edited by hand, and a call site
+ * never carries a component's colours in a `className`. What was left was a
+ * third path, which D16 ruling 8 chose: a **thin wrapper beside the
+ * component** holding a cva of its own. The vendored cva stays untouched and
+ * is still composed — the wrapper picks the registry variant its case starts
+ * from and adds one layer over it — and the call site passes a variant
+ * rather than a colour. Seven cases live here: a badge that has to read as a
+ * status (and one that says a change, in the colour the host's convention
+ * gives it), a badge that has to hold a sentence, the answer that carries out a
+ * destructive command, the dashed edge of a button that adds what is
+ * not there yet, the one divider that has to be seen, the controls
+ * inside a condition pill, which draw no chrome of their own, one row of
+ * records in its three states, and the open view in the sidebar — and the
+ * dashboard's three: a panel's frame with its warning edge, the edge a
+ * filter chip's controls share, and the band a board in a mode wears. The one
+ * that is not here is `ui/kit/alerts.tsx`, where
+ * `LineAlert` does the same thing to `Alert`;
+ * a callout has enough of its own to say (the tone's icon, the role it is
+ * announced with) to be a file rather than an export here.
+ *
+ * The result frame's slot recipes are here for the same reason, one step
+ * out: they are the chrome one of this package's own frames gives what a
+ * *kind* puts inside it, and the frame is shared by three kinds.
+ *
+ * One kind of class does not belong here: a *layout* class at a call site —
+ * a width, a gap, a `justify-start` — is what `className` is for and stays
+ * where it is used.
+ */
+import type * as React from 'react';
+export interface ToneBadgeProps extends Omit<React.ComponentProps<typeof Badge>, 'variant'> {
+    /**
+     * Which status this is. The colour is never the only difference — the
+     * label says which status it is — so this is emphasis on a distinction the
+     * words already carry.
+     */
+    tone?: FieldTone;
+    /** Whether the tone's dot leads the word; see `toneBadgeVariants`. */
+    dot?: boolean;
+}
+/** A badge in the colour of a field's tone. */
+export declare function ToneBadge({ tone, dot, className, ...props }: ToneBadgeProps): React.JSX.Element;
+export interface ChangeBadgeProps extends Omit<React.ComponentProps<typeof Badge>, 'variant'> {
+    /** Which way the change went; `flat` is no change, and has no colour. */
+    direction: 'up' | 'down' | 'flat';
+    /**
+     * Whether that is the good way (`success`) or the bad one (`danger`);
+     * `neutral` for no change.
+     */
+    tone: Extract<FieldTone, 'success' | 'danger' | 'neutral'>;
+}
+/**
+ * A change — up or down, good or bad — as a toned badge (themes.md 2.6).
+ *
+ * The same soft recipe as `ToneBadge` (a 10% tint, the colour as the writing,
+ * a 30% edge), in one colour the stylesheet picks rather than the component:
+ * `--_fve-change`, which `styles.css` sets from the tone under the default
+ * convention and from the direction (`--_fve-rise` / `--_fve-fall`) once the host
+ * names one by direction (`data-fve-change-colors`). So the component knows
+ * no convention and needs no context, and a popup under another convention
+ * is recoloured by the attribute it copies. Both are said on the element —
+ * `data-tone` and `data-change` — as the tone badge says its tone. The
+ * colour is never all it says: a caller leads it with the direction's arrow
+ * and writes the sign. No change is the neutral badge, under every
+ * convention.
+ */
+export declare function ChangeBadge({ direction, tone, className, ...props }: ChangeBadgeProps): React.JSX.Element;
+/**
+ * A badge holding a sentence rather than a word: it wraps inside its row and
+ * grows downwards instead of carrying the row off the edge of the view.
+ *
+ * The registry's badge is a one-line pill — `h-5`, `whitespace-nowrap`,
+ * centred — which is right for "system" or "3 selected" and wrong for the
+ * applied-condition bar, where one badge reads out a whole group, conditions
+ * joined by its operator. The correction is the vendored component's own
+ * shape and not this or that call site's layout, and it was written out three
+ * times in one file — once per kind of condition the bar wears — so it is one
+ * wrapper here, as the colours are.
+ */
+export declare function WrappingBadge({ className, ...props }: React.ComponentProps<typeof Badge>): React.JSX.Element;
+/**
+ * The confirming answer of a destructive `AlertDialog`.
+ *
+ * Every one of them is this component — `DeleteDialog`, `LeaveGuard` and the
+ * overwrite side of `ConflictConfirm` — so there is one destructive answer in
+ * the package and no call site spells a colour.
+ *
+ * `data-tone` is how it says so on the element, the way `ToneBadge` and
+ * `LineAlert` do: a dialog's suite then asks whether its answer is the
+ * destructive one instead of naming the fill, and the fill itself is
+ * asserted once, here, in `test/variants.test.tsx`.
+ */
+export declare function DestructiveAction({ className, ...props }: Omit<React.ComponentProps<typeof AlertDialogAction>, 'variant'>): React.JSX.Element;
+/**
+ * A button that adds something not there yet — 「+ 添加」 on the tray's
+ * metrics, dimensions and range, 「+ 商品」 into the chain, 「+ 只保留」.
+ * What was added (a level card, a metric pill, a dimension chip, a
+ * condition) keeps its solid edge, so the two never read alike.
+ *
+ * `data-affordance="add"` says so on the element, for a suite to ask
+ * instead of naming the edge; the edge itself is asserted once, in
+ * `test/variants.test.tsx`. It renders as a trigger's `render` element too.
+ */
+export declare function AddButton({ className, ...props }: Omit<React.ComponentProps<typeof Button>, 'variant'>): React.JSX.Element;
+/**
+ * The one divider on this surface with a boundary to say.
+ *
+ * Every other line here separates things of the same kind — rows from rows,
+ * a menu's groups from each other. The line at the end of the title bar
+ * divides two **authorships**: this package's view-level controls on one
+ * side, the host's own actions on the other.
+ *
+ * It is the edge the buttons on both sides of it wear: the registry's own
+ * `--border`, and in the dark theme `--input`, exactly as the registry's
+ * outline button is bordered (`border-border dark:border-input`) — the
+ * story measures the two against each other rather than against a number. An earlier version painted it `--input` (this
+ * package's `--input` is a mid grey, not shadcn's near-white) so that it
+ * would measure ≥3:1 against the bar, and the result was a dark bar among
+ * light-edged buttons: the one line on the row that did not belong to it
+ * (user, 2026-09-22). A separator between two bordered groups is read by
+ * being *taller than their gaps* — 20px in a 28px row, against the 8px
+ * step inside a group — not by being darker than their borders; a
+ * non-text contrast floor is for the edges of controls, and this is not
+ * one. Spacing instead of a line is still not taken: the bar wraps at
+ * narrow widths, and a 16px gap reads as the start of a wrap rather than
+ * as a boundary.
+ *
+ * `data-vertical:self-center` because the registry's vertical separator
+ * says `data-vertical:self-stretch`, and a stretched item with a height of
+ * its own is not stretched but parked at the cross-start: the 20px line sat
+ * against the top of the 28px row (user, 2026-09-22). Under the same
+ * variant, so that the merge replaces the registry's word rather than
+ * losing to it in the cascade — a plain `self-center` did.
+ */
+export declare function SectionDivider({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+/**
+ * Whether a control draws its own box, or leaves it to what holds it.
+ *
+ * One border per condition (D12): a condition pill *is* the field, and the
+ * operator select and the value control inside it draw no edge, no fill and
+ * no shadow of their own, showing focus by the ring alone. Before D16 that
+ * was written as `[&_[data-slot=input]]:border-transparent …` on the pill,
+ * reaching two levels down into two vendored components by the slot names
+ * they happen to ship with — the most upstream-fragile line in the package,
+ * and silently undone by any registry rename. It is the control's own class
+ * now.
+ */
+export declare const controlChromeVariants: (props?: ({
+    chrome?: "none" | "box" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * What a control inside a pill takes on top of the vendored component's,
+ * written out rather than read off the class recipe so the public type does
+ * not follow it (R2-85); `test/variants.test.tsx` holds the two in step.
+ */
+export interface ControlChromeProps {
+    /** `none`, the default: no edge, fill or shadow. `box`: the registry's. */
+    chrome?: 'box' | 'none' | null;
+}
+/**
+ * The text box of a condition pill.
+ *
+ * `chrome="box"` asks for the registry's own edge back, for the one place
+ * this control is borrowed outside a pill: the analysis editor's row limit,
+ * which stands on a toolbar with nothing around it to be the field.
+ */
+export declare function PillInput({ chrome, className, ...props }: React.ComponentProps<typeof Input> & ControlChromeProps): React.JSX.Element;
+/**
+ * The select of a condition pill — its operator, and the values that are
+ * picked rather than typed.
+ *
+ * `chrome="box"` is the group block's and/or, which sits on the group's own
+ * header rather than inside a pill and is the only edge it has.
+ */
+/**
+ * The chip box of a condition pill: the chosen candidates and the search
+ * box among them, borderless like every other control inside a pill.
+ */
+export declare function PillChips({ chrome, className, ...props }: React.ComponentProps<typeof ComboboxChips> & ControlChromeProps): React.JSX.Element;
+/**
+ * The text box of a condition pill that also offers a list — a value typed
+ * or picked from the field's own values (`inputs/suggested.tsx`). The
+ * registry's `ComboboxInput` is an `InputGroup` with an edge of its own; in a
+ * pill the edge is the pill's (D12), so it is taken off here as it is off
+ * `PillInput`. Its chevron is left off too: a press on the box opens the
+ * list already, and the chevron would be one more unnamed Tab stop in every
+ * pill — the placeholder says there is something to pick.
+ */
+export declare function PillComboboxInput({ chrome, className, ...props }: React.ComponentProps<typeof ComboboxInput> & ControlChromeProps): React.JSX.Element;
+export declare function PillSelectTrigger({ chrome, className, ...props }: React.ComponentProps<typeof SelectTrigger> & ControlChromeProps): React.JSX.Element;
+/**
+ * One row of the record table's body, in the three states it has to be told
+ * apart in: at rest, under the pointer, and picked.
+ *
+ * **Why the registry's own three will not do.** A cell of a held column is
+ * `bg-inherit` — it takes the row's fill, which is what keeps a frozen
+ * column opaque over the columns sliding beneath it (`record/sticky.ts`) —
+ * so every one of a row's three fills has to be opaque. The registry hovers
+ * to `bg-muted/50`, a 50% wash, and through it the reader saw the scrolling
+ * column that the held cell is standing in front of. `--_fve-row-hover`
+ * (`styles.css`) is that same shade mixed rather than washed, and
+ * `has-aria-expanded:` is the row whose menu is open, which the registry
+ * washes the same way.
+ *
+ * **And picked has to beat hovered.** The registry stops at
+ * `data-[state=selected]:bg-muted`, which the unqualified `:hover` above
+ * then overrode: a selected row lost its tint to the pointer merely passing
+ * over it, and with it the only mark saying it was in the selection. The
+ * selected hover is said again at the higher specificity, so the pointer
+ * changes nothing about a row that is already picked.
+ *
+ * A `cva` with a base and no axes, like {@link DestructiveAction}'s: the
+ * three states are the element's own `data-state` and `:hover`, not
+ * something a caller chooses, so the call site passes the state and never a
+ * colour (D16-8). Before this, all three fills were a `className` on the
+ * vendored `TableRow` at `RecordTable`'s call site, with the hover a
+ * constant away in `record/columns.ts` — a colour on a call site and a
+ * recipe in two places.
+ */
+/**
+ * The mark on a table row the keyboard is on (the record rows and the
+ * analysis result's rows are each one Tab stop, `roving.ts`).
+ *
+ * Drawn on the row's cells, not the row: a cell paints over its row, and
+ * a pinned cell is a layer of its own, so a row's outline is hidden under
+ * the very cells it is meant to go round — the browser's own is a faint
+ * 1px line nobody sees. Each cell takes the hover fill and an inset edge
+ * above and below, the first and the last close the sides, and together
+ * they read as one ring round the row.
+ *
+ * The edge is the recipe every control wears (`Button`, `FOCUS_INSET`): a
+ * `--ring` line at full strength, which holds the 3:1 WCAG 1.4.11 asks
+ * of a focus indicator, and the half-strength halo inside it as emphasis.
+ * It is `focus-width` wide (1px unset, the registry's edge; D76), so a
+ * theme that owes 2px (WCAG 2.4.13) gets 2px on a row too. It used to be
+ * the halo alone, 2px of `--ring` at 50%, which measured
+ * 1.74:1 on the light page and 2.38:1 on the dark one (`FocusMarks*` in
+ * `stories/view-engine/ThemeTokens.test.stories.tsx`; phase 5, 5A). The
+ * full-strength shadows come first, so they are painted over the halo.
+ */
+export declare const FOCUS_ROW: string;
+/**
+ * The mark on a card the keyboard is on — the one every control wears: a
+ * `--ring` edge at full strength, `focus-width` wide (1px unset), drawn on
+ * the card's own edge (the outline pulled inside it by its own width, as
+ * `Button`'s border is) unless the theme's `focus-offset` stands it off,
+ * and the 3px halo outside (`--_fve-focus-halo`, `ring` at half strength
+ * unset, as on every control), which takes
+ * the place of the card's own faint ring while it is focused (D76). The
+ * halo alone measured 1.77:1 on the light page and 2.15:1 on the dark one
+ * (phase 5, 5A; `FocusMarks*`).
+ */
+export declare const FOCUS_CARD: string;
+/**
+ * The mark on a region that scrolls when the keyboard is on it — a
+ * dashboard panel's body (U-03) — drawn *inside* its edge: the region is
+ * as wide as the card that clips it (`overflow-hidden`), so a ring drawn
+ * outside lost both sides and left a grey hairline at 1.77:1. It is the
+ * one recipe every control wears (`Button`: a `--ring` edge, which holds
+ * 3:1, and the 3px halo, `--_fve-focus-halo`), turned inward: `focus-width`
+ * wide (1px unset), and a `focus-offset` the theme gives is kept as a gap
+ * inside the edge rather than outside it (D76).
+ */
+export declare const FOCUS_INSET: string;
+/**
+ * How a card stands off what it sits on, in the theme's words: the ring in
+ * `--_fve-card-edge` (the registry's `ring-foreground/10` unset) and the shadow
+ * `--_fve-card-shadow` (none unset). Every card on the surface wears it — a
+ * board's panels, the record cards and their skeletons.
+ */
+export declare const CARD_LIFT = "fve:ring-(color:--_fve-card-edge) fve:shadow-(--_fve-card-shadow)";
+/**
+ * A dashboard panel's frame: the registry's card, whose edge is a ring
+ * (`ring-1 ring-foreground/10`), not a border — so a panel carrying a
+ * warning takes the warning colour on that ring (U-04). It used to ask for
+ * `border-warning`, which painted a border 0px wide: the state was on the
+ * element and nowhere on the screen.
+ *
+ * The ring's colour and the card's shadow are the theme's (`--_fve-card-edge`,
+ * `--_fve-card-shadow`; themes.md 7): the registry's hairline and no shadow
+ * unless a theme lifts its cards instead. A warning still takes the ring,
+ * one variant over the theme's colour.
+ */
+export declare function PanelCard({ className, ...props }: React.ComponentProps<typeof Card>): React.JSX.Element;
+/**
+ * The one edge a few borderless controls share — a board filter's chip
+ * (the name, the value control, ✕), a locked filter's reading, and the
+ * same controls in the filter's settings (U-06). Nothing inside draws an
+ * edge (D12: the controls are the condition editor's pill controls), so
+ * this edge *is* the control's, and it is `--input`, the edge that holds
+ * 3:1 (1.4.11), not `--border`, which measured 1.22:1 on the chip's fill.
+ * `data-idle` — a filter reaching nothing on the tab on screen — is
+ * quieter by its frame, dashed on the page's ground, never by fading the
+ * words.
+ *
+ * A theme may draw it filled (`--_fve-control`, `--_fve-control-edge`; themes.md 7):
+ * a chip whose controls are picked — a select names itself by its words
+ * and its chevron — needs no edge to be found (1.4.11 asks a boundary of
+ * none), so it takes the theme's fill and edge. A chip holding a text box
+ * keeps the `--input` edge whatever the theme says: a field typed into is
+ * found by its boundary. Unset, both are what the chip always wore.
+ */
+export declare function ControlFrame({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const modeBarVariants: (props?: ({
+    size?: "bar" | "strip" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * A line saying the board is in a mode — being built, a filter being
+ * wired — and one panel's strip in that mode: a muted band with an edge,
+ * written once here rather than twice at the call sites (U-06).
+ */
+export declare function ModeBar({ size, className, ...props }: React.ComponentProps<'div'> & VariantProps<typeof modeBarVariants>): React.JSX.Element;
+/**
+ * A row of records, coloured by the state it is in.
+ *
+ * `data-state="selected"` is the whole of what a caller says; the summary
+ * band and the header are not rows of this kind and wear the band's own
+ * grey instead (`record/sticky.ts`).
+ */
+export declare function TableDataRow({ className, ...props }: React.ComponentProps<typeof TableRow>): React.JSX.Element;
+export interface SidebarItemProps extends Omit<React.ComponentProps<typeof Button>, 'variant' | 'size'> {
+    /** Whether this is the view on screen. */
+    current?: boolean;
+}
+/** A view in the sidebar's column, open or not. */
+export declare function SidebarItem({ current, className, ...props }: SidebarItemProps): React.JSX.Element;
+/**
+ * The frame round a result, and the padding it gives the two parts the
+ * shell itself puts in it (D12 Ⅳ–Ⅶ).
+ *
+ * **It is a band, not a card** (2026-09-23, the user's call on the v16
+ * review, overriding the earlier "keep the result's border"): one rule
+ * across its top, and its sides and bottom are the work column's own edges
+ * — it bleeds through `main`'s 16px padding (`-mx-4 -mb-4`, the same bleed
+ * the opening skeleton's title rule uses). The card was there to hold the
+ * toolbar, the rows and the pagination together while the block could end
+ * mid-page; since the workbench fills its host and the block reaches the
+ * bottom (`styles.css`, "A workbench fills its container"), its bottom and side edges only redrew the
+ * workbench's own, one frame inside another, and cost 32px of width and
+ * 16px of height the rows could have. The rule on top is the one line still
+ * saying something: where the conditions end and the result begins.
+ *
+ * The frame has no padding, no ground and no row gap of its own: the rows
+ * have to run to its edge, so the space inside belongs to each part — the
+ * toolbar is its first row, ruled off, at the column's 16px so its controls
+ * line up with the conditions above; a callout landing under that keeps a
+ * margin of its own. Those two are `WorkbenchShell`'s own slots
+ * (`toolbar`, `strips`), named the same whichever kind is open, so they
+ * stay with the frame.
+ *
+ * What does **not** stay with it is one kind's furniture. Until the
+ * 2026-09-22 review all five recipes sat in `ResultBlock` as descendant
+ * selectors, and three of them named slots only a record view has —
+ * `record-pagination`, `record-empty`, `record-cards`. D18-1 merges the
+ * record and analysis workbenches behind one shell in phase 2 and that
+ * shell is meant to grow no `if` per kind, so those three moved out to
+ * `RESULT_SLOTS` below and each kind now hands the frame the recipes its
+ * own `result` slot needs (`ResultBlock.slots`).
+ */
+export declare const resultFrameChrome: string;
+/**
+ * What a kind's own parts wear inside that frame, one recipe per part.
+ *
+ * Each is a literal class string rather than a part composed with a slot
+ * name, because Tailwind reads the source: a variant built at runtime is a
+ * variant no stylesheet has.
+ */
+declare const RESULT_SLOTS: {
+    /**
+     * The frame's last row — ruled off above and on its own grey, so how
+     * many rows there are and how to reach the next of them read as the
+     * frame's footer rather than as one more row of the result: the record
+     * view's pagination, and the analysis result's 「正在显示 N 组，耗时 X
+     * 秒」. A kind that grows another names it here, beside these.
+     */
+    readonly caption: string;
+    /** A query that matched nothing, in air of its own rather than to the edge. */
+    readonly empty: "fve:[&>[data-slot=record-empty]]:my-6";
+    /** Cards keep the column's padding; a table is what runs to the edge. */
+    readonly cards: "fve:[&>[data-slot=record-cards]]:p-4";
+    /** A host command's line sits where the query strip does, and as it does. */
+    readonly bulk: "fve:[&>[data-slot=bulk-status]]:mx-4 fve:[&>[data-slot=bulk-status]]:my-3";
+};
+/** One part of a kind's result, by the job it does inside the frame. */
+export type ResultSlot = keyof typeof RESULT_SLOTS;
+/** One kind's slot recipe, for `ResultBlock.slots`. */
+export declare function resultSlots(...slots: readonly ResultSlot[]): string;
+/**
+ * One row of the analysis tray (D71): a named `section` whose head is the
+ * analyst's term — 展开, 指标, 维度, 结果, 范围 — with the ⓘ that explains it
+ * (`tip`) at its top-right, then what the row holds, then, at the row's
+ * end, what belongs to the row as a whole (`end`: the counting unit, the
+ * conditions' grammar). From `md` up the head is a column of its own — the
+ * row is a subgrid of the tray's two columns, the first as wide as the
+ * widest term — so the terms line up down the tray, the rows read as a
+ * form, and no row gives up more width than its longest term needs;
+ * narrower, the head sits over the row. The row never draws a box of its own,
+ * because the tray is the one surface and a box in a box is a frame around
+ * a frame.
+ */
+export declare function EditorSlot({ name, title, tip, end, className, children, }: {
+    name: string;
+    title: string;
+    /** The ⓘ beside the term, a control of its own (`TermTip`). */
+    tip?: React.ReactNode;
+    /** What stands at the row's end. */
+    end?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * One card in a slot — a dimension, a metric: a bordered row on the page's
+ * ground, so it stands off the tray's tint, its controls in a line and the
+ * remove control pushed to the end.
+ */
+export declare function EditorCard({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/**
+ * One tile of the chart picker (D20 屏 I): an icon over a word on the
+ * page's ground, the chosen one ringed, an unavailable one framed with its
+ * reason under it, and the recommended one marked — the mark centred across
+ * the bottom edge, where it has the tile's whole width and covers neither the
+ * icon nor the name. The colours and states are here so the picker stays
+ * markup.
+ *
+ * **Unavailable is said by the frame, not by fading.** The tile used to
+ * wear `opacity-60` over `text-muted-foreground`, which put the reason line
+ * — the one thing such a tile has to say — at 2.20:1 on the panel's ground,
+ * far under the 4.5:1 axe asks of it. So the state is now the dashed border
+ * and the muted fill, which carry no text through them, and the words keep
+ * their own contrast: the same call `optionControls.tsx` records for
+ * `OptionsSection` — secondary is said by weight and by frame, never by
+ * being paler than it can be read.
+ *
+ * **What it holds stands in its middle**, and the tile is at least 64px
+ * tall: a row is as tall as its tallest tile, and the others centre their
+ * icon and name in that height rather than leaving the lower half blank
+ * (2026-09-23 audit); the floor keeps the name clear of the mark hanging
+ * across the bottom edge.
+ */
+export declare function ChartTile({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
+/**
+ * A long value read whole — an error message, a stack trace — in a record's
+ * detail. Monospaced and kept as written: a stack trace is lines, and the
+ * author's line breaks are the reading. It scrolls inside itself past a
+ * screenful, so one trace does not push every other field off the panel,
+ * and it can be scrolled from the keyboard because it is focusable.
+ */
+export declare function LongText({ className, ...props }: React.ComponentProps<'pre'>): React.JSX.Element;
+export {};
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/kit/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/kit/variants.tsx"],"names":[],"mappings":"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"}

package/dist/ui/lib/utils.d.ts

@@ -0,0 +1,2 @@
+export { cn } from 'cn';
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,IAAI,CAAC"}