@mistriwork/ui 0.0.0 → 1.0.0-rc.9

package/dist/Typeahead.d.ts

@@ -0,0 +1,63 @@
+/**
+ * A box you type into and a list that answers, over Base UI's Autocomplete.
+ *
+ * Three surfaces here are this shape — the record picker, the table picker
+ * on the diagram, the reference filter box — and each walked its own list
+ * with arrow keys, placed it by hand and closed it on a blur timer. Base UI
+ * owns that now: the combobox roles, arrows and Home/End, Enter on the
+ * highlighted row, Tab and a click outside to leave, the first row lit as
+ * you type. The caller ranks and fetches the items — `filteredItems` says
+ * the list is already the answer — draws each row in its own classes, and
+ * hears one `onPick`.
+ *
+ * The text is the caller's: Base UI is told the item's label to fill the
+ * box with on a pick, and that fill is ignored here, so a picker that wants
+ * the box emptied (a multi-select) or named (a single one) decides itself.
+ * Escape closes only this layer, stopped, so the panel underneath does not
+ * take the same key. The list is anchored on the zoom-aware ruler, fixed
+ * to the viewport so a scrolling drawer cannot clip it, and drawn inside
+ * the enclosing dialog when there is one.
+ */
+import { type InputHTMLAttributes, type ReactNode, type Ref, type RefObject } from 'react';
+interface TypeaheadProps<T> {
+    text: string;
+    onText: (text: string) => void;
+    /** Already ranked and bounded; drawn in this order. */
+    items: T[];
+    itemKey: (item: T) => string;
+    itemLabel: (item: T) => string;
+    itemClassName: (item: T, highlighted: boolean) => string;
+    renderItem: (item: T) => ReactNode;
+    onPick: (item: T) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The `<input>`'s own attributes — class, label, placeholder, title, the caller's keys. */
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
+    /** The actual popup, including when it is portalled outside the input's parent. */
+    popupRef?: Ref<HTMLDivElement>;
+    /** The element the list is sized and placed against; the input by default. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /** `width` matches the anchor exactly; `min-width` lets a long name widen the list. */
+    fit?: 'width' | 'min-width';
+    popupClassName: string;
+    listClassName: string;
+    /** Shown in the list when nothing matches; nothing at all when omitted. */
+    empty?: ReactNode;
+    emptyClassName?: string;
+    /**
+     * Where the list is drawn: inside the enclosing dialog (the default), or
+     * the body. A popover is a dialog too, but its positioner is placed by a
+     * transform, which makes it the containing block of a fixed list inside
+     * it — measured there on the unzoomed ruler, the list landed a zoom's
+     * worth away from its box. Drawn to the body, Base UI's floating tree
+     * still counts the list as the popover's, so a pick does not dismiss it.
+     */
+    portal?: 'dialog' | 'body';
+    /** Light the first row as the reader types (the default), or nothing until they arrow in: a search box's Enter is its own. */
+    autoHighlight?: boolean;
+    /** Hears the row lit by the keys or the pointer, and undefined when none is. */
+    onHighlight?: (item: T | undefined) => void;
+}
+export declare function Typeahead<T>({ text, onText, items, itemKey, itemLabel, itemClassName, renderItem, onPick, open, onOpenChange, inputProps, inputRef, popupRef, anchorRef, fit, popupClassName, listClassName, empty, emptyClassName, portal, autoHighlight, onHighlight, }: TypeaheadProps<T>): import("react").JSX.Element;
+export {};

