eidotter 0.37.3 → 0.38.0

package/README.md

@@ -186,7 +186,7 @@ for client apps and `'use client'` files.
 
 | Component | Purpose |
 |---|---|
-| `TimelineContainer` | Multi-zoom timeline (year / month / day / hour views) |
+| `TimelineContainer` | Multi-zoom timeline (year / month / day / hour views); text / image / gallery / article entry kinds |
 | `TimelineNode` | Axis markers with shape variants and glow |
 | `TextScramble` | DOS text decode animation |
 | `RetroEffects` | CRT scanlines, noise, phosphor glow |

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/TimelineContainer/components/TimelineEntryCard.d.ts

@@ -12,9 +12,11 @@ export interface TimelineEntryCardProps {
  * Dispatcher for content-aware timeline entry rendering.
  *
  * Branches on `entry.kind`:
- *  - `text`    — existing trigger+panel rendering with `entry.content`.
- *  - `image`   — placeholder for now; filled in by Task 6.
- *  - `gallery` — placeholder for now; filled in by Tasks 7–8.
+ *  - `text`    — trigger + expandable panel with `entry.content`.
+ *  - `image`   — single-image thumbnail → lightbox.
+ *  - `gallery` — thumbnail grid → focused → lightbox.
+ *  - `article` — devlog card: collapsed thumb-strip + summary; expanded
+ *                gallery + body + read-more link.
  *
  * The card chrome (border, hover slide+glow, selected/expanded states)
  * lives on the outer `.eidotter-timeline-card` element and applies to all

package/dist/components/TimelineContainer/components/TimelineEntryCard.js

@@ -5,13 +5,16 @@ import { Button as AriaButton } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
 import { TimelineEntryCardImage } from './variants/TimelineEntryCardImage.js';
 import { TimelineEntryCardGallery } from './variants/TimelineEntryCardGallery.js';
+import { TimelineEntryCardArticle } from './variants/TimelineEntryCardArticle.js';
 /**
  * Dispatcher for content-aware timeline entry rendering.
  *
  * Branches on `entry.kind`:
- *  - `text`    — existing trigger+panel rendering with `entry.content`.
- *  - `image`   — placeholder for now; filled in by Task 6.
- *  - `gallery` — placeholder for now; filled in by Tasks 7–8.
+ *  - `text`    — trigger + expandable panel with `entry.content`.
+ *  - `image`   — single-image thumbnail → lightbox.
+ *  - `gallery` — thumbnail grid → focused → lightbox.
+ *  - `article` — devlog card: collapsed thumb-strip + summary; expanded
+ *                gallery + body + read-more link.
  *
  * The card chrome (border, hover slide+glow, selected/expanded states)
  * lives on the outer `.eidotter-timeline-card` element and applies to all
@@ -33,6 +36,8 @@ function renderBranch(entry, isExpanded, onSelect, children) {
             return _jsx(TimelineEntryCardImage, { entry: entry, isExpanded: isExpanded, onSelect: onSelect });
         case 'gallery':
             return _jsx(TimelineEntryCardGallery, { entry: entry, isExpanded: isExpanded, onSelect: onSelect });
+        case 'article':
+            return (_jsx(TimelineEntryCardArticle, { entry: entry, isExpanded: isExpanded, onSelect: onSelect, children: children }));
         default:
             return assertNever(entry);
     }

package/dist/components/TimelineContainer/components/types.d.ts

@@ -56,6 +56,29 @@ export type TimelineEntryData = (TimelineEntryBase & {
 }) | (TimelineEntryBase & {
     kind: 'gallery';
     images: TimelineImage[];
+}) | (TimelineEntryBase & {
+    kind: 'article';
+    /** Short plain-text preview shown while collapsed (80-char truncated, like the `text` kind). */
+    summary?: string;
+    /** Full body rendered in the expandable panel. */
+    content?: ReactNode;
+    /**
+     * Hero images: a decorative thumbnail strip while collapsed; an
+     * interactive gallery + Lightbox when expanded.
+     */
+    images?: TimelineImage[];
+    /**
+     * "Read more" URL. Rendered as a plain `<a>` inside the expanded panel;
+     * it never hijacks expand/collapse. Sanitized via `isSafeHref`.
+     *
+     * Contrast with {@link TimelineImage.link}: an image `link` *replaces*
+     * the image interaction (navigates out, skips the lightbox), whereas an
+     * article `href` is *supplementary* — a separate anchor that never
+     * interferes with expand/collapse or the gallery.
+     */
+    href?: string;
+    /** Read-more link label. @default 'READ MORE' */
+    hrefLabel?: string;
 });
 /**
  * @deprecated Use `TimelineEntryData` instead. Existing entries must add a

package/dist/components/TimelineContainer/components/variants/GalleryGrid.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { TimelineImage } from '../types.js';
+export interface GalleryGridProps {
+    /** Images to render as a grid. */
+    images: TimelineImage[];
+    /** When false (parent collapsed) the interaction state resets to the grid. */
+    isExpanded: boolean;
+}
+/**
+ * Shared iOS-Photos-style gallery: grid → focused (grow-in-place) → lightbox.
+ *
+ * Owns the full interaction state machine **and** the Lightbox mount, so both
+ * the `gallery` entry variant and the `article` variant's expanded body can
+ * drop it in with only `{ images, isExpanded }`. Resets to grid on parent
+ * collapse via a `useEffect` on `isExpanded`.
+ *
+ * Class names retain the `eidotter-timeline-card-gallery__*` prefix so existing
+ * gallery styling and consumer hooks keep working after the extraction.
+ */
+export declare const GalleryGrid: React.FC<GalleryGridProps>;

