@x33025/sveltely 0.1.18 → 0.1.21

package/dist/actions/LoaderOverlay.svelte

@@ -4,15 +4,39 @@
 
 	type Props = {
 		text: string;
+		background?: string;
+		color?: string;
+		fontSize?: number;
 	};
 
-	let { text }: Props = $props();
+	let { text, background, color, fontSize }: Props = $props();
+
+	const toRem = (value: number | undefined) =>
+		value === undefined ? undefined : `${value / 10}rem`;
+
+	const overlayStyle = $derived.by(() =>
+		[
+			background ? `--sveltely-loader-background: ${background};` : '',
+			color ? `--sveltely-loader-color: ${color};` : '',
+			fontSize !== undefined ? `--sveltely-loader-font-size: ${toRem(fontSize)};` : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
+<div
+	class="sveltely-loader-overlay"
+	role="status"
+	aria-live="polite"
+	aria-label={text || 'Loading'}
+	style={overlayStyle}
+>
 	<VStack align="center" justify="center" gap={5}>
-		<Spinner />
-		<span class="sveltely-loader-text">{text}</span>
+		<Spinner size="calc(var(--sveltely-loader-font-size) * 1.143)" />
+		{#if text}
+			<span class="sveltely-loader-text">{text}</span>
+		{/if}
 	</VStack>
 </div>
 
@@ -25,8 +49,9 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: inherit;
-		background: var(--sveltely-background-color, white);
-		color: var(--sveltely-primary-color, black);
+		background: var(--sveltely-loader-background, var(--sveltely-background-color, white));
+		color: var(--sveltely-loader-color, var(--sveltely-text-primary-color, black));
+		font-size: var(--sveltely-loader-font-size, var(--sveltely-font-size, 1rem));
 		padding: var(--sveltely-padding-y, 0.75rem) var(--sveltely-padding-x, 0.75rem);
 		pointer-events: auto;
 		text-align: center;
@@ -35,8 +60,8 @@
 	.sveltely-loader-text {
 		max-width: 100%;
 		overflow: hidden;
-		color: var(--sveltely-secondary-color, currentColor);
-		font-size: calc(var(--sveltely-font-size, 1rem) * 0.875);
+		color: var(--sveltely-loader-text-color, currentColor);
+		font-size: var(--sveltely-loader-font-size, var(--sveltely-font-size, 1rem));
 		line-height: 1.25;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/dist/actions/LoaderOverlay.svelte.d.ts

@@ -1,5 +1,8 @@
 type Props = {
     text: string;
+    background?: string;
+    color?: string;
+    fontSize?: number;
 };
 declare const LoaderOverlay: import("svelte").Component<Props, {}, "">;
 type LoaderOverlay = ReturnType<typeof LoaderOverlay>;

package/dist/actions/loader.d.ts

@@ -5,6 +5,9 @@ export type LoaderOptions = LoaderTrigger | [text: string, loading: LoaderTrigge
     loading?: LoaderTrigger;
     active?: LoaderTrigger;
     promise?: PromiseLike<unknown> | null;
+    background?: string;
+    color?: string;
+    fontSize?: number;
     disabled?: boolean;
 };
 export declare const loader: Action<HTMLElement, LoaderOptions>;

package/dist/actions/loader.js

@@ -8,21 +8,30 @@ const isPromiseLike = (value) => typeof value === 'object' &&
 const parseOptions = (value = false) => {
     if (Array.isArray(value)) {
         return {
-            text: value[0] || DEFAULT_TEXT,
+            text: value[0] ?? DEFAULT_TEXT,
             loading: value[1],
+            background: undefined,
+            color: undefined,
+            fontSize: undefined,
             disabled: false
         };
     }
     if (typeof value === 'object' && value !== null && !isPromiseLike(value)) {
         return {
-            text: value.text || DEFAULT_TEXT,
+            text: value.text ?? '',
             loading: value.loading ?? value.active ?? value.promise ?? false,
+            background: value.background,
+            color: value.color,
+            fontSize: value.fontSize,
             disabled: value.disabled ?? false
         };
     }
     return {
         text: DEFAULT_TEXT,
         loading: value,
+        background: undefined,
+        color: undefined,
+        fontSize: undefined,
         disabled: false
     };
 };
@@ -37,7 +46,7 @@ export const loader = (node, initialOptions = false) => {
     const originalAriaBusy = node.getAttribute('aria-busy');
     let options = parseOptions(initialOptions);
     let overlay = null;
-    let overlayText = '';
+    let overlayKey = '';
     let promiseVersion = 0;
     let appliedPosition = false;
     const ensureHostPosition = () => {
@@ -57,17 +66,21 @@ export const loader = (node, initialOptions = false) => {
     const show = () => {
         ensureHostPosition();
         node.setAttribute('aria-busy', 'true');
-        if (overlay && overlayText === options.text) {
+        const nextOverlayKey = [options.text, options.background, options.color, options.fontSize].join('\0');
+        if (overlay && overlayKey === nextOverlayKey) {
             return;
         }
         if (overlay) {
             void unmount(overlay);
         }
-        overlayText = options.text;
+        overlayKey = nextOverlayKey;
         overlay = mount(LoaderOverlay, {
             target: node,
             props: {
-                text: options.text
+                text: options.text,
+                background: options.background,
+                color: options.color,
+                fontSize: options.fontSize
             }
         });
     };
@@ -75,7 +88,7 @@ export const loader = (node, initialOptions = false) => {
         if (overlay) {
             void unmount(overlay);
             overlay = null;
-            overlayText = '';
+            overlayKey = '';
         }
         if (originalAriaBusy === null) {
             node.removeAttribute('aria-busy');

package/dist/components/Library/AnimatedNumber/AnimatedNumber.demo.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'AnimatedNumber',
+		name: 'Animated Number',
 		description: 'Spring-driven numeric transitions.'
 	};
 </script>
@@ -17,14 +17,8 @@
 </script>
 
 <div class="vstack center gap-3">
-	<div class="text-3xl font-semibold text-[var(--sveltely-primary-color)]">
+	<div class="text-3xl font-semibold text-[var(--sveltely-text-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>
-	<Button
-		label="Change number"
-		background="var(--sveltely-active-color)"
-		borderColor="var(--sveltely-active-color)"
-		color="var(--sveltely-background-color)"
-		onclick={bump}
-	/>
+	<Button label="Change number" onclick={bump} />
 </div>

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte

@@ -162,6 +162,7 @@
 			<VStack gap={12.5}>
 				{#each faqBlocks as block (block.id)}
 					<TextEditor
+						as="h2"
 						autosize
 						value={block.text ?? 'Frequently asked questions'}
 						rows={1}
@@ -169,7 +170,6 @@
 							onUpdateBlock(block.id, {
 								text: (event.currentTarget as HTMLTextAreaElement).value
 							})}
-						className="text-2xl leading-tight font-semibold tracking-[-0.025em] text-zinc-950 placeholder:text-zinc-300"
 						placeholder="FAQ title"
 					/>
 					<FAQ {block} onUpdateItem={onUpdateFAQItem} />

package/dist/components/Library/ArticleEditor/ArticleEditorHeader.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import VStack from '../VStack';
 	import TextEditor from '../TextEditor';
-	import ImagePreview from './Blocks/ImagePreview.svelte';
-	import type { ArticleEditorArticle } from './types.js';
+	import Image from './Blocks/Image.svelte';
+	import type { ArticleEditorArticle, BlockDraft } from './types.js';
 
 	let { article, draftTitle, draftImageAltText, onTitleChange, onImageAltTextChange } = $props<{
 		article: ArticleEditorArticle;
@@ -11,47 +11,37 @@
 		onTitleChange: (value: string) => void;
 		onImageAltTextChange: (value: string) => void;
 	}>();
+
+	const heroImageBlock = $derived<BlockDraft>({
+		id: article.id ? `${article.id}:hero-image` : 'article-hero-image',
+		order: -1,
+		type: 'image',
+		imageURL: article.imageURL,
+		imageAlt: draftImageAltText
+	});
+
+	const onHeroImageUpdate = (_id: string, patch: Partial<BlockDraft>) => {
+		if (patch.imageAlt === undefined) return;
+		onImageAltTextChange(patch.imageAlt ?? '');
+	};
 </script>
 
 <VStack gap={10}>
 	<TextEditor
+		as="h1"
 		autosize
 		value={draftTitle}
 		rows={1}
 		spellcheck={true}
 		onInput={(event) => onTitleChange((event.currentTarget as HTMLTextAreaElement).value)}
-		className="text-4xl leading-tight font-semibold tracking-[-0.03em] text-zinc-950 placeholder:text-zinc-300"
 		placeholder="Untitled article"
 	/>
 
 	{#if article.imageURL}
-		<ImagePreview
-			src={article.imageURL}
-			alt={draftImageAltText || article.title}
-			aspectRatio="4 / 3"
-		/>
-		<TextEditor
-			autosize
-			value={draftImageAltText}
-			rows={1}
-			onInput={(event) => onImageAltTextChange((event.currentTarget as HTMLTextAreaElement).value)}
-			className="article-editor-hero-description"
-			placeholder="Image description"
+		<Image
+			block={heroImageBlock}
+			titleFallback={draftTitle || article.title}
+			onUpdate={onHeroImageUpdate}
 		/>
 	{/if}
 </VStack>
-
-<style>
-	:global(.article-editor-hero-description) {
-		border: 0;
-		background: transparent;
-		padding: 0;
-		color: #3f3f46;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-
-	:global(.article-editor-hero-description::placeholder) {
-		color: #d4d4d8;
-	}
-</style>

package/dist/components/Library/ArticleEditor/Blocks/Code.svelte

@@ -16,6 +16,5 @@
 		onUpdate(block.id, {
 			code: (event.currentTarget as HTMLTextAreaElement).value
 		})}
-	className="bg-zinc-950 px-4 py-4 font-mono text-sm leading-6 text-zinc-100"
 	placeholder="Code block"
 />

package/dist/components/Library/ArticleEditor/Blocks/FAQ.svelte

@@ -29,9 +29,9 @@
 				placeholder="Question"
 			/>
 			<TextEditor
+				as="paragraph"
 				autosize
 				rows={1}
-				className="text-[15px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 				value={item.answer}
 				onInput={(event) =>
 					onUpdateItem(

package/dist/components/Library/ArticleEditor/Blocks/Heading.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import TextEditor from '../../TextEditor';
+	import type { TextAs } from '../../../../style/text';
 	import type { BlockDraft } from '../types.js';
 
 	let {
@@ -21,9 +22,15 @@
 		focusPosition?: number | null;
 		onFocused?: () => void;
 	}>();
+
+	const headingAs = $derived.by<TextAs>(() => {
+		const level = Math.min(6, Math.max(1, block.level ?? 2));
+		return `h${level}` as TextAs;
+	});
 </script>
 
 <TextEditor
+	as={headingAs}
 	autosize
 	rows={1}
 	value={block.text ?? ''}
@@ -62,12 +69,5 @@
 	{shouldFocus}
 	{focusPosition}
 	{onFocused}
-	className={`placeholder:text-zinc-300 ${
-		Number(block.level ?? 2) <= 1
-			? 'text-3xl font-semibold tracking-[-0.03em]'
-			: Number(block.level ?? 2) === 2
-				? 'text-2xl font-semibold tracking-[-0.025em]'
-				: 'text-xl font-semibold'
-	}`}
 	placeholder="Heading"
 />

package/dist/components/Library/ArticleEditor/Blocks/Image.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import Image from '../../Image';
 	import TextEditor from '../../TextEditor';
-	import ImagePreview from './ImagePreview.svelte';
+	import VStack from '../../VStack';
 	import type { BlockDraft } from '../types.js';
 
 	let { block, titleFallback, onUpdate } = $props<{
@@ -10,39 +11,22 @@
 	}>();
 </script>
 
-<div class="article-block-image">
-	<ImagePreview src={block.imageURL} alt={block.imageAlt ?? titleFallback} />
-	<div>
-		<TextEditor
-			autosize
-			rows={1}
-			className="article-block-image-description"
-			value={block.imageAlt ?? ''}
-			onInput={(event) =>
-				onUpdate(block.id, {
-					imageAlt: (event.currentTarget as HTMLTextAreaElement).value
-				})}
-			placeholder="Alt text"
-		/>
-	</div>
-</div>
+<VStack gap={10}>
+	<Image
+		src={block.imageURL}
+		alt={block.imageAlt ?? titleFallback}
+		fit="cover"
+		aspectRatio="4 / 3"
+	/>
 
-<style>
-	.article-block-image {
-		display: grid;
-		gap: 1rem;
-	}
-
-	:global(.article-block-image-description) {
-		border: 0;
-		background: transparent;
-		padding: 0;
-		color: #3f3f46;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-
-	:global(.article-block-image-description::placeholder) {
-		color: #d4d4d8;
-	}
-</style>
+	<TextEditor
+		as="paragraph"
+		autosize
+		rows={1}
+		value={block.imageAlt ?? ''}
+		onInput={(event) =>
+			onUpdate(block.id, {
+				imageAlt: (event.currentTarget as HTMLTextAreaElement).value
+			})}
+	/>
+</VStack>

package/dist/components/Library/ArticleEditor/Blocks/Image.svelte.d.ts

@@ -1,3 +1,4 @@
+import Image from '../../Image';
 import type { BlockDraft } from '../types.js';
 type $$ComponentProps = {
     block: BlockDraft;

package/dist/components/Library/ArticleEditor/Blocks/List.svelte

@@ -66,6 +66,7 @@
 		{#each block.items ?? [] as item, index}
 			<li class="article-editor-list-item pl-2">
 				<TextEditor
+					as="paragraph"
 					autosize
 					rows={1}
 					value={item}
@@ -75,7 +76,6 @@
 					shouldFocus={focusItemIndex === index}
 					focusPosition={focusItemIndex === index ? focusPosition : null}
 					{onFocused}
-					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 					placeholder="List item"
 				/>
 			</li>
@@ -88,6 +88,7 @@
 		{#each block.items ?? [] as item, index}
 			<li class="article-editor-list-item pl-2">
 				<TextEditor
+					as="paragraph"
 					autosize
 					rows={1}
 					value={item}
@@ -97,7 +98,6 @@
 					shouldFocus={focusItemIndex === index}
 					focusPosition={focusItemIndex === index ? focusPosition : null}
 					{onFocused}
-					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 					placeholder="List item"
 				/>
 			</li>

package/dist/components/Library/ArticleEditor/Blocks/Paragraph.svelte

@@ -26,6 +26,7 @@
 </script>
 
 <TextEditor
+	as="paragraph"
 	autosize
 	rows={1}
 	value={block.text ?? ''}
@@ -74,6 +75,5 @@
 	{shouldFocus}
 	{focusPosition}
 	{onFocused}
-	className="text-[17px] leading-8 text-zinc-700 placeholder:text-zinc-300"
 	placeholder="Type something thoughtful..."
 />

package/dist/components/Library/ArticleEditor/Blocks/index.d.ts

@@ -2,7 +2,6 @@ export { default as Code } from './Code.svelte';
 export { default as FAQ } from './FAQ.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as Image } from './Image.svelte';
-export { default as ImagePreview } from './ImagePreview.svelte';
 export { default as List } from './List.svelte';
 export { default as Paragraph } from './Paragraph.svelte';
 export { default as Table } from './Table.svelte';

package/dist/components/Library/ArticleEditor/Blocks/index.js

@@ -2,7 +2,6 @@ export { default as Code } from './Code.svelte';
 export { default as FAQ } from './FAQ.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as Image } from './Image.svelte';
-export { default as ImagePreview } from './ImagePreview.svelte';
 export { default as List } from './List.svelte';
 export { default as Paragraph } from './Paragraph.svelte';
 export { default as Table } from './Table.svelte';

package/dist/components/Library/AsyncButton/AsyncButton.demo.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'AsyncButton',
+		name: 'Async Button',
 		description: 'Async action button with loading and error states.'
 	};
 </script>
@@ -16,8 +16,4 @@
 	};
 </script>
 
-<AsyncButton
-	icon={SaveIcon}
-	label="Run async action"
-	action={runDemo}
-/>
+<AsyncButton icon={SaveIcon} label="Run async action" action={runDemo} />

package/dist/components/Library/AsyncButton/AsyncButton.svelte

@@ -2,10 +2,10 @@
 	import { CircleAlertIcon } from '@lucide/svelte';
 	import type { Component } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { tooltip } from '../../../actions/tooltip';
 	import Button from '../Button';
 	import Spinner from '../Spinner';
 	import { extractStyleProps, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		icon?: Component<{ class?: string; size?: number | string }>;
@@ -19,6 +19,7 @@
 		iconSize?: number | string;
 		labelColor?: string;
 	} & StyleProps &
+		TooltipProps &
 		Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 
 	let {
@@ -32,6 +33,7 @@
 		iconColor,
 		iconSize,
 		labelColor,
+		tooltip,
 		disabled = false,
 		type = 'button',
 		...restProps
@@ -48,9 +50,9 @@
 	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
 	const buttonStyleProps = $derived({
 		...styleProps,
-		background: styleProps.background ?? 'var(--sveltely-active-color)',
-		borderColor: styleProps.borderColor ?? 'var(--sveltely-active-color)',
-		color: styleProps.color ?? 'var(--sveltely-background-color)'
+		background: styleProps.background ?? 'var(--sveltely-control-active-color)',
+		borderColor: styleProps.borderColor ?? 'var(--sveltely-control-active-color)',
+		color: styleProps.color ?? 'var(--sveltely-control-background-color)'
 	});
 
 	const handleClick = async () => {
@@ -81,6 +83,7 @@
 		if (error instanceof Error && error.message.trim().length > 0) return error.message;
 		return 'Something went wrong';
 	});
+	const resolvedTooltip = $derived(errorLabel ? { label: errorLabel } : tooltip);
 
 	const toRem = (value: number | string | undefined) =>
 		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
@@ -106,10 +109,11 @@
 	});
 </script>
 
-<span use:tooltip={{ label: errorLabel ?? '', disabled: !errorLabel }} class="async-button">
+<span class="async-button">
 	<Button
 		{type}
 		{...buttonStyleProps}
+		tooltip={resolvedTooltip}
 		disabled={effectiveDisabled}
 		aria-busy={effectiveLoading}
 		aria-label={variant === 'iconOnly' ? label : undefined}

package/dist/components/Library/AsyncButton/AsyncButton.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     icon?: Component<{
         class?: string;
@@ -15,7 +16,7 @@ type Props = {
     iconColor?: string;
     iconSize?: number | string;
     labelColor?: string;
-} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
+} & StyleProps & TooltipProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 declare const AsyncButton: Component<Props, {}, "error">;
 type AsyncButton = ReturnType<typeof AsyncButton>;
 export default AsyncButton;

package/dist/components/Library/Button/Button.demo.svelte

@@ -1,27 +1,12 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with composable content.',
-		columnSpan: 2
+		description: 'Basic button component.'
 	};
 </script>
 
 <script lang="ts">
-	import { SaveIcon } from '@lucide/svelte';
 	import Button from './Button.svelte';
-	import HStack from '../HStack';
 </script>
 
-<HStack align="center" gap={7.5}>
-	<Button label="Default" />
-	<Button
-		label="Solid"
-		background="var(--sveltely-active-color)"
-		borderColor="var(--sveltely-active-color)"
-		color="var(--sveltely-background-color)"
-	/>
-	<Button>
-		<SaveIcon />
-		<span>With icon</span>
-	</Button>
-</HStack>
+<Button label="Button" />

package/dist/components/Library/Button/Button.demo.svelte.d.ts

@@ -1,7 +1,6 @@
 export declare const demo: {
     name: string;
     description: string;
-    columnSpan: number;
 };
 import Button from './Button.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {