sv5ui-plus 4.0.0

package/dist/mcp/sv5ui-plus-docs.data.json

@@ -0,0 +1,17 @@
+{
+  "version": 1,
+  "packageName": "sv5ui-plus",
+  "packageVersion": "4.0.0",
+  "generatedAt": "2026-08-09T08:37:48.437Z",
+  "slugs": {
+    "components": [],
+    "hooks": [
+      "use-drag-drop",
+      "use-sortable"
+    ]
+  },
+  "pages": {
+    "use-drag-drop": "<script lang=\"ts\">\n    import { Badge, Button, Card, Link, useDragDrop } from '$lib/compat.js'\n\n    type Task = { id: string; label: string; lane: 'todo' | 'done' }\n\n    let board = $state<{ todo: Task[]; done: Task[] }>({\n        todo: [\n            { id: 't1', label: 'Design tokens', lane: 'todo' },\n            { id: 't2', label: 'Sortable hook', lane: 'todo' },\n            { id: 't3', label: 'Docs page', lane: 'todo' }\n        ],\n        done: [{ id: 'd1', label: 'Kickoff meeting', lane: 'done' }]\n    })\n\n    let dropDisabled = $state(false)\n    let lastDrop = $state('')\n\n    const dragDrop = useDragDrop()\n\n    function moveTask(task: Task, target: 'todo' | 'done') {\n        const source: 'todo' | 'done' = target === 'todo' ? 'done' : 'todo'\n        const item = board[source].find((entry) => entry.id === task.id)\n        if (!item) return\n\n        board = {\n            ...board,\n            [source]: board[source].filter((entry) => entry.id !== task.id),\n            [target]: [...board[target], { ...item, lane: target }]\n        }\n        lastDrop = `${task.label} → ${target}`\n    }\n\n    const draggableOptionsReference = [\n        { name: 'id', type: 'string', description: 'Unique id for the draggable element.' },\n        { name: 'container', type: 'string', description: 'Source zone id — must match the droppable id of the column this item is in.' },\n        { name: 'data', type: 'unknown', description: 'Payload passed to droppable onDrop.' },\n        { name: 'disabled', type: 'boolean | (() => boolean)', description: 'Prevent dragging.' },\n        { name: 'handle', type: 'string', description: 'Optional CSS selector for a drag handle.' }\n    ] as const\n\n    const droppableOptionsReference = [\n        { name: 'id', type: 'string', description: 'Zone id — drops from the same id are ignored.' },\n        { name: 'onDrop', type: '(payload) => void', description: 'Called with { id, data? } from the draggable.' },\n        { name: 'accept', type: '(payload) => boolean', description: 'Optional filter — return false to reject the drop.' },\n        { name: 'disabled', type: 'boolean | (() => boolean)', description: 'Prevent dropping on this zone.' }\n    ] as const\n\n    const returnReference = [\n        { name: 'Provider', type: 'Component', description: 'Required wrapper — mounts @dnd-kit/svelte DragDropProvider.' },\n        { name: 'draggable', type: 'Action<HTMLElement, UseDraggableOptions>', description: 'Attach to drag sources.' },\n        { name: 'droppable', type: 'Action<HTMLElement, UseDroppableOptions>', description: 'Attach to drop targets.' },\n        { name: 'draggingId', type: 'string | null', description: 'Id of the item currently being dragged.' }\n    ] as const\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">useDragDrop</h1>\n        <p class=\"text-on-surface-variant\">\n            Cross-container drag and drop powered by\n            <a href=\"https://clauderic-dnd-kit.mintlify.app/frameworks/svelte\" class=\"text-primary underline\" target=\"_blank\" rel=\"noreferrer\">@dnd-kit/svelte</a>.\n            Wrap markup in\n            <code class=\"rounded bg-surface-container-high px-1\">dragDrop.Provider</code>,\n            use\n            <code class=\"rounded bg-surface-container-high px-1\">use:dragDrop.draggable</code>\n            on sources and\n            <code class=\"rounded bg-surface-container-high px-1\">use:dragDrop.droppable</code>\n            on targets. Browse all demos in the\n            <Link href=\"/docs/drag-and-drop\" class=\"text-primary underline\">Drag & Drop playground</Link>.\n            For reordering within one list, use\n            <Link href=\"/docs/hooks/use-sortable\" class=\"text-primary underline\">useSortable</Link>.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"When-to-use-what\" class=\"text-lg font-semibold\">\n            <a href=\"#When-to-use-what\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                When to use what\n            </a>\n        </h2>\n        <Card class=\"border border-info/20 bg-info/10 p-4 text-sm text-on-surface-variant\">\n            <p>\n                <strong class=\"text-on-surface\">useDragDrop</strong> — kanban, trays, moving cards between columns.\n                <strong class=\"text-on-surface\">useSortable</strong> —\n                <Link href=\"/docs/hooks/use-sortable\" class=\"text-primary underline\">reorder inside one list</Link>.\n                <strong class=\"text-on-surface\">FileUpload</strong> —\n                <Link href=\"/docs/components/file-upload\" class=\"text-primary underline\">OS file drops</Link>.\n                <strong class=\"text-on-surface\">Editor</strong> —\n                <Link href=\"/docs/components/editor#Drag-handle-Phase-3\" class=\"text-primary underline\">block reorder in rich text</Link>.\n            </p>\n        </Card>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Kanban-board\" class=\"text-lg font-semibold\">\n            <a href=\"#Kanban-board\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                Kanban board\n            </a>\n        </h2>\n        <dragDrop.Provider>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n                <div\n                    class=\"space-y-3 rounded-lg border border-outline-variant/70 bg-surface-container-low p-4\"\n                    use:dragDrop.droppable={{\n                        id: 'todo',\n                        disabled: () => dropDisabled,\n                        onDrop: ({ data }) => moveTask(data as Task, 'todo')\n                    }}\n                >\n                    <h3 class=\"font-semibold\">To do</h3>\n                    <div class=\"space-y-2\">\n                        {#each board.todo as task (task.id)}\n                            <div\n                                use:dragDrop.draggable={{ id: task.id, container: 'todo', data: task }}\n                                class={[\n                                    'cursor-grab rounded-lg border border-outline-variant/60 bg-surface px-3 py-2 active:cursor-grabbing',\n                                    dragDrop.draggingId === task.id && 'opacity-80'\n                                ]}\n                            >\n                                {task.label}\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n\n                <div\n                    class=\"space-y-3 rounded-lg border border-outline-variant/70 bg-surface-container-low p-4\"\n                    use:dragDrop.droppable={{\n                        id: 'done',\n                        disabled: () => dropDisabled,\n                        accept: (payload) => String((payload.data as Task)?.label ?? '').length > 0,\n                        onDrop: ({ data }) => moveTask(data as Task, 'done')\n                    }}\n                >\n                    <h3 class=\"font-semibold\">Done</h3>\n                    <p class=\"text-xs text-on-surface-variant\">accept — rejects empty labels</p>\n                    <div class=\"space-y-2\">\n                        {#each board.done as task (task.id)}\n                            <div\n                                use:dragDrop.draggable={{ id: task.id, container: 'done', data: task }}\n                                class={[\n                                    'cursor-grab rounded-lg border border-success/30 bg-success/10 px-3 py-2 active:cursor-grabbing',\n                                    dragDrop.draggingId === task.id && 'opacity-80'\n                                ]}\n                            >\n                                {task.label}\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </div>\n        </dragDrop.Provider>\n\n        <div class=\"flex flex-wrap items-center gap-2\">\n            {#if dragDrop.draggingId}\n                <Badge label=\"Dragging: {dragDrop.draggingId}\" color=\"primary\" variant=\"soft\" />\n            {/if}\n            {#if lastDrop}\n                <Badge label=\"Last drop: {lastDrop}\" color=\"success\" variant=\"soft\" />\n            {/if}\n            <Button\n                variant={dropDisabled ? 'solid' : 'outline'}\n                size=\"sm\"\n                label={dropDisabled ? 'Drops disabled' : 'Disable drops'}\n                onclick={() => (dropDisabled = !dropDisabled)}\n            />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"API-Reference\" class=\"text-lg font-semibold\">\n            <a href=\"#API-Reference\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                API Reference\n            </a>\n        </h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">draggable options</h3>\n                    <div class=\"space-y-3\">\n                        {#each draggableOptionsReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-primary\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">droppable options</h3>\n                    <div class=\"space-y-3\">\n                        {#each droppableOptionsReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-primary\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n        </div>\n        <Card class=\"border border-outline-variant/70\">\n            <div class=\"space-y-3\">\n                <h3 class=\"text-base font-semibold\">Return value</h3>\n                {#each returnReference as item (item.name)}\n                    <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                        <p class=\"font-mono text-xs text-primary\">{item.name}</p>\n                        <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                        <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                    </div>\n                {/each}\n            </div>\n        </Card>\n    </section>\n</div>\n",
+    "use-sortable": "<script lang=\"ts\">\n    import { Badge, Button, Card, Link, SortableList, useSortable } from '$lib/compat.js'\n\n    type Task = { id: string; title: string; color: 'primary' | 'success' | 'warning' }\n\n    let tasks = $state<Task[]>([\n        { id: 'design', title: 'Design system tokens', color: 'primary' },\n        { id: 'build', title: 'Build sortable hook', color: 'success' },\n        { id: 'docs', title: 'Write documentation', color: 'warning' },\n        { id: 'ship', title: 'Ship release', color: 'primary' }\n    ])\n\n    let horizontalItems = $state([\n        { id: 'a', label: 'Alpha' },\n        { id: 'b', label: 'Beta' },\n        { id: 'c', label: 'Gamma' }\n    ])\n\n    let sortDisabled = $state(false)\n\n    const sortable = useSortable({\n        getItems: () => tasks,\n        getId: (task) => task.id,\n        handle: '[data-sortable-handle]',\n        disabled: () => sortDisabled,\n        onReorder: (next) => {\n            tasks = next\n        }\n    })\n\n    const horizontalSortable = useSortable({\n        getItems: () => horizontalItems,\n        getId: (item) => item.id,\n        axis: 'horizontal',\n        handle: '[data-sortable-handle]',\n        onReorder: (next) => {\n            horizontalItems = next\n        }\n    })\n\n    const sortableOptionsReference = [\n        { name: 'getItems', type: '() => T[]', description: 'Reactive getter for the current array.' },\n        { name: 'getId', type: '(item: T) => string | number', description: 'Stable id per row (must match data-sortable-id).' },\n        { name: 'onReorder', type: '(items: T[]) => void', description: 'Called with the reordered array after drop.' },\n        { name: 'axis', type: \"'vertical' | 'horizontal' | 'grid' | (() => ...)\", description: 'Drag axis. Default: vertical. Use grid for CSS grid layouts.' },\n        { name: 'handle', type: 'string | (() => string | undefined)', description: 'Handle selector. Omit to drag the whole row.' },\n        { name: 'disabled', type: 'boolean | (() => boolean)', description: 'Disable sorting. Default: false.' }\n    ] as const\n\n    const sortableReturnReference = [\n        { name: 'Provider', type: 'Component', description: 'Required wrapper — mounts @dnd-kit/svelte DragDropProvider. Accepts an optional `overlay` snippet for custom drag overlays.' },\n        { name: 'container', type: 'Action<HTMLElement>', description: 'Optional list wrapper — sets data-sortable-active while dragging.' },\n        { name: 'item', type: 'Action<HTMLElement, { index, item }>', description: 'Attach to each row with the current index and item.' },\n        { name: 'draggingId', type: 'string | number | null', description: 'Readonly id of the row currently being dragged.' }\n    ] as const\n\n    const markupReference = [\n        { name: 'use:sortable.item', description: 'Required on each row — pass { index, item } from the #each block.' },\n        { name: 'data-sortable-handle', description: 'Optional handle element when using handle selector.' },\n        { name: 'data-sortable-item / data-sortable-id', description: 'Set automatically by use:sortable.item for styling hooks.' }\n    ] as const\n\n    function resetOrder() {\n        tasks = [\n            { id: 'design', title: 'Design system tokens', color: 'primary' },\n            { id: 'build', title: 'Build sortable hook', color: 'success' },\n            { id: 'docs', title: 'Write documentation', color: 'warning' },\n            { id: 'ship', title: 'Ship release', color: 'primary' }\n        ]\n    }\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">useSortable</h1>\n        <p class=\"text-on-surface-variant\">\n            Sortable list reordering powered by\n            <a href=\"https://clauderic-dnd-kit.mintlify.app/frameworks/svelte\" class=\"text-primary underline\" target=\"_blank\" rel=\"noreferrer\">@dnd-kit/svelte</a>.\n            Wrap markup in\n            <code class=\"rounded bg-surface-container-high px-1\">sortable.Provider</code>,\n            attach\n            <code class=\"rounded bg-surface-container-high px-1\">use:sortable.item</code>\n            to each row, and optionally use\n            <code class=\"rounded bg-surface-container-high px-1\">use:sortable.container</code>\n            on the list wrapper. Browse all demos in the\n            <Link href=\"/docs/drag-and-drop\" class=\"text-primary underline\">Drag & Drop playground</Link>.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"When-to-use-what\" class=\"text-lg font-semibold\">\n            <a href=\"#When-to-use-what\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                When to use what\n            </a>\n        </h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            <Card class=\"space-y-2 border border-outline-variant/70 p-4\">\n                <p class=\"font-semibold text-on-surface\">useSortable / SortableList</p>\n                <p class=\"text-sm text-on-surface-variant\">Reorder items inside one list (tasks, menu items, table rows).</p>\n            </Card>\n            <Card class=\"space-y-2 border border-outline-variant/70 p-4\">\n                <p class=\"font-semibold text-on-surface\">\n                    <Link href=\"/docs/hooks/use-drag-drop\" class=\"text-primary underline\">useDragDrop</Link>\n                </p>\n                <p class=\"text-sm text-on-surface-variant\">Move items between containers (kanban columns, trays).</p>\n            </Card>\n            <Card class=\"space-y-2 border border-outline-variant/70 p-4\">\n                <p class=\"font-semibold text-on-surface\">\n                    <Link href=\"/docs/components/file-upload\" class=\"text-primary underline\">FileUpload</Link>\n                </p>\n                <p class=\"text-sm text-on-surface-variant\">Drag files from the OS onto a dropzone — not for reordering UI lists.</p>\n            </Card>\n            <Card class=\"space-y-2 border border-outline-variant/70 p-4\">\n                <p class=\"font-semibold text-on-surface\">\n                    <Link href=\"/docs/components/editor\" class=\"text-primary underline\">Editor dragHandle</Link>\n                </p>\n                <p class=\"text-sm text-on-surface-variant\">Reorder rich-text blocks inside TipTap — built into Editor, not this hook.</p>\n            </Card>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Manual-markup\" class=\"text-lg font-semibold\">\n            <a href=\"#Manual-markup\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                Manual markup\n            </a>\n        </h2>\n        <sortable.Provider>\n            {#snippet overlay({ item })}\n                <div class=\"flex items-center gap-3 rounded-lg border border-outline-variant/60 bg-surface px-3 py-2 z-50 shadow-xl scale-[1.02] opacity-95\">\n                    <button type=\"button\" class=\"cursor-grab rounded-md p-1 text-on-surface-variant\">::</button>\n                    <Badge label={item.title} color={item.color} variant=\"soft\" />\n                </div>\n            {/snippet}\n            <div use:sortable.container class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n                {#each tasks as task, index (task.id)}\n                    <div\n                        use:sortable.item={{ index, item: task }}\n                        class={[\n                            'relative flex items-center gap-3 rounded-lg border border-outline-variant/60 px-3 py-2 transition-colors',\n                            sortable.draggingId === task.id ? 'bg-transparent border-transparent' : 'bg-surface'\n                        ]}\n                        aria-grabbed={sortable.draggingId === task.id}\n                    >\n                    {#if sortable.draggingId === task.id}\n                        <div class=\"absolute inset-0 z-10 rounded-lg border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none\"></div>\n                    {/if}\n                    <div class={['flex w-full items-center gap-3', sortable.draggingId === task.id && 'invisible']}>\n                        <button\n                            type=\"button\"\n                            data-sortable-handle\n                            class=\"cursor-grab rounded-md p-1 text-on-surface-variant active:cursor-grabbing\"\n                            aria-label=\"Drag to reorder\"\n                        >\n                            ::\n                        </button>\n                        <Badge label={task.title} color={task.color} variant=\"soft\" />\n                    </div>\n                </div>\n            {/each}\n            </div>\n        </sortable.Provider>\n        <div class=\"flex flex-wrap gap-2\">\n            <Button variant=\"outline\" size=\"sm\" label=\"Reset order\" onclick={resetOrder} />\n            <Button\n                variant={sortDisabled ? 'solid' : 'outline'}\n                size=\"sm\"\n                label={sortDisabled ? 'Sorting disabled' : 'Disable sorting'}\n                onclick={() => (sortDisabled = !sortDisabled)}\n            />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Horizontal-axis\" class=\"text-lg font-semibold\">\n            <a href=\"#Horizontal-axis\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                Horizontal axis\n            </a>\n        </h2>\n        <horizontalSortable.Provider>\n            <div use:horizontalSortable.container class=\"flex flex-wrap gap-2 rounded-lg bg-surface-container-high p-4\">\n                {#each horizontalItems as item, index (item.id)}\n                    <div\n                        use:horizontalSortable.item={{ index, item }}\n                        class={[\n                            'flex items-center gap-2 rounded-lg border border-outline-variant/60 bg-surface px-3 py-2',\n                            horizontalSortable.draggingId === item.id && 'opacity-80 shadow-md'\n                        ]}\n                    >\n                        <button type=\"button\" data-sortable-handle class=\"cursor-grab px-1\" aria-label=\"Drag\">::</button>\n                        <span class=\"text-sm font-medium\">{item.label}</span>\n                    </div>\n                {/each}\n            </div>\n        </horizontalSortable.Provider>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"SortableList-component\" class=\"text-lg font-semibold\">\n            <a href=\"#SortableList-component\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                SortableList component\n            </a>\n        </h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Prefer a styled wrapper? See\n            <Link href=\"/docs/components/sortable-list\" class=\"text-primary underline\">SortableList</Link>.\n        </p>\n        <Card class=\"border border-outline-variant/70 p-4\">\n            <SortableList bind:items={tasks} getKey={(task) => task.id}>\n                {#snippet children({ item })}\n                    <span class=\"text-sm font-medium\">{item.title}</span>\n                {/snippet}\n            </SortableList>\n        </Card>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"API-Reference\" class=\"text-lg font-semibold\">\n            <a href=\"#API-Reference\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                API Reference\n            </a>\n        </h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">useSortable options</h3>\n                    <div class=\"space-y-3\">\n                        {#each sortableOptionsReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-primary\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">Return value</h3>\n                    <div class=\"space-y-3\">\n                        {#each sortableReturnReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-primary\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                    <h3 class=\"pt-2 text-base font-semibold\">Markup attributes</h3>\n                    <div class=\"space-y-3\">\n                        {#each markupReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n        </div>\n    </section>\n</div>\n"
+  }
+}

