design26 0.0.0-stage → 0.1.0

package/AGENTS.md

@@ -0,0 +1,57 @@
+# design26 — the personal visual language
+
+This repository captures the existing UVID demonstration's visual identity for future projects. Read `docs/DESIGN-AUDIT.md` and `docs/ARCHITECTURE.md` before changing the system. The reference `../uvid-demonstration` is read-only: do not edit, build in, install into, reconfigure or run a dev server from that directory. Do not import its models, datasets, geometry, branding or assets.
+
+## Build with existing parts first
+
+Import public APIs from `design26` and `design26/scientific`, and import `design26/styles.css` once at the host application's root. Reuse components and semantic tokens before introducing styling. Never import package source paths from applications. Wrap the page in `PageFrame`, or use `.d26-theme` / `[data-design26-theme="light"]` for an embedded region. Styles must remain independent of Tailwind and Next-specific components.
+
+Generic UI: TechnicalGrid, PageFrame, Navigation, Panel, Eyebrow, SectionHeading, Button, TextLink, IconButton, StepNavigation, Tabs, Slider, Select, Checkbox, Disclosure, Dialog, StatusNote.
+
+Scientific presentation: ParameterControl, DataPanel, Metric, FigureContainer, PlotContainer, PlotLegend. These present host-supplied data and artwork; they do not calculate models or fetch scientific datasets. Inspect exported prop types and `app/catalogue.ts` before extending an API.
+
+## Identity
+
+- Electric blue `#075afa` frames cool paper `#f7f9fc`. Navy `#072754` is the primary ink; muted text is `#61718a`. Amber `#ed9019` is focus, selected data and meaningful emphasis.
+- Use semantic variables: `--color-background`, `--color-surface`, `--color-surface-control`, `--color-text-primary`, `--color-text-secondary`, `--color-accent`, `--color-border`, `--color-highlight`. Do not add arbitrary hex values to component code.
+- Body and headings are Arial, Helvetica, sans-serif. The original application loads Geist Sans but renders its body in Arial. Preserve that fact. Technical labels use Geist Mono via the host's `--font-geist-mono`, with a system monospace fallback. The package does not fetch fonts.
+- Large medium-weight headings use tight tracking (`-.065em`); technical labels are small, uppercase, monospaced and widely tracked. Use SectionHeading size independently of semantic heading level. One main h1 per page. Use an em child for a single blue accent phrase.
+- Use thin 1px rules, flat surfaces and quiet captions. Ordinary panels have no shadows. The dialog is the elevated exception. Avoid making every section a rounded card.
+
+## Layout
+
+The frame max-width is1920px. Gutters are32px normally,44px at ≥1500px,24px at ≤1100px and14px at ≤760px. Native breakpoints are760,1100 and1500px. Do not replace them with Tailwind defaults.
+
+Use asymmetric text/figure composition (47/53 hero,1.15/.85 scientific workspace), equal paired plots, generous section spacing and compact control spacing. `--space-panel-inline`, `--space-section`, `--space-grid`, `--space-control` and the existing recipes are the starting point. The source uses optical adjustments, not a uniform eight-pixel grid. Preserve measured recipes rather than rounding every value.
+
+Use min-width:0, minmax(0,1fr), responsive SVG viewBox and intrinsic media ratios. Stack scientific figure/inspector and paired plots at mobile. Keep labels, units, controls and readings close together. Caption text explains what to notice. Do not hide essential information on narrow screens.
+
+## Interaction and accessibility
+
+Use real buttons for actions, anchors for navigation, labelled native inputs and native details/dialog semantics. IconButton requires aria-label. Distinguish disabled from busy; do not use a waiting cursor on all disabled controls. All interactive elements, including summary/select, use visible amber focus. Do not remove outlines without an equivalent indicator.
+
+Tabs implement roving focus, arrows/Home/End, disabled-item skipping and associated panels; do not build a second tab implementation. StepNavigation is numbered section navigation, not an ARIA tablist. Do not attach page-wide arrow shortcuts that steal keys from inputs or nested controls.
+
+Use the observed200ms interaction timing,420ms/12px entrance and restrained status pulse. Respect prefers-reduced-motion for CSS and any application animation. Pause continuous work offscreen or in background tabs, and clean up listeners/timers. No Anime.js dependency is needed for the generic library. TechnicalGrid is an optional evidenced figure backdrop; pair it with a pause control. Avoid unrelated decorative autoplay, bouncing cards, large hover shifts and unrelated gradients.
+
+## Extending the system
+
+1. Find the closest existing component, token and reference pattern.
+2. Compose before extending. Extend a typed variant only when a repeated need is real.
+3. Add a new component only for a distinct reusable responsibility, with evidence or a clearly documented gap. Do not add a Tooltip, NumberInput or Toggle simply to fill a catalogue.
+4. Keep generic UI separate from scientific presentation. Keep business logic in the consumer.
+5. Add semantic tokens for genuine new roles. Preserve exact existing values; document canonicalisation in the audit. Theme overrides belong on the existing theme boundary. Do not invent a dark theme implicitly.
+6. Document purpose, props, variants, a real usage example, accessibility and recommended composition in the catalogue/package guide.
+7. Run library build, TypeScript, Next build, packed-consumer validation and relevant interaction/viewport checks. Verify that the reference fingerprints remain unchanged. Report any verification limits honestly.
+
+Avoid application-specific names in public props, copied UVID calculations/assets, global CSS resets, a mandatory icon/chart framework, runtime CSS-in-JS, broad client boundaries, deep private imports, unexplained colours, exaggerated shadows, pill-shaped everything and inaccessible tiny essential text. Compact metadata is part of the identity; essential instructions and interactive content still need to be readable and usable.
+
+## Commands
+
+- `pnpm dev`: build the package, then start the showcase.
+- `pnpm build`: build package and production showcase.
+- `pnpm typecheck`: package and application types.
+- `pnpm verify:package`: pack/install in an isolated consumer, typecheck and server-render it without Tailwind/Next.
+- `pnpm audit:reference`: verify the read-only reference snapshot.
+
+When editing package source during an active showcase session, rebuild the package so public imports reflect the change. Do not work around package boundaries with source aliases. Use `docs/VALIDATION.md` for the latest evidence and known limits.