package/dist/Typeahead.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A box you type into and a list that answers, over Base UI's Autocomplete.
+ *
+ * Three surfaces here are this shape — the record picker, the table picker
+ * on the diagram, the reference filter box — and each walked its own list
+ * with arrow keys, placed it by hand and closed it on a blur timer. Base UI
+ * owns that now: the combobox roles, arrows and Home/End, Enter on the
+ * highlighted row, Tab and a click outside to leave, the first row lit as
+ * you type. The caller ranks and fetches the items — `filteredItems` says
+ * the list is already the answer — draws each row in its own classes, and
+ * hears one `onPick`.
+ *
+ * The text is the caller's: Base UI is told the item's label to fill the
+ * box with on a pick, and that fill is ignored here, so a picker that wants
+ * the box emptied (a multi-select) or named (a single one) decides itself.
+ * Escape closes only this layer, stopped, so the panel underneath does not
+ * take the same key. The list is anchored on the zoom-aware ruler, fixed
+ * to the viewport so a scrolling drawer cannot clip it, and drawn inside
+ * the enclosing dialog when there is one.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { viewportBox } from './internal/ruler.js';
+import { layoutViewport, zoomAnchor } from './internal/anchor.js';
+import { popupContainer } from './internal/popups.js';
+export function Typeahead({ text, onText, items, itemKey, itemLabel, itemClassName, renderItem, onPick, open, onOpenChange, inputProps, inputRef, popupRef, anchorRef, fit = 'min-width', popupClassName, listClassName, empty, emptyClassName, portal = 'dialog', autoHighlight = true, onHighlight, }) {
+    const input = useRef(null);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        setContainer(portal === 'body' ? null : input.current?.closest('dialog, [role="dialog"]'));
+    }, [portal]);
+    /* A fixed-fit list takes its width from the anchor alone. Base UI's
+       --anchor-width is recomputed on every positioner update, snapped against
+       the anchor's position, so a list growing as its options arrived flipped
+       between two widths inside one ResizeObserver frame ("loop completed with
+       undelivered notifications"). Measured here on the house ruler, and again
+       only when the anchor itself resizes, the list's own size cannot move it. */
+    const [anchorWidth, setAnchorWidth] = useState(null);
+    useLayoutEffect(() => {
+        const anchor = anchorRef?.current ?? input.current;
+        if (!open || fit !== 'width' || !anchor)
+            return;
+        const measure = () => {
+            const width = viewportBox(anchor).width;
+            setAnchorWidth(width > 0 ? width : null);
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(anchor);
+        return () => observer.disconnect();
+    }, [open, fit, anchorRef]);
+    const setInput = (node) => {
+        input.current = node;
+        if (typeof inputRef === 'function')
+            inputRef(node);
+        else if (inputRef)
+            inputRef.current = node;
+    };
+    const { onKeyDown, onFocus, ...rest } = inputProps;
+    return (_jsxs(Autocomplete.Root, { items: items, filteredItems: items, itemToStringValue: itemLabel, value: text, onValueChange: (next, details) => {
+            // Selection fills the input too; it is not a new search or a cleared key.
+            if (details.reason !== 'item-press')
+                onText(String(next ?? ''));
+        }, open: open, onOpenChange: onOpenChange, openOnInputClick: true, autoHighlight: autoHighlight, onItemHighlighted: onHighlight && ((item) => onHighlight(item)), children: [_jsx(Autocomplete.Input, { ...rest, ref: setInput, onFocus: onFocus, onKeyDown: (e) => {
+                    onKeyDown?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    /* Only this layer: a drawer under the list listens for Escape too. */
+                    if (e.key === 'Escape' && open) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onOpenChange(false);
+                    }
+                } }), _jsx(Autocomplete.Portal, { container: container ?? popupContainer(), children: _jsx(Autocomplete.Positioner, { anchor: () => {
+                        const el = anchorRef?.current ?? input.current;
+                        return el ? zoomAnchor(el) : null;
+                    }, positionMethod: "fixed", side: "bottom", align: "start", sideOffset: 4, collisionBoundary: layoutViewport(), collisionPadding: 8, style: {
+                        zIndex: 40,
+                        // Fixed-fit lists size the observed positioner itself; the child
+                        // should not determine its intrinsic width while options arrive.
+                        ...(fit === 'width'
+                            ? { width: anchorWidth === null ? 'var(--anchor-width)' : `${anchorWidth}px`, maxWidth: 'var(--available-width)' }
+                            : {}),
+                    }, children: _jsx(Autocomplete.Popup, { ref: popupRef, className: popupClassName, style: {
+                            ...(fit === 'width' ? { width: '100%' } : { minWidth: 'var(--anchor-width)', maxWidth: 'var(--available-width)' }),
+                        }, children: _jsxs(Autocomplete.List, { className: listClassName, children: [empty !== undefined ? _jsx(Autocomplete.Empty, { className: emptyClassName, children: empty }) : null, items.map((item) => (_jsx(Autocomplete.Item, { value: item, className: (s) => itemClassName(item, s.highlighted), onClick: () => onPick(item), children: renderItem(item) }, itemKey(item))))] }) }) }) })] }));
+}

package/dist/fieldFrame.d.ts

