eidotter 0.19.1 → 0.20.0

package/README.md

@@ -12,9 +12,7 @@ npm install eidotter
 
 ```tsx
 import { Terminal, Button, Alert } from 'eidotter';
-import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
-import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
-import 'eidotter/tokens.css';  // Design token CSS variables (required)
+import 'eidotter/styles';      // All styles: fonts, tokens, components
 
 function App() {
   return (
@@ -32,18 +30,35 @@ function App() {
 
 ### Basic (no Tailwind needed)
 
-Import the styles, tokens, and font. All component styling is pre-compiled — no build tools required.
+Import the styles. All component styling, fonts, and design tokens are pre-compiled — no build tools required.
 
 ```tsx
-import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
-import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
-import 'eidotter/tokens.css';  // CSS variable definitions
+import 'eidotter/styles';      // Fonts, tokens, components, Tailwind utilities
 
 // Optional: import a theme
 import 'eidotter/themes/amber-mono.css';
+
+// Optional (v0.19.4+): DOS typography utility classes for raw HTML / MDX / prose
+// 12 classes: .dos-page, .dos-hero, .dos-h1–.dos-h5, .dos-body, .dos-body-lg,
+// .dos-caption, .dos-micro, .dos-label, .dos-code, .dos-scanlines
+import 'eidotter/utilities';
+```
+
+Individual imports are still available for granular control:
+
+```tsx
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face
+import 'eidotter/tokens.css';  // CSS variable definitions
+import 'eidotter/styles';      // Component CSS + Tailwind utilities
+import 'eidotter/utilities';   // Opt-in .dos-* typography classes (v0.19.4+)
 ```
 
-**Font:** eiDotter uses [Flexi IBM VGA True v2](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — an aspect-corrected vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). The "True" variant matches authentic 4:3 VGA proportions with an extended character set (Greek, Cyrillic, Hebrew, Latin). The `fonts.css` import loads the bundled TTF via `@font-face`. No fallback fonts are configured so you'll immediately see if the font isn't loading.
+**Font:** eiDotter uses [Flexi IBM VGA True v2](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — an aspect-corrected vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). The "True" variant matches authentic 4:3 VGA proportions with an extended character set (Greek, Cyrillic, Hebrew, Latin). The `fonts.css` import loads the bundled TTF via `@font-face`.
+
+Two fontFamily tokens are exported, with distinct intent:
+
+- **`font-dos`** → `"Flexi IBM VGA True", monospace` — the default. Preserves the terminal aesthetic on degraded `@font-face` loads (strict CSP, web-fonts disabled, reader mode).
+- **`font-dos-fallback`** → `monospace` only — intentionally bare, as a **fail-loud diagnostic** utility for surfaces that want to surface font-loading failures explicitly. Compose `font-dos font-dos-fallback` when you want strict Flexi-or-nothing behavior.
 
 ### With Tailwind CSS
 
@@ -68,13 +83,20 @@ module.exports = {
 </div>
 ```
 
-For React Aria state variants and animations, use the enhanced preset:
+The preset auto-registers `tailwindcss-react-aria-components` and `tailwindcss-animate` via require-if-available. Consumers who already list either plugin in their own Tailwind config may see duplicate-variant warnings from Tailwind — either rely on the preset's registration alone, or pass those plugins explicitly in your config (they're idempotent, but the duplicate registration is noisy).
 
