design26 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,185 @@
+@import "./tokens.css";
+
+/* Styles are opt-in and scoped. No global body, heading or control reset. */
+.d26-theme, [data-design26-theme="light"] { box-sizing: border-box; color: var(--color-text-primary); font-family: var(--font-body); font-weight: var(--font-weight-body); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; }
+:where(.d26-theme, [data-design26-theme="light"]) *, :where(.d26-theme, [data-design26-theme="light"]) *::before, :where(.d26-theme, [data-design26-theme="light"]) *::after { box-sizing: border-box; }
+:where(.d26-theme, [data-design26-theme="light"]) :is(button, a, input, select, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
+:where(.d26-theme, [data-design26-theme="light"]) ::selection { background: var(--color-selection); color: var(--color-text-primary); }
+.d26-frame { background: var(--color-background); min-height: 100svh; padding: 0 var(--space-page-gutter); }
+.d26-frame > * { max-width: calc(var(--size-content-max) - var(--space-page-gutter) * 2); margin-inline: auto; }
+.d26-panel { min-width: 0; box-shadow: var(--shadow-none); }
+.d26-panel--sheet { background: var(--color-surface); border-radius: var(--radius-sheet); }
+.d26-panel--padded { padding: var(--space-panel-block) var(--space-panel-inline); }
+.d26-panel--control { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; background: var(--color-surface-control); border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-panel); padding: 24px 26px 20px; }
+.d26-panel--toolbar { background: var(--color-surface-toolbar); border-top: var(--border-rule); padding: 21px 32px; }
+.d26-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--color-accent); font: var(--font-weight-heading) var(--font-size-label)/1.5 var(--font-mono); letter-spacing: var(--letter-spacing-eyebrow); }
+.d26-eyebrow--compact { font-size: var(--font-size-metadata); letter-spacing: 1.2px; gap: 8px; }
+.d26-status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: var(--radius-round); background: var(--color-accent); }
+.d26-heading { font-family: var(--font-body); color: var(--color-text-primary); font-weight: var(--font-weight-heading); }
+.d26-heading em { font-style: normal; color: var(--color-accent); }
+.d26-heading--display { font-size: var(--font-size-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); margin: 30px 0 26px; }
+.d26-heading--chapter { font-size: var(--font-size-chapter); line-height: var(--line-height-chapter); letter-spacing: var(--letter-spacing-display); margin: 27px 0 22px; }
+.d26-heading--inspector { font-size: var(--font-size-inspector); line-height: 1.12; letter-spacing: -1.2px; margin: 18px 0 16px; }
+.d26-heading--figure { font-size: var(--font-size-figure-title); letter-spacing: -.65px; margin: 0 0 10px; }
+.d26-button, .d26-icon-button { cursor: pointer; font-family: var(--font-body); border: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.d26-button { line-height: var(--line-height-base); display: inline-flex; align-items: center; justify-content: space-between; font-size: var(--font-size-control); font-weight: var(--font-weight-body); }
+.d26-button--primary { background: var(--color-accent); color: var(--color-text-on-accent); border-radius: var(--radius-button); padding: 17px 20px; gap: 32px; transition: background var(--motion-interaction), transform var(--motion-interaction); }
+.d26-button--primary:hover:not(:disabled) { background: var(--color-accent-hover); transform: translateY(var(--distance-hover)); }
+.d26-button--text { background: transparent; color: var(--color-accent); padding: 8px 0; gap: 16px; font-size: 11px; }
+.d26-button--text:hover:not(:disabled) { color: var(--color-text-primary); }
+.d26-button--playback { color: var(--color-accent); background: var(--color-surface-control); border: var(--border-width) solid var(--color-border-disclosure); padding: 9px 12px; border-radius: var(--radius-pill); font-size: 11px; gap: 9px; }
+.d26-button-icon, .d26-icon-button > span { display: inline-flex; align-items: center; justify-content: center; }
+.d26-button-icon svg { width: var(--size-icon); height: var(--size-icon); }
+.d26-button:disabled, .d26-icon-button:disabled { opacity: .6; cursor: default; }
+.d26-button[aria-busy="true"] { cursor: progress; }
+.d26-text-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-bottom: var(--border-width) solid var(--color-border-link); font-size: 11px; padding: 7px 0; }
+.d26-text-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
+.d26-icon-button { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--color-text-primary); background: transparent; padding: 0; width: var(--size-icon-control); height: var(--size-icon-control); border: var(--border-width) solid var(--color-border-interactive); border-radius: var(--radius-round); }
+.d26-icon-button:hover:not(:disabled) { color: var(--color-accent); }
+.d26-icon-button svg { width: 19px; height: 19px; }
+.d26-icon-button--step { width: var(--size-step-control); height: var(--size-step-control); }
+.d26-icon-button--step:hover:not(:disabled) { background: var(--color-accent-soft); border-color: var(--color-border-interactive-hover); }
+.d26-icon-button--plain { width: 25px; height: 26px; border: 0; border-radius: 0; }
+.d26-icon-button--plain svg { width: 14px; height: 14px; }
+.d26-navigation { display: flex; align-items: center; min-height: 105px; color: var(--color-text-on-accent); gap: 36px; }
+.d26-brand { font-size: 39px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
+.d26-brand a { color: inherit; text-decoration: none; }
+.d26-navigation-description { font-size: 12px; letter-spacing: .1px; color: var(--color-text-on-frame); border-left: var(--border-width) solid var(--color-border-on-frame); padding-left: 28px; }
+.d26-navigation-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 12px; }
+.d26-navigation-actions a { color: inherit; text-decoration: none; }
+.d26-navigation-actions a:hover { color: var(--color-text-on-frame); }
+.d26-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0 36px; border-bottom: var(--border-rule); }
+.d26-steps button { position: relative; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 24px; text-align: left; background: transparent; border: 0; color: var(--color-step-inactive); font: 12px/1.5 var(--font-body); cursor: pointer; transition: color var(--motion-interaction); }
+.d26-steps button + button::before { content: ""; position: absolute; left: 0; width: 1px; height: 22px; background: var(--color-border); }
+.d26-steps button::after { content: ""; position: absolute; bottom: -1px; left: 24px; right: 24px; height: var(--border-width-active); background: transparent; }
+.d26-steps button[aria-current="step"]::after { background: var(--color-accent); }
+.d26-steps button:hover:not(:disabled), .d26-steps button[aria-current="step"] { color: var(--color-text-primary); }
+.d26-step-number { font: 10px/1.5 var(--font-mono); color: var(--color-step-number); }
+.d26-steps button[aria-current="step"] .d26-step-number { color: var(--color-accent); }
+.d26-step-dot { margin-left: auto; width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--color-step-dot); }
+.d26-steps button[aria-current="step"] .d26-step-dot { background: var(--color-accent); box-shadow: var(--shadow-status); }
+.d26-tab-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); border-bottom: var(--border-width) solid var(--color-border-tabs); }
+.d26-tab-list button { display: flex; align-items: center; justify-content: center; gap: 13px; background: transparent; color: var(--color-tab-inactive); padding: 17px 8px; font: 13px/1.5 var(--font-body); border: 0; border-bottom: var(--border-width-active) solid transparent; margin-bottom: -1px; cursor: pointer; }
+.d26-tab-list button > span { font: 9px/1.5 var(--font-mono); color: var(--color-tab-number); }
+.d26-tab-list button[aria-selected="true"], .d26-tab-list button[aria-selected="true"] > span { color: var(--color-accent); border-bottom-color: var(--color-accent); }
+.d26-tab-list button:hover:not(:disabled) { color: var(--color-text-primary); }
+.d26-tab-panel { padding-top: 16px; }
+.d26-tab-panel[hidden] { display: none; }
+.d26-tab-list button:disabled, .d26-steps button:disabled { opacity: .5; cursor: default; }
+.d26-slider { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--size-track); background: var(--color-track); border: 0; border-radius: 2px; margin: 10px 0; padding: 0; cursor: pointer; accent-color: var(--color-accent); }
+.d26-slider::-webkit-slider-thumb { appearance: none; width: var(--size-thumb); height: var(--size-thumb); background: var(--color-accent); border: 3px solid var(--color-surface); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-accent); }
+.d26-slider::-moz-range-thumb { box-sizing: border-box; width: var(--size-thumb); height: var(--size-thumb); background: var(--color-accent); border: 3px solid var(--color-surface); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-accent); }
+.d26-slider--timeline { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--color-accent) var(--d26-progress, 0%), var(--color-track-timeline) var(--d26-progress, 0%)); }
+.d26-slider--timeline::-webkit-slider-thumb { width: 9px; height: 9px; border: 0; box-shadow: 0 0 0 3px var(--color-surface-toolbar); }
+.d26-slider--timeline::-moz-range-thumb { width: 9px; height: 9px; border: 0; box-shadow: 0 0 0 3px var(--color-surface-toolbar); }
+.d26-slider:disabled, .d26-select:disabled, .d26-checkbox input:disabled { cursor: default; opacity: .5; }
+.d26-field { display: flex; flex-direction: column; gap: 8px; }
+.d26-field > label { font-size: 9px; color: var(--color-text-field); }
+.d26-select { appearance: auto; width: 100%; background: var(--color-surface-input); border: var(--border-width) solid var(--color-border-input); border-radius: var(--radius-input); padding: 10px 12px; color: var(--color-text-primary); font: 11px/1.5 var(--font-body); cursor: pointer; }
+.d26-field-description { display: block; color: var(--color-text-secondary); font: 10px/1.8 var(--font-body); margin: 8px 0 0; }
+.d26-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: var(--color-text-secondary); cursor: pointer; }
+.d26-checkbox input { accent-color: var(--color-accent); cursor: pointer; width: 12px; height: 12px; margin: 0; }
+.d26-disclosure { border: var(--border-width) solid var(--color-border-disclosure); border-radius: var(--radius-input); background: var(--color-surface-disclosure); }
+.d26-disclosure summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 14px; color: var(--color-accent); font-size: 11px; list-style: none; cursor: pointer; }
+.d26-disclosure summary::-webkit-details-marker { display: none; }
+.d26-disclosure summary > span { font-size: 17px; }
+.d26-disclosure[open] summary > span { transform: rotate(180deg); }
+.d26-disclosure > div { padding: 15px; border-top: var(--border-width) solid var(--color-border-disclosure); }
+.d26-dialog { padding: 0; border: 0; border-radius: var(--radius-dialog); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-body); width: min(var(--size-dialog-max), calc(100% - 32px)); max-height: calc(100svh - 48px); margin: auto; box-shadow: var(--shadow-dialog); }
+.d26-dialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(var(--backdrop-blur)); }
+.d26-dialog-content { padding: 34px 38px; }
+.d26-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.d26-dialog-header h2 { font-size: 43px; line-height: 1.05; letter-spacing: -2px; font-weight: var(--font-weight-heading); margin: 0 0 20px; }
+.d26-dialog-header .d26-icon-button { font-size: 27px; }
+.d26-note { color: var(--color-text-secondary); background: var(--color-accent-soft); padding: 9px 11px; border-radius: var(--radius-note); font: 10px/1.8 var(--font-body); margin: 16px 0 0; }
+.d26-note--positive { color: var(--color-positive); background: var(--color-positive-surface); }
+.d26-note--warning { color: var(--color-warning); background: var(--color-warning-surface); }
+.d26-note--error { color: var(--color-error); background: var(--color-warning-surface); }
+.d26-parameter { min-width: 0; }
+.d26-parameter > label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-control); color: var(--color-text-control); font-size: 12px; margin-bottom: 17px; }
+.d26-parameter output { color: var(--color-accent); font: 17px/1.5 var(--font-mono); white-space: nowrap; }
+.d26-parameter output > span { color: var(--color-text-parameter-unit); font-size: 10px; }
+.d26-parameter-range { display: flex; justify-content: space-between; color: var(--color-text-range); font: 8px/1.5 var(--font-mono); margin-top: 11px; }
+.d26-data { margin: 0; }
+.d26-data > div { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; border-bottom: var(--border-width) solid var(--color-border-data); padding: var(--space-data-row) 0; font-size: 10px; }
+.d26-data dt { color: var(--color-text-data-label); }
+.d26-data dd { margin: 0; font: 10px/1.5 var(--font-mono); text-align: right; color: var(--color-text-data); overflow-wrap: anywhere; }
+.d26-data[aria-busy="true"] { opacity: .5; transition: opacity var(--motion-busy) var(--ease-interaction); }
+.d26-metric { min-width: 0; }
+.d26-metric > span { font-size: 10px; color: var(--color-text-label); display: block; margin-bottom: 12px; }
+.d26-metric strong { color: var(--color-accent); font-size: var(--font-size-metric); line-height: 1; letter-spacing: -1.2px; font-weight: var(--font-weight-body); }
+.d26-metric small { font-size: 13px; color: var(--color-text-metric-unit); letter-spacing: 0; }
+.d26-metric p { color: var(--color-text-secondary); font: 12px/1.8 var(--font-body); margin-bottom: 0; }
+.d26-metric--result strong { font-size: var(--font-size-result); letter-spacing: -1.5px; }
+.d26-metric--result small { font-size: 15px; }
+.d26-figure { min-width: 0; margin: 0; }
+.d26-figure figcaption { padding-bottom: var(--space-figure-caption); }
+.d26-figure--caption-after figcaption { padding: var(--space-figure-caption) 0 0; }
+.d26-figure-number { display: block; font: 7px/1.5 var(--font-mono); letter-spacing: .7px; color: var(--color-text-figure-number); margin-bottom: 12px; }
+.d26-figure h3 { font-size: var(--font-size-figure-title); font-weight: var(--font-weight-heading); letter-spacing: -.65px; margin: 0 0 10px; }
+.d26-figure figcaption p { color: var(--color-text-caption); font: 11px/1.8 var(--font-body); margin: 0; max-width: 340px; }
+.d26-plot { min-width: 0; width: 100%; }
+.d26-plot--framed { border: var(--border-width) solid var(--color-plot-border); border-radius: var(--radius-panel); background: var(--color-surface-elevated); overflow: hidden; }
+.d26-plot > :is(svg, canvas, img) { display: block; width: 100%; height: auto; }
+.d26-plot-grid { stroke: var(--color-plot-grid); stroke-width: 1; }
+.d26-plot-axis { stroke: var(--color-plot-axis); stroke-width: 1; }
+.d26-plot-tick { fill: var(--color-plot-tick); font: 11px/1.5 var(--font-mono); }
+.d26-plot-label { fill: var(--color-plot-label); font: 12px/1.5 var(--font-body); }
+.d26-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0 0 15px; margin: 0; font-size: 8px; color: var(--color-text-caption); }
+.d26-legend li { display: inline-flex; align-items: center; gap: 5px; }
+.d26-legend i { width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--color-plot-series); }
+.d26-legend .d26-legend--accent { background: var(--color-accent); }
+.d26-legend .d26-legend--highlight { background: var(--color-highlight); }
+.d26-legend .d26-legend--reference { background: var(--color-plot-reference); }
+.d26-legend .d26-legend--dashed { width: 13px; height: 0; border-radius: 0; background: transparent; border-top: 2px dashed var(--color-highlight); }
+.d26-reveal { animation: d26-enter var(--motion-enter) var(--ease-enter) both; }
+.d26-pulse { animation: d26-pulse var(--motion-pulse) ease-in-out infinite; }
+@keyframes d26-enter { from { opacity: 0; transform: translateY(var(--distance-enter)); } to { opacity: 1; transform: translateY(0); } }
+@keyframes d26-pulse { 50% { opacity: .35; } }
+@media (min-width: 1500px) { .d26-navigation { min-height: 118px; } }
+@media (max-width: 1100px) {
+  .d26-navigation { min-height: 86px; }
+  .d26-button--primary { padding: 15px 16px; gap: 20px; }
+  .d26-steps { padding: 0 18px; }
+  .d26-steps button { padding: 12px 15px; gap: 10px; font-size: 11px; }
+  .d26-steps button::after { left: 15px; right: 15px; }
+  .d26-tab-list button { font-size: 11px; gap: 8px; }
+}
+@media (max-width: 760px) {
+  .d26-navigation { min-height: 79px; gap: 15px; padding: 0 7px; }
+  .d26-brand { font-size: 32px; }
+  .d26-navigation-description { display: none; }
+  .d26-navigation-actions { font-size: 10px; gap: 13px; }
+  .d26-heading--display { margin: 23px 0 21px; }
+  .d26-heading--chapter { margin: 22px 0 18px; }
+  .d26-eyebrow { font-size: 8px; letter-spacing: 1.5px; }
+  .d26-eyebrow--compact { font-size: 7px; letter-spacing: .8px; }
+  .d26-button--primary { font-size: 11px; padding: 15px 17px; gap: 22px; }
+  .d26-panel--control { padding: 20px; gap: 25px; }
+  .d26-metric > span { font-size: 9px; line-height: 1.6; }
+  .d26-panel--toolbar { padding: 17px 20px; }
+  .d26-steps { padding: 0 12px; }
+  .d26-steps button { min-height: 62px; padding: 11px 10px; gap: 4px; align-items: flex-start; flex-direction: column; font-size: 9px; line-height: 1.4; }
+  .d26-step-number { font-size: 8px; }
+  .d26-steps button::after { left: 10px; right: 10px; }
+  .d26-steps button + button::before { top: 21px; }
+  .d26-step-dot { display: none; }
+  .d26-tab-list button { flex-direction: column; justify-content: flex-start; padding: 13px 5px; gap: 8px; font-size: 10px; line-height: 1.5; }
+  .d26-tab-list button > span { font-size: 8px; }
+  .d26-select { min-height: 40px; }
+  .d26-dialog-content { padding: 26px; }
+  .d26-dialog-header h2 { font-size: 38px; }
+  .d26-figure-number { font-size: 8px; }
+  .d26-figure figcaption p { font-size: 12px; max-width: none; }
+  .d26-plot-tick { font-size: 18px; }
+  .d26-plot-label { font-size: 16px; }
+  .d26-legend { font-size: 9px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.d26-theme, [data-design26-theme="light"]) *, :where(.d26-theme, [data-design26-theme="light"]) *::before, :where(.d26-theme, [data-design26-theme="light"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
+}
+/* Optional backdrop extracted from the reference's concurrent grid refinement. */
+.d26-technical-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; mask-image: radial-gradient(ellipse 38% 62% at 74% 46%, #000 8%, #000c 30%, #0003 72%, #0001 100%); }
+.d26-technical-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--color-grid) .8px, transparent .8px), linear-gradient(90deg, var(--color-grid) .8px, transparent .8px); background-size: var(--size-grid-spacing) var(--size-grid-spacing); }
+.d26-technical-grid:has(canvas[data-ready="true"])::before { display: none; }
+.d26-technical-grid canvas { display: block; width: 100%; height: 100%; }

