fuma 2.1.0 → 2.1.3

package/dist/_doc/DocExample.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte'
+	import { ButtonCopy } from '../ui/copy/index.js'
+	import { useMode } from '../ui/mode/useMode.svelte.js'
+	import { highlight, transformPackageImports } from './highlight.ts'
+
+	let {
+		code,
+		title,
+		lang = 'svelte',
+		preview
+	}: {
+		code: string
+		title?: string
+		lang?: string
+		preview: Snippet
+	} = $props()
+
+	let mode = $derived(useMode({ light: 'fuma', dark: 'fuma-dark' }))
+	let displayCode = $derived(transformPackageImports(code.trim()))
+	let highlighted = $derived(highlight(displayCode, lang, mode.current))
+	let tab = $state<'preview' | 'code'>('code')
+
+	let leftWidth = $state(50)
+	let isDragging = $state(false)
+	let container = $state<HTMLDivElement>()
+
+	function setTab(t: 'preview' | 'code') {
+		tab = t
+		if (t === 'code') {
+			leftWidth = 70
+		} else {
+			leftWidth = 30
+		}
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault()
+		isDragging = true
+		window.addEventListener('mousemove', onResize)
+		window.addEventListener('mouseup', stopResize)
+	}
+
+	function onResize(e: MouseEvent) {
+		if (!isDragging || !container) return
+		const rect = container.getBoundingClientRect()
+		const x = e.clientX - rect.left
+		const percent = (x / rect.width) * 100
+		leftWidth = Math.max(20, Math.min(80, percent))
+		tab = leftWidth >= 50 ? 'code' : 'preview'
+	}
+
+	function stopResize() {
+		isDragging = false
+		window.removeEventListener('mousemove', onResize)
+		window.removeEventListener('mouseup', stopResize)
+	}
+</script>
+
+<div class="not-prose my-6 overflow-hidden rounded-lg border">
+	<div class="flex items-center gap-2 border-b bg-base-200/50 px-4 py-2">
+		<span class="mr-auto text-sm font-semibold text-base-content/70">Example: {title}</span>
+
+		<div class="tabs-boxed tabs tabs-sm">
+			<button class="tab" class:tab-active={tab === 'code'} onclick={() => setTab('code')}>
+				Code
+			</button>
+			<button class="tab" class:tab-active={tab === 'preview'} onclick={() => setTab('preview')}>
+				Preview
+			</button>
+		</div>
+
+		<ButtonCopy value={displayCode} title="Copy code" class="btn btn-square btn-xs" />
+	</div>
+
+	<!-- Mobile: tabs -->
+	<div class="md:hidden">
+		{#if tab === 'code'}
+			<div class="overflow-hidden">
+				{#await highlighted then html}
+					<div class="overflow-auto text-sm">
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						{@html html}
+					</div>
+				{/await}
+			</div>
+		{:else}
+			<div class="bg-base-100 p-6">
+				{@render preview()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Desktop: side by side with resizer -->
+	<div class="hidden md:flex" bind:this={container}>
+		<div
+			class="overflow-hidden {isDragging ? '' : 'transition-[width] duration-300 ease-out'}"
+			style="width: {leftWidth}%"
+		>
+			{#await highlighted then html}
+				<div class="overflow-auto text-sm">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html html}
+				</div>
+			{/await}
+		</div>
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<div
+			class="w-1.5 shrink-0 cursor-col-resize bg-base-300 transition-colors hover:bg-primary {isDragging
+				? 'bg-primary'
+				: ''}"
+			onmousedown={startResize}
+			role="separator"
+			aria-label="Resize"
+			tabindex="0"
+		></div>
+		<div class="min-w-0 flex-1 overflow-auto bg-base-100 p-6">
+			{@render preview()}
+		</div>
+	</div>
+</div>

package/dist/_doc/DocExample.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    code: string;
+    title?: string;
+    lang?: string;
+    preview: Snippet;
+};
+declare const DocExample: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocExample = ReturnType<typeof DocExample>;
+export default DocExample;

package/dist/_doc/DocProps.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	export type PropDef = {
+		name: string
+		type: string
+		default?: string
+		required?: boolean
+		description?: string
+	}
+</script>
+
+<script lang="ts">
+	let {
+		props
+	}: {
+		props: PropDef[]
+	} = $props()
+</script>
+
+<div class="not-prose my-6">
+	<div class="collapse-arrow collapse rounded-lg border bg-base-100">
+		<input type="checkbox" />
+		<div class="collapse-title text-sm font-semibold">{props.length} Props</div>
+		<div class="collapse-content p-0">
+			<div class="overflow-x-auto">
+				<table class="table table-zebra table-sm">
+					<thead class="bg-base-200/80 text-sm">
+						<tr>
+							<th>Name</th>
+							<th>Type</th>
+							<th>Default</th>
+							<th>Description</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each props as prop (prop.name)}
+							<tr>
+								<td class="whitespace-nowrap">
+									<code class="font-mono text-sm">{prop.name}</code>
+									{#if prop.required}
+										<span class="ml-1 badge badge-xs badge-error">required</span>
+									{/if}
+								</td>
+								<td>
+									<code class="font-mono text-xs opacity-70">{prop.type}</code>
+								</td>
+								<td class="text-sm opacity-80">
+									{#if prop.default}
+										<code class="font-mono text-xs">{prop.default}</code>
+									{:else}
+										<span class="opacity-50">—</span>
+									{/if}
+								</td>
+								<td class="text-sm">{prop.description ?? ''}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</div>

package/dist/_doc/DocProps.svelte.d.ts

@@ -0,0 +1,13 @@
+export type PropDef = {
+    name: string;
+    type: string;
+    default?: string;
+    required?: boolean;
+    description?: string;
+};
+type $$ComponentProps = {
+    props: PropDef[];
+};
+declare const DocProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocProps = ReturnType<typeof DocProps>;
+export default DocProps;

package/dist/_doc/DocSection.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte'
+
+	let {
+		title,
+		description,
+		children
+	}: {
+		title?: string
+		description?: string
+		children: Snippet
+	} = $props()
+</script>
+
+<section class="mt-2 mb-12">
+	<h2 class="mb-2 text-2xl font-bold text-base-content">{title}</h2>
+	{#if description}
+		<p class="mb-4 text-base-content/70">{description}</p>
+	{/if}
+	<div class="divider mb-6"></div>
+	{@render children()}
+</section>

package/dist/_doc/DocSection.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    children: Snippet;
+};
+declare const DocSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocSection = ReturnType<typeof DocSection>;
+export default DocSection;

package/dist/_doc/highlight.d.ts

@@ -0,0 +1,2 @@
+export declare function transformPackageImports(code: string): string;
+export declare function highlight(code: string, lang?: string, theme?: 'light' | 'dark'): Promise<string>;

package/dist/_doc/highlight.js

@@ -0,0 +1,18 @@
+import { codeToHtml } from 'shiki';
+export function transformPackageImports(code) {
+    return code
+        .replace(/from\s+['"]\$lib\/index\.ts['"]/g, "from 'fuma'")
+        .replace(/from\s+['"]\$lib\/ui\/[^'"]+['"]/g, "from 'fuma/ui'")
+        .replace(/from\s+['"]\$lib\/utils\/[^'"]+['"]/g, "from 'fuma/utils'")
+        .replace(/from\s+['"]\$lib\/state\/[^'"]+['"]/g, "from 'fuma/state'")
+        .replace(/from\s+['"]\$lib\/validation\/[^'"]+['"]/g, "from 'fuma/validation'")
+        .replace(/from\s+['"]\$lib\/action\/[^'"]+['"]/g, "from 'fuma/action'")
+        .replace(/from\s+['"]\$lib\/server\/[^'"]+['"]/g, "from 'fuma/server'");
+}
+export async function highlight(code, lang = 'svelte', theme = 'dark') {
+    return codeToHtml(code, {
+        lang,
+        theme: theme === 'dark' ? 'github-dark' : 'github-light',
+        rootStyle: 'padding: 0.5rem 1rem;'
+    });
+}

package/dist/_doc/index.d.ts

@@ -0,0 +1,4 @@
+export { default as DocExample } from './DocExample.svelte';
+export type { PropDef } from './DocProps.svelte';
+export { default as DocProps } from './DocProps.svelte';
+export { default as DocSection } from './DocSection.svelte';

package/dist/_doc/index.js

@@ -0,0 +1,3 @@
+export { default as DocExample } from './DocExample.svelte';
+export { default as DocProps } from './DocProps.svelte';
+export { default as DocSection } from './DocSection.svelte';

package/dist/_doc/parse-props.d.ts

@@ -0,0 +1,2 @@
+import type { PropDef } from './DocProps.svelte';
+export declare function parseProps(source: string): PropDef[];

package/dist/_doc/parse-props.js

@@ -0,0 +1,253 @@
+export function parseProps(source) {
+    const script = extractScript(source);
+    if (!script)
+        return [];
+    // Try Svelte 5 $props() first
+    const declaration = findPropsDeclaration(script);
+    if (declaration) {
+        const destructured = parseDestructuring(declaration.destructuring);
+        const typed = parseType(declaration.type);
+        return mergeToPropDefs(destructured, typed);
+    }
+    // Fallback to Svelte 3/4 export let syntax
+    return parseExportLetProps(script);
+}
+function extractScript(source) {
+    const moduleMatch = source.match(/<script\s+lang="ts"\s+module>[\s\S]*?<\/script>/);
+    let cleaned = source;
+    if (moduleMatch && moduleMatch.index !== undefined) {
+        cleaned =
+            source.slice(0, moduleMatch.index) + source.slice(moduleMatch.index + moduleMatch[0].length);
+    }
+    const scriptMatch = cleaned.match(/<script\s+lang="ts"\s*(?:generics="[^"]*")?\s*>([\s\S]*?)<\/script>/);
+    if (scriptMatch)
+        return scriptMatch[1];
+    // Fallback for plain .ts files (no <script> tag)
+    if (!cleaned.includes('<script'))
+        return cleaned;
+    return null;
+}
+function findPropsDeclaration(script) {
+    const letIndex = script.indexOf('let {');
+    if (letIndex === -1)
+        return null;
+    let i = letIndex + 4;
+    let braceDepth = 0;
+    let destructuringEnd = -1;
+    for (; i < script.length; i++) {
+        if (script[i] === '{')
+            braceDepth++;
+        else if (script[i] === '}') {
+            braceDepth--;
+            if (braceDepth === 0) {
+                destructuringEnd = i;
+                break;
+            }
+        }
+    }
+    if (destructuringEnd === -1)
+        return null;
+    const destructuring = script.slice(letIndex + 5, destructuringEnd);
+    let j = destructuringEnd + 1;
+    while (j < script.length && /\s/.test(script[j]))
+        j++;
+    let type = null;
+    if (script[j] === ':') {
+        j++;
+        while (j < script.length && /\s/.test(script[j]))
+            j++;
+        const propsIndex = script.indexOf('= $props()', j);
+        if (propsIndex !== -1) {
+            type = script.slice(j, propsIndex).trim();
+        }
+    }
+    return { destructuring, type };
+}
+function parseDestructuring(str) {
+    const props = new Map();
+    const items = splitByComma(str);
+    for (const item of items) {
+        if (item.startsWith('...'))
+            continue;
+        const eqIndex = findTopLevel(item, ' = ');
+        const beforeEq = eqIndex >= 0 ? item.slice(0, eqIndex).trim() : item.trim();
+        const defaultValue = eqIndex >= 0 ? item.slice(eqIndex + 3).trim() : undefined;
+        const colonIndex = findTopLevel(beforeEq, ': ');
+        const name = colonIndex >= 0 ? beforeEq.slice(0, colonIndex).trim() : beforeEq;
+        props.set(name, { alias: name, defaultValue });
+    }
+    return props;
+}
+function parseType(typeStr) {
+    const props = new Map();
+    if (!typeStr)
+        return props;
+    const cleaned = removeComments(typeStr);
+    const firstBrace = cleaned.indexOf('{');
+    if (firstBrace === -1)
+        return props;
+    let depth = 0;
+    let start = -1;
+    let end = -1;
+    for (let i = 0; i < cleaned.length; i++) {
+        if (cleaned[i] === '{') {
+            if (depth === 0)
+                start = i;
+            depth++;
+        }
+        else if (cleaned[i] === '}') {
+            depth--;
+            if (depth === 0) {
+                end = i;
+                break;
+            }
+        }
+    }
+    if (start === -1 || end === -1)
+        return props;
+    const content = cleaned.slice(start + 1, end);
+    return parseTypeObject(content);
+}
+function parseTypeObject(content) {
+    const props = new Map();
+    const lines = content.split('\n');
+    const propStartRegex = /^([a-zA-Z_$][a-zA-Z0-9_$]*)(\??)\s*:\s*(.*)$/;
+    let currentName = null;
+    let currentOptional = false;
+    let currentType = '';
+    let currentDescription = '';
+    let depth = 0;
+    let pendingDescription = '';
+    for (let line of lines) {
+        line = line.trim();
+        if (!line)
+            continue;
+        const jsdocMatch = line.match(/\/\*\*\s*(.*?)\s*\*\//);
+        if (jsdocMatch) {
+            pendingDescription = jsdocMatch[1].trim();
+            continue;
+        }
+        const commentMatch = line.match(/\/\/\s*(.*)/);
+        if (commentMatch) {
+            pendingDescription = commentMatch[1].trim();
+            continue;
+        }
+        for (const char of line) {
+            if (char === '{' || char === '(' || char === '[')
+                depth++;
+            else if (char === '}' || char === ')' || char === ']')
+                depth--;
+        }
+        const match = line.match(propStartRegex);
+        if (match && depth === 0) {
+            if (currentName) {
+                props.set(currentName, {
+                    type: currentType.trim(),
+                    required: !currentOptional,
+                    description: currentDescription || undefined
+                });
+            }
+            currentName = match[1];
+            currentOptional = match[2] === '?';
+            currentType = match[3];
+            currentDescription = pendingDescription;
+            pendingDescription = '';
+        }
+        else if (currentName && depth >= 0) {
+            currentType += ` ${line}`;
+        }
+    }
+    if (currentName) {
+        props.set(currentName, {
+            type: currentType.trim(),
+            required: !currentOptional,
+            description: currentDescription || undefined
+        });
+    }
+    return props;
+}
+function parseExportLetProps(script) {
+    const defs = [];
+    const regex = /export\s+let\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*([^=\n]+))?\s*(?:=\s*([^\n]+))?/g;
+    let match = null;
+    while (true) {
+        match = regex.exec(script);
+        if (match === null)
+            break;
+        const [, name, typeStr, defaultValue] = match;
+        defs.push({
+            name,
+            type: typeStr ? typeStr.trim() : 'unknown',
+            default: defaultValue ? defaultValue.trim() : undefined,
+            required: !defaultValue
+        });
+    }
+    return defs;
+}
+function mergeToPropDefs(destructured, typed) {
+    const defs = [];
+    for (const [name, { defaultValue }] of destructured) {
+        const typeInfo = typed.get(name);
+        let isRequired = typeInfo?.required ?? false;
+        let type = typeInfo?.type ?? 'unknown';
+        // Clean up union types starting with |
+        if (type.startsWith('| ')) {
+            type = type.slice(2).trim();
+        }
+        if (defaultValue) {
+            if (defaultValue.startsWith('$bindable')) {
+                // $bindable() means it's bindable but may still be required
+                // keep required as-is from type
+            }
+            else {
+                isRequired = false;
+            }
+        }
+        defs.push({
+            name,
+            type,
+            default: defaultValue && !defaultValue.startsWith('$bindable') ? defaultValue : undefined,
+            required: isRequired,
+            description: typeInfo?.description
+        });
+    }
+    return defs;
+}
+function splitByComma(str) {
+    const items = [];
+    let current = '';
+    let depth = 0;
+    for (const char of str) {
+        if (char === '{' || char === '(' || char === '[' || char === '<')
+            depth++;
+        else if (char === '}' || char === ')' || char === ']' || char === '>')
+            depth--;
+        else if (char === ',' && depth === 0) {
+            if (current.trim())
+                items.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    if (current.trim())
+        items.push(current.trim());
+    return items;
+}
+function findTopLevel(str, pattern) {
+    let depth = 0;
+    for (let i = 0; i <= str.length - pattern.length; i++) {
+        const char = str[i];
+        if (char === '{' || char === '(' || char === '[' || char === '<')
+            depth++;
+        else if (char === '}' || char === ')' || char === ']' || char === '>')
+            depth--;
+        else if (depth === 0 && str.slice(i, i + pattern.length) === pattern) {
+            return i;
+        }
+    }
+    return -1;
+}
+function removeComments(str) {
+    return str.replace(/\/\/.*$/gm, '');
+}

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 export * from './action/index.ts';
+export * from './command/index.ts';
+export * from './input/index.ts';
+export * from './popover/index.ts';
+export * from './remote/index.ts';
+export * from './search/index.ts';
 export * from './state/index.ts';
 export * from './ui/index.ts';
 export * from './utils/index.ts';

package/dist/index.js

@@ -1,4 +1,9 @@
 export * from './action/index.ts';
+export * from './command/index.ts';
+export * from './input/index.ts';
+export * from './popover/index.ts';
+export * from './remote/index.ts';
+export * from './search/index.ts';
 export * from './state/index.ts';
 export * from './ui/index.ts';
 export * from './utils/index.ts';

package/dist/input/InputBoolean.svelte

@@ -10,7 +10,6 @@
 		checked = $bindable(),
 		hint,
 		variant = 'checkbox',
-		class: klass,
 		...props
 	}: {
 		label: string
@@ -58,7 +57,8 @@
 </div>
 
 {#snippet variantCheckbox()}
-	<div class={['squircle h-5 w-5 outline', 'bg-base-100']}>
+	<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape  -->
+	<div class={['h-5 w-5 rounded-full outline', 'bg-base-100']} style="corner-shape: squircle;">
 		<div
 			class={[
 				'squircle grid h-5 w-5 place-content-center',
@@ -66,6 +66,7 @@
 				'ease scale-0 opacity-0',
 				isChecked && 'scale-[80%] opacity-100'
 			]}
+			style="corner-shape: squircle"
 		>
 			<CheckIcon size={18} class={['stroke-base-100']} strokeWidth={4} />
 		</div>
@@ -92,10 +93,6 @@
 		transition-timing-function: cubic-bezier(0.275, 0.485, 0.515, 1.45);
 		transition-duration: 200ms;
 	}
-	.squircle {
-		corner-shape: squircle;
-		border-radius: 100%;
-	}
 
 	label:has(input[aria-invalid='true']) {
 		--input-color: var(--color-error);

package/dist/input/InputRadio.svelte

@@ -21,7 +21,7 @@
 <div class="flex flex-col gap-1">
 	<span class="label px-3 text-sm">{label}</span>
 	<div class="join join-vertical">
-		{#each options as option}
+		{#each options as option (option.value)}
 			{@const { class: klass, ...props } = option}
 			<label class="input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200">
 				{#if option.icon}

package/dist/input/InputSelectNative.svelte

@@ -31,7 +31,7 @@
 			bind:value
 			{...props}
 		>
-			{#each options as option}
+			{#each options as option (option.value)}
 				<option value={option.value} class={['', option.class]} disabled={option.disabled}>
 					{#if option.icon}
 						<option.icon size={18} opacity={0.8} />

package/dist/input/InputTextarea.svelte

@@ -22,8 +22,7 @@
 	new TextareaAutosize({
 		element: () => textarea,
 		input: () => field?.value() || value || '',
-		// svelte-ignore state_referenced_locally
-		maxHeight
+		maxHeight: (() => maxHeight)()
 	})
 </script>
 

package/dist/input/Issues.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import type { RemoteFormField } from '@sveltejs/kit'
+	import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit'
 	import { slide } from 'svelte/transition'
 
 	let {
 		field
 	}: {
-		// biome-ignore lint/suspicious/noExplicitAny: Wathever then value type... we use just field.issues()
-		field: RemoteFormField<any> | undefined
+		field: RemoteFormField<RemoteFormFieldValue> | undefined
 	} = $props()
 </script>
 
 {#if field?.issues()?.length}
 	<div class="my-1 flex flex-col text-xs text-error" transition:slide={{ duration: 200 }}>
-		{#each field.issues() as issue}
+		{#each field.issues() as issue (issue.path)}
 			<span>
 				{issue.message}
 			</span>

package/dist/input/Issues.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { RemoteFormField } from '@sveltejs/kit';
+import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
 type $$ComponentProps = {
-    field: RemoteFormField<any> | undefined;
+    field: RemoteFormField<RemoteFormFieldValue> | undefined;
 };
 declare const Issues: import("svelte").Component<$$ComponentProps, {}, "">;
 type Issues = ReturnType<typeof Issues>;