entasis 0.4.1 → 0.5.0

package/dist/components/VideoPlayer/videoPlayer.theme.d.ts

@@ -289,7 +289,7 @@ export declare const setVideoPlayerTheme: (theme: InferComponentTheme<{
     popoverPanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     volumePanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useVideoPlayerTheme: (theme?: InferComponentTheme<{
+export declare const useVideoPlayerTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -432,147 +432,4 @@ export declare const useVideoPlayerTheme: (theme?: InferComponentTheme<{
     menu: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     popoverPanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     volumePanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        disabled: {
-            true: string;
-            false: string;
-        };
-        fullscreen: {
-            fullscreen: string;
-            windowed: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    aspectRatio: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    frame: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        ratio: {
-            auto: string;
-            fixed: string;
-            fullscreen: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    media: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        disabled: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    overlay: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        visible: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    panel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        tone: {
-            loading: string;
-            error: string;
-            empty: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controls: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        visible: {
-            true: string;
-            false: string;
-        };
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlsBackdrop: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    controlsBar: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlRow: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlStart: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlCenter: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlEnd: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    controlButton: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    compactTransport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    compactSettings: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    secondaryControls: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    slider: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        disabled: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    timelineTrack: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        disabled: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    timelineRail: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timelineBuffered: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timelineRange: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timelineThumb: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timelineInput: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    time: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    menu: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    popoverPanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    volumePanel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/generated/componentContract.d.ts

@@ -1824,7 +1824,7 @@ export declare const componentInventory: readonly [{
     readonly id: "cva";
     readonly subpath: "entasis/cva";
     readonly sourceIndex: "src/lib/utils/cva/index.ts";
-    readonly exportedSymbols: readonly ["ClassArray", "ClassDictionary", "ClassValue", "ComponentVariant", "InferComponentTheme", "VariantProps", "compose", "cva", "cx", "setComponentTheme", "useComponentTheme"];
+    readonly exportedSymbols: readonly ["BoundTheme", "ClassArray", "ClassDictionary", "ClassValue", "ComponentVariant", "InferComponentTheme", "SharedThemeProps", "VariantProps", "compose", "cva", "cx", "setComponentTheme", "useComponentTheme"];
     readonly docs: readonly [];
     readonly capabilities: readonly ["styling", "utility"];
     readonly relatedComponents: readonly ["theme"];

package/dist/generated/componentContract.js

@@ -4301,11 +4301,13 @@ export const componentInventory = [
         subpath: 'entasis/cva',
         sourceIndex: 'src/lib/utils/cva/index.ts',
         exportedSymbols: [
+            'BoundTheme',
             'ClassArray',
             'ClassDictionary',
             'ClassValue',
             'ComponentVariant',
             'InferComponentTheme',
+            'SharedThemeProps',
             'VariantProps',
             'compose',
             'cva',

package/dist/generated/componentMcpRegistry.d.ts

@@ -12,7 +12,7 @@ export declare const componentMcpRegistry: {
     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-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 a bare mark on the left, no badge: a spinner for active calls and a coloured dot for settled calls (info while running, success, danger, muted when cancelled). 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";
@@ -104,7 +104,7 @@ export declare const componentMcpRegistry: {
     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 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- **inset**: a spacing step or `'none'` — how far a drawer stands off the screen edge for this dialog. Defaults to the theme's `designTokens.drawerInset` (`'layout-md'`). At `'none'` the drawer is edge to edge, its edge corners square off and only the corners facing the page stay rounded\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-r-[var(--drawer-edge-radius)] 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";
@@ -133,7 +133,7 @@ export declare const componentMcpRegistry: {
     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 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. A resolver takes an optional second argument, the shared variant values, and then returns every class slot already bound to them, so a template calls `slots.root()` instead of passing the same props to each slot. 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";

package/dist/tailwind/colors.js

@@ -462,7 +462,13 @@ export const generateColorPalette = (opts) => {
         const baseColor = opts.neutral
             ? adjustColor(color.DEFAULT)
             : setPerceptualLightness(surface.DEFAULT, isDark ? 0.96 : 0.22);
-        const muted = color.muted || mutedOn(baseColor, baseSurface);
+        // `neutral-muted` is the kit's edge colour (rings, borders, `--raised-border`), so it must
+        // clear the lightest surface it can sit on. In light mode the surfaces climb toward white
+        // while the tint drops below the base, so the base is the right anchor. In dark mode both
+        // climb: a tint 0.06 above the base lands exactly on `surface-floating` (0.24) and 0.04
+        // above `surface-raised`, which is why a card's ring and a popover's edge vanished. Anchor
+        // it on the floating surface instead, so the step is measured from the top of the stack.
+        const muted = color.muted || mutedOn(baseColor, isDark ? surfacePalette.floating : baseSurface);
         return {
             DEFAULT: baseColor,
             dark: color.dark || darken(baseColor, 2),

package/dist/tailwind/spacing.d.ts

@@ -1,2 +1,15 @@
 import type { PluginAPI } from 'tailwindcss/plugin';
+export declare const spacingValues: {
+    micro: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    'layout-sm': string;
+    'layout-md': string;
+    'layout-lg': string;
+    'layout-xl': string;
+};
+export type SpacingStep = keyof typeof spacingValues;
 export declare const applySpacingEngine: ({ addBase, matchUtilities }: PluginAPI) => void;

package/dist/tailwind/spacing.js

@@ -8,9 +8,12 @@ const spacingVariables = {
     '--layout-space-sm': 'calc(var(--spacing) * 5)',
     '--layout-space-md': 'calc(var(--spacing) * 6)',
     '--layout-space-lg': 'calc(var(--spacing) * 8)',
-    '--layout-space-xl': 'calc(var(--spacing) * 12)'
+    '--layout-space-xl': 'calc(var(--spacing) * 12)',
+    // How far a drawer Dialog stands off the screen edge. A spacing step or `0px`, overridden by
+    // `designTokens.drawerInset`; the drawer's edge corners round only when this is not zero.
+    '--drawer-inset': 'var(--layout-space-md)'
 };
-const spacingValues = {
+export const spacingValues = {
     micro: 'var(--space-micro)',
     xs: 'var(--space-xs)',
     sm: 'var(--space-sm)',

package/dist/utils/cva/cva.mcp.d.ts

@@ -1 +1 @@
-export declare const cvaDescription = "\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";
+export declare const cvaDescription = "\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. A resolver takes an optional second argument, the shared variant values, and then returns every class slot already bound to them, so a template calls `slots.root()` instead of passing the same props to each slot. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.\n";