eidotter 0.36.1 → 0.37.0

package/dist/components/Tag/components/Tag.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
+const sizeClasses = {
+    sm: 'text-dos-text-xs px-2 py-0.5 min-h-6 gap-1',
+    md: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1.5',
+    lg: 'text-dos-text-md px-3 py-1.5 min-h-8 gap-1.5',
+    small: 'text-dos-text-xs px-2 py-0.5 min-h-6 gap-1',
+    medium: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1.5',
+};
+/**
+ * DOS-styled Tag for interactive labels with click, close, and selection.
+ * Extends Badge with interaction behaviors. Uses useAnimatedDismiss for phosphor exit.
+ */
+export const Tag = ({ children, variant = 'default', size = 'md', color, selected = false, closeable = false, disabled = false, onClick, onClose, className, 'aria-label': ariaLabel, ...props }) => {
+    const isInteractive = !!onClick && !disabled;
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('tag-exit', onClose);
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if ((event.key === 'Enter' || event.key === ' ') && onClick) {
+            event.preventDefault();
+            onClick(event);
+        }
+        if ((event.key === 'Delete' || event.key === 'Backspace') && closeable && onClose) {
+            event.preventDefault();
+            triggerClose();
+        }
+    };
+    // AriaButton's usePress isolates the press event — it calls stopPropagation
+    // internally, preventing the close from triggering the parent Tag's onClick.
+    const handleClosePress = () => {
+        if (!disabled)
+            triggerClose();
+    };
+    const style = color ? { '--tag-color': 'var(' + color + ')' } : undefined;
+    return (_jsxs("span", { className: cn('inline-flex items-center justify-center', 'font-dos leading-none whitespace-nowrap select-none', 'rounded-dos-sm uppercase tracking-wider', sizeClasses[size] || sizeClasses.md, 'eidotter-tag', 'eidotter-tag--' + variant, selected && 'eidotter-tag--selected', disabled && 'opacity-50 cursor-not-allowed', isClosing && 'eidotter-tag--closing', isInteractive && 'cursor-pointer', className), style: style, onClick: isInteractive ? (e) => !disabled && onClick?.(e) : undefined, onKeyDown: handleKeyDown, onAnimationEnd: handleAnimationEnd, "aria-label": ariaLabel, "aria-pressed": isInteractive ? (selected || false) : undefined, "aria-disabled": disabled || undefined, "data-variant": variant, ...(isInteractive ? { role: 'button', tabIndex: 0 } : {}), ...props, children: [_jsx("span", { className: "eidotter-tag__content", children: children }), closeable && (_jsx(AriaButton, { className: "eidotter-tag__close", "aria-label": 'Remove ' + (typeof children === 'string' ? children : 'tag'), 
+                // Keep the close button out of the tab order only when the body is
+                // itself focusable (interactive) and already offers Delete/Backspace
+                // dismissal. For a closeable, non-interactive tag the body is not
+                // focusable, so the close button must stay tabbable to give keyboard
+                // users any dismiss path at all.
+                excludeFromTabOrder: isInteractive, onPress: handleClosePress, isDisabled: disabled, children: "[x]" }))] }));
+};

package/dist/components/Tag/components/TagGroup.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+const gapClasses = {
+    tight: 'gap-1',
+    normal: 'gap-2',
+    loose: 'gap-3',
+};
+/**
+ * Wrapper for rendering multiple Tag components with consistent spacing
+ *
+ * Provides flex layout with configurable gap and optional wrapping.
+ */
+export const TagGroup = ({ children, gap = 'normal', wrap = true, className, 'aria-label': ariaLabel, ...props }) => {
+    return (_jsx("div", { className: cn('flex', wrap ? 'flex-wrap' : 'flex-nowrap', gapClasses[gap] || gapClasses.normal, className), role: "group", "aria-label": ariaLabel, ...props, children: children }));
+};

