eidotter 0.37.4 → 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/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));