package/dist/components/TimelineContainer/components/variants/GalleryGrid.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { Lightbox } from '../../../Lightbox/index.js';
+import { cn } from '../../../../utils/cn.js';
+import { isSafeHref } from '../../../../utils/isSafeHref.js';
+/**
+ * Shared iOS-Photos-style gallery: grid → focused (grow-in-place) → lightbox.
+ *
+ * Owns the full interaction state machine **and** the Lightbox mount, so both
+ * the `gallery` entry variant and the `article` variant's expanded body can
+ * drop it in with only `{ images, isExpanded }`. Resets to grid on parent
+ * collapse via a `useEffect` on `isExpanded`.
+ *
+ * Class names retain the `eidotter-timeline-card-gallery__*` prefix so existing
+ * gallery styling and consumer hooks keep working after the extraction.
+ */
+export const GalleryGrid = ({ images, isExpanded }) => {
+    const [state, setState] = useState({ phase: 'grid' });
+    // Reset when the parent collapses, so re-expanding starts at grid.
+    useEffect(() => {
+        if (!isExpanded)
+            setState({ phase: 'grid' });
+    }, [isExpanded]);
+    // Re-validate state.index when images shrinks — otherwise a stale index can
+    // feed an out-of-range value into the Lightbox below.
+    useEffect(() => {
+        setState((prev) => {
+            if (prev.phase === 'grid')
+                return prev;
+            if (prev.index >= images.length)
+                return { phase: 'grid' };
+            return prev;
+        });
+    }, [images.length]);
+    if (images.length === 0)
+        return null;
+    const handleThumbClick = (index, image) => {
+        // Only short-circuit when the link will actually render as a navigable
+        // anchor — unsafe schemes are stripped by GalleryThumb, in which case the
+        // thumb falls back to the focus/lightbox interaction.
+        if (image.link && isSafeHref(image.link))
+            return;
+        setState((prev) => {
+            if (prev.phase === 'focused' && prev.index === index) {
+                return { phase: 'lightbox', index };
+            }
+            return { phase: 'focused', index };
+        });
+    };
+    const focusedIndex = state.phase === 'focused' || state.phase === 'lightbox' ? state.index : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "eidotter-timeline-card-gallery__grid", role: "list", children: images.map((img, i) => (_jsx(GalleryThumb, { image: img, isFocused: focusedIndex === i, onClick: () => handleThumbClick(i, img) }, i))) }), _jsx(Lightbox, { images: images, isOpen: state.phase === 'lightbox', initialIndex: state.phase === 'lightbox' ? state.index : 0, onClose: () => {
+                    setState((prev) => prev.phase === 'lightbox' ? { phase: 'focused', index: prev.index } : prev);
+                }, onIndexChange: (idx) => {
+                    setState((prev) => prev.phase === 'lightbox' ? { phase: 'lightbox', index: idx } : prev);
+                } })] }));
+};
+const GalleryThumb = ({ image, isFocused, onClick }) => {
+    const src = image.thumbnail || image.src;
+    const linkHref = image.link && isSafeHref(image.link) ? image.link : undefined;
+    // Outer listitem wraps either an anchor (link mode) or a button (interactive
+    // focus/lightbox mode). The listitem semantics live on the outer wrapper so
+    // both modes participate in the parent role="list" consistently.
+    if (linkHref) {
+        return (_jsx("div", { role: "listitem", className: "eidotter-timeline-card-gallery__cell eidotter-timeline-card-gallery__cell--link", children: _jsx("a", { className: "eidotter-timeline-card-gallery__link", href: linkHref, rel: "noopener noreferrer", children: _jsx("img", { className: "eidotter-timeline-card-gallery__img", src: src, alt: image.alt, loading: "lazy", width: image.width, height: image.height }) }) }));
+    }
+    return (_jsx("div", { role: "listitem", className: cn('eidotter-timeline-card-gallery__cell', isFocused && 'eidotter-timeline-card-gallery__cell--focused'), children: _jsx(AriaButton, { className: "eidotter-timeline-card-gallery__button", onPress: onClick, "aria-label": image.alt || 'Image', "aria-pressed": isFocused, children: _jsx("img", { className: "eidotter-timeline-card-gallery__img", src: src, alt: image.alt, width: image.width, height: image.height }) }) }));
+};

