tera-system-ui 0.1.76 → 0.2.2

package/registry/tabs.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "tabs",
+  "type": "registry:component",
+  "description": "Tabbed content panels (line + iOS variants).",
+  "recipe": "src/lib/components/tabs/Tabs.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/tabs/components/Tabs.svelte",
+      "target": "components/Tabs.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Tabs as TabsPrimitive} from 'bits-ui';\n    import {type TabsProps, tabsRecipe} from '../Tabs.recipe.js';\n    import {setTabsContext} from '../Tabs.svelte.js';\n\n    let {\n        children,\n        // Default to '' (not undefined) so an uncontrolled <Tabs> (no value /\n        // bind:value) doesn't bind `undefined` into bits-ui's value, which has a\n        // fallback — that combination throws `props_invalid_value` in Svelte 5.\n        value = $bindable(''),\n        class: className,\n        variant = 'line',\n        onchange,\n        activationMode,\n        orientation = 'horizontal',\n        loop,\n        ...props\n    }: TabsProps = $props();\n\n    // Pass getter objects so consumers read the current value reactively\n    setTabsContext({\n        get variant() { return variant; },\n        get orientation() { return orientation; }\n    });\n\n    const r = $derived(tabsRecipe({variant, orientation}));\n</script>\n\n<TabsPrimitive.Root\n    bind:value\n    onValueChange={onchange}\n    {activationMode}\n    {orientation}\n    {loop}\n    class={r.root({class: className})}\n    {...props}\n>\n    {@render children?.()}\n</TabsPrimitive.Root>\n"
+    },
+    {
+      "path": "src/lib/components/tabs/components/TabsContent.svelte",
+      "target": "components/TabsContent.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Tabs as TabsPrimitive} from 'bits-ui';\n    import {tabsRecipe, type TabsContentProps} from '../Tabs.recipe.js';\n\n    let {\n        children,\n        class: className,\n        value,\n        ref = $bindable(null),\n        ...props\n    }: TabsContentProps = $props();\n\n    const r = tabsRecipe();\n</script>\n\n<TabsPrimitive.Content\n    bind:ref\n    {value}\n    class={r.content({class: className})}\n    {...props}\n>\n    {@render children?.()}\n</TabsPrimitive.Content>\n"
+    },
+    {
+      "path": "src/lib/components/tabs/components/TabsItem.svelte",
+      "target": "components/TabsItem.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Tabs as TabsPrimitive} from 'bits-ui';\n    import {tabsRecipe, type TabsItemProps} from '../Tabs.recipe.js';\n    import {getTabsContext} from '../Tabs.svelte.js';\n\n    let {\n        children,\n        class: className,\n        value,\n        ref = $bindable(null),\n        ...props\n    }: TabsItemProps = $props();\n\n    const ctx = getTabsContext();\n    const variant = $derived(ctx.variant);\n    const orientation = $derived(ctx.orientation);\n\n    const r = $derived(tabsRecipe({variant, orientation}));\n</script>\n\n<TabsPrimitive.Trigger\n    bind:ref\n    {value}\n    class={r.trigger({class: className})}\n    {...props}\n>\n    {@render children?.()}\n</TabsPrimitive.Trigger>\n"
+    },
+    {
+      "path": "src/lib/components/tabs/components/TabsList.svelte",
+      "target": "components/TabsList.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Tabs as TabsPrimitive} from 'bits-ui';\n    import {tabsRecipe, type TabsListProps} from '../Tabs.recipe.js';\n    import {getTabsContext} from '../Tabs.svelte.js';\n\n    let {\n        children,\n        class: className,\n        indicatorClass,\n        ref = $bindable(null),\n        ...props\n    }: TabsListProps = $props();\n\n    const ctx = getTabsContext();\n    const variant = $derived(ctx.variant);\n    const orientation = $derived(ctx.orientation);\n    const isVertical = $derived(orientation === 'vertical');\n\n    const r = $derived(tabsRecipe({variant, orientation}));\n\n    let tabsList = $state<HTMLElement | null>(null);\n    let tabIndicator = $state<HTMLElement | null>(null);\n\n    function updateIndicator() {\n        if (!tabsList || !tabIndicator) return;\n        const active = tabsList.querySelector('[data-state=\"active\"]') as HTMLElement | null;\n        if (!active) return;\n        const containerRect = tabsList.getBoundingClientRect();\n        const rect = active.getBoundingClientRect();\n        if (isVertical) {\n            tabIndicator.style.top = `${rect.top - containerRect.top}px`;\n            tabIndicator.style.height = `${rect.height}px`;\n            tabIndicator.style.left = '';\n            tabIndicator.style.width = '';\n        } else {\n            tabIndicator.style.left = `${rect.left - containerRect.left}px`;\n            tabIndicator.style.width = `${rect.width}px`;\n            tabIndicator.style.top = '';\n            tabIndicator.style.height = '';\n        }\n    }\n\n    $effect(() => {\n        if (!tabsList) return;\n\n        // Initial position (rAF lets the browser settle before measuring)\n        requestAnimationFrame(updateIndicator);\n\n        // React to BitsUI's data-state attribute changes on trigger buttons\n        const mo = new MutationObserver(() => requestAnimationFrame(updateIndicator));\n        mo.observe(tabsList, {attributes: true, attributeFilter: ['data-state'], subtree: true});\n\n        // Reposition on container resize (e.g. responsive layout shift)\n        const ro = new ResizeObserver(() => requestAnimationFrame(updateIndicator));\n        ro.observe(tabsList);\n\n        return () => {\n            mo.disconnect();\n            ro.disconnect();\n        };\n    });\n</script>\n\n<TabsPrimitive.List\n        bind:ref={tabsList}\n        class={r.list({class: className})}\n        {...props}\n>\n    {@render children?.()}\n    <div\n            bind:this={tabIndicator}\n            class={r.indicator({class: indicatorClass})}\n    ></div>\n</TabsPrimitive.List>\n"
+    },
+    {
+      "path": "src/lib/components/tabs/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Tabs} from './components/Tabs.svelte'\nexport {default as TabsList} from './components/TabsList.svelte'\nexport {default as TabsItem} from './components/TabsItem.svelte'\nexport {default as TabsContent} from './components/TabsContent.svelte'\n\nexport {tabsRecipe} from './Tabs.recipe'\nexport type {TabsProps, TabsListProps, TabsItemProps, TabsContentProps, TabsRecipeProps, TabsVariant} from './Tabs.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/tabs/Tabs.recipe.ts",
+      "target": "Tabs.recipe.ts",
+      "type": "recipe",
+      "content": "/**\n * Tabs recipe — the canonical styled layer for the base design language.\n *\n * Tabbed content panels built on the BitsUI Tabs primitive (root / list /\n * trigger / content). The tabs are a multi-part component, so the recipe is\n * SLOTTED: each visible part gets a named slot (root, list, trigger, content,\n * indicator) that an app can target independently when extending with\n * `tv({ extend: tabsRecipe, ... })` in typed code.\n *\n * Two visual styles are expressed as a `variant` variant — `line` (underline /\n * accent-bar indicator) and `ios` (segmented control with a sliding pill). The\n * `line` style also adapts to `orientation` (the indicator moves to the right\n * edge when vertical). All of these were previously if/else branches in the\n * markup; no class is lost.\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-tabs-radius) lets a theme/app retune the iOS segmented container's\n * corner radius with no code change; it defaults to the global axis token via\n * an inline fallback. See docs/ARCHITECTURE.md for the worked extend example\n * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).\n */\nimport {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\nexport type TabsVariant = 'line' | 'ios';\n\nexport const tabsRecipe = tv({\n    slots: {\n        root: 'max-h-full gap-2',\n        list: 'relative flex',\n        trigger: 'outline-none focus-visible:shadow-focus',\n        content: 'overflow-auto',\n        indicator: 'absolute pointer-events-none',\n    },\n    variants: {\n        variant: {\n            line: {\n                trigger: 'tab-button font-semibold px-2.5 py-1.5 rounded text-text-secondary hover:text-primary-token-4 hover:bg-surface-hover transition-[color,background-color] ease-ui duration-[var(--tera-duration-fast)] data-[state=active]:text-primary-token-7',\n                indicator: 'rounded-full bg-primary-token-5',\n            },\n            ios: {\n                list: 'bg-neutral-token-3 p-1 rounded-[var(--tera-tabs-radius,var(--tera-radius-lg))]',\n                trigger: 'relative z-10 flex-1 px-4 py-1.5 text-sm font-semibold text-center rounded-full select-none text-text-secondary data-[state=active]:text-text-primary transition-colors ease-ui duration-[var(--tera-duration-fast)]',\n                indicator: 'inset-y-1 rounded-md bg-surface shadow-sm transition-[left,width] duration-[var(--tera-duration-base)] ease-spring',\n            },\n        },\n        orientation: {\n            horizontal: {\n                root: 'grid grid-rows-[auto_1fr]',\n            },\n            vertical: {\n                root: 'grid grid-cols-[auto_1fr]',\n            },\n        },\n    },\n    compoundVariants: [\n        // Default horizontal line style: bottom border + underline indicator\n        {\n            variant: 'line',\n            orientation: 'horizontal',\n            class: {\n                list: 'gap-2 items-end border-b border-border-default',\n                indicator: 'bottom-0 h-0.5 transition-[left,width] duration-[var(--tera-duration-fast)] ease-ui',\n            },\n        },\n        // Vertical line style: right-side accent bar indicator\n        {\n            variant: 'line',\n            orientation: 'vertical',\n            class: {\n                list: 'flex-col gap-1 border-r border-border-default',\n                indicator: 'right-0 w-0.5 transition-[top,height] duration-[var(--tera-duration-fast)] ease-ui',\n            },\n        },\n    ],\n    defaultVariants: {\n        variant: 'line',\n        orientation: 'horizontal',\n    },\n});\n\nexport type TabsRecipeProps = VariantProps<typeof tabsRecipe>;\n\nexport interface TabsProps {\n    children?: Snippet;\n    /** Currently active tab value. Bindable. */\n    value?: string;\n    /** Called when the active tab changes. */\n    onchange?: (newTab: string) => void;\n    /** Additional CSS classes for the root element. */\n    class?: string;\n    /** Visual style of the tab list. */\n    variant?: TabsVariant;\n    /**\n     * How tabs activate on keyboard focus.\n     * - 'automatic': tab content switches immediately when a tab receives focus.\n     * - 'manual': the user must press Enter or Space to activate a focused tab.\n     */\n    activationMode?: 'automatic' | 'manual';\n    /**\n     * Orientation of the tab list.\n     * 'vertical' renders the list as a column alongside the content.\n     * Only supported with the 'line' variant.\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Whether keyboard navigation wraps from the last tab back to the first. */\n    loop?: boolean;\n    /** Bindable reference to the root element. */\n    ref?: HTMLDivElement | null;\n    [key: string]: unknown;\n}\n\nexport interface TabsListProps {\n    children?: Snippet;\n    /** Additional CSS classes for the tab list container. */\n    class?: string;\n    /** Additional CSS classes for the moving active-tab indicator. */\n    indicatorClass?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface TabsItemProps {\n    children?: Snippet;\n    /** The value this tab represents — must match a TabsContent value. */\n    value: string;\n    /** Prevents the user from activating this tab. */\n    disabled?: boolean;\n    /** Additional CSS classes for the tab trigger. */\n    class?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface TabsContentProps {\n    children?: Snippet;\n    /** The value this content panel corresponds to — must match a TabsItem value. */\n    value: string;\n    /** Additional CSS classes for the content panel. */\n    class?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/tabs/Tabs.svelte.ts",
+      "target": "Tabs.svelte.ts",
+      "type": "ts",
+      "content": "/**\n * @component Tabs - Tabbed content panels with line and iOS segmented variants.\n * Parts: Tabs, TabsList, TabsItem, TabsContent.\n * Built on BitsUI Tabs primitive.\n *\n * This module holds the runtime context only. Styling and the Props interfaces\n * live in ./Tabs.recipe.ts.\n */\nimport {getContext, setContext} from \"svelte\";\nimport type {TabsVariant} from \"./Tabs.recipe.js\";\n\nexport type {TabsVariant} from \"./Tabs.recipe.js\";\n\nexport type TabsContext = {\n    readonly variant: TabsVariant;\n    readonly orientation: 'horizontal' | 'vertical';\n};\n\nconst TABS_CTX = 'tera-tabs-ctx';\n\nexport const setTabsContext = (ctx: TabsContext) => setContext(TABS_CTX, ctx);\nexport const getTabsContext = (): TabsContext => getContext<TabsContext>(TABS_CTX) ?? { variant: 'line', orientation: 'horizontal' };\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Tabs",
+    "TabsList",
+    "TabsItem",
+    "TabsContent",
+    "tabsRecipe"
+  ]
+}

