@idyeah/diya 0.0.0 → 1.0.0

package/dist/api.schema.json

@@ -0,0 +1,214 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "DIYA API map",
+  "description": "The shape of api.json, schema version 1. Version 1 only gains fields: readers ignore fields they do not know, and enumerations are open, so an unknown kind or content value is valid.",
+  "type": "object",
+  "required": ["schemaVersion", "package", "version", "entries", "items", "components", "types", "tokens", "messages"],
+  "properties": {
+    "schemaVersion": { "const": 1 },
+    "package": { "type": "string", "description": "The npm package name." },
+    "version": { "type": "string", "description": "The package version this map describes." },
+    "entries": {
+      "description": "Export names of each package entry point, such as \".\" and \"./charts\".",
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "required": ["values", "types"],
+        "properties": {
+          "values": { "$ref": "#/$defs/names", "description": "Runtime exports: components and plain values." },
+          "types": { "$ref": "#/$defs/names", "description": "Type-only exports." }
+        }
+      }
+    },
+    "items": {
+      "description": "Catalog items keyed by their permanent kebab-case id.",
+      "type": "object",
+      "propertyNames": { "$ref": "#/$defs/itemId" },
+      "additionalProperties": { "$ref": "#/$defs/item" }
+    },
+    "components": {
+      "description": "Props of every exported component, keyed by export name.",
+      "type": "object",
+      "additionalProperties": { "$ref": "#/$defs/component" }
+    },
+    "types": {
+      "description": "Every exported type as TypeScript source text, keyed by name.",
+      "type": "object",
+      "additionalProperties": { "type": "string" }
+    },
+    "tokens": {
+      "description": "Public CSS custom properties, keyed by name.",
+      "type": "object",
+      "propertyNames": { "pattern": "^--diya-" },
+      "additionalProperties": { "$ref": "#/$defs/token" }
+    },
+    "messages": {
+      "description": "Built-in English strings: namespace, then key. Override them through DiyaProvider `messages`.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": { "$ref": "#/$defs/message" }
+      }
+    }
+  },
+  "$defs": {
+    "names": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
+    "itemId": { "type": "string", "pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$" },
+    "path": {
+      "description": "A prop name, or a path into it: `items[].content` is the content of each element of `items`; `search.value` is a field of the `search` object.",
+      "type": "string",
+      "pattern": "^[A-Za-z_$][\\w$]*(\\[\\])?(\\.[A-Za-z_$][\\w$]*(\\[\\])?)*$"
+    },
+    "content": {
+      "description": "Plain content, not a DIYA item, that fits: text, icon or image. Open enumeration.",
+      "type": "array",
+      "items": { "type": "string", "examples": ["text", "icon", "image"] },
+      "uniqueItems": true
+    },
+    "accepts": {
+      "description": "DIYA item ids that fit, or \"any\" for any React content.",
+      "oneOf": [
+        { "const": "any" },
+        { "type": "array", "items": { "$ref": "#/$defs/itemId" }, "uniqueItems": true }
+      ]
+    },
+    "item": {
+      "type": "object",
+      "required": ["kind", "title", "stability", "since", "exports", "requires", "slots", "children", "state", "tokens", "messages"],
+      "properties": {
+        "kind": { "type": "string", "examples": ["component", "pattern", "provider"] },
+        "title": { "type": "string" },
+        "stability": { "type": "string", "examples": ["stable", "experimental"], "description": "Anything marked experimental is outside semver." },
+        "since": { "type": "string", "description": "The version that added the item." },
+        "exports": {
+          "description": "The item's exports. slots, children and state describe the first; any other is a variant of it.",
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "type": "object",
+            "required": ["name", "entry"],
+            "properties": { "name": { "type": "string" }, "entry": { "type": "string" } }
+          }
+        },
+        "requires": {
+          "type": "object",
+          "required": ["provider", "peers"],
+          "properties": {
+            "provider": { "type": "boolean", "description": "Renders inside DiyaProvider." },
+            "peers": { "$ref": "#/$defs/names", "description": "Optional peer dependencies it needs, such as echarts." }
+          }
+        },
+        "slots": {
+          "description": "Every ReactNode prop other than children, keyed by prop name or path.",
+          "type": "object",
+          "propertyNames": { "$ref": "#/$defs/path" },
+          "additionalProperties": { "$ref": "#/$defs/slot" }
+        },
+        "children": { "$ref": "#/$defs/children" },
+        "state": {
+          "description": "Controlled value and change-callback pairs.",
+          "type": "array",
+          "items": { "$ref": "#/$defs/state" }
+        },
+        "tokens": { "type": "array", "items": { "type": "string", "pattern": "^--diya-" }, "uniqueItems": true },
+        "messages": { "type": ["string", "null"], "description": "The messages namespace the item reads, or null." }
+      }
+    },
+    "slot": {
+      "type": "object",
+      "required": ["accepts"],
+      "properties": {
+        "accepts": { "$ref": "#/$defs/accepts" },
+        "content": { "$ref": "#/$defs/content" },
+        "multiple": { "type": "boolean", "description": "Takes several elements, such as two buttons." },
+        "as": { "type": "string", "examples": ["render"], "description": "\"render\": the prop is a function that returns the content." }
+      }
+    },
+    "children": {
+      "type": "object",
+      "required": ["allowed"],
+      "properties": {
+        "allowed": { "type": "boolean" },
+        "accepts": { "$ref": "#/$defs/accepts" },
+        "content": { "$ref": "#/$defs/content" },
+        "multiple": { "type": "boolean" },
+        "as": { "type": "string", "examples": ["render"] }
+      },
+      "if": { "properties": { "allowed": { "const": true } } },
+      "then": { "required": ["accepts"] }
+    },
+    "state": {
+      "type": "object",
+      "required": ["value", "onChange"],
+      "properties": {
+        "value": { "$ref": "#/$defs/path" },
+        "onChange": { "$ref": "#/$defs/path" },
+        "default": { "$ref": "#/$defs/path", "description": "The uncontrolled starting value, when there is one." }
+      }
+    },
+    "prop": {
+      "type": "object",
+      "required": ["type", "required"],
+      "properties": {
+        "type": { "type": "string" },
+        "required": { "type": "boolean" },
+        "description": { "type": "string" },
+        "values": { "type": "array", "items": { "type": ["string", "number"] } },
+        "default": true
+      }
+    },
+    "props": { "type": "object", "additionalProperties": { "$ref": "#/$defs/prop" } },
+    "component": {
+      "type": "object",
+      "required": ["entry", "props"],
+      "properties": {
+        "entry": { "type": "string" },
+        "description": { "type": "string" },
+        "propsType": { "type": "string" },
+        "typeParameters": { "type": "array", "items": { "type": "string" } },
+        "props": { "$ref": "#/$defs/props" },
+        "modes": {
+          "description": "Props that depend on a discriminant, such as `multiple` or `range`.",
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": ["when", "props"],
+            "properties": {
+              "when": { "type": "object" },
+              "default": { "const": true },
+              "props": { "$ref": "#/$defs/props" }
+            }
+          }
+        },
+        "extendsDom": { "type": "string", "description": "The element whose native attributes it also takes." }
+      }
+    },
+    "token": {
+      "type": "object",
+      "required": ["group", "kind", "pairsWith", "defaults"],
+      "properties": {
+        "group": { "type": "string" },
+        "kind": { "type": "string", "examples": ["color", "length", "number", "shadow", "font-family"] },
+        "pairsWith": { "type": "array", "items": { "type": "string", "pattern": "^--diya-" }, "uniqueItems": true, "description": "Tokens to change together with this one." },
+        "defaults": {
+          "description": "The value in each theme; null when it is unset.",
+          "type": "object",
+          "required": ["light", "dark"],
+          "properties": { "light": { "type": ["string", "null"] }, "dark": { "type": ["string", "null"] } }
+        },
+        "setBy": { "type": "string", "description": "The DiyaProvider prop that sets it; set the prop rather than the token." }
+      }
+    },
+    "message": {
+      "type": "object",
+      "required": ["kind", "default"],
+      "properties": {
+        "kind": { "type": "string", "examples": ["string", "function"] },
+        "args": { "type": "array", "items": { "type": "string" } },
+        "default": { "type": "string", "description": "The English text, or a function's source." }
+      },
+      "if": { "properties": { "kind": { "const": "function" } } },
+      "then": { "required": ["args"] }
+    }
+  }
+}

