svelora 2.1.0

package/dist/Editor/editor.variants.js

@@ -0,0 +1,135 @@
+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'
+        ],
+        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',
+            '[&_.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',
+            '[&_.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',
+            '[&_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',
+            '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
+            '[&_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',
+            '[&_.ps-editor-mention]:inline-flex [&_.ps-editor-mention]:items-center',
+            '[&_.ps-editor-mention]:rounded [&_.ps-editor-mention]:bg-primary-container/60',
+            '[&_.ps-editor-mention]:text-on-primary-container',
+            '[&_.ps-editor-mention]:px-1.5 [&_.ps-editor-mention]:py-0.5',
+            '[&_.ps-editor-mention]:text-sm [&_.ps-editor-mention]:font-medium',
+            '[&_.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',
+            '[&_.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]: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: [
+            '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,55 @@
+/**
+ * Svelora Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of svelora, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside svelora:
+ *
+ * ```bash
+ * pnpm add svelora \
+ *   @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 must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'svelora/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 { EditorApi, EditorJSON, EditorProps, EditorReactiveState, MentionItem, SlashCommand, ToolbarAction } from './editor.types.js';

package/dist/Editor/index.js

@@ -0,0 +1,54 @@
+/**
+ * Svelora Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of svelora, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside svelora:
+ *
+ * ```bash
+ * pnpm add svelora \
+ *   @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 must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'svelora/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/Empty/Empty.svelte

@@ -0,0 +1,118 @@
+<script lang="ts" module>
+    import type { EmptyProps } from './empty.types.js'
+
+    export type Props = EmptyProps
+</script>
+
+<script lang="ts">
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Button from '../Button/Button.svelte'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { emptyDefaults, emptyVariants } from './empty.variants.js'
+
+    const config = getComponentConfig('empty', emptyDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        icon,
+        avatar,
+        title,
+        description,
+        actions,
+        variant = config.defaultVariants.variant,
+        size = config.defaultVariants.size,
+        class: className,
+        leading,
+        titleSlot,
+        descriptionSlot,
+        actionsSlot,
+        header,
+        body,
+        footer,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = emptyVariants({ variant, size })
+        const c = config.slots
+        return {
+            root: slots.root({ class: [c.root, className, ui?.root] }),
+            header: slots.header({ class: [c.header, ui?.header] }),
+            avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
+            title: slots.title({ class: [c.title, ui?.title] }),
+            description: slots.description({ class: [c.description, ui?.description] }),
+            body: slots.body({ class: [c.body, ui?.body] }),
+            actions: slots.actions({ class: [c.actions, ui?.actions] }),
+            footer: slots.footer({ class: [c.footer, ui?.footer] })
+        }
+    })
+
+    const hasHeader = $derived(
+        !!icon ||
+            !!avatar ||
+            !!title ||
+            !!description ||
+            !!leading ||
+            !!titleSlot ||
+            !!descriptionSlot ||
+            !!header
+    )
+    const hasActions = $derived(actions && actions.length > 0)
+    const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children)
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if header}
+        {@render header()}
+    {:else if hasHeader}
+        <div class={classes.header}>
+            {#if leading}
+                {@render leading()}
+            {:else if icon}
+                <Icon name={icon} class={classes.avatar} />
+            {:else if avatar}
+                <Avatar {...avatar} class={classes.avatar} />
+            {/if}
+
+            {#if titleSlot}
+                {@render titleSlot()}
+            {:else if title}
+                <p class={classes.title}>{title}</p>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+
+    {#if body}
+        {@render body()}
+    {:else if hasBody}
+        <div class={classes.body}>
+            {@render children?.()}
+
+            {#if actionsSlot}
+                {@render actionsSlot()}
+            {:else if hasActions}
+                <div class={classes.actions}>
+                    {#each actions as action, index (index)}
+                        <Button size="sm" {...action} />
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    {#if footer}
+        <div class={classes.footer}>
+            {@render footer()}
+        </div>
+    {/if}
+</svelte:element>

package/dist/Empty/Empty.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { EmptyProps } from './empty.types.js';
+export type Props = EmptyProps;
+declare const Empty: import("svelte").Component<EmptyProps, {}, "ref">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/Empty/empty.types.d.ts

@@ -0,0 +1,91 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ButtonProps } from '../Button/button.types.js';
+import type { EmptySlots, EmptyVariantProps } from './empty.variants.js';
+export type EmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the empty state as a different HTML element.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific empty slots.
+     */
+    ui?: Partial<Record<EmptySlots, ClassNameValue>>;
+    /**
+     * Icon to display in the header area.
+     * Takes precedence over avatar when both are provided.
+     */
+    icon?: string;
+    /**
+     * Avatar configuration to display in the header area.
+     * Only visible when icon is not specified.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Main heading text for the empty state.
+     */
+    title?: string;
+    /**
+     * Supporting description text below the title.
+     */
+    description?: string;
+    /**
+     * Array of button configurations to render as action buttons.
+     */
+    actions?: ButtonProps[];
+    /**
+     * Controls the visual style and background treatment.
+     * @default 'outline'
+     */
+    variant?: NonNullable<EmptyVariantProps['variant']>;
+    /**
+     * Controls the overall dimensions and typography scale.
+     * @default 'md'
+     */
+    size?: NonNullable<EmptyVariantProps['size']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom content to replace the default icon/avatar area.
+     */
+    leading?: Snippet;
+    /**
+     * Custom content to replace the default title rendering.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom content to replace the default description rendering.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Custom content to replace the default action buttons.
+     */
+    actionsSlot?: Snippet;
+    /**
+     * Custom header slot content.
+     * Replaces the entire header area (leading/icon/avatar + title + description).
+     */
+    header?: Snippet;
+    /**
+     * Custom body slot content.
+     * Replaces the entire body area (actions).
+     */
+    body?: Snippet;
+    /**
+     * Custom footer slot content.
+     */
+    footer?: Snippet;
+    /**
+     * Default slot content rendered in the body area.
+     */
+    children?: Snippet;
+};

package/dist/Empty/empty.types.js

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