package/dist/tokens.css

@@ -0,0 +1,165 @@
+/* One reference theme. Override semantic roles on the same theme wrapper. */
+.d26-theme, [data-design26-theme="light"] {
+  --d26-blue: #075afa;
+  --d26-navy: #072754;
+  --d26-paper: #f7f9fc;
+  --color-background: var(--d26-blue);
+  --color-brand: var(--d26-blue);
+  --color-surface: var(--d26-paper);
+  --color-surface-elevated: #fbfcfe;
+  --color-surface-toolbar: #f3f6fb;
+  --color-surface-control: #edf3fc;
+  --color-surface-input: #eff4fc;
+  --color-surface-disclosure: #f0f5fd;
+  --color-text-primary: var(--d26-navy);
+  --color-text-secondary: #61718a;
+  --color-text-description: #5c6d84;
+  --color-text-subtitle: #355274;
+  --color-text-caption: #7b90ac;
+  --color-text-label: #7d91ac;
+  --color-text-field: #7d90a8;
+  --color-text-metric-unit: #8397b3;
+  --color-text-parameter-unit: #91a3bb;
+  --color-text-range: #96a7bd;
+  --color-text-figure-number: #8da0b9;
+  --color-text-data-label: #7488a2;
+  --color-step-inactive: #7d8ca1;
+  --color-step-number: #91a0b4;
+  --color-step-dot: #d3ddeb;
+  --color-border-tabs: #d8e2ee;
+  --color-text-data: #284d7b;
+  --color-text-control: #35577f;
+  --color-text-on-accent: #fff;
+  --color-text-on-frame: #deebff;
+  --color-text-footer: #c7dcff;
+  --color-text-disabled: #a7b5c8;
+  --color-accent: var(--d26-blue);
+  --color-accent-hover: #004ad7;
+  --color-accent-soft: #eaf1ff;
+  --color-highlight: #ed9019;
+  --color-focus: var(--color-highlight);
+  --color-border: #dee5ee;
+  --color-border-data: #e0e7f1;
+  --color-border-control: #dce6f5;
+  --color-border-input: #d8e3f1;
+  --color-border-link: #b8c8dd;
+  --color-border-interactive-hover: #a4badd;
+  --color-border-interactive: #cfdae9;
+  --color-border-disclosure: #d7e2f1;
+  --color-border-on-frame: #ffffff45;
+  --color-tab-inactive: #7a8da6;
+  --color-tab-number: #9aacbf;
+  --color-track: #ccdaf0;
+  --color-track-timeline: #d6e0ed;
+  --color-positive: #306b72;
+  --color-positive-surface: #edf5f4;
+  --color-warning: #9a6a20;
+  --color-warning-surface: #fbf0de;
+  --color-error: #9d6b24;
+  --color-selection: #bdd6ff;
+  --color-overlay: #021b4b80;
+  --color-status-halo: #e7efff;
+  --color-grid: rgba(150, 174, 207, .32);
+  --size-grid-spacing: 38px;
+  --color-plot-grid: #e0e8f2;
+  --color-plot-axis: #9bb0cb;
+  --color-plot-tick: #8a9db5;
+  --color-plot-label: #6681a5;
+  --color-plot-border: #dce5f0;
+  --color-plot-series: #7eaafb;
+  --color-plot-point-muted: #768ca8;
+  --color-plot-reference: #c5b568;
+  --color-plot-heat-low: #eff4fc;
+  --color-plot-heat-mid: #9cc1ff;
+  --font-body: Arial, Helvetica, sans-serif;
+  --font-mono: var(--font-geist-mono, "Geist Mono"), monospace;
+  --font-weight-body: 400;
+  --font-weight-heading: 500;
+  --font-weight-strong: 600;
+  --font-size-display: clamp(48px, 5.1vw, 82px);
+  --font-size-chapter: clamp(56px, 5.6vw, 88px);
+  --font-size-inspector: clamp(25px, 2.3vw, 36px);
+  --font-size-subtitle: clamp(17px, 1.5vw, 22px);
+  --font-size-hero-copy: clamp(13px, 1.12vw, 17px);
+  --font-size-body: 13px;
+  --font-size-copy-compact: 12px;
+  --font-size-control: 12px;
+  --font-size-label: 10px;
+  --font-size-metadata: 8px;
+  --font-size-figure-title: 20px;
+  --font-size-metric: 34px;
+  --font-size-result: 42px;
+  --line-height-base: 1.5;
+  --line-height-display: .995;
+  --line-height-chapter: 1.02;
+  --line-height-copy: 1.9;
+  --line-height-compact: 1.85;
+  --letter-spacing-display: -.065em;
+  --letter-spacing-eyebrow: 1.8px;
+  --space-page-gutter: 32px;
+  --space-panel-block: 40px;
+  --space-panel-inline: clamp(35px, 5vw, 80px);
+  --space-section: 36px;
+  --space-grid: 30px;
+  --space-stack: 22px;
+  --space-control: 14px;
+  --space-data-row: 10px;
+  --space-figure-caption: 17px;
+  --size-content-max: 1920px;
+  --size-media-max: 465px;
+  --size-dialog-max: 540px;
+  --size-icon: 18px;
+  --size-icon-control: 34px;
+  --size-step-control: 44px;
+  --size-track: 4px;
+  --size-thumb: 15px;
+  --radius-sheet: 20px;
+  --radius-dialog: 16px;
+  --radius-panel: 8px;
+  --radius-media: 10px;
+  --radius-button: 6px;
+  --radius-input: 5px;
+  --radius-note: 4px;
+  --radius-tag: 3px;
+  --radius-pill: 24px;
+  --radius-round: 50%;
+  --border-width: 1px;
+  --border-width-active: 2px;
+  --border-rule: var(--border-width) solid var(--color-border);
+  --shadow-dialog: 0 30px 100px #001e6a45;
+  --shadow-none: none;
+  --shadow-status: 0 0 0 4px var(--color-status-halo);
+  --focus-width: 3px;
+  --focus-offset: 5px;
+  --motion-interaction: 200ms;
+  --motion-busy: 180ms;
+  --motion-enter: 420ms;
+  --motion-surface: 500ms;
+  --motion-pulse: 1500ms;
+  --ease-interaction: ease;
+  --ease-enter: cubic-bezier(.25, .46, .45, .94);
+  --distance-hover: -2px;
+  --distance-enter: 12px;
+  --backdrop-blur: 7px;
+  /* Documentation mirrors. Native media-query conditions below use literals. */
+  --breakpoint-mobile: 760px;
+  --breakpoint-tablet: 1100px;
+  --breakpoint-wide: 1500px;
+}
+@media (min-width: 1500px) {
+  .d26-theme, [data-design26-theme="light"] { --space-page-gutter: 44px; --size-media-max: 525px; }
+}
+@media (max-width: 1100px) {
+  .d26-theme, [data-design26-theme="light"] { --space-page-gutter: 24px; --space-panel-block: 35px; --space-panel-inline: 35px; --font-size-chapter: 56px; }
+}
+@media (max-width: 760px) {
+  .d26-theme, [data-design26-theme="light"] {
+    --space-page-gutter: 14px; --space-panel-block: 32px; --space-panel-inline: 25px;
+    --radius-sheet: 14px; --font-size-display: clamp(32px, 8.9vw, 60px);
+    --line-height-base: 1.5;
+  --line-height-display: .99; --font-size-chapter: 49px; --font-size-inspector: 28px;
+    --font-size-subtitle: 17px; --font-size-hero-copy: 13px; --font-size-metric: 29px;
+    --font-size-figure-title: 22px; --space-section: 27px; --space-grid: 26px;
+    --size-media-max: 465px;
+  }
+}

package/dist/ui/controls.d.ts

@@ -0,0 +1,15 @@
+import { type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    variant?: "parameter" | "timeline";
+    "aria-label"?: string;
+};
+export declare function Slider({ variant, min, max, value, defaultValue, style, className, ...props }: SliderProps): import("react").JSX.Element;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    label: ReactNode;
+    description?: string;
+};
+export declare function Select({ label, description, id, className, children, ...props }: SelectProps): import("react").JSX.Element;
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label: ReactNode;
+};
+export declare function Checkbox({ label, className, id, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/ui/controls.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "./primitives.js";
+export function Slider({ variant = "parameter", min = 0, max = 100, value, defaultValue, style, className, ...props }) {
+    const lower = Number(min), upper = Number(max);
+    const numeric = Number(value ?? defaultValue ?? (lower + upper) / 2);
+    const progress = upper > lower ? Math.max(0, Math.min(100, (numeric - lower) / (upper - lower) * 100)) : 0;
+    return _jsx("input", { ...props, type: "range", min: min, max: max, value: value, defaultValue: defaultValue, style: { "--d26-progress": `${progress}%`, ...style }, className: cx("d26-slider", `d26-slider--${variant}`, className), onInput: event => { const input = event.currentTarget; input.style.setProperty("--d26-progress", `${(Number(input.value) - lower) / (upper - lower || 1) * 100}%`); props.onInput?.(event); } });
+}
+export function Select({ label, description, id, className, children, ...props }) {
+    const generated = useId(), inputId = id ?? generated;
+    const describedBy = [props["aria-describedby"], description ? `${inputId}-description` : undefined].filter(Boolean).join(" ") || undefined;
+    return _jsxs("div", { className: "d26-field", children: [_jsx("label", { htmlFor: inputId, children: label }), _jsx("select", { ...props, id: inputId, "aria-describedby": describedBy, className: cx("d26-select", className), children: children }), description && _jsx("span", { id: `${inputId}-description`, className: "d26-field-description", children: description })] });
+}
+export function Checkbox({ label, className, id, ...props }) { const generated = useId(); return _jsxs("label", { className: cx("d26-checkbox", className), htmlFor: id ?? generated, children: [_jsx("input", { ...props, id: id ?? generated, type: "checkbox" }), _jsx("span", { children: label })] }); }

package/dist/ui/dialog.d.ts

@@ -0,0 +1,8 @@
+import { type DialogHTMLAttributes, type ReactNode } from "react";
+export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title" | "onClose"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    closeLabel?: string;
+};
+export declare function Dialog({ open, onOpenChange, title, closeLabel, className, children, ...props }: DialogProps): import("react").JSX.Element;

package/dist/ui/dialog.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx, IconButton } from "./primitives.js";
+export function Dialog({ open, onOpenChange, title, closeLabel = "Close dialog", className, children, ...props }) {
+    const ref = useRef(null), titleId = useId();
+    useEffect(() => { const dialog = ref.current; if (!dialog)
+        return; if (open && !dialog.open)
+        dialog.showModal(); if (!open && dialog.open)
+        dialog.close(); }, [open]);
+    return _jsx("dialog", { ...props, ref: ref, "aria-labelledby": titleId, className: cx("d26-dialog", className), onClose: () => onOpenChange(false), onCancel: event => { props.onCancel?.(event); if (!event.defaultPrevented)
+            onOpenChange(false); }, children: _jsxs("div", { className: "d26-dialog-content", children: [_jsxs("div", { className: "d26-dialog-header", children: [_jsx("h2", { id: titleId, children: title }), _jsx(IconButton, { variant: "plain", "aria-label": closeLabel, onClick: () => onOpenChange(false), children: "\u00D7" })] }), children] }) });
+}