package/registry/text-area.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "text-area",
+  "type": "registry:component",
+  "description": "Multi-line text input with auto-resize.",
+  "recipe": "src/lib/components/text-area/TextArea.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/text-area/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as TextArea} from './TextArea.svelte'\nexport {textAreaRecipe} from './TextArea.recipe'\nexport type {TextAreaProps, AutoSizeConfig, TextAreaRecipeProps} from './TextArea.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/text-area/TextArea.recipe.ts",
+      "target": "TextArea.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLTextareaAttributes} from \"svelte/elements\";\n\n/**\n * TextArea recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component, so it slots: `root` (positioning wrapper), `field`\n * (the textarea itself, which carries every variant/state), and `clear` (the\n * optional clear-button affordance). An app owns its look by extending this\n * recipe with `tv({ extend: textAreaRecipe, ... })` in typed code — base\n * sizing and 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 var below\n * (--tera-textarea-radius) lets a theme/app retune the corner radius with no\n * code change; it defaults to a global axis token in tera-ui-base.css.\n */\nexport const textAreaRecipe = tv({\n    slots: {\n        root: 'relative w-full',\n        field: 'w-full inline-flex items-start rounded-[var(--tera-textarea-radius,var(--tera-radius-base))] outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-[var(--tera-duration-fast)]',\n        clear: 'absolute top-2 right-2 text-neutral-token-7 hover:text-neutral-token-10 transition-colors z-10',\n    },\n    variants: {\n        variant: {\n            outlined: {\n                field: 'border border-border-default bg-surface hover:border-border-strong focus:border-interactive focus:shadow-focus',\n            },\n            filled: {\n                field: 'bg-surface-sunken border border-transparent shadow-[inset_0_1px_2px_rgba(15,23,42,0.05)] hover:bg-surface-hover focus:bg-surface focus:border-interactive focus:shadow-focus',\n            },\n            borderless: {\n                field: 'bg-transparent border-0 hover:bg-surface-raised focus:bg-surface-raised',\n            },\n        },\n        disabled: {\n            true: {\n                field: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default resize-none',\n            },\n            false: {\n                field: 'cursor-text',\n            },\n        },\n        size: {\n            sm: {field: 'px-[var(--tera-control-px-md)] py-1 text-sm min-h-[60px]'},\n            md: {field: 'px-[var(--tera-control-px-md)] py-1.5 text-sm min-h-[80px]'},\n            lg: {field: 'px-[var(--tera-control-px-md)] py-2 text-base min-h-[100px]'},\n        },\n        allowClear: {\n            true: {field: 'pr-9'},\n        },\n        status: {\n            error: {\n                field: 'border-error-default hover:border-error-hover focus:border-error-default focus:shadow-focus-error',\n            },\n            warning: {\n                field: 'border-warning-default hover:border-warning-hover focus:border-warning-default focus:shadow-focus-warning',\n            },\n        },\n    },\n    compoundVariants: [\n        {\n            variant: 'outlined',\n            disabled: true,\n            class: {field: 'hover:border-border-default'},\n        },\n        {\n            variant: 'filled',\n            disabled: true,\n            class: {field: 'hover:bg-surface-sunken'},\n        },\n        {\n            variant: 'borderless',\n            disabled: true,\n            class: {field: 'hover:bg-transparent'},\n        },\n    ],\n    defaultVariants: {\n        variant: 'outlined',\n        size: 'md',\n    },\n});\n\nexport type TextAreaRecipeProps = VariantProps<typeof textAreaRecipe>;\n\nexport type AutoSizeConfig = boolean | {\n    minRows?: number,\n    maxRows?: number,\n}\n\nexport interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'disabled' | 'rows' | 'prefix'>, TextAreaRecipeProps {\n    children?: Snippet;\n    class?: string;\n    value?: string;\n    ref?: HTMLTextAreaElement | null;\n    autoSize?: AutoSizeConfig;\n    rows?: number;\n    allowClear?: boolean;\n    showCount?: boolean;\n    maxLength?: number;\n    /** Replace the default clear icon (IconX) with custom markup (structural seam). */\n    clearIcon?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/text-area/TextArea.svelte",
+      "target": "TextArea.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type AutoSizeConfig, type TextAreaProps, textAreaRecipe} from \"./TextArea.recipe\";\n    import {IconX} from \"$lib/internal/icons\";\n    import type {Attachment} from \"svelte/attachments\";\n\n    let {\n        children,\n        class: className,\n        value = $bindable(),\n        ref = $bindable(),\n        size = 'md',\n        disabled,\n        variant = 'outlined',\n        autoSize,\n        rows,\n        allowClear,\n        showCount,\n        maxLength,\n        status,\n        clearIcon,\n        ...props\n    }: TextAreaProps = $props();\n\n    let textLength = $derived(value?.length || 0);\n\n    const r = $derived(textAreaRecipe({ variant, disabled, size, allowClear, status }));\n\n    function autoSizeAttachment(autoSize?: AutoSizeConfig): Attachment<HTMLTextAreaElement> {\n        return (node) => {\n            if (!autoSize) {\n                return;\n            }\n            let minRows: number | null = null;\n            let maxRows: number | null = null;\n            if (autoSize === true) {\n                minRows = 1;\n            } else {\n                minRows = Math.max(autoSize.minRows || 0, 1);\n                maxRows = autoSize.maxRows || null;\n            }\n\n            const updateSize = () => {\n                node.style.height = 'auto';\n                const computedStyle = window.getComputedStyle(node);\n                const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n                const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n                const offset = borderTopWidth + borderBottomWidth;\n                const scrollHeight = node.scrollHeight;\n\n                const lineHeight = parseFloat(computedStyle.lineHeight);\n                const minHeight = minRows! * lineHeight + offset;\n                const maxHeight = maxRows ? maxRows * lineHeight : null;\n\n                node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;\n            };\n\n            // Re-run whenever `value` changes (read it to register the dependency).\n            value;\n            updateSize();\n        };\n    }\n\n    function clearText() {\n        value = '';\n        ref?.focus();\n    }\n</script>\n\n<div class={r.root()}>\n    <textarea\n            bind:this={ref}\n            {@attach autoSizeAttachment(autoSize)}\n            style={autoSize ? \"resize: none; transition-property: border-color, box-shadow, background-color;\" : ''}\n            class={r.field({ class: className })}\n            {disabled}\n            rows={autoSize ? 1 : rows}\n            maxlength={maxLength}\n            {...props}\n            bind:value\n    ></textarea>\n\n    {#if allowClear && value && !disabled}\n        <button\n                type=\"button\"\n                onclick={clearText}\n                class={r.clear()}\n                tabindex=\"-1\"\n        >\n            {#if clearIcon}\n                {@render clearIcon()}\n            {:else}\n                <IconX class=\"size-3.5\"/>\n            {/if}\n        </button>\n    {/if}\n\n    {#if showCount}\n        <div class=\"absolute bottom-1 right-2 text-xs text-neutral-token-7 pointer-events-none\">\n            {textLength}{#if maxLength}/{maxLength}{/if}\n        </div>\n    {/if}\n</div>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "TextArea",
+    "textAreaRecipe"
+  ]
+}

