eidotter 0.36.0 → 0.37.0

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

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

package/dist/components/DosFigure/index.js

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

package/dist/components/EmptyState/components/EmptyState.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+const toneClasses = {
+    default: 'text-dos-text-primary',
+    error: 'text-dos-error',
+    warning: 'text-dos-warning',
+    info: 'text-dos-info',
+};
+/**
+ * DOS-styled empty / zero-state — a centred title, optional description, and an
+ * optional action slot. Pure presentational.
+ *
+ * Ported from Steuerdash (DMNC-859); tones and the description route through
+ * `text-dos-*` semantic roles (not raw `cga-*`) so it re-themes and the
+ * description stays AA-safe (`text-muted` → lightGray under amber-mono).
+ */
+export const EmptyState = ({ title, description, tone = 'default', action, className, }) => (_jsxs("div", { className: cn('eidotter-empty-state', 'flex flex-col gap-2 py-6 text-center', className), role: "status", children: [_jsx("p", { className: cn('font-dos text-dos-text-sm', toneClasses[tone]), children: title }), description && (_jsx("p", { className: "font-dos text-dos-text-xs text-dos-text-muted", children: description })), action && _jsx("div", { className: "mt-2", children: action })] }));
+EmptyState.displayName = 'EmptyState';

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

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

package/dist/components/EmptyState/components/index.js

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

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

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

package/dist/components/EmptyState/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './FilterBar.css';
 export interface FilterBarItem {
     /** Unique identifier for the filter */
     id: string;

package/dist/components/FilterBar/components/FilterBar.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+/**
+ * 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
+ */
+const sizeClasses = {
+    sm: 'eidotter-filter-bar--sm',
+    md: 'eidotter-filter-bar--md',
+    lg: 'eidotter-filter-bar--lg',
+    small: 'eidotter-filter-bar--sm',
+    medium: 'eidotter-filter-bar--md',
+    large: 'eidotter-filter-bar--lg',
+};
+/**
+ * DOS-styled FilterBar for multi-select or single-select content filtering.
+ * Pure presentational — uses CSS transitions for phosphor effects.
+ */
+export const FilterBar = ({ items, activeIds, defaultActiveIds = [], mode = 'multi', showAll = false, allLabel = 'All', size = 'md', onChange, className, ...props }) => {
+    const [internalActiveIds, setInternalActiveIds] = useState(defaultActiveIds);
+    const toolbarRef = useRef(null);
+    const isControlled = activeIds !== undefined;
+    const currentActiveIds = isControlled ? activeIds : internalActiveIds;
+    // All non-disabled item IDs
+    const enabledItemIds = items.filter(item => !item.disabled).map(item => item.id);
+    // Whether "All" is logically active (no specific filters selected)
+    const isAllActive = currentActiveIds.length === 0;
+    const updateSelection = useCallback((newIds) => {
+        if (!isControlled) {
+            setInternalActiveIds(newIds);
+        }
+        onChange?.(newIds);
+    }, [isControlled, onChange]);
+    const handleItemToggle = useCallback((itemId) => {
+        if (mode === 'single') {
+            // In single mode, toggle the item or deselect it
+            const newIds = currentActiveIds.includes(itemId) ? [] : [itemId];
+            updateSelection(newIds);
+        }
+        else {
+            // In multi mode, toggle the item on/off
+            const newIds = currentActiveIds.includes(itemId)
+                ? currentActiveIds.filter(id => id !== itemId)
+                : [...currentActiveIds, itemId];
+            updateSelection(newIds);
+        }
+    }, [mode, currentActiveIds, updateSelection]);
+    const handleAllToggle = useCallback(() => {
+        // Selecting "All" clears all individual selections
+        updateSelection([]);
+    }, [updateSelection]);
+    // Build the list of all focusable button refs: [All?, ...items]
+    const getButtons = useCallback(() => {
+        if (!toolbarRef.current)
+            return [];
+        return Array.from(toolbarRef.current.querySelectorAll('button:not([disabled])'));
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        const buttons = getButtons();
+        const currentIndex = buttons.indexOf(event.target);
+        if (currentIndex === -1)
+            return;
+        let newIndex = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                newIndex = currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = buttons.length - 1;
+                break;
+        }
+        if (newIndex !== null) {
+            buttons[newIndex].focus();
+        }
+    }, [getButtons]);
+    // Determine the currently focused index for roving tabindex
+    // The first active item gets tabIndex 0, or the All button, or the first enabled item
+    const getFocusableId = () => {
+        if (showAll && isAllActive)
+            return '__all__';
+        if (currentActiveIds.length > 0)
+            return currentActiveIds[0];
+        if (showAll)
+            return '__all__';
+        return enabledItemIds[0] || null;
+    };
+    const focusableId = getFocusableId();
+    return (_jsxs("div", { ref: toolbarRef, className: cn('inline-flex flex-wrap items-center gap-1 p-1 font-dos max-w-full', 'bg-dos-bg-secondary border border-dos-border-default rounded-dos-sm', 'eidotter-filter-bar', sizeClasses[size] || sizeClasses.md, className), role: "toolbar", onKeyDown: handleKeyDown, ...props, children: [showAll && (_jsx(AriaButton, { className: cn('eidotter-filter-bar__item', 'eidotter-filter-bar__item--all', isAllActive && 'eidotter-filter-bar__item--active'), "aria-pressed": isAllActive, excludeFromTabOrder: focusableId !== '__all__', onPress: handleAllToggle, children: _jsx("span", { className: "eidotter-filter-bar__label", children: allLabel }) })), items.map((item) => {
+                const isActive = currentActiveIds.includes(item.id);
+                const style = isActive && item.color
+                    ? { '--filter-bar-item-color': `var(${item.color})` }
+                    : undefined;
+                return (_jsxs(AriaButton, { className: cn('eidotter-filter-bar__item', isActive && 'eidotter-filter-bar__item--active', item.disabled && 'eidotter-filter-bar__item--disabled'), "aria-pressed": isActive, excludeFromTabOrder: focusableId !== item.id, isDisabled: item.disabled, onPress: () => handleItemToggle(item.id), style: style, children: [_jsx("span", { className: "eidotter-filter-bar__label", children: item.label }), item.count !== undefined && (_jsx("span", { className: "eidotter-filter-bar__count", "aria-label": `${item.count} items`, children: item.count }))] }, item.id));
+            })] }));
+};

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

@@ -1,2 +1,2 @@
-export { FilterBar } from './FilterBar';
-export type { FilterBarProps, FilterBarItem } from './FilterBar';
+export { FilterBar } from './FilterBar.js';
+export type { FilterBarProps, FilterBarItem } from './FilterBar.js';

package/dist/components/FilterBar/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { FilterBar } from './components';
-export type { FilterBarProps, FilterBarItem } from './components';
+export { FilterBar } from './components/index.js';
+export type { FilterBarProps, FilterBarItem } from './components/index.js';

package/dist/components/FilterBar/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Footer.css';
 export interface FooterLink {
     /** Display text for the link */
     label: string;

package/dist/components/Footer/components/Footer.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../../utils/cn.js';
+/** Default legal links for German compliance (DDG § 5 / GDPR) */
+export const defaultLegalLinks = [
+    { label: 'Impressum', href: '/impressum' },
+    { label: 'Datenschutz', href: '/datenschutz' },
+];
+/**
+ * DOS-themed footer with copyright and configurable legal/nav links.
+ * Pure presentational — uses middle-dot separators for terminal aesthetic.
+ */
+export const Footer = ({ copyright, links, linkComponent, children, className, ...props }) => {
+    const resolvedLinks = links ?? defaultLegalLinks;
+    const LinkTag = linkComponent ?? 'a';
+    const linkClassName = 'eidotter-footer__link text-dos-text-brand no-underline';
+    return (_jsxs("footer", { className: cn('font-dos text-sm py-4 px-2 text-center', 'eidotter-footer', className), ...props, children: [_jsx("div", { className: "h-px bg-dos-border-default mb-4", role: "separator" }), children && _jsx("div", { className: "mb-3", children: children }), resolvedLinks.length > 0 && (_jsx("nav", { className: "flex justify-center items-center flex-wrap gap-2 mb-2", "aria-label": "Footer links", children: resolvedLinks.map((link, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx("span", { className: "text-dos-text-muted select-none eidotter-footer__dot", "aria-hidden": "true", children: "\u00B7" }), link.external ? (_jsx("a", { className: linkClassName, href: link.href, target: "_blank", rel: "noopener noreferrer", children: link.label })) : (_jsx(LinkTag, { className: linkClassName, href: link.href, children: link.label }))] }, link.href))) })), copyright && (_jsxs("p", { className: "text-dos-text-muted m-0", children: ["\u00A9 ", copyright] }))] }));
+};

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

@@ -1,2 +1,2 @@
-export { Footer, defaultLegalLinks } from './Footer';
-export type { FooterProps, FooterLink } from './Footer';
+export { Footer, defaultLegalLinks } from './Footer.js';
+export type { FooterProps, FooterLink } from './Footer.js';

package/dist/components/Footer/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { Footer, defaultLegalLinks } from './components';
-export type { FooterProps, FooterLink } from './components';
+export { Footer, defaultLegalLinks } from './components/index.js';
+export type { FooterProps, FooterLink } from './components/index.js';

package/dist/components/Footer/index.js

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

package/dist/components/Header/components/Header.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { NavItem, NavProps } from '../../Nav';
-import './Header.css';
+import type { NavItem, NavProps } from '../../Nav/index.js';
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     /** Site brand name displayed in the header */
     brandName?: string;

package/dist/components/Header/components/Header.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { DesktopNav, MobileNav } from '../../Nav/index.js';
+const variantClasses = {
+    retro: 'eidotter-header--retro',
+    modern: 'eidotter-header--modern',
+};
+export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHref, variant = 'retro', sticky = true, linkComponent, children, className, ...rest }, ref) => {
+    const LinkTag = linkComponent ?? 'a';
+    return (_jsxs("header", { ref: ref, className: cn('flex items-center justify-between px-4 py-3 font-dos', 'eidotter-header', variantClasses[variant], sticky && 'sticky top-0 z-50 bg-dos-bg-primary', className), ...rest, children: [_jsx(LinkTag, { href: brandHref, className: cn('no-underline text-base font-bold tracking-wide', 'eidotter-header__branding'), children: children || brandName }), _jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }), _jsx(MobileNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent })] }));
+});
+Header.displayName = 'Header';

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

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

package/dist/components/Header/components/index.js

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

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

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

package/dist/components/Header/index.js

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

package/dist/components/Icon/components/Icon.d.ts

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import './Icon.css';
 type PixelIcon = FC<React.SVGProps<SVGSVGElement>>;
 declare const ICON_MAP: {
     Info: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/components/Icon/components/Icon.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoBox } from 'pixelarticons/react/InfoBox';
+import { WarningDiamond } from 'pixelarticons/react/WarningDiamond';
+import { SquareAlert } from 'pixelarticons/react/SquareAlert';
+import { Check } from 'pixelarticons/react/Check';
+import { ChevronUp } from 'pixelarticons/react/ChevronUp';
+import { ChevronDown } from 'pixelarticons/react/ChevronDown';
+import { WindowFrame } from 'pixelarticons/react/WindowFrame';
+import { Minus } from 'pixelarticons/react/Minus';
+import { Expand } from 'pixelarticons/react/Expand';
+import { Plus } from 'pixelarticons/react/Plus';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Custom pixel-art X mark — pixelarticons v2 has no standalone close/X glyph.
+ * Matches pixelarticons' style: 24×24 viewBox, fill-based single path,
+ * currentColor inheritance, 2×2 unit "pixels" on the grid.
+ */
+const PixelX = (props) => (_jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M5 5h2v2H5zM7 7h2v2H7zM9 9h2v2H9zM11 11h2v2h-2zM13 13h2v2h-2zM15 15h2v2h-2zM17 17h2v2h-2zM17 5h2v2h-2zM15 7h2v2h-2zM13 9h2v2h-2zM9 13h2v2H9zM7 15h2v2H7zM5 17h2v2H5z" }) }));
+// 12 public icon names mapping to 11 unique pixelarticons components.
+// Done and Check both map to the Check component intentionally — consumers
+// can use either semantic name for a checkmark glyph.
+//
+// Non-obvious mappings:
+// - 'Close' → custom PixelX component: pixelarticons v2 has no standalone
+//   X/close glyph, so we draw a pixel-art X mark matching their style
+//   (24×24 viewBox, fill-based single path, 2×2 unit pixels).
+// - 'Cancel' → pixelarticons Minus: this name carries Terminal-window semantics
+//   (cancel/minimize control), rendered as a minus glyph matching DOS window
+//   chrome. A future release may rename this to 'Minimize' for clarity.
+// - 'App' → pixelarticons WindowFrame: used for the Terminal window icon.
+const ICON_MAP = {
+    'Info': InfoBox,
+    'Warning': WarningDiamond,
+    'Error': SquareAlert,
+    'Done': Check,
+    'Check': Check,
+    'Close': PixelX, // custom pixel-art X mark (pixelarticons has no X glyph)
+    'Chevron Up': ChevronUp,
+    'Chevron Down': ChevronDown,
+    'App': WindowFrame,
+    'Cancel': Minus, // window minimize control, not abort
+    'Fullscreen': Expand,
+    'Add': Plus,
+};
+const SIZE_MAP = { L: 56, S: 24 };
+/**
+ * Icon component backed by pixelarticons (MIT licensed).
+ * Renders inline SVG with proper viewBox scaling at any size.
+ * The DOS pixel aesthetic matches eidotter's design language.
+ */
+export const Icon = ({ name, size = 'L', className = '', onClick, color, role, 'aria-label': ariaLabel, }) => {
+    // Runtime defense against JS consumers or dynamically-cast names.
+    // TypeScript users are already constrained to IconName by IconProps.
+    const IconComponent = ICON_MAP[name];
+    if (!IconComponent)
+        return null;
+    const pixelSize = SIZE_MAP[size];
+    // Default to role="img" so the aria-label is allowed (ARIA 1.2 prohibits
+    // aria-label on the implicit `generic` role of <span>). When the consumer
+    // marks the icon as an interactive control via role="button", that takes
+    // precedence and the consumer is responsible for handling activation.
+    const resolvedRole = role ?? 'img';
+    const isButton = role === 'button';
+    // When the icon is itself the interactive control (role="button"), make it
+    // keyboard-operable: focusable + Enter/Space activation, matching native
+    // button behavior. Without this the shipped :focus-visible style can never
+    // fire because the span isn't in the tab order.
+    const handleKeyDown = isButton
+        ? (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onClick?.();
+            }
+        }
+        : undefined;
+    return (_jsx("span", { className: cn('icon', isButton && 'icon--button', className), onClick: onClick, onKeyDown: handleKeyDown, role: resolvedRole, tabIndex: isButton ? 0 : undefined, "aria-label": ariaLabel || `${name} icon`, style: color ? { color } : undefined, children: _jsx(IconComponent, { width: pixelSize, height: pixelSize, className: "icon__svg" }) }));
+};

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

@@ -1,2 +1,2 @@
-export { Icon } from './Icon';
-export type { IconProps, IconName, IconSize } from './Icon';
+export { Icon } from './Icon.js';
+export type { IconProps, IconName, IconSize } from './Icon.js';

package/dist/components/Icon/components/index.js

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

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

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

package/dist/components/Icon/index.js

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

