eidotter 0.21.0 → 0.22.0

package/LICENSE.md

@@ -100,8 +100,14 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 
-## Flexi IBM VGA True
+## Perfect DOS VGA 437
 
-Flexi IBM VGA True v2 — bitmap-style remake of the IBM VGA BIOS font by VileR (int10h.org). Bundled as `src/styles/fonts/Flexi_IBM_VGA_True.ttf` and loaded via `src/styles/fonts.css`.
+Perfect DOS VGA 437 by [Zeh Fernando](https://zehfernando.com) (2002, updated 2008) — a pixel-perfect-vector TrueType font emulating the MS-DOS/Text mode VGA font with the 437 codepage. Every glyph outline is axis-aligned (no curves); scales cleanly at any size.
+
+Bundled as `src/styles/fonts/Perfect_DOS_VGA_437.ttf` and loaded via `src/styles/fonts.css` (eiDotter v0.22.0 onwards). Free to redistribute and use in any project per the author's license: `src/styles/fonts/Perfect_DOS_VGA_437_LICENSE.txt`. Selling the font as a standalone is not permitted (eiDotter does not — it is bundled as part of the free design system).
+
+## Flexi IBM VGA True (legacy, bundled until v0.22.x)
+
+Flexi IBM VGA True v2 — bitmap-style remake of the IBM VGA BIOS font by VileR (int10h.org). Bundled as `src/styles/fonts/Flexi_IBM_VGA_True.ttf` (no longer loaded by default after v0.22.0; superseded by Perfect DOS VGA 437).
 
 Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/). Full license text and attribution notice: `src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt`.

package/README.md

@@ -86,7 +86,7 @@ The preset auto-registers `tailwindcss-react-aria-components` and `tailwindcss-a
 | **Live docs** | [Storybook](https://cinimody.github.io/eiDotter/) — every component with stories, controls, and source |
 | **Design tokens** | `src/tokens/*.json` (DTCG format) → `tokens.css` via Style Dictionary |
 | **Themes** | `amber-mono` (default), `cga-amber`, `cga-mode4-p0/p1`, `cga-mode5` |
-| **Font** | [Flexi IBM VGA True v2](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — aspect-corrected vector remake of the IBM VGA BIOS, CC BY-SA 4.0. Bitmap-authentic single-weight; all `fontWeight` tokens resolve to 400 |
+| **Font** | [Perfect DOS VGA 437](https://www.dafont.com/perfect-dos-vga-437.font) by Zeh Fernando — pixel-perfect-vector TTF (every glyph outline axis-aligned). Free-to-redistribute per bundled license. Single-weight; all `fontWeight` tokens resolve to 400 |
 | **Icons** | [pixelarticons](https://github.com/halfmage/pixelarticons) (MIT) — DOS pixel-art glyphs |
 | **Accessibility** | WCAG AA, React Aria primitives under interactive components, `prefers-reduced-motion` + `prefers-contrast` honored throughout |
 
@@ -206,7 +206,7 @@ npm run build-tokens     # Rebuild tokens from src/tokens/*.json
 eiDotter commits to the constraints that other "DOS-inspired" systems relax:
 
 - **16 colors, no more.** The palette is a historical fact, not a starting point. Extensions (amber, green, phosphor variants) are declared themes, not ad-hoc hex codes.
-- **Single-weight typography.** Flexi IBM VGA True is a bitmap font; there's no bold. All `fontWeight` tokens resolve to `400` and `font-synthesis: none` blocks browser faux-bold. Emphasis comes from color, uppercase on labels, or inverse video — never weight.
+- **Single-weight typography.** Perfect DOS VGA 437 has no bold variant — authentic DOS never had one. All `fontWeight` tokens resolve to `400` and `font-synthesis: none` blocks browser faux-bold. Emphasis comes from color, uppercase on labels, or inverse video — never weight.
 - **Phosphor as physics, not decoration.** Warmup animations, glow layers, and scanline effects are wired into component states; consumers don't opt in per-component.
 - **Keyboard-first.** React Aria powers every interactive component. Focus rings are loud amber on amber-dim. `prefers-reduced-motion` and `prefers-contrast` are honored across the board.
 - **Tree-shakable, no CSS-in-JS.** Runtime deps are minimal and on-purpose: [React Aria](https://react-spectrum.adobe.com/react-aria/) + [pixelarticons](https://github.com/halfmage/pixelarticons), both MIT. Component CSS ships compiled; you pay no CSS-in-JS cost at runtime.
@@ -215,4 +215,4 @@ The aesthetic is a constraint the system holds itself to — not a theme that ca
 
 ## License
 
-[CC-BY-NC-4.0](./LICENSE.md) — Creative Commons Attribution-NonCommercial 4.0 International. Bundled third-party licenses (pixelarticons MIT, Flexi IBM VGA True CC BY-SA 4.0) attributed in `LICENSE.md`.
+[CC-BY-NC-4.0](./LICENSE.md) — Creative Commons Attribution-NonCommercial 4.0 International. Bundled third-party licenses (pixelarticons MIT, Perfect DOS VGA 437 free-redistribution by Zeh Fernando, Flexi IBM VGA True CC BY-SA 4.0 — kept for legacy consumers) attributed in `LICENSE.md`.

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import './LegalPage.css';
+export interface LegalPageProps {
+    /** Heading shown in the hero (e.g., "Impressum", "Datenschutzerklärung") */
+    title: string;
+    /** "Stand: …" date stamp shown above the heading */
+    date: string;
+    /** Optional intro paragraph rendered inside the hero, below the heading.
+     * Wrapped in a `<div>` (not `<p>`) so consumers can pass block-level
+     * children like fragments or multiple paragraphs without invalid HTML. */
+    intro?: React.ReactNode;
+    /** Optional back-link slot rendered above the article. Should be a single
+     * `<a>` or `<button>` element so the styling selectors can reach it —
+     * react-router `<Link>` and react-router `<NavLink>` (without a function
+     * child) both render a single `<a>`. Wrapping the link in extra elements
+     * will leave it unstyled. */
+    home?: React.ReactNode;
+    /** Body content — `<h2>`, `<p>`, `<ul>`, `<address>` children styled by the wrapper. */
+    children: React.ReactNode;
+    /** Extra class on the outer wrapper */
+    className?: string;
+}
+/**
+ * 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 declare const LegalPage: React.FC<LegalPageProps & React.HTMLAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface AddressBlockProps {
+    /** Optional email shown after the address. When provided, rendered as a mailto link. */
+    email?: string;
+    /** Override the postal address. Defaults to the canonical Düsseldorf address. */
+    address?: React.ReactNode;
+    /** Override the legal name. Defaults to "Dominic Kennedy". */
+    name?: string;
+}
+/** Standalone postal address block — wrapped in `<address>`. */
+export declare const AddressBlock: React.FC<AddressBlockProps>;
+/** § 5 DDG header + address. */
+export declare const ImpressumAddress: React.FC<Omit<AddressBlockProps, 'email'>>;
+/** "Kontakt" header + mailto link. */
+export declare const ImpressumContact: React.FC<{
+    email: string;
+}>;
+/** § 18 Abs. 2 MStV responsibility block — short address (no country line). */
+export declare const ImpressumResponsible: React.FC<{
+    name?: string;
+}>;
+/** §§ 7-10 DDG content liability disclaimer. */
+export declare const ImpressumLiabilityContent: React.FC;
+/** External-link liability disclaimer. */
+export declare const ImpressumLiabilityLinks: React.FC;
+export interface DatenschutzControllerProps {
+    /** Email address rendered as a mailto link inside the address block. */
+    email: string;
+    /** Override the legal name. Defaults to "Dominic Kennedy". */
+    name?: string;
+}
+/** "Verantwortlicher" header + address with email. */
+export declare const DatenschutzController: React.FC<DatenschutzControllerProps>;
+/** Cloudflare hosting clause + Art. 6 Abs. 1 lit. f legal basis. */
+export declare const DatenschutzHosting: React.FC;
+export interface DatenschutzPostHogProps {
+    /** Domain hosting the PostHog reverse-proxy (without protocol),
+     * e.g. `e.dmnc.tech`. Defaults to `e.dmnc.tech`. */
+    proxyHost?: string;
+}
+/** PostHog webanalytics clause — EU servers, reverse-proxied, no cookies. */
+export declare const DatenschutzPostHog: React.FC<DatenschutzPostHogProps>;
+/** Local Perfect DOS VGA 437 font clause. */
+export declare const DatenschutzFonts: React.FC;
+/** SSL/TLS encryption clause. */
+export declare const DatenschutzEncryption: React.FC;
+export interface DatenschutzRightsProps {
+    /** Email for exercising data-subject rights. */
+    email?: string;
+    /** Override the supervisory authority. Defaults to NRW. */
+    supervisoryAuthority?: React.ReactNode;
+}
+/** DSGVO Art. 15-21 rights list + Art. 77 supervisory-authority complaint clause. */
+export declare const DatenschutzRights: React.FC<DatenschutzRightsProps>;

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

@@ -0,0 +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';

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

@@ -0,0 +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';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { TimelineImage } from '../../TimelineContainer/components/types';
+import './Lightbox.css';
+export interface LightboxProps {
+    /** Images to navigate between. */
+    images: TimelineImage[];
+    /** Index to start on when the lightbox opens. Defaults to 0. */
+    initialIndex?: number;
+    /** Whether the lightbox is open. */
+    isOpen: boolean;
+    /** Called when the lightbox should close (close button, backdrop, Esc). */
+    onClose: () => void;
+    /** Optional callback fired when navigation moves to a new image. */
+    onIndexChange?: (index: number) => void;
+}
+/**
+ * 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 declare const Lightbox: React.FC<LightboxProps>;

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

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

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

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

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

@@ -10,11 +10,15 @@ export interface TimelineEntryCardProps {
     children?: React.ReactNode;
 }
 /**
- * Selectable, expandable entry card for TimelineContainer views.
+ * Dispatcher for content-aware timeline entry rendering.
  *
- * Uses trigger+panel structure: the button handles click-to-toggle,
- * the body is a sibling region (not nested inside the button).
- * This prevents invalid HTML when expanded ReactNode content
- * contains interactive elements (links, buttons).
+ * 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.
+ *
+ * The card chrome (border, hover slide+glow, selected/expanded states)
+ * lives on the outer `.eidotter-timeline-card` element and applies to all
+ * kinds.
  */
 export declare const TimelineEntryCard: React.NamedExoticComponent<TimelineEntryCardProps>;

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

@@ -1,5 +1,5 @@
 export { TimelineContainer } from './TimelineContainer';
 export type { TimelineContainerProps } from './TimelineContainer';
 export { ZOOM_LEVELS } from './types';
-export type { TimelineEntry, TimelineEntryData, TimelineEntryRenderContext, TimelineRenderEntry, DateBucket, ZoomLevel, } from './types';
+export type { TimelineEntryData, TimelineEntry, TimelineEntryRenderContext, TimelineRenderEntry, TimelineImage, DateBucket, ZoomLevel, } from './types';
 export type { DrillDownEntry, UseDrillDownReturn } from './useDrillDown';

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

@@ -2,7 +2,7 @@
  * Timeline utility functions for grouping entries and formatting dates.
  * Pure functions with zero external dependencies — uses only native Date/Intl.
  */
-import type { TimelineEntry, DateBucket, ZoomLevel } from './types';
+import type { TimelineEntryData, DateBucket, ZoomLevel } from './types';
 /** Format a full timestamp: "Mar 15, 2024 at 2:30pm" */
 export declare function formatTimestamp(iso: string): string;
 /**
@@ -19,4 +19,4 @@ export declare function filterBucketsByPeriod(buckets: readonly DateBucket[], pe
 /**
  * Group timeline entries into DateBuckets based on the current zoom level.
  */
-export declare function groupEntriesByZoom(entries: TimelineEntry[], zoomLevel: ZoomLevel, sortOrder?: 'asc' | 'desc'): DateBucket[];
+export declare function groupEntriesByZoom(entries: TimelineEntryData[], zoomLevel: ZoomLevel, sortOrder?: 'asc' | 'desc'): DateBucket[];

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

@@ -8,23 +8,59 @@ import type { ReactNode } from 'react';
 export declare const ZOOM_LEVELS: readonly ["year", "month", "day", "hour"];
 /** Timeline zoom level */
 export type ZoomLevel = (typeof ZOOM_LEVELS)[number];