package/dist/application-patterns/Chatbot.d.ts

@@ -0,0 +1,114 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { chatbotMessages } from './chatbot-messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        chatbot: typeof chatbotMessages;
+    }
+}
+export type ChatMessage = {
+    /** Stable key for the message. */
+    id: string;
+    /** Who wrote it; assistant messages get a Copy button, once they are no longer being written. */
+    role: 'user' | 'assistant';
+    /** The message, shown as plain text. */
+    text: string;
+    /** Preformatted time shown after the author when `showTimestamps` is on, e.g. "9:41". */
+    timestamp?: string;
+};
+export type ChatbotProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children' | 'onCopy'> & {
+    /** Visible header title; it also names the chat region and its message log. */
+    title: string;
+    /** The conversation, oldest first; the caller owns this list. */
+    messages: readonly ChatMessage[];
+    /** The composer's text; the caller owns this state. */
+    value: string;
+    /** Called with the composer's new text on every keystroke. */
+    onValueChange: (value: string) => void;
+    /** Called with the trimmed text and current attachments on Send, Enter or a suggestion; clear `value` and append messages yourself. */
+    onSend: (text: string, attachments: readonly File[]) => void;
+    /** A response is on its way: blocks sending and offers Stop when `onStop` is given. Until the reply starts, "Preparing a response…" shows; once the newest message is the assistant's, as when a reply streams in, it goes and the log is `aria-busy`, so screen readers read the reply once it is complete. Defaults to false. */
+    loading?: boolean;
+    /** Shows a Stop button in place of Send while loading. */
+    onStop?: () => void;
+    /** Shows a Retry button in the notice row. */
+    onRetry?: () => void;
+    /** Files attached to the next message; the caller owns this list. */
+    attachments?: readonly File[];
+    /** Shows the Attach button; called with the chosen files (replacing the list), or an empty list on Remove. */
+    onAttachmentsChange?: (files: File[]) => void;
+    /** Accepted attachment types, as in the native file input, e.g. "image/*,.pdf". */
+    accept?: string;
+    /** Small text under the header title. */
+    description?: ReactNode;
+    /** Shows the header with `title` and `description`; defaults to true. Turn it off when your page already has a heading for the chat: `title` still names the chat region and its message log, and a floating chat keeps its close button. */
+    showHeader?: boolean;
+    /** Shown in the thread before the first message, from its top. Give its heading `className="diya-chat-welcome-title"` to style it at any level; a plain h3 gets the same style. */
+    welcome?: ReactNode;
+    /** Starter prompts shown as pills before the first message; choosing one sends it. */
+    suggestions?: readonly string[];
+    /** Small text under the composer, such as a disclaimer or an error. */
+    notice?: ReactNode;
+    /** 'embedded' fills its container's width (default), 'floating' is a narrow raised panel, right-aligned, with a close button when `onOpenChange` is given, 'full-page' fills its container's width and height. The header and composer stay put while the thread scrolls; a height you set on the Chatbot is filled the same way. */
+    layout?: 'embedded' | 'floating' | 'full-page';
+    /** Shows each message's `timestamp`; defaults to false. */
+    showTimestamps?: boolean;
+    /** Whether the chat is shown; defaults to true. When false, an "Open chat" button shows if `onOpenChange` is given. */
+    open?: boolean;
+    /** Called with the next open state from the close and "Open chat" buttons. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called with the message on Copy instead of writing its text to the clipboard. */
+    onCopy?: (message: ChatMessage) => void | Promise<void>;
+    /** Author name shown on the person's messages; defaults to "You". */
+    userLabel?: string;
+    /** Author name shown on assistant messages; defaults to "Assistant". */
+    assistantLabel?: string;
+};
+/** A controlled conversation surface with a message log and composer. It makes no AI, network or simulated-response requests. */
+export declare const Chatbot: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "title" | "onCopy"> & {
+    /** Visible header title; it also names the chat region and its message log. */
+    title: string;
+    /** The conversation, oldest first; the caller owns this list. */
+    messages: readonly ChatMessage[];
+    /** The composer's text; the caller owns this state. */
+    value: string;
+    /** Called with the composer's new text on every keystroke. */
+    onValueChange: (value: string) => void;
+    /** Called with the trimmed text and current attachments on Send, Enter or a suggestion; clear `value` and append messages yourself. */
+    onSend: (text: string, attachments: readonly File[]) => void;
+    /** A response is on its way: blocks sending and offers Stop when `onStop` is given. Until the reply starts, "Preparing a response…" shows; once the newest message is the assistant's, as when a reply streams in, it goes and the log is `aria-busy`, so screen readers read the reply once it is complete. Defaults to false. */
+    loading?: boolean;
+    /** Shows a Stop button in place of Send while loading. */
+    onStop?: () => void;
+    /** Shows a Retry button in the notice row. */
+    onRetry?: () => void;
+    /** Files attached to the next message; the caller owns this list. */
+    attachments?: readonly File[];
+    /** Shows the Attach button; called with the chosen files (replacing the list), or an empty list on Remove. */
+    onAttachmentsChange?: (files: File[]) => void;
+    /** Accepted attachment types, as in the native file input, e.g. "image/*,.pdf". */
+    accept?: string;
+    /** Small text under the header title. */
+    description?: ReactNode;
+    /** Shows the header with `title` and `description`; defaults to true. Turn it off when your page already has a heading for the chat: `title` still names the chat region and its message log, and a floating chat keeps its close button. */
+    showHeader?: boolean;
+    /** Shown in the thread before the first message, from its top. Give its heading `className="diya-chat-welcome-title"` to style it at any level; a plain h3 gets the same style. */
+    welcome?: ReactNode;
+    /** Starter prompts shown as pills before the first message; choosing one sends it. */
+    suggestions?: readonly string[];
+    /** Small text under the composer, such as a disclaimer or an error. */
+    notice?: ReactNode;
+    /** 'embedded' fills its container's width (default), 'floating' is a narrow raised panel, right-aligned, with a close button when `onOpenChange` is given, 'full-page' fills its container's width and height. The header and composer stay put while the thread scrolls; a height you set on the Chatbot is filled the same way. */
+    layout?: "embedded" | "floating" | "full-page";
+    /** Shows each message's `timestamp`; defaults to false. */
+    showTimestamps?: boolean;
+    /** Whether the chat is shown; defaults to true. When false, an "Open chat" button shows if `onOpenChange` is given. */
+    open?: boolean;
+    /** Called with the next open state from the close and "Open chat" buttons. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called with the message on Copy instead of writing its text to the clipboard. */
+    onCopy?: (message: ChatMessage) => void | Promise<void>;
+    /** Author name shown on the person's messages; defaults to "You". */
+    userLabel?: string;
+    /** Author name shown on assistant messages; defaults to "Assistant". */
+    assistantLabel?: string;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/application-patterns/Chatbot.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { Button } from '../button/Button.js';
+import { Icon } from '../Icon.js';
+import { cx } from '../internal/cx.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { chatbotMessages } from './chatbot-messages.js';
+/** A controlled conversation surface with a message log and composer. It makes no AI, network or simulated-response requests. */
+export const Chatbot = forwardRef(function Chatbot({ title, messages, value, onValueChange, onSend, loading = false, onStop, onRetry, attachments = [], onAttachmentsChange, accept, description, showHeader = true, welcome, suggestions = [], notice, layout = 'embedded', showTimestamps = false, open = true, onOpenChange, onCopy, userLabel, assistantLabel, className, ...props }, ref) {
+    const t = useDiyaMessages('chatbot', chatbotMessages);
+    const id = useId();
+    const composer = useRef(null);
+    const reopen = useRef(null);
+    const thread = useRef(null);
+    const follows = useRef(true);
+    const previousOpen = useRef(open);
+    const previousLoading = useRef(loading);
+    const actionHadFocus = useRef(false);
+    const copyOperation = useRef(0);
+    const copyContext = useRef({ open, title, messages });
+    copyContext.current = { open, title, messages };
+    const [copyNotice, setCopyNotice] = useState('');
+    useEffect(() => {
+        copyOperation.current += 1;
+        setCopyNotice('');
+        return () => { copyOperation.current += 1; };
+    }, [open]);
+    // Before the first message only the welcome shows, read from its top; following starts with the first message.
+    const empty = messages.length === 0;
+    const welcomeOnly = useRef(empty);
+    welcomeOnly.current = empty;
+    useEffect(() => {
+        if (!empty)
+            return;
+        follows.current = true;
+        if (thread.current)
+            thread.current.scrollTop = 0;
+    }, [empty, open]);
+    useEffect(() => { if (!empty && follows.current && thread.current)
+        thread.current.scrollTop = thread.current.scrollHeight; }, [messages, loading, open]);
+    // A thread that fills its container changes height with it; keep the latest message in view unless the reader scrolled up.
+    useEffect(() => {
+        const node = thread.current;
+        if (!node || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => { if (follows.current && !welcomeOnly.current)
+            node.scrollTop = node.scrollHeight; });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [open]);
+    useEffect(() => {
+        if (previousOpen.current !== open) {
+            if (open)
+                composer.current?.focus();
+            else
+                reopen.current?.focus();
+        }
+        previousOpen.current = open;
+    }, [open]);
+    useEffect(() => {
+        if (previousLoading.current && !loading && actionHadFocus.current) {
+            composer.current?.focus();
+            actionHadFocus.current = false;
+        }
+        previousLoading.current = loading;
+    }, [loading]);
+    function send(text = value) {
+        if (!text.trim() || loading)
+            return;
+        follows.current = true;
+        copyOperation.current += 1;
+        setCopyNotice('');
+        onSend(text.trim(), attachments);
+        composer.current?.focus();
+    }
+    async function copy(message) {
+        const request = ++copyOperation.current;
+        setCopyNotice('');
+        const current = () => request === copyOperation.current && copyContext.current.open && copyContext.current.title === title &&
+            copyContext.current.messages.some(entry => entry.id === message.id && entry.role === message.role && entry.text === message.text);
+        try {
+            if (onCopy)
+                await onCopy(message);
+            else {
+                if (!navigator.clipboard)
+                    throw new Error('Clipboard unavailable');
+                await navigator.clipboard.writeText(message.text);
+            }
+            if (current())
+                setCopyNotice(t.copied);
+        }
+        catch {
+            if (current())
+                setCopyNotice(t.copyUnavailable);
+        }
+    }
+    if (!open)
+        return onOpenChange ? _jsx(Button, { ref: reopen, onClick: () => onOpenChange(true), children: t.openChat }) : null;
+    // A reply being written into the log is held back from screen readers until it is complete. Before it
+    // starts, the log stays live and shows "Preparing a response…", which goes once the reply's first words arrive.
+    const writing = loading && messages[messages.length - 1]?.role === 'assistant';
+    const closable = layout === 'floating' && onOpenChange;
+    return _jsxs("section", { "aria-label": title, ...props, ref: ref, className: cx('diya-chat diya-app-pattern-surface', className), "data-presentation": layout, children: [(showHeader || closable) && _jsxs("header", { className: "diya-chat-header", children: [_jsx("div", { children: showHeader && _jsxs(_Fragment, { children: [_jsx("strong", { children: title }), description && _jsx("small", { children: description })] }) }), closable && _jsx(Button, { variant: "quiet", iconOnly: true, "aria-label": t.closeChat, onClick: () => onOpenChange(false), children: _jsx(Icon, { name: "close" }) })] }), _jsxs("div", { className: "diya-chat-thread", ref: thread, role: "log", "aria-label": t.messages(title), "aria-live": "polite", "aria-relevant": "additions text", "aria-busy": writing || undefined, onScroll: () => { const node = thread.current; if (node && !empty)
+                    follows.current = node.scrollHeight - node.scrollTop - node.clientHeight < 50; }, children: [!messages.length && (welcome || suggestions.length > 0) && _jsxs("div", { className: "diya-chat-welcome", children: [welcome, suggestions.length > 0 && _jsx("div", { className: "diya-chat-suggestions", children: suggestions.map(suggestion => _jsx(Button, { variant: "outline", shape: "pill", disabled: loading, onClick: () => send(suggestion), children: suggestion }, suggestion)) })] }), messages.map((message, index) => _jsxs("article", { className: "diya-chat-message", "data-role": message.role, children: [_jsxs("small", { children: [message.role === 'user' ? userLabel ?? t.you : assistantLabel ?? t.assistant, showTimestamps && message.timestamp && ` · ${message.timestamp}`] }), _jsx("p", { children: message.text }), message.role === 'assistant' && !(writing && index === messages.length - 1) && _jsx(Button, { size: "small", variant: "quiet", onClick: () => void copy(message), children: t.copy })] }, message.id)), loading && !writing && _jsx("p", { role: "status", children: t.preparing })] }), _jsxs("form", { className: "diya-chat-composer", onSubmit: event => { event.preventDefault(); send(); }, children: [_jsx("label", { className: "diya-chat-sr-only", htmlFor: `${id}-message`, children: t.message }), _jsx("textarea", { ref: composer, id: `${id}-message`, rows: 2, placeholder: t.placeholder, value: value, onChange: event => onValueChange(event.target.value), onKeyDown: event => { if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+                            event.preventDefault();
+                            send();
+                        } } }), attachments.length > 0 && _jsxs("small", { children: [attachments.map(file => file.name).join(', '), onAttachmentsChange && _jsx("button", { type: "button", disabled: loading, onClick: () => { onAttachmentsChange([]); composer.current?.focus(); }, children: t.remove })] }), _jsxs("div", { children: [onAttachmentsChange ? _jsxs("label", { className: "diya-chat-attach", children: [_jsx(Icon, { name: "paperclip", size: 16 }), t.attach, _jsx("input", { type: "file", multiple: true, disabled: loading, accept: accept, onChange: event => { onAttachmentsChange(Array.from(event.target.files ?? [])); event.target.value = ''; composer.current?.focus(); } }), _jsxs("span", { className: "diya-chat-sr-only", children: [" ", t.attachFiles] })] }) : _jsx("span", {}), loading && onStop ? _jsx(Button, { onFocus: () => { actionHadFocus.current = true; }, onBlur: event => { if (event.relatedTarget)
+                                    actionHadFocus.current = false; }, onClick: () => { onStop(); composer.current?.focus(); }, children: t.stop }) : _jsx(Button, { type: "submit", disabled: loading || !value.trim(), children: t.send })] })] }), _jsxs("div", { className: "diya-chat-notice", role: "status", children: [notice, notice && copyNotice ? ' ' : '', copyNotice, onRetry && _jsx(Button, { variant: "quiet", size: "small", disabled: loading, onClick: () => { onRetry(); composer.current?.focus(); }, children: t.retry })] })] });
+});

package/dist/application-patterns/SideNavigation.d.ts

@@ -0,0 +1,74 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { sideNavigationMessages } from './side-navigation-messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        sideNavigation: typeof sideNavigationMessages;
+    }
+}
+export type SideNavigationItem = {
+    /** Stable key; matched against the navigation's `value` and passed to `onValueChange`. */
+    value: string;
+    /** Visible text; when collapsed it becomes the item's accessible name. */
+    label: string;
+    /** Decorative icon before the label; when collapsed without one, the label's first letter shows. */
+    icon?: ReactNode;
+    /** Makes the item a real link to this URL, through the provider's `linkComponent`; a plain click calls `onValueChange` instead of navigating when it is given. */
+    href?: string;
+    /** Shows the item but prevents choosing it. */
+    disabled?: boolean;
+    /** A quiet number after the label, such as unread messages: '99+' above 99, and a dot on the icon when collapsed. The accessible name keeps the real count ("Inbox, 120"). 0 shows nothing. */
+    count?: number;
+};
+export type SideNavigationGroup = {
+    /** Stable key for the group. */
+    id: string;
+    /** Small visible heading above the group; hidden when collapsed or `showGroups` is false. */
+    label?: string;
+    /** The group's items, in order. */
+    items: readonly SideNavigationItem[];
+};
+export type SideNavigationProps = HTMLAttributes<HTMLElement> & {
+    /** Item groups, in order. */
+    groups: readonly SideNavigationGroup[];
+    /** The current item's `value`; it is marked as the current page. */
+    value: string;
+    /** Called with an item's `value` when it is chosen; leave it out when every item has an `href` and the links do the routing. */
+    onValueChange?: (value: string) => void;
+    /** Logo or product name at the top. */
+    brand?: ReactNode;
+    /** Smaller brand shown when collapsed; defaults to `brand`. */
+    collapsedBrand?: ReactNode;
+    /** Pinned under the groups, such as an account or workspace Menu; it sits at the bottom when the navigation is given its full height. */
+    footer?: ReactNode;
+    /** Smaller footer shown when collapsed, such as the account Menu with just an Avatar; defaults to `footer`. */
+    collapsedFooter?: ReactNode;
+    /** Narrow, icon-only rail; defaults to false. */
+    collapsed?: boolean;
+    /** Shows group headings; defaults to true. */
+    showGroups?: boolean;
+    /** Accessible name for the navigation landmark (not shown); defaults to "Application navigation". */
+    label?: string;
+};
+/** A vertical app navigation with grouped items and an optional collapsed icon rail; items with `href` are links. The ref, `className`, `style` and other attributes go to the `nav`. */
+export declare const SideNavigation: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** Item groups, in order. */
+    groups: readonly SideNavigationGroup[];
+    /** The current item's `value`; it is marked as the current page. */
+    value: string;
+    /** Called with an item's `value` when it is chosen; leave it out when every item has an `href` and the links do the routing. */
+    onValueChange?: (value: string) => void;
+    /** Logo or product name at the top. */
+    brand?: ReactNode;
+    /** Smaller brand shown when collapsed; defaults to `brand`. */
+    collapsedBrand?: ReactNode;
+    /** Pinned under the groups, such as an account or workspace Menu; it sits at the bottom when the navigation is given its full height. */
+    footer?: ReactNode;
+    /** Smaller footer shown when collapsed, such as the account Menu with just an Avatar; defaults to `footer`. */
+    collapsedFooter?: ReactNode;
+    /** Narrow, icon-only rail; defaults to false. */
+    collapsed?: boolean;
+    /** Shows group headings; defaults to true. */
+    showGroups?: boolean;
+    /** Accessible name for the navigation landmark (not shown); defaults to "Application navigation". */
+    label?: string;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/application-patterns/SideNavigation.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { countLabel } from '../badge/badge-utils.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { useDiyaLinkComponent } from '../internal/link.js';
+import { sideNavigationMessages } from './side-navigation-messages.js';
+/** A vertical app navigation with grouped items and an optional collapsed icon rail; items with `href` are links. The ref, `className`, `style` and other attributes go to the `nav`. */
+export const SideNavigation = forwardRef(function SideNavigation({ groups, value, onValueChange, brand, collapsedBrand, footer, collapsedFooter, collapsed = false, showGroups = true, label, className, ...props }, ref) {
+    const t = useDiyaMessages('sideNavigation', sideNavigationMessages);
+    const Link = useDiyaLinkComponent();
+    return _jsxs("nav", { "aria-label": label ?? t.label, ...props, ref: ref, className: cx('diya-side-navigation diya-app-pattern-surface', className), "data-collapsed": collapsed, children: [brand && _jsx("strong", { children: collapsed ? collapsedBrand ?? brand : brand }), groups.map(group => _jsxs("div", { children: [showGroups && !collapsed && group.label && _jsx("small", { children: group.label }), group.items.map(item => {
+                        // Badge's cap: the shown number stops at 99+, the accessible name keeps the real count.
+                        const count = countLabel(item.count ?? 0, 99);
+                        const counted = count.count > 0;
+                        const shared = { 'aria-current': value === item.value ? 'page' : undefined, 'aria-label': counted ? t.count(item.label, count.count) : collapsed ? item.label : undefined };
+                        const glyph = item.icon || (collapsed ? Array.from(item.label)[0] : null);
+                        const label = _jsx("span", { className: "diya-side-navigation-label", children: item.label });
+                        const text = collapsed ? null : counted ? _jsxs("span", { className: "diya-side-navigation-text", children: [label, _jsx("span", { className: "diya-side-navigation-count", "aria-hidden": "true", children: count.text })] }) : label;
+                        const inner = _jsxs(_Fragment, { children: [glyph && _jsxs("span", { className: "diya-side-navigation-icon", "aria-hidden": "true", children: [glyph, collapsed && counted && _jsx("span", { className: "diya-side-navigation-dot" })] }), text] });
+                        return item.href && !item.disabled
+                            ? _jsx(Link, { href: item.href, ...shared, onClick: (event) => {
+                                    if (!onValueChange || event.defaultPrevented || event.button || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                                        return;
+                                    event.preventDefault();
+                                    onValueChange(item.value);
+                                }, children: inner }, item.value)
+                            : _jsx("button", { type: "button", disabled: item.disabled, ...shared, onClick: () => onValueChange?.(item.value), children: inner }, item.value);
+                    })] }, group.id)), footer && _jsx("div", { className: "diya-side-navigation-footer", children: collapsed ? collapsedFooter ?? footer : footer })] });
+});

package/dist/application-patterns/chatbot-messages.d.ts

@@ -0,0 +1,20 @@
+/** chatbot: English defaults, overridable through DiyaProvider `messages`. */
+export declare const chatbotMessages: {
+    you: string;
+    assistant: string;
+    message: string;
+    placeholder: string;
+    send: string;
+    stop: string;
+    retry: string;
+    copy: string;
+    copied: string;
+    copyUnavailable: string;
+    attach: string;
+    attachFiles: string;
+    remove: string;
+    preparing: string;
+    openChat: string;
+    closeChat: string;
+    messages: (title: string) => string;
+};

package/dist/application-patterns/chatbot-messages.js

@@ -0,0 +1,2 @@
+/** chatbot: English defaults, overridable through DiyaProvider `messages`. */
+export const chatbotMessages = { you: 'You', assistant: 'Assistant', message: 'Message', placeholder: 'Write a message', send: 'Send', stop: 'Stop', retry: 'Retry', copy: 'Copy', copied: 'Response copied.', copyUnavailable: 'Copy unavailable in this browser.', attach: 'Attach', attachFiles: 'files', remove: 'Remove', preparing: 'Preparing a response…', openChat: 'Open chat', closeChat: 'Close chat', messages: (title) => `${title} messages` };

package/dist/application-patterns/side-navigation-messages.d.ts

@@ -0,0 +1,5 @@
+/** sideNavigation: English defaults, overridable through DiyaProvider `messages`. */
+export declare const sideNavigationMessages: {
+    label: string;
+    count: (label: string, count: number) => string;
+};

package/dist/application-patterns/side-navigation-messages.js

@@ -0,0 +1,2 @@
+/** sideNavigation: English defaults, overridable through DiyaProvider `messages`. */
+export const sideNavigationMessages = { label: 'Application navigation', count: (label, count) => `${label}, ${count}` };

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from 'react';
+import { avatarMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        avatar: typeof avatarMessages;
+    }
+}
+export type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** The person's name: the avatar's accessible name, and the source of the visible initials (first letters of the first two words). */
+    name: string;
+    /** Image URL; if it fails to load, the initials show instead, or a person icon when `name` is empty. */
+    src?: string;
+    /** Avatar diameter. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** 'circle' or a rounded square. Defaults to 'circle'. */
+    shape?: 'circle' | 'rounded';
+    /** Shows a presence dot and adds the status to the accessible name. */
+    status?: 'online' | 'away' | 'busy';
+};
+/** A person's picture or initials, with an optional presence dot. */
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** The person's name: the avatar's accessible name, and the source of the visible initials (first letters of the first two words). */
+    name: string;
+    /** Image URL; if it fails to load, the initials show instead, or a person icon when `name` is empty. */
+    src?: string;
+    /** Avatar diameter. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** 'circle' or a rounded square. Defaults to 'circle'. */
+    shape?: "circle" | "rounded";
+    /** Shows a presence dot and adds the status to the accessible name. */
+    status?: "online" | "away" | "busy";
+} & import("react").RefAttributes<HTMLSpanElement>>;