package/dist/components/Tag/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Tag } from './Tag';
-export type { TagProps } from './Tag';
-export { TagGroup } from './TagGroup';
-export type { TagGroupProps } from './TagGroup';
+export { Tag } from './Tag.js';
+export type { TagProps } from './Tag.js';
+export { TagGroup } from './TagGroup.js';
+export type { TagGroupProps } from './TagGroup.js';

package/dist/components/Tag/components/index.js

@@ -0,0 +1,2 @@
+export { Tag } from './Tag.js';
+export { TagGroup } from './TagGroup.js';

package/dist/components/Tag/index.d.ts

@@ -1,2 +1,2 @@
-export { Tag, TagGroup } from './components';
-export type { TagProps, TagGroupProps } from './components';
+export { Tag, TagGroup } from './components/index.js';
+export type { TagProps, TagGroupProps } from './components/index.js';

package/dist/components/Tag/index.js

@@ -0,0 +1 @@
+export { Tag, TagGroup } from './components/index.js';

package/dist/components/Terminal/components/Terminal.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import '../../../styles/keyframes.css';
-import './Terminal.css';
 export interface TerminalProps {
     /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';

package/dist/components/Terminal/components/Terminal.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { Icon } from '../../Icon/components/Icon.js';
+export const Terminal = ({ size = 'md', title = 'MS-DOS Terminal', state = 'active', resizable = true, minimizable = false, maximizable = false, closeable = false, children, onMinimize, onMaximize, onClose, onFocus, className = '', autoFocus = false, }) => {
+    const sizeMap = { sm: 'small', md: 'medium', lg: 'large' };
+    const normalizedSize = sizeMap[size] ?? size;
+    const [windowState, setWindowState] = useState(state);
+    const [isMaximized, setIsMaximized] = useState(false);
+    const terminalRef = useRef(null);
+    useEffect(() => {
+        if (autoFocus && terminalRef.current) {
+            terminalRef.current.focus();
+        }
+    }, [autoFocus]);
+    const handleMinimize = () => {
+        setWindowState('minimized');
+        onMinimize?.();
+    };
+    const handleMaximize = () => {
+        setIsMaximized(!isMaximized);
+        onMaximize?.();
+    };
+    const handleClose = () => {
+        onClose?.();
+    };
+    const handleFocus = () => {
+        setWindowState('active');
+        onFocus?.();
+    };
+    const handleKeyDown = (event) => {
+        // Handle Alt+F4 for closing (DOS convention)
+        if (event.altKey && event.key === 'F4' && closeable) {
+            event.preventDefault();
+            handleClose();
+        }
+    };
+    if (windowState === 'minimized') {
+        return (_jsx(AriaButton, { className: `terminal terminal--minimized ${className}`.trim(), onPress: handleFocus, "aria-label": `Restore ${title} window`, children: _jsxs("div", { className: "terminal__taskbar-item", children: [_jsx(Icon, { name: "App", size: "S" }), _jsx("span", { className: "terminal__taskbar-title", children: title })] }) }));
+    }
+    return (_jsxs("div", { ref: terminalRef, className: `terminal terminal--${normalizedSize} terminal--${windowState} ${isMaximized ? 'terminal--maximized' : ''} ${className}`.trim(), tabIndex: 0, role: "dialog", "aria-label": `${title} terminal window`, onFocus: handleFocus, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "terminal__title-bar", children: [_jsxs("div", { className: "terminal__title", children: [_jsx(Icon, { name: "App", size: "S", "aria-hidden": "true" }), _jsx("span", { className: "terminal__title-text", children: title })] }), (minimizable || maximizable || closeable) && (_jsxs("div", { className: "terminal__controls", children: [minimizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--minimize", onPress: handleMinimize, "aria-label": "Minimize window", children: _jsx(Icon, { name: "Cancel", size: "S" }) })), maximizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--maximize", onPress: handleMaximize, "aria-label": isMaximized ? "Restore window" : "Maximize window", children: _jsx(Icon, { name: isMaximized ? "Fullscreen" : "Add", size: "S" }) })), closeable && (_jsx(AriaButton, { className: "terminal__control terminal__control--close", onPress: handleClose, "aria-label": "Close window", children: _jsx(Icon, { name: "Close", size: "S" }) }))] }))] }), _jsx("div", { className: "terminal__content", role: "main", children: children || (_jsx("div", { className: "terminal__default-content", children: _jsxs("div", { className: "terminal__prompt", children: [_jsx("span", { className: "terminal__path", children: "C:\\\\>" }), _jsx("span", { className: "terminal__cursor", children: "\u2588" })] }) })) }), resizable && (_jsx("div", { className: "terminal__resize-handle", "aria-hidden": "true" }))] }));
+};

