sv5ui-plus 4.0.0

package/dist/hooks/useSortable/useSortable.svelte.js

@@ -0,0 +1,151 @@
+import { setContext } from 'svelte';
+import { CollisionPriority } from '@dnd-kit/abstract';
+import { createDroppable } from '@dnd-kit/svelte';
+import { createSortable } from '@dnd-kit/svelte/sortable';
+import SortableProvider from '../internal/SortableProvider.svelte';
+import { SORTABLE_CONTEXT_KEY, SORTABLE_GROUP_CONTEXT_KEY } from '../internal/sortable-context.js';
+import { getContext } from 'svelte';
+let sortableGroupCounter = 0;
+/**
+ * Sortable list hook powered by [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte).
+ *
+ * Wrap markup in `sortable.Provider`, then attach `use:sortable.item` to each row.
+ */
+export function useSortable(options) {
+    const { getItems, getId, onReorder } = options;
+    function getGroup() {
+        const group = options.group;
+        return ((typeof group === 'function' ? group() : group) ??
+            `sv5ui-plus-sortable-${++sortableGroupCounter}`);
+    }
+    const groupId = getGroup();
+    let localDraggingId = $state(null);
+    let listNode = $state(null);
+    // Optional group context tracking draggingId globally
+    const groupCtx = getContext(SORTABLE_GROUP_CONTEXT_KEY);
+    const draggingId = $derived(groupCtx ? groupCtx.draggingId : localDraggingId);
+    function getAxis() {
+        const axis = options.axis;
+        return typeof axis === 'function' ? axis() : (axis ?? 'vertical');
+    }
+    function getHandle() {
+        const handle = options.handle;
+        return typeof handle === 'function' ? handle() : handle;
+    }
+    function isDisabled() {
+        return typeof options.disabled === 'function'
+            ? options.disabled()
+            : (options.disabled ?? false);
+    }
+    const context = {
+        groupId,
+        getItems,
+        getId,
+        onReorder,
+        isDisabled,
+        getAxis,
+        getHandle,
+        setDraggingId(id) {
+            localDraggingId = id;
+        },
+        getDraggingId: () => localDraggingId
+    };
+    setContext(SORTABLE_CONTEXT_KEY, context);
+    $effect(() => {
+        const node = listNode;
+        if (!node)
+            return;
+        if (draggingId != null) {
+            node.setAttribute('data-sortable-active', 'true');
+        }
+        else {
+            node.removeAttribute('data-sortable-active');
+        }
+    });
+    const container = (node) => {
+        listNode = node;
+        const droppable = createDroppable({
+            get id() {
+                return getGroup();
+            },
+            type: 'sortable-group',
+            collisionPriority: CollisionPriority.Low
+        });
+        const detach = droppable.attach(node);
+        return {
+            destroy() {
+                detach();
+                if (listNode === node) {
+                    listNode = null;
+                }
+                node.removeAttribute('data-sortable-active');
+            }
+        };
+    };
+    const item = (node, params) => {
+        let current = params;
+        const sortable = createSortable({
+            get id() {
+                return String(getId(current.item));
+            },
+            get index() {
+                return current.index;
+            },
+            get group() {
+                return getGroup();
+            },
+            get data() {
+                return current.item;
+            },
+            get disabled() {
+                return isDisabled();
+            }
+        });
+        const detach = sortable.attach(node);
+        let detachHandle;
+        function bindHandle() {
+            detachHandle?.();
+            const selector = getHandle();
+            if (!selector) {
+                sortable.sortable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            const handle = node.querySelector(selector);
+            if (!handle) {
+                sortable.sortable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            detachHandle = sortable.attachHandle(handle);
+        }
+        bindHandle();
+        node.setAttribute('data-sortable-item', '');
+        node.dataset.sortableId = String(getId(current.item));
+        return {
+            update(nextParams) {
+                current = nextParams;
+                sortable.sortable.id = String(getId(nextParams.item));
+                sortable.sortable.index = nextParams.index;
+                sortable.sortable.data = nextParams.item;
+                sortable.sortable.disabled = isDisabled();
+                node.dataset.sortableId = String(getId(nextParams.item));
+                bindHandle();
+            },
+            destroy() {
+                detach();
+                detachHandle?.();
+                node.removeAttribute('data-sortable-item');
+                delete node.dataset.sortableId;
+            }
+        };
+    };
+    return {
+        Provider: SortableProvider,
+        container,
+        item,
+        get draggingId() {
+            return draggingId;
+        }
+    };
+}

package/dist/hooks/utils.d.ts

@@ -0,0 +1 @@
+export declare function toGetter<T>(value: T | (() => T)): () => T;

package/dist/hooks/utils.js

@@ -0,0 +1,3 @@
+export function toGetter(value) {
+    return typeof value === 'function' ? value : () => value;
+}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export * from './components/BentoGrid/index.js';
+export * from './components/Chart/index.js';
+export * from './components/Chat/index.js';
+export * from './components/CodeBlock/index.js';
+export * from './components/ColorPicker/index.js';
+export * from './components/ConfirmDialog/index.js';
+export * from './components/Fonts/index.js';
+export * from './components/List/index.js';
+export * from './components/LocaleButton/index.js';
+export * from './components/Marquee/index.js';
+export * from './components/NavigationMenu/index.js';
+export * from './components/NumberTicker/index.js';
+export * from './components/PasswordInput/index.js';
+export * from './components/Prose/index.js';
+export * from './components/Resizable/index.js';
+export * from './components/ScrollArea/index.js';
+export * from './components/Search/index.js';
+export * from './components/SortableGroup/index.js';
+export * from './components/SortableList/index.js';
+export * from './components/Spotlight/index.js';
+export * from './components/TableBulkActionBar/index.js';
+export * from './components/TreeView/index.js';
+export * from './hooks/useSortable/index.js';
+export * from './hooks/useDragDrop/index.js';
+export * from './adapters/notify.js';
+export { defineConfig as defineSV5UIPlusConfig, getConfig as getSV5UIPlusConfig, resetConfig as resetSV5UIPlusConfig } from './config.js';
+export type { UIConfig as SV5UIPlusConfig } from './config.js';

package/dist/index.js

@@ -0,0 +1,30 @@
+// SV5UI Plus-exclusive components
+export * from './components/BentoGrid/index.js';
+export * from './components/Chart/index.js';
+export * from './components/Chat/index.js';
+export * from './components/CodeBlock/index.js';
+export * from './components/ColorPicker/index.js';
+export * from './components/ConfirmDialog/index.js';
+export * from './components/Fonts/index.js';
+export * from './components/List/index.js';
+export * from './components/LocaleButton/index.js';
+export * from './components/Marquee/index.js';
+export * from './components/NavigationMenu/index.js';
+export * from './components/NumberTicker/index.js';
+export * from './components/PasswordInput/index.js';
+export * from './components/Prose/index.js';
+export * from './components/Resizable/index.js';
+export * from './components/ScrollArea/index.js';
+export * from './components/Search/index.js';
+export * from './components/SortableGroup/index.js';
+export * from './components/SortableList/index.js';
+export * from './components/Spotlight/index.js';
+export * from './components/TableBulkActionBar/index.js';
+export * from './components/TreeView/index.js';
+// SV5UI Plus-exclusive hooks
+export * from './hooks/useSortable/index.js';
+export * from './hooks/useDragDrop/index.js';
+// Adapters
+export * from './adapters/notify.js';
+// Addon configuration. Core SV5UI configuration remains `defineConfig` from `sv5ui`.
+export { defineConfig as defineSV5UIPlusConfig, getConfig as getSV5UIPlusConfig, resetConfig as resetSV5UIPlusConfig } from './config.js';

package/dist/mcp/cursor.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "sv5ui-plus-docs": {
+      "type": "stdio",
+      "command": "node",
+      "args": [
+        "./node_modules/sv5ui-plus/dist/mcp/server.mjs"
+      ],
+      "cwd": "${workspaceFolder}"
+    }
+  }
+}