package/dist/components/InlineExpand/components/InlineExpand.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './InlineExpand.css';
 export interface InlineExpandSource {
     /** Link text displayed as accessible label */
     title: string;

package/dist/components/InlineExpand/components/InlineExpand.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+import { isSafeUrl } from '../../../utils/isSafeUrl.js';
+/**
+ * Inline disclosure widget that reveals content when trigger text is clicked.
+ *
+ * Unlike Section/Accordion (block-level, bordered sections), InlineExpand is
+ * designed for inline use within paragraphs and prose content.
+ *
+ * Features:
+ * - Controlled and uncontrolled modes
+ * - Native <button> trigger for full keyboard/screen reader support
+ * - Optional citation sources with favicons
+ * - DOS-authentic styling with phosphor glow and CGA tokens
+ * - WCAG 2.1 AA compliant
+ *
+ * Content stays in the DOM when collapsed (with visibility: hidden) to enable
+ * smooth CSS transition exit animations. This differs from Section which
+ * unmounts content on collapse via conditional rendering.
+ */
+export const InlineExpand = ({ children, content, defaultExpanded = false, expanded, onToggle, sources = [], className, ...props }) => {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const [failedFavicons, setFailedFavicons] = useState(new Set());
+    const hasBeenExpanded = useRef(defaultExpanded);
+    const contentId = useId();
+    const triggerRef = useRef(null);
+    const isControlled = expanded !== undefined;
+    const isExpanded = isControlled ? expanded : internalExpanded;
+    if (isExpanded) {
+        hasBeenExpanded.current = true;
+    }
+    const handleToggle = () => {
+        const next = !isExpanded;
+        if (!isControlled) {
+            setInternalExpanded(next);
+        }
+        onToggle?.(next);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && isExpanded) {
+            event.stopPropagation();
+            handleToggle();
+            triggerRef.current?.focus();
+        }
+    };
+    return (_jsxs("span", { className: cn('eidotter-inline-expand', isExpanded && 'eidotter-inline-expand--expanded', className), onKeyDown: handleKeyDown, ...props, children: [_jsxs(AriaButton, { ref: triggerRef, className: "eidotter-inline-expand__trigger", "aria-expanded": isExpanded, "aria-controls": contentId, onPress: handleToggle, children: [children, _jsx("span", { className: "eidotter-inline-expand__indicator", "aria-hidden": "true", children: isExpanded ? '[-]' : '[+]' })] }), _jsx("span", { id: contentId, className: "eidotter-inline-expand__content", role: "region", inert: !isExpanded, children: _jsxs("span", { className: "eidotter-inline-expand__content-clip", children: [_jsx("span", { className: "eidotter-inline-expand__inner", children: content }), sources.length > 0 && (_jsx("span", { className: "eidotter-inline-expand__sources", role: "list", children: sources.map((source) => (_jsx("span", { className: "eidotter-inline-expand__source-item", role: "listitem", children: _jsxs("a", { href: isSafeUrl(source.url) ? source.url : undefined, className: "eidotter-inline-expand__source-link", target: "_blank", rel: "noopener noreferrer", "aria-label": `${source.title} (opens external website)`, children: [hasBeenExpanded.current && source.favicon && isSafeUrl(source.favicon) && !failedFavicons.has(source.url) ? (_jsx("img", { className: "eidotter-inline-expand__source-favicon", src: source.favicon, alt: "", width: 16, height: 16, decoding: "async", onError: () => setFailedFavicons(prev => new Set(prev).add(source.url)) })) : (_jsx("span", { className: "eidotter-inline-expand__source-icon", "aria-hidden": "true", children: "[\u2192]" })), _jsx("span", { className: "eidotter-inline-expand__source-title", children: source.title })] }) }, source.url))) }))] }) })] }));
+};

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

@@ -1,2 +1,2 @@
-export { InlineExpand } from './InlineExpand';
-export type { InlineExpandProps, InlineExpandSource } from './InlineExpand';
+export { InlineExpand } from './InlineExpand.js';
+export type { InlineExpandProps, InlineExpandSource } from './InlineExpand.js';

package/dist/components/InlineExpand/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { InlineExpand } from './components';
-export type { InlineExpandProps, InlineExpandSource } from './components';
+export { InlineExpand } from './components/index.js';
+export type { InlineExpandProps, InlineExpandSource } from './components/index.js';

package/dist/components/InlineExpand/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './InlineLink.css';
 export interface InlineLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
     /** Link text. */
     children: React.ReactNode;