package/dist/ui/primitives.d.ts

@@ -0,0 +1,59 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+export declare const cx: (...values: Array<string | undefined | false>) => string;
+export type PageFrameProps = HTMLAttributes<HTMLDivElement>;
+export declare function PageFrame({ className, ...props }: PageFrameProps): import("react").JSX.Element;
+export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: "sheet" | "control" | "toolbar";
+    padding?: "none" | "content";
+};
+export declare function Panel({ variant, padding, className, ...props }: PanelProps): import("react").JSX.Element;
+export type EyebrowProps = HTMLAttributes<HTMLDivElement> & {
+    dot?: boolean;
+    compact?: boolean;
+};
+export declare function Eyebrow({ dot, compact, className, children, ...props }: EyebrowProps): import("react").JSX.Element;
+export type SectionHeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h1" | "h2" | "h3" | "h4";
+    size?: "display" | "chapter" | "inspector" | "figure";
+};
+export declare function SectionHeading({ as: Tag, size, className, ...props }: SectionHeadingProps): import("react").JSX.Element;
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "text" | "playback";
+    endIcon?: ReactNode;
+    busy?: boolean;
+};
+export declare function Button({ variant, type, busy, endIcon, className, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
+export type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare function TextLink({ className, ...props }: TextLinkProps): import("react").JSX.Element;
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+    "aria-label": string;
+    variant?: "circle" | "step" | "plain";
+};
+export declare function IconButton({ variant, type, className, children, ...props }: IconButtonProps): import("react").JSX.Element;
+export type NavigationProps = HTMLAttributes<HTMLElement> & {
+    brand: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+};
+export declare function Navigation({ brand, description, actions, className, ...props }: NavigationProps): import("react").JSX.Element;
+export type StepNavigationProps = Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
+    items: {
+        id: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    "aria-label": string;
+};
+export declare function StepNavigation({ items, value, onValueChange, className, ...props }: StepNavigationProps): import("react").JSX.Element;
+export type DisclosureProps = Omit<HTMLAttributes<HTMLDetailsElement>, "title"> & {
+    title: ReactNode;
+    open?: boolean;
+    name?: string;
+};
+export declare function Disclosure({ title, className, children, ...props }: DisclosureProps): import("react").JSX.Element;
+export type StatusNoteProps = HTMLAttributes<HTMLParagraphElement> & {
+    tone?: "info" | "positive" | "warning" | "error";
+};
+export declare function StatusNote({ tone, className, ...props }: StatusNoteProps): import("react").JSX.Element;

package/dist/ui/primitives.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const cx = (...values) => values.filter(Boolean).join(" ");
+export function PageFrame({ className, ...props }) { return _jsx("div", { ...props, className: cx("d26-theme d26-frame", className) }); }
+export function Panel({ variant = "sheet", padding = "content", className, ...props }) { return _jsx("div", { ...props, className: cx("d26-panel", `d26-panel--${variant}`, padding === "content" && "d26-panel--padded", className) }); }
+export function Eyebrow({ dot = false, compact = false, className, children, ...props }) { return _jsxs("div", { ...props, className: cx("d26-eyebrow", compact && "d26-eyebrow--compact", className), children: [dot && _jsx("span", { className: "d26-status-dot", "aria-hidden": "true" }), children] }); }
+export function SectionHeading({ as: Tag = "h2", size = "chapter", className, ...props }) { return _jsx(Tag, { ...props, className: cx("d26-heading", `d26-heading--${size}`, className) }); }
+export function Button({ variant = "primary", type = "button", busy, endIcon, className, children, disabled, ...props }) { return _jsxs("button", { ...props, type: type, disabled: disabled || busy, "aria-busy": busy || undefined, className: cx("d26-button", `d26-button--${variant}`, className), children: [children, endIcon && _jsx("span", { className: "d26-button-icon", "aria-hidden": "true", children: endIcon })] }); }
+export function TextLink({ className, ...props }) { return _jsx("a", { ...props, className: cx("d26-text-link", className) }); }
+export function IconButton({ variant = "circle", type = "button", className, children, ...props }) { return _jsx("button", { ...props, type: type, className: cx("d26-icon-button", `d26-icon-button--${variant}`, className), children: _jsx("span", { "aria-hidden": "true", children: children }) }); }
+export function Navigation({ brand, description, actions, className, ...props }) { return _jsxs("header", { ...props, className: cx("d26-navigation", className), children: [_jsx("div", { className: "d26-brand", children: brand }), description && _jsx("div", { className: "d26-navigation-description", children: description }), actions && _jsx("nav", { "aria-label": "Main", className: "d26-navigation-actions", children: actions })] }); }
+export function StepNavigation({ items, value, onValueChange, className, ...props }) { return _jsx("nav", { ...props, className: cx("d26-steps", className), children: items.map((item, i) => _jsxs("button", { type: "button", disabled: item.disabled, "aria-current": value === item.id ? "step" : undefined, onClick: () => onValueChange(item.id), children: [_jsx("span", { className: "d26-step-number", children: String(i + 1).padStart(2, "0") }), _jsx("span", { children: item.label }), _jsx("span", { className: "d26-step-dot", "aria-hidden": "true" })] }, item.id)) }); }
+export function Disclosure({ title, className, children, ...props }) { return _jsxs("details", { ...props, className: cx("d26-disclosure", className), children: [_jsxs("summary", { children: [title, _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), _jsx("div", { children: children })] }); }
+export function StatusNote({ tone = "info", className, ...props }) { return _jsx("p", { ...props, className: cx("d26-note", `d26-note--${tone}`, className) }); }

package/dist/ui/tabs.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type TabItem = {
+    value: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    "aria-label": string;
+};
+export declare function Tabs({ items, value, defaultValue, onValueChange, className, "aria-label": label, ...props }: TabsProps): import("react").JSX.Element;

package/dist/ui/tabs.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cx } from "./primitives.js";
+export function Tabs({ items, value, defaultValue, onValueChange, className, "aria-label": label, ...props }) {
+    const [internal, setInternal] = useState(defaultValue ?? items.find(item => !item.disabled)?.value);
+    const active = value ?? internal;
+    const selected = items.findIndex(item => item.value === active && !item.disabled);
+    const current = selected >= 0 ? selected : items.findIndex(item => !item.disabled);
+    const uid = useId(), refs = useRef([]);
+    function choose(index) { const item = items[index]; if (!item || item.disabled)
+        return; setInternal(item.value); onValueChange?.(item.value); }
+    return _jsxs("div", { ...props, className: cx("d26-tabs", className), children: [_jsx("div", { role: "tablist", "aria-label": label, className: "d26-tab-list", children: items.map((item, i) => _jsxs("button", { type: "button", ref: element => { refs.current[i] = element; }, role: "tab", disabled: item.disabled, tabIndex: i === current ? 0 : -1, "aria-selected": i === current, "aria-controls": `${uid}-panel-${i}`, id: `${uid}-tab-${i}`, onClick: () => choose(i), onKeyDown: event => {
+                        const enabled = items.map((entry, index) => entry.disabled ? -1 : index).filter(index => index >= 0);
+                        const position = enabled.indexOf(i);
+                        let next;
+                        if (event.key === "ArrowRight")
+                            next = enabled[(position + 1) % enabled.length];
+                        if (event.key === "ArrowLeft")
+                            next = enabled[(position - 1 + enabled.length) % enabled.length];
+                        if (event.key === "Home")
+                            next = enabled[0];
+                        if (event.key === "End")
+                            next = enabled[enabled.length - 1];
+                        if (next === undefined)
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        choose(next);
+                        refs.current[next]?.focus();
+                    }, children: [_jsx("span", { children: String(i + 1).padStart(2, "0") }), item.label] }, item.value)) }), items.map((item, i) => _jsx("div", { role: "tabpanel", hidden: i !== current, tabIndex: 0, id: `${uid}-panel-${i}`, "aria-labelledby": `${uid}-tab-${i}`, className: "d26-tab-panel", children: item.content }, item.value))] });
+}

package/dist/ui/technical-grid.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+export type TechnicalGridProps = HTMLAttributes<HTMLDivElement> & {
+    active?: boolean;
+    interactive?: boolean;
+};
+/** Decorative, self-contained grid. Place inside a positioned figure/panel. */
+export declare function TechnicalGrid({ active, interactive, className, ...props }: TechnicalGridProps): import("react").JSX.Element;

package/dist/ui/technical-grid.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "./primitives.js";
+/** Decorative, self-contained grid. Place inside a positioned figure/panel. */
+export function TechnicalGrid({ active = true, interactive = true, className, ...props }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const canvas = ref.current, host = canvas?.parentElement?.parentElement;
+        const context = canvas?.getContext("2d");
+        if (!canvas || !host || !context)
+            return;
+        const motion = matchMedia("(prefers-reduced-motion: reduce)"), fine = matchMedia("(any-hover: hover) and (any-pointer: fine)");
+        const pointer = { x: 0, y: 0, targetX: 0, targetY: 0, strength: 0, targetStrength: 0 };
+        let width = 0, height = 0, frame = 0, last = 0, drift = 0, visible = true;
+        const spacing = Number.parseFloat(getComputedStyle(canvas).getPropertyValue("--size-grid-spacing")) || 38;
+        const stroke = getComputedStyle(canvas).getPropertyValue("--color-grid").trim() || "rgba(150,174,207,.32)";
+        function draw() {
+            if (!context)
+                return;
+            context.clearRect(0, 0, width, height);
+            context.strokeStyle = stroke;
+            context.lineWidth = .8;
+            context.beginPath();
+            function point(x, y, first) {
+                const dx = x - pointer.x, dy = y - pointer.y;
+                const force = Math.exp(-(dx * dx + dy * dy) / (2 * 110 * 110)) * .3 * pointer.strength;
+                if (first)
+                    context.moveTo(x + dx * force, y + dy * force);
+                else
+                    context.lineTo(x + dx * force, y + dy * force);
+            }
+            for (let x = drift * 2 % spacing - spacing; x <= width + spacing; x += spacing)
+                for (let y = -spacing; y <= height + spacing; y += 12)
+                    point(x, y, y === -spacing);
+            for (let y = drift * 1.2 % spacing - spacing; y <= height + spacing; y += spacing)
+                for (let x = -spacing; x <= width + spacing; x += 12)
+                    point(x, y, x === -spacing);
+            context.stroke();
+        }
+        function tick(time) {
+            frame = requestAnimationFrame(tick);
+            if (time - last < 1000 / 30)
+                return;
+            const delta = last ? Math.min((time - last) / 1000, .1) : 0;
+            last = time;
+            drift += delta;
+            const easing = 1 - Math.exp(-delta * 9);
+            pointer.x += (pointer.targetX - pointer.x) * easing;
+            pointer.y += (pointer.targetY - pointer.y) * easing;
+            pointer.strength += (pointer.targetStrength - pointer.strength) * easing;
+            draw();
+        }
+        function sync() { cancelAnimationFrame(frame); last = 0; pointer.targetStrength = 0; pointer.strength = 0; draw(); if (active && !motion.matches && !document.hidden && visible)
+            frame = requestAnimationFrame(tick); }
+        function resize() { if (!canvas || !context)
+            return; const rect = canvas.getBoundingClientRect(), scale = Math.min(devicePixelRatio || 1, 2); width = rect.width; height = rect.height; canvas.width = Math.round(width * scale); canvas.height = Math.round(height * scale); context.setTransform(scale, 0, 0, scale, 0, 0); draw(); canvas.dataset.ready = "true"; }
+        function move(event) { if (!canvas || !active || !interactive || motion.matches || !fine.matches || event.pointerType === "touch")
+            return; const rect = canvas.getBoundingClientRect(); pointer.targetX = event.clientX - rect.left; pointer.targetY = event.clientY - rect.top; if (pointer.targetStrength === 0 && pointer.strength < .01) {
+            pointer.x = pointer.targetX;
+            pointer.y = pointer.targetY;
+        } pointer.targetStrength = 1; }
+        function leave() { pointer.targetStrength = 0; }
+        const observer = new ResizeObserver(resize), visibility = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; sync(); });
+        observer.observe(canvas);
+        visibility.observe(host);
+        host.addEventListener("pointermove", move, { passive: true });
+        host.addEventListener("pointerleave", leave);
+        host.addEventListener("pointercancel", leave);
+        window.addEventListener("blur", leave);
+        document.addEventListener("visibilitychange", sync);
+        motion.addEventListener("change", sync);
+        fine.addEventListener("change", leave);
+        resize();
+        sync();
+        return () => { cancelAnimationFrame(frame); observer.disconnect(); visibility.disconnect(); host.removeEventListener("pointermove", move); host.removeEventListener("pointerleave", leave); host.removeEventListener("pointercancel", leave); window.removeEventListener("blur", leave); document.removeEventListener("visibilitychange", sync); motion.removeEventListener("change", sync); fine.removeEventListener("change", leave); };
+    }, [active, interactive]);
+    return _jsx("div", { ...props, className: cx("d26-technical-grid", className), "aria-hidden": "true", children: _jsx("canvas", { ref: ref }) });
+}