eidotter 0.37.2 → 0.37.4

package/dist/components/RetroEffects/components/RetroEffects.d.ts

@@ -28,15 +28,38 @@ export interface RetroEffectsProps {
      * it, and a warm phosphor glow settles. Skipped entirely under
      * prefers-reduced-motion. Opt-in; intended as the portfolio-wide launch
      * pattern (DMNC-1047).
+     *
+     * The sequence opens with a full-viewport opaque blackout that is part of the
+     * server-rendered HTML, so the page is never visible before the turn-on — the
+     * animation is the reveal, with no flash of content before boot (DMNC-1184).
+     * The open is pure CSS, so it works before hydration and with JS disabled
+     * (the cover self-resolves; nothing stays hidden).
+     *
+     * Assumes the default `powered` (on). Combining `boot` with `powered={false}`
+     * is contradictory — the power-off transform collapses the whole overlay,
+     * including the boot cover — so the no-flash guarantee does not apply there.
      */
     boot?: boolean;
     /**
      * Gate `boot` to once per browser tab/session (via sessionStorage). The boot
-     * sequence plays on the first load of a tab and is suppressed on every
-     * subsequent mount within the same tab — both SPA route changes and MPA
-     * full-reload navigation. A new tab/visit replays it; a hard refresh does not.
-     * No-op unless `boot` is also set. Falls back to playing if storage is
-     * unavailable (e.g. private mode).
+     * sequence plays on the first load of a tab; on later mounts within the same
+     * tab the session flag suppresses it. A new tab/visit replays it. No-op unless
+     * `boot` is also set. Falls back to playing if storage is unavailable (e.g.
+     * private mode).
+     *
+     * **SSR caveat (DMNC-1184):** because the no-flash cover ships in the server
+     * HTML and the server can't read `sessionStorage`, suppression on a returning
+     * visitor is decided post-hydration. The practical effect by navigation type:
+     * - **SPA route change** (overlay lives in a persistent layout, no remount):
+     *   never shows the cover — fully suppressed, as before.
+     * - **Full reload / hard refresh** (a returning tab re-mounts the overlay):
+     *   the SSR cover paints, then JS tears it down on hydration. On a fast host
+     *   that's a brief blackout (the panels' 140ms open delay means the turn-on
+     *   usually isn't reached before teardown); only a slow hydration lets the
+     *   turn-on visibly replay. It never flashes bare content.
+     * This is the deliberate trade for a flash-free first paint; eliminating the
+     * brief returning-visitor blackout entirely needs server-visible session state
+     * (a cookie or a pre-paint inline script), which is consumer-side.
      *
      * Like `boot`, this is evaluated once on mount; changing it afterwards has no
      * effect (remount the component — e.g. via `key` — to re-evaluate).

package/dist/components/RetroEffects/components/RetroEffects.js

@@ -42,11 +42,18 @@ const markBootedThisSession = (key) => {
 export const RetroEffects = ({ scanlines = true, glow = true, flicker = true, bloom = false, powered = true, boot = false, bootOnce = false, bootStorageKey = DEFAULT_BOOT_STORAGE_KEY, intensity = 1, className, onPowerStateChange, onPowerOn, onPowerOff, onBootComplete, }) => {
     const prevPoweredRef = useRef(powered);
     const [powerState, setPowerState] = useState(powered ? 'on' : 'off');
-    // Non-gated boot keeps its on-mount behavior; the gated (bootOnce) path starts
-    // un-booted and is decided post-mount so SSR/first paint never render a stale
-    // overlay (no hydration mismatch on reload when the flag is already set).
-    // (Non-gated boot is intentionally NOT SSR-gated — it plays on every mount.)
-    const [booting, setBooting] = useState(boot && !bootOnce);
+    // The opaque boot cover renders on first paint for BOTH the gated and
+    // non-gated paths whenever `boot` is set. This is the no-FOUC fix (DMNC-1184):
+    // the full-viewport panels are present in the server HTML, so the page is
+    // never visible before the turn-on — the animation is the reveal. `booting`
+    // mirrors the server value on the client's first render (no sessionStorage
+    // read here), so there is no hydration mismatch. The gated (bootOnce) decision
+    // is made post-mount: if this tab already booted, the cover is torn down by
+    // the decision effect once it runs. The server can't read sessionStorage, so a
+    // returning visitor's full reload paints the cover and suppresses it on
+    // hydration (a brief blackout, not a bare-content flash) — see the bootOnce
+    // JSDoc for the SSR trade.
+    const [booting, setBooting] = useState(boot);
     // Boot completes exactly once per mount. Guards against the StrictMode dev
     // double-invoke of effects and the (theoretical) animationend + safety-timeout
     // race both calling through twice.
@@ -85,12 +92,16 @@ export const RetroEffects = ({ scanlines = true, glow = true, flicker = true, bl
         if (!boot || !bootOnce)
             return;
         if (hasBootedThisSession(bootStorageKeyRef.current)) {
-            // Already shown this session — skip, but still signal completion so
-            // consumers sequencing boot text off onBootComplete don't stall.
+            // Already shown this session — tear down the SSR cover (it was rendered to
+            // prevent the first-paint flash, DMNC-1184) and signal completion so
+            // consumers sequencing boot text off onBootComplete don't stall. No replay.
+            setBooting(false);
             signalBootComplete();
             return;
         }
-        setBooting(true);
+        // First visit this tab — keep the cover up; it plays and records the session
+        // flag on completion (`completeBoot`). `booting` is already true from the
+        // initial state, so there is nothing to set here.
         // Mount-only: gating is a first-load decision, not reactive to prop churn.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -100,6 +111,11 @@ export const RetroEffects = ({ scanlines = true, glow = true, flicker = true, bl
     useEffect(() => {
         if (!booting)
             return;
+        // Already settled (e.g. the gated already-booted branch tore the SSR cover
+        // down and signalled in the decision effect, which runs first): don't arm a
+        // safety timer that we'd immediately clear on the next render.
+        if (bootSignaledRef.current)
+            return;
         if (prefersReducedMotion()) {
             completeBoot();
             return;

package/dist/components/Select/components/Select.d.ts

@@ -1,31 +1,83 @@
 import React from 'react';
 export interface SelectOption {
+    /** Stable value submitted / reported on change. */
     value: string;
+    /** Visible label. */
     label: string;
+    /** Disable this single option. */
+    disabled?: boolean;
 }
