tera-system-ui 0.1.75 → 0.2.1

package/registry/bottom-sheet.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "bottom-sheet",
+  "type": "registry:component",
+  "description": "Draggable iOS-style bottom sheet with snap points, container-scale effect, and stacking.",
+  "recipe": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
+      "target": "BottomSheet.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * BottomSheet recipe — the canonical styled layer for the draggable sheet.\n *\n * An iOS-style bottom sheet with snap points, gesture dragging, container-scale\n * effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by\n * role — backdrop / sheet / handle / handleBar / header / closeButton / content —\n * so an app can restyle any part independently. Only the *themeable, static*\n * surface lives here; the per-frame transforms (translate / scale / opacity) are\n * driven imperatively from the component and the runtime transition duration is\n * passed through the `--transition-duration` CSS var.\n *\n * The `constrained` variant switches fixed → absolute positioning when the sheet\n * is bounded inside a container; `dragging` carries the grabbing cursor.\n *\n * Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius)\n * retunes the top corner radius with no code change; it defaults to the prior\n * literal value inline.\n */\nexport const bottomSheetRecipe = tv({\n    slots: {\n        backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',\n        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] shadow-[0_-1px_0_rgb(255_255_255/0.05),0_-4px_20px_rgb(0_0_0/0.3)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',\n        handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',\n        handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',\n        header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',\n        closeButton: 'absolute right-2 top-[calc(50%-4px)] flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 text-text-tertiary [touch-action:manipulation] [-webkit-tap-highlight-color:transparent] transition-colors hover:bg-surface-hover hover:text-text-primary active:bg-surface-hover',\n        content: 'flex min-h-0 flex-1 flex-col overflow-hidden [touch-action:pan-y]',\n    },\n    variants: {\n        // Sheet bounded inside a container (vs. the viewport): switch fixed → absolute.\n        constrained: {\n            true: {backdrop: 'absolute', sheet: 'absolute'},\n            false: {},\n        },\n        // Active drag: grabbing cursor + suppress selection.\n        dragging: {\n            true: {sheet: 'cursor-grabbing select-none'},\n            false: {},\n        },\n    },\n    defaultVariants: {\n        constrained: false,\n        dragging: false,\n    },\n});\n\nexport type BottomSheetRecipeProps = VariantProps<typeof bottomSheetRecipe>;\n\nexport interface BottomSheetProps {\n    /** Unique identifier for this sheet (drives stacking/z-index registry). */\n    id: string;\n    /** Whether the sheet is open. Bindable. */\n    open?: boolean;\n    /** Snap positions as viewport fractions (0–1), e.g. [0.25, 0.5, 0.9]. */\n    snapPoints?: number[];\n    /** Index into `snapPoints` to settle at when opening. */\n    defaultSnapPoint?: number;\n    /** Container element to constrain the sheet within (constrained mode). */\n    containerRef?: HTMLElement | null;\n    /** Element to apply the background scale effect to (defaults to containerRef). */\n    scaleTargetRef?: HTMLElement | null;\n    /** Constrain the sheet inside `containerRef` (absolute positioning). */\n    constrainToContainer?: boolean;\n    /** Scale/round the background target as the sheet opens (iOS effect). */\n    scaleBackground?: boolean;\n    /** Allow dragging down past the lowest snap point to close. */\n    dragToClose?: boolean;\n    /** Close when the backdrop is tapped. */\n    closeOnBackdrop?: boolean;\n    /** Show a close (X) button in the header (requires the `header` snippet). */\n    showCloseButton?: boolean;\n    /** Called after the sheet finishes closing. */\n    onClose?: () => void;\n    /** Called whenever the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n    /** Main body content. */\n    children?: Snippet;\n    /** Header content; renders the header bar when set. */\n    header?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/BottomSheet.svelte",
+      "target": "BottomSheet.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {onDestroy, onMount} from 'svelte';\n    import {bottomSheetStore} from './bottomSheetStore.svelte.js';\n    import {bottomSheetRecipe, type BottomSheetProps} from './BottomSheet.recipe';\n    import {IconX} from \"$lib/internal/icons\";\n\n    // ============================================\n    // CONFIGURABLE CONSTANTS\n    // Adjust these values to customize the bottom sheet behavior\n    // ============================================\n\n    const CONFIG = {\n        // Scale effect for background container\n        scale: {\n            factor: 0.06,           // How much to scale down (6%)\n            borderRadius: 16,       // Border radius when scaled (px)\n            translateY: 20,         // Vertical offset when scaled (px)\n            origin: 'top center'    // Transform origin\n        },\n\n        // Backdrop\n        backdrop: {\n            maxOpacity: 0.5         // Maximum opacity when fully open\n        },\n\n        // Animation timing\n        animation: {\n            defaultDuration: 0.35,  // Default duration (seconds)\n            minDuration: 0.15,      // Min duration for fast swipes\n            maxDuration: 0.4,       // Max duration for slow gestures\n            easing: 'cubic-bezier(0.2, 0.9, 0.36, 1)' // iOS-style spring curve\n        },\n\n        // Gesture handling\n        gesture: {\n            velocityInfluence: 0.01,        // How much velocity affects snap selection\n            overdragExponent: 0.55,         // Overdrag resistance (lower = more resistance)\n            closeVelocityThreshold: 0.35,   // Velocity to trigger close (px/ms)\n            closeProgressThreshold: 0.35,   // Progress to trigger close (0-1)\n            maxLockedDrag: 60,              // Max drag when dragToClose disabled (px)\n            lockedDragResistance: 0.3,      // Resistance when dragToClose disabled\n            // Two-phase gesture recognition for interactive elements (iOS-style)\n            dragActivationThreshold: 10,    // Vertical px to commit to drag from interactive element\n            horizontalDeadZone: 1.2,        // If abs(dx)/abs(dy) > this, abort drag (let native horizontal win)\n            tapDistanceThreshold: 6         // Max total movement (px) to still count as a tap\n        }\n    } as const;\n\n    // ============================================\n    // COMPONENT PROPS\n    // ============================================\n\n    let {\n        id,\n        open = $bindable(false),\n        snapPoints = [0.9],\n        defaultSnapPoint = 0,\n        containerRef = null,\n        scaleTargetRef = null,\n        constrainToContainer = false,\n        scaleBackground = true,\n        dragToClose = true,\n        closeOnBackdrop = true,\n        showCloseButton = false,\n        onClose,\n        onOpenChange,\n        children,\n        header\n    }: BottomSheetProps = $props();\n\n    // ============================================\n    // INTERNAL STATE\n    // ============================================\n\n    // DOM references\n    let sheetRef = $state<HTMLElement | null>(null);\n    let contentRef = $state<HTMLElement | null>(null);\n    let backdropRef = $state<HTMLElement | null>(null);\n\n    // Sheet state\n    let isVisible = $state(false);\n    let isClosing = $state(false);\n    let isAnimating = $state(false);\n    let isDragging = $state(false);\n    let currentTranslateY = $state(0);\n    let sheetHeight = $state(0);\n    let transitionDuration = $state(`${CONFIG.animation.defaultDuration}s`);\n\n    // Drag tracking\n    let dragState = {\n        startY: 0,\n        startX: 0,\n        lastY: 0,\n        currentY: 0,\n        deltaY: 0,\n        startSnapPoint: 0,\n        activePointerId: null as number | null,\n        isTouchActive: false,\n        shouldPreventScroll: false,\n        history: [] as { y: number; time: number }[],\n        // Two-phase gesture recognition for interactive elements\n        isPending: false,           // Tracking started but not yet committed to drag\n        isInteractiveStart: false,  // Gesture began on an interactive element\n        committed: false,           // Gesture has been resolved as a drag\n        inScrollable: false         // Gesture began inside a [data-bottom-sheet-scroll] area\n    };\n\n    // Scroll state\n    let scrollableElement: HTMLElement | null = null;\n    let isScrolledToTop = true;\n\n    // Dimensions\n    let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);\n    let containerHeight = $state(0);\n    let containerResizeObserver: ResizeObserver | null = null;\n    let prevOpen: boolean | null = null;\n\n    // ============================================\n    // COMPUTED VALUES\n    // ============================================\n\n    const r = $derived(bottomSheetRecipe({constrained: constrainToContainer, dragging: isDragging}));\n\n    const scaleTarget = $derived(scaleTargetRef ?? containerRef);\n    const effectiveHeight = $derived(\n        constrainToContainer && containerRef ? containerHeight : windowHeight\n    );\n    const maxSnapPoint = $derived(Math.max(...snapPoints));\n    const maxSheetHeight = $derived(maxSnapPoint * effectiveHeight);\n    const zIndex = $derived(bottomSheetStore.getZIndex(id));\n    const currentSnapPoint = $derived(snapPoints[defaultSnapPoint] ?? 0.5);\n    const allSnapPoints = $derived([0, ...snapPoints].sort((a, b) => a - b));\n\n    // ============================================\n    // LIFECYCLE\n    // ============================================\n\n    onMount(() => {\n        bottomSheetStore.register(id, {snapPoints, defaultSnapPoint, closeOnBackdrop});\n        window.addEventListener('resize', handleWindowResize);\n\n        return () => {\n            bottomSheetStore.unregister(id);\n            window.removeEventListener('resize', handleWindowResize);\n        };\n    });\n\n    onDestroy(() => {\n        containerResizeObserver?.disconnect();\n    });\n\n    // Watch containerRef for constrained mode\n    $effect(() => {\n        if (!containerRef || !constrainToContainer) return;\n\n        containerHeight = containerRef.clientHeight;\n        containerResizeObserver?.disconnect();\n\n        containerResizeObserver = new ResizeObserver(() => {\n            containerHeight = containerRef!.clientHeight;\n            if (isVisible && !isDragging && sheetRef) {\n                sheetHeight = sheetRef.offsetHeight;\n            }\n        });\n        containerResizeObserver.observe(containerRef);\n\n        return () => {\n            containerResizeObserver?.disconnect();\n            containerResizeObserver = null;\n        };\n    });\n\n    // Watch open prop changes\n    $effect(() => {\n        const shouldOpen = open;\n\n        if (prevOpen === null) {\n            prevOpen = shouldOpen;\n            if (shouldOpen) doOpen();\n            return;\n        }\n\n        if (shouldOpen && !prevOpen && !isVisible) {\n            prevOpen = true;\n            doOpen();\n        } else if (!shouldOpen && prevOpen && isVisible && !isClosing) {\n            prevOpen = false;\n            doClose();\n        }\n    });\n\n    // Setup scrollable element detection\n    $effect(() => {\n        if (!contentRef || !isVisible) return;\n\n        scrollableElement = contentRef.querySelector<HTMLElement>('[data-bottom-sheet-scroll]');\n        if (!scrollableElement) return;\n\n        const handleScroll = () => {\n            isScrolledToTop = scrollableElement!.scrollTop <= 1;\n        };\n        scrollableElement.addEventListener('scroll', handleScroll, {passive: true});\n        isScrolledToTop = scrollableElement.scrollTop <= 1;\n    });\n\n    // ============================================\n    // CORE FUNCTIONS\n    // ============================================\n\n    function handleWindowResize() {\n        if (isVisible && !isDragging) {\n            windowHeight = window.innerHeight;\n            if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n        }\n    }\n\n    function recalculateDimensions() {\n        if (typeof window !== 'undefined') windowHeight = window.innerHeight;\n        if (containerRef && constrainToContainer) containerHeight = containerRef.clientHeight;\n        if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n    }\n\n    function doOpen() {\n        isVisible = true;\n        isClosing = false;\n        isAnimating = true;\n        bottomSheetStore.open(id);\n\n        requestAnimationFrame(() => {\n            // sheetRef is bound by this rAF tick.\n            recalculateDimensions();\n            requestAnimationFrame(() => snapTo(currentSnapPoint, () => {\n                isAnimating = false;\n            }));\n        });\n    }\n\n    function doClose() {\n        if (isClosing) return;\n        isClosing = true;\n        isAnimating = true;\n\n        snapTo(0, () => {\n            isVisible = false;\n            isClosing = false;\n            isAnimating = false;\n            bottomSheetStore.close(id);\n            prevOpen = false;\n            open = false;\n            resetScaleTarget();\n            onClose?.();\n            onOpenChange?.(false);\n        });\n    }\n\n    function snapTo(progress: number, onComplete?: () => void) {\n        transitionDuration = calcDynamicDuration();\n        // Calculate translateY: sheet height is maxSnapPoint * effectiveHeight\n        // When progress = maxSnapPoint, translateY = 0 (fully visible)\n        // When progress = 0, translateY = sheetHeight (hidden)\n        const targetTranslateY = sheetHeight - (progress * effectiveHeight);\n        currentTranslateY = targetTranslateY;\n\n        if (sheetRef) {\n            sheetRef.style.translate = `0 ${targetTranslateY}px`;\n        }\n\n        updateBackdrop(progress);\n        updateScaleTarget(progress);\n        bottomSheetStore.updateProgress(id, Math.max(0, Math.min(1, progress)));\n\n        if (onComplete) {\n            setTimeout(onComplete, parseFloat(transitionDuration) * 1000);\n        }\n    }\n\n    // ============================================\n    // VISUAL UPDATES\n    // ============================================\n\n    function updateBackdrop(progress: number) {\n        if (!backdropRef) return;\n        const opacity = Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));\n        backdropRef.style.opacity = String(opacity);\n    }\n\n    function updateScaleTarget(progress: number, withTransition = true) {\n        if (!scaleTarget || !scaleBackground) return;\n\n        const p = Math.max(0, Math.min(1, progress));\n        const {factor, borderRadius, translateY, origin} = CONFIG.scale;\n\n        scaleTarget.style.scale = String(1 - factor * p);\n        scaleTarget.style.translate = `0 ${translateY * p}px`;\n        scaleTarget.style.borderRadius = `${borderRadius * p}px`;\n        scaleTarget.style.transformOrigin = origin;\n        scaleTarget.style.overflow = 'hidden';\n        scaleTarget.style.willChange = 'scale, translate, border-radius';\n\n        if (withTransition) {\n            const {easing} = CONFIG.animation;\n            scaleTarget.style.transition = `scale ${transitionDuration} ${easing}, translate ${transitionDuration} ${easing}, border-radius ${transitionDuration} ${easing}`;\n        }\n    }\n\n    function resetScaleTarget() {\n        if (!scaleTarget || !scaleBackground) return;\n\n        scaleTarget.style.scale = '';\n        scaleTarget.style.translate = '';\n        scaleTarget.style.borderRadius = '';\n        scaleTarget.style.transformOrigin = '';\n        scaleTarget.style.overflow = '';\n        scaleTarget.style.transition = '';\n        scaleTarget.style.willChange = '';\n    }\n\n    // ============================================\n    // GESTURE UTILITIES\n    // ============================================\n\n    function pushHistory(y: number) {\n        const now = performance.now();\n        dragState.history = dragState.history.filter(p => now - p.time <= 100);\n        dragState.history.push({y, time: now});\n    }\n\n    function clearHistory() {\n        dragState.history = [];\n    }\n\n    function calculateVelocity(): number {\n        const now = performance.now();\n        const recent = dragState.history.filter(p => now - p.time <= 100);\n\n        if (recent.length < 2) return 0;\n\n        const first = recent[0];\n        const last = recent[recent.length - 1];\n        if (!first || !last) return 0;\n        const dt = last.time - first.time;\n\n        return dt > 0 ? (last.y - first.y) / dt : 0;\n    }\n\n    function calcDynamicDuration(): string {\n        const now = performance.now();\n        const recent = dragState.history.filter(p => now - p.time <= 100);\n\n        if (recent.length < 2) return `${CONFIG.animation.defaultDuration}s`;\n\n        const first = recent[0];\n        const last = recent[recent.length - 1];\n        if (!first || !last) return `${CONFIG.animation.defaultDuration}s`;\n        const speed = Math.abs((last.y - first.y) / (last.time - first.time));\n        const {minDuration, maxDuration} = CONFIG.animation;\n\n        let duration = maxDuration - (speed / 2) * (maxDuration - minDuration);\n        duration = Math.max(minDuration, Math.min(maxDuration, duration));\n\n        return `${duration}s`;\n    }\n\n    function overdragResistance(value: number): number {\n        return value < 0 ? -Math.pow(Math.abs(value), CONFIG.gesture.overdragExponent) : value;\n    }\n\n    function applyLockedDragResistance(rawTranslateY: number): number {\n        // Base translateY when at start snap point: sheetHeight - (startSnapPoint * effectiveHeight)\n        const baseTranslateY = sheetHeight - (dragState.startSnapPoint * effectiveHeight);\n        const dragDistance = rawTranslateY - baseTranslateY;\n\n        if (dragDistance > 0) {\n            const {lockedDragResistance, maxLockedDrag} = CONFIG.gesture;\n            const resistedDrag = Math.min(dragDistance * lockedDragResistance, maxLockedDrag);\n            return baseTranslateY + resistedDrag;\n        }\n        return rawTranslateY;\n    }\n\n    function findNearestSnapPoint(translateY: number, velocityInfluence = 0): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - translateY) / effectiveHeight;\n        const targetProgress = currentProgress + velocityInfluence;\n\n        return allSnapPoints.reduce((nearest, sp) =>\n                Math.abs(targetProgress - sp) < Math.abs(targetProgress - nearest) ? sp : nearest\n            , allSnapPoints[0] ?? 0);\n    }\n\n    function determineSnapPoint(): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - currentTranslateY) / effectiveHeight;\n        const velocity = calculateVelocity();\n\n        if (!dragToClose) {\n            return dragState.startSnapPoint;\n        }\n\n        const {closeVelocityThreshold, closeProgressThreshold, velocityInfluence} = CONFIG.gesture;\n\n        // Fast swipe handling\n        if (Math.abs(velocity) > closeVelocityThreshold) {\n            if (velocity > 0) {\n                // Swipe down - close or go to lower snap\n                const lowerSnaps = allSnapPoints.filter(sp => sp < dragState.startSnapPoint);\n                const lowest = lowerSnaps[lowerSnaps.length - 1];\n                if (lowest !== undefined && currentProgress >= lowest * 0.5) {\n                    return lowest;\n                }\n                return 0;\n            } else {\n                // Swipe up - go to higher snap\n                const higherSnaps = allSnapPoints.filter(sp => sp > currentProgress);\n                return higherSnaps[0] ?? Math.max(...snapPoints);\n            }\n        }\n\n        // Check close threshold\n        const progressDrop = dragState.startSnapPoint - currentProgress;\n        if (progressDrop > closeProgressThreshold) {\n            return 0;\n        }\n\n        // Velocity is in px/ms, convert to progress units (divide by effectiveHeight, multiply by 1000 for scale)\n        const velocityInProgressUnits = -velocity / effectiveHeight * 1000;\n        return findNearestSnapPoint(currentTranslateY, velocityInProgressUnits * velocityInfluence);\n    }\n\n    // ============================================\n    // TOUCH EVENT HANDLERS\n    // ============================================\n\n    function isInDraggableArea(target: HTMLElement): boolean {\n        return !!(target.closest('[data-bottom-sheet-handle]'));\n    }\n\n    function isInteractive(target: HTMLElement): boolean {\n        return !!target.closest('button, a, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n    }\n\n    function shouldIgnoreDrag(target: HTMLElement): boolean {\n        return !!target.closest('[data-bottom-sheet-no-drag]');\n    }\n\n    /**\n     * Install a one-shot capture-phase click listener to suppress the ghost click\n     * that fires after a committed drag from an interactive element.\n     */\n    function suppressNextClick() {\n        if (!sheetRef) return;\n        const handler = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            sheetRef?.removeEventListener('click', handler, true);\n        };\n        sheetRef.addEventListener('click', handler, true);\n        // Safety: auto-remove after a short delay if click never fires\n        setTimeout(() => sheetRef?.removeEventListener('click', handler, true), 300);\n    }\n\n    /**\n     * Reset all pending/two-phase gesture state fields.\n     */\n    function resetPendingState() {\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = false;\n        dragState.inScrollable = false;\n    }\n\n    /**\n     * Initialize common drag tracking fields shared by both touch and pointer paths.\n     */\n    function initDragTracking(clientX: number, clientY: number) {\n        dragState.startX = clientX;\n        dragState.startY = clientY;\n        dragState.lastY = clientY;\n        dragState.currentY = currentTranslateY;\n        dragState.deltaY = 0;\n        dragState.startSnapPoint = Math.round((sheetHeight - currentTranslateY) / effectiveHeight * 100) / 100;\n        clearHistory();\n        pushHistory(clientY);\n    }\n\n    /**\n     * Commit to dragging: transition from pending state to active drag.\n     * Re-anchors startY/currentY to the current position to prevent visual jump.\n     */\n    function commitToDrag(clientY: number) {\n        dragState.isPending = false;\n        dragState.committed = true;\n        // Re-anchor to current position so sheet doesn't jump\n        dragState.startY = clientY;\n        dragState.currentY = currentTranslateY;\n        clearHistory();\n        pushHistory(clientY);\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    /**\n     * Check if the pending gesture should be resolved.\n     * Returns: 'drag' if vertical threshold exceeded and should drag sheet,\n     *          'abort' if horizontal wins or user wants to scroll content,\n     *          'pending' if undecided.\n     */\n    function resolvePendingGesture(clientX: number, clientY: number): 'drag' | 'abort' | 'pending' {\n        const {dragActivationThreshold, horizontalDeadZone} = CONFIG.gesture;\n        const absX = Math.abs(clientX - dragState.startX);\n        const absY = Math.abs(clientY - dragState.startY);\n        const deltaY = clientY - dragState.startY; // positive = finger moving down\n\n        // Horizontal threshold exceeded — let native behavior handle it (slider, scroll, etc.)\n        if (absX >= dragActivationThreshold) {\n            return 'abort';\n        }\n\n        // Vertical threshold exceeded and angle is more vertical than horizontal\n        if (absY >= dragActivationThreshold && absY > absX * horizontalDeadZone) {\n            // Inside a scrollable area: only commit to drag if pulling DOWN from top (dismiss gesture).\n            // If swiping UP (to scroll content down), abort and let native scroll work.\n            if (dragState.inScrollable) {\n                if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n                if (deltaY > 0 && isScrolledToTop) {\n                    // Pulling down from top → drag sheet (dismiss)\n                    return 'drag';\n                }\n                // Swiping up, or not at top → let native scroll handle it\n                return 'abort';\n            }\n            return 'drag';\n        }\n\n        return 'pending';\n    }\n\n    function handleTouchStart(e: TouchEvent) {\n        if (dragState.isTouchActive) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');\n        const isInteractiveTarget = isInteractive(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDrag(target) && !inDraggableArea) {\n            return;\n        }\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) {\n            dragState.shouldPreventScroll = false;\n            return;\n        }\n\n        // Initialize tracking for all cases\n        const touch = e.touches[0];\n        if (!touch) return;\n        dragState.isTouchActive = true;\n        initDragTracking(touch.clientX, touch.clientY);\n\n        // Interactive element (button, input, slider, etc.) NOT in draggable area:\n        // Enter pending state — don't commit to drag yet, let threshold decide\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n            dragState.shouldPreventScroll = true; // Will be used if we commit\n\n            // Do NOT set isDragging, transitionDuration, or disable transitions\n            // Do NOT call e.preventDefault() — allow native touch behavior until committed\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging (existing behavior)\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n        dragState.shouldPreventScroll = !(inScrollable && isScrolledToTop && !inDraggableArea);\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n        if (!dragState.isTouchActive) return;\n\n        const touch = e.touches[0];\n        if (!touch) return;\n        const clientY = touch.clientY;\n        const clientX = touch.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                dragState.shouldPreventScroll = true;\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior (slider, etc.)\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.isTouchActive = false;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing, let native behavior continue\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        const moveDelta = clientY - dragState.startY;\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (isScrolledToTop && moveDelta > 0) dragState.shouldPreventScroll = true;\n        if (!dragState.shouldPreventScroll) return;\n\n        e.preventDefault();\n\n        let translateY = dragState.currentY + moveDelta;\n        if (translateY < 0) translateY = overdragResistance(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        if (sheetRef) sheetRef.style.translate = `0 ${translateY}px`;\n\n        const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));\n        updateBackdrop(progress);\n        updateScaleTarget(progress, false);\n        bottomSheetStore.updateProgress(id, progress);\n    }\n\n    function handleTouchEnd(e: TouchEvent) {\n        if (e.touches.length > 0 || !dragState.isTouchActive) return;\n\n        dragState.isTouchActive = false;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!dragState.shouldPreventScroll) {\n            isDragging = false;\n            return;\n        }\n\n        isDragging = false;\n        dragState.shouldPreventScroll = false;\n\n        const nearestSnap = determineSnapPoint();\n\n        if (nearestSnap === 0 && dragToClose) {\n            doClose();\n        } else {\n            snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {\n                if (!open) {\n                    prevOpen = true;\n                    open = true;\n                    onOpenChange?.(true);\n                }\n            });\n        }\n    }\n\n    // ============================================\n    // POINTER EVENT HANDLERS (Desktop)\n    // ============================================\n\n    function handlePointerDown(e: PointerEvent) {\n        if (e.pointerType === 'touch' || e.button !== 0 || dragState.activePointerId !== null) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');\n        const isInteractiveTarget = isInteractive(target);\n        const shouldIgnoreDragTarget = shouldIgnoreDrag(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDragTarget && !inDraggableArea) return;\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) return;\n\n        dragState.activePointerId = e.pointerId;\n        initDragTracking(e.clientX, e.clientY);\n\n        // Interactive element NOT in draggable area:\n        // Enter pending state — don't commit yet, preserve native focus/click\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n\n            // Do NOT call e.preventDefault() — preserve focus for inputs\n            // Do NOT call setPointerCapture — allow native hover/click behavior\n            // Do NOT set isDragging or disable transitions\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        sheetRef?.setPointerCapture(e.pointerId);\n        isDragging = true;\n        e.preventDefault();\n    }\n\n    function handlePointerMove(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n        if (!isDragging && !dragState.isPending) return;\n\n        const clientY = e.clientY;\n        const clientX = e.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                sheetRef?.setPointerCapture(e.pointerId);\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.activePointerId = null;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        let translateY = dragState.currentY + clientY - dragState.startY;\n        if (translateY < 0) translateY = overdragResistance(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        if (sheetRef) sheetRef.style.translate = `0 ${translateY}px`;\n\n        const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));\n        updateBackdrop(progress);\n        updateScaleTarget(progress, false);\n        bottomSheetStore.updateProgress(id, progress);\n\n        e.preventDefault();\n    }\n\n    function handlePointerUp(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        const nearestSnap = determineSnapPoint();\n\n        if (nearestSnap === 0 && dragToClose) {\n            doClose();\n        } else {\n            snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {\n                if (!open) {\n                    prevOpen = true;\n                    open = true;\n                    onOpenChange?.(true);\n                }\n            });\n        }\n    }\n\n    function handlePointerCancel(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // If pending, just reset — nothing visual happened\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        snapTo(findNearestSnapPoint(currentTranslateY, 0));\n    }\n\n    function handleCloseButtonClick(e: MouseEvent) {\n        e.stopPropagation();\n        doClose();\n    }\n\n    function handleBackdropClick(e: PointerEvent) {\n        if (!closeOnBackdrop || e.target !== backdropRef || isDragging || isAnimating) return;\n        doClose();\n    }\n\n    function handleKeydown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && isVisible && bottomSheetStore.isTopmost(id)) {\n            e.preventDefault();\n            doClose();\n        }\n    }\n\n    // Svelte action for touch events\n    function touchEvents(node: HTMLElement) {\n        node.addEventListener('touchstart', handleTouchStart, {passive: false});\n        node.addEventListener('touchmove', handleTouchMove, {passive: false});\n        node.addEventListener('touchend', handleTouchEnd, {passive: true});\n\n        return {\n            destroy() {\n                node.removeEventListener('touchstart', handleTouchStart);\n                node.removeEventListener('touchmove', handleTouchMove);\n                node.removeEventListener('touchend', handleTouchEnd);\n            }\n        };\n    }\n</script>\n\n<svelte:window onkeydown={handleKeydown}/>\n\n{#if isVisible}\n    <!-- Backdrop -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={backdropRef}\n            class={r.backdrop()}\n            style:z-index={zIndex}\n            style:--transition-duration={transitionDuration}\n            onpointerup={handleBackdropClick}\n    ></div>\n\n    <!-- Sheet -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={sheetRef}\n            class={r.sheet()}\n            style:z-index={zIndex + 1}\n            style:height=\"{maxSheetHeight}px\"\n            style:--transition-duration={transitionDuration}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabindex={-1}\n            use:touchEvents\n            onpointerdown={handlePointerDown}\n            onpointermove={handlePointerMove}\n            onpointerup={handlePointerUp}\n            onpointercancel={handlePointerCancel}\n    >\n        <!-- Drag Handle -->\n        <div class={r.handle()} data-bottom-sheet-handle>\n            <div class={r.handleBar()}></div>\n        </div>\n\n        <!-- Header -->\n        {#if header}\n            <div class={r.header()} data-bottom-sheet-header>\n                {@render header()}\n                {#if showCloseButton}\n                    <button\n                            class={r.closeButton()}\n                            data-bottom-sheet-close\n                            onclick={handleCloseButtonClick}\n                            aria-label=\"Close\"\n                            type=\"button\"\n                    >\n                        <IconX class=\"size-4\"/>\n                    </button>\n                {/if}\n            </div>\n        {/if}\n\n        <!-- Content -->\n        <div bind:this={contentRef} class={r.content()} data-bottom-sheet-content>\n            {#if children}\n                {@render children()}\n            {/if}\n        </div>\n    </div>\n{/if}\n\n<style>\n    /* Consumer-marked scroll region inside the sheet body. */\n    [data-bottom-sheet-content] :global([data-bottom-sheet-scroll]) {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        min-height: 0;\n        touch-action: pan-y;\n    }\n\n    /* Suppress native gestures on header children so the drag is captured. */\n    [data-bottom-sheet-header] :global(*) {\n        touch-action: none;\n        user-select: none;\n    }\n</style>\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/bottomSheetStore.svelte.ts",
+      "target": "bottomSheetStore.svelte.ts",
+      "type": "ts",
+      "content": "/**\n * Bottom Sheet store — Svelte 5 runes.\n *\n * A small singleton that tracks the stack of open bottom sheets so multiple\n * sheets can layer correctly (z-index), report drag progress, and resolve which\n * sheet is topmost (for Escape handling). Sheets register on mount and push/pop\n * themselves from the stack as they open/close. Exposed publicly so apps can\n * drive sheets programmatically (open/close/closeTop) in addition to `bind:open`.\n */\n\nexport interface BottomSheetConfig {\n    id: string;\n    snapPoints: number[];\n    defaultSnapPoint: number;\n    closeOnBackdrop: boolean;\n}\n\nexport interface SheetStackItem {\n    id: string;\n    zIndex: number;\n    progress: number;\n    config: BottomSheetConfig;\n}\n\nconst BASE_Z_INDEX = 1000;\nconst Z_INDEX_INCREMENT = 10;\n\nfunction createBottomSheetStore() {\n    // Stack of active sheets (bottom to top)\n    let sheetStack = $state<SheetStackItem[]>([]);\n\n    // Registry of all sheet configs\n    let registry = $state<Map<string, BottomSheetConfig>>(new Map());\n\n    // Container refs for scale effect\n    let containerRefs = $state<Map<string, HTMLElement>>(new Map());\n\n    /**\n     * Register a sheet with its config\n     */\n    function register(id: string, config: Omit<BottomSheetConfig, 'id'>): void {\n        registry.set(id, {id, ...config});\n    }\n\n    /**\n     * Unregister a sheet\n     */\n    function unregister(id: string): void {\n        registry.delete(id);\n        containerRefs.delete(id);\n        // Remove from stack if present\n        sheetStack = sheetStack.filter(s => s.id !== id);\n    }\n\n    /**\n     * Open a sheet by ID\n     */\n    function open(id: string): void {\n        const config = registry.get(id);\n        if (!config) {\n            // Sheet was not registered (component not mounted yet) — ignore.\n            return;\n        }\n\n        // Check if already in stack\n        if (sheetStack.some(s => s.id === id)) {\n            return;\n        }\n\n        // Calculate z-index based on stack position\n        const zIndex = BASE_Z_INDEX + (sheetStack.length * Z_INDEX_INCREMENT);\n\n        sheetStack = [...sheetStack, {\n            id,\n            zIndex,\n            progress: 0,\n            config\n        }];\n    }\n\n    /**\n     * Close a sheet by ID\n     */\n    function close(id: string): void {\n        sheetStack = sheetStack.filter(s => s.id !== id);\n        // Recalculate z-indices for remaining sheets\n        sheetStack = sheetStack.map((sheet, index) => ({\n            ...sheet,\n            zIndex: BASE_Z_INDEX + (index * Z_INDEX_INCREMENT)\n        }));\n    }\n\n    /**\n     * Close the topmost sheet\n     */\n    function closeTop(): void {\n        const top = sheetStack[sheetStack.length - 1];\n        if (top) {\n            close(top.id);\n        }\n    }\n\n    /**\n     * Update progress for a sheet (0-1)\n     */\n    function updateProgress(id: string, progress: number): void {\n        const index = sheetStack.findIndex(s => s.id === id);\n        const sheet = sheetStack[index];\n        if (sheet) {\n            sheet.progress = Math.max(0, Math.min(1, progress));\n        }\n    }\n\n    /**\n     * Get z-index for a sheet\n     */\n    function getZIndex(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.zIndex ?? BASE_Z_INDEX;\n    }\n\n    /**\n     * Check if a sheet is open\n     */\n    function isOpen(id: string): boolean {\n        return sheetStack.some(s => s.id === id);\n    }\n\n    /**\n     * Check if a sheet is the topmost\n     */\n    function isTopmost(id: string): boolean {\n        return sheetStack[sheetStack.length - 1]?.id === id;\n    }\n\n    /**\n     * Get progress for a sheet\n     */\n    function getProgress(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.progress ?? 0;\n    }\n\n    /**\n     * Attach container ref for scale effect\n     */\n    function attachContainer(sheetId: string, ref: HTMLElement): void {\n        containerRefs.set(sheetId, ref);\n    }\n\n    /**\n     * Get container ref for a sheet\n     */\n    function getContainer(sheetId: string): HTMLElement | undefined {\n        return containerRefs.get(sheetId);\n    }\n\n    /**\n     * Get combined backdrop opacity from all sheets\n     */\n    function getCombinedBackdropOpacity(): number {\n        // Use the topmost sheet's progress for backdrop\n        const top = sheetStack[sheetStack.length - 1];\n        return top ? top.progress * 0.5 : 0;\n    }\n\n    /**\n     * Get the current stack\n     */\n    function getStack(): SheetStackItem[] {\n        return sheetStack;\n    }\n\n    return {\n        get stack() { return sheetStack; },\n        get hasOpenSheets() { return sheetStack.length > 0; },\n\n        register,\n        unregister,\n        open,\n        close,\n        closeTop,\n        updateProgress,\n        getZIndex,\n        isOpen,\n        isTopmost,\n        getProgress,\n        attachContainer,\n        getContainer,\n        getCombinedBackdropOpacity,\n        getStack\n    };\n}\n\n// Export singleton instance\nexport const bottomSheetStore = createBottomSheetStore();\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as BottomSheet} from './BottomSheet.svelte'\nexport {bottomSheetStore} from './bottomSheetStore.svelte.js'\nexport {bottomSheetRecipe} from './BottomSheet.recipe'\nexport type {BottomSheetRecipeProps, BottomSheetProps} from './BottomSheet.recipe'\nexport type {BottomSheetConfig, SheetStackItem} from './bottomSheetStore.svelte.js'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "BottomSheet",
+    "bottomSheetStore",
+    "bottomSheetRecipe"
+  ]
+}