-/** Shared entry data type used across all timeline components */
-export interface TimelineEntryData {
+/** A single image used by the `image` and `gallery` entry kinds. */
+export interface TimelineImage {
+    /** Full-resolution URL. */
+    src: string;
+    /** Required alt text. Pass an empty string for purely decorative images. */
+    alt: string;
+    /** Optional separate low-resolution URL used in grids/thumbnails. */
+    thumbnail?: string;
+    /** Optional intrinsic width (px) for layout reservation. */
+    width?: number;
+    /** Optional intrinsic height (px) for layout reservation. */
+    height?: number;
+    /** Optional caption rendered in the lightbox. */
+    caption?: string;
+    /** Optional ISO date — overrides parent entry date for ordering/display in mixed galleries. */
+    date?: string;
+    /** Optional per-image tags. */
+    tags?: string[];
+    /**
+     * Optional URL. When present, the thumbnail wraps `<a href={link}>`
+     * and clicks navigate out — the grow-in-place + lightbox interactions
+     * are skipped entirely.
+     */
+    link?: string;
+}
+/** Fields common to every timeline entry kind. */
+interface TimelineEntryBase {
     /** Unique identifier for this entry */
     id: string;
     /** ISO 8601 date string or display date */
     date: string;
     /** Display title */
     title: string;
-    /** Entry body content (string or ReactNode for expandable entries) */
-    content?: ReactNode;
-    /** Entry category — influences node shape/color */
+    /** Semantic entry category — influences node shape/color. Independent of `kind`. */
     type?: 'event' | 'project' | 'milestone';
     /** Categorization tags */
     tags?: string[];
 }
+/** Discriminated union: `kind` determines what other fields are present. */
+export type TimelineEntryData = (TimelineEntryBase & {
+    kind: 'text';
+    content?: ReactNode;
+}) | (TimelineEntryBase & {
+    kind: 'image';
+    image: TimelineImage;
+}) | (TimelineEntryBase & {
+    kind: 'gallery';
+    images: TimelineImage[];
+});
 /**
- * @deprecated Use TimelineEntryData instead.
+ * @deprecated Use `TimelineEntryData` instead. Existing entries must add a
+ * `kind` field — `kind: 'text'` is the equivalent of pre-DMNC-877 behavior.
+ * This alias will be removed in the next major release.
  */
 export type TimelineEntry = TimelineEntryData;
 /**
@@ -66,3 +102,4 @@ export interface TimelineViewProps {
     /** Optional pluggable entry renderer */
     renderEntry?: TimelineRenderEntry;
 }
+export {};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { TimelineEntryData } from '../types';
+import './TimelineEntryCardGallery.css';
+type GalleryEntry = Extract<TimelineEntryData, {
+    kind: 'gallery';
+}>;
+export interface TimelineEntryCardGalleryProps {
+    entry: GalleryEntry;
+    isExpanded: boolean;
+    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`.
+ */
+export declare const TimelineEntryCardGallery: React.FC<TimelineEntryCardGalleryProps>;
+export {};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TimelineEntryData } from '../types';
+import './TimelineEntryCardImage.css';
+type ImageEntry = Extract<TimelineEntryData, {
+    kind: 'image';
+}>;
+export interface TimelineEntryCardImageProps {
+    entry: ImageEntry;
+    isExpanded: boolean;
+    onSelect?: (id: string) => void;
+}
+/**
+ * Image variant of TimelineEntryCard.
+ *
+ * Collapsed: title + thumbnail. Expanded: title + full-width image. Click on
+ * the expanded image opens a Lightbox. If `entry.image.link` is set and uses
+ * a safe scheme (http/https/mailto/relative), the thumbnail is wrapped in a
+ * plain anchor and clicks navigate out — no expansion, no lightbox.
+ */
+export declare const TimelineEntryCardImage: React.FC<TimelineEntryCardImageProps>;
+export {};

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

@@ -1,3 +1,3 @@
 export { TimelineContainer } from './components';
-export type { TimelineContainerProps, TimelineEntry, TimelineEntryData, TimelineEntryRenderContext, TimelineRenderEntry, DateBucket, ZoomLevel, } from './components';
+export type { TimelineContainerProps, TimelineEntryData, TimelineEntry, TimelineEntryRenderContext, TimelineRenderEntry, TimelineImage, DateBucket, ZoomLevel, } from './components';
 export { ZOOM_LEVELS } from './components';

package/dist/components/registry.d.ts

@@ -1,4 +1,4 @@
-export type ProjectId = 'eidotter' | 'spacewar' | 'rizomorf' | 'pomodoke-calendar' | 'keepcoin' | 'steuerdash' | 'sella' | 'lifelines' | 'betamorf';
+export type ProjectId = 'eidotter' | 'spacewar' | 'rizomorf' | 'pomodoke-calendar' | 'keepcoin' | 'steuerdash' | 'sella' | 'lifelines' | 'betamorf' | 'dmnctech';
 export interface ProjectInfo {
     displayName: string;
     url?: string;