package/dist/components/TimelineContainer/components/variants/TimelineEntryCardArticle.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { TimelineEntryData } from '../types.js';
+type ArticleEntry = Extract<TimelineEntryData, {
+    kind: 'article';
+}>;
+export interface TimelineEntryCardArticleProps {
+    entry: ArticleEntry;
+    isExpanded: boolean;
+    onSelect?: (id: string) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Article variant of TimelineEntryCard — a devlog-style entry.
+ *
+ * Collapsed: type/tags header, title, an 80-char `summary` preview, then a
+ * decorative thumbnail strip. Everything sits inside the single trigger button
+ * (`aria-hidden` thumbs, no nested interactive elements) so a click anywhere
+ * toggles expand/collapse.
+ *
+ * Expanded: uses the shared always-in-DOM `__body`/`__body-inner` + `inert` +
+ * 0fr→1fr grid pattern (like the text branch), so the interactive gallery,
+ * body content, and sanitized "READ MORE →" link are unfocusable/unclickable
+ * while collapsed — correct a11y for free.
+ */
+export declare const TimelineEntryCardArticle: React.FC<TimelineEntryCardArticleProps>;
+export {};

package/dist/components/TimelineContainer/components/variants/TimelineEntryCardArticle.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button as AriaButton } from 'react-aria-components';
+import { isSafeHref } from '../../../../utils/isSafeHref.js';
+import { GalleryGrid } from './GalleryGrid.js';
+/** Max thumbnails shown in the collapsed decorative strip before a `+N` cell. */
+const MAX_THUMBS = 4;
+/**
+ * Article variant of TimelineEntryCard — a devlog-style entry.
+ *
+ * Collapsed: type/tags header, title, an 80-char `summary` preview, then a
+ * decorative thumbnail strip. Everything sits inside the single trigger button
+ * (`aria-hidden` thumbs, no nested interactive elements) so a click anywhere
+ * toggles expand/collapse.
+ *
+ * Expanded: uses the shared always-in-DOM `__body`/`__body-inner` + `inert` +
+ * 0fr→1fr grid pattern (like the text branch), so the interactive gallery,
+ * body content, and sanitized "READ MORE →" link are unfocusable/unclickable
+ * while collapsed — correct a11y for free.
+ */
+export const TimelineEntryCardArticle = ({ entry, isExpanded, onSelect, children, }) => {
+    const { summary, content, href, hrefLabel } = entry;
+    const imageList = entry.images ?? [];
+    const hasImages = imageList.length > 0;
+    const readMoreHref = href && isSafeHref(href) ? href : undefined;
+    // The expanded body is always mounted (inert when collapsed) so the grid can
+    // animate. Render it whenever there's a gallery, body content, or read-more.
+    const hasBody = hasImages || content != null || readMoreHref !== undefined;
+    const thumbs = imageList.slice(0, MAX_THUMBS);
+    const overflow = imageList.length - thumbs.length;
+    return (_jsxs(_Fragment, { children: [_jsxs(AriaButton, { className: "eidotter-timeline-card__trigger", onPress: () => onSelect?.(entry.id), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "eidotter-timeline-card__header", children: [entry.type && (_jsx("span", { className: "eidotter-timeline-card__type", children: entry.type.toUpperCase() })), entry.tags && entry.tags.length > 0 && (_jsx("span", { className: "eidotter-timeline-card__tags", children: entry.tags.map((t) => `#${t}`).join(' ') }))] }), _jsx("p", { className: "eidotter-timeline-card__title", children: entry.title }), !isExpanded && typeof summary === 'string' && summary.length > 0 && (_jsxs("p", { className: "eidotter-timeline-card__preview", children: [summary.slice(0, 80), summary.length > 80 ? '...' : ''] })), children, !isExpanded && hasImages && (_jsxs("div", { className: "eidotter-timeline-card-article__thumbstrip", "aria-hidden": "true", children: [thumbs.map((img, i) => (_jsx("span", { className: "eidotter-timeline-card-article__thumb", children: _jsx("img", { className: "eidotter-timeline-card-article__thumb-img", src: img.thumbnail || img.src, alt: "", loading: "lazy", width: img.width, height: img.height }) }, i))), overflow > 0 && (_jsxs("span", { className: "eidotter-timeline-card-article__thumb eidotter-timeline-card-article__thumb--more", children: ["+", overflow] }))] }))] }), hasBody && (_jsx("div", { className: "eidotter-timeline-card__body", children: _jsxs("div", { className: "eidotter-timeline-card__body-inner", inert: !isExpanded ? true : undefined, children: [hasImages && _jsx(GalleryGrid, { images: imageList, isExpanded: isExpanded }), content != null && (_jsx("div", { className: "eidotter-timeline-card-article__content", children: content })), readMoreHref && (_jsx("div", { className: "eidotter-timeline-card-article__footer", children: _jsxs("a", { className: "eidotter-timeline-card-article__readmore", href: readMoreHref, rel: "noopener noreferrer", children: [hrefLabel ?? 'READ MORE', " \u2192"] }) }))] }) }))] }));
+};