package/registry/button.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "button",
+  "type": "registry:component",
+  "description": "Interactive button with variants, sizes, loading, danger, link mode.",
+  "recipe": "src/lib/components/button/Button.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/button/Button.recipe.ts",
+      "target": "Button.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAnchorAttributes, HTMLButtonAttributes} from \"svelte/elements\";\n\n/**\n * Button recipe — the canonical styled layer for the base design language.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: buttonRecipe, ... })` in typed code — base sizing and\n * states are inherited; only the design language changes. See\n * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the\n * llms doc generator doesn't grep its variant tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS vars below\n * (--tera-button-*) let a theme/app retune radius, weight and press feel with\n * no code change; they default to global axis tokens in tera-ui-base.css.\n */\nexport const buttonRecipe = tv({\n    base: 'relative overflow-visible rounded-[var(--tera-button-radius,var(--tera-radius-base))] inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none [font-weight:var(--tera-button-font-weight,500)] cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-[var(--tera-duration-fast)] focus-visible:shadow-focus',\n    variants: {\n        variant: {\n            // \"Detent\" press: primary rides a raised accent key; hover brightens\n            // + lifts, active depresses (translateY down, key collapses).\n            primary: 'bg-primary-600 text-white border border-primary-700 shadow-key hover:bg-primary-500 hover:border-primary-600 hover:[transform:translateY(var(--tera-button-hover-lift,-1px))] active:bg-primary-700 active:shadow-sm active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',\n            // Default reads as a physical key — subtle raised edge, surface lifts\n            // on hover, depresses on press. Accent stays reserved for primary.\n            default: 'bg-surface-control text-text-primary border border-border-default shadow-xs hover:bg-surface-raised hover:border-border-strong active:bg-surface-sunken active:shadow-none active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',\n            dashed: 'bg-surface-control text-text-secondary border border-dashed border-border-strong hover:text-text-primary hover:bg-surface-raised active:bg-surface-sunken active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',\n            text: 'bg-transparent text-text-primary border border-transparent hover:bg-surface-hover active:bg-surface-hover active:[transform:scale(var(--tera-button-active-scale,0.98))]',\n            link: 'bg-transparent text-interactive border border-transparent hover:text-interactive-hover hover:underline underline-offset-2 active:text-interactive-active px-0',\n        },\n        size: {\n            xs: 'h-[var(--tera-control-height-xs)] px-[var(--tera-control-px-xs)] gap-1 text-xs [&>svg]:size-3',\n            sm: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-sm)] gap-1.5 text-sm [&>svg]:size-3.5',\n            md: 'h-[var(--tera-control-height-base)] px-[var(--tera-control-px-lg)] gap-2 text-sm [&>svg]:size-4',\n            lg: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-lg)] gap-2 text-base [&>svg]:size-5',\n        },\n        shape: {\n            default: '',\n            circle: 'rounded-full px-0',\n            round: 'rounded-full',\n        },\n        disabled: {\n            true: 'bg-surface-sunken text-text-disabled border-border-default pointer-events-none shadow-none cursor-not-allowed',\n        },\n        loading: {\n            true: 'cursor-wait pointer-events-none opacity-65'\n        },\n        icon: {\n            true: 'px-0'\n        },\n        danger: {\n            true: ''\n        },\n        block: {\n            true: 'w-full'\n        }\n    },\n    compoundVariants: [\n        // Primary danger state — swap the accent key for a neutral shadow.\n        {\n            variant: 'primary',\n            danger: true,\n            disabled: false,\n            class: 'bg-error-default border-error-600 shadow-sm hover:bg-error-hover hover:border-error-default active:bg-error-active active:border-error-active'\n        },\n        // Default danger state\n        {\n            variant: 'default',\n            danger: true,\n            disabled: false,\n            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'\n        },\n        // Dashed danger state\n        {\n            variant: 'dashed',\n            danger: true,\n            disabled: false,\n            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'\n        },\n        // Text danger state\n        {\n            variant: 'text',\n            danger: true,\n            disabled: false,\n            class: 'text-error-default hover:bg-error-subtle active:bg-error-muted'\n        },\n        // Link danger state\n        {\n            variant: 'link',\n            danger: true,\n            disabled: false,\n            class: 'text-error-default hover:text-error-hover active:text-error-active'\n        },\n        // Text disabled state\n        {\n            variant: 'text',\n            disabled: true,\n            class: 'bg-transparent border-transparent'\n        },\n        // Link disabled state\n        {\n            variant: 'link',\n            disabled: true,\n            class: 'bg-transparent border-transparent'\n        },\n        // Icon size variants - circle and icon-only\n        {size: 'xs', icon: true, class: 'size-[var(--tera-control-height-xs)]'},\n        {size: 'sm', icon: true, class: 'size-[var(--tera-control-height-sm)]'},\n        {size: 'md', icon: true, class: 'size-[var(--tera-control-height-base)]'},\n        {size: 'lg', icon: true, class: 'size-[var(--tera-control-height-lg)]'},\n        // Circle shape sizing\n        {size: 'xs', shape: 'circle', class: 'size-[var(--tera-control-height-xs)]'},\n        {size: 'sm', shape: 'circle', class: 'size-[var(--tera-control-height-sm)]'},\n        {size: 'md', shape: 'circle', class: 'size-[var(--tera-control-height-base)]'},\n        {size: 'lg', shape: 'circle', class: 'size-[var(--tera-control-height-lg)]'},\n    ],\n    defaultVariants: {\n        variant: 'default',\n        size: 'md',\n        shape: 'default',\n    },\n});\n\nexport type ButtonRecipeProps = VariantProps<typeof buttonRecipe>;\n\nexport interface ButtonProps extends Omit<HTMLButtonAttributes, 'disabled'>, ButtonRecipeProps {\n    children?: Snippet;\n    /** Replace the default loading spinner with custom markup (structural seam). */\n    spinner?: Snippet;\n    /** When set, the button renders as an `<a>` (button-as-link) without forking. */\n    href?: HTMLAnchorAttributes['href'];\n    target?: HTMLAnchorAttributes['target'];\n    rel?: HTMLAnchorAttributes['rel'];\n    class?: string;\n    ref?: HTMLElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/button/Button.svelte",
+      "target": "Button.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type ButtonProps, buttonRecipe} from \"./Button.recipe\";\n\n    let {\n        children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block,\n        class: className,\n        href, target, rel,\n        spinner,\n        ref = $bindable(),\n        onclick,\n        ...props\n    }: ButtonProps = $props();\n\n    const tag = $derived(href ? 'a' : 'button');\n    const isDisabled = $derived(disabled || loading);\n\n    function handleClick(e: MouseEvent) {\n        if (isDisabled) {\n            e.preventDefault();\n            return;\n        }\n        onclick?.(e);\n    }\n</script>\n\n<svelte:element\n        this={tag}\n        bind:this={ref}\n        class={buttonRecipe({ disabled: isDisabled, variant, icon, size, shape, danger, block, class: className })}\n        data-variant={variant}\n        data-danger={danger || undefined}\n        href={tag === 'a' ? href : undefined}\n        target={tag === 'a' ? target : undefined}\n        rel={tag === 'a' ? rel : undefined}\n        role={tag === 'a' ? 'button' : undefined}\n        disabled={tag === 'button' ? isDisabled : undefined}\n        aria-disabled={isDisabled || undefined}\n        aria-busy={loading}\n        {...props}\n        onclick={handleClick}\n>\n    {#if loading}\n        {#if spinner}\n            {@render spinner()}\n        {:else}\n            <svg class=\"animate-spin\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        {/if}\n    {/if}\n    {@render children?.()}\n</svelte:element>\n"
+    },
+    {
+      "path": "src/lib/components/button/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Button} from './Button.svelte'\nexport {buttonRecipe} from './Button.recipe'\nexport type {ButtonProps, ButtonRecipeProps} from './Button.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Button",
+    "buttonRecipe"
+  ]
+}