package/registry/toast.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "toast",
+  "type": "registry:component",
+  "description": "",
+  "recipe": null,
+  "files": [
+    {
+      "path": "src/lib/components/toast/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as ToastContainer} from './ToastContainer.svelte'\nexport {toast} from './toast.svelte.js'\nexport type {ToastItem, ToastVariant} from './toast.svelte.js'\n"
+    },
+    {
+      "path": "src/lib/components/toast/toast.svelte.ts",
+      "target": "toast.svelte.ts",
+      "type": "ts",
+      "content": "export type ToastVariant = 'success' | 'error' | 'info' | 'warning';\n\nexport interface ToastItem {\n    id: string;\n    variant: ToastVariant;\n    message: string;\n    description?: string;\n    duration?: number;\n    action?: { label: string; onclick: () => void };\n}\n\nlet items: ToastItem[] = $state([]);\n\nfunction add(variant: ToastVariant, message: string, opts: Omit<ToastItem, 'id' | 'variant' | 'message'> = {}) {\n    const id = crypto.randomUUID();\n    const item: ToastItem = { id, variant, message, duration: 4000, ...opts };\n    items = [...items.slice(-2), item];\n    setTimeout(() => remove(id), item.duration);\n}\n\nfunction remove(id: string) {\n    items = items.filter(t => t.id !== id);\n}\n\nexport const toast = {\n    get items() { return items; },\n    success: (msg: string, opts?: Omit<ToastItem, 'id' | 'variant' | 'message'>) => add('success', msg, opts),\n    error:   (msg: string, opts?: Omit<ToastItem, 'id' | 'variant' | 'message'>) => add('error',   msg, opts),\n    info:    (msg: string, opts?: Omit<ToastItem, 'id' | 'variant' | 'message'>) => add('info',    msg, opts),\n    warning: (msg: string, opts?: Omit<ToastItem, 'id' | 'variant' | 'message'>) => add('warning', msg, opts),\n    remove,\n};\n"
+    },
+    {
+      "path": "src/lib/components/toast/ToastContainer.svelte",
+      "target": "ToastContainer.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {toast, type ToastVariant} from './toast.svelte.js';\n\n    // Status carried by a leading icon-chip (matches the redesigned Alert), not a\n    // side-stripe bar. Semantic -default/-text tokens so tones stay dark-safe.\n    const chipColor: Record<ToastVariant, string> = {\n        success: 'bg-success-default/15 text-success-text',\n        error:   'bg-error-default/15 text-error-text',\n        info:    'bg-information-default/15 text-information-text',\n        warning: 'bg-warning-default/15 text-warning-text',\n    };\n\n    const iconSymbol: Record<ToastVariant, string> = {\n        success: '✓', error: '✕', info: 'ℹ', warning: '⚠',\n    };\n</script>\n\n<div\n    aria-live=\"polite\"\n    aria-label=\"Notifications\"\n    class=\"fixed bottom-4 right-4 z-[60] flex flex-col gap-2 max-sm:right-1/2 max-sm:translate-x-1/2\"\n>\n    {#each toast.items as item (item.id)}\n        <div\n            class=\"flex items-start gap-3 min-w-[280px] max-w-sm p-3 bg-surface-raised rounded-[var(--tera-toast-radius,var(--border-radius-container))] shadow-lg border border-border-default animate-in slide-in-from-bottom-4 fade-in duration-[var(--tera-duration-slow)] ease-spring\"\n        >\n            <span class=\"shrink-0 grid place-items-center size-5 rounded-full text-[11px] font-bold leading-none mt-px {chipColor[item.variant]}\" aria-hidden=\"true\">{iconSymbol[item.variant]}</span>\n            <div class=\"flex-1 min-w-0\">\n                <p class=\"text-sm font-semibold text-text-primary\">{item.message}</p>\n                {#if item.description}\n                    <p class=\"text-sm text-text-secondary mt-0.5\">{item.description}</p>\n                {/if}\n                {#if item.action}\n                    <button\n                        class=\"mt-1.5 text-xs font-semibold text-interactive hover:text-interactive-hover hover:underline transition-colors duration-[var(--tera-duration-fast)] ease-ui\"\n                        onclick={item.action.onclick}\n                    >{item.action.label}</button>\n                {/if}\n            </div>\n            <button\n                type=\"button\"\n                class=\"shrink-0 -m-1.5 p-2.5 rounded text-text-tertiary hover:text-text-primary hover:bg-surface-hover focus-visible:shadow-focus transition-colors duration-[var(--tera-duration-fast)] ease-ui\"\n                onclick={() => toast.remove(item.id)}\n                aria-label=\"Close\"\n            >\n                <svg class=\"size-3.5\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                    <path d=\"M2 2l10 10M12 2l-10 10\"/>\n                </svg>\n            </button>\n        </div>\n    {/each}\n</div>\n"
+    }
+  ],
+  "dependencies": [],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "ToastContainer",
+    "toast"
+  ]
+}

