sv5ui 1.7.0 → 1.8.0

package/dist/Editor/editor.variants.js

@@ -0,0 +1,150 @@
+import { tv } from 'tailwind-variants';
+export const editorVariants = tv({
+    slots: {
+        root: [
+            'relative w-full rounded-lg border border-outline-variant bg-surface',
+            'transition-shadow',
+            'focus-within:ring-2 focus-within:ring-offset-0',
+            'data-[disabled=true]:opacity-60 data-[disabled=true]:pointer-events-none'
+        ],
+        toolbar: [
+            'flex flex-wrap items-center gap-0.5',
+            'border-b border-outline-variant',
+            'bg-surface-container-low',
+            'rounded-t-lg p-1.5'
+        ],
+        toolbarGroup: 'flex items-center gap-0.5',
+        toolbarButton: [
+            'inline-flex items-center justify-center rounded text-on-surface-variant',
+            'hover:bg-surface-container-high hover:text-on-surface',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+            'data-[active=true]:bg-primary-container data-[active=true]:text-on-primary-container',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
+            'transition-colors'
+        ],
+        toolbarSeparator: 'mx-1 h-5 w-px shrink-0 bg-outline-variant',
+        content: [
+            'text-on-surface',
+            // ----- Inner ProseMirror element (the actual contenteditable) -----
+            '[&_.ProseMirror]:outline-none',
+            '[&_.ProseMirror]:focus:outline-none',
+            '[&_.ProseMirror]:focus-visible:outline-none',
+            '[&_.ProseMirror]:p-4',
+            '[&_.ProseMirror]:min-h-32',
+            '[&_.ProseMirror]:whitespace-pre-wrap',
+            '[&_.ProseMirror]:break-words',
+            // ----- Placeholder (when editor is empty) -----
+            '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',
+            '[&_.is-editor-empty]:before:text-on-surface-variant/60',
+            '[&_.is-editor-empty]:before:pointer-events-none',
+            '[&_.is-editor-empty]:before:float-left',
+            '[&_.is-editor-empty]:before:h-0',
+            // ----- Content typography (lightweight in-house prose) -----
+            '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
+            '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-3',
+            '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-3',
+            '[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-2',
+            '[&_ul]:list-disc [&_ul]:ps-6 [&_ul]:my-2',
+            '[&_ol]:list-decimal [&_ol]:ps-6 [&_ol]:my-2',
+            '[&_li>p]:my-0',
+            '[&_blockquote]:border-l-4 [&_blockquote]:border-outline-variant [&_blockquote]:ps-3 [&_blockquote]:italic [&_blockquote]:text-on-surface-variant [&_blockquote]:my-3',
+            '[&_code]:rounded [&_code]:bg-surface-container-highest [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono',
+            '[&_pre]:rounded-md [&_pre]:bg-surface-container-highest [&_pre]:p-3 [&_pre]:my-3 [&_pre]:overflow-x-auto',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+            '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2',
+            '[&_a:hover]:text-primary/80',
+            '[&_hr]:border-outline-variant [&_hr]:my-4',
+            '[&_strong]:font-semibold',
+            '[&_em]:italic',
+            // ----- Image -----
+            '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
+            // ----- YouTube embed (responsive 16:9) -----
+            '[&_iframe[src*="youtube"]]:aspect-video [&_iframe[src*="youtube"]]:w-full [&_iframe[src*="youtube"]]:rounded-md [&_iframe[src*="youtube"]]:my-3 [&_iframe[src*="youtube"]]:border-0',
+            // ----- Mention chip -----
+            '[&_.sv5ui-editor-mention]:inline-flex [&_.sv5ui-editor-mention]:items-center',
+            '[&_.sv5ui-editor-mention]:rounded [&_.sv5ui-editor-mention]:bg-primary-container/60',
+            '[&_.sv5ui-editor-mention]:text-on-primary-container',
+            '[&_.sv5ui-editor-mention]:px-1.5 [&_.sv5ui-editor-mention]:py-0.5',
+            '[&_.sv5ui-editor-mention]:text-sm [&_.sv5ui-editor-mention]:font-medium',
+            // ----- Table -----
+            '[&_.tableWrapper]:my-3 [&_.tableWrapper]:overflow-x-auto',
+            '[&_table]:w-full [&_table]:border-collapse [&_table]:table-fixed',
+            '[&_table]:border [&_table]:border-outline-variant [&_table]:rounded-md',
+            '[&_th]:border [&_th]:border-outline-variant',
+            '[&_th]:bg-surface-container-low [&_th]:px-2 [&_th]:py-1.5',
+            '[&_th]:font-semibold [&_th]:text-start [&_th]:align-top',
+            '[&_th]:relative [&_th]:min-w-16',
+            '[&_td]:border [&_td]:border-outline-variant',
+            '[&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
+            '[&_td]:relative [&_td]:min-w-16',
+            // Tiptap selectedCell highlight + column resize handle
+            '[&_.selectedCell]:bg-primary/10',
+            '[&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px]',
+            '[&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:w-1',
+            '[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none',
+            // ----- Selection styling -----
+            '[&_::selection]:bg-primary/20'
+        ],
+        footer: [
+            'flex items-center justify-between gap-2',
+            'border-t border-outline-variant',
+            'bg-surface-container-low',
+            'px-3 py-1.5 rounded-b-lg',
+            'text-xs text-on-surface-variant'
+        ],
+        countLabel: 'tabular-nums',
+        bubbleMenu: [
+            // ⚠️ Tiptap's BubbleMenu only sets `visibility:hidden` initially,
+            // leaving the element in normal flow (taking up space below the editor)
+            // until the user first selects text. Setting `position:absolute` upfront
+            // keeps it out of flow from mount — extension's Floating UI positioning
+            // then overrides left/top inline on selection.
+            'absolute top-0 left-0 z-50 invisible',
+            'flex items-center gap-0.5 p-1',
+            'rounded-lg border border-outline-variant bg-surface',
+            'shadow-md'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                toolbarButton: 'size-7 *:size-3.5',
+                content: 'text-sm [&_.ProseMirror]:p-3 [&_.ProseMirror]:min-h-24',
+                footer: 'text-[11px]'
+            },
+            md: {
+                toolbarButton: 'size-8 *:size-4',
+                content: 'text-sm',
+                footer: ''
+            },
+            lg: {
+                toolbarButton: 'size-9 *:size-5',
+                content: 'text-base [&_.ProseMirror]:p-5 [&_.ProseMirror]:min-h-40',
+                footer: ''
+            }
+        },
+        color: {
+            primary: { root: 'focus-within:ring-primary' },
+            secondary: { root: 'focus-within:ring-secondary' },
+            tertiary: { root: 'focus-within:ring-tertiary' },
+            success: { root: 'focus-within:ring-success' },
+            warning: { root: 'focus-within:ring-warning' },
+            error: { root: 'focus-within:ring-error' },
+            info: { root: 'focus-within:ring-info' },
+            surface: { root: 'focus-within:ring-outline' }
+        },
+        sticky: {
+            true: { toolbar: 'sticky top-0 z-10 backdrop-blur-sm' },
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        sticky: false
+    }
+});
+export const editorDefaults = {
+    defaultVariants: editorVariants.defaultVariants,
+    slots: {}
+};