package/registry/card.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "card",
+  "type": "registry:component",
+  "description": "Content container with elevation, border, padding variants.",
+  "recipe": "src/lib/components/card/Card.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/card/Card.recipe.ts",
+      "target": "Card.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAttributes} from \"svelte/elements\";\n\n/**\n * Card recipe — the canonical styled layer for the base design language.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: cardRecipe, ... })` in typed code — surface, variant and\n * padding scales are inherited; only the design language changes. See\n * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the\n * llms doc generator doesn't grep its variant tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-card-radius) lets a theme/app retune the corner radius with no code\n * change; it defaults to the global container-radius token in tera-ui-base.css.\n */\nexport const cardRecipe = tv({\n    base: 'relative bg-surface-raised rounded-[var(--tera-card-radius,var(--border-radius-container))] transition-[box-shadow,transform] ease-spring duration-[var(--tera-duration-base)]',\n    variants: {\n        variant: {\n            default:  'shadow-sm',\n            elevated: 'shadow-md',\n            bordered: 'border border-border-default shadow-none',\n            ghost:    'bg-transparent shadow-none',\n        },\n        padding: {\n            none: 'p-0',\n            sm:   'p-3',\n            md:   'p-5',\n            lg:   'p-7',\n        },\n        clickable: {\n            true: 'cursor-pointer hover:shadow-md hover:-translate-y-px active:scale-[0.99]',\n        },\n        loading: {\n            true: 'overflow-hidden',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        padding: 'md',\n    },\n});\n\nexport type CardRecipeProps = VariantProps<typeof cardRecipe>;\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement>, CardRecipeProps {\n    children?: Snippet;\n    class?: string;\n    ref?: HTMLDivElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/card/Card.svelte",
+      "target": "Card.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type CardProps, cardRecipe} from './Card.recipe';\n\n    let {\n        children,\n        class: className,\n        variant,\n        padding,\n        clickable,\n        loading,\n        ref = $bindable(),\n        onclick,\n        ...props\n    }: CardProps = $props();\n</script>\n\n{#if clickable}\n    <button\n        bind:this={ref}\n        class={cardRecipe({ variant, padding, clickable, loading, class: className })}\n        {onclick}\n        {...props}\n    >\n        {#if loading}\n            <div class=\"absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-[var(--tera-card-radius)]\">\n                <div class=\"size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin\"></div>\n            </div>\n        {/if}\n        {@render children?.()}\n    </button>\n{:else}\n    <div\n        bind:this={ref}\n        class={cardRecipe({ variant, padding, clickable, loading, class: className })}\n        {onclick}\n        {...props}\n    >\n        {#if loading}\n            <div class=\"absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-[var(--tera-card-radius)]\">\n                <div class=\"size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin\"></div>\n            </div>\n        {/if}\n        {@render children?.()}\n    </div>\n{/if}\n"
+    },
+    {
+      "path": "src/lib/components/card/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Card} from './Card.svelte'\nexport {cardRecipe} from './Card.recipe'\nexport type {CardProps, CardRecipeProps} from './Card.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Card",
+    "cardRecipe"
+  ]
+}