package/dist/components/TimelineContainer/components/variants/TimelineEntryCardGallery.d.ts

@@ -9,9 +9,9 @@ export interface TimelineEntryCardGalleryProps {
     onSelect?: (id: string) => void;
 }
 /**
- * Gallery variant of TimelineEntryCard. iOS Photos two-stage interaction:
- * grid → focused (grow-in-place) → lightbox. Resets to grid on parent
- * collapse via useEffect on `isExpanded`.
+ * Gallery variant of TimelineEntryCard. Thin wrapper: renders the trigger
+ * (title) + the shared {@link GalleryGrid} (grid → focused → lightbox). Empty
+ * galleries render a title + placeholder instead of a trigger.
  */
 export declare const TimelineEntryCardGallery: React.FC<TimelineEntryCardGalleryProps>;
 export {};

package/dist/components/TimelineContainer/components/variants/TimelineEntryCardGallery.js

@@ -1,67 +1,18 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { Button as AriaButton } from 'react-aria-components';
-import { Lightbox } from '../../../Lightbox/index.js';
-import { cn } from '../../../../utils/cn.js';
-import { isSafeHref } from '../../../../utils/isSafeHref.js';
+import { GalleryGrid } from './GalleryGrid.js';
 /**
- * Gallery variant of TimelineEntryCard. iOS Photos two-stage interaction:
- * grid → focused (grow-in-place) → lightbox. Resets to grid on parent
- * collapse via useEffect on `isExpanded`.
+ * Gallery variant of TimelineEntryCard. Thin wrapper: renders the trigger
+ * (title) + the shared {@link GalleryGrid} (grid → focused → lightbox). Empty
+ * galleries render a title + placeholder instead of a trigger.
  */
 export const TimelineEntryCardGallery = ({ entry, isExpanded, onSelect, }) => {
-    const [state, setState] = useState({ phase: 'grid' });
-    // Reset when the parent card collapses, so re-expanding starts at grid.
-    useEffect(() => {
-        if (!isExpanded)
-            setState({ phase: 'grid' });
-    }, [isExpanded]);
-    // Re-validate state.index when entry.images shrinks — otherwise a stale
-    // index can feed an out-of-range value into the Lightbox below.
-    useEffect(() => {
-        setState((prev) => {
-            if (prev.phase === 'grid')
-                return prev;
-            if (prev.index >= entry.images.length)
-                return { phase: 'grid' };
-            return prev;
-        });
-    }, [entry.images.length]);
     if (entry.images.length === 0) {
         if (process.env.NODE_ENV !== 'production') {
             console.error(`[eidotter] TimelineEntryCard kind="gallery" entry "${entry.id}" has no images.`);
         }
         return (_jsxs(_Fragment, { children: [_jsx("p", { className: "eidotter-timeline-card__title", children: entry.title }), _jsx("p", { className: "eidotter-timeline-card-gallery__empty", children: "No images." })] }));
     }
-    const handleThumbClick = (index, image) => {
-        // Only short-circuit when the link will actually render as a navigable
-        // anchor — unsafe schemes are stripped by GalleryThumb, in which case
-        // the thumb falls back to the focus/lightbox interaction.
-        if (image.link && isSafeHref(image.link))
-            return;
-        setState((prev) => {
-            if (prev.phase === 'focused' && prev.index === index) {
-                return { phase: 'lightbox', index };
-            }
-            return { phase: 'focused', index };
-        });
-    };
-    const focusedIndex = state.phase === 'focused' || state.phase === 'lightbox' ? state.index : null;
-    return (_jsxs(_Fragment, { children: [_jsx(AriaButton, { className: "eidotter-timeline-card__trigger", onPress: () => onSelect?.(entry.id), "aria-expanded": isExpanded, children: _jsx("p", { className: "eidotter-timeline-card__title", children: entry.title }) }), _jsx("div", { className: "eidotter-timeline-card-gallery__grid", role: "list", children: entry.images.map((img, i) => (_jsx(GalleryThumb, { image: img, isFocused: focusedIndex === i, onClick: () => handleThumbClick(i, img) }, i))) }), _jsx(Lightbox, { images: entry.images, isOpen: state.phase === 'lightbox', initialIndex: state.phase === 'lightbox' ? state.index : 0, onClose: () => {
-                    setState((prev) => prev.phase === 'lightbox' ? { phase: 'focused', index: prev.index } : prev);
-                }, onIndexChange: (idx) => {
-                    setState((prev) => prev.phase === 'lightbox' ? { phase: 'lightbox', index: idx } : prev);
-                } })] }));
-};
-const GalleryThumb = ({ image, isFocused, onClick }) => {
-    const src = image.thumbnail || image.src;
-    const linkHref = image.link && isSafeHref(image.link) ? image.link : undefined;
-    // Outer listitem wraps either an anchor (link mode) or a button (interactive
-    // focus/lightbox mode). The listitem semantics live on the outer wrapper so
-    // both modes participate in the parent role="list" consistently.
-    if (linkHref) {
-        return (_jsx("div", { role: "listitem", className: "eidotter-timeline-card-gallery__cell eidotter-timeline-card-gallery__cell--link", children: _jsx("a", { className: "eidotter-timeline-card-gallery__link", href: linkHref, rel: "noopener noreferrer", children: _jsx("img", { className: "eidotter-timeline-card-gallery__img", src: src, alt: image.alt, width: image.width, height: image.height }) }) }));
-    }
-    return (_jsx("div", { role: "listitem", className: cn('eidotter-timeline-card-gallery__cell', isFocused && 'eidotter-timeline-card-gallery__cell--focused'), children: _jsx(AriaButton, { className: "eidotter-timeline-card-gallery__button", onPress: onClick, "aria-label": image.alt || 'Image', "aria-pressed": isFocused, children: _jsx("img", { className: "eidotter-timeline-card-gallery__img", src: src, alt: image.alt, width: image.width, height: image.height }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(AriaButton, { className: "eidotter-timeline-card__trigger", onPress: () => onSelect?.(entry.id), "aria-expanded": isExpanded, children: _jsx("p", { className: "eidotter-timeline-card__title", children: entry.title }) }), _jsx(GalleryGrid, { images: entry.images, isExpanded: isExpanded })] }));
 };

package/dist/components/TimelineContainer/components/views/HourView.js

@@ -13,7 +13,7 @@ import { formatTimestamp } from '../timelineUtils.js';
 export const HourView = React.memo(({ buckets, selectedEntryId, onEntrySelect, renderEntry, }) => {
     return (_jsx("div", { className: "timeline-view timeline-view--hour", role: "list", children: buckets.map((bucket) => (_jsxs("div", { className: "timeline-view__bucket timeline-view__bucket--hour", role: "listitem", children: [_jsx("div", { className: "timeline-view__node", children: _jsx(TimelineNode, { shape: "circle", size: "medium", variant: "default", label: bucket.label, labelPosition: "right" }) }), _jsx("div", { className: "timeline-view__content", children: bucket.entries.map((entry) => {
                         const isSelected = selectedEntryId === entry.id;
-                        const defaultRender = () => (_jsxs(TimelineEntryCard, { entry: entry, isSelected: isSelected, isExpanded: true, onSelect: onEntrySelect, footer: _jsxs("div", { className: "timeline-view__entry-footer", children: [entry.tags && entry.tags.length > 0 && (_jsx(TagGroup, { gap: "tight", "aria-label": `Tags for ${entry.title}`, children: entry.tags.map((tag) => (_jsx(Tag, { size: "small", variant: "outlined", children: tag }, tag))) })), entry.type && (_jsx(Badge, { variant: "default", size: "small", children: entry.type }))] }), children: [_jsx("time", { className: "timeline-view__timestamp", dateTime: entry.date, children: formatTimestamp(entry.date) }), entry.kind === 'text' && entry.content !== undefined && (_jsx("div", { className: "timeline-view__entry-content", children: entry.content }))] }));
+                        const defaultRender = () => (_jsxs(TimelineEntryCard, { entry: entry, isSelected: isSelected, isExpanded: true, onSelect: onEntrySelect, footer: _jsxs("div", { className: "timeline-view__entry-footer", children: [entry.tags && entry.tags.length > 0 && (_jsx(TagGroup, { gap: "tight", "aria-label": `Tags for ${entry.title}`, children: entry.tags.map((tag) => (_jsx(Tag, { size: "small", variant: "outlined", children: tag }, tag))) })), entry.type && (_jsx(Badge, { variant: "default", size: "small", children: entry.type }))] }), children: [_jsx("time", { className: "timeline-view__timestamp", dateTime: entry.date, children: formatTimestamp(entry.date) }), entry.kind === 'text' && entry.content !== undefined && (_jsx("div", { className: "timeline-view__entry-content", children: entry.content })), entry.kind === 'article' && entry.summary !== undefined && (_jsx("div", { className: "timeline-view__entry-content", children: entry.summary }))] }));
                         return (_jsx(React.Fragment, { children: renderEntry
                                 ? renderEntry(entry, { isExpanded: true, isSelected, defaultRender })
                                 : defaultRender() }, entry.id));

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',