package/dist/Editor/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';
+export type { EditorProps, EditorApi, EditorJSON, EditorReactiveState, MentionItem, SlashCommand, ToolbarAction } from './editor.types.js';

package/dist/Editor/index.js

@@ -0,0 +1,52 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';

package/dist/Stepper/Stepper.svelte

@@ -0,0 +1,292 @@
+<script lang="ts" module>
+    import type { StepperProps } from './stepper.types.js'
+
+    export type Props = StepperProps
+</script>
+
+<script lang="ts">
+    import type { ClassNameValue } from 'tailwind-merge'
+    import { untrack } from 'svelte'
+    import { stepperVariants, stepperDefaults } from './stepper.variants.js'
+    import type { StepperItem, StepperItemState, StepperApi } from './stepper.types.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+
+    const config = getComponentConfig('stepper', stepperDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        items = [],
+        value = $bindable(),
+        defaultValue,
+        onValueChange,
+        api = $bindable(),
+        linear = true,
+        disabled = false,
+        orientation = config.defaultVariants.orientation ?? 'horizontal',
+        size = config.defaultVariants.size ?? 'md',
+        color = config.defaultVariants.color ?? 'primary',
+        content: showContent = true,
+        class: className,
+        ui,
+        indicator: indicatorSlot,
+        titleSlot,
+        descriptionSlot,
+        body,
+        ...restProps
+    }: Props = $props()
+
+    if (value === undefined) {
+        value = untrack(() => defaultValue ?? items[0]?.value ?? 0)
+    }
+
+    let triggers: (HTMLButtonElement | null)[] = $state([])
+
+    function getItemValue(item: StepperItem, index: number): string | number {
+        return item.value ?? index
+    }
+
+    const activeIndex = $derived(items.findIndex((item, i) => getItemValue(item, i) === value))
+
+    function getState(index: number): StepperItemState {
+        if (activeIndex === -1) return 'pending'
+        if (index === activeIndex) return 'active'
+        return index < activeIndex ? 'completed' : 'pending'
+    }
+
+    function canActivate(index: number): boolean {
+        if (disabled || items[index]?.disabled) return false
+        if (!linear) return true
+        return index <= activeIndex + 1
+    }
+
+    function setValue(next: string | number) {
+        if (next === value) return
+        value = next
+        onValueChange?.(next)
+    }
+
+    function handleClick(item: StepperItem, index: number) {
+        if (!canActivate(index)) return
+        setValue(getItemValue(item, index))
+    }
+
+    function findEnabled(start: number, dir: 1 | -1): number {
+        for (let i = start; i >= 0 && i < items.length; i += dir) {
+            if (!items[i]?.disabled) return i
+        }
+        return -1
+    }
+
+    function handleKeydown(e: KeyboardEvent, index: number) {
+        const horizontal = orientation === 'horizontal'
+        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown'
+        const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp'
+
+        let target = -1
+        if (e.key === nextKey) target = findEnabled(index + 1, 1)
+        else if (e.key === prevKey) target = findEnabled(index - 1, -1)
+        else if (e.key === 'Home') target = findEnabled(0, 1)
+        else if (e.key === 'End') target = findEnabled(items.length - 1, -1)
+        else return
+
+        e.preventDefault()
+        if (target >= 0) triggers[target]?.focus()
+    }
+
+    const apiInstance: StepperApi = {
+        next() {
+            if (activeIndex >= items.length - 1) return
+            const target = items[activeIndex + 1]
+            if (!target) return
+            setValue(getItemValue(target, activeIndex + 1))
+        },
+        prev() {
+            if (activeIndex <= 0) return
+            const target = items[activeIndex - 1]
+            if (!target) return
+            setValue(getItemValue(target, activeIndex - 1))
+        },
+        goTo(next) {
+            setValue(next)
+        },
+        get hasNext() {
+            return activeIndex >= 0 && activeIndex < items.length - 1
+        },
+        get hasPrev() {
+            return activeIndex > 0
+        },
+        get activeIndex() {
+            return activeIndex
+        }
+    }
+
+    $effect.pre(() => {
+        api = apiInstance
+    })
+
+    const variantSlots = $derived(stepperVariants({ orientation, size, color }))
+
+    type ItemUi = StepperItem['ui']
+
+    const classes = $derived.by(() => {
+        const c = config.slots
+        const slots = variantSlots
+        const u = ui ?? {}
+
+        const _item = slots.item({ class: [c.item, u.item] })
+        const _trigger = slots.trigger({ class: [c.trigger, u.trigger] })
+        const _container = slots.container({ class: [c.container, u.container] })
+        const _indicator = slots.indicator({ class: [c.indicator, u.indicator] })
+        const _separator = slots.separator({ class: [c.separator, u.separator] })
+        const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] })
+        const _title = slots.title({ class: [c.title, u.title] })
+        const _description = slots.description({ class: [c.description, u.description] })
+        const _content = slots.content({ class: [c.content, u.content] })
+
+        return {
+            root: slots.root({ class: [c.root, className, u.root] }),
+            list: slots.list({ class: [c.list, u.list] }),
+            item: (itemClass?: ClassNameValue, itemUi?: ItemUi) =>
+                itemClass || itemUi
+                    ? slots.item({ class: [c.item, u.item, itemUi?.item, itemClass] })
+                    : _item,
+            trigger: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.trigger({ class: [c.trigger, u.trigger, itemUi.trigger] })
+                    : _trigger,
+            container: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.container({ class: [c.container, u.container, itemUi.container] })
+                    : _container,
+            indicator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.indicator({ class: [c.indicator, u.indicator, itemUi.indicator] })
+                    : _indicator,
+            separator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.separator({ class: [c.separator, u.separator, itemUi.separator] })
+                    : _separator,
+            wrapper: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.wrapper({ class: [c.wrapper, u.wrapper, itemUi.wrapper] })
+                    : _wrapper,
+            title: (itemUi?: ItemUi) =>
+                itemUi ? slots.title({ class: [c.title, u.title, itemUi.title] }) : _title,
+            description: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.description({
+                          class: [c.description, u.description, itemUi.description]
+                      })
+                    : _description,
+            content: (itemUi?: ItemUi) =>
+                itemUi ? slots.content({ class: [c.content, u.content, itemUi.content] }) : _content
+        }
+    })
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    <ol class={classes.list}>
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {@const number = index + 1}
+            {@const active = state === 'active'}
+            {@const itemDisabled = disabled || item.disabled || !canActivate(index)}
+            {@const slotProps = { item, index, number, state, active }}
+            {@const hasVisibleText = !!(
+                titleSlot ||
+                descriptionSlot ||
+                item.title ||
+                item.description
+            )}
+            <li
+                class={classes.item(item.class, item.ui)}
+                data-state={state}
+                data-orientation={orientation}
+                data-stepper-item=""
+            >
+                <button
+                    type="button"
+                    bind:this={triggers[index]}
+                    class={classes.trigger(item.ui)}
+                    disabled={itemDisabled}
+                    aria-current={active ? 'step' : undefined}
+                    aria-label={hasVisibleText ? undefined : `Step ${number}`}
+                    tabindex={active ? 0 : -1}
+                    onclick={() => handleClick(item, index)}
+                    onkeydown={(e) => handleKeydown(e, index)}
+                >
+                    <span class={classes.container(item.ui)}>
+                        {#if indicatorSlot}
+                            {@render indicatorSlot(slotProps)}
+                        {:else}
+                            <span
+                                class={classes.indicator(item.ui)}
+                                data-stepper-indicator=""
+                                aria-hidden="true"
+                            >
+                                {#if item.icon}
+                                    <Icon name={item.icon} />
+                                {:else if state === 'completed'}
+                                    <Icon name="lucide:check" />
+                                {:else}
+                                    {number}
+                                {/if}
+                            </span>
+                        {/if}
+
+                        {#if index < items.length - 1}
+                            <span
+                                class={classes.separator(item.ui)}
+                                data-stepper-separator=""
+                                aria-hidden="true"
+                            ></span>
+                        {/if}
+                    </span>
+
+                    {#if hasVisibleText}
+                        <span class={classes.wrapper(item.ui)}>
+                            {#if titleSlot}
+                                {@render titleSlot(slotProps)}
+                            {:else if item.title}
+                                <span class={classes.title(item.ui)}>{item.title}</span>
+                            {/if}
+
+                            {#if descriptionSlot}
+                                {@render descriptionSlot(slotProps)}
+                            {:else if item.description}
+                                <span class={classes.description(item.ui)}>
+                                    {item.description}
+                                </span>
+                            {/if}
+                        </span>
+                    {/if}
+                </button>
+            </li>
+        {/each}
+    </ol>
+
+    {#if showContent}
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {#if state === 'active' && (body || item.content !== undefined)}
+                {@const number = index + 1}
+                {@const slotProps = { item, index, number, state, active: true }}
+                <div class={classes.content(item.ui)} role="region" data-stepper-content="">
+                    {#if body}
+                        {@render body(slotProps)}
+                    {:else}
+                        {item.content}
+                    {/if}
+                </div>
+            {/if}
+        {/each}
+    {/if}
+</svelte:element>

package/dist/Stepper/Stepper.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { StepperProps } from './stepper.types.js';
+export type Props = StepperProps;
+declare const Stepper: import("svelte").Component<StepperProps, {}, "ref" | "value" | "api">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper.svelte';
+export type { StepperProps, StepperItem, StepperItemState, StepperApi } from './stepper.types.js';

package/dist/Stepper/index.js

@@ -0,0 +1 @@
+export { default as Stepper } from './Stepper.svelte';