sv5ui-plus 5.0.4 → 5.0.6

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

@@ -1,17 +1,11 @@
 {
   "version": 1,
   "packageName": "sv5ui-plus",
-  "packageVersion": "5.0.4",
-  "generatedAt": "2026-08-20T08:57:41.119Z",
+  "packageVersion": "5.0.6",
+  "generatedAt": "2026-09-10T03:20:34.995Z",
   "slugs": {
     "components": [],
-    "hooks": [
-      "use-drag-drop",
-      "use-sortable"
-    ]
+    "hooks": []
   },
-  "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"
-  }
+  "pages": {}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui-plus",
-    "version": "5.0.4",
+    "version": "5.0.6",
     "description": "Community companion components and hooks for SV5UI and Svelte 5",
     "packageManager": "bun@1.3.14",
     "author": "asphum",
@@ -29,9 +29,11 @@
         "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 .",
+        "lint": "oxlint .",
+        "lint:fix": "oxlint --fix .",
+        "format": "oxfmt --write .",
+        "format:check": "oxfmt --check .",
+        "check:fix": "bun run lint:fix && bun run format",
         "test:unit": "vitest",
         "pretest:unit": "bun run paraglide:compile",
         "test": "bun run test:unit -- --run",
@@ -120,19 +122,20 @@
         }
     },
     "devDependencies": {
-        "@biomejs/biome": "2.5.9",
-        "@inlang/paraglide-js": "^2.24.1",
+        "@inlang/paraglide-js": "^2.25.1",
         "@sveltejs/adapter-vercel": "^6.3.4",
         "@sveltejs/kit": "^2.70.3",
         "@sveltejs/package": "^2.5.8",
         "@sveltejs/vite-plugin-svelte": "^7.3.0",
         "@tailwindcss/vite": "^4.3.3",
-        "@types/node": "^26.2.0",
+        "@types/node": "^26.3.0",
         "@vitest/browser-playwright": "^4.1.11",
-        "playwright": "^1.62.1",
+        "oxfmt": "^0.67.0",
+        "oxlint": "^1.82.0",
+        "playwright": "^1.63.0",
         "publint": "^0.3.24",
-        "sv5ui": "^2.5.0",
-        "svelte": "^5.56.9",
+        "sv5ui": "^2.7.0",
+        "svelte": "^5.57.0",
         "svelte-check": "^4.7.6",
         "tailwindcss": "^4.3.3",
         "typescript": "6.0.3",
@@ -161,14 +164,14 @@
         "@dnd-kit/dom": "^0.5.0",
         "@dnd-kit/helpers": "^0.5.0",
         "@dnd-kit/svelte": "^0.5.0",
-        "@internationalized/date": "^3.12.3",
+        "@internationalized/date": "^3.12.4",
         "@modelcontextprotocol/sdk": "^1.30.0",
-        "apexcharts": "^6.10.0",
-        "bits-ui": "^2.19.0",
+        "apexcharts": "^7.1.0",
+        "bits-ui": "^2.19.2",
         "shiki": "^4.4.3",
         "tailwind-merge": "^3.6.0",
         "tailwind-variants": "^3.3.1",
-        "zod": "^4.4.3"
+        "zod": "^4.6.1"
     },
     "overrides": {
         "tailwind-merge": "^3.6.0",

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">import { twMerge } from "tailwind-merge";
-import { Popover } from "sv5ui";
-import { Input } from "sv5ui";
-import { Icon } from "sv5ui";
-import { colorPickerVariants } from "./color-picker.variants.js";
-let { value = $bindable("#000000"), placeholder = "Select color", swatches = [
-	"#ef4444",
-	"#f97316",
-	"#f59e0b",
-	"#eab308",
-	"#84cc16",
-	"#22c55e",
-	"#10b981",
-	"#14b8a6",
-	"#06b6d4",
-	"#0ea5e9",
-	"#3b82f6",
-	"#6366f1",
-	"#8b5cf6",
-	"#a855f7",
-	"#d946ef",
-	"#ec4899",
-	"#f43f5e",
-	"#ffffff",
-	"#94a3b8",
-	"#000000"
-], disabled = false, class: className, ...restProps } = $props();
-const styles = $derived(colorPickerVariants());
-// Validate hex
-let hexInput = $state(value);
-$effect(() => {
-	hexInput = value;
-});
-function handleHexInput(e) {
-	const target = e.target;
-	let val = target.value;
-	if (!val.startsWith("#")) {
-		val = "#" + val;
-	}
-	hexInput = val;
-	// Basic hex validation regex (3, 4, 6, or 8 digits)
-	if (/^#([A-Fa-f0-9]{3,4}){1,2}$/.test(val)) {
-		value = val;
-	}
-}
-function setSwatch(swatch) {
-	value = swatch;
-	hexInput = swatch;
-}
-</script>
-
-<div class={twMerge(styles.base(), className)} {...restProps}>
-    <Popover>
-        {#snippet children({ open })}
-            <div 
-                class={styles.trigger()}
-                aria-disabled={disabled}
-            >
-                <div 
-                    class={styles.colorIndicator()} 
-                    style="background-color: {value || '#000'};"
-                ></div>
-                <span class="truncate flex-1 text-left text-on-surface">
-                    {value || placeholder}
-                </span>
-                <Icon name="lucide:chevron-down" class="text-on-surface-variant w-4 h-4" />
-            </div>
-        {/snippet}
-
-        {#snippet content()}
-            <div class={styles.content()}>
-                <div class={styles.hexInputWrapper()}>
-                    <span class="text-sm font-medium">Hex</span>
-                    <Input 
-                        value={hexInput} 
-                        oninput={handleHexInput} 
-                        class="h-8 font-mono text-xs" 
-                    />
-                </div>
-                
-                <div class={styles.swatchGrid()}>
-                    {#each swatches as swatch}
-                        <button
-                            type="button"
-                            class={styles.swatch()}
-                            style="background-color: {swatch};"
-                            title={swatch}
-                            aria-label={`Select color ${swatch}`}
-                            onclick={() => setSwatch(swatch)}
-                        ></button>
-                    {/each}
-                </div>
-                
-                <div class="pt-2 border-t border-outline-variant flex flex-col gap-1">
-                    <span class="text-xs text-on-surface-variant mb-1">Custom Color</span>
-                    <!-- Native color picker wrapper -->
-                    <label class="cursor-pointer relative overflow-hidden rounded-md border border-outline-variant w-full h-8 flex items-center justify-center bg-surface-container hover:bg-surface-container-high transition-colors">
-                        <span class="text-xs font-medium z-10 pointer-events-none mix-blend-difference text-white">Pick Custom</span>
-                        <input 
-                            type="color" 
-                            bind:value
-                            class="absolute inset-0 opacity-0 w-full h-full cursor-pointer scale-150"
-                        />
-                    </label>
-                </div>
-            </div>
-        {/snippet}
-    </Popover>
-</div>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ColorPickerProps } from './color-picker.types.js';
-declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
-type ColorPicker = ReturnType<typeof ColorPicker>;
-export default ColorPicker;

package/dist/components/ColorPicker/color-picker.types.d.ts

@@ -1,26 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value'> {
-    /**
-     * The bound color value (Hex format).
-     * @default '#000000'
-     */
-    value?: string;
-    /**
-     * Placeholder text when no color is selected.
-     * @default 'Select color'
-     */
-    placeholder?: string;
-    /**
-     * Array of predefined color swatches.
-     */
-    swatches?: string[];
-    /**
-     * Whether the color picker is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Additional CSS classes.
-     */
-    class?: string;
-}

package/dist/components/ColorPicker/color-picker.variants.d.ts

@@ -1,69 +0,0 @@
-import { type VariantProps } from 'tailwind-variants';
-export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}>>;
-export type ColorPickerVariantProps = VariantProps<typeof colorPickerVariants>;

package/dist/components/ColorPicker/color-picker.variants.js

@@ -1,13 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const colorPickerVariants = tv({
-    slots: {
-        base: 'relative inline-flex',
-        trigger: 'flex items-center gap-2 px-3 py-2 border border-outline-variant rounded-md bg-surface text-sm w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-        colorIndicator: 'w-5 h-5 rounded border border-outline/50 shrink-0',
-        content: 'w-64 p-3 flex flex-col gap-3 bg-surface border border-outline-variant rounded-md shadow-md',
-        swatchGrid: 'grid grid-cols-6 gap-2',
-        swatch: 'w-6 h-6 rounded border border-outline/50 cursor-pointer hover:scale-110 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-        nativeInput: 'w-full h-8 cursor-pointer rounded overflow-hidden',
-        hexInputWrapper: 'flex items-center gap-2'
-    }
-});

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

@@ -1,4 +0,0 @@
-import ColorPicker from './ColorPicker.svelte';
-export { ColorPicker };
-export * from './color-picker.types.js';
-export * from './color-picker.variants.js';

package/dist/components/ColorPicker/index.js

@@ -1,4 +0,0 @@
-import ColorPicker from './ColorPicker.svelte';
-export { ColorPicker };
-export * from './color-picker.types.js';
-export * from './color-picker.variants.js';

package/dist/components/Resizable/Resizable.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ResizableProps } from './resizable.types.js';
-declare const Resizable: import("svelte").Component<ResizableProps, {}, "">;
-type Resizable = ReturnType<typeof Resizable>;
-export default Resizable;

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