@@ -0,0 +1,37 @@
+/**
+ * What every form control says about its frame, once: the label, the hint, the problem, the word for an optional
+ * field and a help tip. `frameOf` turns it into the Field's props, so a control never joins them by hand.
+ */
+import type { ReactNode } from 'react';
+import { type HelpTipProps } from './FormParts.js';
+export interface FieldFrame {
+    label: ReactNode;
+    /** A sentence under the control that helps before anything goes wrong. */
+    hint?: ReactNode;
+    /** What is wrong now, in the reader's words. Its line is kept in the flow, so saying it moves nothing (`reserve`). */
+    problem?: ReactNode;
+    required?: boolean;
+    /** The label is read to assistive technology but not drawn. */
+    labelHidden?: boolean;
+    /** The word that says a field may be left empty ("(optional)"), in the caller's language; Field draws it where the worn theme asks. */
+    optional?: ReactNode;
+    /** A help tip beside the label. */
+    tip?: HelpTipProps;
+    /** Keep the problem's line in the flow while empty. On by default for a form's controls; turn it off for a dense row. */
+    reserve?: boolean;
+    /** The control's id; one is made when not given. */
+    id?: string;
+    className?: string;
+}
+export declare function frameOf(p: FieldFrame): {
+    label: ReactNode;
+    hint: ReactNode;
+    problem: ReactNode;
+    required: boolean | undefined;
+    labelHidden: boolean | undefined;
+    id: string | undefined;
+    className: string | undefined;
+    optional: ReactNode;
+    labelAside: import("react").JSX.Element | undefined;
+    reserve: boolean;
+};

package/dist/fieldFrame.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HelpTip } from './FormParts.js';
+export function frameOf(p) {
+    return {
+        label: p.label,
+        hint: p.hint,
+        problem: p.problem,
+        required: p.required,
+        labelHidden: p.labelHidden,
+        id: p.id,
+        className: p.className,
+        optional: p.optional,
+        labelAside: p.tip ? _jsx(HelpTip, { ...p.tip }) : undefined,
+        reserve: p.reserve ?? true,
+    };
+}

package/dist/forms.css