package/registry/checkbox.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "checkbox",
+  "type": "registry:component",
+  "description": "Checkbox input with indeterminate support.",
+  "recipe": "src/lib/components/checkbox/Checkbox.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/checkbox/Checkbox.recipe.ts",
+      "target": "Checkbox.recipe.ts",
+      "type": "recipe",
+      "content": "/**\n * Checkbox recipe — the canonical styled layer for the base design language.\n *\n * Built on the bits-ui Checkbox primitive: a box (root) plus a centered\n * indicator that renders the check / indeterminate glyph.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: checkboxRecipe, ... })` in typed code — the box sizing,\n * focus and state styles are inherited; only the design language changes. See\n * docs/ARCHITECTURE.md for the worked example.\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-checkbox-radius) lets a theme/app retune the box corner radius with\n * no code change; it defaults to a global axis token in tera-ui-base.css.\n */\nimport {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\nexport const checkboxRecipe = tv({\n    slots: {\n        root: [\n            \"group peer box-content size-4 shrink-0 rounded-[var(--tera-checkbox-radius,var(--tera-radius-sm))] border border-border-strong bg-surface-control\",\n            \"shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5),0_1px_2px_rgba(15,23,42,0.08)]\",\n            \"transition-[border-color,box-shadow,background-color,transform] ease-ui duration-[var(--tera-duration-fast)]\",\n            \"hover:border-border-strong hover:bg-surface-hover\",\n            \"active:scale-95 active:duration-[var(--tera-duration-micro)]\",\n            \"focus-visible:outline-none focus-visible:shadow-focus\",\n            \"data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600 data-[state=checked]:shadow-key data-[state=checked]:hover:bg-interactive-active\",\n            \"data-[state=indeterminate]:bg-primary-600 data-[state=indeterminate]:border-primary-600 data-[state=indeterminate]:shadow-key data-[state=indeterminate]:hover:bg-interactive-active\",\n            \"disabled:cursor-not-allowed disabled:bg-neutral-token-3 disabled:border-neutral-token-5 disabled:opacity-50 disabled:shadow-none\",\n            \"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-token-3 data-[disabled=true]:border-neutral-token-5 data-[disabled=true]:opacity-50 data-[disabled=true]:shadow-none\",\n        ],\n        indicator: [\n            \"flex size-4 items-center justify-center\",\n            \"scale-50 opacity-0 transition-[transform,opacity] ease-spring duration-[var(--tera-duration-fast)]\",\n            \"group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100\",\n            \"group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:opacity-100\",\n            \"motion-reduce:transition-none\",\n        ],\n    },\n});\n\nexport type CheckboxRecipeProps = VariantProps<typeof checkboxRecipe>;\n\nexport interface CheckboxProps extends CheckboxRecipeProps {\n    /** Additional CSS classes for the root element. */\n    class?: string;\n    /** Whether the checkbox is checked. Bindable. */\n    checked?: boolean;\n    /** Whether the checkbox shows an indeterminate (−) state. Bindable. */\n    indeterminate?: boolean;\n    /** Prevents user interaction and dims the control. */\n    disabled?: boolean;\n    /** Whether the checkbox must be checked before form submission. */\n    required?: boolean;\n    /** Name attribute used when submitting within a form. */\n    name?: string;\n    /** Value sent with the form when checked. */\n    value?: string;\n    /** Called when the checked state changes. */\n    onCheckedChange?: (checked: boolean) => void;\n    /** Additional content rendered next to the checkbox indicator. */\n    children?: Snippet;\n    /**\n     * Replace the default indicator glyph (structural seam). Receives the\n     * current `checked` / `indeterminate` state so a custom mark can react.\n     */\n    checkIcon?: Snippet<[{ checked: boolean; indeterminate: boolean }]>;\n    /** Bindable reference to the root button element. */\n    ref?: HTMLButtonElement | null;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/checkbox/Checkbox.svelte",
+      "target": "Checkbox.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import { Checkbox as CheckboxPrimitive } from \"bits-ui\";\n    import { cn } from \"$lib/utils/index.js\";\n    import IconCheck from \"@tabler/icons-svelte/icons/check\"\n    import IconMinus from \"@tabler/icons-svelte/icons/minus\"\n    import { type CheckboxProps, checkboxRecipe } from './Checkbox.recipe';\n\n    let {\n        ref = $bindable(null),\n        checked = $bindable(false),\n        indeterminate = $bindable(false),\n        class: className,\n        disabled,\n        required,\n        name,\n        value,\n        onCheckedChange,\n        checkIcon,\n        ...restProps\n    }: CheckboxProps = $props();\n\n    const r = checkboxRecipe();\n</script>\n\n<CheckboxPrimitive.Root\n    bind:ref\n    {disabled}\n    {required}\n    {name}\n    {value}\n    {onCheckedChange}\n    class={r.root({ class: className })}\n    bind:checked\n    bind:indeterminate\n    {...restProps}\n>\n    {#snippet children({ checked, indeterminate })}\n        <div class={r.indicator()}>\n            {#if checkIcon}\n                {@render checkIcon({ checked, indeterminate })}\n            {:else if indeterminate}\n                <IconMinus class=\"size-3.5 text-neutral-1\" stroke={3}/>\n            {:else}\n                <IconCheck class={cn(\"size-3.5 text-neutral-1\")} stroke={3.25}/>\n            {/if}\n        </div>\n    {/snippet}\n</CheckboxPrimitive.Root>\n"
+    },
+    {
+      "path": "src/lib/components/checkbox/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Checkbox} from './Checkbox.svelte'\nexport {checkboxRecipe} from './Checkbox.recipe'\nexport type {CheckboxProps, CheckboxRecipeProps} from './Checkbox.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "@tabler/icons-svelte",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": true,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Checkbox",
+    "checkboxRecipe"
+  ]
+}