package/dist/components/Terminal/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Terminal } from './Terminal';
-export type { TerminalProps } from './Terminal';
+export { Terminal } from './Terminal.js';
+export type { TerminalProps } from './Terminal.js';

package/dist/components/Terminal/components/index.js

@@ -0,0 +1 @@
+export { Terminal } from './Terminal.js';

package/dist/components/Terminal/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from './components/index.js';

package/dist/components/Terminal/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/components/TextScramble/components/TextScramble.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './TextScramble.css';
 export interface TextScrambleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** The text to display with scramble effect */
     children: string;

package/dist/components/TextScramble/components/TextScramble.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useTextScramble } from '../../../hooks/useTextScramble.js';
+export const TextScramble = forwardRef(({ children, speed, characters, delay, className, ...props }, ref) => {
+    const { text, isScrambling } = useTextScramble(children, {
+        speed,
+        characters,
+        delay,
+    });
+    return (_jsx("span", { ref: ref, className: cn('eidotter-text-scramble', isScrambling && 'eidotter-text-scramble--scrambling', className), ...props, children: text }));
+});
+TextScramble.displayName = 'TextScramble';

package/dist/components/TextScramble/components/index.d.ts

@@ -1,2 +1,2 @@
-export { TextScramble } from './TextScramble';
-export type { TextScrambleProps } from './TextScramble';
+export { TextScramble } from './TextScramble.js';
+export type { TextScrambleProps } from './TextScramble.js';

package/dist/components/TextScramble/components/index.js

@@ -0,0 +1 @@
+export { TextScramble } from './TextScramble.js';

package/dist/components/TextScramble/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from './components/index.js';