@@ -0,0 +1,192 @@
+/* @mistriwork/ui's form controls (TextField, MaskedField, SensitiveField, Select, Choices, Slider, FormParts), apart
+   from primitives.css: a page that draws none of them does not pay for their rules at its first paint. style.css
+   takes this file with the rest; a shell that layers primitives.css itself (the kit's) loads this one beside the
+   first control it draws. */
+
+/* The form controls (TextField, MaskedField, SensitiveField, Select, Choices, Slider, FormParts). They wear the
+   field's own box above (`field-control`), so a theme that sets --field-fill, --control-h, --control-border-w or
+   --field-radius restyles every one of them together, and the label above is the Field's. */
+/* Read, not drawn: a group whose question is the heading above it. */
+.form-field-label-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+/* The problem's line stays in the flow while empty, so a problem that arrives moves nothing below it. */
+.form-field-reserve > .form-field-problem { min-height: calc(var(--text-sm) * 1.45); }
+/* A consent: a paragraph beside its box, in the body's weight. */
+.form-field-consent .form-field-label { font-size: var(--text-sm); font-weight: 400; line-height: 1.45; }
+.field-check { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
+.field-check:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+
+/* A text box and the mark at its inline end. The room for the mark is the box's from the start (has-mark), so the
+   check arriving moves no text. Decorative: validity is aria-invalid's to say. */
+.field-box { position: relative; display: flex; align-items: center; min-width: 0; }
+.field-box.has-mark > .field-control { padding-inline-end: calc(var(--space-3h) + 16px + var(--space-3)); }
+.field-mark { position: absolute; inset-inline-end: var(--space-3h); display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--status-good); color: var(--surface); pointer-events: none; }
+.field-mark:empty::after { content: ""; width: 4px; height: 8px; margin-top: calc(-1 * var(--space-1)); border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
+.field-mark > svg { width: 100%; height: 100%; }
+.field-control::placeholder { color: var(--ink-subtle); }
+.field-hidden { letter-spacing: 0.08em; }
+/* Show beside the box, never inside it. */
+.field-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
+.field-note { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-muted); }
+.field-note > svg { flex: none; width: 14px; height: 14px; }
+
+/* The form's listbox is the Dropdown dressed as a field box. */
+.dd-button.field-select { min-height: var(--control-h); border-width: var(--control-border-w); padding: var(--space-2h) var(--space-3h); font: inherit; font-size: var(--text-base); background: var(--field-fill); border-radius: var(--field-radius, var(--radius)); text-align: start; }
+.dd-button.field-select[aria-invalid="true"] { border-color: var(--status-critical); }
+.dd-button.field-select:is([disabled], [aria-disabled="true"]) { background: var(--raised); color: var(--ink-muted); cursor: not-allowed; }
+.dd-value.is-empty { color: var(--ink-muted); }
+.dd-list.field-list .dd-label { font: var(--text-base) var(--sans); }
+.dd-list-multi .dd-option.selected .dd-label { color: var(--ink); font-weight: inherit; }
+.dd-box { position: relative; flex: none; width: 16px; height: 16px; margin-top: var(--space-1); box-sizing: border-box; border: 1px solid var(--line-control); border-radius: 3px; background: var(--surface); }
+.dd-option.selected .dd-box { border-color: var(--accent); background: var(--accent); }
+.dd-option.selected .dd-box::after { content: ""; position: absolute; inset: 1px 0 0; margin: auto; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
+
+/* Choices: one answer is native radios, hidden, with their faces drawn, and the ring shows on the face when the
+   keyboard is on the input; several cards are each a face that takes the focus itself (CheckCards). A host may dress
+   them through the --choice-* roles — a quiet form draws a card at rest as its well, with an edge only once chosen
+   or in focus (formDress.css) — and each falls back to the field's own box here. */
+.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
+.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
+.choice-pick, .choice-card {
+  position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: var(--control-h);
+  border: var(--control-border-w) solid var(--choice-edge, var(--line-control)); border-radius: var(--field-radius, var(--radius));
+  background: var(--choice-well, var(--field-fill)); color: var(--ink); font-size: var(--text-base); cursor: pointer;
+  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
+}
+.choice-pick { justify-content: center; padding: 0 var(--space-4); }
+.choice-card { gap: var(--space-3h); padding: var(--space-3) var(--space-4); min-height: max(var(--control-h), 48px); }
+@media (hover: hover) {
+  .choice-pick:hover, .choice-card:hover { border-color: var(--choice-edge-hover, color-mix(in srgb, var(--line-control) 60%, var(--ink))); background-color: var(--choice-well-hover, var(--field-fill)); }
+}
+/* On is a thicker edge drawn outside the box, not a wider border, so choosing moves nothing. */
+.choice-pick.is-on, .choice-card.is-on { border-color: var(--choice-on, var(--accent)); box-shadow: 0 0 0 1px var(--choice-on, var(--accent)); background: var(--choice-on-well, var(--accent-soft)); }
+.choice-pick:has(.choice-input:focus-visible), .choice-card:has(.choice-input:focus-visible), .choice-card:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+.choice-card[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
+.choice-cards { display: flex; flex-direction: column; gap: var(--space-3); }
+.choice-card-icon { display: inline-flex; flex: none; color: var(--accent-ink); }
+.choice-card-icon > svg { width: 22px; height: 22px; }
+.choice-card-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.choice-card-help { display: block; color: var(--ink-muted); font-size: var(--text-sm); }
+.choice-box { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid var(--line-control); border-radius: 3px; background: var(--surface); }
+.choice-card.is-on .choice-box { border-color: var(--choice-check, var(--accent)); background: var(--choice-check, var(--accent)); }
+.choice-card.is-on .choice-box::after { content: ""; position: absolute; inset: 1px 0 0; margin: auto; width: 4px; height: 8px; border: solid var(--choice-on-check, var(--on-accent)); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
+/* One answer's card says so with a radio's round mark and its dot; several answers' keep the square and its tick, as
+   a native radio and checkbox would. Read off the input the card holds, so every host's cards agree. */
+.choice-card:has(> .choice-input[type="radio"]) > .choice-box { border-radius: 50%; }
+.choice-card.is-on:has(> .choice-input[type="radio"]) > .choice-box::after { inset: 0; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--choice-on-check, var(--on-accent)); transform: none; }
+
+/* The slider: the readout in a field box, the native range under it. */
+.field-readout { display: flex; align-items: center; }
+.field-range { --range-share: 0%; width: 100%; height: 22px; margin: var(--space-3) 0 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
+.field-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) 0 var(--range-share), var(--line) var(--range-share) 100%); }
+.field-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; /* off-scale: centres the 18px thumb on the 4px track, (4 - 18) / 2 */ border: 0; border-radius: 50%; background: var(--accent); }
+.field-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
+.field-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
+.field-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent); }
+.field-range:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+.field-range:disabled { cursor: not-allowed; opacity: 0.5; }
+.field-range-ends { display: flex; justify-content: space-between; font-size: var(--text-xs); line-height: 1.45; color: var(--ink-muted); }
+
+/* The help tip. */
+.help-tip { position: relative; display: inline-flex; }
+.help-tip-button { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--ink-muted); border-radius: 50%; background: transparent; color: var(--ink-muted); font: italic 700 10px/1 var(--sans); cursor: pointer; box-shadow: none; }
+.help-tip-button::after { content: ""; position: absolute; inset: -8px; }
+.help-tip-button > svg { width: 100%; height: 100%; }
+.help-tip-button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+.help-tip-text {
+  position: absolute; inset-inline-start: 0; top: calc(100% + var(--space-3)); z-index: 30; width: min(240px, 80vw);
+  padding: var(--space-3) var(--space-3h); border: 1px solid var(--line-strong); border-radius: var(--radius-pop);
+  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
+  font-size: var(--text-sm); font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: normal;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .help-tip-text { transform-origin: top left; transition: opacity var(--t-popover) var(--ease-out), transform var(--t-popover) var(--ease-out); @starting-style { opacity: 0; transform: scale(0.96) translateY(-4px); } }
+}
+
+/* The progress bar: a track and its fill. The fill is not animated: it is information that changes often. */
+.progress-bar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
+.progress-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
+
+/* A step's heading and lead. */
+.step-header { display: grid; gap: var(--space-3); }
+.step-title { margin: 0; font-size: var(--type-record-title); font-weight: var(--heading-weight); line-height: 1.15; letter-spacing: var(--track-title); color: var(--ink); }
+.step-mark { display: inline-block; margin-inline-end: var(--space-4); }
+.step-lead { margin: 0; font-size: var(--text-md); line-height: 1.45; color: var(--ink-muted); }
+
+/* The bar at the foot of its container: sticky, so it stays in the container it belongs to and the page keeps its sidebar. */
+.action-bar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); background: var(--surface); }
+.action-bar-back { flex: 0 0 33%; }
+.action-bar-primary { flex: 1; min-width: 0; }
+
+/* Fields side by side; a row stacks where its fields no longer fit. */
+.form-columns { display: grid; grid-template-columns: var(--form-columns, repeat(auto-fit, minmax(min(100%, 9rem), 1fr))); gap: var(--space-4); align-items: start; }
+@media (max-width: 22rem) { .form-columns { grid-template-columns: minmax(0, 1fr); } }
+.review-list { display: grid; gap: var(--field-gap); }
+
+/* A theme's recipes for a form (themeRecipes.ts: required, checkbox, formStep, actionBar). Their rules are here, not
+   in a first stylesheet: they draw nothing a page without a control has. */
+
+/* required: the star is primitives.css's; this one says the other word instead. The word stands beside the label
+   (Field's optionalWord), so the label's name is the same under either recipe, and it is drawn only here. */
+.form-field-label-row > .form-field-label { min-width: 0; overflow-wrap: anywhere; }
+.form-field-optional-word { display: none; font-size: var(--text-sm); font-weight: 400; line-height: 1.35; color: var(--ink-muted); }
+[data-look-required="optional-word"] .form-field-optional-word { display: inline; }
+[data-look-required="optional-word"] .form-field.is-required > .form-field-label::after { content: none; }
+
+/* checkbox: drawn. The native input stays (the keyboard, the name, the ring), with its own face taken off and
+   the field's drawn on: its fill, the control's edge, and a corner no rounder than a third of the box, since a
+   10px field corner on an 18px box is a circle. On is the accent with a check in its ink. */
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]) {
+  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; box-sizing: border-box;
+  background: var(--field-fill); border: var(--control-border-w) solid var(--line-control);
+  border-radius: min(var(--field-radius, var(--radius)), 6px); cursor: pointer;
+  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
+}
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"])::after {
+  content: ""; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0;
+  transform: translateY(-1px) rotate(45deg); opacity: 0;
+}
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):checked { background: var(--accent); border-color: var(--accent); }
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):checked::after { opacity: 1; }
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+[data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):disabled { background: var(--raised); border-color: var(--line); cursor: not-allowed; }
+@media (forced-colors: active) {
+  [data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]) { border: 1px solid ButtonText; }
+  [data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):checked { background: Highlight; border-color: Highlight; }
+  [data-look-checkbox="drawn"] :is(.field-check, .form-field-check-row > input[type="checkbox"]):checked::after { border-color: HighlightText; }
+}
+
+/* formStep: ruled puts a hairline under a step's header. actionBar: raised stands the sticky bar on the surface with a
+   soft lift (the theme's own shadow colour, upward since the bar is at the foot) in place of the hairline over it. */
+[data-look-form-step="ruled"] .intake-head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
+[data-look-action-bar="raised"] :is(.intake-actions, .action-bar) {
+  background: var(--surface); border-top-color: transparent;
+  box-shadow: 0 -6px 18px color-mix(in srgb, var(--shadow-ink, black) 12%, transparent);
+}
+
+/* A control stands level at the theme's height (--control-h): the date field's input and the Button primitive with the
+   rest (the field box and the listbox read it above). */
+.date-field .date-field-input { box-sizing: border-box; min-height: var(--control-h); border-width: var(--control-border-w); background: var(--field-fill); border-radius: var(--field-radius, var(--radius)); }
+
+/* Mobile. */
+/* No double-tap-to-zoom delay on what is tapped, and no grey flash over it: the browser's highlight is replaced by
+   the house press (--t-press, the button gives a little and a link dims), so a tap is still answered. */
+:is(button, a, input, select, textarea, summary, [role="button"], [role="switch"], [role="tab"], [role="option"], [role="menuitem"]) {
+  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
+}
+a:active { opacity: 0.7; }
+@media (prefers-reduced-motion: no-preference) {
+  .btn { transition: transform var(--t-press) var(--ease-out); }
+  .btn:not(:disabled, [aria-disabled="true"]):active, .choice-pick:active, .choice-card:active { transform: scale(0.97); }
+}
+@media (pointer: coarse) {
+  /* A finger needs 44px (WCAG 2.5.5) whatever height the theme draws, through the density's zoom (--row-h does the same). */
+  /* A form's listbox may be the shell's (.form-field .dd-button) rather than @mistriwork/ui's Select: the same field, so the
+     same height as the box beside it in a row. */
+  .field-control, .dd-button.field-select, .form-field .dd-button, .choice-pick, .choice-card, .date-field .date-field-input, .btn:not(.btn-compact) {
+    min-height: max(var(--control-h), calc(44px / var(--density-zoom, 1)));
+  }
+  /* iOS Safari zooms the page when a field under 16px is focused, and does not zoom back. The density zoom only
+     enlarges (1, 1.12, 1.24), so a flat 16px is at least 16px drawn. Not verified on WebKit: it is not installed
+     where this was written, so a real iPhone is the test of this rule. */
+  input, select, textarea, .field-control, .dd-button.field-select, .form-field .dd-button, .date-field .date-field-input { font-size: max(16px, var(--text-base)); }
+}