-```js
-presets: [require('eidotter/tailwind.preset.enhanced')],
+#### Migration from 0.19.1 and earlier
+
+In 0.19.2 the two older presets (`eidotter/tailwind.preset` and `eidotter/tailwind.preset.enhanced`) were merged into a single `eidotter/tailwind.preset` that includes all tokens plus the React Aria + animate plugins. The enhanced subpath is now a deprecated alias that logs a one-time `console.warn` on load and will be removed in 0.21.0:
+
+```diff
+- presets: [require('eidotter/tailwind.preset.enhanced')]
++ presets: [require('eidotter/tailwind.preset')]
 ```
 
-## Available Components (33)
+No behavior change — the merged preset already carries everything the enhanced preset used to add.
+
+## Available Components (36)
 
 | Component | Description |
 |-----------|-------------|
@@ -89,12 +111,15 @@ presets: [require('eidotter/tailwind.preset.enhanced')],
 | ChatInput | Multiline textarea with Enter-to-send |
 | ChatContainer | Composes ChatHistory + ChatInput — place inside Terminal for DOS chat |
 | Checkbox | DOS-style checkbox with `[X]` bracket indicator |
+| CmdPalette | ⌘K / Ctrl+K command palette overlay with scored search + keyboard navigation |
 | CommandPrompt | Interactive command-line input with blinking cursor |
+| DosFigure | Demoscene-style painted-screen media placeholder with scanline sweep + optional pins |
 | FilterBar | Multi-select toggle group for faceted filtering |
 | Footer | Site footer with legal links (Impressum + Datenschutz) |
 | Header | Sticky site header composing branding + Nav — retro/modern variants |
 | Icon | SVG icons backed by pixelarticons (MIT) — authentic DOS pixel art |
 | InlineExpand | Inline disclosure widget for expanding text within prose |
+| InlineLink | In-flow navigational anchor — dotted underline, phosphor-invert hover, external variant |
 | Input | Text input with DOS styling and error variant |
 | Modal | Dialog overlay with title bar and close button |
 | Nav | Responsive navigation with desktop/mobile variants |

package/dist/components/CmdPalette/components/CmdPalette.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import './CmdPalette.css';
+export interface CmdPaletteItem {
+    /** Stable identifier for React keys and `onSelect` lookups. */
+    id: string;
+    /** Primary label shown in the list. Uppercase recommended. */
+    label: string;
+    /** Optional secondary hint shown on the right (shortcut, type, etc.). */
+    hint?: React.ReactNode;
+    /** Additional keywords that contribute to search matching. */
+    keywords?: string[];
+    /** Optional type tag used for grouping/filtering by callers. */
+    type?: string;
+    /** Called when the item is activated via click or Enter. */
+    onSelect?: (item: CmdPaletteItem) => void;
+}
+export interface CmdPaletteProps {
+    /** Controlled open state. */
+    open: boolean;
+    /**
+     * Called when the overlay requests open/close (Escape, backdrop click,
+     * item selection, hotkey toggle).
+     */
+    onOpenChange: (open: boolean) => void;
+    /** Items to search. Pure data — parent owns the list. */
+    items: CmdPaletteItem[];
+    /** Input placeholder. */
+    placeholder?: string;
+    /** Global activation hotkey. `"mod+k"`, `"mod+shift+p"`, or `false` to disable. */
+    hotkey?: string | false;
+    /** Message shown when search matches nothing. */
+    emptyMessage?: React.ReactNode;
+    /** Footer hint row text / JSX. Pass `null` to hide. */
+    footerHint?: React.ReactNode;
+    /** Custom renderer for each row. Falls back to label + hint. */
+    renderItem?: (item: CmdPaletteItem, isSelected: boolean) => React.ReactNode;
+    /** Cap on filtered result rows. */
+    maxResults?: number;
+    /** Extra class names merged onto the dialog container. */
+    className?: string;
+    /** Accessible dialog label. */
+    'aria-label'?: string;
+}
+/**
+ * CmdPalette — ⌘K / Ctrl+K launcher overlay.
+ *
+ * Controlled component. Parent owns `open` and item list; CmdPalette handles
+ * search, keyboard navigation, focus management, and hotkey binding.
+ *
+ * Built on React Aria `ModalOverlay` + `Modal` + `Dialog` — same primitives
+ * as `<Modal>` — so focus trap, Esc-to-close, and backdrop dismissal are
+ * standard.
+ */
+export declare const CmdPalette: React.ForwardRefExoticComponent<CmdPaletteProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,2 @@
+export { CmdPalette } from './CmdPalette';
+export type { CmdPaletteProps, CmdPaletteItem } from './CmdPalette';

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

@@ -0,0 +1,2 @@
+export { CmdPalette } from './components';
+export type { CmdPaletteProps, CmdPaletteItem } from './components';

package/dist/components/DosFigure/components/DosFigure.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import './DosFigure.css';
+export interface DosFigurePin {
+    /** Horizontal position as a percentage (0–100). */
+    x: number;
+    /** Vertical position as a percentage (0–100). */
+    y: number;
+    /** Pin label — short; renders next to the dot. */
+    label: string;
+}
+export interface DosFigureProps {
+    /** Title shown in the top chrome strip. Uppercase recommended. */
+    title?: string;
+    /** Resolution tag rendered bottom-right (e.g. `"640×480"`). */
+    resolution?: string;
+    /** Subject content — ASCII, SVG, or anything you'd "paint the screen" with. */
+    subject: React.ReactNode;
+    /** Caption rendered beneath the frame via `<figcaption>`. */
+    caption?: React.ReactNode;
+    /** Optional annotation pins positioned as percentages over the subject. */
+    pins?: DosFigurePin[];
+    /** Disables the scanline-sweep animation. Defaults to true (enabled). */
+    animated?: boolean;
+    /** Accessible label when `subject` has no inherent semantics. */
+    'aria-label'?: string;
+    /** Extra class names merged onto the `<figure>` root. */
+    className?: string;
+}
+/**
+ * DosFigure — demoscene-style placeholder for media.
+ *
+ * Sierra / LucasArts / demoscene title cards painted the screen with a
+ * limited palette, dithering, and annotated frames. DosFigure recreates
+ * that aesthetic: amber chrome, scanline sweep, optional pins, and a
+ * resolution tag. Use as a lead-in for blog articles or as a placeholder
+ * where a photograph would otherwise go.
+ *
+ * Not intended as a replacement for semantic imagery — pass `aria-label`
+ * (or a `<figcaption>` via `caption`) so the figure is meaningful to AT.
+ */
+export declare const DosFigure: React.ForwardRefExoticComponent<DosFigureProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,2 @@
+export { DosFigure } from './DosFigure';
+export type { DosFigureProps, DosFigurePin } from './DosFigure';

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

@@ -0,0 +1,2 @@
+export { DosFigure } from './components';
+export type { DosFigureProps, DosFigurePin } from './components';

package/dist/components/InlineLink/components/InlineLink.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import './InlineLink.css';
+export interface InlineLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    /** Link text. */
+    children: React.ReactNode;
+    /** Target URL. */
+    href: string;
+    /**
+     * Render the trailing glyph (`▸` for internal, `↗` for `external`).
+     * Defaults to `true`. When `false`, no glyph renders regardless of the
+     * `external` prop.
+     */
+    showGlyph?: boolean;
+    /**
+     * External link — adds `target="_blank"` and `rel="noopener noreferrer"`
+     * (safe tabnabbing defaults) and, when `showGlyph` is `true`, swaps the
+     * trailing glyph to `↗`. `showGlyph={false}` still suppresses the glyph.
+     */
+    external?: boolean;
+    /** Extra class names merged onto the root anchor. */
+    className?: string;
+}
+/**
+ * In-flow navigational anchor. Distinct from `<InlineExpand>` — this is a
+ * destination, not a disclosure.
+ *
+ * Rest: dotted amber underline, trailing `▸`.
+ * Hover: phosphor inversion — amber background, dark foreground.
+ * Visited: dimmed amber (`--color-cga-amber-dim` → brown fallback).
+ * External: opens in a new tab safely, trailing glyph becomes `↗`.
+ *
+ * Consumer-passed `target="_blank"` is treated as implicit-external for
+ * `rel` safety — a `rel` is auto-applied if none is provided, preventing
+ * tabnabbing even when the caller doesn't explicitly set `external`.
+ */
+export declare const InlineLink: React.ForwardRefExoticComponent<InlineLinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

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

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

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