eidotter 0.15.0 → 0.16.0

package/README.md

@@ -30,7 +30,7 @@ function App() {
 }
 ```
 
-## Available Components (v0.13.0)
+## Available Components (v0.15.0)
 
 | Component | Description |
 |-----------|-------------|
@@ -40,9 +40,14 @@ function App() {
 | 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 |
@@ -55,11 +60,11 @@ function App() {
 | 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, controls, and content area |
+| 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 |
-| TimelineEntry | Individual timeline entry with icon, date, and content |
-| TimelineList | Vertical list of timeline entries |
+| 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

package/dist/components/Accordion/components/AccordionFill.d.ts

@@ -6,5 +6,6 @@ export interface AccordionFillProps {
         content: string;
     }>;
     defaultExpandedIndex?: number;
+    className?: string;
 }
 export declare const AccordionFill: React.FC<AccordionFillProps>;

package/dist/components/Accordion/components/Section.d.ts

@@ -1,29 +1,21 @@
 import React from 'react';
 import './Section.css';
 export interface SectionProps {
-    /**
-     * The title text of the section
-     */
+    /** The title text of the section */
     title: string;
-    /**
-     * The content of the section
-     */
+    /** The content of the section */
     children: React.ReactNode;
-    /**
-     * Whether the section is expanded by default
-     */
+    /** Whether the section is expanded by default */
     defaultExpanded?: boolean;
-    /**
-     * Whether the section is in a hover state
-     */
+    /** Whether the section is in a hover state */
     isHovered?: boolean;
-    /**
-     * Whether the section is in an active state
-     */
+    /** Whether the section is in an active state */
     isActive?: boolean;
-    /**
-     * Optional callback when the section is toggled
-     */
+    /** Optional callback when the section is toggled */
     onToggle?: (isExpanded: boolean) => void;
 }
+/**
+ * DOS-styled collapsible section (accordion item).
+ * Pure presentational — uses CSS transitions for expand/collapse.
+ */
 export declare const Section: React.FC<SectionProps>;

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

@@ -1,33 +1,23 @@
 import React from 'react';
 import './Alert.css';
 export interface AlertProps {
-    /**
-     * The size variant of the alert
-     */
-    size?: 'small' | 'large';
-    /**
-     * The type of alert which determines its color and icon
-     */
-    type?: 'info' | 'success' | 'warning' | 'error';
-    /**
-     * The title text of the alert
-     */
+    /** The size variant */
+    size?: 'sm' | 'lg' | 'small' | 'large' | 'floating' | 'full-width';
+    /** The type determines color and icon */
+    type?: 'info' | 'success' | 'warning' | 'error' | 'default' | 'brand';
+    /** Title text */
     title?: string;
-    /**
-     * The description text of the alert
-     */
+    /** Description content */
     children?: React.ReactNode;
-    /**
-     * Optional click handler for the close button
-     */
+    /** Close handler (shows close button when provided) */
     onClose?: () => void;
-    /**
-     * Optional click handler for the "Click here" link
-     */
+    /** "Click here" link handler */
     onClickHere?: () => void;
-    /**
-     * Optional CSS class name
-     */
+    /** Optional CSS class name */
     className?: string;
 }
+/**
+ * DOS-styled Alert with CRT phosphor enter/exit animations.
+ * Uses useAnimatedDismiss for smooth phosphor fade-out on close.
+ */
 export declare const Alert: React.FC<AlertProps>;

package/dist/components/Badge/components/Badge.d.ts

@@ -1,39 +1,21 @@
 import React from 'react';
 import './Badge.css';
 export interface BadgeProps {
-    /**
-     * The variant determines the badge's color scheme
-     */
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent';
-    /**
-     * The size of the badge
-     */
-    size?: 'small' | 'medium';
-    /**
-     * Show a dot indicator before the text
-     */
+    /** The variant determines the badge's color scheme */
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent' | 'brand' | 'gray' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';
+    /** The size of the badge */
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium';
+    /** Show a dot indicator before the text */
     dot?: boolean;
-    /**
-     * Badge content
-     */
+    /** Badge content */
     children: React.ReactNode;
-    /**
-     * Optional CSS class name
-     */
+    /** Optional CSS class name */
     className?: string;
-    /**
-     * Optional aria-label for accessibility
-     */
+    /** Optional aria-label for accessibility */
     'aria-label'?: string;
 }
 /**
- * DOS-styled Badge component for status indicators, labels, and tags
- *
- * Features:
- * - Multiple color variants (default, success, warning, error, info, accent)
- * - Two sizes (small, medium)
- * - Optional dot indicator
- * - DOS-authentic styling with CGA colors
- * - WCAG 2.1 AA compliant
+ * DOS-styled Badge for status indicators, labels, and counts.
+ * Pure presentational — no React Aria needed.
  */
 export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Breadcrumb/components/Breadcrumb.d.ts

@@ -1,55 +1,33 @@
 import React from 'react';
 import './Breadcrumb.css';
 export interface BreadcrumbItem {
-    /**
-     * URL/path for the breadcrumb link
-     */
-    href: string;
-    /**
-     * Display label for the breadcrumb
-     */
+    /** URL/path for the breadcrumb link */
+    href?: string;
+    /** Display label for the breadcrumb */
     label: string;
+    /** Click handler — when provided, renders as a button instead of a link */
+    onClick?: () => void;
 }
 export interface BreadcrumbProps {
-    /**
-     * Array of breadcrumb items forming the trail
-     */
+    /** Array of breadcrumb items forming the trail */
     trail?: BreadcrumbItem[];
-    /**
-     * Current page label (not a link)
-     */
+    /** Current page label (not a link) */
     currentLabel: string;
-    /**
-     * Show back arrow on the last trail item
-     */
+    /** Show back arrow on the last trail item */
     showBackArrow?: boolean;
-    /**
-     * Custom separator character
-     */
+    /** Custom separator character */
     separator?: string;
-    /**
-     * Custom link component (e.g., Next.js Link)
-     * If not provided, uses regular anchor tags
-     */
+    /** Custom link component (e.g., Next.js Link) */
     linkComponent?: React.ComponentType<{
         href: string;
         className?: string;
         children: React.ReactNode;
     }>;
-    /**
-     * Additional CSS class name
-     */
+    /** Additional CSS class name */
     className?: string;
 }
 /**
- * DOS-styled Breadcrumb navigation component
- *
- * Features:
- * - Configurable trail items
- * - Optional back arrow on last trail item
- * - Custom separator support
- * - Framework-agnostic (works with any router)
- * - WCAG 2.1 AA compliant
- * - DOS-authentic styling with CGA colors
+ * DOS-styled Breadcrumb navigation component.
+ * Pure presentational — uses semantic HTML (nav > ol > li).
  */
 export declare const Breadcrumb: React.FC<BreadcrumbProps>;

package/dist/components/Button/components/Button.d.ts

@@ -2,56 +2,16 @@ import React from 'react';
 import '../../../styles/keyframes.css';
 import './Button.css';
 export interface ButtonProps {
-    /**
-     * The variant of the button which determines its styling
-     */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'link';
-    /**
-     * The size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The button type
-     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'ghost' | 'link';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
-    /**
-     * Whether the button is disabled
-     */
     disabled?: boolean;
-    /**
-     * Whether the button is in a loading state
-     */
     loading?: boolean;
-    /**
-     * Button content
-     */
     children: React.ReactNode;
-    /**
-     * Optional click handler
-     */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Optional CSS class name
-     */
     className?: string;
-    /**
-     * Optional aria-label for accessibility
-     */
     'aria-label'?: string;
-    /**
-     * Full width button
-     */
     fullWidth?: boolean;
+    iconOnly?: boolean;
 }
-/**
- * DOS-styled Button component with authentic terminal aesthetics
- *
- * Features:
- * - Multiple variants (primary, secondary, ghost, link)
- * - Three sizes (small, medium, large)
- * - Loading and disabled states
- * - Full TypeScript support
- * - WCAG 2.1 AA compliant
- * - DOS-authentic styling with CGA colors
- */
 export declare const Button: React.FC<ButtonProps>;

package/dist/components/Checkbox/components/Checkbox.d.ts

@@ -2,41 +2,31 @@ import React from 'react';
 import '../../../styles/keyframes.css';
 import './Checkbox.css';
 export interface CheckboxProps {
-    /**
-     * Whether the checkbox is checked
-     */
+    /** Whether the checkbox is checked (controlled) */
     checked?: boolean;
-    /**
-     * Default checked state for uncontrolled usage
-     */
+    /** Default checked state (uncontrolled) */
     defaultChecked?: boolean;
-    /**
-     * Callback when checked state changes
-     */
+    /** Callback when checked state changes */
     onChange?: (checked: boolean) => void;
-    /**
-     * Label text for the checkbox
-     */
+    /** Indeterminate state */
+    indeterminate?: boolean;
+    /** Label text */
     label?: string;
-    /**
-     * Whether the checkbox is disabled
-     */
+    /** Whether the checkbox is disabled */
     disabled?: boolean;
-    /**
-     * Name attribute for form submission
-     */
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Name attribute for form submission */
     name?: string;
-    /**
-     * Value attribute for form submission
-     */
+    /** Value attribute for form submission */
     value?: string;
-    /**
-     * Additional CSS class name
-     */
+    /** Additional CSS class name */
     className?: string;
-    /**
-     * Accessible label for screen readers
-     */
+    /** Accessible label for screen readers */
     'aria-label'?: string;
 }
+/**
+ * DOS-styled Checkbox with bracket text indicator [ ] / [X].
+ * Built on React Aria for accessible keyboard/focus handling.
+ */
 export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/FilterBar/components/FilterBar.d.ts

@@ -29,7 +29,7 @@ export interface FilterBarProps {
     /** Label for the "All" toggle. Default: 'All' */
     allLabel?: string;
     /** The size of the filter bar */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /**
      * Callback when selection changes.
      * Receives the new set of active IDs.
@@ -41,17 +41,7 @@ export interface FilterBarProps {
     'aria-label'?: string;
 }
 /**
- * DOS-styled FilterBar component for multi-select or single-select content filtering
- *
- * Features:
- * - Multi-select (default) or single-select mode
- * - Optional count badges on each filter item
- * - Optional "All" toggle that selects/deselects everything
- * - Full keyboard navigation (Arrow keys, Space, Enter, Home, End)
- * - Controlled and uncontrolled modes
- * - DOS-authentic styling with CGA colors
- * - WCAG 2.1 AA compliant
- * - prefers-reduced-motion support
- * - prefers-contrast: high support
+ * DOS-styled FilterBar for multi-select or single-select content filtering.
+ * Pure presentational — uses CSS transitions for phosphor effects.
  */
 export declare const FilterBar: React.FC<FilterBarProps>;

package/dist/components/Footer/components/Footer.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../Separator/components/Separator.css';
 import './Footer.css';
 export interface FooterLink {
     /** Display text for the link */
@@ -23,9 +22,6 @@ export interface FooterProps {
 export declare const defaultLegalLinks: FooterLink[];
 /**
  * DOS-themed footer with copyright and configurable legal/nav links.
- * Uses middle-dot separators between links for authentic terminal aesthetic.
- *
- * When no `links` are provided, renders default legal links (Impressum + Datenschutz)
- * for German compliance. Pass an empty array to explicitly show no links.
+ * Pure presentational — uses middle-dot separators for terminal aesthetic.
  */
 export declare const Footer: React.FC<FooterProps & React.HTMLAttributes<HTMLElement>>;

package/dist/components/Input/components/Input.d.ts

@@ -1,22 +1,13 @@
 import React from 'react';
 import './Input.css';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /**
-     * Visual variant for validation states
-     */
+    /** Visual variant for validation states */
     variant?: 'default' | 'error';
-    /**
-     * Optional class name
-     */
+    /** Optional class name */
     className?: string;
 }
 /**
- * DOS-styled Input component with authentic terminal aesthetics
- *
- * Features:
- * - Extends native HTML input attributes
- * - Error variant for validation states
- * - DOS-authentic styling with CGA colors
- * - WCAG 2.1 AA compliant focus states
+ * DOS-styled Input with phosphor focus glow.
+ * Pure presentational — extends native HTML input.
  */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,58 +1,35 @@
 import React from 'react';
 import './Progress.css';
 export interface ProgressProps {
-    /**
-     * Progress value from 0 to max
-     */
+    /** Progress value from 0 to max */
     value?: number;
-    /**
-     * Maximum value (default 100)
-     */
+    /** Maximum value (default 100) */
     max?: number;
-    /**
-     * Whether progress amount is unknown
-     */
+    /** Whether progress amount is unknown */
     indeterminate?: boolean;
-    /**
-     * Visual variant
-     */
+    /** Visual variant */
     variant?: 'default' | 'success' | 'warning' | 'error';
-    /**
-     * Size of the progress bar
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Track display style
-     */
+    /** Size of the progress bar */
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+    /** Track display style */
     trackStyle?: 'block' | 'bordered' | 'gradient';
-    /**
-     * Number of character cells for the bar width (default 20)
-     */
+    /** Number of character cells for the bar width (default 20) */
     blocks?: number;
-    /**
-     * Show percentage label
-     */
+    /** Show percentage label */
     showLabel?: boolean;
-    /**
-     * Enable phosphor glow on filled blocks
-     */
+    /** Enable phosphor glow on filled blocks */
     glow?: boolean;
-    /**
-     * Human-readable value text for screen readers
-     */
+    /** Human-readable value text for screen readers */
     valueText?: string;
-    /**
-     * Fill available container width instead of sizing by block count.
-     * The label stays adjacent to the bar.
-     */
+    /** Fill available container width instead of sizing by block count */
     fullWidth?: boolean;
-    /**
-     * Additional CSS class name
-     */
+    /** Additional CSS class name */
     className?: string;
-    /**
-     * Accessible label for screen readers
-     */
+    /** Accessible label for screen readers */
     'aria-label'?: string;
 }
+/**
+ * DOS-styled Progress bar with block characters, phosphor glow, and track styles.
+ * Pure presentational — no React Aria needed.
+ */
 export declare const Progress: React.FC<ProgressProps>;

package/dist/components/Separator/components/Separator.d.ts

@@ -1,22 +1,13 @@
 import React from 'react';
 import './Separator.css';
 export interface SeparatorProps {
-    /**
-     * Orientation of the separator line
-     */
+    /** Orientation of the separator line */
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * Additional CSS class name
-     */
+    /** Additional CSS class name */
     className?: string;
 }
 /**
- * DOS-styled Separator component for visual division of content
- *
- * Features:
- * - Horizontal and vertical orientations
- * - Uses semantic border color from design tokens
- * - Decorative role (aria-hidden)
- * - High contrast mode support
+ * DOS-styled Separator component for visual division of content.
+ * Pure presentational — no React Aria needed.
  */
 export declare const Separator: React.FC<SeparatorProps>;

package/dist/components/Stat/components/Stat.d.ts

@@ -1,43 +1,23 @@
 import React from 'react';
 import './Stat.css';
 export interface StatProps {
-    /**
-     * The label describing the metric
-     */
+    /** The label describing the metric */
     label: string;
-    /**
-     * The metric value to display
-     */
+    /** The metric value to display */
     value: string | number;
-    /**
-     * Optional trend direction
-     */
+    /** Optional trend direction */
     trend?: 'up' | 'down' | 'neutral';
-    /**
-     * Optional trend value (e.g., "+5%", "-12")
-     */
+    /** Optional trend value (e.g., "+5%", "-12") */
     trendValue?: string;
-    /**
-     * Size variant
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Whether to animate value changes with a text scramble effect
-     */
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+    /** Whether to animate value changes with a text scramble effect */
     scramble?: boolean;
-    /**
-     * Optional CSS class name
-     */
+    /** Optional CSS class name */
     className?: string;
 }
 /**
- * DOS-styled Stat component for displaying metrics with optional trends
- *
- * Features:
- * - Label and value display
- * - Optional trend indicator (up/down/neutral)
- * - Three sizes (small, medium, large)
- * - DOS-authentic styling with CGA colors
- * - WCAG 2.1 AA compliant
+ * DOS-styled Stat component for displaying metrics with optional trends.
+ * Pure presentational — no React Aria needed.
  */
 export declare const Stat: React.FC<StatProps>;