eidotter 0.36.0 → 0.37.0

package/dist/components/LabeledProgress/components/LabeledProgress.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS-styled labelled progress bar — optional leading label, a width-accurate
+ * amber fill, and a trailing value with a custom suffix (DMNC-861).
+ *
+ * A standalone div-bar (not the block-fill `<Progress>`): `<Progress>`'s
+ * monospace `█`/`░` fill renders wider than the track in some fonts, so a
+ * solid-fill bar is width-accurate. The fill animates via `transform: scaleX`
+ * (compositor-only; reduced-motion disables it).
+ */
+export const LabeledProgress = ({ label, value, max = 100, valueSuffix = '%', showValue = true, className, 'aria-label': ariaLabel, }) => {
+    const pct = max === 0 ? 0 : Math.min(100, Math.max(0, Math.round((value / max) * 100)));
+    return (_jsxs("div", { className: cn('eidotter-labeled-progress', 'flex items-center gap-3', className), children: [label && (_jsx("span", { className: "eidotter-labeled-progress__label font-dos text-dos-text-sm text-dos-text-muted shrink-0", children: label })), _jsx("div", { role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel ?? (typeof label === 'string' ? label : `${pct}${valueSuffix}`), className: "eidotter-labeled-progress__track relative h-3 flex-1 overflow-hidden bg-dos-bg-primary border border-dos-border-disabled", children: _jsx("div", { className: "eidotter-labeled-progress__fill absolute inset-y-0 left-0 w-full bg-dos-bg-accent", style: { transform: `scaleX(${pct / 100})` } }) }), showValue && (_jsxs("span", { className: "eidotter-labeled-progress__value font-dos text-dos-text-sm text-dos-text-accent tabular-nums shrink-0", children: [pct, valueSuffix] }))] }));
+};
+LabeledProgress.displayName = 'LabeledProgress';

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

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

package/dist/components/LabeledProgress/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { LabeledProgress } from './components';
-export type { LabeledProgressProps } from './components';
+export { LabeledProgress } from './components/index.js';
+export type { LabeledProgressProps } from './components/index.js';

package/dist/components/LabeledProgress/index.js

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