package/dist/components/TextScramble/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import type { TimelineEntryData, TimelineRenderEntry } from './types';
-import '../../../styles/keyframes.css';
-import './MasterDetailLayout.css';
+import type { TimelineEntryData, TimelineRenderEntry } from './types.js';
 export interface MasterDetailLayoutProps {
     /** Pre-sorted entries (the orchestrator sorts; the rail renders in order). */
     entries: TimelineEntryData[];

package/dist/components/TimelineContainer/components/MasterDetailLayout.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { TimelineNode } from '../../TimelineNode/components/TimelineNode.js';
+import { TimelineEntryCard } from './TimelineEntryCard.js';
+/**
+ * Level-3 "master-detail" timeline layout (DMNC-878).
+ *
+ * A split view: a navigable timeline rail (left) plus a detail pane (right)
+ * that renders the selected entry in full. Switching entries swaps the detail
+ * pane without remounting the rail, so rail scroll position is preserved.
+ *
+ * Selection is owned by the orchestrator (controlled/uncontrolled via
+ * `useSelection`), so the open entry is deep-linkable by consumers. The rail
+ * uses navigation semantics (`aria-current`), arrow keys walk entries, and
+ * focus moves into the pane on open and back to the rail on close — without a
+ * focus trap, so both panes stay reachable.
+ */
+export const MasterDetailLayout = ({ entries, selectedEntryId, onSelect, onDeselect, renderEntry, formatDate, }) => {
+    const selectedEntry = entries.find((e) => e.id === selectedEntryId) ?? null;
+    const railRef = useRef(null);
+    const detailRef = useRef(null);
+    // Focus management (DMNC-878): move focus into the detail pane when an entry
+    // opens, and restore focus to the active rail row when it closes. Mirrors the
+    // requestAnimationFrame focus-move pattern used for drill-down transitions.
+    const prevSelectedRef = useRef(selectedEntryId);
+    useEffect(() => {
+        const prev = prevSelectedRef.current;
+        prevSelectedRef.current = selectedEntryId;
+        if (selectedEntryId && selectedEntryId !== prev) {
+            requestAnimationFrame(() => detailRef.current?.focus());
+        }
+        else if (!selectedEntryId && prev) {
+            requestAnimationFrame(() => {
+                railRef.current
+                    ?.querySelector(`[data-entry-id="${prev}"]`)
+                    ?.focus();
+            });
+        }
+    }, [selectedEntryId]);
+    // Arrow-key walk over the flat sorted entries (mirrors CmdPalette). With
+    // nothing selected, ArrowDown opens the first entry and ArrowUp the last.
+    const moveSelection = useCallback((delta) => {
+        if (entries.length === 0)
+            return;
+        const idx = entries.findIndex((e) => e.id === selectedEntryId);
+        const base = idx === -1 ? (delta > 0 ? -1 : entries.length) : idx;
+        const next = Math.max(0, Math.min(entries.length - 1, base + delta));
+        onSelect(entries[next].id);
+    }, [entries, selectedEntryId, onSelect]);
+    const handleRailKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            moveSelection(1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            moveSelection(-1);
+        }
+        else if (e.key === 'Escape' && selectedEntryId) {
+            e.preventDefault();
+            onDeselect();
+        }
+    }, [moveSelection, onDeselect, selectedEntryId]);
+    const renderDetailBody = (entry) => {
+        const defaultRender = () => (_jsx(TimelineEntryCard, { entry: entry, isSelected: true, isExpanded: true }));
+        return renderEntry
+            ? renderEntry(entry, { isExpanded: true, isSelected: true, defaultRender })
+            : defaultRender();
+    };
+    return (_jsxs("div", { className: cn('eidotter-timeline-md', selectedEntry && 'eidotter-timeline-md--detail-open'), children: [_jsx("nav", { ref: railRef, className: "eidotter-timeline-md__rail", "aria-label": "Timeline entries", onKeyDown: handleRailKeyDown, children: _jsx("ul", { className: "eidotter-timeline-md__rail-list", children: entries.map((entry) => {
+                        const isActive = entry.id === selectedEntryId;
+                        return (_jsx("li", { className: "eidotter-timeline-md__rail-item", children: _jsxs("button", { type: "button", "data-entry-id": entry.id, className: cn('eidotter-timeline-md__rail-button', isActive && 'eidotter-timeline-md__rail-button--active'), "aria-current": isActive ? 'true' : undefined, onClick: () => onSelect(entry.id), children: [_jsx("span", { className: "eidotter-timeline-md__rail-node", "aria-hidden": "true", children: _jsx(TimelineNode, { shape: "circle", size: "sm", variant: "default", isActive: isActive }) }), _jsxs("span", { className: "eidotter-timeline-md__rail-text", children: [_jsx("span", { className: "eidotter-timeline-md__rail-date", children: formatDate(entry.date) }), _jsx("span", { className: "eidotter-timeline-md__rail-title", children: entry.title })] })] }) }, entry.id));
+                    }) }) }), _jsx("div", { ref: detailRef, className: "eidotter-timeline-md__detail", role: "region", "aria-label": "Entry detail", tabIndex: -1, children: selectedEntry ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "eidotter-timeline-md__back", onClick: onDeselect, children: "\u2039 BACK" }), _jsx("div", { className: "eidotter-timeline-md__detail-body", children: renderDetailBody(selectedEntry) }, selectedEntry.id)] })) : (_jsxs("div", { className: "eidotter-timeline-md__detail-empty", role: "status", children: [_jsx("p", { children: "C:\\TIMELINE> Select an entry to read." }), _jsx("p", { children: "_" })] })) })] }));
+};
+MasterDetailLayout.displayName = 'MasterDetailLayout';

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './TimelineAxis.css';
 export interface TimelineAxisProps {
     children: React.ReactNode;
 }