package/registry/combobox.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "combobox",
+  "type": "registry:component",
+  "description": "Searchable combobox with autocomplete.",
+  "recipe": "src/lib/components/combobox/Combobox.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/combobox/Combobox.recipe.ts",
+      "target": "Combobox.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Combobox recipe — the canonical styled layer for the searchable dropdown.\n *\n * Multi-part component (built on bits-ui Combobox): the recipe is slotted by\n * role — root / input / clear / trigger / chevron / content / viewport / item /\n * empty / chip / chipRemove — so an app can restyle any part independently. The\n * root wrapper carries the open/disabled visual states; the dropdown parts are\n * static base strings.\n *\n * Primary customization surface: extend with `tv({ extend: comboboxRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS vars (--tera-combobox-*) let\n * a theme retune corner radius with no code change; each reads through an inline\n * fallback to the prior global token, so the recipe is self-sufficient. See\n * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms\n * doc generator doesn't grep its tokens).\n */\nexport const comboboxRecipe = tv({\n    slots: {\n        root: `w-full inline-flex items-center gap-1 rounded-[var(--tera-combobox-radius,var(--tera-radius-base))] outline-none font-normal text-left\n        border border-border-default bg-surface-control shadow-xs\n        transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]\n        hover:border-border-strong`,\n        input: 'flex-1 min-w-0 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default',\n        clear: 'shrink-0 flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary',\n        trigger: 'flex items-center justify-center text-text-tertiary hover:text-text-primary',\n        chevron: 'size-4 transition-transform ease-ui duration-[var(--tera-duration-fast)]',\n        content: `z-50 overflow-hidden\n        bg-surface rounded-[var(--tera-combobox-content-radius,var(--border-radius-container))] border border-border-default shadow-lg\n        animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]\n        data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,\n        viewport: 'p-1 max-h-60 overflow-auto',\n        item: `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none\n        transition-colors ease-ui duration-[var(--tera-duration-micro)]\n        data-[highlighted]:bg-surface-hover\n        data-[selected]:font-medium data-[selected]:text-interactive\n        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,\n        empty: 'px-3 py-4 text-sm text-center text-text-tertiary',\n        chip: 'inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border shrink-0',\n        chipRemove: 'flex items-center rounded-full hover:bg-interactive/20',\n    },\n    variants: {\n        open: {\n            true: {root: 'border-interactive-hover shadow-focus'},\n        },\n        disabled: {\n            true: {root: 'cursor-not-allowed opacity-50 pointer-events-none'},\n        },\n    },\n});\n\nexport type ComboboxRecipeProps = VariantProps<typeof comboboxRecipe>;\n\nexport interface ComboboxItem {\n    /** Unique value submitted or passed to onchange. */\n    value: string;\n    /** Human-readable label shown in the list and trigger. */\n    label: string;\n    /** Prevents selecting this item. */\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    /** Whether one or many items can be selected at once. */\n    type: 'single' | 'multiple';\n    /** List of selectable options. */\n    items: ComboboxItem[];\n    /** Currently selected value(s). Bindable. */\n    value?: string | string[];\n    /** Placeholder shown in the search input when nothing is selected. */\n    placeholder?: string;\n    /** Prevents all interaction. */\n    disabled?: boolean;\n    /** Whether keyboard navigation wraps at the list boundaries. */\n    loop?: boolean;\n    /** Allow deselecting the current value by clicking it again (single mode only). */\n    allowDeselect?: boolean;\n    /** Called when the selection changes. */\n    onchange?: (value: string | string[]) => void;\n    /** Additional CSS classes for the root container. */\n    class?: string;\n    /** Bindable reference to the trigger element. */\n    ref?: HTMLElement | null;\n\n    // ── Passed through to Combobox.Root ────────────────────────────────\n    /** Name for the hidden form input, enabling native form submission. */\n    name?: string;\n    /** Marks the field as required for form validation. */\n    required?: boolean;\n    /** Scroll alignment for the highlighted item. */\n    scrollAlignment?: 'nearest' | 'center';\n\n    // ── Autocomplete / free-text mode (single only) ─────────────────────\n    /**\n     * When true (single mode only), whatever the user types becomes the\n     * combobox value directly — like a text input with suggestions.\n     * Selecting an item from the list still sets its item.value as normal.\n     */\n    freeInput?: boolean;\n\n    // ── Structural seams (override the hardcoded internal icons) ────────\n    /** Replace the default selected-item check mark with custom markup. */\n    checkIcon?: Snippet;\n    /** Replace the default trigger chevron with custom markup. */\n    chevronIcon?: Snippet;\n    /** Replace the default clear (×) icon with custom markup. */\n    clearIcon?: Snippet;\n\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/combobox/Combobox.svelte",
+      "target": "Combobox.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Combobox as ComboboxPrimitive} from 'bits-ui';\n    import {type ComboboxProps, comboboxRecipe} from './Combobox.recipe';\n    import {cn} from '$lib/utils/utils.js';\n    import {IconCheck, IconChevronDown} from '$lib/internal/icons';\n    import IconX from '@tabler/icons-svelte/icons/x';\n\n    let {\n        type,\n        items = [],\n        value = $bindable(undefined),\n        placeholder = 'Search…',\n        disabled,\n        loop,\n        allowDeselect,\n        onchange,\n        class: className,\n        ref = $bindable(null),\n        name,\n        required,\n        scrollAlignment,\n        freeInput = false,\n        checkIcon,\n        chevronIcon,\n        clearIcon,\n    }: ComboboxProps = $props();\n\n    let searchText = $state('');\n    let open = $state(false);\n\n\n    const filteredItems = $derived(\n        searchText.trim()\n            ? items.filter(i => i.label.toLowerCase().includes(searchText.trim().toLowerCase()))\n            : items\n    );\n\n    // Label of the currently selected item (single mode), or '' if none / custom text\n    const selectedLabel = $derived(\n        type === 'single' && typeof value === 'string' && value\n            ? (items.find(i => i.value === value)?.label ?? '')\n            : ''\n    );\n\n    const selectedChips = $derived(\n        type === 'multiple' && Array.isArray(value)\n            ? (value as string[]).map(v => ({value: v, label: items.find(i => i.value === v)?.label ?? v}))\n            : []\n    );\n\n    /**\n     * inputValue passed to Combobox.Root for single mode:\n     * - freeInput mode: always controlled — show selected label when an item\n     *   matches, otherwise show the raw value (custom free text).\n     * - normal mode: undefined → let bits-ui manage it automatically.\n     *\n     * Setting this to '' on clear ensures the input text is wiped even when\n     * the dropdown animation is still playing.\n     */\n    const controlledInputValue = $derived.by<string | undefined>(() => {\n        if (type !== 'single') return undefined;\n        if (freeInput) {\n            // Show label when value matches an item; otherwise the raw typed value\n            return selectedLabel || (typeof value === 'string' ? value : '') || '';\n        }\n        // Normal mode: after clearing, force the input empty; otherwise let bits-ui handle it\n        if (!value) return '';\n        return undefined;\n    });\n\n    // In freeInput mode the X button is visible whenever the input has any text\n    const showClearBtn = $derived(\n        type === 'single' && (freeInput ? !!(value) : !!(value))\n    );\n\n    function handleSingleInput(e: Event & {currentTarget: HTMLInputElement}) {\n        searchText = e.currentTarget.value;\n        if (freeInput) {\n            // Typed text IS the value in free-input mode\n            value = searchText as typeof value;\n            onchange?.(searchText);\n            // Close immediately (same tick) when no suggestions match —\n            // avoids a \"no results\" flash before a reactive effect would fire.\n            if (searchText.trim() && !items.some(i => i.label.toLowerCase().includes(searchText.trim().toLowerCase()))) {\n                open = false;\n            }\n        }\n    }\n\n    function clearOne(v: string) {\n        const next = (value as string[]).filter(x => x !== v);\n        value = next as typeof value;\n        onchange?.(next);\n    }\n\n    function clearAll() {\n        value = type === 'multiple' ? ([] as typeof value) : (undefined as typeof value);\n        onchange?.(type === 'multiple' ? [] : '');\n        searchText = '';\n    }\n\n    const r = $derived(comboboxRecipe({open, disabled}));\n</script>\n\n{#if type === 'single'}\n    <ComboboxPrimitive.Root\n        type=\"single\"\n        bind:value={value as string | undefined}\n        bind:open\n        onValueChange={(v) => onchange?.(v)}\n        {disabled}\n        {loop}\n        {allowDeselect}\n        {name}\n        {required}\n        {scrollAlignment}\n        {items}\n        inputValue={controlledInputValue}\n        onOpenChange={(o) => { if (!o) searchText = ''; }}\n    >\n        <div bind:this={ref} class={r.root({class: cn('h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)]', className)})}>\n            <ComboboxPrimitive.Input\n                oninput={handleSingleInput}\n                placeholder={(!freeInput && selectedLabel) ? selectedLabel : placeholder}\n                clearOnDeselect\n                class={r.input()}\n            />\n            {#if showClearBtn}\n                <button\n                    type=\"button\"\n                    onpointerdown={(e) => e.stopPropagation()}\n                    onclick={(e) => { e.stopPropagation(); clearAll(); }}\n                    class={r.clear()}\n                    aria-label=\"Clear selection\"\n                >\n                    {#if clearIcon}\n                        {@render clearIcon()}\n                    {:else}\n                        <IconX class=\"size-3.5\" />\n                    {/if}\n                </button>\n            {/if}\n            <ComboboxPrimitive.Trigger class={r.trigger({class: 'shrink-0'})}>\n                {#if chevronIcon}\n                    {@render chevronIcon()}\n                {:else}\n                    <IconChevronDown class={cn(r.chevron(), open && 'rotate-180')} />\n                {/if}\n            </ComboboxPrimitive.Trigger>\n        </div>\n\n        {#if !freeInput || filteredItems.length > 0}\n            <ComboboxPrimitive.Portal>\n                <ComboboxPrimitive.Content\n                    sideOffset={4}\n                    customAnchor={ref}\n                    class={r.content({class: 'min-w-[var(--bits-combobox-anchor-width)]'})}\n                >\n                    <ComboboxPrimitive.Viewport class={r.viewport()}>\n                        {#each filteredItems as item (item.value)}\n                            <ComboboxPrimitive.Item\n                                value={item.value}\n                                label={item.label}\n                                disabled={item.disabled}\n                                class={r.item()}\n                            >\n                                {#snippet children({selected})}\n                                    <span class=\"flex-1\">{item.label}</span>\n                                    {#if selected}\n                                        {#if checkIcon}\n                                            {@render checkIcon()}\n                                        {:else}\n                                            <IconCheck class=\"size-4 text-interactive shrink-0\" />\n                                        {/if}\n                                    {/if}\n                                {/snippet}\n                            </ComboboxPrimitive.Item>\n                        {:else}\n                            <div class={r.empty()}>No results found.</div>\n                        {/each}\n                    </ComboboxPrimitive.Viewport>\n                </ComboboxPrimitive.Content>\n            </ComboboxPrimitive.Portal>\n        {/if}\n    </ComboboxPrimitive.Root>\n\n{:else}\n    <ComboboxPrimitive.Root\n        type=\"multiple\"\n        bind:value={value as string[] | undefined}\n        bind:open\n        onValueChange={(v) => onchange?.(v)}\n        {disabled}\n        {loop}\n        {name}\n        {required}\n        {scrollAlignment}\n        onOpenChange={(o) => { if (!o) searchText = ''; }}\n    >\n        <div bind:this={ref} class={r.root({class: cn('min-h-[var(--tera-control-height-md)] h-auto flex-wrap gap-1 px-[var(--tera-control-px-md)] py-1.5', className)})}>\n            {#each selectedChips as chip (chip.value)}\n                <span class={r.chip()}>\n                    {chip.label}\n                    <button\n                        type=\"button\"\n                        onpointerdown={(e) => e.stopPropagation()}\n                        onclick={(e) => { e.stopPropagation(); clearOne(chip.value); }}\n                        class={r.chipRemove()}\n                        aria-label=\"Remove {chip.label}\"\n                    >\n                        {#if clearIcon}\n                            {@render clearIcon()}\n                        {:else}\n                            <IconX class=\"size-3\" />\n                        {/if}\n                    </button>\n                </span>\n            {/each}\n            <ComboboxPrimitive.Input\n                oninput={(e) => (searchText = e.currentTarget.value)}\n                placeholder={selectedChips.length === 0 ? placeholder : ''}\n                clearOnDeselect\n                class={r.input({class: 'min-w-[80px]'})}\n            />\n            <span class=\"ml-auto flex items-center gap-1 shrink-0 self-center\">\n                {#if selectedChips.length > 0}\n                    <button\n                        type=\"button\"\n                        onpointerdown={(e) => e.stopPropagation()}\n                        onclick={(e) => { e.stopPropagation(); clearAll(); }}\n                        class={r.clear()}\n                        aria-label=\"Clear all\"\n                    >\n                        {#if clearIcon}\n                            {@render clearIcon()}\n                        {:else}\n                            <IconX class=\"size-3.5\" />\n                        {/if}\n                    </button>\n                {/if}\n                <ComboboxPrimitive.Trigger class={r.trigger()}>\n                    {#if chevronIcon}\n                        {@render chevronIcon()}\n                    {:else}\n                        <IconChevronDown class={cn(r.chevron(), open && 'rotate-180')} />\n                    {/if}\n                </ComboboxPrimitive.Trigger>\n            </span>\n        </div>\n\n        <ComboboxPrimitive.Portal>\n            <ComboboxPrimitive.Content\n                sideOffset={4}\n                customAnchor={ref}\n                class={r.content({class: 'min-w-[var(--bits-combobox-anchor-width)]'})}\n            >\n                <ComboboxPrimitive.Viewport class={r.viewport()}>\n                    {#each filteredItems as item (item.value)}\n                        <ComboboxPrimitive.Item\n                            value={item.value}\n                            label={item.label}\n                            disabled={item.disabled}\n                            class={r.item()}\n                        >\n                            {#snippet children({selected})}\n                                <span class=\"flex-1\">{item.label}</span>\n                                {#if selected}\n                                    {#if checkIcon}\n                                        {@render checkIcon()}\n                                    {:else}\n                                        <IconCheck class=\"size-4 text-interactive shrink-0\" />\n                                    {/if}\n                                {/if}\n                            {/snippet}\n                        </ComboboxPrimitive.Item>\n                    {:else}\n                        <div class={r.empty()}>No results found.</div>\n                    {/each}\n                </ComboboxPrimitive.Viewport>\n            </ComboboxPrimitive.Content>\n        </ComboboxPrimitive.Portal>\n    </ComboboxPrimitive.Root>\n{/if}\n"
+    },
+    {
+      "path": "src/lib/components/combobox/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Combobox} from './Combobox.svelte'\nexport {comboboxRecipe} from './Combobox.recipe'\nexport type {ComboboxProps, ComboboxItem, ComboboxRecipeProps} from './Combobox.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "@tabler/icons-svelte",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": true,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "Combobox",
+    "comboboxRecipe"
+  ]
+}