package/dist/components/InlineLink/components/InlineLink.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+// Relative paths, hash/query fragments, and standard nav schemes are allowed.
+// Everything else (javascript:, data:, vbscript:, unknown schemes) collapses
+// to a safe "#" sentinel.
+function sanitizeHref(href) {
+    const trimmed = href.trim();
+    if (trimmed === '')
+        return trimmed;
+    if (/^[#?/]/.test(trimmed))
+        return trimmed;
+    const schemeMatch = /^([a-z][a-z0-9+\-.]*):/i.exec(trimmed);
+    if (!schemeMatch)
+        return trimmed;
+    const scheme = schemeMatch[1].toLowerCase();
+    const allowed = ['http', 'https', 'mailto', 'tel', 'ftp', 'sms'];
+    return allowed.includes(scheme) ? trimmed : '#';
+}
+// Union-merge caller rel tokens with the required safety tokens so
+// consumer-supplied `rel="external"` still gets `noopener noreferrer` when the
+// link opens in a new tab.
+function mergeRel(callerRel, required) {
+    if (required.length === 0)
+        return callerRel;
+    const tokens = new Set((callerRel ?? '').split(/\s+/).map(t => t.trim().toLowerCase()).filter(Boolean));
+    for (const token of required)
+        tokens.add(token.toLowerCase());
+    return Array.from(tokens).join(' ');
+}
+/**
+ * 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 (`text.tertiary` role; amber-dim under the default theme).
+ * 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 const InlineLink = forwardRef(({ children, href, showGlyph = true, external = false, className, target, rel, ...props }, ref) => {
+    const safeHref = sanitizeHref(href);
+    const resolvedTarget = target ?? (external ? '_blank' : undefined);
+    // Apply safe rel when the link opens in a new tab for ANY reason —
+    // explicit `external` or consumer-supplied `target="_blank"`. Merge with
+    // caller rel so `rel="author"` + target=_blank still guards against
+    // tabnabbing.
+    const opensInNewTab = resolvedTarget === '_blank';
+    const resolvedRel = opensInNewTab
+        ? mergeRel(rel, ['noopener', 'noreferrer'])
+        : rel;
+    // `external` drives the glyph, but only when the link actually opens in a
+    // new tab — `external={true} target="_self"` is an inconsistency we resolve
+    // by falling back to the in-flow glyph.
+    const glyph = external && opensInNewTab ? '↗' : '▸';
+    return (_jsxs("a", { ref: ref, href: safeHref, target: resolvedTarget, rel: resolvedRel, className: cn('eidotter-ilink', external && 'eidotter-ilink--external', className), ...props, children: [_jsx("span", { className: "eidotter-ilink__label", children: children }), showGlyph && (_jsx("span", { className: "eidotter-ilink__glyph", "aria-hidden": "true", children: glyph }))] }));
+});
+InlineLink.displayName = 'InlineLink';

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

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

package/dist/components/InlineLink/components/index.js

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

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

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

package/dist/components/InlineLink/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Input.css';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Visual variant for validation states */
     variant?: 'default' | 'error';

package/dist/components/Input/components/Input.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TextField as AriaTextField, Input as AriaInput, Label as AriaLabel, Text as AriaText, } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+const variantClasses = {
+    default: 'eidotter-input--default',
+    error: 'eidotter-input--error',
+};
+/**
+ * DOS-styled Input with React Aria TextField.
+ * Provides automatic label association, description, and error message support.
+ */
+export const Input = forwardRef(({ variant = 'default', label, description, errorMessage, disabled, className, onChange, isRequired, ...props }, ref) => {
+    const isInvalid = variant === 'error';
+    return (_jsxs(AriaTextField, { isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, className: cn('eidotter-text-field', 'flex flex-col gap-1', className), children: [label && (_jsx(AriaLabel, { className: "text-dos-text-brand font-dos text-xs uppercase tracking-wider", children: label })), _jsx(AriaInput, { ref: ref, className: cn('w-full bg-transparent text-dos-text-brand font-dos text-base p-2', 'border-2 border-dos-border-default outline-none box-border', 'eidotter-input', variantClasses[variant] || variantClasses.default, disabled && 'eidotter-input--disabled'), onChange: onChange, ...props }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: "text-dos-text-muted font-dos text-xs", children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: "text-dos-text-error font-dos text-xs", children: errorMessage }))] }));
+});
+Input.displayName = 'Input';

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

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

package/dist/components/Input/components/index.js

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

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

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

package/dist/components/Input/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './LabeledProgress.css';
 export interface LabeledProgressProps {
     /** Optional leading label rendered before the bar. */
     label?: React.ReactNode;