package/registry/tooltip.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "tooltip",
+  "type": "registry:component",
+  "description": "Floating tooltip shown on hover/focus.",
+  "recipe": "src/lib/components/tooltip/Tooltip.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/tooltip/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Tooltip} from './Tooltip.svelte'\nexport {tooltipRecipe} from './Tooltip.recipe'\nexport type {TooltipProps, TooltipRecipeProps} from './Tooltip.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/tooltip/Tooltip.recipe.ts",
+      "target": "Tooltip.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Tooltip recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Tooltip): the recipe is slotted by role\n * — trigger (the inline wrapper around the trigger element), content (the\n * floating panel) and arrow (the pointer). An app restyles any part\n * independently by extending with `tv({ extend: tooltipRecipe, ... })` in typed\n * code; base layout, animation and color states are inherited.\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-tooltip-radius) lets a theme/app retune corner radius with no code\n * change; it defaults to the global axis token 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 tooltipRecipe = tv({\n    slots: {\n        trigger: 'inline-flex',\n        content: `z-50 max-w-[220px] px-2.5 py-1.5 text-xs leading-snug font-mono font-medium tracking-tight rounded-[var(--tera-tooltip-radius,var(--tera-radius-sm))]\n                    bg-neutral-token-13 text-neutral-token-1 shadow-lg\n                    animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)] ease-ui\n                    data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,\n        arrow: 'text-neutral-token-13',\n    },\n});\n\nexport type TooltipRecipeProps = VariantProps<typeof tooltipRecipe>;\n\n/**\n * @component Tooltip - Floating label shown on hover or keyboard focus.\n * Built on BitsUI Tooltip primitive with portal rendering.\n */\nexport interface TooltipProps {\n    /** Tooltip content — a plain string or a Svelte snippet for rich markup. */\n    content: string | Snippet;\n    /** Which side of the trigger the tooltip appears on. */\n    side?: 'top' | 'bottom' | 'left' | 'right';\n    /** Alignment of the tooltip along the chosen side. */\n    align?: 'start' | 'center' | 'end';\n    /** Distance in pixels between the trigger element and the tooltip panel. */\n    sideOffset?: number;\n    /** Delay in milliseconds before the tooltip appears after hover/focus. */\n    delay?: number;\n    /** Prevents the tooltip from ever opening. */\n    disabled?: boolean;\n    /** The element that triggers the tooltip on hover/focus. */\n    children?: Snippet;\n    /** Additional CSS classes for the trigger wrapper span. */\n    class?: string;\n    /** Replace the default pointer arrow with custom markup (structural seam). */\n    arrow?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/tooltip/Tooltip.svelte",
+      "target": "Tooltip.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Tooltip as TooltipPrimitive} from 'bits-ui';\n    import {tooltipRecipe, type TooltipProps} from './Tooltip.recipe.js';\n\n    let {\n        content,\n        side = 'top',\n        align = 'center',\n        sideOffset = 6,\n        delay = 500,\n        disabled,\n        children,\n        arrow,\n        class: className = '',\n    }: TooltipProps = $props();\n\n    const r = tooltipRecipe();\n</script>\n\n<TooltipPrimitive.Provider delayDuration={delay}>\n    <TooltipPrimitive.Root {disabled}>\n        <TooltipPrimitive.Trigger class={r.trigger({class: className})}>\n            {@render children?.()}\n        </TooltipPrimitive.Trigger>\n\n        <TooltipPrimitive.Portal>\n            <TooltipPrimitive.Content\n                {side}\n                {align}\n                {sideOffset}\n                class={r.content()}\n            >\n                {#if typeof content === 'string'}\n                    {content}\n                {:else}\n                    {@render content()}\n                {/if}\n                {#if arrow}\n                    {@render arrow()}\n                {:else}\n                    <TooltipPrimitive.Arrow class={r.arrow()} />\n                {/if}\n            </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n</TooltipPrimitive.Provider>\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Tooltip",
+    "tooltipRecipe"
+  ]
+}

