eidotter 0.36.0 → 0.37.0

package/README.md

@@ -79,6 +79,25 @@ module.exports = {
 
 The preset auto-registers `tailwindcss-react-aria-components` and `tailwindcss-animate` if they resolve. Migrating from the pre-0.19.2 dual-preset split? See [CHANGELOG → 0.19.2](./CHANGELOG.md#0192--2026-04-18).
 
+### Server Components (RSC / Next.js App Router)
+
+The `.` barrel (`import { Button } from 'eidotter'`) inlines every component into one
+module, so importing it into a **server component** pulls interactive components' hooks
+into the RSC graph and fails. For server components, deep-import per component instead:
+
+```tsx
+// In a Server Component:
+import { SectionHeading } from 'eidotter/components/SectionHeading'; // presentational — renders on the server
+import { Button } from 'eidotter/components/Button';                 // interactive — resolves as a client reference
+
+import 'eidotter/styles'; // CSS still ships once, app-wide (unchanged)
+```
+
+`eidotter/components/<Name>` (PascalCase, matching the component) carries `'use client'`
+on interactive components automatically, so they cross the client boundary correctly while
+presentational primitives stay server-renderable. The `.` barrel remains the right default
+for client apps and `'use client'` files.
+
 ## Documentation
 
 | | |

package/dist/components/AIText/components/AIText.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../styles/provenance.css';
 export interface AITextProps {
     children: React.ReactNode;
     className?: string;

package/dist/components/AIText/components/AIText.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+/**
+ * Inline marker for AI-drafted prose. Renders a `<span>` with
+ * `data-provenance="ai-draft"`, the canonical attribute set by the eidotter
+ * provenance system (DMNC-884). The visual treatment — a static, theme-aware
+ * magenta gradient clipped to the text ('AI writer' style; DMNC-946) — lives in
+ * `src/styles/provenance.css` and is shared with the per-paragraph diff pipeline.
+ *
+ * For per-paragraph use inside MDX, prefer wrapping the paragraph directly:
+ *   <p data-provenance="ai-draft">…</p>
+ * The diff script (`mark-provenance.mjs`) unwraps that to plain `<p>` once
+ * the paragraph drifts ≥40% from its AI baseline.
+ *
+ * This component is the inline ergonomic shortcut — useful for marking a
+ * single phrase within otherwise-human prose, or for hand-authored MDX where
+ * `<AIText>part of this paragraph</AIText>` reads more naturally than the
+ * raw attribute.
+ */
+export const AIText = ({ children, className, title = 'AI-assisted text — being rewritten', }) => {
+    return (_jsxs("span", { "data-provenance": "ai-draft", className: cn('eidotter-ai-text', className), title: title, children: [_jsx("span", { className: "eidotter-ai-text__sr-only", children: "AI-assisted: " }), children] }));
+};
+AIText.displayName = 'AIText';

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

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

package/dist/components/AIText/components/index.js

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

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

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

package/dist/components/AIText/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './AccordionFill.css';
 export interface AccordionFillProps {
     sections: Array<{
         title: string;

package/dist/components/Accordion/components/AccordionFill.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Section } from './Section.js';
+import { cn } from '../../../utils/cn.js';
+export const AccordionFill = ({ sections, defaultExpandedIndex = -1, className, }) => {
+    const [, setExpandedIndex] = useState(defaultExpandedIndex);
+    const handleToggle = (index, isExpanded) => {
+        setExpandedIndex(isExpanded ? index : -1);
+    };
+    return (_jsx("div", { className: cn('w-full flex flex-col items-stretch gap-2 text-left text-base font-dos text-dos-text-brand', 'eidotter-accordion-fill', className), children: sections.map((section, index) => (_jsx(Section, { title: section.title, defaultExpanded: index === defaultExpandedIndex, onToggle: (isExpanded) => handleToggle(index, isExpanded), children: section.content }, index))) }));
+};

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Section.css';
 export interface SectionProps {
     /** The title text of the section */
     title: string;

package/dist/components/Accordion/components/Section.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { Icon } from '../../Icon/components/Icon.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS-styled collapsible section (accordion item).
+ * Pure presentational — uses CSS transitions for expand/collapse.
+ */
+export const Section = ({ title, children, defaultExpanded = false, isHovered = false, isActive = false, onToggle, }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    useEffect(() => {
+        setIsExpanded(defaultExpanded);
+    }, [defaultExpanded]);
+    const handleToggle = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        onToggle?.(newExpanded);
+    };
+    return (_jsxs("div", { className: cn('w-full border border-dos-border-default text-dos-text-brand font-dos', 'eidotter-section', isExpanded && 'eidotter-section--expanded', isHovered && 'eidotter-section--hover', isActive && 'eidotter-section--active'), children: [_jsxs(AriaButton, { className: "eidotter-section__header w-full flex justify-between items-center px-4 py-2 bg-transparent border-0 text-inherit font-[inherit] cursor-pointer text-left", onPress: handleToggle, "aria-expanded": isExpanded, children: [_jsx("div", { className: "flex-1 text-base leading-6", children: title }), _jsx("div", { className: "eidotter-section__icon flex items-center justify-center w-6 h-6 ml-2 text-inherit", children: _jsx(Icon, { name: isExpanded ? 'Chevron Up' : 'Chevron Down', size: "S" }) })] }), _jsx("div", { className: "eidotter-section__content", inert: !isExpanded ? true : undefined, children: _jsx("div", { className: "eidotter-section__content-inner", children: children }) })] }));
+};

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

@@ -1,4 +1,4 @@
-export { Section } from './Section';
-export type { SectionProps } from './Section';
-export { AccordionFill } from './AccordionFill';
-export type { AccordionFillProps } from './AccordionFill';
+export { Section } from './Section.js';
+export type { SectionProps } from './Section.js';
+export { AccordionFill } from './AccordionFill.js';
+export type { AccordionFillProps } from './AccordionFill.js';

package/dist/components/Accordion/components/index.js

@@ -0,0 +1,2 @@
+export { Section } from './Section.js';
+export { AccordionFill } from './AccordionFill.js';

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

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

package/dist/components/Accordion/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Alert.css';
 export type AlertColor = 'brand' | 'gray' | 'default' | 'error' | 'warning' | 'success';
 export interface AlertAction {
     /** Button label */

package/dist/components/Alert/components/Alert.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+import { Icon } from '../../Icon/components/Icon.js';
+import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
+const TYPE_TO_COLOR = {
+    info: 'default',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    default: 'default',
+    brand: 'brand',
+};
+const COLOR_ICONS = {
+    brand: 'Info',
+    gray: 'Info',
+    default: 'Info',
+    error: 'Error',
+    warning: 'Warning',
+    success: 'Done',
+};
+function resolveColor(color, type) {
+    if (color)
+        return color;
+    return TYPE_TO_COLOR[type || 'info'] || 'default';
+}
+function resolveSize(size) {
+    if (size === 'full-width')
+        return 'full-width';
+    return 'floating';
+}
+/**
+ * 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 const Alert = forwardRef(({ color: colorProp, size = 'floating', type, title, children, actions, onClose, onClickHere, className, }, ref) => {
+    const resolvedColor = resolveColor(colorProp, type);
+    const resolvedSize = resolveSize(size);
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('alert-exit', onClose);
+    // Build actions list (new prop + legacy onClickHere)
+    const allActions = [
+        ...(actions || []),
+        ...(onClickHere ? [{ label: 'Click here', onClick: onClickHere }] : []),
+    ];
+    return (_jsxs("div", { ref: ref, className: cn('relative w-full flex flex-col gap-4 p-4', 'font-dos text-dos-text-sm', 'border border-dos-border-default rounded-dos-base', 'eidotter-alert', `eidotter-alert--${resolvedColor}`, resolvedSize === 'floating' && 'max-w-[1216px]', resolvedSize === 'full-width' && 'eidotter-alert--full-width max-w-none', isClosing && 'eidotter-alert--closing', className), onAnimationEnd: handleAnimationEnd, role: "alert", "data-color": resolvedColor, "data-size": resolvedSize, children: [_jsx("div", { className: "eidotter-alert__icon", children: _jsx(Icon, { name: COLOR_ICONS[resolvedColor] || 'Info', size: "S", "aria-label": `${resolvedColor} alert` }) }), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && 'pr-6'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-alert__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-alert__text font-dos leading-[140%]", children: children }))] })), allActions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: allActions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-alert__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(AriaButton, { className: "eidotter-alert__close", onPress: triggerClose, "aria-label": "Close alert", children: _jsx(Icon, { name: "Close", size: "S" }) }))] }));
+});
+Alert.displayName = 'Alert';

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

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

package/dist/components/Alert/components/index.js

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

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

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

package/dist/components/Alert/index.js

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

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

@@ -1,5 +1,4 @@
 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' | 'brand' | 'gray' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';

package/dist/components/Badge/components/Badge.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+const sizeClasses = {
+    sm: 'text-dos-text-xs px-2 py-0.5 min-h-6 gap-1',
+    md: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1.5',
+    lg: 'text-dos-text-md px-3 py-1.5 min-h-8 gap-1.5',
+    small: 'text-dos-text-xs px-2 py-0.5 min-h-6 gap-1',
+    medium: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1.5',
+};
+const variantClasses = {
+    default: 'eidotter-badge--default',
+    success: 'eidotter-badge--success',
+    warning: 'eidotter-badge--warning',
+    error: 'eidotter-badge--error',
+    info: 'eidotter-badge--info',
+    accent: 'eidotter-badge--accent',
+    brand: 'eidotter-badge--accent',
+    gray: 'eidotter-badge--default',
+    blue: 'eidotter-badge--info',
+    indigo: 'eidotter-badge--info',
+    purple: 'eidotter-badge--info',
+    pink: 'eidotter-badge--error',
+    orange: 'eidotter-badge--warning',
+};
+/**
+ * DOS-styled Badge for status indicators, labels, and counts.
+ * Pure presentational — no React Aria needed.
+ */
+export const Badge = forwardRef(({ variant = 'default', size = 'md', dot = false, children, className, ...props }, ref) => (_jsxs("span", { ref: ref, className: cn('inline-flex items-center justify-center', 'font-dos leading-none whitespace-nowrap select-none', 'uppercase tracking-wider', 'rounded-dos-sm', 'eidotter-badge', sizeClasses[size] || sizeClasses.md, variantClasses[variant] || variantClasses.default, className), "data-variant": variant, ...props, children: [dot && _jsx("span", { className: "eidotter-badge__dot", "aria-hidden": "true" }), _jsx("span", { className: "eidotter-badge__content", children: children })] })));
+Badge.displayName = 'Badge';

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

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

package/dist/components/Badge/components/index.js

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

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

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

package/dist/components/Badge/index.js

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

package/dist/components/Brand/components/BrandLockup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Logo } from './Logo.js';
+import { Wordmark } from './Wordmark.js';
+/**
+ * eiDotter brand lockup — Logo + Wordmark composed horizontally.
+ *
+ * The canonical public-facing brand mark. Scales by setting the host's
+ * `font-size` (wordmark) and `logoSize` prop (icon). The two should stay
+ * proportional: roughly `logoSize ≈ font-size × 1.75`.
+ */
+export const BrandLockup = forwardRef(({ logoSize = 32, iconOnly = false, wordmarkOnly = false, glow = true, className, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn('eidotter-brand-lockup inline-flex items-center gap-3', className), role: "img", "aria-label": "eiDotter", ...props, children: [!wordmarkOnly && _jsx(Logo, { size: logoSize, glow: glow, title: "" }), !iconOnly && _jsx(Wordmark, { glow: glow, "aria-hidden": "true" })] })));
+BrandLockup.displayName = 'BrandLockup';

package/dist/components/Brand/components/Logo.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SVGProps } from 'react';
-import './Brand.css';
 export interface LogoProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'children'> {
     /** Icon size in pixels. Defaults to 32. Pass a number or CSS-valid string. */
     size?: number | string;

package/dist/components/Brand/components/Logo.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cn } from '../../../utils/cn.js';
+/**
+ * eiDotter brand mark — the Foundation Logomark (Figma node 16-610):
+ * a pixel-dotted ring (the "dotter") around the amber yolk, with pixel
+ * specular highlights and a soft radial phosphor halo. Mark only, on
+ * transparent — the iOS-style app-icon container in the Figma component
+ * is an app-icon artifact, not part of the inline mark.
+ *
+ * Fill colors are brand-locked (explicit amber hexes) rather than themed so
+ * the mark reads identically across themes. Gradient ids are namespaced via
+ * useId so multiple logos per page (header + footer) don't collide.
+ */
+export const Logo = forwardRef(({ size = 32, glow = true, title = 'eiDotter', className, ...props }, ref) => {
+    const uid = useId();
+    const haloId = `eidotter-logo-halo-${uid}`;
+    const coreId = `eidotter-logo-core-${uid}`;
+    return (_jsxs("svg", { ref: ref, width: size, height: size, viewBox: "8 7 22 22", xmlns: "http://www.w3.org/2000/svg", role: title ? 'img' : undefined, "aria-hidden": title ? undefined : true, className: cn('eidotter-logo', glow && 'eidotter-logo--glow', className), ...props, children: [title ? _jsx("title", { children: title }) : null, _jsxs("defs", { children: [_jsxs("radialGradient", { id: haloId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 19.1) scale(13.2)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.3" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] }), _jsxs("radialGradient", { id: coreId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 18.9) scale(9.9)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.45" }), _jsx("stop", { offset: "0.6", stopColor: "#9A5700", stopOpacity: "0.22" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] })] }), _jsx("path", { d: "M19 29C25.0751 29 30 24.0751 30 18C30 11.9249 25.0751 7 19 7C12.9249 7 8 11.9249 8 18C8 24.0751 12.9249 29 19 29Z", fill: `url(#${haloId})` }), _jsx("path", { d: "M19 27C23.9706 27 28 22.9706 28 18C28 13.0294 23.9706 9 19 9C14.0294 9 10 13.0294 10 18C10 22.9706 14.0294 27 19 27Z", fill: `url(#${coreId})` }), _jsx("path", { d: "M20.375 9.0625H17.625V9.75H20.375V9.0625Z", fill: "#FFB000" }), _jsx("path", { d: "M16.9375 9.75H15.5625V10.4375H16.9375V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M17.625 9.75H16.9375V10.4375H17.625V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M22.4375 9.75H20.375V10.4375H22.4375V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M15.5625 10.4375H14.1875V11.125H15.5625V10.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M23.8125 10.4375H22.4375V11.125H23.8125V10.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M14.1875 11.125H13.5V11.8125H14.1875V11.125Z", fill: "#FFB000" }), _jsx("path", { d: "M25.1875 11.125H23.8125V11.8125H25.1875V11.125Z", fill: "#FFB000" }), _jsx("path", { d: "M13.5 11.8125H12.8125V12.5H13.5V11.8125Z", fill: "#FFB000" }), _jsx("path", { d: "M25.875 11.8125H25.1875V13.1875H25.875V11.8125Z", fill: "#FFB000" }), _jsx("path", { d: "M12.8125 12.5H12.125V13.875H12.8125V12.5Z", fill: "#FFB000" }), _jsx("path", { d: "M12.125 13.875H11.4375V15.9375H12.125V13.875Z", fill: "#FFB000" }), _jsx("path", { d: "M11.4375 15.9375H10.75V18H11.4375V15.9375Z", fill: "#FFB000" }), _jsx("path", { d: "M10.75 18H10.0625V19.375H10.75V18Z", fill: "#FFB000" }), _jsx("path", { d: "M11.4375 19.375H10.75V20.75H11.4375V19.375Z", fill: "#FFB000" }), _jsx("path", { d: "M12.125 20.75H11.4375V22.125H12.125V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M12.8125 22.125H12.125V23.5H12.8125V22.125Z", fill: "#FFB000" }), _jsx("path", { d: "M26.5625 13.1875H25.875V15.25H26.5625V13.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M27.25 15.25H26.5625V17.3125H27.25V15.25Z", fill: "#FFB000" }), _jsx("path", { d: "M27.9375 17.3125H27.25V19.375H27.9375V17.3125Z", fill: "#FFB000" }), _jsx("path", { d: "M27.25 19.375H26.5625V20.75H27.25V19.375Z", fill: "#FFB000" }), _jsx("path", { d: "M26.5625 20.75H25.875V22.125H26.5625V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M25.875 22.125H25.1875V23.5H25.875V22.125Z", fill: "#FFB000" }), _jsx("path", { d: "M14.1875 23.5H12.8125V24.1875H14.1875V23.5Z", fill: "#FFB000" }), _jsx("path", { d: "M16.25 24.1875H14.1875V24.875H16.25V24.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M18.3125 24.875H16.25V25.5625H18.3125V24.875Z", fill: "#FFB000" }), _jsx("path", { d: "M20.375 25.5625H18.3125V26.25H20.375V25.5625Z", fill: "#FFB000" }), _jsx("path", { d: "M22.4375 24.875H20.375V25.5625H22.4375V24.875Z", fill: "#FFB000" }), _jsx("path", { d: "M24.5 24.1875H22.4375V24.875H24.5V24.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M25.1875 23.5H24.5V24.1875H25.1875V23.5Z", fill: "#FFB000" }), _jsx("path", { d: "M10.0625 15.9375H9.375V16.625H10.0625V15.9375Z", fill: "#FFB000" }), _jsx("path", { d: "M29.3125 16.625H28.625V17.3125H29.3125V16.625Z", fill: "#FFB000" }), _jsx("path", { d: "M28.625 20.75H27.9375V21.4375H28.625V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M10.75 21.4375H10.0625V22.125H10.75V21.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M18.4375 21C20.6466 21 22.4375 19.2091 22.4375 17C22.4375 14.7909 20.6466 13 18.4375 13C16.2284 13 14.4375 14.7909 14.4375 17C14.4375 19.2091 16.2284 21 18.4375 21Z", fill: "#FFB000" }), _jsx("path", { d: "M16.25 15.25H15.5625V17.3125H16.25V15.25Z", fill: "#FFC233" }), _jsx("path", { d: "M18.3125 13.875H16.25V14.5625H18.3125V13.875Z", fill: "#FFC233" }), _jsx("path", { d: "M16.25 14.5625H15.5625V15.25H16.25V14.5625Z", fill: "#FFC233" }), _jsx("path", { d: "M17.5 17C18.3284 17 19 16.3284 19 15.5C19 14.6716 18.3284 14 17.5 14C16.6716 14 16 14.6716 16 15.5C16 16.3284 16.6716 17 17.5 17Z", fill: "#FFD97A" }), _jsx("path", { d: "M17.5 15C17.7761 15 18 14.7761 18 14.5C18 14.2239 17.7761 14 17.5 14C17.2239 14 17 14.2239 17 14.5C17 14.7761 17.2239 15 17.5 15Z", fill: "#FFE8A8" })] }));
+});
+Logo.displayName = 'Logo';