package/dist/components/LedgerRow/components/LedgerRow.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { CopyButton } from '../../CopyButton/index.js';
+/**
+ * DOS-styled ledger row — a label/note on the left and a right-aligned value
+ * with optional copy + trailing slot. A generic value-row primitive.
+ *
+ * Generalised from Steuerdash's money-specific LedgerRow (DMNC-857): currency
+ * formatting, Paperless links, and verify/shared badges are intentionally NOT
+ * built in — pass a pre-formatted `value`, a raw `copyValue` for the copy
+ * affordance, and compose domain chrome via `trailing`. Routes through
+ * `text-dos-*` semantic roles so it re-themes.
+ */
+export const LedgerRow = ({ label, note, value, copyValue, trailing, pending, className, }) => (_jsxs("div", { className: cn('eidotter-ledger-row', 'flex items-center gap-3 py-2 border-b border-dos-border-disabled', pending && 'opacity-50', className), children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-dos text-dos-text-sm text-dos-text-primary", children: label }), note && _jsx("p", { className: "font-dos text-dos-text-xs text-dos-text-muted mt-0.5", children: note })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("span", { className: "font-dos text-dos-text-sm text-dos-text-accent tabular-nums", children: value }), copyValue !== undefined && _jsx(CopyButton, { value: copyValue }), trailing] })] }));
+LedgerRow.displayName = 'LedgerRow';

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

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

package/dist/components/LedgerRow/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { LedgerRow } from './components';
-export type { LedgerRowProps } from './components';
+export { LedgerRow } from './components/index.js';
+export type { LedgerRowProps } from './components/index.js';

package/dist/components/LedgerRow/index.js

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

package/dist/components/LegalPage/components/LegalPage.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './LegalPage.css';
 export interface LegalPageProps {
     /** Heading shown in the hero (e.g., "Impressum", "Datenschutzerklärung") */
     title: string;

package/dist/components/LegalPage/components/LegalPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+/**
+ * Layout primitive for Impressum / Datenschutz / other compact legal pages.
+ *
+ * Wraps the `.legal-hero` + `.legal-body` chrome that previously lived
+ * duplicated across portfolio surfaces. Consumers compose freeform
+ * `<h2>`/`<p>`/`<ul>` body content (or pre-built clauses from this module)
+ * and the wrapper handles spacing, type scale, and the `>` list bullet.
+ */
+export const LegalPage = ({ title, date, intro, home, children, className, ...props }) => (_jsxs("div", { className: cn('eidotter-legal-page', className), ...props, children: [home && _jsx("div", { className: "eidotter-legal-page__home", children: home }), _jsxs("article", { children: [_jsxs("header", { className: "eidotter-legal-page__hero", children: [_jsx("p", { className: "eidotter-legal-page__date", children: date }), _jsx("h1", { children: title }), intro && _jsx("div", { className: "eidotter-legal-page__intro", children: intro })] }), _jsx("div", { className: "eidotter-legal-page__body", children: children })] })] }));

package/dist/components/LegalPage/components/clauses.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_ADDRESS = (_jsxs(_Fragment, { children: ["Haus-Endt-Str. 149A", _jsx("br", {}), "40593 D\u00FCsseldorf", _jsx("br", {}), "Deutschland"] }));
+const DEFAULT_NAME = 'Dominic Kennedy';
+/** Standalone postal address block — wrapped in `<address>`. */
+export const AddressBlock = ({ email, address = DEFAULT_ADDRESS, name = DEFAULT_NAME, }) => (_jsxs("address", { children: [name, _jsx("br", {}), address, email && (_jsxs(_Fragment, { children: [_jsx("br", {}), "E-Mail: ", _jsx("a", { href: `mailto:${email}`, children: email })] }))] }));
+// ---------- Impressum clauses ----------
+/** § 5 DDG header + address. */
+export const ImpressumAddress = (props) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Angaben gem\u00E4\u00DF \u00A7 5 DDG" }), _jsx(AddressBlock, { ...props })] }));
+/** "Kontakt" header + mailto link. */
+export const ImpressumContact = ({ email }) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Kontakt" }), _jsxs("p", { children: ["E-Mail: ", _jsx("a", { href: `mailto:${email}`, children: email })] })] }));
+/** § 18 Abs. 2 MStV responsibility block — short address (no country line). */
+export const ImpressumResponsible = ({ name = DEFAULT_NAME }) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Inhaltlich verantwortlich (\u00A7 18 Abs. 2 MStV)" }), _jsxs("address", { children: [name, _jsx("br", {}), "Haus-Endt-Str. 149A", _jsx("br", {}), "40593 D\u00FCsseldorf"] })] }));
+/** §§ 7-10 DDG content liability disclaimer. */
+export const ImpressumLiabilityContent = () => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Haftung f\u00FCr Inhalte" }), _jsx("p", { children: "Ich erstelle die Inhalte dieser Seiten mit gr\u00F6\u00DFter Sorgfalt, \u00FCbernehme jedoch keine Gew\u00E4hr f\u00FCr Richtigkeit, Vollst\u00E4ndigkeit oder Aktualit\u00E4t. Als Diensteanbieter bin ich gem\u00E4\u00DF \u00A7 7 Abs. 1 DDG f\u00FCr eigene Inhalte verantwortlich. Eine Pflicht zur \u00DCberwachung fremder Informationen besteht gem\u00E4\u00DF \u00A7\u00A7 8\u201310 DDG nicht." })] }));
+/** External-link liability disclaimer. */
+export const ImpressumLiabilityLinks = () => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Haftung f\u00FCr Links" }), _jsx("p", { children: "Diese Website verlinkt auf externe Seiten Dritter, auf deren Inhalte ich keinen Einfluss habe. F\u00FCr verlinkte Inhalte haftet der jeweilige Anbieter. Eine dauerhafte Kontrolle ist ohne Anhaltspunkte f\u00FCr Rechtsverletzungen nicht zumutbar. Bei Bekanntwerden von Verst\u00F6\u00DFen entferne ich solche Links umgehend." })] }));
+/** "Verantwortlicher" header + address with email. */
+export const DatenschutzController = ({ email, name = DEFAULT_NAME }) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Verantwortlicher" }), _jsxs("address", { children: [name, _jsx("br", {}), "Haus-Endt-Str. 149A", _jsx("br", {}), "40593 D\u00FCsseldorf, Deutschland", _jsx("br", {}), "E-Mail: ", _jsx("a", { href: `mailto:${email}`, children: email })] })] }));
+/** Cloudflare hosting clause + Art. 6 Abs. 1 lit. f legal basis. */
+export const DatenschutzHosting = () => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Hosting" }), _jsx("p", { children: "Cloudflare Pages stellt diese Website bereit. Beim Seitenaufruf erhebt Cloudflare automatisch technische Zugriffsdaten (darunter Ihre IP-Adresse), um die Seite auszuliefern." }), _jsx("p", { className: "eidotter-legal-page__basis", children: "Anbieter: Cloudflare, Inc., 101 Townsend St, San Francisco, CA 94107, USA. Rechtsgrundlage: Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse)." })] }));
+/** PostHog webanalytics clause — EU servers, reverse-proxied, no cookies. */
+export const DatenschutzPostHog = ({ proxyHost = 'e.dmnc.tech' }) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Webanalyse \u2014 PostHog" }), _jsxs("p", { children: ["Diese Website nutzt PostHog zur Analyse des Nutzungsverhaltens. PostHog l\u00E4uft auf EU-Servern (eu.posthog.com). Die Daten\u00FCbertragung erfolgt \u00FCber einen Reverse-Proxy auf der Domain ", proxyHost, " \u2014 es besteht keine direkte Verbindung zu PostHog-Servern."] }), _jsxs("p", { children: ["Es werden ", _jsx("strong", { children: "keine Cookies" }), " gesetzt. PostHog speichert Daten ausschlie\u00DFlich im Arbeitsspeicher des Browsers (Session Memory). Personenbezogene Profile entstehen nicht, solange Sie sich nicht aktiv identifizieren."] }), _jsxs("p", { children: [_jsx("strong", { children: "Session Recording:" }), " PostHog zeichnet anonymisierte Sitzungswiederholungen auf. Alle Eingabefelder werden automatisch maskiert."] }), _jsx("p", { className: "eidotter-legal-page__basis", children: "Rechtsgrundlage: Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse)." })] }));
+/** Local Perfect DOS VGA 437 font clause. */
+export const DatenschutzFonts = () => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Schriftarten" }), _jsx("p", { children: "Die Schriftart \u201EPerfect DOS VGA 437\u201C wird lokal von diesem Server ausgeliefert. Es findet keine Verbindung zu externen Schriftarten-Diensten statt." })] }));
+/** SSL/TLS encryption clause. */
+export const DatenschutzEncryption = () => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Verschl\u00FCsselung" }), _jsx("p", { children: "Diese Website nutzt SSL-/TLS-Verschl\u00FCsselung. Eine verschl\u00FCsselte Verbindung erkennen Sie am \u201Ehttps://\u201C in der Adresszeile Ihres Browsers." })] }));
+/** DSGVO Art. 15-21 rights list + Art. 77 supervisory-authority complaint clause. */
+export const DatenschutzRights = ({ email, supervisoryAuthority = 'die Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen', }) => (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Ihre Rechte" }), _jsx("p", { children: "Die DSGVO gew\u00E4hrt Ihnen folgende Rechte:" }), _jsxs("ul", { children: [_jsx("li", { children: "Auskunft (Art. 15)" }), _jsx("li", { children: "Berichtigung (Art. 16)" }), _jsx("li", { children: "L\u00F6schung (Art. 17)" }), _jsx("li", { children: "Einschr\u00E4nkung der Verarbeitung (Art. 18)" }), _jsx("li", { children: "Daten\u00FCbertragbarkeit (Art. 20)" }), _jsx("li", { children: "Widerspruch (Art. 21)" })] }), email && (_jsxs("p", { children: ["Zur Aus\u00FCbung Ihrer Rechte gen\u00FCgt eine formlose E-Mail an", ' ', _jsx("a", { href: `mailto:${email}`, children: email }), "."] })), _jsxs("p", { children: ["Sie k\u00F6nnen sich bei einer Aufsichtsbeh\u00F6rde beschweren (Art. 77 DSGVO). Zust\u00E4ndig ist ", supervisoryAuthority, "."] })] }));

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

@@ -1,4 +1,4 @@
-export { LegalPage } from './LegalPage';
-export type { LegalPageProps } from './LegalPage';
-export { AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './clauses';
-export type { AddressBlockProps, DatenschutzControllerProps, DatenschutzPostHogProps, DatenschutzRightsProps, } from './clauses';
+export { LegalPage } from './LegalPage.js';
+export type { LegalPageProps } from './LegalPage.js';
+export { AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './clauses.js';
+export type { AddressBlockProps, DatenschutzControllerProps, DatenschutzPostHogProps, DatenschutzRightsProps, } from './clauses.js';

package/dist/components/LegalPage/components/index.js

@@ -0,0 +1,2 @@
+export { LegalPage } from './LegalPage.js';
+export { AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './clauses.js';

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

@@ -1,2 +1,2 @@
-export { LegalPage, AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './components';
-export type { LegalPageProps, AddressBlockProps, DatenschutzControllerProps, DatenschutzPostHogProps, DatenschutzRightsProps, } from './components';
+export { LegalPage, AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './components/index.js';
+export type { LegalPageProps, AddressBlockProps, DatenschutzControllerProps, DatenschutzPostHogProps, DatenschutzRightsProps, } from './components/index.js';

package/dist/components/LegalPage/index.js

@@ -0,0 +1 @@
+export { LegalPage, AddressBlock, ImpressumAddress, ImpressumContact, ImpressumResponsible, ImpressumLiabilityContent, ImpressumLiabilityLinks, DatenschutzController, DatenschutzHosting, DatenschutzPostHog, DatenschutzFonts, DatenschutzEncryption, DatenschutzRights, } from './components/index.js';

package/dist/components/Lightbox/components/Lightbox.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import type { TimelineImage } from '../../TimelineContainer/components/types';
-import '../../../styles/keyframes.css';
-import './Lightbox.css';
+import type { TimelineImage } from '../../TimelineContainer/components/types.js';
 export interface LightboxProps {
     /** Images to navigate between. */
     images: TimelineImage[];

package/dist/components/Lightbox/components/Lightbox.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button as AriaButton, ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
+import { Icon } from '../../Icon/components/Icon.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Fullscreen image viewer built on the same React Aria primitives as Modal.
+ *
+ * Reuses Modal's CRT phosphor enter/exit animations, overlay tokens, and close
+ * button styling. Adds prev/next, counter, caption, keyboard nav, and touch
+ * swipe — see Tasks 4 and 5.
+ */
+export const Lightbox = ({ images, initialIndex = 0, isOpen, onClose, onIndexChange, }) => {
+    // Clamp the requested initial index so callers passing stale indices
+    // (e.g. Gallery.state.index after entry.images shrinks) don't crash.
+    const safeInitial = images.length === 0
+        ? 0
+        : Math.max(0, Math.min(initialIndex, images.length - 1));
+    const [index, setIndex] = useState(safeInitial);
+    // Reset to the requested initial index whenever the lightbox is reopened.
+    useEffect(() => {
+        if (isOpen)
+            setIndex(safeInitial);
+    }, [isOpen, safeInitial]);
+    // If `images` shrinks while the lightbox is open and the current index
+    // would be out of bounds, snap back to the last valid image instead of
+    // dereferencing undefined.
+    useEffect(() => {
+        if (images.length > 0 && index >= images.length) {
+            setIndex(images.length - 1);
+        }
+    }, [images.length, index]);
+    const goTo = useCallback((next) => {
+        if (next < 0 || next >= images.length || next === index)
+            return;
+        setIndex(next);
+        onIndexChange?.(next);
+    }, [images.length, index, onIndexChange]);
+    const goPrev = useCallback(() => goTo(index - 1), [goTo, index]);
+    const goNext = useCallback(() => goTo(index + 1), [goTo, index]);
+    // Touch swipe — minimal hand-rolled gesture, no library.
+    const SWIPE_THRESHOLD = 30; // px
+    const touchStartXRef = React.useRef(null);
+    const onTouchStart = useCallback((e) => {
+        touchStartXRef.current = e.touches[0]?.clientX ?? null;
+    }, []);
+    const onTouchEnd = useCallback((e) => {
+        const startX = touchStartXRef.current;
+        touchStartXRef.current = null;
+        if (startX == null)
+            return;
+        const endX = e.changedTouches[0]?.clientX ?? startX;
+        const dx = endX - startX;
+        if (Math.abs(dx) < SWIPE_THRESHOLD)
+            return;
+        if (dx < 0)
+            goNext();
+        else
+            goPrev();
+    }, [goNext, goPrev]);
+    // Keyboard navigation. React Aria handles Esc dismissal via `isDismissable`,
+    // but does not own the arrow keys, so we listen at the window level while open.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                goPrev();
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                goNext();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [isOpen, goPrev, goNext]);
+    // Empty array: nothing to show. (Note: do NOT early-return on !isOpen here —
+    // React Aria's AriaModalOverlay needs to stay mounted across isOpen
+    // transitions so it can play modal-crt-exit. The overlay handles its own
+    // visibility based on the `isOpen` prop.)
+    if (images.length === 0) {
+        return null;
+    }
+    // Defensive: if a render slips through with an out-of-range index before
+    // the clamp effect has run, fall back to the last valid image rather than
+    // crashing on undefined dereference.
+    const safeIndex = Math.max(0, Math.min(index, images.length - 1));
+    const current = images[safeIndex];
+    const hasPrev = safeIndex > 0;
+    const hasNext = safeIndex < images.length - 1;
+    return (_jsx(AriaModalOverlay, { isOpen: isOpen, onOpenChange: (open) => { if (!open)
+            onClose(); }, isDismissable: true, className: ({ isEntering, isExiting }) => cn('eidotter-lightbox-overlay', isEntering && 'eidotter-lightbox-overlay--entering', isExiting && 'eidotter-lightbox-overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-lightbox', isEntering && 'eidotter-lightbox--entering', isExiting && 'eidotter-lightbox--exiting'), children: _jsxs(AriaDialog, { "aria-label": current.alt || 'Image viewer', className: "eidotter-lightbox__container outline-none", children: [_jsx(AriaButton, { className: "eidotter-lightbox__close", onPress: onClose, "aria-label": "Close lightbox", children: _jsx(Icon, { name: "Close", size: "S" }) }), _jsx(AriaButton, { className: "eidotter-lightbox__nav eidotter-lightbox__nav--prev", onPress: goPrev, isDisabled: !hasPrev, "aria-label": "Previous image", children: "\u25C0" }), _jsx(AriaButton, { className: "eidotter-lightbox__nav eidotter-lightbox__nav--next", onPress: goNext, isDisabled: !hasNext, "aria-label": "Next image", children: "\u25B6" }), _jsxs("figure", { className: "eidotter-lightbox__figure", children: [_jsx("img", { className: "eidotter-lightbox__image", src: current.src, alt: current.alt, width: current.width, height: current.height, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }), current.caption && (_jsx("figcaption", { className: "eidotter-lightbox__caption", children: current.caption }))] }), _jsxs("span", { className: "eidotter-lightbox__counter", "aria-live": "polite", children: ["[ ", safeIndex + 1, " / ", images.length, " ]"] })] }) }) }));
+};
+Lightbox.displayName = 'Lightbox';

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

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

package/dist/components/Lightbox/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { Lightbox } from './components';
-export type { LightboxProps } from './components';
+export { Lightbox } from './components/index.js';
+export type { LightboxProps } from './components/index.js';

package/dist/components/Lightbox/index.js

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

package/dist/components/Modal/components/Modal.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import '../../../styles/keyframes.css';
-import './Modal.css';
 export interface ModalProps {
     /** Whether the modal is open */
     isOpen: boolean;

package/dist/components/Modal/components/Modal.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef } from 'react';
+import { Button as AriaButton, ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
+import { Icon } from '../../Icon/components/Icon.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS-styled Modal with React Aria Dialog.
+ * React Aria provides focus trapping, scroll lock, backdrop dismiss, and escape handling.
+ * CRT phosphor enter/exit animations via isEntering/isExiting render props.
+ * Ref forwards to the inner AriaDialog element (not the overlay).
+ */
+export const Modal = forwardRef(({ isOpen, onOpenChange, onClose, title, children, footer, className, }, ref) => {
+    const prevOpenRef = useRef(isOpen);
+    const interactionRef = useRef(false);
+    // Notify onOpenChange on prop-driven state changes only (observer pattern for agents).
+    // User-initiated changes are handled in handleOpenChange to avoid double-firing.
+    useEffect(() => {
+        if (isOpen !== prevOpenRef.current) {
+            prevOpenRef.current = isOpen;
+            if (!interactionRef.current) {
+                onOpenChange?.(isOpen);
+                if (!isOpen)
+                    onClose?.();
+            }
+            interactionRef.current = false;
+        }
+    }, [isOpen, onOpenChange, onClose]);
+    const handleOpenChange = (open) => {
+        interactionRef.current = true;
+        onOpenChange?.(open);
+        if (!open)
+            onClose?.();
+    };
+    return (_jsx(AriaModalOverlay, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: true, className: ({ isEntering, isExiting }) => cn('eidotter-modal-overlay', isEntering && 'eidotter-modal-overlay--entering', isExiting && 'eidotter-modal-overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-modal', isEntering && 'eidotter-modal--entering', isExiting && 'eidotter-modal--exiting'), children: _jsxs(AriaDialog, { ref: ref, "aria-label": title, className: cn('eidotter-modal__container outline-none', className), children: [_jsxs("header", { className: "eidotter-modal__header", children: [_jsx("h2", { className: "eidotter-modal__title", children: title }), _jsx(AriaButton, { className: "eidotter-modal__close", onPress: () => handleOpenChange(false), "aria-label": "Close modal", children: _jsx(Icon, { name: "Close", size: "S" }) })] }), _jsx("div", { className: "eidotter-modal__body", children: children }), footer && (_jsx("footer", { className: "eidotter-modal__footer", children: footer }))] }) }) }));
+});
+Modal.displayName = 'Modal';

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

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

package/dist/components/Modal/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { Modal } from './components';
-export type { ModalProps } from './components';
+export { Modal } from './components/index.js';
+export type { ModalProps } from './components/index.js';

package/dist/components/Modal/index.js

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

package/dist/components/Nav/components/Nav.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Nav.css';
 export interface NavItem {
     /** Display label */
     label: string;

package/dist/components/Nav/components/Nav.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Icon } from '../../Icon/index.js';
+const variantClasses = {
+    retro: 'eidotter-nav--retro',
+    modern: 'eidotter-nav--modern',
+};
+export const DesktopNav = ({ items, activeHref, variant = 'retro', linkComponent, className, }) => {
+    const LinkTag = linkComponent || 'a';
+    return (_jsx("nav", { className: cn('eidotter-nav eidotter-nav--desktop', variantClasses[variant], className), "aria-label": "Main navigation", children: _jsx("ul", { className: "eidotter-nav__desktop-list", children: items.map((item) => (_jsx("li", { className: "eidotter-nav__desktop-item", children: _jsx(LinkTag, { href: item.href, className: cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active'), "aria-current": activeHref === item.href ? 'page' : undefined, children: item.label }) }, item.href))) }) }));
+};
+export const MobileNav = ({ items, activeHref, variant = 'retro', linkComponent, className, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const LinkTag = linkComponent || 'a';
+    const triggerRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const panelRef = useRef(null);
+    // Only restore focus to the trigger on an open→close transition, never on the
+    // initial closed mount.
+    const wasOpenRef = useRef(false);
+    const toggle = useCallback(() => setIsOpen(prev => !prev), []);
+    const close = useCallback(() => setIsOpen(false), []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, close]);
+    // Focus management: move focus into the panel on open, restore it to the
+    // MENU trigger on close. The panel is always in the DOM (slide transition),
+    // so `inert` (below) keeps it out of the tab order / a11y tree while closed.
+    useEffect(() => {
+        if (isOpen) {
+            closeButtonRef.current?.focus();
+        }
+        else if (wasOpenRef.current) {
+            triggerRef.current?.focus();
+        }
+        wasOpenRef.current = isOpen;
+    }, [isOpen]);
+    // Focus trap — cycle Tab/Shift+Tab within the open panel.
+    const handlePanelKeyDown = (e) => {
+        if (e.key !== 'Tab' || !isOpen)
+            return;
+        const focusables = panelRef.current?.querySelectorAll('a[href], button:not([disabled])');
+        if (!focusables || focusables.length === 0)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    return (_jsxs("div", { className: cn('eidotter-nav eidotter-nav--mobile', variantClasses[variant], className), children: [_jsx("button", { ref: triggerRef, onClick: toggle, className: "eidotter-nav__menu-trigger", "aria-label": isOpen ? 'Close menu' : 'Open menu', "aria-expanded": isOpen, "aria-controls": "eidotter-mobile-nav-panel", children: "MENU" }), isOpen && (_jsx("div", { className: "eidotter-nav__overlay", onClick: close, "aria-hidden": "true" })), _jsxs("nav", { ref: panelRef, id: "eidotter-mobile-nav-panel", className: cn('eidotter-nav__panel', isOpen && 'eidotter-nav__panel--open'), "aria-label": "Mobile navigation", inert: !isOpen, onKeyDown: handlePanelKeyDown, children: [_jsx("div", { className: "eidotter-nav__panel-header", children: _jsx("button", { ref: closeButtonRef, onClick: close, className: "eidotter-nav__close", "aria-label": "Close menu", children: _jsx(Icon, { name: "Close", size: "S" }) }) }), _jsx("ul", { className: "eidotter-nav__list", children: items.map((item) => (_jsx("li", { className: "eidotter-nav__item", children: _jsx(LinkTag, { href: item.href, className: cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active'), "aria-current": activeHref === item.href ? 'page' : undefined, onClick: close, children: item.label }) }, item.href))) })] })] }));
+};
+export const Nav = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(MobileNav, { ...props }), _jsx(DesktopNav, { ...props })] }));
+};

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

@@ -1,2 +1,2 @@
-export { Nav, DesktopNav, MobileNav } from './Nav';
-export type { NavProps, NavItem } from './Nav';
+export { Nav, DesktopNav, MobileNav } from './Nav.js';
+export type { NavProps, NavItem } from './Nav.js';

package/dist/components/Nav/components/index.js

@@ -0,0 +1 @@
+export { Nav, DesktopNav, MobileNav } from './Nav.js';

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

@@ -1,2 +1,2 @@
-export { Nav, DesktopNav, MobileNav } from './components';
-export type { NavProps, NavItem } from './components';
+export { Nav, DesktopNav, MobileNav } from './components/index.js';
+export type { NavProps, NavItem } from './components/index.js';

package/dist/components/Nav/index.js

@@ -0,0 +1 @@
+export { Nav, DesktopNav, MobileNav } from './components/index.js';

package/dist/components/Notification/components/Notification.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { AlertAction } from '../../Alert/components/Alert';
-import './Notification.css';
+import type { AlertAction } from '../../Alert/components/Alert.js';
 export type NotificationType = 'primary' | 'gray' | 'success' | 'warning' | 'error';
 export interface NotificationProps {
     /** Color/icon variant */

package/dist/components/Notification/components/Notification.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+import { Icon } from '../../Icon/components/Icon.js';
+import { Progress } from '../../Progress/components/Progress.js';
+import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
+const TYPE_ICONS = {
+    primary: 'Info',
+    gray: 'Info',
+    success: 'Done',
+    warning: 'Warning',
+    error: 'Error',
+};
+/**
+ * DOS-styled Notification (toast) with V.37 design: layered amber glow,
+ * featured icon with outline rings, optional progress bar and auto-dismiss.
+ *
+ * Purely presentational — consumers handle positioning.
+ */
+export const Notification = ({ type = 'primary', title, children, actions, onClose, avatar, image, progress, progressLabel, duration, showIcon = true, className, }) => {
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('notification-exit', onClose);
+    // Auto-dismiss timer
+    useEffect(() => {
+        if (duration == null || !onClose)
+            return;
+        const timer = setTimeout(() => triggerClose(), duration);
+        return () => clearTimeout(timer);
+    }, [duration, onClose, triggerClose]);
+    const hasIcon = showIcon && !avatar;
+    const hasProgress = progress != null;
+    return (_jsxs("div", { className: cn('w-full max-w-[400px]', 'font-dos text-dos-text-sm', 'border border-dos-border-default rounded-dos-base', 'eidotter-notification', `eidotter-notification--${type}`, isClosing && 'eidotter-notification--closing', className), onAnimationEnd: handleAnimationEnd, role: type === 'error' ? 'alert' : 'status', "data-type": type, children: [image && (_jsx("div", { className: "eidotter-notification__image", children: image })), _jsxs("div", { className: "flex flex-row gap-4 p-4", children: [avatar && (_jsx("div", { className: "eidotter-notification__avatar flex-shrink-0", children: avatar })), hasIcon && (_jsx("div", { className: "eidotter-notification__icon", children: _jsx(Icon, { name: TYPE_ICONS[type] || 'Info', size: "S", "aria-label": `${type} notification` }) })), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && !hasIcon && !avatar && 'pr-8'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-notification__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-notification__text font-dos leading-[140%]", children: children }))] })), hasProgress && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Progress, { value: progress, max: 100, size: "sm", fullWidth: true, showLabel: false }), progressLabel && (_jsx("div", { className: "eidotter-notification__text font-dos text-dos-text-xs", children: progressLabel }))] })), actions && actions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: actions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-notification__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(AriaButton, { className: "eidotter-notification__close", onPress: triggerClose, "aria-label": "Close notification", children: _jsx(Icon, { name: "Close", size: "S" }) }))] })] }));
+};

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

@@ -1,2 +1,2 @@
-export { Notification } from './Notification';
-export type { NotificationProps, NotificationType } from './Notification';
+export { Notification } from './Notification.js';
+export type { NotificationProps, NotificationType } from './Notification.js';

package/dist/components/Notification/components/index.js

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

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

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

package/dist/components/Notification/index.js

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

package/dist/components/Progress/components/Progress.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Progress.css';
 export interface ProgressProps {
     /** Progress value from 0 to max */
     value?: number;

package/dist/components/Progress/components/Progress.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+const FILLED = '\u2588'; // █
+const EMPTY = '\u2591'; // ░
+const DARK_SHADE = '\u2593'; // ▓
+const MED_SHADE = '\u2592'; // ▒
+const sizeClasses = {
+    sm: 'text-xs',
+    md: 'text-base',
+    lg: 'text-lg',
+    small: 'text-xs',
+    medium: 'text-base',
+    large: 'text-lg',
+};
+const variantClasses = {
+    default: 'eidotter-progress--default',
+    success: 'eidotter-progress--success',
+    warning: 'eidotter-progress--warning',
+    error: 'eidotter-progress--error',
+};
+function buildBarContent(filledCount, totalBlocks, trackStyle) {
+    const emptyCount = totalBlocks - filledCount;
+    if (trackStyle === 'gradient' && filledCount > 0 && filledCount < totalBlocks) {
+        const transChars = Math.min(2, emptyCount);
+        const actualEmpty = emptyCount - transChars;
+        const transition = (transChars >= 1 ? DARK_SHADE : '') +
+            (transChars >= 2 ? MED_SHADE : '');
+        return {
+            filled: FILLED.repeat(filledCount),
+            transition,
+            empty: EMPTY.repeat(actualEmpty),
+        };
+    }
+    return {
+        filled: FILLED.repeat(filledCount),
+        transition: '',
+        empty: EMPTY.repeat(emptyCount),
+    };
+}
+/**
+ * DOS-styled Progress bar with block characters, phosphor glow, and track styles.
+ * Pure presentational — no React Aria needed.
+ */
+export const Progress = forwardRef(({ value = 0, max = 100, indeterminate = false, variant = 'default', size = 'md', trackStyle = 'block', blocks = 20, showLabel = false, fullWidth = false, glow = false, valueText, className, 'aria-label': ariaLabel, ...props }, ref) => {
+    const totalBlocks = Math.min(80, Math.max(3, Math.floor(blocks)));
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const filledBlocks = Math.round((percentage / 100) * totalBlocks);
+    const rootClasses = cn('inline-flex items-center gap-2 font-dos', 'eidotter-progress', sizeClasses[size] || sizeClasses.md, variantClasses[variant] || variantClasses.default, glow && 'eidotter-progress--glow', fullWidth && 'eidotter-progress--full-width', indeterminate && 'eidotter-progress--indeterminate', trackStyle === 'bordered' && 'eidotter-progress--bordered', className);
+    const ariaAttrs = {
+        'aria-label': ariaLabel || `Progress: ${indeterminate ? 'loading' : `${Math.round(percentage)}%`}`,
+    };
+    if (!indeterminate) {
+        ariaAttrs['aria-valuenow'] = value;
+        ariaAttrs['aria-valuemin'] = 0;
+        ariaAttrs['aria-valuemax'] = max;
+    }
+    if (valueText) {
+        ariaAttrs['aria-valuetext'] = valueText;
+    }
+    const isBordered = trackStyle === 'bordered';
+    const trackClasses = cn('eidotter-progress__track', isBordered && 'eidotter-progress__track--borderless');
+    if (indeterminate) {
+        const emptyContent = EMPTY.repeat(totalBlocks);
+        return (_jsxs("div", { ref: ref, className: rootClasses, role: "progressbar", ...ariaAttrs, ...props, children: [_jsxs("span", { className: trackClasses, children: [isBordered && _jsx("span", { className: "eidotter-progress__bracket", children: "[" }), _jsxs("span", { className: "eidotter-progress__bar", children: [_jsx("span", { className: "eidotter-progress__empty", children: emptyContent }), _jsxs("span", { className: "eidotter-progress__scanner", children: [DARK_SHADE, FILLED, DARK_SHADE] })] }), isBordered && _jsx("span", { className: "eidotter-progress__bracket", children: "]" })] }), showLabel && (_jsx("span", { className: "eidotter-progress__label", children: "..." }))] }));
+    }
+    const allFilled = FILLED.repeat(totalBlocks);
+    const allEmpty = EMPTY.repeat(totalBlocks);
+    const { transition: gradientChars } = buildBarContent(filledBlocks, totalBlocks, trackStyle);
+    return (_jsxs("div", { ref: ref, className: rootClasses, role: "progressbar", ...ariaAttrs, ...props, children: [_jsxs("span", { className: trackClasses, children: [isBordered && _jsx("span", { className: "eidotter-progress__bracket", children: "[" }), _jsxs("span", { className: "eidotter-progress__bar", children: [_jsx("span", { className: "eidotter-progress__empty", children: allEmpty }), _jsx("span", { className: "eidotter-progress__fill", style: { '--fill-pct': String(percentage) }, children: allFilled }), gradientChars && (_jsx("span", { className: "eidotter-progress__transition", style: { '--fill-pct': String(percentage) }, children: gradientChars }))] }), isBordered && _jsx("span", { className: "eidotter-progress__bracket", children: "]" })] }), showLabel && (_jsxs("span", { className: "eidotter-progress__label", children: [Math.round(percentage), "%"] }))] }));
+});
+Progress.displayName = 'Progress';

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

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