@@ -1,4 +0,0 @@
-import Resizable from './Resizable.svelte';
-export { Resizable };
-export * from './resizable.types.js';
-export * from './resizable.variants.js';

package/dist/components/Resizable/index.js

@@ -1,4 +0,0 @@
-import Resizable from './Resizable.svelte';
-export { Resizable };
-export * from './resizable.types.js';
-export * from './resizable.variants.js';

package/dist/components/Resizable/resizable.types.d.ts

@@ -1,18 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ResizableVariantProps } from './resizable.variants.js';
-export interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The direction in which the element can be resized.
-     * @default 'both'
-     */
-    direction?: ResizableVariantProps['direction'];
-    /**
-     * Additional CSS classes.
-     */
-    class?: string;
-    /**
-     * Content inside the resizable container.
-     */
-    children?: Snippet;
-}

package/dist/components/Resizable/resizable.types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/Resizable/resizable.variants.d.ts

@@ -1,48 +0,0 @@
-import { type VariantProps } from 'tailwind-variants';
-export declare const resizableVariants: import("tailwind-variants").TVReturnType<{
-    direction: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-        both: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-}, undefined, {
-    direction: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-        both: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    direction: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-        both: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-}>>;
-export type ResizableVariantProps = VariantProps<typeof resizableVariants>;