-export interface SelectProps {
-    /** Currently selected value (controlled). */
-    value: string;
+type SelectSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+interface SelectBaseProps {
     /** Options to render. */
     options: SelectOption[];
-    /** Fired with the new value on change. */
-    onChange: (value: string) => void;
-    /** Optional id for label association. */
-    id?: string;
-    /** Accessible label when there is no visible `<label>`. */
+    /** Visible field label (rendered above the control). */
+    label?: string;
+    /** Accessible label when there is no visible `label`. */
     'aria-label'?: string;
-    /** Disable the control. */
+    /** Text shown when nothing is selected. */
+    placeholder?: string;
+    /** Helper text below the control. */
+    description?: string;
+    /** Error message — shown (and marks the field invalid) when `variant="error"`. */
+    errorMessage?: string;
+    /** Visual / validation variant. */
+    variant?: 'default' | 'error';
+    /** Control size. small/medium/large are @deprecated aliases for sm/md/lg. */
+    size?: SelectSize;
+    /** Disable the whole control. */
     disabled?: boolean;
-    /** Additional CSS class name. */
+    /** Mark the field required (React Aria). */
+    isRequired?: boolean;
+    /** Enable type-to-filter (ComboBox for single-select; filter input for multi-select). */
+    searchable?: boolean;
+    /** Placeholder for the search/filter input (searchable variants). */
+    searchPlaceholder?: string;
+    /** Message shown when filtering matches nothing. */
+    emptyMessage?: React.ReactNode;
+    /** Form field name (a hidden native input is emitted for form submission). */
+    name?: string;
+    /** Id applied to the focusable control (for external `<label htmlFor>`). */
+    id?: string;
+    /** Additional CSS class merged onto the root. */
     className?: string;
 }
+interface SingleSelectProps extends SelectBaseProps {
+    /** Single-selection mode (default). */
+    multiple?: false;
+    /** Selected value (controlled). Empty string means nothing selected. */
+    value?: string;
+    /** Initial value (uncontrolled). */
+    defaultValue?: string;
+    /** Fired with the new value on change. */
+    onChange?: (value: string) => void;
+}
+interface MultiSelectProps extends SelectBaseProps {
+    /** Multi-selection mode — `value`/`onChange` operate on string arrays. */
+    multiple: true;
+    /** Selected values (controlled). */
+    value?: string[];
+    /** Initial values (uncontrolled). */
+    defaultValue?: string[];
+    /** Fired with the new array of values on change. */
+    onChange?: (value: string[]) => void;
+}
+export type SelectProps = SingleSelectProps | MultiSelectProps;
 /**
- * DOS-styled select — MVP wrapper around a native `<select>` (DMNC-860).
- * Ported from Steuerdash.
+ * DOS-styled Select / Dropdown built on React Aria primitives (DMNC-593).
+ *
+ * Three modes via props:
+ * - **default** — single-select `Select` (button + popover + listbox)
+ * - **`searchable`** — single-select `ComboBox` with type-to-filter
+ * - **`multiple`** — multi-select listbox; `value`/`onChange` use string arrays
+ *   (combine with `searchable` for a filterable multi-select)
  *
- * Font-size is set via inline style, not a `text-dos-*` class: Tailwind v4's
- * Preflight form reset (`select { font-size: 100% }`) outranks utility classes
- * on a native `<select>`, so the inline style is the reliable escape hatch
- * (token-driven). Upstream component fix tracked at eidotter#349.
+ * React Aria handles keyboard nav, focus management, and ARIA; phosphor glow on
+ * focus/open lives in `Select.css`. The single-value API (`value` / `options` /
+ * `onChange`) is backward-compatible with the previous native-`<select>` MVP.
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: {
+    (props: SelectProps): React.ReactElement;
+    displayName: string;
+};
+export {};

package/dist/components/Select/components/Select.js

@@ -1,14 +1,101 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from 'react';
+import { Select as AriaSelect, SelectValue as AriaSelectValue, ComboBox as AriaComboBox, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, Popover as AriaPopover, Button as AriaButton, Input as AriaInput, Label as AriaLabel, Text as AriaText, } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
+// ---------------------------------------------------------------------------
+// Shared style fragments — layout in Tailwind, phosphor in Select.css
+// ---------------------------------------------------------------------------
+const sizeTrigger = {
+    sm: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-2',
+    md: 'text-dos-text-md px-3 py-2 min-h-8 gap-2',
+    lg: 'text-dos-text-lg px-4 py-2.5 min-h-10 gap-2',
+};
+const normalizeSize = (size = 'md') => ({ small: 'sm', medium: 'md', large: 'lg' }[size] ?? size);
+const labelClass = 'eidotter-select__label text-dos-text-brand font-dos text-dos-text-xs uppercase tracking-wider';
+const descClass = 'eidotter-select__description text-dos-text-muted font-dos text-dos-text-xs';
+const errClass = 'eidotter-select__error text-dos-text-error font-dos text-dos-text-xs';
+const triggerBase = 'eidotter-select__trigger flex items-center w-full bg-transparent text-dos-text-brand font-dos ' +
+    'border-2 border-dos-border-default outline-none box-border';
+const optionClass = 'eidotter-select__option font-dos';
+const DEFAULT_EMPTY = 'NO MATCHES';
+/** Map the empty `''` sentinel / nullish to React Aria's `null` (placeholder). */
+const toKey = (value) => (value == null || value === '' ? null : value);
+// ---------------------------------------------------------------------------
+// Single-select — React Aria Select (button + popover + listbox)
+// ---------------------------------------------------------------------------
+const SingleSelect = ({ options, label, placeholder, description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, isRequired, name, id, className, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    return (_jsxs(AriaSelect, { "aria-label": !label ? ariaLabel : undefined, selectedKey: isControlled ? toKey(value) : undefined, defaultSelectedKey: !isControlled ? defaultValue : undefined, onSelectionChange: (key) => onChange?.(key == null ? '' : String(key)), isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, name: name, placeholder: placeholder, className: cn('eidotter-select flex flex-col gap-1', className), children: [label && _jsx(AriaLabel, { className: labelClass, children: label }), _jsxs(AriaButton, { id: id, className: cn(triggerBase, sizeTrigger[sz]), children: [_jsx(AriaSelectValue, { className: "eidotter-select__value flex-1 text-left truncate" }), _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" })] }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: descClass, children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: errClass, children: errorMessage })), _jsx(AriaPopover, { className: "eidotter-select__popover", children: _jsx(AriaListBox, { className: "eidotter-select__listbox", items: options, children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: optionClass, children: item.label })) }) })] }));
+};
+// ---------------------------------------------------------------------------
+// Searchable single-select — React Aria ComboBox (input + popover + listbox)
+// ---------------------------------------------------------------------------
+const SearchableSelect = ({ options, label, placeholder, description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, isRequired, name, id, className, emptyMessage = DEFAULT_EMPTY, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    return (_jsxs(AriaComboBox, { "aria-label": !label ? ariaLabel : undefined, defaultItems: options, selectedKey: isControlled ? toKey(value) : undefined, defaultSelectedKey: !isControlled ? defaultValue : undefined, onSelectionChange: (key) => onChange?.(key == null ? '' : String(key)), isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, name: name, menuTrigger: "focus", allowsEmptyCollection: true, className: cn('eidotter-select eidotter-select--searchable flex flex-col gap-1', className), children: [label && _jsx(AriaLabel, { className: labelClass, children: label }), _jsxs("div", { className: cn(triggerBase, sizeTrigger[sz]), children: [_jsx(AriaInput, { id: id, placeholder: placeholder, className: "eidotter-select__input flex-1 min-w-0 bg-transparent text-inherit outline-none" }), _jsx(AriaButton, { className: "eidotter-select__arrow-btn", "aria-label": "Show options", children: _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" }) })] }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: descClass, children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: errClass, children: errorMessage })), _jsx(AriaPopover, { className: "eidotter-select__popover", children: _jsx(AriaListBox, { className: "eidotter-select__listbox", renderEmptyState: () => _jsx("div", { className: "eidotter-select__empty", children: emptyMessage }), children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: optionClass, children: item.label })) }) })] }));
+};
+// ---------------------------------------------------------------------------
+// Multi-select — Button trigger + standalone Popover + multi ListBox
+// (React Aria has no high-level multi-select; this composes the primitives.)
+// ---------------------------------------------------------------------------
+const MultiSelect = ({ options, label, placeholder = 'Select…', description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, name, id, className, searchable, searchPlaceholder = 'FILTER…', emptyMessage = DEFAULT_EMPTY, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    const triggerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [internal, setInternal] = useState(defaultValue ?? []);
+    const selected = isControlled ? value ?? [] : internal;
+    const baseId = useId();
+    const labelId = `${baseId}-label`;
+    const selectedSet = useMemo(() => new Set(isControlled ? value ?? [] : internal), [isControlled, value, internal]);
+    const labelMap = useMemo(() => new Map(options.map((o) => [o.value, o.label])), [options]);
+    const filtered = useMemo(() => {
+        if (!searchable || !query.trim())
+            return options;
+        const q = query.trim().toLowerCase();
+        return options.filter((o) => o.label.toLowerCase().includes(q));
+    }, [options, searchable, query]);
+    const handleChange = (selection) => {
+        const next = selection === 'all' ? options.map((o) => o.value) : Array.from(selection, String);
+        if (!isControlled)
+            setInternal(next);
+        onChange?.(next);
+    };
+    // Reset the filter each time the popover opens so stale queries don't hide
+    // options on the next open.
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (next)
+            setQuery('');
+    };
+    const triggerText = selected.length === 0 ? placeholder : selected.map((v) => labelMap.get(v) ?? v).join(', ');
+    return (_jsxs("div", { className: cn('eidotter-select eidotter-select--multi flex flex-col gap-1', className), children: [label && (_jsx("span", { id: labelId, className: labelClass, children: label })), _jsxs(AriaButton, { ref: triggerRef, id: id, isDisabled: disabled, "aria-label": !label ? ariaLabel : undefined, "aria-labelledby": label ? labelId : undefined, "aria-haspopup": "listbox", "aria-expanded": open, onPress: () => handleOpenChange(!open), className: cn(triggerBase, sizeTrigger[sz], isInvalid && 'eidotter-select__trigger--error'), children: [_jsx("span", { className: cn('eidotter-select__value flex-1 text-left truncate', selected.length === 0 && 'eidotter-select__value--placeholder text-dos-text-muted'), children: triggerText }), _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" })] }), description && !isInvalid && _jsx("span", { className: descClass, children: description }), errorMessage && isInvalid && _jsx("span", { className: errClass, children: errorMessage }), name && selected.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs(AriaPopover, { triggerRef: triggerRef, isOpen: open, onOpenChange: handleOpenChange, className: "eidotter-select__popover", children: [searchable && (_jsx("input", { autoFocus: true, type: "text", className: "eidotter-select__search font-dos", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": "Filter options" })), _jsx(AriaListBox, { "aria-label": ariaLabel || label || 'Options', selectionMode: "multiple", selectedKeys: selectedSet, onSelectionChange: handleChange, items: filtered, autoFocus: searchable ? undefined : 'first', renderEmptyState: () => _jsx("div", { className: "eidotter-select__empty", children: emptyMessage }), className: "eidotter-select__listbox", children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: cn(optionClass, 'eidotter-select__option--multi'), children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "eidotter-select__check", children: isSelected ? '[x]' : '[ ]' }), _jsx("span", { className: "flex-1", children: item.label })] })) })) })] })] }));
+};
 /**
- * DOS-styled select — MVP wrapper around a native `<select>` (DMNC-860).
- * Ported from Steuerdash.
+ * DOS-styled Select / Dropdown built on React Aria primitives (DMNC-593).
  *
- * Font-size is set via inline style, not a `text-dos-*` class: Tailwind v4's
- * Preflight form reset (`select { font-size: 100% }`) outranks utility classes
- * on a native `<select>`, so the inline style is the reliable escape hatch
- * (token-driven). Upstream component fix tracked at eidotter#349.
+ * Three modes via props:
+ * - **default** — single-select `Select` (button + popover + listbox)
+ * - **`searchable`** — single-select `ComboBox` with type-to-filter
+ * - **`multiple`** — multi-select listbox; `value`/`onChange` use string arrays
+ *   (combine with `searchable` for a filterable multi-select)
+ *
+ * React Aria handles keyboard nav, focus management, and ARIA; phosphor glow on
+ * focus/open lives in `Select.css`. The single-value API (`value` / `options` /
+ * `onChange`) is backward-compatible with the previous native-`<select>` MVP.
  */
-export const Select = ({ value, options, onChange, id, disabled, className, 'aria-label': ariaLabel, }) => (_jsx("select", { id: id, "aria-label": ariaLabel, value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: { fontSize: 'var(--typography-font-size-text-xs)' }, className: cn('eidotter-select', 'min-w-[5rem] cursor-pointer font-dos px-2 py-1', 'bg-dos-bg-secondary text-dos-text-primary border border-dos-border-default', 'hover:border-dos-text-accent focus:border-dos-text-accent focus:outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }));
+export const Select = (props) => {
+    if (props.multiple)
+        return _jsx(MultiSelect, { ...props });
+    if (props.searchable)
+        return _jsx(SearchableSelect, { ...props });
+    return _jsx(SingleSelect, { ...props });
+};
 Select.displayName = 'Select';

package/dist/components/registry.js

@@ -308,6 +308,29 @@ export const componentRegistry = {
             { version: '0.3.0', type: 'added', description: 'Initial RetroEffects — scanlines, glow, flicker, bloom, intensity, powered' },
         ],
     },
+    Select: {
+        origin: 'steuerdash',
+        consumers: ['steuerdash'],
+        since: '0.36.0',
+        originNote: 'DOS-styled dropdown. MVP was a native <select> ported from Steuerdash; rebuilt on React Aria Select/ComboBox in DMNC-593 with default/searchable/multi modes',
+        variants: {
+            'mode:default': { description: 'Single-select — React Aria Select (button + popover + listbox)', since: '0.38.0', usedBy: ['steuerdash'] },
+            'searchable:true': { description: 'Type-to-filter ComboBox single-select', since: '0.38.0' },
+            'multiple:true': { description: 'Multi-select listbox; value/onChange use string arrays', since: '0.38.0' },
+            'variant:error': { description: 'Invalid state — red border + errorMessage slot', since: '0.38.0' },
+            'size:sm': { description: 'Compact trigger (28px min-height)', since: '0.38.0' },
+            'size:md': { description: 'Standard trigger (32px min-height)', since: '0.38.0', usedBy: ['steuerdash'] },
+            'size:lg': { description: 'Tall trigger (40px min-height)', since: '0.38.0' },
+        },
+        platforms: {
+            react: { path: 'src/components/Select', status: 'canonical' },
+            swiftui: { status: 'planned' },
+        },
+        changelog: [
+            { version: '0.38.0', type: 'changed', description: 'Rebuild on React Aria (Select/ComboBox/ListBox) with phosphor glow; add searchable + multiple modes, label/description/error chrome, sizes. Backward-compatible value/options/onChange API (DMNC-593)' },
+            { version: '0.36.0', type: 'added', description: 'Initial Select — native <select> MVP ported from Steuerdash (DMNC-860)' },
+        ],
+    },
     Skeleton: { origin: 'eidotter', consumers: ['dmnctech'], originNote: 'DOS/CGA loading placeholder — shade-character rows (\u2591\u2592\u2593) with CRT hum-bar band rolling top\u2192bottom (DMNC-1018)' },
     Stat: {
         origin: 'steuerdash',