package/dist/hero.css

@@ -0,0 +1,23 @@
+/* @mistriwork/ui's hero blocks (Badge, PhotoTiles, IconRows), apart from primitives.css and forms.css: a page that draws
+   none of them does not pay for their rules. style.css takes this file with the rest; a shell that layers its own
+   sheets (the kit's landing, mistri's landingHero.css) imports it into the layer it wants. */
+
+/* The badge: the author's few words in a chip over the heading (the look's corner), in the accent's
+   quiet tint so it reads as a note on the page, never as a button. */
+.front-badge {
+  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2h); margin: 0; padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink);
+  font: 500 var(--text-sm) var(--sans);
+}
+.front-badge svg { color: var(--accent-ink); flex: none; }
+/* Icon rows: each an icon in the accent and a line in the muted ink, stacked with air between. */
+.front-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); color: var(--ink-muted); font: 400 var(--text-base) var(--sans); }
+.front-points li { display: flex; align-items: flex-start; gap: var(--space-3); }
+.front-points svg { color: var(--accent-ink); flex: none; margin-top: var(--space-1); }
+/* Tiles: the one photo's 4:3 box cut into a mosaic, so it is sized before any photo arrives. Two side by side; three
+   with the first tall on the left; four in a square grid. */
+.front-hero-tiles { display: grid; gap: var(--space-2); background: none; border-radius: 0; grid-template-columns: 1fr 1fr; }
+.front-hero-tiles img { border-radius: var(--radius); background: var(--raised); min-height: 0; }
+.front-hero-tiles-3 { grid-template-rows: 1fr 1fr; }
+.front-hero-tiles-3 img:first-child { grid-row: 1 / span 2; }
+.front-hero-tiles-4 { grid-template-rows: 1fr 1fr; }

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @mistriwork/ui: the primitives every dialog, menu, listbox, icon and form here is drawn with, over Base UI and dressed in
+ * the house classes (`modal`, `dd-*`, `btn`, `form-field`, `date-field`, `tw-icon`), which its own stylesheet styles
+ * (`@mistriwork/ui/style.css`). A primitive reads no walk, no address, no transport and no copy catalog: its words, its
+ * icons, its answers and its hooks are props (scripts/check-boundary.mjs holds the `ui` layer to importing only
+ * itself).
+ */
+export { Button, buttonClass, type ButtonIntent, type ButtonSize } from './Button.js';
+export { Field, type FieldControlProps } from './Field.js';
+export { Modal, type ModalHandle } from './Modal.js';
+export { DropMenu, DropGroup, DropItem, DropSeparator } from './DropMenu.js';
+export { Dropdown, MultiDropdown, type DropdownAction, type DropdownItem, type DropdownProps, type MultiDropdownProps, } from './Dropdown.js';
+export { Typeahead } from './Typeahead.js';
+export { Icon, loadIconsWith, registerIcons, weighIconsWith, type IconGlyph, type IconProps, type IconWeight, type IconWeighting, } from './Icon.js';
+export { DateField, type DateFieldProps, type DateFieldWords } from './DateField.js';
+export type { FieldFrame } from './fieldFrame.js';
+export { TextField, MaskedField, MoneyField, ValidMark, type MaskedFieldProps, type TextFieldProps } from './TextField.js';
+export { SensitiveField, type SensitiveFieldProps } from './SensitiveField.js';
+export { Select, MultiSelect } from './Select.js';
+export { CheckCards, ChoiceCards, Checkbox, Consent, YesNo, type CheckCard, type CheckCardsProps, type CheckboxProps, type ChoiceCardsProps, type ChoiceOption, type YesNoProps, } from './Choices.js';
+export { Slider, type SliderProps } from './Slider.js';
+export { ActionBar, Columns, HelpTip, ProgressBar, ReviewList, StepHeader, type ActionBarProps, type HelpTipProps, type ProgressBarProps, type StepHeaderProps, } from './FormParts.js';
+export { Badge, IconRows, PhotoTiles, type BadgeProps, type IconRowsProps, type PhotoTile, type PhotoTilesProps } from './HeroBlocks.js';
+export { digits, grouped, isoDay, maskNamed, masks, type Mask, type MaskName } from './masks.js';
+export { ComponentStyleScope } from './internal/ComponentStyleScope.js';
+export { layoutViewport, zoomAnchor } from './internal/anchor.js';
+export { popupContainer, drawPopupsIn } from './internal/popups.js';
+export { measureFrom, refreshViewportScale, viewportBox, viewportScale, viewportSize } from './internal/ruler.js';
+export { Switch, type SwitchProps } from './Switch.js';
+export { Tabs, type TabItem, type TabsProps } from './Tabs.js';
+export { Drawer, type DrawerProps, type DrawerSide } from './Drawer.js';
+export { Popover, type PopoverProps } from './Popover.js';
+export { Avatar, initialsOf, type AvatarProps, type AvatarSize } from './Avatar.js';
+export { Pagination, paginationItems, type PaginationProps } from './Pagination.js';
+export { Carousel, type CarouselProps, type CarouselSlide } from './Carousel.js';
+export { Resizable, type ResizablePanel, type ResizableProps } from './Resizable.js';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea.js';
+export { Tooltip, type TooltipProps } from './Tooltip.js';