package/dist/theme.css

@@ -0,0 +1,64 @@
+/**
+ * SV5UI Plus addon theme.
+ * SV5UI owns the core design tokens; this file adds typography and addon scanning.
+ */
+@import 'sv5ui/theme.css';
+@source '.';
+
+@layer theme {
+    :root {
+        --font-sans-family:
+            Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        --font-heading-family: var(--font-sans-family);
+        --font-sarabun-family: var(--font-sans-family);
+        --font-mono-family:
+            'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+            'Liberation Mono', monospace;
+        --scrim-color: 0 0 0;
+        --scrim-opacity: 0.3;
+        --scrim-bg: rgb(var(--scrim-color) / var(--scrim-opacity));
+    }
+}
+
+@theme inline {
+    --font-sans: var(--font-sans-family);
+    --font-sarabun: var(--font-sarabun-family);
+    --font-mono: var(--font-mono-family);
+}
+
+@layer base {
+    body {
+        cursor: default;
+        font-family: var(--font-sans-family);
+    }
+}
+
+@utility font-heading {
+    font-family: var(--font-heading-family);
+}
+
+.backdrop-blur-xs,
+.backdrop-blur-sm,
+.backdrop-blur-md,
+.backdrop-blur-lg,
+.backdrop-blur-xl,
+.backdrop-blur-2xl,
+.backdrop-blur-3xl {
+    will-change: backdrop-filter;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --scrim-opacity: 0.7;
+    }
+
+    .backdrop-blur-xs,
+    .backdrop-blur-sm,
+    .backdrop-blur-md,
+    .backdrop-blur-lg,
+    .backdrop-blur-xl,
+    .backdrop-blur-2xl,
+    .backdrop-blur-3xl {
+        backdrop-filter: none !important;
+    }
+}