package/dist/components/TimelineContainer/components/TimelineAxis.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Vertical spine connecting timeline nodes.
+ * Wraps content with a continuous vertical line on the left side.
+ */
+export const TimelineAxis = ({ children }) => {
+    return (_jsxs("div", { className: "timeline-axis", children: [_jsx("div", { className: "timeline-axis__line", "aria-hidden": "true" }), _jsx("div", { className: "timeline-axis__content", children: children })] }));
+};

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import type { TimelineEntryData, TimelineRenderEntry, ZoomLevel } from './types';
-import './TimelineContainer.css';
-import './views/views.css';
+import type { TimelineEntryData, TimelineRenderEntry, ZoomLevel } from './types.js';
 export interface TimelineContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Timeline entries to display */
     entries: TimelineEntryData[];

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

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDrillDown } from './useDrillDown.js';
+import { useSelection } from './useSelection.js';
+import { groupEntriesByZoom, filterBucketsByPeriod } from './timelineUtils.js';
+import { ZoomControls } from './ZoomControls.js';
+import { TimelineAxis } from './TimelineAxis.js';
+import { TimelineContent } from './TimelineContent.js';
+import { TimelineNode } from '../../TimelineNode/components/TimelineNode.js';
+import { TimelineEntryCard } from './TimelineEntryCard.js';
+import { MasterDetailLayout } from './MasterDetailLayout.js';
+/**
+ * TimelineContainer - Interactive multi-level zoom timeline
+ *
+ * A composite timeline component with 4 zoom levels (year, month, day, hour),
+ * entry selection, keyboard shortcuts, scroll-to-zoom, and drill-down navigation.
+ * Uses DOS/CGA aesthetic with eidotter primitives.
+ *
+ * Supports both controlled and uncontrolled patterns for zoom and selection.
+ * When zoom is uncontrolled, clicking a bucket drills down into that time period.
+ */
+export const TimelineContainer = ({ entries, mode = 'interactive', zoomLevel: controlledZoom, defaultZoomLevel = 'month', onZoomChange, selectedEntryId: controlledSelection, defaultSelectedEntryId, onSelectEntry, sortOrder = 'desc', scrollToZoom = true, keyboardShortcuts = true, renderEntry, pageSize = 10, onLoadMore, ...props }) => {
+    const isStatic = mode === 'static';
+    const isFeed = mode === 'feed';
+    const isVerticalFeed = isStatic || isFeed;
+    // Master-detail (DMNC-878) is NOT a vertical feed — it has its own split
+    // layout, sort path, focus model, and keyboard handling — but it shares the
+    // feed modes' suppression of zoom controls / scroll-to-zoom / drill-down.
+    // Each `isVerticalFeed` gate is audited individually rather than widened.
+    const isMasterDetail = mode === 'master-detail';
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    // Drill-down announcement for screen readers
+    const [announcement, setAnnouncement] = useState('');
+    const { zoomLevel, canZoomIn, canZoomOut, breadcrumbs, currentPeriod, isDrillDownEnabled, drillDown, drillUp, reset, } = useDrillDown({
+        zoomLevel: controlledZoom,
+        defaultZoomLevel,
+        onZoomChange,
+    });
+    const { selectedEntryId, select, toggle, deselect, } = useSelection({
+        selectedEntryId: controlledSelection,
+        defaultSelectedEntryId,
+        onSelectEntry,
+    });
+    // Group entries by zoom level, then filter by drill-down period
+    const allBuckets = useMemo(() => groupEntriesByZoom(entries, zoomLevel, sortOrder), [entries, zoomLevel, sortOrder]);
+    // Determine parent zoom level for filtering
+    const parentZoomLevel = breadcrumbs.length > 0
+        ? ['year', 'month', 'day', 'hour'][breadcrumbs.length - 1]
+        : null;
+    const buckets = useMemo(() => currentPeriod && parentZoomLevel
+        ? filterBucketsByPeriod(allBuckets, currentPeriod, parentZoomLevel)
+        : allBuckets, [allBuckets, currentPeriod, parentZoomLevel]);
+    // Drill into a specific bucket — shared by bucket clicks, the [+] zoom-in
+    // control, and the Ctrl/Cmd+= shortcut.
+    const drillIntoBucket = useCallback((bucket) => {
+        if (!canZoomIn)
+            return;
+        drillDown(bucket.periodStart, bucket.label);
+        setAnnouncement(`Showing ${zoomLevel === 'year' ? 'months' : zoomLevel === 'month' ? 'days' : 'hours'} in ${bucket.label}`);
+    }, [canZoomIn, drillDown, zoomLevel]);
+    // Generic zoom-in has no inherent target (unlike drill-up, which pops the
+    // stack), so the [+] control and Ctrl/Cmd+= drill into the first bucket of the
+    // current view — the most recent period under the default sortOrder. Clicking
+    // a specific bucket still drills into that exact period.
+    const handleZoomIn = useCallback(() => {
+        if (buckets.length > 0)
+            drillIntoBucket(buckets[0]);
+    }, [buckets, drillIntoBucket]);
+    // Scroll-to-zoom: Ctrl/Cmd + wheel (interactive mode only)
+    useEffect(() => {
+        if (isVerticalFeed || isMasterDetail || !scrollToZoom)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        let rafId = null;
+        const handleWheel = (e) => {
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            if (rafId !== null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                // Scroll-down zooms out (pops drill-down stack).
+                // Scroll-up is a no-op — drill-down requires clicking a specific
+                // bucket to know which period to enter. Scroll has no period context.
+                if (e.deltaY > 0) {
+                    drillUp();
+                }
+                rafId = null;
+            });
+        };
+        el.addEventListener('wheel', handleWheel, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', handleWheel);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [isVerticalFeed, isMasterDetail, scrollToZoom, isDrillDownEnabled, canZoomIn, drillUp]);
+    // Keyboard shortcuts (interactive mode only). Master-detail has its own
+    // keyboard model (arrow-walk + Escape) inside MasterDetailLayout, so the
+    // zoom-shortcut handler is suppressed for it as well.
+    useEffect(() => {
+        if (isVerticalFeed || isMasterDetail || !keyboardShortcuts)
+            return;
+        const handleKeyDown = (e) => {
+            if (!containerRef.current?.contains(document.activeElement) &&
+                document.activeElement !== containerRef.current) {
+                return;
+            }
+            const isMod = e.ctrlKey || e.metaKey;
+            if (isMod && (e.key === '=' || e.key === '+')) {
+                e.preventDefault();
+                handleZoomIn();
+            }
+            else if (isMod && e.key === '-') {
+                e.preventDefault();
+                drillUp();
+            }
+            else if (isMod && e.key === '0') {
+                e.preventDefault();
+                reset();
+                setAnnouncement('Showing all years');
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                deselect();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isVerticalFeed, isMasterDetail, keyboardShortcuts, handleZoomIn, drillUp, reset, deselect]);
+    // Bucket click triggers drill-down
+    const handleBucketClick = useCallback((bucket) => drillIntoBucket(bucket), [drillIntoBucket]);
+    // Focus management: move focus after drill-down transitions
+    const prevBreadcrumbLengthRef = useRef(breadcrumbs.length);
+    useEffect(() => {
+        if (breadcrumbs.length !== prevBreadcrumbLengthRef.current) {
+            prevBreadcrumbLengthRef.current = breadcrumbs.length;
+            // Focus first interactive element in the content area
+            const firstTrigger = contentRef.current?.querySelector('.eidotter-timeline-card__trigger, .timeline-view__bucket-button, .eidotter-timeline-node[role="button"]');
+            if (firstTrigger) {
+                requestAnimationFrame(() => firstTrigger.focus());
+            }
+        }
+    }, [breadcrumbs.length]);
+    // Sort entries for the flat-list modes (static, feed, and master-detail —
+    // the rail and arrow-walk need a stable sorted order).
+    const sortedEntries = useMemo(() => {
+        if (!isVerticalFeed && !isMasterDetail)
+            return entries;
+        return [...entries].sort((a, b) => {
+            const cmp = a.date.localeCompare(b.date);
+            return sortOrder === 'desc' ? -cmp : cmp;
+        });
+    }, [isVerticalFeed, isMasterDetail, entries, sortOrder]);
+    // Pagination for feed mode. Clamp pageSize at the boundary — pageSize=0 or
+    // negative would otherwise produce a permanent LOAD MORE button that never
+    // advances. Step is always ≥1.
+    const safePageSize = Math.max(1, pageSize);
+    const [visibleCount, setVisibleCount] = useState(safePageSize);
+    // Clamp visibleCount when entries shrink. Crucially, do NOT reset to
+    // pageSize when entries grow — consumers using `onLoadMore` to fetch and
+    // append the next batch (the documented backend-pagination flow) need
+    // visibleCount to stay where the user clicked. Reset to pageSize only
+    // happens when the new entries length is below the current visibleCount.
+    useEffect(() => {
+        if (!isFeed)
+            return;
+        setVisibleCount((prev) => {
+            const max = sortedEntries.length;
+            if (max === 0)
+                return safePageSize;
+            if (prev > max)
+                return Math.max(safePageSize, max);
+            return prev;
+        });
+    }, [isFeed, safePageSize, sortedEntries.length]);
+    const visibleEntries = useMemo(() => (isFeed ? sortedEntries.slice(0, visibleCount) : sortedEntries), [isFeed, sortedEntries, visibleCount]);
+    const hasMore = isFeed && visibleCount < sortedEntries.length;
+    const handleLoadMore = useCallback(() => {
+        const next = Math.min(visibleCount + safePageSize, sortedEntries.length);
+        if (next <= visibleCount)
+            return; // already at cap — no-op, no callback
+        setVisibleCount(next);
+        onLoadMore?.(next);
+    }, [visibleCount, safePageSize, sortedEntries.length, onLoadMore]);
+    const dateFormatter = useMemo(() => new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }), []);
+    const formatDate = (iso) => {
+        try {
+            return dateFormatter.format(new Date(iso));
+        }
+        catch {
+            return iso;
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, ...props, className: cn('font-dos text-dos-text-brand p-4 min-h-[200px]', 'eidotter-timeline-container', isStatic && 'eidotter-timeline-container--static', isFeed && 'eidotter-timeline-container--feed', isMasterDetail && 'eidotter-timeline-container--master-detail', props.className), role: "region", "aria-label": props['aria-label'] ?? 'Timeline', tabIndex: isVerticalFeed || isMasterDetail ? undefined : 0, children: [_jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), !isVerticalFeed && !isMasterDetail && (_jsx(ZoomControls, { zoomLevel: zoomLevel, canZoomIn: canZoomIn, canZoomOut: canZoomOut, onZoomIn: handleZoomIn, onZoomOut: drillUp, onReset: reset, breadcrumbs: isDrillDownEnabled ? breadcrumbs : [], onBreadcrumbClick: (index) => {
+                    // Navigate to a specific breadcrumb level
+                    const stepsBack = breadcrumbs.length - 1 - index;
+                    for (let i = 0; i < stepsBack; i++) {
+                        drillUp();
+                    }
+                } })), _jsx("div", { ref: contentRef, children: entries.length === 0 ? (_jsxs("div", { className: "eidotter-timeline-container__empty", role: "status", children: [_jsx("p", { children: "C:\\TIMELINE> No entries found." }), _jsx("p", { children: "_" })] })) : isStatic ? (_jsx(TimelineAxis, { children: _jsx("div", { className: "eidotter-timeline-container__static", role: "list", "aria-label": "Timeline", children: sortedEntries.map((entry) => {
+                            const defaultRender = () => (_jsx(TimelineEntryCard, { entry: entry, isSelected: false, isExpanded: true }));
+                            return (_jsxs("div", { className: "eidotter-timeline-container__static-entry", role: "listitem", children: [_jsx("div", { className: "timeline-view__node", children: _jsx(TimelineNode, { shape: "circle", size: "medium", variant: "default", label: formatDate(entry.date), labelPosition: "right" }) }), renderEntry
+                                        ? renderEntry(entry, { isExpanded: true, isSelected: false, defaultRender })
+                                        : defaultRender()] }, entry.id));
+                        }) }) })) : isFeed ? (_jsxs(TimelineAxis, { children: [_jsx("div", { className: "eidotter-timeline-container__feed", role: "list", "aria-label": "Timeline", children: visibleEntries.map((entry) => {
+                                const isSelected = selectedEntryId === entry.id;
+                                const defaultRender = () => (_jsx(TimelineEntryCard, { entry: entry, isSelected: isSelected, isExpanded: isSelected, onSelect: toggle }));
+                                return (_jsxs("div", { className: "eidotter-timeline-container__feed-entry", role: "listitem", children: [_jsx("div", { className: "timeline-view__node", children: _jsx(TimelineNode, { shape: "circle", size: "medium", variant: "default", label: formatDate(entry.date), labelPosition: "right" }) }), renderEntry
+                                            ? renderEntry(entry, { isExpanded: isSelected, isSelected, defaultRender })
+                                            : defaultRender()] }, entry.id));
+                            }) }), hasMore && (_jsx("button", { type: "button", className: "eidotter-timeline-container__load-more", onClick: handleLoadMore, "aria-label": `Load more entries (showing ${visibleCount} of ${sortedEntries.length})`, children: "LOAD MORE..." }))] })) : isMasterDetail ? (_jsx(MasterDetailLayout, { entries: sortedEntries, selectedEntryId: selectedEntryId, onSelect: select, onDeselect: deselect, renderEntry: renderEntry, formatDate: formatDate })) : buckets.length === 0 && currentPeriod ? (_jsx(TimelineAxis, { children: _jsxs("div", { className: "eidotter-timeline-container__empty", role: "status", children: [_jsxs("p", { children: ["C:\\TIMELINE> No entries in ", breadcrumbs[breadcrumbs.length - 1]?.label ?? 'this period', "."] }), _jsx("p", { children: "_" })] }) })) : (_jsx(TimelineAxis, { children: _jsx(TimelineContent, { zoomLevel: zoomLevel, buckets: buckets, selectedEntryId: selectedEntryId, onEntrySelect: toggle, onBucketClick: handleBucketClick, renderEntry: renderEntry }) })) })] }));
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ZoomLevel, DateBucket, TimelineRenderEntry } from './types';
+import type { ZoomLevel, DateBucket, TimelineRenderEntry } from './types.js';
 export interface TimelineContentProps {
     zoomLevel: ZoomLevel;
     buckets: readonly DateBucket[];

package/dist/components/TimelineContainer/components/TimelineContent.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { YearView, MonthView, DayView, HourView } from './views/index.js';
+/**
+ * View switcher that renders the appropriate zoom level view.
+ */
+export const TimelineContent = ({ zoomLevel, buckets, selectedEntryId, onEntrySelect, onBucketClick, renderEntry, }) => {
+    switch (zoomLevel) {
+        case 'year':
+            // Year view shows bucket counts, not individual entries — renderEntry not applicable.
+            return _jsx(YearView, { buckets: buckets, onBucketClick: onBucketClick });
+        case 'month':
+            return (_jsx(MonthView, { buckets: buckets, selectedEntryId: selectedEntryId, onEntrySelect: onEntrySelect, onBucketClick: onBucketClick, renderEntry: renderEntry }));
+        case 'day':
+            return (_jsx(DayView, { buckets: buckets, selectedEntryId: selectedEntryId, onEntrySelect: onEntrySelect, renderEntry: renderEntry }));
+        case 'hour':
+            return (_jsx(HourView, { buckets: buckets, selectedEntryId: selectedEntryId, onEntrySelect: onEntrySelect, renderEntry: renderEntry }));
+        default: {
+            const _exhaustive = zoomLevel;
+            return _exhaustive;
+        }
+    }
+};

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { TimelineEntryData } from './types';
-import './TimelineEntryCard.css';
+import type { TimelineEntryData } from './types.js';
 export interface TimelineEntryCardProps {
     entry: TimelineEntryData;
     isSelected: boolean;