svelora 2.2.0 → 3.0.1

package/README.md

@@ -16,8 +16,8 @@
 </p>
 
 <p align="center">
-  <a href="https://svelora.vercel.app"><strong>Live Demo</strong></a> &middot;
-  <a href="https://svelora.vercel.app/getting-started"><strong>Getting Started</strong></a> &middot;
+  <a href="https://svelora-ui.vercel.app/"><strong>Live Demo</strong></a> &middot;
+  <a href="https://svelora-ui.vercel.app//getting-started"><strong>Getting Started</strong></a> &middot;
   <a href="https://github.com/asphum/svelora/blob/main/CHANGELOG.md"><strong>Changelog</strong></a>
 </p>
 

package/dist/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+    import type { CodeBlockProps } from './code-block.types.js'
+
+    export type Props = CodeBlockProps
+</script>
+
+<script lang="ts">
+    import { getComponentConfig } from '../config.js'
+    import { codeBlockDefaults, codeBlockVariants } from './code-block.variants.js'
+
+    const config = getComponentConfig('codeBlock', codeBlockDefaults)
+
+    let {
+        title = 'Code',
+        code = '',
+        copyText,
+        copyable = true,
+        html,
+        variant = config.defaultVariants.variant,
+        size = config.defaultVariants.size,
+        class: className,
+        ui,
+        children
+    }: Props = $props()
+
+    let copyLabel = $state('Copy')
+
+    const resolvedCopyText = $derived((copyText ?? code).trim())
+    const canCopy = $derived(copyable && resolvedCopyText.length > 0)
+
+    const classes = $derived.by(() => {
+        const slots = codeBlockVariants({ variant, size })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            header: slots.header({ class: [config.slots.header, ui?.header] }),
+            title: slots.title({ class: [config.slots.title, ui?.title] }),
+            button: slots.button({ class: [config.slots.button, ui?.button] }),
+            body: slots.body({ class: [config.slots.body, ui?.body] })
+        }
+    })
+
+    function scheduleLabelReset(resetLabel: string): void {
+        window.setTimeout(() => {
+            copyLabel = resetLabel
+        }, 1200)
+    }
+
+    async function handleCopy(): Promise<void> {
+        if (!canCopy) return
+        if (typeof navigator === 'undefined' || !navigator.clipboard) return
+
+        const resetLabel = copyLabel
+        try {
+            await navigator.clipboard.writeText(resolvedCopyText)
+            copyLabel = 'Copied'
+        } catch {
+            copyLabel = 'Failed'
+        }
+
+        scheduleLabelReset(resetLabel)
+    }
+</script>
+
+<div class={classes.root}>
+    <div class={classes.header}>
+        <p class={classes.title}>{title}</p>
+        <button type="button" class={classes.button} disabled={!canCopy} onclick={handleCopy}>
+            {copyLabel}
+        </button>
+    </div>
+
+    <div class={classes.body}>
+        {#if html}
+            {@html html}
+        {:else if children}
+            {@render children()}
+        {:else}
+            <pre class="shiki">
+                <code>{code}</code>
+            </pre>
+        {/if}
+    </div>
+</div>

package/dist/CodeBlock/CodeBlock.svelte.d.ts

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

package/dist/CodeBlock/code-block.types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CodeBlockVariantProps, CodeBlockSlots } from './code-block.variants.js';
+export type CodeBlockProps = {
+    title?: string;
+    code?: string;
+    copyText?: string;
+    copyable?: boolean;
+    html?: string;
+    variant?: NonNullable<CodeBlockVariantProps['variant']>;
+    size?: NonNullable<CodeBlockVariantProps['size']>;
+    class?: ClassNameValue;
+    ui?: Partial<Record<CodeBlockSlots, ClassNameValue>>;
+    children?: Snippet;
+};

package/dist/CodeBlock/code-block.types.js

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

package/dist/CodeBlock/code-block.variants.d.ts