package/COMPONENTS.md

@@ -0,0 +1,325 @@
+# design26 component catalogue
+
+Import generic components from `design26` and scientific components from `design26/scientific`. Import `design26/styles.css` once and use a theme wrapper. All components accept their documented native HTML props and React 19 refs.
+
+## TechnicalGrid
+
+A gently drifting 38px technical mesh, refined in the reference during this extraction.
+
+- **Entry:** design26
+- **Props:** active?: boolean; interactive?: boolean; native div props
+- **Variants:** Animated / paused; pointer lens optional
+- **Accessibility:** Decorative and hidden from assistive technology. Reduced motion renders a static grid. Animation pauses offscreen and in hidden tabs; pointer response requires a fine hover pointer.
+- **Recommended use:** An optional figure backdrop, with positioned content above it. Keep it away from dense reading and provide a pause control where appropriate.
+
+```tsx
+<div style={{ position: "relative" }}><TechnicalGrid /><Content /></div>
+```
+
+## PageFrame
+
+The blue outer frame and opt-in theme boundary.
+
+- **Entry:** design26
+- **Props:** Native div props, children, className, ref
+- **Variants:** One faithful light theme
+- **Accessibility:** Use a main landmark inside the frame and a skip link before navigation.
+- **Recommended use:** One outer frame per application. Use d26-theme alone for embedded UI.
+
+```tsx
+<PageFrame><Navigation brand="Project" /><Panel>Content</Panel></PageFrame>
+```
+
+## Panel
+
+Paper sheets, parameter surfaces and control decks.
+
+- **Entry:** design26
+- **Props:** variant?: "sheet" | "control" | "toolbar"; padding?: "content" | "none"; native div props
+- **Variants:** Sheet / control / toolbar
+- **Accessibility:** A visual wrapper has no automatic landmark. Label important sections with semantic HTML.
+- **Recommended use:** Use fine rules to separate content; avoid nesting sheet after sheet.
+
+```tsx
+<Panel variant="control"><ParameterControl {...parameter} /></Panel>
+```
+
+## Eyebrow
+
+Technical context above a heading.
+
+- **Entry:** design26
+- **Props:** dot?: boolean; compact?: boolean; native div props
+- **Variants:** Default / compact / status dot
+- **Accessibility:** The dot is decorative. Put the actual status or category in text.
+- **Recommended use:** Short uppercase labels. Do not use letter-spaced metadata for paragraphs.
+
+```tsx
+<Eyebrow dot>RESEARCH / 01</Eyebrow>
+```
+
+## SectionHeading
+
+The large, tightly tracked heading hierarchy.
+
+- **Entry:** design26
+- **Props:** as?: "h1" | "h2" | "h3" | "h4"; size?: "display" | "chapter" | "inspector" | "figure"; native heading props
+- **Variants:** Display / chapter / inspector / figure
+- **Accessibility:** Choose heading level by document structure; size is independent of semantics.
+- **Recommended use:** One clear headline, with a single accent phrase when useful.
+
+```tsx
+<SectionHeading as="h1" size="display">A different <em>perspective.</em></SectionHeading>
+```
+
+## Button
+
+A primary action or a quiet supporting action.
+
+- **Entry:** design26
+- **Props:** variant?: "primary" | "text" | "playback"; endIcon?: ReactNode; busy?: boolean; native button props
+- **Variants:** Primary / text / playback; disabled / busy
+- **Accessibility:** Native keyboard behaviour; type defaults to button. Use busy for pending actions and give useful loading text.
+- **Recommended use:** One primary action per local group. Links use TextLink.
+
+```tsx
+<Button endIcon={<Arrow />} onClick={start}>Explore the project</Button>
+```
+
+## TextLink
+
+A fine underlined link for supporting destinations.
+
+- **Entry:** design26
+- **Props:** Native anchor props including href, target, rel, ref
+- **Variants:** One underlined treatment
+- **Accessibility:** Supply meaningful link text. Indicate a new tab when relevant.
+- **Recommended use:** Use for navigation, downloads and secondary reading.
+
+```tsx
+<TextLink href="/methods">Read the methods</TextLink>
+```
+
+## IconButton
+
+Compact playback and circular paging actions.
+
+- **Entry:** design26
+- **Props:** aria-label: string; variant?: "circle" | "step" | "plain"; native button props
+- **Variants:** Circle 34px / step 44px / plain 25×26px
+- **Accessibility:** An accessible name is required. Keep enough space around compact controls for touch users.
+- **Recommended use:** Use the step variant for main figure navigation and plain for inline tools.
+
+```tsx
+<IconButton aria-label="Next figure" variant="step"><Arrow /></IconButton>
+```
+
+## Navigation
+
+White-on-blue wordmark, descriptor and links.
+
+- **Entry:** design26
+- **Props:** brand: ReactNode; description?: ReactNode; actions?: ReactNode; native header props
+- **Variants:** Descriptor hides at 760px
+- **Accessibility:** Brand links should identify the home destination. Actions are wrapped in a Main navigation landmark.
+- **Recommended use:** Keep labels short. The header is part of the blue frame.
+
+```tsx
+<Navigation brand={<a href="/">Project</a>} description="RESEARCH NOTES" actions={<a href="#work">Work</a>} />
+```
+
+## StepNavigation
+
+Numbered section navigation with a fine active rule.
+
+- **Entry:** design26
+- **Props:** items: {id,label,disabled?}[]; value: string; onValueChange(value); aria-label: string; native nav props
+- **Variants:** Responsive numbered steps
+- **Accessibility:** Uses aria-current=step. Each button is in the normal tab order; content navigation belongs to the host.
+- **Recommended use:** For ordered sections. Use Tabs for switching panels within a section.
+
+```tsx
+<StepNavigation aria-label="Sections" items={sections} value={section} onValueChange={setSection} />
+```
+
+## Tabs
+
+Switch among related views without leaving a section.
+
+- **Entry:** design26
+- **Props:** items: {value,label,content,disabled?}[]; value?; defaultValue?; onValueChange?; aria-label: string; native div props
+- **Variants:** Controlled or uncontrolled; disabled items
+- **Accessibility:** Roving focus, automatic activation, arrows/Home/End, disabled skipping and linked panels. Values must be unique.
+- **Recommended use:** Two to four concise labels. Content belongs to the tab item, without global arrow shortcuts.
+
+```tsx
+<Tabs aria-label="View" items={[{ value: "plot", label: "Plot", content: <Plot /> }, { value: "data", label: "Data", content: <Data /> }]} />
+```
+
+## Slider
+
+A native range input in either reference treatment.
+
+- **Entry:** design26
+- **Props:** variant?: "parameter" | "timeline"; native range props; provide a label or aria-label
+- **Variants:** Parameter 4px track / timeline 3px track
+- **Accessibility:** Native arrows/Home/End. Supply aria-valuetext for formatted units. Disabled remains distinct from busy.
+- **Recommended use:** Use ParameterControl when a visible label, readout and endpoints belong together.
+
+```tsx
+<Slider variant="timeline" aria-label="Playback position" value={time} onChange={e => setTime(Number(e.target.value))} />
+```
+
+## Select
+
+An understated native picker with an associated label.
+
+- **Entry:** design26
+- **Props:** label: ReactNode; description?: string; native select props; option children
+- **Variants:** Native select, disabled
+- **Accessibility:** Generated stable label and description IDs; native keyboard navigation. Do not remove the visible label.
+- **Recommended use:** Use for longer sets of mutually exclusive options.
+
+```tsx
+<Select label="View" defaultValue="overview"><option value="overview">Overview</option></Select>
+```
+
+## Checkbox
+
+A compact native control for figure overlays and options.
+
+- **Entry:** design26
+- **Props:** label: ReactNode; native checkbox props
+- **Variants:** Checked / unchecked / disabled
+- **Accessibility:** Clickable label and native Space toggle. Describe actual effects in its label.
+- **Recommended use:** Independent yes/no settings. Keep groups visually close to the affected figure.
+
+```tsx
+<Checkbox label="Show grid" checked={grid} onChange={e => setGrid(e.target.checked)} />
+```
+
+## Disclosure
+
+Secondary settings in a pale bordered details panel.
+
+- **Entry:** design26
+- **Props:** title: ReactNode; open?: boolean; name?: string; native details props
+- **Variants:** Native open / closed
+- **Accessibility:** Native summary toggles with Enter or Space and has a visible focus ring.
+- **Recommended use:** Hide secondary complexity; never hide essential errors or primary actions.
+
+```tsx
+<Disclosure title="Advanced settings"><p>Additional controls</p></Disclosure>
+```
+
+## Dialog
+
+A paper modal with navy heading and a blurred backdrop.
+
+- **Entry:** design26
+- **Props:** open: boolean; onOpenChange(open); title: ReactNode; closeLabel?: string; native dialog props except open/title/onClose
+- **Variants:** Controlled native modal
+- **Accessibility:** Native modal focus containment, Escape, labelled title and focus return. Keep the trigger mounted.
+- **Recommended use:** For focused supporting information; keep lengthy documentation in the page.
+
+```tsx
+<Dialog open={open} onOpenChange={setOpen} title="About the project"><p>Project details.</p></Dialog>
+```
+
+## StatusNote
+
+A restrained contextual or review note.
+
+- **Entry:** design26
+- **Props:** tone?: "info" | "positive" | "warning" | "error"; native paragraph props
+- **Variants:** Info / positive / warning / error
+- **Accessibility:** Write the status in text. Add role=status or role=alert only when the update needs announcement.
+- **Recommended use:** Use observed teal and amber semantics. Avoid inventing a new red/green badge system.
+
+```tsx
+<StatusNote tone="warning">Manual boundary · review required</StatusNote>
+```
+
+## ParameterControl
+
+Label, unit-aware readout, native range and endpoint values.
+
+- **Entry:** design26/scientific
+- **Props:** label: string; value,min,max: number; onValueChange(number); step?,unit?,precision?,disabled?,description?,name?; native div props
+- **Variants:** Numeric range; explicit precision and units
+- **Accessibility:** Label and output reference the range ID; aria-valuetext includes units. Supply description for constraints.
+- **Recommended use:** Keep valid ranges and scientific calculations in the consuming application.
+
+```tsx
+<ParameterControl label="Angle" value={angle} min={-10} max={10} step={0.1} unit="°" onValueChange={setAngle} />
+```
+
+## DataPanel
+
+Ruled label/value rows with monospaced readings.
+
+- **Entry:** design26/scientific
+- **Props:** items: {label:ReactNode,value:ReactNode}[]; busy?: boolean; native dl props
+- **Variants:** Default / busy
+- **Accessibility:** A semantic description list. Include units and explain pending values in nearby text.
+- **Recommended use:** Metadata and compact readings. Use a real table for multi-column comparisons.
+
+```tsx
+<DataPanel items={[{ label: "Sample rate", value: "20 Hz" }]} />
+```
+
+## Metric
+
+A large blue reading, with quiet label and unit.
+
+- **Entry:** design26/scientific
+- **Props:** label,value: ReactNode; unit?: string; variant?: "default" | "result"; description?: ReactNode; native div props
+- **Variants:** Default 34px / result 42px
+- **Accessibility:** Units are text. Pair colour with labels; avoid live-announcing every animation frame.
+- **Recommended use:** One or two key readings. Do not turn every data row into a metric.
+
+```tsx
+<Metric label="Response time" value="24.8" unit="ms" />
+```
+
+## FigureContainer
+
+A numbered figure, title and caption around supplied artwork.
+
+- **Entry:** design26/scientific
+- **Props:** title: ReactNode; number?,caption?: ReactNode; captionPosition?: "before" | "after"; native figure props except title
+- **Variants:** Caption before / after
+- **Accessibility:** Uses figure/figcaption; the child graphic still needs its own accessible title or description.
+- **Recommended use:** Explain what to notice. Plotting algorithms remain with the host application.
+
+```tsx
+<FigureContainer number="01 / RESPONSE" title="Measured response" caption="Illustrative data."><Plot /></FigureContainer>
+```
+
+## PlotContainer
+
+A neutral, responsive frame for SVG, canvas or images.
+
+- **Entry:** design26/scientific
+- **Props:** aria-label: string; framed?: boolean; native div props
+- **Variants:** Framed / unframed
+- **Accessibility:** Describe what the figure shows; expose data textually when it matters. Interactive points need keyboard support.
+- **Recommended use:** Use plot colour and axis classes. It is a presentation container, not a charting engine.
+
+```tsx
+<PlotContainer aria-label="Response over time"><svg viewBox="0 0 620 450" role="img" aria-label="Illustrative response">…</svg></PlotContainer>
+```
+
+## PlotLegend
+
+A small inline key for figure series.
+
+- **Entry:** design26/scientific
+- **Props:** items: {label:string,tone?:"series"|"accent"|"highlight"|"reference",dashed?:boolean}[]; native ul props
+- **Variants:** Blue / accent / amber / reference; dashed key
+- **Accessibility:** Text accompanies each marker. Use different line patterns or labels when series must be distinguished without colour.
+- **Recommended use:** Keep keys adjacent to their figure and consistent with the actual marks.
+
+```tsx
+<PlotLegend items={[{ label: "Observation", tone: "accent" }, { label: "Reference", tone: "highlight", dashed: true }]} />
+```

