@martlet/react 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @martlet/react changelog
 
+## 0.2.0 — unpublished transfer candidate
+
+Prepared standalone source, exact core dependency and independent build. This is not an approved release. Existing version 0.1.0 is published; the historical heading below records its earlier preparation state.
+
 ## 0.1.0 — experimental candidate, unpublished
 
 Initial 22-component React 19 API with native form controls, modal dialog, manual-activation tabs, article compositions, table and pagination. Includes family CSS, TypeScript declarations and MIT source.

package/README.md

@@ -1,58 +1,17 @@
-# @martlet/react
+# Martlet React (experimental)
 
-Experimental 0.1.0. MIT licensed. Source package in the [design workbench](https://github.com/howardjp/design-workbench). Intended for experimental publication under npm’s `next` tag; it is not a stable public API. Check registry availability before installing.
+This independent repository contains the experimental `@martlet/react` component implementation. Existing npm releases remain available. Standalone staging is prepared in the reviewed `stage-release.yml` workflow and `react-production-release` environment; npm trust and publication authority must be verified during the coordinated workbench cutover.
 
-```tsx
-import { Button, Field, TextInput } from '@martlet/react';
-import '@martlet/react/styles.css';
-import '@martlet/theme/fonts.css'; // optional local fonts
+## Development
 
-<div className="martlet" data-martlet="light">
-  <Field label="Component name" hint="Use the exported API name.">
-    {props => <TextInput {...props} name="name" required />}
-  </Field>
-  <Button type="submit">Save component</Button>
-</div>
-```
+Use Node 24: `npm ci --ignore-scripts`, then `npm test`. `npm pack --ignore-scripts` creates a local candidate archive. The public repository keeps `private:true` in its manifest to prevent accidental publication; the reviewed staging workflow creates a publishable manifest only in an isolated export.
 
-```sh
-npm install @martlet/react@0.1.0 react@19 react-dom@19
-```
+The exact published `@martlet/core` dependency supplies styles. Import `@martlet/react/styles.css`; load `@martlet/core/fonts.css` separately if desired. The public component API is experimental. Refer to [the historical component contracts](https://github.com/k3jph/design-workbench/blob/80a5635abe4de7a07a1983de0b3ef796b101e047/docs/components.md) for behavior and acceptance criteria.
 
-Exports: AppShell, Button, TextInput, Select, Textarea, Field, Notice, Badge, DataTable, Dialog, Checkbox, Fieldset, Disclosure, ErrorSummary, Article, TableOfContents, FileInput, Radio, Pagination, DefinitionList, Switch, Tabs, and FieldControl/SummaryError/ContentsItem/DefinitionItem (types). Native attributes and refs on native controls follow React 19 conventions. Button defaults to `type="button"`. Field supplies a stable id and associated hint/error descriptions through a render function. Dialog uses the native modal top layer; keep it mounted and control `open`. Escape calls `onDismiss`; provide visible dismissal buttons. DataTable wraps a semantic table in a named, focusable overflow region. Notice announces success/info politely and errors assertively.
+The independent reference catalog contains all 50 canonical recipes, three dashboards and the scientific workspace. Browser verification covers Chromium, Firefox and WebKit at root and `/preview/`. `npm run build:gallery` builds the static site in `examples/react-catalog/dist/martlet`; use the examples index at `/examples/`. `docs-delivery.json` explicitly disables the advanced remote archive pathway until live Worker isolation and independent anti-rollback authority are verified. The ordinary static documentation build is the production delivery path; it makes no administrator-immutable archive claim. Automated checks do not replace manual assistive-technology assessment. See PROVENANCE.md for the source baseline and ownership transition.
 
-Use one AppShell per document; its skip link targets main. Styles are scoped to `.martlet` and require the matching data attribute for light/dark colors. Both families can coexist in a document. Application spacing roles are experimental. No app persistence or registry state is embedded in the components.
+Build a complete deployment from a clean committed checkout with `npm run build:reference -- /fresh/output/path`. This assembles root and `/preview` catalogs plus checksum-verified static `/docs/v/0.2.0/` snapshots using the existing documentation implementation. `version.json` records the exact source, Core integrity and explicitly disabled advanced archive mode. The output is static-only and needs no storage credentials or Worker bindings beyond assets.
 
-Build with `npm run build` at the workspace root. `npm run pack:react` produces installable tarballs for testing without publishing. React 19 and the theme package are required. Build artifacts include JavaScript, declarations, and CSS. The workbench exercises editing, validation, saving, server failures, conflicts, empty results, modal dismissal, light/dark rendering, responsive layout, and automated accessibility checks. Manual assistive-technology review and sustained use remain required before stability.
+After npm stage approval, independently verify the exact registry archive and `npm audit signatures --json --include-attestations` output with `RELEASE_TAG=v0.2.0 APPROVED_SHA=<reviewed-main-sha> node scripts/tag-release-cli.mjs verify-stage-provenance <audit.json> <archive.tgz>`. This operation pins the standalone staging workflow, `main`, dispatch event and reviewed commit; the disabled tag workflow is a different identity.
 
-See the [component contracts](../../docs/components.md) for properties, states, keyboard behavior, and acceptance criteria for every export. Checkbox is binary; mixed state is not yet a public contract. Fieldset keeps the native legend and disabled-group behavior. Disclosure uses native details/summary toggling.
-
-ErrorSummary accepts a title, message/targetId error entries, native div ref, and optional recovery children. Focus it after a failed operation; its links focus explicit Field IDs or focusable fieldsets. Field now accepts an optional explicit id, retaining generated IDs by default. ErrorSummary does not manage application drafts or trigger focus itself.
-
-
-Article composes an accessible title, optional inline summary/metadata/contents/aside, body, and footer. It accepts native article props/ref and titleLevel 1 (default) or 2; use coherent headings inside. TableOfContents accepts readonly id/label items, native nav props/ref, and a label defaulting to On this page. Its native fragment anchors target caller-supplied unique IDs; use tabIndex={-1} on target headings for keyboard focus. The components also render as static HTML. An application loading content asynchronously owns initial fragment restoration. Neither component parses Markdown or raw HTML, fetches records, or manages routing.
-
-Both support light/dark modes, long text, a bounded reading measure, narrow single-column reflow, and print styles. Article keeps supporting material while TableOfContents is omitted from print. The workbench reading room is the current consumer. Print-media checks do not replace manual printer/PDF pagination, screen-reader, forced-colors, RTL, and non-Chromium review. All twenty-two components remain experimental.
-
-FileInput forwards native uncontrolled input props and ref, fixes type=file, and excludes value/defaultValue from its TypeScript surface. Use it inside Field, with accept/multiple/name/disabled as needed. The consumer reads the native FileList, validates content/size, manages upload or import state, and may clear via ref.current.value="". The workbench consumes it for reviewed local JSON specification import; no transport, drag/drop, or file-security claim is embedded. Native chooser wording varies by operating system. Keyboard chooser activation, disabled/invalid/description semantics, long-content reflow, light/dark modes, and isolated-package rendering are checked; manual assistive technology and non-Chromium/mobile chooser review remain open.
-
-Radio uses a native radio input with a required visible label, optional id, and forwarded native attributes/ref. className applies to its label wrapper. Give exclusive options the same name and distinct values, with a separate name per group; compose them inside Fieldset/legend. Native Tab, arrow keys, and Space retain browser behavior. The caller manages checked state, observations, validation, and disabled groups. The readiness-review consumer checks native navigation, group/error links, disabled controls, persistence, failures/conflicts, and responsive light/dark rendering. No custom ARIA radio model or promotion/release logic is embedded.
-
-Pagination accepts controlled one-based page, pageCount, onPageChange, disabled, label (default Pagination), and native nav attributes/ref. Previous/next are native secondary buttons; first/last boundaries and disabled lock movement. Position is announced politely. Finite numbers are truncated and clamped; invalid counts/pages become one. The caller owns fetching, page-size, result count, URL state, loading/error recovery, and focus decisions. Labels currently use English. Buttons retain native Tab/Enter/Space behavior; no custom arrow model or embedded routing is supplied. The real review queue is its first consumer.
-
-DefinitionList accepts readonly items containing stable unique id, term and description React nodes, plus native dl attributes/ref (children are composed from items). Each entry renders a native div/dt/dd group. It adds no landmark, heading, fetching, parsing, selection, or fake table role. Give a standalone list accessible context using a nearby heading or native ARIA attributes. Empty arrays produce an empty dl; consumer empty-state text remains separate. Long/multiline text wraps. Martlet stacks terms and descriptions with generous rhythm; Krigsvold aligns leading term columns and values, collapsing at narrow widths. The real specification-conflict comparison composes it into independent family layouts.
-
-
-
-Switch adds a native binary checkbox with role=switch and fixed visible label. It accepts checked/defaultChecked, change, name/value, disabled and native attributes/ref; the visual track is decorative. ClassName passes to the input. Space and label activation remain native. The settings consumer controls future browser draft protection, with ordinary Save committing the preference.
-
-Tabs provides labelled, controlled, manually activated panels. Supply unique item IDs, labels, content and optional disabled flags, plus value/onValueChange and a label. Horizontal arrows (vertical Up/Down when configured) and Home/End move focus among enabled tabs; Enter/Space select. Panels remain mounted, linked by generated IDs, and hidden when inactive. The first enabled item is the fallback for invalid/disabled selection; provide at least one enabled item. Root div props/ref pass through. Routing, persistence, right-to-left arrow adaptation and automatic activation are not supplied.
-
-Both are experimental and consumed by the workbench Settings workflow. The package now exposes 22 components. See [release preparation](../../docs/release-policy.md) and [independent documentation-site direction](../../docs/react-sites.md).
-
-
-AppShell supports `navigationPlacement="default" | "top" | "side" | "none"`, an explicit `navigationLabel`, and optional `headerMode="light" | "dark"`. Existing defaults remain compatible. Placement is a task composition choice in both languages; none omits primary navigation while retaining the brand, utilities and single main landmark. See [the UI grammar](../../docs/languages/martlet/grammar.md) and [MCP and builder skills](../../docs/mcp.md).
-
-## Source reconciliation
-
-The October 23 origin audit is reconciled in this experimental release. TableOfContents accepts optional depth 2/3 per item and variant index/inline; DefinitionList accepts layout rows/stack/grid. Article contents precede body while supporting aside content follows it. AppShell carries neither a decorative top stripe nor a built-in colophon. Existing AppShell navigation defaults are retained for compatibility, with top/side/none available in both families. See docs/languages/martlet/decisions.md for source roles and explicit application extensions. The complete grammar remains experimental; theme 2.1.0 is unchanged.
+Reproduce publishable archives with npm 11.15.0: export the exact reviewed source with `git archive`, set only the exported manifest to `private:false`, install and build in that isolated export, run `node scripts/normalize-package-modes.mjs .` there, then `npm pack --ignore-scripts`. All published regular files use mode 0644 and directories 0755; the normalizer refuses a Git working tree, executable-bin package or symlink payload.

package/dist/index.d.ts

@@ -10,11 +10,13 @@ export type FieldControl = {
     "aria-describedby"?: string;
     "aria-invalid"?: true;
 };
-export declare function Field({ id: providedId, label, hint, error, children, }: {
+export declare function Field({ id: providedId, label, hint, error, hintId: providedHintId, errorId: providedErrorId, children, }: {
     id?: string;
     label: string;
     hint?: string;
     error?: string;
+    hintId?: string;
+    errorId?: string;
     children: (props: FieldControl) => ReactNode;
 }): import("react").JSX.Element;
 export declare function Notice({ kind, children, }: {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useId, useRef, } from "react";
+import { useLayoutEffect, useId, useRef, useState, } from "react";
 export function Button({ variant = "primary", className = "", type = "button", ...props }) {
     return (_jsx("button", { type: type, className: `martlet-button martlet-button--${variant} ${className}`, ...props }));
 }
@@ -12,16 +12,18 @@ export function Select({ className = "", ...props }) {
 export function Textarea({ className = "", ...props }) {
     return _jsx("textarea", { className: `martlet-input ${className}`, ...props });
 }
-export function Field({ id: providedId, label, hint, error, children, }) {
+export function Field({ id: providedId, label, hint, error, hintId: providedHintId, errorId: providedErrorId, children, }) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
-    const descriptions = [hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") ||
-        undefined;
+    // Description IDs belong to this Field, independent of a caller-supplied control ID.
+    const hintId = providedHintId ?? `${generatedId}-hint`;
+    const errorId = providedErrorId ?? `${generatedId}-error`;
+    const descriptions = [hint && hintId, error && errorId].filter(Boolean).join(" ") || undefined;
     return (_jsxs("div", { className: "martlet-field", children: [_jsx("label", { htmlFor: id, children: label }), children({
                 id,
                 "aria-describedby": descriptions,
                 "aria-invalid": error ? true : undefined,
-            }), hint && (_jsx("p", { id: `${id}-hint`, className: "martlet-hint", children: hint })), error && (_jsx("p", { id: `${id}-error`, className: "martlet-error", children: error }))] }));
+            }), hint && (_jsx("p", { id: hintId, className: "martlet-hint", children: hint })), error && (_jsx("p", { id: errorId, className: "martlet-error", children: error }))] }));
 }
 export function Notice({ kind = "info", children, }) {
     return (_jsx("div", { className: `martlet-notice martlet-notice--${kind}`, role: kind === "error" ? "alert" : "status", children: children }));
@@ -37,6 +39,7 @@ export function AppShell({ brand, navigationLabel = "Workbench", navigationPlace
 }
 export function Dialog({ open, title, onDismiss, children, }) {
     const ref = useRef(null);
+    const suppressedCloseEvents = useRef(0);
     const id = useId();
     useLayoutEffect(() => {
         const dialog = ref.current;
@@ -44,10 +47,20 @@ export function Dialog({ open, title, onDismiss, children, }) {
             return;
         if (open && !dialog.open)
             dialog.showModal();
-        if (!open && dialog.open)
+        if (!open && dialog.open) {
+            // The close event is queued; distinguish prop-driven closes from native ones.
+            suppressedCloseEvents.current += 1;
             dialog.close();
+        }
     }, [open]);
-    return (_jsxs("dialog", { className: "martlet-dialog", ref: ref, "aria-labelledby": id, onCancel: (event) => {
+    return (_jsxs("dialog", { className: "martlet-dialog", ref: ref, "aria-labelledby": id, onClose: () => {
+            if (suppressedCloseEvents.current > 0) {
+                suppressedCloseEvents.current -= 1;
+            }
+            else if (open && !ref.current?.open) {
+                onDismiss();
+            }
+        }, onCancel: (event) => {
             event.preventDefault();
             onDismiss();
         }, children: [_jsx("h2", { id: id, children: title }), children] }));
@@ -70,10 +83,15 @@ export function Disclosure({ summary, children, className = "", ...props }) {
 export function ErrorSummary({ title, errors = [], children, className = "", ...props }) {
     const titleId = useId();
     return (_jsxs("div", { ...props, tabIndex: -1, role: "alert", "aria-labelledby": titleId, className: `martlet-error-summary ${className}`, children: [_jsx("strong", { id: titleId, children: title }), errors.length > 0 && (_jsx("ul", { children: errors.map((error, index) => (_jsx("li", { children: error.targetId ? (_jsx("a", { href: `#${error.targetId}`, onClick: (event) => {
-                            const target = document.getElementById(error.targetId);
+                            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                                return;
+                            const owner = event.currentTarget.ownerDocument;
+                            const target = owner.getElementById(error.targetId);
                             if (target) {
-                                event.preventDefault();
                                 target.focus();
+                                // If focus cannot move, retain the link's native fragment navigation.
+                                if (owner.activeElement === target)
+                                    event.preventDefault();
                             }
                         }, children: error.message })) : (error.message) }, index))) })), children] }));
 }
@@ -100,7 +118,30 @@ export function Pagination({ page, pageCount, onPageChange, disabled = false, la
     const current = Number.isFinite(page)
         ? Math.min(count, Math.max(1, Math.trunc(page)))
         : 1;
-    return (_jsxs("nav", { ...props, "aria-label": label, className: `martlet-pagination ${className}`, children: [_jsx(Button, { variant: "secondary", disabled: disabled || current === 1, onClick: () => onPageChange(current - 1), children: "Previous page" }), _jsxs("p", { "aria-live": "polite", "aria-atomic": "true", children: ["Page ", current, " of ", count] }), _jsx(Button, { variant: "secondary", disabled: disabled || current === count, onClick: () => onPageChange(current + 1), children: "Next page" })] }));
+    const previousRef = useRef(null);
+    const nextRef = useRef(null);
+    const focusedControl = useRef(null);
+    useLayoutEffect(() => {
+        if (disabled || count === 1) {
+            focusedControl.current = null;
+            return;
+        }
+        const owner = previousRef.current?.ownerDocument;
+        if (!owner)
+            return;
+        const active = owner.activeElement;
+        if (active !== owner.body && active !== previousRef.current && active !== nextRef.current) {
+            focusedControl.current = null;
+            return;
+        }
+        if (focusedControl.current === "next" && current === count && current > 1)
+            previousRef.current?.focus();
+        else if (focusedControl.current === "previous" && current === 1 && count > 1)
+            nextRef.current?.focus();
+    }, [current, count, disabled]);
+    return (_jsxs("nav", { ...props, "aria-label": label, className: `martlet-pagination ${className}`, children: [_jsx(Button, { ref: previousRef, onFocus: () => { focusedControl.current = "previous"; }, onBlur: (event) => { if (!event.currentTarget.disabled)
+                    focusedControl.current = null; }, variant: "secondary", disabled: disabled || current === 1, onClick: () => onPageChange(current - 1), children: "Previous page" }), _jsxs("p", { "aria-live": "polite", "aria-atomic": "true", children: ["Page ", current, " of ", count] }), _jsx(Button, { ref: nextRef, onFocus: () => { focusedControl.current = "next"; }, onBlur: (event) => { if (!event.currentTarget.disabled)
+                    focusedControl.current = null; }, variant: "secondary", disabled: disabled || current === count, onClick: () => onPageChange(current + 1), children: "Next page" })] }));
 }
 export function DefinitionList({ items, layout = "rows", className = "", ...props }) {
     return (_jsx("dl", { ...props, className: `martlet-definitions ${className}`, "data-layout": layout, children: items.map((item) => (_jsxs("div", { children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id))) }));
@@ -112,12 +153,35 @@ export function Switch({ label, id, className = "", ...props }) {
 export function Tabs({ items, value, onValueChange, label, orientation = "horizontal", className = "", ...props }) {
     const generatedId = useId();
     const buttons = useRef([]);
+    const [focusedId, setFocusedId] = useState(null);
     const enabled = items
         .map((item, index) => (item.disabled ? -1 : index))
         .filter((index) => index >= 0);
     const selected = items.findIndex((item) => item.id === value && !item.disabled);
     const active = selected >= 0 ? selected : (enabled[0] ?? -1);
-    return (_jsxs("div", { ...props, className: `martlet-tabs ${className}`, children: [_jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": orientation, onKeyDown: (event) => {
+    const focused = items.findIndex((item) => item.id === focusedId && !item.disabled);
+    const tabStop = focused >= 0 ? focused : active;
+    const lastFocusedTab = useRef(null);
+    useLayoutEffect(() => {
+        const previous = lastFocusedTab.current;
+        if (previous && (!previous.isConnected || previous.disabled)) {
+            lastFocusedTab.current = null;
+            const document = previous.ownerDocument;
+            if (document.hasFocus() && (document.activeElement === document.body || document.activeElement === previous)) {
+                buttons.current[active]?.focus();
+            }
+        }
+    });
+    return (_jsxs("div", { ...props, className: `martlet-tabs ${className}`, children: [_jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": orientation, onBlur: (event) => {
+                    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                        setFocusedId(null);
+                        const prior = lastFocusedTab.current;
+                        // Keep the last tab only when React has just disabled or removed it;
+                        // an ordinary blur, including a move to outside content, clears it.
+                        if (event.relatedTarget || !prior || (prior.isConnected && !prior.disabled))
+                            lastFocusedTab.current = null;
+                    }
+                }, onKeyDown: (event) => {
                     const target = event.target.closest('[role="tab"]');
                     const index = buttons.current.findIndex((button) => button === target);
                     if (index < 0)
@@ -140,5 +204,5 @@ export function Tabs({ items, value, onValueChange, label, orientation = "horizo
                     }
                 }, children: items.map((item, index) => (_jsx("button", { type: "button", role: "tab", ref: (element) => {
                         buttons.current[index] = element;
-                    }, id: `${generatedId}-tab-${index}`, "aria-controls": `${generatedId}-panel-${index}`, "aria-selected": index === active, tabIndex: index === active ? 0 : -1, disabled: item.disabled, onClick: () => onValueChange(item.id), children: item.label }, item.id))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", id: `${generatedId}-panel-${index}`, "aria-labelledby": `${generatedId}-tab-${index}`, hidden: index !== active, tabIndex: 0, children: item.content }, item.id)))] }));
+                    }, id: `${generatedId}-tab-${index}`, "aria-controls": `${generatedId}-panel-${index}`, "aria-selected": index === active, tabIndex: index === tabStop ? 0 : -1, disabled: item.disabled, onFocus: (event) => { lastFocusedTab.current = event.currentTarget; setFocusedId(item.id); }, onClick: () => onValueChange(item.id), children: item.label }, item.id))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", id: `${generatedId}-panel-${index}`, "aria-labelledby": `${generatedId}-tab-${index}`, hidden: index !== active, tabIndex: 0, children: item.content }, item.id)))] }));
 }

package/dist/styles.css

@@ -1,5 +1,5 @@
-@import "@martlet/theme/css";
-@import "@martlet/theme/foundation.css";
+@import "@martlet/core/css";
+@import "@martlet/core/foundation.css";
 /* Source roles: see docs/languages/martlet/decisions.md. Theme 2.1.0 is unchanged. */
 .martlet {
   --ui-bg: var(--martlet-surface-canvas);
@@ -56,7 +56,7 @@
 .martlet-field label, .martlet-fieldset legend { color:var(--ui-heading); font:700 .86rem/1.5 var(--martlet-font-sans); letter-spacing:.02em; }
 .martlet-hint { color:var(--ui-muted); font-size:.875rem; }
 .martlet-error { color:var(--martlet-danger); font-size:.875rem; }
-.martlet-checkbox, .martlet-radio { display:inline-flex; gap:.5rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--martlet-font-sans); }
+.martlet-checkbox, .martlet-radio { color:var(--ui-text); display:inline-flex; gap:.5rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--martlet-font-sans); }
 .martlet-checkbox input, .martlet-radio input { inline-size:1.2rem; block-size:1.2rem; accent-color:var(--ui-action); flex:none; }
 .martlet-checkbox:has(input:disabled), .martlet-radio:has(input:disabled) { color:var(--martlet-disabled-text); cursor:default; }
 .martlet-fieldset { border:1px solid var(--ui-line); padding:var(--martlet-group-gap); margin:0; min-inline-size:0; }
@@ -71,7 +71,7 @@
 .martlet-table-scroll { overflow:auto; max-inline-size:100%; }
 .martlet-table { border-collapse:collapse; inline-size:100%; text-align:start; font:.94rem/1.5 var(--martlet-font-sans); }
 .martlet-table caption { text-align:start; padding-block:0 1rem; color:var(--ui-muted); font-weight:700; }
-.martlet-table :where(th,td) { padding:.8rem .9rem; border-block-end:1px solid var(--ui-line); vertical-align:top; text-align:start; }
+.martlet-table :where(th,td) { min-inline-size:8rem; padding:.8rem .9rem; border-block-end:1px solid var(--ui-line); vertical-align:top; text-align:start; }
 .martlet-table thead th { color:var(--ui-heading); background:var(--ui-surface); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
 .martlet-table tr[data-selected="true"] { background:var(--martlet-active-bg); }
 .martlet-skip { position:fixed; inset-block-start:-5rem; inset-inline-start:1rem; z-index:2000; background:var(--ui-bg); color:var(--ui-text); padding:.75rem 1rem; font:700 1rem/1.5 var(--martlet-font-sans); }
@@ -105,6 +105,9 @@
 .martlet-contents a { display:block; padding-block:.35rem; text-decoration:none; }
 .martlet-contents a:hover { text-decoration:underline; }
 .martlet-contents[data-variant="index"] { position:sticky; inset-block-start:6rem; max-block-size:calc(100dvh - 8rem); overflow-y:auto; padding:1.2rem .5rem .5rem 0; border-block-start:2px solid var(--martlet-color-gold-500); scrollbar-width:thin; }
+/* A document index is compact, including after narrow-container reflow. */
+.martlet-contents[data-variant="index"] li[data-depth="2"] { margin-block-start:.35rem; }
+.martlet-contents[data-variant="index"] li:first-child { margin-block-start:0; }
 .martlet-contents[data-variant="inline"] { margin-block-end:2.5rem; padding:1.2rem 1.4rem; background:var(--ui-surface); border-block-start:2px solid var(--martlet-color-gold-500); }
 .martlet-contents[data-variant="inline"] ul { columns:2 16rem; column-gap:2rem; }
 .martlet-contents[data-variant="inline"] li { break-inside:avoid; }
@@ -162,10 +165,10 @@
 .martlet-tabs [role="tab"]:disabled { color:var(--martlet-disabled-text); cursor:default; }
 .martlet-tabs [role="tabpanel"] { padding-block:1.5rem; outline-offset:3px; }
 .martlet-tabs [role="tabpanel"][hidden] { display:none; }
-@container martlet-article (max-width:74rem) {
+@container martlet-article (max-width:56rem) {
  .martlet-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
- .martlet-contents[data-variant="index"] { position:static; max-block-size:none; overflow:visible; padding:1.2rem 1.4rem; background:var(--ui-surface); }
- .martlet-contents[data-variant="index"] ul { columns:2 16rem; column-gap:2rem; }
+ .martlet-contents[data-variant="index"] { position:static; max-block-size:none; overflow:visible; max-inline-size:22rem; padding:1rem; background:var(--ui-surface); }
+ .martlet-contents[data-variant="index"] ul { columns:1; }
  .martlet-contents[data-variant="index"] li { break-inside:avoid; }
 }
 @media(max-width:55rem) {
@@ -176,10 +179,6 @@
  .martlet-definitions > div { grid-template-columns:minmax(0,1fr); gap:.5rem; }
 }
 @media(max-width:40rem) { .martlet-contents ul { columns:1 !important; } }
-@media(max-aspect-ratio:4/5) {
- .martlet-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
- .martlet-contents[data-variant="index"] { position:static; max-block-size:none; padding:1.2rem 1.4rem; background:var(--ui-surface); }
-}
 @media(prefers-reduced-motion:reduce) { .martlet *, .martlet *::before, .martlet *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
 @media(forced-colors:active) {
  .martlet-switch-track { forced-color-adjust:none; background:Canvas; border-color:CanvasText; }
@@ -211,8 +210,7 @@
 .martlet-definitions[data-layout="stack"] dd { margin-block-start:.5rem; }
 .martlet-definitions[data-layout="grid"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
 .martlet-definitions[data-layout="grid"] > div { display:block; }
-@container martlet-article (max-width:74rem) { .martlet-article-context { position:static; } }
-@media(max-aspect-ratio:4/5) { .martlet-article-context { position:static; } }
+@container martlet-article (max-width:56rem) { .martlet-article-context { position:static; } }
 @media(max-width:48rem) { .martlet-definitions[data-layout="grid"] { grid-template-columns:minmax(0,1fr); } }
 
 /* Technical identifiers may wrap locally; ordinary prose keeps natural word boundaries. */
@@ -232,8 +230,7 @@
 
 /* Existing darker gold improves small-label contrast on the source cream inset. */
 .martlet-contents[data-variant="inline"] > strong { color:var(--martlet-color-gold-700); }
-@container martlet-article (max-width:74rem) { .martlet-contents[data-variant="index"] > strong { color:var(--martlet-color-gold-700); } }
-@media(max-aspect-ratio:4/5) { .martlet-contents[data-variant="index"] > strong { color:var(--martlet-color-gold-700); } }
+@container martlet-article (max-width:56rem) { .martlet-contents[data-variant="index"] > strong { color:var(--martlet-color-gold-700); } }
 .martlet[data-martlet="dark"] .martlet-contents > strong { color:var(--martlet-color-gold-300); }
 
 .martlet-article-header { grid-template-columns:minmax(0,1fr); }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@martlet/react",
-  "version": "0.1.0",
-  "description": "Martlet experimental React components, developed in a working component registry",
+  "version": "0.2.0",
+  "description": "Experimental Martlet React components",
   "type": "module",
   "license": "MIT",
   "private": false,
@@ -26,19 +26,35 @@
     "react": "^19.0.0"
   },
   "dependencies": {
-    "@martlet/theme": "2.1.0"
+    "@martlet/core": "2.2.3"
   },
   "scripts": {
-    "build": "node ../../scripts/clean-package.mjs martlet && tsc -p tsconfig.json && node ../../scripts/copy-styles.mjs martlet"
+    "build": "node build.mjs",
+    "test": "npm run build && node --test tests/*.test.mjs",
+    "test:browser": "DESIGN_FAMILY=martlet node tests/browser-check.mjs",
+    "build:gallery": "NIGHTJAR_FAMILY=martlet node examples/react-catalog/build.mjs",
+    "build:reference": "node scripts/build-reference-deployment.mjs"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/howardjp/design-workbench.git",
-    "directory": "packages/martlet-react"
+    "url": "git+https://github.com/martletdesign/react.git"
   },
   "publishConfig": {
     "access": "public",
     "tag": "next",
     "provenance": true
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "7.0.2",
+    "@axe-core/playwright": "4.11.1",
+    "playwright": "1.64.1",
+    "esbuild": "0.27.4",
+    "vite": "8.3.5",
+    "markdown-it": "14.3.3",
+    "markdown-it-footnote": "4.0.0",
+    "sanitize-html": "2.18.1"
   }
 }