@fluix-ui/svelte 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Fluix Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ToastItem.svelte

@@ -0,0 +1,445 @@
+<script lang="ts">
+import {
+	Toaster as CoreToaster,
+	type FluixToastItem,
+	type FluixToastState,
+	TOAST_DEFAULTS,
+	type ToastMachine,
+} from "@fluix-ui/core";
+import type { Snippet } from "svelte";
+
+const WIDTH = 350;
+const HEIGHT = 40;
+const PILL_CONTENT_PADDING = 16;
+const HEADER_HORIZONTAL_PADDING_PX = 12;
+const MIN_EXPAND_RATIO = 2.25;
+const BODY_MERGE_OVERLAP = 6;
+const DISMISS_STAGE_DELAY_MS = 260;
+
+interface Props {
+	item: FluixToastItem;
+	machine: ToastMachine;
+	localState: { ready: boolean; expanded: boolean };
+	onLocalStateChange: (patch: Partial<{ ready: boolean; expanded: boolean }>) => void;
+}
+
+const { item, machine, localState, onLocalStateChange }: Props = $props();
+
+// --- Element refs ---
+let rootEl: HTMLDivElement | null = $state(null);
+let headerEl: HTMLDivElement | null = $state(null);
+let headerInnerEl: HTMLDivElement | null = $state(null);
+let contentEl: HTMLDivElement | null = $state(null);
+
+// --- Reactive measurements ---
+let pillWidth = $state(HEIGHT);
+let contentHeight = $state(0);
+let frozenExpanded = $state(HEIGHT * MIN_EXPAND_RATIO);
+
+// --- Transient flags (plain vars, NOT $state — must not trigger $effect re-runs) ---
+let hoveringFlag = false;
+let pendingDismissFlag = false;
+let dismissRequestedFlag = false;
+let dismissTimerHandle: ReturnType<typeof setTimeout> | null = null;
+
+// --- Derived values ---
+function getPillAlign(position: string): "left" | "center" | "right" {
+	if (position.includes("right")) return "right";
+	if (position.includes("center")) return "center";
+	return "left";
+}
+
+const attrs = $derived(CoreToaster.getAttrs(item, localState));
+const hasDescription = $derived(Boolean(item.description) || Boolean(item.button));
+const isLoading = $derived(item.state === "loading");
+const open = $derived(hasDescription && localState.expanded && !isLoading);
+const edge = $derived(item.position.startsWith("top") ? "bottom" : "top");
+const pillAlign = $derived(getPillAlign(item.position));
+const filterId = $derived(`fluix-gooey-${item.id.replace(/[^a-z0-9-]/gi, "-")}`);
+const roundness = $derived(item.roundness ?? TOAST_DEFAULTS.roundness);
+const blur = $derived(Math.min(10, Math.max(6, roundness * 0.45)));
+const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+
+const rawExpanded = $derived(
+	hasDescription ? Math.max(minExpanded, HEIGHT + contentHeight) : minExpanded,
+);
+
+// Freeze expanded height when open
+$effect(() => {
+	if (open) frozenExpanded = rawExpanded;
+});
+// Update frozen while open
+$effect(() => {
+	if (open) frozenExpanded = rawExpanded;
+});
+
+const expanded = $derived(open ? rawExpanded : frozenExpanded);
+const expandedContent = $derived(Math.max(0, expanded - HEIGHT));
+const expandedHeight = $derived(hasDescription ? Math.max(expanded, minExpanded) : HEIGHT);
+const resolvedPillWidth = $derived(Math.max(HEIGHT, pillWidth));
+const pillX = $derived(
+	pillAlign === "right"
+		? WIDTH - resolvedPillWidth
+		: pillAlign === "center"
+			? (WIDTH - resolvedPillWidth) / 2
+			: 0,
+);
+
+const rootStyleObj = $derived({
+	"--_h": `${open ? expanded : HEIGHT}px`,
+	"--_pw": `${resolvedPillWidth}px`,
+	"--_px": `${pillX}px`,
+	"--_ht": `translateY(${open ? (edge === "bottom" ? 3 : -3) : 0}px) scale(${open ? 0.9 : 1})`,
+	"--_co": `${open ? 1 : 0}`,
+	"--_cy": `${open ? 0 : -14}px`,
+	"--_cm": `${open ? expandedContent : 0}px`,
+	"--_by": `${open ? HEIGHT - BODY_MERGE_OVERLAP : HEIGHT}px`,
+	"--_bh": `${open ? expandedContent : 0}px`,
+	"--_bo": `${open ? 1 : 0}`,
+});
+
+// --- Helper functions ---
+function clearDismissTimer() {
+	if (dismissTimerHandle) {
+		clearTimeout(dismissTimerHandle);
+		dismissTimerHandle = null;
+	}
+}
+
+function requestDismiss() {
+	if (dismissRequestedFlag) return;
+	dismissRequestedFlag = true;
+	hoveringFlag = false;
+	pendingDismissFlag = false;
+	onLocalStateChange({ expanded: false });
+	clearDismissTimer();
+	const delay = hasDescription ? DISMISS_STAGE_DELAY_MS : 0;
+	dismissTimerHandle = setTimeout(() => {
+		machine.dismiss(item.id);
+		dismissTimerHandle = null;
+	}, delay);
+}
+
+// --- Effects ---
+
+// Apply CSS custom properties to root element
+$effect(() => {
+	const el = rootEl;
+	if (!el) return;
+	const style = rootStyleObj;
+	for (const [key, value] of Object.entries(style)) {
+		el.style.setProperty(key, value);
+	}
+});
+
+// Measure pill width (synchronous initial measure, rAF-debounced for resize)
+$effect(() => {
+	const headerElement = headerEl;
+	const headerInner = headerInnerEl;
+	if (!headerElement || !headerInner) return;
+
+	const measure = () => {
+		const cs = getComputedStyle(headerElement);
+		const horizontalPadding =
+			Number.parseFloat(cs.paddingLeft || "0") + Number.parseFloat(cs.paddingRight || "0");
+		const intrinsicWidth = headerInner.getBoundingClientRect().width;
+		pillWidth = intrinsicWidth + horizontalPadding + PILL_CONTENT_PADDING;
+	};
+
+	// Measure synchronously so pill is correct before ready transitions enable
+	measure();
+
+	let rafId = 0;
+	const observer = new ResizeObserver(() => {
+		cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(measure);
+	});
+	observer.observe(headerInner);
+
+	return () => {
+		cancelAnimationFrame(rafId);
+		observer.disconnect();
+	};
+});
+
+// Measure content height (runs after DOM update — Svelte $effect default)
+$effect(() => {
+	if (!hasDescription) {
+		contentHeight = 0;
+		return;
+	}
+	const el = contentEl;
+	if (!el) return;
+
+	const measure = () => {
+		contentHeight = el.scrollHeight;
+	};
+	measure();
+
+	let rafId = 0;
+	const observer = new ResizeObserver(() => {
+		cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(measure);
+	});
+	observer.observe(el);
+
+	return () => {
+		cancelAnimationFrame(rafId);
+		observer.disconnect();
+	};
+});
+
+// Ready timer (32ms after mount)
+$effect(() => {
+	const timer = setTimeout(() => {
+		onLocalStateChange({ ready: true });
+	}, 32);
+	return () => clearTimeout(timer);
+});
+
+// Auto-dismiss timer
+$effect(() => {
+	// Track deps for re-run
+	const id = item.id;
+	const instanceId = item.instanceId;
+	const duration = item.duration;
+	void id;
+	void instanceId;
+
+	if (duration == null || duration <= 0) return;
+
+	const timer = setTimeout(() => {
+		if (hoveringFlag) {
+			pendingDismissFlag = true;
+			return;
+		}
+		pendingDismissFlag = false;
+		requestDismiss();
+	}, duration);
+
+	return () => clearTimeout(timer);
+});
+
+// Autopilot timers
+$effect(() => {
+	if (!localState.ready) return;
+	// Track deps
+	void item.id;
+	void item.instanceId;
+
+	const timers: ReturnType<typeof setTimeout>[] = [];
+
+	if (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
+		timers.push(
+			setTimeout(() => {
+				if (dismissRequestedFlag) return;
+				if (!hoveringFlag) onLocalStateChange({ expanded: true });
+			}, item.autoExpandDelayMs),
+		);
+	}
+
+	if (item.autoCollapseDelayMs != null && item.autoCollapseDelayMs > 0) {
+		timers.push(
+			setTimeout(() => {
+				if (dismissRequestedFlag) return;
+				if (!hoveringFlag) onLocalStateChange({ expanded: false });
+			}, item.autoCollapseDelayMs),
+		);
+	}
+
+	return () => {
+		for (const t of timers) clearTimeout(t);
+	};
+});
+
+// Reset flags on instanceId change
+$effect(() => {
+	void item.instanceId;
+	hoveringFlag = false;
+	pendingDismissFlag = false;
+	dismissRequestedFlag = false;
+	clearDismissTimer();
+});
+
+// Connect DOM events
+$effect(() => {
+	const el = rootEl;
+	if (!el) return;
+
+	// Capture current item for the closure
+	const currentItem = item;
+
+	const callbacks = {
+		onExpand: () => {
+			if (currentItem.exiting || dismissRequestedFlag) return;
+			onLocalStateChange({ expanded: true });
+		},
+		onCollapse: () => {
+			if (currentItem.exiting || dismissRequestedFlag) return;
+			if (currentItem.autopilot !== false) return;
+			onLocalStateChange({ expanded: false });
+		},
+		onDismiss: () => requestDismiss(),
+		onHoverStart: () => {
+			hoveringFlag = true;
+		},
+		onHoverEnd: () => {
+			hoveringFlag = false;
+			if (pendingDismissFlag && !dismissRequestedFlag) {
+				pendingDismissFlag = false;
+				requestDismiss();
+			}
+		},
+	};
+
+	const { destroy } = CoreToaster.connect(el, callbacks, currentItem);
+	return destroy;
+});
+</script>
+
+{#snippet iconFor(state: FluixToastState)}
+	{#if state === "success"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<polyline points="20 6 9 17 4 12" />
+		</svg>
+	{:else if state === "error"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<line x1="18" y1="6" x2="6" y2="18" />
+			<line x1="6" y1="6" x2="18" y2="18" />
+		</svg>
+	{:else if state === "warning"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+			<line x1="12" y1="9" x2="12" y2="13" />
+			<line x1="12" y1="17" x2="12.01" y2="17" />
+		</svg>
+	{:else if state === "info"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<circle cx="12" cy="12" r="10" />
+			<line x1="12" y1="16" x2="12" y2="12" />
+			<line x1="12" y1="8" x2="12.01" y2="8" />
+		</svg>
+	{:else if state === "loading"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-fluix-icon="spin">
+			<line x1="12" y1="2" x2="12" y2="6" />
+			<line x1="12" y1="18" x2="12" y2="22" />
+			<line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
+			<line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
+			<line x1="2" y1="12" x2="6" y2="12" />
+			<line x1="18" y1="12" x2="22" y2="12" />
+			<line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
+			<line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
+		</svg>
+	{:else if state === "action"}
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<circle cx="12" cy="12" r="10" />
+			<polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none" />
+		</svg>
+	{/if}
+{/snippet}
+
+<div
+	bind:this={rootEl}
+	role="button"
+	tabindex="0"
+	{...attrs.root}
+>
+	<div {...attrs.canvas}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			data-fluix-svg=""
+			width={WIDTH}
+			height={expandedHeight}
+			viewBox="0 0 {WIDTH} {expandedHeight}"
+			aria-hidden="true"
+			style="position:absolute;left:0;top:0;overflow:visible;"
+		>
+			<defs>
+				<filter
+					id={filterId}
+					x="-20%" y="-20%" width="140%" height="140%"
+					color-interpolation-filters="sRGB"
+				>
+					<feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
+					<feColorMatrix
+						in="blur" type="matrix"
+						values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
+						result="goo"
+					/>
+					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
+				</filter>
+			</defs>
+			<g filter="url(#{filterId})">
+				<rect
+					data-fluix-pill=""
+					x={pillX} y={0}
+					width={resolvedPillWidth} height={HEIGHT}
+					rx={roundness} ry={roundness}
+					fill={item.fill ?? "#FFFFFF"}
+				/>
+				<rect
+					data-fluix-body=""
+					x={0} y={HEIGHT}
+					width={WIDTH} height={0}
+					rx={0} ry={0}
+					fill={item.fill ?? "#FFFFFF"}
+					opacity={0}
+				/>
+			</g>
+		</svg>
+	</div>
+
+	<div
+		bind:this={headerEl}
+		{...attrs.header}
+		style="padding-left:{HEADER_HORIZONTAL_PADDING_PX}px;padding-right:{HEADER_HORIZONTAL_PADDING_PX}px"
+	>
+		<div data-fluix-header-stack="">
+			<div
+				bind:this={headerInnerEl}
+				data-fluix-header-inner=""
+				data-layer="current"
+			>
+				<div {...attrs.badge} class={item.styles?.badge}>
+					{#if item.icon != null}
+						{#if typeof item.icon === "string"}
+							<span aria-hidden="true">{item.icon}</span>
+						{/if}
+					{:else}
+						{@render iconFor(item.state)}
+					{/if}
+				</div>
+				<span {...attrs.title} class={item.styles?.title}>
+					{item.title ?? item.state}
+				</span>
+			</div>
+		</div>
+	</div>
+
+	{#if hasDescription}
+		<div {...attrs.content}>
+			<div
+				bind:this={contentEl}
+				{...attrs.description}
+				class={item.styles?.description}
+			>
+				{#if typeof item.description === "string" || typeof item.description === "number"}
+					{String(item.description)}
+				{:else if typeof item.description === "function"}
+					{@render (item.description as Snippet)()}
+				{/if}
+
+				{#if item.button}
+					<button
+						{...attrs.button}
+						type="button"
+						class={item.styles?.button}
+						onclick={(e: MouseEvent) => { e.stopPropagation(); item.button?.onClick(); }}
+					>
+						{item.button.title}
+					</button>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/ToastItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type FluixToastItem, type ToastMachine } from "@fluix-ui/core";
+interface Props {
+    item: FluixToastItem;
+    machine: ToastMachine;
+    localState: {
+        ready: boolean;
+        expanded: boolean;
+    };
+    onLocalStateChange: (patch: Partial<{
+        ready: boolean;
+        expanded: boolean;
+    }>) => void;
+}
+declare const ToastItem: import("svelte").Component<Props, {}, "">;
+type ToastItem = ReturnType<typeof ToastItem>;
+export default ToastItem;
+//# sourceMappingURL=ToastItem.svelte.d.ts.map

package/dist/ToastItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.svelte.d.ts","sourceRoot":"","sources":["../src/ToastItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,cAAc,EAGnB,KAAK,YAAY,EACjB,MAAM,gBAAgB,CAAC;AAIxB,UAAU,KAAK;IACd,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IAClD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACpF;AAkYD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Toaster.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+import { Toaster as CoreToaster } from "@fluix-ui/core";
+import type { FluixPosition, FluixToastItem, FluixToasterConfig } from "@fluix-ui/core";
+import { untrack } from "svelte";
+import ToastItem from "./ToastItem.svelte";
+import { createFluixToasts } from "./toast.svelte.js";
+
+export interface ToasterProps {
+	config?: FluixToasterConfig;
+}
+
+const { config }: ToasterProps = $props();
+
+const store = createFluixToasts();
+
+type ToastLocalState = Record<string, { ready: boolean; expanded: boolean }>;
+const localState: ToastLocalState = $state({});
+
+// Apply config when provided
+$effect(() => {
+	if (config) store.machine.configure(config);
+});
+
+// Sync localState with toast list (in-place add/delete to avoid invalidating all entries)
+$effect(() => {
+	const toasts = store.toasts;
+	const ids = new Set(toasts.map((t) => t.id));
+	const current = untrack(() => localState);
+	// Add entries for new toasts
+	for (const t of toasts) {
+		if (!(t.id in current)) {
+			localState[t.id] = { ready: false, expanded: false };
+		}
+	}
+	// Remove entries for gone toasts
+	for (const id in current) {
+		if (!ids.has(id)) {
+			delete localState[id];
+		}
+	}
+});
+
+// Group toasts by position
+const byPosition = $derived.by(() => {
+	const grouped = new Map<FluixPosition, FluixToastItem[]>();
+	for (const toast of store.toasts) {
+		const current = grouped.get(toast.position) ?? [];
+		current.push(toast);
+		grouped.set(toast.position, current);
+	}
+	return grouped;
+});
+
+const resolvedOffset = $derived(store.config?.offset ?? config?.offset);
+const resolvedLayout = $derived(store.config?.layout ?? config?.layout ?? "stack");
+
+function resolveOffsetValue(value: number | string): string {
+	return typeof value === "number" ? `${value}px` : value;
+}
+
+function getViewportOffsetStyle(
+	offset: FluixToasterConfig["offset"],
+	position: FluixPosition,
+): string {
+	if (offset == null) return "";
+
+	let top: string | undefined;
+	let right: string | undefined;
+	let bottom: string | undefined;
+	let left: string | undefined;
+
+	if (typeof offset === "number" || typeof offset === "string") {
+		const resolved = resolveOffsetValue(offset);
+		top = resolved;
+		right = resolved;
+		bottom = resolved;
+		left = resolved;
+	} else {
+		if (offset.top != null) top = resolveOffsetValue(offset.top);
+		if (offset.right != null) right = resolveOffsetValue(offset.right);
+		if (offset.bottom != null) bottom = resolveOffsetValue(offset.bottom);
+		if (offset.left != null) left = resolveOffsetValue(offset.left);
+	}
+
+	const parts: string[] = [];
+	if (position.startsWith("top") && top) parts.push(`top:${top}`);
+	if (position.startsWith("bottom") && bottom) parts.push(`bottom:${bottom}`);
+	if (position.endsWith("right") && right) parts.push(`right:${right}`);
+	if (position.endsWith("left") && left) parts.push(`left:${left}`);
+	if (position.endsWith("center")) {
+		if (left) parts.push(`padding-left:${left}`);
+		if (right) parts.push(`padding-right:${right}`);
+	}
+	return parts.join(";");
+}
+
+function setToastLocal(id: string, patch: Partial<{ ready: boolean; expanded: boolean }>) {
+	const entry = localState[id];
+	if (entry) {
+		if (patch.ready !== undefined) entry.ready = patch.ready;
+		if (patch.expanded !== undefined) entry.expanded = patch.expanded;
+	} else {
+		localState[id] = {
+			ready: patch.ready ?? false,
+			expanded: patch.expanded ?? false,
+		};
+	}
+}
+</script>
+
+{#each [...byPosition] as [position, positionToasts] (position)}
+	<section
+		{...CoreToaster.getViewportAttrs(position, resolvedLayout)}
+		style={getViewportOffsetStyle(resolvedOffset, position)}
+	>
+		{#each positionToasts as toastItem (toastItem.instanceId)}
+			{#key toastItem.instanceId}
+				<ToastItem
+					item={toastItem}
+					machine={store.machine}
+					localState={localState[toastItem.id] ?? { ready: false, expanded: false }}
+					onLocalStateChange={(patch: Partial<{ ready: boolean; expanded: boolean }>) =>
+						setToastLocal(toastItem.id, patch)}
+				/>
+			{/key}
+		{/each}
+	</section>
+{/each}

package/dist/Toaster.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { FluixToasterConfig } from "@fluix-ui/core";
+export interface ToasterProps {
+    config?: FluixToasterConfig;
+}
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;
+//# sourceMappingURL=Toaster.svelte.d.ts.map

package/dist/Toaster.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../src/Toaster.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiC,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAMxF,MAAM,WAAW,YAAY;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AA0HD,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @fluix-ui/svelte — Svelte 5 adapter for Fluix UI components.
+ *
+ * Exports:
+ * - Toaster: component that renders all active toasts
+ * - createFluixToasts: rune-based store wrapper for core toast store
+ * - fluix: re-exported imperative API from @fluix-ui/core
+ */
+export { fluix } from "@fluix-ui/core";
+export { default as Toaster } from "./Toaster.svelte";
+export { createFluixToasts } from "./toast.svelte.js";
+export type { FluixToastOptions, FluixToastPromiseOptions, FluixPosition, FluixTheme, FluixToastState, FluixToasterConfig, } from "@fluix-ui/core";
+export type { ToasterProps } from "./Toaster.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EACX,iBAAiB,EACjB,wBAAwB,EACxB,aAAa,EACb,UAAU,EACV,eAAe,EACf,kBAAkB,GAClB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fluix-ui/svelte — Svelte 5 adapter for Fluix UI components.
+ *
+ * Exports:
+ * - Toaster: component that renders all active toasts
+ * - createFluixToasts: rune-based store wrapper for core toast store
+ * - fluix: re-exported imperative API from @fluix-ui/core
+ */
+export { fluix } from "@fluix-ui/core";
+export { default as Toaster } from "./Toaster.svelte";
+export { createFluixToasts } from "./toast.svelte.js";

package/dist/toast.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { FluixToastItem, FluixToasterConfig, ToastMachine } from "@fluix-ui/core";
+export interface FluixToastsResult {
+    readonly toasts: FluixToastItem[];
+    readonly config: FluixToasterConfig;
+    readonly machine: ToastMachine;
+}
+export declare function createFluixToasts(): FluixToastsResult;
+//# sourceMappingURL=toast.svelte.d.ts.map

package/dist/toast.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.svelte.d.ts","sourceRoot":"","sources":["../src/toast.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,IAAI,iBAAiB,CAmBrD"}

package/dist/toast.svelte.js

@@ -0,0 +1,19 @@
+import { Toaster as CoreToaster } from "@fluix-ui/core";
+export function createFluixToasts() {
+    const machine = CoreToaster.getMachine();
+    let snapshot = $state.raw(machine.store.getSnapshot());
+    $effect(() => {
+        return machine.store.subscribe(() => {
+            snapshot = machine.store.getSnapshot();
+        });
+    });
+    return {
+        get toasts() {
+            return snapshot.toasts;
+        },
+        get config() {
+            return snapshot.config;
+        },
+        machine,
+    };
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fluix-ui/svelte",
+  "version": "0.0.2",
+  "description": "Svelte 5 adapter for Fluix UI components.",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "svelte": ">=5",
+    "@fluix-ui/core": "0.0.2",
+    "@fluix-ui/css": "0.0.2"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.7.0",
+    "@fluix-ui/core": "0.0.2"
+  },
+  "scripts": {
+    "build": "svelte-package -i src",
+    "dev": "svelte-package -w -i src",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  }
+}