eidotter 0.16.1 → 0.17.0

package/README.md

@@ -1,250 +1,242 @@
-# eiDotter - DOS Terminal Design System
-
-A DOS-themed React component library with authentic CGA terminal aesthetics.
-
-## Installation
-
-```bash
-npm install eidotter
-# or
-yarn add eidotter
-# or
-pnpm add eidotter
-```
-
-## Quick Start
-
-```jsx
-import { Terminal, Button, Alert } from 'eidotter';
-import 'eidotter/dist/style.css';
-
-function App() {
-  return (
-    <Terminal title="MY-APP.EXE">
-      <Alert type="info" title="Welcome">
-        DOS interface loaded successfully.
-      </Alert>
-      <Button variant="primary">Execute</Button>
-    </Terminal>
-  );
-}
-```
-
-## Available Components (v0.15.0)
-
-| Component | Description |
-|-----------|-------------|
-| Accordion | Collapsible content sections |
-| Alert | System notifications (info, success, warning, error) |
-| Badge | Status indicators with variant support |
-| Breadcrumb | Navigation path display |
-| Button | DOS-style buttons with variants (primary, secondary, ghost, link) |
-| Card | Content container with default, elevated, bordered, glow, interactive, minimal, callout variants |
-| ChatMessage | Single chat message with role-based DOS styling and streaming cursor |
-| ChatHistory | Scrollable message list with auto-scroll and `role="log"` |
-| ChatInput | Multiline textarea with Enter-to-send, Shift+Enter for newlines |
-| ChatContainer | Composes ChatHistory + ChatInput — place inside Terminal for DOS chat |
-| Checkbox | DOS-style checkbox with [X] indicator |
-| CommandPrompt | Interactive command-line input with blinking cursor |
-| FilterBar | Multi-select toggle group for faceted filtering |
-| Footer | Site footer with default legal links (Impressum + Datenschutz) |
-| Icon | SVG icon system with DOS styling |
-| InlineExpand | Inline disclosure widget for expanding text within prose |
-| 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 |
-| Progress | DOS-style progress bar with block characters |
-| RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
-| Separator | Horizontal/vertical divider for content separation |
-| Stat | Key-value display for metrics and statistics |
-| Switch | Toggle switch for on/off states |
-| Tabs | Tabbed interface navigation |
-| Tag | Interactive labels for tags, categories, and filter chips |
-| Terminal | DOS window with title bar and content area (controls hidden by default) |
-| TextScramble | DOS text decode/scramble animation effect |
-| TimelineContainer | Multi-zoom timeline with year/month/day/hour views + `mode="static"` |
-| TimelineEntry | Individual timeline entry with icon, date, and expandable content |
-| TimelineList | *(Deprecated)* Use `<TimelineContainer mode="static">` instead |
-| TimelineNode | Timeline/stepper axis markers with shapes and glow |
-
-## Component Examples
-
-### Terminal
-
-```jsx
-<Terminal
-  title="PROGRAM.EXE"
-  size="medium"
-  closeable
-  onClose={() => console.log('closed')}
->
-  <p>Terminal content here</p>
-</Terminal>
-```
-
-### Button
-
-```jsx
-<Button variant="primary" size="medium">
-  Click Me
-</Button>
-
-<Button variant="ghost" loading>
-  Processing...
-</Button>
-```
-
-### Alert
-
-```jsx
-<Alert
-  type="warning"
-  title="Low Disk Space"
-  onClose={() => {}}
->
-  Drive C: has only 640KB remaining.
-</Alert>
-```
-
-### Input
-
-```jsx
-<Input
-  placeholder="Enter filename..."
-  variant="default"
-/>
-
-<Input
-  variant="error"
-  placeholder="Invalid path"
-/>
-```
-
-### CommandPrompt
-
-```jsx
-<CommandPrompt
-  prompt="C:\>"
-  onCommand={(cmd) => console.log('Executing:', cmd)}
-  autoFocus
-/>
-```
-
-### Accordion
-
-```jsx
-<AccordionFill
-  sections={[
-    { title: 'Section 1', content: 'Content 1' },
-    { title: 'Section 2', content: 'Content 2' },
-  ]}
-  defaultExpandedIndex={0}
-/>
-```
-
-## Design Tokens
-
-The library uses authentic CGA colors:
-
-```css
---color-cga-black: #000000;
---color-cga-blue: #0000AA;
---color-cga-cyan: #00AAAA;
---color-cga-yellow: #FFFF55;
---color-cga-white: #FFFFFF;
---color-cga-amber: #FFBF00;
-/* ... full 16-color CGA palette + amber */
-```
-
-### Theming
-
-Apply the DOS amber theme (amber-on-black terminal aesthetic):
-
-```html
-<div data-theme="amber-mono">
-  <!-- Components will use amber colors -->
-</div>
-```
-
-Or via CSS class:
-
-```html
-<div class="theme-amber-mono">...</div>
-```
-
-## Tailwind CSS Integration
-
-Use Eidotter tokens in Tailwind projects without importing React components.
-
-### Setup
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  presets: [require('eidotter/tailwind.preset')],
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-};
-```
-
-### Usage
-
-```jsx
-// CGA palette colors
-<div className="bg-cga-black text-cga-yellow">
-  DOS terminal content
-</div>
-
-// Semantic colors
-<div className="bg-dos-bg-primary text-dos-text-accent">
-  Using semantic tokens
-</div>
-
-// Typography
-<p className="font-dos text-dos-base leading-dos-tight">
-  Perfect DOS VGA 437 font
-</p>
-```
-
-### Available Token Classes
-
-**CGA Colors:** `cga-black`, `cga-blue`, `cga-green`, `cga-cyan`, `cga-red`, `cga-magenta`, `cga-brown`, `cga-light-gray`, `cga-dark-gray`, `cga-bright-blue`, `cga-bright-green`, `cga-bright-cyan`, `cga-bright-red`, `cga-bright-magenta`, `cga-yellow`, `cga-white`, `cga-amber`, `cga-amber-bright`, `cga-amber-dim`
-
-**Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
-
-**Typography:** `font-dos`, `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run Storybook
-npm run storybook
-
-# Build library
-npm run build
-
-# Run tests
-npm run test
-```
-
-## Planned Components
-
-See [ROADMAP.md](./ROADMAP.md) for future components.
-
-## Design Philosophy
-
-The DOS aesthetic isn't nostalgia for nostalgia's sake. It represents values we've lost in modern software:
-
-- **Control** - Every command is explicit and intentional
-- **Clarity** - Information presented without distraction
-- **Personal Sovereignty** - Your tools, your way
-
-Eidotter brings these values to modern interfaces while maintaining accessibility (WCAG AA compliant) and usability standards. The authentic 16-color CGA palette plus amber phosphor variants creates that terminal feel without sacrificing readability.
-
-Part of the **Timeline OS** ecosystem - a vision for personal data management along temporal, thematic, and social axes.
-
-## License
-
-CC-BY-NC-4.0 (Creative Commons Attribution-NonCommercial 4.0 International)
+# eiDotter - DOS Terminal Design System
+
+A DOS-themed React component library with authentic CGA terminal aesthetics.
+
+## Installation
+
+```bash
+npm install eidotter
+```
+
+## Quick Start
+
+```tsx
+import { Terminal, Button, Alert } from 'eidotter';
+import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
+import 'eidotter/tokens.css';  // Design token CSS variables (required)
+
+function App() {
+  return (
+    <Terminal title="MY-APP.EXE">
+      <Alert type="info" title="Welcome">
+        DOS interface loaded successfully.
+      </Alert>
+      <Button variant="primary">Execute</Button>
+    </Terminal>
+  );
+}
+```
+
+## Setup
+
+### Basic (no Tailwind needed)
+
+Import the styles and tokens. All component styling is pre-compiled — no build tools required.
+
+```tsx
+import 'eidotter/styles';      // Component CSS
+import 'eidotter/tokens.css';  // CSS variable definitions
+
+// Optional: import a theme
+import 'eidotter/themes/amber-mono.css';
+```
+
+### With Tailwind CSS
+
+Use eidotter's design tokens as Tailwind utility classes in your own code.
+
+```bash
+npm install tailwindcss
+```
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('eidotter/tailwind.preset')],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
+```
+
+```tsx
+// Now use eidotter tokens as Tailwind classes
+<div className="bg-dos-bg-primary text-dos-text-accent font-dos">
+  DOS terminal content
+</div>
+```
+
+For React Aria state variants and animations, use the enhanced preset:
+
+```js
+presets: [require('eidotter/tailwind.preset.enhanced')],
+```
+
+## Available Components (v0.17.0)
+
+| Component | Description |
+|-----------|-------------|
+| Accordion | Collapsible content sections (Section, AccordionFill) |
+| Alert | Inline alert banner with featured icon, actions, and 6 color variants |
+| Badge | Status indicators with variant support |
+| Breadcrumb | Navigation path display |
+| Button | DOS-style buttons (primary, secondary, ghost, link) |
+| Card | Content container with variants (elevated, bordered, glow, interactive, minimal, callout) |
+| ChatMessage | Chat message with role-based DOS styling and streaming cursor |
+| ChatHistory | Scrollable message list with auto-scroll and `role="log"` |
+| 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 |
+| CommandPrompt | Interactive command-line input with blinking cursor |
+| FilterBar | Multi-select toggle group for faceted filtering |
+| Footer | Site footer with legal links (Impressum + Datenschutz) |
+| Icon | SVG icon system with DOS styling |
+| InlineExpand | Inline disclosure widget for expanding text within prose |
+| 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 |
+| Notification | Toast popup with layered amber glow, auto-dismiss, and progress variant |
+| Progress | DOS-style progress bar with block characters |
+| RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
+| Separator | Horizontal/vertical divider |
+| Stat | Key-value display for metrics and statistics |
+| Switch | Toggle switch for on/off states |
+| Tabs | Tabbed interface navigation |
+| Tag | Interactive labels for tags, categories, and filter chips |
+| Terminal | DOS window with title bar and content area |
+| TextScramble | DOS text decode/scramble animation effect |
+| TimelineContainer | Multi-zoom timeline with year/month/day/hour views |
+| TimelineNode | Timeline/stepper axis markers with shapes and glow |
+| Tokens | Design token reference display (Storybook only) |
+
+## Component Examples
+
+### Terminal
+
+```tsx
+<Terminal
+  title="PROGRAM.EXE"
+  size="medium"
+  closeable
+  onClose={() => console.log('closed')}
+>
+  <p>Terminal content here</p>
+</Terminal>
+```
+
+### Button
+
+```tsx
+<Button variant="primary" size="md">
+  Click Me
+</Button>
+
+<Button variant="ghost" loading>
+  Processing...
+</Button>
+```
+
+### Alert
+
+```tsx
+<Alert
+  type="warning"
+  title="Low Disk Space"
+  onClose={() => {}}
+>
+  Drive C: has only 640KB remaining.
+</Alert>
+```
+
+### Input
+
+```tsx
+<Input
+  label="Filename"
+  placeholder="Enter filename..."
+/>
+
+<Input
+  variant="error"
+  errorMessage="File not found"
+  placeholder="Invalid path"
+/>
+```
+
+### Checkbox
+
+```tsx
+<Checkbox label="Remember me" />
+<Checkbox label="Accept terms" checked />
+<Checkbox label="Select all" indeterminate />
+```
+
+### CommandPrompt
+
+```tsx
+<CommandPrompt
+  prompt="C:\>"
+  onCommand={(cmd) => console.log('Executing:', cmd)}
+  autoFocus
+/>
+```
+
+## Design Tokens
+
+The library uses authentic CGA colors via CSS custom properties:
+
+```css
+--color-cga-amber: #FFB000;       /* Primary accent */
+--color-cga-amber-bright: #FDCA9F;
+--color-cga-amber-dim: #9A5700;
+--color-cga-black: #020003;       /* Background */
+/* ... full 16-color CGA palette */
+```
+
+### Theming
+
+Apply themes via `data-theme` attribute:
+
+```html
+<div data-theme="amber-mono">
+  <!-- Amber-on-black terminal aesthetic -->
+</div>
+```
+
+Available themes: `amber-mono`, `cga-amber`, `cga-mode4-p0`, `cga-mode4-p1`, `cga-mode5`.
+
+### Tailwind Token Classes
+
+**CGA Colors:** `cga-black`, `cga-blue`, `cga-green`, `cga-cyan`, `cga-red`, `cga-magenta`, `cga-brown`, `cga-light-gray`, `cga-dark-gray`, `cga-bright-blue`, `cga-bright-green`, `cga-bright-cyan`, `cga-bright-red`, `cga-bright-magenta`, `cga-yellow`, `cga-white`, `cga-amber`, `cga-amber-bright`, `cga-amber-dim`
+
+**Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
+
+**Typography:** `font-dos`, `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
+
+**Spacing:** `dos-0` through `dos-16` (4px grid)
+
+**Border Radius:** `rounded-dos-none` (0), `rounded-dos-sm` (2px), `rounded-dos-base` (4px max)
+
+## Development
+
+```bash
+npm install           # Install dependencies
+npm run storybook     # Launch Storybook on port 6006
+npm run build         # Production build
+npm run test          # Run test suite
+npm run lint          # ESLint
+```
+
+## Design Philosophy
+
+The DOS aesthetic represents values we've lost in modern software:
+
+- **Control** - Every command is explicit and intentional
+- **Clarity** - Information presented without distraction
+- **Personal Sovereignty** - Your tools, your way
+
+eiDotter brings these values to modern interfaces while maintaining accessibility (WCAG AA) and usability standards. The authentic 16-color CGA palette plus amber phosphor variants creates that terminal feel without sacrificing readability.
+
+Part of the **Timeline OS** ecosystem - a vision for personal data management along temporal, thematic, and social axes.
+
+## License
+
+CC-BY-NC-4.0 (Creative Commons Attribution-NonCommercial 4.0 International)

package/dist/components/Alert/components/Alert.d.ts

@@ -1,23 +1,38 @@
 import React from 'react';
 import './Alert.css';
+export type AlertColor = 'brand' | 'gray' | 'default' | 'error' | 'warning' | 'success';
+export interface AlertAction {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Optional trailing icon */
+    icon?: React.ReactNode;
+}
 export interface AlertProps {
-    /** The size variant */
-    size?: 'sm' | 'lg' | 'small' | 'large' | 'floating' | 'full-width';
-    /** The type determines color and icon */
-    type?: 'info' | 'success' | 'warning' | 'error' | 'default' | 'brand';
+    /** Color variant (V.37) */
+    color?: AlertColor;
+    /** Size variant: floating = card, full-width = banner */
+    size?: 'floating' | 'full-width' | 'sm' | 'lg' | 'small' | 'large';
     /** Title text */
     title?: string;
-    /** Description content */
+    /** Supporting text / description */
     children?: React.ReactNode;
+    /** Action buttons below supporting text */
+    actions?: AlertAction[];
     /** Close handler (shows close button when provided) */
     onClose?: () => void;
-    /** "Click here" link handler */
-    onClickHere?: () => void;
     /** Optional CSS class name */
     className?: string;
+    /** @deprecated Use `color` instead */
+    type?: 'info' | 'success' | 'warning' | 'error' | 'default' | 'brand';
+    /** @deprecated Use `actions` instead */
+    onClickHere?: () => void;
 }
 /**
- * DOS-styled Alert with CRT phosphor enter/exit animations.
- * Uses useAnimatedDismiss for smooth phosphor fade-out on close.
+ * DOS-styled Alert with V.37 design: uniform dark background, featured icon
+ * with outline rings, optional actions, and container-query responsive layout.
+ *
+ * Backward-compatible with `type` and `onClickHere` props from pre-V.37.
  */
 export declare const Alert: React.FC<AlertProps>;

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

@@ -1,2 +1,2 @@
 export { Alert } from './Alert';
-export type { AlertProps } from './Alert';
+export type { AlertProps, AlertAction, AlertColor } from './Alert';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { AlertAction } from '../../Alert/components/Alert';
+import './Notification.css';
+export type NotificationType = 'primary' | 'gray' | 'success' | 'warning' | 'error';
+export interface NotificationProps {
+    /** Color/icon variant */
+    type?: NotificationType;
+    /** Title text */
+    title?: string;
+    /** Supporting text / description */
+    children?: React.ReactNode;
+    /** Action buttons */
+    actions?: AlertAction[];
+    /** Close handler — shows close button when provided */
+    onClose?: () => void;
+    /** Renders avatar element instead of featured icon */
+    avatar?: React.ReactNode;
+    /** Renders image element above text content */
+    image?: React.ReactNode;
+    /** Progress value 0-100 — renders Progress bar below text */
+    progress?: number;
+    /** Label for progress bar */
+    progressLabel?: string;
+    /** Auto-dismiss after N milliseconds */
+    duration?: number;
+    /** Hide the featured icon */
+    showIcon?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * 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 declare const Notification: React.FC<NotificationProps>;

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

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

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

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