package/README.md

@@ -1,3 +1,100 @@
-# Temporary Holding Version
+# design26
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A personal visual language extracted from a scientific demonstration: electric blue framing, cool paper, navy type, precise technical labels and figure-led explanation.
+
+## Install
+
+Within a pnpm workspace, include `packages/*` in `pnpm-workspace.yaml`, then add `design26: workspace:*` to the consuming application's dependencies. Build the package before starting the app:
+
+```sh
+pnpm --filter design26 build
+pnpm add design26@workspace:*
+```
+
+For a separate repository, run `pnpm pack` from this package and install the resulting tarball with `pnpm add /absolute/path/design26-0.1.0.tgz`. Publication is not required. The package has ESM exports and TypeScript declarations and requires React19 and React DOM19 as peers. It includes no Tailwind, Next.js, chart or animation runtime dependencies. The npm name has not been reserved or published. License: UNLICENSED; choose an appropriate distribution license before public publication.
+
+## Use
+
+Import CSS once in the host root layout or entry file. Interactive examples belong in a client component in Next.js.
+
+```tsx
+import 'design26/styles.css';
+import { PageFrame, Navigation, Panel, SectionHeading, TextLink } from 'design26';
+import { DataPanel, FigureContainer } from 'design26/scientific';
+
+export default function Page() {
+  return (
+    <PageFrame>
+      <Navigation brand={<a href="/">My research</a>} description="WORKING NOTES" />
+      <main>
+        <Panel>
+          <SectionHeading as="h1" size="display">A new <em>perspective.</em></SectionHeading>
+          <FigureContainer number="01 / OVERVIEW" title="What we observed" caption="Explain the important relationship.">
+            <DataPanel items={[{ label: 'Sample rate', value: '20 Hz' }]} />
+          </FigureContainer>
+          <TextLink href="/methods">Read the methods</TextLink>
+        </Panel>
+      </main>
+    </PageFrame>
+  );
+}
+```
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { Panel } from 'design26';
+import { ParameterControl } from 'design26/scientific';
+
+export function Controls() {
+  const [angle, setAngle] = useState(2);
+  return <Panel variant="control"><ParameterControl label="Angle" min={-10} max={10}
+    step={0.1} unit="°" value={angle} onValueChange={setAngle} /></Panel>;
+}
+```
+
+Static components do not require a client boundary. Tabs, form wrappers, Dialog and ParameterControl retain their own `use client` modules in the build. Event-handling application compositions need a host client boundary as usual. CSS imports are explicit and marked as side effects. Package imports use public `.js` ESM files with `.d.ts` definitions.
+
+## Theme and fonts
+
+PageFrame supplies `.d26-theme`. For embedded components use a div with that class or `data-design26-theme="light"`. Nothing styles an unwrapped document. Component classes use the `d26-` prefix; styles do not reset global body/headings. All supplied components need the stylesheet and a theme ancestor.
+
+Body/heading typography is Arial/Helvetica. For exact technical typography, load Geist Mono in the host and expose `--font-geist-mono`, e.g. using `next/font/google` in a Next application. Without it, technical labels use system monospace. Font files are not bundled and the library makes no network requests.
+
+Override semantic tokens on the same wrapper. CSS properties inherit; defaults live at the theme boundary. Place custom overrides after the imported stylesheet.
+
+```css
+.my-theme {
+  --color-accent: #075afa;
+  --color-background: #075afa;
+  --space-section: 36px;
+}
+```
+
+```tsx
+<PageFrame className="my-theme">...</PageFrame>
+```
+
+Use `design26/tokens.css` alone when building a non-React composition. `design26/styles.css` already imports tokens. One faithful light theme is shipped; a dark theme is not invented. Exported `breakpoints` matches native CSS thresholds: mobile760px, tablet1100px, wide1500px. CSS variables cannot be used in native media-query conditions, so those literal thresholds are intentionally mirrored.
+
+## Components
+
+Generic: TechnicalGrid, PageFrame, Navigation, Panel, Eyebrow, SectionHeading, Button, TextLink, IconButton, StepNavigation, Tabs, Slider, Select, Checkbox, Disclosure, Dialog, StatusNote.
+
+Scientific: ParameterControl, DataPanel, Metric, FigureContainer, PlotContainer, PlotLegend. These receive data/children from the host and contain no UVID scientific logic.
+
+See [COMPONENTS.md](COMPONENTS.md) for every component contract and [AGENTS.md](AGENTS.md) for future coding agents. These guides are included in the tarball.
+
+Every component exports a matching `*Props` type. Native HTML attributes, including React19 refs, are accepted. Tabs also exports TabItem. The repository's live catalogue documents every prop contract, state, usage example and accessibility note. Source declarations are the authoritative complete native-plus-custom API.
+
+## Interaction contracts
+
+- Button defaults to type=button; use TextLink for navigation. IconButton requires aria-label.
+- Tabs values must be unique. It supports controlled/uncontrolled selection, arrows/Home/End and disabled skipping; current panel is keyboard focusable.
+- Slider needs an associated label or aria-label. Use ParameterControl for labelled unit-aware ranges. Native min/max/step and meaningful limits are the host's responsibility. Avoid min=max.
+- Select/Checkbox associate labels automatically. Supply descriptions for additional constraints.
+- Dialog is controlled by open/onOpenChange. Keep its trigger mounted so native focus return can work. Give it a concise title; Escape closes it.
+- DataPanel is a description list, not a multi-column table. Figure graphics need their own accessible description; PlotContainer does not make arbitrary child graphics accessible automatically.
+- Focus uses an amber outline. Animation helpers d26-reveal and d26-pulse respect reduced motion. Do not infer scientific validity from presentation.
+
+See the root audit and agent instructions before extending the system. Retain component recipes and optical spacing rather than imposing a new generic scale.

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { PageFrame, Panel, Eyebrow, SectionHeading, Button, TextLink, IconButton, Navigation, StepNavigation, Disclosure, StatusNote } from "./ui/primitives.js";
+export type { PageFrameProps, PanelProps, EyebrowProps, SectionHeadingProps, ButtonProps, TextLinkProps, IconButtonProps, NavigationProps, StepNavigationProps, DisclosureProps, StatusNoteProps } from "./ui/primitives.js";
+export { Slider, Select, Checkbox } from "./ui/controls.js";
+export type { SliderProps, SelectProps, CheckboxProps } from "./ui/controls.js";
+export { Tabs } from "./ui/tabs.js";
+export type { TabsProps, TabItem } from "./ui/tabs.js";
+export { Dialog } from "./ui/dialog.js";
+export type { DialogProps } from "./ui/dialog.js";
+export declare const breakpoints: {
+    readonly mobile: 760;
+    readonly tablet: 1100;
+    readonly wide: 1500;
+};
+export { TechnicalGrid } from "./ui/technical-grid.js";
+export type { TechnicalGridProps } from "./ui/technical-grid.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { PageFrame, Panel, Eyebrow, SectionHeading, Button, TextLink, IconButton, Navigation, StepNavigation, Disclosure, StatusNote } from "./ui/primitives.js";
+export { Slider, Select, Checkbox } from "./ui/controls.js";
+export { Tabs } from "./ui/tabs.js";
+export { Dialog } from "./ui/dialog.js";
+export const breakpoints = { mobile: 760, tablet: 1100, wide: 1500 };
+export { TechnicalGrid } from "./ui/technical-grid.js";

package/dist/scientific/parameter-control.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "react";
+export type ParameterControlProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    unit?: string;
+    precision?: number;
+    onValueChange: (value: number) => void;
+    disabled?: boolean;
+    description?: string;
+    name?: string;
+};
+export declare function ParameterControl({ label, value, min, max, step, unit, precision, onValueChange, disabled, description, name, id, className, ...props }: ParameterControlProps): import("react").JSX.Element;

package/dist/scientific/parameter-control.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { Slider } from "../ui/controls.js";
+import { cx } from "../ui/primitives.js";
+export function ParameterControl({ label, value, min, max, step = 1, unit = "", precision = step < 1 ? 1 : 0, onValueChange, disabled, description, name, id, className, ...props }) {
+    const generated = useId(), uid = id ?? generated;
+    const formatted = value.toFixed(precision);
+    return _jsxs("div", { ...props, className: cx("d26-parameter", className), children: [_jsxs("label", { htmlFor: uid, children: [label, _jsxs("output", { htmlFor: uid, children: [formatted, _jsxs("span", { children: [" ", unit] })] })] }), _jsx(Slider, { id: uid, name: name, min: min, max: max, step: step, value: value, disabled: disabled, onChange: event => onValueChange(Number(event.target.value)), "aria-valuetext": `${formatted} ${unit}`.trim(), "aria-describedby": description ? `${uid}-description` : undefined }), _jsxs("div", { className: "d26-parameter-range", "aria-hidden": "true", children: [_jsxs("span", { children: [min, unit === "°" ? "°" : ""] }), _jsxs("span", { children: [max, unit === "°" ? "°" : ""] })] }), description && _jsx("p", { id: `${uid}-description`, className: "d26-field-description", children: description })] });
+}

package/dist/scientific/patterns.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type DataPanelProps = HTMLAttributes<HTMLDListElement> & {
+    items: {
+        label: ReactNode;
+        value: ReactNode;
+    }[];
+    busy?: boolean;
+};
+export declare function DataPanel({ items, busy, className, ...props }: DataPanelProps): import("react").JSX.Element;
+export type MetricProps = HTMLAttributes<HTMLDivElement> & {
+    label: ReactNode;
+    value: ReactNode;
+    unit?: string;
+    variant?: "default" | "result";
+    description?: ReactNode;
+};
+export declare function Metric({ label, value, unit, description, variant, className, ...props }: MetricProps): import("react").JSX.Element;
+export type FigureContainerProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    number?: string;
+    title: ReactNode;
+    caption?: ReactNode;
+    captionPosition?: "before" | "after";
+};
+export declare function FigureContainer({ number, title, caption, captionPosition, className, children, ...props }: FigureContainerProps): import("react").JSX.Element;
+export type PlotContainerProps = HTMLAttributes<HTMLDivElement> & {
+    "aria-label": string;
+    framed?: boolean;
+};
+export declare function PlotContainer({ framed, className, ...props }: PlotContainerProps): import("react").JSX.Element;
+export type PlotLegendProps = HTMLAttributes<HTMLUListElement> & {
+    items: {
+        label: string;
+        tone?: "series" | "accent" | "highlight" | "reference";
+        dashed?: boolean;
+    }[];
+};
+export declare function PlotLegend({ items, className, ...props }: PlotLegendProps): import("react").JSX.Element;

package/dist/scientific/patterns.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../ui/primitives.js";
+export function DataPanel({ items, busy, className, ...props }) { return _jsx("dl", { ...props, "aria-busy": busy || undefined, className: cx("d26-data", className), children: items.map((item, index) => _jsxs("div", { children: [_jsx("dt", { children: item.label }), _jsx("dd", { children: item.value })] }, index)) }); }
+export function Metric({ label, value, unit, description, variant = "default", className, ...props }) { return _jsxs("div", { ...props, className: cx("d26-metric", `d26-metric--${variant}`, className), children: [_jsx("span", { children: label }), _jsxs("strong", { children: [value, unit && _jsxs("small", { children: [" ", unit] })] }), description && _jsx("p", { children: description })] }); }
+export function FigureContainer({ number, title, caption, captionPosition = "before", className, children, ...props }) {
+    const text = _jsxs("figcaption", { children: [number && _jsx("span", { className: "d26-figure-number", children: number }), _jsx("h3", { children: title }), caption && _jsx("p", { children: caption })] });
+    return _jsxs("figure", { ...props, className: cx("d26-figure", captionPosition === "after" && "d26-figure--caption-after", className), children: [captionPosition === "before" && text, children, captionPosition === "after" && text] });
+}
+export function PlotContainer({ framed = true, className, ...props }) { return _jsx("div", { ...props, role: props.role ?? "group", className: cx("d26-plot", framed && "d26-plot--framed", className) }); }
+export function PlotLegend({ items, className, ...props }) { return _jsx("ul", { ...props, className: cx("d26-legend", className), children: items.map(item => _jsxs("li", { children: [_jsx("i", { "aria-hidden": "true", className: cx(`d26-legend--${item.tone ?? "series"}`, item.dashed && "d26-legend--dashed") }), item.label] }, item.label)) }); }

package/dist/scientific.d.ts

@@ -0,0 +1,4 @@
+export { DataPanel, Metric, FigureContainer, PlotContainer, PlotLegend } from "./scientific/patterns.js";
+export type { DataPanelProps, MetricProps, FigureContainerProps, PlotContainerProps, PlotLegendProps } from "./scientific/patterns.js";
+export { ParameterControl } from "./scientific/parameter-control.js";
+export type { ParameterControlProps } from "./scientific/parameter-control.js";

package/dist/scientific.js

@@ -0,0 +1,2 @@
+export { DataPanel, Metric, FigureContainer, PlotContainer, PlotLegend } from "./scientific/patterns.js";
+export { ParameterControl } from "./scientific/parameter-control.js";