package/dist/components/Resizable/resizable.variants.js

@@ -1,17 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const resizableVariants = tv({
-    slots: {
-        base: 'relative overflow-auto border border-outline-variant bg-surface-50 dark:bg-surface-900',
-        handle: 'absolute right-0 bottom-0 w-4 h-4 cursor-se-resize flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity'
-    },
-    variants: {
-        direction: {
-            horizontal: { base: 'resize-x' },
-            vertical: { base: 'resize-y' },
-            both: { base: 'resize' }
-        }
-    },
-    defaultVariants: {
-        direction: 'both'
-    }
-});

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">import { twMerge } from "tailwind-merge";
-import { scrollAreaVariants } from "./scroll-area.variants.js";
-let { orientation = "vertical", hideScrollbar = false, class: className, viewportClass, children, ...restProps } = $props();
-let styles = $derived(scrollAreaVariants({
-	orientation,
-	hideScrollbar
-}));
-</script>
-
-<div class={twMerge(styles.root(), className)} {...restProps}>
-    <div 
-        class={twMerge(
-            styles.viewport(), 
-            !hideScrollbar && 'sv5ui-plus-scrollbar',
-            viewportClass
-        )}
-        data-orientation={orientation}
-    >
-        {@render children?.()}
-    </div>
-</div>
-
-<style>
-    /* Custom scrollbar styling for Webkit browsers */
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar) {
-        width: 6px;
-        height: 6px;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-track) {
-        background: transparent;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb) {
-        background-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5));
-        border-radius: 9999px;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb:hover) {
-        background-color: var(--color-outline, rgba(107, 114, 128, 0.8));
-    }
-    
-    /* Firefox support */
-    :global(.sv5ui-plus-scrollbar) {
-        scrollbar-width: thin;
-        scrollbar-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5)) transparent;
-    }
-    
-    /* Hide scrollbar utility */
-    :global(.scrollbar-none::-webkit-scrollbar) {
-        display: none;
-    }
-    :global(.scrollbar-none) {
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;  /* Firefox */
-    }
-</style>

package/dist/components/ScrollArea/ScrollArea.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ScrollAreaProps } from './scroll-area.types.js';
-declare const ScrollArea: import("svelte").Component<ScrollAreaProps, {}, "">;
-type ScrollArea = ReturnType<typeof ScrollArea>;
-export default ScrollArea;

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

@@ -1,4 +0,0 @@
-import ScrollArea from './ScrollArea.svelte';
-export { ScrollArea };
-export * from './scroll-area.types.js';
-export * from './scroll-area.variants.js';

package/dist/components/ScrollArea/index.js

@@ -1,4 +0,0 @@
-import ScrollArea from './ScrollArea.svelte';
-export { ScrollArea };
-export * from './scroll-area.types.js';
-export * from './scroll-area.variants.js';

package/dist/components/ScrollArea/scroll-area.types.d.ts

@@ -1,27 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ScrollAreaVariantProps } from './scroll-area.variants.js';
-export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Orientation of the scrolling area.
-     * @default 'vertical'
-     */
-    orientation?: ScrollAreaVariantProps['orientation'];
-    /**
-     * Whether to hide the scrollbar track/thumb completely while still allowing scrolling.
-     * @default false
-     */
-    hideScrollbar?: boolean;
-    /**
-     * Additional CSS classes for the root container.
-     */
-    class?: string;
-    /**
-     * Additional CSS classes for the viewport (the scrollable area).
-     */
-    viewportClass?: string;
-    /**
-     * Content to be scrolled.
-     */
-    children?: Snippet;
-}

package/dist/components/ScrollArea/scroll-area.types.js

@@ -1 +0,0 @@
-export {};