package/dist/index.js

@@ -0,0 +1,40 @@
+/**
+ * @mistriwork/ui: the primitives every dialog, menu, listbox, icon and form here is drawn with, over Base UI and dressed in
+ * the house classes (`modal`, `dd-*`, `btn`, `form-field`, `date-field`, `tw-icon`), which its own stylesheet styles
+ * (`@mistriwork/ui/style.css`). A primitive reads no walk, no address, no transport and no copy catalog: its words, its
+ * icons, its answers and its hooks are props (scripts/check-boundary.mjs holds the `ui` layer to importing only
+ * itself).
+ */
+export { Button, buttonClass } from './Button.js';
+export { Field } from './Field.js';
+export { Modal } from './Modal.js';
+export { DropMenu, DropGroup, DropItem, DropSeparator } from './DropMenu.js';
+export { Dropdown, MultiDropdown, } from './Dropdown.js';
+export { Typeahead } from './Typeahead.js';
+export { Icon, loadIconsWith, registerIcons, weighIconsWith, } from './Icon.js';
+export { DateField } from './DateField.js';
+export { TextField, MaskedField, MoneyField, ValidMark } from './TextField.js';
+export { SensitiveField } from './SensitiveField.js';
+export { Select, MultiSelect } from './Select.js';
+export { CheckCards, ChoiceCards, Checkbox, Consent, YesNo, } from './Choices.js';
+export { Slider } from './Slider.js';
+export { ActionBar, Columns, HelpTip, ProgressBar, ReviewList, StepHeader, } from './FormParts.js';
+/* The landing hero's blocks. Preview, like the controls: a badge over a heading, two to four photo tiles, icon rows. */
+export { Badge, IconRows, PhotoTiles } from './HeroBlocks.js';
+export { digits, grouped, isoDay, maskNamed, masks } from './masks.js';
+export { ComponentStyleScope } from './internal/ComponentStyleScope.js';
+export { layoutViewport, zoomAnchor } from './internal/anchor.js';
+export { popupContainer, drawPopupsIn } from './internal/popups.js';
+export { measureFrom, refreshViewportScale, viewportBox, viewportScale, viewportSize } from './internal/ruler.js';
+/* The standalone primitives added for the showcase's missing list: a switch, tabs, a drawer, a popover, an avatar disc and pagination. Preview, like the controls. */
+export { Switch } from './Switch.js';
+export { Tabs } from './Tabs.js';
+export { Drawer } from './Drawer.js';
+export { Popover } from './Popover.js';
+export { Avatar, initialsOf } from './Avatar.js';
+export { Pagination, paginationItems } from './Pagination.js';
+/* The remainder-wave primitives: a carousel, resizable panes, a scroll area and a general tooltip, Preview like the rest. */
+export { Carousel } from './Carousel.js';
+export { Resizable } from './Resizable.js';
+export { ScrollArea } from './ScrollArea.js';
+export { Tooltip } from './Tooltip.js';

