entasis 0.0.0 → 0.4.0

package/dist/generated/componentMcpRegistry.d.ts

@@ -0,0 +1,141 @@
+export declare const componentMcpRegistry: {
+    readonly 'ai-conversation': "\n# AIConversation\n\nScoped, transport-agnostic conversation state for AI surfaces. Descendant AIThread, AIComposer, AIContext, and AIModelSelector components reuse the nearest state automatically.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import {\n    AIConversation,\n    type AIConversationState,\n    type AIConversationStatus\n  } from '../components/AIConversation/index.ts';\n</script>\n```\n\n## Provider state\n\nAll state props are bindable: `api` (the instance handle), `status`, `error`, `messages`, `queuedMessage`, `currentInput`, `files`, `attachments`, `liveText`, `suggestions`, `contextUsage`, `selectedModel`, `streaming`, and `activeAskUserQuestion`.\n\n`status` is one of `idle`, `queued`, `asking-user`, `streaming`, `stopping`, or `error`. Use `labels` to override composer and model-selector text. AIConversation does not send network requests.\n\n```svelte\n<AIConversation\n  bind:api\n  bind:messages\n  bind:status\n  onSubmit={({ message, meta, conversation }) => sendMessage(message, meta, conversation)}\n  onStop={(conversation) => stopGeneration(conversation)}\n>\n  <AIThread />\n  <AIComposer />\n</AIConversation>\n```\n\n## State methods\n\n- Messages: `appendMessage(message)`, `prependMessage(message)`, `updateMessage(target, update)`, and `removeMessage(target)`.\n- Tools: `updateTool(messageTarget, toolTarget, update)`.\n- Shared values: `setInput(value)`, `setFiles(files)`, `setAttachments(attachments)`, `setSelectedModel(model)`, `setLiveText(value)`, `setSuggestions(suggestions)`, and `updateContextUsage(update)`.\n- Queue: `setQueuedMessage(message)`, `queueMessage(message)`, `submitMessage(message, detail?)`, `commitQueuedMessage()`, and `discardQueuedMessage()`.\n- Lifecycle: `startStreaming()`, `stopStreaming()`, `requestStop()`, `retry(target?)`, `setError(error)`, and `clearError()`.\n- Questions: `setActiveAskUserQuestion(request)` and `resolveAskUserQuestion(state, detail?, request?)`.\n\nMessage targets use exactly one of `{ id }`, `{ index }`, or `{ where }`. Missing, out-of-range, or ambiguous message and tool targets throw. Queue commits and discards also throw when no message is queued.\n\n`submitMessage`, `requestStop`, and `retry` invoke their callbacks and return synchronously. `resolveAskUserQuestion` returns a promise because it awaits `onAskUserQuestionStateChange`.\n\n## Events\n\nLifecycle events: `onStatusChange`, `onSubmit`, `onStop`, `onRetry`, and `onError`.\n\nMutation events: `onMessageAppend`, `onMessagePrepend`, `onMessageUpdate`, `onMessageRemove`, `onToolUpdate`, `onInputChange`, `onFilesChange`, `onAttachmentsChange`, `onLiveTextChange`, `onSuggestionsChange`, `onSelectedModelChange`, `onQueuedMessageChange`, `onQueuedMessageCommit`, `onQueuedMessageDiscard`, `onContextUsageChange`, `onStreamingChange`, `onActiveAskUserQuestionChange`, and `onAskUserQuestionStateChange`.\n\nEvery multi-value event receives one documented payload object containing the central `conversation`; state-change payloads also contain `value` and `previousValue`, while mutation payloads name the affected records.\n\n## Context access\n\nUse `getAIConversation()` for an optional state or `useAIConversation()` when a provider is required. The latter throws outside AIConversation.\n";
+    readonly 'ai-ask-user-question': "\n# AIAskUserQuestion\n\nAIAskUserQuestion renders a validated stepped answer flow for AI tools that need structured human input. It reuses `Stepper`, `TextArea`, card radio/checkbox inputs, `FileInput`, `Button`, `Alert`, and `Empty`.\n\n## Import and schemas\n\n```svelte\n<script lang=\"ts\">\n  import {\n    AIAskUserQuestion,\n    aiAskUserQuestionToolInputSchema,\n    type AIAskUserQuestionQuestion,\n    type AIAskUserQuestionSubmitPayload,\n    type AIAskUserQuestionValues\n  } from '../components/AIAskUserQuestion/index.ts';\n</script>\n```\n\nThe package exports Valibot schemas for tool state, options, every question kind, question arrays, answer maps, and the complete tool payload. The loose tool payload accepts `state`, `prompt`, `questions`, `value`/`values`, headings, context, and action labels.\n\n## Question kinds\n\n- Text: `{ id, title, type?: 'text', description?, required?, placeholder?, rows? }`\n- Single choice: `{ id, title, type: 'single', options, ... }`\n- Multiple choice: `{ id, title, type: 'multiple', options, ... }`\n- File: `{ id, title, type: 'file', accept?, multiple?, maxFiles?, maxSize?, ... }`\n\nQuestions are required by default. Disabled choice options remain visible but cannot be selected. File questions use the shared chooser/drop acceptance behavior and show type, size, count, and duplicate failures.\n\n## State and behavior\n\n- `value` is the bindable answer map. `defaultValue` initializes omitted state once; later default changes do not reset answers.\n- `onValueChange(value)` runs once after a user changes an answer. Parent value changes and selecting the current answer do not emit it.\n- `activeIndex` is bindable and is clamped whenever the question list changes.\n- `autoAdvance` wins over `autoAdvanceSingle`; `autoAdvanceDelay` wins over `autoAdvanceSingleDelay`.\n- Single-choice answers auto-advance by default after 280 ms, including values set through a custom question slot. Empty values, the last step, disabled state, and active async work never auto-advance.\n- `disabled` blocks all controls. `submitting` combines with internal async submit/discard state.\n\n## Validation and actions\n\nThe default required message is `Answer required.`. `requiredMessage` accepts either a string or a per-question formatter. Primary navigation validates the active question; final submission finds the first missing required answer and moves to it. Previous/next icon controls remain available for explicit navigation.\n\n`onSubmit` receives typed `answers`, the raw `values` map, and the source `questions`. `onDiscard` adds the optional dismiss action. Async submit/discard exceptions and file rejection messages render visibly instead of being swallowed.\n\n```svelte\n<AIAskUserQuestion\n  questions={[\n    {\n      id: 'tone',\n      type: 'single',\n      title: 'Choose a tone',\n      options: [\n        { id: 'brief', label: 'Brief' },\n        { id: 'detailed', label: 'Detailed' }\n      ]\n    },\n    {\n      id: 'notes',\n      type: 'text',\n      title: 'Add constraints',\n      required: false\n    }\n  ]}\n  bind:value={answers}\n  onSubmit={({ answers, values }) => resolveTool({ answers, values })}\n/>\n```\n\n## Composition\n\n`header`, `footer`, `children`, and `empty` receive `AIAskUserQuestionState`: questions, value, active question/index, visible error, working flags, first/last flags, and `goTo`, `previous`, `next`, `submit`, and `discard` actions.\n\nThe `question` slot receives `{ question, value, setValue }`. Its setter preserves central validation, change callbacks, and single-choice auto-advance; no public compound subcomponents are required.\n\nThe root forwards native div attributes and exposes bindable `ref`, `class`, and `theme`. Theme parts cover root, header text/progress group/steps, the body region, step content, question title and description, textarea, option/file regions, empty/error states, and footer.\n";
+    readonly 'ai-chat': "\n# AIChat\n\nAssembled AI conversation surface built from AIConversation, AIThread, AIComposer, AIContext, AIModelSelector, and AIAskUserQuestion. It owns no transport.\n\n## Requires\n\nAIChat renders AIComposer, which is built on Lexical. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add lexical @lexical/history @lexical/link @lexical/list @lexical/markdown @lexical/rich-text @lexical/selection @lexical/utils`\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { AIChat, AIChatSkeleton, type AIChatProps } from '../components/AIChat/index.ts';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIChat\n  bind:api\n  bind:messages\n  bind:selectedModel\n  {models}\n  {contextUsage}\n  {suggestions}\n  onSubmit={({ message, meta, conversation }) => sendMessage(message, meta, conversation)}\n  onStop={(payload) => stopGeneration(payload)}\n/>\n```\n\nAIChat exposes every AIConversation bindable and event: `api` (the conversation instance handle), `status`, `error`, `messages`, `queuedMessage`, `currentInput`, `files`, `attachments`, `liveText`, `suggestions`, `contextUsage`, `selectedModel`, `streaming`, `activeAskUserQuestion`, `labels`, and all conversation mutation/lifecycle callbacks. `queue` is the bindable ordered AIComposer queue.\n\n## Regions\n\nProduct-level snippets receive the central `AIConversationState` instance directly:\n\n- `children` replaces the complete default surface while retaining the provider.\n- `header`, `beforeThread`, `thread`, `afterThread`, `composer`, and `footer` replace or insert complete surface regions.\n- `errorRegion` replaces the default error alert.\n- `context` and `modelSelector` replace their individual composer controls; `controls` replaces both together.\n- `empty` replaces the transcript empty state; `suggestionsRegion` replaces suggestions inside that empty state.\n- `message`, `tool`, and `marker` customize transcript renderers with their row payloads.\n  Message payloads include the thread-resolved `actionsVisibility` value so custom AIMessage\n  composition does not make intermediate actions permanently visible.\n- `toc` receives the complete `AIThreadTocState`.\n\n```svelte\n<AIChat {messages} {models}>\n  {#snippet beforeThread(state)}\n\t<div>{state.status}</div>\n  {/snippet}\n\n  {#snippet context(state)}\n\t<span>{state.contextUsage?.totalTokens ?? 0} tokens</span>\n  {/snippet}\n\n  {#snippet afterThread(state)}\n\t<div>{state.messages.length} messages</div>\n  {/snippet}\n</AIChat>\n```\n\n## Thread controls\n\nUse `density` for transcript spacing, `messageSize` for the default message scale, and\n`messageVariant` (`bubble` or `minimal`) for default message presentation. Use `showToc`,\n`tocSide`, and `toc` for user-turn navigation. Custom message snippets own their message\npresentation. Configure advanced virtualizer tuning on `AIThread` through direct composition.\n\nUse `messageActions`, `messageActionsVisibility` (`hover`, `always`, or `none`), `messageCopyable`, `messageEditable`, `messageRetryable`, `onMessageCopy`, `onMessageEdit`, and `onMessageRetry` for default message actions. Explicit message-action callbacks take precedence over conversation fallbacks.\nIntermediate assistant segments that continue through tools into another assistant segment omit the\naction region; actions attach to the terminal assistant response for the turn.\n\n## Context and model controls\n\n`models` and `modelGroups` populate the default selector. `maxTokens` defaults to 128000. `showContext` and `showModelSelector` default to true; the model selector renders only when at least one model exists. Custom `context` and `modelSelector` snippets render regardless of those visibility flags. `controls` has precedence over both individual regions.\n\n## Composer behavior\n\nThe default AIComposer remains connected to the central conversation state. AIChat exposes product-level source, file, and queue behavior:\n\n- Queueing: `disabled`, `queueWhileBusy`, `queue`, `onQueueChange`, `onQueuedMessageAdd`, `onQueuedMessageCancel`, `onQueuedMessageEditStart`, `onQueuedMessageEditCommit`, `onQueuedMessageEditCancel`, `onQueuedMessageReorder`, and `onSteer`.\n- Files: `fileDropzone`, `fileMultiple`, `accept`, `maxFiles`, `maxFileSize`, `onFilesRejected`, `onFileReject`, `onAttachmentAdd`, `onAttachmentRetry`, and `onAttachmentRemove`. AIChat defaults `fileDropzone` to true.\n- Suggestions in the editor: `commands`, `mentions`, `references`, and `skills`.\nUse `AIConversation` with `AIThread` and `AIComposer` directly for editor formatting, toolbar, shortcut, and other primitive-level tuning.\n\nConversation `onSubmit`, `onStop`, and `onFilesChange` remain central state events rather than bypassing or duplicating the Composer path.\n\n## Questions and suggestions\n\nAn active `activeAskUserQuestion` replaces both a custom or default composer. The complete request is rendered with every question, initial values, title, requester, context, navigation labels, submit label, and discard label. Answers are retained by request key, and completion or dismissal resolves the captured request through `AIConversationState.resolveAskUserQuestion`.\n\nPrompt `suggestions` render only inside an empty transcript. An explicit `empty` region has precedence. An explicit `onSelect` callback -- the pick event for a suggestion -- has precedence over the default behavior; without it, picking a suggestion updates `currentInput` and focuses the default composer.\n\n## Skeleton\n\nAIChatSkeleton accepts native div attributes plus `messageCount`, `showHeader`, `showComposer`, `showFooter`, `class`, and `theme`. `messageCount` defaults to 4 and is clamped from 1 to 8. Header and footer default off; composer defaults on. The root defaults to `role=\"status\"`, `aria-label=\"Connecting chat\"`, and `aria-busy=\"true\"`, all overridable with native attributes.\n\n```svelte\n<AIChatSkeleton\n  messageCount={6}\n  showHeader\n  showFooter\n  aria-label=\"Loading support conversation\"\n/>\n```\n\n## Theme\n\nUse `theme` or `setAIChatTheme` to override `root`, `header`, `error`, `beforeThread`, `thread`, `afterThread`, `suggestions`, `composer`, `controls`, `footer`, and `skeletonMessages` parts.\n";
+    readonly 'ai-context': "\n# AIContext\n\nDisplays context-window usage with the existing `ProgressCircle` and a top-end `HoverCard` breakdown. It reads `AIConversation.contextUsage` when `usage` is omitted or undefined; a direct usage object or `null` wins over provider state. Direct `usedTokens` takes precedence over either usage source.\n\n`maxTokens` defaults to 128,000. `warningAt` and `dangerAt` default to 70 and 90 percent. Use `compact` for an icon-only trigger and `formatTokens` to replace number formatting. `dir` is forwarded to both the trigger wrapper and portalled details. The compact `labels` object overrides the title, remaining-token formatter, breakdown row labels, Used/Maximum labels, and complete trigger `label`; formatter callbacks receive already formatted token strings.\n\nThe `children` trigger and `content` detail snippets receive the complete resolved state: totals, remaining tokens, percentage, tone, formatted values, and resolved labels. Theme slots cover the root, popover/card surfaces, trigger, progress circle, trigger value, summary, meter, and breakdown rows. Native div attributes and attachments are forwarded to the root; `ref` binds that element.\n\nThe default trigger is a keyboard-focusable button with a complete context-usage label. The decorative ProgressCircle does not duplicate progress semantics, and the hover content opens from pointer or keyboard focus.\n\n```svelte\n<AIContext\n  maxTokens={128000}\n  usage={{ inputTokens: 12000, outputTokens: 3200, reasoningTokens: 800 }}\n/>\n```\n";
+    readonly 'ai-thread': "\n# AIThread\n\nVirtualized AI transcript with stable message keys, initial end anchoring, pinned append following, prepend preservation, message actions, AI SDK tool parts, ask-user-question flows, prompt suggestions, and the standalone AIThreadToc primitive.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { AIThread, type AIThreadItem } from '../components/AIThread/index.ts';\n\n  let messages: AIThreadItem[] = $state([]);\n  let announcement = $state('');\n</script>\n\n<AIThread\n  {messages}\n  getMessageKey={(message) => message.id}\n  liveText={announcement}\n  streaming={Boolean(announcement)}\n  showToc\n/>\n```\n\n`liveText` is announced through a polite, atomic, screen-reader-only region. It is not appended to the visual transcript and does not suppress the empty state.\n\n## Message input\n\n`AIThreadItem` accepts message, context/marker, tool-shaped, file, and attachment fields. The `parts` array supports:\n\n- `{ type: 'text', text }`\n- `{ type: 'marker', content, variant? }`\n- `{ type: 'tool', tool: AIToolCall }`\n- AI SDK `dynamic-tool` and `tool-*` parts with `toolCallId`, `state`, `input`, `output`, `structuredContent`, `result`, `error`, and `_meta`\n\nWhen text parts are present, top-level message content is not rendered again. Consecutive ordinary tools are grouped through `AITool`.\n\n## Core props\n\n- **messages**: readonly TMessage[] - Direct transcript. Falls back to the nearest AIConversation.\n- **getMessageKey**: (message, index) => string | number | bigint | undefined - Stable virtualization key. Prefer persistent identifiers.\n- **liveText**: string - Screen-reader announcement. Falls back to AIConversation.\n- **streaming**: boolean - Sets the busy state. Falls back to AIConversation.\n- **density**: 'compact' | 'normal' | 'comfortable' - Transcript row and edge spacing. Default 'normal'.\n- **messageSize**: 'small' | 'normal' | 'large' - Size forwarded to default AIMessage rows. Default 'normal'.\n- **messageVariant**: 'bubble' | 'minimal' - Presentation forwarded to default AIMessage rows. Default 'bubble'.\n- **followOutput**: boolean - Follow appended rows only while pinned. Default true.\n- **bottomThreshold**: number - End-pinned tolerance in pixels. Default 80.\n- **estimateSize**: number - Estimated row height. Defaults to 80, 96, or 120 from density.\n- **overscan**: number - Extra virtual rows. Default 4.\n- **padding**: number - Shared start/end virtual padding. Defaults to 8, 16, or 24 from density.\n- **paddingStart**, **paddingEnd**: number - Per-edge virtual padding overrides.\n- **scrollBehavior**: 'auto' | 'smooth' | 'instant' - Append, TOC, and scroll-button behavior. Default 'smooth'.\n- **showScrollButton**: boolean - Show the latest-message action away from the end. Default true.\n- **scrollButtonPosition**: 'left' | 'center' | 'right' - Default 'right'.\n- **ref**: HTMLDivElement - Bindable thread root, not the internal scroll viewport.\n- **class**: string - Thread-root classes.\n- **role**: HTML role - Thread-root role. Default 'log'.\n- **viewportLabel**: string - Label for the focusable transcript viewport.\n- **onscroll**: (event) => void - Raw native viewport-scroll callback.\n- Native div attributes and Svelte attachments are forwarded to the thread root.\n\n## Empty state and suggestions\n\n- **empty**: Slot - Replaces the empty state.\n- **suggestions**: readonly string[] - Default empty-state suggestions. Falls back to AIConversation.\n- **onSelect**: (suggestion) => void - Pick event for an empty-state suggestion; takes precedence over the provider's default `setInput` behavior.\n\n## Message composition\n\n- **message**: Slot<{ message, index, actionsVisibility }> - Replaces a complete message row. The\n  resolved action visibility keeps custom renderers aligned with the thread's latest-message rule.\n- **messageSize**, **messageVariant** - Configure only the default AIMessage renderer; a custom message slot owns its presentation.\n- **messageActions**: AIMessageActionSnippet | false - Replaces or disables default actions.\n- **messageActionsVisibility**: 'hover' | 'always' | 'none' (default: 'always')\n- **messageCopyable**, **messageEditable**, **messageRetryable**: boolean\n- **onMessageCopy**, **onMessageEdit**, **onMessageRetry**: AIMessage action handlers.\n\nAssistant text that continues through tool rows into another assistant segment does not render\nan action region. Actions belong to the terminal assistant segment for that user turn; completed\nhistorical turns retain hover actions.\n\n## Tool and marker composition\n\n- **tool**: Slot<{ tools, message, index }> - Replaces an ordinary grouped tool row.\n- **toolIcon**, **toolTitle**, **toolContent**, **toolInput**, **toolOutput**, **toolError**, **toolStatus** - Forwarded to the current AITool API.\n- **marker**: Slot<{ message, index }> - Replaces a complete context/marker row.\n- **markerIcon**, **markerContent** - Compose the default AIMarker.\n\n## Ask-user-question\n\nPending ask-user-question tools are auto-detected. Inside AIConversation, AIThread publishes a detected request only when no provider request is active and clears only the exact detected request it previously published; explicit provider requests retain precedence. Standalone AIThread renders the active question below the virtual viewport.\n\n- **activeAskUserQuestion**: request | null - Direct request takes precedence. Explicit null suppresses provider state and detection.\n- **renderAskUserQuestion**: boolean - Show and filter the active question tool. Default true.\n- **askUserQuestionDisabled**: boolean - Disable the question form.\n- **onAskUserQuestionStateChange**: async callback - Takes precedence over AIConversation resolution.\n\n## Minimap\n\n- **showToc**: boolean - Show the user-turn minimap when at least two user turns overflow the viewport.\n- **tocSide**: 'left' | 'right' - Default 'left'.\n- **tocMaxPins**: number - Maximum compacted pins.\n- **tocTheme**: AIThreadTocThemeProps - Theme overrides forwarded to the default standalone primitive.\n- **toc**: Slot<AIThreadTocState> - Replaces the minimap and receives entries, range, active index, visible offsets, `scrollToIndex`, and `scrollToOffset`.\n\n```svelte\n<script lang=\"ts\">\n  import { AIThread } from '../components/AIThread/index.ts';\n  import { AIThreadToc } from '../components/AIThreadToc/index.ts';\n</script>\n\n<AIThread {messages} showToc>\n  {#snippet toc(state)}\n    <AIThreadToc {state} side=\"left\" previewAlign=\"start\" />\n  {/snippet}\n</AIThread>\n```\n\nImport `AIThreadToc`, its controlled state types, and its dedicated theme from `entasis/ai-thread-toc`. AIThread composes that exact primitive for the default minimap.\n\n## Exports\n\nThe `entasis/ai-thread` entry exports `AIThread`, thread/message/part/question types, scroll behavior and button-position types, marker/tool/action types, and the AIThread theme helpers. It keeps an `AIThreadToc` re-export for composition compatibility; the dedicated primitive entry is `entasis/ai-thread-toc`.\n";
+    readonly 'ai-thread-toc': "\n# AIThreadToc\n\nStandalone, controlled user-turn navigation for AI transcripts. It renders a compact rail, visible-range marker, magnifying pins, and one shared HoverCard preview from an AIThreadTocState.\n\nImport it directly from **entasis/ai-thread-toc**. AIThread composes the same primitive for its default minimap and exposes measured state through its **toc** slot.\n\n## Thread composition\n\n~~~svelte\n<script lang=\"ts\">\n  import { AIThread } from '../components/AIThread/index.ts';\n  import { AIThreadToc, type AIThreadTocState } from '../components/AIThreadToc/index.ts';\n</script>\n\n{#snippet toc(state: AIThreadTocState)}\n  <AIThreadToc {state} side=\"left\" previewAlign=\"start\" />\n{/snippet}\n\n<AIThread {messages} showToc {toc} />\n~~~\n\nThe component is controlled: **state.entries** supplies measured user turns, **activeIndex** and visible offsets describe the transcript viewport, and **scrollToIndex** performs navigation. A manually constructed state is also valid.\n\n## Props\n\n- **state**: AIThreadTocState - Required controlled navigation state.\n- **maxPins**: number - Maximum pins before spatial compaction. Default 96.\n- **scrollAreaLabel**: string - Accessible label for the nested scrollable pin region.\n- **side**: 'left' | 'right' - Rail alignment and pin transform origin. Default 'left'.\n- **previewSide**: 'left' | 'right' - Preview side; defaults away from the rail.\n- **previewAlign**: 'start' | 'center' | 'end' - Preview alignment. Default 'center'.\n- **pin**: Slot<{ entry, active }> - Replaces each pin indicator.\n- **preview**: Slot<AIThreadTocEntry> - Replaces the complete shared HoverCard preview.\n- **title**, **excerpt**, **metadata**, **icon**: Slot<AIThreadTocEntry> - Compose the default preview.\n- **ref**, **class**, **theme**, native nav attributes, and Svelte attachments.\n\nThe root is bounded to 80% of its containing height. Pins live in the shared ScrollArea; native and custom scrollbars are hidden, while wheel, touch, and keyboard scrolling remain available. Give a standalone TOC a parent with an explicit height.\n\n## State and entries\n\nAIThreadTocEntry includes the source user message, prompt title, latest assistant excerpt, measured offset and size, files, attachments, and file count. AIThreadTocState includes entries, total range, active entry, visible offsets, **scrollToIndex**, and **scrollToOffset**.\n\nThe default preview clamps the prompt to one line, clamps the assistant response to four lines, and renders attachments as quiet inline labels. Pin focus and activation are keyboard accessible.\n\n## Theme\n\nTheme parts are **root**, **scrollArea**, **scrollContent**, **track**, **pinArea**, **rail**, **viewport**, **pin**, **pinIndicator**, **previewAnchor**, **preview**, **previewHeader**, **previewIcon**, **previewTitle**, **previewExcerpt**, **previewMetadata**, and **previewFiles**.\n";
+    readonly 'ai-message': "\n# AIMessage\n\nRole-aware chat message with Markdown, inline AI tokens, files, and copy/edit/retry actions.\n\n## Content and precedence\n\n`message` supplies role, name, content, and files. Direct `from`, `name`, `content`, and\n`files` props take precedence. `messageIndex` is canonical and `index` is its Entasis alias.\n\n`markdown` defaults to true. `streamdown` forwards shared Markdown options and wins over the\n`markdownProps` alias. Raw HTML is always disabled. HTTPS images and HTTPS, email, and telephone\nlinks are the safe defaults; callers may narrow or extend those prefix lists through Markdown\noptions. File, Reference, Mention, Skill, and Command tokens are parsed inside prose, and\ncaller-provided `mdxComponents` may replace their default renderers.\n\n`variant` accepts `bubble` or `minimal`. Bubble preserves the framed role surfaces. Minimal\nkeeps user and system semantics visible with a neutral user surface while rendering assistant and\ntool content without a background container. `size` accepts `small`, `normal`, or `large`\nand scales typography, content padding, file previews, and the default action controls together.\n\n```svelte\n<script>\n  import { AIMessage } from '../components/AIMessage/index.ts';\n</script>\n\n<AIMessage\n  from=\"assistant\"\n  content={'Review <File id=\"brief\" label=\"launch-brief.md\" /> before launch.'}\n  files={[{ name: 'launch-brief.md', size: 18420, type: 'text/markdown' }]}\n  variant=\"minimal\"\n  size=\"normal\"\n  actionsVisibility=\"always\"\n/>\n```\n\n## Actions and composition\n\n`actionsVisibility` wins over the `actionVisibility` alias. `copyable`, `editable`, and\n`retryable` win over `copyAction`, `editAction`, and `retryAction`. User messages enable\nedit by default; assistant messages enable retry by default. `actions={false}` removes the action\nregion, while a custom actions slot receives `AIMessageActionState`.\n\nDefault edit and retry actions use the nearest `AIConversation`. A direct `conversation` wins,\nand `conversation={null}` explicitly disables context lookup. Direct `onCopy`, `onEdit`, and\n`onRetry` handlers take precedence over conversation behavior.\n\n`children` replaces the body only and receives the resolved message, index, role, content, size,\nand variant;\nthe role layout, files, and action region remain owned by AIMessage. Native article attributes,\nattachments, bindable `ref`, `class`, and `theme` are forwarded. Theme parts are `root`,\n`body`, `header`, `files`, `bubble`, `markdown`, and `actions`.\n";
+    readonly 'ai-message-actions': "\n# AIMessageActions\n\nCopy, edit, and retry actions for an AI message. Defaults integrate with the nearest AIConversation.\n\n## Resolution and availability\n\n`message` supplies role and content. Direct `role` and `content` win, while `messageIndex`\nwins over the `index` alias. `copyable`, `editable`, and `retryable` win over the\ncompatibility `copy`, `edit`, and `retry` aliases.\n\nCopy requires non-empty content. Edit additionally requires a user role and either `onEdit` or a\nconversation. Retry requires an assistant role and either `onRetry` or a conversation plus a\nmessage index. Direct callbacks take precedence. Otherwise edit writes the content into the\nconversation input and retry targets the indexed message. Pass `conversation={null}` to disable\nscoped conversation lookup.\n\n`visibility` accepts `always`, `hover`, or `none`. `actions={false}` suppresses the\ncomplete surface. A supplied `actions` slot wins over the equivalent `children` slot. Both\nreceive complete `AIMessageActionState`, including the resolved size, capability flags, and\nawaitable copy, edit, and retry methods. `size` accepts `small`, `normal`, or `large` and\nscales the default controls. The copy callback runs only after clipboard success. Failures raised by\nthe default buttons render through the semantic error region.\n\n```svelte\n<script>\n  import { AIMessageActions } from '../components/AIMessageActions/index.ts';\n</script>\n\n{#snippet actions({ copied, copy })}\n  <button type=\"button\" onclick={() => void copy()}>\n    {copied ? 'Copied' : 'Copy answer'}\n  </button>\n{/snippet}\n\n<AIMessageActions content=\"Answer\" {actions} />\n```\n\nThe root forwards native div attributes and attachments when actions are available, plus bindable\n`ref`, `class`, and `theme`. Theme parts cover `root`, `button`, and `error`, with role,\nvisibility, and size variants on the root and size variants on the button.\n";
+    readonly 'ai-marker': "\n# AIMarker\n\nTranscript marker with default, separator, and bottom-border variants.\n\n```svelte\n<script>\n  import { AIMarker } from '../components/AIMarker/index.ts';\n  import { fileTextIcon } from 'entasis/icons/fileText';\n</script>\n\n{#snippet icon()}{@render fileTextIcon({ size: 16 })}{/snippet}\n{#snippet content()}<span>Imported <strong>3 files</strong></span>{/snippet}\n\n<AIMarker variant=\"separator\" {icon} {content} aria-label=\"Imported files\" />\n```\n";
+    readonly 'ai-model-selector': "\n# AIModelSelector\n\nModel selection built on Entasis `PopupMenu` and `Menu`. It accepts flat `models`, recursive `groups`, disabled entries, provider labels, optional keyword search, context-window metadata, and supplemental standard Menu items.\n\nBind `value`, `open`, and `query` for direct control. `defaultValue` and `defaultOpen` apply once when their live props are omitted; `onValueChange` receives `{ value, model }`, and `onOpenChange` reports component-owned disclosure changes. Set `searchable={false}` to remove the search header and ignore, without erasing, a bound query. When `value` is omitted or undefined inside `AIConversation`, selection reads and updates `conversation.selectedModel`. A direct string or `null` wins over provider state; `null` is the bindable controlled-empty value because Svelte substitutes prop fallbacks for `undefined`. `placeholder` follows the same omission rule before the compact `labels` object and conversation placeholder, with `null` suppressing visible placeholder text.\n\nThe `children` trigger, `search` header, and `empty` snippets receive `{ model, value, open, query, searchable, disabled, labels, select, setQuery, setOpen, toggle }`. The resolved `labels` cover the empty trigger, its accessible fallback name, search field, empty result, and providerless-group heading. The trigger remains owned by PopupMenu, so keyboard navigation and focus return continue to work with custom content. Theme slots cover the root, trigger, trigger content/icon/label, popover, search header, menu, provider headings, model options, nested groups, and empty state.\n\nSearch is case-insensitive across model id, label, provider, description, and `keywords`. A matching group label preserves that group; otherwise recursive groups retain only matching descendants. `menuItems` uses the public `MenuItem` union and is appended after the models, so recursive checked submenus can own reasoning effort, speed, verbosity, or provider-specific controls. Models without a provider use the configurable `providerFallback` heading, while option descriptions fall back to the provider name. Disabled selectors recursively disable supplemental menu items as well as groups and models.\n\n```svelte\n<AIModelSelector\n\t  models={[{ id: 'fast', label: 'Fast', provider: 'Acme', contextWindow: 128000 }]}\n\t  groups={[{ label: 'Research', models: researchModels }]}\n\t  searchable={false}\n\t  menuItems={[{ type: 'submenu', title: 'Reasoning effort', menu: reasoningItems }]}\n\t  bind:value\n  onValueChange={({ value, model }) => selectModel(value, model)}\n/>\n```\n";
+    readonly 'ai-composer': "\n# AIComposer\n\nAIComposer is a Markdown prompt composer built on the existing `RichTextInput`, `VoiceInput`, file-acceptance helpers, `SortableList`, `ScrollArea`, and `AIFilePreview`. It adds AI command, mention, reference, and skill tokens; optional voice capture; raw or managed files; queue editing; steering; submit/stop state; and optional `AIConversation` integration without owning transport.\n\n## Requires\n\nAIComposer embeds RichTextInput, which is built on Lexical. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add lexical @lexical/history @lexical/link @lexical/list @lexical/markdown @lexical/rich-text @lexical/selection @lexical/utils`\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import {\n    AIComposer,\n    type AIComposerAttachment,\n    type AIComposerCommand,\n    type AIComposerHandle,\n    type AIComposerMentionItem,\n    type AIComposerQueuedMessage,\n    type AIComposerSkillItem,\n    type AIComposerSubmitPayload\n  } from '../components/AIComposer/index.ts';\n</script>\n```\n\n## State and defaults\n\n- `value`, `files`, `attachments`, and `queue` are bindable.\n- Omitted `value`, `files`, `attachments`, `busy`, and labels inherit from the nearest `AIConversation`. A supplied direct prop always wins.\n- `defaultValue` initializes an uncontrolled draft once; `onValueChange` reports each library edit once and stays silent for parent updates.\n- Provider queue synchronization is signature-based and idempotent. It never compares proxy queue objects to their raw counterparts.\n\n## Submission\n\n`onSubmit` receives `AIComposerSubmitPayload`: display `markdown`, model-ready `modelInput`, raw files, attachment records, normalized tokens, and command/file/mention/reference/skill id lists. Every submitted token has serialized MDX-style `markdown`.\n\n```svelte\n<AIComposer\n  commands={[\n    {\n      id: 'summarize',\n      label: 'Summarize',\n      prompt: 'Summarize the request and preserve decisions and risks.'\n    }\n  ]}\n  onSubmit={({ markdown, modelInput, tokens, files }) =>\n    sendPrompt({ markdown, modelInput, tokens, files })}\n/>\n```\n\nWhen no direct submit callback is supplied, the nearest conversation receives a user message and the draft clears after successful submission. Direct callbacks retain the draft so application code controls when it clears. Callback failures render a danger alert. `onStop` overrides `conversation.requestStop()`; stop failures are also visible.\n\n## Trigger sources\n\n- `commands` drives `/`; it accepts a Svelte Pro-compatible command array or a trigger-source object.\n- `mentionItems` is the compatibility list for files, references, and skills.\n- `mentions` and `references` compose into `@`; `skills` drives `$`.\n- Trigger-source objects support items, title, empty copy, grouping, token-kind resolution, custom token conversion, sync/async search, and selection.\n- Compatibility callbacks are `onCommandSearch`, `onMentionSearch`, and `onSkillSearch`. Mention search receives `{ query, type }`; skill search falls back to `onMentionSearch({ query, type: 'skill' })`.\n- Synchronous searches stay synchronous. Promise searches expose loading/error/request state through the reused RichTextInput lifecycle and ignore stale responses.\n- A trigger source's `onSelect({ item, context })` is the pick event. The per-kind\n  `onCommandInsert`, `onMentionInsert`, and `onSkillInsert` callbacks run after the token is\n  inserted, so they are named for the insertion rather than the pick: `onSelect` is reserved for\n  \"the user picked this item\" and one component cannot own three of them.\n- Those callbacks and `onSuggestionOpen`, `onSuggestionClose`, `onSuggestionQueryChange`, and `onSuggestionHighlightChange` receive normalized source/lifecycle data.\n\n## Files and attachments\n\nSet `fileDropzone` to enable the chooser, paste, and drag-and-drop intake. The composer delegates to the shared `FileDropzone`, exposes `data-file-drag-state=\"potential | valid | invalid\"`, and renders a default overlay while a file drag is active. Override its copy with `dropLabel` and `dropInvalidLabel`, or replace the overlay content through the `dropzone` slot, which receives `{ state, files, accept, multiple, maxFiles, maxFileSize }`. `fileMultiple`, accepted types, maximum count, and maximum bytes use the shared file acceptance rules and report detailed rejections through `onFileReject`.\n\nWith only `files`, the composer uses raw `File[]`. Supplying `attachments`, an attachment callback, or conversation attachment state activates managed attachments. Managed records use `pending | uploading | uploaded | failed`, keep stable ids across queue edits, show `previewUrl` or `remoteUrl`, and expose add/retry/remove callbacks. Rejected files and retry failures remain visible.\n\n## Voice input\n\nSet `voiceInput` to render the existing VoiceInput primitive before the submit control. `voiceInputVariant` is `compact | expandable` and defaults to `compact`. The expandable presentation grows into the remaining footer width while recording; compact remains a mic-sized control.\n\nConfigure capture with `voiceInputMinDuration`, `voiceInputMaxDuration`, `voiceInputColor`, the accessible labels, and `voiceInputTheme`.\n\n`onVoiceInput` is the only voice lifecycle callback. It receives the finalized recording as an `ArrayBuffer` and must return a promise. AIComposer clears the internal recording before playback can render and replaces the voice control with a spinner until the promise settles. Callback failures render on the voice field. AIComposer remains transport-free: the callback owns transcription, upload, or any other application workflow. Replacing the complete `footer` also replaces the integrated voice control.\n\n```svelte\n<AIComposer\n  voiceInput\n  voiceInputVariant=\"expandable\"\n  onVoiceInput={(audioBuffer) => transcribe(audioBuffer)}\n/>\n```\n\n## Queue\n\nWhen `busy` and `queueWhileBusy` are true, submission creates a flat `AIComposerQueuedMessage` and clears the draft. Queue rows can be reordered, steered, edited, restored, cancelled, or have editing cancelled. The lifecycle callbacks are:\n\n- `onQueueChange`\n- `onQueuedMessageAdd`, `onQueuedMessageCancel`\n- `onQueuedMessageEditStart`, `onQueuedMessageEditCommit`, `onQueuedMessageEditCancel`\n- `onQueuedMessageReorder`, `onSteer`\n\nSingle-message queue callbacks receive `{ message, index }`; edit commits also include `previousMessage`.\n\nAIComposer does not automatically drain the queue when `busy` becomes false. Missing queue targets throw instead of reporting a false success.\n\n## Editor and composition\n\n`submitShortcut` is `none | enter | shift-enter | command-enter`. `toolbar` is `hover | fixed | both | none`; `formats` and `autoresize` are forwarded to RichTextInput.\n\n`header`, `prefix`, `suffix`, and `modelSelector` are content slots. `dropzone` customizes the active file-drop overlay. `footerStart`, `actions`, and replacement `footer` receive `{ value, files, attachments, isEmpty, isBusy }`. The default footer orders file/model controls at the start and custom actions, voice input, and submit/stop at the end.\n\nThe component handle exposes `focus`, `clear`, `insertText`, `insertItem`, `insertToken`, `insertCommand`, `insertMention`, `insertReference`, and `insertSkill`. `clear()` clears editor Markdown and token metadata, not attached files.\n\nThe root accepts native form attributes plus bindable `ref`, `class`, and `theme`. Theme parts cover root, dropzone/dropzone icon, header, files, file rows, body, editor, toolbar, errors, footer/actions, the voice-input region, and every queue region. `voiceInputTheme` is forwarded to the reused VoiceInput primitive.\n";
+    readonly 'ai-reasoning': "\n# AIReasoning\n\nAIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive. It opens when a stream starts, measures elapsed time in seconds, and closes shortly after the first streamed completion.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { AIReasoning } from 'entasis/ai-reasoning';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\t{streaming}\n\tthinkingMessages={['Planning', 'Checking constraints', 'Preparing response']}\n/>\n```\n\nThe default trigger displays a brain icon and a shimmer-only `SpinnerText` label while streaming. A supplied `thinkingMessages` list replaces the resolved `labels.thinking` value and advances every two seconds when it contains more than one message. The compact `labels` object also overrides the unknown-duration sentence and completed-duration formatter.\n\n## Streaming lifecycle\n\n- `open` starts from `defaultOpen ?? streaming`.\n- At the start of a streaming session, the component auto-opens once unless `defaultOpen={false}`.\n- Closing the panel manually during that stream keeps it closed; streaming does not force it open again.\n- When streaming ends, the measured duration is rounded up to whole seconds.\n- After the first observed stream completes, an open panel closes after `1000` ms by default. A trace that never streamed is not auto-closed.\n- An explicit `duration` is expressed in seconds and takes precedence over the measured duration.\n\nUse `defaultOpen={false}` to opt out of streaming auto-open without disabling manual toggling:\n\n```svelte\n<AIReasoning content={reasoningText} streaming defaultOpen={false} />\n```\n\n## Controlled state\n\n`open` is bindable. `onOpenChange` runs once for user toggles and automatic stream-driven open or close changes. Initialization and parent assignments do not invoke it.\n\n```svelte\n<script lang=\"ts\">\n\tlet open = $state(true);\n\tlet lastUserState = $state(open);\n\n\tfunction handleOpenChange(nextOpen: boolean) {\n\t\tlastUserState = nextOpen;\n\t}\n</script>\n\n<AIReasoning\n\tcontent={reasoningText}\n\tduration={8}\n\tbind:open\n\tonOpenChange={handleOpenChange}\n/>\n<p>Last user-selected state: {lastUserState ? 'open' : 'closed'}</p>\n```\n\n## Custom trigger and body\n\nA custom `trigger` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is `{ open, streaming, duration, message }`, where `message` is the currently displayed thinking label.\n\n```svelte\n<AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>\n\t{#snippet trigger({ open, streaming, duration, message })}\n\t\t<span class=\"flex w-full items-center justify-between\">\n\t\t\t{#if streaming}\n\t\t\t\t<span>{message}</span>\n\t\t\t{:else if duration !== undefined}\n\t\t\t\t<span>Thought for {duration}s</span>\n\t\t\t{/if}\n\t\t\t<span>{open ? 'Hide' : 'Show'}</span>\n\t\t</span>\n\t{/snippet}\n\n\t{#snippet children({ message })}\n\t\t<p>Current step: {message}</p>\n\t{/snippet}\n</AIReasoning>\n```\n\n`content` is optional. When it is non-null, it is rendered as Markdown and takes precedence over `children`:\n\n```svelte\n<AIReasoning content=\"**This Markdown is rendered.**\" defaultOpen>\n\t<p>This custom body is ignored because content was supplied.</p>\n</AIReasoning>\n```\n\n## Markdown safety\n\nPass Markdown options through `markdown`. AIReasoning owns `content` and always forces `renderHtml={false}`, even if renderer options are spread into Markdown.\n\n```svelte\n<AIReasoning content={reasoningText} markdown={markdownOptions} />\n```\n\n## Theme slots\n\nThe AIReasoning `trigger` and `content` theme slots are composed into the actual Collapsible trigger button and content panel. `root` styles the Collapsible root; `icon`, `status`, and `duration` style the default trigger regions.\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\tdefaultOpen\n\ttheme={{\n\t\troot: { base: 'w-full' },\n\t\ttrigger: { base: 'rounded-md px-2' },\n\t\tcontent: { base: 'mt-3 pl-5' }\n\t}}\n/>\n```\n\nGlobal overrides use `setAIReasoningTheme` from the same package entry.\n\n## Props\n\n- `content?: string`: Markdown trace. Takes precedence over custom children.\n- `streaming?: boolean`: Drives status labels, auto-open, duration measurement, and completion close.\n- `thinkingMessages?: readonly string[]`: Optional labels cycled every two seconds while streaming; takes precedence over `labels.thinking`.\n- `labels?: Partial<AIReasoningLabels>`: Default thinking text, unknown-duration text, and duration formatter.\n- `open?: boolean`: Bindable open state.\n- `defaultOpen?: boolean`: Initial state; false also opts out of streaming auto-open.\n- `onOpenChange?: (open: boolean) => void`: Component-owned open-state callback.\n- `duration?: number`: Controlled duration in seconds.\n- `autoCloseDelay?: number`: First-completion close delay in milliseconds; defaults to 1000.\n- `trigger?: Slot<AIReasoningState>`: Complete trigger replacement.\n- `children?: Slot<AIReasoningState>`: Custom body used only when content is omitted.\n- `markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>`: Markdown renderer options.\n- `class?: string`: Class merged onto the Collapsible root.\n- `theme?: AIReasoningThemeProps`: Root, trigger, and content theme overrides.\n- Additional attachments and DOM attributes are forwarded to the Collapsible root.\n";
+    readonly 'ai-suggestion': "\n# AISuggestion and AISuggestions\n\nPrompt suggestions rendered as a horizontal, scroll-faded button row.\n\n- `AISuggestion` is the theme-aware button primitive, defaults to the soft variant, accepts regular Button size, color, and variant props, and reports semantic selection through `onSelect`.\n- `AISuggestions` owns horizontal scrolling, optional `scrollFade`, bindable `value`, `defaultValue`, disabled state, shared built-in item `variant`, and `onSelect`.\n- `defaultValue` initializes the selected suggestion when `value` is omitted. `onValueChange(value)` fires once when a user changes that selection; parent updates and selecting the same value stay silent. `onSelect(value)` reports every suggestion activation, including repeated selection.\n- Callback-naming decision: the selected suggestion is a value state, so it keeps the `value`/`defaultValue`/`onValueChange` trio, and `onSelect` stays the pick event on both components. `AIThread` and `AIChat` forward the same `onSelect` name for their empty-state suggestions.\n- Its `suggestion` snippet receives `{ suggestion, selected, disabled, select }` for composed item rendering.\n\n```svelte\n<script>import { AISuggestions } from '../components/AISuggestion/index.ts';</script>\n<AISuggestions suggestions={['Summarize', 'Explain', 'Compare']} bind:value />\n```\n\nUse conversation-owned suggestions through `AIThread` or `AIChat` when they are the empty transcript state. An explicit selection callback takes precedence over the default conversation input update.\n";
+    readonly 'ai-tool': "\n# AITool\n\nRender one AI tool call or one collapsible group of consecutive calls. Non-empty `tools` takes precedence over `tool`. Missing statuses are inferred from output and errors, while arbitrary values use circular-safe depth and entry limits.\n\nExpanded call/group IDs use bindable `value`, initial `defaultValue`, and `onValueChange(value)`. The callback fires once for each user expansion change; parent prop updates stay silent. Nested rows inside a grouped call keep their own expansion state.\n\n```svelte\n<script lang=\"ts\">\n  import { AITool, type AIToolCall } from '../components/AITool/index.ts';\n\n  const tools: AIToolCall[] = [\n    { id: 'search', name: 'search_docs', input: { query: 'Svelte' }, output: { count: 4 } },\n    { id: 'read', name: 'read_page', status: 'running', input: { path: '/docs' } }\n  ];\n  let open = $state(['search']);\n</script>\n\n<AITool {tools} bind:value={open} multiple />\n```\n\nUse `icon`, `title`, `status`, `input`, `output`, `error`, or `content` snippets with a `{ tool, index }` payload. Default value panels use the existing Entasis ScrollArea and are capped vertically while supporting both scroll axes.\n\nDefault status is represented by the semantic left indicator: a spinner for active calls and a dot for settled calls. Use the `status` snippet only when a visible custom status treatment is required.\n\nDefault input and output sections use compact sign-in and sign-out icons. Their configured labels remain available to assistive technology and on hover.\n\nUse `toggleIcon=\"none\"` for the default minimal trigger, `chevron` for a rotating disclosure icon, or `plus-minus` for plus/minus expansion controls. The choice applies to both group and child triggers.\n\nThe default `ghost` variant renders an unframed tool call. Use `card` for an elevated surface, `outline` for a transparent bounded surface, or `soft` for a subtle status-aware tint. Group triggers keep intrinsic width independently from their expanded call content, while each child call receives the same variant around its complete row and panel.\n";
+    readonly 'ai-file-preview': "\n# AI file preview\n\nImport from `entasis/ai-file-preview`.\n\nAIFilePreview displays a File or file metadata, a name, preview URL, upload status, and errors. The size on file metadata is a byte count. onRemove and onRetry report the corresponding actions. It inherits native div attributes and accepts theme overrides for its preview parts.\n";
+    readonly 'aspect-ratio': "\n# AspectRatio Component\n\nThe AspectRatio component maintains a consistent aspect ratio for its content, ensuring that content scales proportionally regardless of its natural dimensions. This is particularly useful for images, videos, and other media that need to maintain specific proportions.\n\n## Basic Usage\n\n```svelte\n<AspectRatio ratio=\"16x9\">\n\t{#snippet children()}\n\t\t<img src=\"/image.jpg\" alt=\"Description\" />\n\t{/snippet}\n</AspectRatio>\n```\n\n## Props\n\n### Core Props\n- **ratio**: '2x1' | '2x3' | '16x9' | '4x3' | '1x1' | '3x4' | '3x2' | '9x16' | '1x2' (default: '2x1')\n  - Specifies the aspect ratio to maintain\n  - '2x1': 2:1 ratio (wide landscape)\n  - '2x3': 2:3 ratio (portrait)\n  - '16x9': 16:9 ratio (widescreen video)\n  - '4x3': 4:3 ratio (traditional display)\n  - '1x1': 1:1 ratio (square)\n  - '3x4': 3:4 ratio (portrait)\n  - '3x2': 3:2 ratio (photo)\n  - '9x16': 9:16 ratio (vertical video/phone)\n  - '1x2': 1:2 ratio (tall portrait)\n\n### Layout Props\n- **class**: string - Additional CSS classes for the aspect ratio container\n- **ref**: HTMLElement | null - Reference to the aspect ratio container element\n\n### Content Props (Slots)\n- **children**: Snippet - Content to be displayed within the aspect ratio container\n\n### Styling Props\n- **theme**: AspectRatioThemeProps - Custom theme overrides\n\n## Structure\n\nThe AspectRatio component uses a two-layer structure:\n\n```\n<div class=\"relative w-full overflow-hidden aspect-[ratio]\" data-aspect-ratio-wrapper=\"\">\n\t<div class=\"absolute inset-0 h-full w-full\">\n\t\t<!-- Your content -->\n\t</div>\n</div>\n```\n\nThe outer container maintains the aspect ratio with overflow hidden to prevent content overflow, while the inner content fills the available space using absolute positioning.\n\n## Examples\n\n### Image with 16:9 Aspect Ratio\n```svelte\n<AspectRatio ratio=\"16x9\">\n\t{#snippet children()}\n\t\t<img src=\"/hero-image.jpg\" alt=\"Hero\" class=\"h-full w-full object-cover\" />\n\t{/snippet}\n</AspectRatio>\n```\n\n### Square Image Gallery\n```svelte\n<div class=\"grid grid-cols-3 gap-4\">\n\t{#each images as image}\n\t\t<AspectRatio ratio=\"1x1\">\n\t\t\t{#snippet children()}\n\t\t\t\t<img src={image.src} alt={image.alt} class=\"h-full w-full object-cover rounded-lg\" />\n\t\t\t{/snippet}\n\t\t</AspectRatio>\n\t{/each}\n</div>\n```\n\n### Video Container\n```svelte\n<AspectRatio ratio=\"16x9\">\n\t{#snippet children()}\n\t\t<iframe\n\t\t\tsrc=\"https://www.youtube.com/embed/...\"\n\t\t\tclass=\"h-full w-full\"\n\t\t\tallowfullscreen\n\t\t></iframe>\n\t{/snippet}\n</AspectRatio>\n```\n\n### Portrait Image\n```svelte\n<AspectRatio ratio=\"3x4\">\n\t{#snippet children()}\n\t\t<img src=\"/portrait.jpg\" alt=\"Portrait\" class=\"h-full w-full object-cover\" />\n\t{/snippet}\n</AspectRatio>\n```\n\n### Vertical Video (9:16)\n```svelte\n<AspectRatio ratio=\"9x16\">\n\t{#snippet children()}\n\t\t<video src=\"/vertical-video.mp4\" class=\"h-full w-full object-cover\" controls></video>\n\t{/snippet}\n</AspectRatio>\n```\n\n### Card with Fixed Aspect Ratio\n```svelte\n<Card>\n\t{#snippet title()}\n\t\tCard Title\n\t{/snippet}\n\t{#snippet children()}\n\t\t<AspectRatio ratio=\"16x9\">\n\t\t\t<div class=\"bg-gradient-to-br from-primary to-secondary flex h-full w-full items-center justify-center\">\n\t\t\t\t<span class=\"text-primary-contrast text-2xl font-bold\">Content</span>\n\t\t\t</div>\n\t\t</AspectRatio>\n\t\t<p>Card content below the aspect ratio container.</p>\n\t{/snippet}\n</Card>\n```\n\n### Responsive Aspect Ratio\n```svelte\n<AspectRatio ratio=\"16x9\" class=\"max-w-4xl\">\n\t{#snippet children()}\n\t\t<img src=\"/responsive-image.jpg\" alt=\"Responsive\" class=\"h-full w-full object-cover\" />\n\t{/snippet}\n</AspectRatio>\n```\n\n## Accessibility\n\n- The component maintains semantic structure without adding unnecessary ARIA attributes\n- Ensure images within the component have proper `alt` attributes\n- Videos should include proper captions and controls\n\n## Notes\n\n- The aspect ratio is maintained using the padding-bottom technique (padding-bottom percentage is calculated from the ratio)\n- This ensures compatibility across all browsers and maintains the aspect ratio regardless of content size\n- Content inside should use `object-cover` or `object-contain` classes for images/videos to fill the space properly\n- The component uses absolute positioning for the inner content container to ensure proper scaling\n- Works well with responsive images and videos\n- Can be nested within other components like Card, Dialog, etc.\n\n## Theme Customization\n\nThe AspectRatio component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Outer aspect ratio container styles\n- **content**: Inner content container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for the outer container (maintains aspect ratio)\n\n**content**:\n- base: Base classes for the inner content container (fills the aspect ratio space)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<AspectRatio \n  ratio=\"16x9\"\n  theme={{\n    root: {\n      base: 'rounded-lg overflow-hidden lift-3'\n    },\n    content: {\n      base: 'bg-gradient-to-br from-primary to-secondary'\n    }\n  }}\n>\n  {#snippet children()}\n    <img src=\"/image.jpg\" alt=\"Image\" class=\"h-full w-full object-cover\" />\n  {/snippet}\n</AspectRatio>\n```\n\n**Custom Container Styling**:\n```svelte\n<AspectRatio \n  ratio=\"1x1\"\n  theme={{\n    root: {\n      base: 'rounded-full border-4 border-primary overflow-hidden'\n    },\n    content: {\n      base: 'p-4 flex items-center justify-center'\n    }\n  }}\n>\n  {#snippet children()}\n    <div class=\"text-center\">Square Content</div>\n  {/snippet}\n</AspectRatio>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAspectRatioTheme } from '../components/AspectRatio/index.ts';\n  \n  setAspectRatioTheme({\n    root: {\n      base: 'rounded-xl overflow-hidden lift-4'\n    },\n    content: {\n      base: 'transition-transform hover:scale-105'\n    }\n  });\n</script>\n```\n";
+    readonly card: "\n# Card Component\n\nThe Card component is a flexible container component used to display content in a structured, visually distinct card format. It supports multiple sections (header, title, description, action, content, footer) through slots and can be made interactive with links or click handlers.\n\n## Basic Usage\n\n```svelte\n<Card>\n\t{#snippet title()}\n\t\tCard Title\n\t{/snippet}\n\t{#snippet description()}\n\t\tCard description text\n\t{/snippet}\n\t{#snippet children()}\n\t\tCard content goes here\n\t{/snippet}\n</Card>\n```\n\n## Props\n\n### Core Props\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the card\n\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' (default: 'solid')\n- **elevation**: 1 | 2 | 3 | 4 | 5 (default: 1) - Elevation step a solid card lifts by on the theme's elevation scale; other variants cast no shadow\n  - solid: Filled background with shadow (raised effect)\n  - outline: Transparent background with colored border\n  - soft: Semi-transparent background with color\n  - ghost: Transparent background, no border\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Scales the typography only: title (text-sm / text-base / text-lg), description and body text\n  - Combine with density to control spacing independently\n\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')\n  - Controls paddings and gaps between header/content/footer\n  - small: p-3 / gap-3 for dense dashboards\n  - normal: p-4 / gap-4 everyday scale\n  - large: p-6 / gap-6 roomy marketing/detail surfaces (vega default)\n\n### Layout Props\n- **disabled**: boolean (default: false)\n  - Disables interactions and applies opacity styling\n\n- **showBorders**: boolean (default: false)\n  - Shows edge-to-edge neutral-muted boundaries below the header and above the footer\n  - Boundary spacing follows density and is owned by the adjacent header/footer section\n\n### Interactive Props\n- **href**: string - Makes the card a link (renders as <a>)\n- **target**: string - Link target attribute (e.g., '_blank')\n- **rel**: string - Link rel attribute (e.g., 'noopener noreferrer')\n- **onclick**: (event: MouseEvent) => void - Native click handler (renders as role=\"button\" with keyboard activation via Enter/Space)\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave handler\n\nCards with href or onclick automatically get the internal `clickable` styling: pointer cursor, a hover effect matched to the surface (solids lift with a stronger ring and shadow, outline/ghost gain a translucent wash of the card color, soft deepens its tint), a pressed translate, and a keyboard focus ring. No prop needed — it follows from the interactivity.\n\nInteractive descendants stay independent: clicks (and Enter/Space) on buttons, links, form controls, or role=\"button|link|checkbox|radio|switch|menuitem\" elements inside the card never trigger the card's own onclick, and on href cards they don't navigate — only clicks on the card surface itself do.\n\n### Content Props (Slots)\n- **header**: Snippet - Custom header content (overrides default header structure)\n- **title**: Snippet - Card title text\n- **description**: Snippet - Card description text\n- **action**: Snippet | ButtonProps - Action button/element (positioned top-right in header)\n  - Can be a snippet (custom content) or a ButtonProps object for easy composition\n  - When using ButtonProps object, a Button component is automatically rendered\n- **content**: Snippet - Custom content (overrides default content structure)\n- **footer**: Snippet - Footer content\n- **children**: Snippet - Default content (rendered inside content section)\n\n### Styling Props\n- **class**: string - Additional CSS classes for the card container\n- **ref**: HTMLElement | null - Reference to the card element\n- **theme**: CardThemeProps - Custom theme overrides\n\n## Structure\n\nThe Card component uses a flexible slot-based structure:\n\n```\n<Card>\n\t<!-- Header section (optional) -->\n\t{#snippet header()}\n\t\t<!-- Custom header -->\n\t{/snippet}\n\t\n\t<!-- Or use default header structure -->\n\t{#snippet title()}\n\t\tTitle\n\t{/snippet}\n\t{#snippet description()}\n\t\tDescription\n\t{/snippet}\n\t{#snippet action()}\n\t\tAction button\n\t{/snippet}\n\t\n\t<!-- Content section -->\n\t{#snippet content()}\n\t\t<!-- Custom content -->\n\t{/snippet}\n\t\n\t<!-- Or use children -->\n\t{#snippet children()}\n\t\tDefault content\n\t{/snippet}\n\t\n\t<!-- Footer section (optional) -->\n\t{#snippet footer()}\n\t\tFooter content\n\t{/snippet}\n</Card>\n```\n\n## Examples\n\n### Basic Card\n```svelte\n<Card>\n\t{#snippet title()}\n\t\tCard Title\n\t{/snippet}\n\t{#snippet description()}\n\t\tThis is a description of the card content.\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>Card content goes here.</p>\n\t{/snippet}\n</Card>\n```\n\n### Card with Action Button (Snippet)\n```svelte\n<script lang=\"ts\">\n\timport { Card } from 'entasis/card';\n\timport { Button } from 'entasis/button';\n\timport { dotsThreeVerticalIcon } from 'entasis/icons/dotsThreeVertical';\n</script>\n\n<Card>\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n\t{#snippet description()}\n\t\tManage your preferences\n\t{/snippet}\n\t{#snippet action()}\n\t\t<Button variant=\"ghost\" size=\"small\">\n\t\t\t{@render dotsThreeVerticalIcon()}\n\t\t</Button>\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>Settings content...</p>\n\t{/snippet}\n</Card>\n```\n\n### Card with Action Button (ButtonProps Object)\n```svelte\n<Card\n\taction={{\n\t\tvariant: 'ghost',\n\t\tsize: 'small',\n\t\tchildren: 'Action'\n\t}}\n>\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n\t{#snippet description()}\n\t\tManage your preferences\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>Settings content...</p>\n\t{/snippet}\n</Card>\n```\n\n### Card with Action Button (ButtonProps with onclick)\n```svelte\n<Card\n\taction={{\n\t\tvariant: 'ghost',\n\t\tsize: 'small',\n\t\tchildren: 'Delete',\n\t\tcolor: 'danger',\n\t\tonclick: () => console.log('Deleted!')\n\t}}\n>\n\t{#snippet title()}\n\t\tDangerous Action\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>This action cannot be undone.</p>\n\t{/snippet}\n</Card>\n```\n\n### Interactive Card (Link)\n```svelte\n<Card href=\"/article/123\" target=\"_blank\" rel=\"noopener\">\n\t{#snippet title()}\n\t\tArticle Title\n\t{/snippet}\n\t{#snippet description()}\n\t\tRead more about this topic\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>Article preview...</p>\n\t{/snippet}\n</Card>\n```\n\n### Interactive Card (Click Handler)\n```svelte\n<Card onclick={(event) => console.log(event)} onpointerenter={(event) => console.log(event)}>\n\t{#snippet title()}\n\t\tClickable Card\n\t{/snippet}\n\t{#snippet children()}\n\t\t<p>Click me!</p>\n\t{/snippet}\n</Card>\n```\n\n### Card Variants\n```svelte\n<!-- Solid (default, with raised shadow) -->\n<Card variant=\"solid\" color=\"primary\">\n\t{#snippet children()}\n\t\tSolid card with shadow\n\t{/snippet}\n</Card>\n\n<!-- Outline -->\n<Card variant=\"outline\" color=\"primary\">\n\t{#snippet children()}\n\t\tCard with border\n\t{/snippet}\n</Card>\n\n<!-- Soft -->\n<Card variant=\"soft\" color=\"primary\">\n\t{#snippet children()}\n\t\tCard with muted background\n\t{/snippet}\n</Card>\n\n<!-- Ghost -->\n<Card variant=\"ghost\" color=\"primary\">\n\t{#snippet children()}\n\t\tTransparent card\n\t{/snippet}\n</Card>\n```\n\n### Sizes and Density\n```svelte\n<!-- size scales the typography -->\n<Card size=\"small\" title=\"Small type\" />\n<Card size=\"normal\" title=\"Normal type (default)\" />\n<Card size=\"large\" title=\"Large type\" />\n\n<!-- density scales the paddings and gaps -->\n<Card density=\"compact\" title=\"Dense dashboard card\" />\n<Card density=\"normal\" title=\"Everyday card (default)\" />\n<Card density=\"comfortable\" title=\"Roomy detail card\" />\n```\n\n### Card with Border Separators\nEnable edge-to-edge boundaries between sections using the `showBorders` prop.\n\n```svelte\n<Card showBorders={true}>\n\t{#snippet title()}\n\t\tTitle\n\t{/snippet}\n\t{#snippet children()}\n\t\tContent with border above\n\t{/snippet}\n\t{#snippet footer()}\n\t\tFooter with border above\n\t{/snippet}\n</Card>\n```\n\n### Custom Header\n```svelte\n<Card>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center justify-between\">\n\t\t\t<h3>Custom Header</h3>\n\t\t\t<Button size=\"small\">Action</Button>\n\t\t</div>\n\t{/snippet}\n\t{#snippet children()}\n\t\tContent\n\t{/snippet}\n</Card>\n```\n\n### Disabled Card\n```svelte\n<Card disabled={true}>\n\t{#snippet title()}\n\t\tDisabled Card\n\t{/snippet}\n\t{#snippet children()}\n\t\tThis card is disabled\n\t{/snippet}\n</Card>\n```\n\n## Accessibility\n\n- When `href` is provided, the card renders as an `<a>` element with `role=\"link\"`\n- When `onclick` is provided without `href`, the card renders as a `<div>` with `role=\"button\"`\n- Disabled cards have `pointer-events-none` and reduced opacity\n- The card uses semantic HTML structure with data attributes for styling hooks\n\n## Notes\n\n- The `solid` variant draws a `ring-neutral-muted` hairline and lifts by `elevation` (`lift-1` … `lift-5`) on the theme's elevation scale\n- Header uses CSS Grid with container queries (@container) for responsive layout\n- Action slot is automatically positioned top-right when present (via `hasAction` variant)\n- Borders are optional and can be enabled with `showBorders={true}` (subtle neutral-muted, 1px)\n- All slots are optional - the card adapts to missing sections\n- `children` slot is rendered inside the content section by default\n- Custom `header` or `content` slots override the default structure\n\n## Theme Customization\n\nThe Card component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main card container styles\n- **header**: Card header section styles\n- **title**: Card title text styles\n- **description**: Card description text styles\n- **action**: Action button/element styles\n- **content**: Card content section styles\n- **footer**: Card footer section styles\n\n### Theme Type Definition\n\n```typescript\nimport type { CardThemeProps } from 'entasis/card';\n\n// Example theme customization\nconst customTheme: CardThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'py-2 gap-2',\n      normal: 'py-4 gap-4',\n      large: 'py-6 gap-6'\n    },\n\t\tcolor: {\n\t\t\tprimary: 'bg-primary text-primary-contrast',\n\t\t\tneutral: 'bg-neutral text-neutral-contrast'\n\t\t},\n    variant: {\n      solid: 'bg-color border-color lift-1',\n      outline: 'bg-transparent border-color'\n    }\n  },\n  header: {\n    density: {\n      compact: 'px-2 gap-1',\n      normal: 'px-4 gap-2',\n      comfortable: 'px-6 gap-3'\n    },\n    hasAction: {\n      true: 'grid-cols-[1fr_auto]',\n      false: ''\n    }\n  },\n  title: {\n    size: {\n      small: 'text-sm',\n      normal: 'text-base',\n      large: 'text-lg'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all cards\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Typography scale\n  - density: 'compact' | 'normal' | 'comfortable' - Padding and gap spacing\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' - Visual style variant\n  - clickable: boolean - Internal; set automatically when href/onclick is present (hover, press, focus ring)\n  - disabled: boolean - Disabled state styling\n\n**header**:\n- base: Base classes for header container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding and gap spacing\n  - hasAction: boolean - Grid layout when action is present\n  - hasBorder: boolean - Border styling\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' - Inherited from card\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' - Text color based on card variant\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' - Text color based on card variant\n\n**action**:\n- base: Base classes for action element (positioned top-right)\n\n**content**:\n- base: Base classes for content section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Horizontal padding\n  - hasBorder: boolean - Border styling\n  - hasBorderTop: boolean - Top border\n  - hasBorderBottom: boolean - Bottom border\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding and gap spacing\n  - hasBorder: boolean - Border styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Card \n  theme={{\n    root: {\n      base: 'border-2 border-dashed',\n      variant: {\n        solid: 'raised-5'\n      }\n    },\n    title: {\n      size: {\n        large: 'text-2xl font-bold'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Custom Styled Card\n  {/snippet}\n</Card>\n```\n\n**Color and Variant Customization**:\n```svelte\n<Card \n  color=\"primary\"\n  variant=\"outline\"\n  theme={{\n    root: {\n      variant: {\n        outline: 'border-4 border-primary/50 bg-primary/5'\n      }\n    },\n    content: {\n      density: {\n        comfortable: 'px-8 py-6'\n      }\n    }\n  }}\n>\n  {#snippet children()}\n    Custom outline card\n  {/snippet}\n</Card>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setCardTheme } from '../components/Card/index.ts';\n  \n  setCardTheme({\n    root: {\n      base: 'rounded-2xl transition-all duration-300',\n      variant: {\n        solid: 'raised-4 hover:raised-5',\n        outline: 'border-2 hover:border-opacity-80'\n      }\n    },\n    header: {\n      density: {\n        normal: 'px-6 gap-3'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly grid: "\n# Grid and GridSpan\n\nGrid creates fixed, intrinsically responsive, or per-breakpoint CSS grid layouts. GridSpan is a\ndirect-child composition primitive for spanning columns and implicit rows.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { Grid, GridSpan } from '../components/Grid/index.ts';\n</script>\n```\n\n## Responsive grid\n\n```svelte\n<Grid columns={{ minWidth: 240, max: 3 }} gap=\"xl\">\n  {#each items as item}\n    <article>{item.title}</article>\n  {/each}\n</Grid>\n```\n\n## Columns\n\n- A number creates that many equal-width tracks.\n- `{ minWidth }` creates responsive `auto-fill` tracks.\n- `repeat: 'fit'` switches to `auto-fit`, collapsing empty tracks.\n- `max` caps the count while allowing the tracks that are present to fill the row.\n- Invalid or non-positive fixed counts resolve to one column.\n\n## Container breakpoints\n\n`columns`, `gap`, `rowGap` and `columnGap` also accept a per-breakpoint record or a function\nof the breakpoint. The steps measure the width the GRID was handed, not the device, so the same\ngrid is one column in a sidebar and four across a page.\n\n```svelte\n<Grid columns={{ xs: 1, sm: 2, lg: 4 }} gap={{ xs: 'sm', lg: 'xl' }}>\n  {#each items as item}\n    <article>{item.title}</article>\n  {/each}\n</Grid>\n```\n\n- Steps: `xs` base, `sm` 36rem, `md` 42rem, `lg` 56rem, `xl` 72rem of grid width.\n- The nearest defined key at or below the current width wins, so `{ sm: 2, lg: 4 }` is 2 columns\n  at `md` as well; below `sm` the component default (one column) applies.\n- An object is a breakpoint record only when every key is a breakpoint name, so\n  `{ minWidth: 240, max: 3 }` stays a single auto-fill configuration.\n- `rowGap` and `columnGap` fall back to whatever `gap` resolves to at that same breakpoint.\n- Resolution happens while rendering, so the first paint and the server render are already correct;\n  nothing is measured in the browser.\n\n## Spacing and alignment\n\n- `gap`, `rowGap`, and `columnGap` accept `none | xs | sm | md | lg | xl`.\n- Axis-specific gaps override `gap` on their axis.\n- `align` controls `align-items`; `justify` controls `justify-items`.\n- `rowHeight` sets implicit row height in pixels for masonry-like span layouts.\n\n## GridSpan\n\n```svelte\n<Grid columns={4} rowHeight={64} gap=\"lg\">\n  <GridSpan columns={{ xs: 'full', md: 2 }} rows={2}>Featured</GridSpan>\n  <GridSpan columns=\"full\">Full width</GridSpan>\n</Grid>\n```\n\nUse GridSpan as a direct child of Grid. `columns=\"full\"` spans from the first to the last\ngrid line; numeric columns and rows use positive integer spans. A responsive span steps with the\nwidth of the Grid it sits in, on the same breakpoints as that grid's columns.\n\n## Structure\n\nGrid renders two elements: a root that is the size and the container being measured, and the grid\nitself inside it. `class`, `style` and forwarded attributes land on the root; theme overrides\nreach the inner element through the `tracks` part.\n\nBoth components forward common semantic HTML attributes and Svelte attachments to their root elements.\nThe internal `micro` and `layout-*` spacing tokens are reserved for component recipes and must\nnot be used in generated interfaces.\n";
+    readonly 'grid-span': "\n# Grid and GridSpan\n\nGrid creates fixed, intrinsically responsive, or per-breakpoint CSS grid layouts. GridSpan is a\ndirect-child composition primitive for spanning columns and implicit rows.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { Grid, GridSpan } from '../components/Grid/index.ts';\n</script>\n```\n\n## Responsive grid\n\n```svelte\n<Grid columns={{ minWidth: 240, max: 3 }} gap=\"xl\">\n  {#each items as item}\n    <article>{item.title}</article>\n  {/each}\n</Grid>\n```\n\n## Columns\n\n- A number creates that many equal-width tracks.\n- `{ minWidth }` creates responsive `auto-fill` tracks.\n- `repeat: 'fit'` switches to `auto-fit`, collapsing empty tracks.\n- `max` caps the count while allowing the tracks that are present to fill the row.\n- Invalid or non-positive fixed counts resolve to one column.\n\n## Container breakpoints\n\n`columns`, `gap`, `rowGap` and `columnGap` also accept a per-breakpoint record or a function\nof the breakpoint. The steps measure the width the GRID was handed, not the device, so the same\ngrid is one column in a sidebar and four across a page.\n\n```svelte\n<Grid columns={{ xs: 1, sm: 2, lg: 4 }} gap={{ xs: 'sm', lg: 'xl' }}>\n  {#each items as item}\n    <article>{item.title}</article>\n  {/each}\n</Grid>\n```\n\n- Steps: `xs` base, `sm` 36rem, `md` 42rem, `lg` 56rem, `xl` 72rem of grid width.\n- The nearest defined key at or below the current width wins, so `{ sm: 2, lg: 4 }` is 2 columns\n  at `md` as well; below `sm` the component default (one column) applies.\n- An object is a breakpoint record only when every key is a breakpoint name, so\n  `{ minWidth: 240, max: 3 }` stays a single auto-fill configuration.\n- `rowGap` and `columnGap` fall back to whatever `gap` resolves to at that same breakpoint.\n- Resolution happens while rendering, so the first paint and the server render are already correct;\n  nothing is measured in the browser.\n\n## Spacing and alignment\n\n- `gap`, `rowGap`, and `columnGap` accept `none | xs | sm | md | lg | xl`.\n- Axis-specific gaps override `gap` on their axis.\n- `align` controls `align-items`; `justify` controls `justify-items`.\n- `rowHeight` sets implicit row height in pixels for masonry-like span layouts.\n\n## GridSpan\n\n```svelte\n<Grid columns={4} rowHeight={64} gap=\"lg\">\n  <GridSpan columns={{ xs: 'full', md: 2 }} rows={2}>Featured</GridSpan>\n  <GridSpan columns=\"full\">Full width</GridSpan>\n</Grid>\n```\n\nUse GridSpan as a direct child of Grid. `columns=\"full\"` spans from the first to the last\ngrid line; numeric columns and rows use positive integer spans. A responsive span steps with the\nwidth of the Grid it sits in, on the same breakpoints as that grid's columns.\n\n## Structure\n\nGrid renders two elements: a root that is the size and the container being measured, and the grid\nitself inside it. `class`, `style` and forwarded attributes land on the root; theme overrides\nreach the inner element through the `tracks` part.\n\nBoth components forward common semantic HTML attributes and Svelte attachments to their root elements.\nThe internal `micro` and `layout-*` spacing tokens are reserved for component recipes and must\nnot be used in generated interfaces.\n";
+    readonly heading: "\n# Heading Component\n\nThe Heading component renders semantic heading elements (h1-h6) with consistent styling and additional visual options.\n\n## Basic Usage\n\n```svelte\n<Heading>Default Heading</Heading>\n<Heading size=\"h1\">Main Title</Heading>\n<Heading size=\"h3\">Subtitle</Heading>\n```\n\n## Props\n\n### Core Props\n- **size**: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' (default: 'h2')\n  - Determines visual size and default semantic element\n  \n- **as**: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - Override the rendered HTML element\n  - Use when visual size should differ from semantic level\n\n### Visual Props\n- **weight**: 'light' | 'normal' | 'bold' (default: 'normal')\n  - Font weight of the heading\n\n- **align**: 'left' | 'center' | 'right' (default: 'left')\n  - Text alignment\n\n- **underline**: boolean (default: false) - Adds underline decoration\n\n- **muted**: boolean (default: false) - Reduces text opacity for secondary headings\n\n- **balanced**: boolean (default: true) - Enables text-wrap: balance for better line breaks\n\n- **trim**: 'none' | 'start' | 'end' | 'both' (default: 'both')\n  - Text trimming for better vertical rhythm\n\n### Content Props\n- **children**: Snippet - Heading content\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: HeadingThemeProps - Per-instance theme overrides\n\n## Examples\n\n### Different Heading Levels\n```svelte\n<Heading size=\"h1\">Heading 1</Heading>\n<Heading size=\"h2\">Heading 2</Heading>\n<Heading size=\"h3\">Heading 3</Heading>\n<Heading size=\"h4\">Heading 4</Heading>\n<Heading size=\"h5\">Heading 5</Heading>\n<Heading size=\"h6\">Heading 6</Heading>\n```\n\n### Visual vs Semantic Hierarchy\n```svelte\n<!-- Looks like h1 but semantically h2 -->\n<Heading size=\"h1\" as=\"h2\">\n\tLarge Visual Heading\n</Heading>\n```\n\n### Font Weights\n```svelte\n<Heading weight=\"light\">Light Heading</Heading>\n<Heading weight=\"normal\">Normal Heading</Heading>\n<Heading weight=\"bold\">Bold Heading</Heading>\n```\n\n### Text Alignment\n```svelte\n<Heading align=\"left\">Left Aligned</Heading>\n<Heading align=\"center\">Center Aligned</Heading>\n<Heading align=\"right\">Right Aligned</Heading>\n```\n\n### With Underline\n```svelte\n<Heading underline>Underlined Heading</Heading>\n```\n\n### Muted Heading\n```svelte\n<Heading>Primary Heading</Heading>\n<Heading muted>Secondary Muted Heading</Heading>\n```\n\n### Without Text Balancing\n```svelte\n<Heading balanced={false}>\n\tThis heading won't use text balancing\n</Heading>\n```\n\n### Text Trimming\n```svelte\n<Heading trim=\"none\">No Trim</Heading>\n<Heading trim=\"start\">Trim Start</Heading>\n<Heading trim=\"end\">Trim End</Heading>\n<Heading trim=\"both\">Trim Both</Heading>\n```\n\n### Page Title Pattern\n```svelte\n<Heading size=\"h1\" weight=\"bold\" trim=\"both\">\n\tWelcome to Our Site\n</Heading>\n<Heading size=\"h3\" muted trim=\"start\">\n\tDiscover amazing features\n</Heading>\n```\n\n### Section Headers\n```svelte\n<section>\n\t<Heading size=\"h2\" underline>\n\t\tFeatures\n\t</Heading>\n\t<p>Our amazing features...</p>\n</section>\n\n<section>\n\t<Heading size=\"h2\" underline>\n\t\tPricing\n\t</Heading>\n\t<p>Choose your plan...</p>\n</section>\n```\n\n### Custom Styling\n```svelte\n<Heading class=\"gradient-text\" size=\"h1\" weight=\"bold\">\n\tGradient Heading\n</Heading>\n```\n\n## Accessibility\n\n- Uses semantic HTML heading elements\n- Maintains proper document outline\n- `as` prop allows visual/semantic separation\n- Screen readers announce heading levels correctly\n\n## Notes\n\n- By default, `size` determines both visual appearance and HTML element\n- Use `as` to separate visual size from semantic meaning\n- Text balancing improves readability on multiple lines\n- Trim helps maintain consistent vertical spacing\n- Data attributes are added for all visual props for CSS targeting\n\n## Theme Customization\n\nThe Heading component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main heading element styles\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all headings\n- Variants:\n  - size: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - Text size based on heading level\n  - weight: 'normal' | 'bold' | 'light' - Font weight\n  - align: 'left' | 'center' | 'right' - Text alignment\n  - balanced: boolean - Text balancing (text-wrap: balance)\n  - underline: boolean - Underline decoration\n  - muted: boolean - Reduced opacity for secondary headings\n  - trim: 'none' | 'start' | 'end' | 'both' - Cap/baseline text trimming\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Heading \n  size=\"h1\"\n  theme={{\n    root: {\n      base: 'bg-clip-text',\n      size: {\n        h1: 'text-5xl font-extrabold'\n      }\n    }\n  }}\n>\n  Custom Heading\n</Heading>\n```\n\n**Size and Weight Customization**:\n```svelte\n<Heading \n  size=\"h2\"\n  weight=\"bold\"\n  theme={{\n    root: {\n      size: {\n        h2: 'text-4xl'\n      },\n      weight: {\n        bold: 'font-black'\n      }\n    }\n  }}\n>\n  Bold Heading\n</Heading>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setHeadingTheme } from '../components/Heading/index.ts';\n  \n  setHeadingTheme({\n    root: {\n      base: 'tracking-tight',\n      size: {\n        h1: 'text-5xl',\n        h2: 'text-4xl',\n        h3: 'text-3xl'\n      },\n      weight: {\n        bold: 'font-extrabold'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly resizable: "\n# Resizable\n\nResizable creates adjustable split-pane layouts from a typed panel configuration. It follows the\nEntasis configuration-over-markup pattern while matching the important behavior from shadcn/ui's\nResizable: accessible separators, keyboard resizing, horizontal and vertical groups, visible handle\ngrips, and RTL-aware horizontal resizing.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { Resizable } from 'entasis/resizable';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<Resizable\n\tclass=\"h-72 rounded-lg border border-neutral-muted\"\n\tpanels={[\n\t\t{ id: 'sidebar', defaultSize: 30, content: leftPanel },\n\t\t{ id: 'content', defaultSize: 70, content: rightPanel }\n\t]}\n\thandle\n\t/>\n\n{#snippet leftPanel()}\n\t<aside>Sidebar</aside>\n{/snippet}\n\n{#snippet rightPanel()}\n\t<main>Content</main>\n{/snippet}\n```\n\n## Props\n\n- `id`: Root id. Generated fallback panel ids are prefixed with it.\n- `panels`: Ordered panel definitions. A resize handle is inserted between each pair.\n- `sizes`: Bindable panel sizes in percentages.\n- `collapsedPanels`: Bindable list of collapsed panel ids.\n- `storageKey`: Persists sizes and collapsed panel ids to `localStorage`. Use stable panel ids\n  when enabling persistence.\n- `orientation`: `'horizontal' | 'vertical'`. Horizontal lays panels left-to-right.\n- `direction`: Backward-compatible alias for `orientation`.\n- `handle`: Renders a visible grip in each separator.\n- `handleVariant`: `'grip' | 'thumb'`. `grip` is the dotted handle; `thumb` is a compact\n  pill-line affordance.\n- `showLines`: Shows the visible separator line while keeping the resize rail active. Defaults to\n  `true`.\n- `variant`: `'default' | 'splitted'`. The `splitted` variant separates panels as softly\n  raised rounded surfaces while keeping separator lines resizable.\n- `dir`: `'ltr' | 'rtl'`. Mirrors horizontal pointer and keyboard deltas in RTL.\n- `disabled`: Disables all resize handles.\n- `disabledHandles`: Disables specific separators by zero-based handle index.\n- `keyboardStep`: Arrow-key resize step in percentage points.\n- `resetOnDoubleClick`: Resets adjacent panels toward their default sizes when a separator is\n  double-clicked. Defaults to `true`.\n- `class`: Additional CSS classes applied to the root group.\n- `theme`: Theme overrides for root, panel, handle, grip, and grip dots.\n- `ref`: Bindable root element reference.\n- `onResize`: Fires after a drag ends or keyboard resize commits.\n- `onLayoutChange`: Fires while layout changes.\n- `onLayoutCommit`: Fires after layout changes with `{ sizes, isUserInteraction }`.\n- `onCollapsedPanelsChange`: Fires when collapsed panel ids change.\n- `getHandleAriaLabel`: Returns accessible labels for separators.\n\n## Panel Items\n\n- `content`: Required snippet rendered inside the panel. Receives a `ResizablePanelPayload`\n  with `id`, `index`, `size`, `min`, `max`, `collapsed`, `disabled`, and `dragging`.\n- `id`: Stable panel id.\n- `defaultSize`: Initial size in percent.\n- `minSize`: Minimum size in percent. Defaults to `10`.\n- `maxSize`: Maximum size in percent. Defaults to `100`.\n- `collapsible`: Enables collapse for this panel. Panels are not collapsible by default.\n- `defaultCollapsed`: Applies the initial collapsed state once.\n- `collapsedSize`: Resting size while collapsed. Numbers are percentages; strings may use\n  `px` or `%` units, for example `'56px'` or `'8%'`. Defaults to `0`.\n- `collapseBreakpoint`: Drag threshold in percent at or below which the panel collapses. Defaults\n  to `collapsedSize`, which is `0` unless configured.\n- `disabled`: Prevents adjacent handles from resizing this panel.\n- `class`: Panel class.\n\n## Accessibility\n\nHandles render as focusable `role=\"separator\"` controls with `aria-orientation`,\n`aria-valuenow`, `aria-valuemin`, `aria-valuemax`, and `aria-controls`. Generated fallback\npanel ids are instance-scoped. Arrow keys resize the leading panel; Home and End move the handle to\nits minimum and maximum positions. Collapsed panels are marked `aria-hidden` and `inert` so hidden\ncontent is removed from keyboard navigation; clicking an adjacent separator expands a collapsed\npanel. Collapse and separator-triggered expansion use a short reduced-motion-aware layout\ntransition; normal pointer resizing remains direct.\n\n## Persistence\n\nSet `storageKey` to persist committed sizes and collapsed panel ids in `localStorage`. Persisted\nlayouts are restored only when the current panel id order matches the stored panel id order.\n\n## Notes\n\nUnlike shadcn/ui's React implementation, this component does not expose compound\n`ResizablePanelGroup`, `ResizablePanel`, and `ResizableHandle` components. Entasis keeps the\nconfiguration API from the svelte-pro source while adding bindable sizes and live layout callbacks.\n";
+    readonly 'scroll-area': "\n# ScrollArea Component\n\nThe ScrollArea component provides a native scroll viewport with custom overlay scrollbars.\n\n## Basic Usage\n\n```svelte\n<ScrollArea class=\"h-64\">\n\t{#each items as item}\n\t\t<div>{item}</div>\n\t{/each}\n</ScrollArea>\n```\n\n## Props\n\n### Core Props\n- **children**: Snippet - Content rendered inside the scrollable viewport\n- **ref**: HTMLElement | null (bindable) - Reference to the root scroll-area element\n- **viewportRef**: HTMLElement | null (bindable) - Reference to the native scrolling viewport, suitable for virtualizers and imperative scrolling\n- Native div attributes and attachments are forwarded to the root element\n- **label**: string (default: 'Scrollable content') - Accessible name for the native scrolling viewport\n- **viewportRole**: string (default: 'group') - Role of the scrolling viewport; set it to the role the surrounding structure expects (`rowgroup` inside a grid or treegrid, for instance)\n- **type**: 'hover' | 'always' | 'scroll' | 'auto' (default: 'hover') - Controls scrollbar visibility behavior\n- **delay**: number (default: 0) - Milliseconds before hover mode treats the area as hovered\n- **onscroll**: (event: Event) => void - Native scroll handler attached to the viewport\n\n### Behavior Props\n- **scrollOnEdges**: boolean (default: false) - Enables auto-scroll and up/down indicators when the pointer rests near the viewport edges\n- **scrollFade**: boolean (default: false) - Applies the shared `scroll-fade` utility to the scrollable viewport\n\n### Styling Props\n- **class**: string - Additional CSS classes for the root scroll area\n- **theme**: ScrollAreaThemeProps - Custom theme overrides\n\n## Examples\n\n### With Scroll Fade\n```svelte\n<ScrollArea class=\"h-64\" scrollFade>\n\t{#each items as item}\n\t\t<div>{item}</div>\n\t{/each}\n</ScrollArea>\n```\n\n### Always Visible Scrollbar\n```svelte\n<ScrollArea class=\"h-64\" type=\"always\">\n\tContent\n</ScrollArea>\n```\n\n### Edge Auto Scroll\n```svelte\n<ScrollArea class=\"h-64\" scrollOnEdges>\n\tContent\n</ScrollArea>\n```\n\n## Notes\n\n- The viewport is the native scroll container.\n- The `scrollFade` prop applies the utility to the viewport, not the outer wrapper.\n- Native browser scrollbars are hidden while custom scrollbar thumbs are rendered over the viewport.\n- Keyboard focus is applied only when the viewport overflows.\n\n## Theme Structure\n\nThe theme object contains:\n- **root**: Main scroll area container styles\n- **viewport**: Scrollable viewport container styles\n- **content**: Scrollable content wrapper styles\n- **scrollbar**: Vertical scrollbar track styles\n- **scrollbarX**: Horizontal scrollbar track styles\n- **scrollbarThumb**: Scrollbar thumb styles\n\n## Available Variants\n\n**viewport**:\n- scrollFade: 'none' | 'y' | 'x' - Adds the shared vertical or horizontal scroll-fade utility\n";
+    readonly separator: "\n# Separator Component\n\nThe Separator component is a visual divider that separates content in an interface. It supports both horizontal and vertical orientations, optional labels, customizable colors, and variable thickness.\n\n## Basic Usage\n\n```svelte\n<Separator />\n```\n\n## Props\n\n### Core Props\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - The direction of the separator\n- **color**: Colors (default: 'neutral') - The color of the separator line\n  - Available: primary, secondary, success, warning, danger, info, neutral\n- **thickness**: number (default: 1) - The thickness of the separator in pixels\n- **decorative**: boolean (default: false) - Whether the separator is purely decorative (affects ARIA role)\n\n### Content Slots\n- **children**: Snippet - Optional label text to display in the middle of the separator\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: SeparatorThemeProps - Custom theme overrides\n\n## Separator Structure\n\n```\n<Separator>\n\t<Label />  <!-- Optional: shown in the middle -->\n</Separator>\n```\n\n## Examples\n\n### Basic Horizontal Separator\n```svelte\n<Separator />\n```\n\n### Vertical Separator\n```svelte\n<div class=\"flex h-24\">\n\t<div>Left content</div>\n\t<Separator orientation=\"vertical\" />\n\t<div>Right content</div>\n</div>\n```\n\n### With Label\n```svelte\n<Separator>\n\t{#snippet children()}\n\t\tOR\n\t{/snippet}\n</Separator>\n```\n\n### With String Label\n```svelte\n<Separator children=\"OR\" />\n```\n\n### Different Colors\n```svelte\n<Separator color=\"primary\" />\n<Separator color=\"secondary\" />\n<Separator color=\"danger\" />\n<Separator color=\"success\" />\n```\n\n### Different Thicknesses\n```svelte\n<Separator thickness={1} />\n<Separator thickness={2} />\n<Separator thickness={4} />\n```\n\n### Thicker Separator\n```svelte\n<Separator thickness={3} color=\"primary\" />\n```\n\n### With Label and Color\n```svelte\n<Separator color=\"primary\">\n\t{#snippet children()}\n\t\tContinue\n\t{/snippet}\n</Separator>\n```\n\n### In a Form\n```svelte\n<form>\n\t<input type=\"email\" placeholder=\"Email\" />\n\t<input type=\"password\" placeholder=\"Password\" />\n\t<button type=\"submit\">Sign In</button>\n\t\n\t<Separator>\n\t\t{#snippet children()}\n\t\t\tOR\n\t\t{/snippet}\n\t</Separator>\n\t\n\t<button type=\"button\">Sign in with Google</button>\n</form>\n```\n\n### In a Menu\n```svelte\n<div class=\"menu\">\n\t<MenuOption title=\"Profile\" />\n\t<MenuOption title=\"Settings\" />\n\t\n\t<Separator />\n\t\n\t<MenuOption color=\"danger\" title=\"Log Out\" />\n</div>\n```\n\n### Vertical with Label\n```svelte\n<div class=\"flex items-center h-32\">\n\t<div>Section A</div>\n\t<Separator orientation=\"vertical\">\n\t\t{#snippet children()}\n\t\t\tOR\n\t\t{/snippet}\n\t</Separator>\n\t<div>Section B</div>\n</div>\n```\n\n### Custom Styling\n```svelte\n<Separator class=\"my-8\" />\n```\n\n### With Custom Theme\n```svelte\n<Separator \n\ttheme={{\n\t\troot: { base: 'opacity-50' }\n\t}}\n/>\n```\n\n### Decorative Separator\n```svelte\n<!-- Pure visual decoration, no semantic meaning -->\n<Separator decorative />\n```\n\n### Non-Decorative (Semantic)\n```svelte\n<!-- Has semantic meaning, announces to screen readers -->\n<Separator decorative={false} />\n```\n\n### Complex Layout\n```svelte\n<div class=\"space-y-4\">\n\t<section>\n\t\t<h2>Personal Information</h2>\n\t\t<p>Your personal details</p>\n\t</section>\n\t\n\t<Separator color=\"primary\" thickness={2}>\n\t\t{#snippet children()}\n\t\t\tAccount Settings\n\t\t{/snippet}\n\t</Separator>\n\t\n\t<section>\n\t\t<h2>Security</h2>\n\t\t<p>Password and authentication</p>\n\t</section>\n</div>\n```\n\n### With Attachments\n```svelte\n<script>\n\timport { spinnerOverlay } from 'entasis/spinner-overlay';\n\t\n\tlet loading = $state(false);\n</script>\n\n<Separator \n\t{@attach spinnerOverlay({ loading })}\n>\n\t{#snippet children()}\n\t\tLoading...\n\t{/snippet}\n</Separator>\n```\n\n## Accessibility\n\n- Uses proper ARIA attributes (`aria-orientation`)\n- Role is set to \"separator\" by default for semantic separators\n- Role is set to \"none\" when `decorative={true}` for purely visual separators\n- Label content is accessible to screen readers\n- Follows ARIA separator pattern guidelines\n\n## Notes\n\n- Default orientation is horizontal\n- Default color is 'neutral' for subtle separation\n- Thickness controls the border width of the line\n- Label automatically positions in the center with proper spacing\n- Vertical separators require a parent with defined height\n- Works well with MenuOption, Dialog, and other components\n- Can be used purely for decoration or as semantic content dividers\n\n## Theme Customization\n\nThe Separator component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main separator container styles\n- **label**: Separator label text styles\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all separators\n- Variants:\n  - orientation: 'horizontal' | 'vertical' - Layout direction and styling\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Border color\n\n**label**:\n- base: Base classes for label text\n- Variants:\n  - orientation: 'horizontal' | 'vertical' - Label styling based on separator orientation\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Separator \n  theme={{\n    root: {\n      base: 'opacity-60',\n      orientation: {\n        horizontal: 'my-4'\n      },\n      color: {\n        primary: 'before:border-primary/50 after:border-primary/50'\n      }\n    }\n  }}\n/>\n```\n\n**Color Customization**:\n```svelte\n<Separator \n  color=\"danger\"\n  theme={{\n    root: {\n      color: {\n        danger: 'before:border-red-500 after:border-red-500'\n      },\n      orientation: {\n        horizontal: 'my-6'\n      }\n    },\n    label: {\n      base: 'text-red-600 font-semibold'\n    }\n  }}\n>\n  {#snippet children()}\n    Warning\n  {/snippet}\n</Separator>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setSeparatorTheme } from '../components/Separator/index.ts';\n  \n  setSeparatorTheme({\n    root: {\n      base: 'transition-opacity',\n      orientation: {\n        horizontal: 'my-3',\n        vertical: 'mx-3'\n      },\n      color: {\n        neutral: 'before:border-neutral/30 after:border-neutral/30'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly stack: "\n# Stack\n\nStack arranges arbitrary content along one flex axis. Use the `orientation` prop to switch\nbetween horizontal and vertical layout, and `align` / `justify` for cross-axis and main-axis\nalignment.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { Stack } from '../components/Stack/index.ts';\n</script>\n```\n\n## Usage\n\n```svelte\n<Stack gap=\"xl\" padding=\"xl\">\n  <h2>Account</h2>\n  <Stack orientation=\"horizontal\" align=\"center\" gap=\"md\" wrap=\"wrap\">\n    <span>Profile</span>\n    <span>Security</span>\n  </Stack>\n</Stack>\n```\n\n## Responsive props\n\n`orientation`, `gap`, `align`, `justify` and `wrap` each take a plain value or a\nper-breakpoint record:\n\n```svelte\n<Stack orientation={{ md: 'horizontal' }} gap={{ xs: 'sm', lg: 'xl' }} align=\"center\">\n  <span>Filters</span>\n  <span>Results</span>\n</Stack>\n```\n\nThe breakpoints measure the stack's OWN width — `xs` base, `sm` 36rem, `md` 42rem,\n`lg` 56rem, `xl` 72rem — not the viewport's, so the same stack is `xs` in a narrow sidebar\nand `lg` full-bleed on the same page. The nearest defined key at or below the stack's width\nwins, and below the narrowest key the prop's default applies: `{ md: 'horizontal' }` is\nvertical at `xs` and `sm`. A prop falls back to its default only when it is `undefined`\nor `null`. A function form must be deterministic in its argument — it is called once per\nbreakpoint. There is no measurement and no JS: the five values ship as custom\nproperties and container queries pick one, so server-rendered markup is already laid out.\n\n## Props\n\n- `orientation`: `'horizontal' | 'vertical'` — flex direction (default: `'vertical'`).\n- `align`: cross-axis alignment — `start | center | end | stretch` (default: `'stretch'`).\n- `justify`: main-axis alignment — `start | center | end | between | around | evenly` (default: `'start'`).\n- `gap`, `padding`, `paddingInline`, and `paddingBlock` accept\n  `none | xs | sm | md | lg | xl`.\n- `paddingInline` and `paddingBlock` override `padding` on their axis.\n- `width`, `height`, `maxWidth`, and `minHeight` accept CSS strings or pixel numbers.\n- `wrap` accepts `nowrap | wrap | wrap-reverse`.\n- `scrollable` enables native `overflow: auto`.\n- `as` changes the semantic HTML element without changing layout behavior:\n  `div | span | section | article | aside | main | nav | header | footer | form | fieldset`.\n  Lists are not among them — the root always wraps its children in one layout `<div>`, which\n  `<ul>` and `<ol>` do not admit. Write the list yourself and put a stack inside an `<li>`.\n\n## Structure\n\nStack renders two elements: the root (`data-slot=\"stack\"`) is the box the host sizes and the\ncontainer the breakpoints are measured against — it takes `as`, `class`, `style`, the size\nprops, the padding and `scrollable` — and a single layout child (`data-slot=\"stack-layout\"`)\ncarries the flex line. The `inner` theme slot styles that child.\n\nStack forwards common semantic HTML attributes and Svelte attachments to the root element.\nPrefer parent-owned `gap` over child margins. The internal `micro` and `layout-*` tokens are\nreserved for component recipes and must not be used in generated interfaces.\n";
+    readonly 'app-shell': "\n# AppShell Component\n\nConvenience wrapper for the common application layout: Sidebar owns navigation,\nresponsive drawer behavior, the application wall, and variant surfaces, while PageShell\nowns the page header, document-flow content, footer, and route-level injection. AppShell\nforwards one shared variant to Sidebar and composes PageShell inside it.\nAppShell establishes a dynamic viewport-height minimum while letting the document own\nvertical scrolling. The desktop sidebar remains sticky independently of page content.\n\nUse AppShell when every route follows the same sidebar + page shell structure. Use\nSidebar and PageShell directly when the frame needs custom composition.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { AppShell, type AppShellSidebarProps } from 'entasis/app-shell';\n\timport { houseIcon } from 'entasis/icons/house';\n\n\tconst sidebar: AppShellSidebarProps = {\n\t\tcollapsible: 'icon',\n\t\trail: true,\n\t\titems: [\n\t\t\t{\n\t\t\t\tlabel: 'Workspace',\n\t\t\t\titems: [{ label: 'Home', href: '/', icon: houseIcon, isActive: true }]\n\t\t\t}\n\t\t]\n\t};\n</script>\n\n<AppShell variant=\"framed\" {sidebar} title=\"Dashboard\" subtitle=\"Operational overview\">\n\t{#snippet children({ sidebar })}\n\t\t<button type=\"button\" onclick={sidebar.toggle}>Toggle sidebar</button>\n\t{/snippet}\n</AppShell>\n```\n\n## Route-Level Injection\n\nAppShell renders PageShell internally, so child pages can use the PageShell context API:\n\n```svelte\n<script lang=\"ts\">\n\timport { setPageShell } from 'entasis/page-shell';\n\n\tsetPageShell({\n\t\ttitle: 'Insights',\n\t\tsubtitle: 'Revenue and retention',\n\t\tfooter: pageFooter\n\t});\n</script>\n\n{#snippet pageFooter()}\n\t<span>Synced just now</span>\n{/snippet}\n```\n\n## Props\n\n- **variant**: 'admin' | 'floating' | 'inset' | 'split' | 'framed' - Shared shell treatment forwarded to Sidebar and PageShell chrome. Admin chrome uses the Sidebar canvas surface; floating chrome uses detached raised, rounded surfaces. `framed` draws one rounded card (`rounded-xl` + `raised-1`, so the border and elevation come from the elevation engine) around both the sidebar and the page; the Sidebar's own `framed` variant paints its navigation well as `surface-recessed`, an inset of that card, and the page header sits on the page surface.\n- **sidebar**: AppShellSidebarProps - Sidebar props except `children`, `mode`, `frame`, and `variant`.\n  Configure Sidebar `size` and `density` independently inside this object.\n- **eyebrow**: string | Snippet<[PageShellApi]> - Small metadata above the PageShell title.\n- **breadcrumbs**: BreadcrumbItem[] | Snippet<[AppShellApi]> - PageShell breadcrumbs.\n- **breadcrumbsMaxItems**: number - Maximum visible breadcrumb items before ellipsis. Defaults to 4.\n- **back**: PageShellAction | Snippet<[AppShellApi]> - Back affordance before breadcrumbs or eyebrow.\n- **title**: string | Snippet<[PageShellApi]> - Default PageShell title.\n- **subtitle**: string | Snippet<[PageShellApi]> - Default PageShell subtitle.\n- **header**: Snippet<[PageShellApi]> - Custom PageShell header.\n- **headerActions**: Snippet<[AppShellApi]> | PageShellAction[] - Actions in the default PageShell header. Use an array for standard Button props, or a snippet when the action needs sidebar/page-shell API access.\n- **footer**: Snippet<[PageShellApi]> - PageShell footer.\n- **footerActions**: Snippet<[AppShellApi]> | PageShellAction[] - PageShell footer actions.\n- **children**: Snippet<[AppShellApi]> - Main content, with `pageShell` and `sidebar` APIs.\n- **contentPadding**: 'none' | 'small' | 'normal' | 'large' - PageShell content padding preset.\n- **contentWidth**: 'full' | 'narrow' | 'normal' | 'wide' | 'prose' - PageShell content width preset.\n- **pageShellTheme**: PageShellThemeProps - PageShell theme overrides.\n- **theme**: AppShellThemeProps - AppShell `root`, `frame` and `page` surface-token overrides. Sidebar owns the wall and shell geometry.\n\n## Accessibility\n\nAppShell delegates navigation semantics to Sidebar and page landmarks to PageShell.\nUse string `title` for the default `h1`, or preserve heading semantics when replacing\nthe PageShell header with a custom snippet.\n";
+    readonly 'page-shell': "\n# PageShell Component\n\nContent shell for pages rendered inside an application frame. PageShell provides a\nsticky header and footer, document-flow content, title/subtitle props, and a context\nAPI for child routes to inject shell content. Scrolling stays on the document by default,\nso browser navigation and scroll restoration keep their native behavior.\n\nUse PageShell inside `Sidebar.children` when Sidebar owns navigation and responsive\ndrawer behavior.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { PageShell, type PageShellAction } from 'entasis/page-shell';\n\timport { downloadSimpleIcon } from 'entasis/icons/downloadSimple';\n\n\tconst headerActions = [\n\t\t{\n\t\t\tcontent: 'Export',\n\t\t\tcolor: 'primary',\n\t\t\tprefix: downloadSimpleIcon\n\t\t}\n\t] satisfies PageShellAction[];\n</script>\n\n<PageShell title=\"Insights\" subtitle=\"Live account health\" {headerActions}>\n\t{#snippet footer()}\n\t\t<span>Updated just now</span>\n\t{/snippet}\n\n\t{#snippet children()}\n\t\t<section class=\"p-6\">Page content</section>\n\t{/snippet}\n</PageShell>\n```\n\n## Route-Level Injection\n\nChild pages can set header and footer content through context. Use `setPageShell`\nduring component initialization for automatic cleanup.\n\n```svelte\n<script lang=\"ts\">\n\timport { setPageShell } from 'entasis/page-shell';\n\n\tsetPageShell({\n\t\ttitle: 'Revenue',\n\t\tsubtitle: 'Segment breakdown',\n\t\theaderActions: revenueActions,\n\t\tfooter: revenueFooter\n\t});\n</script>\n\n{#snippet revenueActions()}\n\t<button type=\"button\">Refresh</button>\n{/snippet}\n\n{#snippet revenueFooter()}\n\t<span>Synced 2 minutes ago</span>\n{/snippet}\n```\n\n## Props\n\n- **eyebrow**: string | Snippet<[PageShellApi]> - Small metadata above the title. Ignored when breadcrumbs are set.\n- **breadcrumbs**: BreadcrumbItem[] | Snippet<[PageShellApi]> - Default-header breadcrumbs.\n- **breadcrumbsMaxItems**: number - Maximum visible breadcrumb items before ellipsis. Defaults to 4.\n- **back**: PageShellAction | Snippet<[PageShellApi]> - Back affordance before breadcrumbs or eyebrow.\n- **title**: string | Snippet<[PageShellApi]> - Default header title.\n- **subtitle**: string | Snippet<[PageShellApi]> - Default header subtitle.\n- **header**: Snippet<[PageShellApi]> - Custom sticky header content.\n- **headerActions**: Snippet<[PageShellApi]> | PageShellAction[] - Actions on the right side of the default header. Use an array for standard Button props, or a snippet when the action needs shell API access.\n- **footer**: Snippet<[PageShellApi]> - Custom sticky footer content.\n- **footerActions**: Snippet<[PageShellApi]> | PageShellAction[] - Actions on the right side of the sticky footer.\n\t- **children**: Snippet<[PageShellApi]> - Page content rendered in normal document flow.\n\t- **contentPadding**: 'none' | 'small' | 'normal' | 'large' - Padding applied to the content inner wrapper.\n\t- **contentWidth**: 'full' | 'narrow' | 'normal' | 'wide' | 'prose' - Max-width preset for the content inner wrapper.\n\t- **actionOverflow**: 'auto' | 'never' - Mobile overflow behavior for action arrays.\n\t- **mobileActionCount**: 0 | 1 | 2 - Number of action-array buttons kept inline on mobile.\n\t- **label**: string - Accessible name for the page's `main` landmark, applied as aria-label.\n\t- **theme**: PageShellThemeProps - Per-instance theme overrides.\n\n## API\n\n- **usePageShell()** returns the current PageShell API and throws when no PageShell exists.\n- **setPageShell(config)** registers a scoped config override and removes it on component destroy.\n- **api.set(config)** pushes a manual override and returns a cleanup function.\n- **api.setFooterActions(actions)** pushes scoped page footer actions.\n- **api.reset()** clears all scoped overrides.\n\n## Header Action Arrays\n\n```svelte\n<script lang=\"ts\">\n\timport { PageShell, type PageShellAction } from 'entasis/page-shell';\n\timport { arrowClockwiseIcon } from 'entasis/icons/arrowClockwise';\n\n\tconst headerActions = [\n\t\t{\n\t\t\tlabel: 'Refresh',\n\t\t\tsquared: true,\n\t\t\tvariant: 'outline',\n\t\t\tprefix: arrowClockwiseIcon\n\t\t},\n\t\t{\n\t\t\tcontent: 'Create report',\n\t\t\tcolor: 'primary'\n\t\t}\n\t] satisfies PageShellAction[];\n</script>\n\n<PageShell title=\"Reports\" {headerActions}>\n\t{#snippet children()}\n\t\tPage content\n\t{/snippet}\n</PageShell>\n```\n\n## Content Presets And Footer Actions\n\n```svelte\n<PageShell\n\teyebrow=\"Settings\"\n\ttitle=\"Billing profile\"\n\tcontentPadding=\"normal\"\n\tcontentWidth=\"narrow\"\n\tfooterActions={[\n\t\t{ content: 'Cancel', variant: 'outline' },\n\t\t{ content: 'Save changes', color: 'primary' }\n\t]}\n>\n\t{#snippet footer()}\n\t\t<span>2 unsaved changes</span>\n\t{/snippet}\n\n\t{#snippet children()}\n\t\t<form>...</form>\n\t{/snippet}\n</PageShell>\n```\n\n## Accessibility\n\nPageShell renders semantic `header`, `main`, and `footer` regions. The title is an\n`h1` when provided as a string. Custom snippets are responsible for preserving\nequivalent semantics when replacing the default header.\n";
+    readonly sidebar: "\n# Sidebar Component\n\nSidebar navigation with data-driven groups, icon collapse, mobile drawer behavior,\nrecursive tree groups, header/footer rows, search, actions, and snippet escape hatches.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { Sidebar, type SidebarGroup } from 'entasis/sidebar';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Sidebar, type SidebarGroup } from 'entasis/sidebar';\n\timport { houseIcon } from 'entasis/icons/house';\n\timport { gearIcon } from 'entasis/icons/gear';\n\n\tconst items: SidebarGroup[] = [\n\t\t{\n\t\t\tlabel: 'Workspace',\n\t\t\titems: [\n\t\t\t\t{ label: 'Dashboard', href: '/', icon: houseIcon, isActive: true },\n\t\t\t\t{ label: 'Settings', href: '/settings', icon: gearIcon }\n\t\t\t]\n\t\t}\n\t];\n</script>\n\n<Sidebar items={items}>\n\t{#snippet children({ toggle })}\n\t\t<header>\n\t\t\t<button type=\"button\" onclick={toggle}>Toggle</button>\n\t\t</header>\n\t\t<main>Page content</main>\n\t{/snippet}\n</Sidebar>\n```\n\n## AI-Safe Usage Contract\n\n1. Use `items` for normal navigation. Use `content` only when data-driven rows cannot express the layout.\n2. Use local Entasis icon snippets such as `houseIcon`, not Lucide component constructors.\n3. Use `MenuItem[]` from `entasis/menu` for `menu` and action dropdowns.\n4. Do not combine `menu` with `href` or `onclick` on the same row; use `action` for a trailing row menu.\n5. Keep `children`, `header`, `content`, `footer`, `banner`, and action snippets pure; they receive `SidebarApi`.\n6. Use `collapsible=\"icon\"` for icon rail behavior, `collapsible=\"offcanvas\"` for hidden desktop panels, and `collapsible=\"none\"` for fixed sidebars. Icon collapse automatically falls back to offcanvas when any data-driven row lacks an icon.\n7. Offcanvas sidebars reveal over the content from the screen edge by default when hidden; set `edgeReveal={false}` to disable that. A revealed hidden sidebar keeps its resize handle and dismisses through a small rectangular pointer tolerance.\n8. Set `keyboardShortcut={false}` when embedding Sidebar inside another shortcut-heavy surface.\n9. Sidebar owns navigation, resize mechanics, the lower application wall, and variant surface geometry. AppShell forwards its variant and composes PageShell inside that surface.\n10. Use `size` for typography, icon scale, and item height. Use `density` independently for section padding, gaps, and submenu spacing.\n11. Use `activityBar` for a persistent icon rail outside the panel (section switching, workspaces). Every item needs an `icon` and a `label`; the label is the accessible name and the tooltip. It is layout mode only: `mode=\"panel\"` renders the navigation panel alone.\n12. Use `expandOnHover` only with `collapsible=\"icon\"`. It is a temporary peek, not a toggle: the persisted collapsed state never changes, while the peeked panel renders with expanded semantics.\n\n## Data Model\n\n### SidebarGroup\n- **label**: string - Group label, hidden in icon-collapsed mode.\n- **items**: SidebarMenuEntry[] - Menu rows.\n- **tree**: SidebarTreeNode[] - Recursive tree rows instead of menu items.\n- **action**: SidebarMenuActionDescriptor | SidebarMenuActionDescriptor[] | Snippet<[SidebarApi]> - Top-right group actions. Pass an array to pin several affordances (a `+` and a drag handle) to one group header; each renders as its own icon-only ghost button.\n- **collapsible**: boolean - Makes the group label a toggle.\n- **defaultOpen**: boolean - Initial collapsible group state.\n- **separator**: boolean - Divider before the group.\n\n### SidebarMenuEntry\n- **label**: string - Visible row label.\n- **icon**: SidebarIcon - Entasis icon snippet or string.\n- **iconColor**: Colors - Role tint for the leading icon, applied through `data-color`.\n- **iconVariant**: 'bare' | 'tile' - Leading icon treatment. `tile` paints a rounded square (`bg-color-muted text-color-muted-readable`) around the glyph, so per-project colour chips come from the role scale instead of hand-built markup.\n- **href**: string - Render as an anchor. Mutually exclusive with menu.\n- **onclick**: (event: MouseEvent) => void - Native click handler for button or anchor rows. Mutually exclusive with menu.\n- **isActive**: boolean - Adds active styling and `aria-current=\"page\"`.\n- **disabled**: boolean - Disables button rows and marks anchor rows disabled.\n- **badge**: string | number - Trailing count/status, hidden in icon mode.\n- **tooltip**: string - Entasis Tooltip content in icon mode. Defaults to label.\n- **items**: SidebarMenuSubEntry[] - Inline nested menu.\n- **collapsible**: boolean - Set false for an always-open submenu.\n- **defaultOpen**: boolean - Initial nested menu state.\n- **menu**: MenuItem[] - Popup menu opened from the full row. Mutually exclusive with href/onclick.\n- **action**: SidebarMenuActionDescriptor | Snippet<[SidebarApi]> - Hover/focus trailing action.\n\n### SidebarActivityBar\nIcon rail pinned to the outer edge of the sidebar, visible in every display state.\n- **items**: SidebarActivityBarItem[] - Items rendered from the top.\n- **footerItems**: SidebarActivityBarItem[] - Items pinned to the end of the column.\n- **header** / **footer**: Snippet - Custom content before the first item and after the pinned ones.\n- **width**: string (default '3rem') - Column thickness, published as `--sidebar-width-activity`.\n- **label**: string - Accessible name for the column landmark. Set it whenever the panel also renders navigation.\n- **onSelect**: ({ item, index }) => void - Fires after an item is activated. `index` counts `items` then `footerItems`.\n\n### SidebarActivityBarItem\n- **icon**: SidebarIcon (required) - Icon rendered in the square.\n- **label**: string (required) - Accessible name and default tooltip; the square shows no text.\n- **id**: string - Stable render key.\n- **href** / **target** / **rel** - Render an anchor instead of a button.\n- **onclick**: (event: MouseEvent) => void - Native click handler.\n- **isActive**: boolean - Adds active styling and `aria-current=\"page\"`.\n- **badge**: string | number | Snippet - Corner badge pinned to the outer top corner. An empty string renders a bare dot. A string or number badge joins the accessible name (`\"Alerts, 3\"`); a dot and a Snippet badge are decorative, so put their meaning in `label`.\n- **disabled**: boolean - Blocks activation and skips the item during keyboard navigation.\n- **tooltip**: string | false - Tooltip override; `false` suppresses it.\n\n### SidebarMenuButtonItem\nUse for `headerButton`, `footerButton`, or direct `<SidebarMenuButton />` rows.\n- **icon**: SidebarIcon - Leading logo/icon.\n- **avatar**: { src?: string; alt?: string; fallback?: string } - Leading avatar.\n- **variant**: 'default' | 'brand' | 'compact'.\n- **title**: string - Primary text.\n- **subtitle**: string - Secondary text.\n- **trailing**: SidebarIcon | false | SidebarMenuActionDescriptor - Trailing content. An icon is decorative; an action descriptor (`{ icon, label, onclick }`, the same shape as a group action) renders its own icon-only ghost button beside the row, so a workspace card can carry its own collapse control without a custom `header` snippet. Descriptor handlers are `onclick(event, api)`, so `api.toggle()` is reachable.\n- **href** / **onclick** / **menu** - Choose link, button, or popup behavior. `onclick(event, api)` receives the SidebarApi beside the event, so `api.toggle()` is reachable from the row itself.\n- **menuIconClass**: string - Class override for option icons inside the popup menu.\n\n## Props\n\n### State\n- **open**: boolean (bindable, default true) - Desktop expanded state.\n- **defaultOpen**: boolean (default true) - Initial desktop state when `open` is omitted.\n- **onOpenChange**: (open: boolean) => void - Called once for a library-originated desktop state change. Repeated requests and parent prop updates stay silent.\n- **onDisplayStateChange**: (state: SidebarDisplayState) => void - Called once for a library-originated semantic display-state change.\n- **api.displayState**: 'expanded' | 'collapsed' | 'hidden' - Semantic desktop state; hidden means closed offcanvas. A hover peek does not change it.\n- **api.isPeeking**: boolean - True while a hover peek renders the collapsed panel at full width. Read it alongside `displayState` when a snippet hides content in icon mode.\n- **keyboardShortcut**: string | false (default 'b') - Ctrl/Cmd shortcut key.\n\n### Layout\n- **side**: 'left' | 'right' - Desktop and mobile side.\n- **variant**: 'admin' | 'floating' | 'inset' | 'split' | 'framed' - Sidebar geometry. `framed` is the admin geometry for a sidebar hosted inside a raised card (AppShell variant framed), with a `surface-recessed` well. `admin` renders the conventional full-height navigation column; `inset` integrates navigation into the lower wall with an inset content surface; `split` renders detached sidebar and content surfaces.\n- **size**: 'small' | 'normal' | 'large' (default 'normal') - Typography, icon, avatar, badge, leading-media, item-height, and search-height scale.\n- **activeVariant**: 'soft' | 'outline' | 'solid' (default 'soft') - How active rows are painted. `soft` is the shared selected recipe (`selectedSoft`: `bg-selected-muted text-selected-muted-readable`), `solid` its loud counterpart (`selectedSolid`: `bg-selected text-selected-contrast`), `outline` a bordered surface card (`bg-surface border border-neutral-muted text-neutral`) that reads as a raised card on a tinted well. Each row carries the choice as `data-active-variant`, so no descendant selector is needed to restyle selection.\n- **density**: 'compact' | 'normal' | 'comfortable' (default 'normal') - Section padding, group padding, gaps, horizontal inset, and submenu spacing.\n- **collapsible**: 'offcanvas' | 'icon' | 'none' - Collapse behavior. Icon mode requires icons on every data-driven row and otherwise resolves to offcanvas.\n- **collapseIcon**: DisclosureIndicator — 'chevron' | 'plus-minus' | 'none' (default 'chevron') - Disclosure indicator drawn on collapsible menu rows. 'none' renders no indicator.\n- **mode**: 'layout' | 'panel' - Full resizing layout or only the visible navigation panel.\n- **frame**: 'viewport' | 'contained' - Standalone Sidebar positioning. Viewport mode uses Theme's dynamic window-height token; contained mode fills a positioned parent.\n- **width**: string - Expanded width.\n- **widthIcon**: string - Icon-collapsed width.\n- **widthMobile**: string - Mobile drawer width.\n- **rail**: boolean | 'line' | 'thumb' - Edge toggle rail. `true` keeps the thin line style; `thumb` renders a short visible handle with the same full-height hitbox. The appearance is preserved when the rail shares the resize control.\n- **activityBar**: SidebarActivityBar - Icon rail pinned outside the panel, in layout mode only (`mode=\"panel\"` renders the panel alone and ignores it). It never slides off screen: only the panel takes the offcanvas offset, and the reserved layout column is the panel width plus the rail width. On mobile it renders as a horizontal row at the top of the drawer.\n- **expandOnHover**: boolean (default false) - With `collapsible=\"icon\"`, hovering or focusing into the collapsed panel expands it to `width` over the page (`data-peek=\"true\"`) while the reserved column stays at `widthIcon`, so page content does not reflow. The persisted collapsed state is untouched, and the peeked panel renders exactly like an expanded one: group headers, badges, search, inline submenus, and inline tree branches all come back, and the rail or resize handle travels to its inner edge.\n- **edgeReveal**: boolean (default true) - Pointer/focus edge preview for hidden offcanvas sidebars. Hover reveal overlays content, remains resizable when configured, and re-hides after the pointer leaves its small rectangular tolerance. Dragging the sidebar closed suppresses immediate hover reopening until the pointer leaves the edge trigger; toggle/click opens persistently.\n- **resizable**: boolean | SidebarResizableOptions - Enables pointer and keyboard resizing while expanded, icon-collapsed, or temporarily edge-revealed. By default, collapse requires dragging 75% of `minWidth` beyond the minimum; override `collapseThreshold` for a custom boundary. Use `storageKey` to restore and persist the expanded width across sessions.\n  - `onWidthChange({ width, isUserInteraction })` reports every expanded-width change with one named payload: continuously while the user resizes (`isUserInteraction: true`) and once when a stored width is restored (`isUserInteraction: false`).\n\n### Content\n- **items**: SidebarGroup[] - Data-driven body navigation.\n- **headerButton** / **footerButton**: SidebarMenuButtonItem - Sticky large rows.\n- **search**: SidebarSearch - Header search input; use its native `oninput` handler.\n- **headerMenu** / **footerMenu**: SidebarMenuEntry[] - Sticky quick menus.\n- Menu entries and nested entries accept `size: 'small' | 'normal' | 'large'` for row geometry.\n- **header**, **content**, **footer**, **children**, **banner**: Snippet<[SidebarApi]> - Escape hatches. The `header` snippet renders **first** in the header region, above `headerButton`, `search` and `headerMenu`.\n\n### Styling\n- **class**: string - Classes applied to the Sidebar root.\n- **theme**: SidebarThemeProps - Semantic part overrides such as `panel`, `header`, `nav`, `footer`, menu, search, rail, and mobile drawer parts.\n\n## Motion\n\n- **motion** theme slot: the y-axis slide shared by collapsible groups, inline submenus, and\n  tree branches. Takes `in` / `out` slide params plus a `duration` / `easing` motion token.\n- Ladder: `<Theme components={{ sidebar: { motion } }}>` → `setSidebarTheme({ motion })` →\n  `theme.motion`. Reduced motion collapses it to 0.\n\n## Accessibility\n\n- The body navigation renders inside a named `<nav>` landmark (`data-sidebar=\"nav\"`), so assistive tech can jump straight to it and tell it apart from the activity bar's own landmark.\n- Active links set `aria-current=\"page\"`.\n- Collapsible rows and groups set `aria-expanded`.\n- Disabled buttons use `disabled`; disabled links omit `href`, use `aria-disabled` and `tabindex=-1`, and block activation.\n- Mobile drawer includes a backdrop button labelled \"Close Sidebar\".\n- Icon-collapsed rows keep their labels mounted and visually fade them, preserving accessible names and stable icon geometry.\n- Search, group controls, actions, and nested rows become inert before collapse can remove or hide them; focus returns to the owning visible row.\n- Nested groups, tree branches, and inline submenus use reversible height transitions for open, close, and sidebar-collapse changes.\n- Tree roots use menu-row styling and nested tree nodes use submenu-row styling. In desktop icon mode, root folders open a PopupMenu and descendants remain navigable through recursive Menu submenu popovers; root leaves retain direct navigation and tooltips.\n- When `rail` and `resizable` are both enabled, one edge control owns click-to-toggle, drag resize, and keyboard resize without overlapping hitboxes.\n- Hidden offcanvas sidebars keep that combined edge control while temporarily revealed. Resizing does not pin the sidebar open; leaving the panel, trigger, and handle tolerance re-hides it without discarding the configured width.\n- Both peeks (edge reveal and `expandOnHover`) stay open while focus is inside the panel or while an overlay opened from inside it is open, including nested submenus. They release about 120ms after the pointer, focus, and every such overlay are gone.\n- The activity bar is its own `<nav>` landmark with a `<ul>` of items, a roving tabindex, and ArrowUp/ArrowDown/Home/End navigation that loops and skips disabled items. Tab lands on the `isActive` item. Each square takes its accessible name from `label`, with a string or number `badge` appended to it, and shows `label` as a tooltip on hover and focus.\n- A hidden offcanvas panel is `inert`, so Tab never lands in a panel parked off screen; a peek makes it interactive again.\n\n## Notes\n\n- Dropdown menus use Entasis `PopupMenu` and `MenuItem[]`.\n- The component uses semantic Entasis tokens. Do not add shadcn `sidebar-*` color tokens.\n- Snippet icons from `entasis/icons/*` are the preferred icon format.\n";
+    readonly button: "\n# Button Component\n\nThe Button component is a flexible and customizable button element that supports various variants, sizes, colors, and interactive states.\n\n## Basic Usage\n\n```svelte\n<Button>Click me</Button>\n<Button variant=\"outline\">Outline Button</Button>\n<Button color=\"primary\" size=\"large\">Large Primary Button</Button>\n```\n\n## Props\n\n### Core Props\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Muted color background\n  - ghost: Transparent background with a transient state layer on hover and press\n  - link: Text-only styling with underline on hover\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the button\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 24px height, smaller padding and text\n  - normal: 32px height, standard padding\n  - large: 36px height, larger padding and text\n\n### Layout Props\n- **fullWidth**: boolean (default: false) - Makes button take full width of container\n- **squared**: boolean - Makes button square (aspect-ratio 1:1), auto-determined if only prefix/suffix is provided\n- **disabled**: boolean (default: false) - Disables button interaction\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and disables interaction\n\n### State Props\nDescribe the meaning; the Button writes the ARIA. Never pass an aria-* attribute to a Button.\n- **pressed**: boolean - Toggle state of a button that stays on or off (a bold button in a toolbar, a \"show password\" eye). Rendered as aria-pressed\n- **selected**: boolean - Chosen state of a button acting as one option among several (a tab, a listbox option). Rendered as aria-selected\n- **expanded**: boolean - Whether the surface this button opens is showing. Rendered as aria-expanded. A entasis surface (Popover, PopupMenu, Select, Combobox) sets this on its own trigger, so pass it only for a surface you open yourself\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true - What the surface this button opens contains. Rendered as aria-haspopup, and likewise set by a entasis surface on its own trigger\n\n### Link Props\n- **href**: string - Makes button render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Event Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Content Props (Slots)\n- **children**: Snippet - Main button content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically icons)\n\n### Advanced Props\n- **label**: string - Accessible label applied as aria-label on the root element (required for icon-only buttons)\n- **ref**: HTMLElement - Reference to the button element\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\nThe button follows this DOM structure:\n```\n<Button>\n\t<Prefix />    <!-- Optional prefix content -->\n\t<Children />  <!-- Main button content -->\n\t<Suffix />    <!-- Optional suffix content -->\n</Button>\n```\n\n## Examples\n\n### Basic Buttons\n```svelte\n<Button>Default Button</Button>\n<Button variant=\"outline\" color=\"primary\">Primary Outline</Button>\n<Button variant=\"soft\" color=\"danger\">Soft Danger</Button>\n<Button variant=\"ghost\">Ghost Button</Button>\n<Button variant=\"link\">Link Button</Button>\n```\n\n### With Icons\n```svelte\n<Button>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n\tAdd Item\n</Button>\n\n<Button squared>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n</Button>\n```\n\n### Interactive States\n```svelte\n<Button loading>Loading...</Button>\n<Button disabled>Disabled</Button>\n<Button fullWidth>Full Width Button</Button>\n```\n\n### As Link\n```svelte\n<Button href=\"/dashboard\" target=\"_blank\">Go to Dashboard</Button>\n```\n\n### With Event Handlers\n```svelte\n<script lang=\"ts\">\n\tfunction handleClick(event: MouseEvent) {\n\t\tconsole.log('Clicked:', event.currentTarget);\n\t}\n</script>\n\n<Button onclick={handleClick}>\n\tClick\n</Button>\n```\n\n### Custom Styling\n```svelte\n<Button class=\"lift-4 border-2\" color=\"primary\" variant=\"outline\">\n\tCustom Styled\n</Button>\n```\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles (button/link)\n- Supports keyboard navigation\n- Disabled state prevents interaction\n- Loading state provides visual feedback\n\n## Notes\n\n- When `href` is provided, renders as `<a>` tag, otherwise `<button>`\n- `squared` is automatically determined when only prefix or suffix is provided without children\n- All event handlers respect disabled state\n- Icon sizing is automatically adjusted based on button size\n\n## Theme Customization\n\nThe Button component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button container styles\n- **prefix**: Styles for prefix content (icons before text)\n- **suffix**: Styles for suffix content (icons after text)\n\n### Theme Type Definition\n\n```typescript\nimport type { ButtonThemeProps } from 'entasis/button';\n\n// Example theme customization\nconst customTheme: ButtonThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'custom-small-classes',\n      normal: 'custom-normal-classes',\n      large: 'custom-large-classes'\n    },\n    color: {\n      primary: 'bg-blue-500 text-white',\n      danger: 'bg-red-500 text-white'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast',\n      outline: 'border-2 border-color'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-3 h-3',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all buttons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, text size, and height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Visual style variant\n  - loading: boolean - Loading state styling\n  - disabled: boolean - Disabled state styling\n  - squared: boolean - Square button styling\n  - fullWidth: boolean - Full width styling\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Button \n  theme={{\n    root: {\n      base: 'rounded-full lift-4',\n      size: {\n        large: 'px-8 py-4 text-xl'\n      }\n    }\n  }}\n>\n  Custom Styled Button\n</Button>\n```\n\n**Color Variant Customization**:\n```svelte\n<Button \n  color=\"primary\"\n  theme={{\n    root: {\n      color: {\n        primary: 'state-layer bg-gradient-to-r from-blue-500 to-purple-500'\n      }\n    }\n  }}\n>\n  Gradient Button\n</Button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonTheme } from '../components/Button/index.ts';\n  \n  setButtonTheme({\n    root: {\n      variant: {\n        solid: 'state-layer bg-color text-color-contrast lift-3 hover:lift-4 transition-shadow',\n        outline: 'state-layer border-2 border-color'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'button-group': "\n# ButtonGroup Component\n\nThe ButtonGroup component displays a collection of related buttons as a cohesive group with shared styling properties.\n\n## Basic Usage\n\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'First' },\n\t\t{ children: 'Second' },\n\t\t{ children: 'Third' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: Array<ButtonProps> (required) - Array of button configurations\n  - Each button can have all standard Button component props\n\n### Shared Button Props\n- **size**: 'small' | 'normal' | 'large' - Applied to all buttons in the group\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Shared color for all buttons\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Shared variant for all buttons\n- **disabled**: boolean - Disables all buttons in the group\n\n### Styling Props\n- **class**: string - Additional CSS classes for the group container\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<ButtonGroup>\n\t<Button />\n\t<Button />\n\t<Button />\n</ButtonGroup>\n```\n\n## Examples\n\n### Basic Button Group\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'Left' },\n\t\t{ children: 'Center' },\n\t\t{ children: 'Right' }\n\t]}\n/>\n```\n\n### With Shared Styling\n```svelte\n<ButtonGroup \n\tsize=\"large\"\n\tcolor=\"primary\"\n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' },\n\t\t{ children: 'Option 3' }\n\t]}\n/>\n```\n\n### With Icons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textAlignLeftIcon } from 'entasis/icons/textAlignLeft';\n\timport { textAlignCenterIcon } from 'entasis/icons/textAlignCenter';\n\timport { textAlignRightIcon } from 'entasis/icons/textAlignRight';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tprefix: textAlignLeftIcon,\n\t\t\tchildren: 'Left' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignCenterIcon,\n\t\t\tchildren: 'Center' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignRightIcon,\n\t\t\tchildren: 'Right' \n\t\t}\n\t]}\n/>\n```\n\n### With Individual Click Handlers\n```svelte\n<script>\n\tfunction handleOption(option) {\n\t\tconsole.log(`Selected: ${option}`);\n\t}\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Save',\n\t\t\tonclick: () => handleOption('save')\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Cancel',\n\t\t\tonclick: () => handleOption('cancel')\n\t\t}\n\t]}\n/>\n```\n\n### Disabled Group\n```svelte\n<ButtonGroup \n\tdisabled\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' }\n\t]}\n/>\n```\n\n### Icon Only Buttons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { textUnderlineIcon } from 'entasis/icons/textUnderline';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textBIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textItalicIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textUnderlineIcon\n\t\t}\n\t]}\n/>\n```\n\n### Mixed Button States\n```svelte\n<ButtonGroup \n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Active', color: 'primary' },\n\t\t{ children: 'Default', color: 'neutral' },\n\t\t{ children: 'Disabled', disabled: true }\n\t]}\n/>\n```\n\n### Segmented Control\n```svelte\n<script>\n\tlet selected = $state('week');\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Day',\n\t\t\tvariant: selected === 'day' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'day'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Week',\n\t\t\tvariant: selected === 'week' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'week'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Month',\n\t\t\tvariant: selected === 'month' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'month'\n\t\t}\n\t]}\n/>\n```\n\n## Styling\n\nButtonGroup automatically:\n- Removes border-radius from middle buttons\n- Adjusts borders to prevent double borders\n- Creates a cohesive, connected appearance\n- Maintains consistent spacing\n\n## Accessibility\n\n- Each button maintains full keyboard accessibility\n- Focus styles are preserved\n- Disabled state cascades properly\n- Screen readers announce each button individually\n\n## Notes\n\n- Individual button props override shared props\n- Buttons are rendered in the order provided\n- The group container can be styled with the `class` prop\n- All Button component features are supported for individual buttons\n\n## Theme Customization\n\nThe ButtonGroup component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button group container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for button group container (handles border radius and border connections between buttons)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Custom Group Styling**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center gap-0 border-2 border-primary rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonGroupTheme } from '../components/ButtonGroup/index.ts';\n  \n  setButtonGroupTheme({\n    root: {\n      base: 'flex items-center first-child:rounded-r-none last-child:rounded-l-none'\n    }\n  });\n</script>\n```\n";
+    readonly 'segmented-control': "\n# SegmentedControl\n\nA compact single-selection input for switching between a small set of mutually exclusive modes. It uses radiogroup/radio semantics and an animated indicator that slides and resizes to the selected item.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { SegmentedControl } from '../components/SegmentedControl/index.ts';\n  import { gridFourIcon } from 'entasis/icons/gridFour';\n  import { listIcon } from 'entasis/icons/list';\n\n  const items = [\n    { value: 'grid', label: 'Grid', icon: gridFourIcon },\n    { value: 'list', label: 'List', icon: listIcon }\n  ] as const;\n\n  let value = $state<(typeof items)[number]['value']>('grid');\n</script>\n\n<SegmentedControl {items} bind:value />\n```\n\n## Props\n\n- **items**: `readonly SegmentedControlItem[]` — required options with unique `value` fields.\n- **value**: `string` — bindable selected value; defaults to the first enabled item.\n- **defaultValue**: `string` — initial selected value when value is omitted.\n- **onValueChange**: `(value: string) => void` — called once after user interaction changes the value.\n- **item**: `Snippet<[SegmentedControlItem]>` — replaces the default item renderer.\n- **size**: `'small' | 'normal' | 'large'` — defaults to `'normal'`.\n- **color**: semantic color — controls the selected pill and focus ring; defaults to `'neutral'`.\n- **variant**: `'normal' | 'pill'` — controls corner radius; defaults to the moderately rounded `'normal'` shape.\n- **disabled**: `boolean` — disables the full control.\n- **label**: `string` — accessible name for the radiogroup; defaults to the catalog's \"Segmented control\".\n- **class**: additional root classes.\n- **theme**: component theme overrides.\n\n## Item shape\n\n```ts\ntype SegmentedControlItem<Value extends string = string> = {\n  value: Value;\n  label?: string | Snippet;\n  icon?: string | Snippet;\n  disabled?: boolean;\n};\n```\n\nThe default renderer displays `icon`, then `label`. `label` is also the segment's accessible name: a string is painted and spoken, a snippet names the segment through its own content, and an icon-only segment (no `label`) falls back to its `value`.\n\n## Custom item renderer\n\n```svelte\n<SegmentedControl {items} bind:value>\n  {#snippet item(option)}\n    <span>{option.label}</span>\n    <span>{option.count}</span>\n  {/snippet}\n</SegmentedControl>\n```\n\nExtra fields on item objects remain available to the snippet through generic inference.\n\n## Shapes\n\n`variant=\"normal\"` uses a moderately rounded track and segments. Use `variant=\"pill\"` for the fully rounded stadium shape.\n\n```svelte\n<SegmentedControl {items} bind:value />\n<SegmentedControl {items} bind:value variant=\"pill\" />\n```\n\n## Keyboard behavior\n\n- Tab enters on the selected item, or the first enabled item when no value matches.\n- Arrow Left/Right moves and selects, wrapping at the ends.\n- Home/End selects the first/last enabled item.\n- Disabled items are skipped.\n\nEach item has an invisible, size-aware pointer target that extends beyond the visual track: 36px for small, 44px for normal, and 48px for large. Adjacent targets meet at the midpoint of the configured gap instead of overlapping.\n\nUse SegmentedControl for mode or value selection. Use Tabbar when changing navigational views with tab semantics.\n";
+    readonly 'toggle-button': "\n# ToggleButton Component\n\nThe ToggleButton component is a two-state button that can be toggled on and off, useful for binary settings and selections.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet isActive = $state(false);\n</script>\n\n<ToggleButton bind:value={isActive}>\n\tToggle Me\n</ToggleButton>\n```\n\n## Props\n\n### Core Props\n- **value**: boolean (bindable) - Toggle state\n- **defaultValue**: boolean (default: false) - Initial state when value is omitted\n- **label**: string - Accessible name for icon-only buttons\n- **type**: 'button' | 'submit' | 'reset' (default: 'button') - Native button type. The default prevents accidental form submission.\n- **role**: 'radio' - Exposes the pressed state as `aria-checked` instead of `aria-pressed`. Set by ToggleButtonGroup in `type=\"single\"` mode; rarely needed on a standalone button\n\n### Visual Props\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n- **variant**: 'outline' | 'ghost' (default: 'ghost') — a Button subset. Resting outline uses the same border and surface recipe as Button; the pressed state adds a muted fill.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n\n### State Props\n- **disabled**: boolean (default: false) - Disables interaction\n\n### Event Props\n- **onValueChange**: (value: boolean) => void - Called once when toggle state changes\n\n### Content Slots\n- **children**: Snippet - Button content\n- **prefix**: Snippet - Content before text (typically icons)\n- **suffix**: Snippet - Content after text (typically icons)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Examples\n\n### Basic Toggle\n```svelte\n<script>\n\tlet value = $state(false);\n</script>\n\n<ToggleButton bind:value>\n\t{value ? 'On' : 'Off'}\n</ToggleButton>\n```\n\n### With Icon\n```svelte\n<script lang=\"ts\">\n\timport { textBIcon } from 'entasis/icons/textB';\n\n\tlet isBold = $state(false);\n</script>\n\n<ToggleButton bind:value={isBold}>\n\t{#snippet prefix()}\n\t\t{@render textBIcon()}\n\t{/snippet}\n\tBold\n</ToggleButton>\n```\n\n### Different Variants\n```svelte\n<ToggleButton variant=\"ghost\" bind:value>Ghost</ToggleButton>\n<ToggleButton variant=\"outline\" bind:value>Outline</ToggleButton>\n```\n\n### Different Colors\n```svelte\n<ToggleButton color=\"primary\" bind:value>Primary</ToggleButton>\n<ToggleButton color=\"danger\" bind:value>Danger</ToggleButton>\n<ToggleButton color=\"success\" bind:value>Success</ToggleButton>\n```\n\n### Toolbar Buttons\n```svelte\n<script lang=\"ts\">\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { textUnderlineIcon } from 'entasis/icons/textUnderline';\n\n\tlet format = $state({ bold: false, italic: false, underline: false });\n</script>\n\n<div class=\"flex gap-1\">\n\t<ToggleButton bind:value={format.bold}>\n\t\t{#snippet prefix()}\n\t\t\t{@render textBIcon()}\n\t\t{/snippet}\n\t</ToggleButton>\n\t<ToggleButton bind:value={format.italic}>\n\t\t{#snippet prefix()}\n\t\t\t{@render textItalicIcon()}\n\t\t{/snippet}\n\t</ToggleButton>\n\t<ToggleButton bind:value={format.underline}>\n\t\t{#snippet prefix()}\n\t\t\t{@render textUnderlineIcon()}\n\t\t{/snippet}\n\t</ToggleButton>\n</div>\n```\n\n### With Change Handler\n```svelte\n<script>\n\tfunction handleChange(value) {\n\t\tconsole.log('Toggled:', value);\n\t}\n</script>\n\n<ToggleButton onValueChange={handleChange}>\n\tNotify Me\n</ToggleButton>\n```\n\n### Disabled State\n```svelte\n<ToggleButton disabled value>Disabled On</ToggleButton>\n<ToggleButton disabled>Disabled Off</ToggleButton>\n```\n\n## Accessibility\n\n- Exposes the checked state through `aria-pressed` (or `aria-checked` when `role=\"radio\"`)\n- Renders `type=\"button\"` unless explicitly overridden\n- Keyboard accessible (Space/Enter to toggle)\n- Focus states for keyboard navigation\n- Screen reader friendly\n\n## Notes\n\n- Maintains toggle state between interactions\n- Visual feedback for checked/unchecked states\n- Can be used standalone or in ToggleButtonGroup\n- Supports all standard button features\n\n## Theme Customization\n\nThe ToggleButton component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button element styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for button element\n- Variants:\n  - checked: boolean - Checked/toggled state styling\n  - disabled: boolean - Disabled state styling\n  - color: Color variants\n  - variant: 'outline' | 'ghost' - Button variant\n  - squared: boolean - Square button styling\n  - size: 'small' | 'normal' | 'large' - Button size\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - checked: boolean - Checked state styling\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - checked: boolean - Checked state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<ToggleButton \n  bind:value\n  theme={{\n    root: {\n      base: 'rounded-md transition-all',\n      checked: {\n        true: 'bg-primary text-white',\n        false: 'bg-gray-200'\n      },\n      size: {\n        normal: 'px-4 py-2'\n      }\n    }\n  }}\n>\n  Toggle\n</ToggleButton>\n```\n\n**Custom Checked State**:\n```svelte\n<script lang=\"ts\">\n  import { checkIcon } from 'entasis/icons/check';\n</script>\n\n<ToggleButton \n  bind:value\n  variant=\"outline\"\n  theme={{\n    root: {\n      variant: {\n        outline: 'border-2'\n      },\n      checked: {\n        true: 'border-primary bg-primary/10 text-primary',\n        false: 'border-gray-300'\n      }\n    },\n    prefix: {\n      checked: {\n        true: 'text-primary'\n      }\n    }\n  }}\n>\n  {#snippet prefix()}\n    {@render checkIcon()}\n  {/snippet}\n  Toggle\n</ToggleButton>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setToggleButtonTheme } from '../components/ToggleButton/index.ts';\n  \n  setToggleButtonTheme({\n    root: {\n      base: 'transition-all duration-100',\n      checked: {\n        true: 'bg-primary text-white',\n        false: 'bg-gray-200'\n      },\n      size: {\n        normal: 'px-4 py-2 h-8'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'max-w-6 max-h-6'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'toggle-button-group': "\n# ToggleButtonGroup Component\n\nToggleButtonGroup renders an ordered list of ToggleButton items and exposes the pressed values as one bindable value.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet formatting = $state(['bold']);\n</script>\n\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\tcolor=\"neutral\"\n\titems={[\n\t\t{ value: 'bold', children: 'Bold' },\n\t\t{ value: 'italic', children: 'Italic' },\n\t\t{ value: 'underline', children: 'Underline' }\n\t]}\n/>\n```\n\n## Props\n\n- **items**: ToggleButtonGroupItem[] (required) - Ordered button configurations. Each item carries a unique `value` plus ToggleButton props (no `variant`, `color`, or `size`; pressed state lives on the group value).\n- **label**: string (required) - Accessible name for the group.\n- **value**: string[] | string | undefined (bindable) - The only pressed-state source. `type=\"multiple\"` holds every pressed value as an array; `type=\"single\"` holds the checked value.\n- **defaultValue**: same shape as value - Initial pressed state when value is omitted.\n- **onValueChange**: (value) => void - Called once with the updated group value after a toggle.\n- **size**: 'small' | 'normal' | 'large' - Applied to every item.\n- **color**: Colors - Applied to every item.\n- **variant**: 'outline' | 'ghost' - Applied to every item. Defaults to 'ghost'.\n- **disabled**: boolean - Disables every item.\n- **joined**: boolean (default: false) - Renders the buttons as contiguous segments.\n- **type**: 'single' | 'multiple' (default: 'multiple') - `'multiple'` lets any number of buttons be pressed (`role=\"group\"`, `aria-pressed`) and its value is a `string[]`. `'single'` makes the selection exclusive: the value is a single string, the root becomes `role=\"radiogroup\"`, each button `role=\"radio\"` with `aria-checked`, pressing one clears the others, and the checked radio cannot be unpressed.\n- **class**: string - Additional CSS classes for the root.\n- **theme**: ToggleButtonGroupThemeProps - Theme overrides.\n\n## Examples\n\n### Icon Toolbar\n\n```svelte\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Joined Segments\n\n```svelte\n<ToggleButtonGroup\n\tjoined\n\tvariant=\"outline\"\n\tcolor=\"neutral\"\n\tlabel=\"Text formatting\"\n\tvalue={['bold']}\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Single Selection (radio group)\n\n```svelte\n<script lang=\"ts\">\n\tlet alignment = $state('left');\n</script>\n\n<ToggleButtonGroup\n\ttype=\"single\"\n\tlabel=\"Alignment\"\n\tbind:value={alignment}\n\titems={[\n\t\t{ value: 'left', children: 'Left' },\n\t\t{ value: 'center', children: 'Center' },\n\t\t{ value: 'right', children: 'Right' }\n\t]}\n/>\n```\n\n### Change Handler\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Density options\"\n\titems={[\n\t\t{ value: 'compact', children: 'Compact' },\n\t\t{ value: 'comfortable', children: 'Comfortable' }\n\t]}\n\tonValueChange={(value) => {\n\t\tconsole.log(value);\n\t}}\n/>\n```\n\n## Theme\n\n- **root**: Main button group container styles.\n\n## Accessibility\n\n- `type=\"multiple\"`: the root is `role=\"group\"` named by `label`; each ToggleButton exposes its independent state through `aria-pressed`.\n- `type=\"single\"`: the root is `role=\"radiogroup\"`; buttons are `role=\"radio\"` with `aria-checked`.\n- The group is a single tab stop (roving tabindex): Tab enters it, ArrowLeft / ArrowRight move between buttons (looping, mirrored in RTL), Home / End jump to the first / last, Space or Enter toggles the focused button.\n- Prefer SegmentedControl for a visually segmented exclusive choice; use `type=\"single\"` when you want toggle-button styling with exclusive semantics.\n\n## Theme example\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Options\"\n\titems={items}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'flex items-center gap-1'\n\t\t}\n\t}}\n/>\n```\n";
+    readonly 'toggle-menu': "\n# ToggleMenu Component\n\nToggleMenu renders standalone toggles, independent toggle groups, exclusive radio groups, menu buttons, and custom snippet controls as one accessible, responsive toolbar.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { ToggleMenu, type ToggleMenuItem } from 'entasis/toggle-menu';\n\timport type { MenuItem } from 'entasis/menu';\n\timport { eyeIcon } from 'entasis/icons/eye';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { paletteIcon } from 'entasis/icons/palette';\n\n\tconst getTextColorOptions = (): MenuItem[] => [\n\t\t{ type: 'option', title: 'Red', color: 'danger' },\n\t\t{ type: 'option', title: 'Blue', color: 'info' }\n\t];\n\n\tlet items = $state<ToggleMenuItem[]>([\n\t\t{ type: 'toggle', prefix: eyeIcon, label: 'Preview', value: true },\n\t\t{\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Text formatting',\n\t\t\tvalue: ['bold'],\n\t\t\titems: [\n\t\t\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: 'menu',\n\t\t\tlabel: 'Text color',\n\t\t\tprefix: paletteIcon,\n\t\t\tmenu: getTextColorOptions\n\t\t}\n\t]);\n</script>\n\n<ToggleMenu bind:items label=\"Editor tools\" />\n```\n\n## Item Types\n\n- **toggle**: A standalone ToggleButton configuration with `type: 'toggle'`. Its boolean `value` stores the pressed state.\n- **group**: A labeled collection of independent toggles. Its `items` is an array of button configurations, each with its own `value` string, and the group `value` is the `string[]` of pressed values.\n- **radio-group**: A labeled collection of mutually exclusive toolbar choices. Its `items` is an array of radio configurations, each with its own `value` string, and the group `value` is the checked string.\n- **menu**: A toolbar menu button. Its `menu` is a `MenuItem[]` or reactive factory and automatically becomes a submenu inside More.\n- **custom**: A snippet control with `type: 'custom'`. Its `children` snippet receives the resolved toolbar state and a `reference` attachment for the primary focusable element. `overflowItems` is required so the control has an explicit representation inside More.\n\nGroups are joined by default. Set `joined: false` when their buttons should remain visually separate.\n\n## Props\n\n- **items**: ToggleMenuItem[] (required, bindable) - Ordered toggles, groups, menu buttons, and custom controls. Pressed state lives on the items, so bind them to keep it.\n- **label**: string (required) - Accessible name for the toolbar.\n- **size**: 'small' | 'normal' | 'large' - Default size inherited by items.\n- **color**: Colors - Default color inherited by items.\n- **variant**: 'outline' | 'ghost' - Default variant inherited by items.\n- **disabled**: boolean - Disables every item.\n- **onItemsChange**: (items) => void - Called once with the complete updated item list.\n- **class**: string - Additional classes for the toolbar root.\n- **theme**: ToggleMenuThemeProps - Theme overrides for root, rail, units, and overflow trigger.\n\nItem-level size, color, variant, and disabled values override toolbar defaults. Toggle, group, and radio-group callbacks receive their native checked boolean, pressed-value array, or selected value.\n\n## Menu Buttons\n\nA `menu` item renders a normal button with menu-button ARIA state and inherited toolbar styling. Pass a function when checked rows or other menu state must be recalculated reactively. `closeOnItemClick` defaults to `true`. ToggleMenu owns the PopupMenu attachments, tooltip, and overflow submenu representation.\n\n## Custom Controls\n\n`ToggleMenuCustomPayload` contains:\n\n- **reference**: Attachment for the custom control's primary focusable element. Applying it includes the control in roving keyboard navigation.\n- **size**, **color**, **variant**, **disabled**: Resolved toolbar or item values.\n- **overflowed**: Whether the logical unit currently lives in More.\n\n`overflowItems` accepts either a `MenuItem[]` or a function returning one. Use the function form when the overflow representation depends on reactive state. Popup triggers should attach both the toolbar `reference` and their own popover reference to the same button.\n\n## Overflow\n\nToggleMenu stays on one row. When complete logical units no longer fit, it moves them into a More popup rather than wrapping or splitting a group. Toggle overflow rows use `menuitemcheckbox`; radio rows use `menuitemradio`. Both expose `aria-checked` and remain open while changing state. Menu buttons become submenus from the same menu data. Custom controls contribute their declared `overflowItems` as one logical unit.\n\n## Keyboard And Tooltips\n\n- The toolbar uses one roving tab stop.\n- ArrowLeft and ArrowRight move between visible controls; Home and End move to the edges.\n- Arrow navigation through a radio group does not change its value. Space, Enter, or click selects the focused radio.\n- Disabled and overflowed controls are excluded from navigation.\n- Icon-only toggle and menu controls automatically use their `label` as tooltip content. Custom snippets own their tooltip and accessible label.\n- Use `radio-group` for exclusive choices inside ToggleMenu and SegmentedControl for standalone exclusive controls.\n";
+    readonly 'selection-menu': "\n# SelectionMenu Component\n\nSelectionMenu renders ToggleMenu controls anchored to a non-collapsed document selection. It accepts the same toolbar item props directly, filters the selection to a target container, preserves the range while controls are pressed, and positions the toolbar through Popover.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { SelectionMenu } from 'entasis/selection-menu';\n\timport type { ToggleMenuItem } from 'entasis/toggle-menu';\n\n\tlet items = $state<ToggleMenuItem[]>([\n\t\t{ type: 'toggle', label: 'Bold', prefix: boldIcon },\n\t\t{ type: 'toggle', label: 'Comment', prefix: commentIcon }\n\t]);\n</script>\n\n<div>\n\t<article>Select text in this article.</article>\n\t<SelectionMenu bind:items label=\"Selection tools\" />\n</div>\n```\n\nWith no target prop, SelectionMenu watches its parent. Pass a selector or an HTMLElement when the selection container is elsewhere:\n\n```svelte\n<SelectionMenu target=\"#editor\" bind:items label=\"Editor tools\" />\n<SelectionMenu target={editorElement} bind:items label=\"Editor tools\" />\n```\n\n## Props\n\n- **target**: HTMLElement | string | null - Parent by default; selectors resolve in the same Document or ShadowRoot. Null disables tracking.\n- **items**: ToggleMenuItem[] (bindable) - Canonical toolbar item list passed directly to ToggleMenu. Pressed state lives on the items.\n- **label**: string - Accessible name passed directly to ToggleMenu.\n- **color / variant / disabled**: ToggleMenu defaults inherited by every item.\n- **onItemsChange**: (items) => void - Called with the complete updated item list after any control changes.\n- **class / theme**: ToggleMenu root class and theme overrides.\n- **children**: Optional temporary replacement for the ToggleMenu body while retaining the same selection tracker. Toolbar props remain required.\n- **enabled**: boolean = true - Temporarily suppresses the menu without changing the target.\n- **position**: Popover placement = 'top' - Preferred placement around the selected range.\n- **offset**: number = 8 - Gap from the selected range.\n- **size**: size token = 'normal' - Shared ToggleMenu item and Popover size.\n- **transition**: Popover transition options - Enter and exit transition overrides.\n- **directedTransition**: boolean = true - Enters from the resolved placement.\n- **closeOnEscape**: boolean = true - Escape dismisses the current selection.\n- **closeOnClickOutside**: boolean = true - Outside clicks dismiss the current selection.\n- **onSelect**: (payload: SelectionMenuSelection | null) => void - The pick event: receives cloned valid ranges and clear\n  events. Callback-naming decision: the document owns the text selection, so SelectionMenu has no\n  controlled `selection` prop to change and cannot use the `onSelectionChange` state family.\n- **onAfterOpen / onAfterClose**: post-transition lifecycle callbacks receiving SelectionMenuPayload.\n- **popover**: Props forwarded to the floating Popover panel as one object - `{ class, theme }`.\n- **contentClass**: string - Additional classes for the advanced custom-content wrapper.\n- **selectionTheme**: SelectionMenuThemeProps - Popover panel and custom-content theme overrides.\n\n## Target Resolution\n\nBoth selection endpoints must be inside the resolved target. Whitespace-only, collapsed, or non-rendered ranges do not open the menu. String selectors use standard querySelector semantics, so use a selector that uniquely identifies the intended container.\n\n## Accessibility\n\nDirect mode inherits ToggleMenu's toolbar semantics, roving keyboard focus, disabled-item handling, tooltips, and responsive More menu. Escape and click-outside dismissal are provided by Popover. Custom-content mode is responsible for its own accessible role and keyboard model.\n";
+    readonly ask: "\n# Ask\n\nImport from `entasis/ask`.\n\nMount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.\n";
+    readonly field: "\n# Field\n\nImport Field, createFieldState, and the FieldState type from entasis/field. Field is the shared\nvalidation and accessibility owner used by Entasis form controls. It renders field structure\naround a custom control and does not create another form or validation system.\n\n## Controller\n\ncreateFieldState receives id, type, value, errors, and focused. Use getter/setter properties\nfor values bound to component props; plain initial values also work for standalone controls.\nOptional name, required, disabled, visible, size, density, onValidate, and onValueChange\nconfigure the same owner used by built-in controls.\n\nThe controller exposes value, setValue(value), validate(), checkSchema(value), isValid,\nerrors, errorMessages, hasError, focused, disabled, required, size, and density.\nUse bind:value on field.value or call field.setValue for user edits. Accepted changes publish\none onValueChange callback each. Unchanged values and parent state synchronization do not\npublish callbacks. Disabled controllers reject user edits.\n\nSpread field.controlAttrs on the native control and attach field.control to register its node.\nThe attributes provide id, name, disabled, required, aria-invalid, and aria-describedby.\nThe controller exposes id, labelId, and errorId for more specialized controls. Field connects\nits label and error messages to this control, preserving unrelated accessible descriptions.\n\nfieldSchemas exports the built-in optional and required schemas. onValidate supplements that\nschema: a message, message array, or true means invalid; false, null, or undefined means valid.\nOptional empty values skip custom validation. validate returns a tuple containing the error\nflag and schema-normalized value.\n\n## Wrapper props\n\n- field: the shared FieldState controller.\n- children: custom control content.\n- as: native wrapper element; defaults to div. Use fieldset for grouped controls.\n- labelFor: associated control ID, or false for aria-labelledby; defaults to field.id.\n- size: small, normal, or large control geometry and label typography.\n- density: compact, normal, or comfortable internal spacing, independent of size.\n- labelPosition: top or left; left switches to side labels once the field itself is at least 32rem wide (a container query on the field, not the viewport).\n- fieldAttrs: native attributes for the wrapper. Put native control attributes on the control.\n- class and theme: wrapper classes and Field part overrides.\n\nSlots include header, label, actions, prefix, suffix, footer, description, helper,\nerrorsContainer, and error. Field renders required indicators and validation errors.\n\n## Form participation\n\nA Form input with type: 'field' supplies fieldType and a snippet accepting FieldState<fieldType>.\nThe entry inherits InputProps, including defaultValue, required, disabled, size, density,\nonValidate, and onValueChange. The controller receives the resolved Form size and density.\nIts value participates in inferred values, validation, submission, and Form bind:value.\nThe existing type: 'custom' entry remains display-only and contributes no value key.\n";
+    readonly calendar: "\n# Calendar\n\nDate-based calendar primitives for single, range, and multiple selection. CalendarPrimitive is the visual primitive; CalendarInput wraps single and range modes in the Form Field contract.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { CalendarPrimitive, CalendarInput } from '../components/Form/Calendar/index.ts';\n</script>\n```\n\n## Single date\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar\" bind:value />\n```\n\n## Range\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<[Date | null, Date | null] | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar-range\" bind:value />\n```\n\n## Multiple dates\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date[]>([]);\n</script>\n\n<CalendarPrimitive type=\"calendar-multiple\" bind:value />\n```\n\n## Main props\n\n- `type`: `'calendar' | 'calendar-range' | 'calendar-multiple'`.\n- `value`: bindable value matching the selected type.\n- `view`: `'single' | 'double'`. Double view falls back to one month when the calendar container is narrower than 576px.\n- `disabledDates`: individual dates or inclusive `[start, end]` ranges.\n- `minDate` / `maxDate`: selection bounds.\n- `events`: values with `start` and `end`; matching events are exposed to the custom cell snippet.\n- `cell`: custom day renderer receiving the complete Calendar cell payload.\n- `onViewChange`: receives the first and last visible month after pointer, keyboard, or controlled-value navigation.\n\n## Keyboard\n\nThe visible month title opens an in-place month and year chooser composed from two scroll areas. Each list uses roving focus with ArrowUp/ArrowDown and Home/End; Escape returns to the day grid.\n\nDay focus is roving. Arrow keys move by day or week, Home/End move to week boundaries, PageUp/PageDown move by month, and Shift+PageUp/PageDown move by year. Enter or Space uses the native day button activation.\n\nMonth navigation slides in chronological direction while the viewport transitions to its new intrinsic height. Double view responds to the calendar container rather than the browser viewport, so it safely falls back to one month in narrow layouts. Both animations respect reduced-motion preferences.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly checkbox: "\n# Checkbox\n\nImport from `entasis/checkbox`.\n\nCheckbox is a boolean Form control. value is bindable, defaultValue initializes an uncontrolled value, and onValueChange reports changes. required, disabled, errors, label, and fieldAttrs use the shared Field contract. indeterminate controls the mixed presentation. Checkbox shares the CheckboxesInput theme owner.\n";
+    readonly 'checkboxes-input': "\n# CheckboxesInput Component\n\nThe CheckboxesInput component is a multi-selection input that allows users to select multiple options from a list. It provides a visually appealing interface with two display modes and supports custom labels and descriptions.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet selectedValues = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Select your interests\"\n\titems={[\n\t\t{ value: 'coding', label: 'Coding' },\n\t\t{ value: 'design', label: 'Design' },\n\t\t{ value: 'marketing', label: 'Marketing' }\n\t]}\n\tbind:value={selectedValues}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: CheckboxOption[] (required) - Array of checkbox options\n  - Each option has:\n    - value: string (required) - Unique identifier for the option\n    - label?: Slot - Display label (can be text or Svelte snippet)\n    - description?: Slot - Optional description text\n\n- **value**: string[] (bindable) - Array of selected option values\n- **mode**: 'normal' | 'card' (default: 'normal')\n  - normal: Simple checkbox list\n  - card: Each option displayed as a raised card with selection ring\n\n### Field Props\n- **label**: Slot - Field label\n- **description**: Slot - Helper text below label\n- **required**: boolean (default: false) - Makes field required\n- **disabled**: boolean - Disables all checkboxes\n- **visible**: boolean - Controls field visibility\n- **name**: string - Form field name\n\n### Validation Props\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **onValidate**: (value: string[]) => string[] | boolean - Custom validation function\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides for all checkbox parts\n\n### Slot Props\nAll Field slot props are available:\n- **header**: Snippet - Custom header\n- **suffix**: Snippet - Content after input\n- **prefix**: Snippet - Content before input\n- **actions**: Snippet - Action buttons area\n- **helper**: Snippet - Helper text\n- **footer**: Snippet - Footer content\n- **error**: Snippet - Custom error display\n- **errorsContainer**: Snippet - Custom errors container\n\n## Structure\n\nThe component renders as a fieldset with the following DOM structure:\n```\n<fieldset>\n\t<Field wrapper>\n\t\t<label> <!-- For each option -->\n\t\t\t<input type=\"checkbox\" hidden />\n\t\t\t<div> <!-- Track (checkbox background) -->\n\t\t\t<div> <!-- Thumb (check mark) -->\n\t\t\t<Slot> <!-- Label -->\n\t\t\t<Slot> <!-- Description -->\n\t\t</label>\n\t</Field>\n</fieldset>\n```\n\n## Examples\n\n### Basic Checkbox List\n```svelte\n<script>\n\tlet interests = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Interests\"\n\titems={[\n\t\t{ value: 'music', label: 'Music' },\n\t\t{ value: 'sports', label: 'Sports' },\n\t\t{ value: 'reading', label: 'Reading' },\n\t\t{ value: 'travel', label: 'Travel' }\n\t]}\n\tbind:value={interests}\n/>\n```\n\n### Card Mode\n```svelte\n<CheckboxesInput \n\tlabel=\"Select features\"\n\tmode=\"card\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'analytics', \n\t\t\tlabel: 'Analytics',\n\t\t\tdescription: 'Track user behavior and metrics'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'api', \n\t\t\tlabel: 'API Access',\n\t\t\tdescription: 'RESTful API for integrations'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'support', \n\t\t\tlabel: 'Priority Support',\n\t\t\tdescription: '24/7 dedicated support team'\n\t\t}\n\t]}\n\tbind:value={selectedFeatures}\n/>\n```\n\n### With Descriptions\n```svelte\n<CheckboxesInput \n\tlabel=\"Communication preferences\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'email', \n\t\t\tlabel: 'Email notifications',\n\t\t\tdescription: 'Receive updates via email'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'sms', \n\t\t\tlabel: 'SMS alerts',\n\t\t\tdescription: 'Text messages for urgent items'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'push', \n\t\t\tlabel: 'Push notifications',\n\t\t\tdescription: 'Browser push notifications'\n\t\t}\n\t]}\n\tbind:value={preferences}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet skills = $state([]);\n\t\n\tfunction validateSkills(value) {\n\t\tif (value.length < 2) {\n\t\t\treturn ['Please select at least 2 skills'];\n\t\t}\n\t\treturn false;\n\t}\n</script>\n\n<CheckboxesInput \n\tlabel=\"Skills\"\n\trequired\n\titems={[\n\t\t{ value: 'js', label: 'JavaScript' },\n\t\t{ value: 'py', label: 'Python' },\n\t\t{ value: 'go', label: 'Go' },\n\t\t{ value: 'rust', label: 'Rust' }\n\t]}\n\tbind:value={skills}\n\tonValidate={validateSkills}\n/>\n```\n\n### In a Form\n```svelte\n<script>\n\timport { Form } from 'entasis/form';\n\t\n\tfunction handleSubmit(data) {\n\t\tconsole.log('Selected interests:', data.interests);\n\t}\n</script>\n\n<Form \n\tinputs={{\n\t\tinterests: {\n\t\t\ttype: 'checkboxes',\n\t\t\tlabel: 'Your interests',\n\t\t\trequired: true,\n\t\t\titems: [\n\t\t\t\t{ value: 'tech', label: 'Technology' },\n\t\t\t\t{ value: 'science', label: 'Science' },\n\t\t\t\t{ value: 'art', label: 'Art' },\n\t\t\t\t{ value: 'business', label: 'Business' }\n\t\t\t]\n\t\t}\n\t}}\n\tonSubmit={handleSubmit}\n/>\n```\n\n### With Custom Snippets\n```svelte\n<CheckboxesInput \n\tlabel=\"Select options\"\n\titems={[\n\t\t{ value: 'opt1', label: 'Option 1' },\n\t\t{ value: 'opt2', label: 'Option 2' }\n\t]}\n\tbind:value={selected}\n>\n\t{#snippet description()}\n\t\t<p class=\"text-sm text-muted\">Choose all that apply</p>\n\t{/snippet}\n\t\n\t{#snippet helper()}\n\t\t<p class=\"text-xs\">Selected: {selected.length}</p>\n\t{/snippet}\n</CheckboxesInput>\n```\n\n### Pre-selected Values\n```svelte\n<script>\n\tlet selected = $state(['option1', 'option3']);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Preferences\"\n\titems={[\n\t\t{ value: 'option1', label: 'Option 1' },\n\t\t{ value: 'option2', label: 'Option 2' },\n\t\t{ value: 'option3', label: 'Option 3' }\n\t]}\n\tbind:value={selected}\n/>\n```\n\n### Disabled State\n```svelte\n<CheckboxesInput \n\tlabel=\"Read-only selection\"\n\tdisabled\n\titems={items}\n\tvalue={['option1']}\n/>\n```\n\n### Complex Options with Rich Labels\n```svelte\n<script lang=\"ts\">\n\timport { Chip } from 'entasis/chip';\n\n\tlet plans = $state<string[]>([]);\n</script>\n\n{#snippet storageLabel()}\n\tExtra Storage <Chip color=\"primary\">+$5/mo</Chip>\n{/snippet}\n\n{#snippet usersLabel()}\n\tTeam Members <Chip color=\"success\">+$10/mo</Chip>\n{/snippet}\n\n<CheckboxesInput\n\tlabel=\"Select add-ons\"\n\tmode=\"card\"\n\titems={[\n\t\t{\n\t\t\tvalue: 'storage',\n\t\t\tlabel: storageLabel,\n\t\t\tdescription: '100GB additional cloud storage'\n\t\t},\n\t\t{\n\t\t\tvalue: 'users',\n\t\t\tlabel: usersLabel,\n\t\t\tdescription: 'Add up to 10 team members'\n\t\t}\n\t]}\n\tbind:value={plans}\n/>\n```\n\n## Validation\n\n- When **required** is true, at least one option must be selected\n- Custom validation via **onValidate** prop\n- Returns array of error messages or boolean\n- Errors are displayed inline below the field\n- Validation runs on change and blur\n\n## Modes\n\n### Normal Mode\n- Simple checkbox list layout\n- Compact design\n- Best for shorter lists or secondary choices\n\n### Card Mode\n- Each option displayed as a card with elevation\n- Selected cards show a primary selection ring\n- Better visual feedback\n- Ideal for feature selection or important choices\n\n## Accessibility\n\n- Uses semantic `<fieldset>` and `<legend>` elements\n- Each checkbox properly associated with its label\n- Hidden native checkbox inputs for keyboard navigation\n- Supports keyboard interaction (Space/Enter to toggle)\n- ARIA attributes for validation states\n- Error announcements for screen readers\n- Focus management within the group\n\n## Theme Customization\n\nThe CheckboxesInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main container styles\n- **checkboxesInputContainer**: Options grid container styles\n- **checkboxesInputItem**: Individual checkbox wrapper styles\n- **checkboxesInputItemTrack**: Checkbox background/track styles\n- **checkboxesInputItemThumb**: Check mark indicator styles\n- **checkboxesInputItemLabel**: Label text styles\n- **checkboxesInputItemDescription**: Description text styles\n- **checkboxesInputItemIcon**: Icon styling\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - mode: 'card' | 'normal' - Layout mode\n\n**checkboxesInputContainer**:\n- base: Base classes for options grid container\n- Variants:\n  - mode: 'card' | 'normal' - Grid layout based on mode\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItem**:\n- base: Base classes for individual checkbox wrapper\n- Variants:\n  - mode: 'card' | 'normal' - Item styling based on mode\n  - checked: boolean - Selected state styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemTrack**:\n- base: Base classes for checkbox track/background\n- Variants:\n  - checked: boolean - Track styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemThumb**:\n- base: Base classes for check mark indicator\n- Variants:\n  - checked: boolean - Visibility and styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemLabel**:\n- base: Base classes for label text\n\n**checkboxesInputItemDescription**:\n- base: Base classes for description text\n\n**checkboxesInputItemIcon**:\n- base: Base classes for icon styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<CheckboxesInput \n  label=\"Options\"\n  bind:value={selected}\n  items={items}\n  theme={{\n    // The option grid lays itself out against its OWN width, not the viewport: declare the\n    // container on the root and query it on the grid, so the columns follow the field's host\n    // (a sidebar, a split pane, a dialog) instead of the device.\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'grid-cols-1 @md:grid-cols-3 gap-lg'\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg border-2'\n      }\n    }\n  }}\n/>\n```\n\n**Card Mode Customization**:\n```svelte\n<CheckboxesInput \n  mode=\"card\"\n  label=\"Features\"\n  bind:value={features}\n  items={items}\n  theme={{\n    checkboxesInputItem: {\n      checked: {\n        true: 'ring-2 ring-primary bg-primary/10'\n      },\n      mode: {\n        card: 'rounded-xl raised-3 hover:raised-4'\n      }\n    },\n    checkboxesInputItemThumb: {\n      checked: {\n        true: 'bg-primary scale-100'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setCheckboxesInputTheme } from '../components/Form/CheckboxesInput/index.ts';\n  \n  setCheckboxesInputTheme({\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'gap-lg',\n      mode: {\n        card: 'grid-cols-1 @2xl:grid-cols-2'\n      }\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg transition-all'\n      }\n    }\n  });\n</script>\n```\n\n## Notes\n\n- Value is always an array of strings (selected option values)\n- Empty array means no selections\n- Options are rendered in a responsive grid (1 column mobile, 2 columns desktop)\n- Check icon automatically appears when option is selected\n- Native checkbox is hidden but maintained for accessibility\n- Works seamlessly with Form component\n- Supports Svelte 5 snippets for labels and descriptions\n- Each option requires a unique `value` property\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'color-input': "\n# ColorInput Component\n\nThe ColorInput is a form field for picking a color. It shows a color swatch and a text input inside\nthe shared Field frame, and opens a full ColorPicker panel in a Popover. Its value is a canonical hex\nstring (`#rrggbb`, or `#rrggbbaa` when alpha < 1).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorInput } from 'entasis/color-input';\n\tlet color = $state('#6366f1');\n</script>\n\n<ColorInput label=\"Brand color\" bind:value={color} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: `string | null` (bindable) - The selected color. The canonical value is always hex:\n  `#rrggbb`, or `#rrggbbaa` when alpha < 1. Any parseable CSS color (named colors, `rgb()`,\n  `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`) is accepted programmatically and\n  normalized to hex on commit. `null` renders the empty/neutral swatch and an empty input.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`) - The text representation shown\n  in the input and the picker's format select. The bound `value` stays hex regardless. Bindable so a\n  format change from the picker flows back out.\n\n### Display Props\n- **placeholder**: `string` - Hint text shown in the empty color input. Defaults to the selected\n  format's pattern: `#rrggbb`, `rgb(r, g, b)` or `hsl(h, s%, l%)`.\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required (a required color must be a non-empty string)\n- **disabled**: boolean - Disable input, swatch and picker\n- **size**: 'small' | 'normal' | 'large' - Field size, forwarded to the embedded ColorPicker\n\n### Event Props\n- **onValueChange**: `(value: string) => void` - Fires on every committed change, including continuously\n  while dragging in the picker. Receives the canonical hex string.\n- **onValidate**: `(value: string) => string[] | boolean` - Custom validation.\n\n### Styling Props\n- **class**: string - Additional CSS classes on the field root\n- **theme**: ColorInputTheme - Theme overrides (also accepts Field theme parts)\n- **i18n**: Partial<Messages> - Per-instance i18n overrides, also forwarded to the ColorPicker\n\n## Structure\n\n```\n<Popover>\n\t<Field>\n\t\t<Swatch />   <!-- opens the picker -->\n\t\t<Input />    <!-- shows the value in the chosen format -->\n\t</Field>\n\t<ColorPicker />  <!-- inside the popover panel -->\n</Popover>\n```\n\n## Examples\n\n### With alpha\n```svelte\n<ColorInput label=\"Overlay\" value=\"#00000080\" />\n```\n\n### RGB text representation\n```svelte\n<ColorInput label=\"Accent\" bind:value={accent} format=\"rgb\" />\n```\n\n### Required inside a Form\n```svelte\n<Form\n\tinputs={{\n\t\tcolor: { type: 'color', label: 'Theme color', required: true }\n\t}}\n/>\n```\n\n### Disabled\n```svelte\n<ColorInput label=\"Locked\" value=\"#22c55e\" disabled />\n```\n\n## Interaction\n\n- The swatch button toggles the picker popover; focusing the text input also opens it (like DateInput).\n- The text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#` and\n  takes up to 8 hex digits; rgb/hsl are structured templates that auto-insert the `rgb(` / `hsl(`\n  prefix, the `, ` separators and hsl's `%` suffixes as digits flow in (3 digits per channel, or\n  `,` to end a channel early — a missing closing `)` is completed on commit). Valid entries commit\n  immediately (normalized to hex); an incomplete entry does not commit and the input text is restored\n  from the canonical value on blur. Clearing the input sets the value to `null`.\n- Dragging inside the picker updates the value live. The popover does not close on pick (color picking\n  is continuous); it closes on click-outside or Escape.\n- Changing the format select in the picker updates the input's text representation while keeping the\n  bound value as hex.\n\n## Accessibility\n\n- The swatch sits inside a field action button (the same primitive as the password visibility\n  toggle), which stretches to the field's full height for a generous hit target and carries\n  `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls`, and a localized \"Choose Color\" label.\n- The text input carries a localized \"Color value\" label and is associated with the field label.\n- The embedded ColorPicker exposes its saturation/brightness square and hue/alpha sliders as focusable\n  `role=\"slider\"` controls with full keyboard support (see the ColorPicker docs).\n\n## Theme Customization\n\nThe theme object contains the following parts:\n- **input**: The color text input element (size, disabled variants)\n- **inputContainer**: The bordered field container (size, disabled variants)\n- **popover**: The popover panel wrapping the ColorPicker\n- **swatch**: The color swatch inside the leading action button (empty variant)\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n```svelte\n<ColorInput\n\tlabel=\"Brand color\"\n\tbind:value={color}\n\ttheme={{\n\t\tswatch: { base: 'rounded-full', empty: { true: 'bg-neutral-muted/50' } },\n\t\tinputContainer: { base: 'border-2' }\n\t}}\n/>\n```\n\n## Notes\n\n- The canonical `value` is always hex; use `format` only to change the input's text representation.\n- The swatch renders the color over a CSS checkerboard so colors with alpha < 1 read correctly, and\n  shows a neutral muted square when the value is `null`.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'color-picker': "\n# ColorPicker Component\n\nA standalone color picker panel (a faithful clone of the kibo-ui color picker). It is a\nself-contained rounded panel — a saturation/value square, a hue slider, an alpha slider, an\neyedropper button, and a format select with a color text input and an alpha percentage input.\n`ColorPicker` is the raw panel primitive; `ColorPickerInput` wraps it in the standard field\nchrome (label, description, errors, form registration) and extends InputProps with type 'color'.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorPicker, ColorPickerInput } from 'entasis/color-picker';\n\tlet color = $state('#6366f1');\n</script>\n\n<!-- Field variant: label/description/errors like every other form input -->\n<ColorPickerInput\n\tlabel=\"Brand color\"\n\tdescription=\"Used for buttons and links across the app\"\n\tbind:value={color}\n/>\n\n<!-- Raw panel primitive -->\n<ColorPicker bind:value={color} />\n<ColorPicker bind:value={color} format=\"rgb\" size=\"large\" />\n<ColorPicker value=\"#22c55e80\" onValueChange={(hex) => console.log(hex)} />\n<ColorPicker value=\"#000000\" disabled />\n```\n\n## ColorPickerInput (field variant)\n\nAccepts every field prop from InputProps ('color') — `label`, `description`, `name`, `required`,\n`errors`, `onValidate`, `helper`, snippets, … — plus the panel props `format` and `i18n`.\n`theme` is split: `theme.picker` for the panel parts, `theme.field` for the field wrapper.\n`bind:value` is the canonical hex string (nullable).\n\n## Props\n\n### Core Props\n- **value**: `string` (bindable, default: `'#000000'`)\n  - The selected color. The canonical output is always hex: `#rrggbb`, or `#rrggbbaa` when alpha < 1.\n  - Any parseable CSS color is accepted programmatically (named colors, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`).\n  - Hue and saturation are preserved internally, so dragging a color to black/white or typing a gray never loses the chosen hue.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`)\n  - Controls the text representation shown in the input. The bound `value` stays hex regardless of this.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Scales the panel width, slider heights, thumb sizes and text sizes.\n- **disabled**: `boolean` (default: `false`) - Disables every control and dims the panel.\n\n### Event Props\n- **onValueChange**: `(value: string) => void`\n  - Fires on every committed change, including continuously while dragging. Receives the canonical hex string.\n\n### Advanced Props\n- **class**: `string` - Extra classes merged onto the root panel.\n- **theme**: `ColorPickerThemeProps` - Theme overrides for the panel parts.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog.\n\n## Structure\n\nA rounded `root` panel containing, top to bottom:\n1. The `area` — a saturation/value square with a solid hue backdrop and two gradient overlays\n   (`areaSaturation` white→transparent left-to-right, `areaValue` transparent→black top-to-bottom),\n   plus a draggable circular `areaThumb`.\n2. A `controls` row — a square `eyedropperButton` and a `sliders` column with a rainbow\n   `hueTrack` (0–360) and a checkerboard `alphaTrack` (the `alphaGradient` overlays a pure-CSS\n   checkerboard), each with a white `sliderThumb`.\n3. An `inputs` row — a native `select` (hex/rgb/hsl), the color `input`, and an\n   `alphaField` wrapping the `alphaInput` (0–100) and its `alphaSuffix` (`%`). The text\n   input always shows the solid color (no alpha suffix); alpha lives in the % input and the\n   alpha slider, so the row is identical in every format.\n\n## Interaction\n\n- The square and both sliders support click-to-jump and continuous pointer drag.\n- The color text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#`\n  and takes up to 8 hex digits; rgb/hsl are structured templates auto-inserting the `rgb(`/`hsl(`\n  prefix, `, ` separators and hsl's `%` suffixes as digits flow in (`,` ends a channel early; a\n  missing `)` is completed on commit). Entries commit on Enter or blur; an incomplete entry reverts.\n  The text always shows the solid form; a typed/eyedropped color without an explicit alpha keeps the\n  current alpha (pasting `rgba()`/8-digit hex still applies the pasted alpha).\n- The alpha input is masked to 0–100 and commits on change; the format select only changes the text representation.\n- The eyedropper uses the native `window.EyeDropper` API and is disabled where unsupported (SSR-safe).\n\n## Accessibility\n\n- The area thumb and both slider thumbs are focusable `role=\"slider\"` elements with\n  `aria-valuemin`/`aria-valuemax`/`aria-valuenow` and localized `aria-label`s.\n- Keyboard: on the square, Left/Right adjust saturation and Up/Down adjust value; on the sliders,\n  arrow keys step (Shift for a larger step) and Home/End jump to min/max.\n- The eyedropper, color input, format select and alpha input all carry localized aria-labels.\n\n## Notes\n- Canonical `value` is hex; use `format` only to change the input's text representation.\n- Theme parts: `root`, `area`, `areaSaturation`, `areaValue`, `areaThumb`, `controls`,\n  `eyedropperButton`, `sliders`, `hueTrack`, `alphaTrack`, `alphaGradient`, `sliderThumb`,\n  `inputs`, `select`, `input`, `alphaField`, `alphaInput`, `alphaSuffix` (each with a `size` variant).\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly combobox: "\n# Combobox Component\n\nA searchable dropdown component that supports both static arrays and async option loading. Provides keyboard navigation, debounced search, and full ARIA accessibility. Use it when users need to search and select from a large list of options.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Combobox } from 'entasis/combobox';\n\tlet value = $state(null);\n\tconst items = [\n\t\t{ value: 'us', label: 'United States', description: 'North America' },\n\t\t{ value: 'uk', label: 'United Kingdom', description: 'Europe' }\n\t];\n</script>\n\n<Combobox\n\tplaceholder=\"Search countries...\"\n\titems={items}\n\tbind:value={value}\n/>\n```\n\n## Props\n\n### Core Props\n\n- **items**: `ComboboxOption[] | ((searchValue?: string) => MaybePromise<ComboboxOption[]>)` (required)\n  - Array of options or async function that returns options based on search value\n  - For arrays: filtered client-side\n  - For functions: called with search value, returns Promise or array\n\n- **value**: `string | null` (bindable)\n  - Selected option value\n- **defaultValue**: `string | null` (default: `null`)\n  - Initial selected value when `value` is omitted\n\n- **searchValue**: `string` (default: `''`, bindable)\n  - Current search input value\n\n- **loading**: `boolean` (default: `false`, bindable)\n  - Loading state (managed automatically for async options)\n\n### Behavior Props\n\n- **showAllOnFocus**: `boolean` (default: `false`)\n  - Show all options when input is focused, even without typing\n\n- **getValueOption**: `(value: string) => MaybePromise<ComboboxOption | null | undefined>`\n  - Function to get option data for a value when not in loaded options\n  - Useful for async options with pre-selected values\n\n- **placeholder**: `string` (default: `''`)\n  - Input placeholder text\n\n- **loadingText**: `string` (default: `'Loading...'`)\n  - Text displayed while loading options\n\n- **noOptionsText**: `string` (default: `'No options found'`)\n  - Text displayed when no options match\n\n### Field Props\n\n- **required**: `boolean` (default: `false`)\n- **disabled**: `boolean`\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`) - Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height)\n- **name**: `string`\n- **errors**: `string[] | boolean` (bindable)\n- **focused**: `boolean` (bindable)\n- **description**: `string`\n\n### Event Props\n\n- **onValueChange**: `({ value, option }: { value: string | null; option: ComboboxOption | null }) => void`\n  - Called when selection changes\n  - Receives a named payload with both the value and full option object\n\n- **onValidate**: `(value: string) => string[] | boolean`\n  - Custom validation function\n\n### Slot Props\n\n- **prefix**: `Snippet | false` (default: magnifying glass icon)\n  - Prefix content. Set to `false` to hide default icon\n\n- **suffix**: `Snippet`\n  - Suffix content (clear button shown automatically when value exists)\n\n### Theme Props\n\n- **theme**: `ComboboxThemeProps`\n  - Customize styling for: input, inputContainer, loading, error, noOptions\n  - Option rows are `MenuOption` components: style them globally with `setMenuOptionTheme` from `entasis/menu-option`\n\n## Examples\n\n### Array Options (Client-side Filtering)\n\n```svelte\n<script>\n\tlet value = $state(null);\n\tconst countries = [\n\t\t{ value: 'us', label: 'United States' },\n\t\t{ value: 'uk', label: 'United Kingdom' }\n\t];\n</script>\n\n<Combobox\n\titems={countries}\n\tbind:value={value}\n\tplaceholder=\"Search countries...\"\n/>\n```\n\n### Async Options (API Call)\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(null);\n\tconst getOptions = async (searchValue?: string) => {\n\t\tconst response = await fetch(`/api/search?q=${searchValue}`);\n\t\treturn response.json();\n\t};\n</script>\n\n<Combobox\n\titems={getOptions}\n\tbind:value={value}\n\tplaceholder=\"Search async...\"\n/>\n```\n\n### Show All Options on Focus\n\n```svelte\n<Combobox\n\titems={countries}\n\tshowAllOnFocus={true}\n\tbind:value={value}\n/>\n```\n\n### Pre-selected Value with Async Options\n\n```svelte\n<script lang=\"ts\">\n\timport type { ComboboxOption } from 'entasis/combobox';\n\tlet value = $state<string | null>('us');\n\tconst getValueOption = async (value: string): Promise<ComboboxOption> => {\n\t\treturn { value, label: 'United States' };\n\t};\n\tconst getOptions = async (searchValue?: string): Promise<ComboboxOption[]> => {\n\t\tconst response = await fetch(`/api/countries?q=${searchValue ?? ''}`);\n\t\treturn response.json();\n\t};\n</script>\n\n<Combobox\n\titems={getOptions}\n\tbind:value={value}\n\tgetValueOption={getValueOption}\n/>\n```\n\n## State Management\n\n- **value**: Bindable string (option value) or null\n- **searchValue**: Bindable string for search input\n- **loading**: Bindable boolean, automatically managed for async options\n- **errors**: Bindable array or boolean for validation errors\n- **focused**: Bindable boolean for focus state\n\n## Accessibility\n\n- Full ARIA combobox pattern implementation\n- **role=\"combobox\"** on input\n- **role=\"listbox\"** on options container\n- **role=\"option\"** on each option\n- **aria-expanded**, **aria-controls**, **aria-activedescendant** for state\n- **aria-autocomplete=\"list\"** for search behavior\n- Keyboard navigation: ArrowDown/Up (wraps around), Enter (select), Escape (close), Home/End (first/last)\n- Screen reader announcements for loading and error states\n\n## Notes\n\n- **Debouncing**: Search is debounced by 100ms to reduce API calls\n- **Race Conditions**: Handled automatically - only latest async request updates state\n- **Option Format**: Options must have `value` (string) and `label` (string). Optional `description` displays below label\n- **Keyboard Navigation**: Wraps around - ArrowDown at bottom goes to top, ArrowUp at top goes to bottom\n- **Empty States**: Shows loading text, error message, or no options text appropriately\n- **Clear Button**: Automatically shown when value exists, uses the shared field action button hitbox\n- **Default Prefix**: Magnifying glass icon shown by default unless `prefix={false}` or custom snippet provided\n\n## Theme Customization\n\nThe Combobox component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n- **loading**: Loading state indicator styles\n- **error**: Error message styles\n- **noOptions**: No options found message styles\n\nOption rows are rendered with the shared `MenuOption` component (parts: root, title, description, prefix, suffix, content) and are themed through `setMenuOptionTheme` from `entasis/menu-option`, not through the Combobox theme.\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n**loading**:\n- base: Base classes for loading indicator\n\n**error**:\n- base: Base classes for error message\n\n**noOptions**:\n- base: Base classes for no options message\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Combobox\n  items={items}\n  bind:value={value}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    noOptions: {\n      base: 'italic'\n    }\n  }}\n/>\n```\n\n**Custom Option Styling** (option rows use the shared MenuOption theme):\n```svelte\n<script lang=\"ts\">\n  import { setMenuOptionTheme } from '../components/MenuOption/index.ts';\n\n  let value = $state<string | null>(null);\n  const items = [\n    { value: 'us', label: 'United States', description: 'North America' },\n    { value: 'uk', label: 'United Kingdom', description: 'Europe' }\n  ];\n\n  setMenuOptionTheme({\n    root: {\n      base: 'rounded-md transition-colors'\n    },\n    title: {\n      base: 'font-semibold'\n    },\n    description: {\n      base: 'text-sm text-neutral/70'\n    }\n  });\n</script>\n\n<Combobox items={items} bind:value={value} />\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setComboboxTheme } from '../components/Form/Combobox/index.ts';\n  \n  setComboboxTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    loading: {\n      base: 'italic'\n    }\n  });\n</script>\n```\n";
+    readonly 'date-input': "\n# DateInput\n\nMasked native text entry composed with Field and DateSelector. The bindable value is a native `Date | null`.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { DateInput } from '../components/Form/DateInput/index.ts';\n</script>\n```\n\n## Usage\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date | null>(null);\n</script>\n\n<DateInput label=\"Start date\" bind:value />\n```\n\n## Date formatting\n\nUse `format` with `dd`, `mm`, `yy`, and `yyyy` segments. Supported values include `dd/mm/yyyy`, `mm/dd/yyyy`, `mm/yyyy`, and `yyyy/mm/dd`. The `separator` prop replaces the slash in the rendered mask.\n\n## Selector options\n\n- `presets`: date shortcuts shaped as `{ label, value }`.\n- `disabledDates`: individual dates or inclusive date ranges.\n- `minDate` / `maxDate`: calendar selection bounds.\n- `calendarView`: `'single' | 'double'`.\n- `mobileSheet`: renders the DateSelector as a bottom sheet below 768px.\n- `closeOnSelect`: closes after choosing a date; defaults to `false`.\n- `onSelect`: the pick event -- fires only when a date is chosen from the selector or its\n  presets; `onValueChange` is the value state change and reports both typed and picked dates.\n\n```svelte\n<DateInput\n  label=\"Delivery date\"\n  bind:value\n  minDate={new Date()}\n  presets={[\n    { label: 'Tomorrow', value: new Date(2026, 6, 16) },\n    { label: 'Next week', value: new Date(2026, 6, 22) }\n  ]}\n/>\n```\n\nThe selector never opens on focus, so tabbing through the field does not pop it. Open it with ArrowDown while the input has focus, or from the full-height calendar button (which carries `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`). It stays open after selection unless `closeOnSelect` is enabled. Calendar days support arrow, Home/End, and PageUp/PageDown navigation.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'date-selector': "\n# DateSelector\n\nPopover calendar composition for selecting one date, a range, or multiple dates. It uses Entasis's Popover, CalendarPrimitive, Button, and transitionSize attachment.\n`DateSelector` is the raw popover primitive; `DateSelectorInput` wraps it in the standard field\nchrome (label, description, errors, form registration) and extends InputProps — field type 'date'\nfor `mode=\"date\"`, 'calendar-range' for `mode=\"range\"` (`mode=\"multiple\"` has no field type and\nstays primitive-only).\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { DateSelector, DateSelectorInput } from '../components/Form/DateSelector/index.ts';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date | null>(null);\n</script>\n\n<!-- Field variant: label/description/errors like every other form input -->\n<DateSelectorInput\n\tlabel=\"Due date\"\n\tdescription=\"We'll remind you the day before\"\n\tbind:value\n/>\n\n<!-- Raw popover primitive -->\n<DateSelector bind:value />\n```\n\n## DateSelectorInput (field variant)\n\nAccepts every field prop from InputProps — `label`, `description`, `name`, `required`, `errors`,\n`onValidate`, `helper`, snippets, … — plus the selector props (`mode`, `presets`, `trigger`,\n`closeOnSelect`, `position`, `minDate`/`maxDate`, …). `theme` is split: `theme.selector` for the\npopover parts, `theme.field` for the field wrapper.\n\n## Selection modes\n\n- `mode=\"date\"` binds `Date | null`.\n- `mode=\"range\"` binds `[Date | null, Date | null] | null`.\n- `mode=\"multiple\"` binds `Date[]`.\n\nThe selector stays open after selection by default. Set `closeOnSelect` to close after a date, a complete range, or a multiple-date change.\n\n## Presets\n\n```svelte\n<DateSelector\n  bind:value\n  presets={[\n    { label: 'Today', value: new Date() },\n    { label: 'Tomorrow', value: new Date(2026, 6, 16) }\n  ]}\n/>\n```\n\nEach preset value must match the active mode. Presets follow the same `closeOnSelect` policy as calendar selection.\n\n## Custom trigger\n\nThe `trigger` prop follows Popover's trigger contract. A trigger snippet receives `PopoverState`; attach `popover.reference` to the trigger element and call `popover.toggle()`.\n\n## Calendar configuration\n\nUse `view`, `weekStartsOnMonday`, `weekdayLength`, `locale`, `minDate`, `maxDate`, and `disabledDates` to configure the embedded calendar. Set `mobileSheet` to render the selector as a bottom sheet below 768px.\n\nThe content container animates intrinsic height changes. Month navigation uses a direction-aware slide and respects reduced-motion preferences.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n- **open**: bindable popover visibility.\n- **defaultOpen**: initializes an uncontrolled selector once.\n- **onOpenChange**: receives the new boolean once for each opening or closing interaction.\n\nSelecting the current date or preset does not emit another value callback. With closeOnSelect,\nthat selection can still close the popover and emit one onOpenChange callback.\n\n";
+    readonly 'file-input': "\n# FileInput Component\n\nThe FileInput component provides file upload functionality with drag-and-drop support and an inline list of the selected files (image files get a thumbnail preview). It supports a single-file mode and a multiple-file mode.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput label=\"Upload File\" bind:value={file} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **mode**: 'single' | 'multiple' (default: 'single') - Single-file or multiple-file mode\n- **value**: File | null in single mode, File[] | null in multiple mode (bindable) - Selected file(s)\n- **defaultValue**: same type as `value` - Initial selection when `value` is omitted\n- **types**: string[] (default: ['image/*']) - Accepted MIME types or extensions (e.g. ['image/*'], ['.pdf', '.docx']); used for the native `accept` attribute and drag validation\n- **maxSize**: number (default: 50 MB) - Maximum file size in bytes; larger files are rejected\n- **maxFiles**: number (default: 1) - Maximum number of files (multiple mode caps the combined selection)\n- **clickable**: boolean (default: true) - Whether clicking the dropzone opens the native file picker\n\n### Display Props\n- **placeholder**: string (default: 'Click or drag files here') - Text shown in the empty dropzone\n- **fileList**: Snippet - Custom rendering of the selected files list\n- **file**: Snippet - Custom rendering of each selected file row\n- **fileListClass** / **fileClass** / **placeholderClass**: string - Extra classes for those parts\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large'\n\n### Event Props\n- **onValueChange**: (value: File | null) => void in single mode, (value: File[] | null) => void in multiple mode - Called when the selection changes\n- **onReject**: (rejections: { file: File; reason: 'type' | 'size' | 'duplicate' | 'limit' }[]) => void - Called with the files rejected by type, size, duplicate or count validation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<Dropzone>            <!-- inputContainer -->\n\t\t<Placeholder />     <!-- shown while no file is selected -->\n\t\t<FileList>          <!-- shown once files are selected -->\n\t\t\t<File />          <!-- thumbnail, name, size, remove button -->\n\t\t\t<AddMoreButton /> <!-- multiple mode, while below maxFiles -->\n\t\t</FileList>\n\t</Dropzone>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic File Input\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Document\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={file}\n/>\n```\n\n### Multiple Files\n```svelte\n<script lang=\"ts\">\n\tlet files = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={5}\n\tlabel=\"Upload Documents\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={files}\n/>\n```\n\n### Image Upload with Preview\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/*']}\n/>\n```\n\n### Restrict File Types\n```svelte\n<script lang=\"ts\">\n\tlet document = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload PDF\"\n\tbind:value={document}\n\ttypes={['.pdf']}\n\tdescription=\"PDF files only\"\n/>\n```\n\n### With File Size Limit\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"Maximum 5MB\"\n/>\n```\n\n### Required File\n```svelte\n<script lang=\"ts\">\n\tlet resume = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Resume\"\n\tbind:value={resume}\n\ttypes={['.pdf', '.doc', '.docx']}\n\trequired\n/>\n```\n\n### Disabled State\n```svelte\n<FileInput\n\tlabel=\"Uploaded File\"\n\tvalue={existingFile}\n\tdisabled\n/>\n```\n\n### Avatar Upload\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n\n\tfunction handleUpload(file: File | null) {\n\t\tif (!file) return;\n\t\tconsole.log('Uploading:', file.name);\n\t\t// Upload to server\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/png', 'image/jpeg']}\n\tmaxSize={2 * 1024 * 1024}\n\tdescription=\"PNG or JPEG, max 2MB\"\n\tonValueChange={handleUpload}\n/>\n```\n\n### Handling Rejected Files\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n\tlet rejectionMessage = $state('');\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={1024 * 1024}\n\tonReject={(rejections) => {\n\t\trejectionMessage = rejections\n\t\t\t.map((rejection) => `${rejection.file.name}: ${rejection.reason}`)\n\t\t\t.join(', ');\n\t}}\n/>\n\n{#if rejectionMessage}\n\t<p class=\"text-danger-readable text-sm\">{rejectionMessage}</p>\n{/if}\n```\n\n### Document Upload Form\n```svelte\n<script lang=\"ts\">\n\tlet documents = $state<File[]>([]);\n\n\tasync function handleSubmit(event: SubmitEvent) {\n\t\tevent.preventDefault();\n\t\tconst formData = new FormData();\n\t\tdocuments.forEach((file, i) => {\n\t\t\tformData.append(`document${i}`, file);\n\t\t});\n\n\t\tawait fetch('/api/upload', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: formData\n\t\t});\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<FileInput\n\t\tmode=\"multiple\"\n\t\tmaxFiles={10}\n\t\tlabel=\"Supporting Documents\"\n\t\tbind:value={documents}\n\t\ttypes={['.pdf', '.doc', '.docx']}\n\t\tdescription=\"Upload relevant documents\"\n\t\trequired\n\t/>\n\n\t<Button type=\"submit\" disabled={documents.length === 0}>\n\t\tSubmit Application\n\t</Button>\n</form>\n```\n\n### Image Gallery Upload\n```svelte\n<script lang=\"ts\">\n\tlet images = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={20}\n\tlabel=\"Upload Photos\"\n\tbind:value={images}\n\ttypes={['image/*']}\n\tmaxSize={10 * 1024 * 1024}\n\tdescription=\"Select multiple images (max 10MB each)\"\n/>\n\n<p>Selected: {images.length} images</p>\n```\n\n### With Upload Progress\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n\tlet progress = $state(0);\n\tlet uploading = $state(false);\n\n\tasync function handleUpload(selectedFile: File | null) {\n\t\tif (!selectedFile) return;\n\t\tuploading = true;\n\t\tprogress = 0;\n\n\t\tconst formData = new FormData();\n\t\tformData.append('file', selectedFile);\n\n\t\t// Simulate upload progress\n\t\tconst interval = setInterval(() => {\n\t\t\tprogress += 10;\n\t\t\tif (progress >= 100) {\n\t\t\t\tclearInterval(interval);\n\t\t\t\tuploading = false;\n\t\t\t}\n\t\t}, 200);\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Upload File\"\n\tbind:value={file}\n\tonValueChange={handleUpload}\n\tdisabled={uploading}\n/>\n\n{#if uploading}\n\t<Meter value={progress} />\n{/if}\n```\n\n### CV Upload\n```svelte\n<script lang=\"ts\">\n\tlet cv = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload CV/Resume\"\n\tbind:value={cv}\n\ttypes={['.pdf', '.doc', '.docx']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"PDF or Word document, max 5MB\"\n\trequired\n/>\n```\n\n### Attachment Field\n```svelte\n<script lang=\"ts\">\n\tlet attachments = $state<File[]>([]);\n\n\tfunction removeFile(index: number) {\n\t\tattachments = attachments.filter((_, i) => i !== index);\n\t}\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={Infinity}\n\tlabel=\"Attachments\"\n\ttypes={['*/*']}\n\tbind:value={attachments}\n\tdescription=\"Add any supporting files\"\n/>\n\n{#if attachments.length > 0}\n\t<div class=\"file-list\">\n\t\t{#each attachments as file, i}\n\t\t\t<div class=\"file-item\">\n\t\t\t\t<span>{file.name}</span>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tonclick={() => removeFile(i)}\n\t\t\t\t>\n\t\t\t\t\tRemove\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n{/if}\n```\n\n## Drag and Drop\n\nFileInput supports drag-and-drop:\n- Drag files over the drop zone\n- Visual feedback while dragging (the dropzone reflects an idle / potential / valid / invalid state)\n- Drop to select files\n- Works alongside click-to-browse (disable with `clickable={false}`)\n\n## File List\n\nOnce files are selected the dropzone shows them inline:\n- Images show a thumbnail preview\n- Other files show their name\n- File size displayed\n- Remove button for each file\n- In multiple mode, an \"Add more files\" button appears while below `maxFiles`\n\n## Validation\n\nFileInput validates:\n- **required**: At least one file selected\n- **types**: File type matches the accepted types (rejected with reason 'type')\n- **maxSize**: File size within limit (rejected with reason 'size')\n- **maxFiles**: Number of files in multiple mode (rejected with reason 'limit')\n- Duplicate files (same name and size) are rejected with reason 'duplicate'\n\nRejected files never enter `value`; listen to `onReject` to surface them.\n\n## File Type Patterns\n\nEntries accepted in `types`:\n- `'image/*'` - All images\n- `'image/png'`, `'image/jpeg'` - Specific image types\n- `'.pdf'` - PDF files\n- `'.pdf'`, `'.doc'`, `'.docx'` - Documents\n- `'video/*'` - Videos\n- `'audio/*'` - Audio files\n- `'*/*'` - Any file\n\n## Accessibility\n\n- Proper label association\n- Keyboard accessible (Enter/Space to open file picker)\n- ARIA attributes for drop zone\n- File selection announced to screen readers\n- Error states communicated\n\n## Notes\n\n- Supports drag-and-drop file upload\n- Preview images before upload\n- Validates file types and sizes\n- Works with FormData for upload\n- Can handle single or multiple files\n- File objects are returned for processing\n\n## Theme Customization\n\nThe FileInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **inputContainer**: The dropzone container\n- **placeholder**: The empty-state placeholder (icon and text)\n- **fileList**: The list wrapping the selected files\n- **file**: Each selected file row\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n### Available Variants\n\n**inputContainer**:\n- base: Base classes for the dropzone\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Minimum height\n  - state: 'idle' | 'potential' | 'valid' | 'invalid' - Drag state styling\n  - disabled: boolean - Disabled state styling\n\n**placeholder**:\n- base: Base classes for the placeholder\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size and gap\n\n**fileList**:\n- base: Base classes for the file list\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap between rows\n\n**file**:\n- base: Base classes for each file row\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding, text size and gap\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<FileInput\n  label=\"Upload Files\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg',\n      state: {\n        valid: 'border-primary bg-primary/10'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Dropzone Styling**:\n```svelte\n<FileInput\n  label=\"Custom Upload\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed border-neutral-muted rounded-xl p-8 hover:border-primary transition-colors',\n      state: {\n        potential: 'border-primary',\n        valid: 'border-primary bg-primary/5',\n        invalid: 'border-danger bg-danger/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4 grid grid-cols-2 gap-4'\n    },\n    file: {\n      base: 'rounded-md border border-neutral-muted'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setFileInputTheme } from '../components/Form/File/index.ts';\n\n  setFileInputTheme({\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg transition-all',\n      state: {\n        valid: 'border-primary bg-primary/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly form: "\n# Form\n\nForm renders configured entasis fields inside a div, owns their state and validation, and submits programmatically. It provides managed Enter-key navigation and submission, but not native form events, browser constraint validation, or FormData behavior.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport {\n\t\tForm,\n\t\ttype FormState,\n\t\ttype InferFormValue,\n\t\ttype LiveFormValue\n\t} from 'entasis/form';\n\n\tconst inputs = {\n\t\tidentity: {\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Identity',\n\t\t\tdescription: 'Core account details',\n\t\t\tcolumns: 2,\n\t\t\tinputs: {\n\t\t\t\tname: { type: 'text', label: 'Name', required: true },\n\t\t\t\temail: { type: 'email', label: 'Email', required: true }\n\t\t\t}\n\t\t}\n\t} as const;\n\n\tlet value = $state<LiveFormValue<typeof inputs>>({ name: 'Ada' });\n\tlet form = $state<FormState<typeof inputs>>();\n\tlet submitted = $state<InferFormValue<typeof inputs> | null>(null);\n</script>\n\n<Form\n\t{inputs}\n\tbind:value\n\tbind:form\n\tvariant=\"card\"\n\tlayout=\"horizontal\"\n\tsize=\"small\"\n\tdensity=\"normal\"\n\tactions={[\n\t\t{\n\t\t\tchildren: 'Save',\n\t\t\tonAction: (payload) => payload.submit()\n\t\t}\n\t]}\n\tonSubmit={(validatedValue) => {\n\t\tsubmitted = validatedValue;\n\t}}\n/>\n```\n\n## Props\n\n- **inputs** (required): ordered object keyed by entry name. Entries may be value-bearing fields, visual groups, action-button rows, or custom snippets. Only fields contribute keys to the live and validated values.\n- **value** (bindable): controlled partial live value. Visible mounted fields are published; hidden fields are omitted. A supplied top-level value takes precedence over an input's configured value.\n- **defaultValue**: initial partial live value when value is omitted.\n- **onValueChange**: called once when a user changes the visible live value. Parent value updates do not emit it.\n- **form** (bindable): the FormState instance.\n- **onSubmit**: called with the validated visible payload. Its return value is ignored; rejected promises propagate.\n- **size**: small, normal (default), or large. Controls Form typography and becomes the fallback size for fields and actions. An explicit field or action size takes precedence.\n- **density**: compact, normal (default), or comfortable. Controls gaps between the Form header, fields, footer, and actions independently from size.\n- **variant**: plain (default), sectioned, or card. All variants consume the shared Card typography. Plain remains transparent without separators. Sectioned stays transparent and adds edge-to-edge separators between the header, visible top-level fields or groups, and footer. Card adds the same separators inside the Card surface and inset; Card header/footer padding applies only to that variant. Separators do not appear between fields inside a group.\n- **layout**: vertical (default) or horizontal. Horizontal keeps one field per row and places labels to the left once each field is at least 32rem wide; fields remain stacked in narrower forms.\n- **actions**: optional array of Button props. Each action's onAction receives the live FormState, so a submit action calls form.submit(). Actions are disabled while the form is submitting; their own loading and disabled props are composed with that protection.\n- **class**: additional classes on the root div.\n- **theme**: Form theme overrides for root, header, title, description, group, group label/description/fields, top-level items, custom entries, footer, and actions. Global Card typography and section-rhythm changes flow into all Form variants before Form-specific overrides are composed; Card surface changes apply only to the card variant.\n\nThe **header**, **title**, **description**, **children**, and **footer** snippets each receive the FormState instance directly. No-argument snippets remain valid.\n\nField wrapper attributes and native control attributes have separate owners. Use fieldAttrs for the shared Field wrapper. Controls expose a typed bag for their actual native element, such as inputAttrs on TextInput, textareaAttrs on TextArea, and triggerAttrs on the custom Select's combobox button.\n\n## FormState\n\n- **value**: current visible partial value.\n- **loading**: true while the active submission handler is pending.\n- **hasError**: true after validation fails; reset after successful validation.\n- **validate()**: returns the validated visible payload, or false.\n- **submit()**: returns a promise of the validated visible payload, or false. Concurrent calls share the active promise.\n\n## Enter-key behavior\n\nOn an enabled, editable single-line input, Enter validates the current field. A valid field moves focus to the next visible enabled field, while an invalid field remains focused and displays its errors. Enter on a valid final navigable field calls form.submit(). Multiline editors and controls that already own Enter, such as selects and combobox menus, keep their native component behavior. Modified, repeated, and IME-composition Enter events are ignored.\n\n## Programmatic Dialog forms\n\nMount one Ask host near the application root, then call ask() from any client-side event. Both exports come from entasis/form:\n\n```svelte\n<script lang=\"ts\">\n\timport { Ask, ask } from 'entasis/form';\n\n\tconst inputs = {\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\temail: { type: 'email', label: 'Email', required: true }\n\t} as const;\n\n\tasync function editProfile() {\n\t\tconst outcome = await ask({\n\t\t\ttitle: 'Edit profile',\n\t\t\tdescription: 'Review the account details.',\n\t\t\tinputs,\n\t\t\tvalue: { name: 'Ada' },\n\t\t\tconfirm: 'Save',\n\t\t\tcancel: 'Cancel'\n\t\t});\n\n\t\tif (outcome.submitted) {\n\t\t\t// outcome.value is InferFormValue<typeof inputs>\n\t\t} else {\n\t\t\t// outcome.value is the partial, visible live value at cancellation\n\t\t}\n\t}\n</script>\n\n<Ask />\n```\n\nAskOptions accepts inputs, value, onSubmit, class, size, density, variant, layout, and theme with the same contracts as Form. title is required for the Dialog's accessible name. confirm and cancel accept a string or Button presentation props plus text. Their click, loading, link, and native type behavior is owned by Ask. Set type on the mounted Ask host for its default Dialog type; a request's optional dialog object may override type and also accepts responsive, size, and scroll.\n\nValidation failures keep the Dialog open and focus the first invalid field. A successful submission resolves with the validated visible payload. Cancel, the close button, and Escape resolve with submitted: false and the current partial visible value. Outside-click and swipe dismissal are disabled. While submission is active, all close paths and actions are protected. Rejected onSubmit promises reject ask() after the Dialog closes. Concurrent ask() calls render as independent stacked Dialogs. Calling ask() during SSR or without one mounted host rejects clearly.\n\n## Visibility and values\n\nThe visible prop may be a boolean or a predicate receiving the complete private value cache:\n\n```svelte\n<Form\n\tinputs={{\n\t\tcontactMethod: {\n\t\t\ttype: 'select',\n\t\t\tlabel: 'Contact method',\n\t\t\titems: [\n\t\t\t\t{ label: 'Email', value: 'email' },\n\t\t\t\t{ label: 'Phone', value: 'phone' }\n\t\t\t]\n\t\t},\n\t\tphone: {\n\t\t\ttype: 'phone',\n\t\t\tlabel: 'Phone',\n\t\t\tvisible: (value) => value.contactMethod === 'phone'\n\t\t}\n\t}}\n/>\n```\n\nHidden field values are preserved privately and restored when shown again. Hidden fields are excluded from value, validation, and submission. Removing an input definition removes its cached value.\n\n## Field label position\n\nAll configured inputs inherit the Form layout through the shared Field wrapper. Set labelPosition: 'top' or 'left' on an individual input to override the Form layout without affecting value inference:\n\n```ts\nexport const inputs = {\n\tname: { type: 'text', label: 'Name' },\n\tnotes: { type: 'textarea', label: 'Notes', labelPosition: 'top' }\n} as const;\n```\n\nThe left position becomes a two-column label/control layout once the field is at least 32rem wide and remains stacked in narrower forms. The breakpoint is a container query against the field, so a form in a narrow drawer stacks on any screen. Form uses layout rather than orientation so controls such as Slider retain their own orientation prop.\n\n## Visual groups\n\nA group renders a transparent semantic fieldset with a required legend label and an optional description. Its label and description use the same size scale as ordinary fields; grouping does not add another card or padded container:\n\n```ts\nimport type { InferFormValue } from 'entasis/form';\n\nexport const inputs = {\n\tcontact: {\n\t\ttype: 'group',\n\t\tlabel: 'Contact details',\n\t\tdescription: 'How we can reach you',\n\t\tcolumns: 1,\n\t\tinputs: {\n\t\t\temail: { type: 'email', label: 'Email', required: true },\n\t\t\tphone: { type: 'phone', label: 'Phone' }\n\t\t}\n\t}\n} as const;\n\ntype Value = InferFormValue<typeof inputs>;\n// { email: string; phone: string | null }\n```\n\nThe group key is visual only and never appears in value or submission output. Descendant field names remain top-level, so duplicate names across groups are rejected. Group visibility hides all descendants, preserves field values in the private cache, and makes inferred field keys optional. In a vertical form layout, set columns to 1, 2, 3, or 4 to control the equal-width grid; the count is a container query against the form width (2 columns from 42rem, 3 from 56rem, 4 from 72rem), and groups collapse to one column in narrower forms. Horizontal form layouts ignore columns and always render group entries in one column. A child class may span tracks when an entry needs more room. Groups may contain fields, action rows, and custom snippets; nested groups are intentionally unsupported.\n\n## Custom value fields\n\nUse type: 'field' when Form must own a value but a custom control must render it. fieldType selects the existing FieldState schema and inferred value type. The snippet receives that registered FieldState controller:\n\n```svelte\n{#snippet handleControl(field)}\n\t<input\n\t\t{...field.controlAttrs}\n\t\t{@attach field.control}\n\t\tbind:value={field.value}\n\t/>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\thandle: {\n\t\t\ttype: 'field',\n\t\t\tfieldType: 'text',\n\t\t\tlabel: 'Handle',\n\t\t\trequired: true,\n\t\t\tsnippet: handleControl\n\t\t}\n\t}}\n/>\n```\n\nThe controller exposes value, disabled, required, validation state, accessible ids, controlAttrs, and the control attachment. The entry participates in bind:value, visibility, validation, submission, and InferFormValue through the same FieldState owner as built-in controls.\n\n## Non-value entries\n\nUse type: 'action' to place a labelled row of buttons in the ordered inputs flow. It accepts optional label and description content plus the same Form-aware action objects as the top-level actions prop. Its label position follows the Form layout unless labelPosition overrides it. Form size is the default button size, action density follows the Form, and loading or disabled protection cannot be overridden while the Form is submitting.\n\nUse type: 'custom' to place a snippet in the flow. The snippet receives the live public FormState and owns its own surface and padding; Form adds neither. Both entry types support class and visible, may appear at the top level or inside a group, and are omitted from bind:value, validation, and inferred submission output:\n\n```svelte\n{#snippet accountStatus(form)}\n\t<p>{Object.keys(form.value).length} visible values</p>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\tstatus: { type: 'custom', snippet: accountStatus },\n\t\tcontrols: {\n\t\t\ttype: 'action',\n\t\t\tlabel: 'Account actions',\n\t\t\tdescription: 'Validate or save this account.',\n\t\t\tactions: [\n\t\t\t\t{ children: 'Validate', variant: 'soft', onAction: (payload) => payload.validate() },\n\t\t\t\t{ children: 'Save', onAction: (payload) => payload.submit() }\n\t\t\t]\n\t\t}\n\t}}\n/>\n```\n\nFor this configuration, InferFormValue contains name only; status and controls are presentation keys.\n\n## Validation\n\nBuilt-in validation uses the field schema and preserves its issue messages. onValidate may return:\n\n- false, null, undefined, an empty string, or an empty array for valid input;\n- true for a generic error;\n- a string for one error;\n- a string array for multiple errors.\n\nValidation runs on submission. After a field has an error, it revalidates while edited. Failed submission scrolls to and focuses the first invalid control.\n\n## Supported input types\n\ntext, email, url, password, number, rating, voice, slider, slider-range, textarea, rich-text, select, combobox, radio, checkboxes, checkbox, switch, phone, calendar, calendar-range, date, datetime, color, file, files, tag-group, tag, keyvalue, pin, and time.\n\nAlternative displays are display: 'selector' for date and calendar-range, and display: 'picker' for color.\n\nfield is the custom value-bearing entry. group, action, and custom are structural visual nodes rather than value-bearing input types.\n";
+    readonly 'key-value-input': "\n# KeyValueInput Component\n\nAn editable list of key/value string pairs. Each row renders a key text input, a value text input, and a remove button; a full-width Add button below the rows appends a new empty pair. There is no dropdown, no async, and no option list — just plain text entry.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { KeyValueInput } from 'entasis/key-value-input';\n\tlet value = $state(null);\n</script>\n\n<KeyValueInput bind:value={value} />\n```\n\n## Props\n\n### Core Props\n\n- **value**: `KeyValuePair[] | null` (default: `null`, bindable)\n  - The current list of `{ key, value }` pairs. `null` is treated as an empty list.\n  - The array is never mutated in place — every add/remove assigns a fresh array.\n  - Replacing `value` updates the editor rows without emitting `onValueChange`. Use `defaultValue` to initialize an uncontrolled editor once.\n\n### Content Props\n\n- **keyPlaceholder**: `string` (optional)\n  - Placeholder for the key input. Defaults to the localized \"Key\" label.\n\n- **valuePlaceholder**: `string` (optional)\n  - Placeholder for the value input. Defaults to the localized \"Value\" label.\n\n- **addLabel**: `string` (optional)\n  - Label for the Add button. Defaults to the localized \"Add\" label.\n\n### Behavior Props\n\n- **maxRows**: `number` (optional)\n  - Maximum number of rows. Once reached, the Add button is disabled. There is no minimum.\n\n### Field Props\n\n- **required**: `boolean` (default: `false`)\n- **disabled**: `boolean`\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n- **name**: `string`\n- **errors**: `string[] | boolean` (bindable)\n- **focused**: `boolean` (bindable)\n- **description**: `string`\n\n### Event Props\n\n- **onValueChange**: `(value: KeyValuePair[]) => void`\n  - Called when the pairs change.\n\n- **onValidate**: `(value: KeyValuePair[]) => string[] | boolean`\n  - Custom validation function.\n\n### i18n / Theme Props\n\n- **i18n**: `Partial<Messages>`\n  - Per-instance message overrides merged over the global catalog (`add`, `keyLabel`, `valueLabel`, `remove`).\n\n- **theme**: `KeyValueInputThemeProps`\n  - Customize styling for: inputContainer, row, input, removeButton, addButton.\n\n## Examples\n\n### Empty (Start With Add)\n\n```svelte\n<script>\n\tlet value = $state(null);\n</script>\n\n<KeyValueInput bind:value={value} />\n```\n\n### Pre-filled Value\n\n```svelte\n<script>\n\tlet value = $state([\n\t\t{ key: 'Content-Type', value: 'application/json' },\n\t\t{ key: 'Accept', value: '*/*' }\n\t]);\n</script>\n\n<KeyValueInput bind:value={value} />\n```\n\n### Limited Number of Rows\n\n```svelte\n<KeyValueInput maxRows={3} bind:value={value} />\n```\n\n### Custom Placeholders\n\n```svelte\n<KeyValueInput keyPlaceholder=\"Header\" valuePlaceholder=\"Value\" addLabel=\"Add header\" bind:value={value} />\n```\n\n### Object Output\n\nThe value is an array of pairs; convert it to a plain object with `Object.fromEntries`:\n\n```svelte\n<script>\n\tlet value = $state([{ key: 'a', value: '1' }]);\n\tconst object = $derived(Object.fromEntries((value ?? []).map((p) => [p.key, p.value])));\n</script>\n\n<KeyValueInput bind:value={value} />\n<pre>{JSON.stringify(object)}</pre>\n```\n\n## Keyboard Interactions\n\n- **Enter** (in a non-empty value input): Prevents the enclosing form from submitting, appends a new empty row, and focuses its key input.\n- **Enter** (in a key or empty value input): Prevents the enclosing form from submitting without adding a row.\n- **Arrow Right** (at the end of an input): Moves to the next input and places the caret at its start.\n- **Arrow Left** (at the start of an input): Moves to the previous input and places the caret at its end.\n- **Arrow Up / Arrow Down**: Moves to the same field in the previous or next row while preserving the caret offset when possible.\n- **Backspace** (in an empty input): Moves to the previous input. When the entire row is empty, removes the row and focuses the previous row's value input when available.\n\n## Accessibility\n\n- The rows collection is a real list (`role=\"list\"` / `role=\"listitem\"`), not a listbox.\n- Each row's remove control is a real `<button type=\"button\">` with an `aria-label` of \"Remove <key>\" (falling back to the \"Key\" label when the key is empty).\n- The Add button is a real `<button type=\"button\">`.\n- Inputs use `autocomplete=\"off\"` and `data-1p-ignore`.\n\n## Notes\n\n- **Stable-id keying**: Rows are keyed by a stable per-instance uid, not by the key string. Keys can be empty or duplicated while typing, and duplicate/empty keys in a keyed `{#each}` would crash the renderer.\n- **Controlled values**: Parent value replacements update the editor. User edits publish one change callback; unchanged pairs do not publish another callback.\n- **Fresh arrays**: Add and remove always assign a new array so binding, reactivity, and form updates fire correctly.\n- **Animations**: Rows animate on reorder (`animate:flip`) and on enter/leave (`transition:scale`).\n- **maxRows**: Disables the Add button once the row count reaches `maxRows`.\n- **Object output**: Use `Object.fromEntries((value ?? []).map((p) => [p.key, p.value]))` to get a plain object.\n\n## Theme Customization\n\nThe KeyValueInput uses a theme object customizable via the `theme` prop or a global theme.\n\n### Theme Structure\n\n- **inputContainer**: The vertical stack holding the rows and Add button (no border/background of its own).\n- **row**: The animated flex wrapper around each key/value/remove trio.\n- **input**: The bordered key and value text inputs.\n- **removeButton**: The square remove (X) button.\n- **addButton**: The full-width Add button.\n\n### Global Theme Setting\n\n```svelte\n<script>\n\timport { setKeyValueInputTheme } from 'entasis/key-value-input';\n\n\tsetKeyValueInputTheme({\n\t\taddButton: {\n\t\t\tbase: 'rounded-lg border-2'\n\t\t}\n\t});\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'multi-step-form': "\n# MultiStepForm\n\nMultiStepForm owns one Form per step, displays them through Stepper, validates visited steps before navigation, and validates every step before final submission. Field names must be unique across steps.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport {\n\t\tMultiStepForm,\n\t\ttype FormStep,\n\t\ttype MergedMultiStepFormInputs\n\t} from 'entasis/multi-step-form';\n\timport type { FormInputs, InferFormValue, LiveFormValue } from 'entasis/form';\n\n\tconst accountInputs = {\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\temail: { type: 'email', label: 'Email', required: true }\n\t} satisfies FormInputs;\n\tconst preferenceInputs = {\n\t\tnewsletter: { type: 'switch', label: 'Newsletter' }\n\t} satisfies FormInputs;\n\n\tconst items: [\n\t\tFormStep<typeof accountInputs>,\n\t\tFormStep<typeof preferenceInputs>\n\t] = [\n\t\t{\n\t\t\ttitle: 'Account',\n\t\t\tinputs: accountInputs\n\t\t},\n\t\t{\n\t\t\ttitle: 'Preferences',\n\t\t\tinputs: preferenceInputs\n\t\t}\n\t];\n\n\ttype Inputs = MergedMultiStepFormInputs<typeof items>;\n\tlet value = $state<LiveFormValue<Inputs>>({});\n\tlet submitted = $state<InferFormValue<Inputs> | null>(null);\n</script>\n\n<MultiStepForm\n\t{items}\n\tbind:value\n\tonSubmitForm={(validatedValue) => {\n\t\tsubmitted = validatedValue;\n\t}}\n/>\n```\n\n## Props\n\n- **items** (required): ordered FormStep array. Duplicate field names across steps throw.\n- **value** (bindable): controlled partial values merged across all steps, synchronized in both directions.\n- **defaultValue**: initial merged values when value is omitted.\n- **onValueChange**: called when the merged live value changes.\n- **onSubmitForm**: called with the validated merged payload on the final step only.\n- **onSubmitStep**: receives one `{ value, step, index }` payload after the step's onBeforeChange. `value` contains validated values from visited steps; unvisited keys remain optional. Return false to block advancing.\n- **showMeter**: whether to render the progress meter. Defaults to true.\n- **meterColor**: meter color token. Defaults to neutral.\n- **previousText**, **nextText**, **submitText**: navigation labels.\n- **variant**: visual presentation of the multi-step shell. Card renders one shared Card surface around the fixed meter, transitioning step content, and navigation footer. Header, meter, step fields, and footer share one horizontal inset in every variant. Each step reuses Form's card spacing and edge-to-edge separator rules without creating another Card surface. Supports plain, sectioned, and card; defaults to plain.\n- **previousButtonProps**, **nextButtonProps**, **submitButtonProps**: Button props. Custom click handlers are composed with internal behavior; disabled and loading protection cannot be overridden.\n- **class**: additional classes on the root.\n- **theme**: MultiStepForm theme overrides plus optional nested form theme overrides.\n\nThe **header**, **children**, and **footer** snippets receive the MultiStepFormState instance directly. Supplying a header or footer replaces that region's default meter or controls. In the card variant, header and footer content remains inside the shared card while only the active step content transitions.\n\n## FormStep\n\n```ts\ntype FormStep<I extends FormInputs> = {\n\ttitle?: string;\n\tdescription?: string;\n\tinputs: I;\n\tonBeforeChange?: (context: {\n\t\tvalue: InferFormValue<I>;\n\t\tform: FormState<I>;\n\t\tnext: () => void;\n\t}) => void | Promise<void>;\n};\n```\n\nWhen onBeforeChange is present, navigation remains blocked unless the hook calls next(). After permission is granted, onSubmitStep may still block by returning false.\n\n## Submission behavior\n\n- Next validates every visited step. Hooks do not run and the active step does not change when validation fails.\n- Final submission validates every step before calling onSubmitForm; partial invalid data is never submitted.\n- Enter follows Form's field-navigation behavior. A terminal Enter validates the current and visited steps, advances when permitted, and submits from the final step.\n- Rejected hooks and submit handlers propagate their errors, while loading always resets.\n- Concurrent calls to submit() share one active promise.\n\n## MultiStepFormState\n\n- **steps**: current step definitions.\n- **stepper**: bound Stepper state, including value, next(), and previous().\n- **value**: merged live partial value.\n- **loading**: true while a navigation or final-submit hook is pending.\n- **isLastStep**: whether the current step is final.\n- **progress** and **meterSteps**: values used by the default meter.\n- **submit()**: validates and advances or submits, returning the validated visited-step payload or false. The final-step result is the complete validated payload.\n";
+    readonly 'number-input': "\n# NumberInput Component\n\nThe NumberInput component is a numeric input field with +/- controls, min/max validation, and formatting options.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet quantity = $state(1);\n</script>\n\n<NumberInput label=\"Quantity\" bind:value={quantity} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: number (bindable) - Input value\n- **min**: number - Minimum allowed value\n- **max**: number - Maximum allowed value\n- **step**: number - Native number input step for keyboard and browser interactions\n- **increment**: number (default: step ?? 1) - Amount changed by the +/- buttons\n- **showControls**: boolean (default: true) - Whether to render the +/- buttons\n\n### Display Props\n- **placeholder**: string - Placeholder text\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large' - Input size\n\n### Content Slots\n- **prefix**: Snippet - Content before input (e.g., currency symbol)\n- **suffix**: Snippet - Content after input (e.g., unit)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input type=\"number\" />\n\t\t<Controls>\n\t\t\t<Button label=\"Decrease value\" />\n\t\t\t<Button label=\"Increase value\" />\n\t\t</Controls>\n\t\t<Suffix />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Number Input\n```svelte\n<script>\n\tlet age = $state(25);\n</script>\n\n<NumberInput label=\"Age\" bind:value={age} />\n```\n\n### With Min and Max\n```svelte\n<NumberInput \n\tlabel=\"Quantity\"\n\tbind:value={quantity}\n\tmin={1}\n\tmax={100}\n/>\n```\n\n### With Step and Button Increment\n```svelte\n<NumberInput \n\tlabel=\"Price\"\n\tbind:value={price}\n\tstep={0.01}\n\tincrement={1}\n\tmin={0}\n/>\n```\n\n### Custom Button Increment\n```svelte\n<NumberInput \n\tlabel=\"Quantity\"\n\tbind:value={quantity}\n\tincrement={5}\n/>\n```\n\n### With Prefix (Currency)\n```svelte\n<NumberInput \n\tlabel=\"Amount\"\n\tbind:value={amount}\n\tmin={0}\n\tstep={0.01}\n>\n\t{#snippet prefix()}\n\t\t<span>$</span>\n\t{/snippet}\n</NumberInput>\n```\n\n### With Suffix (Unit)\n```svelte\n<NumberInput \n\tlabel=\"Weight\"\n\tbind:value={weight}\n\tmin={0}\n>\n\t{#snippet suffix()}\n\t\t<span>kg</span>\n\t{/snippet}\n</NumberInput>\n```\n\n### Required Field\n```svelte\n<NumberInput \n\tlabel=\"Number of Guests\"\n\tbind:value={guests}\n\tmin={1}\n\trequired\n/>\n```\n\n### Disabled State\n```svelte\n<NumberInput \n\tlabel=\"Score\"\n\tvalue={100}\n\tdisabled\n/>\n```\n\n### Product Quantity Selector\n```svelte\n<script>\n\tlet quantity = $state(1);\n\tlet price = 29.99;\n\t\n\tconst total = $derived(quantity * price);\n</script>\n\n<div>\n\t<NumberInput \n\t\tlabel=\"Quantity\"\n\t\tbind:value={quantity}\n\t\tmin={1}\n\t\tmax={10}\n\t\tdescription={`Total: $${total.toFixed(2)}`}\n\t/>\n</div>\n```\n\n### Age Input\n```svelte\n<NumberInput \n\tlabel=\"Age\"\n\tbind:value={age}\n\tmin={18}\n\tmax={120}\n\tdescription=\"You must be 18 or older\"\n\trequired\n/>\n```\n\n### Temperature Control\n```svelte\n<NumberInput \n\tlabel=\"Temperature\"\n\tbind:value={temperature}\n\tmin={-10}\n\tmax={40}\n\tstep={0.5}\n>\n\t{#snippet suffix()}\n\t\t<span>°C</span>\n\t{/snippet}\n</NumberInput>\n```\n\n### Percentage Input\n```svelte\n<NumberInput \n\tlabel=\"Discount\"\n\tbind:value={discount}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n>\n\t{#snippet suffix()}\n\t\t<span>%</span>\n\t{/snippet}\n</NumberInput>\n```\n\n### Rating Input\n```svelte\n<NumberInput \n\tlabel=\"Rating\"\n\tbind:value={rating}\n\tmin={1}\n\tmax={5}\n\tstep={0.5}\n\tdescription=\"Rate from 1 to 5 stars\"\n/>\n```\n\n## Validation\n\nNumberInput automatically validates:\n- **min**: Value must be >= min\n- **max**: Value must be <= max\n- **step**: Value must align with step increments\n- **required**: Non-null value\n\n## Keyboard Controls\n\n- **Arrow Up**: Increment by step\n- **Arrow Down**: Decrement by step\n- **Page Up**: Increment by step * 10\n- **Page Down**: Decrement by step * 10\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for min, max, and current value\n- Keyboard navigation support\n- Screen reader announcements for value changes\n- Control buttons are focusable and keyboard accessible\n\n## Notes\n\n- Native HTML number input for best compatibility\n- +/- controls provide visual increment/decrement\n- Automatically respects min/max bounds\n- Supports decimal values with step\n- Can be styled with prefix/suffix for units\n\n## Theme Customization\n\nThe NumberInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container height and size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<NumberInput \n  label=\"Quantity\"\n  bind:value={quantity}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'h-8 px-4'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<NumberInput \n  label=\"Custom Number\"\n  bind:value={value}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setNumberInputTheme } from '../components/Form/NumberInput/index.ts';\n  \n  setNumberInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'h-8 px-4'\n      }\n    },\n    input: {\n      base: 'text-right'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'password-input': "\n# PasswordInput Component\n\nThe PasswordInput component is a specialized text input for password entry with visibility toggle functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n## Props\n\nExtends all TextInput component props:\n\n### Core Props\n- **value**: string (bindable) - Password value\n- **placeholder**: string - Placeholder text\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large'\n\n### Content Slots\n- **prefix**: Snippet - Content before input (e.g., lock icon)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input type=\"password\" />\n\t\t<VisibilityToggle />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Password Input\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n### Required Password\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\trequired\n/>\n```\n\n### With Placeholder\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tplaceholder=\"Enter your password\"\n\tbind:value={password}\n/>\n```\n\n### With Description\n```svelte\n<PasswordInput \n\tlabel=\"New Password\"\n\tdescription=\"Must be at least 8 characters\"\n\tbind:value={password}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password}>\n\t{#snippet prefix()}\n\t\t{@render lockIcon()}\n\t{/snippet}\n</PasswordInput>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet password = $state('');\n\tlet error = $derived(\n\t\tpassword && password.length < 8 \n\t\t\t? 'Password must be at least 8 characters'\n\t\t\t: ''\n\t);\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\terror={error}\n/>\n```\n\n### Login Form\n```svelte\n<script>\n\tlet email = $state('');\n\tlet password = $state('');\n\t\n\tfunction handleLogin() {\n\t\t// Login logic\n\t}\n</script>\n\n<form onsubmit={handleLogin}>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={password}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n### Password Strength Indicator\n```svelte\n<script>\n\tlet password = $state('');\n\t\n\tfunction getPasswordStrength(pwd) {\n\t\tif (!pwd) return { label: '', strength: 0 };\n\t\tif (pwd.length < 6) return { label: 'Weak', strength: 1 };\n\t\tif (pwd.length < 10) return { label: 'Medium', strength: 2 };\n\t\treturn { label: 'Strong', strength: 3 };\n\t}\n\t\n\tlet strength = $derived(getPasswordStrength(password));\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\tdescription=\"Strength: {strength.label}\"\n/>\n\n<Meter \n\tvalue={strength.strength * 33.33}\n\tmax={100}\n/>\n```\n\n### Change Password Form\n```svelte\n<script>\n\tlet currentPassword = $state('');\n\tlet newPassword = $state('');\n\tlet confirmPassword = $state('');\n\t\n\tlet passwordMismatch = $derived(\n\t\tnewPassword && confirmPassword && newPassword !== confirmPassword\n\t);\n</script>\n\n<form>\n\t<PasswordInput \n\t\tlabel=\"Current Password\"\n\t\tbind:value={currentPassword}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"New Password\"\n\t\tbind:value={newPassword}\n\t\tdescription=\"Must be at least 8 characters\"\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tbind:value={confirmPassword}\n\t\terror={passwordMismatch ? 'Passwords do not match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Update Password</Button>\n</form>\n```\n\n### Sign Up Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tusername: '',\n\t\temail: '',\n\t\tpassword: '',\n\t\tconfirmPassword: ''\n\t});\n\t\n\tfunction validatePassword() {\n\t\tif (formData.password.length < 8) {\n\t\t\treturn 'Password must be at least 8 characters';\n\t\t}\n\t\tif (!/[A-Z]/.test(formData.password)) {\n\t\t\treturn 'Password must contain an uppercase letter';\n\t\t}\n\t\tif (!/[0-9]/.test(formData.password)) {\n\t\t\treturn 'Password must contain a number';\n\t\t}\n\t\treturn '';\n\t}\n\t\n\tlet passwordError = $derived(validatePassword());\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Username\"\n\t\tbind:value={formData.username}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={formData.email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={formData.password}\n\t\terror={passwordError}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tbind:value={formData.confirmPassword}\n\t\terror={formData.password !== formData.confirmPassword ? 'Passwords must match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" disabled={!!passwordError}>\n\t\tCreate Account\n\t</Button>\n</form>\n```\n\n## Visibility Toggle\n\nThe visibility toggle button:\n- Shows an eye icon when password is hidden\n- Shows an eye-off icon when password is visible\n- Toggles between `type=\"password\"` and `type=\"text\"`\n- Is always rendered; there is no prop to hide it\n\n## Validation\n\nPasswordInput supports:\n- **required**: Non-empty password\n- Custom validation via error prop\n- Pattern matching for complexity requirements\n\n## Security Best Practices\n\n- Never show password in plain text by default\n- Always use HTTPS in production\n- Consider password strength requirements\n- Don't limit password length unnecessarily\n- Support password managers (autocomplete=\"current-password\" or \"new-password\")\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for show/hide button\n- Password visibility state announced\n- Keyboard accessible toggle\n- Error messages announced to screen readers\n\n## Notes\n\n- Extends TextInput with password-specific features\n- Visibility toggle is accessible via keyboard\n- Type switches between \"password\" and \"text\"\n- Works with browser password managers\n- All TextInput features are available\n\n## Theme Customization\n\nThe PasswordInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme. It shares the same theme structure as TextInput.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<PasswordInput \n  label=\"Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<PasswordInput \n  label=\"Secure Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPasswordInputTheme } from '../components/Form/PasswordInput/index.ts';\n  \n  setPasswordInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      base: 'placeholder:text-gray-400'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'phone-input': "\n# PhoneInput Component\n\nThe PhoneInput component provides a formatted input field for phone numbers with country code selection and automatic formatting. [intl-tel-input](https://intl-tel-input.com/) is loaded from a CDN at runtime and never bundled. A strict Content-Security-Policy must allow `cdn.jsdelivr.net` in `script-src`.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput label=\"Phone Number\" bind:value={phone} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Phone number value\n- **country**: string (bindable, default: 'fr') - ISO country code selected in the country picker\n- **placeholder**: string - Placeholder text\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large'\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<CountrySelector />\n\t\t<PhoneNumberInput />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Phone Input\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n/>\n```\n\n### With Default Country\n```svelte\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\tcountry=\"gb\"\n/>\n```\n\n### Required Field\n```svelte\n<PhoneInput \n\tlabel=\"Contact Number\"\n\tbind:value={phone}\n\trequired\n/>\n```\n\n### With Description\n```svelte\n<PhoneInput \n\tlabel=\"Mobile Number\"\n\tdescription=\"We'll send verification code to this number\"\n\tbind:value={phone}\n/>\n```\n\n### Disabled State\n```svelte\n<PhoneInput \n\tlabel=\"Phone\"\n\tvalue=\"+1 234 567 8900\"\n\tdisabled\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet contact = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tphone: ''\n\t});\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={contact.name}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={contact.email}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Phone\"\n\t\tbind:value={contact.phone}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Submit</Button>\n</form>\n```\n\n### Multiple Phone Numbers\n```svelte\n<script>\n\tlet phones = $state({\n\t\thome: '',\n\t\tmobile: '',\n\t\twork: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Home Phone\"\n\tbind:value={phones.home}\n/>\n\n<PhoneInput \n\tlabel=\"Mobile Phone\"\n\tbind:value={phones.mobile}\n\trequired\n/>\n\n<PhoneInput \n\tlabel=\"Work Phone\"\n\tbind:value={phones.work}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet phone = $state('');\n\tlet error = $state('');\n\t\n\tfunction validatePhone(value) {\n\t\t// Simple validation - in production use a proper library\n\t\tif (!value) return '';\n\t\tif (value.length < 10) return 'Phone number is too short';\n\t\treturn '';\n\t}\n\t\n\t$effect(() => {\n\t\terror = validatePhone(phone);\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\terror={error}\n\trequired\n/>\n```\n\n### International Support\n```svelte\n<script>\n\tlet phoneNumbers = $state({\n\t\tus: '',\n\t\tuk: '',\n\t\tfr: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"US Number\"\n\tbind:value={phoneNumbers.us}\n\tcountry=\"us\"\n/>\n\n<PhoneInput \n\tlabel=\"UK Number\"\n\tbind:value={phoneNumbers.uk}\n\tcountry=\"gb\"\n/>\n\n<PhoneInput \n\tlabel=\"France Number\"\n\tbind:value={phoneNumbers.fr}\n\tcountry=\"fr\"\n/>\n```\n\n### Delivery Information\n```svelte\n<script>\n\tlet delivery = $state({\n\t\taddress: '',\n\t\tphone: '',\n\t\tnotes: ''\n\t});\n</script>\n\n<form>\n\t<TextArea \n\t\tlabel=\"Delivery Address\"\n\t\tbind:value={delivery.address}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Contact Phone\"\n\t\tdescription=\"For delivery updates\"\n\t\tbind:value={delivery.phone}\n\t\trequired\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Delivery Notes\"\n\t\tbind:value={delivery.notes}\n\t/>\n\t\n\t<Button type=\"submit\">Confirm Order</Button>\n</form>\n```\n\n## Formatting\n\nPhoneInput automatically formats numbers based on the selected country:\n- US: (123) 456-7890\n- UK: 07123 456789\n- International: +XX XXX XXX XXXX\n\n## Country Selection\n\n- Searchable dropdown of countries\n- Country flags displayed\n- International dialing codes shown\n- Detects country from phone number\n\n## Validation\n\nPhoneInput validates:\n- **required**: Non-empty phone number\n- **format**: Valid phone number format for selected country\n- **length**: Appropriate length for country\n\n## Accessibility\n\n- Proper label association\n- Country selector is keyboard accessible\n- ARIA attributes for required state\n- Error messages announced\n- Focus management between country and number\n\n## Notes\n\n- intl-tel-input loads from a CDN on first mount; nothing is bundled. A network connection is required for formatting and validation.\n- Automatically formats as user types\n- Supports international phone numbers\n- Country code is included in value\n- Validation depends on country format\n- Works with form libraries and validation schemas\n\n## Theme Customization\n\nThe PhoneInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme. It shares the same theme structure as TextInput.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<PhoneInput \n  label=\"Phone Number\"\n  bind:value={phone}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<PhoneInput \n  label=\"Contact Phone\"\n  bind:value={phone}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPhoneInputTheme } from '../components/Form/PhoneInput/index.ts';\n  \n  setPhoneInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      base: 'placeholder:text-gray-400'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'pin-input': "\n# PinInput Component\n\nPinInput is a one-time-code input built from one real text input plus visible cells. The real input owns focus, paste, autocomplete, form submission, and keyboard behavior; the cells are a derived display.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet code = $state('');\n</script>\n\n<PinInput label=\"Verification code\" bind:value={code} />\n```\n\n## Props\n\n### Core Props\n- **value**: string | null (bindable)\n  - Current code value.\n  - Clamped to the configured length.\n\n- **length**: number (default: 6)\n  - Number of visible cells and maximum input length.\n\n- **pattern**: string | RegExp (default: PIN_INPUT_DIGITS_PATTERN)\n  - Partial-value pattern used to accept typed and pasted values.\n  - Defaults to digits only.\n  - Exported constants: PIN_INPUT_DIGITS_PATTERN, PIN_INPUT_CHARS_PATTERN, PIN_INPUT_ALPHANUMERIC_PATTERN.\n\n- **pasteTransformer**: (text: string) => string\n  - Cleans pasted text before insertion.\n  - Use for values like \"123-456\" or \"123 456\".\n\n- **onComplete**: (value: string) => void\n  - Called once when the value reaches the configured length.\n\n- **onValueChange**: (value: string) => void\n  - Called when the value changes.\n\n### Input Props\n- **inputMode**: HTMLInputElement['inputMode'] (default: 'numeric')\n  - Mobile keyboard hint.\n\n- **autocomplete**: string (default: 'one-time-code')\n  - Enables OTP autofill where supported.\n\n- **mask**: boolean (default: false)\n  - Renders filled cells as bullets while preserving the real input value.\n\n### Field Props\nPinInput extends the standard field props:\n- **label**, **description**, **helper**, **error**, **errors**\n- **name**, **required**, **disabled**, **visible**\n- **size**: 'small' | 'normal' | 'large'\n- **theme** for field and pin input parts\n\n## Examples\n\n### Digits Only\n```svelte\n<PinInput\n\tlabel=\"Security code\"\n\tlength={6}\n\tbind:value={code}\n\tpasteTransformer={(text) => text.replace(/\\D/g, '')}\n/>\n```\n\n### Alphanumeric\n```svelte\n<PinInput\n\tlabel=\"Invite code\"\n\tlength={8}\n\tinputMode=\"text\"\n\tpattern={PIN_INPUT_ALPHANUMERIC_PATTERN}\n/>\n```\n\n### Masked\n```svelte\n<PinInput label=\"Recovery code\" bind:value={code} mask />\n```\n\n## Structure\n\n```\n<Field>\n  <InputContainer>\n    <div data-slot=\"pin-input\">\n      <input data-slot=\"pin-input-input\" />\n      <div data-slot=\"pin-input-cell\">\n        <span data-slot=\"pin-input-character\" />\n        <span data-slot=\"pin-input-caret\" />\n      </div>\n    </div>\n  </InputContainer>\n</Field>\n```\n\n## Accessibility\n\n- The label from Field is associated with the real input through `for/id`.\n- The visible cells are `aria-hidden`; assistive tech interacts with one text input.\n- The real input uses `autocomplete=\"one-time-code\"` by default.\n- Keyboard navigation, deletion, selection, and paste operate through the native input.\n\n## Notes\n\n- The pattern should accept partial values, not only the final full code. Use `^\\\\d+$`, not `^\\\\d{6}$`.\n- For pasted codes with spaces or hyphens, pass a `pasteTransformer`.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'radio-input': "\n# RadioInput Component\n\nThe RadioInput component provides a group of radio buttons for single-selection from multiple options.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet selected = $state('');\n</script>\n\n<RadioInput \n\tlabel=\"Choose a plan\"\n\tbind:value={selected}\n\titems={[\n\t\t{ value: 'free', label: 'Free' },\n\t\t{ value: 'pro', label: 'Pro' },\n\t\t{ value: 'enterprise', label: 'Enterprise' }\n\t]}\n/>\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Selected value\n- **items**: Array<{ value: string, label: string, description?: string, disabled?: boolean }> (required)\n\n### Layout Props\n- **mode**: 'normal' | 'card' (default: 'normal') - Visual layout style of the options\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text for the entire group\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable all options\n- **size**: 'small' | 'normal' | 'large'\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: RadioInputThemeProps & FieldThemeProps - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<RadioGroup mode=\"...\">\n\t\t<Radio>\n\t\t\t<RadioIndicator />\n\t\t\t<RadioLabel />\n\t\t\t<RadioDescription />\n\t\t</Radio>\n\t\t<Radio>...</Radio>\n\t</RadioGroup>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Radio Group\n```svelte\n<script>\n\tlet plan = $state('pro');\n</script>\n\n<RadioInput \n\tlabel=\"Select a plan\"\n\tbind:value={plan}\n\titems={[\n\t\t{ value: 'free', label: 'Free' },\n\t\t{ value: 'pro', label: 'Pro' },\n\t\t{ value: 'enterprise', label: 'Enterprise' }\n\t]}\n/>\n```\n\n### With Descriptions\n```svelte\n<RadioInput \n\tlabel=\"Subscription\"\n\tbind:value={subscription}\n\titems={[\n\t\t{ \n\t\t\tvalue: 'monthly', \n\t\t\tlabel: 'Monthly',\n\t\t\tdescription: '$10/month, cancel anytime'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'yearly', \n\t\t\tlabel: 'Yearly',\n\t\t\tdescription: '$100/year, save $20'\n\t\t}\n\t]}\n/>\n```\n\n### Horizontal Layout\n```svelte\n<RadioInput \n\tlabel=\"Gender\"\n\tbind:value={gender}\n\ttheme={{ inputContainer: { base: 'grid-cols-3' } }}\n\titems={[\n\t\t{ value: 'male', label: 'Male' },\n\t\t{ value: 'female', label: 'Female' },\n\t\t{ value: 'other', label: 'Other' }\n\t]}\n/>\n```\n\n### Required Field\n```svelte\n<RadioInput \n\tlabel=\"Shipping Method\"\n\tbind:value={shipping}\n\trequired\n\titems={[\n\t\t{ value: 'standard', label: 'Standard (5-7 days)' },\n\t\t{ value: 'express', label: 'Express (2-3 days)' },\n\t\t{ value: 'overnight', label: 'Overnight' }\n\t]}\n/>\n```\n\n### With Disabled Options\n```svelte\n<RadioInput \n\tlabel=\"Seat Selection\"\n\tbind:value={seat}\n\titems={[\n\t\t{ value: 'window', label: 'Window' },\n\t\t{ value: 'aisle', label: 'Aisle' },\n\t\t{ value: 'middle', label: 'Middle', disabled: true }\n\t]}\n/>\n```\n\n### All Disabled\n```svelte\n<RadioInput \n\tlabel=\"Account Type\"\n\tvalue=\"premium\"\n\tdisabled\n\titems={[\n\t\t{ value: 'free', label: 'Free' },\n\t\t{ value: 'premium', label: 'Premium' }\n\t]}\n/>\n```\n\n### Payment Method Selector\n```svelte\n<script>\n\tlet paymentMethod = $state('card');\n</script>\n\n<RadioInput \n\tlabel=\"Payment Method\"\n\tbind:value={paymentMethod}\n\trequired\n\titems={[\n\t\t{ \n\t\t\tvalue: 'card', \n\t\t\tlabel: 'Credit/Debit Card',\n\t\t\tdescription: 'Visa, Mastercard, Amex'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'paypal', \n\t\t\tlabel: 'PayPal',\n\t\t\tdescription: 'Pay with your PayPal account'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'bank', \n\t\t\tlabel: 'Bank Transfer',\n\t\t\tdescription: '2-3 business days processing'\n\t\t}\n\t]}\n/>\n\n{#if paymentMethod === 'card'}\n\t<TextInput label=\"Card Number\" />\n\t<TextInput label=\"CVV\" />\n{:else if paymentMethod === 'paypal'}\n\t<TextInput type=\"email\" label=\"PayPal Email\" />\n{/if}\n```\n\n### Size Options\n```svelte\n<RadioInput \n\tlabel=\"T-Shirt Size\"\n\tbind:value={size}\n\trequired\n\titems={[\n\t\t{ value: 'xs', label: 'XS' },\n\t\t{ value: 's', label: 'S' },\n\t\t{ value: 'm', label: 'M' },\n\t\t{ value: 'l', label: 'L' },\n\t\t{ value: 'xl', label: 'XL' }\n\t]}\n/>\n```\n\n### Delivery Options\n```svelte\n<script>\n\tlet delivery = $state('');\n\t\n\tconst deliveryOptions = [\n\t\t{ \n\t\t\tvalue: 'pickup', \n\t\t\tlabel: 'Store Pickup',\n\t\t\tdescription: 'Free - Ready in 2 hours'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'standard', \n\t\t\tlabel: 'Standard Delivery',\n\t\t\tdescription: '$5.99 - 5-7 business days'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'express', \n\t\t\tlabel: 'Express Delivery',\n\t\t\tdescription: '$12.99 - 2-3 business days'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'overnight', \n\t\t\tlabel: 'Overnight',\n\t\t\tdescription: '$24.99 - Next day delivery'\n\t\t}\n\t];\n</script>\n\n<RadioInput \n\tlabel=\"Delivery Method\"\n\tbind:value={delivery}\n\titems={deliveryOptions}\n\trequired\n/>\n```\n\n### Survey Question\n```svelte\n<RadioInput \n\tlabel=\"How satisfied are you with our service?\"\n\tbind:value={satisfaction}\n\trequired\n\titems={[\n\t\t{ value: '5', label: 'Very Satisfied' },\n\t\t{ value: '4', label: 'Satisfied' },\n\t\t{ value: '3', label: 'Neutral' },\n\t\t{ value: '2', label: 'Dissatisfied' },\n\t\t{ value: '1', label: 'Very Dissatisfied' }\n\t]}\n/>\n```\n\n### Settings Radio Group\n```svelte\n<RadioInput \n\tlabel=\"Notification Frequency\"\n\tbind:value={frequency}\n\tdescription=\"Choose how often you want to receive notifications\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'realtime', \n\t\t\tlabel: 'Real-time',\n\t\t\tdescription: 'Instant notifications'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'hourly', \n\t\t\tlabel: 'Hourly',\n\t\t\tdescription: 'Digest every hour'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'daily', \n\t\t\tlabel: 'Daily',\n\t\t\tdescription: 'Once per day'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'never', \n\t\t\tlabel: 'Never',\n\t\t\tdescription: 'Disable notifications'\n\t\t}\n\t]}\n/>\n```\n\n## Validation\n\nRadioInput automatically validates:\n- **required**: A value must be selected\n\n## Keyboard Navigation\n\n- **Arrow keys**: Navigate between options\n- **Space**: Select focused option\n- **Tab**: Move focus to next element\n\n## Accessibility\n\n- Proper radio group semantics\n- ARIA attributes for required state\n- Keyboard navigation support\n- Focus management\n- Screen reader announcements\n- Disabled options communicated properly\n\n## Notes\n\n- Only one option can be selected at a time\n- Each option can have its own description\n- Individual options can be disabled\n- Supports both vertical and horizontal layouts\n- Works seamlessly with Form component\n\n## Theme Customization\n\nThe RadioInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main container styles\n- **radiosInputContainer**: Options grid container styles\n- **radiosInputItem**: Individual radio wrapper styles\n- **radiosInputItemTrack**: Radio button track/background styles\n- **radiosInputItemThumb**: Radio button indicator styles\n- **radiosInputItemLabel**: Label text styles\n- **radiosInputItemDescription**: Description text styles\n- **radiosInputItemIcon**: Icon styling\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - mode: 'card' | 'normal' - Layout mode\n\n**radiosInputContainer**:\n- base: Base classes for options grid container\n- Variants:\n  - mode: 'card' | 'normal' - Grid layout based on mode\n  - disabled: boolean - Disabled state styling\n\n**radiosInputItem**:\n- base: Base classes for individual radio wrapper\n- Variants:\n  - mode: 'card' | 'normal' - Item styling based on mode\n  - checked: boolean - Selected state styling\n  - disabled: boolean - Disabled state styling\n\n**radiosInputItemTrack**:\n- base: Base classes for radio track/background\n- Variants:\n  - checked: boolean - Track styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**radiosInputItemThumb**:\n- base: Base classes for radio indicator\n- Variants:\n  - checked: boolean - Visibility and styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**radiosInputItemLabel**:\n- base: Base classes for label text\n\n**radiosInputItemDescription**:\n- base: Base classes for description text\n\n**radiosInputItemIcon**:\n- base: Base classes for icon styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<RadioInput \n  label=\"Choose Option\"\n  bind:value={value}\n  items={items}\n  theme={{\n    // The option grid lays itself out against its OWN width, not the viewport: declare the\n    // container on the root and query it on the grid, so the columns follow the field's host\n    // (a sidebar, a split pane, a dialog) instead of the device.\n    root: { base: '@container' },\n    radiosInputContainer: {\n      base: 'grid-cols-1 @md:grid-cols-3 gap-lg'\n    },\n    radiosInputItem: {\n      mode: {\n        card: 'rounded-lg border-2'\n      }\n    }\n  }}\n/>\n```\n\n**Card Mode Customization**:\n```svelte\n<RadioInput \n  mode=\"card\"\n  label=\"Plan\"\n  bind:value={plan}\n  items={items}\n  theme={{\n    radiosInputItem: {\n      checked: {\n        true: 'ring-2 ring-primary bg-primary/10'\n      },\n      mode: {\n        card: 'rounded-xl raised-3 hover:raised-4'\n      }\n    },\n    radiosInputItemThumb: {\n      checked: {\n        true: 'bg-primary scale-[60%]'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setRadioInputTheme } from '../components/Form/RadioInput/index.ts';\n  \n  setRadioInputTheme({\n    root: { base: '@container' },\n    radiosInputContainer: {\n      base: 'gap-lg',\n      mode: {\n        card: 'grid-cols-1 @2xl:grid-cols-2'\n      }\n    },\n    radiosInputItem: {\n      mode: {\n        card: 'rounded-lg transition-all'\n      }\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'rating-input': "\n# RatingInput Component\n\nThe RatingInput component is a star rating field with optional half-star support, a configurable star count, and full RTL support. Its value is a number.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet rating = $state(3);\n</script>\n\n<RatingInput label=\"Rating\" bind:value={rating} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: number | null (bindable, default null) - Current rating; null (or 0) means \"no rating\"\n- **max**: number (default: 5) - Number of stars, which is also the maximum value\n- **halfSteps**: boolean (default: false) - When true the value snaps to 0.5 increments (half stars)\n- **readonly**: boolean (default: false) - Displays the value without allowing interaction (aria-readonly=true); still shows the stars\n- **clearable**: boolean (default: true) - When true, clicking the exact current value clears it back to null\n- **dir**: 'ltr' | 'rtl' - Reading direction override; inherits the ambient direction when omitted\n- **color**: Colors (default: 'warning') - Color of the filled stars (the classic gold/amber star)\n\n### Content Props (Slots)\n- **star**: Snippet<[{ index, fraction, layer }]> (optional) - Custom star icon, forwarded to the underlying Rating display component. Rendered twice per star: once for the muted outline (layer: 'base') and once for the colored fill overlay (layer: 'fill'). See the Rating component docs for an example.\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required (a required rating must be at least half a star)\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large' - Star size\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n- **i18n**: Partial<Messages> - Per-instance i18n overrides\n\n## Examples\n\n### Basic Rating (integer)\n```svelte\n<RatingInput label=\"Rating\" bind:value={rating} max={5} />\n```\n\n### Half Steps\n```svelte\n<RatingInput label=\"Rating\" bind:value={rating} halfSteps />\n```\n\n### Half Steps in RTL (fills from the right)\n```svelte\n<RatingInput label=\"Rating\" bind:value={rating} halfSteps dir=\"rtl\" />\n```\n\n### Custom Star Count\n```svelte\n<RatingInput label=\"Score\" bind:value={score} max={10} />\n```\n\n### Readonly\n```svelte\n<RatingInput label=\"Average\" value={4.5} halfSteps readonly />\n```\n\n### Disabled\n```svelte\n<RatingInput label=\"Rating\" value={3} disabled />\n```\n\n### Required (inside a Form)\n```svelte\n<Form inputs={{ rating: { type: 'rating', label: 'Rating', required: true } }} />\n```\n\n## Keyboard Interactions\n\nThe rating row is a single tab stop with `role=\"slider\"`.\n\n- **Arrow Right / Arrow Up**: Increase the value by the step (0.5 when halfSteps, else 1)\n- **Arrow Left / Arrow Down**: Decrease the value by the step\n- **Home**: Clear the value (sets it to null)\n- **End**: Set the value to max\n\nValue semantics do NOT flip in RTL: Arrow Right always increases the numeric value. Only the visual fill is mirrored.\n\n## Accessibility\n\n- The row container carries `role=\"slider\"` and is the single focusable element (`tabindex` 0 when interactive, -1 when readonly/disabled)\n- ARIA: `aria-valuemin={0}`, `aria-valuemax={max}`, `aria-valuenow`, `aria-valuetext`, `aria-orientation=\"horizontal\"`, `aria-readonly`, `aria-disabled`\n- Individual stars are `aria-hidden` and not focusable; the pointer selects a value and half-star hits are computed from the pointer position within each star\n- Clicking a star focuses the slider container (native focus fixup), so arrow keys work immediately after a pointer selection and `focused` becomes true — same as clicking a text input\n\n## RTL\n\nWhen the effective direction is RTL (via the `dir` prop or the inherited ambient direction), the stars render right-to-left and the fill grows from the right. The fill uses the CSS logical property `inset-inline-start`, so the visual mirroring is automatic. Note again: the numeric value is unaffected by direction — only the visual fill mirrors.\n\n## Half Steps\n\nWith `halfSteps`, the left half of a star (in the reading direction) selects n-0.5 and the right half selects n. The fill is rendered with an overflow-hidden clip whose width is the star's fill fraction, giving exact 0.5 (and arbitrary partial) fills.\n\n## Theme Customization\n\nThe RatingInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **container**: The flex row of stars (gap + focus ring)\n- **star**: The fixed-size box wrapping one star (cursor-pointer when interactive)\n- **starBase**: The outline (empty) star color\n- **starFill**: The filled star, driven by the `color` variant\n\n### Available Variants\n\n**container**:\n- size: 'small' | 'normal' | 'large' - Gap between stars\n- disabled: boolean - Disabled state styling\n\n**star**:\n- size: 'small' | 'normal' | 'large' - Star box size\n- interactive: boolean - cursor-pointer when interactive\n\n**starFill**:\n- color: Colors - Fill color of the star (defaults to 'warning')\n\n### Global Theme Setting\n\nThe star rendering lives in the `Rating` display component, so the theme is shared: set it once and both `Rating` and `RatingInput` pick it up.\n\n```svelte\n<script>\n\timport { setRatingTheme } from 'entasis/rating-input'; // also exported from 'entasis/rating'\n\n\tsetRatingTheme({\n\t\tstarFill: {\n\t\t\tcolor: {\n\t\t\t\tprimary: 'text-primary'\n\t\t\t}\n\t\t}\n\t});\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'rich-text-input': "\n# RichTextInput Component\n\nRichTextInput is a markdown rich text editor for AI-style composition. It supports inline and block formatting, trigger-based suggestions, token insertion, and a bindable markdown value.\n\n## Requires\n\nRichTextInput is built on Lexical. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add lexical @lexical/history @lexical/link @lexical/list @lexical/markdown @lexical/rich-text @lexical/selection @lexical/utils`\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { RichTextInput, type RichTextInputTriggers } from 'entasis/rich-text-input';\n\n\tlet value = $state('');\n\n\tconst triggers: RichTextInputTriggers = {\n\t\t'/': {\n\t\t\ttitle: 'Commands',\n\t\t\ttokenKind: 'command',\n\t\t\titems: [{ id: 'summarize', label: '/summarize', kind: 'command' }]\n\t\t}\n\t};\n</script>\n\n<RichTextInput bind:value {triggers} toolbar=\"both\" />\n```\n\n## Standalone Usage\n\n```svelte\n<RichTextInput standalone toolbar=\"hover\" placeholder=\"Prompt...\" />\n```\n\n## Height\n\n```svelte\n<RichTextInput placeholder=\"Grows with content by default...\" />\n<RichTextInput maxHeight={320} placeholder=\"Capped at 320px...\" />\n```\n\n## Form Usage\n\n```svelte\n<Form\n\tinputs={{\n\t\tprompt: {\n\t\t\ttype: 'rich-text',\n\t\t\tlabel: 'Prompt',\n\t\t\tplaceholder: 'Write a prompt...',\n\t\t\ttoolbar: 'fixed'\n\t\t}\n\t}}\n/>\n```\n\n## Props\n\n### Value\n- **value**: string - Bindable markdown value.\n- **name**: string - Hidden input name for native form submission; Form supplies this from the field key.\n- **id**: string - Applied to the editable root.\n- **ref**: HTMLDivElement | null - Bindable editable root reference.\n- **label**, **description**, **helper**, **errors**, **required**, **onValidate** - Standard Field props.\n- **placeholder**: string (default: \"Ask anything...\") - Placeholder and textbox aria-label.\n- **disabled**: boolean (default: false) - Disables editing and suggestions.\n- **standalone**: boolean (default: false) - Renders only the rich text editor chrome without the Field wrapper or input surface.\n- **maxHeight**: number | string | false (default: false) - False lets the editor grow with content; a number/string caps the editor height.\n\n### Suggestions\n- **triggers**: RichTextInputTriggers - Trigger configuration keyed by characters such as '/', '@', or '$'.\n- **onSuggestionOpen**: (payload) => void - Called when a suggestion menu opens.\n- **onSuggestionClose**: (payload) => void - Called when a suggestion menu closes.\n- **onSuggestionQueryChange**: (payload) => void - Called when the active query changes.\n- **onSuggestionHighlightChange**: (payload) => void - Called when highlighted suggestion changes.\n\n### Formatting\n- **toolbar**: 'hover' | 'fixed' | 'both' | 'none' (default: 'hover') - 'hover' shows controls for selected text, 'fixed' pins controls above the editor, 'both' enables both, and 'none' hides formatting controls.\n- **formats**: RichTextInputFormat[] - Allowed formatting controls.\n- **toolbarClass**: string - Extra classes on the fixed toolbar wrapper.\n\n### Events and Methods\n- **onValueChange**: (payload: RichTextInputChange) => void - Receives markdown, tokens, and empty state.\n- **submitShortcut**: 'enter' | 'shift-enter' | 'command-enter' | 'none' - Shortcut that calls onSubmitShortcut.\n- **onSubmitShortcut**: (event: KeyboardEvent) => void - Submit shortcut callback.\n- **focus()**, **clear()**, **insertText(text)**, **insertItem(trigger, item)**, **insertToken(token)** are exported component methods.\n\n## Accessibility\n\n- The editable root uses role=\"textbox\" and aria-multiline.\n- Fixed and selected-text formatting controls use ToggleMenu toolbar semantics and roving focus.\n- Block styles use radio semantics, list controls toggle on and off, and command buttons do not expose pressed state.\n- The hover toolbar uses SelectionMenu's direct ToggleMenu pass-through for range containment, selection preservation, and Popover positioning.\n- Suggestion menus use the existing Command and Popover primitives.\n";
+    readonly select: "\n# Select Component\n\nA custom (non-native) dropdown selection field: a combobox trigger opening a listbox popover,\nwith full keyboard navigation, grouped options, and Field/Form integration.\n\n## Basic Usage\n\n```svelte\n<Select\n\tlabel=\"Country\"\n\tbind:value={country}\n\titems={[\n\t\t{ value: 'us', label: 'United States' },\n\t\t{ value: 'uk', label: 'United Kingdom' },\n\t\t{ value: 'ca', label: 'Canada' }\n\t]}\n/>\n```\n\n## Grouped options\n\nFlat options and `{ label, items }` groups can be mixed freely; separators render between groups.\n\n```svelte\n<Select\n\tlabel=\"Timezone\"\n\tbind:value={tz}\n\titems={[\n\t\t{ label: 'Europe', items: [{ value: 'paris', label: 'Paris' }, { value: 'berlin', label: 'Berlin' }] },\n\t\t{ label: 'America', items: [{ value: 'nyc', label: 'New York' }, { value: 'la', label: 'Los Angeles' }] }\n\t]}\n/>\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Selected value\n- **items**: (SelectOption | SelectOptionGroup)[] - Flat `{ value, label, disabled? }` options and/or `{ label, items }` groups\n- **placeholder**: string (default: 'Select an option') - Trigger text when no selection\n- **separators**: boolean (default: true) - Render separators between consecutive groups\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label, and the trigger's accessible name; without it the trigger falls back to the placeholder\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable the trigger\n- **size**: 'small' | 'normal' | 'large' - Trigger and dropdown size\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height)\n- **name**: string - Form field name; also renders a hidden input for native form posts\n\n### Bindable Props\n- **value**: string - Selected value\n- **errors**: string[] - Validation errors\n- **focused**: boolean - Trigger focus state\n\n### Callbacks\n- **onValueChange**: (value) => void - Fires when the selection changes\n- **onValidate**: (value) => string[] | boolean - Custom validation\n\n### Advanced Props\n- **theme**: SelectThemeProps - Theme overrides (input, inputContainer, value, triggerIcon, content, group, groupLabel, item, itemIndicator, separator)\n\n## Keyboard\n\n- Closed: ArrowDown / ArrowUp / Enter / Space open the dropdown, anchored on the selected option\n- Open: ArrowDown / ArrowUp move the highlight (wrap-around), Home / End jump, Enter / Space select, Escape closes, Tab closes and moves focus on\n- Type-ahead: typing letters while the trigger has focus moves the highlight to the next option whose label starts with the typed text\n- Disabled options are skipped by the highlight\n\n## Accessibility\n\nARIA 1.2 select-only combobox pattern: the trigger is a `role=\"combobox\"` button with\n`aria-haspopup=\"listbox\"`, `aria-expanded`, and `aria-controls`; DOM focus stays on the\ntrigger while `aria-activedescendant` tracks the highlighted `role=\"option\"` (virtual focus).\nThe selected option shows a check indicator and `aria-selected`.\n\nThe trigger always has an accessible name: `label` names it through the Field label (a string\nlabel as a `<label for>`, a snippet through `aria-labelledby`), and without one the trigger\nfalls back to `placeholder`, then to the catalog's \"Select an option\". Pass `label` whenever\nan unlabelled select sits in a toolbar or filter row, so the name says which control it is\nrather than repeating the placeholder.\n\n## Notes\n\n- Selection re-focuses the trigger (matches native select behavior)\n- Clicking outside closes via trigger blur; option rows prevent mousedown so the click can land\n- The dropdown scrolls beyond ~240px (ScrollArea); the highlight scrolls into view on keyboard nav\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly slider: "\n# Slider Component\n\nThe Slider component is a Field-based numeric control for scalar values, range tuples, vertical layouts, multi-thumb values, and draggable selected ranges. It renders ARIA slider thumbs instead of relying on a native range input so every mode shares the same state machine and theme parts.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet volume = $state(40);\n</script>\n\n<Slider label=\"Volume\" bind:value={volume} min={0} max={100} step={5} showValue />\n```\n\n## Range Usage\n\n```svelte\n<script>\n\tlet budget = $state([25, 75]);\n</script>\n\n<Slider\n\tmode=\"range\"\n\tlabel=\"Budget\"\n\tbind:value={budget}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tminStepsBetweenThumbs={2}\n\tdragRange\n\tshowValue\n\tformatValue={(value) => `$${value}k`}\n/>\n```\n\n## Props\n\nExtends all Field props plus:\n\n### Core Props\n- **value**: number | number[] | null (bindable) - Current scalar or multi-thumb value\n- **mode**: 'single' | 'range' (default: 'single') - Range mode defaults to two thumbs\n- **variant**: 'default' | 'thick' | 'contained' (default: 'default') - Visual track style; `thick` renders a heavier track with an inset pill thumb, while `contained` places the label and optional value inside an input-like rail\n- **thumbs**: number - Number of thumbs when the value is missing or scalar\n- **min**: number (default: 0) - Minimum selectable value\n- **max**: number (default: 100) - Maximum selectable value\n- **step**: number (default: 1) - Pointer and keyboard increment\n- **minStepsBetweenThumbs**: number (default: 0) - Minimum spacing between neighboring thumbs, in step units\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - Track direction\n- **dragRange**: boolean (default: false) - Allows dragging the selected range segment as a unit\n- **color**: semantic color (default: 'primary') - Filled track and thumb color\n\n### Display Props\n- **showValue**: boolean (default: false) - Shows value chips beside the track\n- **formatValue**: (value: number, index: number, values: number[]) => string - Formats thumb labels and aria-valuetext\n- **marks**: Array<{ value: number; label?: string | Snippet }> - Optional tick marks along the track\n- **thumbLabels**: string[] - Accessible labels for individual thumbs\n- **i18n**: Partial<Messages> - Per-instance i18n overrides\n\n### Field Props\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Validates that a value is present\n- **disabled**: boolean - Disables pointer and keyboard interaction\n- **size**: 'small' | 'normal' | 'large' - Control size\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **onValueChange**: (value: number | number[]) => void - Called when value changes\n- **onValidate**: (value: number | number[]) => string[] | boolean - Custom validation\n\n### Slots\n- **prefix**: Snippet - Content before the slider\n- **suffix**: Snippet - Content after the slider\n- **valueLabel**: Snippet<SliderValuePayload> - Custom per-thumb value label\n- **rangeLabel**: Snippet<SliderRangePayload> - Custom selected range label\n\n### Styling Props\n- **class**: string - Classes for the field root\n- **theme**: SliderThemeProps & FieldThemeProps - Theme overrides\n\n## Form Integration\n\nUse `type: 'slider'` for scalar values and `type: 'slider-range'` for submitted number arrays.\n\n```svelte\n<Form\n\tinputs={{\n\t\tvolume: {\n\t\t\ttype: 'slider',\n\t\t\tlabel: 'Volume',\n\t\t\tvalue: 35,\n\t\t\tmin: 0,\n\t\t\tmax: 100,\n\t\t\tstep: 5,\n\t\t\tshowValue: true\n\t\t},\n\t\tcomfortBand: {\n\t\t\ttype: 'slider-range',\n\t\t\tlabel: 'Comfort band',\n\t\t\tvalue: [18, 24],\n\t\t\tmin: 12,\n\t\t\tmax: 32,\n\t\t\tdragRange: true,\n\t\t\tshowValue: true\n\t\t}\n\t}}\n/>\n```\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<SliderRoot>\n\t\t\t<HiddenInput />\n\t\t\t<Track role=\"group\">\n\t\t\t\t<ScreenReaderInstructions />\n\t\t\t\t<TrackBackground />\n\t\t\t\t<SelectedRange />\n\t\t\t\t<Thumb role=\"slider\" />\n\t\t\t\t<Marks />\n\t\t\t</Track>\n\t\t\t<ValueLabels />\n\t\t</SliderRoot>\n\t\t<Suffix />\n\t</InputContainer>\n\t<Description />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Vertical\n```svelte\n<Slider\n\torientation=\"vertical\"\n\tlabel=\"Output\"\n\tbind:value={output}\n\tmin={0}\n\tmax={100}\n\tstep={10}\n\tshowValue\n/>\n```\n\n### Thick Variant\n```svelte\n<Slider\n\tvariant=\"thick\"\n\tsize=\"normal\"\n\tlabel=\"Temperature\"\n\tbind:value={temperature}\n\tmin={16}\n\tmax={30}\n\tstep={1}\n\tshowValue\n/>\n```\n\n### Contained Variant\n\n`contained` is intended for compact settings panels. It keeps the native Field label association while rendering the label inside the rail. Add `showValue` to place the formatted value at the opposite edge.\n\n```svelte\n<Slider\n  variant=\"contained\"\n  label=\"Background glow\"\n  bind:value={glow}\n  min={0}\n  max={3}\n  step={0.1}\n  showValue\n  formatValue={(value) => value.toFixed(1)}\n/>\n```\n\n### Three Thumbs\n```svelte\n<Slider\n\tlabel=\"Distribution\"\n\tbind:value={distribution}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tthumbs={3}\n\tshowValue\n/>\n```\n\n### Custom Range Label\n```svelte\n<Slider mode=\"range\" bind:value={range} showValue>\n\t{#snippet rangeLabel(payload)}\n\t\t<span>{payload.startValue} - {payload.endValue}</span>\n\t{/snippet}\n</Slider>\n```\n\n## Accessibility\n\n- Each thumb is a button with `role=\"slider\"`\n- Single-thumb sliders use the visible Field label when present; multi-thumb sliders add per-thumb labels such as \"Budget minimum\" and \"Budget maximum\"\n- The track is exposed as a labelled group when the label is plain text, with hidden keyboard instructions referenced by `aria-describedby`\n- Thumb values expose `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, and `aria-orientation`\n- Multi-thumb `aria-valuemin`/`aria-valuemax` reflect each thumb's current movement bounds, including minimum thumb spacing\n- Keyboard support: Arrow keys move by one step, Shift+Arrow and PageUp/PageDown move by ten steps, Home/End jump to bounds\n- ArrowLeft / ArrowRight follow the writing direction: in RTL, ArrowLeft increases and ArrowRight decreases (vertical sliders are unaffected)\n- Multi-thumb sliders enforce ordering and optional minimum thumb spacing\n- Disabled state blocks pointer, keyboard, and selected-range dragging\n\n## Theme Customization\n\nTheme parts:\n- **inputContainer**: inherited Field input container wrapper\n- **root**: Slider root layout\n- **control**: Track and value-label layout\n- **track**: Pointer surface and color carrier\n- **trackBackground**: Unselected track\n- **range**: Selected range segment\n- **thumb**: Individual slider thumb button\n- **thumbHitbox**: Invisible thick-variant thumb pointer target\n- **thumbVisual**: Visible thumb shape\n- **valueLabels**: Value chip group\n- **valueLabel**: Individual value chip\n- **containedLabel**: Label rendered inside the contained rail\n- **containedTicks**: Decorative scale wrapper for the contained rail\n- **containedTick**: Individual decorative scale line\n- **marks**: Mark container\n- **mark**: Individual mark positioning wrapper\n- **markDot**: Mark dot\n- **markLabel**: Mark text\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly switch: "\n# Switch Component\n\nThe Switch component is a toggle control for boolean settings, providing a visual on/off state with smooth animations.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet enabled = $state(false);\n</script>\n\n<Switch label=\"Enable notifications\" bind:value={enabled} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: boolean | null (bindable) - Toggle state (bind with `bind:value`)\n- **defaultValue**: boolean | null (default: null) - Initial value when value is omitted\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable toggle\n- **size**: 'small' | 'normal' | 'large' - Switch size\n\n### Event Props\n- **onValueChange**: (value: boolean) => void - Called when toggled\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<InputContainer>\n\t\t<SwitchToggle>\n\t\t\t<SwitchThumb />\n\t\t</SwitchToggle>\n\t\t<Label />\n\t</InputContainer>\n\t<Description />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Switch\n```svelte\n<script>\n\tlet notifications = $state(false);\n</script>\n\n<Switch \n\tlabel=\"Enable Notifications\"\n\tbind:value={notifications}\n/>\n```\n\n### With Description\n```svelte\n<Switch \n\tlabel=\"Auto-save\"\n\tdescription=\"Automatically save your work every 5 minutes\"\n\tbind:value={autoSave}\n/>\n```\n\n### Required Switch\n```svelte\n<Switch \n\tlabel=\"I agree to the terms and conditions\"\n\tbind:value={agreedToTerms}\n\trequired\n/>\n```\n\n### Disabled Switch\n```svelte\n<Switch \n\tlabel=\"Premium Feature\"\n\tvalue={false}\n\tdisabled\n\tdescription=\"Upgrade to unlock this feature\"\n/>\n```\n\n### Different Sizes\n```svelte\n<Switch size=\"small\" label=\"Small Switch\" bind:value={val1} />\n<Switch size=\"normal\" label=\"Normal Switch\" bind:value={val2} />\n<Switch size=\"large\" label=\"Large Switch\" bind:value={val3} />\n```\n\n### With Change Handler\n```svelte\n<script>\n\tfunction handleToggle(checked) {\n\t\tconsole.log('Switch toggled:', checked);\n\t\t// Save to API, etc.\n\t}\n</script>\n\n<Switch \n\tlabel=\"Dark Mode\"\n\tbind:value={darkMode}\n\tonValueChange={handleToggle}\n/>\n```\n\n### Settings Panel\n```svelte\n<script>\n\tlet settings = $state({\n\t\tnotifications: true,\n\t\temailUpdates: false,\n\t\tautoPlay: false,\n\t\tshowPreview: true\n\t});\n</script>\n\n<div class=\"space-y-4\">\n\t<Switch \n\t\tlabel=\"Push Notifications\"\n\t\tdescription=\"Receive notifications on your device\"\n\t\tbind:value={settings.notifications}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Email Updates\"\n\t\tdescription=\"Get weekly email summaries\"\n\t\tbind:value={settings.emailUpdates}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Auto-play Videos\"\n\t\tdescription=\"Videos start playing automatically\"\n\t\tbind:value={settings.autoPlay}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Show Preview\"\n\t\tdescription=\"Display content previews\"\n\t\tbind:value={settings.showPreview}\n\t/>\n</div>\n```\n\n### Privacy Settings\n```svelte\n<form>\n\t<Heading size=\"h3\">Privacy Settings</Heading>\n\t\n\t<Switch \n\t\tlabel=\"Profile Visibility\"\n\t\tdescription=\"Make your profile visible to other users\"\n\t\tbind:value={privacy.profileVisible}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Show Email\"\n\t\tdescription=\"Display your email on your profile\"\n\t\tbind:value={privacy.showEmail}\n\t\tdisabled={!privacy.profileVisible}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Activity Status\"\n\t\tdescription=\"Show when you're online\"\n\t\tbind:value={privacy.showActivity}\n\t/>\n\t\n\t<Button type=\"submit\">Save Settings</Button>\n</form>\n```\n\n### Feature Toggles\n```svelte\n<script>\n\tlet features = $state({\n\t\texperimental: false,\n\t\tbeta: false,\n\t\tanalytics: true\n\t});\n\t\n\t$effect(() => {\n\t\tif (features.experimental) {\n\t\t\tconsole.log('Experimental features enabled');\n\t\t}\n\t});\n</script>\n\n<div class=\"panel\">\n\t<Heading size=\"h4\">Feature Flags</Heading>\n\t\n\t<Switch \n\t\tlabel=\"Experimental Features\"\n\t\tdescription=\"⚠️ Use at your own risk\"\n\t\tbind:value={features.experimental}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Beta Features\"\n\t\tdescription=\"Try new features before they're released\"\n\t\tbind:value={features.beta}\n\t/>\n\t\n\t<Switch \n\t\tlabel=\"Analytics\"\n\t\tdescription=\"Help us improve by sharing usage data\"\n\t\tbind:value={features.analytics}\n\t/>\n</div>\n```\n\n### Conditional Content\n```svelte\n<script>\n\tlet advancedMode = $state(false);\n</script>\n\n<Switch \n\tlabel=\"Advanced Mode\"\n\tdescription=\"Show advanced options\"\n\tbind:value={advancedMode}\n/>\n\n{#if advancedMode}\n\t<div class=\"advanced-options\">\n\t\t<!-- Advanced settings here -->\n\t</div>\n{/if}\n```\n\n### Form Integration\n```svelte\n<Form \n\tinputs={{\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\tnotifications: { \n\t\t\ttype: 'switch', \n\t\t\tlabel: 'Enable Notifications',\n\t\t\tdescription: 'Receive important updates'\n\t\t},\n\t\tmarketing: { \n\t\t\ttype: 'switch', \n\t\t\tlabel: 'Marketing Emails'\n\t\t}\n\t}}\n\tonSubmit={handleSubmit}\n/>\n```\n\n## Validation\n\nSwitch validates:\n- **required**: Must be checked (useful for terms acceptance)\n\n## Accessibility\n\n- Proper ARIA roles and attributes\n- Keyboard accessible (Space/Enter to toggle)\n- Focus states clearly visible\n- Label clickable to toggle\n- State changes announced to screen readers\n- Disabled state communicated properly\n\n## Notes\n\n- Smooth animated transitions between states\n- Visual feedback on hover and focus\n- Works standalone or within forms\n- Thumb slides with smooth animation\n- Toggle background changes color based on state\n- Supports all Field component features\n\n## Theme Customization\n\nThe Switch component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **toggle**: Switch toggle track styles\n- **thumb**: Switch thumb/knob styles\n- **inputContainer**: Container wrapper styles\n\n### Available Variants\n\n**toggle**:\n- base: Base classes for the toggle track\n- Variants:\n  - checked: boolean - Background and border color based on checked state\n  - size: 'small' | 'normal' | 'large' - Toggle dimensions (height and width)\n  - disabled: boolean - Disabled state styling\n\n**thumb**:\n- base: Base classes for the thumb/knob\n- Variants:\n  - checked: boolean - Thumb position and styling based on checked state\n  - size: 'small' | 'normal' | 'large' - Thumb dimensions\n\n**inputContainer**:\n- base: Base classes for the container wrapper\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap spacing between label and toggle\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Switch \n  label=\"Enable Feature\"\n  bind:value={enabled}\n  theme={{\n    toggle: {\n      base: 'rounded-full transition-all',\n      checked: {\n        true: 'bg-green-500 border-green-600'\n      },\n      size: {\n        normal: 'h-6 w-11'\n      }\n    },\n    thumb: {\n      size: {\n        normal: 'h-5 w-5'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Colors**:\n```svelte\n<Switch \n  label=\"Custom Switch\"\n  bind:value={checked}\n  theme={{\n    toggle: {\n      checked: {\n        true: 'bg-purple-500 border-purple-600',\n        false: 'bg-gray-300 border-gray-400'\n      }\n    },\n    thumb: {\n      checked: {\n        true: 'bg-white border-purple-500',\n        false: 'bg-white border-gray-400'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setSwitchTheme } from '../components/Form/Switch/index.ts';\n  \n  setSwitchTheme({\n    toggle: {\n      base: 'transition-all duration-300',\n      checked: {\n        true: 'bg-primary border-primary lift-3'\n      },\n      size: {\n        normal: 'h-6 w-12'\n      }\n    },\n    thumb: {\n      base: 'lift-4',\n      size: {\n        normal: 'h-5 w-5'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'tag-group': "\n# TagGroup Component\n\nTagGroup renders a finite set of selectable tags as chips. It is a form input for compact category, filter, or preference selection.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { TagGroup } from 'entasis/tag-group';\n\n\tlet value = $state('news');\n</script>\n\n<TagGroup\n\tlabel=\"Category\"\n\tbind:value\n\titems={[\n\t\t{ value: 'news', label: 'News' },\n\t\t{ value: 'travel', label: 'Travel' },\n\t\t{ value: 'gaming', label: 'Gaming' }\n\t]}\n/>\n```\n\n## Multiple Selection\n\n```svelte\n<script lang=\"ts\">\n\tlet selected = $state(['news', 'gaming']);\n</script>\n\n<TagGroup\n\tmultiple\n\tlabel=\"Topics\"\n\tbind:value={selected}\n\titems={[\n\t\t{ value: 'news', label: 'News' },\n\t\t{ value: 'travel', label: 'Travel' },\n\t\t{ value: 'gaming', label: 'Gaming' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: TagGroupOption[] - Options rendered as selectable chips.\n- **value**: string | string[] | null - Bindable selection. Single mode writes string|null; multiple mode writes string[].\n- **defaultValue**: string | string[] | null - Initial selection used only when `value` is omitted.\n- **multiple**: boolean (default: false) - Enables selecting multiple tags.\n- **label**: Slot - Field label.\n- **name**: string - Form field name.\n- **required**: boolean (default: false) - Marks selection as required.\n- **disabled**: boolean (default: false) - Disables all tag buttons.\n\n### Option Props\n- **value**: string - Unique selection value.\n- **label**: string | Snippet - Visible chip label.\n- **icon**: string | Snippet - Optional icon rendered before the label.\n- **disabled**: boolean - Disables one option.\n- **color**: Colors - Per-option chip color override.\n- **variant**: 'solid' | 'outline' | 'soft' - Per-option chip variant override.\n\n### Style Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Controls chip density.\n- **color**: Colors (default: 'primary') - Selected chip color.\n- **unselectedColor**: Colors (default: 'neutral') - Unselected chip color.\n- **selectedVariant**: 'solid' | 'outline' | 'soft' (default: 'soft') - Selected chip variant. The selected fill itself comes from the shared soft selected recipe on the item class.\n- **unselectedVariant**: 'solid' | 'outline' | 'soft' (default: 'outline') - Unselected chip variant. Outline by default so an unselected tag stays distinct from the soft selected fill at the neutral role.\n- **theme**: TagGroupThemeProps - Theme overrides for TagGroup and Field parts.\n- **chipTheme**: ChipThemeProps - Theme overrides forwarded to each Chip.\n\n### Events\n- **onValueChange**: (value: string | string[] | null) => void - Called when normalized selection changes.\n- **onValidate**: (value: string | string[] | null) => string[] | boolean - Custom validation.\n\n## Accessibility\n\n- Uses native button controls for each selectable chip.\n- Buttons expose aria-pressed for selected state.\n- The field is rendered as a fieldset through the shared Field wrapper.\n- Hidden inputs mirror selected values for native form submission.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'tags-input': "\n# TagsInput Component\n\nA multi-value tag input. Use it for entering a list of free-text tags, or restrict entry to a searchable option list (like the Combobox, but multi-select). Selected tags render as removable chips inside the field, followed by a text input that wraps to its own line when space runs out.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { TagsInput } from 'entasis/tags-input';\n\tlet value = $state(null);\n</script>\n\n<TagsInput\n\tplaceholder=\"Add a tag...\"\n\tbind:value={value}\n/>\n```\n\n## Props\n\n### Core Props\n\n- **value**: `string[] | null` (default: `null`, bindable)\n  - The current list of tags. `null` is treated as empty.\n  - The array is never mutated in place — every add/remove assigns a fresh array.\n\n- **searchValue**: `string` (default: `''`, bindable)\n  - Current text typed in the input.\n\n- **loading**: `boolean` (default: `false`, bindable)\n  - Loading state (managed automatically for async options).\n\n- **items**: `ComboboxOption[] | ((searchValue?: string) => MaybePromise<ComboboxOption[]>)` (optional)\n  - When omitted, the input accepts free text (any typed value becomes a tag).\n  - When provided, behaves like a Combobox dropdown: static arrays are filtered client-side, functions are called with the search value and may return a Promise.\n\n### Behavior Props\n\n- **customTags**: `boolean` (default: `false`)\n  - When `items` is provided, also allow Enter to add free text that is not in the option list.\n\n- **maxTags**: `number` (optional)\n  - Maximum number of tags. Once reached, further adds (free entry and dropdown selection) are ignored.\n\n- **showAllOnFocus**: `boolean` (default: `false`)\n  - Show all options when the input is focused, even without typing (static arrays only).\n\n- **getValueOption**: `(value: string) => MaybePromise<ComboboxOption | null | undefined>`\n  - Resolves the option (and its label) for a value not yet loaded. Useful for pre-filled values with async options.\n\n- **placeholder**: `string` (default: `''`)\n  - Input placeholder text.\n\n- **loadingText**: `string` (default: `'Loading...'`)\n  - Text displayed while loading options.\n\n- **noOptionsText**: `string` (default: `'No options found'`)\n  - Text displayed when no options match.\n\n### Field Props\n\n- **required**: `boolean` (default: `false`)\n- **disabled**: `boolean`\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`) - Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height)\n- **name**: `string`\n- **errors**: `string[] | boolean` (bindable)\n- **focused**: `boolean` (bindable)\n- **description**: `string`\n\n### Event Props\n\n- **onValueChange**: `(value: string[]) => void`\n  - Called when the list of tags changes.\n\n- **onValidate**: `(value: string[]) => string[] | boolean`\n  - Custom validation function.\n\n### Theme Props\n\n- **theme**: `TagsInputThemeProps`\n  - Customize styling for: input, inputContainer, tag, loading, error, noOptions.\n\n## Examples\n\n### Free-text Tags\n\n```svelte\n<script>\n\tlet value = $state(['svelte', 'kit']);\n</script>\n\n<TagsInput bind:value={value} placeholder=\"Add a tag...\" />\n```\n\n### Restricted to a Static Option List\n\n```svelte\n<script>\n\tlet value = $state(null);\n\tconst items = [\n\t\t{ value: 'red', label: 'Red' },\n\t\t{ value: 'green', label: 'Green' },\n\t\t{ value: 'blue', label: 'Blue' }\n\t];\n</script>\n\n<TagsInput items={items} showAllOnFocus bind:value={value} />\n```\n\n### Async Options\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(null);\n\tconst getItems = async (searchValue?: string) => {\n\t\tconst response = await fetch(`/api/search?q=${searchValue}`);\n\t\treturn response.json();\n\t};\n</script>\n\n<TagsInput items={getItems} bind:value={value} />\n```\n\n### Options Plus Free Text\n\n```svelte\n<TagsInput items={items} customTags bind:value={value} />\n```\n\n### Limited Number of Tags\n\n```svelte\n<TagsInput maxTags={3} bind:value={value} />\n```\n\n### Pre-filled Values with Async Labels\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(['us', 'uk']);\n\tconst getValueOption = async (value: string) => {\n\t\treturn { value, label: value.toUpperCase() };\n\t};\n</script>\n\n<TagsInput items={getItems} getValueOption={getValueOption} bind:value={value} />\n```\n\n## Keyboard Interactions\n\n- **Enter**: In free mode (or with `customTags`), adds the current trimmed text as a tag and clears the input. When the dropdown is open and an option is highlighted, adds that option instead.\n- **Backspace** (input empty): Removes the last tag.\n- **ArrowDown / ArrowUp**: Move the dropdown highlight (wraps around). Restricted mode only.\n- **Home / End**: Highlight the first / last option. Restricted mode only.\n- **Escape**: Blurs the input and closes the dropdown.\n\n## Accessibility\n\n- The tag collection is a real list (`role=\"list\"` / `role=\"listitem\"`), not a listbox.\n- Each tag chip is non-interactive; removal is a dedicated `<button type=\"button\">` with an `aria-label` of \"Remove <label>\".\n- **With items** the input follows the ARIA combobox pattern: `role=\"combobox\"`, `aria-expanded`, `aria-controls`, `aria-autocomplete=\"list\"`, `aria-activedescendant`, `aria-haspopup=\"listbox\"`, and the dropdown is a `role=\"listbox\"` with `role=\"option\"` items.\n- **Without items** the input is a plain text input.\n- `autocomplete=\"off\"` and `data-1p-ignore` on the input.\n\n## Notes\n\n- **Deduplication invariant**: A tag can never appear twice. Duplicate adds (exact string match) simply clear the search. This is a hard requirement — duplicate keys in the keyed list crash the renderer.\n- **Fresh arrays**: The value array is never mutated in place. Every add/remove assigns a new array so binding, reactivity, and form updates fire correctly.\n- **Animations**: Tags animate on reorder (`animate:flip`) and on enter/leave (`transition:scale`).\n- **Free vs restricted mode**: Omitting `items` gives free-text entry. Providing `items` restricts entry to the option list; add `customTags` to permit free text alongside options.\n- **Label resolution**: A tag's chip label comes from static `items`, then a session cache of options picked from the dropdown, then `getValueOption` (resolved on mount for initial values), falling back to the raw value string.\n- **Dropdown filtering**: Options whose value is already selected are hidden from the dropdown.\n\n## Theme Customization\n\nThe TagsInput uses a theme object customizable via the `theme` prop or a global theme.\n\n### Theme Structure\n\n- **input**: Input element styles (flex-1 with a min-width so it wraps to its own line).\n- **inputContainer**: The flex-wrap container holding the tags and input.\n- **tag**: The animated wrapper element around each tag chip.\n- **loading**: Loading indicator styles.\n- **error**: Error message styles.\n- **noOptions**: No-options message styles.\n\n### Global Theme Setting\n\n```svelte\n<script>\n\timport { setTagsInputTheme } from 'entasis/tags-input';\n\n\tsetTagsInputTheme({\n\t\tinputContainer: {\n\t\t\tbase: 'rounded-lg border-2 transition-all'\n\t\t}\n\t});\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'text-input': "\n# TextInput Component\n\nThe TextInput component is a versatile text input field with support for different input types (text, email, URL), validation, and consistent styling.\n\n## Basic Usage\n\n```svelte\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **type**: 'text' | 'email' | 'url' (default: 'text')\n- **value**: string (bindable) - Input value\n- **placeholder**: string - Placeholder text\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text below input\n- **error**: string - Error message\n- **required**: boolean - Mark field as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large' - Input size\n\n### Content Slots\n- **prefix**: Snippet - Content before input (icons, text)\n- **suffix**: Snippet - Content after input (icons, buttons)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input />\n\t\t<Suffix />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Text Input\n```svelte\n<script>\n\tlet name = $state('');\n</script>\n\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n### Email Input\n```svelte\n<TextInput \n\ttype=\"email\"\n\tlabel=\"Email\"\n\tplaceholder=\"you@example.com\"\n\tbind:value={email}\n\trequired\n/>\n```\n\n### URL Input\n```svelte\n<TextInput \n\ttype=\"url\"\n\tlabel=\"Website\"\n\tplaceholder=\"https://example.com\"\n\tbind:value={website}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tplaceholder=\"Enter your username\"\n\tbind:value={username}\n/>\n```\n\n### With Description\n```svelte\n<TextInput \n\tlabel=\"Display Name\"\n\tdescription=\"This is how others will see you\"\n\tbind:value={displayName}\n/>\n```\n\n### Required Field\n```svelte\n<TextInput \n\tlabel=\"Full Name\"\n\trequired\n\tbind:value={fullName}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { magnifyingGlassIcon } from 'entasis/icons/magnifyingGlass';\n\n\tlet search = $state('');\n</script>\n\n<TextInput label=\"Search\" bind:value={search}>\n\t{#snippet prefix()}\n\t\t{@render magnifyingGlassIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### With Suffix Button\n```svelte\n<script lang=\"ts\">\n\timport { copyIcon } from 'entasis/icons/copy';\n\n\tlet apiKey = $state('');\n\tconst copyToClipboard = () => navigator.clipboard.writeText(apiKey);\n</script>\n\n<TextInput label=\"API Key\" bind:value={apiKey}>\n\t{#snippet suffix()}\n\t\t<Button size=\"small\" squared onclick={copyToClipboard}>\n\t\t\t{@render copyIcon()}\n\t\t</Button>\n\t{/snippet}\n</TextInput>\n```\n\n### With Both Prefix and Suffix\n```svelte\n<script lang=\"ts\">\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n\n\tlet url = $state('');\n</script>\n\n<TextInput label=\"Website\" bind:value={url}>\n\t{#snippet prefix()}\n\t\t<span class=\"text-muted\">https://</span>\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### Disabled State\n```svelte\n<TextInput \n\tlabel=\"Disabled\"\n\tvalue=\"Cannot edit\"\n\tdisabled\n/>\n```\n\n### With Error\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tbind:value={username}\n\terror={usernameError}\n/>\n```\n\n### Different Sizes\n```svelte\n<TextInput size=\"small\" label=\"Small\" bind:value={val1} />\n<TextInput size=\"normal\" label=\"Normal\" bind:value={val2} />\n<TextInput size=\"large\" label=\"Large\" bind:value={val3} />\n```\n\n### Login Form\n```svelte\n<script lang=\"ts\">\n\timport { envelopeIcon } from 'entasis/icons/envelope';\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet email = $state('');\n\tlet password = $state('');\n</script>\n\n<form>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tplaceholder=\"your@email.com\"\n\t\tbind:value={email}\n\t\trequired\n\t>\n\t\t{#snippet prefix()}\n\t\t\t{@render envelopeIcon()}\n\t\t{/snippet}\n\t</TextInput>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={password}\n\t\trequired\n\t>\n\t\t{#snippet prefix()}\n\t\t\t{@render lockIcon()}\n\t\t{/snippet}\n\t</PasswordInput>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n## Validation\n\nTextInput automatically validates:\n- **email**: Valid email format\n- **url**: Valid URL format\n- **required**: Non-empty value\n\nCustom validation can be added through the Field component.\n\n## Accessibility\n\n- Proper label association with input\n- ARIA attributes for required fields\n- Error messages announced to screen readers\n- Focus states clearly visible\n- Keyboard accessible\n\n## Notes\n\n- Extends the Field component for consistent behavior\n- Prefix/suffix slots are ideal for icons and actions\n- Input container handles focus states\n- Validation runs on blur and submit\n- Type determines browser validation behavior\n\n## Theme Customization\n\nThe TextInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<TextInput \n  label=\"Custom Input\"\n  bind:value={value}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<TextInput \n  label=\"Styled Input\"\n  bind:value={value}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setTextInputTheme } from '../components/Form/TextInput/index.ts';\n  \n  setTextInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      base: 'placeholder:text-gray-400'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'text-area': "\n# TextArea Component\n\nThe TextArea component provides a multi-line text input field with a configurable row count, a maximum length, and validation.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet message = $state('');\n</script>\n\n<TextArea label=\"Message\" bind:value={message} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Textarea value\n- **placeholder**: string - Placeholder text\n- **rows**: number (default: 3) - Number of visible text rows\n\n### Behavior Props\n- **maxLength**: number - Maximum character count\n- **textareaAttrs**: native attributes applied to the underlying textarea\n- **onPressEnter**: (payload) => void - Called when Enter is pressed without Shift\n\nThe textarea is not resizable by default (`resize-none`); enable a resize handle through the `input` theme slot, e.g. `theme={{ input: { base: 'resize-y' } }}`.\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large' - Input size\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<TextArea />\n\t</InputContainer>\n\t<CharacterCount />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic TextArea\n```svelte\n<script>\n\tlet bio = $state('');\n</script>\n\n<TextArea \n\tlabel=\"Biography\"\n\tbind:value={bio}\n\trows={4}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextArea \n\tlabel=\"Comments\"\n\tplaceholder=\"Enter your comments here...\"\n\tbind:value={comments}\n/>\n```\n\n### With Max Length\n```svelte\n<TextArea \n\tlabel=\"Tweet\"\n\tbind:value={tweet}\n\tmaxLength={280}\n\tdescription=\"Maximum 280 characters\"\n/>\n```\n\n### Required Field\n```svelte\n<TextArea \n\tlabel=\"Feedback\"\n\tbind:value={feedback}\n\trequired\n\trows={5}\n/>\n```\n\n### Disabled State\n```svelte\n<TextArea \n\tlabel=\"Read Only\"\n\tvalue=\"This content cannot be edited\"\n\tdisabled\n/>\n```\n\n### Vertical Resize Handle\n```svelte\n<TextArea \n\tlabel=\"Notes\"\n\tbind:value={content}\n\ttheme={{ input: { base: 'resize-y' } }}\n\trows={6}\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tmessage: ''\n\t});\n\t\n\tfunction handleSubmit() {\n\t\tconsole.log('Submitted:', formData);\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={formData.name}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={formData.email}\n\t\trequired\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Message\"\n\t\tbind:value={formData.message}\n\t\trows={6}\n\t\trequired\n\t\tplaceholder=\"How can we help you?\"\n\t/>\n\t\n\t<Button type=\"submit\">Send Message</Button>\n</form>\n```\n\n### Product Description\n```svelte\n<TextArea \n\tlabel=\"Product Description\"\n\tbind:value={description}\n\trows={8}\n\tmaxLength={500}\n\tdescription=\"Provide a detailed description of your product\"\n/>\n```\n\n### Code Input\n```svelte\n<TextArea \n\tlabel=\"CSS Styles\"\n\tbind:value={css}\n\trows={10}\n\tclass=\"font-mono\"\n\ttheme={{ input: { base: 'resize' } }}\n\tplaceholder={'.button { ... }'}\n/>\n```\n\n### Review Form\n```svelte\n<script>\n\tlet review = $state('');\n\tlet rating = $state(5);\n</script>\n\n<div>\n\t<NumberInput \n\t\tlabel=\"Rating\"\n\t\tbind:value={rating}\n\t\tmin={1}\n\t\tmax={5}\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Review\"\n\t\tbind:value={review}\n\t\trows={6}\n\t\tmaxLength={1000}\n\t\trequired\n\t\tplaceholder=\"Share your experience...\"\n\t/>\n</div>\n```\n\n### Support Ticket\n```svelte\n<TextArea \n\tlabel=\"Issue Description\"\n\tbind:value={issue}\n\trows={8}\n\trequired\n\tdescription=\"Please provide as much detail as possible\"\n\tplaceholder=\"Describe the issue you're experiencing...\"\n/>\n```\n\n## Character Count\n\nWhen `maxLength` is set, a character counter is automatically displayed:\n- Shows current/max characters\n- Updates in real-time\n- Visual warning when approaching limit\n\n## Validation\n\nTextArea automatically validates:\n- **required**: Non-empty value\n- **maxLength**: Value doesn't exceed maximum\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for max length\n- Character count announced to screen readers\n- Resize controls are keyboard accessible\n- Error states properly communicated\n\n## Notes\n\n- Supports multi-line text input\n- Character counting for length limits\n- Resize handle can be enabled through the input theme slot\n- Works in forms with validation\n- Maintains scroll position during typing\n\n## Theme Customization\n\nThe TextArea component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Textarea element styles\n- **inputContainer**: Textarea container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the textarea element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the textarea container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container height and size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<TextArea \n  label=\"Message\"\n  bind:value={message}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'h-24 px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<TextArea \n  label=\"Custom TextArea\"\n  bind:value={value}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setTextAreaTheme } from '../components/Form/TextArea/index.ts';\n  \n  setTextAreaTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'h-24 px-4 py-2'\n      }\n    },\n    input: {\n      base: 'resize-y min-h-[100px]'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'time-input': "\n\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly 'voice-input': "\n# VoiceInput Component\n\nVoiceInput records microphone audio into a bindable Blob, renders live microphone feedback, and previews the finalized recording with a seekable waveform. It can stay full width, expand leftward during capture, or remain mic-only with level-responsive rings.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n\n\tlet recording = $state<Blob | null>(null);\n\tlet duration = $state(0);\n</script>\n\n<VoiceInput\n\tlabel=\"Voice note\"\n\tbind:value={recording}\n\tbind:duration\n\tminDuration={1}\n\tmaxDuration={60}\n/>\n```\n\n## Props\n\n- **value**: `Blob | null` (bindable, default: `null`) - Finalized microphone recording. Starting a successful new recording or using Clear removes the previous value.\n- **defaultValue**: `Blob | null` (default: `null`) - Initial recording used only when `value` is omitted.\n- **duration**: `number` (bindable, default: `0`) - Current or finalized duration in seconds.\n- **minDuration**: `number` (default: `0`) - Minimum accepted finalized duration in seconds. Shorter recordings surface a Field validation error.\n- **maxDuration**: `number | undefined` - Maximum duration in seconds. Recording stops automatically at this limit.\n- **color**: `Colors` (default: `'primary'`) - Focus and active recording color.\n- **variant**: `'default' | 'expandable' | 'compact'` (default: `'default'`) - Keeps the waveform full width, expands it only while recording or previewing, or renders a mic-only level indicator.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Control height, waveform height, timer size, and action size.\n- **disabled**: `boolean` (default: `false`) - Prevents microphone, playback, seeking, and clear interactions.\n- **required**: `boolean` (default: `false`) - Requires a recorded Blob during Field/Form validation.\n- **startLabel**: `string` (default: `'Start voice recording'`) - Start-button accessible label and tooltip.\n- **stopLabel**: `string` (default: `'Stop recording'`) - Stop-button accessible label and tooltip.\n- **playLabel**: `string` (default: `'Play recording'`) - Playback-button label and tooltip while paused.\n- **pauseLabel**: `string` (default: `'Pause recording'`) - Playback-button label and tooltip while playing.\n- **seekLabel**: `string` (default: `'Seek recording'`) - Accessible label for the finalized waveform seek control.\n- **clearLabel**: `string` (default: `'Clear recording'`) - Clear-button accessible label and tooltip.\n- **onValueChange**: `(value: Blob | null) => void` - Runs when the field value changes, including Clear.\n- **onStart**: `() => void` - Runs after microphone capture starts.\n- **onStop**: `({ blob, duration }: VoiceInputResult) => void` - Runs after MediaRecorder finalizes the recording.\n- **onError**: `(error: Error) => void` - Runs when permission, recording, or playback fails.\n- **theme**: `VoiceInputThemeProps & FieldThemeProps` - Overrides voice-input and inherited Field theme parts.\n\nVoiceInput also accepts the standard Field props and slots, including `label`, `description`, `helper`, errors, and attachments.\n\n## Form configuration\n\n```svelte\n<Form\n\tinputs={{\n\t\tmessage: {\n\t\t\ttype: 'voice',\n\t\t\tlabel: 'Voice message',\n\t\t\trequired: true,\n\t\t\tminDuration: 1,\n\t\t\tmaxDuration: 60\n\t\t}\n\t}}\n\tonSubmit={(value) => uploadVoiceMessage(value.message)}\n/>\n```\n\n## Behavior\n\n- The waveform is drawn on a responsive canvas and maps live microphone RMS through a logarithmic decibel scale so quiet speech remains visible.\n- New samples enter from the right and push older samples left.\n- `maxDuration` schedules a hard automatic stop and caps the published duration at the configured limit.\n- `minDuration` participates in normal Field validation after MediaRecorder publishes the final Blob.\n- The `expandable` variant has no hidden full-width footprint while collapsed, then anchors the action on the right and animates the waveform surface toward the left while recording, finalizing, or previewing saved audio.\n- The `compact` variant omits the waveform and timer, uses a solid active surface while recording, and scales two concentric rings with the same logarithmic microphone level.\n- Finalized recordings expose play/pause and clear actions. The saved waveform becomes a native range-based playback timeline with elapsed progress, pointer scrubbing, and keyboard seeking.\n- Clear pauses playback, revokes the Blob URL, resets duration and waveform state, and publishes `null` through the normal field value contract.\n- Playback creates its Blob URL lazily and revokes it when the value changes or the component unmounts.\n- Stopping waits for MediaRecorder's final `dataavailable` event before publishing the Blob.\n- Starting another recording replaces the previous value only once microphone setup succeeds.\n- Permission denial, missing microphones, and unsupported browser APIs are surfaced in the control and through `onError`.\n- Microphone tracks, cutoff timers, animation frames, audio graph nodes, observers, and the AudioContext are released on stop, failure, or unmount.\n\n## Accessibility\n\n- The visible field label targets the current microphone/stop button.\n- Microphone, stop, play, pause, and clear actions have accessible labels and tooltips.\n- Recording and playback state changes are announced through a polite live region without announcing the timer every second.\n- Operational errors use `role=\"alert\"`; duration requirements use the inherited Field error rendering.\n- The canvas is decorative and hidden from assistive technology. A transparent native range input exposes the finalized waveform as a labelled slider with elapsed and total time.\n- Compact rings are decorative pseudo-elements and add no accessibility-tree content.\n\n## Browser requirements\n\nMicrophone capture requires a secure context (HTTPS, with localhost allowed by browsers), user permission, MediaRecorder, and Web Audio API support.\n\n## Theme parts\n\n- `root` - Field root and variant width behavior.\n- `inputContainer` - Input-like recording surface.\n- `content` - Waveform, operational error, and timer region.\n- `action` - Microphone/stop action, including compact level rings.\n- `playbackAction` - Play/pause action shown for a finalized recording.\n- `clearAction` - Clear action shown for a finalized recording.\n- `waveformContainer` - Relative live/playback waveform surface and focus treatment.\n- `waveform` - Responsive visual canvas.\n- `waveformInput` - Native range hitbox layered over a finalized waveform.\n- `timer` - Stable tabular duration.\n- `error` - Operational error message.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+    readonly avatar: "\n# Avatar Component\n\nThe Avatar component displays a user's profile picture with fallback initials. It supports a bindable loading flag, various sizes, and badges (prefix/suffix). The AvatarGroup component displays multiple avatars with overlap.\n\n## Basic Usage\n\n```svelte\n<Avatar name=\"John Doe\" src=\"https://example.com/avatar.png\" />\n```\n\n## Props\n\n### Core Props\n- **name**: string (required) - Display name; its initials are the fallback when no image renders\n- **src**: string - Image URL; omit it, or let it fail, to render the initials instead\n- **alt**: string - Alternative text for the image (defaults to `name`)\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 24px (1.5rem)\n  - normal: 32px (2rem)\n  - large: 40px (2.5rem)\n\n### Loading Props\n- **delay**: number (default: 0) - Delay in milliseconds before showing avatar\n- **loading**: boolean (default: false, bindable) - True while the image request is in flight; false with no `src`, and false once the image has loaded or failed. A failed image is reported by rendering the initials.\n\n### Content Slots\n- **prefix**: Slot - Badge/icon positioned at bottom-left\n- **suffix**: Slot - Badge/icon positioned at bottom-right\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Avatar Structure\n\n```\n<Avatar>\n\t<AvatarImage />        <!-- Profile picture -->\n\t<AvatarPrefix />       <!-- Behind the image (bottom-left) -->\n\t<AvatarSuffix />       <!-- Absolute position (bottom-right) -->\n\t<AvatarInitials />     <!-- Fallback initials -->\n</Avatar>\n```\n\n## AvatarGroup Props\n\n### Core Props\n- **items**: Array<{ src?: string; alt?: string; name: string } & T> (required) - Avatar items\n- **max**: number - Maximum number of avatars to show before \"+N\" indicator\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n\n### Content Slots\n- **avatar**: Snippet<{ item: T; index: number; avatarProps }> - Custom avatar rendering\n- **remainingCount**: Snippet<{ items: T[]; remaining: number }> - Custom \"+N\" counter rendering\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## AvatarGroup Structure\n\n```\n<AvatarGroup>\n\t<Avatar />\n\t<Avatar />\n\t<Avatar />\n\t<AvatarGroupCount />   <!-- \"+N\" indicator -->\n</AvatarGroup>\n```\n\n## Examples\n\n### Basic Avatar\n```svelte\n<Avatar name=\"Jane Smith\" src=\"/images/jane.jpg\" />\n```\n\n### Without Image (Initials)\n```svelte\n<Avatar name=\"John Doe\" />\n<!-- Displays \"JD\" -->\n```\n\n### Different Sizes\n```svelte\n<Avatar size=\"small\" name=\"Small User\" />\n<Avatar size=\"normal\" name=\"Normal User\" />\n<Avatar size=\"large\" name=\"Large User\" />\n```\n\n### With Status Badge (Prefix)\n```svelte\n<Avatar name=\"John Doe\">\n\t{#snippet prefix()}\n\t\t<div class=\"w-2 h-2 rounded-full bg-success\"></div>\n\t{/snippet}\n</Avatar>\n```\n\n### With Icon Badge (Suffix)\n```svelte\n<script lang=\"ts\">\n\timport { Avatar } from 'entasis/avatar';\n\timport { checkIcon } from 'entasis/icons/check';\n</script>\n\n<Avatar name=\"Jane Smith\">\n\t{#snippet suffix()}\n\t\t{@render checkIcon({ class: 'text-success' })}\n\t{/snippet}\n</Avatar>\n```\n\n### With Loading State\n```svelte\n<script lang=\"ts\">\n\tlet loading = $state(false);\n</script>\n\n<Avatar name=\"John Doe\" src=\"/avatar.jpg\" bind:loading />\n{loading}\n```\n\n### Avatar Group\n```svelte\n<script>\n\tlet items = [\n\t\t{ name: 'John Doe', src: '/john.jpg' },\n\t\t{ name: 'Jane Smith', src: '/jane.jpg' },\n\t\t{ name: 'Bob Johnson', src: '/bob.jpg' }\n\t];\n</script>\n\n<AvatarGroup {items} />\n```\n\n### Avatar Group with Max Limit\n```svelte\n<AvatarGroup \n\titems={[\n\t\t{ name: 'User 1' },\n\t\t{ name: 'User 2' },\n\t\t{ name: 'User 3' },\n\t\t{ name: 'User 4' },\n\t\t{ name: 'User 5' }\n\t]}\n\tmax={3}\n/>\n<!-- Shows 3 avatars + \"+2\" indicator -->\n```\n\n### Custom Avatar in Group\n```svelte\n<script lang=\"ts\">\n\timport { Avatar, AvatarGroup } from 'entasis/avatar';\n\n\tlet items = [{ name: 'John Doe' }, { name: 'Jane Smith' }];\n</script>\n\n<AvatarGroup {items}>\n\t{#snippet avatar({ item, index, avatarProps })}\n\t\t<Avatar {...avatarProps} {...item}>\n\t\t\t{#snippet suffix()}\n\t\t\t\t<span class=\"text-xs\">{index + 1}</span>\n\t\t\t{/snippet}\n\t\t</Avatar>\n\t{/snippet}\n</AvatarGroup>\n```\n\n### Custom Remaining Count\n```svelte\n<script lang=\"ts\">\n\timport { AvatarGroup } from 'entasis/avatar';\n\n\tlet items = [{ name: 'User 1' }, { name: 'User 2' }, { name: 'User 3' }, { name: 'User 4' }];\n</script>\n\n<AvatarGroup {items} max={3}>\n\t{#snippet remainingCount({ remaining })}\n\t\t<div class=\"avatar-count\">\n\t\t\t+{remaining} more\n\t\t</div>\n\t{/snippet}\n</AvatarGroup>\n```\n\n### Status Indicators\n```svelte\n<Avatar name=\"Online User\">\n\t{#snippet suffix()}\n\t\t<div class=\"w-3 h-3 rounded-full bg-success border-2 border-surface\"></div>\n\t{/snippet}\n</Avatar>\n\n<Avatar name=\"Away User\">\n\t{#snippet suffix()}\n\t\t<div class=\"w-3 h-3 rounded-full bg-warning border-2 border-surface\"></div>\n\t{/snippet}\n</Avatar>\n```\n\n## Accessibility\n\n- `alt` defaults to `name`, so the image always carries alt text\n- Fallback to initials when image fails to load\n- Proper foreground for initials display\n- The image loading flag is bindable\n\n## Notes\n\n- Initials are automatically extracted from the name (first letter of first two words)\n- Avatar image uses object-cover to maintain aspect ratio\n- Prefix badge is positioned at bottom-left, behind the image\n- Suffix badge is positioned at bottom-right, absolute positioning\n- Avatar group creates overlapping effect with negative margins\n- `loading` is true only while the image request is in flight; a failed image falls back to the initials\n- Each new `src` is loaded from scratch: `loading` goes true again and a working URL recovers the picture after a broken one\n\n## Theme Customization\n\nThe Avatar component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main avatar container styles\n- **avatarImage**: Avatar image element styles\n- **avatarPrefix**: Prefix badge styles (bottom-left)\n- **avatarSuffix**: Suffix badge styles (bottom-right)\n- **avatarInitials**: Fallback initials display styles\n\n### Theme Type Definition\n\n```typescript\nimport type { AvatarThemeProps } from 'entasis/avatar';\n\n// Example theme customization\nconst customTheme: AvatarThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'size-6',\n      normal: 'size-8',\n      large: 'size-10'\n    }\n  },\n  avatarImage: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  avatarPrefix: {\n    size: {\n      small: 'size-5 right-[-0.25rem] bottom-[-0.25rem]',\n      normal: 'size-4 right-[-0.3rem] bottom-[-0.2rem]',\n      large: 'size-5 left-[-0.4rem] bottom-[-0.4rem]'\n    }\n  },\n  avatarSuffix: {\n    size: {\n      small: 'size-3.5 left-[-0.25rem] bottom-[-0.25rem]',\n      normal: 'size-4 right-[-0.3rem] bottom-[-0.3rem]',\n      large: 'size-3.5 right-[-0.4rem] bottom-[-0.4rem]'\n    }\n  },\n  avatarInitials: {\n    size: {\n      small: 'text-xs',\n      normal: 'text-sm',\n      large: 'text-base'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all avatars\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls avatar dimensions (6/8/10)\n\n**avatarImage**:\n- base: Base classes for avatar image\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Inherited from avatar size\n\n**avatarPrefix**:\n- base: Base classes for prefix badge\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Badge size and positioning based on avatar size\n\n**avatarSuffix**:\n- base: Base classes for suffix badge\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Badge size and positioning based on avatar size\n\n**avatarInitials**:\n- base: Base classes for initials fallback\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size based on avatar size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Avatar \n  name=\"John Doe\"\n  theme={{\n    root: {\n      base: 'ring-2 ring-primary',\n      size: {\n        large: 'size-12'\n      }\n    },\n    avatarInitials: {\n      size: {\n        large: 'text-lg'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Badge Styling**:\n```svelte\n<Avatar\n  name=\"Jane Smith\"\n  theme={{\n    avatarSuffix: {\n      size: {\n        normal: 'size-5 ring-2 ring-white'\n      }\n    }\n  }}\n>\n  {#snippet suffix()}\n    <div class=\"w-3 h-3 bg-success rounded-full\"></div>\n  {/snippet}\n</Avatar>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAvatarTheme } from '../components/Avatar/index.ts';\n  \n  setAvatarTheme({\n    root: {\n      base: 'ring-2 ring-neutral-muted transition-all',\n      size: {\n        normal: 'size-10'\n      }\n    },\n    avatarInitials: {\n      base: 'font-bold'\n    }\n  });\n</script>\n```\n";
+    readonly 'avatar-group': "\n# Avatar Component\n\nThe Avatar component displays a user's profile picture with fallback initials. It supports a bindable loading flag, various sizes, and badges (prefix/suffix). The AvatarGroup component displays multiple avatars with overlap.\n\n## Basic Usage\n\n```svelte\n<Avatar name=\"John Doe\" src=\"https://example.com/avatar.png\" />\n```\n\n## Props\n\n### Core Props\n- **name**: string (required) - Display name; its initials are the fallback when no image renders\n- **src**: string - Image URL; omit it, or let it fail, to render the initials instead\n- **alt**: string - Alternative text for the image (defaults to `name`)\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 24px (1.5rem)\n  - normal: 32px (2rem)\n  - large: 40px (2.5rem)\n\n### Loading Props\n- **delay**: number (default: 0) - Delay in milliseconds before showing avatar\n- **loading**: boolean (default: false, bindable) - True while the image request is in flight; false with no `src`, and false once the image has loaded or failed. A failed image is reported by rendering the initials.\n\n### Content Slots\n- **prefix**: Slot - Badge/icon positioned at bottom-left\n- **suffix**: Slot - Badge/icon positioned at bottom-right\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Avatar Structure\n\n```\n<Avatar>\n\t<AvatarImage />        <!-- Profile picture -->\n\t<AvatarPrefix />       <!-- Behind the image (bottom-left) -->\n\t<AvatarSuffix />       <!-- Absolute position (bottom-right) -->\n\t<AvatarInitials />     <!-- Fallback initials -->\n</Avatar>\n```\n\n## AvatarGroup Props\n\n### Core Props\n- **items**: Array<{ src?: string; alt?: string; name: string } & T> (required) - Avatar items\n- **max**: number - Maximum number of avatars to show before \"+N\" indicator\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n\n### Content Slots\n- **avatar**: Snippet<{ item: T; index: number; avatarProps }> - Custom avatar rendering\n- **remainingCount**: Snippet<{ items: T[]; remaining: number }> - Custom \"+N\" counter rendering\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## AvatarGroup Structure\n\n```\n<AvatarGroup>\n\t<Avatar />\n\t<Avatar />\n\t<Avatar />\n\t<AvatarGroupCount />   <!-- \"+N\" indicator -->\n</AvatarGroup>\n```\n\n## Examples\n\n### Basic Avatar\n```svelte\n<Avatar name=\"Jane Smith\" src=\"/images/jane.jpg\" />\n```\n\n### Without Image (Initials)\n```svelte\n<Avatar name=\"John Doe\" />\n<!-- Displays \"JD\" -->\n```\n\n### Different Sizes\n```svelte\n<Avatar size=\"small\" name=\"Small User\" />\n<Avatar size=\"normal\" name=\"Normal User\" />\n<Avatar size=\"large\" name=\"Large User\" />\n```\n\n### With Status Badge (Prefix)\n```svelte\n<Avatar name=\"John Doe\">\n\t{#snippet prefix()}\n\t\t<div class=\"w-2 h-2 rounded-full bg-success\"></div>\n\t{/snippet}\n</Avatar>\n```\n\n### With Icon Badge (Suffix)\n```svelte\n<script lang=\"ts\">\n\timport { Avatar } from 'entasis/avatar';\n\timport { checkIcon } from 'entasis/icons/check';\n</script>\n\n<Avatar name=\"Jane Smith\">\n\t{#snippet suffix()}\n\t\t{@render checkIcon({ class: 'text-success' })}\n\t{/snippet}\n</Avatar>\n```\n\n### With Loading State\n```svelte\n<script lang=\"ts\">\n\tlet loading = $state(false);\n</script>\n\n<Avatar name=\"John Doe\" src=\"/avatar.jpg\" bind:loading />\n{loading}\n```\n\n### Avatar Group\n```svelte\n<script>\n\tlet items = [\n\t\t{ name: 'John Doe', src: '/john.jpg' },\n\t\t{ name: 'Jane Smith', src: '/jane.jpg' },\n\t\t{ name: 'Bob Johnson', src: '/bob.jpg' }\n\t];\n</script>\n\n<AvatarGroup {items} />\n```\n\n### Avatar Group with Max Limit\n```svelte\n<AvatarGroup \n\titems={[\n\t\t{ name: 'User 1' },\n\t\t{ name: 'User 2' },\n\t\t{ name: 'User 3' },\n\t\t{ name: 'User 4' },\n\t\t{ name: 'User 5' }\n\t]}\n\tmax={3}\n/>\n<!-- Shows 3 avatars + \"+2\" indicator -->\n```\n\n### Custom Avatar in Group\n```svelte\n<script lang=\"ts\">\n\timport { Avatar, AvatarGroup } from 'entasis/avatar';\n\n\tlet items = [{ name: 'John Doe' }, { name: 'Jane Smith' }];\n</script>\n\n<AvatarGroup {items}>\n\t{#snippet avatar({ item, index, avatarProps })}\n\t\t<Avatar {...avatarProps} {...item}>\n\t\t\t{#snippet suffix()}\n\t\t\t\t<span class=\"text-xs\">{index + 1}</span>\n\t\t\t{/snippet}\n\t\t</Avatar>\n\t{/snippet}\n</AvatarGroup>\n```\n\n### Custom Remaining Count\n```svelte\n<script lang=\"ts\">\n\timport { AvatarGroup } from 'entasis/avatar';\n\n\tlet items = [{ name: 'User 1' }, { name: 'User 2' }, { name: 'User 3' }, { name: 'User 4' }];\n</script>\n\n<AvatarGroup {items} max={3}>\n\t{#snippet remainingCount({ remaining })}\n\t\t<div class=\"avatar-count\">\n\t\t\t+{remaining} more\n\t\t</div>\n\t{/snippet}\n</AvatarGroup>\n```\n\n### Status Indicators\n```svelte\n<Avatar name=\"Online User\">\n\t{#snippet suffix()}\n\t\t<div class=\"w-3 h-3 rounded-full bg-success border-2 border-surface\"></div>\n\t{/snippet}\n</Avatar>\n\n<Avatar name=\"Away User\">\n\t{#snippet suffix()}\n\t\t<div class=\"w-3 h-3 rounded-full bg-warning border-2 border-surface\"></div>\n\t{/snippet}\n</Avatar>\n```\n\n## Accessibility\n\n- `alt` defaults to `name`, so the image always carries alt text\n- Fallback to initials when image fails to load\n- Proper foreground for initials display\n- The image loading flag is bindable\n\n## Notes\n\n- Initials are automatically extracted from the name (first letter of first two words)\n- Avatar image uses object-cover to maintain aspect ratio\n- Prefix badge is positioned at bottom-left, behind the image\n- Suffix badge is positioned at bottom-right, absolute positioning\n- Avatar group creates overlapping effect with negative margins\n- `loading` is true only while the image request is in flight; a failed image falls back to the initials\n- Each new `src` is loaded from scratch: `loading` goes true again and a working URL recovers the picture after a broken one\n\n## Theme Customization\n\nThe Avatar component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main avatar container styles\n- **avatarImage**: Avatar image element styles\n- **avatarPrefix**: Prefix badge styles (bottom-left)\n- **avatarSuffix**: Suffix badge styles (bottom-right)\n- **avatarInitials**: Fallback initials display styles\n\n### Theme Type Definition\n\n```typescript\nimport type { AvatarThemeProps } from 'entasis/avatar';\n\n// Example theme customization\nconst customTheme: AvatarThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'size-6',\n      normal: 'size-8',\n      large: 'size-10'\n    }\n  },\n  avatarImage: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  avatarPrefix: {\n    size: {\n      small: 'size-5 right-[-0.25rem] bottom-[-0.25rem]',\n      normal: 'size-4 right-[-0.3rem] bottom-[-0.2rem]',\n      large: 'size-5 left-[-0.4rem] bottom-[-0.4rem]'\n    }\n  },\n  avatarSuffix: {\n    size: {\n      small: 'size-3.5 left-[-0.25rem] bottom-[-0.25rem]',\n      normal: 'size-4 right-[-0.3rem] bottom-[-0.3rem]',\n      large: 'size-3.5 right-[-0.4rem] bottom-[-0.4rem]'\n    }\n  },\n  avatarInitials: {\n    size: {\n      small: 'text-xs',\n      normal: 'text-sm',\n      large: 'text-base'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all avatars\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls avatar dimensions (6/8/10)\n\n**avatarImage**:\n- base: Base classes for avatar image\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Inherited from avatar size\n\n**avatarPrefix**:\n- base: Base classes for prefix badge\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Badge size and positioning based on avatar size\n\n**avatarSuffix**:\n- base: Base classes for suffix badge\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Badge size and positioning based on avatar size\n\n**avatarInitials**:\n- base: Base classes for initials fallback\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size based on avatar size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Avatar \n  name=\"John Doe\"\n  theme={{\n    root: {\n      base: 'ring-2 ring-primary',\n      size: {\n        large: 'size-12'\n      }\n    },\n    avatarInitials: {\n      size: {\n        large: 'text-lg'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Badge Styling**:\n```svelte\n<Avatar\n  name=\"Jane Smith\"\n  theme={{\n    avatarSuffix: {\n      size: {\n        normal: 'size-5 ring-2 ring-white'\n      }\n    }\n  }}\n>\n  {#snippet suffix()}\n    <div class=\"w-3 h-3 bg-success rounded-full\"></div>\n  {/snippet}\n</Avatar>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAvatarTheme } from '../components/Avatar/index.ts';\n  \n  setAvatarTheme({\n    root: {\n      base: 'ring-2 ring-neutral-muted transition-all',\n      size: {\n        normal: 'size-10'\n      }\n    },\n    avatarInitials: {\n      base: 'font-bold'\n    }\n  });\n</script>\n```\n";
+    readonly chart: "\n# Chart Component\n\nChart renders layered cartesian, polar, relation, or faceted marks from one typed data array. Consumers import only from `entasis/chart`; TanStack Charts and D3 stay private implementation details of the component, but they must be installed as optional peer dependencies.\n\n## Requires\n\nChart renders through TanStack Charts and D3. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add @tanstack/charts d3-array d3-force d3-hierarchy d3-sankey d3-scale d3-shape`\n\nOne public type (`curve`) is D3's `CurveFactory`, so TypeScript users add its typings: `pnpm add -D @types/d3-shape`.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { Chart } from '../components/Chart/index.ts'\n\n  type Row = { month: Date; actual: number; forecast: number; low: number; high: number }\n  const x = { scale: { type: 'utc' }, axis: { label: 'Month' } } as const\n  const y = { scale: { type: 'linear' }, grid: true } as const\n  const marks = [\n      {\n        type: 'series',\n        x: 'month',\n        y: 'forecast',\n        interval: { lower: 'low', upper: 'high', fill: 'secondary' },\n        analysis: [\n          { type: 'reference', statistic: 'median' },\n          { type: 'rolling', statistic: 'mean', window: 3 }\n        ]\n      },\n      { type: 'series', x: 'month', y: 'actual', stroke: 'primary', points: true }\n    ] as const\n</script>\n\n<Chart\n  data={rows}\n  {x}\n  {y}\n  {marks}\n  tooltip\n  viewport\n  label=\"Monthly revenue\"\n  height={320}\n/>\n```\n\n## Contract\n\n- `data` is one immutable array shared by every mark.\n- `marks` is a required non-empty discriminated union; array order is paint order.\n- A `series` mark renders a line by default. Set `area`, `points`, or `line` with booleans or local option objects to compose its visible layers.\n- A series `interval` adds a non-interactive band behind the same line. Its required `lower` and `upper` numeric channels represent explicit bounds such as confidence, prediction, credible, or min/max intervals. `interval` and `area` are mutually exclusive because both own the filled surface.\n- `analysis` is a non-empty list of derived statistical layers owned by a series, scatter, bar, or distribution mark. Reference analysis supports mean, median, quantile, and standard deviation. Series and scatter support linear regression with optional confidence or prediction intervals. Series also supports rolling mean and rolling median. Analysis can use the complete plot or each series independently and does not add tooltip points. Stacked layouts reject analysis because their displayed values differ from the source channels.\n- A `scatter` mark renders independent observations with the default `points` variant. A numeric `size` is a constant pixel radius. A `size` data channel uses `sqrt` by default; `sizeScale` accepts `linear`, `sqrt`, `log`, `exp`, or an object with `type`, `domain`, `range`, and an optional `base` for logarithmic or exponential scales. The `hexbin` variant accepts numeric `x` and `y` channels and aggregates dense observations into responsive pixel-space hexagons; `radius` controls the bin size.\n- A `bar` mark is simple by default. Its optional `variant` is `group` or `stack`. Use `offset: 'normalize'` on a stacked bar to compare proportions with a 0–1 value axis. A stacked bar also accepts `gap` (pixels of surface between consecutive segments of one stack).\n- Wide data: a stacked bar, and an area series with `layout: { type: 'stack' }`, accept a list of numeric fields as their value channel (`y: ['completed', 'inProgress', 'pending']`, or `x` when horizontal). The rows are melted internally into one series per field, the field name becoming the series key, in the order the fields are listed. A wide mark owns its series identity, so it takes no `series` or `colorBy`, and rejects `annotations` and `analysis`. Long format with a `series` channel keeps working unchanged.\n- A `matrix` mark uses the default `grid` variant with categorical `x` and `y` channels. Use `colorBy` for a categorical matrix, or use a numeric `value` with `color` for a heatmap. The `calendar` variant replaces `x` and `y` with a `date` channel and derives week and weekday axes automatically. Its optional `colorScale` accepts a `quantize` domain and an ordered color range.\n- A data mark can own `arrow`, `label`, `rule`, `band`, and `marker` annotations. Targets resolve against the parent mark's final rendered coordinates. A band annotation uses `thickness` for its cross-axis size.\n- Position scales use local string discriminants such as `linear`, `utc`, and `band`.\n- `tooltip: true` groups cartesian marks on the categorical or x axis, renders native color rows, and stays inside the chart surface without adding chart focus states.\n- `palette` is either an ordered list consumed in series-discovery order, or a record keyed by series key (`{ completed: 'success', pending: 'danger' }`). Record entries win by key; a series without an entry falls back to the default palette in discovery order.\n- `ChartColor` accepts the seven semantic roles and the surface family (`surface`, `surface-recessed`, `surface-canvas`, `surface-raised`, `surface-floating`); anything else is passed through as a CSS color.\n- `legend: true` shows a categorical color key, or a numeric heatmap/hexbin color ramp. Use `legend: { interactive: true }` to hide and show series, bars, scatter points, and empirical distributions whose series and color identities match. Other layouts use static legends; facets keep their own labels. Visibility preserves axes, colors, and stack totals. The object accepts `placement: 'top' | 'bottom'`, `label`, controlled `value` and `onValueChange`, or an initial `defaultValue`; omitted visibility shows every series.\n- `legend.format: (key) => string` sets the display text of a series independently of its key. The same formatter labels the series in the tooltip.\n- A categorical legend is drawn by the library, not by the rendering engine: the interactive one is a `ToggleButtonGroup` of small ghost toggles, one per series, each carrying a color swatch of the resolved series color and the `legend.format` label, pressed when the series is visible; the static one is the same swatch and label as plain items. It takes its own row above or below the plot and the plot shrinks by that row. A numeric legend stays a color ramp drawn inside the plot. Style the row with the `legend`, `legendItem`, and `legendSwatch` theme parts.\n- Legend layout accepts `align: 'left' | 'center' | 'right'` and `orientation: 'horizontal' | 'vertical'`. Vertical stacks categorical entries in one column; numeric color ramps stay horizontal. Both static and interactive legends support alignment and top/bottom placement.\n- Histogram and rolling preparation use native transforms. Regression uses native Student-t confidence bounds; prediction intervals add observation uncertainty to the fitted-mean bounds. Small samples therefore have wider intervals than a fixed normal approximation.\n- Tooltip objects can override grouping with `groupBy: 'x'`, `groupBy: 'y'`, or `groupBy: false`.\n- A tooltip can be pinned: `tooltip.value` / `tooltip.defaultValue` take the row key of the pinned datum (the mark's `key` channel when it has one, its x value otherwise; `null` pins nothing). A pinned row shows its tooltip on mount, hover moves the tooltip normally, pointer leave restores the pinned row, and clicking a datum pins it (clicking it again unpins) through `tooltip.onValueChange`. Pinning is disabled while `viewport` owns the press gesture.\n- `viewport: true` enables native x-axis brush zoom with pointer and touch input, an accessible reset control, and a reduced-motion-aware transition. Numeric and date axes select continuous windows; categorical axes snap to values and also expose keyboard handles. The object form accepts `reset` and `transition` options. Native 2D brushing is not supported.\n- A `distribution` mark reads one categorical `group` channel and one numeric `value` channel. Its summary variants are `violin`, `box`, and `error-bar`. Its raw-sample variants are `histogram`, `density`, and `ecdf`. Histogram accepts `bins`; density accepts `bandwidth` and `samples`; `direction` can be `vertical` or `horizontal`.\n- Distribution tooltips use a built-in statistical summary. They do not accept custom `tooltip.fields`.\n- A `proportion` mark reads one categorical `category` channel and one non-negative numeric `value` channel. Its `variant` is `pie`, `donut`, or `waffle`; consumers do not calculate angles or cells.\n- A `polar` mark reads `angle` and `radius` channels. The `circular` and `radar` variants compose boolean `area`, `line`, and `points` layers. The `radial-bar` and `rose` variants render wedges and expose only bar options.\n- A `relation` mark owns a complete topology layout. Its `tree` variant reads `nodeId` and `parent`; its `network` and `sankey` variants read `nodeId` and an outgoing `relations` channel. Relation marks cannot use axes, sibling marks, facets, or custom tooltip fields.\n- A `facet` mark owns nested `marks` with the same public union and inherits the plot positions.\n- Proportion tooltips show the category value and its share. They do not accept custom `tooltip.fields` or grouped axes.\n- `label` is required and `ariaDescription` is optional.\n- Sizing has one input: `height` (pixels) or `aspectRatio`. Either one sizes the plot and the server-rendered SVG (laid out at 800px wide), and they cannot be combined. With neither, the root class owns the height (320px by default, replaced by a height class on `class`) and SSR emits a stable empty host whose SVG mounts only in the browser.\n- Replace `data`, `marks`, or another configuration prop to update a mounted chart. In-place mutation is not an update contract.\n- Configuration errors throw a prefixed `TypeError`; dependency and accessor errors propagate.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` are the default\n  timing of the viewport zoom settle; `viewport.transition` still overrides per chart.\n- Ladder: `<Theme components={{ chart: { motion } }}>` → `setChartTheme({ motion })` →\n  `theme.motion`. Reduced motion collapses the duration to 0 and the chart snaps.\n";
+    readonly chip: "\n# Chip Component\n\nThe Chip component is a compact element for displaying tags, labels, categories, filters, or positioned indicators. It supports colors, variants, sizes, links, buttons, and optional corner placement.\n\n## Basic Usage\n\n```svelte\n<Chip>Tag</Chip>\n<Chip color=\"primary\">Primary Tag</Chip>\n<Chip variant=\"outline\">Outline Tag</Chip>\n```\n\n## Props\n\n### Core Props\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'primary')\n  - Determines the color scheme\n\n- **variant**: 'solid' | 'outline' | 'soft' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Semi-transparent background\n\n- **selected**: boolean (default: false)\n  - Sets `data-selected` and paints the shared soft selected fill on top of `variant`\n  - Also the chip's accessible state: `aria-pressed` on a chip that resolved to a button, `aria-current` on one that resolved to a link. Never pass either attribute yourself\n  - A chip with neither `onclick` nor `href` has no interactive role, so there `selected` is paint-only\n  - Use it for chip lists that mark their chosen entries (filters, tag pickers)\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact size for dense layouts\n  - normal: Standard size\n  - large: Larger for emphasis\n\n- **position**: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' (optional)\n  - Turns the Chip into an absolutely positioned overlay anchored to the selected corner\n  - Requires a containing element with a positioning context such as `position: relative`\n\n### Interactive Props\n- **onclick**: (event: MouseEvent) => void - Native click handler (makes chip a button)\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave handler\n\n### Link Props\n- **href**: string - Makes chip render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Content Slots\n- **children**: Snippet - Main chip content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically close buttons or icons)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Chip>\n\t<Prefix />     <!-- Optional prefix -->\n\t<Children />   <!-- Main content -->\n\t<Suffix />     <!-- Optional suffix -->\n</Chip>\n```\n\n## Examples\n\n### Basic Chips\n```svelte\n<Chip>Default</Chip>\n<Chip variant=\"outline\">Outline</Chip>\n<Chip variant=\"soft\">Soft</Chip>\n```\n\n### Color Variants\n```svelte\n<Chip color=\"primary\">Primary</Chip>\n<Chip color=\"secondary\">Secondary</Chip>\n<Chip color=\"danger\">Danger</Chip>\n<Chip color=\"success\">Success</Chip>\n<Chip color=\"warning\">Warning</Chip>\n<Chip color=\"info\">Info</Chip>\n```\n\n### Different Sizes\n```svelte\n<Chip size=\"small\">Small</Chip>\n<Chip size=\"normal\">Normal</Chip>\n<Chip size=\"large\">Large</Chip>\n```\n\n### Positioned Indicator\n\n```svelte\n<div class=\"relative\">\n\t<Button>Notifications</Button>\n\t<Chip position=\"top-right\" color=\"danger\">3</Chip>\n</div>\n```\n\n### With Icons\n```svelte\n<script lang=\"ts\">\n\timport { Chip } from 'entasis/chip';\n\timport { tagIcon } from 'entasis/icons/tag';\n\timport { xIcon } from 'entasis/icons/x';\n</script>\n\n<Chip>\n\t{#snippet prefix()}\n\t\t{@render tagIcon()}\n\t{/snippet}\n\tTagged\n</Chip>\n\n<Chip>\n\tCategory\n\t{#snippet suffix()}\n\t\t{@render xIcon()}\n\t{/snippet}\n</Chip>\n```\n\n### Interactive Chip (Button)\n```svelte\n<script>\n\tfunction handleClick() {\n\t\tconsole.log('Chip clicked');\n\t}\n</script>\n\n<Chip onclick={handleClick}>\n\tClickable\n</Chip>\n```\n\n### Removable Chip\n```svelte\n<script lang=\"ts\">\n\timport { Chip } from 'entasis/chip';\n\timport { xIcon } from 'entasis/icons/x';\n\n\tlet tags = $state(['React', 'Vue', 'Svelte']);\n\n\tfunction removeTag(tag: string) {\n\t\ttags = tags.filter((t) => t !== tag);\n\t}\n</script>\n\n{#each tags as tag}\n\t<Chip color=\"primary\">\n\t\t{tag}\n\t\t{#snippet suffix()}\n\t\t\t<button onclick={() => removeTag(tag)}>\n\t\t\t\t{@render xIcon({ size: 12 })}\n\t\t\t</button>\n\t\t{/snippet}\n\t</Chip>\n{/each}\n```\n\n### As Link\n```svelte\n<Chip href=\"/tags/svelte\" target=\"_blank\">\n\tSvelte Tag\n</Chip>\n```\n\n### Status Chips\n```svelte\n<Chip color=\"success\" variant=\"soft\">Active</Chip>\n<Chip color=\"warning\" variant=\"soft\">Pending</Chip>\n<Chip color=\"danger\" variant=\"soft\">Inactive</Chip>\n```\n\n### With Custom Styling\n```svelte\n<Chip class=\"lift-3 hover:lift-4 transition-shadow\">\n\tCustom Style\n</Chip>\n```\n\n### Filter Chips\n```svelte\n<script>\n\tlet filters = $state(['All', 'Active', 'Completed', 'Archived']);\n\tlet selected = $state('All');\n</script>\n\n<div class=\"flex gap-2\">\n\t{#each filters as filter}\n\t\t<Chip\n\t\t\tselected={selected === filter}\n\t\t\tvariant={selected === filter ? 'soft' : 'outline'}\n\t\t\tonclick={() => selected = filter}\n\t\t>\n\t\t\t{filter}\n\t\t</Chip>\n\t{/each}\n</div>\n```\n\n### Category Chips\n```svelte\n<div class=\"flex flex-wrap gap-2\">\n\t<Chip color=\"primary\" variant=\"soft\">JavaScript</Chip>\n\t<Chip color=\"secondary\" variant=\"soft\">TypeScript</Chip>\n\t<Chip color=\"info\" variant=\"soft\">CSS</Chip>\n\t<Chip color=\"success\" variant=\"soft\">HTML</Chip>\n</div>\n```\n\n## Rendering Behavior\n\n- Renders as `<button>` when `onclick`, `onpointerenter`, or `onpointerleave` is provided\n- Renders as `<a>` when `href` is provided\n- Renders as `<div>` otherwise\n\n- Becomes absolutely positioned only when `position` is set\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles\n- Button chips support keyboard interaction\n- Link chips support standard anchor behavior\n- Proper focus states for interactive chips\n\n## Notes\n\n- The chip automatically determines its element type based on props\n- Interactive chips have hover and focus states\n- Suffix is commonly used for close/remove actions\n- Prefix is typically used for icons or status indicators\n- Positioned Chips replace the need for a separate Badge component\n\n## Theme Customization\n\nThe Chip component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main chip container styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n\n### Theme Type Definition\n\n```typescript\nimport type { ChipThemeProps } from 'entasis/chip';\n\n// Example theme customization\nconst customTheme: ChipThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'px-1.5 py-0.5 min-h-4 text-sm gap-1',\n      normal: 'px-2 py-0.5 min-h-5 text-base gap-1',\n      large: 'px-2.5 py-0.5 min-h-6 text-md gap-1.5'\n    },\n    color: {\n      primary: 'bg-primary text-primary-contrast',\n      danger: 'bg-danger text-danger-contrast'\n    },\n    variant: {\n      solid: 'text-color-contrast bg-color',\n      outline: 'bg-opacity-0 text-color border-color border',\n      soft: 'bg-color-muted text-color'\n\t},\n\tposition: {\n\t\t'top-right': 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2',\n\t\t'top-left': 'absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2',\n\t\t'bottom-right': 'absolute right-0 bottom-0 translate-x-1/2 translate-y-1/2',\n\t\t'bottom-left': 'absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-2 h-2',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  },\n  suffix: {\n    size: {\n      small: 'w-2 h-2',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all chips\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, height, text size, and gap\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' - Visual style variant\n  - position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - Optional absolute corner placement\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on chip size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on chip size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Chip \n  theme={{\n    root: {\n      base: 'rounded-full lift-3',\n      size: {\n        large: 'px-4 py-2 min-h-8'\n      }\n    }\n  }}\n>\n  Custom Chip\n</Chip>\n```\n\n**Color and Variant Customization**:\n```svelte\n<Chip \n  color=\"danger\"\n  variant=\"outline\"\n  theme={{\n    root: {\n      variant: {\n        outline: 'border-2 border-red-500 bg-red-50 text-red-700'\n      }\n    }\n  }}\n>\n  Danger Chip\n</Chip>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setChipTheme } from '../components/Chip/index.ts';\n  \n  setChipTheme({\n    root: {\n      base: 'transition-all hover:scale-105',\n      variant: {\n        solid: 'lift-1 hover:lift-3',\n        outline: 'state-layer border-2'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'event-calendar': "\n# EventCalendar\n\nA typed scheduling calendar for Svelte 5. It renders month, week, day, configurable N-day, agenda, and resource-day views from one occurrence model. The consumer owns loading and persistence; EventCalendar owns range derivation, recurrence expansion, layout, selection, accessible interaction, validation, clipboard operations, bounded history, and immutable mutation transactions.\n\n## Import\n\n~~~svelte\n<script lang=\"ts\">\n\timport { EventCalendar, type EventCalendarItem } from 'entasis/event-calendar';\n\n\tlet date = $state(new Date('2026-07-15T10:00:00.000Z'));\n\tlet items = $state<EventCalendarItem[]>([]);\n</script>\n\n<EventCalendar bind:date bind:items timeZone=\"Europe/Paris\" class=\"h-[42rem]\" />\n~~~\n\n'date' and 'timeZone' are required. Contained scrolling also requires a definite height through 'class'. The display-zone name must be 'UTC' or an IANA zone; EventCalendar never infers a server/browser system zone.\n\n## Data model\n\n- Every range is half-open: [start, end). Timed boundaries are Date instants.\n- All-day starts and exclusive ends are canonical YYYY-MM-DD strings. Valid civil dates span 0001-01-01 through 9999-12-31, but 9999-12-30 is the last selectable/renderable day because a rendered day needs an exclusive end. An all-day end may be 9999-12-31.\n- Items need stable unique ids. Invalid items, resources, views, zones, recurrence, and stale transactions throw EventCalendarError with a public EventCalendarErrorCode.\n- 'items' and 'resources' are immutable controlled collections: allocate a fresh outer array for every consumer update and replace changed definitions. EventCalendar never mutates consumer objects.\n- EventCalendarItem<TItemFields> includes optional 'description' and 'color' fields and preserves custom fields through props, snippets, callbacks, and API methods. Item colors accept Entasis semantic tokens or CSS colors; omitted item colors render as neutral. Custom fields cannot redeclare calendar-owned keys.\n- Foreground items can be timed, all-day, multi-day, or recurring. 'display: background' items are display-only and never interactive.\n- Assign one leaf with 'resourceId' or several leaves with an ordered unique 'resourceIds' array. The two fields are mutually exclusive.\n- Timed recurrence requires an explicit 'recurrenceTimeZone'. All-day recurrence remains floating civil dates.\n\n## State and view props\n\n- 'items': EventCalendarItem<TItemFields>[] = [] (bindable)\n- 'view': 'month' | 'week' | 'day' | 'days' | 'agenda' | 'resource' = 'month' (bindable)\n- 'views': ordered, unique enabled-view list = all six views. Resource is available only with at least one leaf resource.\n- 'date': Date (required, bindable anchor instant)\n- 'dayCount': positive integer = 3 (bindable; used by 'days')\n- 'selection': EventCalendarSelection = empty (bindable)\n- 'resources': EventCalendarResource<TResourceFields>[] = []\n- 'loading': boolean = false. Marks content busy and blocks content interaction, not navigation.\n- 'disabled': boolean = false. Blocks navigation, selection, and mutation.\n\nThe component never changes 'view' because its container becomes narrow. Previous/next/today, header controls, and the imperative API reassign bindable state and call matching change callbacks. External assignments do not echo the same callback. Navigation beyond the supported civil domain is a no-op; direct invalid anchors and jumps throw.\n\n## Date, locale, and range props\n\n- 'timeZone': required IANA name or 'UTC'\n- 'locale': BCP-47 string; defaults to the active Entasis catalog locale\n- 'i18n': per-instance Partial<Messages>\n- 'dir': 'ltr' | 'rtl'; defaults to ambient direction\n- 'weekStartsOn': 0..6; otherwise locale-derived\n- 'validRange': half-open Date range\n- 'onRangeChange(payload)': receives view, anchor date, time zone, current/render/active/fetch ranges, and exact visibleDays\n\n'fetchRange' is the clipped active rendering/interaction envelope. The consumer must return overlapping non-recurring definitions, recurring sources that expand into the range, moved exception definitions selected by current or reconstructed original occurrence overlap, and every returned exception's source. EventCalendar performs no requests, caching, retries, or error substitution.\n\n## View settings\n\n- 'month': fixedWeeks=true, showOutsideDays=true, showWeekNumbers=false, and maxItemsPerCell=\"auto\".\n- Weekend columns remain controlled by 'showWeekends=true' and 'weekendDays=[0,6]' because the weekday classification is shared across views.\n- 'timeGrid': startHour=0, endHour=24, labelIntervalMinutes=60, slotClickDurationMinutes=30, snapDurationMinutes=15, scrollToHour=7, and nowIndicatorRefreshMs=30000.\n- 'allDayConversion': preserveDuration=false, timedDurationMinutes=60, and allDayDurationDays=1.\n- Agenda: 'agendaDayCount=30'.\n- 'availability': offDays=false, businessHours=[], and constrainMutations=false.\n- 'nowIndicator' renders the built-in current-time line when omitted, accepts a replacement snippet, and disables the line when false.\n- Scrolling/chrome: 'scrollMode=\"contained\"' uses ScrollArea; 'stickyHeader=false' and 'showDatePicker=false'. 'header' and 'itemTooltip' use their built-ins when omitted, accept replacement snippets, and disable their regions when false.\n\nNumeric and time settings are validated and never silently clamped. Hidden weekdays are removed from 'visibleDays'; day and agenda counts count rendered days.\n\n## Interaction and persistence\n\nMove, resize-start, resize-end, API updates, and keyboard mode share one proposal/validation/commit pipeline. Empty-slot drag creation and two-click selection produce a selected range; EventCalendar never fabricates a domain item.\n\n'externalEvent(createItem)' is an attachment for draggable elements outside the calendar. 'createItem' runs once at drag start and should return a structurally valid item with a fresh unique id. A valid drop uses the same placement preview, resource assignment, constraints, resolveItemUpdate callback, immutable add transaction, guarded revert, and history pipeline as internal interaction. The resulting EventCalendarChange has kind 'add' and source 'external-drop'. Invalid or cancelled drops do not change 'items'.\n\n~~~svelte\n<script lang=\"ts\">\n\timport { externalEvent, type EventCalendarItem } from 'entasis/event-calendar';\n\n\tlet sequence = 0;\n\tconst createExternalItem = (): EventCalendarItem => ({\n\t\tid: 'external-' + ++sequence,\n\t\ttitle: 'Focus block',\n\t\tstart: new Date('2026-07-15T08:00:00.000Z'),\n\t\tend: new Date('2026-07-15T09:00:00.000Z')\n\t});\n</script>\n\n<div {@attach externalEvent(createExternalItem)}>Focus block</div>\n~~~\n\nA recurring external source can move inside its original timed or all-day domain. Cross-domain conversion is rejected because timed and all-day recurrence identities have different contracts.\n\n- 'interactions': partial policy. Drag, resize, slot selection, keyboard controls, two-click range selection, and clipboard default on. interactions.createActivation controls drag-create and defaults to distancePx 5, touchDelayMs 300, touchTolerancePx 8.\n- 'allowOverlap': boolean or predicate = true.\n- 'validateItemUpdate(payload)': synchronous live item validation.\n- 'resolveItemUpdate(payload)': accept, reject with false, or adjust placement/resource. Adjustments are fully revalidated.\n- 'validateSlotSelection(slot)': synchronous slot validation.\n- Validation order is structural/editability/range, business hours, overlap, then custom policy.\n\n'onItemsChange({ items, change })' runs after one accepted immutable reassignment. Persist 'items' at the application boundary. On failure, call 'change.revert()' and then surface the original error. Revert is guarded and one-shot: it throws 'stale-transaction' rather than overwrite a newer calendar or consumer update.\n\n'interactions.clipboard=true' enables internal occurrence copy/paste through the API and Mod+C/Mod+V. Paste creates a standalone item, targets a selected compatible slot when present, and never mutates the copied recurrence series. 'historyLimit=50' bounds immutable undo entries; 0 disables history. Mod+Z undoes, Mod+Shift+Z and Mod+Y redo. History refuses stale controlled collections instead of overwriting consumer state.\n\nItem callbacks are 'onItemClick({ occurrence, event })', 'onItemDoubleClick({ occurrence, event })', 'onMoreClick({ day, occurrences, event })', and 'onInteractionBlocked'. Slot callbacks are 'onSlotClick({ slot, event })' and 'onSelect({ slot, info })'; info.source is 'drag-create', 'keyboard', or 'single-pointer'. Bound-state callbacks are 'onViewChange', 'onDateChange', 'onDayCountChange', and 'onSelectionChange'.\n\nSelection-callback naming: 'onSelect({ slot, info })' is the pick event -- the user picked this slot -- and 'onSelectionChange(payload)' is the state change of the selection model, completed by the bindable 'selection' prop and its 'defaultSelection' initial value. Those two names are the only selection callbacks on the component.\n\n## Recurrence\n\n'recurrence.editScope' is 'occurrence' by default, creating or updating a persisted exception with recurringItemId plus immutable originalStart. 'disabled' blocks recurring mutations. 'series' transforms the source and all bound exceptions atomically and is an assertion that the current 'items' collection contains the complete exception set for that editable series. A windowed consumer that cannot guarantee completeness must use 'occurrence' or 'disabled'.\n\nStructured recurrence supports daily, weekly, monthly, and yearly rules with interval, count, inclusive until, weekdays including ordinals, month days, months, week start, exclusions, and additions. Supported raw RRULE strings are accepted with explicit restrictions on series transformations. Expansion is finite and capped; unsupported rules and cap exhaustion throw. 'recurrence.expand' is the synchronous bounded escape hatch, and 'recurrence.getExceptionId' overrides exception identity generation.\n\n## Resources\n\n'resources' is a typed flat collection. 'parentId' creates groups; only leaves become resource-day columns and accept assignment. Unknown parents, cycles, and duplicate IDs throw. A leaf can define local 'businessHours' and 'readOnly'; those constraints feed the same proposal validator used by every view. Foreground/background occurrences without a resolvable leaf appear in the localized Unassigned projection. Multi-assigned events render once for every resolved leaf. Resource moves replace only the dragged projection's assignment. Parent and leaf input order is preserved.\n\n## Snippet composition\n\nSnippets replace content inside component-owned semantic and interactive wrappers:\n\n- 'header': snapshot plus ready-made previous, today, next, title, viewSwitcher, datePicker, and actions snippets; false removes the header\n- 'actions': calendar snapshot and API\n- 'item': occurrence, segment, active view (including agenda), states, defaultContent, markerContent, titleContent, and timeContent\n- 'itemTooltip': customizes the item HoverCard with occurrence, segment, view, defaultAccessibleLabel, and defaultContent; false removes it\n- 'monthCell': day/state/segments/overflow and defaultContent\n- 'dayHeader', 'timeGutter' with defaultContent, and 'allDay'\n- 'overflow' and 'overflowContent'; both expose defaultContent, and the latter preserves the built-in interactive item list when rendered\n- 'agendaDetails'\n- 'resourceHeader'\n- 'nowIndicator', 'dragPreview', 'empty', and 'loadingContent'; replacement state snippets expose defaultContent, and nowIndicator=false disables the line\n\nRender 'defaultContent' or the ready-made header snippets when wrapping the built-ins. Snippet content cannot remove item focusability, labels, selection state, drag/resize wiring, disclosures, or live announcements.\n\nEventCalendar does not own create/edit dialogs. Compose 'onSlotClick'/'onSelect'/'onItemClick' with Entasis Dialog, Form, DateInput, TimeInput, Select, and Switch, then publish a fresh 'items' array.\n\n## Imperative API\n\n'bind:this' exposes EventCalendarApi<TItemFields>:\n\n- navigation: next, previous, today, goTo, setView\n- scrolling/ranges: scrollToTime, getVisibleRange, getActiveRange, getVisibleDays\n- queries: getOccurrence, getOccurrences, getOccurrencesForDay\n- immutable mutations: addItem, updateItem, updateOccurrence, removeItem\n- clipboard/history: copySelection, paste, undo, redo, canUndo, canRedo\n- selection/interaction: select, clearSelection, cancelInteraction\n\nUnknown IDs/keys and invalid operations throw EventCalendarError. API mutations use the same validation and transaction callbacks as pointer and keyboard input.\n\n## Theme and accessibility\n\n'density' defaults to 'normal'; 'theme' accepts EventCalendarThemeProps. Import 'eventCalendarTheme', 'setEventCalendarTheme', and 'useEventCalendarTheme' from 'entasis/event-calendar'. Stable parts cover chrome, month, time grid, items/interactions, agenda, and resources. CSS metrics include --event-calendar-slot-height, --event-calendar-time-gutter-width, --event-calendar-day-min-width, --event-calendar-resource-min-width, --event-calendar-item-min-height, and --event-calendar-sticky-offset.\n\nThe active view exposes grids/groups/buttons/disclosures, roving focus, keyboard move/resize, Escape cancellation, two-click range selection, 24px interaction targets, polite announcements, reduced-motion behavior, narrow-container wrapping/scrolling, and RTL-aware physical movement. Keyboard mutation starts from a focused item, uses arrows to propose, Enter to commit, and Escape to cancel.\n";
+    readonly 'gantt-chart': "\n# GanttChart\n\nGanttChart is Entasis's typed project-scheduling surface for Svelte 5. It combines one hierarchical, virtualized tree grid with a synchronized, horizontally windowed time pane. It is a controlled component: task, dependency, and assignment definitions remain application-owned, while resolved WBS, summary spans/progress, durations, slack, critical state, constraint violations, and workload are exposed separately.\n\n## Import\n\n~~~svelte\n<script lang=\"ts\">\n\timport {\n\t\tGanttChart,\n\t\ttype GanttDependency,\n\t\ttype GanttDependencyCreationRequest,\n\t\ttype GanttTask\n\t} from 'entasis/gantt-chart';\n\n\tlet tasks = $state<GanttTask[]>([\n\t\t{ id: 'plan', title: 'Plan', type: 'summary' },\n\t\t{\n\t\t\tid: 'design',\n\t\t\tparentId: 'plan',\n\t\t\ttitle: 'Design',\n\t\t\tstart: new Date('2026-07-27T07:00:00.000Z'),\n\t\t\tend: new Date('2026-07-30T15:00:00.000Z'),\n\t\t\tprogress: 0.4\n\t\t}\n\t]);\n\tlet dependencies = $state<GanttDependency[]>([]);\n\tlet nextDependencyId = 0;\n\n\tfunction createDependency(request: GanttDependencyCreationRequest): GanttDependency {\n\t\tnextDependencyId += 1;\n\t\treturn {\n\t\t\tid: `dependency-${nextDependencyId}`,\n\t\t\tfromTaskId: request.fromTaskId,\n\t\t\ttoTaskId: request.toTaskId,\n\t\t\ttype: request.type\n\t\t};\n\t}\n</script>\n\n<GanttChart\n\tbind:tasks\n\tbind:dependencies\n\ttimeZone=\"Europe/Paris\"\n\tinteractions={{ dependencyCreation: { create: createDependency } }}\n\tclass=\"h-[36rem]\"\n/>\n~~~\n\nThe required timeZone must be UTC or an explicit IANA zone. Contained scrolling needs a definite height. GanttChart never infers a browser or server zone. Locale and SSR reading direction come from ambient Entasis I18n; without that provider, client rendering reconciles the root's computed DOM direction after mount. i18n remains available for per-instance message overrides.\n\n## Domain and controlled state\n\n- GanttTask<TTaskFields> preserves consumer fields while reserving owned keys. A normal task is scheduled with start < end or unscheduled with both endpoints absent. A milestone requires equal endpoints. A summary forbids consumer dates and derives its visible descendant span and weighted progress. Optional segments are ordered, non-overlapping intervals inside one logical task span.\n- GanttDependency<TDependencyFields> supports finish-start, start-start, finish-finish, and start-finish links plus signed minute/hour/day/week lag. Duplicate ids, missing endpoints, self-links, duplicate semantic links, and cycles throw GanttChartError.\n- GanttResource<TResourceFields>, GanttAssignment<TAssignmentFields>, and GanttCalendar are explicit typed inputs. Assignment units are 0 through 1. Calendars use IANA zones, weekday intervals, and civil-date exceptions.\n- tasks, dependencies, assignments, expandedTaskIds, selection, and zoom are bindable. resources and calendars are immutable inputs. Every accepted mutation publishes a fresh outer array and fresh changed objects.\n- Selection-callback naming: events.onSelect(payload) is the pick event -- the range a user picked on an empty row -- and events.onSelectionChange(payload) is the state change of the selection model, completed by the bindable selection prop and its defaultSelection initial value.\n- Selection is empty, a task, a dependency, or a tree cell. Query resolved nodes for WBS, derived summary values, elapsed/working duration, earliest/latest dates, total/free slack, critical state, and violations; those values never mutate definitions.\n\nConsumer field generics appear in props, layout columns, render snippets, proposals, mutation policies, events, change records, resolved nodes, and API queries/mutations. A custom field cannot shadow an owned key, and index-signature custom objects are rejected by the type surface.\n\n## Scheduling\n\nPass calendars with schedule.calendarId to use working-time arithmetic; task calendarId overrides the project calendar. schedule.propagation is manual, move-successors, or auto. Auto propagation forwards accepted changes through successors while preserving working duration. move-successors carries successors during a task move without enabling the scheduling engine. Constraints support as-soon-as-possible, start-no-earlier-than, start-no-later-than, finish-no-earlier-than, finish-no-later-than, must-start-on, and must-finish-on.\n\nA leaf with progress === 1 remains in dependency and critical-path analysis and its actual dates constrain successors, but forward scheduling never moves it. Conflicts are exposed as typed violations. Resource calendars affect diagnostic workload only; GanttChart never performs automatic resource leveling.\n\nUse timeline.display to toggle criticalPath, baselines, deadlines, constraints, nonWorkingTime, and workload. Resolved analysis and getScheduleAnalysis expose critical task/link ids and violations. getWorkload returns capacity-aware buckets for all resources or an explicit range.\n\n## Layout and presentation\n\n- Built-in zoom levels are hour, day, week, month, quarter, and year. timeline.scales is one ordered list of enabled built-in ids and typed custom scale definitions.\n- timeline owns today/weekend/holiday presentation and optional snapDuration. Move, resize, and range snapping otherwise follows the active scale: 1 minute at hour, 15 minutes at day, 1 hour at week, 4 hours at month, 1 day at quarter, and 3 days at year. The initial view anchors to scheduled project content; use the API for exceptional navigation.\n- schedule.validRange owns the half-open project boundary. layout owns rowHeight, contained/page scroll mode, and the optional tree grid. gridWidth remains bindable, while safe splitter bounds, virtualization overscan, and sticky behavior are internal. GanttChart always uses the Entasis scrollbar owner.\n- size changes typography, header controls, and task geometry. density changes row heights, padding, gaps, and indentation. Both are independent of zoom and of each other. The default WBS, title, start, end, duration, progress, and resources columns live under layout.grid.columns and accept typed visibility, size, alignment, sort, filter, value, compare, and edit behavior. Custom editable columns provide applyEdit.\n- Tasks render leaf/summary/milestone shapes, progress and expected progress, segments, baseline, deadline, labels, continuations, tooltips, non-working shade, project/today lines, constraints, critical state, and SVG dependency connectors.\n- timeline.resourceView filters or groups rows by resource and sets the compact workload height. render.resourceAssignments and render.workloadCell receive typed custom fields and over-allocation state.\n\n## Interactions and immutable transactions\n\nThe interactions policy independently enables task move, start/end resize, progress resize, row reorder, indent/outdent, empty-range creation, keyboard, and touch. dependencyCreation, clipboard, and history each accept false or their required configuration. Touch activation thresholds are internal. loading blocks content mutation but preserves safe navigation; disabled blocks both.\n\nEvery UI or API mutation constructs a proposal, validates it, calls mutations.task/dependency/assignment.validate, calls the corresponding synchronous resolve hook, revalidates any adjusted record, then publishes immutable collections. The `onTasksChange`, `onDependenciesChange`, and `onAssignmentsChange` callbacks each receive one transaction payload with prior/current collections, affected ids, source/kind, and a guarded one-shot revert. Do not swallow persistence errors: call change.revert() only if desired, then handle or rethrow the error at the application boundary.\n\nPointer-created links require interactions.dependencyCreation.create(request), because GanttChart cannot fabricate ids or required custom fields. Clipboard paste can use interactions.clipboard.getId(request). It copies one selected standalone task subtree, remaps internal dependencies and assignments, and explicitly omits external dependency links.\n\n## Keyboard and accessibility\n\nTree cells, task controls, and dependency controls use roving focus across virtual rows. Arrow keys navigate hierarchy and chronology; RTL mirrors physical movement without reversing chronological intent. M, S, E, and P enter task move, start-resize, end-resize, and progress modes. D or Shift+D starts dependency creation; R starts empty-range creation. Enter commits and Escape cancels. Alt+Shift+Arrow keys reorder or change hierarchy. Delete/Backspace requests deletion. Mod+C/Mod+V copy and paste; Mod+Z, Mod+Shift+Z, and Mod+Y use bounded stale-safe history.\n\nTreegrid/timeline roles, expanded/selected/grabbed state, focus restoration, 24px handle hit targets, high contrast, reduced motion, touch long-press/tolerance, and live announcements remain component-owned. Snippets cannot replace these semantic or interaction owners.\n\nThe task grid is a `treegrid` whose direct children are two `rowgroup`s — the sticky header band and the scrolling body — so every `row` stays inside a valid parent. A `gridHeader` snippet renders decoratively inside the header row and must not introduce roles of its own.\n\n## Render snippets\n\nThe render object provides typed Svelte 5 snippets for header, actions, gridHeader, columnHeader, treeCell, taskRow, timeHeader, task, taskLabel, taskTooltip, dependencyTooltip, progress, baseline, deadline, nonWorkingTime, resourceAssignments, workloadCell, dragPreview, empty, and loadingContent. The task payload identifies leaf, summary, and milestone nodes. The timeHeader payload identifies its upper or lower level. Payloads include ready-made defaultContent where meaningful. Header payloads expose owned today, fit-project, zoom, and action snippets; render.header can be false.\n\n## Imperative API\n\nBind the component instance as GanttChartApi. Real methods include:\n\n- Navigation: fitProject, zoomIn, zoomOut, setZoom, scrollToDate, scrollToTask, getVisibleRange.\n- Queries: getTask, getResolvedTask, getVisibleTasks, getDependency, getAssignment, getResources, getScheduleAnalysis, getWorkload.\n- Hierarchy/selection: expandTask, collapseTask, toggleTask, expandAll, collapseAll, select, clearSelection.\n- Mutations: add/update/remove task, dependency, and assignment.\n- Workflow: copySelection, paste, undo, redo, canUndo, canRedo, cancelInteraction.\n\n## Application-owned editors and non-goals\n\nGanttChart does not own task creation/edit dialogs. Compose events.onTaskDoubleClick or events.onSelect with Entasis Dialog and Form controls, validate the definition, then publish a fresh controlled array or call the API. Network fetching, persistence, retries, collaboration, recurrence, automatic resource leveling, proprietary import/export, and deployment are outside this package.\n";
+    readonly kanban: "\n# Kanban Component\n\nA column board with drag-and-drop cards, built on the `useDndList` attachment\nutility (Pragmatic drag and drop). Cards reorder within a column and move across\ncolumns; columns themselves reorder by dragging their header. It supports a\nlive placeholder preview or an insertion-line indicator; accept/reject logic and\nedge math come from the utility.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Kanban } from 'entasis/kanban';\n\n\tlet columns = $state([\n\t\t{ id: 'todo', title: 'Todo', cards: [{ id: 'a', title: 'Write specs' }] },\n\t\t{ id: 'doing', title: 'Doing', cards: [] },\n\t\t{ id: 'done', title: 'Done', cards: [] }\n\t]);\n</script>\n\n<Kanban bind:columns />\n```\n\n## Props\n\n### Core Props\n- **columns**: KanbanColumnData[] (bindable, required) - The board data; reassigned on every card/column move\n  - KanbanColumnData: { id, title, cards, color?, limit? }\n  - KanbanCard: { id, title?, description? } — only `id` is required; `title`/`description` feed the default card (title falls back to id). Extend with your own fields and render them via the card snippet\n- **accepts**: ({ card, from, to }) => boolean - Cross-column move policy; return false to reject (no preview, drop ignored). Column `limit` is enforced on top.\n- **sortableColumns**: boolean (default: true) - Columns reorder by dragging their header\n- **disabled**: boolean (default: false) - Read-only board: cards and columns render but cannot move\n- **canDrag**: ({ card, column }) => boolean - Per-card drag gate; return false to keep a card in place\n- **cardHandle**: boolean (default: false) - Cards drag only from an element marked `data-dnd-handle` — for cards with interactive content. The default card renders a grip; custom card snippets receive it as the `handle` param (`{@render handle()}`) or mark their own element\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing token scaling header, list and card paddings/gaps; also stamped as data-density on the root\n- **columnHeight**: string - Fixed column height (any CSS length, e.g. '28rem'). Card lists scroll inside it and auto-scroll while a drag hovers near their edges, so cards can be dropped anywhere in a long column. Omit for auto height.\n- **indicator**: boolean (default: false) - Keeps cards and columns in place during drag and draws the shared insertion line. When false, the dragged card/column renders as a dimmed placeholder at its prospective slot.\n- **animated**: boolean (default: true) - Enables FLIP movement for the live preview and final settling after drop. The bound columns state only changes at drop. Automatically disabled under prefers-reduced-motion.\n\n### Event Props\n- **onCardMove**: ({ card, from: { columnId, index }, to: { columnId, index }, columns }) => void - Fires once per completed move (same-column reorders included), AFTER the single `columns` reassignment; `columns` is the new board state (for cross-column moves, `from.index` is the card's index at drag start)\n- **onColumnMove**: ({ column, from, to }) => void - Fires when a column is reordered\n- **onCardDragStart**: ({ card, column, index }) => void - A card drag started\n- **onCardDragEnd**: ({ card, dropped }) => void - A card drag ended (drop or cancel), after state updates\n\n### Content Props (Slots)\n\nEvery content slot is a `Slot`: pass a plain string for static text, or a snippet for markup.\n\n- **card**: Slot<KanbanCardPayload> — a string or a snippet taking { card, column, index, columnIndex, isDragging, handle } - Custom card renderer (default: title + muted description). `index` and `columnIndex` are the rendered positions (following the live preview unless `indicator` is enabled); `isDragging` identifies the dragged card; `handle` is the ready-made drag grip (data-dnd-handle) — render it wherever the grip belongs, it is empty unless `cardHandle` is on\n- **columnHeader**: Slot<KanbanColumnPayload> — a string or a snippet taking { column, index } - Custom header (default: color dot + title + count, count shows \"n / limit\" when a limit is set)\n- **columnFooter**: Slot<KanbanColumnPayload> — a string or a snippet taking { column, index } - Rendered below the card list (e.g. an \"Add card\" button), via the `footer` theme part\n- **column**: Slot<KanbanColumnContentPayload> — a string or a snippet taking { column, index, header, items, footer } - Full column composition: `header`/`items`/`footer` are ready-made snippets (`items` is the dnd-wired card list — drop target, live preview, animations). Render them in any arrangement with your own chrome; replaces the default layout inside the column shell.\n\n```svelte\n<Kanban bind:columns>\n\t{#snippet column({ column, header, items })}\n\t\t{@render header()}\n\t\t{@render items()}\n\t\t<button onclick={() => addCard(column.id)}>+ Add card</button>\n\t{/snippet}\n</Kanban>\n```\n- **empty**: Slot<KanbanEmptyPayload> — a string or a snippet taking { column } - Rendered inside an empty column's list (via the `empty` theme part). Nothing renders by default — the empty list keeps its min-height and data-dnd-over tint as the drop area\n\n### Styling Props\n- **class**: string - Classes for the board container\n- **ref**: HTMLElement | null (bindable) - Reference to the board's root element; other HTML attributes spread onto it\n- **theme**: KanbanThemeProps - Theme overrides\n\n## Behavior notes\n\n- A column with `limit` rejects incoming drops when full (its own reorders still work); the header count renders \"n / limit\".\n- Cards from another Kanban instance on the same page are rejected automatically (list ids are namespaced per board).\n- Drop position uses the live preview by default: the dragged card sits dimmed ([data-kanban-preview]) at the slot it would land in and cards part to make room. With `indicator`, cards remain fixed and the shared line marks the insertion edge. The hovered column list also tints (data-dnd-over).\n- Drop targets are sticky: slightly overshooting a column's bounds keeps the preview at the last position and the drop still lands there (the preview always shows what a drop will do). A drag that never hovered another column drops as a no-op.\n- With `columnHeight` set (or any scrollable ancestor), dragging near a scroll container's edge auto-scrolls it; the board itself also auto-scrolls horizontally when dragging near its sides.\n- While the columns are wider than the board, the root becomes a named `role=\"region\"` with `tabindex=\"0\"` so the horizontal scroll is reachable from the keyboard; the tab stop disappears again once everything fits.\n\n### Scrollable columns\n```svelte\n<Kanban bind:columns columnHeight=\"28rem\" />\n```\n\n## Examples\n\n### Move policy and limits\n```svelte\n<Kanban\n\tbind:columns\n\taccepts={({ from, to }) => forwardOnly(from.id, to.id)}\n\tonCardMove={(move) => console.log(move)}\n/>\n```\n\n### Custom card\n```svelte\n<script lang=\"ts\">\n\timport { Kanban, type KanbanCard, type KanbanColumnData } from 'entasis/kanban';\n\timport { Chip } from 'entasis/chip';\n\n\t// Extend KanbanCard with your own fields; the card snippet receives them typed.\n\ttype TaskCard = KanbanCard & { priority: 'high' | 'low' };\n\n\tlet columns: KanbanColumnData<TaskCard>[] = $state([\n\t\t{ id: 'todo', title: 'Todo', cards: [{ id: 'a', title: 'Write specs', priority: 'high' }] },\n\t\t{ id: 'done', title: 'Done', cards: [] }\n\t]);\n</script>\n\n<Kanban bind:columns>\n\t{#snippet card({ card })}\n\t\t<div class=\"rounded-lg bg-surface-floating px-3 py-2 ring-1 ring-neutral/10\">\n\t\t\t<span class=\"text-sm font-medium\">{card.title}</span>\n\t\t\t<Chip size=\"small\" color={card.priority === 'high' ? 'danger' : 'info'}>{card.priority}</Chip>\n\t\t</div>\n\t{/snippet}\n</Kanban>\n```\n\n## Theme Customization\n\nParts: root, column, columnWrapper (dragging variant), columnHeader (sortable,\ndensity variants), columnDot, columnTitle, count, list (density), card (density,\nhandle variants), cardWrapper (dragging — the dimmed placeholder), cardHandle,\ncardTitle, cardDescription, empty, footer (density).\n\n```svelte\n<Kanban\n\tbind:columns\n\ttheme={{\n\t\tcolumn: { base: 'w-80' },\n\t\tlist: { base: 'gap-2' }\n\t}}\n/>\n```\n";
+    readonly kbd: "\n# Kbd Component\n\nThe Kbd component displays keyboard keys and shortcuts. It renders a single key, or a group of keys side by side with an optional separator, using semantic `<kbd>` elements.\n\n## Basic Usage\n\n```svelte\n<Kbd>Esc</Kbd>\n<Kbd keys={['⌘', 'K']} />\n<Kbd keys={['Ctrl', 'B']} separator=\"+\" />\n```\n\n## Props\n\n### Core Props\n- **keys**: (string | Snippet)[] - Renders multiple keys side by side inside a group. Each entry is a string label or a snippet for rich content (icons, etc). When set, `children` is ignored.\n- **separator**: string | Snippet - Separator rendered between adjacent keys when `keys` is set (e.g. `\"+\"` for `Ctrl + B`).\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact keys for dense UI\n  - normal: Standard key size\n  - large: Larger keys for emphasis\n- **color**: Colors (default: 'neutral')\n  - neutral: Neutral keycap\n  - Any semantic color (`primary`, `danger`, `success`, ...): soft treatment — the color's muted tint with readable tinted text\n\n### Content Slots\n- **children**: Snippet | string - Content of a single key (ignored when `keys` is set)\n\n### Styling Props\n- **class**: string - Additional CSS classes applied to the root element\n- **theme**: KbdThemeProps - Custom theme overrides\n\n## Structure\n\nSingle key:\n```\n<kbd>          <!-- kbd part -->\n  children\n</kbd>\n```\n\nKey combo:\n```\n<kbd>          <!-- group part -->\n  <kbd>⌘</kbd> <!-- kbd part -->\n  <span>+</span> <!-- separator part (between keys) -->\n  <kbd>K</kbd>\n</kbd>\n```\n\n## Examples\n\n### Single Keys\n```svelte\n<Kbd>Esc</Kbd>\n<Kbd>⌘</Kbd>\n<Kbd>Enter</Kbd>\n```\n\n### Key Combos\n```svelte\n<Kbd keys={['⌘', 'K']} />\n<Kbd keys={['Ctrl', 'Shift', 'P']} separator=\"+\" />\n```\n\n### With an Icon Snippet\n```svelte\n<script>\n\timport { commandIcon } from 'entasis/icons/command';\n</script>\n\n{#snippet cmd()}\n\t{@render commandIcon({})}\n{/snippet}\n<Kbd keys={[cmd, 'K']} />\n```\n\n### Sizes\n```svelte\n<Kbd size=\"small\">S</Kbd>\n<Kbd size=\"normal\">N</Kbd>\n<Kbd size=\"large\">L</Kbd>\n```\n\n### Inline in Text\n```svelte\n<p>\n\tPress <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.\n</p>\n```\n\n### Inside a Button\n```svelte\n<Button variant=\"outline\" color=\"neutral\">\n\tSearch\n\t{#snippet suffix()}\n\t\t<Kbd keys={['⌘', 'K']} />\n\t{/snippet}\n</Button>\n```\n\n## Accessibility\n\n- Uses semantic `<kbd>` elements for both the group and individual keys\n- `pointer-events-none` and `select-none` keep keys decorative and non-interactive\n- Screen readers announce key labels as regular text\n\n## Notes\n\n- When `keys` is provided, the component renders a wrapping `<kbd>` group and ignores `children`\n- The separator is only rendered between adjacent keys, never before the first key\n- SVG icons inside keys are automatically sized to match the key size unless they carry an explicit `size-*` class\n\n## Theme Customization\n\nThe Kbd component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Individual key styles\n- **group**: Wrapper styles when `keys` is set\n- **separator**: Separator styles between keys\n\n### Theme Type Definition\n\n```typescript\nimport type { KbdThemeProps } from 'entasis/kbd';\n\nconst customTheme: KbdThemeProps = {\n\troot: {\n\t\tbase: 'rounded raised-1',\n\t\tsize: {\n\t\t\tsmall: 'h-4 min-w-4 px-0.5 text-[0.625rem]',\n\t\t\tnormal: 'h-5 min-w-5 px-1 text-xs',\n\t\t\tlarge: 'h-6 min-w-6 px-1.5 text-sm'\n\t\t}\n\t},\n\tgroup: {\n\t\tsize: {\n\t\t\tnormal: 'gap-1.5'\n\t\t}\n\t},\n\tseparator: {\n\t\tbase: 'text-neutral'\n\t}\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to every key\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls key height, min-width, padding, text, and icon size\n\n**group**:\n- base: Base classes for the key group wrapper\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls the gap between keys\n\n**separator**:\n- base: Base classes for the separator\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls the separator text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Kbd theme={{ root: { base: 'raised-1' } }}>\n\tEsc\n</Kbd>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n\timport { setKbdTheme } from 'entasis/kbd';\n\n\tsetKbdTheme({\n\t\troot: {\n\t\t\tbase: 'rounded border border-neutral-muted'\n\t\t}\n\t});\n</script>\n```\n";
+    readonly 'metadata-list': "\n# MetadataList Component\n\nA read-only key/value metadata list, like Notion's page-properties panel. Each row shows a muted key label (with an optional icon) on the left and a typed value on the right: plain text, localized numbers and dates, links, boolean chips, a single chip, or a chip list. Values are formatted and their type auto-detected, so a plain array of items renders with no per-item wiring.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { MetadataList } from 'entasis/metadata-list';\n</script>\n\n<MetadataList\n\titems={[\n\t\t{ key: 'Name', value: 'Design System v2' },\n\t\t{ key: 'Status', value: 'Active', type: 'chip', color: 'success' },\n\t\t{ key: 'Created', value: new Date('2025-01-15') },\n\t\t{ key: 'Repository', value: 'https://github.com/org/design-system' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: `MetadataListItem[]` (default: `[]`)\n  - The rows to display. Each item: `{ id?, key?, title?, value?, type?, icon?, color?, href? }` — read-only display data; MetadataList never writes item values. The label resolves `key ?? title ?? id`. `type` is auto-detected from `value` when omitted.\n- **maxItems**: `number` (optional)\n  - When set and `items.length` exceeds it, the extra items collapse behind an animated \"Show N more\" toggle.\n- **expanded**: `boolean` (bindable, default: `false`)\n  - Open state of the \"Show more\" toggle.\n- **defaultExpanded**: `boolean` (default: `false`)\n  - Initial open state of the \"Show more\" toggle when `expanded` is omitted.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Typography only: key/value/toggle text, key icons, and chip sizing.\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`)\n  - Spacing only: section, row, label/value, and chip-list gaps. Combine freely with `size`.\n- **columns**: `number` (default: `1`)\n  - Items flow into this many grid columns.\n\n### Content Slots\n- **title**: `Slot` (optional) - Header title (string or snippet).\n- **description**: `Slot` (optional) - Header description (string or snippet).\n- **key**: `Slot<MetadataListItemPayload>` (optional) - Replaces the default key-label cell for every item. The payload is `{ item, index, type, label, formatted }`.\n- **value**: `Slot<MetadataListItemPayload>` (optional) - Replaces the default value cell for every item (same payload). Use it to special-case rendering.\n\n### Advanced Props\n- **ref**: `HTMLElement | null` (bindable) - Reference to the root element.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides (`showMoreItems`, `showLess`, `trueLabel`, `falseLabel`).\n- **theme**: `MetadataListThemeProps` - Theme overrides.\n\n## Value Types & Auto-detection\n\n| type      | Auto-detected from                         | Rendered as                                            |\n| --------- | ------------------------------------------ | ------------------------------------------------------ |\n| `text`    | anything else (and `null`/`undefined`)     | span; nullish shows a muted em dash \"—\"                 |\n| `number`  | `typeof value === 'number'`                | span with `tabular-nums`, localized via `Intl`         |\n| `date`    | `value instanceof Date`                    | span, localized `dateStyle: 'medium'`                  |\n| `boolean` | `typeof value === 'boolean'`               | one soft Chip (`trueLabel`/`falseLabel`)               |\n| `url`     | string matching `/^https?:\\/\\//i`          | anchor (`target=\"_blank\"`), display strips protocol   |\n| `email`   | string matching a simple email regex       | `mailto:` anchor                                        |\n| `phone`   | never auto-detected (set `type: 'phone'`)  | `tel:` anchor                                           |\n| `chip`    | (explicit only)                            | one soft Chip                                          |\n| `chips`   | `Array.isArray(value)`                     | flex-wrap row of soft Chips                            |\n\nBoolean chips default to `success` (true) / `neutral` (false); other chips default to `neutral`. Set `item.color` to override. Dates and numbers use the active locale (`i18n.locale`). Set `item.href` to override the derived link target.\n\n## Examples\n\n### Explicit types\n```svelte\n<MetadataList\n\titems={[\n\t\t{ key: 'Budget', value: 48000, type: 'number' },\n\t\t{ key: 'Contact', value: 'team@acme.com', type: 'email' },\n\t\t{ key: 'Hotline', value: '+1 555 0100', type: 'phone' }\n\t]}\n/>\n```\n\n### Chips and a chip list\n```svelte\n<MetadataList\n\titems={[\n\t\t{ key: 'Priority', value: 'High', type: 'chip', color: 'danger' },\n\t\t{ key: 'Tags', value: ['design', 'frontend', 'a11y'] }\n\t]}\n/>\n```\n\n### Boolean\n```svelte\n<MetadataList items={[{ key: 'Published', value: true }, { key: 'Archived', value: false }]} />\n```\n\n### Columns\n```svelte\n<MetadataList columns={2} items={items} />\n```\n\n### maxItems with show-more\n```svelte\n<MetadataList maxItems={4} items={items} />\n```\n\n### Custom key / value snippets\n```svelte\n<MetadataList items={items}>\n\t{#snippet value({ item, formatted })}\n\t\t{#if item.key === 'Owner'}\n\t\t\t<span class=\"inline-flex items-center gap-2\">\n\t\t\t\t<span class=\"size-2 rounded-full bg-primary\"></span>\n\t\t\t\t{formatted}\n\t\t\t</span>\n\t\t{:else}\n\t\t\t{formatted}\n\t\t{/if}\n\t{/snippet}\n</MetadataList>\n```\n\n### Header\n```svelte\n<MetadataList title=\"Project Details\" description=\"Read-only properties\" items={items} />\n```\n\n## Accessibility\n\n- Uses `dl`/`dt`/`dd` semantics for the key/value pairs.\n- The \"Show more\" control is a real `<button type=\"button\">` with `aria-expanded`.\n- Links are real anchors; `url` links get `target=\"_blank\" rel=\"noopener noreferrer\"`.\n\n## Notes\n\n- Display only: it never mutates `items`.\n- `phone` is never auto-detected (avoids false positives on ids/zips) — set `type: 'phone'` explicitly.\n- Formatters are derived once from the active locale, not per item.\n- Theme parts: `root`, `header`, `title`, `description`, `list`, `item`, `key`, `keyIcon`, `value`, `link`, `chips`, `toggle`, `toggleIcon`.\n";
+    readonly 'mini-calendar': "\n# MiniCalendar Component\n\nA compact horizontal date strip showing N consecutive days (default 5) with a previous/next chevron on each side that shifts the visible range by N days. Each day cell stacks a short month label over the day number; the selected day gets an elevated, filled background and today is subtly highlighted.\n\n## Basic Usage\n\n```svelte\n<MiniCalendar bind:value={date} />\n<MiniCalendar days={7} size=\"large\" color=\"success\" />\n<MiniCalendar bind:value={date} bind:startDate={from} />\n```\n\n## Props\n\n### Core Props\n- **value**: `Date | null` (default: `null`, bindable)\n  - The selected date. Selection is compared by year/month/day only; picked dates are created at noon to avoid timezone day-boundary issues.\n- **startDate**: `Date` (default: today, bindable)\n  - The first visible day of the strip. The chevrons shift it by `days`.\n- **days**: `number` (default: `5`)\n  - How many day cells are visible, and the step used when navigating.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Cell dimensions, gaps and typography.\n- **color**: `Colors` (default: `'primary'`)\n  - Accent color of the selected day and the today highlight.\n- **dir**: `'ltr' | 'rtl'` (optional)\n  - Reading direction override. In `rtl` the strip order and chevrons mirror. Inherits the ambient direction when omitted.\n- **disabled**: `boolean` (default: `false`)\n  - Disables navigation and day selection entirely (chevrons and day cells).\n\n### Localization\n- **locale**: `string` (optional)\n  - BCP-47 locale for the month labels and full-date aria-labels. Defaults to the active i18n catalog's locale (`t.locale`, reactive to runtime locale switches); falls back to English when no catalog is set.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog (used for the `previous` / `next` aria-labels).\n\n### Event Props\n- **onValueChange**: `(date: Date) => void`\n  - Called with the picked date when a day cell is clicked.\n- **onStartDateChange**: `(startDate: Date) => void`\n  - Called with the new start date when the chevrons shift the visible range.\n\n### Content Props (Slots)\n- **day**: `Snippet<[{ date, selected, today, monthLabel, dayNumber }]>` (optional)\n  - Custom day-cell content, replacing the default month-label + day-number stack. Rendered inside each day button.\n\n```svelte\n<MiniCalendar bind:value={date}>\n\t{#snippet day({ dayNumber, monthLabel, selected })}\n\t\t<span class=\"text-xs\">{monthLabel}</span>\n\t\t<span class=\"text-lg font-bold\">{dayNumber}</span>\n\t\t{#if selected}<span class=\"text-[10px]\">picked</span>{/if}\n\t{/snippet}\n</MiniCalendar>\n```\n\n### Advanced Props\n- **ref**: `HTMLElement | null` (bindable) - Reference to the root container element.\n- **class**: `string` - Class for the root pill container.\n- **theme**: `MiniCalendarThemeProps` - Theme overrides.\n\n## Structure\n\nA rounded, bordered pill container (`root`) holding a previous `navButton`, a `days` viewport, and a next `navButton`. Inside `days`, a `track` flex row holds the day-cell buttons (`day`); during navigation the outgoing and incoming tracks overlap in the `days` grid while they slide. Each day cell stacks a `dayMonth` label over a `dayNumber`. Flex rows mirror automatically in RTL.\n\n## Accessibility\n\n- Chevrons are `<button type=\"button\">` with localized `previous` / `next` aria-labels.\n- Day cells are `<button type=\"button\">` with `aria-pressed` reflecting selection and a full-date `aria-label` via `toLocaleDateString`.\n- `disabled` sets the `disabled` attribute on every button.\n\n## Notes\n- Dates are handled at noon and compared by year/month/day, so selection is timezone-resistant.\n- Navigation is chronological in both directions: previous is always earlier dates, even in RTL.\n- Range shifts are a directional push: the old range slides out through the edge the range moved away from while the new range slides in from the side it moved toward (mirrored in RTL). The initial mount does not animate, and `prefers-reduced-motion` disables the slide entirely.\n- Theme parts: `root`, `navButton`, `days`, `track`, `day`, `dayMonth`, `dayNumber` (day variants: `size`, `color`, `selected`, `today`, `disabled`).\n";
+    readonly rating: "\n# Rating Component\n\nA read-only star rating display with half/partial star support, a configurable star count, and RTL support. For a form input, use `RatingInput` (which builds on this component).\n\n## Basic Usage\n\n```svelte\n<Rating value={3} />\n<Rating value={2.5} max={5} />\n<Rating value={7.5} max={10} color=\"primary\" size=\"large\" />\n<Rating value={2.5} dir=\"rtl\" />\n```\n\n## Props\n\n### Core Props\n- **value**: `number | null` (default: `0`)\n  - The displayed value. Fractions render as partially filled stars (0.5 = half star; any fraction works, e.g. an average score of 3.7).\n  - Read-only display data: Rating never writes it, so there is no `defaultValue` and no `onValueChange`. Use `RatingInput` for an editable rating.\n- **max**: `number` (default: `5`)\n  - Number of stars rendered, which is also the maximum value.\n\n### Style Props\n- **color**: `Colors` (default: `'warning'`)\n  - Color of the filled stars; the default is the classic gold.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Star box dimensions and gap.\n- **dir**: `'ltr' | 'rtl'` (optional)\n  - Reading direction override. In `rtl` the stars order and fill from the right. Inherits the ambient direction when omitted.\n- **disabled**: `boolean` (default: `false`) - Applies the disabled styling.\n- **interactive**: `boolean` (default: `false`) - Applies pointer styling to the stars (used by wrappers like RatingInput).\n\n### Content Props (Slots)\n- **star**: `Snippet<[{ index, fraction, layer }]>` (optional)\n  - Custom star icon. Rendered twice per star: once for the muted outline (`layer: 'base'`) and once for the colored fill overlay (`layer: 'fill'`). `fraction` is the star's filled fraction (0 to 1).\n\n```svelte\n<Rating value={3.5}>\n\t{#snippet star({ layer })}\n\t\t{#if layer === 'base'}\n\t\t\t{@render heartIcon({ class: 'size-full' })}\n\t\t{:else}\n\t\t\t{@render heartIconFill({ class: 'size-full' })}\n\t\t{/if}\n\t{/snippet}\n</Rating>\n```\n\n### Advanced Props\n- **ref**: `HTMLElement | null` (bindable) - Reference to the root star-row element.\n- **onpointermove**: `(event: PointerEvent) => void` (optional)\n- **onclick**: `(event: MouseEvent) => void` (optional)\n  - Native handlers attached to every star. Read the one-based index from `event.currentTarget.dataset.starIndex`. Leave unset for a purely static display.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog.\n- **theme**: `RatingThemeProps` - Theme overrides.\n\n## Structure\n\nA flex row (`container`) of `max` star boxes (`star`). Each star layers a muted outline icon (`starBase`) under a colored icon inside an overflow-hidden clip (`starFill`) whose width is the star's filled fraction. The clip is pinned with `inset-inline-start`, so RTL mirrors the fill automatically.\n\n## Accessibility\n\n- Standalone, the row is `role=\"img\"` with an `aria-label` of \"{value} of {max}\" (localized via the i18n catalog's `of` key).\n- The individual stars are `aria-hidden`; screen readers get one concise element.\n- Wrappers (e.g. RatingInput) override the role/label by spreading their own attributes onto the root.\n\n## Notes\n\n- Display only: it never changes any value itself. Pair with `RatingInput` for form usage.\n- Theme parts: `container`, `star`, `starBase`, `starFill` (variants: `size`, `color`, `disabled`, `interactive`).\n";
+    readonly 'sortable-list': "\n# SortableList Component\n\nA vertical list whose items are reordered by drag and drop. Its default live preview places the dragged row at the prospective slot while neighboring rows move with FLIP; `indicator` keeps rows fixed and draws an insertion line instead. Built on the `useDndList` attachment utility (Pragmatic drag and drop), the same engine as Kanban. Generic over the item type `T`.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { SortableList } from 'entasis/sortable-list';\n\tlet items = $state([\n\t\t{ id: '1', label: 'Write the brief' },\n\t\t{ id: '2', label: 'Design the mockups' },\n\t\t{ id: '3', label: 'Ship it' }\n\t]);\n</script>\n\n<SortableList bind:items />\n```\n\nItems need a stable, unique `id` property (primitive items are matched by value).\n\n## Props\n\n### Core Props\n- **items**: `T[]` (required, bindable)\n  - The list items in display order. The bound array is reassigned once, at drop — the mid-drag motion is a render-only preview.\n- **handle**: `boolean | Snippet<[{ item, index, isDragging }]>` (default: `false`)\n  - Drag mode and handle content in one prop.\n  - `false`: the whole row initiates the drag (grab cursor).\n  - `true`: only a grip handle drags. A default grip icon renders.\n  - snippet/string: turns on handle mode and customizes what renders inside the handle.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Row padding, gaps and typography.\n- **disabled**: `boolean` (default: `false`)\n  - Disables all dragging. Rows still render but cannot be reordered.\n- **indicator**: `boolean` (default: `false`)\n  - Keeps rows in place while dragging and draws the shared insertion line. When false, the dragged row renders as a dimmed live placeholder and neighboring rows part around it.\n- **orientation**: `'vertical' | 'horizontal' | 'grid'` (default: `'vertical'`)\n  - Layout and drag axis. `horizontal` lays rows in a line, `grid` wraps them; both resolve before/after on the horizontal axis (RTL-aware), and dragging across wrapped grid lines follows the logical order. For a real CSS grid, override the root theme part — the drag math is identical.\n\n### Cross-list Props\n- **group**: `string` (optional) - Lists sharing the same group accept each other's rows: dragging into another list of the group inserts the row there, with the live preview showing the exact slot. Both bound `items` arrays update automatically at drop. Lists in a group should share the item shape. Captured at mount.\n- **name**: `string` (optional) - Identifies this list within its group; reported as `from`/`to` in the cross-list callbacks. Defaults to an internal unique id.\n- **accepts**: `({ item, from }) => boolean` (optional) - Cross-list accept policy on top of the group match; return false to reject (no preview, drop ignored). `from` is the source list's name. Enables receive-only or type-gated lists.\n\n```svelte\n<SortableList bind:items={today} group=\"planner\" name=\"today\" />\n<SortableList bind:items={tomorrow} group=\"planner\" name=\"tomorrow\" />\n```\n\n### Event Props\n- **onReorder**: `({ items, from, to, item }: SortableListReorderPayload<T>) => void`\n  - Fired once when a drag ends and the order actually changed, with the reordered array and the move details. A cancelled drag or a no-op drop does not fire this.\n- **onReceive**: `(payload: { item: T; index: number; from: { list: string; index: number } }) => void` - A row arrived from another list of the group (`items` already updated). `from.index` is the row's index in the source list at drag start — enough to persist the full move.\n- **onRemove**: `(payload: { item: T; index: number; to: { list: string } }) => void` - One of this list's rows left for another list of the group (`items` already updated); `index` is its index here at the moment of drop.\n- **onDragStart**: `(payload: { item: T; index: number }) => void` - A drag of one of this list's rows started.\n- **onDragEnd**: `(payload: { item: T; dropped: boolean }) => void` - The drag ended (drop or cancel), after state updates; `dropped` is true when it landed on an accepting list.\n\n### Localization\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog. Supplies the default handle's aria-label (`dragToReorder`).\n\n### Content Props (Slots)\n- **item**: `Snippet<[{ item: T, index: number, isDragging: boolean }]>` (optional)\n  - Row content. When omitted, each row renders a plain label: `String(item)` for primitives, otherwise `item.label ?? item.title ?? item.id`. `index` is the rendered position; `isDragging` identifies the dragged row (the dimmed placeholder in the default preview mode).\n\n```svelte\n<SortableList bind:items>\n\t{#snippet item({ item, isDragging })}\n\t\t<div class=\"flex flex-col\">\n\t\t\t<span class=\"font-medium\">{item.title}</span>\n\t\t\t<span class=\"text-neutral/70 text-sm\">{item.description}</span>\n\t\t</div>\n\t{/snippet}\n</SortableList>\n```\n\n- **empty**: `Slot` (snippet or string, optional) - Rendered inside the list when it has no rows. Grouped lists should provide it: it gives an empty list a visible, hittable drop area (dashed min-h row via the `empty` theme part). Nothing renders by default.\n\n- **handle** (via the `handle` prop as a snippet): `Snippet<[{ item, index, isDragging }]>`\n  - Customizes what renders inside the grip handle. The component owns the handle wrapper (with the `data-dnd-handle` marker, aria-label and grab cursor); the snippet only fills its contents.\n\n```svelte\n<script lang=\"ts\">\n\timport { dotsSixVerticalIcon } from 'entasis/icons/dotsSixVertical';\n</script>\n\n<SortableList bind:items>\n\t{#snippet handle()}\n\t\t{@render dotsSixVerticalIcon()}\n\t{/snippet}\n</SortableList>\n```\n\n### Advanced Props\n- **ref**: `HTMLElement | null` (bindable) - Reference to the root `<ul>` element.\n- **class**: `string` - Class for the root `<ul>`.\n- **theme**: `SortableListThemeProps` - Theme overrides.\n\n## Structure\n\nA `<ul>` (`root`) holding one `<li>` (`item`) per entry. In full-row mode the `<li>` is the drag activator. In handle mode the `<li>` also contains a grip `<button>` (`handle`, marked `data-dnd-handle`) that is the only drag activator, followed by the `content` region. By default the dragged row renders dimmed at its prospective slot (the `dragging` theme variant) and the others flip around it; `indicator` keeps the DOM order stable until drop.\n\n## Accessibility\n\n- Renders a real `<ul>` / `<li>` list; the default grip handle is a real `<button>` with a localized `aria-label`.\n- Drag and drop is pointer-driven (native HTML5 drag); there is no keyboard sorting. Offer explicit move buttons or an alternate flow where keyboard reordering is a requirement.\n\n## Notes\n- State changes and `onReorder` fire once, at drop. Both feedback modes resolve from the same hover state as the final drop.\n- If the list sits in a scroll container (or is one), dragging near its edges auto-scrolls it.\n- Animations respect `prefers-reduced-motion`.\n- Ids must be stable and unique; using an array index as the id breaks reordering.\n- Theme parts: `root` (variants: `size`, `orientation`), `item` (variants: `size`, `handle`, `dragging`, `disabled`), `content`, `handle` (variant: `size`), `empty`.\n";
+    readonly stat: "\n# Stat Component\n\nStat renders a compact metric card. Every region — label, value (with an optional unit), indicator, separator, trend, description — is a named snippet, and the `order` prop decides which of them render and in what sequence. A decorative indicator and an interactive action share the top-right column.\n\n## Basic Usage\n\n```svelte\n<Stat label=\"Revenue\" value=\"$45,231\" trend=\"+20.1%\" trendDirection=\"up\">\n\t{#snippet indicator()}\n\t\t{@render trendUpIcon()}\n\t{/snippet}\n</Stat>\n```\n\n## Region Order\n\n`order` lists the regions to render. A region left out of the list is not rendered at all, so the separator is opt-in: add `'separator'` where the hairline belongs.\n\n```svelte\n<!-- default: ['label', 'value', 'indicator', 'trend', 'description'] -->\n<Stat label=\"Tasks\" value=\"147\" trend=\"+12%\" trendDirection=\"up\" description=\"This sprint\" />\n\n<!-- description above the hairline, trend last -->\n<Stat\n\torder={['label', 'value', 'description', 'separator', 'trend']}\n\tlabel=\"Tasks\"\n\tvalue=\"147\"\n\tdescription=\"Across every project\"\n\ttrend=\"8 completed today\"\n\ttrendDirection=\"up\"\n/>\n```\n\n`indicator` always renders in column 2 whatever its position in `order`; the first two listed regions sit beside it, the rest span the full card width.\n\n## Unit\n\n`unit` renders inline after `value`, one type step smaller and baseline-aligned.\n\n```svelte\n<Stat label=\"Tasks\" value=\"147\" unit=\"task\" />\n```\n\n## Trend\n\n`trendIcon` is a leading, always-neutral slot. `trend` is the text, and the component appends its own direction arrow from `trendDirection` ('up' → up-right, 'down' → down-right, 'neutral' → none). Only the text and the arrow take the trend colour.\n\n```svelte\n<Stat label=\"Throughput\" value=\"147\" trend=\"12 more than last week\" trendDirection=\"up\">\n\t{#snippet trendIcon()}\n\t\t{@render lightningIcon()}\n\t{/snippet}\n</Stat>\n```\n\n## Action\n\n`action` renders a ghost icon button in the top-right corner. `actionLabel` is the accessible name and is required whenever the action is icon-only. When an indicator is present too, the action sits above it in the same column.\n\n```svelte\n<Stat\n\tlabel=\"Tasks\"\n\tvalue=\"147\"\n\tunit=\"task\"\n\tindicatorVariant=\"badge\"\n\tindicatorColor=\"success\"\n\tindicator=\"Live\"\n\tactionLabel=\"More actions for Tasks\"\n\tonAction={() => openMenu()}\n>\n\t{#snippet action()}\n\t\t{@render dotsThreeVerticalIcon()}\n\t{/snippet}\n</Stat>\n```\n\n## Sizes and Density\n\n```svelte\n<!-- size scales the typography and icons -->\n<Stat size=\"small\" label=\"Small type\" value=\"1,204\" />\n<Stat size=\"normal\" label=\"Normal type (default)\" value=\"1,204\" />\n<Stat size=\"large\" label=\"Large type\" value=\"1,204\" />\n\n<!-- density scales the padding and gaps -->\n<Stat density=\"compact\" label=\"Dense dashboard stat\" value=\"1,204\" />\n<Stat density=\"normal\" label=\"Everyday stat (default)\" value=\"1,204\" />\n<Stat density=\"comfortable\" label=\"Roomy detail stat\" value=\"1,204\" />\n```\n\n## Props\n\n### Core Props\n- **ref**: HTMLElement | null - Bindable reference to the root element.\n- **class**: string - Additional classes for the root element.\n- **color**: Colors (default: 'neutral') - Semantic color token for the stat surface.\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' (default: 'solid') - Surface treatment.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Scales typography and icons only. Combine with density to control spacing independently.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Controls the surface padding and gaps between regions.\n- **order**: readonly StatPart[] (default: ['label', 'value', 'indicator', 'trend', 'description']) - Regions to render, in order. StatPart is 'label' | 'value' | 'indicator' | 'separator' | 'trend' | 'description'.\n- **theme**: StatThemeProps - Theme overrides for root and stat parts.\n\n### Content Props\n- **label**: Slot - Label content.\n- **value**: Slot - Primary metric content.\n- **unit**: Slot - Unit rendered inline after the value at a reduced size.\n- **indicator**: Slot - Decorative indicator rendered in the top-right column.\n- **action**: Slot - Icon button rendered above the indicator in the top-right column.\n- **trendIcon**: Slot - Leading trend icon, always neutral ink.\n- **trend**: Slot - Trend text; the direction arrow is appended by the component.\n- **description**: Slot - Supporting description content.\n- **children**: Slot - Additional custom content rendered after the named regions.\n\n### Indicator Props\n- **indicatorVariant**: 'default' | 'icon' | 'badge' (default: 'default') - Indicator presentation. The indicator is purely decorative.\n- **indicatorColor**: Colors (default: 'neutral') - Semantic color for the indicator.\n\n### Action Props\n- **onAction**: (event: MouseEvent) => void - Click handler for the action button.\n- **actionLabel**: string - Accessible name for the action button; required when it is icon-only.\n- **actionDisabled**: boolean - Disabled state for the action button.\n\n### Trend Props\n- **trendDirection**: 'up' | 'down' | 'neutral' (default: 'neutral') - Tone for the trend text and the appended arrow.\n\n## Structure\n\n```\n<Stat>\n\t<!-- flow column, in the sequence given by order -->\n\t<label slot />\n\t<value slot><unit slot /></value>\n\t<separator />\n\t<trend slot><trendIcon slot /><text + direction arrow /></trend>\n\t<description slot />\n\t<!-- column 2, top-aligned -->\n\t<aside>\n\t\t<action slot />\n\t\t<indicator slot />\n\t</aside>\n\t<children slot />\n</Stat>\n```\n\n## Theme Parts\n\n`root`, `region` (column placement for the flow regions), `label`, `value`, `unit`, `aside`, `action`, `indicator`, `trend`, `trendIcon`, `trendText`, `description`, `separator`.\n\n## Accessibility\n\n- The root is a non-interactive `div`; use surrounding landmarks/headings to provide page structure.\n- `action` is the only interactive region and renders a native `button`; give it `actionLabel` when it holds an icon only.\n- The indicator is decorative and never focusable.\n- The separator is decorative.\n\n## Notes\n\n- `Stat` is the only public component; compose through props and named snippets.\n- Trend colors use Entasis semantic tokens: success for up, danger for down, muted current color for neutral.\n- Use string props for compact markup and named snippets when a region needs icon or richer content.\n";
+    readonly table: "\n# Table Component\n\nThe Table component provides a flexible way to display tabular data with support for headers, footers, and customizable rows. It's designed with a configuration-over-markup approach, allowing you to define table structure through props.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\t// Header can use strings directly (simplified syntax)\n\tconst header = {\n\t\tname: 'Name',\n\t\temail: 'Email',\n\t\trole: 'Role'\n\t};\n\t\n\t// Rows can also use strings directly\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tname: 'John Doe',\n\t\t\t\temail: 'john@example.com',\n\t\t\t\trole: 'Admin'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tcells: {\n\t\t\t\tname: 'Jane Smith',\n\t\t\t\temail: 'jane@example.com',\n\t\t\t\trole: 'User'\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows} />\n```\n\n### Alternative Syntax\n\nYou can also use the full object syntax when you need additional properties:\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\t// Full object syntax for cells with classes or spans\n\tconst header = {\n\t\tname: { content: 'Name', class: 'w-32' },\n\t\temail: { content: 'Email' },\n\t\trole: { content: 'Role' }\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tname: { content: 'John Doe' },\n\t\t\t\temail: { content: 'john@example.com' },\n\t\t\t\trole: { content: 'Admin', class: 'text-success' }\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows} />\n```\n\n## Props\n\n### Core Props\n- **items**: TableRow[] (required) - Array of rows to display in the table body\n  - Each row can have either `cells` (object keyed by column name) or `content` (Slot) for flexible rendering\n  - Cells in rows are rendered in the same order as the header keys (if header is provided)\n- **header**: Record<string, TableCellValue> (optional) - Object of cells for the table header, keyed by column name\n  - Each cell can be a `TableCell` object, a string, or a Snippet\n- **footer**: Record<string, TableCellValue> (optional) - Object of cells for the table footer, keyed by column name\n  - Each cell can be a `TableCell` object, a string, or a Snippet\n\n### Content Props (Slots)\n- **prefix**: Slot (optional) - Content rendered above the table\n  - Useful for search/filter controls that will be added later\n- **suffix**: Slot (optional) - Content rendered below the table\n  - Useful for pagination controls that will be added later\n- **caption**: Slot (optional) - Table caption rendered as a <caption> element\n\n### Styling Props\n- **density**: 'compact' | 'normal' | 'comfortable' (optional, default: 'normal') - Spacing density controlling cell paddings and row heights only\n  - 'small' for dense data grids, 'normal' is the everyday scale, 'large' for roomy detail surfaces\n  - Cascades from the root to header cells, body cells, rows, and caption; the wrapper exposes it as a `data-density` attribute\n- **class**: string (optional) - Additional CSS classes applied to the table wrapper\n- **theme**: TableThemeProps (optional) - Theme overrides for custom styling\n\n## TableCell Type\n\n`TableCell` represents a single cell in header, footer, or row:\n\n```typescript\ntype TableCell = {\n\tcontent?: Slot;     // String or Snippet\n\tclass?: string;     // Optional CSS classes\n\trowSpan?: number;   // Number of rows the cell spans\n\tcolSpan?: number;   // Number of columns the cell spans\n};\n```\n\n## TableCellValue Type\n\n`TableCellValue` is a union type that allows flexible cell definitions:\n\n```typescript\ntype TableCellValue = TableCell | Slot;\n```\n\nThis means you can define cells in three ways:\n1. **Full object**: `{ content: 'Name', class: 'w-32' }` - When you need classes or spans\n2. **String**: `'Name'` - Simplified syntax for simple text content\n3. **Snippet**: `mySnippet` - Direct snippet for custom rendering\n\n## TableRow Type\n\n`TableRow` represents a row in the table body. It supports two rendering modes:\n\n```typescript\ntype TableRow = {\n\tcells?: Record<string, TableCellValue>;  // Object of cells keyed by column name (structured mode)\n\tcontent?: Slot;                            // Direct content slot (flexible mode)\n\tclass?: string;                            // Optional CSS classes for the row\n\tselected?: boolean;                        // Drives the row theme's selected variant\n};\n```\n\n**Note**: \n- If both `cells` and `content` are provided, `content` takes precedence.\n- When `header` is provided, cells in rows are rendered in the same order as the header keys.\n- If no header is provided, cells are rendered in the order of their keys.\n- Cells can be defined as strings, snippets, or full TableCell objects for maximum flexibility.\n\n## Structure\n\n```\n<div data-slot=\"table-wrapper\" data-density=\"compact | normal | comfortable\">\n\t{#if prefix}\n\t\t<div data-slot=\"table-prefix\">\n\t\t\t<Prefix />\n\t\t</div>\n\t{/if}\n\t\n\t<div data-slot=\"table-container\">\n\t\t<table data-slot=\"table\">\n\t\t\t{#if caption}\n\t\t\t\t<caption data-slot=\"table-caption\">\n\t\t\t\t\t<Caption />\n\t\t\t\t</caption>\n\t\t\t{/if}\n\t\t\t\n\t\t\t{#if header}\n\t\t\t\t<thead data-slot=\"table-header\">\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th>...</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t{/if}\n\t\t\t\n\t\t\t<tbody data-slot=\"table-body\">\n\t\t\t\t<tr>\n\t\t\t\t\t<td>...</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t\t\n\t\t\t{#if footer}\n\t\t\t\t<tfoot data-slot=\"table-footer\">\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td>...</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tfoot>\n\t\t\t{/if}\n\t\t</table>\n\t</div>\n\t\n\t{#if suffix}\n\t\t<div data-slot=\"table-suffix\">\n\t\t\t<Suffix />\n\t\t</div>\n\t{/if}\n</div>\n```\n\n## Examples\n\n### Basic Table with Header and Rows\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\t// Simplified syntax with strings\n\tconst header = {\n\t\tproduct: 'Product',\n\t\tprice: 'Price',\n\t\tstock: 'Stock'\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tproduct: 'Laptop',\n\t\t\t\tprice: '$999',\n\t\t\t\tstock: '15'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tcells: {\n\t\t\t\tproduct: 'Mouse',\n\t\t\t\tprice: '$25',\n\t\t\t\tstock: '42'\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows} />\n```\n\n### Table with Mixed Cell Formats\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n</script>\n\n{#snippet customStatus()}\n\t<span class=\"text-success\">✓ Active</span>\n{/snippet}\n\n<Table\n\theader={{\n\t\tname: 'Name',\n\t\tstatus: { content: customStatus },\n\t\tdate: { content: 'Date', class: 'w-32' }\n\t}}\n\titems={[\n\t\t{ cells: { name: 'John Doe', status: customStatus, date: '2024-01-15' } }\n\t]}\n/>\n```\n\n### Table with Footer\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\tconst header = {\n\t\titem: { content: 'Item' },\n\t\tquantity: { content: 'Quantity' },\n\t\ttotal: { content: 'Total' }\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\titem: { content: 'Product A' },\n\t\t\t\tquantity: { content: '2' },\n\t\t\t\ttotal: { content: '$200' }\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tcells: {\n\t\t\t\titem: { content: 'Product B' },\n\t\t\t\tquantity: { content: '1' },\n\t\t\t\ttotal: { content: '$150' }\n\t\t\t}\n\t\t}\n\t];\n\t\n\tconst footer = {\n\t\titem: { content: 'Total' },\n\t\tquantity: { content: '3' },\n\t\ttotal: { content: '$350' }\n\t};\n</script>\n\n<Table {header} items={rows} {footer} />\n```\n\n### Table with Custom Row Content (Slot)\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n</script>\n\n{#snippet customRow()}\n\t<td>John Doe</td>\n\t<td>\n\t\t<button>Edit</button>\n\t\t<button>Delete</button>\n\t</td>\n{/snippet}\n\n<Table\n\theader={{ name: 'Name', actions: 'Actions' }}\n\titems={[{ content: customRow }]}\n/>\n```\n\n### Table with Prefix and Suffix (Future Features)\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\timport { TextInput } from 'entasis/text-input';\n\timport { Button } from 'entasis/button';\n\t\n\tconst header = {\n\t\tname: { content: 'Name' },\n\t\temail: { content: 'Email' }\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tname: { content: 'John Doe' },\n\t\t\t\temail: { content: 'john@example.com' }\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows}>\n\t{#snippet prefix()}\n\t\t<div class=\"mb-4\">\n\t\t\t<TextInput placeholder=\"Search...\" />\n\t\t</div>\n\t{/snippet}\n\t\n\t{#snippet suffix()}\n\t\t<div class=\"mt-4 flex justify-between\">\n\t\t\t<span>Showing 1-10 of 50</span>\n\t\t\t<div class=\"flex gap-2\">\n\t\t\t\t<Button>Previous</Button>\n\t\t\t\t<Button>Next</Button>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n</Table>\n```\n\n### Table with Caption\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\tconst header = {\n\t\tmonth: { content: 'Month' },\n\t\tsales: { content: 'Sales' }\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tmonth: { content: 'January' },\n\t\t\t\tsales: { content: '$5000' }\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows}>\n\t{#snippet caption()}\n\t\tMonthly Sales Report\n\t{/snippet}\n</Table>\n```\n\n### Table with Custom Cell Classes\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\t\n\tconst header = {\n\t\tstatus: { content: 'Status', class: 'w-24' },\n\t\tdescription: { content: 'Description' }\n\t};\n\t\n\tconst rows = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tstatus: { content: 'Active', class: 'text-success' },\n\t\t\t\tdescription: { content: 'System is running normally' }\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tcells: {\n\t\t\t\tstatus: { content: 'Warning', class: 'text-warning' },\n\t\t\t\tdescription: { content: 'High CPU usage detected' }\n\t\t\t},\n\t\t\tclass: 'bg-warning/10'\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows} />\n```\n\n### Table Density\n\n```svelte\n<script>\n\timport { Table } from 'entasis/table';\n\n\tconst header = { name: 'Name', email: 'Email' };\n\tconst rows = [\n\t\t{ cells: { name: 'John Doe', email: 'john@example.com' } }\n\t];\n</script>\n\n<!-- Dense data grid -->\n<Table {header} items={rows} density=\"compact\" />\n\n<!-- Default everyday scale -->\n<Table {header} items={rows} density=\"normal\" />\n\n<!-- Roomy detail surface -->\n<Table {header} items={rows} density=\"comfortable\" />\n```\n\n### Table with RowSpan and ColSpan\n\n```svelte\n<script lang=\"ts\">\n\timport { Table, type TableRow } from 'entasis/table';\n\n\tconst header = {\n\t\tname: { content: 'Name' },\n\t\tdetails: { content: 'Details' },\n\t\tstatus: { content: 'Status' }\n\t};\n\n\tconst rows: TableRow[] = [\n\t\t{\n\t\t\tcells: {\n\t\t\t\tname: { content: 'John Doe', rowSpan: 2 },\n\t\t\t\tdetails: { content: 'Email: john@example.com' },\n\t\t\t\tstatus: { content: 'Active' }\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tcells: {\n\t\t\t\tdetails: { content: 'Phone: +1234567890' },\n\t\t\t\tstatus: { content: 'Active' }\n\t\t\t}\n\t\t}\n\t];\n</script>\n\n<Table {header} items={rows} />\n```\n\n## Accessibility\n\n- Uses semantic HTML elements (`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<th>`, `<td>`)\n- Supports `<caption>` for table descriptions\n- Proper heading structure with `<th>` elements in header\n- Hover states for better interactivity feedback\n\n## Notes\n\n- The component uses a configuration-over-markup approach, making it easy to generate tables from data\n- Header, footer, and row cells are defined as objects keyed by column name (`Record<string, TableCell>`)\n- Cells in rows are automatically rendered in the same order as the header keys (if header is provided)\n- Rows can use either structured `cells` objects or flexible `content` slots\n- The `prefix` and `suffix` slots are designed for future features like search and pagination\n- All parts of the table can be styled via the theme system\n- The table container includes horizontal scroll for responsive design\n- Rows have a subtle hover effect with `bg-neutral-muted/40`\n- All borders use `border-neutral-muted` for consistency\n- Row/cell spacing follows the `density` prop; the default 'normal' keeps rows at `py-0.5` with `p-2` cells\n\n## Theme Customization\n\nThe Table component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Table wrapper container styles\n- **table**: Main table element styles\n- **thead**: Table header section styles\n- **tbody**: Table body section styles\n- **tfoot**: Table footer section styles\n- **row**: Table row styles\n- **head**: Header cell styles\n- **cell**: Data cell styles\n- **caption**: Table caption styles\n- **prefix**: Prefix slot container styles\n- **suffix**: Suffix slot container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for scrollable container\n\n**table**:\n- base: Base classes for table element\n\n**thead**:\n- base: Base classes for header section\n\n**tbody**:\n- base: Base classes for body section\n\n**tfoot**:\n- base: Base classes for footer section\n\n**row**:\n- base: Base classes for table rows\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Vertical row padding (py-0 / py-0.5 / py-1)\n  - selected: boolean - Selected row styling, driven by the row's `selected` flag (which also sets `data-state=\"selected\"`)\n\n**head**:\n- base: Base classes for header cells\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Header cell height and horizontal padding (h-8 px-1.5 / h-10 px-2 / h-12 px-3)\n\n**cell**:\n- base: Base classes for data cells\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Cell padding (px-1.5 py-1 / p-2 / p-3)\n\n**caption**:\n- base: Base classes for table caption\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Caption top margin (mt-3 / mt-4 / mt-6)\n\n**prefix**:\n- base: Base classes for prefix slot\n\n**suffix**:\n- base: Base classes for suffix slot\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Table \n  {header}\n  items={rows}\n  theme={{\n    table: {\n      base: 'border-collapse border-2'\n    },\n    row: {\n      base: 'state-layer transition-colors'\n    },\n    head: {\n      base: 'bg-gray-100 font-semibold'\n    }\n  }}\n/>\n```\n\n**Custom Row Styling**:\n```svelte\n<Table \n  {header}\n  items={rows}\n  theme={{\n    row: {\n      base: 'border-b border-gray-200',\n      selected: {\n        true: 'bg-blue-50'\n      }\n    },\n    cell: {\n      base: 'px-4 py-2'\n    },\n    head: {\n      base: 'px-4 py-3 text-left font-bold'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setTableTheme } from '../components/Table/index.ts';\n  \n  setTableTheme({\n    table: {\n      base: 'w-full border-collapse'\n    },\n    row: {\n      base: 'state-layer transition-colors',\n      selected: {\n        true: 'bg-primary/10'\n      }\n    },\n    head: {\n      base: 'bg-gray-100 font-semibold'\n    }\n  });\n</script>\n```\n";
+    readonly 'data-table': "\n# DataTable\n\nDataTable is the typed, interactive, virtualized table for application data. Its public API is\nEntasis-native; TanStack Table Core remains private, but it must be installed as an optional peer\ndependency. Use Table for static tabular content.\n\n## Requires\n\nDataTable builds its row model with TanStack Table Core, which ships with entasis.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import {\n    createDataTableColumnHelper,\n    DataTable\n  } from '../components/DataTable/index.ts';\n\n  type Person = { id: string; name: string; role: string; active: boolean };\n  const column = createDataTableColumnHelper<Person>();\n  const columns = [\n    column.accessor('name', {\n      id: 'name',\n      header: 'Name',\n      sortable: true,\n      filter: { type: 'text' }\n    }),\n    column.accessor('role', { id: 'role', header: 'Role' }),\n    column.accessor('active', {\n      id: 'active',\n      header: 'Active',\n      filter: { type: 'boolean' }\n    })\n  ];\n</script>\n\n<DataTable\n  {items}\n  {columns}\n  getRowId={(person) => person.id}\n  height={420}\n  search\n  pagination={{ pageSize: 25, pageSizes: [25, 50, 100] }}\n/>\n```\n\n`items`, `columns`, and `getRowId` are required. Without `height`, DataTable fills a\nparent with a definite height so the virtual viewport remains bounded. Pass `virtualize={false}`\ninstead to drop the table into normal document flow at its natural height:\n\n```svelte\n<DataTable {items} {columns} {getRowId} virtualize={false} />\n```\n\n## Core props\n\n- **items**: `readonly TData[]`.\n- **columns**: `readonly DataTableColumn<TData>[]`.\n- **getRowId**: stable row identity used by selection, expansion, virtualization, and focus.\n- **height**: optional `string | number`; otherwise fills a definite-height parent. Only read\n  while virtualizing.\n- **virtualize**: default true. False renders every row in normal flow, so the table needs no\n  height and no definite-height parent.\n- **density**: `compact | normal | comfortable`, default `normal`.\n- **interactionMode**: `table | grid`, default `table`.\n- **processingMode**: `client | manual`, default `client`.\n- **selectionMode**: `none | single | multiple`, default `none`.\n- **pagination**: `false | DataTablePaginationConfig`. False disables pagination processing.\n  `showControls: false` keeps processing active while hiding the built-in footer.\n- **search**: false, true, or placeholder/debounce configuration.\n- **showColumnVisibilityControl**: default false.\n- **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.\n- **disabled** blocks sorting controls, selection paths, editing, and column manipulation.\n- **loading** and **error** drive table states and the NetworkIndicator.\n- **api**: bindable narrow external-control instance handle (`DataTableApi<TData>`).\n- **cell** and **header**: table-level renderer snippets with `renderDefault` delegates.\n- **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.\n\n## Column definitions\n\n`DataTableColumn<TData, TValue>` supports `id`, `accessor`, required `header`, optional\n`cell` and `aggregatedCell`, sorting, filtering, grouping, aggregation, editing, visibility,\nresizing, reordering, pinning, alignment, `width` / `minWidth` / `maxWidth`, and column\nclasses.\n\nUse `createDataTableColumnHelper<TData>()` to infer accessor values inside cell and editor\nconfiguration. Raw DataTableColumn definitions remain available as an escape hatch.\n\n## Rendering\n\nColumn-level renderers are part of the default rendering chain. A table-level `cell` renderer\nwraps every public ordinary, grouped, aggregated, and placeholder cell. It does not wrap selection\ncells, action cells, detail rows, or active editors. A table-level `header` renderer wraps only\nconfigured public header content; sorting, menus, dragging, resizing, focus, and ARIA remain owned\nby DataTable.\n\n`DataTableCellRenderPayload<TData>` contains the normal cell payload plus `column`,\n`placeholder`, and `renderDefault`. `DataTableHeaderRenderPayload<TData>` contains the normal\nheader payload plus `renderDefault`.\n\n```svelte\n{#snippet cell({ columnId, value, renderDefault })}\n  {#if columnId === 'status'}\n    <Chip>{value}</Chip>\n  {:else}\n    {@render renderDefault()}\n  {/if}\n{/snippet}\n```\n\nPrecedence is structural rendering or an active editor, then the table-level renderer, then\n`renderDefault`, which resolves the column renderer before the built-in fallback.\n\n## Filters\n\nBuilt-in filters are text, number range, select, multi-select, date range, and boolean.\nA custom filter is `{ type: 'custom', render, predicate }`. Its renderer receives the column,\ncurrent value, active state, `setValue(value)`, and `clear()`; `predicate(row, value,\ncolumnValue)` owns client matching. Filtering, searching, sorting, and grouping reset page one.\n\n## State and external composition\n\nUse `createDataTableState(columns, initialState?, pageSize?)` for controlled state. The bindable\nstate contains sorting, globalFilter, columnFilters, one-based pagination, rowSelection,\ncolumnVisibility, columnOrder, columnPinning, columnSizing, grouping, and expanded.\n\nDataTable updates replace slices immutably and call `onStateChange(nextState)`. Parent-originated\nmutations through `bind:state` are observed without calling that callback again.\n\n`bind:api` exposes a stable `DataTableApi<TData>` with reactive state, totals, visible\nrows, selected loaded rows, save status, and commands for global/column filters, selection clearing,\npage, and page size. Commands use the same guards and reset rules as built-in controls.\n\n```svelte\n<DataTable\n  bind:state\n  bind:api\n  pagination={{ pageSize: 25, showControls: false }}\n  {...props}\n/>\n```\n\n## Client and manual processing\n\nClient mode runs filtering, sorting, grouping, aggregation, expansion, and pagination locally.\n\nManual mode delegates filtering, sorting, and pagination together. It requires `rowCount`, and\n`items` must contain the already processed current page. Grouping and aggregation are client-only\nin this release: grouping commands are hidden and unsupported manual grouping state is normalized\naway. Abort stale requests when state changes. In manual mode, `dataTable.selectedRows` includes\nonly loaded row objects; all selected IDs remain in `state.rowSelection`.\n\n## Editing\n\nBuilt-in editors are text, number, select, date, and switch. A custom editor snippet receives row\nmetadata, draft, pending/error state, `setDraft`, `commit`, and `cancel`. DataTable never\nmutates rows; changed values call `onCellCommit` and render optimistically while the\nNetworkIndicator tracks the request. Unchanged drafts close without a commit. Rejection rolls back,\nrestores the editor and draft, and exposes the error. Only one asynchronous transaction can be\nactive or recoverable. Columns with editors do not enter edit mode without `onCellCommit` and\nissue a development warning.\n\nEnter and outside clicks commit, Escape cancels, and Tab commits without leaving the edited cell.\nCalendar selection synchronizes its draft before commit. Arrow keys remain owned by editor controls.\n\n## Slots\n\n- **caption**, **toolbarPrefix**, **toolbarSuffix**, **bulkActions**, **rowActions**,\n  **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.\n- Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.\n- Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.\n\n## Accessibility and virtualization\n\nTable mode preserves native table semantics. Grid mode uses one roving cell tab stop with arrows,\nTab/Shift+Tab, Home/End, Ctrl+Home/Ctrl+End, and PageUp/PageDown. Focus is reconciled by row and\ncolumn identity after data, pagination, filtering, grouping, and visibility changes. State rows use\ncomplete column spans and keep recovery controls keyboard reachable. Logical row indices derive\nfrom the final grouped/expanded row model.\n\nRows are virtualized by default; `virtualize={false}` renders all of them in normal flow at\ntheir natural height, keeping the same selection, keyboard navigation, and editing paths. Use it for\nsmall datasets that belong in document flow, not for large ones. Semantic table mode keeps all\ncolumns mounted; grid mode additionally virtualizes center columns while pinned columns stay\nmounted. Resize handles support pointer and\nkeyboard resizing. Reorder handles support left/right keyboard movement and pointer movement within\ntheir current pin region. Logical inset positioning preserves RTL pinning.\n";
+    readonly timeline: "\n# Timeline\n\nRender an ordered sequence of dated or descriptive events on a vertical or horizontal axis. Timeline owns the semantic list, item surfaces, axis anchors, markers, connectors, responsive alternate collapse, and horizontal overflow behavior. Input order is always render order.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { Timeline, type TimelineItem } from '../components/Timeline/index.ts';\n\n  const items: TimelineItem[] = [\n    {\n      id: 'placed',\n      date: 'Mar 15, 2024',\n      datetime: '2024-03-15',\n      title: 'Order placed',\n      description: 'Your order has been received.'\n    },\n    {\n      id: 'payment',\n      date: 'Mar 16, 2024',\n      datetime: '2024-03-16',\n      title: 'Payment confirmed',\n      color: 'success'\n    }\n  ];\n</script>\n\n<Timeline {items} />\n```\n\nThe default configuration is a vertical timeline with all content on the logical end side of the axis.\n\n## Props\n\n### Data and layout\n\n- **items**: `readonly Item[]` (required) — entries in display order. `Item` must extend `TimelineItem`.\n- **orientation**: `'vertical' | 'horizontal'` (default: `'vertical'`) — direction of the sequence axis.\n- **placement**: `'start' | 'end' | 'alternate'` (default: `'end'`) — logical side used for item surfaces. Alternate placement starts on `end`, then alternates by array index.\n- **variant**: `'ghost' | 'card' | 'outline' | 'soft'` (default: `'ghost'`) — global surface treatment for all entries.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) — title and description typography, marker and icon scale, and loading Spinner scale.\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`) — item gaps, surface padding, connector spacing, and horizontal item minimum width.\n- **color**: Entasis semantic color (default: `'neutral'`) — default marker and outline or soft surface accent.\n- **connectorColor**: Entasis semantic color (default: `'neutral'`) — default outgoing connector color.\n- **showConnectors**: `boolean` (default: `true`) — shows connector segments between markers.\n- **scrollFade**: `boolean` (default: `true`) — applies the shared logical horizontal scroll fade only while a horizontal timeline actually overflows.\n- **i18n**: `Partial<Messages>` — per-instance translations merged over the global i18n catalog.\n\n### Custom rendering\n\n- **item**: `Snippet<[TimelineItemPayload<Item>]>` — replaces the content inside each Timeline-owned variant surface.\n- **marker**: `Snippet<[TimelineItemPayload<Item>]>` — replaces the marker visual inside the Timeline-owned axis anchor.\n- **opposite**: `Snippet<[TimelineItemPayload<Item>]>` — replaces the opposite track in alternate placement. Its default renderer is the item date. TypeScript rejects this prop with fixed `start` or `end` placement.\n\n### Root element\n\n- **ref**: `HTMLOListElement | null` (bindable) — reference to the root `<ol>`.\n- **class**: `string` — additional root classes.\n- **theme**: `TimelineThemeProps` — per-instance overrides for Timeline theme parts.\n- Native ordered-list attributes and Svelte attachments are forwarded to the root.\n\n## Item shape\n\n```ts\ntype TimelineItem = {\n  id?: string | number;\n  title: Slot;\n  date?: Slot;\n  datetime?: string;\n  description?: Slot;\n  icon?: Slot;\n  loading?: boolean;\n  color?: Colors;\n  connectorColor?: Colors;\n  side?: 'start' | 'end';\n};\n```\n\n- `title` is required. `title`, `date`, `description`, and `icon` accept a string or snippet.\n- `id` is optional. Use a stable explicit ID when entries can reorder; otherwise Timeline uses the array index as identity.\n- `datetime` adds the machine-readable value to a default `<time>` element when `date` is present.\n- `icon` replaces the default dot inside the default marker.\n- `loading` replaces the default marker visual with a color- and size-aware Spinner.\n- `color` overrides the root color for this marker and its outline or soft surface.\n- `connectorColor` overrides the root color for this item's outgoing connector. It has no effect on the final item.\n- `side` overrides alternate parity for one item. It is not valid with fixed placement.\n\n## Placement and dates\n\nFixed `start` and `end` placement keeps every surface on one logical side. The default content renders the date before the title inside each surface.\n\n`placement=\"alternate\"` creates an opposite track and starts the first item on `end`. Its default opposite renderer displays the date. Set `item.side` to place a specific alternate item on `start` or `end` without changing the array order.\n\n```svelte\n<Timeline items={milestones} placement=\"alternate\" variant=\"card\" />\n```\n\nTimeline treats dates as display content. It does not parse, format, compare, or sort them. It also has no completed, current, or pending status model. Put status meaning in the title or description and use semantic color or a custom marker only as supporting presentation.\n\n## Generic snippets and defaults\n\nApplication item types can extend `TimelineItem`. The extended type remains available as `payload.item` in all three renderer snippets.\n\n```svelte\n<script lang=\"ts\">\n  import { Timeline, type TimelineItem } from '../components/Timeline/index.ts';\n\n  type Release = TimelineItem & {\n    version: string;\n    href: string;\n  };\n\n  const releases: Release[] = [\n    { id: 'v2', title: 'Version 2 released', version: '2.0.0', href: '/releases/v2' }\n  ];\n</script>\n\n<Timeline items={releases}>\n  {#snippet item({ item, defaultContent })}\n    <a href={item.href} class=\"block\">\n      {@render defaultContent()}\n      <span class=\"text-neutral/70 text-xs\">{item.version}</span>\n    </a>\n  {/snippet}\n</Timeline>\n```\n\nEvery snippet receives:\n\n```ts\ntype TimelineItemPayload<Item extends TimelineItem> = Readonly<{\n  item: Item;\n  index: number;\n  side: 'start' | 'end';\n  orientation: 'vertical' | 'horizontal';\n  color: Colors;\n  connectorColor: Colors;\n  isFirst: boolean;\n  isLast: boolean;\n  defaultContent: Snippet;\n  defaultMarker: Snippet;\n  defaultOpposite: Snippet;\n}>;\n```\n\nCall `defaultContent()`, `defaultMarker()`, or `defaultOpposite()` to wrap or extend the matching default renderer. A custom `marker` snippet that does not call `defaultMarker()` owns its complete marker visual, including loading presentation. Timeline still owns the `<ol>`, each `<li>`, axis and connector geometry, marker anchor, opposite track, and variant surface.\n\n## Responsive alternate layout\n\nA vertical alternate timeline uses its own inline-size container. Below `40rem`, it moves the axis to the logical start edge, places every main surface on the end side, and places opposite content before the main surface. DOM and input order do not change. Per-item `side` values remain in the payload, but their visual side effect is suspended while the layout is collapsed.\n\n## Horizontal overflow\n\nHorizontal entries stay on one axis and use density-controlled minimum widths. They do not wrap or compress; the root uses native horizontal scrolling. Timeline measures real overflow with `ResizeObserver`, applies `scroll-fade-x` only when needed, and makes the ordered list keyboard-focusable only while it overflows. The fade and native scrolling use logical inline direction and work in LTR and RTL layouts.\n\n## Variants\n\n- `ghost`: no surface chrome.\n- `card`: neutral raised surface with a quiet ring and shadow.\n- `outline`: transparent surface with a ring in the resolved item color.\n- `soft`: muted surface in the resolved item color.\n\nThe variant is global. Timeline does not support per-item variant overrides.\n\n## Runtime validation\n\nTimeline throws a descriptive `TypeError` when:\n\n- two items have the same explicit `id`;\n- an item supplies `side` while placement is fixed to `start` or `end`.\n\nThe ID check preserves number and string identity, so `1` and `'1'` are different IDs. TypeScript separately rejects `opposite` with fixed placement.\n\n## Accessibility\n\n- The root is an ordered list and every event is a list item.\n- Axis anchors, markers, and connectors are decorative and hidden from assistive technology. Do not use marker color or shape as the only status signal.\n- A default loading marker has a localized polite status announcement outside the decorative axis.\n- A default date with `datetime` renders as a semantic `<time>` element.\n- An overflowing horizontal timeline becomes a native keyboard scroll region; a non-overflowing timeline adds no tab stop.\n\n## Theme parts\n\n`root`, `item`, `opposite`, `axis`, `connector`, `marker`, `content`, `date`, `titleRow`, `title`, `description`, and `loading`.\n\nTimeline is display-only. It has no selection, navigation, event callbacks, animation state, bindable controller, date processing, or built-in progress status.\n";
+    readonly tree: "\n# Tree Component\n\nVirtualized file tree powered by @pierre/trees. The wrapper provides Svelte props,\nSSR pre-rendering, bindable access to the FileTree instance, tokenized styling,\nGit status, search, snippets, context menus, drag-and-drop, renaming, and mutation\nevents.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Tree } from 'entasis/tree';\n\n\tconst paths = [\n\t\t'src/lib/components/Tree/Tree.svelte',\n\t\t'src/lib/components/Tree/tree.props.ts',\n\t\t'src/routes/components/tree/+page.svelte'\n\t];\n</script>\n\n<Tree paths={paths} height=\"320px\" initialExpansion=\"open\" search />\n```\n\n## Large Trees\n\nUse `prepareFileTreeInput` from `entasis/tree` and pass `preparedInput` for large\nor SSR-heavy trees. Keep the input preparation outside component render work.\n\n```svelte\n<script lang=\"ts\">\n\timport { Tree, prepareFileTreeInput } from 'entasis/tree';\n\n\tconst preparedInput = prepareFileTreeInput(paths, { sort: 'default' });\n</script>\n\n<Tree {preparedInput} height={420} initialVisibleRowCount={18} overscan={8} />\n```\n\n## AI-Safe Usage Contract\n\nPrefer the narrowest public API:\n\n1. Use `paths` for small and medium static trees.\n2. Use `preparedInput` for large trees, server-rendered trees, or pre-sorted data.\n3. Use promoted props such as `search`, `gitStatus`, `icons`, `renaming`,\n   `dragAndDrop`, `density`, and `searchTopInset` before using raw `options`.\n4. Use `bind:api` only when you need imperative behavior such as custom search,\n   focus, mutation, or scroll control.\n5. Passing `onRename` enables inline rename with the default policy unless\n   `renaming={false}`. Passing `onDropComplete` enables drag-and-drop with the\n   default policy unless `dragAndDrop={false}`.\n6. Use `TreeContextMenuSurface` for normal context menus instead of rebuilding menu\n   positioning from scratch.\n7. Use `unsafeCSS` only for unsupported shadow-DOM styling. Prefer `searchTopInset`\n   for search spacing.\n\nNever pass both `paths` and `preparedInput`. Virtualized trees need a bounded\n`height` or an outer layout that gives the wrapper a real height.\n\n## Recipes\n\n### Controlled Search\n\n```svelte\n<script lang=\"ts\">\n\timport { Tree, type FileTree } from 'entasis/tree';\n\n\tlet fileTree: FileTree | undefined = $state();\n\tlet query = $state('');\n\n\tfunction setQuery(value: string) {\n\t\tquery = value;\n\t\tfileTree?.setSearch(value.length === 0 ? null : value);\n\t}\n</script>\n\n<input value={query} oninput={(event) => setQuery(event.currentTarget.value)} />\n<Tree bind:api paths={paths} height={360} search initialSearchQuery={query} />\n```\n\n### Git Status\n\n```svelte\n<script lang=\"ts\">\n\timport { Tree, type GitStatusEntry } from 'entasis/tree';\n\n\tconst gitStatus: GitStatusEntry[] = [\n\t\t{ path: 'src/lib/Tree.svelte', status: 'modified' }\n\t];\n</script>\n\n<Tree paths={paths} {gitStatus} showGitStatus height={360} />\n```\n\n### Context Menu\n\n```svelte\n<script lang=\"ts\">\n\timport { Tree, TreeContextMenuSurface } from 'entasis/tree';\n</script>\n\n<Tree\n\tpaths={paths}\n\theight={360}\n\tcomposition={{ contextMenu: { enabled: true, triggerMode: 'both' } }}\n>\n\t{#snippet contextMenu(data)}\n\t\t<TreeContextMenuSurface\n\t\t\t{data}\n\t\t\titems={[{ type: 'option', title: `Copy ${data.name}`, onclick: () => copy(data.path) }]}\n\t\t/>\n\t{/snippet}\n</Tree>\n```\n\n## Props\n\n### Data\n- **paths**: readonly string[] - Canonical file and directory paths.\n- **preparedInput**: FileTreePreparedInput - Pre-shaped input from @pierre/trees.\n- **options**: TreeOptions - Lower-level FileTree options.\n- **api**: FileTree - Bindable instance handle for imperative calls.\n\n### Rendering\n- **height**: number | string - Bounded wrapper height. Virtualized trees need one.\n- **hostClass**: string - Classes applied to the inner file-tree-container.\n- **theme**: TreeThemeProps - Theme overrides for root, viewport, host, and error.\n- **class**: string - Classes applied to the outer wrapper.\n- **ref**: HTMLDivElement - Bindable wrapper element.\n\n### Tree Options\n- **id**: string - Stable tree id.\n- **initialExpansion**: 'closed' | 'open' | number - Initial expansion policy.\n- **initialExpandedPaths**: readonly string[] - Paths expanded initially or on reset.\n- **initialSelectedPaths**: readonly string[] - Paths selected initially.\n- **flattenEmptyDirectories**: boolean - Collapse single-child directory chains.\n- **presorted**: boolean - Treat input paths as already sorted.\n- **sort**: 'default' | FileTreeSortComparator - Sort policy.\n- **density**: 'compact' | 'normal' | 'comfortable' - Semantic row density. Lower-level numeric tuning belongs in options.density.\n- **itemHeight**: number - Virtualized row height.\n- **overscan**: number - Extra rows above and below the viewport.\n- **initialVisibleRowCount**: number - SSR and virtualization first-pass row count.\n- **icons**: FileTreeIcons - Built-in icon set and overrides.\n- **gitStatus**: GitStatusEntry[] - Status by path.\n- **showGitStatus**: boolean - Set false to hide status styling.\n- **renderRowDecoration**: FileTreeRowDecorationRenderer - Row label/icon decoration.\n- **search**: boolean - Enables built-in search UI.\n- **initialSearchQuery**: string | null - Initial search value.\n- **fileTreeSearchMode**: FileTreeSearchMode - Search filtering strategy.\n- **searchBlurBehavior**: FileTreeSearchBlurBehavior - Search close/retain behavior.\n- **searchFakeFocus**: boolean - Preserve visual tree focus during search.\n- **searchTopInset**: number | string - Top spacing above the built-in search input.\n- **stickyFolders**: boolean - Keep ancestor folders sticky while scrolling.\n- **unsafeCSS**: string - CSS injected into the tree shadow root.\n- **dragAndDrop**: boolean | FileTreeDragAndDropConfig - DnD behavior and policies.\n- **renaming**: boolean | FileTreeRenamingConfig - Inline rename behavior and policies.\n- **composition**: FileTreeCompositionOptions - Raw Pierre composition hooks.\n\n### Snippets\n- **header**: Snippet - Custom header mounted into the tree composition header slot.\n- **contextMenu**: Snippet<[TreeContextMenuSnippetData]> - Custom row context menu.\n- **TreeContextMenuSurface**: exported helper component for standard entasis Menu styling\n  and Pierre context-menu positioning.\n\n### Events\n- **onReady**: (payload: FileTree) => void - After render or hydration.\n- **onFocusChange**: (path: string | null) => void - Focused row changed.\n- **onMutation**: (event: FileTreeMutationEvent) => void - Add/remove/move/reset event.\n- **onSelectionChange**: (paths: readonly string[]) => void - Selection changed. Its payload is the\n  whole selected-path set, so it belongs to the `onSelectionChange` state family rather than the\n  `onSelect` pick event. @pierre/trees owns the selection and exposes no setter, so\n  `initialSelectedPaths` is the only default and there is no controlled `selection` prop.\n- **onSearchChange**: (value: string | null) => void - Search changed.\n- **onRename**: FileTreeRenamingConfig['onRename'] - Rename completed.\n- **onRenameError**: FileTreeRenamingConfig['onError'] - Rename failed.\n- **onDropComplete**: FileTreeDragAndDropConfig['onDropComplete'] - Drop completed.\n- **onDropError**: receives one { error, event } object when a drop fails.\n\n## Accessibility\n\n@pierre/trees owns the ARIA tree semantics, keyboard navigation, selection, search,\nrenaming, drag interactions, and virtualized focus handling. This wrapper preserves\nthe server-rendered tree host during hydration and surfaces rendering errors through\na role=alert error region.\n\n## Notes\n\n- Pass exactly one data source: `paths` or `preparedInput`.\n- Virtualized trees need a bounded height via `height` or an outer layout class.\n- The wrapper maps Pierre CSS variables to entasis `--color-*` tokens, so light and\ndark themes are inherited automatically.\n- Import common Pierre helpers and types from `entasis/tree` first. Reach for\n`@pierre/trees` directly only when this wrapper does not re-export a type or helper.\n";
+    readonly alert: "\n# Alert Component\n\nThe Alert component displays important messages and notifications to users. It supports icons, titles, descriptions, and multiple color variants to convey different types of information (success, warning, error, info).\n\n## Basic Usage\n\n```svelte\n<Alert>\n\t{#snippet title()}\n\t\tAlert Title\n\t{/snippet}\n\t{#snippet description()}\n\t\tThis is an important message for the user.\n\t{/snippet}\n</Alert>\n```\n\n## Props\n\n### Core Props\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the alert\n  - danger: For error messages\n  - success: For success messages\n  - warning: For warning messages\n  - info: For informational messages\n\n- **variant**: 'solid' | 'outline' | 'soft' (default: 'outline')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: The tinted \"toast\" look — a muted-color surface with a colored border and a legible on-tint accent (readable in light and dark). For the status colors (success/info/warning/danger) a matching filled icon is shown automatically when no `prefix` is provided.\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Reduced padding and smaller text\n  - normal: Standard padding and text size\n  - large: Increased padding and larger text\n\n### Layout Props\n- **disabled**: boolean (default: false)\n  - Disables interactions and applies opacity styling\n- **dismissible**: boolean (default: false)\n  - Renders a close button; clicking it calls `onDismiss`. The alert's visibility is owned by the caller.\n- **onDismiss**: () => void\n  - Called when the close button is clicked (hide the alert in this handler).\n\n### Content Props (Slots)\n- **prefix**: Snippet - Icon or content before the alert text (typically an icon)\n  - When provided, the grid layout automatically adjusts to accommodate the icon\n  - Suggested icons by color:\n    - danger: AlertCircle or X icon\n    - warning: AlertTriangle icon\n    - success: CheckCircle icon\n    - info: Info icon\n    - default: Info icon\n- **title**: Snippet - Alert title text (bold, appears first)\n- **description**: Snippet - Alert description text (muted, appears below title)\n- **children**: Snippet - Default content (rendered inside description section if description is not provided)\n\n### Styling Props\n- **class**: string - Additional CSS classes for the alert container\n- **ref**: HTMLElement | null - Reference to the alert element\n- **theme**: AlertThemeProps - Custom theme overrides\n\n## Structure\n\nThe Alert component uses a CSS Grid layout that automatically adapts based on icon presence:\n\n```\n<Alert>\n\t<!-- Icon (optional) -->\n\t{#snippet prefix()}\n\t\t{@render warningCircleIcon()}\n\t{/snippet}\n\t\n\t<!-- Title (optional) -->\n\t{#snippet title()}\n\t\tAlert Title\n\t{/snippet}\n\t\n\t<!-- Description or children -->\n\t{#snippet description()}\n\t\tAlert description text\n\t{/snippet}\n\t\n\t<!-- Or use children -->\n\t{#snippet children()}\n\t\tAlert content\n\t{/snippet}\n</Alert>\n```\n\nThe grid layout:\n- When icon is present: `grid-cols-[calc(var(--spacing)*4)_1fr]` with gap-x-3\n- When no icon: `grid-cols-[0_1fr]`\n- Icon uses col-start-1, title/description use col-start-2\n\n## Examples\n\n### Basic Alert\n```svelte\n<Alert>\n\t{#snippet title()}\n\t\tHeads up!\n\t{/snippet}\n\t{#snippet description()}\n\t\tThis is a basic alert message.\n\t{/snippet}\n</Alert>\n```\n\n### Alert with Icon\n```svelte\n<script lang=\"ts\">\n\timport { Alert } from 'entasis/alert';\n\timport { infoIcon } from 'entasis/icons/info';\n</script>\n\n<Alert color=\"info\">\n\t{#snippet prefix()}\n\t\t{@render infoIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tInformation\n\t{/snippet}\n\t{#snippet description()}\n\t\tThis alert includes an icon.\n\t{/snippet}\n</Alert>\n```\n\n### Success Alert\n```svelte\n<script lang=\"ts\">\n\timport { Alert } from 'entasis/alert';\n\timport { checkCircleIcon } from 'entasis/icons/checkCircle';\n</script>\n\n<Alert color=\"success\">\n\t{#snippet prefix()}\n\t\t{@render checkCircleIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tSuccess!\n\t{/snippet}\n\t{#snippet description()}\n\t\tYour changes have been saved successfully.\n\t{/snippet}\n</Alert>\n```\n\n### Warning Alert\n```svelte\n<script lang=\"ts\">\n\timport { Alert } from 'entasis/alert';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Alert color=\"warning\" variant=\"outline\">\n\t{#snippet prefix()}\n\t\t{@render warningIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tWarning\n\t{/snippet}\n\t{#snippet description()}\n\t\tPlease review your input before proceeding.\n\t{/snippet}\n</Alert>\n```\n\n### Danger Alert\n```svelte\n<script lang=\"ts\">\n\timport { Alert } from 'entasis/alert';\n\timport { warningCircleIcon } from 'entasis/icons/warningCircle';\n</script>\n\n<Alert color=\"danger\">\n\t{#snippet prefix()}\n\t\t{@render warningCircleIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tError\n\t{/snippet}\n\t{#snippet description()}\n\t\tSomething went wrong. Please try again.\n\t{/snippet}\n</Alert>\n```\n\n### Alert Variants\n```svelte\n<!-- Solid (default) -->\n<Alert variant=\"solid\" color=\"primary\">\n\t{#snippet title()}\n\t\tSolid Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tFilled background with color\n\t{/snippet}\n</Alert>\n\n<!-- Outline -->\n<Alert variant=\"outline\" color=\"primary\">\n\t{#snippet title()}\n\t\tOutline Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tTransparent background with border\n\t{/snippet}\n</Alert>\n\n<!-- Soft -->\n<Alert variant=\"soft\" color=\"primary\">\n\t{#snippet title()}\n\t\tSoft Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tMuted background\n\t{/snippet}\n</Alert>\n```\n\n### Alert Sizes\n```svelte\n<Alert size=\"small\" color=\"info\">\n\t{#snippet title()}\n\t\tSmall Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tCompact size\n\t{/snippet}\n</Alert>\n\n<Alert size=\"normal\" color=\"info\">\n\t{#snippet title()}\n\t\tNormal Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tStandard size (default)\n\t{/snippet}\n</Alert>\n\n<Alert size=\"large\" color=\"info\">\n\t{#snippet title()}\n\t\tLarge Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tLarger padding and text\n\t{/snippet}\n</Alert>\n```\n\n### Alert with Children Only\n```svelte\n<Alert color=\"info\">\n\t{#snippet children()}\n\t\tSimple alert message without title or description slots.\n\t{/snippet}\n</Alert>\n```\n\n### Alert without Icon\n```svelte\n<Alert color=\"neutral\" variant=\"soft\">\n\t{#snippet title()}\n\t\tNo Icon Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tThe grid layout automatically adjusts when no icon is provided.\n\t{/snippet}\n</Alert>\n```\n\n### Disabled Alert\n```svelte\n<Alert disabled={true} color=\"info\">\n\t{#snippet title()}\n\t\tDisabled Alert\n\t{/snippet}\n\t{#snippet description()}\n\t\tThis alert is disabled and non-interactive.\n\t{/snippet}\n</Alert>\n```\n\n## Accessibility\n\n- The alert container has `role=\"alert\"` attribute for screen readers\n- Icons inherit text color via `text-current` for proper foreground\n- Description text uses muted foreground color for visual hierarchy\n- The component uses semantic HTML structure with data attributes for styling hooks\n\n## Notes\n\n- The grid layout automatically adjusts based on icon presence (hasIcon variant)\n- Icons are sized based on the alert size (small: size-3, normal: size-4, large: size-5)\n- Title and description stack vertically in the second column\n- When description is not provided, children slot content is rendered in its place\n- The component supports all standard colors from the design system\n- Compound variants handle special color+variant combinations (e.g., danger+soft for muted error styling)\n\n## Theme Customization\n\nThe Alert component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main alert container styles\n- **prefix**: Icon/prefix content styles\n- **content**: Content wrapper styles\n- **title**: Alert title text styles\n- **description**: Alert description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { AlertThemeProps } from 'entasis/alert';\n\n// Example theme customization\nconst customTheme: AlertThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    hasIcon: {\n      true: '',\n      false: ''\n    },\n    color: {\n      primary: 'bg-primary text-primary-contrast border-primary',\n      danger: 'bg-danger text-danger-contrast border-danger'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast border-color',\n      outline: 'bg-transparent border-color text-color',\n      soft: 'bg-color-muted text-color border-transparent'\n    },\n    size: {\n      small: 'px-3 py-2 text-xs',\n      normal: 'px-4 py-3 text-sm',\n      large: 'px-5 py-4 text-base'\n    },\n    disabled: {\n      true: 'opacity-50 cursor-not-allowed',\n      false: null\n    },\n    hasDescription: {\n      true: '',\n      false: ''\n    },\n    hasTitle: {\n      true: '',\n      false: ''\n    }\n  },\n  prefix: {\n    size: {\n      small: '[&>svg]:size-4',\n      normal: '[&>svg]:size-5',\n      large: '[&>svg]:size-6'\n    }\n  },\n  title: {\n    size: {\n      small: 'text-sm',\n      normal: 'text-base',\n      large: 'text-md'\n    }\n  },\n  description: {\n    size: {\n      small: 'text-xs',\n      normal: 'text-sm',\n      large: 'text-base'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all alerts\n- Variants:\n  - hasIcon: boolean - Grid layout adjustment when icon is present\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' - Visual style variant\n  - size: 'small' | 'normal' | 'large' - Controls padding and text size\n  - disabled: boolean - Disabled state styling\n  - hasDescription: boolean - Layout adjustment when description is present\n  - hasTitle: boolean - Layout adjustment when title is present\n\n**prefix**:\n- base: Base classes for icon/prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on alert size\n\n**content**:\n- base: Base classes for content wrapper (flex container)\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<script lang=\"ts\">\n  import { Alert } from '../components/Alert/index.ts';\n  import { warningCircleIcon } from 'entasis/icons/warningCircle';\n</script>\n\n<Alert \n  theme={{\n    root: {\n      base: 'rounded-xl raised-4',\n      variant: {\n        solid: 'border-2'\n      }\n    },\n    title: {\n      size: {\n        large: 'text-xl font-bold'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Custom Styled Alert\n  {/snippet}\n</Alert>\n```\n\n**Color and Variant Customization**:\n```svelte\n<Alert \n  color=\"danger\"\n  variant=\"soft\"\n  theme={{\n    root: {\n      variant: {\n        soft: 'bg-red-50 border-red-200 text-red-800'\n      }\n    },\n    prefix: {\n      size: {\n        normal: '[&>svg]:size-6 text-red-600'\n      }\n    }\n  }}\n>\n  {#snippet prefix()}\n    {@render warningCircleIcon()}\n  {/snippet}\n  {#snippet title()}\n    Error Alert\n  {/snippet}\n</Alert>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAlertTheme } from '../components/Alert/index.ts';\n  \n  setAlertTheme({\n    root: {\n      base: 'rounded-lg transition-all',\n      variant: {\n        solid: 'lift-3',\n        outline: 'border-2',\n        soft: 'bg-opacity-20'\n      }\n    },\n    prefix: {\n      size: {\n        normal: '[&>svg]:size-6'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly confirmation: "\nThe confirmation function displays a modal dialog that asks the user to confirm or cancel an action. It returns a Promise that resolves with an object indicating whether the user confirmed or cancelled.\n\n**Usage:**\n```typescript\nimport { confirmation } from 'entasis/confirmation';\n\nconst { confirmed, result } = await confirmation({\n  title: 'Delete Item',\n  description: 'Are you sure you want to delete this item? This action cannot be undone.',\n  confirm: 'Delete',\n  cancel: 'Cancel',\n  onConfirm: async () => {\n    // Optional: Async function that runs when user confirms\n    await deleteItem();\n    return 'Item deleted successfully';\n  }\n});\n\nif (confirmed) {\n  console.log('User confirmed:', result); // result is the return value of onConfirm, or undefined\n} else {\n  console.log('User cancelled');\n}\n```\n\n**Parameters:**\n- `title` (string, required): The title displayed in the confirmation dialog\n- `description` (string, required): The description/message shown in the dialog\n- `confirm` (string | object, required): The confirm button text, or an object with `text` and Button props\n- `cancel` (string | object, required): The cancel button text, or an object with `text` and Button props\n- `onConfirm` (function, optional): An async function that runs when the user clicks confirm. Its return value is passed as `result` in the resolved promise\n\n**Returns:**\nA Promise that resolves to:\n- `{ confirmed: true, result: R }` if the user confirmed (where R is the return type of onConfirm, or void)\n- `{ confirmed: false, result: undefined }` if the user cancelled\n\n**Notes:**\n- The dialog is modal and prevents interaction with the rest of the page until the user responds\n- If `onConfirm` is provided, the confirm button shows a loading state while the function executes\n- The dialog cannot be closed by clicking outside or pressing Escape (user must click a button)\n- Requests made before any `<Confirmation />` is mounted are queued and served by the first one that mounts\n- With several mounted, the most recently mounted one serves; when it unmounts the previous one takes over again\n";
+    readonly empty: "\n# Empty Component\n\nThe Empty component displays an empty state: a centered composition of media (icon or illustration), title, description, action area, and optional note/footer. Use it for empty lists, no-results screens, first-run states, or error placeholders.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Empty } from 'entasis/empty';\n\timport { folderIcon } from 'entasis/icons/folder';\n</script>\n\n<Empty\n\tmediaVariant=\"icon\"\n\tmedia={folderIcon}\n\ttitle=\"No projects yet\"\n\tdescription=\"Get started by creating your first project.\"\n/>\n```\n\n## Props\n\n### Core Props\n- **mediaVariant**: 'default' | 'icon' (default: 'default')\n  - default: Renders the media bare (transparent background), for illustrations or custom visuals\n  - icon: Wraps the media in a small muted rounded square, sized to the empty state size\n\n- **mode**: 'normal' | 'card' (default: 'normal')\n  - normal: Transparent placeholder (current behavior)\n  - card: Renders on a raised surface (bg-surface + raised-sm), matching the Card component\n\n- **bordered**: boolean (default: false)\n  - Wraps the whole empty state in a dashed border (rounded-xl)\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Scales paddings, gaps, media box, and typography\n\n### Actions\n- **actions**: array of (ButtonProps + content) - Buttons rendered as a centered, wrapping row below the description. Each entry is Button props plus a \"content\" string for the label. Convenience alternative to the content slot.\n\n### Content Props (Slots)\nAll slots accept a string or a snippet.\n- **media**: Slot - Icon, image, or illustration shown above the title\n- **title**: Slot - Main heading of the empty state\n- **description**: Slot - Muted supporting text; anchor tags inside get underline styling and primary hover color\n- **content**: Slot - Action area, typically buttons; rendered below the header\n- **note**: Slot - Description-styled note rendered after the content (e.g. a help link)\n- **footer**: Slot - Trailing content rendered as a sibling of header/content, unwrapped\n\n### Advanced Props\n- **children**: Snippet - Custom content that replaces the default composition entirely when set\n- **class**: string - Additional CSS classes on the root\n- **theme**: EmptyThemeProps - Theme overrides\n\n## Structure\n\n```\n<Empty>                    <!-- root: centered flex column -->\n\t<header>                 <!-- only when media/title/description is set -->\n\t\t<media />\n\t\t<title />\n\t\t<description />\n\t</header>\n\t<content>                <!-- only when content/note is set -->\n\t\t<content />\n\t\t<note />\n\t</content>\n\t<footer />               <!-- unwrapped trailing slot -->\n</Empty>\n```\n\n## Examples\n\n### Icon empty state with action\n```svelte\n<Empty\n\tbordered\n\tmediaVariant=\"icon\"\n\tmedia={folderIcon}\n\ttitle=\"No projects yet\"\n\tdescription=\"You haven't created any projects yet.\"\n>\n\t{#snippet content()}\n\t\t<Button size=\"small\">Create project</Button>\n\t{/snippet}\n</Empty>\n```\n\n### Custom media snippet (default variant)\n```svelte\n<Empty title=\"No results\" description=\"Try adjusting your search filters.\">\n\t{#snippet media()}\n\t\t{@render magnifyingGlassIcon({ class: 'size-10 text-neutral/70' })}\n\t{/snippet}\n</Empty>\n```\n\n### With a note and footer\n```svelte\n<Empty mediaVariant=\"icon\" media={trayIcon} title=\"Inbox empty\">\n\t{#snippet content()}\n\t\t<Button size=\"small\" variant=\"outline\">Refresh</Button>\n\t{/snippet}\n\t{#snippet note()}\n\t\tNeed help? <a href=\"/support\">Contact support</a>\n\t{/snippet}\n</Empty>\n```\n\n### Fully custom composition\n```svelte\n<Empty bordered>\n\t<p>Anything goes here — children replaces the default layout.</p>\n</Empty>\n```\n\n## Accessibility\n\n- The component renders plain, semantically neutral divs; provide meaningful text in title/description\n- Action buttons placed in the content slot keep their own focus and keyboard behavior\n- Links inside the description are visually distinguished by an underline\n\n## Notes\n\n- The header wrapper only renders when media, title, or description is provided; the content wrapper only renders when content or note is provided\n- The note slot reuses the description styling\n- The media sizing selector `[&_svg:not([class*=size-])]:size-*` only applies in the icon variant; pass your own size class on the svg to override it\n\n## Theme Customization\n\nThe Empty component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\n- **root**: Root container (layout, padding, gap, dashed border)\n- **header**: Header wrapper around media/title/description\n- **media**: Media box (mediaVariant + size variants)\n- **title**: Title text\n- **description**: Description and note text\n- **content**: Action area wrapper\n\n### Available Variants\n\n**root**: size ('small' | 'normal' | 'large'), bordered (boolean)\n**header**: size\n**media**: size, mediaVariant ('default' | 'icon')\n**title**: size\n**description**: size\n**content**: size\n\n### Usage Examples\n\n**Local override**:\n```svelte\n<Empty\n\ttheme={{\n\t\troot: { base: 'min-h-64' },\n\t\tmedia: { mediaVariant: { icon: 'bg-primary-muted text-primary rounded-full' } }\n\t}}\n\tmediaVariant=\"icon\"\n\tmedia={folderIcon}\n\ttitle=\"Themed empty state\"\n/>\n```\n\n**Global theme setting**:\n```svelte\n<script>\n\timport { setEmptyTheme } from 'entasis/empty';\n\n\tsetEmptyTheme({\n\t\ttitle: { base: 'font-semibold' },\n\t\troot: { bordered: { true: 'border-2 border-dotted' } }\n\t});\n</script>\n```\n";
+    readonly meter: "\n# Meter Component\n\nThe Meter component visualizes a measurement or progress along a known scale, with support for multiple values, steps, labels, and animations.\n\n## Basic Usage\n\n```svelte\n<Meter value={75} label=\"Progress\" />\n```\n\n## Props\n\n### Core Props\n- **value**: number | MeterStep<T> | Array<MeterStep<T>> (required) - A plain number, one segment, or a stacked set of segments\n  - A number renders a single segment coloured by `color`; its legend label defaults to the number itself\n  - Each segment object: { value: number, label?: string, color?: Colors, icon?: Snippet, position?: 'top' | 'bottom', data?: T }\n- **color**: Colors (default: 'primary') - Color used for a numeric value and as the fallback for segments with no color of their own\n\n- **min**: number (default: 0) - Minimum value\n- **max**: number (default: 100) - Maximum value\n- **size**: 'small' | 'normal' | 'large' - Visual size of the meter\n\n### Display Props\n- **showIndicatorAs**: 'value' | 'percentage' - How to display the indicator label\n\n### Steps\n- **steps**: Array<Step<S>> - Predefined steps/milestones on the meter\n  - Each step: { start: number, end?: number, label: Slot, color: Colors, position?: 'top' | 'bottom', class?: string, labelClass?: string, data?: S }\n\n### Content Slots\n- **label**: Snippet - Custom label\n- **description**: Snippet - Description text\n- **helper**: Snippet - Helper text\n- **header**: Snippet - Custom header\n- **indicator**: string | Snippet - Custom indicator content (no payload); combine with `showIndicatorAs` for the built-in value/percentage text\n\n### Animation Props\n- **stiffness**: number - Spring animation stiffness\n- **damping**: number - Spring animation damping\n- **soft**: number - Softness of animation\n- **precision**: number - Precision of animated values\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Meter>\n\t<Header>\n\t\t<Label />\n\t\t<Description />\n\t</Header>\n\t<Track>\n\t\t<Progress />\n\t\t<Indicator />\n\t\t<Steps />\n\t</Track>\n\t<Helper />\n</Meter>\n```\n\n## Examples\n\n### Simple Progress Bar\n```svelte\n<Meter value={65} />\n```\n\n### Basic Meter\n```svelte\n<Meter value={60} label=\"Completion\" />\n```\n\n### With Label and Description\n```svelte\n<Meter \n\tvalue={75}\n>\n\t{#snippet label()}\n\t\t<span>Progress</span>\n\t{/snippet}\n\t{#snippet description()}\n\t\t<span>75% complete</span>\n\t{/snippet}\n</Meter>\n```\n\n### Different Colors\n```svelte\n<Meter value={30} color=\"danger\" label=\"Low\" />\n<Meter value={60} color=\"warning\" label=\"Medium\" />\n<Meter value={90} color=\"success\" label=\"High\" />\n```\n\n### Multiple Values (Stacked)\n```svelte\n<Meter \n\tvalue={[\n\t\t{ value: 40, color: 'primary', label: 'Used' },\n\t\t{ value: 30, color: 'secondary', label: 'Reserved' }\n\t]}\n\tmax={100}\n/>\n```\n\n### With Steps\n```svelte\n<Meter \n\tvalue={65}\n\tsteps={[\n\t\t{ start: 0, end: 25, label: 'Low', color: 'danger' },\n\t\t{ start: 25, end: 75, label: 'Medium', color: 'warning' },\n\t\t{ start: 75, end: 100, label: 'High', color: 'success' }\n\t]}\n/>\n```\n\n### Show as Percentage\n```svelte\n<Meter \n\tvalue={45}\n\tshowIndicatorAs=\"percentage\"\n/>\n```\n\n### Different Sizes\n```svelte\n<Meter size=\"small\" value={50} />\n<Meter size=\"normal\" value={50} />\n<Meter size=\"large\" value={50} />\n```\n\n### Custom Range\n```svelte\n<Meter \n\tmin={0}\n\tmax={1000}\n\tvalue={350}\n\tlabel=\"Score\"\n/>\n```\n\n### Storage Usage Example\n```svelte\n<script>\n\tlet storage = {\n\t\tused: 45,\n\t\tcached: 20,\n\t\tavailable: 35\n\t};\n</script>\n\n<Meter \n\tvalue={[\n\t\t{ value: storage.used, color: 'primary', label: 'Used' },\n\t\t{ value: storage.cached, color: 'info', label: 'Cached' }\n\t]}\n\tmax={100}\n>\n\t{#snippet header()}\n\t\t<div class=\"flex justify-between\">\n\t\t\t<span>Storage</span>\n\t\t\t<span>{storage.used + storage.cached}GB / 100GB</span>\n\t\t</div>\n\t{/snippet}\n\t{#snippet helper()}\n\t\t{storage.available}GB available\n\t{/snippet}\n</Meter>\n```\n\n### Task Progress\n```svelte\n<script>\n\tlet tasks = {\n\t\tcompleted: 12,\n\t\ttotal: 20\n\t};\n\tlet progress = (tasks.completed / tasks.total) * 100;\n</script>\n\n<Meter \n\tvalue={progress}\n\tcolor=\"success\"\n>\n\t{#snippet label()}\n\t\tTask Progress\n\t{/snippet}\n\t{#snippet description()}\n\t\t{tasks.completed} of {tasks.total} tasks completed\n\t{/snippet}\n</Meter>\n```\n\n### With Custom Indicator\n```svelte\n<!-- indicator is a payload-less slot; use showIndicatorAs for the built-in value/percentage text -->\n<Meter value={75}>\n\t{#snippet indicator()}\n\t\t<div class=\"custom-indicator\">75 / 100</div>\n\t{/snippet}\n</Meter>\n```\n\n### Skill Level Meter\n```svelte\n<Meter \n\tvalue={85}\n\tcolor=\"info\"\n\tsteps={[\n\t\t{ start: 0, end: 30, label: 'Beginner', color: 'danger', position: 'bottom' },\n\t\t{ start: 30, end: 70, label: 'Intermediate', color: 'warning', position: 'bottom' },\n\t\t{ start: 70, end: 100, label: 'Expert', color: 'success', position: 'bottom' }\n\t]}\n>\n\t{#snippet label()}\n\t\tJavaScript Proficiency\n\t{/snippet}\n</Meter>\n```\n\n## Accessibility\n\n- Uses semantic HTML meter/progress elements\n- Labels provide context for screen readers\n- ARIA attributes for current value and range\n- Visual indicators have text alternatives\n\n## Notes\n\n- Values are animated with spring physics for smooth transitions\n- Multiple values stack horizontally\n- Steps provide visual milestones and labels\n- Indicator position can be top or bottom\n- Progress bar fills from left to right\n- The root `color` prop colors the whole meter; a segment's own `color` overrides it\n\n## Theme Customization\n\nThe Meter component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main meter container styles\n- **header**: Header section styles\n- **container**: Progress container styles\n- **label**: Label text styles\n- **helper**: Helper text styles\n- **description**: Description text styles\n- **progress**: Progress bar element styles\n- **track**: Track/background styles\n- **indicator**: Value indicator styles\n- **legend**: Legend container styles\n- **legendItem**: Legend item styles\n- **legendIcon**: Legend icon styles\n- **legendLabel**: Legend label text styles\n- **legendPercentage**: Legend percentage text styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container gap size\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap between elements\n\n**container**:\n- base: Base classes for progress container\n- Variants:\n  - first: boolean - First segment styling (rounded left)\n  - last: boolean - Last segment styling (rounded right)\n\n**label**:\n- base: Base classes for label text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**helper**:\n- base: Base classes for helper text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**progress**:\n- base: Base classes for progress bar\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Bar height\n\n**track**:\n- base: Base classes for track/background\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Track height\n  - labelsPosition: 'top' | 'bottom' | 'both' - Margin based on label position\n\n**indicator**:\n- base: Base classes for value indicator\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - position: 'top' | 'bottom' - Indicator position\n\n**legend**:\n- base: Base classes for legend container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Legend size\n\n**legendItem**:\n- base: Base classes for legend items\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap between elements\n\n**legendIcon**:\n- base: Base classes for legend icons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**legendLabel**:\n- base: Base classes for legend labels\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**legendPercentage**:\n- base: Base classes for legend percentages\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Meter \n  value={75}\n  theme={{\n    root: {\n      base: 'flex flex-col',\n      size: {\n        normal: 'gap-2'\n      }\n    },\n    track: {\n      base: 'rounded-full bg-gray-200',\n      size: {\n        normal: 'h-2'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Progress Bar**:\n```svelte\n<Meter \n  value={60}\n  theme={{\n    progress: {\n      base: 'bg-gradient-to-r from-primary to-secondary',\n      size: {\n        large: 'h-4'\n      }\n    },\n    track: {\n      base: 'bg-gray-100 rounded-full',\n      size: {\n        large: 'h-4'\n      }\n    },\n    indicator: {\n      base: 'text-sm font-semibold',\n      position: {\n        top: 'bottom-full mb-2'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMeterTheme } from '../components/Meter/index.ts';\n  \n  setMeterTheme({\n    root: {\n      base: 'flex flex-col',\n      size: {\n        normal: 'gap-2'\n      }\n    },\n    track: {\n      base: 'rounded-full bg-gray-200',\n      size: {\n        normal: 'h-2'\n      }\n    },\n    progress: {\n      base: 'bg-primary rounded-full'\n    }\n  });\n</script>\n```\n";
+    readonly 'network-indicator': "\n# NetworkIndicator Component\n\nNetworkIndicator is a fixed top loading bar for SvelteKit navigation and explicit async work. Mount one instance near the root layout. It shows automatically during SvelteKit route transitions, can be driven by a controlled `loading` prop, and exposes imperative helpers for request lifecycles.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<!-- +layout.svelte -->\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n\n<NetworkIndicator />\n\n{@render children()}\n```\n\n## Props\n\n- **loading**: boolean = false\n  - Controlled visibility. Use this when the owner already has request state or when rendering examples/previews.\n- **variant**: 'bar' | 'trail' | 'trail-bounce' = 'bar'\n  - `bar` progressively grows one indicator. `trail` renders one randomly sized moving segment at a time. `trail-bounce` sends that random trail fully off one edge, then returns from the opposite edge.\n- **trailGap**: number = 0\n  - Pause between trail passes in milliseconds. Only applies to `variant=\"trail\"`.\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' = 'neutral'\n  - Applies the semantic color token to the bar.\n- **height**: number = 3\n  - Height in pixels. Keep most navigation indicators between 2 and 6.\n- Animation duration and easing come from the `motion` theme slot — `theme={{ motion: { duration: 450, easing: 'expoOut' } }}` — not from props; see Motion below.\n- **label**: string = 'Loading'\n  - Accessible label for the indeterminate `role=\"progressbar\"`.\n- **ref**: HTMLDivElement | null\n  - Bindable root element reference while the indicator is visible.\n- **class**: string\n  - Additional classes for the root bar.\n- **theme**: NetworkIndicatorThemeProps\n  - Theme override for the root bar.\n\n## Helper API\n\n```ts\nimport {\n\thideNetworkIndicator,\n\tshowNetworkIndicator,\n\ttoggleNetworkIndicator\n} from 'entasis/network-indicator';\n```\n\nPrefer `showNetworkIndicator()` and `hideNetworkIndicator()` for async work. `toggleNetworkIndicator()` is available for simple demos or manual toggles, but it is easier to desynchronize in request lifecycles.\n\n## Patterns\n\n### Controlled Loading\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n\n\tlet loading = $state(false);\n</script>\n\n<NetworkIndicator {loading} color=\"primary\" label=\"Saving changes\" />\n```\n\n### Async Request\n\n```svelte\n<script lang=\"ts\">\n\timport { Button } from 'entasis/button';\n\timport {\n\t\thideNetworkIndicator,\n\t\tshowNetworkIndicator\n\t} from 'entasis/network-indicator';\n\n\tasync function save() {\n\t\tshowNetworkIndicator();\n\t\ttry {\n\t\t\tawait fetch('/api/save', { method: 'POST' });\n\t\t} finally {\n\t\t\thideNetworkIndicator();\n\t\t}\n\t}\n</script>\n\n<Button onclick={save}>Save</Button>\n```\n\n### Color Variations\n\n```svelte\n<NetworkIndicator loading color=\"primary\" />\n<NetworkIndicator loading color=\"success\" />\n<NetworkIndicator loading color=\"warning\" />\n<NetworkIndicator loading color=\"danger\" />\n```\n\n### Trail Variant\n\n```svelte\n<NetworkIndicator loading variant=\"trail\" color=\"primary\" theme={{ motion: { duration: 650 } }} trailGap={0} />\n<NetworkIndicator loading variant=\"trail\" color=\"success\" height={5} theme={{ motion: { duration: 450 } }} trailGap={120} />\n<NetworkIndicator loading variant=\"trail-bounce\" color=\"info\" theme={{ motion: { duration: 700 } }} trailGap={80} />\n```\n\n### Height Variations\n\n```svelte\n<NetworkIndicator loading height={2} />\n<NetworkIndicator loading height={4} color=\"primary\" />\n<NetworkIndicator loading height={6} color=\"info\" />\n```\n\n### Motion Variations\n\n```svelte\n<NetworkIndicator loading theme={{ motion: { duration: 300, easing: 'cubicInOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 450, easing: 'expoOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 500, easing: 'backOut' } }} />\n```\n\n### Theme Override\n\n```svelte\n<NetworkIndicator\n\tloading\n\tcolor=\"success\"\n\theight={5}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'ui-network-indicator fixed top-0 left-0 w-full z-[9999] origin-left rounded-none lift-4'\n\t\t}\n\t}}\n/>\n```\n\n## Theme\n\nThe theme has two parts:\n\n- **root**: the fixed top bar.\n  - `base`: positioning, origin, radius, z-index, and shared bar classes.\n  - `variant`: `bar`, `trail`, or `trail-bounce` container styling.\n  - `color`: semantic color variants.\n- **segment**: trail segment styling.\n  - `base`: segment positioning, radius, opacity, shadow, and transform hints.\n  - `color`: semantic color variants for each trail segment.\n\nThe default root base includes `ui-network-indicator`; keep that class if overriding the base because `toggleNetworkIndicator()` uses it to read current state.\n\n## Accessibility\n\nThe visible bar renders `role=\"progressbar\"` without a value because progress is indeterminate. Use a specific `label` when the loading context matters, such as \"Uploading files\" or \"Saving changes\". If screen readers need richer lifecycle announcements, pair the indicator with app-level live region text.\n\n## Motion\n\n- **motion** theme slot, keyed by `variant`: one growth step of the `bar` loop (`slow`), or\n  one pass of the `trail` / `trail-bounce` variants (the `slower` token, 500ms). Only `duration` / `easing` are read.\n- Ladder: `<Theme components={{ networkIndicator: { motion } }}>` →\n  `setNetworkIndicatorTheme({ motion })` → `theme={{ motion: { duration, easing } }}`.\n- A resolved duration of 0 (reduced motion) holds the indicator still instead of looping.\n";
+    readonly 'progress-circle': "\n# ProgressCircle Component\n\nProgressCircle is a compact determinate circular progress indicator with a visible track and an arc that animates when the value changes.\n\n## Basic Usage\n\n```svelte\n<ProgressCircle />\n```\n\n## Props\n\n- **value**: number (default: 0)\n  - Progress value from 0 to 100. Values outside the range are clamped.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Selects semantic component geometry.\n- **diameter**: number\n  - Optional explicit circle diameter in pixels.\n- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: 'primary')\n  - Applies a theme color token to the animated arc.\n- **label**: string (default: 'Progress')\n  - Accessible label used when the component is not decorative.\n- **decorative**: boolean (default: false)\n  - Removes progress semantics and hides the element from assistive technology.\n- **class**: string\n  - Additional classes for the root element.\n- **theme**: ProgressCircleThemeProps\n  - Per-instance theme overrides.\n\n## Examples\n\n```svelte\n<ProgressCircle size=\"small\" />\n<ProgressCircle value={45} color=\"danger\" />\n<ProgressCircle value={72} diameter={56} color=\"success\" />\n```\n\n## Accessibility\n\n- The component renders `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` by default.\n- Use `label` to provide a specific accessible name.\n- Use `decorative` when nearby UI already announces the loading state.\n\n## Theme Parts\n\n- **root**: inline wrapper and color/size token host\n- **svg**: animated SVG element\n- **track**: background circle\n- **indicator**: active arc\n";
+    readonly skeleton: "\n# Skeleton Component\n\nThe Skeleton component is a loading placeholder element that displays a pulsing animation to indicate that content is being loaded. It provides a visual feedback mechanism while data is being fetched or processed.\n\n## Basic Usage\n\n```svelte\n<Skeleton />\n```\n\n## Props\n\n### Core Props\n- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: 'neutral')\n  - Determines the color scheme of the skeleton\n  - neutral: Subtle achromatic fill (default)\n  - primary, secondary, danger, success, warning, info: Semantic colors\n\n### Styling Props\n- **class**: string - Additional CSS classes for the skeleton container\n- **theme**: ComponentTheme - Custom theme overrides\n\n### Content Props\n- **children**: Snippet - Optional content to display inside the skeleton\n\n## Structure\n\n```\n<Skeleton>\n\t<Children />    <!-- Optional content -->\n</Skeleton>\n```\n\n## Examples\n\n### Basic Skeleton\n```svelte\n<Skeleton />\n```\n\n### Skeleton with Different Colors\n```svelte\n<div class=\"space-y-2\">\n\t<Skeleton color=\"primary\" class=\"h-4 w-full\" />\n\t<Skeleton color=\"danger\" class=\"h-4 w-full\" />\n\t<Skeleton color=\"success\" class=\"h-4 w-full\" />\n\t<Skeleton color=\"warning\" class=\"h-4 w-full\" />\n\t<Skeleton color=\"info\" class=\"h-4 w-full\" />\n</div>\n```\n\n### Skeleton with Custom Size\n```svelte\n<Skeleton class=\"h-12 w-full\" />\n```\n\n### Skeleton with Custom Width\n```svelte\n<Skeleton class=\"h-4 w-3/4\" />\n```\n\n### Circular Skeleton (for avatars)\n```svelte\n<Skeleton class=\"h-12 w-12 rounded-full\" />\n```\n\n### Text Line Skeletons\n```svelte\n<div class=\"space-y-2\">\n\t<Skeleton class=\"h-4 w-full\" />\n\t<Skeleton class=\"h-4 w-5/6\" />\n\t<Skeleton class=\"h-4 w-4/6\" />\n</div>\n```\n\n### Card Skeleton\n```svelte\n<div class=\"space-y-4\">\n\t<Skeleton class=\"h-48 w-full rounded-lg\" />\n\t<div class=\"space-y-2\">\n\t\t<Skeleton class=\"h-4 w-full\" />\n\t\t<Skeleton class=\"h-4 w-3/4\" />\n\t</div>\n</div>\n```\n\n### Table Row Skeleton\n```svelte\n<div class=\"flex gap-4\">\n\t<Skeleton class=\"h-10 w-10 rounded\" />\n\t<Skeleton class=\"h-10 flex-1\" />\n\t<Skeleton class=\"h-10 w-24\" />\n</div>\n```\n\n## Styling\n\nThe skeleton uses `animate-pulse` for the pulsing animation and supports color variants. You can customize the appearance by:\n\n1. Using the `color` prop to change the background color (default: 'neutral')\n2. Adding custom classes via the `class` prop\n3. Overriding the theme via the `theme` prop\n4. Using Tailwind utility classes for size, shape, and spacing\n\n## Common Patterns\n\n### Loading State Pattern\n```svelte\n{#if loading}\n\t<Skeleton class=\"h-64 w-full\" />\n{:else}\n\t<p>{article.body}</p>\n{/if}\n```\n\n### Multiple Skeletons\n```svelte\n<div class=\"space-y-4\">\n\t{#each { length: 3 } as _}\n\t\t<Skeleton class=\"h-20 w-full\" />\n\t{/each}\n</div>\n```\n\n## Accessibility\n\n- Skeletons are purely visual loading indicators\n- Consider adding `aria-label=\"Loading\"` or `aria-busy=\"true\"` for screen readers\n- Ensure skeletons match the approximate size and shape of the content being loaded\n- Replace skeletons with actual content as soon as data is available\n\n## Notes\n\n- The skeleton uses CSS animation (`animate-pulse`) which is provided by Tailwind CSS\n- The default color is 'neutral' which provides high visibility\n- Color variants use the theme's color system and adapt to your theme configuration\n- Skeletons should be replaced with actual content once loading is complete\n- Consider using skeletons that match the layout of the content being loaded for better UX\n- Use semantic colors (danger, success, warning) when the skeleton represents specific states\n\n## Theme Customization\n\nThe Skeleton component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main skeleton element styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for skeleton element (includes animation)\n- Variants:\n  - color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' - Background color\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Skeleton \n  theme={{\n    root: {\n      base: 'rounded-lg',\n      color: {\n        primary: 'bg-primary/30'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Animation**:\n```svelte\n<Skeleton \n  theme={{\n    root: {\n      base: 'animate-pulse rounded-md bg-linear-to-r from-neutral/10 via-neutral/20 to-neutral/10',\n      color: {\n        neutral: 'bg-transparent'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setSkeletonTheme } from '../components/Skeleton/index.ts';\n  \n  setSkeletonTheme({\n    root: {\n      base: 'animate-pulse rounded-md',\n      color: {\n        neutral: 'bg-neutral/15',\n        primary: 'bg-primary/20'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly spinner: "\n# Spinner Component\n\nThe Spinner component is a standalone indeterminate loading indicator. It inherits `spinnerVariant` from Theme and allows a per-instance override. The `default` variant uses the global `.ui-spinner` engine from the Entasis Tailwind plugin.\n\n## Basic Usage\n\n```svelte\n<Spinner />\n```\n\n## Props\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Controls indicator size and label typography.\n- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: 'neutral')\n  - Applies a theme color token to the indicator.\n- **variant**: 'default' | 'grid' | 'pulse' | 'puff' | 'lines' | 'circles' (default: Theme spinnerVariant, then 'default')\n  - Selects the indicator animation and overrides the global Theme setting.\n- **text**: string | Snippet\n  - Optional visible loading text rendered after the indicator.\n- **children**: Snippet\n  - Rich visible label content. When provided, it replaces `text`.\n- **label**: string (default: 'Loading')\n  - Accessible label used when no visible text is rendered.\n- **decorative**: boolean (default: false)\n  - Removes status semantics and hides the spinner from assistive technology.\n- **class**: string\n  - Additional classes for the root element.\n- **theme**: SpinnerThemeProps\n  - Per-instance theme overrides.\n\n## Examples\n\n### Icon-only Spinner\n\n```svelte\n<Spinner label=\"Loading results\" />\n```\n\n### Spinner With Text\n\n```svelte\n<Spinner text=\"Loading results\" />\n```\n\n### Indicator Variants\n\n```svelte\n<Spinner variant=\"grid\" />\n<Spinner variant=\"pulse\" />\n<Spinner variant=\"puff\" />\n<Spinner variant=\"lines\" />\n<Spinner variant=\"circles\" />\n```\n\n### Global Default\n\n```svelte\n<Theme spinnerVariant=\"pulse\">\n\t<Spinner />\n</Theme>\n```\n\n### Semantic Colors\n\n```svelte\n<div class=\"flex items-center gap-3\">\n\t<Spinner color=\"primary\" />\n\t<Spinner color=\"success\" />\n\t<Spinner color=\"danger\" />\n</div>\n```\n\n### Decorative Spinner\n\n```svelte\n<button aria-busy=\"true\">\n\t<Spinner decorative size=\"small\" />\n\tSaving\n</button>\n```\n\n## Accessibility\n\n- The component renders `role=\"status\"` and `aria-live=\"polite\"` by default.\n- When no visible text is provided, `label` becomes the accessible name.\n- Use `decorative` when another nearby element already announces the loading state.\n\n## Theme Customization\n\nThe theme object contains three parts:\n\n- **root**: root inline-flex wrapper\n- **indicator**: animated indicator element with size and variant classes\n- **label**: visible text wrapper\n\n```svelte\n<script>\n\timport { setSpinnerTheme } from 'entasis/spinner';\n\n\tsetSpinnerTheme({\n\t\tindicator: {\n\t\t\tsize: {\n\t\t\t\tnormal: '[--spinner-size:1.5rem]'\n\t\t\t}\n\t\t}\n\t});\n</script>\n```\n";
+    readonly 'spinner-text': "\n# SpinnerText Component\n\nSpinnerText combines the existing Spinner with a stable-width sequence of loading messages. Messages cycle on a configurable delay and transition vertically or through a left-to-right reveal without shifting surrounding layout.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<SpinnerText\n\ttexts={['Reading files', 'Building context', 'Preparing answer']}\n\tdelay={1800}\n\tshimmer\n/>\n```\n\n## Props\n\n- **texts**: `readonly string[]` (required) - Messages displayed in sequence. The first message is rendered during SSR.\n- **delay**: `number` (default: `2200`) - Milliseconds between message changes. Zero, negative, and non-finite values pause cycling.\n- **transition**: `'vertical' | 'reveal'` (default: `'vertical'`) - Moves the outgoing message down while the next enters from above, or replaces both through opposing left-to-right clip reveals.\n- **shimmer**: `boolean` (default: `false`) - Applies the Entasis shimmer utility to the active message.\n- **showSpinner**: `boolean` (default: `true`) - Shows or hides the leading Spinner.\n- **spinnerVariant**: `'default' | 'grid' | 'pulse' | 'puff' | 'lines' | 'circles'` (default: Theme `spinnerVariant`, then `'default'`) - Overrides the global spinner animation for this instance.\n- **spinner**: `Snippet<[SpinnerTextSpinnerPayload]>` - Replaces the default visual spinner. Receives the resolved `color`, `size`, and `variant`.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Controls spinner dimensions, gap, text size, and line height.\n- **color**: `Colors` (default: `'neutral'`) - Semantic color applied to both spinner and text.\n- **label**: `string` (default: `'Loading'`) - Accessible fallback when `texts` is empty.\n- **ref**: `HTMLElement | null` (bindable) - Root status element.\n- **class**: `string` - Additional root classes.\n- **theme**: `SpinnerTextThemeProps` - Per-instance theme overrides.\n\nStandard Svelte attachments are spread onto the root status element.\n\n## Custom spinner\n\n```svelte\n<script lang=\"ts\">\n\timport { Spinner } from 'entasis/spinner';\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n\n<SpinnerText texts={['Thinking', 'Composing']} color=\"primary\">\n\t{#snippet spinner({ size, color })}\n\t\t<Spinner variant=\"circles\" decorative {size} {color} />\n\t{/snippet}\n</SpinnerText>\n```\n\n## Behavior\n\n- A root attachment owns the interval and restarts it when `texts` length or `delay` changes.\n- One or zero messages do not create an interval.\n- All messages occupy the same hidden CSS grid cell, so the component reserves the width of its longest message and does not resize on every transition.\n- The vertical transition uses the design system's configured duration and easing.\n- The reveal transition clips the outgoing text from the left while revealing the incoming text from the left.\n- Vertical uses 1.5 times the configured theme duration; reveal uses 2.5 times that duration. Both use the configured easing.\n- The default Spinner is visually reduced one step relative to the message line height. Custom spinner snippets retain full control over their dimensions.\n- Shimmer behavior remains owned by the existing global shimmer utility.\n- The default indicator delegates to Spinner and remains compatible with global spinner theme configuration.\n\n## Accessibility\n\n- The root uses `role=\"status\"`, `aria-live=\"polite\"`, and `aria-atomic=\"true\"`.\n- Visual transition layers and the spinner are hidden from assistive technology.\n- A single screen-reader-only message changes with the active text, avoiding duplicate announcements while outgoing and incoming visual layers overlap.\n- When `texts` is empty, `label` supplies the accessible status name.\n\n## Theme parts\n\n- **root** - Inline status wrapper, semantic color, and size-specific gap.\n- **spinner** - Default or custom spinner container.\n- **viewport** - Clipped text transition viewport.\n- **sizer** - Hidden grid that reserves the longest message width.\n- **sizerItem** - Individual hidden sizing message.\n- **message** - Active visual message and optional shimmer state.\n\n## Motion\n\n- **motion** theme slot, keyed by `mode`: the `vertical` slide runs on `slow`, the `reveal`\n  wipe on `slower`. Only `duration` / `easing` are read; the geometry is fixed.\n- Ladder: `<Theme components={{ spinnerText: { motion } }}>` → `setSpinnerTextTheme({ motion })`\n  → `theme.motion`. Reduced motion collapses it to 0 (the text swaps instantly).\n";
+    readonly toast: "\nThe toast function displays non-blocking notification messages to the user. It provides color-based methods (primary, secondary, success, warning, danger, info, neutral) that each return a Toast instance.\n\n\n**Usage:**\n```typescript\nimport { toast } from 'entasis/toast';\n\n// Basic toast with a color variant\ntoast.success({\n  title: 'Success!',\n  description: 'Your changes have been saved.',\n  duration: 4000\n});\n\n// Toast with custom position\ntoast.danger({\n  title: 'Error',\n  description: 'Something went wrong.',\n  position: 'top-center',\n  duration: 5000\n});\n\n// Toast with loading state\ntoast.info({\n  title: 'Processing',\n  description: 'Please wait...',\n  loading: true,\n  duration: false // Don't auto-close\n});\n\n// Toast with callbacks\ntoast.warning({\n  title: 'Warning',\n  description: 'This action cannot be undone.',\n  duration: 6000,\n  onAfterOpen: (payload) => console.log('Toast opened:', payload.id),\n  onDismiss: (payload) => console.log('Toast dismissed:', payload.id),\n  onAutoDismiss: (payload) => console.log('Toast timed out:', payload.id)\n});\n```\n\n**Available Color Methods:**\n- `toast.primary(options)` - Primary color variant\n- `toast.secondary(options)` - Secondary color variant\n- `toast.success(options)` - Success/green variant\n- `toast.warning(options)` - Warning/yellow variant\n- `toast.danger(options)` - Danger/red variant\n- `toast.info(options)` - Info/blue variant\n- `toast.neutral(options)` - Neutral color variant\n\n**Parameters (all optional):**\n- `title` (Slot or string): The toast title text\n- `description` (Slot or string) optional: The toast description/message text\n- `position` (ToastPosition, optional): Position on screen. Options: `'top-left'`, `'top-right'`, `'top-center'`, `'bottom-left'`, `'bottom-right'`, `'bottom-center'`, plus `'banner-top'` / `'banner-bottom'` which render a full screen-width bar flush to the top/bottom edge. Default: `'bottom-right'`. Swipe axis follows the anchor: left/right corners swipe horizontally, center + banner positions swipe vertically.\n- `duration` (number | false, optional): Time in milliseconds before auto-closing. Set to `false` to disable auto-close. Default: 4000ms\n- `closeOnClick` (boolean, optional): If true, clicking the toast closes it. Default: inherited from Toaster\n- `showCloseIcon` (boolean, optional): If true, shows a close button. Default: inherited from Toaster\n- `dismissible` (boolean, optional): If false, prevents user from dismissing. Default: inherited from Toaster\n- `richColors` (boolean, optional): If true, uses richer color variants. Default: inherited from Toaster\n- `loading` (boolean, optional): If true, shows a loading spinner using Theme's global `spinnerVariant`\n- `progress` (boolean, optional): If true, shows a bar counting down the remaining duration (pauses on hover). Only appears when the toast has a finite `duration`. Can also be set on `<Toaster progress />` as a default.\n- `swipeToDismiss` (boolean, optional, default true): Drag the toast toward its anchored screen edge (down for bottom-*, up for top-*) past a threshold to dismiss it; dragging the other way rubber-bands. A manual dismiss fires `onDismiss`, not `onAutoDismiss`.\n- `closeOnClick` (boolean, optional, default false): Dismiss when the toast body is clicked. Off by default now that swipe-to-dismiss exists; the close icon and swipe are the primary dismiss affordances.\n- `size` (Sizes, optional): Size of the toast — scales padding, corner radius, type and icon. Options: `'small'`, `'normal'`, `'large'` (default `'normal'`). Can be defaulted for all toasts with `<Toaster size=\"...\" />`.\n- `prefix` (Slot | false, optional): Content before the text. `false` hides the default icon\n- `suffix` (Slot, optional): Content to display after the toast text\n- `actions` (ToastAction[], optional): Buttons rendered inside the toast. `ToastAction` is full Button props plus `content` (the label) and `dismiss` (default true — clicking dismisses the toast). Each button's `onclick` runs with the native MouseEvent, then the toast fires `onDismiss`.\n- `closeIcon` (Slot, optional): Custom close button component\n- `icon` (string, optional): Icon name to display before the toast text\n- `important` (boolean, optional): Uses `role=\"alert\"` + assertive announcements for screen readers\n- `transition` (FSOProps, optional): Enter/exit transition override for this toast\n- `theme` (ToastThemeProps, optional): Theme overrides for this toast alone, layered over the `<Toaster theme>` object (`base` classes are appended, so the per-toast ones win)\n- `id` (string, optional): Custom ID for the toast. Auto-generated if not provided\n- `onAfterOpen` (function, optional): Called once the toast finishes entering: `(payload: Toast) => void`\n- `onDismiss` (function, optional): Called on manual dismiss (close button, an action, or `toast.remove()`). Not called on timeout: `(payload: Toast) => void`\n- `onAutoDismiss` (function, optional): Called only when the toast times out after `duration`. Put deferred irreversible work here; it never runs if the toast is dismissed first: `(payload: Toast) => void`\n\n### Undo / deferred-commit pattern\n\nRemove the item from the UI immediately, defer the real irreversible action to `onAutoDismiss`, and offer an `Undo` action. Undo dismisses the toast manually, so `onAutoDismiss` never fires:\n\n```ts\nfunction deleteItemWithUndo(item) {\n  removeFromUI(item);                       // optimistic\n  toast.neutral({\n    title: `Deleted \"${item.name}\"`,\n    duration: 5000,\n    actions: [{ content: 'Undo', onclick: () => restore(item) }],\n    onAutoDismiss: () => commitDelete(item)   // runs only if not undone\n  });\n}\n```\n\n**Mounting order:** `toast()` never throws when no `<Toaster />` is mounted yet — the toast is queued and shown by the first Toaster that mounts. In development, a single `console.warn` reports a queue that is still waiting a tick later. Dismissing a queued toast drops it from the queue, and a `toast()` call made during SSR is discarded instead of queued.\n\n**Returns:**\nA `Toast` instance that you can use to programmatically control the root:\n- `toast.remove()` - Remove the toast manually\n- `toast.id` - Unique identifier\n- `toast.opts` - Toast options\n\n**Notes:**\n- Toasts are non-blocking and don't prevent user interaction\n- The toaster is a `role=\"region\"` landmark named \"Notifications\" (not a `<dialog>`); pressing F6 anywhere moves focus into it. Each toast is `role=\"status\"`, or `role=\"alert\"` when `important`\n- Toasts stacked away behind the front one are `inert` (rather than `aria-hidden`), so they take no clicks or tab stops until they surface\n- Multiple toasts can be displayed simultaneously and will stack based on position\n- Toasts pause their auto-close timer when hovered\n- Toasts can be dismissed by clicking the close icon, clicking the toast (if `closeOnClick` is true), or automatically after the duration expires\n\n## Theme Customization\n\nThe Toast component uses a theme object that can be customized using the `theme` prop in toast options or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Enter/exit transition preset, keyed by `position` (each toast flies in from the\n  edge it is pinned to). Takes `in` / `out` FSO params plus a `duration` / `easing` motion\n  token; overrides ladder `<Theme components={{ toast }}>` → `setToastTheme` → `theme.motion`\n  → the Toaster's `transition` prop → a toast's own `transition`\n- **root**: Main toast container styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix content styles\n- **content**: Content wrapper styles\n- **closeIcon**: Close button icon styles\n- **title**: Title text styles\n- **description**: Description text styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for toast container\n- Variants:\n  - richColors: boolean - Rich color variant styling\n  - color: Color variants\n  - size: 'small' | 'normal' | 'large' - Toast size\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - color: Color variants\n  - richColors: boolean - Rich color variant styling\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content size\n  - color: Color variants\n  - richColors: boolean - Rich color variant styling\n\n**content**:\n- base: Base classes for content wrapper\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content size\n  - color: Color variants\n  - richColors: boolean - Rich color variant styling\n\n**closeIcon**:\n- base: Base classes for close button\n- Variants:\n  - richColors: boolean - Rich color variant styling\n  - color: Color variants\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - color: Color variants\n  - richColors: boolean - Rich color variant styling\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - color: Color variants\n  - richColors: boolean - Rich color variant styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```typescript\nimport { toast } from 'entasis/toast';\n\ntoast.success({\n  title: 'Success',\n  description: 'Operation completed',\n  theme: {\n    root: {\n      base: 'rounded-xl raised-5',\n      size: {\n        normal: 'px-4 py-3'\n      }\n    }\n  }\n});\n```\n\n**Custom Toast Styling**:\n```typescript\ntoast.danger({\n  title: 'Error',\n  description: 'Something went wrong',\n  theme: {\n    root: {\n      base: 'border-2 border-red-500',\n      richColors: {\n        true: 'bg-red-50 border-red-500'\n      }\n    },\n    title: {\n      base: 'font-bold text-red-900'\n    }\n  }\n});\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setToastTheme } from '../components/Toast/index.ts';\n  \n  setToastTheme({\n    root: {\n      base: 'rounded-lg raised-4',\n      size: {\n        normal: 'px-3 py-2'\n      }\n    },\n    title: {\n      base: 'font-semibold'\n    }\n  });\n</script>\n```\n";
+    readonly accordion: "\n# Accordion Component\n\nThe Accordion component provides an interactive collapsible container for organizing content. It supports single or multiple expanded items, various visual styles, and customizable transitions.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n</script>\n\n<Accordion \n\titems={[\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: Array<Item> (bindable) - Array of accordion items to display\n- **value**: string[] (bindable) - Expanded item ids\n- **defaultValue**: string[] - Initially expanded item ids when value is omitted\n- **titleKey**: string - Key to extract title from items (default: 'title')\n- **contentKey**: string - Key to extract content from items (default: 'content')\n- **descriptionKey**: string - Key to extract description from items (default: 'description')\n\n### Layout Props\n- **variant**: 'classic' | 'card' | 'outline' (default: 'classic')\n  - classic: flat rows separated by a muted border (nova/shadcn look) — the title underlines on hover, the chevron rotates\n  - card: the rows wrapped in a raised surface (rows inset with px-4)\n  - outline: the rows wrapped in a muted border (rows inset with px-4)\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Scales typography only: title, description and content text sizes plus the icon size. Spacing is controlled by density.\n\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')\n  - Scales paddings and gaps only: trigger vertical padding, content bottom padding, header gap, and the gap between splitted items. Combine freely with size.\n\n- **splitted**: boolean (default: false) - Breaks the list into one surface per item with a gap: each item gets its own raised card (card), its own border (outline), or its own underline (classic)\n\n### Event Props\n- **onValueChange**: (value: string[]) => void - Called once when expanded item ids change\n- **onItemOpenChange**: (options: { item: Item; index: number; open: boolean }) => void - Called after one item's open state changes\n\n### Slot Props\n- **title**: Snippet - Custom title rendering\n- **description**: Snippet - Custom description rendering\n- **content**: Snippet - Custom content rendering\n- **icon**: Snippet - Custom icon rendering\n\n### Behavior Props\n- **oneAtATime**: boolean (default: true) - Whether only one item can be expanded at a time\n\n### Visual Props\n- **icon**: 'chevron' | 'plus-minus' | 'none' | Snippet (default: 'chevron')\n  - chevron: Down chevron that rotates\n  - plus-minus: Plus/minus glyph\n  - none: Hide the indicator\n  - Custom snippet for custom icons\n\n- **transition**: ResponsiveProps<FSOProps> - Slide transition override for the expanded content; beats the `motion` theme slot\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Accordion>\n\t<AccordionItem>\n\t\t<AccordionTrigger>\n\t\t\t<AccordionHeader>\n\t\t\t\t<Title />\n\t\t\t\t<Description />\n\t\t\t</AccordionHeader>\n\t\t\t<Icon />\n\t\t</AccordionTrigger>\n\t\t<AccordionContent />\n\t</AccordionItem>\n</Accordion>\n```\n\n## Examples\n\n### Basic Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'What is Svelte?', content: 'Svelte is a radical new approach to building user interfaces.' },\n\t\t{ title: 'Why use Svelte?', content: 'Svelte offers better performance and smaller bundle sizes.' }\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Multiple Expanded Items\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t];\n</script>\n\n<Accordion \n\t{items}\n\toneAtATime={false}\n/>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ \n\t\t\ttitle: 'Getting Started',\n\t\t\tdescription: 'Learn the basics',\n\t\t\tcontent: 'Start by installing Svelte...'\n\t\t}\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Different Variants\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Item 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Default flat look -->\n<Accordion {items} />\n\n<!-- Raised card container -->\n<Accordion variant=\"card\" {items} />\n\n<!-- Bordered container -->\n<Accordion variant=\"outline\" {items} />\n\n<!-- One surface per item -->\n<Accordion variant=\"card\" splitted {items} />\n```\n\n### Different Icons\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\timport { starIcon } from 'entasis/icons/star';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Chevron icon -->\n<Accordion icon=\"chevron\" {items} />\n\n<!-- Plus/minus icon -->\n<Accordion icon=\"plus-minus\" {items} />\n\n<!-- Custom icon (a snippet, no payload) -->\n<Accordion {items}>\n\t{#snippet icon()}\n\t\t{@render starIcon()}\n\t{/snippet}\n</Accordion>\n```\n\n### With Custom Keys\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet faqs = [\n\t\t{ question: 'How to install?', answer: 'Run npm install...' }\n\t];\n</script>\n\n<Accordion \n\titems={faqs}\n\ttitleKey=\"question\"\n\tcontentKey=\"answer\"\n/>\n```\n\n### With Event Handler\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n\t\n\tfunction handleToggle({ item, index, open }) {\n\t\tconsole.log(`Item ${item.title} at index ${index} is now ${open ? 'open' : 'closed'}`);\n\t}\n</script>\n\n<Accordion \n\t{items}\n\tonItemOpenChange={handleToggle}\n/>\n```\n\n### Custom Content Rendering\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<Accordion {items}>\n\t{#snippet title({ item })}\n\t\t<strong>{item.title}</strong>\n\t{/snippet}\n\t\n\t{#snippet content({ item })}\n\t\t<div class=\"p-4\">\n\t\t\t{@html item.content}\n\t\t</div>\n\t{/snippet}\n</Accordion>\n```\n\n## Accessibility\n\n- Automatically handles ARIA attributes\n- Keyboard navigation support (Enter/Space to toggle)\n- Focus management for expanded items\n- Screen reader friendly with proper roles\n\n## Notes\n\n- Items are automatically assigned IDs if not provided\n- Uses Melt UI's Accordion builder for accessibility\n- Smooth transitions with the library's themed slide transition\n- Supports bindable items for dynamic updates\n\n## Theme Customization\n\nThe Accordion component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main accordion container styles\n- **item**: Individual accordion item styles\n- **trigger**: Accordion trigger button styles\n- **header**: Header section styles (contains title and description)\n- **title**: Title text styles\n- **description**: Description text styles\n- **icon**: Expand/collapse icon styles\n- **content**: Content panel styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between splitted items (via compounds)\n  - variant: 'classic' | 'card' | 'outline' - Container surface (raised / bordered / none)\n  - splitted: boolean - Gap layout for per-item surfaces\n\n**item**:\n- base: Base classes for individual items (muted separator when not splitted; own surface when splitted)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Item size\n  - density: 'compact' | 'normal' | 'comfortable'\n  - variant: 'classic' | 'card' | 'outline' - Per-item surface when splitted\n  - splitted: boolean\n  - expanded: boolean - Expanded state styling\n\n**trigger**:\n- base: Base classes for trigger button\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Vertical padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between title and description\n\n**title**:\n- base: Base classes for title text (underlines on trigger hover)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**icon**:\n- base: Base classes for expand/collapse icon (muted, rotates for the chevron)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content panel\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Bottom padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n### Usage Examples\n\n**Bordered look (composition)**:\n```svelte\n<Accordion\n  items={items}\n  class=\"rounded-lg border border-neutral-muted\"\n  theme={{\n    item: { base: 'px-4' },\n    content: { base: 'px-4' }\n  }}\n/>\n```\n\n**Basic Theme Override**:\n```svelte\n<Accordion\n  items={items}\n  theme={{\n    trigger: {\n      base: 'state-layer'\n    },\n    item: {\n      expanded: {\n        true: 'bg-primary/5'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAccordionTheme } from '../components/Accordion/index.ts';\n\n  setAccordionTheme({\n    trigger: {\n      base: 'transition-colors',\n      density: {\n        normal: 'px-4 py-3'\n      }\n    }\n  });\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: a slide keyed by `axis` (`y` by default, `x` for a horizontal list).\n- Takes `in` / `out` slide params plus a `duration` / `easing` motion token.\n- Ladder: `<Theme components={{ accordion: { motion } }}>` → `setAccordionTheme({ motion })` →\n  `theme.motion` → the `transition` prop. Reduced motion collapses it to 0.\n";
+    readonly collapsible: "\n# Collapsible Component\n\nThe Collapsible component provides a way to show and hide content with a toggle trigger. It supports both controlled and uncontrolled modes, keyboard navigation, and smooth slide transitions.\n\n## Basic Usage\n\n```svelte\n<Collapsible>\n\t{#snippet trigger()}\n\t\tClick to expand\n\t{/snippet}\n\tThis content will be shown when expanded.\n</Collapsible>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (optional)\n  - Current bindable disclosure state.\n\n- **defaultOpen**: boolean (default: false)\n  - Initial open state when `open` is omitted.\n  - Ignored when `open` prop is provided.\n\n- **disabled**: boolean (default: false)\n  - Disables the collapsible trigger and prevents toggling.\n  - Applies opacity styling and removes pointer events.\n\n- **onOpenChange**: (open: boolean) => void (optional)\n  - Callback fired once after a component-owned open state change.\n  - Receives the new open state as parameter.\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Controls padding and text size of trigger and content.\n  - small: Reduced padding (py-2 px-2) and text-sm\n  - normal: Standard padding (py-3 px-4) and text-base\n  - large: Increased padding (py-4 px-6) and text-lg\n\n- **icon**: 'chevron' | 'plus-minus' | 'none' | Snippet (default: 'chevron')\n  - Disclosure indicator rendered in the trigger.\n  - chevron: rotating chevron; plus-minus: plus/minus glyph; none: no indicator.\n  - Pass a snippet (it receives `{ open }`) for a custom icon.\n\n### Content Props (Slots)\n- **trigger**: Snippet - Content rendered in the toggle button\n  - Required for the component to function\n  - Typically contains text, icons, or both\n\n- **children**: Snippet<{ open: boolean }> - Content shown when expanded\n  - Rendered inside the content container with a slide transition\n  - Receives the current `open` state as a payload\n\n### Advanced Props\n- **theme**: CollapsibleThemeProps - Theme configuration overrides\n  - Allows customizing styles for container, trigger, and content parts\n\n## Examples\n\n### Example 1 - Uncontrolled\n```svelte\n<script lang=\"ts\">\n\timport { Collapsible } from 'entasis/collapsible';\n\timport { caretDownIcon } from 'entasis/icons/caretDown';\n</script>\n\n<Collapsible defaultOpen={false} icon=\"none\">\n\t{#snippet trigger()}\n\t\t<span>Toggle Content</span>\n\t\t{@render caretDownIcon()}\n\t{/snippet}\n\t<p>This content can be toggled.</p>\n</Collapsible>\n```\n\n### Example 2 - Controlled\n```svelte\n<script>\n\tlet open = false;\n</script>\n\n<Collapsible bind:open={open} onOpenChange={(open) => console.log('State:', open)}>\n\t{#snippet trigger()}\n\t\tToggle (Currently: {open ? 'Open' : 'Closed'})\n\t{/snippet}\n\t<p>Controlled content</p>\n</Collapsible>\n```\n\n### Example 3 - Explicit Children Snippet\n```svelte\n<Collapsible>\n\t{#snippet trigger()}\n\t\tShow Details\n\t{/snippet}\n\t{#snippet children({ open })}\n\t\t<p>This panel is {open ? 'open' : 'closed'}.</p>\n\t\t<ul>\n\t\t\t<li>Item 1</li>\n\t\t\t<li>Item 2</li>\n\t\t</ul>\n\t{/snippet}\n</Collapsible>\n```\n\n### Example 4 - Disabled State\n```svelte\n<Collapsible disabled={true}>\n\t{#snippet trigger()}\n\t\tDisabled Collapsible\n\t{/snippet}\n\tThis content cannot be toggled.\n</Collapsible>\n```\n\n### Example 5 - Different Sizes\n```svelte\n<Collapsible size=\"small\">\n\t{#snippet trigger()}\n\t\tSmall Collapsible\n\t{/snippet}\n\tSmall content\n</Collapsible>\n\n<Collapsible size=\"large\">\n\t{#snippet trigger()}\n\t\tLarge Collapsible\n\t{/snippet}\n\tLarge content\n</Collapsible>\n```\n\n## Structure\n\nThe component renders:\n- A container `<div>` with data attributes for state\n- A trigger `<button>` with ARIA attributes\n- A content `<div>` with slide transition (only when open)\n\n## Accessibility\n\n- **ARIA Attributes**:\n  - `aria-expanded` on trigger indicates open/closed state\n  - `aria-controls` links trigger to content element\n  - `data-state` attribute provides state information for styling\n\n- **Keyboard Support**:\n  - **Enter** or **Space**: Toggles the collapsible\n  - Focus management handled by browser default behavior\n\n- **Semantic HTML**:\n  - Uses `<button>` element for trigger (proper focus and keyboard handling)\n  - Content is hidden from accessibility tree when closed\n\n## Notes\n\n- The component uses Svelte's built-in `slide` transition with a 200ms duration.\n- When `open` prop is provided, the component is controlled. Otherwise, it manages its own state.\n- Content is completely removed from DOM when closed (not just hidden) for better performance.\n\n## Theme Customization\n\nThe Collapsible component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main collapsible container styles\n- **trigger**: Toggle trigger button styles\n- **content**: Collapsible content panel styles\n- **icon**: Expand/collapse icon styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container size\n\n**trigger**:\n- base: Base classes for trigger button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Trigger padding and text size\n  - disabled: boolean - Disabled state styling\n\n**content**:\n- base: Base classes for content panel\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content gap and text size\n\n**icon**:\n- base: Base classes for expand/collapse icon\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Collapsible \n  theme={{\n    root: {\n      base: 'w-full'\n    },\n    trigger: {\n      base: 'flex items-center justify-between w-full',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    }\n  }}\n>\n  {#snippet trigger()}\n    Toggle\n  {/snippet}\n  Content\n</Collapsible>\n```\n\n**Custom Trigger Styling**:\n```svelte\n<Collapsible \n  theme={{\n    trigger: {\n      base: 'state-layer rounded-lg transition-colors',\n      size: {\n        large: 'px-6 py-4 text-lg'\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed'\n      }\n    },\n    icon: {\n      size: {\n        normal: 'size-5'\n      }\n    }\n  }}\n>\n  {#snippet trigger()}\n    Custom Trigger\n  {/snippet}\n  Content\n</Collapsible>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setCollapsibleTheme } from '../components/Collapsible/index.ts';\n  \n  setCollapsibleTheme({\n    root: {\n      base: 'w-full flex flex-col'\n    },\n    trigger: {\n      base: 'transition-all hover:opacity-80',\n      size: {\n        normal: 'px-2 py-2 text-sm'\n      }\n    },\n    content: {\n      size: {\n        normal: 'gap-2 mt-2'\n      }\n    }\n  });\n</script>\n```\n\n## Motion\n\n- **motion** theme slot, keyed by `variant`: `default` slides the content open on the y axis,\n  `peek` animates its clip height on `slow` / `enter`.\n- Ladder: `<Theme components={{ collapsible: { motion } }}>` → `setCollapsibleTheme({ motion })`\n  → `theme.motion` → the `transition` prop. Reduced motion collapses it to 0.\n";
+    readonly breadcrumbs: "\n# Breadcrumbs Component\n\nA navigation component that displays a hierarchical path of links, helping users understand their location within a website or application. Supports keyboard navigation, dropdown menus for nested items, customizable separators, and ellipsis for long paths. Uses semantic HTML structure (`<nav><ol><li>`) following accessibility best practices.\n\n## Basic Usage\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n## Props\n\n### Core Props\n\n- **items**: BreadcrumbItem[] (required)\n  - Array of breadcrumb items to display\n  - Each item is a config object with: label, href, active, disabled, onclick, icon, menu\n\n- **home**: Omit<BreadcrumbItem, 'menu' | 'label'> & { label?: string | Snippet } (optional)\n  - Optional home breadcrumb item to prepend to the items array\n  - If provided, it will be rendered as the first breadcrumb\n  - When `label` is omitted a house icon is rendered\n\n- **maxItems**: number (optional)\n  - Maximum number of items to show before using ellipsis\n  - When set, shows first item, ellipsis, and last N items\n  - Example: `maxItems={3}` shows first item + ellipsis + last 2 items\n  - If maxItems >= items.length, all items are shown (no ellipsis)\n\n- **showSeparator**: boolean (default: true)\n  - Whether to display separators between breadcrumb items\n\n- **class**: string\n  - Additional CSS classes for the breadcrumbs container\n\n- **theme**: BreadcrumbsThemeProps\n  - Custom theme overrides for styling\n\n### BreadcrumbItem Properties\n\n- **label**: string | Snippet (required)\n  - The text or snippet to display for the breadcrumb item\n  - Can be a string or a snippet without parameters\n\n- **href**: string (optional)\n  - URL to navigate to. If provided, renders as an anchor element\n\n- **active**: boolean (default: false)\n  - Whether this breadcrumb represents the current page\n  - Active items render as `<span>` with `font-normal` styling and `aria-current=\"page\"`\n\n- **disabled**: boolean (default: false)\n  - Whether the breadcrumb item is disabled\n  - Disabled items are not navigable and have reduced opacity\n\n- **onclick**: (event: MouseEvent) => void (optional)\n  - Native click event handler for the breadcrumb item\n\n- **icon**: string | Snippet (optional)\n  - Icon snippet or string to display before the label\n\n- **menu**: MenuItem[] (optional)\n  - Array of menu items for dropdown functionality\n  - If provided, the breadcrumb renders as a PopupMenu\n\n### Content Props (Slots)\n\n- **separator**: Snippet\n  - Custom separator between breadcrumb items\n  - Default: `arrowRightIcon` (chevron right icon)\n  - No parameters passed to the snippet\n\n- **ellipsis**: Snippet\n  - Custom rendering for the ellipsis indicator\n  - Default: `dotsThreeOutlineIcon` with \"More\" screen reader text\n  - No parameters passed to the snippet\n\n## Examples\n\n### Basic Breadcrumbs with Links\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'About', href: '/about' },\n    { label: 'Team', href: '/about/team', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Home Item\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs home={{ label: 'Home', href: '/' }} {items} />\n<!-- Or with the default house icon -->\n<Breadcrumbs home={{ href: '/' }} {items} />\n```\n\n### Breadcrumbs with Icons\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  import { houseIcon } from 'entasis/icons/house';\n  import { folderIcon } from 'entasis/icons/folder';\n  import { fileIcon } from 'entasis/icons/file';\n  \n  const items = [\n    { label: 'Home', href: '/', icon: houseIcon },\n    { label: 'Documents', href: '/docs', icon: folderIcon },\n    { label: 'Report.pdf', href: '/docs/report', icon: fileIcon, active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Dropdown Menus\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs, type BreadcrumbItem } from '../components/Breadcrumbs/index.ts';\n  \n  const items: BreadcrumbItem[] = [\n    { label: 'Home', href: '/' },\n    { \n      label: 'Products', \n      menu: [\n        { type: 'option', children: 'All Products', href: '/products' },\n        { type: 'option', children: 'Electronics', href: '/products/electronics' },\n        { type: 'option', children: 'Clothing', href: '/products/clothing' }\n      ]\n    },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Custom Separator\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items}>\n  {#snippet separator()}\n    <span class=\"text-neutral/70\">›</span>\n  {/snippet}\n</Breadcrumbs>\n```\n\n### Breadcrumbs with Ellipsis\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Category 1', href: '/cat1' },\n    { label: 'Category 2', href: '/cat2' },\n    { label: 'Category 3', href: '/cat3' },\n    { label: 'Category 4', href: '/cat4' },\n    { label: 'Current Page', href: '/current', active: true }\n  ];\n</script>\n\n<!-- Shows first item + ellipsis + last 2 items -->\n<Breadcrumbs {items} maxItems={3} />\n```\n\n### Inline Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n</script>\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', active: true }\n  ]}\n/>\n```\n\n### Items with Snippet Labels\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n</script>\n\n{#snippet productsLabel()}\n  <strong>Products</strong>\n{/snippet}\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: productsLabel, href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ]}\n/>\n```\n\n### Disabled Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products', disabled: true },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n\n### Without Separators\n\n```svelte\n<script>\n  import { Breadcrumbs } from '../components/Breadcrumbs/index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} showSeparator={false} />\n```\n\n## BreadcrumbItem Type\n\nEach item in the `items` array is a config object with properties like `label`, `href`, `active`, etc.\n\nThe `label` property can be a string or a snippet without parameters.\n\n## Keyboard Navigation\n\nThe Breadcrumbs component supports full keyboard navigation via the `useNavigation` hook:\n\n- **Arrow Left**: Navigate to previous breadcrumb item\n- **Arrow Right**: Navigate to next breadcrumb item\n- **Home**: Navigate to first breadcrumb item\n- **End**: Navigate to last breadcrumb item\n- **Enter/Space**: Activate the focused breadcrumb item\n- **Escape**: Clear focus\n\nDisabled items are automatically skipped during keyboard navigation.\n\n## Accessibility\n\n- Uses semantic `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- Active items use `aria-current=\"page\"` attribute\n- Disabled items use `aria-disabled` attribute\n- Proper focus management with roving tabindex pattern\n- Keyboard navigation support for all interactive elements\n- Screen reader friendly with proper ARIA attributes\n\n## Structure\n\nThe component uses semantic HTML structure:\n- `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- `<ol>` (ordered list) for the breadcrumb list\n- `<li>` elements for each breadcrumb item\n- `<li>` elements for separators with `role=\"presentation\"` and `aria-hidden=\"true\"`\n- Active items render as `<span>` with `role=\"link\"`, `aria-disabled=\"true\"`, and `aria-current=\"page\"`\n- Non-active items render as links (`<a>`) or buttons (`<button>`)\n- Ellipsis indicator for long paths\n- PopupMenu integration for items with nested menus\n\n## Notes\n\n- Items with `href` render as anchor elements, others render as buttons\n- Active items render as `<span>` elements with `font-normal` styling (not bold)\n- Disabled items cannot be navigated and have reduced opacity\n- Separators are not shown after the last item\n- The default separator is `arrowRightIcon` (chevron right) but can be customized via the `separator` slot\n- Items with `menu` property automatically render as PopupMenu components\n- Ellipsis is shown when `maxItems` is set and there are more items than the limit\n- Uses semantic HTML structure (`<nav><ol><li>`) for better accessibility\n- Styling matches shadcn/ui breadcrumb component patterns\n- Items can be simple strings/snippets or full config objects\n- Labels and icons can be strings or snippets (no parameters)\n\n## Theme Customization\n\nThe Breadcrumbs component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main breadcrumbs container styles\n- **item**: Individual breadcrumb item styles\n- **link**: Breadcrumb link/button styles\n- **separator**: Separator icon/styles\n- **ellipsis**: Ellipsis indicator styles\n- **icon**: Icon styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n\n**item**:\n- base: Base classes for breadcrumb items\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active/current page styling\n\n**link**:\n- base: Base classes for links/buttons\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active state styling\n\n**separator**:\n- base: Base classes for separator icons\n\n**ellipsis**:\n- base: Base classes for ellipsis indicator\n\n**icon**:\n- base: Base classes for icons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary font-semibold'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Link Styling**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    link: {\n      base: 'hover:text-primary transition-colors',\n      active: {\n        true: 'text-gray-900 font-semibold'\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed'\n      }\n    },\n    separator: {\n      base: 'text-gray-400 mx-2'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setBreadcrumbsTheme } from '../components/Breadcrumbs/index.ts';\n  \n  setBreadcrumbsTheme({\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary'\n      }\n    },\n    separator: {\n      base: 'text-gray-400'\n    }\n  });\n</script>\n```\n";
+    readonly command: "\n# Command Component\n\nA command palette: a searchable, keyboard-navigable list of grouped commands. Renders inline by\ndefault, or inside a modal Dialog (⌘K style) with `dialog`.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Command } from 'entasis/command';\n\timport { calendarIcon } from 'entasis/icons/calendar';\n\n\tconst items = [\n\t\t{\n\t\t\theading: 'Suggestions',\n\t\t\titems: [\n\t\t\t\t{ value: 'calendar', label: 'Calendar', icon: calendarIcon },\n\t\t\t\t{ value: 'search-emoji', label: 'Search Emoji' },\n\t\t\t\t{ value: 'calculator', label: 'Calculator', disabled: true }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\theading: 'Settings',\n\t\t\titems: [\n\t\t\t\t{ value: 'profile', label: 'Profile', shortcut: '⌘P' },\n\t\t\t\t{ value: 'settings', label: 'Settings', shortcut: '⌘S' }\n\t\t\t]\n\t\t}\n\t];\n</script>\n\n<Command {items} onSelect={(value) => console.log(value)} />\n```\n\n## Dialog Mode (⌘K palette)\n\n```svelte\n<Command dialog shortcut=\"k\" {items} onSelect={run}>\n\t{#snippet trigger({ open })}\n\t\t<Button variant=\"outline\" onclick={open}>Search... ⌘K</Button>\n\t{/snippet}\n\t{#snippet footer({ close })}\n\t\t<div class=\"border-neutral-muted text-neutral/70 border-t px-3 py-2 text-xs\">\n\t\t\t↵ Select · Esc Close\n\t\t</div>\n\t{/snippet}\n</Command>\n```\n\n## Props\n\n### Core Props\n- **items**: CommandGroup[] (required)\n  - `CommandGroup`: `{ heading?: string; items: CommandItem[]; class?: string }`\n  - `CommandItem`: `{ value: string; label: string; icon?: Slot; shortcut?: string; keywords?: string[]; disabled?: boolean; href?: string; onSelect?: (value) => void; class?: string }`\n  - Items with `href` render as `<a>` and navigate on click/Enter.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Typography and spacing scale.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing density forwarded to the option rows (paddings, gaps, min-height).\n\n### Dialog Mode Props\n- **dialog**: boolean (default: false) - Render inside a modal Dialog instead of inline.\n- **open**: boolean (bindable, default: false) - Dialog open state.\n- **defaultOpen**: boolean (default: false) - Initial dialog state when open is omitted.\n- **onOpenChange**: (open: boolean) => void - Fires once after a component-owned open state change.\n- **shortcut**: string | false (default: false) - ⌘/Ctrl + key toggles the dialog (e.g. 'k').\n- **closeOnSelect**: boolean (default: true) - Close the dialog when an item is selected.\n\n### Selection Props\n- **value**: string | null (bindable, default: null) - Value of the selected command.\n- **defaultValue**: string | null (default: null) - Initial selected value when value is omitted.\n- **onValueChange**: (value: string | null) => void - Fires once when the selected value changes.\n  Selecting the same command again is silent; use onSelect for every activation.\n\n### Search / Filtering Props\n- **search**: string (bindable, default: '') - Search query.\n- **defaultSearch**: string (default: '') - Initial query when search is omitted.\n- **onSearchChange**: (search: string) => void - Fires once when the query changes.\n- **placeholder**: string (default: 'Type a command or search...')\n- **showInput**: boolean (default: true) - Render the search input row.\n- **shouldFilter**: boolean (default: true) - Filter internally; set false to filter externally.\n- **filter**: (item, search) => boolean - Custom match predicate (defaults to case-insensitive\n  substring match on label + keywords + value).\n\n### Event Props\n- **onSelect**: (value: string) => void - Activation callback: fires for every selected item (after the item's own onSelect), including a repeat selection of the already-selected command.\n- Callback-naming decision: Command owns a selected-value state, so the state change keeps the\n  `value`/`defaultValue`/`onValueChange` trio and `onSelect` stays the pick event — the\n  `onSelect` name is reserved for \"the user picked this item\", never for a value change.\n- **onHighlightChange**: (value: string | undefined) => void - Fires when the highlighted option moves.\n\n### Content Props (Slots)\n- **empty**: Slot (default: 'No results found.') - Empty-state content.\n- **item**: Snippet<[CommandItem]> - Custom row renderer, replaces icon/label/shortcut layout.\n- **trigger**: Slot<{ open, close }> - Dialog trigger; call `open()` on click. Dialog mode only.\n- **footer**: Slot<{ open, close }> - Bar rendered below the list (e.g. shortcut hints).\n\n### Advanced Props\n- **theme**: CommandThemeProps - Overrides for parts: command, inputWrapper, inputGroup, inputIcon,\n  input, list, empty, group, groupHeading, separator, item, shortcut.\n- **class**: string - Classes for the palette root.\n\n## Keyboard\n\n- **ArrowDown / ArrowUp**: move the highlight, wrapping around both ends.\n- **Home / End**: jump to first / last selectable item.\n- **Enter**: select the highlighted item (navigates for href items).\n- **Escape**: closes the dialog (dialog mode).\n- **⌘/Ctrl + shortcut**: toggles the dialog (dialog mode with `shortcut` set).\n\n## Accessibility\n\n- The input is a `role=\"combobox\"` with `aria-activedescendant` pointing at the highlighted option.\n- The list is a `role=\"listbox\"`; rows are `role=\"option\"` with `aria-selected`/`aria-disabled`.\n- Pointer movement highlights rows; the highlight re-anchors to the first result while typing.\n\n## Notes\n\n- Filtering happens per group; groups with no matching items are hidden and separators stay contiguous.\n- Dialog mode reuses the Dialog component (modal type) with padding stripped and its close button hidden.\n- Disabled items render dimmed and are skipped by keyboard navigation.\n\n## Motion\n\n- In `dialog` mode the palette rides the Dialog's **motion** slot: `commandDialogTheme.motion`\n  drops it in from just above its resting place on `duration: 'fast'`.\n- Retune it with `<Theme components={{ dialog: { motion } }}>` or `setDialogTheme({ motion })`;\n  reduced motion collapses it to 0.\n";
+    readonly pagination: "\n# Pagination Component\n\nPagination renders accessible page navigation for long lists, tables, and server-routed result pages. It is controlled through a one-based `value`, sized by either an explicit `totalPages` count or `totalItems` plus `pageSize`, and supports numbered, count, compact, dots, or navigation-only layouts.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Pagination } from 'entasis/pagination';\n\n\tlet value = $state(1);\n</script>\n\n<Pagination bind:value totalPages={12} />\n```\n\n## Props\n\n### Core Props\n- **value**: number (default: 1)\n  - One-based current page. Bind it with `bind:value` for local state.\n- **defaultValue**: number (default: 1)\n  - Initial one-based page when `value` is omitted.\n- **totalPages**: number (optional)\n  - Total page count. Values below 1 render no pagination.\n- **totalItems**: number (optional)\n  - Total item count. With `pageSize`, derives `totalPages` when `totalPages` is omitted, and feeds the summary slot.\n- **pageSize**: number (optional)\n  - Items per page. Pair it with `totalItems` to derive the page count, to render the summary, and for the `count` variant.\n- **siblingCount**: number (default: 1)\n  - Number of pages shown on each side of the current page.\n- **boundaryCount**: number (default: 1)\n  - Number of pages always shown at the start and end.\n\nSizing: `totalPages`, `totalItems`, and `pageSize` are plain optional props — there is no discriminated union. Pass `totalPages`, or pass `totalItems` and `pageSize` together; `totalPages` wins when both are given. With neither, the page count is 0, nothing renders, and the component logs a one-time console warning.\n\n### Control Props\n- **showFirstLast**: boolean (default: false)\n  - Shows first and last page icon controls.\n- **showPrevNext**: boolean (default: true)\n  - Shows previous and next page icon controls.\n- **showSummary**: boolean (default: false)\n  - Renders the summary slot, or the default item range, when `totalItems` and `pageSize` are set.\n- **disabled**: boolean (default: false)\n  - Disables all controls.\n- **getHref**: (page: number) => string\n  - When provided, controls render as anchors instead of buttons.\n- **getItemLabel**: (item: PaginationItemLabel) => string\n  - Returns localized aria labels for first, previous, page, next, and last controls.\n- **onValueChange**: (value: number) => void\n  - Called once after an enabled control selects a different page. External `value` updates stay silent.\n\n### Style Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: 'primary')\n- **variant**: 'pages' | 'count' | 'compact' | 'dots' | 'none' (default: 'pages')\n  - Controls what appears between previous and next. `count` requires `totalItems` and `pageSize`.\n- **controlVariant**: 'solid' | 'outline' | 'soft' | 'ghost' (default: 'ghost')\n  - Visual appearance applied to page and navigation controls.\n- **class**: string\n- **theme**: PaginationThemeProps\n\n### Accessibility Props\n- **label**: string (default: 'Pagination')\n  - Accessible label for the root navigation landmark.\n\n### Slot Props\n- **first**: Snippet | string\n- **previous**: Snippet | string\n- **next**: Snippet | string\n- **last**: Snippet | string\n- **ellipsis**: Snippet | string\n- **children**: Snippet<[PaginationState]>\n  - Full custom renderer. Receives the pagination state instance and replaces the built-in controls.\n- **pageItem**: Snippet<{ page, active, disabled, totalPages }>\n  - Custom content rendered inside page number controls.\n- **summary**: Snippet<{ page, totalPages, totalItems, pageSize, startItem, endItem }>\n  - Custom item range content rendered before the controls, or between them for the `count` variant.\n\n### Pagination State\nThe default child snippet receives a `PaginationState` instance. State is backed by the bindable `value` prop, so calling `pagination.next()`, `pagination.previous()`, or `pagination.setPage(page)` updates `bind:value` and fires `onValueChange`.\n\nUseful state fields and methods:\n- **currentPage**: clamped active page.\n- **pageCount**: derived from `totalPages` or `totalItems / pageSize`.\n- **items**: page numbers and ellipsis tokens used by the built-in renderer.\n- **summary**: item range payload when `totalItems` and `pageSize` are set.\n- **isPreviousDisabled** / **isNextDisabled**: bounded navigation state.\n- **first()**, **previous()**, **next()**, **last()**, **setPage(page)**: navigation methods.\n\n## Examples\n\n### Controlled Pagination\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(6);\n</script>\n\n<Pagination bind:value totalPages={20} />\n```\n\n### Layout Variants\n\n`pages` renders numbered controls with ellipsis:\n\n```svelte\n<Pagination variant=\"pages\" bind:value totalPages={40} />\n```\n\n`count` renders the current item range:\n\n```svelte\n<Pagination variant=\"count\" bind:value totalItems={100} pageSize={10} />\n```\n\n`compact`, `dots`, and `none` reduce the visible navigation chrome:\n\n```svelte\n<Pagination variant=\"compact\" bind:value totalPages={10} />\n<Pagination variant=\"dots\" bind:value totalPages={10} />\n<Pagination variant=\"none\" bind:value totalPages={10} />\n```\n\nDot controls keep their compact visual marker while the shared `Hitbox` utility expands each pointer target. The list reserves the same dimensions, so adjacent page targets never overlap.\n\n### Windowed Page Buttons\n```svelte\n<Pagination bind:value totalPages={40} siblingCount={0} boundaryCount={1} size=\"small\" />\n```\n\n### Full Controls\n```svelte\n<Pagination value={12} totalPages={80} showFirstLast />\n```\n\n### Item Count Summary\n```svelte\n<Pagination bind:value totalItems={96} pageSize={10} showSummary>\n\t{#snippet summary(range)}\n\t\t{range.startItem}-{range.endItem} of {range.totalItems}\n\t{/snippet}\n</Pagination>\n```\n\n### Link Pagination\n```svelte\n<Pagination\n\tvalue={3}\n\ttotalPages={10}\n\tgetHref={(page) => `/invoices?page=${page}`}\n/>\n```\n\n### Custom Labels\n```svelte\n<Pagination bind:value totalPages={8} previous=\"Prev\" next=\"Next\">\n\t{#snippet pageItem(item)}\n\t\t<span>{item.active ? 'p.' : ''}{item.page}</span>\n\t{/snippet}\n</Pagination>\n```\n\n### Custom Renderer With State\n```svelte\n<Pagination bind:value totalPages={10}>\n\t{#snippet children(pagination)}\n\t\t<button disabled={pagination.isPreviousDisabled} onclick={pagination.previous}>\n\t\t\tPrevious\n\t\t</button>\n\t\t<span>Page {pagination.currentPage} of {pagination.pageCount}</span>\n\t\t<button disabled={pagination.isNextDisabled} onclick={pagination.next}>\n\t\t\tNext\n\t\t</button>\n\t{/snippet}\n</Pagination>\n```\n\n### Localized Aria Labels\n```svelte\n<script lang=\"ts\">\n\timport type { PaginationItemLabel } from 'entasis/pagination';\n\n\tconst getItemLabel = (item: PaginationItemLabel) => {\n\t\tif (item.type === 'page') {\n\t\t\treturn item.active ? `Page ${item.page}, page courante` : `Aller a la page ${item.page}`;\n\t\t}\n\n\t\treturn {\n\t\t\tfirst: 'Aller a la premiere page',\n\t\t\tprevious: 'Aller a la page precedente',\n\t\t\tnext: 'Aller a la page suivante',\n\t\t\tlast: 'Aller a la derniere page'\n\t\t}[item.type];\n\t};\n</script>\n\n<Pagination label=\"Pagination des factures\" totalPages={8} {getItemLabel} />\n```\n\n## Accessibility\n\n- Renders a `nav` landmark with configurable `aria-label`.\n- The active page sets `aria-current=\"page\"`.\n- Disabled controls set `aria-disabled`; button controls also use the native `disabled` attribute.\n- First, previous, page, next, and last controls include descriptive aria labels.\n- `getItemLabel` localizes all control labels without changing visible content.\n\n## Theme Customization\n\nThe theme object contains:\n- **root**: root navigation element\n- **list**: list of controls\n- **item**: list item wrapper\n- **control**: page and icon controls\n- **dot**: visual dot controls used by the `dots` variant; pointer target sizing belongs to `Hitbox`\n- **icon**: icon wrapper inside icon controls\n- **ellipsis**: gap indicator\n- **summary**: item range summary\n\n```svelte\n<script>\n\timport { setPaginationTheme } from 'entasis/pagination';\n\n\tsetPaginationTheme({\n\t\tcontrol: {\n\t\t\tbase: 'rounded-full'\n\t\t}\n\t});\n</script>\n```\n";
+    readonly stepper: "\n# Stepper Component\n\nStepper renders an ordered collection of panels with animated transitions, measured height changes, and programmatic navigation through StepperState.\n\n## Usage\n\nUse items for the collection and a single children snippet for the repeated panel content. The snippet receives the instance handle as api, the current item, and the zero-based index.\n\n<script lang=\"ts\">\n\timport { Stepper, type StepperApi } from '$lib/components/Stepper';\n\timport { Button } from '$lib/components/Button';\n\n\ttype Step = {\n\t\ttitle: string;\n\t\tdescription: string;\n\t};\n\n\tlet activeStep = $state(0);\n\tlet api = $state<StepperApi<Step>>();\n\n\tconst items: Step[] = [\n\t\t{ title: 'Account', description: 'Create the account.' },\n\t\t{ title: 'Profile', description: 'Complete the profile.' },\n\t\t{ title: 'Review', description: 'Confirm the details.' }\n\t];\n</script>\n\n<Stepper {items} bind:value={activeStep} bind:api>\n\t{#snippet children({ api, item, index })}\n\t\t<section class=\"space-y-4 p-6\">\n\t\t\t<h2>{item.title}</h2>\n\t\t\t<p>{item.description}</p>\n\t\t\t<div class=\"flex gap-2\">\n\t\t\t\t<Button disabled={index === 0} onclick={() => api.previous()}>\n\t\t\t\t\tPrevious\n\t\t\t\t</Button>\n\t\t\t\t<Button disabled={index === items.length - 1} onclick={() => api.next()}>\n\t\t\t\t\tNext\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t{/snippet}\n</Stepper>\n\n## Props\n\n- items: required array of step data. Each item is passed to children as item.\n- children: repeated snippet called for each panel with { api, item, index }.\n- value: bindable zero-based active index. Use this as the public source of truth when syncing steppers.\n- defaultValue: initial active index when value is omitted.\n- api: bindable StepperApi (a StepperState) for next(), previous(), and goTo(index).\n- onValueChange: called once with { value, item, index } when the active step changes. Same payload shape as Tabs; value and index are both the zero-based step index.\n- transition: step translation timing override (`duration` in ms, `easing`); responsive, and it beats the `motion` theme slot. The default is the `slow` duration token (300ms).\n- theme: theme overrides for the stepper parts, including its `motion` slot.\n- mode: classic or vertical.\n- panelRole: \"tabpanel\", \"group\", or null. Defaults to \"tabpanel\"; use \"group\" for labelled question flows.\n- panelAriaLabelledby: aria-labelledby value, callback, or false. Defaults to stepper-{index} when panelRole is \"tabpanel\".\n- panelAriaLabel: aria-label value or callback for each panel.\n- panelId: (index) => string giving each panel a DOM id so a tab can reference it with aria-controls. Tabs uses it to link Tabbar tabs to their panels.\n- mount: when a step's content is created — `eager` (default) for every step up front, `lazy` on first activation and destroyed once the slide away from it finishes, `once` on first activation and kept. Inactive panels are `inert` and `aria-hidden` at once and `hidden` as soon as the slide settles, so at rest exactly one panel is not `hidden`. Tabs forwards its own `mount`, which defaults to `lazy`.\n- class: extra classes applied to the root container.\n\n## StepperApi (StepperState)\n\n- next(): move to the next item when one exists.\n- previous(): move to the previous item when one exists.\n- goTo(index): request a specific zero-based step.\n- syncActiveStep(index): internal synchronization path used by the component when value changes.\n- value: current public active index.\n- items: current item array.\n- stepHeights: measured panel heights used for smooth height transitions.\n\n## Composition Rules\n\n- Render repeated step content through the children snippet.\n- Put per-step differences in the item data and branch inside children when needed.\n- Bind value when the parent or another Stepper controls the current step.\n- Bind api when external controls need to call next(), previous(), or goTo(index).\n\n## Accessibility\n\nStepper renders each panel with role=\"tabpanel\" by default, marks inactive panels inert and `aria-hidden` (and `hidden` once the slide settles), disables pointer events on inactive panels, and keeps inactive panels out of the tab order, so only the active panel reaches the text and accessibility layers. Use `panelRole={null}` with `panelAriaLabelledby={false}` when another primitive owns the semantics inside each panel.\n\n## Theme Parts\n\n- root: outer stepper container.\n- container: animated grid that holds all panels.\n- step: individual panel.\n\nThe theme supports the mode variant on root, container, and step.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` drive the Web\n  Animations step translation and the matching CSS height/opacity transitions.\n- Ladder: `<Theme components={{ stepper: { motion } }}>` → `setStepperTheme({ motion })` →\n  `theme.motion` → the `transition` prop (how Tabs forwards its own preset).\n- A resolved duration of 0 (reduced motion, or `duration: 'instant'`) snaps between steps.\n";
+    readonly tabbar: "\n# Tabbar Component\n\nThe Tabbar component is a flexible navigation component that displays a list of tabs with support for active state management, custom styling, icons, and links.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet activeTab = $state('Home');\n</script>\n\n<Tabbar items={['Home', 'Profile', 'Settings']} bind:value={activeTab} />\n```\n\n## Props\n\n### Core Props\n- **items**: Array<string | TabItem> (required)\n  - Array of tab items. Each item can be:\n    - A simple string (e.g., \"Home\")\n    - A TabItem object with: { value?, label, prefix?, suffix?, href?, disabled?, target?, rel? }\n  - Every tab resolves to a string value: its `value`, else its string label, else its index as a string (`getTabValue(item, index)` is exported from `entasis/tabbar`)\n\n- **value**: string (default: the first tab's value, bindable)\n  - The value of the currently active tab (a string item is its own value)\n  - Can be bound with `bind:value`\n- **defaultValue**: string - Initial active tab value when value is omitted\n\n- **onValueChange**: (value: string) => void\n  - Callback function called when the active tab changes\n  - Receives the new tab's value as an argument; not called when the current tab is re-selected\n\n### Styling Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact size with smaller padding and text\n  - normal: Standard size\n  - large: Larger size with more padding\n\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal')\n  - horizontal: Tabs arranged in a row\n  - vertical: Tabs arranged in a column\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'primary')\n  - Determines the color scheme of the active tab\n\n- **variant**: 'underline' | 'pill' (default: 'underline')\n  - underline: a colored bar slides along the active tab edge (side set by position)\n  - pill: a rounded track where the active tab is a raised pill; the pill slides and resizes between tabs with the same animation\n  - Both variants respect the color prop: the underline bar and the pill fill use color, and the active pill's label uses the color's contrast tone (use color='neutral' for a neutral pill)\n  - The indicator is correct during SSR (a CSS-only bar rendered in the active tab) and hands off to a single measured element that slides after hydration, so it adapts to variable tab widths and to the vertical orientation\n\n- **alignment**: 'start' | 'center' | 'end' (default: 'start')\n  - start: Tabs aligned to the start of the container\n  - center: Tabs centered in the container\n  - end: Tabs aligned to the end of the container\n\n- **fullWidth**: boolean (default: false)\n  - Whether the tabbar should be full width\n  - When true, the tabbar and individual tabs will expand to fill the available width\n\n- **scrollFade**: boolean (default: true)\n  - Applies the shared logical-axis scroll fade only while the tab list overflows\n\n### Advanced Props\n- **label**: string - Accessible name for the tab list, applied as aria-label. Give one to every page that shows more than one set of tabs\n- **id**: string - DOM id prefix for the tabs; each tab renders as `{id}-tab-{index}`. Generated when omitted\n- **controlsPanels**: boolean (default: false) - Adds `aria-controls=\"{id}-panel-{index}\"` to every tab. `Tabs` sets it and renders the matching panels; only enable it yourself when you render panels with those ids\n- **ref**: HTMLDivElement | null (bindable) - Reference to the tab list element\n- **class**: string - Additional CSS classes for the tabbar container\n- **theme**: TabbarThemeProps - Custom theme overrides\n\nNative div attributes and attachments are forwarded to the root, minus the ARIA the tab list owns: `role`, `aria-orientation` (from `orientation`), and its accessible name (from `label`) are written by the component and cannot be overridden. Horizontal and vertical overflow use the shared `scroll-fade-x` and `scroll-fade-y` utilities by default; non-overflowing tab lists remain unmasked, including in no-support fallback browsers.\n\n## TabItem Structure\n\nWhen using object format for items:\n\n```typescript\ntype TabItem = {\n  value?: string;                // Stable identifier; defaults to the string label\n  label: string | Snippet;      // Tab label (required)\n  prefix?: Snippet;              // Icon or content before label\n  suffix?: Snippet;              // Icon or content after label\n  href?: string;                 // URL for navigation tabs\n  disabled?: boolean;            // Disable the tab\n  target?: string;               // Link target (e.g., \"_blank\")\n  rel?: string;                  // Link relationship\n  menu?: string[];               // Entries shown in a popover menu (overflow pattern)\n  onSelect?: (menuIndex: number) => void; // Called when a menu entry is picked\n}\n```\n\n### Menu tab (overflow pattern)\n\nA tab with `menu` renders with a chevron and opens a popover menu instead of activating directly. Selecting an entry activates the tab, displays the entry's label on it (the tab's own label becomes the menu header), slides the indicator to it, and calls `onSelect(menuIndex)`. The selected entry shows a check mark in the menu.\n\n```svelte\n<Tabbar\n\titems={['Home', 'Projects', { label: 'More', menu: ['Analytics', 'Reports', 'Billing'] }]}\n\tbind:value={activeTab}\n/>\n```\n\n## Structure\n\nThe tabbar follows this DOM structure:\n```\n<Tabbar>\n\t<Tab>\n\t\t<TabContent>      <!-- Optional wrapper when prefix/suffix exist -->\n\t\t\t<Prefix />      <!-- Optional prefix content -->\n\t\t\t<Label />       <!-- Tab label -->\n\t\t\t<Suffix />      <!-- Optional suffix content -->\n\t\t</TabContent>\n\t</Tab>\n\t<!-- More tabs... -->\n</Tabbar>\n```\n\n## Examples\n\n### Simple String Tabs\n```svelte\n<script>\n\tlet activeTab = $state('Home');\n</script>\n\n<Tabbar \n\titems={['Home', 'About', 'Contact']} \n\tbind:value={activeTab}\n\tcolor=\"primary\"\n/>\n```\n\n### Tabs with Icons\n```svelte\n<script lang=\"ts\">\n\timport { houseIcon } from 'entasis/icons/house';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { gearIcon } from 'entasis/icons/gear';\n\n\tlet activeTab = $state('Home');\n\n\tconst tabs = [\n\t\t{\n\t\t\tlabel: 'Home',\n\t\t\tprefix: houseIcon\n\t\t},\n\t\t{\n\t\t\tlabel: 'Profile',\n\t\t\tprefix: userIcon\n\t\t},\n\t\t{\n\t\t\tlabel: 'Settings',\n\t\t\tprefix: gearIcon\n\t\t}\n\t];\n</script>\n\n<Tabbar items={tabs} bind:value={activeTab} />\n```\n\n### Navigation Tabs (with links)\n```svelte\n<script>\n\tconst tabs = [\n\t\t{ label: 'Dashboard', href: '/dashboard' },\n\t\t{ label: 'Analytics', href: '/analytics' },\n\t\t{ label: 'Reports', href: '/reports' }\n\t];\n</script>\n\n<Tabbar items={tabs} />\n```\n\n### Tabs with Disabled State\n```svelte\n<script>\n\tlet activeTab = $state('Enabled Tab');\n\t\n\tconst tabs = [\n\t\t{ label: 'Enabled Tab' },\n\t\t{ label: 'Disabled Tab', disabled: true },\n\t\t{ label: 'Another Tab' }\n\t];\n</script>\n\n<Tabbar items={tabs} bind:value={activeTab} />\n```\n\n### Vertical Orientation\n```svelte\n<script>\n\tlet activeTab = $state('First');\n</script>\n\n<Tabbar \n\titems={['First', 'Second', 'Third']} \n\tbind:value={activeTab}\n\torientation=\"vertical\"\n/>\n```\n\n### Different Alignments\n```svelte\n<script>\n\tlet activeTab = $state('One');\n</script>\n\n<!-- Centered tabs -->\n<Tabbar items={['One', 'Two', 'Three']} bind:value={activeTab} alignment=\"center\" />\n\n<!-- Right-aligned tabs -->\n<Tabbar items={['One', 'Two', 'Three']} bind:value={activeTab} alignment=\"end\" />\n```\n\n### Full Width Tabs\n```svelte\n<script>\n\tlet activeTab = $state('Tab 1');\n</script>\n\n<!-- Full width tabbar where tabs expand to fill available space -->\n<Tabbar items={['Tab 1', 'Tab 2', 'Tab 3']} bind:value={activeTab} fullWidth />\n```\n\n### With onValueChange Callback\n```svelte\n<script lang=\"ts\">\n\tlet activeTab = $state('Tab 1');\n\t\n\tfunction handleTabChange(value: string) {\n\t\tconsole.log('Active tab changed to:', value); // e.g. 'Tab 2'\n\t}\n</script>\n\n<Tabbar \n\titems={['Tab 1', 'Tab 2', 'Tab 3']} \n\tbind:value={activeTab}\n\tonValueChange={handleTabChange}\n/>\n```\n\n### Different Sizes and Colors\n```svelte\n<script>\n\tlet activeTab = $state('Small');\n</script>\n\n<!-- Small size with secondary color -->\n<Tabbar \n\titems={['Small', 'Tabs']} \n\tbind:value={activeTab}\n\tsize=\"small\"\n\tcolor=\"secondary\"\n/>\n\n<!-- Large size with success color -->\n<Tabbar \n\titems={['Large', 'Tabs']} \n\tbind:value={activeTab}\n\tsize=\"large\"\n\tcolor=\"success\"\n/>\n```\n\n### Complex Tabs with Badges\n```svelte\n<script>\n\timport { Chip } from 'entasis/chip';\n\t\n\tlet activeTab = $state('Inbox');\n</script>\n\n{#snippet unreadCount()}\n\t<Chip color=\"danger\" size=\"small\">5</Chip>\n{/snippet}\n\n<Tabbar\n\titems={['Inbox', { label: 'Messages', suffix: unreadCount }, 'Sent']}\n\tbind:value={activeTab}\n/>\n```\n\n### External Links\n```svelte\n<script>\n\tconst tabs = [\n\t\t{ label: 'Internal', href: '/dashboard' },\n\t\t{ label: 'External', href: 'https://example.com', target: '_blank', rel: 'noopener' }\n\t];\n</script>\n\n<Tabbar items={tabs} />\n```\n\n## Accessibility\n\nThe Tabbar component follows WAI-ARIA best practices for tablist patterns:\n\n### ARIA Attributes\n- Sets `role=\"tablist\"` on the container\n- Sets `role=\"tab\"` on each tab button\n- Sets `aria-selected=\"true\"` on the active tab, `\"false\"` on others\n- Gives each tab a stable `id` (`{id}-tab-{index}`) and, with `controlsPanels`, an `aria-controls` pointing at its panel\n- Sets `aria-disabled=\"true\"` on disabled tabs\n- Sets `aria-activedescendant` on the container to reference the active tab\n- Implements roving tabindex pattern (active tab has `tabindex=\"0\"`, others have `tabindex=\"-1\"`)\n\n### Keyboard Navigation\nFull keyboard support following WAI-ARIA best practices:\n\n**Horizontal Orientation:**\n- **Arrow Left**: Move focus to previous tab\n- **Arrow Right**: Move focus to next tab\n- **Home**: Move focus to first tab\n- **End**: Move focus to last tab\n- **Enter/Space**: Activate the focused tab\n\n**Vertical Orientation:**\n- **Arrow Up**: Move focus to previous tab\n- **Arrow Down**: Move focus to next tab\n- **Home**: Move focus to first tab\n- **End**: Move focus to last tab\n- **Enter/Space**: Activate the focused tab\n\n**Behavior:**\n- Arrow keys move keyboard **focus** (visual indicator with ring)\n- Enter/Space keys **activate** the focused tab (changes selection)\n- Focus automatically wraps around (loops from last to first and vice versa)\n- Disabled tabs are automatically skipped during navigation\n- Focused tab automatically scrolls into view (smooth scroll)\n- All navigation keys are prevented from scrolling the page\n- Focus ring color matches the tab's color scheme\n\n**Visual States:**\n- **Active tab**: Colored text, background, and bottom/left border\n- **Focused tab**: Ring outline in theme color (keyboard navigation)\n- **Inactive tab**: Neutral gray text with subtle hover effect\n\n## Notes\n\n- When `href` is provided in a tab, it renders as an `<a>` tag, otherwise as a `<button>`\n- Disabled tabs cannot be clicked and do not trigger `onValueChange`\n- The active tab is identified by its string value (a string item's label, or an object item's `value` / string label); give object items an explicit `value` when labels may change or are snippets\n- The `value` prop is bindable for two-way data binding\n- Tabs with `href` will not update `value` on click (they navigate instead)\n- Icon/content sizing is automatically adjusted based on tab size\n- The component is fully responsive and works with all color schemes\n\n## Theme Customization\n\nThe Tabbar component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main tabbar container styles\n- **tab**: Individual tab styles\n- **indicator**: The single measured active indicator that slides between tabs\n- **staticIndicator**: The CSS-only indicator rendered inside the active tab for SSR / pre-hydration\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for tabbar container\n- Variants:\n  - orientation: 'horizontal' | 'vertical' - Tab orientation\n  - scrollFade: 'none' | 'x' | 'y' - Logical-axis scroll fade, applied only while the list overflows\n  - alignment: 'start' | 'center' | 'end' - Tab alignment\n  - size: 'small' | 'normal' | 'large' - Gap between tabs\n  - variant: 'underline' | 'pill' - Track styling\n  - fullWidth: boolean - Expand the tabbar to fill its container\n\n**tab**:\n- base: Base classes for tab items\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding, text size and gap\n  - color: Color variants\n  - active: boolean - Active state styling\n  - focused: boolean - Keyboard-focused state styling\n  - disabled: boolean - Disabled state styling\n  - orientation: 'horizontal' | 'vertical'\n  - position: 'top' | 'bottom' | 'left' | 'right' - Indicator edge\n  - variant: 'underline' | 'pill'\n  - fullWidth: boolean\n\n**indicator**:\n- base: Base classes for the sliding active indicator\n- Variants:\n  - variant: 'underline' | 'pill' - Bar or raised pill\n\n**staticIndicator**:\n- base: Base classes for the SSR indicator\n- Variants:\n  - variant: 'underline' | 'pill'\n  - position: 'top' | 'bottom' | 'left' | 'right' - Which tab edge the underline sits on\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Tabbar items={tabs}\n  bind:value={activeTab}\n  theme={{\n    root: {\n      base: 'border-b-2 border-gray-200',\n      size: {\n        normal: 'gap-4'\n      }\n    },\n    tab: {\n      active: {\n        true: 'border-b-2 border-primary'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Active State**:\n```svelte\n<Tabbar items={tabs}\n  bind:value={activeTab}\n  theme={{\n    tab: {\n      active: {\n        true: 'bg-primary text-white rounded-t-lg'\n      }\n    },\n    indicator: {\n      base: 'bg-primary h-1 rounded-full'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setTabbarTheme } from '../components/Tabbar/index.ts';\n  \n  setTabbarTheme({\n    root: {\n      base: 'border-b border-gray-200',\n      size: {\n        normal: 'gap-2'\n      }\n    },\n    tab: {\n      base: 'transition-colors',\n      active: {\n        true: 'text-primary border-b-2 border-primary'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'table-of-contents': "\n# TableOfContents Component\n\nTableOfContents discovers headings inside a content target or accepts an explicit item array, then renders native anchor links beside a measured, indented rail. Wrapped labels stay aligned because the rail is measured from the rendered links. Every matching heading currently visible in the viewport is highlighted, while the last visible heading receives `aria-current=\"location\"`.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n  import { TableOfContents } from '../components/TableOfContents/index.ts';\n</script>\n\n<aside>\n  <TableOfContents target=\"#article\" levels={[2, 3, 4]} />\n</aside>\n\n<article id=\"article\">\n  <h2>Foundations</h2>\n  <h3>Tokens</h3>\n  <h4>Color roles</h4>\n</article>\n```\n\nHeadings without an `id` receive a stable slug id when discovered. Existing unique ids are preserved. Links remain ordinary `href=\"#heading-id\"` anchors, so browser history works normally. Use author ids when headings must remain addressable without scripts.\n\n## Props\n\n- **target**: `string | HTMLElement | null` - CSS selector or element containing the headings to discover or use as the visibility boundary. Selector targets receive a pre-hydration fallback; element targets are discovered on the client.\n- **items**: `readonly TableOfContentsItem[]` - Explicit ordered data with `id`, `level`, and `title`. When provided, it takes precedence over target discovery, including an empty array. Matching heading ids enable visibility highlighting; links still render when a heading is absent.\n- **levels**: `readonly (1 | 2 | 3 | 4 | 5 | 6)[]` (default: `[2, 3, 4]`) - Semantic heading levels included in document order.\n- **activationThresholds**: `{ viewportInset?: number; scrollRootInset?: number; currentOffset?: number }` - Controls the active region. Defaults are `96`, `16`, and `48` pixels respectively. Negative values clamp to zero; non-finite values use their default.\n- **scrollOffset**: `number` - Optional anchor landing offset in pixels. Applies `scroll-margin-block-start` to matched headings, clamps negative values to zero, and leaves existing heading styles untouched when omitted.\n- **density**: `number | 'compact' | 'normal' | 'comfortable'` (default: `'normal'`) - Row density preset or numeric density factor. Presets resolve to `0.6`, `0.8`, and `1` respectively. Negative factors clamp to `0`; non-finite factors resolve to the default.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Scales title typography, indentation, bends, connectors, strokes, and markers together. Rail geometry factors resolve to `0.875`, `1`, and `1.125` respectively.\n- **showRail**: `boolean` (default: `true`) - Shows the continuous measured rail path. Connectors and markers remain independently controlled by their own props.\n- **showMarkers**: `boolean | 'active' | 'always'` (default: `true`) - Controls marker visibility. `true` is an alias for active-only markers, `'always'` shows a marker for every item, and `false` hides them.\n- **showConnectors**: `boolean` (default: `true`) - Shows the lateral lines between the rail and labels. Disabling them contracts the label gutter to a small gap after the marker or rail.\n- **indentSize**: `number` (default: `14`) - Base horizontal pixels added for each deeper semantic heading level before the size factor is applied. Invalid or negative values resolve to `0`.\n- **indentRadius**: `number` (default: `6`) - Base maximum pixel radius used when the rail bends between heading depths before the size factor is applied. The rendered radius is clamped to the available horizontal and vertical space. Use `0` for square corners.\n- **color**: semantic color token (default: `'primary'`) - Highlight color for visible labels, rail segments, and markers.\n- **label**: `string` (default: `'Table of contents'`) - Accessible navigation landmark label.\n- **ref**: bindable `HTMLElement | null` - Root navigation reference.\n- **class**: `string` - Classes merged onto the root navigation element.\n- **theme**: `TableOfContentsThemeProps` - Per-instance theme overrides.\n\n## Target Selectors\n\n```svelte\n<TableOfContents target=\"#article\" levels={[2, 3]} />\n\n<article id=\"article\">\n  <h2 id=\"overview\">Overview</h2>\n  <h3 id=\"requirements\">Requirements</h3>\n</article>\n```\n\nA selector target renders a pre-hydration list, neutral rail, and connectors into a stable server-rendered shell, preventing the navigation from appearing only after hydration. Active segments and markers begin with hydrated visibility tracking. Use a unique selector for each article. Element references remain available for dynamic targets, but they are discovered after hydration and therefore cannot provide this initial fallback.\n\n## Explicit Items\n\n`items` is useful when Markdown, a CMS, or another parser already produced the table-of-contents data.\n\n```svelte\n<script lang=\"ts\">\n  import { TableOfContents, type TableOfContentsItem } from '../components/TableOfContents/index.ts';\n\n  const items: TableOfContentsItem[] = [\n    { id: 'overview', level: 2, title: 'Overview' },\n    { id: 'requirements', level: 3, title: 'Requirements' }\n  ];\n</script>\n\n<TableOfContents {items} />\n\n<article>\n  <h2 id=\"overview\">Overview</h2>\n  <h3 id=\"requirements\">Requirements</h3>\n</article>\n```\n\nArray order is preserved, duplicate or empty ids are omitted, and `levels` still filters the result. The list and neutral rail render before hydration. Add `target` as well when the headings live inside a specific clipping or dynamically changing content region.\n\n## Rail Treatments\n\n```svelte\n<TableOfContents\n  target=\"#article\"\n  size=\"small\"\n  showRail={false}\n  showMarkers=\"always\"\n  showConnectors\n  indentSize={20}\n  indentRadius={0}\n  density=\"compact\"\n  color=\"secondary\"\n/>\n```\n\n## Activation Thresholds\n\n`viewportInset` defines the active band inside the browser viewport when the content has no clipping ancestor. `scrollRootInset` applies the same rule to nested scrolling and clipping containers. `currentOffset` chooses the current heading between visible heading boundaries.\n\n```svelte\n<TableOfContents\n  target=\"#article\"\n  activationThresholds={{\n    viewportInset: 80,\n    scrollRootInset: 12,\n    currentOffset: 32\n  }}\n/>\n```\n\n## Anchor Landing Offset\n\n`scrollOffset` keeps linked headings clear of sticky headers without replacing native anchor behavior. It works for click navigation, browser history, deep links, and nested scroll containers because the offset is applied through logical CSS scroll margin.\n\n```svelte\n<TableOfContents target=\"#article\" scrollOffset={72} />\n```\n\n## Behavior\n\n- Heading text and ids are refreshed when the target content changes.\n- Explicit items retain their supplied titles and order; target mutations only refresh their heading associations.\n- Selector targets render matching heading links and measured neutral rail geometry into a stable shell before hydration. Always-visible markers render there too, then hand off to measured live state.\n- Layout and active state are synchronized through resize, scroll, and hash changes.\n- Activation thresholds update reactively and retain the existing `96 / 16 / 48` behavior when omitted.\n- Scroll offset updates reactively. The component restores each heading's previous inline scroll margin when the prop is removed, the heading leaves the target, or the component is destroyed.\n- Nested clipping and scroll containers are intersected automatically for visibility calculations.\n- Long TOCs use ScrollArea inside their bounded navigation viewport; active-link tracking never moves an application ancestor.\n- Density changes vertical spacing only; size scales typography and coordinated rail geometry.\n- Rail, connectors, and markers are independent. The gutter remains while any decoration is enabled and collapses only when all three are false.\n- Connector mode uses the extended lateral gutter; without connectors, labels move closer to the marker or rail edge.\n- Marker visibility can follow active headings, remain visible for every item, or be disabled. Always-visible markers use the neutral rail color until their heading is active. Marker size follows both semantic heading depth and the component size.\n- The SVG is decorative and pointer-inert. The ordered list retains valid navigation semantics.\n\n## Accessibility\n\n- Renders a labelled `nav` landmark containing an ordered list of native anchor links.\n- The last visible heading uses `aria-current=\"location\"`.\n- Keyboard focus uses the selected semantic color and remains independent from pointer hover.\n- Selector targets assign generated heading ids before hydration; element targets assign them during client discovery. Use author-supplied ids for no-script deep links.\n\n## Theme Parts\n\n- **root**: navigation landmark\n- **content**: relative rail/list composition wrapper\n- **list**: ordered list\n- **item**: list item\n- **link**: native anchor, with `size` and `highlighted` variants\n- **rail**: decorative SVG\n- **track**: inactive rail and connectors\n- **active**: highlighted rail and connectors\n- **marker**: active or always-visible discs\n";
+    readonly tabs: "\n# Tabs Component\n\nTabs combines Tabbar navigation with Stepper-powered animated panels.\n\n## Usage\n\nUse items for the tab collection and a single children snippet for the repeated panel content. The snippet receives the instance handle as api, the current item, and the zero-based index. The active tab is addressed by its string value (an item's `value`, else its string label).\n\n<script lang=\"ts\">\n\timport { Tabs } from '$lib/components/Tabs';\n\n\tconst items = [\n\t\t{ value: 'overview', label: 'Overview', title: 'Overview', body: 'A summary of the current workspace.' },\n\t\t{ value: 'activity', label: 'Activity', title: 'Activity', body: 'Recent events and changes.' },\n\t\t{ value: 'settings', label: 'Settings', title: 'Settings', body: 'Configuration for this resource.' }\n\t];\n\tlet value = $state('overview');\n</script>\n\n<Tabs {items} bind:value tabbar={{ size: 'small', color: 'secondary', fullWidth: true }}>\n\t{#snippet children({ item, index, api })}\n\t\t<section class=\"space-y-3 p-6\">\n\t\t\t<p class=\"text-sm text-neutral/70\">Panel {index + 1}</p>\n\t\t\t<h2>{item.title}</h2>\n\t\t\t<p>{item.body}</p>\n\t\t\t<button onclick={() => api.goTo(0)}>Back to overview</button>\n\t\t</section>\n\t{/snippet}\n</Tabs>\n\n## Props\n\n- items: required array of TabItem values. Each item is used by Tabbar and passed to children as item. A string item is its own value; an object item resolves to its `value`, else its string label, else its index as a string.\n- children: repeated panel renderer called with { api, item, index }.\n- value: bindable string value of the active tab (defaults to the first tab's value).\n- defaultValue: initial active tab value when value is omitted.\n- onValueChange: called once per change with { value, item, index }; not called when the current tab is re-selected or when value is changed externally.\n- placement: top, bottom, left, or right. Also drives the default tabbar orientation.\n- api: bindable TabsApi (a StepperState) for next(), previous(), and goTo(index).\n- transition: panel swap timing override (`duration` in ms, `easing`); responsive, and it beats the `motion` theme slot.\n- tabbar: props forwarded to the inner Tabbar as one object — `{ size, orientation, color, alignment, fullWidth, variant, scrollFade, label, class, theme }`. `orientation` overrides the placement-derived default.\n- mount: when a panel's content is created — `lazy` (default) on first activation and destroyed when the tab is left, `once` on first activation and kept, `eager` for every panel up front. Inactive panels are `hidden` and `inert` in every mode.\n- class: extra classes for the root.\n- theme: theme overrides for the Tabs wrapper.\n\n## Composition Rules\n\n- Render panel content through children.\n- Put per-panel differences in the item data and branch inside children when needed.\n- Use value (a string) as the public controlled state; compare against item values, not indexes.\n- Use api only when external controls need programmatic navigation.\n\n## Structure\n\nTabs renders a Tabbar next to a Stepper. Tabbar owns the clickable tab controls; Stepper owns the animated panel track.\n\n## Accessibility\n\nTabs wires the tablist to its panels: every tab has an id (`{id}-tabs-tab-{index}`), `aria-selected`, and `aria-controls`; every panel renders with role=\"tabpanel\", id `{id}-tabs-panel-{index}`, and `aria-labelledby` pointing back at its tab. Inactive panels are `hidden`, inert and out of the tab order, so only the active panel reaches the text and accessibility layers.\n\n## Theme Parts\n\n- root: wrapper around the Tabbar and panel content.\n- content: Stepper wrapper for tab panels.\n\nThe theme supports the placement variant on root and content.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) for the panel swap; the resolved\n  `{ in, out }` is forwarded to the inner Stepper's `transition`, where it wins.\n- Ladder: `<Theme components={{ tabs: { motion } }}>` → `setTabsTheme({ motion })` →\n  `theme.motion` → the `transition` prop. Reduced motion snaps between panels.\n";
+    readonly 'context-menu': "\n# ContextMenu Component\n\nWraps a target and opens a menu anchored at the cursor on right-click. Built on PopupMenu using a\nfloating-ui virtual element, so the menu appears exactly at the pointer (and flips near viewport edges).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ContextMenu } from 'entasis/context-menu';\n\timport { copyIcon } from 'entasis/icons/copy';\n\timport { trashIcon } from 'entasis/icons/trash';\n</script>\n\n<ContextMenu\n\titems={[\n\t\t{ type: 'option', prefix: copyIcon, title: 'Copy' },\n\t\t{ type: 'option', title: 'Paste' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: trashIcon, title: 'Delete', color: 'danger' }\n\t]}\n>\n\t<div class=\"rounded border p-10\">Right-click me</div>\n</ContextMenu>\n```\n\n## Props\n\n### Core Props\n- **items**: MenuItem[] (required) - Menu entries shown on right-click. Same item shapes as Menu: type 'button', 'option', 'separator', or 'submenu'.\n- **children**: Snippet (required) - The right-click target content.\n- **disabled**: boolean (default: false) - When true, right-click is ignored and the native context menu shows.\n\n### Bindable Props\n- **open**: boolean - Open state of the context menu.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload) => void - Called after the close transition finishes.\n\n### Advanced Props\n- **menu**: Omit<MenuProps, 'items'> - Overrides forwarded to the underlying Menu (header, footer, theme).\n- **popup**: PopupMenu/Popover overrides (offset, closeOnEscape, ...). position and ref are managed internally.\n- **class**: string - Class on the wrapper around the target content.\n\n## Behavior\n\n- Right-click on the target opens the menu at the cursor via a virtual reference element.\n- Keyboard: Shift+F10 or the ContextMenu key, while focus is inside the target, opens the menu anchored to the focused element.\n- Touch: a 500 ms long-press opens the menu at the finger; moving or lifting the finger earlier cancels it.\n- A second right-click elsewhere re-mounts the menu at the new point.\n- Left-click outside, Escape, or selecting an item closes it.\n- Submenus, keyboard navigation, and highlighting are inherited from Menu.\n\n## Accessibility\n\nThe menu is a role=\"menu\" with role=\"menuitem\" children and full keyboard navigation (arrows, Home/End,\nEnter, Escape, and ArrowRight/Left for submenus), plus type-ahead. Keyboard users open it with\nShift+F10 or the ContextMenu key; touch users with a long-press. The target wrapper is a plain\nelement with contextmenu, keydown, and pointer handlers.\n\n## Notes\n\n- Anchoring uses a floating-ui virtual element (a zero-size DOMRect at clientX/clientY).\n- For a menu flush with the cursor, pass `popup={{ offset: 0 }}`.\n";
+    readonly menu: "\n# Menu Component\n\nThe Menu component is a flexible container that renders an array of menu items including Buttons, MenuOptions, and Separators. It provides theme forwarding capabilities and manages vertical layout with configurable spacing.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Menu, type MenuItem } from 'entasis/menu';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { gearIcon } from 'entasis/icons/gear';\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Profile', prefix: userIcon },\n\t\t{ type: 'option', title: 'Settings', prefix: gearIcon },\n\t\t{ type: 'separator' },\n\t\t{ type: 'button', children: 'Logout', color: 'danger', variant: 'ghost' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n\n<!-- With optional header and footer -->\n<Menu {items}>\n\t{#snippet header()}\n\t\t<div class=\"px-2 pb-2 border-b mb-2\">\n\t\t\t<h3>Menu Title</h3>\n\t\t</div>\n\t{/snippet}\n\t{#snippet footer()}\n\t\t<div class=\"px-2 pt-2 border-t mt-2\">\n\t\t\t<p class=\"text-xs\">Footer content</p>\n\t\t</div>\n\t{/snippet}\n</Menu>\n```\n\n## Props\n\n### Core Props\n- **items**: MenuItem[] (required)\n  - Array of menu items to render\n  - Each item must have a `type` field: 'button', 'option', or 'separator'\n  - Items are spread with their respective component props\n\n- **class**: string - Additional CSS classes for the menu container\n\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing density: controls the gap between rows and is forwarded to every MenuOption row (option, submenu trigger, back control); a per-item `density` wins. Items of type 'button' render a Button, which has no density axis and is unaffected.\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Type/icon scale of every MenuOption row; a per-item `size` wins. Items of type 'button' are unaffected.\n\n- **color**: Colors - Role every MenuOption row follows unless the item names its own `color`. Left undefined, each row keeps the MenuOption default.\n\nAll three axes (`density`, `size`, `color`) are inherited by submenus: a submenu is the same menu one level down and opens on the axes its parent was given.\n\n- **header**: Snippet - Optional header content rendered at the top of the menu\n\n- **footer**: Snippet - Optional footer content rendered at the bottom of the menu\n\n- **theme**: MenuThemeProps - Custom theme overrides\n  - menu: Theme for the container (gap spacing, layout)\n  - button: Theme forwarded to Button components\n  - option: Theme forwarded to MenuOption components\n  - separator: Theme forwarded to Separator components\n  - submenu: Theme forwarded to submenu MenuOption triggers\n\n- **submenuMode**: 'auto' | 'popover' | 'stack' (default: 'auto')\n  - auto: floating submenus normally, stacked views inside mobile-sheet popovers\n  - popover: always open submenus as nested PopupMenu instances\n  - stack: navigate to submenu views inside the same menu surface\n\n## MenuItem Types\n\nThe Menu accepts a discriminated union of four item types:\n\n### Button Item\n```typescript\nimport type { MenuItem } from 'entasis/menu';\n\nconst buttonItem = {\n\ttype: 'button',\n\tchildren: 'Log out',\n\tvariant: 'ghost',\n\tcolor: 'danger'\n} satisfies MenuItem;\n```\n\n### MenuOption Item\n```typescript\nimport type { MenuItem } from 'entasis/menu';\n\nconst optionItem = {\n\ttype: 'option',\n\ttitle: 'Profile',\n\tdescription: 'Manage your account',\n\thref: '/profile'\n} satisfies MenuItem;\n```\n\n### Separator Item\n```typescript\nimport type { MenuItem } from 'entasis/menu';\n\nconst separatorItem = {\n\ttype: 'separator',\n\tcolor: 'neutral',\n\tdecorative: true\n} satisfies MenuItem;\n```\n\n### Submenu Item\n```typescript\nimport type { MenuItem } from 'entasis/menu';\n\nconst submenuItem = {\n\ttype: 'submenu',\n\ttitle: 'Settings',\n\tmenu: [\n\t\t{ type: 'option', title: 'General' },\n\t\t{ type: 'option', title: 'Privacy' }\n\t],\n\topenOnHover: true,\n\tdelay: 100\n} satisfies MenuItem;\n```\n\n## Structure\n\nThe menu follows this DOM structure:\n```\n<Menu>\n\t<div role=\"menu\">\n\t\t<!-- Items rendered based on type -->\n\t\t<Button />\n\t\t<MenuOption />\n\t\t<Separator />\n\t\t<!-- ... -->\n\t</div>\n</Menu>\n```\n\n## Examples\n\n### Simple Menu\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { fileIcon } from 'entasis/icons/file';\n\timport { folderIcon } from 'entasis/icons/folder';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'New File', prefix: fileIcon },\n\t\t{ type: 'option', title: 'Open...', prefix: folderIcon },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', title: 'Exit', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Menu with Buttons\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'button', children: 'Save', variant: 'solid', color: 'primary' },\n\t\t{ type: 'button', children: 'Cancel', variant: 'ghost' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Menu with Descriptions\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { starIcon } from 'entasis/icons/star';\n\timport { checkIcon } from 'entasis/icons/check';\n\timport { buildingIcon } from 'entasis/icons/building';\n\n\tconst items = [\n\t\t{ \n\t\t\ttype: 'option',\n\t\t\ttitle: 'Pro Plan',\n\t\t\tdescription: 'For growing teams',\n\t\t\tprefix: starIcon,\n\t\t\tsuffix: checkIcon\n\t\t},\n\t\t{ \n\t\t\ttype: 'option',\n\t\t\ttitle: 'Enterprise',\n\t\t\tdescription: 'For large organizations',\n\t\t\tprefix: buildingIcon\n\t\t}\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Menu with Event Handlers\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tfunction handleProfile() {\n\t\tconsole.log('Profile clicked');\n\t}\n\t\n\tfunction handleLogout() {\n\t\tconsole.log('Logout clicked');\n\t}\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Profile', onclick: handleProfile },\n\t\t{ type: 'separator' },\n\t\t{ type: 'button', children: 'Logout', onclick: handleLogout, color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Custom Theme\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst customTheme = {\n\t\troot: {\n\t\t\tbase: 'gap-3' // More spacing between items\n\t\t},\n\t\toption: {\n\t\t\troot: {\n\t\t\t\tbase: 'px-4 py-3'\n\t\t\t}\n\t\t}\n\t};\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Option 1' },\n\t\t{ type: 'option', title: 'Option 2' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} theme={customTheme} />\n```\n\n### Menu with Links\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Dashboard', href: '/dashboard' },\n\t\t{ type: 'option', title: 'Profile', href: '/profile' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'button', children: 'External Link', href: 'https://example.com', target: '_blank' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Menu with Submenus\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { gearIcon } from 'entasis/icons/gear';\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Dashboard' },\n\t\t{ type: 'option', title: 'Profile' },\n\t\t{\n\t\t\ttype: 'submenu',\n\t\t\tprefix: gearIcon,\n\t\t\ttitle: 'Settings',\n\t\t\tmenu: [\n\t\t\t\t{ type: 'option', title: 'General' },\n\t\t\t\t{ type: 'option', title: 'Privacy' },\n\t\t\t\t{ type: 'option', title: 'Security' }\n\t\t\t]\n\t\t},\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', title: 'Log Out', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Stacked Submenus\n```svelte\n<Menu {items} submenuMode=\"stack\" />\n```\n\n### Nested Submenus\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'New File' },\n\t\t{\n\t\t\ttype: 'submenu',\n\t\t\ttitle: 'Recent Files',\n\t\t\tmenu: [\n\t\t\t\t{ type: 'option', title: 'document.txt' },\n\t\t\t\t{ type: 'option', title: 'project.js' },\n\t\t\t\t{\n\t\t\t\t\ttype: 'submenu',\n\t\t\t\t\ttitle: 'More',\n\t\t\t\t\tmenu: [\n\t\t\t\t\t\t{ type: 'option', title: 'file1.txt' },\n\t\t\t\t\t\t{ type: 'option', title: 'file2.txt' }\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', title: 'Save' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Submenu with Custom Trigger Behavior\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Option 1' },\n\t\t{\n\t\t\ttype: 'submenu',\n\t\t\ttitle: 'Click Only',\n\t\t\topenOnHover: false,\n\t\t\topenOnClick: true,\n\t\t\tmenu: [\n\t\t\t\t{ type: 'option', title: 'Sub Option 1' },\n\t\t\t\t{ type: 'option', title: 'Sub Option 2' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: 'submenu',\n\t\t\ttitle: 'Hover with Delay',\n\t\t\topenOnHover: true,\n\t\t\tdelay: 500,\n\t\t\tmenu: [\n\t\t\t\t{ type: 'option', title: 'Sub Option 1' },\n\t\t\t\t{ type: 'option', title: 'Sub Option 2' }\n\t\t\t]\n\t\t}\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Menu with Header\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Profile' },\n\t\t{ type: 'option', title: 'Settings' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', title: 'Log Out', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items}>\n\t{#snippet header()}\n\t\t<div class=\"border-b pb-2 mb-2\">\n\t\t\t<h3 class=\"text-sm font-semibold px-2\">User Menu</h3>\n\t\t\t<p class=\"text-xs text-gray-500 px-2\">Manage your account</p>\n\t\t</div>\n\t{/snippet}\n</Menu>\n```\n\n### Menu with Footer\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Item 1' },\n\t\t{ type: 'option', title: 'Item 2' },\n\t\t{ type: 'option', title: 'Item 3' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items}>\n\t{#snippet footer()}\n\t\t<div class=\"border-t pt-2 mt-2\">\n\t\t\t<div class=\"text-xs text-gray-500 px-2\">Version 1.0.0</div>\n\t\t</div>\n\t{/snippet}\n</Menu>\n```\n\n### Menu with Header and Footer\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\n\tconst items = [\n\t\t{ type: 'option', prefix: userIcon, title: 'Profile' },\n\t\t{ type: 'option', prefix: gearIcon, title: 'Settings' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: signOutIcon, title: 'Log Out', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items}>\n\t{#snippet header()}\n\t\t<div class=\"border-b pb-2 mb-2\">\n\t\t\t<div class=\"flex items-center gap-2 px-2\">\n\t\t\t\t<div class=\"w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white\">\n\t\t\t\t\tJD\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"text-sm font-semibold\">John Doe</div>\n\t\t\t\t\t<div class=\"text-xs text-gray-500\">john@example.com</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n\t{#snippet footer()}\n\t\t<div class=\"border-t pt-2 mt-2\">\n\t\t\t<div class=\"text-xs text-gray-500 px-2 text-center\">\n\t\t\t\t<a href=\"/privacy\">Privacy</a> · <a href=\"/terms\">Terms</a>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n</Menu>\n```\n\n### Mixed Size Items\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Small Option', size: 'small' },\n\t\t{ type: 'option', title: 'Normal Option', size: 'normal' },\n\t\t{ type: 'option', title: 'Large Option', size: 'large' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'button', children: 'Large Button', size: 'large', variant: 'solid' }\n\t] satisfies MenuItem[];\n</script>\n\n<Menu {items} />\n```\n\n### Density\n```svelte\n<!-- density tightens/loosens the row gap and every option row's paddings.\n     Button items are unaffected (Button has no density axis). -->\n<Menu {items} density=\"compact\" />\n<Menu {items} density=\"normal\" />\n<Menu {items} density=\"comfortable\" />\n```\n\n## Accessibility\n\n- Automatically sets `role=\"menu\"` on the container\n- Option items render `role=\"menuitem\"`; an option that passes `selected` (true or false) renders `role=\"menuitemradio\"` with `aria-checked`, so a check-marked choice is announced as checked rather than as a plain command\n- ArrowUp / ArrowDown move the highlight, Home / End jump, Enter or Space activates, ArrowRight opens a submenu and ArrowLeft closes it (mirrored in RTL)\n- Type-ahead: typing letters moves the highlight to the next item whose label starts with the typed text\n- Supports keyboard navigation through child components\n- MenuOption and Button items handle interactive states\n\n## Theme Forwarding\n\nThe Menu component forwards theme props to its child components:\n- `theme.menu` - Applied to the container (gap, layout)\n- `theme.button` - Forwarded to all Button items\n- `theme.option` - Forwarded to all MenuOption items\n- `theme.separator` - Forwarded to all Separator items\n- `theme.submenu` - Forwarded to submenu MenuOption triggers\n\nThis allows for consistent styling across all menu items while maintaining flexibility for individual customization.\n\n## Submenu Behavior\n\nSubmenu items automatically:\n- Add a caret-right icon as suffix (unless custom suffix provided)\n- Open submenus positioned to the right (right-start)\n- Support hover and click triggers (configurable)\n- Manage submenu state internally using PopupMenu\n- Support nested submenus (submenus within submenus)\n\nDefault submenu behavior:\n- Opens on hover (after 100ms delay)\n- Opens on click\n- Closes when the pointer leaves the submenu prediction cone and rectangle tolerance\n- Does not close when clicking items inside (allows multi-interaction)\n\n## Notes\n\n- The Menu component is a controlled component that renders based on the items array\n- Items are distinguished by their `type` property using TypeScript discriminated unions\n- Each item type spreads its respective component props for full flexibility\n- The menu container uses minimal styling, focusing on vertical layout and spacing\n- Theme forwarding allows global styling of all items of a specific type\n\n## Theme Customization\n\nThe Menu component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main menu container styles\n- **button**: Theme forwarded to Button items (optional)\n- **option**: Theme forwarded to MenuOption items (optional)\n- **separator**: Theme forwarded to Separator items (optional)\n- **submenu**: Theme forwarded to submenu MenuOption triggers (optional)\n\n### Theme Type Definition\n\n```typescript\nimport type { MenuThemeProps } from 'entasis/menu';\nimport type { ButtonThemeProps } from 'entasis/button';\nimport type { MenuOptionThemeProps } from 'entasis/menu-option';\nimport type { SeparatorThemeProps } from 'entasis/separator';\n\n// Example theme customization\nconst customTheme: MenuThemeProps = {\n  root: {\n    base: 'flex flex-col w-full',\n    density: {\n      compact: 'gap-0',\n      normal: 'gap-0.5',\n      comfortable: 'gap-1'\n    }\n  },\n  button: {\n    root: {\n      base: 'w-full justify-start'\n    }\n  },\n  option: {\n    root: {\n      density: {\n        normal: 'px-3 py-2'\n      }\n    }\n  },\n  separator: {\n    root: {\n      base: 'my-2'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for menu container\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Spacing between menu items\n\n**button** (optional):\n- Forwards theme to all Button items in the menu\n- See Button component theme documentation for available variants\n\n**option** (optional):\n- Forwards theme to all MenuOption items in the menu\n- See MenuOption component theme documentation for available variants\n\n**separator** (optional):\n- Forwards theme to all Separator items in the menu\n- See Separator component theme documentation for available variants\n\n**submenu** (optional):\n- Forwards theme to submenu MenuOption triggers\n- See MenuOption component theme documentation for available variants\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Menu\n  items={menuItems}\n  theme={{\n    root: {\n      density: {\n        normal: 'gap-2'\n      }\n    }\n  }}\n/>\n```\n\n**Theme Forwarding to Child Components**:\n```svelte\n<Menu\n  items={menuItems}\n  theme={{\n    root: {\n      density: {\n        comfortable: 'gap-3'\n      }\n    },\n    option: {\n      root: {\n        density: {\n          normal: 'px-4 py-3 min-h-10'\n        },\n        color: {\n          primary: 'text-blue-600 highlight:bg-blue-50'\n        }\n      }\n    },\n    separator: {\n      root: {\n        base: 'my-3',\n\t\tcolor: {\n\t\t\tneutral: 'before:border-gray-200 after:border-gray-200'\n\t\t}\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMenuTheme } from '../components/Menu/index.ts';\n  import { setMenuOptionTheme } from '../components/MenuOption/index.ts';\n  \n  // The global menu theme covers the container parts (root, header, footer).\n  // Option rows are themed globally through MenuOption's own setter.\n  setMenuTheme({\n    root: {\n      density: {\n        normal: 'gap-2'\n      }\n    }\n  });\n  setMenuOptionTheme({\n    root: {\n      base: 'rounded-lg',\n      density: {\n        normal: 'px-3 py-2'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'menu-bar': "\n# MenuBar Component\n\nMenuBar composes several PopupMenu and Menu instances into one horizontal application menu. A click or keyboard action opens the first menu. While any menu is open, moving the pointer or keyboard focus across another top-level trigger switches to that menu immediately.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { MenuBar, type MenuBarMenu } from 'entasis/menu-bar';\n\n\tconst menus: MenuBarMenu[] = [\n\t\t{\n\t\t\tlabel: 'File',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'New file' },\n\t\t\t\t{ type: 'option', title: 'Open...' },\n\t\t\t\t{ type: 'separator' },\n\t\t\t\t{ type: 'option', title: 'Save' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'Undo' },\n\t\t\t\t{ type: 'option', title: 'Redo' }\n\t\t\t]\n\t\t}\n\t];\n</script>\n\n<MenuBar {menus} />\n```\n\n## Interaction\n\n- Click, Enter, Space, ArrowDown, or ArrowUp opens the focused top-level menu.\n- ArrowLeft and ArrowRight move between closed top-level triggers (mirrored in RTL).\n- Typing letters jumps to the next top-level trigger whose label starts with the typed text; the same type-ahead works inside each open menu.\n- Once a menu is open, hovering or focusing a sibling trigger switches the open menu immediately.\n- ArrowLeft and ArrowRight inside an open root menu switch to the adjacent top-level menu.\n- ArrowRight on a submenu trigger remains owned by Menu and opens that submenu.\n- Escape and outside-click dismissal remain owned by Popover.\n- Selecting a leaf item closes the active menu by default.\n\n## Props\n\n- **menus**: MenuBarMenu[] (required) - Top-level menus. Each entry accepts a label, optional prefix/suffix, disabled state, and normal Menu props such as items, theme, header, footer, and submenuMode.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Size shared by every top-level trigger.\n- **dir**: 'ltr' | 'rtl' (optional) - Explicit text direction for horizontal keyboard navigation. When omitted it is auto-detected from the i18n direction context, else from the menubar's computed CSS direction.\n- **closeOnItemClick**: boolean (default: true) - Closes the active popup after a leaf item is selected.\n- **class**: string - Additional classes for the root menubar.\n- **theme**: MenuBarThemeProps - Theme overrides for the root and trigger parts.\n\n## Menu Entry\n\n```typescript\ntype MenuBarMenu = Omit<MenuProps, 'focusOnMount'> & {\n\tlabel: string | Snippet;\n\tprefix?: string | Snippet;\n\tsuffix?: string | Snippet;\n\tdisabled?: boolean;\n};\n```\n\n## Structure\n\n```\n<div role=\"menubar\">\n\t<Button role=\"menuitem\" haspopup=\"menu\" />\n\t<PopupMenu>\n\t\t<Menu />\n\t</PopupMenu>\n</div>\n```\n\n## Accessibility\n\nMenuBar uses the ARIA menubar/menu pattern. Its triggers use roving tabindex, expose expanded state and popup relationships, skip disabled entries, loop at either edge, and preserve nested submenu keyboard behavior.\n";
+    readonly 'menu-option': "\n# MenuOption Component\n\nThe MenuOption component is a flexible menu item that can be used in dropdown menus, navigation menus, or context menus. It supports title/description layout, custom content, icons, colors, and various interaction handlers.\n\n## Basic Usage\n\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tMy Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n## Props\n\n### Core Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Scales typography and icons only\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Owns paddings, gaps and min-height; reflected as `data-density` on the row. Combine freely with size.\n- **color**: Colors (default: 'primary') - Sets the semantic text color and persistent active tint\n  - Available: primary, secondary, success, warning, danger, info, neutral\n\n### Content Slots\nEither use **title/description** OR **children** (mutually exclusive):\n- **title**: Snippet - Main text of the menu item\n- **description**: Snippet - Secondary descriptive text below the title\n- **children**: Snippet - Custom content (replaces title+description)\n\n### Icon/Badge Slots\n- **prefix**: Snippet - Icon or badge at the start of the menu item\n- **suffix**: Snippet - Icon or badge at the end of the menu item\n\n### Interaction Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Link Props\n- **href**: string - If provided, renders as an anchor element\n- **target**: string - Link target attribute (e.g., '_blank')\n- **rel**: string - Link rel attribute (e.g., 'noopener noreferrer')\n\n### Listbox / option props\nMenuOption is also the shared row primitive for the listbox family (Command, Select, Combobox).\n- **role**: string - ARIA role override. Defaults to button/link/menuitem; pass `option` inside a `listbox`. Menu passes `menuitemradio` for option items that set `selected`.\n- **highlighted**: boolean - Keyboard-active state (virtual focus). Applies the highlight background and reflects to `data-highlighted`. Menus omit this and rely on `useNavigation` setting `data-highlighted` imperatively.\n- **selected**: boolean - Sets `data-selected` plus the role-appropriate state: `aria-checked` for checkable roles (`menuitemradio`, `menuitemcheckbox`, `checkbox`, `radio`, `switch`) and `aria-selected` for listbox `option` rows (pass a check icon via `suffix`).\n- **disabled**: boolean - Dims the row, sets `aria-disabled`, blocks pointer/click.\n- **attrs**: Record<string, any> - Extra attributes/handlers spread onto the row (`id`, `data-value`, `tabindex`, `onpointermove`, `onmousedown`).\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: MenuOptionThemeProps - Custom theme overrides\n- **as**: string - Override the automatic element type detection\n\n## Menu Structure\n\n```\n<MenuOption>\n\t<Prefix />              <!-- Icon/badge at start -->\n\t<Content>               <!-- Main content area -->\n\t\t<Title />           <!-- Primary text -->\n\t\t<Description />     <!-- Secondary text -->\n\t</Content>\n\t<Suffix />              <!-- Icon/badge at end -->\n</MenuOption>\n```\n\n## Examples\n\n### Basic Menu Item with Title\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Title and Description\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tAccount Settings\n\t{/snippet}\n\t{#snippet description()}\n\t\tManage your account preferences and security\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render gearIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Suffix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { caretRightIcon } from 'entasis/icons/caretRight';\n</script>\n\n<MenuOption>\n\t{#snippet title()}\n\t\tMore Options\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render caretRightIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Both Icons\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { checkIcon } from 'entasis/icons/check';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render userIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tJohn Doe\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render checkIcon({ class: 'text-success' })}\n\t{/snippet}\n</MenuOption>\n```\n\n### Different Sizes\n```svelte\n<MenuOption size=\"small\">\n\t{#snippet title()}Small Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"normal\">\n\t{#snippet title()}Normal Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"large\">\n\t{#snippet title()}Large Menu Item{/snippet}\n</MenuOption>\n```\n\n### Different Densities\n```svelte\n<!-- density scales paddings/gaps/min-height; size scales text/icons -->\n<MenuOption density=\"compact\">\n\t{#snippet title()}Small row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"normal\">\n\t{#snippet title()}Normal row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"comfortable\">\n\t{#snippet title()}Large row{/snippet}\n</MenuOption>\n```\n\n### Different Colors\n```svelte\n<MenuOption color=\"primary\">\n\t{#snippet title()}Primary{/snippet}\n</MenuOption>\n\n<MenuOption color=\"danger\">\n\t{#snippet title()}Delete{/snippet}\n</MenuOption>\n\n<MenuOption color=\"success\">\n\t{#snippet title()}Approve{/snippet}\n</MenuOption>\n```\n\n### Interactive Menu Item with Click Handler\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<MenuOption onclick={() => count++}>\n\t{#snippet title()}\n\t\tClicked {count} times\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Hover Handlers\n```svelte\n<script>\n\tlet isHovered = $state(false);\n</script>\n\n<MenuOption \n\tonpointerenter={() => isHovered = true}\n\tonpointerleave={() => isHovered = false}\n>\n\t{#snippet title()}\n\t\t{isHovered ? 'Hovering!' : 'Hover over me'}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item as Link\n```svelte\n<MenuOption href=\"/settings\">\n\t{#snippet title()}\n\t\tGo to Settings\n\t{/snippet}\n</MenuOption>\n```\n\n### External Link\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n</script>\n\n<MenuOption \n\thref=\"https://example.com\" \n\ttarget=\"_blank\" \n\trel=\"noopener noreferrer\"\n>\n\t{#snippet title()}\n\t\tVisit External Site\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Custom Content with Children\n```svelte\n<MenuOption>\n\t{#snippet children()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<img src=\"/avatar.jpg\" alt=\"User\" class=\"w-8 h-8 rounded-full\" />\n\t\t\t<div>\n\t\t\t\t<div class=\"font-bold\">John Doe</div>\n\t\t\t\t<div class=\"text-xs text-neutral/70\">john@example.com</div>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu with Multiple Options\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\timport { questionIcon } from 'entasis/icons/question';\n</script>\n\n<div class=\"w-64 bg-surface rounded-xl border border-neutral-muted p-1\">\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render userIcon()}{/snippet}\n\t\t{#snippet title()}Profile{/snippet}\n\t\t{#snippet description()}View and edit your profile{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render gearIcon()}{/snippet}\n\t\t{#snippet title()}Settings{/snippet}\n\t\t{#snippet description()}Manage your preferences{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render questionIcon()}{/snippet}\n\t\t{#snippet title()}Help & Support{/snippet}\n\t</MenuOption>\n\t\n\t<div class=\"border-t border-neutral-muted my-1\"></div>\n\t\n\t<MenuOption color=\"danger\">\n\t\t{#snippet prefix()}{@render signOutIcon()}{/snippet}\n\t\t{#snippet title()}Log Out{/snippet}\n\t</MenuOption>\n</div>\n```\n\n### With Custom Theme\n```svelte\n<MenuOption \n\ttheme={{\n\t\troot: { base: 'rounded-full' },\n\t\ttitle: { base: 'font-bold' }\n\t}}\n>\n\t{#snippet title()}\n\t\tCustom Styled Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n### With Attachments\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { spinnerOverlay } from 'entasis/spinner-overlay';\n\t\n\tlet loading = $state(false);\n\t\n\tasync function handleClick() {\n\t\tloading = true;\n\t\tawait fetch('/api/action');\n\t\tloading = false;\n\t}\n</script>\n\n<MenuOption \n\tonclick={handleClick}\n\t{@attach spinnerOverlay({ loading })}\n>\n\t{#snippet title()}\n\t\tPerform Action\n\t{/snippet}\n</MenuOption>\n```\n\n### Override Element Type\n```svelte\n<!-- Force render as div even with onclick -->\n<MenuOption as=\"div\" onclick={() => console.log('clicked')}>\n\t{#snippet title()}\n\t\tCustom Element Type\n\t{/snippet}\n</MenuOption>\n```\n\n## Accessibility\n\n- Automatically sets appropriate `role` attribute based on element type\n  - `button` for interactive elements\n  - `link` for anchor elements\n  - `menuitem` for non-interactive elements\n- Supports keyboard navigation when used as button or link\n- Proper semantic HTML structure\n- Color foreground meets accessibility standards\n\n## Element Type Detection\n\nThe component automatically determines the HTML element to render:\n1. If `as` prop is provided → uses that element\n2. If `href` is provided → renders as `<a>`\n3. Otherwise → renders as `<button>`\n4. Otherwise → renders as `<div>`\n\n## Notes\n\n- Title and description snippets are mutually exclusive with children snippet\n- Hover states automatically apply background color based on the color prop\n- Prefix icons are positioned at the start, suffix icons at the end (with ml-auto)\n- Hover and virtual focus use the shared current-color state layer\n- Works well within Popover or Dialog components for dropdown menus\n\n## Theme Customization\n\nThe MenuOption component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main menu option container styles\n- **title**: Menu option title text styles\n- **description**: Menu option description text styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n- **content**: Content wrapper styles\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all menu options\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Padding, gap, and min-height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme and hover states\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - align: 'start' | 'center' - Vertical alignment\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content wrapper\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Gap spacing between title and description\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<MenuOption\n  theme={{\n    root: {\n      base: 'rounded-lg',\n      density: {\n        comfortable: 'px-4 py-3 min-h-12'\n      }\n    },\n    title: {\n      size: {\n        large: 'text-lg font-semibold'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Custom Menu Option\n  {/snippet}\n</MenuOption>\n```\n\n**Color Customization**:\n```svelte\n<MenuOption \n  color=\"danger\"\n  theme={{\n    root: {\n      color: {\n        danger: 'text-red-600 highlight:bg-red-50 highlight:text-red-700'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Delete Item\n  {/snippet}\n</MenuOption>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMenuOptionTheme } from '../components/MenuOption/index.ts';\n  \n  setMenuOptionTheme({\n    root: {\n      base: 'rounded-md transition-colors',\n      density: {\n        normal: 'px-3 py-2'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly 'popup-menu': "\n# PopupMenu Component\n\nThe PopupMenu component is a wrapper around Popover that renders a Menu inside. It provides all Popover functionality (positioning, transitions, triggers) with integrated Menu rendering for quick menu implementations.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { PopupMenu } from 'entasis/popup-menu';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\t\n\tconst menuItems = [\n\t\t{ type: 'option', prefix: userIcon, title: 'Profile' },\n\t\t{ type: 'option', prefix: gearIcon, title: 'Settings' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: signOutIcon, title: 'Logout', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'Open Menu' }}\n\tposition=\"bottom-start\"\n\tmenu={{ items: menuItems }}\n/>\n```\n\n## Props\n\n### Menu Props\n- **menu**: MenuProps (required)\n  - items: MenuItem[] - Array of menu items (buttons, options, separators)\n  - class: string - Custom class for the menu container\n  - theme: MenuThemeProps - Theme overrides for menu and its items\n  - submenuMode: 'auto' | 'popover' | 'stack' - defaults to auto; mobileSheet menus stack submenus automatically\n\n- **closeOnItemClick**: boolean (default: true)\n  - Whether to close the menu when a menu item (button or link) is clicked\n  - Set to false for menus that should stay open for multiple selections\n\n### Popover Props (All Available)\n\n#### Positioning & Layout\n- **position**: ResponsiveProps<Placement> - Popover position relative to trigger\n  - Values: 'top', 'bottom', 'left', 'right', 'top-start', 'bottom-start', etc.\n  \n- **offset**: number - Distance from trigger in pixels\n\n- **size**: ResponsiveProps<'small' | 'normal' | 'large'> - Popover size\n\n- **fitTrigger**: boolean - Make popover width match trigger width\n\n#### Trigger Configuration\n- **trigger**: Snippet | ButtonProps | false\n  - Snippet: Custom trigger rendering with popover state\n  - ButtonProps: Render a button with these props\n  - false: No trigger (control externally via open)\n\n#### Interaction Behavior\n- **open**: boolean (bindable) - Control open state externally\n\n- **openOnClick**: boolean (default: true) - Open on trigger click\n\n- **openOnHover**: boolean (default: false) - Open on trigger hover\n\n- **delay**: number (default: 100) - Delay before opening on hover (ms)\n\n- **closeOnClickOutside**: boolean (default: true) - Close when clicking outside\n\n- **closeOnEscape**: boolean (default: true) - Close on Escape key\n\n- **closeOnMouseLeave**: boolean (default: false) - Close when the pointer leaves the hover safe area. The safe area is the trigger, the panel, and a prediction cone toward the submenu, so a diagonal move into the submenu keeps it open while sibling rows stay hoverable.\n\n- **debugSafeArea**: boolean (default: false) - Show hover safe-area overlays. Trigger/panel rectangles render in blue; the prediction cone toward the submenu renders in orange.\n\n#### Visual & Animation\n- **transition**: ResponsiveProps<FSOProps> - Custom transition configuration\n\n- **directedTransition**: boolean (default: true) - Transition direction based on position\n\n- **lockScroll**: boolean (default: true) - Lock body scroll when open\n\n- **class**: string - Custom class for popover dialog\n\n- **mobileSheet**: boolean (default: false) - Render as a bottom sheet on mobile viewports. With menu.submenuMode='auto', nested submenus become stacked views.\n\n#### Advanced\n- **id**: string - Custom ID for popover element\n\n- **ref**: HTMLElement | null - External reference element (instead of trigger)\n\n- **onOpenChange**: (open: boolean) => void - Called for component-owned state changes\n\n- **onAfterOpen**: (popover: PopoverState) => void - Called after the popover opens\n\n- **onAfterClose**: (popover: PopoverState) => void - Called after the popover closes\n\n- **theme**: PopoverThemeProps - Theme overrides for popover\n\n## Structure\n\nPopupMenu renders as:\n```\n<Popover {...popoverProps}>\n  <Menu {...menuProps} />\n</Popover>\n```\n\nThe Menu inherits the Popover's dialog styling (background, border, shadow, etc.)\n\n## Examples\n\n### Basic Dropdown Menu\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tconst items = [\n\t\t{ type: 'option', title: 'New File' },\n\t\t{ type: 'option', title: 'Open...' },\n\t\t{ type: 'option', title: 'Save' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', title: 'Exit' }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'File', variant: 'ghost' }}\n\tposition=\"bottom-start\"\n\tmenu={{ items }}\n/>\n```\n\n### User Profile Menu\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { questionIcon } from 'entasis/icons/question';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\t\n\tconst items = [\n\t\t{ type: 'option', prefix: userIcon, title: 'Profile', href: '/profile' },\n\t\t{ type: 'option', prefix: gearIcon, title: 'Settings', href: '/settings' },\n\t\t{ type: 'option', prefix: questionIcon, title: 'Help' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: signOutIcon, title: 'Log Out', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'John Doe', variant: 'outline' }}\n\tposition=\"bottom-end\"\n\tmenu={{ items }}\n/>\n```\n\n### Context Menu (Right Click)\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\timport { trashIcon } from 'entasis/icons/trash';\n\timport { copyIcon } from 'entasis/icons/copy';\n\timport { shareIcon } from 'entasis/icons/share';\n\t\n\tlet open = $state(false);\n\tlet contextMenuRef = $state<HTMLElement | null>(null);\n\t\n\tfunction handleContextMenu(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tcontextMenuRef = e.currentTarget as HTMLElement;\n\t\topen = true;\n\t}\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Open' },\n\t\t{ type: 'option', prefix: copyIcon, title: 'Copy' },\n\t\t{ type: 'option', prefix: shareIcon, title: 'Share' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: trashIcon, title: 'Delete', color: 'danger' }\n\t] satisfies MenuItem[];\n</script>\n\n<div oncontextmenu={handleContextMenu}>\n\tRight-click me\n</div>\n\n<PopupMenu\n\ttrigger={false}\n\tbind:open\n\tref={contextMenuRef}\n\tposition=\"bottom-start\"\n\tmenu={{ items }}\n/>\n```\n\n### With Custom Trigger Snippet\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tlet open = $state(false);\n\n\tconst items = [\n\t\t{ type: 'option', title: 'Option 1' },\n\t\t{ type: 'option', title: 'Option 2' }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu bind:open position=\"bottom\" menu={{ items }}>\n\t{#snippet trigger(popover)}\n\t\t<button onclick={() => popover.toggle()}>\n\t\t\tCustom Trigger {open ? '▲' : '▼'}\n\t\t</button>\n\t{/snippet}\n</PopupMenu>\n```\n\n### Hover Menu\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tconst items = [\n\t\t{ type: 'option', title: 'Quick Action 1' },\n\t\t{ type: 'option', title: 'Quick Action 2' }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'Hover Me', variant: 'ghost' }}\n\topenOnHover={true}\n\topenOnClick={false}\n\tdelay={200}\n\tcloseOnMouseLeave={true}\n\tmenu={{ items }}\n/>\n```\n\n### Actions Menu with Buttons\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tconst items = [\n\t\t{ type: 'button', children: 'Save Draft', variant: 'ghost', fullWidth: true },\n\t\t{ type: 'button', children: 'Publish', variant: 'solid', color: 'primary', fullWidth: true },\n\t\t{ type: 'separator' },\n\t\t{ type: 'button', children: 'Delete', variant: 'soft', color: 'danger', fullWidth: true }\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'Actions' }}\n\tposition=\"bottom-end\"\n\tmenu={{ items }}\n/>\n```\n\n### External Control with Bindable State\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tlet menuOpen = $state(false);\n\t\n\tconst items = [\n\t\t{ type: 'option', title: 'Item 1' },\n\t\t{ type: 'option', title: 'Item 2' }\n\t] satisfies MenuItem[];\n\t\n\tfunction openMenu() {\n\t\tmenuOpen = true;\n\t}\n</script>\n\n<button onclick={openMenu}>Open Menu Externally</button>\n\n<PopupMenu\n\ttrigger={{ content: 'Menu' }}\n\tbind:open={menuOpen}\n\tmenu={{ items }}\n/>\n```\n\n### Positioned Menu\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tconst items = [\n\t\t{ type: 'option', title: 'Top Start' },\n\t\t{ type: 'option', title: 'Example' }\n\t] satisfies MenuItem[];\n</script>\n\n<div class=\"flex gap-2\">\n\t<PopupMenu trigger={{ content: 'Top Start' }} position=\"top-start\" menu={{ items }} />\n\t<PopupMenu trigger={{ content: 'Bottom' }} position=\"bottom\" menu={{ items }} />\n\t<PopupMenu trigger={{ content: 'Right' }} position=\"right\" menu={{ items }} />\n</div>\n```\n\n### With Custom Theme\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tconst items = [\n\t\t{ type: 'option', title: 'Themed Option 1' },\n\t\t{ type: 'option', title: 'Themed Option 2' }\n\t] satisfies MenuItem[];\n\t\n\tconst menuTheme = {\n\t\troot: { base: 'gap-3' },\n\t\toption: {\n\t\t\troot: { base: 'px-4 py-3' }\n\t\t}\n\t};\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'Themed Menu' }}\n\tmenu={{ items, theme: menuTheme }}\n/>\n```\n\n### Keep Menu Open for Multiple Interactions\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\tlet selections = $state<string[]>([]);\n\t\n\tconst items = [\n\t\t{ \n\t\t\ttype: 'option', \n\t\t\ttitle: 'Option 1',\n\t\t\tonclick: () => selections.push('Option 1')\n\t\t},\n\t\t{ \n\t\t\ttype: 'option', \n\t\t\ttitle: 'Option 2',\n\t\t\tonclick: () => selections.push('Option 2')\n\t\t},\n\t\t{ type: 'separator' },\n\t\t{ \n\t\t\ttype: 'button', \n\t\t\tchildren: 'Done',\n\t\t\tvariant: 'solid',\n\t\t\tfullWidth: true\n\t\t}\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu\n\ttrigger={{ content: 'Select Multiple' }}\n\tcloseOnItemClick={false}\n\tmenu={{ items }}\n/>\n```\n\n### Nested Submenus\n```svelte\n<script lang=\"ts\">\n\timport type { MenuItem } from 'entasis/menu';\n\n\tconst items = [\n\t\t{ type: 'option', title: 'New File' },\n\t\t{\n\t\t\ttype: 'submenu',\n\t\t\ttitle: 'More Options',\n\t\t\tmenu: [\n\t\t\t\t{ type: 'option', title: 'Sub Option 1' },\n\t\t\t\t{ type: 'option', title: 'Sub Option 2' }\n\t\t\t]\n\t\t}\n\t] satisfies MenuItem[];\n</script>\n\n<PopupMenu trigger={{ content: 'Main Menu' }} position=\"bottom-start\" menu={{ items }} />\n```\n\n## Accessibility\n\n- Inherits all Popover accessibility features: the trigger carries `aria-haspopup=\"menu\"`, `aria-expanded`, and `aria-controls`, and focus returns to it on close\n- Menu items have appropriate roles (`menuitem`, or `menuitemradio` with `aria-checked` for options that set `selected`) and keyboard navigation\n- Type-ahead: typing letters moves the highlight to the next matching item\n- Escape closes only the topmost open layer, so a submenu closes before its parent (configurable)\n- An outside press closes every layer above the one pressed (configurable)\n\n## Notes\n\n- PopupMenu is a lightweight wrapper - all Popover props work as expected\n- Menu styling inherits from Popover's dialog theme\n- Use `closeOnClickOutside={true}` (default) for typical dropdown menus\n- Use `closeOnMouseLeave={true}` for hover-triggered quick menus; a prediction cone toward the submenu keeps it open during the diagonal move while sibling rows stay hoverable.\n- The `menu` prop accepts full MenuProps including theme forwarding to child components\n";
+    readonly dialog: "\n# Dialog Component\n\nThe Dialog component (also known as Modal) displays content in a layer above the page, blocking interaction with the rest of the application until dismissed.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\t\n</script>\n// By default Dialog comes with a button that trigger them, no need to define a callback and a $state\n<Dialog title=\"Dialog Title\">\n\tDialog content goes here\n</Dialog>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls dialog visibility\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **id**: string - Unique identifier for the dialog\n- **type**: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'alert' | 'modal' (default: 'modal')\n  - fullScreen: Full screen dialog overlay\n  - drawerRight: Drawer sliding in from the right\n  - drawerLeft: Drawer sliding in from the left\n  - drawerBottom: Drawer sliding in from the bottom\n  - drawerTop: Drawer sliding in from the top\n  - alert: Alert-style dialog\n  - modal: Standard modal dialog\n  - Supports responsive values: pass a `Partial<Record<Breakpoint, DialogType>>` record such as `{ xs: 'drawerBottom', md: 'modal' }` to vary the type per breakpoint (breakpoint is one of 'xs' | 'sm' | 'md' | 'lg' | 'xl', tracked live from the viewport; the nearest defined key at or below the active one wins)\n- **responsive**: boolean (default: true) - When the resolved type is `modal`, collapse it into a `drawerBottom` bottom sheet on mobile (viewport < 768px). The sheet inherits swipe-to-dismiss and the drag thumb. Set false to keep a centered modal on every screen size\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact dialog size\n  - normal: Standard dialog size\n  - large: Larger dialog size\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: DialogState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: DialogState) => void - Called after the close transition finishes\n\n### Slot Props\n- **title**: string | Snippet<[DialogState]> - Dialog title\n- **description**: string | Snippet<[DialogState]> - Dialog description\n- **children**: Snippet<[DialogState]> - Main dialog content\n- **header**: Snippet - Custom header content\n- **footer**: Snippet - Custom footer content\n- **trigger**: Snippet | (ButtonProps & { content?: string }) - Custom trigger button\n- **closeButton**: Snippet - Custom close button\n\n### Behavior Props\n- **closeOnEscape**: boolean (default: true) - Close when Escape key is pressed\n- **closeOnClickOutside**: boolean (default: true) - Close when clicking outside dialog\n- **closable**: boolean (default: true) - Whether dialog can be closed\n- **swipeToDismiss**: boolean (default: true for drawer types) - Drag the drawer toward its edge to dismiss. Direction-aware (drawerRight drags right, drawerBottom drags down, etc.) and never hijacks inner scrolling; opt elements out with `data-no-swipe`\n- **thumb**: boolean (default: true) - Drag thumb bar shown on swipe-dismissable drawers (inner edge, orientation follows the drawer side, oversized hitbox); set false to hide. Themeable via the `thumb` theme part\n- **swipeFrom**: 'panel' | 'handle' (default: 'panel') - Where a swipe can start: anywhere on the panel, or only the drag handles (thumb and header)\n\n### Visual Props\n- **transition**: TransitionConfig - Custom transition animation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<DialogOverlay>\n\t<DialogContent>\n\t\t<DialogHeader>\n\t\t\t<Title />\n\t\t\t<Description />\n\t\t\t<CloseButton />\n\t\t</DialogHeader>\n\t\t<DialogBody>\n\t\t\t<Children />\n\t\t</DialogBody>\n\t\t<DialogFooter />\n\t</DialogContent>\n</DialogOverlay>\n```\n\n## Examples\n\n### More Examples\n\n### A with a custom trigger \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\">\n\t<p>This is a basic dialog.</p>\n\t\n\t{#snippet trigger(dialog)}\n\t\t<Button onclick={() => dialog.open()}>Open</Button>\n\t{/snippet}\n</Dialog>\n```\n\n### A with a custom as button props \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\"\ntrigger={{\ncontent:\"Click me\",\ncolor:\"secondary\",\nsize:\"small\"\n}}\n>\n\t<p>This is a basic dialog.</p>\t\n</Dialog>\n```\n\n### With Description\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n</script>\n\n<Dialog \t\n\ttitle=\"Confirm Action\"\n\tdescription=\"Are you sure you want to continue?\"\n>\n\t<p>This action cannot be undone.</p>\n</Dialog>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n\t\n\tfunction handleConfirm() {\n\t\tconsole.log('Confirmed!');\n\t\topen = false;\n\t}\n</script>\n\n<Dialog bind:open title=\"Confirm\">\n\tAre you sure?\n\t\n\t{#snippet footer()}\n\t\t<div class=\"flex gap-2 justify-end\">\n\t\t\t<Button variant=\"ghost\" onclick={() => open = false}>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t\t<Button color=\"danger\" onclick={handleConfirm}>\n\t\t\t\tConfirm\n\t\t\t</Button>\n\t\t</div>\n\t{/snippet}\n</Dialog>\n```\n\n### Drawer Types\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\t\n</script>\n\n<!-- Right drawer -->\n<Dialog type=\"drawerRight\" title=\"Side Drawer\">\n\tThis slides in from the right\n</Dialog>\n\n<!-- Left drawer -->\n<Dialog type=\"drawerLeft\" title=\"Left Drawer\">\n\tThis slides in from the left\n</Dialog>\n\n<!-- Bottom drawer -->\n<Dialog type=\"drawerBottom\" title=\"Bottom Drawer\">\n\tThis slides in from the bottom\n</Dialog>\n\n<!-- Full screen -->\n<Dialog type=\"fullScreen\" title=\"Full Screen\">\n\tFull screen dialog content\n</Dialog>\n```\n\n### Custom Header\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Dialog bind:open>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t{@render warningIcon()}\n\t\t\t<h2>Warning</h2>\n\t\t</div>\n\t{/snippet}\n\t\n\tThis is important!\n</Dialog>\n```\n\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n<Dialog \n\tbind:open\n\ttitle=\"Lifecycle\"\n\tonAfterOpen={(payload) => console.log('Dialog opened', payload)}\n\tonAfterClose={(payload) => console.log('Dialog closed', payload)}\n>\n\tWatch the console\n</Dialog>\n```\n\n## State Management\n\nThe Dialog component uses a `DialogState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Dialog identifier\n- **type**: DialogType - Current dialog type\n- **size**: Size - Current dialog size\n- **open()**: () => void - Method to open the dialog\n- **close()**: () => void - Method to close the dialog\n\n## Accessibility\n\n- Initial focus goes to an `[autofocus]` / `[data-autofocus]` element inside the dialog, else the first tabbable control (the close button is skipped), else the panel itself\n- Tab and Shift+Tab are contained inside the dialog, and the rest of the page is `inert` while a modal is open\n- Focus is restored to the opener after the close transition finishes, just before `onAfterClose`\n- `aria-labelledby` links the `title` and `aria-describedby` links the `description`\n- Escape closes only the topmost open layer and an outside press dismisses the layers above the one pressed; both honour `closeOnEscape` / `closable` / `closeOnClickOutside` through the shared layer stack\n- Body scroll is locked when dialog is open\n\n## Notes\n\n- Multiple dialogs can be stacked\n- Last opened dialog receives focus\n- Background overlay prevents interaction with page\n- Scroll locking prevents background scroll\n- Transitions are customizable\n\n## Theme Customization\n\nThe Dialog component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `type` (drawers fly from their edge). Takes\n  `in` / `out` FSO params plus a `duration` / `easing` motion token; the `transition` prop wins\n  over it\n- **root**: Dialog overlay/backdrop styles\n- **content**: Dialog content container styles\n- **thumb**: Drag thumb bar styles (type variant controls per-side placement)\n- **header**: Dialog header section styles\n- **footer**: Dialog footer section styles\n- **closeButton**: Close button styles\n- **title**: Dialog title text styles\n- **description**: Dialog description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { DialogThemeProps } from 'entasis/dialog';\n\n// Example theme customization\nconst customTheme: DialogThemeProps = {\n  root: {\n    base: 'z-[+50] fixed inset-0 flex',\n    scroll: {\n      inner: 'overflow-hidden',\n      outer: 'overflow-auto'\n    }\n  },\n  align: {\n    type: {\n      fullScreen: 'justify-center items-center',\n      drawerRight: 'justify-end',\n      drawerLeft: 'justify-start',\n      drawerBottom: 'justify-center items-end',\n      drawerTop: 'justify-center items-start',\n      modal: 'justify-center',\n      alert: 'justify-center'\n    }\n  },\n  content: {\n    size: {\n      small: 'max-w-md w-full',\n      normal: 'max-w-xl w-full',\n      large: 'max-w-3xl w-full'\n    },\n    type: {\n      fullScreen: 'h-full w-full max-w-full',\n      drawerRight: 'rounded-l-none h-full',\n      modal: ''\n    }\n  },\n  header: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  title: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  description: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for dialog overlay/backdrop\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size constraints\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Dialog type/layout\n\n**content**:\n- base: Base classes for dialog content container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content max-width\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Content styling based on type\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**closeButton**:\n- base: Base classes for close button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Dialog \n  title=\"Custom Dialog\"\n  theme={{\n    content: {\n      base: 'rounded-2xl raised-5',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    header: {\n      base: 'border-b-2 border-primary'\n    }\n  }}\n>\n  Custom styled dialog content\n</Dialog>\n```\n\n**Drawer Type Customization**:\n```svelte\n<Dialog \n  type=\"drawerRight\"\n  theme={{\n    align: {\n      type: {\n        drawerRight: 'justify-end'\n      }\n    },\n    backdrop: {\n      base: 'bg-black/50'\n    },\n    content: {\n      type: {\n        drawerRight: 'rounded-l-xl raised-5'\n      }\n    }\n  }}\n>\n  Custom drawer styling\n</Dialog>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setDialogTheme } from '../components/Dialog/index.ts';\n  \n  setDialogTheme({\n    root: {\n      base: 'backdrop-blur-sm'\n    },\n    content: {\n      base: 'lift-5 border-2',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    title: {\n      base: 'text-2xl font-bold'\n    }\n  });\n</script>\n```\n";
+    readonly 'floating-window': "\n# FloatingWindow Component\n\nFloatingWindow renders a non-modal, portaled utility window that can be moved, resized, minimized into a configurable viewport-edge dock, restored, and closed. Multiple windows inside the same Theme provider coordinate their z-order and stack independently by dock placement. The Theme keeps floating windows below modal Dialog surfaces, so an open window remains mounted behind a dialog and returns unchanged when the dialog closes.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n  import { Button } from '../components/Button/index.ts';\n  import { FloatingWindow } from '../components/FloatingWindow/index.ts';\n\n  let open = $state(false);\n</script>\n\n<Button onclick={() => (open = true)}>Open notes</Button>\n\n<FloatingWindow bind:open title=\"Notes\">\n  <p>Window content remains interactive alongside the page.</p>\n</FloatingWindow>\n```\n\n## Props\n\n- **id**: string - Stable DOM id. Generated when omitted.\n- **open**: boolean (default: true) - Bindable rendered state.\n- **defaultOpen**: boolean (default: true) - Initial state when open is not provided.\n- **minimized**: boolean (default: false) - Bindable docked state.\n- **dockPlacement**: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' (default: 'bottom-left') - Edge and alignment used by the minimized dock. Top and bottom placements stack horizontally; left and right placements use a vertical title bar and stack vertically.\n- **title**: Slot<FloatingWindowPayload> (required) - Window title as text or a snippet.\n- **children**: Slot<FloatingWindowPayload> - Main content.\n- **dragFrom**: 'header' | 'window' (default: 'header') - Restricts dragging to the header or allows any non-interactive surface to start a drag.\n- **draggable**: boolean (default: true) - Enables pointer dragging.\n- **resizable**: boolean (default: true) - Enables four edge and four corner resize handles.\n- **minimizable**: boolean (default: true) - Shows the minimize control.\n- **closable**: boolean (default: true) - Shows the close control.\n- **closeOnEscape**: boolean (default: true) - Closes the topmost expanded floating window when Escape is pressed.\n- **position**: { x: number; y: number } - Bindable viewport-relative top-left position. The first render is centered when omitted.\n- **dimensions**: { width: number; height: number; min?: [width, height]; max?: [width, height] } (default: 480 x 320, minimum 280 x 160) - Bindable pixel dimensions and optional constraint tuples. Maximum dimensions remain additionally constrained to the viewport.\n- **class**: string - Additional classes on the visible window.\n- **theme**: FloatingWindowThemeProps - Per-instance theme overrides.\n- **ref**: HTMLDivElement - Bindable reference to the visible window or minimized dock item.\n- **onOpenChange**: (open: boolean) => void - Runs once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Runs after the open transition finishes.\n- **onAfterClose**: (payload) => void - Runs after the close transition finishes.\n- **onMinimize**: (payload) => void - Runs after minimize state updates.\n- **onRestore**: (payload) => void - Runs after restore state updates.\n- **onMove**: ({ position, window }) => void - Runs when a move commits.\n- **onResize**: ({ dimensions, window }) => void - Runs when a pointer or keyboard resize commits.\n\n## Dragging\n\nHeader dragging is the default because it preserves text selection and content interactions. With `dragFrom=\"window\"`, buttons, links, inputs, editable content, resize handles, and descendants marked `data-floating-window-no-drag` remain excluded from drag starts.\n\n## Accessibility\n\n- The expanded surface uses a non-modal `dialog` role and is labelled by its title.\n- Close, minimize, and restore controls are native Entasis buttons with accessible labels.\n- Edge resize handles use `separator` semantics and support arrow-key resizing; hold Shift for a larger step.\n- Opening focuses the non-modal window, closing restores focus to its previous owner, and only the topmost expanded floating window handles Escape.\n- Alt+Arrow moves the focused window; hold Shift for a larger step.\n- Corner handles are pointer-only because a diagonal separator has no valid ARIA orientation.\n- The component does not trap focus or hide page content because it is explicitly non-modal.\n\n## Theme Parts\n\n- **root**: Floating window surface and drag/resize states.\n- **header**: Default title bar and drag handle.\n- **title**: Header title.\n- **actions**: Header control group.\n- **control**: Header and dock icon buttons.\n- **scrollArea**: Flexible ScrollArea root that owns body scrolling.\n- **content**: Padded content inside the ScrollArea viewport.\n- **resizeHandle**: Edge and corner handles by direction.\n- **dockItem**: Minimized surface.\n- **dockTitle**: Full-width restore button in the dock item.\n- **dockTitleText**: Truncated title text and lateral writing direction.\n- **dockActions**: Dock restore and close controls.\n\n## Motion\n\n- **motion** theme slot, keyed by `phase`: `flight` times the crossfade between window and\n  dock pill, `enter` / `exit` the scale fallback when there is no counterpart.\n- Only `duration` / `easing` (plus the fallback's `scale` / `opacity`) are read.\n- Ladder: `<Theme components={{ 'floating-window': { motion } }}>` →\n  `setFloatingWindowTheme({ motion })` → `theme.motion`. Read once, at mount.\n";
+    readonly 'hover-card': "\n# HoverCard Component\n\nHoverCard previews supplemental content when a trigger is hovered or focused. It composes Popover for positioning and dismissal with Card for the visible content surface.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { HoverCard } from 'entasis/hover-card';\n</script>\n\n<HoverCard\n\ttrigger={{ content: 'Hover @entasis', variant: 'link' }}\n\ttitle=\"@entasis\"\n\tdescription=\"Composable Svelte UI components.\"\n>\n\t<p>Preview content shown on hover or focus.</p>\n</HoverCard>\n```\n\n## Props\n\n### Core Props\n- **id**: string - Stable id for the underlying popover root.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **trigger**: string | Snippet<[HoverCardPayload]> | ButtonProps - Trigger content. ButtonProps render a Entasis Button.\n- **children**: string | Snippet<[HoverCardPayload]> - Main card content.\n- **title**: string | Snippet<[HoverCardPayload]> - Card title slot.\n- **description**: string | Snippet<[HoverCardPayload]> - Card description slot.\n- **footer**: string | Snippet<[HoverCardPayload]> - Card footer slot.\n\n### Behavior Props\n- **position**: Placement (default: 'top') - Preferred placement relative to the trigger.\n- **offset**: number (default: 8) - Gap between trigger and card.\n- **delay**: number (default: 150) - Delay before opening on hover or focus.\n- **closeDelay**: number (default: 100) - Delay before closing after pointer/focus leaves.\n- **openOnFocus**: boolean (default: true) - Opens when focus enters the trigger or card.\n- **openOnClick**: boolean (default: false) - Toggles on trigger click, useful for touch fallbacks.\n- **disabled**: boolean (default: false) - Prevents opening and disables Button triggers.\n\n### Dismissal and Transition Props\n- **closeOnEscape**: boolean (default: true) - Escape closes the hover card.\n- **closeOnClickOutside**: boolean (default: true) - Outside clicks close the hover card.\n- **directedTransition**: boolean (default: true) - Transition direction follows placement.\n- **transition**: ResponsiveProps<FSOProps> - Popover transition override.\n\n### Styling Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Controls Popover panel and Card sizing.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Controls inner Card padding and spacing.\n- **class**: string - Extra classes on the inner Card.\n- **triggerClass**: string - Extra classes on the trigger wrapper.\n- **popover**: Props forwarded to the transparent Popover panel as one object - `{ class, theme }`.\n- **card**: Props forwarded to the inner Card as one object - `{ color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **showBorders**: boolean (default: false) - Card section borders.\n- **theme**: HoverCardThemeProps - Theme overrides for HoverCard wrapper parts.\n\n### Callbacks\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload: HoverCardPayload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload: HoverCardPayload) => void - Called after the close transition finishes.\n\n## Examples\n\n### Delays\n```svelte\n<HoverCard delay={300} closeDelay={200} trigger=\"Hover\">\n\tContent\n</HoverCard>\n```\n\n### Custom Trigger\n```svelte\n<HoverCard position=\"right\">\n\t{#snippet trigger(hoverCard)}\n\t\t<button aria-expanded={hoverCard.isOpen}>Preview</button>\n\t{/snippet}\n\n\tPreview content\n</HoverCard>\n```\n\n## Accessibility\n\n- Opens on pointer hover and keyboard focus by default.\n- Escape and outside click dismissal are delegated to Popover.\n- Button triggers receive aria-haspopup, aria-expanded, and aria-controls.\n- HoverCard is best for supplemental previews; primary content should remain reachable without hover.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) — a small lift plus scale on `fast` / `enter`.\n- Resolved by HoverCard and handed to the underlying Popover, replacing the popover preset.\n- Ladder: `<Theme components={{ 'hover-card': { motion } }}>` → `setHoverCardTheme({ motion })`\n  → `theme.motion` → the `transition` prop. Reduced motion collapses it to 0.\n";
+    readonly 'link-preview': "\n# LinkPreview Component\n\nLinkPreview renders an anchor trigger with a HoverCard preview that loads link metadata asynchronously. It shows Skeleton placeholders while loading and displays title, description, site name, Open Graph image, and favicon when available.\n\n## Import\n\n```svelte\n<script>\n\timport { LinkPreview } from 'entasis/link-preview';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<LinkPreview href=\"https://svelte.dev\">Svelte</LinkPreview>\n```\n\nBy default, LinkPreview requests `/api/link-metadata?url=<href>` when the card opens. Browser-only fetching of arbitrary links is not reliable because most sites block cross-origin HTML reads, so applications should provide a server endpoint or a custom `fetchMetadata` function.\n\n## With Preloaded Metadata\n\n```svelte\n<LinkPreview\n\thref=\"https://entasis.dev\"\n\tmetadata={{\n\t\ttitle: 'Entasis',\n\t\tdescription: 'Configuration-first Svelte components.',\n\t\tsiteName: 'Entasis',\n\t\tfavicon: '/favicon.png'\n\t}}\n>\n\tEntasis\n</LinkPreview>\n```\n\n## Custom Fetcher\n\n```svelte\n<script>\n\tconst fetchMetadata = async (href, signal) => {\n\t\tconst response = await fetch(`/api/preview?href=${encodeURIComponent(href)}`, { signal });\n\t\tif (!response.ok) throw new Error('Preview unavailable');\n\t\treturn response.json();\n\t};\n</script>\n\n<LinkPreview href=\"https://example.com\" {fetchMetadata}>Example</LinkPreview>\n```\n\n## Props\n\n- **href**: string - URL opened by the trigger link and requested by the metadata loader.\n- **id**: string - Stable DOM id for the underlying HoverCard; falls back to a generated id.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **children**: string | Snippet<[LinkPreviewPayload]> - Trigger anchor content.\n- **metadata**: LinkPreviewMetadata - Preloaded metadata; skips network loading.\n- **fetchMetadata**: (href, signal) => Promise<LinkPreviewMetadata> - Custom async loader.\n- **metadataEndpoint**: string | (href) => string - Endpoint used when fetchMetadata is not provided. String endpoints receive ?url=<href>.\n- **prefetch**: boolean - Load metadata on mount instead of waiting for open.\n- **target**: string - Trigger anchor target.\n- **rel**: string - Trigger anchor rel. Defaults to noopener noreferrer for target=\"_blank\".\n- **fallbackTitle**: string - Title shown when metadata has no title.\n- **imageAlt**: string - Alt text for the preview image.\n- **showUrl**: boolean - Whether to show the URL line.\n- **loadingLabel**: string - Accessible label for the loading region.\n- **errorLabel**: string - Heading shown when metadata loading fails.\n- **position**: Popover placement - Preferred card placement.\n- **offset**: number - Gap between trigger and card.\n- **delay**: number - Open delay in milliseconds.\n- **closeDelay**: number - Close delay in milliseconds.\n- **openOnFocus**: boolean - Open when focus enters trigger or card.\n- **openOnClick**: boolean - Toggle card on click before navigation.\n- **closeOnEscape**: boolean - Close on Escape.\n- **closeOnClickOutside**: boolean - Close when clicking outside.\n- **directedTransition**: boolean - Use placement-aware transitions.\n- **transition**: object - Popover transition overrides.\n- **size**: 'small' | 'normal' | 'large' - Preview card size.\n- **disabled**: boolean - Disable opening and link navigation.\n- **class**: string - Trigger anchor classes.\n- **card**: Props forwarded to the inner Card as one object - `{ class, color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **popover**: Props forwarded to the Popover panel as one object - `{ class, theme }`.\n- **showBorders**: boolean - Show Card section borders.\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Called after open transition.\n- **onAfterClose**: (payload) => void - Called after close transition.\n- **onLoad**: (payload) => void - Called after metadata loads.\n- **onError**: (error) => void - Called after metadata loading fails.\n- **theme**: LinkPreviewThemeProps - LinkPreview theme overrides.\n- **hoverCardTheme**: HoverCardThemeProps - HoverCard wrapper theme overrides.\n\n## Metadata Shape\n\n```ts\ntype LinkPreviewMetadata = {\n\turl?: string;\n\ttitle?: string;\n\tdescription?: string;\n\tsiteName?: string;\n\timage?: string;\n\tfavicon?: string;\n};\n```\n\n## Endpoint Contract\n\nThe default endpoint should return JSON matching LinkPreviewMetadata. Non-2xx responses should return a JSON object with a `message` string when possible.\n\n## Accessibility\n\n- The trigger remains a real anchor, so the destination is reachable without hover.\n- Loading and error states use role=\"status\".\n- A disabled LinkPreview removes the anchor href and prevents hover opening.\n\n## Theme Parts\n\n- **trigger** - Anchor trigger.\n- **card** - HoverCard surface classes.\n- **content** - Preview content wrapper.\n- **media** - Image container.\n- **image** - Preview image.\n- **body** - Metadata text stack.\n- **header** - Favicon and site row.\n- **favicon** - Favicon image.\n- **site** - Site name text.\n- **title** - Preview title.\n- **description** - Preview description.\n- **url** - URL display line.\n- **loading** - Skeleton stack.\n- **error** - Error state container.\n\n## Motion\n\n- LinkPreview has no preset of its own: it forwards `transition` (now a plain `FSOProps`,\n  responsive) to HoverCard, whose **motion** slot owns the preset.\n- Retune it with `<Theme components={{ 'hover-card': { motion } }}>` or\n  `setHoverCardTheme({ motion })`; the `transition` prop still wins per instance.\n";
+    readonly overlay: "\n# Overlay Component\n\nOverlay layers concise content and actions over bounded media or another visual surface. Place it as the direct first child of a container; the component automatically establishes that parent as its positioning context, so no attachment or wrapper component is required.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Overlay } from 'entasis/overlay';\n</script>\n\n<div class=\"aspect-video overflow-hidden rounded-lg\">\n\t<Overlay\n\t\ttitle=\"Design system foundations\"\n\t\tdescription=\"A practical tour of tokens, primitives, and composition.\"\n\t\tactions={[{ content: 'Open gallery', color: 'neutral', variant: 'soft' }]}\n\t/>\n\t<img src=\"/cover.jpg\" alt=\"Coastal landscape\" class=\"size-full object-cover\" />\n</div>\n```\n\n## Props\n\n- **position**: 'fill' | 'top' | 'bottom' (default: 'fill') - Places the content vertically. Fill uses a surface-wide dark scrim; top and bottom use content-sized black-to-transparent gradients.\n- **align**: 'start' | 'center' | 'end' (default: 'center') - Horizontal content and text alignment.\n- **showOn**: 'always' | 'hover' | 'focus' (default: 'always') - Reveal condition. Hover also reveals for focus-within so actions remain keyboard accessible.\n- **open**: boolean (default: true) - Enables or hides the overlay while preserving its reveal transition.\n- **defaultOpen**: boolean (default: true) - Initial state when open is not provided.\n- **onOpenChange**: (open: boolean) => void - Reserved for library-requested state changes.\n- **onAfterOpen**: () => void - Called after the open transition finishes.\n- **onAfterClose**: () => void - Called after the close transition finishes.\n- **scrim**: boolean (default: true) - Toggles the dark fill or directional gradient.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Scales padding, gaps, and typography.\n- **actions**: OverlayAction[] - Button props plus a content string, rendered as a wrapping action row.\n- **ref**: HTMLDivElement | null - Bindable root reference.\n- **class**: string - Additional root classes.\n- **theme**: OverlayThemeProps - Theme overrides.\n\n## Slots\n\n- **title**: Main overlay heading.\n- **description**: Supporting text.\n- **content**: Additional body content between the description and actions.\n- **children**: Fully custom composition replacing title, description, content, and actions.\n\nAll named content slots accept a string or snippet.\n\n## Placement\n\nThe overlay must be the direct first child of the surface it covers:\n\n```svelte\n<div class=\"overflow-hidden rounded-lg\">\n\t<Overlay position=\"bottom\" title=\"Golden hour\" />\n\t<img src=\"/photo.jpg\" alt=\"Golden hour over a valley\" />\n</div>\n```\n\nThe parent receives a zero-specificity relative positioning context and isolated stacking context through CSS `:has()`. An explicit parent positioning utility or inline style still takes precedence.\n\nTop and bottom content enters from its corresponding edge while the scrim fades in place. Fill content only fades. Motion is disabled when the user requests reduced motion.\n\n## Reveal on Hover or Focus\n\n```svelte\n<div class=\"aspect-video overflow-hidden rounded-lg\">\n\t<Overlay\n\t\tshowOn=\"hover\"\n\t\tposition=\"bottom\"\n\t\ttitle=\"Mountain archive\"\n\t\tactions={[{ content: 'View collection', color: 'neutral', variant: 'soft' }]}\n\t/>\n\t<img src=\"/mountain.jpg\" alt=\"Snow-covered mountain\" />\n</div>\n```\n\n## Accessibility\n\n- The overlay is semantically neutral; supplied buttons and links keep their native semantics.\n- Hover-revealed content also appears when focus enters the surface or its actions.\n- Setting open to false makes the overlay inert and hides it from assistive technology.\n- Images and video beneath the overlay still require their own accessible labels or alternatives.\n\n## Theme Parts\n\n- **root**: Absolute overlay, reveal state, vertical placement, and clipping.\n- **scrim**: Fill or directional gradient.\n- **content**: Padding and horizontal alignment.\n- **header**: Title and description stack.\n- **title**: Heading typography.\n- **description**: Supporting text.\n- **body**: Additional content slot.\n- **actions**: Button row.\n";
+    readonly popover: "\n# Popover Component\n\nThe Popover component displays floating content positioned relative to a trigger element. It's ideal for tooltips, dropdown menus, and contextual information.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\t\t\n</script>\n// By default Popover comes with a button that triggers them, no need to define a callback and a $state\n<Popover trigger={{ content: \"Toggle Popover\" }}>\n\tPopover content here\n</Popover>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls popover visibility (optional when using trigger prop)\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **ref**: HTMLElement | null - Reference element to position popover against (optional when using trigger prop)\n- **id**: string - Unique identifier\n\n### Layout Props\n- **position**: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' (default: 'bottom')\n  - Determines where popover appears relative to trigger\n- **offset**: number - Distance in pixels from the reference element\n- **fitTrigger**: boolean (default: false) - Whether popover should match the width of the trigger element\n- **mobileSheet**: boolean (default: false) - On mobile viewports (<768px), render as a bottom sheet instead of an anchored floating panel\n- **inline**: boolean (default: false) - Render the panel in normal document flow where the component sits instead of portaling to the viewport-fixed layer: no floating-ui positioning, no scroll lock, no outside-press dismissal (Escape still closes it). Same panel classes and motion, and the trigger still toggles it. Wins over `mobileSheet`\n- **mobileSheetSizeTransition**: boolean (default: true) - Whether mobile-sheet panels animate intrinsic size changes\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: PopoverState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: PopoverState) => void - Called after the close transition finishes\n\n### Slot Props\n- **children**: Snippet<[PopoverState]> - Popover content\n- **trigger**: Snippet<[PopoverState]> | (ButtonProps & { content?: string }) | false - Trigger element\n  - Pass a snippet function for custom trigger: `{#snippet trigger(popover)}...</snippet>`\n  - Pass button props object for default button: `trigger={{ content: \"Click Me\", color: \"primary\" }}`\n  - Pass `false` to disable trigger (use with external ref)\n\n### Interaction Props\n- **openOnHover**: boolean (default: false) - Open on mouse hover\n- **openOnClick**: boolean (default: true) - Open on click\n- **delay**: number (default: 100) - Delay in ms before opening on hover\n- **closeOnEscape**: boolean (default: true) - Close on Escape. Only the topmost open layer closes, so Escape inside a nested popover leaves its parent open\n- **closeOnClickOutside**: boolean (default: true) - Close on an outside press. A press dismisses this popover and every layer stacked above it, but never the layer that was pressed\n- **closeOnMouseLeave**: boolean (default: false) - Close when the pointer leaves the hover safe area. The safe area is the trigger, the panel, and a prediction cone toward the panel, so a diagonal move to the panel keeps it open.\n- **debugSafeArea**: boolean (default: false) - Show hover safe-area overlays. Trigger/panel rectangles render in blue; the prediction cone toward the panel renders in orange.\n\n### Focus & ARIA Props\n- **focusOnOpen**: 'first' | 'container' | false (default: false) - Where focus goes when the panel opens: `'first'` moves it to an `[autofocus]` / `[data-autofocus]` target or the first tabbable control, `'container'` focuses the panel itself, `false` keeps it on the trigger. Focus always returns to the trigger when the popover closes (Escape or outside press)\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true (default: 'dialog') - Value of `aria-haspopup` on the trigger, describing what the panel contains. `aria-expanded` and `aria-controls` are managed automatically alongside it, for the built-in Button trigger and for a snippet trigger using `{@attach popover.reference}`\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover focusOnOpen=\"first\" haspopup=\"listbox\" trigger={{ content: 'Pick one' }}>\n\t<ul role=\"listbox\"><li role=\"option\" tabindex=\"0\">First</li></ul>\n</Popover>\n```\n\n### Visual Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact popover size\n  - normal: Standard popover size\n  - large: Larger popover size\n- **transition**: TransitionConfig - Custom transition animation\n- **directedTransition**: boolean (default: true) - Transition direction follows position\n\n### Behavior Props\n- **lockScroll**: boolean (default: true) - Lock body scroll when open\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<PopoverTrigger>\n\t<Trigger />\n</PopoverTrigger>\n\n<PopoverContent>\n\t<Children />\n</PopoverContent>\n```\n\n## Examples\n\n### More Examples\n\n### With a custom trigger snippet\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<!-- {@attach popover.reference} anchors the panel to the element and keeps\n     aria-haspopup / aria-expanded / aria-controls in sync on it -->\n<Popover>\n\t{#snippet trigger(popover)}\n\t\t<Button onclick={() => popover.toggle()} {@attach popover.reference}>Open</Button>\n\t{/snippet}\n\t\n\t<p>This is a popover!</p>\n</Popover>\n```\n\n### With button props\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{\n\t\tcontent: \"Click Me\",\n\t\tcolor: \"secondary\",\n\t\tsize: \"small\"\n\t}}\n>\n\t<p>This is a popover!</p>\n</Popover>\n```\n\n### Different Positions\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Top -->\n<Popover position=\"top\" trigger={{ content: \"Top\" }}>\n\tTop popover\n</Popover>\n\n<!-- Bottom -->\n<Popover position=\"bottom\" trigger={{ content: \"Bottom\" }}>\n\tBottom popover\n</Popover>\n\n<!-- Left -->\n<Popover position=\"left\" trigger={{ content: \"Left\" }}>\n\tLeft popover\n</Popover>\n\n<!-- Right -->\n<Popover position=\"right\" trigger={{ content: \"Right\" }}>\n\tRight popover\n</Popover>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<Popover position=\"bottom-start\" trigger={{ content: \"Menu\" }}>\n\t<div class=\"flex flex-col gap-1\">\n\t\t<Button variant=\"ghost\" fullWidth>Profile</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Settings</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Logout</Button>\n\t</div>\n</Popover>\n```\n\n### Open on Hover\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\topenOnClick={false}\n\tdelay={200}\n>\n\tHover content\n</Popover>\n```\n\n### With Custom Offset\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tposition=\"bottom\"\n\toffset={20}\n>\n\t20px away from trigger\n</Popover>\n```\n\n### Fit Trigger Width\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Click Me\" }}\n\tfitTrigger\n>\n\tPopover matches trigger width\n</Popover>\n```\n\n### Inline (static, in flow)\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Open in place, no portal: useful for docs, visual tests, or an always-visible panel -->\n<Popover inline open trigger={false}>\n\t<p>Rendered where the component sits.</p>\n</Popover>\n\n<!-- The trigger still toggles an inline panel -->\n<Popover inline trigger={{ content: 'Toggle' }}>\n\t<p>Expands below the trigger, in the flow.</p>\n</Popover>\n```\n\n### Mobile Bottom Sheet\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover\n\ttrigger={{ content: \"Open filters\" }}\n\tposition=\"bottom\"\n\tmobileSheet\n>\n\tFilters content\n</Popover>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Small -->\n<Popover size=\"small\" trigger={{ content: \"Small\" }}>\n\tSmall popover\n</Popover>\n\n<!-- Large -->\n<Popover size=\"large\" trigger={{ content: \"Large\" }}>\n\tLarge popover with more content\n</Popover>\n```\n\n### Close on Mouse Leave\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\tcloseOnMouseLeave\n>\n\tCloses when you move outside the rectangle tolerance\n</Popover>\n```\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tonAfterOpen={(payload) => console.log('Popover opened', payload)}\n\tonAfterClose={(payload) => console.log('Popover closed', payload)}\n>\n\tWatch the console\n</Popover>\n```\n\n### User Card Popover with External Ref\n\n```svelte\n<script lang=\"ts\">\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n\timport { Avatar } from 'entasis/avatar';\n\n\tlet avatarRef = $state<HTMLElement | null>(null);\n\tlet open = $state(false);\n\tconst user = { name: 'John Doe', email: 'john@example.com' };\n</script>\n\n<button type=\"button\" bind:this={avatarRef} onclick={() => (open = !open)}>\n\t<Avatar name={user.name} />\n</button>\n\n<Popover bind:open ref={avatarRef} position=\"bottom\">\n\t<div class=\"p-4\">\n\t\t<h3>{user.name}</h3>\n\t\t<p>{user.email}</p>\n\t\t<Button fullWidth>View Profile</Button>\n\t</div>\n</Popover>\n```\n\n## State Management\n\nThe Popover component uses a `PopoverState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Popover identifier\n- **size**: Size - Current popover size\n- **position**: Placement - Current popover position\n- **offset**: number - Current offset value\n- **open()**: () => void - Method to open the popover\n- **close()**: () => void - Method to close the popover\n- **toggle()**: () => void - Method to toggle the popover\n- **reference**: attachment for a custom trigger element (`{@attach popover.reference}`); anchors the panel to it and keeps its `aria-haspopup`, `aria-expanded`, and `aria-controls` in sync\n\n## Accessibility\n\n- The trigger carries `aria-haspopup` (from `haspopup`), `aria-expanded`, and `aria-controls` — automatically for the built-in Button and for a snippet trigger using `{@attach popover.reference}`\n- `focusOnOpen` decides where focus lands on open; focus returns to the trigger on close, whether by Escape or an outside press\n- Non-modal: Tab is not contained and the page is not made inert (use Dialog for that)\n- Escape closes only the topmost open layer; an outside press dismisses every layer stacked above the one pressed. Popovers, menus, and dialogs share one layer stack\n- Keyboard navigation support\n\n## Notes\n\n- Popover is positioned using floating-ui, except with `inline`, where the document lays the panel out\n- Automatically adjusts position to stay in viewport\n- Multiple popovers can be stacked\n- Scroll locking prevents background scroll (when enabled)\n- Transitions animate based on position direction\n\n## Theme Customization\n\nThe Popover component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `mode` (a floating panel scales, the mobile\n  sheet slides up). Takes `in` / `out` FSO params plus a `duration` / `easing` motion token;\n  the `transition` prop wins over it\n- **popover**: Main popover container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { PopoverThemeProps } from 'entasis/popover';\n\n// Example theme customization\nconst customTheme: PopoverThemeProps = {\n  popover: {\n    base: 'z-[+50] fixed bg-surface-floating text-neutral w-fit rounded-xl raised isolate h-fit',\n    size: {\n      small: 'max-w-3xs w-full p-2',\n      normal: 'max-w-xs w-full p-3',\n      large: 'max-w-sm w-full p-4'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**popover**:\n- base: Base classes applied to all popovers\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls max-width, width, and padding\n  - mode: 'floating' | 'inline' | 'mobileSheet' - Set from `inline` / `mobileSheet`; `root` positions the wrapper (fixed, in flow, or full-screen sheet)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Popover \n  trigger={{ content: \"Click Me\" }}\n  theme={{\n    popover: {\n      base: 'rounded-xl lift-5 border-2 border-primary',\n      size: {\n        normal: 'max-w-md p-4'\n      }\n    }\n  }}\n>\n  Custom styled popover content\n</Popover>\n```\n\n**Size Customization**:\n```svelte\n<Popover \n  size=\"large\"\n  trigger={{ content: \"Large Popover\" }}\n  theme={{\n    popover: {\n      size: {\n        large: 'max-w-lg p-6'\n      }\n    }\n  }}\n>\n  Large popover with more padding\n</Popover>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPopoverTheme } from '../components/Popover/index.ts';\n  \n  setPopoverTheme({\n    popover: {\n      base: 'rounded-lg lift-5 backdrop-blur-sm bg-white/95',\n      size: {\n        normal: 'max-w-sm p-4'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly tooltip: "\n# Tooltip\n\nContextual information shown on hover or keyboard focus. Two forms share one surface:\n\n- `<Tooltip>` — a component with a `trigger` prop, like every other overlay.\n- `tooltip()` — the underlying attachment, for elements you already render yourself.\n\nBoth are rendered by the single tooltip surface that `<Theme>` mounts (`TooltipHost`).\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Click to submit\" trigger={{ content: 'Submit', variant: 'outline' }} />\n```\n\n## Props\n\n- **content**: string | Snippet (required) - Tooltip body\n- **trigger**: Snippet<[Attachment<HTMLElement>]> | ButtonProps & { content?: string } (required) -\n  A snippet receives the tooltip attachment and spreads it on its own element; Button props render\n  a Button carrying it\n- **open**: boolean (default: false) - Shows the tooltip without hover or focus; bindable\n- **defaultOpen**: boolean (default: false) - Initial open state when `open` is not provided\n- **onOpenChange**: (open: boolean) => void - Called whenever the tooltip becomes visible or hidden,\n  hover and focus included\n- **position**: Placement (default: 'top') - Tooltip position relative to the trigger\n  - Options: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Visual size\n- **color**: Colors (default: 'neutral') - Color theme\n- **variant**: 'solid' | 'outline' | 'soft' (default: 'solid') - Visual style matching Chip\n- **delay**: number (default: 400) - Delay in ms before showing tooltip; zero shows immediately\n- **offset**: number - Distance from the trigger in pixels\n- **class**: string - Additional CSS classes\n- **transition**: FSOProps - Custom transition configuration\n- **theme**: TooltipThemeProps - Per-instance theme overrides\n- **onAfterOpen**: () => void - Callback after the opening transition completes\n- **onAfterClose**: () => void - Callback after the closing transition completes\n\nEvery prop except `trigger`, `open`, `defaultOpen` and `onOpenChange` is also an option of the\n`tooltip()` attachment.\n\n## Examples\n\n### Button Trigger\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"This is helpful information\"\n\ttrigger={{ content: 'Hover me', variant: 'outline', color: 'neutral' }}\n/>\n```\n\n### Snippet Trigger\n```svelte\n<script lang=\"ts\">\n\timport type { Attachment } from 'svelte/attachments';\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet helpTrigger(attach: Attachment<HTMLElement>)}\n\t<span class=\"underline\" {@attach attach}>What is this?</span>\n{/snippet}\n\n<Tooltip content=\"Anchored to any element you like\" trigger={helpTrigger} />\n```\n\n### Forced Open\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<!-- Useful for docs, screenshots and visual tests -->\n<Tooltip open content=\"Always visible\" trigger={{ content: 'Anchor', variant: 'outline' }} />\n```\n\n### Different Positions\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Top tooltip\" position=\"top\" trigger={{ content: 'Top' }} />\n<Tooltip content=\"Bottom tooltip\" position=\"bottom\" trigger={{ content: 'Bottom' }} />\n<Tooltip content=\"Left tooltip\" position=\"left\" trigger={{ content: 'Left' }} />\n<Tooltip content=\"Right tooltip\" position=\"right\" trigger={{ content: 'Right' }} />\n```\n\n### Different Colors\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Success!\" color=\"success\" trigger={{ content: 'Success' }} />\n<Tooltip content=\"Warning!\" color=\"warning\" trigger={{ content: 'Warning' }} />\n<Tooltip content=\"Error!\" color=\"danger\" trigger={{ content: 'Error' }} />\n```\n\n### Custom Delay\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Quick tooltip\" delay={100} trigger={{ content: 'Quick (100ms)' }} />\n<Tooltip content=\"Slow tooltip\" delay={1000} trigger={{ content: 'Slow (1000ms)' }} />\n```\n\n### Different Sizes and Variants\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Small tooltip\" size=\"small\" trigger={{ content: 'Small' }} />\n<Tooltip content=\"Large tooltip\" size=\"large\" trigger={{ content: 'Large' }} />\n<Tooltip content=\"Outlined tooltip\" variant=\"outline\" trigger={{ content: 'Outline' }} />\n<Tooltip content=\"Soft tooltip\" variant=\"soft\" trigger={{ content: 'Soft' }} />\n```\n\n### With Snippet Content\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet richContent()}\n\t<div class=\"p-2\">\n\t\t<strong>Pro Tip</strong>\n\t\t<p class=\"text-sm\">Use Ctrl+S to save</p>\n\t</div>\n{/snippet}\n\n<Tooltip content={richContent} trigger={{ content: 'Keyboard Shortcuts' }} />\n```\n\n### With Callbacks\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Tracked tooltip\"\n\tonAfterOpen={() => console.log('Tooltip opened')}\n\tonAfterClose={() => console.log('Tooltip closed')}\n\ttrigger={{ content: 'Track me' }}\n/>\n```\n\n## The tooltip() attachment\n\nUse the attachment when the element already exists in your markup — icons, table cells, list rows,\ndisabled wrappers — or inside another component's internals.\n\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button {@attach tooltip({ content: 'Click to submit' })}> Submit </button>\n\n<!-- On icons or any non-interactive element -->\n<span {@attach tooltip({ content: 'More information', position: 'right' })}> ⓘ </span>\n\n<!-- Disabled elements do not fire events, so wrap them -->\n<span {@attach tooltip({ content: 'Feature coming soon' })}>\n\t<button disabled>Disabled Button</button>\n</span>\n```\n\nThe `<Tooltip>` component hands this same attachment to a snippet trigger, so the two forms are\ninterchangeable.\n\n## Accessibility\n\n- Shows on pointer hover and on keyboard focus (`focusin` / `focusout` on the trigger element), so\n  attach it to focusable elements for keyboard users\n- Dismissed on mouse leave or blur\n- Non-interactive (cannot be clicked)\n- Renders with `role=\"tooltip\"` and sets `aria-describedby` on the trigger while visible (any previous value is restored on hide)\n- Does not block content behind it\n\n## Notes\n\n- Only one tooltip shows at a time; an `open` tooltip hands the surface over when another tooltip is\n  hovered and reports that through `onOpenChange`\n- Automatically positions to stay in viewport using Floating UI\n- Uses smart delay: subsequent tooltips show instantly if within 400ms of previous\n- Brief content only (use Popover for interactive content)\n- The surface is a singleton (`TooltipHost`) rendered by `<Theme>`\n- Does not lock scroll or trap focus\n\n## Theme Customization\n\nThe Tooltip uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main tooltip container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { TooltipThemeProps } from 'entasis/tooltip';\n\n// Example theme customization\nconst customTheme: TooltipThemeProps = {\n  root: {\n    base: 'inline-flex w-fit items-center rounded-full border font-medium',\n    size: {\n      small: 'h-5 px-2 text-xs',\n      normal: 'h-6 px-2.5 text-xs',\n      large: 'h-7 px-3 text-sm'\n    },\n\tcolor: {\n\t  neutral: 'bg-neutral text-neutral-contrast',\n      primary: 'bg-primary text-primary-contrast',\n      danger: 'bg-danger text-danger-contrast',\n      success: 'bg-success text-success-contrast',\n      warning: 'bg-warning text-warning-contrast',\n\t  info: 'bg-info text-info-contrast'\n\t},\n\tvariant: {\n\t  solid: 'bg-color text-color-contrast',\n\t  outline: 'border-color bg-transparent text-color-readable',\n\t  soft: 'bg-color-muted text-color-muted-readable'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all tooltips\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls text size and padding\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' - Matches Chip's visual variants\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Custom tooltip\"\n\ttheme={{ root: { base: 'rounded-lg lift-4 border-2', size: { normal: 'px-3 py-2 text-sm' } } }}\n\ttrigger={{ content: 'Hover me' }}\n/>\n```\n\n**Color Customization**:\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button\n\t{@attach tooltip({\n\t\tcontent: 'Success!',\n\t\tcolor: 'success',\n\t\ttheme: { root: { color: { success: 'bg-green-500 text-white lift-3' } } }\n\t})}\n>\n\tSuccess Tooltip\n</button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script lang=\"ts\">\n\timport { setTooltipTheme } from 'entasis/tooltip';\n\n\tsetTooltipTheme({\n\t\troot: {\n\t\t\tbase: 'rounded-md lift-4 backdrop-blur-sm',\n\t\t\tsize: { normal: 'px-3 py-1.5 text-sm' },\n\t\t\tcolor: { neutral: 'bg-gray-900 text-white', primary: 'bg-blue-500 text-white' }\n\t\t}\n\t});\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) — a short fade-and-rise, `duration: 'fast'`.\n- Resolved by the tooltip surface and handed to the underlying Popover, so it replaces the\n  popover preset.\n- Ladder: `<Theme components={{ tooltip: { motion } }}>` → `setTooltipTheme({ motion })` →\n  `theme.motion` → the tooltip's `transition` option. Reduced motion collapses it to 0.\n- The tooltip surface is a singleton rendered by `<Theme>`, so a `setTooltipTheme` call\n  made *below* `<Theme>` never reaches it. Call it at or above the `<Theme>` boundary, or\n  use the `<Theme components={{ tooltip }}>` registry, which always applies.\n";
+    readonly 'audio-player': "\n# AudioPlayer Component\n\nAudioPlayer is a native HTML5 audio player with Entasis chrome. It can render a\nwaveform or track seek/progress surface and composes controls from Button, Tooltip,\nPopover, and the shared Slider primitive.\n\n## Import\n\n```ts\nimport { AudioPlayer } from 'entasis/audio-player';\n```\n\n## Core Props\n\n- **src**: string - Single audio source URL.\n- **sources**: AudioPlayerSource[] - Multiple native source candidates.\n- **title**: string - Track title.\n- **label**: string - Accessible player label; falls back to `title`.\n- **artist**: string - Secondary metadata line.\n- **artwork**: string | false - Optional artwork image URL. Omitted artwork renders no fallback.\n- **variant**: 'waveform' | 'track' - Primary progress surface.\n- **layout**: 'block' | 'inline' - Controls/progress arrangement. Block stacks the seek surface below the header; inline places controls and seek on the same row when space allows.\n- **color**: Colors - Theme color for controls and progress fill.\n- **waveform**: number[] - Amplitude samples from 0 to 1. When omitted, samples are generated from the selected audio source when possible.\n- **waveformVariant**: 'centered' | 'histogram' - Waveform visual mode.\n- **waveformBars**: number - Number of bars rendered after resampling.\n- **controls**: AudioPlayerControl[] - Toggle play, seek, time, volume, loop, download.\n- **header**: Snippet<[AudioPlayerState]> - Replaces the full default header row.\n- **controlsSlot**: Snippet<[AudioPlayerState]> - Replaces the default controls area.\n- **leading**: Snippet<[AudioPlayerState]> - Renders before default metadata.\n- **trailing**: Snippet<[AudioPlayerState]> - Renders after default controls.\n- **seek**: Snippet<[AudioPlayerState]> - Replaces the waveform or track seek surface.\n- **download**: boolean | string - true uses the selected source, string uses that href.\n- **theme**: AudioPlayerThemeProps - Per-instance theme overrides.\n\n## Notes\n\nThe waveform and track surfaces are both seek inputs with an invisible range hitbox.\nWhen no waveform samples are provided, the component fetches and decodes the selected\naudio source in the browser to generate peak samples. While generation is pending, or\nif fetch/decode is unavailable, it uses a deterministic fallback waveform from source\nand metadata. Generation failures are reported through onError.\n";
+    readonly carousel: "\n# Carousel Component\n\nCarousel renders a scrollable collection from items. Its public data contract matches Stepper and Tabs: pass items, then render one generated slide with children({ carousel, item, index }).\n\nThe component owns the direct slide wrappers. Do not put a consumer-owned repeated slide loop directly inside Carousel.\n\nThe chrome is a FOOTER ROW under the slides, never an overlay: pagination fills the leading side, the prev/next pair sits at the trailing end — including with pagination={false}, where the arrows are the row's only child and still sit trailing. By default the pagination is a progress line whose fill is the fraction of the scrollable range already scrolled.\n\n## Basic Usage\n\n<script lang=\"ts\">\n\timport { Carousel } from 'entasis/carousel';\n\n\tconst items = [\n\t\t{ title: 'Signal', description: 'Collect the first insight.' },\n\t\t{ title: 'Orbit', description: 'Review the second item.' },\n\t\t{ title: 'Focus', description: 'Finish with the third item.' }\n\t];\n</script>\n\n<Carousel items={items} navigationButton={{ color: 'primary' }} pagination={{ color: 'primary' }}>\n\t{#snippet children({ item, index, carousel })}\n\t\t<article>\n\t\t\t<p>Slide {index + 1}</p>\n\t\t\t<h3>{item.title}</h3>\n\t\t\t<p>{item.description}</p>\n\t\t\t<button onclick={() => carousel.next()}>Next</button>\n\t\t</article>\n\t{/snippet}\n</Carousel>\n\n## Core Props\n\n- items: Item[] - the collection used to generate one slide per item.\n- children: Snippet<[CarouselRenderPayload<Item>]> - renders content inside each generated slide wrapper.\n- layout: ResponsiveProps<number> - number of slides visible. Default: 1.\n- gaps: ResponsiveProps<number> - gap in pixels between generated slides. Default: 20.\n- partialDelta: ResponsiveProps<number> - pixels to reveal from the adjacent slide. Default: 0.\n- dragFree: boolean - disables strict snap behavior when true.\n- navigationButton: object, snippet or false - built-in prev/next controls, custom controls, or no buttons. The object takes color and size: 'small' | 'normal' | 'large' (default 'normal'). Default: { color: 'neutral' }.\n- pagination: object, snippet or false - built-in pagination, custom pagination, or none. The object takes variant: 'line' | 'dots', color and size. Default: { variant: 'line' }. 'line' is a presentational progress bar (role=\"progressbar\", not clickable); 'dots' renders one clickable dot per page.\n\nWhen pagination and navigationButton are both false no footer is rendered and the track is scrolled by drag, wheel and the keyboard.\n- class: string - classes for the root container.\n- theme: CarouselThemeProps - theme overrides for public parts.\n\nThose three props take the shared ResponsiveProps shape: a plain number used at every width (gaps={16}) or a record keyed by breakpoint (layout={{ xs: 1, md: 2 }}). In the record form xs is the base — there is no default key — and the nearest defined key at or below the active width wins, so { xs: 1, md: 2 } shows two slides from md up. A key you leave unset below the narrowest one falls back to the prop default.\n\nThe xs / sm / md / lg / xl keys are the CAROUSEL's own width, not the viewport's: sm from 36rem, md from 42rem, lg from 56rem, xl from 72rem of carousel width, with xs below that. These are the shared container breakpoints exported from entasis/theme, so sm means the same box width in Carousel, Grid and Stack. A 360px carousel in a sidebar of a wide page is xs; the same carousel run full-bleed is xl. Give the carousel a width that fills its host (the default root is w-full) so it can measure itself.\n\n## Render Payload\n\nchildren receives:\n\n- carousel: CarouselState - state and navigation helpers.\n- item: Item - the current item, preserving the caller's item shape.\n- index: number - zero-based generated slide index.\n\nUse item fields directly. For example, if items contains { title, image }, item.title and item.image are typed inside the snippet.\n\n## Responsive Example\n\n<Carousel\n\titems={items}\n\tlayout={{ xs: 1, sm: 2, lg: 3 }}\n\tgaps={{ xs: 16, lg: 24 }}\n\tpartialDelta={48}\n\tnavigationButton={{ color: 'primary' }}\n\tpagination={{ color: 'primary' }}\n>\n\t{#snippet children({ item })}\n\t\t<div class=\"rounded bg-surface p-6\">\n\t\t\t<h3>{item.title}</h3>\n\t\t\t<p>{item.description}</p>\n\t\t</div>\n\t{/snippet}\n</Carousel>\n\n## Custom Navigation\n\nThe snippet is rendered once per direction inside the footer's trailing slot, so it needs no positioning of its own.\n\n<Carousel items={items} pagination={{ color: 'primary' }}>\n\t{#snippet navigationButton(carousel, attributes, direction)}\n\t\t<button\n\t\t\t{...attributes}\n\t\t\tonclick={() => direction === 'prev' ? carousel.prev() : carousel.next()}\n\t\t>\n\t\t\t{direction === 'prev' ? 'Previous' : 'Next'}\n\t\t</button>\n\t{/snippet}\n\n\t{#snippet children({ item })}\n\t\t<div>{item.title}</div>\n\t{/snippet}\n</Carousel>\n\n## Custom Pagination\n\n<Carousel items={items} navigationButton={{ color: 'primary' }}>\n\t{#snippet pagination(carousel, dotItems)}\n\t\t<div class=\"flex justify-center gap-2\">\n\t\t\t{#each dotItems as dot, index}\n\t\t\t\t<button {...dot.attributes}>\n\t\t\t\t\t<span class=\"sr-only\">Slide {index + 1}</span>\n\t\t\t\t</button>\n\t\t\t{/each}\n\t\t</div>\n\t{/snippet}\n\n\t{#snippet children({ item })}\n\t\t<div>{item.title}</div>\n\t{/snippet}\n</Carousel>\n\n## CarouselState\n\n- currentSlide - currently visible slide.\n- lastSlideInView - last visible slide in the viewport.\n- canScrollNext - whether next navigation is possible.\n- canScrollPrev - whether previous navigation is possible.\n- sortedSlides - generated slide records in DOM order.\n- dots - pagination dot records with active state and attributes.\n- progress - 0..1 fraction of the scrollable range already scrolled; the progress line's fill width. 0 on the server.\n- scrollRange - the track's scrollable distance (scrollWidth - clientWidth).\n- breakpoint - active breakpoint, resolved from the carousel's own measured width.\n- resolvedLayout - active slides-per-view value.\n- resolvedGaps - active gap value.\n- next(count?) - move forward by count slides, defaulting to the active layout size.\n- prev(count?) - move backward by count slides, defaulting to the active layout size.\n- nextButton and prevButton - attributes for custom button composition.\n\n## Keyboard and Accessibility\n\n- The slider track is a focusable landmark: role=\"region\", aria-roledescription=\"carousel\", tabindex=\"0\"; each slide is labelled \"Slide n of m\".\n- With the track focused, ArrowRight / ArrowLeft move to the next / previous slide (mirrored in RTL), Home and End jump to the first and last slide.\n- Built-in dots mark the active slide with aria-current (not aria-selected); custom dots receive the same attributes through dot.attributes.\n- The progress line is presentational: role=\"progressbar\" with aria-valuenow/min/max and an i18n accessible name. It is not focusable and not clickable.\n\n## Theme Parts\n\n- root - outer carousel container.\n- slider - scrollable track.\n- slide - generated direct slide wrapper.\n- footer - the chrome row under the slider.\n- progress - the progress line's recessed track.\n- progressFill - the progress line's coloured fill.\n- navigation - the prev/next pair's container.\n- navigationButton - built-in previous and next buttons.\n- dots - built-in dots container.\n- dot - built-in dot button.\n\nUse the slide theme part to style every generated wrapper consistently:\n\n<Carousel\n\titems={items}\n\ttheme={{ slide: { base: 'rounded-lg bg-surface p-4' } }}\n>\n\t{#snippet children({ item })}\n\t\t<h3>{item.title}</h3>\n\t{/snippet}\n</Carousel>\n";
+    readonly 'image-gallery': "\n# ImageGallery\n\nImageGallery enhances descendant images inside arbitrary HTML. It discovers matching `img`\nelements, makes them keyboard reachable, and initializes LightGallery against those real elements.\nLightGallery provides origin zoom, swipe navigation, thumbnails, pinch zoom, and image panning.\n\n## Usage\n\n```svelte\n<script>\n\timport { ImageGallery } from 'entasis/image-gallery';\n</script>\n\n<ImageGallery>\n\t<article>\n\t\t<img src=\"/photos/one.jpg\" alt=\"Mountain lake\" title=\"Morning at the lake\" />\n\t\t<p>Any HTML can live here.</p>\n\t\t<img src=\"/photos/two.jpg\" alt=\"Forest trail\" />\n\t</article>\n</ImageGallery>\n```\n\n## Image Discovery\n\nImages are discovered from the DOM with `imageSelector`, defaulting to `img`.\n\n- `src` comes from `img.currentSrc || img.src`.\n- `alt` comes from `img.alt`.\n- The default caption comes from `img.title || img.alt`.\n- The root attachment initializes LightGallery synchronously with the mounted wrapper and owns teardown.\n- There is no `items` prop and no high-resolution data attribute contract in v1.\n\n## Props\n\n- **open**: boolean (bindable, default: false) - Controls the zoomed gallery.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **activeIndex**: number (bindable, default: 0) - Controls the active discovered image.\n- **imageSelector**: string (default: \"img\") - Selector used inside the wrapper.\n- **disabled**: boolean (default: false) - Prevents image enhancement and opening.\n- **zoomMargin**: number (default: 32) - Minimum viewport margin around the zoomed image.\n- Zoom animation duration and easing now come from the `motion` theme slot (default tokens `normal` / `enter`); see Motion below.\n- **closeOnClickOutside**: boolean (default: true) - Closes from the backdrop.\n- **closeOnEscape**: boolean (default: true) - Closes on Escape.\n- **lockScroll**: boolean (default: true) - Locks page scroll while open.\n- **buttonLabel**: string (default: \"Open image gallery\") - Accessible label prefix for enhanced images.\n- **closeLabel**: string (default: \"Close image gallery\") - Accessible close button label.\n- **previousLabel**: string (default: \"Previous image\") - Previous control label.\n- **nextLabel**: string (default: \"Next image\") - Next control label.\n- **licenseKey**: string (default: LightGallery evaluation key) - LightGallery license key. A production key is required unless the consuming project is GPLv3-compatible.\n- **class**: string - Additional root classes.\n- **theme**: ImageGalleryThemeProps - Per-instance theme overrides.\n- **onOpenChange**: (open: boolean) => void - Fired once when the library requests a new open state.\n- **onIndexChange**: ({ index, gallery }) => void - Fired when navigation changes the active image.\n- **onAfterOpen**: (payload) => void - Fired after the open animation completes.\n- **onAfterClose**: (payload) => void - Fired after the close animation completes.\n\n## Slots\n\n- **children**: arbitrary HTML to render and enhance.\n- **caption**: custom caption content. Receives `ImageGalleryPayload`.\n\n## Accessibility\n\n- Discovered images receive `role=\"button\"`, `tabindex=\"0\"`, and an accessible label while mounted.\n- Previous attributes are restored when ImageGallery is destroyed or disabled.\n- Enter and Space open the gallery from a focused image.\n- The zoom layer uses `role=\"dialog\"` and `aria-modal=\"true\"`.\n- Focus moves into the LightGallery dialog after opening and returns to the source image after closing.\n- Escape closes the gallery by default.\n- LightGallery handles horizontal swipe and drag navigation.\n- Wheel, double-click, and two-finger pinch zoom the active image; drag pans while zoomed.\n- Static selector mode keeps LightGallery's `zoomFromOrigin` animation attached to the exact source image.\n\n## Examples\n\n### Controlled\n\n```svelte\n<script>\n\tlet open = $state(false);\n\tlet activeIndex = $state(0);\n</script>\n\n<button onclick={() => { activeIndex = 1; open = true; }}>\n\tOpen second image\n</button>\n\n<ImageGallery bind:open bind:activeIndex>\n\t<img src=\"/one.jpg\" alt=\"First image\" />\n\t<img src=\"/two.jpg\" alt=\"Second image\" />\n</ImageGallery>\n```\n\n### Custom caption\n\n```svelte\n<ImageGallery>\n\t<img src=\"/one.jpg\" alt=\"First image\" title=\"Editorial caption\" />\n\n\t{#snippet caption({ activeImage })}\n\t\t<p>{activeImage?.caption}</p>\n\t{/snippet}\n</ImageGallery>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants). Its resolved `duration` / `easing` become\n  the lightbox's animation duration and CSS easing (default tokens `normal` / `enter`).\n- Ladder: `<Theme components={{ 'image-gallery': { motion } }}>` →\n  `setImageGalleryTheme({ motion })` → `theme.motion`. Reduced motion collapses it to 0.\n";
+    readonly 'image-zoom': "\n# ImageZoom\n\nImageZoom renders an accessible image trigger powered by LightGallery's Medium Zoom plugin. It\nanimates the source image into a focused full-viewport view while preserving controlled state,\nhigh-resolution sources, slots, focus restoration, and configurable dismissal.\n\n## Usage\n\n```svelte\n<script>\n\timport { ImageZoom } from 'entasis/image-zoom';\n</script>\n\n<ImageZoom\n\tsrc=\"/photos/desk-thumb.jpg\"\n\tzoomSrc=\"/photos/desk.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Desk setup with a laptop and notebook\"\n/>\n```\n\n## Props\n\n- **src**: string - Thumbnail image source. Optional when the children slot renders an image.\n- **alt**: string - Accessible image text. Optional when the children slot image has alt text.\n- **zoomSrc**: string - Full-size image source. Defaults to `src`.\n- **zoomWidth / zoomHeight**: number - Intrinsic dimensions of `zoomSrc`. Provide both when `zoomSrc` differs from the thumbnail so the origin transition and final image use the same rectangle.\n- **open**: boolean (bindable, default: false) - Controls the zoom layer.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **disabled**: boolean (default: false) - Prevents opening.\n- **width / height / srcset / sizes / loading / decoding** - Forwarded to the thumbnail image.\n- **zoomMargin**: number (default: 40) - Minimum viewport margin around the zoomed image.\n- Zoom animation duration now comes from the `motion` theme slot (default token `slower`); see Motion below.\n- **closeOnClickOutside**: boolean (default: true) - Closes from the backdrop.\n- **closeOnEscape**: boolean (default: true) - Closes on Escape.\n- **closeOnScroll**: boolean (default: true) - Closes on wheel, touch-scroll, page scroll, or nested-container scroll.\n- **lockScroll**: boolean (default: false) - Locks page scroll while open.\n- **buttonLabel**: string (default: \"Zoom image\") - Accessible trigger label.\n- **closeLabel**: string (default: \"Close image zoom\") - Accessible close/backdrop label.\n- **backgroundColor**: string (default: theme background) - CSS color used by the Medium Zoom backdrop.\n- **licenseKey**: string (default: LightGallery evaluation key) - LightGallery license key. A production key is required unless the consuming project is GPLv3-compatible.\n- **showIndicator**: boolean (default: true) - Toggles the thumbnail zoom indicator.\n- **indicatorPosition**: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" (default: \"top-right\") - Corner used for the thumbnail zoom indicator.\n- **class**: string - Additional root classes.\n- **theme**: ImageZoomThemeProps - Per-instance theme overrides.\n- **onOpenChange**: (open: boolean) => void - Fired once when the library requests a new open state.\n- **onAfterOpen**: (payload) => void - Fired after the open animation completes.\n- **onAfterClose**: (payload) => void - Fired after the close animation completes.\n\n## Slots\n\n- **children**: custom thumbnail content. Receives `ImageZoomPayload`. When `src` or `alt` are omitted, ImageZoom reads them from the first child `img`.\n- **caption**: caption rendered over the zoom layer. Receives `ImageZoomPayload`.\n- **indicator**: custom thumbnail zoom indicator content. Receives `ImageZoomPayload`.\n\n## Accessibility\n\n- The thumbnail trigger is a native `button type=\"button\"`.\n- LightGallery renders and manages the modal dialog layer.\n- Escape closes the dialog by default.\n- Page or nested-container scroll closes the dialog by default.\n- Focus remains trapped in the zoom layer and returns to the prior control after closing.\n- Reduced motion disables the zoom transition.\n\n## Examples\n\n### Controlled\n\n```svelte\n<script>\n\tlet open = false;\n</script>\n\n<ImageZoom bind:open src=\"/image.jpg\" alt=\"Product detail\" />\n```\n\n### High-resolution zoom source\n\n```svelte\n<ImageZoom\n\tsrc=\"/image-640.jpg\"\n\tzoomSrc=\"/image-2400.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Architectural detail\"\n/>\n```\n\n### Child image source\n\n```svelte\n<ImageZoom>\n\t{#snippet children()}\n\t\t<img src=\"/image.jpg\" alt=\"Architectural detail\" />\n\t{/snippet}\n</ImageZoom>\n```\n\n### Caption\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\">\n\t{#snippet caption()}\n\t\t<span>Shot in the late afternoon.</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n### Custom indicator\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\" indicatorPosition=\"top-left\">\n\t{#snippet indicator()}\n\t\t<span>2x</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants). Only its resolved `duration` is used — it\n  becomes LightGallery's zoom animation duration (default token `slower`).\n- Ladder: `<Theme components={{ 'image-zoom': { motion } }}>` → `setImageZoomTheme({ motion })`\n  → `theme={{ motion: { duration: 250 } }}`. Reduced motion collapses it to 0.\n";
+    readonly 'media-volume': "\n# Media volume\n\nImport from `entasis/media-volume`.\n\nMediaVolumeControl composes a mute button and volume slider in inline or popover mode. Supply volume from 0 to 1, muted, onVolumeChange, and onToggleMuted. Popover disclosure uses open, defaultOpen, onOpenChange, onAfterOpen, and onAfterClose. mediaVolume, clampMediaVolume, and isMediaEffectivelyMuted expose the shared media volume state and calculations.\n";
+    readonly 'document-viewer': "\n# DocumentViewer Component\n\nA client-only, read-only viewer for PDF, DOCX/DOC, XLSX/XLS, CSV, and PPTX/PPT. It provides one capability-driven toolbar, thumbnail navigation for paged formats, and horizontally scrollable sheet tabs for workbooks. Apple Pages files produce an explicit unsupported-format error.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport { DocumentViewer } from 'entasis/document-viewer';\n\n\tlet file: File | undefined = $state();\n</script>\n\n<div class=\"h-[600px]\">\n\t<DocumentViewer src=\"/report.pdf\" />\n</div>\n\n{#if file}\n\t<div class=\"h-[600px]\">\n\t\t<DocumentViewer src={file} fileName={file.name} />\n\t</div>\n{/if}\n```\n\n## Source and format\n\n- **src**: string | URL | Blob | Uint8Array | ArrayBuffer (required).\n- **format**: 'pdf' | 'docx' | 'doc' | 'xlsx' | 'xls' | 'csv' | 'pptx' | 'ppt' | 'pages'. Optional explicit override.\n- **fileName**: Used for type detection and the default download name when binary input has no name.\n- Detection precedence is explicit format, filename/URL extension, MIME type, then binary signature.\n\nThe viewer fills its nearest sized parent. Give that parent a definite height; percentage height cannot resolve through an auto-height ancestor.\n\n## Navigation and display\n\n- **page**: one-based current page or slide (bindable).\n- **sheet**: one-based current workbook sheet (bindable).\n- **mode**: 'scroll' renders continuous pages/slides; 'single' renders only the current page/slide. It is bindable for PDF, DOCX/DOC, and PPTX/PPT.\n- **orientation**: 'vertical' or 'horizontal' continuous layout for PDF and DOCX/DOC.\n- **scale**, **rotation**, **fit**, **orientation**, and **totalPages** are bindable. Controls that do not apply to the active format are omitted.\n- **sidebar**: Show the thumbnail pager for paged documents. Default true.\n- **sheetTabs**: Show the bottom workbook tab rail. Default true.\n- **controls**: A subset of sidebar, navigation, pageInfo, zoom, fit, mode, orientation, rotate, search, download, and print; false hides the toolbar.\n- **DocumentViewerState** exposes format, unit, unitCount, sheetNames, warnings, capabilities, and navigation/search/zoom methods.\n\n## Runtime assets\n\nHeavy parsers are not package dependencies. The active format loads its pinned module, worker, and WASM from the default CDN manifest only after mount. Override individual URLs with the grouped **assets** prop for self-hosting or CSP requirements.\n\nWith the defaults, CSP must allow cdnjs.cloudflare.com, cdn.jsdelivr.net, and cdn.sheetjs.com in **script-src** and **connect-src**, add `worker-src blob:`, and add `'wasm-unsafe-eval'` to **script-src**. When assets are self-hosted, allow their configured origins instead.\n\n## Events and snippets\n\n- **onLoad**, **onError**, **onWarning**, **onPageChange**, and **onSheetChange** report lifecycle and navigation changes.\n- **toolbar** and **error** snippets receive DocumentViewerState.\n- **thumbnail** receives { viewer, index } and replaces each default thumbnail preview.\n\n## Fidelity\n\n- PDF preserves the existing selectable text layer, search highlights, links, rotation, view modes, download, and print.\n- DOCX and PPTX render in worker mode through headless OOXML canvases with selectable text and sanitized links.\n- XLSX/XLS/CSV use a read-only, two-axis virtualized grid. Formulae show cached values; no formula recalculation occurs.\n- DOC and PPT are normalized best-effort previews and always show a visible fidelity warning.\n";
+    readonly 'video-player': "\n# VideoPlayer Component\n\nVideoPlayer is a native HTML5 video player with Entasis chrome. It keeps the media engine dependency-free and composes controls from Button, Popover, PopupMenu/Menu, AspectRatio, and the shared Slider primitive.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { VideoPlayer } from 'entasis/video-player';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<VideoPlayer\n\tsrc=\"/videos/demo.mp4\"\n\tposter=\"/videos/demo-poster.jpg\"\n\ttitle=\"Product demo\"\n/>\n```\n\n## Multiple Sources and Tracks\n\n```svelte\n<VideoPlayer\n\ttitle=\"Launch recap\"\n\tposter=\"/videos/launch.jpg\"\n\tsources={[\n\t\t{ src: '/videos/launch.webm', type: 'video/webm' },\n\t\t{ src: '/videos/launch.mp4', type: 'video/mp4' }\n\t]}\n\ttracks={[\n\t\t{ id: 'en', src: '/captions/launch-en.vtt', kind: 'captions', srclang: 'en', label: 'English' },\n\t\t{ id: 'fr', src: '/captions/launch-fr.vtt', kind: 'subtitles', srclang: 'fr', label: 'French' }\n\t]}\n/>\n```\n\n## Props\n\n### Media\n- **src**: string - Single source URL.\n- **srcType**: string - MIME type for `src`.\n- **sources**: VideoPlayerSource[] - Multiple source candidates rendered as native `<source>` elements.\n- **tracks**: VideoPlayerTrack[] - Captions, subtitles, descriptions, chapters, or metadata tracks.\n- **poster**: string - Poster image.\n- **title** / **label**: string - Accessible media/player labels; `label` overrides `title`.\n- **preload**: 'none' | 'metadata' | 'auto' = 'metadata'.\n- **crossOrigin**: 'anonymous' | 'use-credentials' | ''.\n- **playsInline**: boolean = true.\n- **autoplay**: boolean = false.\n- **nativeControls**: boolean = false - Enables browser-native controls alongside or instead of custom controls.\n\n### Controls\n- **controls**: VideoPlayerControl[] - Custom controls to render. Defaults to play, seek backward/forward, time, seek, volume, settings, PiP, download, fullscreen.\n- **playbackRates**: number[] = [0.5, 0.75, 1, 1.25, 1.5, 2].\n- **autoHideControls**: boolean = true - Hides controls during playback after pointer/keyboard inactivity. Playback starts the hide timer; open popovers stay visible. Set false to keep controls visible.\n- **hideControlsDelay**: number = 1200.\n- **timeVariant**: 'elapsed' | 'remaining' | 'duration' = 'elapsed'.\n- **download**: boolean | string = true - true uses the selected media source, string uses the provided href, false hides download.\n- **disabled**: boolean = false - Disables custom controls, methods, and keyboard shortcuts.\n- **keyboardShortcuts**: boolean = true - space/k play-pause, arrows seek/volume, m mute, f fullscreen, p Picture-in-Picture, c captions.\n- **seekStep**: number = 10.\n- **volumeStep**: number = 0.05.\n\n### State Bindings\n- **currentTime**, **duration**, **buffered**: number.\n- **volume**: number from 0 to 1.\n- **muted**, **paused**, **ended**, **loop**: boolean.\n- **playbackRate**: number.\n- **fullscreen** and **pictureInPicture**: actual browser state; setting these props does not request the mode.\n- **captionsEnabled**: boolean.\n- **activeTextTrack**: string | null - Track id, label, srclang/language, or `kind:index`.\n- **error**: MediaError | Error | null.\n- **ref**: HTMLVideoElement | null.\n- **rootRef**: HTMLDivElement | null.\n\n### Layout and Theme\n- **size**: 'small' | 'normal' | 'large' = 'normal'.\n- **ratio**: AspectRatio ratio | 'auto' = '16x9'.\n- **class**: string.\n- **theme**: VideoPlayerThemeProps.\n\n### Slots\n- **children**: custom content inside the `<video>` element after generated source/track tags.\n- **overlay**: replaces the overlay layer.\n- **loading**, **errorContent**, **empty**: replace default loading/error/empty panels.\n\n### Events\n- **onPlay**, **onPause**, **onEnded**, **onTimeUpdate**, **onDurationChange**, **onVolumeChange**, **onRateChange**, **onLoopChange**, **onFullscreenChange**, **onPictureInPictureChange**, **onCaptionsChange** receive a VideoPlayerSnapshot.\n- **onError** receives `{ error, snapshot }`.\n\n## Methods\n\nThe component exports imperative methods:\n\n- **play()**, **pause()**, **togglePlay()**, **load()**.\n- **seekTo(time)**, **seekBy(delta)**.\n- **setVolume(volume)**, **setMuted(muted)**, **setPlaybackRate(rate)**, **setLoop(loop)**.\n- **setCaptionsEnabled(enabled)**, **setActiveTextTrack(trackId)**.\n- **toggleFullscreen()**, **togglePictureInPicture()**.\n- **getSnapshot()**.\n\n## Examples\n\n### Minimal Controls\n```svelte\n<VideoPlayer src=\"/videos/demo.mp4\" controls={['play', 'seek', 'time', 'fullscreen']} />\n```\n\n### Default Auto-hide Controls\n```svelte\n<VideoPlayer src=\"/videos/demo.mp4\" />\n```\n\n### Controlled State\n```svelte\n<script lang=\"ts\">\n\tlet paused = $state(true);\n\tlet currentTime = $state(0);\n</script>\n\n<VideoPlayer\n\tsrc=\"/videos/demo.mp4\"\n\tbind:paused\n\tbind:currentTime\n\tonTimeUpdate={(payload) => console.log(payload.currentTime)}\n/>\n```\n\n## Accessibility\n\n- The root is a labelled region with keyboard shortcuts when enabled.\n- Icon controls use accessible labels and explicit pressed state for toggles.\n- Auto-hidden controls become inert. Focus reveals controls temporarily during playback; popovers and menus keep them visible while open.\n- Captions state is reconciled from native text tracks so the public state only reports active captions when a track is actually showing.\n\n## Notes\n\n- HLS, DASH, Shaka, and DRM are not bundled. Use native browser support or compose a future engine through sources/slots.\n- Picture-in-Picture and fullscreen controls are disabled when unsupported by the current browser.\n";
+    readonly code: "\n# Code Component\n\nDisplays a syntax-highlighted code block with an optional header (language label\n+ copy button), line numbers, and header/footer slots. Highlighting is powered by\nTanStack Highlight with every language bundled (synchronous, SSR-safe) and a CSS-variable token palette, so colors\nadapt to light and dark automatically from the design tokens.\n\n## Basic Usage\n\n```svelte\n<Code language=\"typescript\" code={`const hello: string = 'world';`} />\n```\n\n## Props\n\n### Core Props\n- **code**: string (required) - Source code to highlight. Also what the copy button writes to the clipboard.\n- **language**: string (default: 'text') - Language id (`ts`, `svelte`, `css`, `shell`, `json`, `python`, …). Aliases like `typescript`, `js`, `bash` resolve automatically; every language TanStack Highlight ships is bundled, and unknown ids fall back to plain text.\n- **title**: string - Header label. Defaults to the language's display name (e.g. \"TypeScript\").\n\n### Display Props\n- **showLineNumbers**: boolean (default: false) - Renders a line-number gutter.\n- **showHeader**: boolean (default: true) - Renders the default header row (title + copy button). Set to false to show only the code block. Ignored when a custom `header` snippet is provided.\n- **copyable**: boolean (default: true) - Shows the copy-to-clipboard button. In the header when one is shown, otherwise a floating button in the top-right corner that appears on hover.\n- **wrap**: boolean (default: false) - Soft-wraps long lines instead of scrolling horizontally.\n- **maxHeight**: number | string (default: none) - Caps the block height and makes it vertically scrollable (via ScrollArea). A number is pixels; a string is used as-is (e.g. `'20rem'`).\n- **tabSize**: number (default: 2) - Tab width in spaces.\n\n### Styling Props\n- **class**: string - Additional CSS classes on the root element.\n- **theme**: CodeThemeProps - Theme overrides for the `code`, `header`, `title`, `container`, and `footer` parts.\n\n### Slots\n- **header**: Snippet<[CodeHeaderPayload]> - Replaces the default header row. Receives `{ language, label, copied, copy }`.\n- **footer**: Snippet - Optional footer row (e.g. a token count or a run button).\n\n## Examples\n\n### With a title and line numbers\n```svelte\n<Code\n  language=\"svelte\"\n  title=\"Counter.svelte\"\n  showLineNumbers\n  code={svelteSource}\n/>\n```\n\n### Custom header\n```svelte\n<Code language=\"json\" code={json}>\n  {#snippet header({ label, copied, copy })}\n    <div class=\"flex items-center justify-between px-3 py-1.5\">\n      <span>{label}</span>\n      <button onclick={copy}>{copied ? 'Copied!' : 'Copy'}</button>\n    </div>\n  {/snippet}\n</Code>\n```\n\n### With a footer\n```svelte\n<Code language=\"bash\" code={installCmd}>\n  {#snippet footer()}\n    <span>Run in your project root</span>\n  {/snippet}\n</Code>\n```\n\n## Theming\n\nThe block chrome (border, header, footer, container) is styled with cva parts and\nuses `bg-neutral-muted` / `text-neutral/70` for the header and footer.\nThe syntax colors are NOT part of cva — they come from the highlighter's `th-*` token classes plus the\ncolocated `CodeTheme.svelte`, which maps each `--code-token-*` variable onto our\n`--color-*` design tokens (keyword → primary, string → success, number → warning,\nfunction → info, tag → danger, …) and re-tunes a few roles under the dark selector.\n\n### Theme Structure\n- **root**: Root container (border, radius, background).\n- **header**: Header row (language label + copy button).\n- **title**: The language/title label text.\n- **container**: The scrollable code area wrapping the highlighted `<pre>`.\n- **footer**: Optional footer row.\n\n### Theme Type Definition\n\n```typescript\nimport type { CodeThemeProps } from 'entasis/code';\n\nconst customTheme: CodeThemeProps = {\n  root: { base: 'rounded-xl raised-4' },\n  header: { base: 'bg-primary text-primary-contrast px-4 py-2' }\n};\n```\n\n## Accessibility\n- The copy button carries an `aria-label` that reflects its state (\"Copy\" / \"Copied\").\n- Clipboard access is guarded (`navigator.clipboard`) and only runs client-side.\n\n## Notes\n- The highlighter is a singleton constructed at module load — SSR-safe, no top-level await.\n- Copied state resets automatically after 2 seconds and whenever `code` or `language` changes.\n";
+    readonly diff: "\n# Diff Component\n\nRenders rich, syntax-highlighted code diffs — split (side-by-side) or unified\n(inline) — for one or more files. Diff parsing, layout, and highlighting are\ndelegated to the `@pierre/diffs` engine. The diff shares the Code component's\nCSS-variable syntax palette, so colors adapt to light and dark automatically from\nthe design tokens.\n\nThe diff is rendered **client-side** (no SSR / no hydration): the component mounts\nthe underlying `FileDiff` instances inside an attachment on mount and tears them\ndown on cleanup. This keeps it robust without requiring experimental async Svelte.\n\n## Basic Usage\n\nDiff two raw files with a `[oldFile, newFile]` tuple:\n\n```svelte\n<Diff\n  files={[\n    { name: 'greet.ts', contents: 'export const greet = () => \"hi\";' },\n    { name: 'greet.ts', contents: 'export const greet = () => \"hello\";' }\n  ]}\n/>\n```\n\nOr render a unified patch string (can contain multiple files):\n\n```svelte\n<Diff patch={unifiedPatchString} />\n```\n\n`patch` and `files` are mutually exclusive — passing both surfaces an error.\n\n## Props\n\n### Content Props\n- **patch**: string - Unified diff/patch content (may cover multiple files). Mutually exclusive with `files`.\n- **files**: [FileContents, FileContents] - Tuple of `[oldFile, newFile]` raw contents. Each `FileContents` is `{ name, contents, cacheKey? }`. Mutually exclusive with `patch`.\n\n### Layout Props\n- **diffStyle**: 'split' | 'unified' (default: 'split') - Side-by-side vs inline.\n- **lineNumbers**: boolean (default: true) - Show the line-number gutter.\n- **wrapping**: boolean (default: false) - Wrap long lines instead of horizontal scrolling.\n- **backgrounds**: boolean (default: true) - Show the tinted added/removed line backgrounds.\n- **hunkSeparators**: 'simple' | 'metadata' | 'line-info' | 'line-info-basic' (default: 'line-info') - Style of the hunk separators.\n- **lineDiffType**: 'word-alt' | 'word' | 'char' | 'none' - Intra-line diff granularity.\n- **diffIndicators**: 'classic' | 'bars' | 'none' - Gutter change indicators.\n\n### Annotation Props\n- **lineAnnotations**: DiffLineAnnotation[] - Diff-side annotations. Each is `{ side: 'deletions' | 'additions', lineNumber }` (use `lineNumber: 0` for a file-level annotation).\n- **renderAnnotation**: Snippet<[DiffLineAnnotation]> - Snippet used to render each annotation's content.\n- **renderAnnotationClass**: string - Classes merged onto the annotation snippet host element.\n\n### Selection Props\n- **selection**: SelectedLineRange | null (bindable) - Controlled selected line range (`{ start, end, side?, endSide? }`). Use `null` to clear.\n- **defaultSelection**: SelectedLineRange | null - Initial selected line range when `selection` is omitted.\n- **onSelectionChange**: (payload: SelectedLineRange | null) => void - Fires once for each diff-driven selection change. Line selection is a selection model, so it uses the `onSelectionChange` state family, not `onSelect`.\n\n### Advanced Props\n- **options**: FileDiffOptions - Escape hatch forwarded to each `@pierre/diffs` `FileDiff`. The ergonomic props above win over matching fields.\n- **fileClass**: string - Extra classes for each per-file wrapper.\n- **class**: string - Extra classes for the root element.\n- **theme**: DiffThemeProps - Overrides for the `diff` (root), `file` (per-file wrapper), and `error` parts.\n\n## Examples\n\n### Split vs unified\n\n```svelte\n<Diff files={files} diffStyle=\"split\" />\n<Diff files={files} diffStyle=\"unified\" />\n```\n\n### With line annotations\n\n```svelte\n<Diff\n  {files}\n  lineAnnotations={[{ side: 'additions', lineNumber: 2 }]}\n>\n  {#snippet renderAnnotation(annotation)}\n    <span class=\"text-info\">Note on line {annotation.lineNumber}</span>\n  {/snippet}\n</Diff>\n```\n\n### Controlled selection\n\n```svelte\n<script>\n  let selection = $state(null);\n</script>\n\n<Diff {files} bind:selection onSelectionChange={(r) => console.log(r)} />\n```\n\n## Structure\n\n```\ndiv[data-slot=\"diff\"]           ← root (theme.diff)\n├── div[role=\"alert\"]           ← error surface, only when parsing/render fails (theme.error)\n└── div (mount container)       ← @pierre/diffs FileDiff instances mount here\n    └── div[data-diff-file]     ← one per file (theme.file / fileClass)\n```\n\n## Notes\n\n- Rendering is client-only; on the server the mount container is empty and fills in on mount.\n- Colors come from the shared Code syntax theme — the component renders `<CodeTheme />` so the `--code-token-*` variables exist wherever `Diff` is used, and light/dark adaptation is automatic.\n- Invalid input (both `patch` and `files`, an empty patch, or unparseable content) is caught and shown in the error surface instead of throwing.\n- Each file's code column scrolls horizontally inside the `@pierre/diffs` shadow root; while it overflows the component names it as a `role=\"region\"` and gives it a tab stop, so long lines are reachable from the keyboard.\n";
+    readonly globe: "\n# Globe Component\n\nAn interactive, auto-rotating WebGL globe (powered by cobe). Draggable, theme-aware, and animated\nin via a fade. Colors accept theme tokens and recolor automatically when the app theme changes.\n\n## Requires\n\nGlobe renders through cobe (WebGL). It is an optional peer dependency of entasis, so install it alongside entasis:\n\n`pnpm add cobe`\n\n## Basic Usage\n\n```svelte\n<script>\n  import { Globe } from '../components/Globe/index.ts';\n</script>\n\n<Globe />\n<Globe baseColor=\"neutral\" glowColor=\"primary\" markerColor=\"primary\" />\n```\n\n## Props\n\n### Appearance\n- **baseColor**: Colors | [number, number, number] (default: soft white) - Landmass dot color. Token or normalized RGB (0–1). A light base gives bright continents that pop on the shaded sphere.\n- **markerColor**: Colors | [number, number, number] (default: 'primary') - Marker dot color.\n- **glowColor**: Colors | [number, number, number] (default: soft white) - Atmospheric glow color.\n- **dark**: number (default: 1) - Shading darkness 0–1. Pass a negative value to follow the app theme (dark -> 1, light -> 0).\n- **opacity**: number (default: 1) - Globe texture opacity.\n- **scale**: number (default: 1) - Globe scale within the canvas.\n- **diffuse**: number (default: 1.2) - Diffuse lighting intensity.\n- **mapSamples**: number (default: 16000) - Number of map dots (0–100000).\n- **mapBrightness**: number (default: 6) - Brightness of the map dots.\n- **offset**: [number, number] | ['x%', 'y%'] - Globe offset in pixels or viewport-relative percentages.\n\n### Rotation & interaction\n- **autoRotate**: number (default: 0.3) - Idle rotation speed. 0 disables; negative reverses.\n- **draggable**: boolean (default: true) - Drag to rotate.\n- **dragAxis**: 'x' | 'y' | 'xy' (default: 'xy') - Axis dragging affects.\n- **dragSpeed**: number (default: 2) - Drag rotation speed.\n- **dragStiffness / dragDamping**: number - Spring momentum tuning.\n- **phi / theta**: number - Initial angles.\n\n### Bindable / callbacks\n- **scrollTo**: bind:scrollTo -> (lat, lng) => void - Imperatively rotate to a coordinate. Pins there until the next drag.\n- **onReady**: () => void - Fires once the first frame renders.\n\n### Styling\n- **class**: string - Applied to the <canvas>. Default theme sizes it 400px square; override for other sizes.\n- **theme**: GlobeThemeProps - Theme overrides (globe part).\n\n## Examples\n\n### Rotate to a city on demand\n```svelte\n<script>\n  let goTo;\n</script>\n\n<Globe bind:scrollTo={goTo} />\n<button onclick={() => goTo(48.85, 2.35)}>Paris</button>\n```\n\n### Custom markers and size\n```svelte\n<Globe\n  class=\"size-[600px]\"\n  markers={[{ location: [48.85, 2.35], size: 0.1 }]}\n/>\n```\n\n## Accessibility\n\nThe globe is a decorative <canvas> with no text content. When it conveys meaning, provide an\naccessible label on a wrapping element or nearby text; keyboard users cannot rotate it.\n\n## Notes\n\n- Renders nothing meaningful without WebGL support.\n- Colors resolve at runtime from CSS variables, so theme tokens recolor the globe on theme toggle.\n- The render loop runs while mounted and stops (and disposes the WebGL context) on unmount.\n";
+    readonly map: "\n# Map Component\n\nAn interactive vector map (pan, zoom, markers, clustering, shapes, geolocation) built on [MapLibre GL](https://maplibre.org/). MapLibre is loaded from a CDN at runtime and never bundled. The base map style is a tokenized Positron style whose colours are derived from your entasis design tokens, so the map adapts to light and dark automatically. Ported from svelte-pro's Map component.\n\n## Basic Usage\n\n```svelte\n<script>\n  import { Map } from '../components/Map/index.ts';\n  const markers = [\n    { id: 'paris', lng: 2.3522, lat: 48.8566, label: 'Paris' },\n    { id: 'lyon', lng: 4.8357, lat: 45.7640, label: 'Lyon' }\n  ];\n</script>\n\n<Map {markers} controls cluster popup tooltip />\n```\n\n## Props\n\n### Core Props\n- **markers**: MapMarker[] (required) - The markers to place. `MapMarker = { id, lng, lat, label?, description?, popup?, tooltip?, color?, data? }`. Ids must be unique; lng/lat are validated.\n- **center**: [number, number] (default: [2.3522, 48.8566]) - Initial map center (lng, lat).\n- **zoom**: number (default: 5) - Initial zoom level.\n- **bounds**: [w,s,e,n] | [[lng,lat],[lng,lat]] - Fit the view to these bounds (overrides center/zoom on mount).\n- **minZoom** / **maxZoom**: number - Zoom constraints.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Viewport height variant.\n\n### Style Props\n- **styleUrl**: string - Use a specific MapLibre style URL instead of the tokenized default (mutually exclusive with `styles`).\n- **styles**: { positron?: string; dark?: string } - Per-scheme style URL overrides (mutually exclusive with `styleUrl`).\n\n### Interaction Props\n- **interactive**: boolean - Enable/disable pan/zoom interactions.\n- **showAttribution**: boolean (default: true) - Show the attribution control.\n- **fitMarkersOnMount**: boolean - Fit the view to all markers on mount.\n- **fitMarkersPadding**: number - Padding (px) used when fitting markers.\n- **controls**: boolean | ('zoom-in'|'zoom-out'|'fit-markers'|'geolocate'|'reset')[] - Show the control cluster; pass an array to pick which buttons.\n- **controlPosition**: 'top-left'|'top-right'|'bottom-left'|'bottom-right' - Where to dock the controls.\n- **cluster**: boolean | MapClusterConfig - Cluster nearby markers.\n- **geolocation**: boolean | { enabled?, watch?, zoom?, showMarker? } - Locate the user.\n- **popup**: boolean | Snippet - Show a popover on marker click. `true` uses the marker's `popup`/`label`; a snippet receives `{ marker, data, map, lngLat, open, close }`.\n- **tooltip**: boolean | Snippet - Show a hover tooltip. Snippet receives `{ marker, data, map, lngLat, open }`.\n- **shapes**: MapShape[] - Draw circles, polylines, polygons or rectangles.\n\n### Content Props (Snippets)\n- **marker**: Snippet - Custom marker rendering; receives `{ marker, data, map, lngLat }`.\n- **clusterMarker**: Snippet - Custom cluster rendering; receives `{ id, count, coordinates, map, expand, markers, data, feature }`.\n- **userLocationMarker**: Snippet - Custom user-location marker.\n- **controlButton**: Snippet - Custom control button; receives `{ action, label, disabled, active, onclick }`.\n\n### Event Props\n- **onMarkerClick**: (payload) => void\n- **onClusterClick**: (payload) => void\n- **onReady**: (payload) => void - The MapLibre map instance is ready.\n- **onViewChange** / **onMoveEnd** / **onZoomEnd**: (payload) => void\n- **onError**: (error: Error) => void - Loading, style, or runtime errors (otherwise logged to console).\n\n### Advanced Props\n- **class**: string - Additional classes on the map root.\n- **theme**: MapTheme - Theme overrides for the root container.\n\n## Theming\n\nThe base style is generated at runtime from the current entasis `--color-*` tokens and re-generated whenever they change (theme flip, palette swap, runtime token edits): `primary` tints land, buildings and water like a monochrome basemap, `success` paints parks and points of interest, `danger` draws boundaries and `neutral` carries roads and labels on `surface`. To fully override the cartography, pass `styleUrl` or `styles`.\n\n## Accessibility\n\n- Markers are focusable buttons with descriptive labels; popups are keyboard-toggleable and close on Escape/outside-click.\n- The control cluster is a labelled button group.\n- A loading skeleton with `role=\"status\"` is shown until the map's first render; if the map fails to load (e.g. the CDN is unreachable) a `role=\"alert\"` message replaces it instead of hanging on the skeleton.\n\n## Notes\n\n- MapLibre GL JS + its stylesheet load from a CDN on first mount; nothing is bundled. A network connection is required for the library and the default Positron tiles.\n- `styleUrl` and `styles` cannot both be set.\n";
+    readonly markdown: "\n# Markdown Component\n\nRenders Markdown as themed HTML, built for streaming LLM output. Wraps the user's own [svelte-streamdown](https://github.com/) renderer, restyled with entasis design tokens so it matches the rest of the app and adapts to light and dark automatically. Incomplete/streaming Markdown (an unterminated code fence, a half-written table) is handled gracefully — nothing crashes or flashes as chunks arrive.\n\nFenced code blocks render through entasis's own Code component (syntax highlighting + copy button), and \\`mermaid\\` fences render through entasis's Mermaid component (pan/zoom, brand theming, and errorForgiving so a diagram being streamed in doesn't flash errors between chunks).\n\nCard, Stat, Stack, Grid, and GridSpan are also available as built-in MDX components. They can be used directly inside the Markdown source without passing an MDX component map.\n\n## Basic Usage\n\n\\`\\`\\`svelte\n<Markdown content={\"# Hello\\n\\nSome **bold** and _italic_ text.\"} />\n<Markdown content={message} size=\"small\" />\n<Markdown content={doc} size=\"large\" />\n\\`\\`\\`\n\n## Props\n\n### Core Props\n- **content**: string (required) - The Markdown source. Re-renders reactively as it changes; incomplete/streaming Markdown is handled gracefully (safe to bind to a growing string from a token stream).\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Type and spacing scale.\n  - **small**: compact — smaller headings, tighter block margins, \\`text-sm\\` body. Best for chat messages and dense UI.\n  - **normal**: the default reading scale (\\`text-base\\` body, shadcn-equivalent heading sizes).\n  - **large**: long-form — larger headings, roomier margins, \\`text-lg\\` body. Best for documents and articles.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root wrapper.\n- **theme**: MarkdownThemeProps - Overrides for the root wrapper part (size variants live here).\n- **mdxComponents**: StreamdownProps['mdxComponents'] - Custom MDX components. Matching names override the built-in entasis components.\n- **...streamdown passthroughs**: every other svelte-streamdown prop is forwarded except the ones entasis controls (\\`content\\`, \\`theme\\`, \\`baseTheme\\`, \\`mergeTheme\\`, \\`class\\`, \\`code\\`, \\`mermaid\\`, \\`children\\`, \\`streamdown\\`, \\`element\\`). Use these for streamdown features such as controlling which block types are parsed, link/image handling, and other renderer options — see the svelte-streamdown docs.\n\n## Rendering\n\n- **Block elements**: headings (h1–h6), paragraphs, lists (ordered, unordered, task lists), blockquotes, horizontal rules, tables, images and links are all styled from entasis tokens.\n- **GitHub alerts**: \\`> [!NOTE]\\`, \\`> [!TIP]\\`, \\`> [!IMPORTANT]\\`, \\`> [!WARNING]\\` and \\`> [!CAUTION]\\` render as colored callouts mapped to entasis info/success/primary/warning/danger muted pairings.\n- **Inline code** (\\`codespan\\`): styled as a subtle chip; its text size scales with \\`size\\`.\n- **Code fences**: rendered by entasis's Code component — syntax highlighting and a copy button. The code block sizing follows \\`size\\`.\n- **Mermaid fences**: a fence tagged \\`mermaid\\` renders through entasis's Mermaid component with \\`errorForgiving\\` enabled, so a diagram that is still streaming in holds its last valid frame instead of flashing parse errors. Diagram size maps from the Markdown \\`size\\`.\n\n## Built-in MDX components\n\nThe built-in tags are **Card**, **Stat**, **Stack**, **Grid**, and **GridSpan**:\n\n~~~svelte\nconst content = [\n  '<Grid columns={2} gap=\"lg\">',\n  '<GridSpan columns=\"full\">',\n  '<Card title=\"Release readiness\" variant=\"outline\">',\n  '<Stack gap=\"md\">Everything is **ready**.</Stack>',\n  '</Card>',\n  '</GridSpan>',\n  '<Stat label=\"Coverage\" value=\"94%\" trend=\"+3.2%\" trendDirection=\"up\" />',\n  '<Stat label=\"Issues\" value=\"3\" trend=\"-8\" trendDirection=\"down\" />',\n  '</Grid>'\n].join('\\n');\n\n<Markdown {content} />\n~~~\n\nMDX attributes support string, number, and boolean values. Imperative event handlers and root styling or link props are not forwarded from Markdown content. Caller-provided mdxComponents take priority, and the custom mdx snippet remains the fallback for unknown tags.\n\n## Theming\n\nThe full theme is derived from entasis design tokens (translated from the shadcn preset): borders use \\`border-neutral-muted\\`, muted surfaces use \\`bg-neutral-muted\\`, secondary text uses \\`text-neutral/70\\`, and so on. Because it is token-based, the rendered Markdown adapts to light and dark automatically and stays visually consistent with the rest of the app. Per-instance tweaks to the root wrapper go through the \\`theme\\` prop; deeper element overrides fall back safely to the built-in theme.\n\n## Examples\n\n### Chat message (small)\n\\`\\`\\`svelte\n<Markdown content={assistantMessage} size=\"small\" />\n\\`\\`\\`\n\n### Long-form document (large)\n\\`\\`\\`svelte\n<Markdown content={articleBody} size=\"large\" />\n\\`\\`\\`\n\n### Streaming from an LLM\n\\`\\`\\`svelte\n<script>\n\tlet content = $state('');\n\t// append tokens as they arrive\n\tfor await (const chunk of stream) content += chunk;\n</script>\n<Markdown {content} size=\"small\" />\n\\`\\`\\`\n\n## Accessibility\n\n- Output is semantic HTML (real headings, lists, tables, \\`<a>\\`, \\`<code>\\`), so the document outline and screen-reader navigation work as expected.\n- Code blocks inherit the Code component's accessible copy button (aria-labelled, keyboard operable) and Mermaid inherits its \\`role=\"img\"\\` + aria-label and keyboard-accessible controls.\n- Color is never the only signal for GitHub alerts — each keeps its label/heading text.\n- Task-list checkboxes are disabled and have no text of their own, so each carries an accessible name from the catalog (`taskComplete` / `taskIncomplete`).\n\n## Notes\n\n- Renders reactively: it is safe to bind \\`content\\` to a string that grows over time (token streaming). Partial Markdown between chunks won't throw.\n- The theme deep-merges over svelte-streamdown's built-in base theme, so any element entasis doesn't explicitly restyle still renders sensibly.\n- Code and Mermaid rendering delegate to entasis's own components rather than streamdown's, keeping copy/pan/zoom behavior consistent across the app.\n";
+    readonly marquee: "\n# Marquee Component\n\nThe Marquee component creates an infinite scrolling animation for displaying content. It automatically duplicates the slot content to create a seamless infinite loop effect and supports customizable speed, direction, fade effects, and pause-on-hover functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst items = [\n\t\t{ id: 1, text: 'Item 1' },\n\t\t{ id: 2, text: 'Item 2' },\n\t\t{ id: 3, text: 'Item 3' }\n\t];\n</script>\n\n<Marquee>\n\t{#each items as item}\n\t\t<div class=\"px-4 py-2 bg-surface rounded\">\n\t\t\t{item.text}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Props\n\n### Core Props\n- **children**: Snippet (required)\n  - Content to display in the marquee\n  - Parent component handles iteration over items\n  - Content is automatically duplicated based on `numberOfCopies`\n\n- **direction**: 'left' | 'up' (default: 'left')\n  - `'left'`: Horizontal scrolling from right to left\n  - `'up'`: Vertical scrolling from bottom to top\n\n- **numberOfCopies**: number (default: 2)\n  - Minimum number of times to duplicate the content for a seamless loop\n  - The component measures the viewport and first copy, then adds copies when the content is too short to cover the viewport continuously\n  - The effective count is bounded to 100 copies\n\n### Animation Props\n- **speed**: 'fast' | 'normal' | 'slow' | number (default: 'fast')\n  - Animation speed control\n  - `'fast'`: 20 seconds per cycle\n  - `'normal'`: 40 seconds per cycle\n  - `'slow'`: 80 seconds per cycle\n  - `number`: Custom duration in seconds (e.g., `30` for 30 seconds)\n\n- **reverse**: boolean (default: false)\n  - If true, animation runs in reverse direction\n  - For 'left': scrolls left to right\n  - For 'up': scrolls top to bottom\n\n- **pauseOnHover**: boolean (default: true)\n  - If true, animation pauses when mouse hovers over the marquee\n  - If false, animation continues regardless of hover state\n\n### Visual Props\n- **fade**: boolean (default: true)\n  - If true, applies the shared scroll-fade utility at the marquee edges\n  - Uses a static scroll-fade mode because the marquee is clipped animation, not a native scroll container\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Controls spacing between duplicated content copies\n  - `small`: Compact spacing (gap-2)\n  - `normal`: Standard spacing (gap-4)\n  - `large`: Expanded spacing (gap-6)\n\n### Styling Props\n- **ref**: HTMLDivElement | null (bindable)\n  - Reference to the marquee container\n\n- **class**: string\n  - Additional CSS classes for the marquee container\n\n- **innerClass**: string\n  - Additional CSS classes for each duplicated copy of the content\n\n- **theme**: MarqueeThemeProps\n  - Custom theme overrides for advanced styling\n\n## Examples\n\n### Basic Horizontal Marquee\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst testimonials = [\n\t\t{ author: 'John Doe', quote: 'Amazing product!' },\n\t\t{ author: 'Jane Smith', quote: 'Highly recommended!' },\n\t\t{ author: 'Bob Johnson', quote: 'Best purchase ever!' }\n\t];\n</script>\n\n<Marquee>\n\t{#each testimonials as item}\n\t\t<div class=\"px-8 py-4 bg-surface rounded-lg\">\n\t\t\t<p class=\"text-lg font-semibold\">\"{item.quote}\"</p>\n\t\t\t<p class=\"text-sm text-muted\">— {item.author}</p>\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### Logo Carousel\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst logos = [\n\t\t{ name: 'Company 1', logo: '/logo1.png' },\n\t\t{ name: 'Company 2', logo: '/logo2.png' },\n\t\t{ name: 'Company 3', logo: '/logo3.png' }\n\t];\n</script>\n\n<Marquee speed=\"normal\" size=\"large\">\n\t{#each logos as logo}\n\t\t<img src={logo.logo} alt={logo.name} class=\"h-12 w-auto\" />\n\t{/each}\n</Marquee>\n```\n\n### Vertical Marquee\n\n```svelte\n<Marquee direction=\"up\" class=\"h-[400px]\">\n\t{#each items as item}\n\t\t<div class=\"px-6 py-4 bg-surface rounded\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### With Fade Effect\n\n```svelte\n<Marquee fade={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Reverse Direction\n\n```svelte\n<Marquee reverse={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Speed\n\n```svelte\n<Marquee speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Different Sizes\n\n```svelte\n<!-- Small -->\n<Marquee size=\"small\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Normal (default) -->\n<Marquee size=\"normal\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Large -->\n<Marquee size=\"large\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Number of Copies\n\n```svelte\n<!-- More copies for smoother appearance -->\n<Marquee numberOfCopies={4} speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Disable Pause on Hover\n\n```svelte\n<Marquee pauseOnHover={false}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Combined Effects\n\n```svelte\n<Marquee \n\tfade={true}\n\treverse={true}\n\tspeed=\"slow\"\n\tsize=\"large\"\n>\n\t{#each items as item}\n\t\t<div class=\"px-8 py-6 bg-surface rounded-lg\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Structure\n\nThe Marquee component renders:\n- A container `<div>` with overflow hidden and optional scroll-fade utility classes\n- Multiple copies of the content (default 2) based on `numberOfCopies`\n- Each copy has the animation applied independently\n- Parent component iterates over items in the slot\n\n## Animation Details\n\n- Uses CSS keyframe animations for smooth GPU-accelerated performance\n- Content is duplicated `numberOfCopies` times to create seamless infinite scroll\n- Animation translates each copy by -100% of its width/height plus gap\n- Animation duration is controlled via CSS custom property `--animation-duration`\n- Pause on hover uses CSS `animation-play-state` for instant response\n- Reverse mode uses CSS `direction: reverse` for the animation\n\n## Accessibility\n\n- Uses `role=\"presentation\"` on the container as the marquee is decorative\n- Consider providing alternative static content for screen readers\n- Ensure sufficient color foreground for text content\n- Pause on hover helps users interact with and read content\n- Animation is disabled when the user requests reduced motion\n\n## Notes\n\n- Parent component is responsible for iterating over items (similar to Carousel pattern)\n- Content is automatically duplicated internally based on `numberOfCopies`\n- The component uses CSS animations for optimal performance\n- Custom speed values are specified in seconds (e.g., `30` = 30 seconds per cycle)\n- For vertical marquees, ensure the container has a defined height\n- Increasing `numberOfCopies` creates smoother appearance but uses more DOM elements\n- The fade effect uses the shared scroll-fade utility classes\n\n## Theme Customization\n\nThe Marquee component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main marquee container styles\n- **inner**: Inner scrolling content container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - direction: 'left' | 'up' - Scroll direction\n  - size: 'small' | 'normal' | 'large' - Gap between duplicated content\n  - fade: boolean - Applies shared scroll-fade utility classes\n\n**inner**:\n- base: Base classes for scrolling content\n- Variants:\n  - direction: 'left' | 'up' - Animation direction\n  - size: 'small' | 'normal' | 'large' - Gap size\n  - pauseOnHover: boolean - Pause animation on hover\n  - reverse: boolean - Reverse animation direction\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Marquee \n  theme={{\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: 'gap-4'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Custom Animation Styling**:\n```svelte\n<Marquee \n  theme={{\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      },\n      size: {\n        large: 'gap-6'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMarqueeTheme } from '../components/Marquee/index.ts';\n  \n  setMarqueeTheme({\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: 'gap-4'\n      }\n    },\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      }\n    }\n  });\n</script>\n```\n";
+    readonly mermaid: "\n# Mermaid Component\n\nRenders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt, pie, class, state, ER, etc.) from a code string, with pan, zoom, fullscreen and download controls. The diagram is themed with our design tokens so it adapts to light and dark automatically. Ported from svelte-streamdown's Mermaid element, rebuilt on the entasis state/theme system.\n\n## Basic Usage\n\n```svelte\n<Mermaid chart={`graph TD; A[Start] --> B{Choice}; B -->|Yes| C[OK]; B -->|No| D[Stop];`} />\n<Mermaid chart={sequenceCode} size=\"large\" />\n```\n\n## Props\n\n### Core Props\n- **chart**: string (required) - The mermaid diagram source. Sanitized before rendering (BOM, zero-width/control chars, smart quotes, CRLF, HTML entities, flowchart arrow spacing, trailing semicolons). Re-renders reactively when it changes.\n- **config**: MermaidConfig - Extra mermaid config merged over the defaults (`theme: 'base'`, `securityLevel: 'strict'`, brand `themeVariables`, flowchart `curve: 'basis'`). Pass `themeVariables` to override individual mapped colors, or `fontFamily` to change the diagram font.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - The height of the diagram viewport.\n\n### Interaction Props\n- **controls**: boolean | { fit?, zoomIn?, zoomOut?, expand?, download? } (default: true) - The floating controls to show. `true` shows all, `false` hides the bar, an object toggles individual controls.\n- **mouseWheelZoom**: boolean (default: true) - Enable mouse-wheel zoom over the diagram (activated after a short hover so page scroll isn't hijacked). Pan-drag and the zoom buttons work regardless.\n- **touchPan**: boolean (default: false) - Capture single-finger touch as a pan. Off inline so the diagram never traps page scroll; the fullscreen dialog turns it on. Pinch-zoom always works.\n- **errorForgiving**: boolean (default: false) - Swallow transient parse/render errors and keep the last valid diagram on screen instead of showing the error overlay. For token-streaming (LLM output), where the source is incomplete/invalid between chunks. Errors are still reported via `onError`.\n\n### Event Props\n- **onRender**: (state: MermaidState) => void - Called after each successful render.\n- **onError**: (error: Error) => void - Called when loading mermaid, parsing, or rendering fails.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root element (the panzoom viewport).\n- **theme**: MermaidTheme - Theme overrides (root, container, svg, buttons, error, skeleton).\n\n## Interactions\n\n- **Pan**: drag the diagram.\n- **Zoom**: the +/− buttons, mouse-wheel (after a short hover), pinch, or double-click.\n- **Fit**: the fit-to-view button re-centers and scales the diagram to the viewport.\n- **Fullscreen**: the expand button opens the same diagram in a `fullScreen` Dialog (focus trap, Escape and the close button exit, single-finger touch pans inside it).\n- **Download**: serializes the rendered diagram to a standalone .svg file.\n\n## Brand theming\n\nMermaid is initialized with `theme: 'base'` and a `themeVariables` object whose values are read from our `--color-*` design tokens at render time (mermaid reads them as concrete colors, not live CSS vars). The diagram re-renders when the active theme changes, so it stays in sync with light/dark. Mapping: `primaryColor -> --color-primary-muted`, `primaryTextColor/textColor -> --color-neutral`, `primaryBorderColor/nodeBorder -> --color-primary`, `lineColor -> --color-neutral-muted`, `background -> --color-surface`, `mainBkg -> --color-surface-raised`, `secondaryColor -> --color-secondary`, `tertiaryColor -> --color-neutral-muted`, plus note/cluster/title colors and `fontFamily`.\n\n## Examples\n\n### Live editable diagram\n```svelte\n<script>\n\tlet chart = $state('graph LR; A-->B; B-->C;');\n</script>\n<textarea bind:value={chart}></textarea>\n<Mermaid {chart} />\n```\n\n### Only some controls\n```svelte\n<Mermaid {chart} controls={{ zoomIn: true, zoomOut: true, fit: true, download: false, expand: false }} />\n```\n\n## Accessibility\n\n- The controls are Buttons with aria-labels and are keyboard accessible; the download uses safe blob/data URLs.\n- The render host has `role=\"img\"` with an aria-label; the error surface uses `role=\"alert\"`.\n\n## Notes\n\n- **mermaid is not bundled**: it is loaded from cdnjs at runtime, on the client only (mermaid **11.12.0**, the self-contained UMD build). The component is SSR-safe and shows a skeleton while loading. A strict Content-Security-Policy must allow `cdnjs.cloudflare.com` in `script-src`.\n- On a load failure or a mermaid parse/render error, an error surface is shown (danger tokens) with the message — `securityLevel: 'strict'` + `suppressErrorRendering` keep mermaid from injecting its own error DOM.\n- mermaid leaves temporary measuring containers in the body; they are removed after each render and on destroy.\n";
+    readonly 'qr-code': "\n# QRCode Component\n\nThe QRCode component renders a customizable QR code as an SVG. It supports theme sizes and colors, gradients, custom shapes for data modules and finder patterns, an embedded center image, and downloading as SVG, PNG or JPEG. Ported from react-qr-code (https://github.com/LGLabGreg/react-qr-code).\n\n## Basic Usage\n\n```svelte\n<QRCode value=\"https://example.com\" />\n<QRCode value=\"https://example.com\" size=\"large\" color=\"primary\" />\n```\n\n## Props\n\n### Core Props\n- **value**: string | string[] (required) - The value to encode. An array of strings represents multiple segments to further optimize the QR Code.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 96px (size-24)\n  - normal: 128px (size-32)\n  - large: 192px (size-48)\n- **color**: Colors (default: 'neutral') - Theme color of the modules and finder patterns. Applied through `currentColor`, so it adapts to the active theme.\n- **level**: 'L' | 'M' | 'Q' | 'H' (default: 'M') - The Error Correction Level.\n- **minVersion**: number (default: 1) - Minimum QR version (1-40) used as the lower bound when encoding.\n- **boostLevel**: boolean (default: true) - Allow raising the Error Correction Level when it does not increase the version.\n- **marginSize**: number (default: 4) - Number of modules used as margin (quiet zone). The QR specification requires 4.\n\n### Styling Props\n- **background**: string | GradientSettings - Background color or gradient. Transparent when not provided.\n- **gradient**: GradientSettings - Gradient applied to data modules and finder patterns. Overrides `color` and the settings colors.\n- **dataModulesSettings**: { color?, style?, randomSize?, scale?, lineWidth? } - Data module rendering.\n  - style: 'square' | 'square-sm' | 'pinched-square' | 'rounded' | 'leaf' | 'vertical-line' | 'horizontal-line' | 'circuit-board' | 'circle' | 'diamond' | 'star' | 'heart' | 'hashtag'\n- **finderPatternOuterSettings**: { color?, style? } - Outer finder pattern rendering.\n  - style: 'square' | 'pinched-square' | 'rounded-sm' | 'rounded' | 'rounded-lg' | 'circle' | 'inpoint-sm' | 'inpoint' | 'inpoint-lg' | 'outpoint-sm' | 'outpoint' | 'outpoint-lg' | 'leaf-sm' | 'leaf' | 'leaf-lg'\n- **finderPatternInnerSettings**: { color?, style? } - Inner finder pattern rendering.\n  - style: same as outer, plus 'diamond' | 'star' | 'heart' | 'hashtag' | 'microchip'\n- **imageSettings**: { src, width, height, excavate?, x?, y?, opacity?, crossOrigin? } - Embedded center image. `excavate` clears the modules behind the image. Pixel values are relative to the nominal size of the QR code.\n- **class**: string - Additional CSS classes on the SVG element.\n- **theme**: QRCodeTheme - Theme overrides.\n\n### Accessibility Props\n- **label**: string (default: 'QR Code') - Accessible label of the SVG.\n\n### Advanced Props\n- **ref**: SVGSVGElement | null (bindable) - The rendered SVG element.\n\n## Methods\n\nBind the component instance to access:\n\n- **download(options?)**: Downloads the QR code.\n  - options.name: string (default: 'qr-code') - File name without extension.\n  - options.format: 'svg' | 'png' | 'jpeg' (default: 'svg')\n  - options.dimension: number (default: 500) - Exported file width and height in pixels.\n\n```svelte\n<script>\n\tlet qr;\n</script>\n\n<QRCode bind:this={qr} value=\"https://example.com\" />\n<Button onclick={() => qr.download({ format: 'png' })}>Download</Button>\n```\n\n## Examples\n\n### Gradient with custom shapes\n```svelte\n<QRCode\n\tvalue=\"https://example.com\"\n\tgradient={{\n\t\ttype: 'linear',\n\t\trotation: 45,\n\t\tstops: [\n\t\t\t{ offset: '0%', color: '#6d78d5' },\n\t\t\t{ offset: '100%', color: '#d56d6d' }\n\t\t]\n\t}}\n\tdataModulesSettings={{ style: 'circle' }}\n\tfinderPatternOuterSettings={{ style: 'rounded' }}\n\tfinderPatternInnerSettings={{ style: 'circle' }}\n/>\n```\n\n### Embedded image\n```svelte\n<QRCode\n\tvalue=\"https://example.com\"\n\tlevel=\"H\"\n\timageSettings={{ src: '/logo.png', width: 24, height: 24, excavate: true }}\n/>\n```\n\n## Accessibility\n\n- The SVG has `role=\"img\"` and an `aria-label` (customizable via the `label` prop).\n\n## Notes\n\n- Colors default to `currentColor`, driven by the `color` prop theme classes; downloads resolve the computed color so exports match the on-screen theme.\n- Keep enough contrast between the modules and the surface behind the QR code, and prefer `level=\"H\"` when embedding an image, otherwise the code may not scan.\n- `randomSize` and low `scale`/`lineWidth` values in `dataModulesSettings` may degrade scannability.\n";
+    readonly hitbox: "\n# Hitbox Component\n\nHitbox enlarges the pointer target of an existing interactive element without changing its visible dimensions or semantics. It renders one transparent, aria-hidden span centered over its positioned parent; pointer events bubble to the parent button or link.\n\n## Usage\n\n```svelte\n<script>\n  import { Hitbox } from '../components/Hitbox/index.ts';\n</script>\n\n<button type=\"button\" aria-label=\"Select page\" class=\"relative size-2 rounded-full bg-primary\">\n  <Hitbox size=\"normal\" />\n</button>\n```\n\nThe interactive parent must establish a positioning context and allow overflow. Adjacent controls should reserve enough layout space for their hitboxes so targets do not overlap.\n\n## Props\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Target dimensions: 20px, 24px, or 28px.\n- **ref**: HTMLSpanElement | null - Bindable reference to the transparent span.\n- **class**: string - Classes applied to the span.\n- **theme**: HitboxThemeProps - Theme overrides for the root part.\n\n## Accessibility\n\nHitbox is aria-hidden and does not create another focusable element. The parent remains responsible for its accessible name, keyboard behavior, disabled state, and focus indication.\n\n## Theme\n\n- **root**: Transparent centered target surface and size variants.\n";
+    readonly slot: "\n# Slot Component\n\nThe Slot component is a utility for rendering dynamic content - it can render snippets, strings, numbers, or other components with proper handling and props passing.\n\n## Basic Usage\n\n```svelte\n<Slot render={content} />\n```\n\n## Props\n\n### Core Props\n- **render**: Slot - Content to render (can be string, number, Snippet, or component)\n- **class**: string - CSS class to apply to the wrapper\n\n## Slot Type\n\nThe Slot type accepts:\n- **string** - Rendered as text\n- **number** - Rendered as text\n- **Snippet** - Rendered as a Svelte snippet with props\n- **Component** - Rendered as a Svelte component\n\n## Examples\n\n### Render String\n```svelte\n<Slot render=\"Hello World\" />\n```\n\n### Render Number\n```svelte\n<Slot render={42} />\n```\n\n### Render Snippet\n```svelte\n{#snippet content()}\n\t<strong>Bold Text</strong>\n{/snippet}\n\n<Slot render={content} />\n```\n\n### Render Snippet\n```svelte\n{#snippet greeting()}\n\t<h1>Hello World!</h1>\n{/snippet}\n\n<Slot render={greeting} />\n```\n\n### With CSS Class\n```svelte\n<Slot \n\trender={content}\n\tclass=\"text-primary font-bold\"\n/>\n```\n\n### Conditional Rendering\n```svelte\n<script>\n\tlet content = condition ? 'Yes' : 'No';\n</script>\n\n<Slot render={content} />\n```\n\n### In Component Props\n```svelte\n<script lang=\"ts\">\n\timport { Slot, type SlotContent } from 'entasis/slot';\n\n\tlet { title, description }: { title: SlotContent; description: SlotContent } = $props();\n</script>\n\n<div class=\"card\">\n\t<Slot render={title} class=\"card-title\" />\n\t<Slot render={description} class=\"card-description\" />\n</div>\n```\n\n### Dynamic Icon\n```svelte\n<script>\n\tlet icon = condition ? checkIcon : xIcon;\n</script>\n\n<Slot render={icon} class=\"icon\" />\n```\n\n## Use Cases\n\n### 1. Flexible Component Props\nAllow component users to pass either static content or dynamic snippets:\n\n```svelte\n<Button>\n\t<Slot render={label} />\n</Button>\n```\n\n### 2. Conditional Content\nRender different content types based on runtime conditions:\n\n```svelte\n<Slot render={isLoading ? 'Loading...' : data} />\n```\n\n### 3. List Rendering\nRender items with flexible content:\n\n```svelte\n{#each items as item}\n\t<Slot render={item.label} />\n{/each}\n```\n\n## Notes\n\n- Automatically handles different content types\n- Safely renders null/undefined as empty\n- Class is applied to the wrapper element\n- Useful for building flexible, reusable components\n";
+    readonly theme: "\n# Theme\n\n`Theme` owns global theme selection, runtime design tokens, shared overlay state, and theme\ntransitions. Wrap the application once and use the `ThemeState` received by the children snippet.\n\n## Runtime design tokens\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme, type ThemeDesignTokenMap } from 'entasis/theme';\n\n\tlet spacing = $state<'small' | 'normal' | 'large'>('normal');\n\tconst designTokens = $derived({\n\t\tlight: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'normal',\n\t\t\ttypeScale: 'default',\n\t\t\traisedWithBorder: true,\n\t\t\tdefaultColor: 'neutral'\n\t\t},\n\t\tdark: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'small',\n\t\t\ttypeScale: 'compact',\n\t\t\traisedWithBorder: false,\n\t\t\tdefaultColor: 'neutral'\n\t\t}\n\t} satisfies ThemeDesignTokenMap<readonly ['light', 'dark']>);\n</script>\n\n<Theme {designTokens} transition=\"radial-top-right\">\n\t{#snippet children(theme)}\n\t\t<button onclick={() => (spacing = spacing === 'small' ? 'large' : 'small')}>\n\t\t\tChange density\n\t\t</button>\n\t\t<button onclick={() => (theme.theme = theme.resolvedTheme === 'dark' ? 'light' : 'dark')}>\n\t\t\tToggle color scheme\n\t\t</button>\n\t{/snippet}\n</Theme>\n```\n\n`designTokens` is keyed by logical theme name and respects the `attribute` and `value` props.\nEleven presets ship as `themePresets` (`dense`, `compact`, `balanced`, `comfortable`, `spacious`,\n`sharp`, `rounded`, `display`, `editorial`, `glass`, `terminal`): `designTokens={{ light: themePresets.glass.tokens, dark: themePresets.glass.tokens }}`.\nChanging the controlled object updates already-rendered Tailwind utilities without rebuilding CSS.\n\n### ThemeDesignTokens\n\n- `spacing`: `'small' | 'normal' | 'large' | number`. Globally scales density.\n- `spacingScale`: partial overrides for the strictly increasing `xs`, `sm`, `md`, `lg`,\n  and `xl` spacing multipliers. Defaults to 1/1.5/2/3/4.\n- `radius`: `'none' | 'subtile' | 'small' | 'normal' | 'large' | 'round' | number`.\n- `typeScale`: `'compact' | 'default' | 'comfortable' | 'large' | TypeScaleOptions`.\n- `raisedWithBorder`: toggles the border used by `raised-*` utilities.\n- `defaultColor`: `Colors` role kit chrome inherits when a control omits `color`.\n  Defaults to `neutral`. Set `primary` to restore an accent-colored kit. Compiles the\n  current-color family (`--color`, `--color-readable`, muted/contrast/light/dark variants)\n  and `--default-color` onto the theme selector. Do not set `data-color` on `html`.\n- `focusColor`, `selectedColor`, `hoverColor`, `pressedColor`: the four `Colors` **state\n  roles**. They pin, for the whole theme, what a focus ring, a persistent selection and the\n  transient hover/pressed layer look like, independently of the role of the control the state\n  lands on. They compile `--color-focus`, `--color-selected` (plus its `-contrast`,\n  `-readable` and `-muted-readable` companions), `--color-hover` and\n  `--color-pressed` onto the theme selector. There is no `--color-selected-muted`: the soft\n  fill is a translucent tint of `--color-selected` at `--state-selected-opacity`, so it reads\n  on any surface. None is declared at `:root`: every use site\n  falls back to the matching current role (`ring-focus` is\n  `var(--color-focus, var(--color))`, `bg-selected-muted` tints\n  `var(--color-selected, var(--color))`, the state layer is\n  `var(--color-hover, currentColor)` and on `:active`\n  `var(--color-pressed, var(--color-hover, currentColor))`), so leaving them unset changes\n  nothing and `data-color` keeps moving the states with `--color`. Theme-level only: there is\n  no per-component override. An unknown role throws.\n\nComponent-level density remains a local variant. It selects utility classes whose values inherit\nthe active global spacing token.\n\nGenerated interfaces should use the public `xs | sm | md | lg | xl` vocabulary through component\nprops and named gap/padding utilities. `micro` and `layout-*` are internal recipe tokens. Prefer\nparent-owned gaps over child margins; do not emit arbitrary spacing or unsupported radius values.\n\n## Theme selection\n\nThe selection props wrap `svelte-themes`: `themes`, `defaultTheme`, `forcedTheme`,\n`systemTheme`, `syncColorScheme`, `transitionOnChange`, `storageKey`, `attribute`,\n`value`, and `colorScheme`. The default themes are light and dark, with system selection\nenabled. `systemTheme`, `syncColorScheme`, and `transitionOnChange` all default to\n`true`; they map onto the library's `enableSystem`, `enableColorScheme`, and\n`disableTransitionOnChange` options.\n\n`ThemeState` exposes `theme`, `resolvedTheme`, `themes`, and `systemTheme`. Assign\n`theme.theme` to switch themes. The optional `transition` prop applies a named view transition;\nunsupported browsers and reduced-motion users switch instantly.\n\n`spinnerVariant` sets the global default spinner animation. The children snippet is required.\n\n## Motion tokens\n\nMotion is a token scale like spacing and radius: five duration steps and four easing roles.\n`motion` retunes them app-wide; an omitted token keeps its default.\n\n| Duration   | Default |     | Easing role  | Default       |\n| ---------- | ------- | --- | ------------ | ------------- |\n| `instant`  | 0ms     |     | `standard`   | `cubicInOut`  |\n| `fast`     | 100ms   |     | `enter`      | `cubicOut`    |\n| `normal`   | 200ms   |     | `exit`       | `cubicIn`     |\n| `slow`     | 300ms   |     | `emphasized` | `backOut`     |\n| `slower`   | 500ms   |     |              |               |\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme motion={{ duration: { normal: 150, slow: 260 }, easing: { standard: 'quintOut' } }}>\n\t{@render children()}\n</Theme>\n```\n\nThe Tailwind plugin emits the same scale as CSS variables on `html` (`--duration-normal`,\n`--ease-standard`, ...) plus the matching `duration-*` / `ease-*` utilities, so CSS transitions\nand Svelte transitions read one set of numbers. The `motion` prop rewrites those variables on\n`html` at runtime and `designTokens.motion` rewrites them again per theme, layered over the prop;\n`ThemeState.motion` resolves through the same two rungs, so the utilities and the presets never\ndisagree. `ThemeState.transition` is a deprecated alias for its `normal` duration and `standard`\neasing. Reduced motion resolves every duration to 0 and collapses the `--duration-*` variables via\nthe `data-entasis-reduce-motion` attribute on `html`.\n\nComponents keep their own transition in a reserved `motion` slot on their theme, so the `theme`\nprop covers motion as well as classes:\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n</script>\n\n<Dialog theme={{ motion: { duration: 'fast', easing: 'emphasized' } }} title=\"Quick\">Body</Dialog>\n```\n\n## Component theme registry\n\n`components` sets app-wide component theme defaults without a wrapper component per component:\nit is keyed by theme name (`dialog`, `button`, ...) and each entry takes the same slots as that\ncomponent's `theme` prop, the `motion` slot included. A `set<Component>Theme` call in a subtree\nbeats the registry, and an instance `theme` prop beats both — per slot: each rung layers on the one\nbelow it, so a subtree that restyles one slot keeps the registry's others.\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme\n\tcomponents={{\n\t\tdialog: { motion: { duration: 'fast' }, content: { base: 'rounded-2xl' } },\n\t\tbutton: { root: { base: 'tracking-wide' } }\n\t}}\n>\n\t{@render children()}\n</Theme>\n```\n\n## Reduced motion\n\n`reduceMotion` forces reduced motion on (`true`) or off (`false`) for every entasis animation,\noverriding the OS `prefers-reduced-motion` setting; omit it to follow the OS. The live result is\nexposed as `ThemeState.preferReducesMotion` (reactive, so it updates when the OS setting changes)\nand mirrored as a `data-entasis-reduce-motion` attribute on `html` for CSS-only animations.\n\n```svelte\n<script>\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme reduceMotion>{@render children()}</Theme>\n```\n\n## Build-time boundary\n\nThe Tailwind plugin still generates color palettes and registers utility names, variants,\nkeyframes, and spinner CSS. Spacing, radius, typography scale, raised borders,\n`defaultColor` and the four state roles (`focusColor`, `selectedColor`, `hoverColor`,\n`pressedColor`) belong to `Theme.designTokens`; colors remain CSS variables and can be\noverridden directly. `ThemeState.defaultColor` exposes the active role. Kit chrome should\nresolve omitted `color` props with `useDefaultColor`.\n";
+    readonly i18n: "\n# Internationalization\n\nImport from `entasis/i18n`.\n\nI18n provides locale messages to child components. setI18n and useI18n set and read the component context. en is the English message set; Messages and I18nInput describe translation inputs. locales and localeList expose the supported locale inventory with LocaleCode and LocaleMeta types.\n";
+    readonly 'tailwind-plugin': "\n# Main Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin'`\n\nThis palette-agnostic plugin registers shared utilities, variants, keyframes, and spinner CSS.\nUse it when colors are defined separately instead of through the theme plugin.\n\n## Configuration\n\n`spinner`\n- **Type**: `Spinner` object\n- **Default**: Auto-generated\n- **Description**: Custom spinner configuration for the `.ui-spinner` class\n\n## Shared utilities\n\n### `.state-layer`\n- Composites `currentColor` at `--state-hover-opacity` on hover and `data-highlighted=\"true\"`\n- Composites `currentColor` at `--state-pressed-opacity` on `:active`\n- Does not activate for disabled, `data-disabled`, or `aria-disabled=\"true\"` elements\n- Theme plugin defaults the opacities to 5% and 10% in light themes, and 16% and 32% in dark themes\n\n### `bg-selected-muted` / `rounded-<step>-concentric`\n- `bg-selected-muted` composites `var(--color-selected, var(--color))` at\n  `--state-selected-opacity` (0.07 light, 0.10 dark), so a persistent selection reads the same on\n  `surface`, `surface-raised` and `surface-floating`. `bg-color-muted` stays opaque.\n- `rounded-<step>-concentric` (also `rounded-t-<step>-concentric` /\n  `rounded-b-<step>-concentric`, with `<step>` one of `xs sm md lg xl 2xl 3xl 4xl`) keeps the\n  child on its own design step but caps it at what concentricity allows inside a rounded padded\n  container:\n  `min(var(--radius-<step>), var(--radius-parent) - max(--pad-parent-x, --pad-parent-y))`. The\n  container declares nothing: every `rounded-<step>` publishes `--radius-parent` to its\n  children and `p` / `px` / `py` publish `--pad-parent-x/-y`, so the two boxes stay\n  concentric at every `radius` preset. Outside any rounded container the parent radius is\n  infinite, so the child is exactly its step; a negative difference clamps to 0, a square corner.\n  Put it on a child that sits flush against the padding box; a floating child (an avatar, a\n  Button, a Chip) keeps its own radius.\n\nConfigure spacing, radius, typography scale, and raised borders at runtime through\n`Theme.designTokens`.\n\nSemantic spacing utilities use the active theme's `xs`, `sm`, `md`, `lg`, and `xl`\nscale for gaps, padding, margins, and physical insets. For example, `gap-lg`, `p-lg`,\n`top-lg`, and `left-lg` use the same spacing value. Inset utilities support `top`,\n`right`, `bottom`, and `left`, including responsive variants.\n";
+    readonly 'theme-tailwind-plugin': "\n# Theme Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin/theme'` generates color variables for each named theme. The declaration\nmarked `default: true` also registers the shared utility vocabulary, variants, spinner styles,\nand keyframes.\n\n```css\n@import 'tailwindcss';\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: light;\n\tdefault: true;\n\tcolorscheme: light;\n\tprimary: #5f62ef;\n\tsecondary: #e4e4e7;\n\tsurface: #fafafa;\n\tneutral: #18181b;\n}\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: dark;\n\tcolorscheme: dark;\n\tprimary: #5f62ef;\n\tsecondary: #27272a;\n\tsurface: #09090b;\n\tneutral: #fafafa;\n}\n```\n\n## Identity\n\n- `name: string` scopes variables to `html[data-theme=\"<name>\"]` and `.<name>`.\n- `default: boolean` also applies the palette to bare `html` and installs the shared engine.\n- `colorscheme: 'light' | 'dark'` controls mode-aware color defaults.\n- `prefersDark: boolean` also emits the palette under the dark system media query.\n\n## Palette inputs\n\nBase semantic colors are `primary`, `secondary`, `danger`, `success`, `warning`, `info`,\nand `neutral`. `surface` seeds the elevation ladder: `surface-recessed`,\n`surface-canvas`, `surface`, `surface-raised`, and `surface-floating`.\n\nEach semantic color supports explicit `-light`, `-lighter`, `-dark`, `-muted`,\n`-contrast`, `-readable`, and `-muted-readable` overrides. Missing variants are generated.\n`luminance` and `saturation` adjust the generated palette.\n\n`state-hover-opacity` and `state-pressed-opacity` calibrate the CSS variables consumed by\n`.state-layer`. They default to 0.05/0.10 in light mode and 0.16/0.32 in dark mode.\n`state-selected-opacity` (0.07 light, 0.10 dark) is the alpha `bg-selected-muted` composites the\nselected role at: the soft selection fill is a translucent tint, not an opaque colour, so it reads\nthe same on `surface`, `surface-raised` and `surface-floating`.\n\n## Runtime boundary\n\nSpacing, radius, typography scale, raised borders, `defaultColor` and the four state roles\n(`focusColor`, `selectedColor`, `hoverColor`, `pressedColor`) are not plugin options.\nConfigure them with the `designTokens` prop on `Theme`. Tailwind still discovers and compiles\nthe finite utility names; runtime theming changes the CSS variables those utilities consume.\n\nThe public spacing vocabulary is `xs | sm | md | lg | xl`, available through named gap, padding,\nand margin utilities such as `gap-md` and `px-lg`. The `micro` and `layout-*` values are\ninternal component-recipe tokens. Generated interfaces should prefer Stack/Grid gaps and must not\nemit arbitrary spacing or unsupported radius utilities.\n\nColor variables can also be overridden directly at runtime:\n\n```css\nhtml[data-theme='light'] {\n\t--color-primary: oklab(0.21 0.01 -0.03);\n}\n```\n";
+    readonly types: "\n# Shared theme types\n\nImport from `entasis/types`.\n\nColors names semantic palette roles. Sizes selects small, normal, or large component geometry. Density uses a separate compact/normal/comfortable scale for internal whitespace, so a density value can never be passed where a size is expected. The module also exports theme color paths, typography paths, transition easing, style types, and deepMerge for composing nested theme values.\n";
+    readonly cva: "\n# Component variants\n\nImport from `entasis/cva`.\n\ncva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.\n";
+    readonly scheduling: "\n# Scheduling layout\n\nImport from `entasis/scheduling`.\n\npackSchedulingLanes and packSchedulingOverlaps compute placements for scheduling intervals. SchedulingInterval, SchedulingLaneInterval, the lane placement and layout types, and the overlap placement and layout types describe their inputs and results. EventCalendar and GanttChart share these layout algorithms.\n";
+    readonly icons: "\n\n## Available Icons\n\nThis library includes 1513 icons. Each icon has 6 variants: regular, bold, duotone, fill, light, and thin.\n\n### Icon List\n\nacorn, addressBook, addressBookTabs, airplane, airplaneInFlight, airplaneLanding, airplaneTakeoff, airplaneTaxiing, airplaneTilt, airplay, airTrafficControl, alarm, alien, alignBottom, alignBottomSimple, alignCenterHorizontal, alignCenterHorizontalSimple, alignCenterVertical, alignCenterVerticalSimple, alignLeft, alignLeftSimple, alignRight, alignRightSimple, alignTop, alignTopSimple, amazonLogo, ambulance, anchor, anchorSimple, androidLogo, angle, angularLogo, aperture, appleLogo, applePodcastsLogo, approximateEquals, appStoreLogo, appWindow, archive, armchair, arrowArcLeft, arrowArcRight, arrowBendDoubleUpLeft, arrowBendDoubleUpRight, arrowBendDownLeft, arrowBendDownRight, arrowBendLeftDown, arrowBendLeftUp, arrowBendRightDown, arrowBendRightUp, arrowBendUpLeft, arrowBendUpRight, arrowCircleDown, arrowCircleDownLeft, arrowCircleDownRight, arrowCircleLeft, arrowCircleRight, arrowCircleUp, arrowCircleUpLeft, arrowCircleUpRight, arrowClockwise, arrowCounterClockwise, arrowDown, arrowDownLeft, arrowDownRight, arrowElbowDownLeft, arrowElbowDownRight, arrowElbowLeft, arrowElbowLeftDown, arrowElbowLeftUp, arrowElbowRight, arrowElbowRightDown, arrowElbowRightUp, arrowElbowUpLeft, arrowElbowUpRight, arrowFatDown, arrowFatLeft, arrowFatLineDown, arrowFatLineLeft, arrowFatLineRight, arrowFatLinesDown, arrowFatLinesLeft, arrowFatLinesRight, arrowFatLinesUp, arrowFatLineUp, arrowFatRight, arrowFatUp, arrowLeft, arrowLineDown, arrowLineDownLeft, arrowLineDownRight, arrowLineLeft, arrowLineRight, arrowLineUp, arrowLineUpLeft, arrowLineUpRight, arrowRight, arrowsClockwise, arrowsCounterClockwise, arrowsDownUp, arrowsHorizontal, arrowsIn, arrowsInCardinal, arrowsInLineHorizontal, arrowsInLineVertical, arrowsInSimple, arrowsLeftRight, arrowsMerge, arrowsOut, arrowsOutCardinal, arrowsOutLineHorizontal, arrowsOutLineVertical, arrowsOutSimple, arrowSquareDown, arrowSquareDownLeft, arrowSquareDownRight, arrowSquareIn, arrowSquareLeft, arrowSquareOut, arrowSquareRight, arrowSquareUp, arrowSquareUpLeft, arrowSquareUpRight, arrowsSplit, arrowsVertical, arrowUDownLeft, arrowUDownRight, arrowULeftDown, arrowULeftUp, arrowUp, arrowUpLeft, arrowUpRight, arrowURightDown, arrowURightUp, arrowUUpLeft, arrowUUpRight, article, articleMedium, articleNyTimes, asclepius, asterisk, asteriskSimple, at, atom, avocado, axe, baby, babyCarriage, backpack, backspace, bag, bagSimple, balloon, bandaids, bank, barbell, barcode, barn, barricade, baseball, baseballCap, baseballHelmet, basket, basketball, bathtub, batteryCharging, batteryChargingVertical, batteryEmpty, batteryFull, batteryHigh, batteryLow, batteryMedium, batteryPlus, batteryPlusVertical, batteryVerticalEmpty, batteryVerticalFull, batteryVerticalHigh, batteryVerticalLow, batteryVerticalMedium, batteryWarning, batteryWarningVertical, beachBall, beanie, bed, beerBottle, beerStein, behanceLogo, bell, bellRinging, bellSimple, bellSimpleRinging, bellSimpleSlash, bellSimpleZ, bellSlash, bellZ, belt, bezierCurve, bicycle, binary, binoculars, biohazard, bird, blueprint, bluetooth, bluetoothConnected, bluetoothSlash, bluetoothX, boat, bomb, bone, book, bookBookmark, bookmark, bookmarks, bookmarkSimple, bookmarksSimple, bookOpen, bookOpenText, bookOpenUser, books, bookUser, boot, boules, boundingBox, bowlFood, bowlingBall, bowlSteam, boxArrowDown, boxArrowUp, boxingGlove, bracketsAngle, bracketsCurly, bracketsRound, bracketsSquare, brain, brandy, bread, bridge, briefcase, briefcaseMetal, broadcast, broom, browser, browsers, bug, bugBeetle, bugDroid, building, buildingApartment, buildingOffice, buildings, bulldozer, bus, butterfly, cableCar, cactus, cake, calculator, calendar, calendarBlank, calendarCheck, calendarDot, calendarDots, calendarHeart, calendarMinus, calendarPlus, calendarSlash, calendarStar, calendarX, callBell, camera, cameraPlus, cameraRotate, cameraSlash, campfire, car, carBattery, cardholder, cards, cardsThree, caretCircleDoubleDown, caretCircleDoubleLeft, caretCircleDoubleRight, caretCircleDoubleUp, caretCircleDown, caretCircleLeft, caretCircleRight, caretCircleUp, caretCircleUpDown, caretDoubleDown, caretDoubleLeft, caretDoubleRight, caretDoubleUp, caretDown, caretLeft, caretLineDown, caretLineLeft, caretLineRight, caretLineUp, caretRight, caretUp, caretUpDown, carProfile, carrot, carSimple, cashRegister, cassetteTape, castleTurret, cat, cellSignalFull, cellSignalHigh, cellSignalLow, cellSignalMedium, cellSignalNone, cellSignalSlash, cellSignalX, cellTower, certificate, chair, chalkboard, chalkboardSimple, chalkboardTeacher, champagne, chargingStation, chartBar, chartBarHorizontal, chartDonut, chartLine, chartLineDown, chartLineUp, chartPie, chartPieSlice, chartPolar, chartScatter, chat, chatCentered, chatCenteredDots, chatCenteredSlash, chatCenteredText, chatCircle, chatCircleDots, chatCircleSlash, chatCircleText, chatDots, chats, chatsCircle, chatSlash, chatsTeardrop, chatTeardrop, chatTeardropDots, chatTeardropSlash, chatTeardropText, chatText, check, checkCircle, checkerboard, checkFat, checks, checkSquare, checkSquareOffset, cheers, cheese, chefHat, cherries, church, cigarette, cigaretteSlash, circle, circleDashed, circleHalf, circleHalfTilt, circleNotch, circlesFour, circlesThree, circlesThreePlus, circuitry, city, clipboard, clipboardText, clock, clockAfternoon, clockClockwise, clockCountdown, clockCounterClockwise, clockUser, closedCaptioning, cloud, cloudArrowDown, cloudArrowUp, cloudCheck, cloudFog, cloudLightning, cloudMoon, cloudRain, cloudSlash, cloudSnow, cloudSun, cloudWarning, cloudX, clover, club, coatHanger, codaLogo, code, codeBlock, codepenLogo, codesandboxLogo, codeSimple, coffee, coffeeBean, coin, coins, coinVertical, columns, columnsPlusLeft, columnsPlusRight, command, compass, compassRose, compassTool, computerTower, confetti, contactlessPayment, control, cookie, cookingPot, copy, copyleft, copyright, copySimple, cornersIn, cornersOut, couch, courtBasketball, cow, cowboyHat, cpu, crane, craneTower, creditCard, cricket, crop, cross, crosshair, crosshairSimple, crown, crownCross, crownSimple, cube, cubeFocus, cubeTransparent, currencyBtc, currencyCircleDollar, currencyCny, currencyDollar, currencyDollarSimple, currencyEth, currencyEur, currencyGbp, currencyInr, currencyJpy, currencyKrw, currencyKzt, currencyNgn, currencyRub, cursor, cursorClick, cursorText, cylinder, database, desk, desktop, desktopTower, detective, deviceMobile, deviceMobileCamera, deviceMobileSlash, deviceMobileSpeaker, deviceRotate, devices, deviceTablet, deviceTabletCamera, deviceTabletSpeaker, devToLogo, diamond, diamondsFour, diceFive, diceFour, diceOne, diceSix, diceThree, diceTwo, disc, discoBall, discordLogo, divide, dna, dog, door, doorOpen, dot, dotOutline, dotsNine, dotsSix, dotsSixVertical, dotsThree, dotsThreeCircle, dotsThreeCircleVertical, dotsThreeOutline, dotsThreeOutlineVertical, dotsThreeVertical, download, downloadSimple, dress, dresser, dribbbleLogo, drone, drop, dropboxLogo, dropHalf, dropHalfBottom, dropSimple, dropSlash, ear, earSlash, egg, eggCrack, eject, ejectSimple, elevator, empty, engine, envelope, envelopeOpen, envelopeSimple, envelopeSimpleOpen, equalizer, equals, eraser, escalatorDown, escalatorUp, exam, exclamationMark, exclude, excludeSquare, export, eye, eyeClosed, eyedropper, eyedropperSample, eyeglasses, eyes, eyeSlash, facebookLogo, faceMask, factory, faders, fadersHorizontal, falloutShelter, fan, farm, fastForward, fastForwardCircle, feather, fediverseLogo, figmaLogo, file, fileArchive, fileArrowDown, fileArrowUp, fileAudio, fileC, fileCloud, fileCode, fileCpp, fileCSharp, fileCss, fileCsv, fileDashed, fileDoc, fileHtml, fileImage, fileIni, fileJpg, fileJs, fileJsx, fileLock, fileMagnifyingGlass, fileMd, fileMinus, filePdf, filePlus, filePng, filePpt, filePy, fileRs, files, fileSql, fileSvg, fileText, fileTs, fileTsx, fileTxt, fileVideo, fileVue, fileX, fileXls, fileZip, filmReel, filmScript, filmSlate, filmStrip, fingerprint, fingerprintSimple, finnTheHuman, fire, fireExtinguisher, fireSimple, fireTruck, firstAid, firstAidKit, fish, fishSimple, flag, flagBanner, flagBannerFold, flagCheckered, flagPennant, flame, flashlight, flask, flipHorizontal, flipVertical, floppyDisk, floppyDiskBack, flowArrow, flower, flowerLotus, flowerTulip, flyingSaucer, folder, folderDashed, folderLock, folderMinus, folderOpen, folderPlus, folders, folderSimple, folderSimpleDashed, folderSimpleLock, folderSimpleMinus, folderSimplePlus, folderSimpleStar, folderSimpleUser, folderStar, folderUser, football, footballHelmet, footprints, forkKnife, fourK, frameCorners, framerLogo, function, funnel, funnelSimple, funnelSimpleX, funnelX, gameController, garage, gasCan, gasPump, gauge, gavel, gear, gearFine, gearSix, genderFemale, genderIntersex, genderMale, genderNeuter, genderNonbinary, genderTransgender, ghost, gif, gift, gitBranch, gitCommit, gitDiff, gitFork, githubLogo, gitlabLogo, gitlabLogoSimple, gitMerge, gitPullRequest, globe, globeHemisphereEast, globeHemisphereWest, globeSimple, globeSimpleX, globeStand, globeX, goggles, golf, goodreadsLogo, googleCardboardLogo, googleChromeLogo, googleDriveLogo, googleLogo, googlePhotosLogo, googlePlayLogo, googlePodcastsLogo, gps, gpsFix, gpsSlash, gradient, graduationCap, grains, grainsSlash, graph, graphicsCard, greaterThan, greaterThanOrEqual, gridFour, gridNine, guitar, hairDryer, hamburger, hammer, hand, handArrowDown, handArrowUp, handbag, handbagSimple, handCoins, handDeposit, handEye, handFist, handGrabbing, handHeart, handPalm, handPeace, handPointing, handsClapping, handshake, handSoap, handsPraying, handSwipeLeft, handSwipeRight, handTap, handWaving, handWithdraw, hardDrive, hardDrives, hardHat, hash, hashStraight, headCircuit, headlights, headphones, headset, heart, heartbeat, heartBreak, heartHalf, heartStraight, heartStraightBreak, hexagon, highDefinition, highHeel, highlighter, highlighterCircle, hockey, hoodie, horse, hospital, hourglass, hourglassHigh, hourglassLow, hourglassMedium, hourglassSimple, hourglassSimpleHigh, hourglassSimpleLow, hourglassSimpleMedium, house, houseLine, houseSimple, hurricane, iceCream, identificationBadge, identificationCard, image, imageBroken, images, imageSquare, imagesSquare, infinity, info, instagramLogo, intersect, intersection, intersectSquare, intersectThree, invoice, island, jar, jarLabel, jeep, joystick, kanban, key, keyboard, keyhole, keyReturn, knife, ladder, ladderSimple, lamp, lampPendant, laptop, lasso, lastfmLogo, layout, leaf, lectern, lego, legoSmiley, lessThan, lessThanOrEqual, letterCircleH, letterCircleP, letterCircleV, lifebuoy, lightbulb, lightbulbFilament, lighthouse, lightning, lightningA, lightningSlash, lineSegment, lineSegments, lineVertical, link, linkBreak, linkedinLogo, linkSimple, linkSimpleBreak, linkSimpleHorizontal, linkSimpleHorizontalBreak, linktreeLogo, linuxLogo, list, listBullets, listChecks, listDashes, listHeart, listMagnifyingGlass, listNumbers, listPlus, listStar, lock, lockers, lockKey, lockKeyOpen, lockLaminated, lockLaminatedOpen, lockOpen, lockSimple, lockSimpleOpen, log, magicWand, magnet, magnetStraight, magnifyingGlass, magnifyingGlassMinus, magnifyingGlassPlus, mailbox, mapPin, mapPinArea, mapPinLine, mapPinPlus, mapPinSimple, mapPinSimpleArea, mapPinSimpleLine, mapTrifold, markdownLogo, markerCircle, martini, maskHappy, maskSad, mastodonLogo, mathOperations, matrixLogo, medal, medalMilitary, mediumLogo, megaphone, megaphoneSimple, memberOf, memory, messengerLogo, metaLogo, meteor, metronome, microphone, microphoneSlash, microphoneStage, microscope, microsoftExcelLogo, microsoftOutlookLogo, microsoftPowerpointLogo, microsoftTeamsLogo, microsoftWordLogo, minus, minusCircle, minusSquare, money, moneyWavy, monitor, monitorArrowUp, monitorPlay, moon, moonStars, moped, mopedFront, mosque, motorcycle, mountains, mouse, mouseLeftClick, mouseMiddleClick, mouseRightClick, mouseScroll, mouseSimple, musicNote, musicNotes, musicNoteSimple, musicNotesMinus, musicNotesPlus, musicNotesSimple, navigationArrow, needle, network, networkSlash, networkX, newspaper, newspaperClipping, notches, note, noteBlank, notebook, notepad, notePencil, notEquals, notification, notionLogo, notMemberOf, notSubsetOf, notSupersetOf, nuclearPlant, numberCircleEight, numberCircleFive, numberCircleFour, numberCircleNine, numberCircleOne, numberCircleSeven, numberCircleSix, numberCircleThree, numberCircleTwo, numberCircleZero, numberEight, numberFive, numberFour, numberNine, numberOne, numberSeven, numberSix, numberSquareEight, numberSquareFive, numberSquareFour, numberSquareNine, numberSquareOne, numberSquareSeven, numberSquareSix, numberSquareThree, numberSquareTwo, numberSquareZero, numberThree, numberTwo, numberZero, numpad, nut, nyTimesLogo, octagon, officeChair, onigiri, openAiLogo, option, orange, orangeSlice, oven, package, paintBrush, paintBrushBroad, paintBrushHousehold, paintBucket, paintRoller, palette, panorama, pants, paperclip, paperclipHorizontal, paperPlane, paperPlaneRight, paperPlaneTilt, parachute, paragraph, parallelogram, park, password, path, patreonLogo, pause, pauseCircle, pawPrint, paypalLogo, peace, pen, pencil, pencilCircle, pencilLine, pencilRuler, pencilSimple, pencilSimpleLine, pencilSimpleSlash, pencilSlash, penNib, penNibStraight, pentagon, pentagram, pepper, percent, person, personArmsSpread, personSimple, personSimpleBike, personSimpleCircle, personSimpleHike, personSimpleRun, personSimpleSki, personSimpleSnowboard, personSimpleSwim, personSimpleTaiChi, personSimpleThrow, personSimpleWalk, perspective, phone, phoneCall, phoneDisconnect, phoneIncoming, phoneList, phoneOutgoing, phonePause, phonePlus, phoneSlash, phoneTransfer, phoneX, phosphorLogo, pi, pianoKeys, picnicTable, pictureInPicture, piggyBank, pill, pingPong, pinterestLogo, pintGlass, pinwheel, pipe, pipeWrench, pixLogo, pizza, placeholder, planet, plant, play, playCircle, playlist, playPause, plug, plugCharging, plugs, plugsConnected, plus, plusCircle, plusMinus, plusSquare, pokerChip, policeCar, polygon, popcorn, popsicle, pottedPlant, power, prescription, presentation, presentationChart, printer, prohibit, prohibitInset, projectorScreen, projectorScreenChart, pulse, pushPin, pushPinSimple, pushPinSimpleSlash, pushPinSlash, puzzlePiece, qrCode, question, questionMark, queue, quotes, rabbit, racquet, radical, radio, radioactive, radioButton, rainbow, rainbowCloud, ranking, readCvLogo, receipt, receiptX, record, rectangle, rectangleDashed, recycle, redditLogo, repeat, repeatOnce, replitLogo, resize, rewind, rewindCircle, roadHorizon, robot, rocket, rocketLaunch, rows, rowsPlusBottom, rowsPlusTop, rss, rssSimple, rug, ruler, sailboat, scales, scan, scanSmiley, scissors, scooter, screencast, screwdriver, scribble, scribbleLoop, scroll, seal, sealCheck, sealPercent, sealQuestion, sealWarning, seat, seatbelt, securityCamera, selection, selectionAll, selectionBackground, selectionForeground, selectionInverse, selectionPlus, selectionSlash, shapes, share, shareFat, shareNetwork, shield, shieldCheck, shieldCheckered, shieldChevron, shieldPlus, shieldSlash, shieldStar, shieldWarning, shippingContainer, shirtFolded, shootingStar, shoppingBag, shoppingBagOpen, shoppingCart, shoppingCartSimple, shovel, shower, shrimp, shuffle, shuffleAngular, shuffleSimple, sidebar, sidebarSimple, sigma, signature, signIn, signOut, signpost, simCard, siren, sketchLogo, skipBack, skipBackCircle, skipForward, skipForwardCircle, skull, skypeLogo, slackLogo, sliders, slidersHorizontal, slideshow, smiley, smileyAngry, smileyBlank, smileyMeh, smileyMelting, smileyNervous, smileySad, smileySticker, smileyWink, smileyXEyes, snapchatLogo, sneaker, sneakerMove, snowflake, soccerBall, sock, solarPanel, solarRoof, sortAscending, sortDescending, soundcloudLogo, spade, sparkle, speakerHifi, speakerHigh, speakerLow, speakerNone, speakerSimpleHigh, speakerSimpleLow, speakerSimpleNone, speakerSimpleSlash, speakerSimpleX, speakerSlash, speakerX, speedometer, sphere, spinner, spinnerBall, spinnerGap, spiral, splitHorizontal, splitVertical, spotifyLogo, sprayBottle, square, squareHalf, squareHalfBottom, squareLogo, squaresFour, squareSplitHorizontal, squareSplitVertical, stack, stackMinus, stackOverflowLogo, stackPlus, stackSimple, stairs, stamp, standardDefinition, star, starAndCrescent, starFour, starHalf, starOfDavid, steamLogo, steeringWheel, steps, stethoscope, sticker, stool, stop, stopCircle, storefront, strategy, stripeLogo, student, subsetOf, subsetProperOf, subtitles, subtitlesSlash, subtract, subtractSquare, subway, suitcase, suitcaseRolling, suitcaseSimple, sun, sunDim, sunglasses, sunHorizon, supersetOf, supersetProperOf, swap, swatches, swimmingPool, sword, synagogue, syringe, table, tabs, tag, tagChevron, tagSimple, target, taxi, teaBag, telegramLogo, television, televisionSimple, tennisBall, tent, terminal, terminalWindow, testTube, textAa, textAlignCenter, textAlignJustify, textAlignLeft, textAlignRight, textAUnderline, textB, textbox, textColumns, textH, textHFive, textHFour, textHOne, textHSix, textHThree, textHTwo, textIndent, textItalic, textOutdent, textStrikethrough, textSubscript, textSuperscript, textT, textTSlash, textUnderline, thermometer, thermometerCold, thermometerHot, thermometerSimple, threadsLogo, threeD, thumbsDown, thumbsUp, ticket, tidalLogo, tiktokLogo, tilde, timer, tipi, tipJar, tire, toggleLeft, toggleRight, toilet, toiletPaper, toolbox, tooth, tornado, tote, toteSimple, towel, tractor, trademark, trademarkRegistered, trafficCone, trafficSign, trafficSignal, train, trainRegional, trainSimple, tram, translate, trash, trashSimple, tray, trayArrowDown, trayArrowUp, treasureChest, tree, treeEvergreen, treePalm, treeStructure, treeView, trendDown, trendUp, triangle, triangleDashed, trolley, trolleySuitcase, trophy, truck, truckTrailer, tShirt, tumblrLogo, twitchLogo, twitterLogo, umbrella, umbrellaSimple, union, unite, uniteSquare, upload, uploadSimple, usb, user, userCheck, userCircle, userCircleCheck, userCircleDashed, userCircleGear, userCircleMinus, userCirclePlus, userFocus, userGear, userList, userMinus, userPlus, userRectangle, users, usersFour, userSound, userSquare, usersThree, userSwitch, van, vault, vectorThree, vectorTwo, vibrate, video, videoCamera, videoCameraSlash, videoConference, vignette, vinylRecord, virtualReality, virus, visor, voicemail, volleyball, wall, wallet, warehouse, warning, warningCircle, warningDiamond, warningOctagon, washingMachine, watch, waveform, waveformSlash, waves, waveSawtooth, waveSine, waveSquare, waveTriangle, webcam, webcamSlash, webhooksLogo, wechatLogo, whatsappLogo, wheelchair, wheelchairMotion, wifiHigh, wifiLow, wifiMedium, wifiNone, wifiSlash, wifiX, wind, windmill, windowsLogo, wine, wrench, x, xCircle, xLogo, xSquare, yarn, yinYang, youtubeLogo\n\n\n## Usage \nImport icons with the following pattern \"import { iconNameIcon, iconName[Variant]Icon } from \"entasis/icons/iconName\"\nThen use them as svelte 5 snippets. \nThey can receive the following props : \n```ts\ntype IconProps = {\n\tsize: number | string;\n\tmirrored?: boolean;\n\tcolor?: Colors | string; // primary, secondary, danger, success, warning, info, neutral, or a hex color\n} & SVGAttributes<SVGSVGElement>;\n```\n\n```svelte\n<script>  \n    import { houseIcon } from \"entasis/icons/house\";\n</script>\n  {@render houseIcon({ size: 24, color: 'primary' })}\n```\n\n### Passing Icons to Components with Default Props\n\nWhen passing icons to components that accept snippet props (like `prefix` or `suffix`), you can use the `withProps` method to set default props. This avoids writing snippet markup.\n\n**Using `withProps` (Recommended):**\n```svelte\n<script>\n    import { eyeClosedIcon } from \"entasis/icons/eyeClosed\";\n    import { Button } from \"entasis/button\";\n</script>\n\n<Button prefix={eyeClosedIcon.withProps({ color: \"danger\" })}>\n    Click me\n</Button>\n```\n\n**Without `withProps` (Verbose):**\n```svelte\n<script>\n    import { eyeClosedIcon } from \"entasis/icons/eyeClosed\";\n    import { Button } from \"entasis/button\";\n</script>\n\n<Button>\n    {#snippet prefix()}\n        {@render eyeClosedIcon({ color: \"danger\" })}\n    {/snippet}\n    Click me\n</Button>\n```\n\nThe `withProps` method creates a new snippet with default props, making it cleaner and more concise when passing icons to components.\n\n## Customization\n\nIcons inherit the current text color and can be styled with CSS\nIcons by default have a size of 1lh so their size is consistent with other stuff on the same line.\nIt is therefore not mandatory to use either the size or the color props unless in case of a very specific use case.\n\n## Best Practices\n1. **Consistent Sizing**: Use consistent icon sizes within the same interface\n2. **Semantic Usage**: Choose icons that clearly represent their function\n4. **Performance**: Import only the icons you need to reduce bundle size\n5. **Variants**: Use appropriate variants for visual hierarchy and emphasis\n";
+    readonly 'spinner-overlay': "\n# Spinner overlay\n\nImport from `entasis/spinner-overlay`.\n\nspinnerOverlay creates a Svelte attachment that displays a loading indicator over its element. SpinnerOverlayOptions configures loading, text, class, semantic color, semantic size, and spinner variant. setSpinnerOverlayTheme and useSpinnerOverlayTheme customize the overlay, indicator, and text parts. The attachment reads the nearest Theme context for the default spinner variant.\n";
+};
+export type ComponentMcpId = keyof typeof componentMcpRegistry;