package/package.json

@@ -0,0 +1,176 @@
+{
+    "name": "sv5ui-plus",
+    "version": "4.0.0",
+    "description": "Community companion components and hooks for SV5UI and Svelte 5",
+    "packageManager": "bun@1.3.14",
+    "author": "asphum",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/asphum/svelora.git"
+    },
+    "homepage": "https://svelora-ui.vercel.app/",
+    "publishConfig": {
+        "access": "public"
+    },
+    "bugs": {
+        "url": "https://github.com/asphum/svelora/issues"
+    },
+    "scripts": {
+        "dev": "vite dev --port 3000",
+        "predev": "bun run paraglide:compile",
+        "dev:docs": "vite dev --host 0.0.0.0 --port 4173",
+        "predev:docs": "bun run paraglide:compile",
+        "build": "vite build && bun run prepack",
+        "prebuild": "bun run paraglide:compile",
+        "preview": "vite preview",
+        "prepare": "bun run paraglide:compile && svelte-kit sync || echo ''",
+        "prepack": "svelte-kit sync && svelte-package && bun run package:mcp && publint",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "precheck": "bun run paraglide:compile",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "biome check .",
+        "format": "biome format --write .",
+        "lint:fix": "biome check --write .",
+        "test:unit": "vitest",
+        "pretest:unit": "bun run paraglide:compile",
+        "test": "bun run test:unit -- --run",
+        "paraglide:compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide --emit-ts-declarations --strategy cookie globalVariable baseLocale",
+        "package:mcp": "node ./scripts/package-mcp.mjs",
+        "mcp:sv5ui-plus-docs": "node ./mcp/sv5ui-plus-docs/server.mjs",
+        "changelog:template": "node ./scripts/changelog-template.mjs",
+        "release:verify": "bun run check && bun run prepack && npm pack --dry-run",
+        "release:verify:full": "bun run check && bun run test && bun run prepack && npm pack --dry-run",
+        "release": "node ./scripts/release.mjs",
+        "release:patch": "node ./scripts/release.mjs patch",
+        "release:minor": "node ./scripts/release.mjs minor",
+        "release:major": "node ./scripts/release.mjs major",
+        "release:patch:full": "node ./scripts/release.mjs patch --full",
+        "release:minor:full": "node ./scripts/release.mjs minor --full",
+        "release:major:full": "node ./scripts/release.mjs major --full",
+        "release:patch:dry": "node ./scripts/release.mjs patch --dry-run",
+        "public": "node ./scripts/release.mjs public",
+        "public:minor": "node ./scripts/release.mjs public minor",
+        "public:major": "node ./scripts/release.mjs public major",
+        "public:full": "node ./scripts/release.mjs public --full",
+        "public:dry": "node ./scripts/release.mjs public --dry-run",
+        "public:minor:full": "node ./scripts/release.mjs public minor --full",
+        "public:major:full": "node ./scripts/release.mjs public major --full",
+        "public:minor:dry": "node ./scripts/release.mjs public minor --dry-run",
+        "public:major:dry": "node ./scripts/release.mjs public major --dry-run",
+        "clean": "rm -rf dist node_modules build .svelte-kit bun.lock",
+        "kill": "PORT=${PORT:-3000}; lsof -ti:$PORT | xargs kill -9 2>/dev/null || true",
+        "kill:docs": "for p in 4173 4174 4175; do lsof -ti:$p | xargs kill -9 2>/dev/null || true; done"
+    },
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*",
+        "!dist/**/*TestWrapper*"
+    ],
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "svelte": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "bin": {
+        "sv5ui-plus-mcp-docs": "./dist/mcp/server.mjs",
+        "sv5ui-plus-mcp-install-template": "./dist/mcp/install-template.mjs"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./compat": {
+            "types": "./dist/compat.d.ts",
+            "svelte": "./dist/compat.js",
+            "default": "./dist/compat.js"
+        },
+        "./mcp/server": {
+            "default": "./dist/mcp/server.mjs"
+        },
+        "./mcp/cursor-template": {
+            "default": "./dist/mcp/cursor.mcp.json"
+        },
+        "./mcp/install-template": {
+            "default": "./dist/mcp/install-template.mjs"
+        },
+        "./editor": {
+            "types": "./dist/editor.d.ts",
+            "svelte": "./dist/editor.js",
+            "default": "./dist/editor.js"
+        },
+        "./theme.css": {
+            "import": "./dist/theme.css",
+            "default": "./dist/theme.css"
+        }
+    },
+    "peerDependencies": {
+        "@sveltejs/kit": "^2.0.0",
+        "sv5ui": "^2.5.0",
+        "svelte": "^5.0.0",
+        "tailwindcss": "^4.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@biomejs/biome": "2.5.7",
+        "@inlang/paraglide-js": "^2.23.2",
+        "@sveltejs/adapter-vercel": "^6.3.4",
+        "@sveltejs/kit": "^2.70.2",
+        "@sveltejs/package": "^2.5.8",
+        "@sveltejs/vite-plugin-svelte": "^7.3.0",
+        "@tailwindcss/vite": "^4.3.3",
+        "@types/node": "^26.2.0",
+        "@vitest/browser-playwright": "^4.1.10",
+        "playwright": "^1.62.1",
+        "publint": "^0.3.23",
+        "sv5ui": "^2.5.0",
+        "svelte": "^5.56.8",
+        "svelte-check": "^4.7.5",
+        "tailwindcss": "^4.3.3",
+        "typescript": "6.0.3",
+        "vite": "^8.2.1",
+        "vitest": "^4.1.10",
+        "vitest-browser-svelte": "^3.0.0"
+    },
+    "keywords": [
+        "svelte",
+        "svelte5",
+        "svelte-components",
+        "primitives",
+        "ui",
+        "ui-library",
+        "components",
+        "component-library",
+        "tailwindcss",
+        "tailwind",
+        "design-system",
+        "typescript",
+        "dark-mode",
+        "accessible"
+    ],
+    "dependencies": {
+        "@dnd-kit/abstract": "^0.5.0",
+        "@dnd-kit/dom": "^0.5.0",
+        "@dnd-kit/helpers": "^0.5.0",
+        "@dnd-kit/svelte": "^0.5.0",
+        "@modelcontextprotocol/sdk": "^1.30.0",
+        "apexcharts": "^6.7.0",
+        "bits-ui": "^2.18.1",
+        "shiki": "^4.4.2",
+        "tailwind-merge": "^3.6.0",
+        "tailwind-variants": "^3.3.1",
+        "zod": "^4.4.3"
+    },
+    "overrides": {
+        "tailwind-merge": "^3.6.0",
+        "typescript": "6.0.3"
+    }
+}