@@ -0,0 +1,288 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const codeBlockVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}, undefined, {
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CodeBlockVariantProps = VariantProps<typeof codeBlockVariants>;
+export type CodeBlockSlots = keyof ReturnType<typeof codeBlockVariants>;
+export declare const codeBlockDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            outline: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            soft: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            subtle: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            solid: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            ghost: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            none: {
+                root: string;
+                header: string;
+                button: string;
+            };
+        };
+        size: {
+            sm: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            md: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            lg: {
+                header: string;
+                button: string;
+                body: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        title: string;
+        button: string;
+        body: string;
+    }, {
+        variant: {
+            outline: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            soft: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            subtle: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            solid: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            ghost: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            none: {
+                root: string;
+                header: string;
+                button: string;
+            };
+        };
+        size: {
+            sm: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            md: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            lg: {
+                header: string;
+                button: string;
+                body: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        title: string;
+        button: string;
+        body: string;
+    }>;
+    slots: Partial<Record<CodeBlockSlots, string>>;
+};

package/dist/CodeBlock/code-block.variants.js

@@ -0,0 +1,69 @@
+import { tv } from 'tailwind-variants';
+export const codeBlockVariants = tv({
+    slots: {
+        root: 'mt-4 overflow-hidden rounded-2xl border border-outline-variant bg-surface-container',
+        header: 'flex items-center justify-between border-b border-outline-variant',
+        title: 'text-sm font-medium text-on-surface-variant',
+        button: 'rounded-md border border-outline-variant text-xs font-medium text-on-surface-variant transition-colors hover:bg-surface-container-highest disabled:cursor-not-allowed disabled:opacity-50',
+        body: 'bg-surface-container-highest [&_.shiki]:rounded-none [&_.shiki]:overflow-x-auto [&_.shiki]:m-0'
+    },
+    variants: {
+        variant: {
+            outline: {
+                root: 'border border-outline-variant bg-surface-container',
+                header: 'border-outline-variant',
+                button: 'border-outline-variant'
+            },
+            soft: {
+                root: 'border border-outline-variant/60 bg-surface-container/40',
+                header: 'border-outline-variant/60',
+                button: 'border-outline-variant/60'
+            },
+            subtle: {
+                root: 'border border-outline-variant/40 bg-surface-container/20',
+                header: 'border-outline-variant/40',
+                button: 'border-outline-variant/40'
+            },
+            solid: {
+                root: 'border border-outline-variant/60 bg-surface-container-high',
+                header: 'border-outline-variant/60',
+                button: 'border-outline-variant/60'
+            },
+            ghost: {
+                root: 'border border-transparent bg-transparent',
+                header: 'border-outline-variant/30',
+                button: 'border-outline-variant/30'
+            },
+            none: {
+                root: 'border-0 bg-transparent rounded-none',
+                header: 'border-0 px-0',
+                button: 'border-outline-variant/40'
+            }
+        },
+        size: {
+            sm: {
+                header: 'px-3 py-2',
+                button: 'px-2 py-1',
+                body: '[&_.shiki]:p-3 [&_.shiki]:text-xs [&_.shiki]:leading-5'
+            },
+            md: {
+                header: 'px-4 py-3',
+                button: 'px-2.5 py-1',
+                body: '[&_.shiki]:p-4 [&_.shiki]:text-sm [&_.shiki]:leading-6'
+            },
+            lg: {
+                header: 'px-5 py-4',
+                button: 'px-3 py-1.5',
+                body: '[&_.shiki]:p-5 [&_.shiki]:text-sm [&_.shiki]:leading-6'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md'
+    }
+});
+export const codeBlockDefaults = {
+    defaultVariants: codeBlockVariants.defaultVariants,
+    slots: {}
+};

package/dist/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from './CodeBlock.svelte';
+export type { CodeBlockProps } from './code-block.types.js';

package/dist/CodeBlock/index.js

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

package/dist/Drawer/Drawer.svelte

@@ -81,7 +81,7 @@
     }
 
     const rootProps = $derived.by(() => {
-        const base = {
+        const base: Record<string, unknown> = {
             ...rest,
             open,
             onOpenChange: handleOpenChange,
@@ -99,6 +99,9 @@
             onRelease,
             onClose
         }
+        if (rest.container) {
+            base.container = rest.container
+        }
         if (snapPoints && fadeFromIndex !== null) {
             return { ...base, snapPoints, fadeFromIndex }
         }
@@ -182,9 +185,16 @@
             bits-ui v0 internally, which is incompatible with Svelte 5 snippets
             and yields an empty <button> in the DOM. We pass an `onclick` handler
             to the user-supplied trigger snippet so the user's element opens the
-            drawer when activated.
+            drawer when activated, and we manually expose `data-state` so callers
+            can style/assert the trigger element.
         -->
-        {@render children({ props: { type: 'button', onclick: () => (open = true) } })}
+        {@render children({
+            props: {
+                type: 'button',
+                onclick: () => (open = true),
+                'data-state': open ? 'open' : 'closed'
+            }
+        })}
     {/if}
 
     {#if portal}

package/dist/Editor/Editor.svelte

@@ -467,6 +467,9 @@ export type Props = EditorProps;
         try {
             const url = await onImageUpload(file)
             if (!isSafeImageSrc(url)) {
+                console.warn(
+                    `[svelora] Blocked unsafe image src returned by onImageUpload: ${url}`
+                )
                 return
             }
             editor.chain().focus().setImage({ src: url }).run()

package/dist/Fonts/Fonts.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+    import type { FontsProps } from './fonts.types.js'
+
+    export type Props = FontsProps
+</script>
+
+<script lang="ts">
+    import { getConfig } from '../config.js'
+    import {
+        buildFontVariablesCss,
+        buildGoogleFontsUrl,
+        buildLocalFontFaceCss,
+        fontsDefaults,
+        resolveFontsOptions
+    } from './fonts.js'
+
+    const globalConfig = getConfig()
+    const config = resolveFontsOptions(globalConfig.fonts)
+
+    let {
+        fonts,
+        families,
+        display,
+        preconnect
+    }: Props = $props()
+
+    const resolvedFamilies = $derived(families ?? fonts ?? (config === false ? [] : config.families ?? []))
+    const resolvedDisplay = $derived(display ?? (config === false ? fontsDefaults.display : config.display))
+    const resolvedPreconnect = $derived(
+        preconnect ?? (config === false ? fontsDefaults.preconnect : config.preconnect)
+    )
+
+    const href = $derived(buildGoogleFontsUrl(resolvedFamilies, resolvedDisplay))
+    const localFontFaceCss = $derived(buildLocalFontFaceCss(resolvedFamilies, resolvedDisplay))
+    const variableCss = $derived(buildFontVariablesCss(resolvedFamilies))
+    const inlineCss = $derived([localFontFaceCss, variableCss].filter((value) => value.length > 0).join('\n\n'))
+    const hasFonts = $derived(href.length > 0 || inlineCss.length > 0)
+</script>
+
+<svelte:head>
+    {#if hasFonts}
+        {#if resolvedPreconnect && href}
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+        {/if}
+        {#if href}
+            <link rel="stylesheet" href={href} />
+        {/if}
+        {#if inlineCss}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html `<style>${inlineCss}</style>`}
+        {/if}
+    {/if}
+</svelte:head>

package/dist/Fonts/Fonts.svelte.d.ts

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

package/dist/Fonts/fonts.d.ts

@@ -0,0 +1,12 @@
+import type { FontDefinition, GoogleFontDisplay, FontsConfig, FontsOptions } from './fonts.types.js';
+export declare const defaultFontFamilies: FontDefinition[];
+export declare const fontsDefaults: {
+    families: FontDefinition[];
+    display: GoogleFontDisplay;
+    preconnect: boolean;
+};
+export declare function buildGoogleFontsUrl(fonts: FontDefinition[], display?: GoogleFontDisplay): string;
+export declare function buildFontFamily(font: FontDefinition): string;
+export declare function buildLocalFontFaceCss(fonts: FontDefinition[], defaultDisplay?: GoogleFontDisplay): string;
+export declare function buildFontVariablesCss(fonts: FontDefinition[]): string;
+export declare function resolveFontsOptions(config?: FontsConfig): FontsOptions | false;