package/registry/command.json

@@ -0,0 +1,109 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "command",
+  "type": "registry:component",
+  "description": "Command palette.",
+  "recipe": "src/lib/components/command/Command.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/command/Command.recipe.ts",
+      "target": "Command.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\n\n/**\n * Command recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Command): the recipe is slotted by role\n * — root / list / item / linkItem / group / groupHeading / separator / shortcut /\n * empty — so an app can restyle any part independently. Most of the visual\n * treatment for the list surface, items, groups and empty state lives in the\n * companion `command.scss` (data-cmdk-* attribute selectors); these slots carry\n * the Tailwind utility strings that were previously inlined per sub-component.\n *\n * Primary customization surface: extend with `tv({ extend: commandRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-command-radius)\n * lets a theme retune the list/menu surface corner radius with no code change;\n * it defaults to 0 (square — the prior look) via an inline fallback. See\n * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms\n * doc generator doesn't grep its tokens).\n */\nexport const commandRecipe = tv({\n    slots: {\n        root: 'flex w-full flex-col overflow-hidden',\n        list: 'rounded-[var(--tera-command-radius,0)]',\n        item: '',\n        linkItem: \"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        group: 'overflow-hidden',\n        groupHeading: '',\n        separator: 'bg-border mx-1 h-px',\n        shortcut: 'text-muted-foreground ml-auto text-xs tracking-widest',\n        empty: '',\n    },\n});\n\nexport type CommandRecipeProps = VariantProps<typeof commandRecipe>;\n"
+    },
+    {
+      "path": "src/lib/components/command/command.scss",
+      "target": "command.scss",
+      "type": "style",
+      "content": "@reference \"tailwindcss/theme\";\r\n\r\n[data-cmdk-root] {\r\n\ttransition: transform 100ms ease;\r\n\tmax-width: var(--spacing-screen-md);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n}\r\n\r\n[data-cmdk-item] {\r\n\tcontent-visibility: auto;\r\n\r\n\tcursor: pointer;\r\n\tborder-radius: var(--radius-sm);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: --spacing(2);\r\n\tpadding-inline: --spacing(2);\r\n\tpadding-block: --spacing(2.5);\r\n\tcolor: var(--color-neutral-token-10);\r\n\tuser-select: none;\r\n\twill-change: background, color;\r\n\ttransition: all 150ms ease;\r\n\ttransition-property: none;\r\n\r\n\t&[data-selected] {\r\n\t\tbackground: var(--color-neutral-token-4);\r\n\t\tcolor: var(--color-neutral-token-13);\r\n\t}\r\n\r\n\t&[data-disabled] {\r\n\t\tcolor: var(--color-neutral-token-7);\r\n\t\tcursor: not-allowed;\r\n\t}\r\n\r\n\t&:active {\r\n\t\ttransition-property: background;\r\n\t\tbackground: var(--color-neutral-token-5);\r\n\t}\r\n\r\n\t//& + [data-cmdk-item] {\r\n\t//\tmargin-top: 4px;\r\n\t//}\r\n\r\n\tsvg {\r\n\t\twidth: 18px;\r\n\t\theight: 18px;\r\n\t}\r\n}\r\n\r\n[data-cmdk-list] {\r\n\theight: min(330px, calc(var(--cmdk-list-height)));\r\n\tmax-height: 400px;\r\n\toverflow: auto;\r\n\toverscroll-behavior: contain;\r\n\ttransition: 100ms ease;\r\n\ttransition-property: height;\r\n\tmargin-block: --spacing(2);\r\n\tpadding-inline: --spacing(2);\r\n}\r\n\r\n[data-cmdk-separator] {\r\n\theight: 1px;\r\n\twidth: 100%;\r\n\tmargin: 4px 0;\r\n\tbackground: var(--color-neutral-token-5);\r\n}\r\n\r\n*:not([hidden]) + [data-cmdk-group] {\r\n\tmargin-top: --spacing(2);\r\n}\r\n\r\n[data-cmdk-group-heading] {\r\n\tuser-select: none;\r\n\tfont-size: var(--text-xs);\r\n\tcolor: var(--color-neutral-token-9);\r\n\tdisplay: flex;\r\n\tpadding-block: --spacing(1);\r\n\tpadding-inline: --spacing(2);\r\n}\r\n\r\n[data-cmdk-empty] {\r\n\tdisplay: grid;\r\n\tplace-content: center;\r\n\tfont-size: var(--text-sm);\r\n\tcolor: var(--color-neutral-token-8);\r\n\theight: --spacing(12);\r\n\twhite-space: pre-wrap;\r\n}"
+    },
+    {
+      "path": "src/lib/components/command/components/command-empty.svelte",
+      "target": "components/command-empty.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Command as CommandPrimitive } from \"bits-ui\";\r\n    import { commandRecipe } from \"../Command.recipe\";\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: CommandPrimitive.EmptyProps = $props();\r\n</script>\r\n<CommandPrimitive.Empty\r\n        bind:ref\r\n        data-slot=\"command-empty\"\r\n        data-cmdk-empty=\"\"\r\n        class={commandRecipe().empty({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-group.svelte",
+      "target": "components/command-group.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Command as CommandPrimitive, useId } from \"bits-ui\";\r\n    import { commandRecipe } from \"../Command.recipe\";\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        children,\r\n        heading,\r\n        value,\r\n        ...restProps\r\n    }: CommandPrimitive.GroupProps & {\r\n        heading?: string;\r\n    } = $props();\r\n\r\n    const r = commandRecipe();\r\n</script>\r\n<CommandPrimitive.Group\r\n        bind:ref\r\n        data-slot=\"command-group\"\r\n        class={r.group({class: className})}\r\n        value={value ?? heading ?? `----${useId()}`}\r\n        {...restProps}\r\n>\r\n    {#if heading}\r\n        <CommandPrimitive.GroupHeading\r\n                data-cmdk-group-heading=\"\"\r\n                class={r.groupHeading()}\r\n        >\r\n            {heading}\r\n        </CommandPrimitive.GroupHeading>\r\n    {/if}\r\n    <CommandPrimitive.GroupItems {children} />\r\n</CommandPrimitive.Group>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-input.svelte",
+      "target": "components/command-input.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import {Command as CommandPrimitive} from \"bits-ui\";\r\n    import {cn} from \"$lib/utils\";\r\n    import {IconSearch} from \"$lib/internal/icons\";\r\n    import {inputRecipe} from \"$lib/components/input\";\r\n\r\n    let {\r\n        autofocus = undefined,\r\n        ref = $bindable(null),\r\n        class: className,\r\n        value = $bindable(\"\"),\r\n        ...restProps\r\n    }: CommandPrimitive.InputProps = $props();\r\n</script>\r\n<div class=\"flex items-center border-b px-3\" data-slot=\"command-input-wrapper\">\r\n    <IconSearch class=\"size-4 shrink-0 opacity-50\"/>\r\n    <CommandPrimitive.Input\r\n            autofocus={autofocus}\r\n            data-slot=\"command-input\"\r\n            class={inputRecipe({ variant: 'borderless', size: 'lg' }).field({ class: cn('rounded-none text-sm', className) })}\r\n\r\n            bind:ref\r\n            {...restProps}\r\n            bind:value\r\n    />\r\n</div>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-item.svelte",
+      "target": "components/command-item.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import {Command as CommandPrimitive} from \"bits-ui\";\r\n    import {commandRecipe} from \"../Command.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: CommandPrimitive.ItemProps = $props();\r\n</script>\r\n<CommandPrimitive.Item\r\n        bind:ref\r\n        data-slot=\"command-item\"\r\n        data-cmdk-item=\"\"\r\n        class={commandRecipe().item({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-link-item.svelte",
+      "target": "components/command-link-item.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Command as CommandPrimitive } from \"bits-ui\";\r\n    import { commandRecipe } from \"../Command.recipe\";\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: CommandPrimitive.LinkItemProps = $props();\r\n</script>\r\n<CommandPrimitive.LinkItem\r\n        bind:ref\r\n        data-slot=\"command-item\"\r\n        class={commandRecipe().linkItem({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-list.svelte",
+      "target": "components/command-list.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Command as CommandPrimitive } from \"bits-ui\";\r\n    import { commandRecipe } from \"../Command.recipe\";\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: CommandPrimitive.ListProps = $props();\r\n</script>\r\n<CommandPrimitive.List\r\n        bind:ref\r\n        data-slot=\"command-list\"\r\n        data-cmdk-list=\"\"\r\n        class={commandRecipe().list({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-separator.svelte",
+      "target": "components/command-separator.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Command as CommandPrimitive } from \"bits-ui\";\r\n    import { commandRecipe } from \"../Command.recipe\";\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        ...restProps\r\n    }: CommandPrimitive.SeparatorProps = $props();\r\n</script>\r\n<CommandPrimitive.Separator\r\n        bind:ref\r\n        data-slot=\"command-separator\"\r\n        class={commandRecipe().separator({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/components/command-shortcut.svelte",
+      "target": "components/command-shortcut.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import type {WithElementRef} from \"$lib/utils\";\r\n    import type {HTMLAttributes} from \"svelte/elements\";\r\n    import {commandRecipe} from \"../Command.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        children,\r\n        ...restProps\r\n    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();\r\n</script>\r\n<span\r\n        bind:this={ref}\r\n        data-slot=\"command-shortcut\"\r\n        class={commandRecipe().shortcut({class: className})}\r\n        {...restProps}\r\n>\r\n  {@render children?.()}\r\n</span>"
+    },
+    {
+      "path": "src/lib/components/command/components/command.svelte",
+      "target": "components/command.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import {Command as CommandPrimitive} from \"bits-ui\";\r\n    import {commandRecipe} from \"../Command.recipe\";\r\n    import \"../command.scss\"\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        value = $bindable(\"\"),\r\n        command = $bindable(),\r\n        class: className,\r\n        selectedIndex,\r\n        ...restProps\r\n    }: CommandPrimitive.RootProps = $props();\r\n\r\n    $effect(() => {\r\n        if (!command || selectedIndex === undefined) return;\r\n        const items = command.getValidItems();\r\n        if (!items?.length) return;\r\n\r\n        setTimeout(() => {\r\n            if (selectedIndex < 0) {\r\n                const selectedItem = items.find((item: HTMLElement) =>\r\n                    item.hasAttribute('data-selected')\r\n                );\r\n\r\n                if (selectedItem) {\r\n                    selectedItem.removeAttribute(\"data-selected\");\r\n\r\n                    // Use AbortController for cleanup\r\n                    const controller = new AbortController();\r\n                    selectedItem.addEventListener(\"pointerenter\", () => {\r\n                        selectedItem.setAttribute(\"data-selected\", \"\");\r\n                    }, {once: true, signal: controller.signal});\r\n\r\n                    // Cleanup on component unmount\r\n                    return () => controller.abort();\r\n                }\r\n            } else if (selectedIndex < items.length) {\r\n                command.updateSelectedToIndex(selectedIndex);\r\n            }\r\n        }, 6)\r\n    });\r\n</script>\r\n<CommandPrimitive.Root\r\n        bind:value\r\n        bind:ref\r\n        bind:this={command}\r\n        data-slot=\"command\"\r\n        class={commandRecipe().root({class: className})}\r\n        {...restProps}\r\n/>"
+    },
+    {
+      "path": "src/lib/components/command/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "import {Command as CommandPrimitive} from \"bits-ui\";\r\nimport Root from \"./components/command.svelte\";\r\nimport Empty from \"./components/command-empty.svelte\";\r\nimport Group from \"./components/command-group.svelte\";\r\nimport Item from \"./components/command-item.svelte\";\r\nimport Input from \"./components/command-input.svelte\";\r\nimport List from \"./components/command-list.svelte\";\r\nimport Separator from \"./components/command-separator.svelte\";\r\nimport Shortcut from \"./components/command-shortcut.svelte\";\r\nimport LinkItem from \"./components/command-link-item.svelte\";\r\n\r\nconst Loading = CommandPrimitive.Loading;\r\nexport {//\r\n    Root as Command,\r\n    Empty as CommandEmpty,\r\n    Group as CommandGroup,\r\n    Item as CommandItem,\r\n    LinkItem as CommandLinkItem,\r\n    Input as CommandInput,\r\n    List as CommandList,\r\n    Separator as CommandSeparator,\r\n    Shortcut as CommandShortcut,\r\n    Loading as CommandLoading,\r\n};\r\n\r\nexport {commandRecipe} from \"./Command.recipe\";\r\nexport type {CommandRecipeProps} from \"./Command.recipe\";"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [
+    "input"
+  ],
+  "sharedModules": {
+    "utils": true,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "Command",
+    "CommandEmpty",
+    "CommandGroup",
+    "CommandItem",
+    "CommandLinkItem",
+    "CommandInput",
+    "CommandList",
+    "CommandSeparator",
+    "CommandShortcut",
+    "CommandLoading",
+    "commandRecipe"
+  ]
+}