package/dist/internal/ComponentStyleScope.d.ts

@@ -0,0 +1 @@
+export declare const ComponentStyleScope: import("react").Context<string | undefined>;

package/dist/internal/ComponentStyleScope.js

@@ -0,0 +1,4 @@
+/** React portals keep their component's scoped stylesheet without widening it
+ * to other Apps or dialogs. The compiler still bounds CSS by data-component. */
+import { createContext } from 'react';
+export const ComponentStyleScope = createContext(undefined);

package/dist/internal/anchor.d.ts

@@ -0,0 +1,19 @@
+interface VirtualAnchor {
+    getBoundingClientRect: () => DOMRect;
+    contextElement: Element;
+}
+export declare function zoomAnchor(element: Element): VirtualAnchor;
+/**
+ * The viewport, in the same layout pixels the anchor reports, for the
+ * positioner's collision boundary — so "is there room below" is answered
+ * on the ruler the anchor was measured with. Positioners retain this object
+ * across viewport resizes without re-rendering their owning control, so read
+ * its dimensions when collision detection runs, not when JSX was rendered.
+ */
+export declare function layoutViewport(): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export {};

package/dist/internal/anchor.js

@@ -0,0 +1,52 @@
+/**
+ * An anchor for Base UI's positioners, measured with the house ruler.
+ *
+ * The density preference puts a `zoom` on the root, so a box measured with
+ * getBoundingClientRect comes back in screen pixels while a `top` set on a
+ * positioned element inside the root is scaled on its way back — measured
+ * with one ruler, placed with the other, a list landed a room away from
+ * its trigger. Floating UI corrects for transforms on an offset parent but
+ * not for a zoom on the root, so the anchor it is handed is a virtual
+ * element that reports the trigger's box already divided by the zoom
+ * (ruler.ts `viewportBox`), and every coordinate it derives is a layout
+ * pixel the browser scales back exactly once.
+ */
+import { viewportBox, viewportSize } from './ruler.js';
+export function zoomAnchor(element) {
+    return {
+        contextElement: element,
+        getBoundingClientRect: () => {
+            const b = viewportBox(element);
+            return {
+                x: b.left,
+                y: b.top,
+                top: b.top,
+                left: b.left,
+                right: b.right,
+                bottom: b.bottom,
+                width: b.width,
+                height: b.height,
+                toJSON: () => b,
+            };
+        },
+    };
+}
+/**
+ * The viewport, in the same layout pixels the anchor reports, for the
+ * positioner's collision boundary — so "is there room below" is answered
+ * on the ruler the anchor was measured with. Positioners retain this object
+ * across viewport resizes without re-rendering their owning control, so read
+ * its dimensions when collision detection runs, not when JSX was rendered.
+ */
+export function layoutViewport() {
+    return {
+        x: 0,
+        y: 0,
+        get width() {
+            return viewportSize().width;
+        },
+        get height() {
+            return viewportSize().height;
+        },
+    };
+}