package/dist/components/Brand/components/Wordmark.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { HTMLAttributes } from 'react';
-import './Brand.css';
 export interface WordmarkProps extends HTMLAttributes<HTMLSpanElement> {
     /** Add the amber phosphor text-shadow glow. Defaults to true. */
     glow?: boolean;

package/dist/components/Brand/components/Wordmark.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';
+/**
+ * eiDotter wordmark — "eiDotter" with the "ei" prefix dimmed against the full-bright "Dotter".
+ *
+ * Uses the primary DOS font (Flexi IBM VGA True) and the amber phosphor palette.
+ * Sized via `font-size` on the host; the component does not set its own size by
+ * default so it inherits from the surrounding type scale. Wrap in a heading
+ * element if you need semantic weight.
+ */
+export const Wordmark = forwardRef(({ glow = true, className, ...props }, ref) => (_jsxs("span", { ref: ref, className: cn('eidotter-wordmark font-dos', glow && 'eidotter-wordmark--glow', className), "aria-label": "eiDotter", ...props, children: [_jsx("span", { className: "eidotter-wordmark__prefix", "aria-hidden": "true", children: "ei" }), _jsx("span", { className: "eidotter-wordmark__body", "aria-hidden": "true", children: "Dotter" })] })));
+Wordmark.displayName = 'Wordmark';

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

@@ -1,6 +1,6 @@
-export { Logo } from './Logo';
-export type { LogoProps } from './Logo';
-export { Wordmark } from './Wordmark';
-export type { WordmarkProps } from './Wordmark';
-export { BrandLockup } from './BrandLockup';
-export type { BrandLockupProps } from './BrandLockup';
+export { Logo } from './Logo.js';
+export type { LogoProps } from './Logo.js';
+export { Wordmark } from './Wordmark.js';
+export type { WordmarkProps } from './Wordmark.js';
+export { BrandLockup } from './BrandLockup.js';
+export type { BrandLockupProps } from './BrandLockup.js';

package/dist/components/Brand/components/index.js

@@ -0,0 +1,3 @@
+export { Logo } from './Logo.js';
+export { Wordmark } from './Wordmark.js';
+export { BrandLockup } from './BrandLockup.js';

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

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

package/dist/components/Brand/index.js

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Breadcrumb.css';
 export interface BreadcrumbItem {
     /** URL/path for the breadcrumb link */
     href?: string;

package/dist/components/Breadcrumb/components/Breadcrumb.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+const linkClasses = 'eidotter-breadcrumb__link inline-flex items-center gap-1 text-dos-text-accent opacity-70 no-underline';
+/**
+ * DOS-styled Breadcrumb navigation component.
+ * Pure presentational — uses semantic HTML (nav > ol > li).
+ */
+export const Breadcrumb = ({ trail = [], currentLabel, showBackArrow = true, separator = '/', linkComponent: LinkComponent, className, }) => {
+    const renderLink = (item, isBackTarget) => {
+        const linkContent = (_jsxs(_Fragment, { children: [showBackArrow && isBackTarget && (_jsx("span", { className: "text-[1em] leading-none", "aria-hidden": "true", children: "<" })), _jsx("span", { children: item.label })] }));
+        if (item.onClick) {
+            return (_jsx(AriaButton, { className: cn(linkClasses, 'bg-transparent border-0 cursor-pointer font-[inherit] p-0'), onPress: item.onClick, children: linkContent }));
+        }
+        if (item.href) {
+            if (LinkComponent) {
+                return (_jsx(LinkComponent, { href: item.href, className: linkClasses, children: linkContent }));
+            }
+            return (_jsx("a", { href: item.href, className: linkClasses, children: linkContent }));
+        }
+        return _jsx("span", { className: linkClasses, children: linkContent });
+    };
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cn('font-dos text-xs uppercase tracking-[0.35em]', 'eidotter-breadcrumb', className), children: _jsxs("ol", { className: "flex flex-wrap items-center gap-2 list-none m-0 p-0", children: [trail.map((item, index) => {
+                    const isBackTarget = index === trail.length - 1;
+                    const showSep = index < trail.length - 1;
+                    return (_jsxs("li", { className: "flex items-center gap-2", children: [renderLink(item, isBackTarget), showSep && (_jsx("span", { className: "text-dos-text-accent opacity-40 select-none", "aria-hidden": "true", children: separator }))] }, `${item.href ?? item.label}-${index}`));
+                }), trail.length > 0 && (_jsx("li", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-dos-text-accent opacity-40 select-none", "aria-hidden": "true", children: separator }) })), _jsx("li", { className: "flex items-center gap-2", "aria-current": "page", children: _jsx("span", { className: "text-dos-text-brand", children: currentLabel }) })] }) }));
+};

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

@@ -1,2 +1,2 @@
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
+export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb.js';

package/dist/components/Breadcrumb/components/index.js

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

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

@@ -1,2 +1,2 @@
-export { Breadcrumb } from './components';
-export type { BreadcrumbProps, BreadcrumbItem } from './components';
+export { Breadcrumb } from './components/index.js';
+export type { BreadcrumbProps, BreadcrumbItem } from './components/index.js';

package/dist/components/Breadcrumb/index.js

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

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import { type PressEvent } from 'react-aria-components';
-import '../../../styles/keyframes.css';
-import './Button.css';
 export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'ghost' | 'link';
     /** Size variant. Use xs/sm/md/lg/xl — small/medium/large are @deprecated aliases. */

package/dist/components/Button/components/Button.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+const sizeClasses = {
+    xs: 'text-dos-text-xs px-2 py-1 min-h-6 gap-1',
+    sm: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1',
+    md: 'text-dos-text-md px-3 py-2 min-h-8 gap-1.5',
+    lg: 'text-dos-text-lg px-4 py-2.5 min-h-10 gap-2',
+    xl: 'text-dos-text-xl px-5 py-3 min-h-11 gap-2',
+    small: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-1',
+    medium: 'text-dos-text-md px-3 py-2 min-h-8 gap-1.5',
+    large: 'text-dos-text-lg px-4 py-2.5 min-h-10 gap-2',
+};
+const variantClasses = {
+    primary: 'eidotter-btn--primary',
+    secondary: 'eidotter-btn--secondary',
+    tertiary: 'eidotter-btn--tertiary',
+    destructive: 'eidotter-btn--destructive',
+    ghost: 'eidotter-btn--ghost',
+    link: 'eidotter-btn--link',
+};
+export const Button = forwardRef(({ variant = 'primary', size = 'md', type = 'button', disabled = false, loading = false, children, onPress, onClick, className, fullWidth = false, iconOnly = false, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    return (_jsxs(AriaButton, { ref: ref, type: type, isDisabled: isDisabled, isPending: loading || undefined, onPress: (e) => {
+            if (onPress) {
+                onPress(e);
+            }
+            else if (onClick) {
+                // Deprecated: bridge PressEvent to onClick for backward compatibility
+                const syntheticEvent = {
+                    type: 'press',
+                    target: e.target,
+                    currentTarget: e.target,
+                    preventDefault: () => { },
+                    stopPropagation: () => { },
+                };
+                onClick(syntheticEvent);
+            }
+        }, className: cn(
+        // Stable BEM block hook (DMNC-1112): variant-agnostic class consumers
+        // can target reliably. Post-V.37 the Button only emitted
+        // `eidotter-btn--{variant}` modifiers, so consumer overrides written
+        // against `.eidotter-button` / `.eidotter-btn` silently no-op'd. Matches
+        // Badge (`eidotter-badge`) / Tag (`eidotter-tag`) which already emit a block class.
+        'eidotter-btn', 'inline-flex items-center justify-center relative', 'border-2 border-solid', 'font-dos leading-none whitespace-nowrap select-none', 'outline-none cursor-pointer', 'transition-all duration-100 ease-linear', sizeClasses[size] || sizeClasses.md, variantClasses[variant] || variantClasses.primary, isDisabled && 'opacity-50 cursor-not-allowed', loading && 'cursor-wait', fullWidth && 'w-full', iconOnly && 'aspect-square !px-0', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dos-border-focus', className), "data-loading": loading || undefined, "data-variant": variant, ...props, children: [loading && (_jsx("span", { className: "eidotter-btn__loading", "aria-hidden": "true", children: "\u2588" })), _jsx("span", { className: cn('inline-flex items-center justify-center', loading && 'opacity-70'), children: children })] }));
+});
+Button.displayName = 'Button';

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

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

package/dist/components/Button/components/index.js

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

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

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

package/dist/components/Button/index.js

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

package/dist/components/Card/components/Card.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Card.css';
 export interface CardProps {
     /**
      * Optional card title displayed in header

package/dist/components/Card/components/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+const variantClasses = {
+    default: 'eidotter-card--default',
+    elevated: 'eidotter-card--elevated',
+    bordered: 'eidotter-card--bordered',
+    glow: 'eidotter-card--glow',
+    interactive: 'eidotter-card--interactive',
+    minimal: 'eidotter-card--minimal',
+    callout: 'eidotter-card--callout',
+};
+export const Card = forwardRef(({ title, children, footer, variant = 'default', className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn('border-2 border-solid border-dos-border-default', 'font-dos text-dos-text-brand', 'eidotter-card', variantClasses[variant] || variantClasses.default, className), ...props, children: [title && (_jsx("div", { className: "eidotter-card__header px-3 py-2 border-b border-dos-text-disabled bg-dos-bg-brand-dim", children: _jsx("span", { className: "text-dos-text-secondary text-dos-text-md uppercase", children: title }) })), _jsx("div", { className: "p-3", children: children }), footer && (_jsx("div", { className: "eidotter-card__footer px-3 py-2 border-t border-dos-text-disabled bg-dos-bg-secondary", children: footer }))] }));
+});
+Card.displayName = 'Card';

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

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

package/dist/components/Card/components/index.js

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

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

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

package/dist/components/Card/index.js

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

package/dist/components/Chat/components/ChatContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChatMessageEntry } from './ChatHistory';
+import { ChatMessageEntry } from './ChatHistory.js';
 export interface ChatContainerProps {
     /** Array of messages to display */
     messages: ChatMessageEntry[];