package/scripts/generate-ts-index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import fs from "fs";
 
 import path from "path";
@@ -109,28 +109,11 @@ function findFilesByPattern(folderPath, namePattern) {
 const baseLib = './src/lib'
 const GLOBAL_INDEX_PATH = baseLib + "/index.ts"
 const COMPONENTS_PATH = baseLib + "/components"
-const ICON_COMPONENTS_PATH = baseLib + "/components/icons"
 
-const iconComponentsFileList = findFilesByPattern(ICON_COMPONENTS_PATH, /^Icon\w*\.svelte$/);
-
-// generate icon index
-const importSvelteComponentTemplate = `export {default as Component} from './Component.svelte'`;
 const importComponentTemplate = `export {Component} from 'path'`;
 const importTypeTemplate = `export type {Types} from 'path'`;
 
 
-(() => {
-    let content = ''
-    iconComponentsFileList.forEach(file => {
-        let componentName = file.replace('.svelte', '')
-        content += importSvelteComponentTemplate.replaceAll('Component', componentName);
-        content += `\n`
-    })
-
-    fs.writeFileSync(ICON_COMPONENTS_PATH + '/index.ts', content, 'utf8');
-})();
-
-
 (() => {
     const indexFileList = findIndexFiles(COMPONENTS_PATH);
     let componentContent = ''

package/scripts/tera-ui.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+/**
+ * tera-ui — the consumer generator (rung 3, "own the styled layer").
+ * See docs/ARCHITECTURE.md → "Generator contract".
+ *
+ *   tera-ui list                 List available components in the registry
+ *   tera-ui info <name>          Show a component's manifest summary
+ *   tera-ui add <name...>        Copy component(s) + their tera deps into your app
+ *   tera-ui diff [name]          Show drift between your owned copies and the registry
+ *
+ * Run inside a CONSUMER app. Configure once via ./components.json:
+ *   {
+ *     "componentsDir": "src/lib/ui",   // where owned components are written
+ *     "alias": "$lib/ui",              // import alias that maps to componentsDir
+ *     "packageName": "tera-system-ui"  // the installed package name (for shared imports)
+ *   }
+ *
+ * Files are copied with imports rewritten so the consumer owns the styling/markup
+ * while still importing the shared token contract, utils, icons and headless bits
+ * from the installed package. Edit them freely; `diff` surfaces upstream changes.
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const REGISTRY = path.join(HERE, '..', 'registry');
+const CWD = process.cwd();
+
+const C = { dim: s => `\x1b[2m${s}\x1b[0m`, b: s => `\x1b[1m${s}\x1b[0m`, g: s => `\x1b[32m${s}\x1b[0m`, y: s => `\x1b[33m${s}\x1b[0m`, r: s => `\x1b[31m${s}\x1b[0m` };
+
+function die(msg) { console.error(C.r('✖ ') + msg); process.exit(1); }
+function readJSON(fp) { try { return JSON.parse(fs.readFileSync(fp, 'utf8')); } catch { return null; } }
+
+function loadRegistryIndex() {
+    const idx = readJSON(path.join(REGISTRY, 'index.json'));
+    if (!idx) die(`registry not found at ${REGISTRY}. Run \`npm run generate-registry\` in the library, or reinstall the package.`);
+    return idx;
+}
+function loadManifest(name) {
+    const m = readJSON(path.join(REGISTRY, `${name}.json`));
+    if (!m) die(`unknown component "${name}". Run \`tera-ui list\`.`);
+    return m;
+}
+
+function loadConfig() {
+    const cfg = readJSON(path.join(CWD, 'components.json')) || {};
+    return {
+        componentsDir: cfg.componentsDir || 'src/lib/ui',
+        alias: (cfg.alias || '$lib/ui').replace(/\/$/, ''),
+        packageName: cfg.packageName || 'tera-system-ui',
+    };
+}
+
+/** Rewrite a copied file's imports so they resolve in the consumer. */
+function rewriteImports(content, { added, current, cfg }) {
+    let out = content;
+    // 1. Self-references within this component's dir → relative (sub-components are copied alongside).
+    out = out.replace(new RegExp(`(['"])\\$lib/components/${current}/([^'"]+)\\1`, 'g'),
+        (_, q, rest) => `${q}./${rest}${q}`);
+    // 2. Shared library modules → import from the installed package (not copied).
+    out = out.replace(/(['"])\$lib\/utils(\/[^'"]*)?\1/g, (_, q) => `${q}${cfg.packageName}/utils${q}`);
+    out = out.replace(/(['"])\$lib\/hooks(\/[^'"]*)?\1/g, (_, q) => `${q}${cfg.packageName}/hooks${q}`);
+    out = out.replace(/(['"])\$lib\/(actions|internal|tokens)(\/[^'"]*)?\1/g, (_, q, seg, rest) => `${q}${cfg.packageName}/${seg}${rest || ''}${q}`);
+    // 3. Other tera components → owned copy if also added, else the package version.
+    out = out.replace(/(['"])\$lib\/components\/([a-z][a-z0-9-]*)(\/[^'"]*)?\1/g, (_, q, dep) => {
+        if (added.has(dep)) return `${q}${cfg.alias}/${dep}${q}`;
+        return `${q}${cfg.packageName}/${dep}${q}`;
+    });
+    // 4. Bare `$lib` (package root) → the package name.
+    out = out.replace(/(['"])\$lib\1/g, (_, q) => `${q}${cfg.packageName}${q}`);
+    return out;
+}
+
+/** Resolve the full set: requested components + transitive tera deps. */
+function resolveSet(names) {
+    const set = new Set();
+    const visit = (n) => {
+        if (set.has(n)) return;
+        const m = readJSON(path.join(REGISTRY, `${n}.json`));
+        if (!m) { console.warn(C.y(`  ! skipping unknown dependency "${n}"`)); return; }
+        set.add(n);
+        for (const dep of m.registryDependencies || []) {
+            visit(dep);
+        }
+    };
+    names.forEach(visit);
+    return set;
+}
+
+function cmdList() {
+    const idx = loadRegistryIndex();
+    console.log(C.b(`\n  ${idx.components.length} components available:\n`));
+    for (const c of idx.components) {
+        const deps = c.registryDependencies?.length ? C.dim(`  ← ${c.registryDependencies.join(', ')}`) : '';
+        console.log(`  ${C.g(c.name.padEnd(22))} ${c.description || ''}${deps}`);
+    }
+    console.log(C.dim(`\n  Add with:  tera-ui add <name...>\n`));
+}
+
+function cmdInfo(name) {
+    const m = loadManifest(name);
+    console.log(C.b(`\n  ${m.name}`) + (m.description ? ` — ${m.description}` : ''));
+    console.log(`  recipe:        ${m.recipe ? C.g(path.basename(m.recipe)) : C.dim('none')}`);
+    console.log(`  files:         ${m.files.map(f => f.target).join(', ')}`);
+    console.log(`  npm deps:      ${m.dependencies.length ? m.dependencies.join(', ') : C.dim('none')}`);
+    console.log(`  tera deps:     ${m.registryDependencies.length ? m.registryDependencies.join(', ') : C.dim('none')}`);
+    console.log(`  shared:        ${Object.entries(m.sharedModules).filter(([, v]) => v).map(([k]) => k).join(', ') || C.dim('none')}`);
+    console.log(`  exports:       ${m.exports.join(', ')}\n`);
+}
+
+function cmdAdd(names) {
+    if (!names.length) die('usage: tera-ui add <name...>');
+    const cfg = loadConfig();
+    const added = resolveSet(names);
+    const npmDeps = new Set(['svelte']);
+    let written = 0;
+
+    for (const name of added) {
+        const m = loadManifest(name);
+        (m.dependencies || []).forEach(d => npmDeps.add(d));
+        const destDir = path.join(CWD, cfg.componentsDir, name);
+        for (const file of m.files) {
+            const dest = path.join(destDir, file.target);
+            fs.mkdirSync(path.dirname(dest), { recursive: true });
+            const content = rewriteImports(file.content, { added, current: name, cfg });
+            fs.writeFileSync(dest, content, 'utf8');
+            written++;
+        }
+        const viaDep = names.includes(name) ? '' : C.dim('  (dependency)');
+        console.log(`  ${C.g('+')} ${cfg.componentsDir}/${name}/${viaDep}`);
+    }
+
+    console.log(C.b(`\n  ${written} files written across ${added.size} component(s).`));
+    console.log(`  Install peer/npm deps:\n    ${C.y('npm i ' + [...npmDeps].join(' '))}`);
+    console.log(C.dim(`  Import the base token CSS once if you haven't:  import '${cfg.packageName}/themes/tera-ui-base';\n`));
+}
+
+function cmdDiff(name) {
+    const cfg = loadConfig();
+    const idx = loadRegistryIndex();
+    const names = name ? [name] : idx.components.map(c => c.name);
+    let drift = 0;
+    for (const n of names) {
+        const m = readJSON(path.join(REGISTRY, `${n}.json`));
+        if (!m) continue;
+        for (const file of m.files) {
+            const owned = path.join(CWD, cfg.componentsDir, n, file.target);
+            if (!fs.existsSync(owned)) continue; // not pulled
+            const upstream = rewriteImports(file.content, { added: new Set([n]), current: n, cfg });
+            const local = fs.readFileSync(owned, 'utf8');
+            if (local !== upstream) {
+                drift++;
+                console.log(`  ${C.y('~')} ${cfg.componentsDir}/${n}/${file.target} ${C.dim('differs from registry')}`);
+            }
+        }
+    }
+    if (!drift) console.log(C.g('\n  ✓ no drift — owned components match the registry.\n'));
+    else console.log(C.dim(`\n  ${drift} file(s) differ. Re-pull with \`tera-ui add\` to overwrite, or keep your edits.\n`));
+}
+
+const [cmd, ...args] = process.argv.slice(2);
+switch (cmd) {
+    case 'list': cmdList(); break;
+    case 'info': cmdInfo(args[0] || die('usage: tera-ui info <name>')); break;
+    case 'add': cmdAdd(args); break;
+    case 'diff': cmdDiff(args[0]); break;
+    default:
+        console.log(`tera-ui — own the styled layer\n\n  list            list available components\n  info <name>     show a component manifest\n  add <name...>   copy components into your app (per components.json)\n  diff [name]     show drift vs the registry\n`);
+        if (cmd && cmd !== 'help' && cmd !== '--help') process.exit(1);
+}

package/dist/components/accordion/Accordion.d.ts

@@ -1,52 +0,0 @@
-/**
- * @component Accordion - Collapsible content panels with single or multi-open support.
- * Built on BitsUI Accordion primitive with full keyboard navigation.
- */
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type AccordionVariants = VariantProps<typeof styles>;
-export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionVariants {
-    children?: Snippet;
-    /** Additional CSS classes for the root element. */
-    class?: string;
-    /** Whether only one item can be open at a time ('single') or many ('multiple'). */
-    type: 'multiple' | 'single';
-    /** The currently open item value(s). Bindable. */
-    value: string | string[];
-    /** Called when the open item(s) change. */
-    onchange?: (value: string | string[]) => void;
-    /** Use controlled mode — manage value externally and pass it back via onchange. */
-    controlledValue?: boolean;
-    /** Whether the entire accordion is disabled. */
-    disabled?: boolean;
-    /** Whether keyboard navigation wraps around at the first/last item. */
-    loop?: boolean;
-    /** Layout orientation — affects arrow-key navigation direction. */
-    orientation?: 'horizontal' | 'vertical';
-    /** Bindable reference to the root element. */
-    ref?: HTMLDivElement | null;
-}
-export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
-    /** Unique identifier for this item — matched against the root `value`. */
-    value: string;
-    /** Prevents the user from interacting with this specific item. */
-    disabled?: boolean;
-    ref?: HTMLDivElement | null;
-    children?: Snippet;
-}
-export interface AccordionTriggerProps extends HTMLButtonAttributes {
-    children?: Snippet;
-    ref?: HTMLButtonElement | null;
-}
-export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
-    children?: Snippet;
-    /**
-     * Keep the content mounted in the DOM even when the item is collapsed.
-     * Useful for Svelte transitions or preserving internal component state.
-     */
-    forceMount?: boolean;
-    ref?: HTMLDivElement | null;
-}
-export {};

package/dist/components/accordion/Accordion.js

@@ -1,11 +0,0 @@
-/**
- * @component Accordion - Collapsible content panels with single or multi-open support.
- * Built on BitsUI Accordion primitive with full keyboard navigation.
- */
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});

package/dist/components/ai/ChatBubble.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">let { role, content, avatar, timestamp, status = 'sent', class: className = '', } = $props();
-const isUser = $derived(role === 'user');
-export {};
-</script>
-
-<div
-    class="flex gap-2 animate-in slide-in-from-bottom-2 fade-in duration-300 ease-spring {isUser ? 'flex-row-reverse' : 'flex-row'} {className}"
->
-    {#if avatar}
-        <div class="shrink-0 size-8">{@render avatar()}</div>
-    {/if}
-
-    <div class="flex flex-col gap-1 max-w-[75%] {isUser ? 'items-end' : 'items-start'}">
-        <div
-            class="px-4 py-2.5 text-sm leading-relaxed {isUser
-                ? 'bg-interactive-subtle text-text-primary rounded-2xl rounded-br-sm'
-                : 'bg-surface-raised text-text-primary rounded-2xl rounded-bl-sm border border-border-default'}"
-        >
-            {#if typeof content === 'string'}
-                {content}
-            {:else}
-                {@render content()}
-            {/if}
-        </div>
-
-        <div class="flex items-center gap-1.5 text-[10px] text-text-tertiary">
-            {#if timestamp}<span>{timestamp}</span>{/if}
-            {#if isUser && status === 'sending'}
-                <span class="italic">Sending…</span>
-            {:else if isUser && status === 'error'}
-                <span class="text-error-500">Failed to send</span>
-            {/if}
-        </div>
-    </div>
-</div>

package/dist/components/ai/ChatBubble.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    role: 'user' | 'assistant';
-    content: string | Snippet;
-    avatar?: Snippet;
-    timestamp?: string;
-    status?: 'sending' | 'sent' | 'error';
-    class?: string;
-};
-declare const ChatBubble: import("svelte").Component<$$ComponentProps, {}, "">;
-type ChatBubble = ReturnType<typeof ChatBubble>;
-export default ChatBubble;

package/dist/components/ai/PromptInput.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">import ThinkingLoader from './ThinkingLoader.svelte';
-import SuggestionChips from './SuggestionChips.svelte';
-let { value = $bindable(''), onsubmit, placeholder = 'Ask me anything…', maxLength, loading, disabled, suggestions = [], class: className = '', } = $props();
-function handleKeydown(e) {
-    if (e.key === 'Enter' && !e.shiftKey && !loading && value.trim()) {
-        e.preventDefault();
-        submit();
-    }
-}
-function submit() {
-    if (!value.trim() || loading)
-        return;
-    onsubmit?.(value);
-}
-function handleSuggestion(s) {
-    value = Array.isArray(s) ? s[0] : s;
-}
-</script>
-
-<div class="flex flex-col gap-2 {className}">
-    {#if suggestions.length > 0}
-        <SuggestionChips {suggestions} onSelect={handleSuggestion} />
-    {/if}
-
-    <div
-        class="relative flex items-end gap-2 border rounded bg-surface transition-[border-color,box-shadow] ease-ui duration-150
-            {loading ? 'border-interactive shadow-glow' : 'border-border-default focus-within:border-interactive focus-within:shadow-focus'}"
-    >
-        <textarea
-            class="flex-1 resize-none bg-transparent outline-none px-3 py-2.5 text-sm text-text-primary placeholder:text-text-tertiary min-h-[42px] max-h-40"
-            {placeholder}
-            maxlength={maxLength}
-            {disabled}
-            bind:value
-            onkeydown={handleKeydown}
-            rows={1}
-        ></textarea>
-
-        <div class="shrink-0 pb-2 pr-2">
-            {#if loading}
-                <ThinkingLoader size="sm" />
-            {:else}
-                <button
-                    type="button"
-                    class="size-7 rounded-full flex items-center justify-center transition-colors ease-ui duration-150
-                        {value.trim() ? 'bg-interactive text-interactive-on' : 'bg-surface-hover text-text-tertiary cursor-not-allowed'}"
-                    onclick={submit}
-                    disabled={!value.trim() || disabled}
-                    aria-label="Send"
-                >
-                    <svg class="size-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M7 12V2M2 7l5-5 5 5"/>
-                    </svg>
-                </button>
-            {/if}
-        </div>
-    </div>
-</div>