package/dist/mcp/install-template.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+import { access, copyFile, mkdir } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const args = new Set(process.argv.slice(2))
+const force = args.has('--force')
+const cwd = process.cwd()
+const targetDir = path.join(cwd, '.cursor')
+const targetPath = path.join(targetDir, 'mcp.json')
+
+async function resolveTemplatePath() {
+    const candidates = [
+        path.join(__dirname, 'cursor.mcp.json'),
+        path.resolve(__dirname, '../../dist/mcp/cursor.mcp.json')
+    ]
+
+    for (const candidate of candidates) {
+        try {
+            await access(candidate)
+            return candidate
+        } catch {
+            // Try next candidate.
+        }
+    }
+
+    throw new Error('Could not find cursor.mcp.json template for SV5UI Plus MCP.')
+}
+
+async function main() {
+    const templatePath = await resolveTemplatePath()
+
+    try {
+        await access(targetPath)
+        if (!force) {
+            console.error(`Refusing to overwrite existing file: ${targetPath}`)
+            console.error('Run again with --force if you want to replace it.')
+            process.exitCode = 1
+            return
+        }
+    } catch {
+        // Continue and attempt to create the file.
+    }
+
+    await mkdir(targetDir, { recursive: true })
+    await copyFile(templatePath, targetPath)
+
+    console.log(`Installed SV5UI Plus MCP template at ${targetPath}`)
+}
+
+await main()

package/dist/mcp/server.mjs

@@ -0,0 +1,338 @@
+#!/usr/bin/env node
+
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import { codeToHtml } from 'shiki'
+import { z } from 'zod'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const repoRoot = path.resolve(__dirname, '../../')
+const packagedDataPath = path.resolve(__dirname, './sv5ui-plus-docs.data.json')
+
+let packagedDataPromise
+
+function resolveRepoPath(relativePath) {
+    const fullPath = path.resolve(repoRoot, relativePath)
+    if (!fullPath.startsWith(repoRoot)) {
+        throw new Error('Invalid path')
+    }
+    return fullPath
+}
+
+async function readJsonIfExists(filePath) {
+    try {
+        const source = await readFile(filePath, 'utf8')
+        return JSON.parse(source)
+    } catch (error) {
+        if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+            return null
+        }
+        throw error
+    }
+}
+
+async function getPackagedData() {
+    packagedDataPromise ??= readJsonIfExists(packagedDataPath)
+    return await packagedDataPromise
+}
+
+function normalizeCode(code) {
+    const lines = code.replaceAll('\r\n', '\n').split('\n')
+    const firstNonEmpty = lines.findIndex((line) => line.trim().length > 0)
+    if (firstNonEmpty === -1) return ''
+
+    let lastNonEmptyFromEnd = 0
+    for (let index = lines.length - 1; index >= 0; index -= 1) {
+        if (lines[index].trim().length > 0) break
+        lastNonEmptyFromEnd += 1
+    }
+
+    const trimmed = lines.slice(firstNonEmpty, lines.length - lastNonEmptyFromEnd)
+    const indents = trimmed
+        .filter((line) => line.trim().length > 0)
+        .map((line) => line.match(/^(\s*)/)?.[1].length ?? 0)
+
+    const minIndent = indents.length > 0 ? Math.min(...indents) : 0
+    return trimmed
+        .map((line) => line.slice(minIndent))
+        .join('\n')
+        .trim()
+}
+
+function unwrapPreviewWrappers(source) {
+    let current = source.trim()
+
+    const stripPrefix = (token) => token.split(':').at(-1) ?? token
+    const isPresentationToken = (token) => {
+        const t = stripPrefix(token)
+        if (t.length === 0) return false
+
+        if (t.startsWith('max-w-') || t.startsWith('min-w-') || t.startsWith('w-')) return true
+        if (t.startsWith('max-h-') || t.startsWith('min-h-') || t.startsWith('h-')) return true
+        if (/^(m|p)[trblxyse]?-\d+$/.test(t)) return true
+        if (t.startsWith('gap-') || t.startsWith('space-')) return true
+        if (t.startsWith('overflow-')) return true
+        if (t === 'grid' || t.startsWith('grid-')) return true
+        if (t === 'flex' || t === 'inline-flex' || t.startsWith('flex-')) return true
+        if (t.startsWith('items-') || t.startsWith('justify-') || t.startsWith('content-'))
+            return true
+        if (t.startsWith('self-') || t.startsWith('place-')) return true
+        if (t.startsWith('rounded')) return true
+        if (t.startsWith('border') || t.startsWith('ring') || t.startsWith('shadow')) return true
+        if (t === 'bg-transparent') return true
+        if (t.startsWith('bg-surface')) return true
+        if (t.startsWith('bg-[')) return true
+        if (t.startsWith('text-') || t.startsWith('font-') || t.startsWith('leading-')) return true
+        if (t.startsWith('tracking-')) return true
+        if (t === 'uppercase' || t === 'lowercase' || t === 'capitalize') return true
+        if (t.startsWith('opacity-')) return true
+        if (t.startsWith('backdrop-blur') || t.startsWith('blur')) return true
+        if (t.startsWith('aspect-') || t.startsWith('object-')) return true
+        if (t.startsWith('size-')) return true
+        if (t.startsWith('[') && t.includes(']:')) return true
+
+        return false
+    }
+
+    for (let pass = 0; pass < 3; pass += 1) {
+        const match = current.match(/^<div\b([^>]*)>([\s\S]*)<\/div>$/)
+        if (!match) break
+
+        const attrs = match[1]
+        const attrsWithoutClass = attrs
+            .replace(/\s*\bclass=(?:"[^"]*"|'[^']*')/, '')
+            .replace(/\s+/g, ' ')
+            .trim()
+        if (attrsWithoutClass.length > 0) break
+
+        const classMatch = attrs.match(/\bclass=(?:"([^"]*)"|'([^']*)')/)
+        const classValue = (classMatch?.[1] ?? classMatch?.[2] ?? '').trim()
+        const tokens = classValue.length > 0 ? classValue.split(/\s+/) : []
+
+        const isPreviewBg = tokens.some((token) => token.startsWith('bg-surface-container'))
+        const isBordered = tokens.some((token) => token.startsWith('border-outline-variant'))
+        const isRounded = tokens.some((token) => token.startsWith('rounded'))
+        const hasPadding = tokens.some((token) => /^p[trblxy]?-\d+$/.test(token))
+        const isMaxWidth = tokens.some((token) => token.startsWith('max-w-'))
+        const isOverflow = tokens.some((token) => token.startsWith('overflow-'))
+        const isPresentationOnly = tokens.length > 0 && tokens.every(isPresentationToken)
+
+        const shouldUnwrap = ((isPreviewBg || isBordered || isRounded) && hasPadding) || isOverflow
+        const shouldUnwrapMaxWidth = isMaxWidth && isPresentationOnly
+
+        if (!shouldUnwrap && !shouldUnwrapMaxWidth) break
+
+        current = match[2].trim()
+    }
+
+    return current
+}
+
+function decodeHeading(value) {
+    return value
+        .replaceAll('&amp;', '&')
+        .replaceAll('&times;', '×')
+        .replaceAll('&#39;', "'")
+        .replaceAll('&quot;', '"')
+        .trim()
+}
+
+function extractSectionHeading(sectionSource) {
+    const match = sectionSource.match(/<h2\b[^>]*>([\s\S]*?)<\/h2>/)
+    if (!match) return ''
+    return decodeHeading(match[1].replace(/<[^>]+>/g, ' '))
+}
+
+function extractSectionSnippet(sectionSource) {
+    const openTagEnd = sectionSource.indexOf('>')
+    const closeTagStart = sectionSource.lastIndexOf('</section>')
+
+    if (openTagEnd < 0 || closeTagStart < 0) {
+        return normalizeCode(sectionSource)
+    }
+
+    let inner = sectionSource.slice(openTagEnd + 1, closeTagStart)
+    inner = inner.replace(/^\s*<h2\b[\s\S]*?<\/h2>\s*/, '')
+    inner = inner.replace(/^\s*<!--[\s\S]*?-->\s*/g, '')
+
+    while (/^\s*<p\b[\s\S]*?<\/p>\s*/.test(inner)) {
+        inner = inner.replace(/^\s*<p\b[\s\S]*?<\/p>\s*/, '')
+    }
+
+    inner = inner.replace(/\s*<!--[\s\S]*?-->\s*$/g, '')
+    inner = unwrapPreviewWrappers(inner)
+    return normalizeCode(inner)
+}
+
+function getSectionSnippets(source) {
+    return [...source.matchAll(/<section\b[\s\S]*?<\/section>/g)].map((match) => {
+        const sectionSource = match[0]
+        return {
+            heading: extractSectionHeading(sectionSource),
+            snippet: extractSectionSnippet(sectionSource)
+        }
+    })
+}
+
+function detectLanguage(code) {
+    const source = code.trim()
+
+    if (
+        source.includes('<script lang="ts">') ||
+        source.includes('$state(') ||
+        source.includes('{#each') ||
+        source.includes('<Button') ||
+        source.includes('<FormField')
+    ) {
+        return 'svelte'
+    }
+
+    if (source.startsWith('{') || source.startsWith('[')) {
+        return 'json'
+    }
+
+    if (
+        source.startsWith('@import') ||
+        (source.includes('{') && source.includes(':') && source.includes(';'))
+    ) {
+        return 'css'
+    }
+
+    if (source.startsWith('#') || source.startsWith('bun ') || source.startsWith('npm ')) {
+        return 'bash'
+    }
+
+    if (source.includes('export ') || source.includes('import ') || source.includes('interface ')) {
+        return 'ts'
+    }
+
+    return 'html'
+}
+
+function decorateHighlightedHtml(html) {
+    return html.replace(/<pre class="shiki[\s\S]*?"[^>]*>/, '<pre class="shiki">')
+}
+
+async function renderHighlightedCode(code, isDarkMode = true) {
+    const html = await codeToHtml(code, {
+        lang: detectLanguage(code),
+        theme: isDarkMode ? 'github-dark' : 'github-light'
+    })
+    return decorateHighlightedHtml(html)
+}
+
+function getPagePathFromSlug(slug) {
+    return `src/routes/${slug}/+page.svelte`
+}
+
+async function readRouteSource(slug) {
+    const packagedData = await getPackagedData()
+    if (packagedData?.pages?.[slug]) {
+        return packagedData.pages[slug]
+    }
+
+    const filePath = resolveRepoPath(getPagePathFromSlug(slug))
+    return await readFile(filePath, 'utf8')
+}
+
+async function readDocsNavigationSource() {
+    const filePath = resolveRepoPath('src/internal/docs/navigation.ts')
+    return await readFile(filePath, 'utf8')
+}
+
+async function listDocSlugs() {
+    const packagedData = await getPackagedData()
+    if (packagedData?.slugs) {
+        return packagedData.slugs
+    }
+
+    const navigationSource = await readDocsNavigationSource()
+    return extractDocSlugs(navigationSource)
+}
+
+function extractDocSlugs(navigationSource) {
+    const componentSlugs = []
+    const hookSlugs = []
+
+    for (const match of navigationSource.matchAll(/href:\s*'\/docs\/components\/([^']+)'/g)) {
+        componentSlugs.push(match[1])
+    }
+
+    for (const match of navigationSource.matchAll(/href:\s*'\/docs\/hooks\/([^']+)'/g)) {
+        hookSlugs.push(match[1])
+    }
+
+    return {
+        components: Array.from(new Set(componentSlugs)),
+        hooks: Array.from(new Set(hookSlugs))
+    }
+}
+
+const server = new McpServer({
+    name: 'sv5ui-plus-docs',
+    version: '0.1.0'
+})
+
+server.tool(
+    'sv5ui_plus_docs_list_slugs',
+    'List docs slugs from src/internal/docs/navigation.ts (components + hooks)',
+    {},
+    async () => {
+        const slugs = await listDocSlugs()
+
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: JSON.stringify(slugs, null, 2)
+                }
+            ]
+        }
+    }
+)
+
+server.tool(
+    'sv5ui_plus_docs_get_page_source',
+    'Read src/routes/[slug]/+page.svelte and return as text',
+    {
+        slug: z.string().min(1).describe('Route slug, e.g. button, select-menu, use-form-field')
+    },
+    async ({ slug }) => {
+        const source = await readRouteSource(slug)
+        return { content: [{ type: 'text', text: source }] }
+    }
+)
+
+server.tool(
+    'sv5ui_plus_docs_get_section_snippets',
+    'Extract all <section> headings and code snippets from a route page source',
+    {
+        slug: z.string().min(1).describe('Route slug, e.g. button, select-menu, use-form-field')
+    },
+    async ({ slug }) => {
+        const source = await readRouteSource(slug)
+        const sections = getSectionSnippets(source)
+        return { content: [{ type: 'text', text: JSON.stringify(sections, null, 2) }] }
+    }
+)
+
+server.tool(
+    'sv5ui_plus_docs_render_shiki',
+    'Render highlighted HTML (Shiki) for a code snippet. Returns <pre class="shiki">...</pre> HTML',
+    {
+        code: z.string().min(1).describe('Code string'),
+        isDarkMode: z.boolean().optional().describe('Use dark theme when true')
+    },
+    async ({ code, isDarkMode }) => {
+        const html = await renderHighlightedCode(code, isDarkMode ?? true)
+        return { content: [{ type: 'text', text: html }] }
+    }
+)
+
+const transport = new StdioServerTransport()
+await server.connect(transport)