@warkypublic/svelix 0.1.39 → 0.1.40

package/dist/components/BetterMenu/BetterMenuAsyncButton.svelte

@@ -1,34 +1,51 @@
 <script lang="ts">
-	import type { BetterMenuInstanceItem } from './types';
+  import type { Snippet } from "svelte";
+  import type { BetterMenuInstanceItem } from "./types";
 
-	export interface Props {
-		item: BetterMenuInstanceItem;
-		onClose: () => void;
-	}
+  export interface Props {
+    item: BetterMenuInstanceItem;
+    onClose: () => void;
+  }
 
-	const { item, onClose }: Props = $props();
+  const { item, onClose }: Props = $props();
 
-	let loading = $state(false);
+  let loading = $state(false);
+  function isSnippet(value: unknown): value is Snippet {
+    return typeof value === "function";
+  }
+  function isSvg(value: string): boolean {
+    return value?.trimStart?.().startsWith?.("<svg");
+  }
 
-	async function handleClick(e: MouseEvent) {
-		item.onClick?.(e);
-		if (item.onClickAsync) {
-			loading = true;
-			try {
-				await item.onClickAsync(e);
-			} finally {
-				loading = false;
-			}
-		}
-		onClose();
-	}
+  async function handleClick(e: MouseEvent) {
+    item.onClick?.(e);
+    if (item.onClickAsync) {
+      loading = true;
+      try {
+        await item.onClickAsync(e);
+      } finally {
+        loading = false;
+      }
+    }
+    onClose();
+  }
 </script>
 
 <button
-	class="w-full text-left px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2 disabled:opacity-50"
-	disabled={loading}
-	onclick={handleClick}
+  class="w-full text-left px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2 disabled:opacity-50"
+  disabled={loading}
+  onclick={handleClick}
 >
-	{#if loading}<span class="animate-spin text-xs">⟳</span>{/if}
-	{item.label}
+  {#if loading}<span class="animate-spin text-xs">⟳</span>{/if}
+  {#if item.icon}
+    {#if isSnippet(item.icon)}
+      {@render item.icon()}
+    {:else if isSvg(item.icon)}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      <span class="size-4 flex items-center">{@html item.icon}</span>
+    {:else}
+      {item.icon}
+    {/if}
+  {/if}
+  {item.label}
 </button>

package/dist/components/BetterMenu/BetterMenuAsyncButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BetterMenuInstanceItem } from './types';
+import type { BetterMenuInstanceItem } from "./types";
 export interface Props {
     item: BetterMenuInstanceItem;
     onClose: () => void;

package/dist/components/BetterMenu/types.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 export interface BetterMenuInstance {
     id: string;
     items?: Array<BetterMenuInstanceItem>;
@@ -11,6 +11,7 @@ export interface BetterMenuInstance {
 }
 export interface BetterMenuInstanceItem {
     id?: string;
+    icon?: string | Snippet;
     isDivider?: boolean;
     items?: Array<BetterMenuInstanceItem>;
     label?: string;

package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AudioPlayerProps } from '../types.js';
+  import IconAlertCircle from '../../Icons/IconAlertCircle.svelte';
   let { value, filename }: AudioPlayerProps = $props();
 
   let src = $state('');
@@ -19,9 +20,7 @@
 <div class="flex h-full w-full flex-col items-center justify-center gap-4 p-6">
   {#if err}
     <div class="flex items-center gap-2 rounded-container-token bg-error-500/10 px-4 py-3 text-sm text-error-700-300">
-      <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-      </svg>
+      <IconAlertCircle size={20} class="shrink-0" />
       {err}
     </div>
   {/if}

package/dist/components/ContentEditor/subcomponents/ImageViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ImageViewerProps } from '../types.js';
+  import IconAlertTriangle from '../../Icons/IconAlertTriangle.svelte';
   let { value, filename }: ImageViewerProps = $props();
 
   let src = $state('');
@@ -17,9 +18,7 @@
 <div class="relative flex h-full w-full items-center justify-center overflow-hidden bg-surface-50-950">
   {#if err}
     <div class="flex flex-col items-center gap-2 text-error-500">
-      <svg xmlns="http://www.w3.org/2000/svg" class="size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-      </svg>
+      <IconAlertTriangle size={40} />
       <span class="text-sm">Failed to load image</span>
     </div>
   {:else if src}

package/dist/components/ContentEditor/subcomponents/VideoPlayer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { VideoPlayerProps } from '../types.js';
+  import IconAlertCircle from '../../Icons/IconAlertCircle.svelte';
   let { value, filename }: VideoPlayerProps = $props();
 
   let src = $state('');
@@ -19,9 +20,7 @@
 <div class="flex h-full w-full flex-col items-center justify-center gap-4 bg-black p-4">
   {#if err}
     <div class="flex items-center gap-2 rounded-container-token bg-error-500/10 px-4 py-3 text-sm text-error-300">
-      <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-      </svg>
+      <IconAlertCircle size={20} class="shrink-0" />
       {err}
     </div>
   {/if}

package/dist/components/Former/FormerButtonArea.svelte

@@ -69,7 +69,7 @@
 </script>
 
 <div
-  class="flex items-center justify-center gap-2 p-2 shadow-sm w-full flex-wrap"
+  class="flex items-center justify-center gap-2 p-2 shadow-sm w-full flex-wrap pb-4"
 >
   {#if typeof onClose === "function"}
     <button
@@ -101,6 +101,7 @@
     onclick={handleSave}
   >
     {#if saving}<span class="animate-spin mr-1">⟳</span>{/if}
-    {saveIcon} {effectiveSaveTitle}
+    {saveIcon}
+    {effectiveSaveTitle}
   </button>
 </div>

package/dist/components/Former/FormerDrawer.svelte

@@ -1,139 +1,145 @@
 <script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
-	import { registerOverlay } from '../OverlayStack';
-	import Former from './Former.svelte';
-	import type { FormerProps, FormRequestType } from './types';
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
+  import { registerOverlay } from "../OverlayStack";
+  import Former from "./Former.svelte";
+  import type { FormerProps, FormRequestType } from "./types";
 
-	export interface Props extends FormerProps {
-		/**
-		 * Override the auto-generated drawer title.
-		 * When omitted the title is derived from the request type and the unique key value:
-		 *   insert  → "New Record"
-		 *   update  → "Edit Record — {key}"
-		 *   delete  → "Delete Record — {key}"
-		 */
-		title?: string;
-		/**
-		 * Width of the drawer panel.
-		 * @default '32rem'
-		 */
-		width?: string;
-	}
+  export interface Props extends FormerProps {
+    /**
+     * Override the auto-generated drawer title.
+     * When omitted the title is derived from the request type and the unique key value:
+     *   insert  → "New Record"
+     *   update  → "Edit Record — {key}"
+     *   delete  → "Delete Record — {key}"
+     */
+    title?: string;
+    /**
+     * Width of the drawer panel.
+     * @default '32rem'
+     */
+    width?: string;
+  }
 
-	let {
-		afterGet,
-		afterSave,
-		beforeSave,
-		children,
-		id,
-		keepOpen = $bindable(false),
-		layout,
-		onAPICall,
-		onChange,
-		onClose,
-		onConfirmDelete,
-		onError,
-		onOpen,
-		opened = $bindable(false),
-		primeData,
-		request = $bindable<FormRequestType>('insert'),
-		title,
-		uniqueKeyField = 'id',
-		values = $bindable<any>(undefined),
-		width = '32rem',
-	}: Props = $props();
+  let {
+    afterGet,
+    afterSave,
+    beforeSave,
+    children,
+    id,
+    keepOpen = $bindable(false),
+    layout,
+    onAPICall,
+    onChange,
+    onClose,
+    onConfirmDelete,
+    onError,
+    onOpen,
+    opened = $bindable(false),
+    primeData,
+    request = $bindable<FormRequestType>("insert"),
+    title,
+    uniqueKeyField = "id",
+    values = $bindable<any>(undefined),
+    width = "32rem",
+  }: Props = $props();
 
-	const autoTitle = $derived(
-		title ??
-			(request === 'delete'
-				? `Delete Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`
-				: request === 'insert'
-					? 'New Record'
-					: `Edit Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`)
-	);
+  const autoTitle = $derived(
+    title ??
+      (request === "delete"
+        ? `Delete Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ""}`
+        : request === "insert"
+          ? "New Record"
+          : `Edit Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ""}`),
+  );
 
-	const animBackdrop =
-		'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
-	const animContent =
-		'transition transition-discrete opacity-0 translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0';
+  const animBackdrop =
+    "transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100";
+  const animContent =
+    "transition transition-discrete opacity-0 translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0";
 
-	let backdropZ = $state(1000);
-	let contentZ = $state(1010);
+  let backdropZ = $state(1000);
+  let contentZ = $state(1010);
 
-	$effect(() => {
-		if (!opened) {
-			return;
-		}
+  $effect(() => {
+    if (!opened) {
+      return;
+    }
 
-		const overlay = registerOverlay({ kind: 'drawer', mount: 'portal' });
-		backdropZ = overlay.layer.backdrop;
-		contentZ = overlay.layer.content;
+    const overlay = registerOverlay({ kind: "drawer", mount: "portal" });
+    backdropZ = overlay.layer.backdrop;
+    contentZ = overlay.layer.content;
 
-		return () => {
-			overlay.unregister();
-			backdropZ = 1000;
-			contentZ = 1010;
-		};
-	});
+    return () => {
+      overlay.unregister();
+      backdropZ = 1000;
+      contentZ = 1010;
+    };
+  });
 </script>
 
 <Dialog
-	open={opened}
-	onOpenChange={(e) => {
-		opened = e.open;
-		if (!e.open) onClose?.();
-	}}
-	closeOnInteractOutside={false}
-	closeOnEscape={false}
-	modal
+  open={opened}
+  onOpenChange={(e) => {
+    opened = e.open;
+    if (!e.open) onClose?.();
+  }}
+  closeOnInteractOutside={false}
+  closeOnEscape={false}
+  modal
 >
-	<Portal>
-		<Dialog.Backdrop
-			class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
-			style={`z-index:${backdropZ};`}
-		/>
-		<Dialog.Positioner class="fixed inset-0 flex justify-end" style={`z-index:${contentZ};`}>
-			<Dialog.Content
-				class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token {animContent}"
-				style="width: {width}"
-			>
-				<header
-					class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-surface-300-600 shrink-0"
-				>
-					<Dialog.Title class="text-lg font-semibold">{autoTitle}</Dialog.Title>
-					<Dialog.CloseTrigger class="btn-icon btn-icon-sm preset-tonal" aria-label="Close drawer">
-						✕
-					</Dialog.CloseTrigger>
-				</header>
+  <Portal>
+    <Dialog.Backdrop
+      class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
+      style={`z-index:${backdropZ};`}
+    />
+    <Dialog.Positioner
+      class="fixed inset-0 flex justify-end"
+      style={`z-index:${contentZ};`}
+    >
+      <Dialog.Content
+        class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token  {animContent}"
+        style="width: {width}"
+      >
+        <header
+          class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-surface-300-600 shrink-0"
+        >
+          <Dialog.Title class="text-lg font-semibold">{autoTitle}</Dialog.Title>
+          <Dialog.CloseTrigger
+            class="btn-icon btn-icon-sm preset-tonal"
+            aria-label="Close drawer"
+          >
+            ✕
+          </Dialog.CloseTrigger>
+        </header>
 
-				<div class="flex-1 min-h-0 overflow-auto bg-surface-50-950">
-					<Former
-						bind:values
-						bind:opened
-						bind:request
-						bind:keepOpen
-						{afterGet}
-						{afterSave}
-						{beforeSave}
-						{children}
-						{id}
-						layout={{ buttonArea: 'bottom', ...layout }}
-						mounted={opened}
-						{onAPICall}
-						{onChange}
-						{onConfirmDelete}
-						{onError}
-						{onOpen}
-						{primeData}
-						{uniqueKeyField}
-						onClose={(data) => {
-							opened = false;
-							onClose?.(data);
-						}}
-					/>
-				</div>
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
+        <div class="flex-1 min-h-0 overflow-auto bg-surface-50-950">
+          <Former
+            bind:values
+            bind:opened
+            bind:request
+            bind:keepOpen
+            {afterGet}
+            {afterSave}
+            {beforeSave}
+            {children}
+            {id}
+            layout={{ buttonArea: "bottom", ...layout }}
+            mounted={opened}
+            {onAPICall}
+            {onChange}
+            {onConfirmDelete}
+            {onError}
+            {onOpen}
+            {primeData}
+            {uniqueKeyField}
+            onClose={(data) => {
+              opened = false;
+              onClose?.(data);
+            }}
+          />
+        </div>
+      </Dialog.Content>
+    </Dialog.Positioner>
+  </Portal>
 </Dialog>

package/dist/components/Former/FormerDrawer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FormerProps } from './types';
+import type { FormerProps } from "./types";
 export interface Props extends FormerProps {
     /**
      * Override the auto-generated drawer title.

package/dist/components/FormerControllers/InlineWrapper.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import IconAlertCircle from '../Icons/IconAlertCircle.svelte';
+	import IconAlertTriangle from '../Icons/IconAlertTriangle.svelte';
 
 	export interface Props {
 		children?: Snippet;
@@ -52,41 +54,9 @@
 						<span class="inline-flex items-center gap-1.5 text-xs font-medium text-surface-700 dark:text-surface-300">
 							{label}{#if required && isEmpty}<span class="text-error-500">*</span>{/if}
 							{#if showErrorIcon}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									width="14"
-									height="14"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									class="text-error-500"
-									aria-hidden="true"
-								>
-									<circle cx="12" cy="12" r="10"></circle>
-									<line x1="12" y1="8" x2="12" y2="12"></line>
-									<line x1="12" y1="16" x2="12.01" y2="16"></line>
-								</svg>
+								<IconAlertCircle size={14} class="text-error-500" />
 							{:else if showWarningIcon}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									width="14"
-									height="14"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									class="text-warning-500"
-									aria-hidden="true"
-								>
-									<path d="m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z"></path>
-									<line x1="12" y1="9" x2="12" y2="13"></line>
-									<line x1="12" y1="17" x2="12.01" y2="17"></line>
-								</svg>
+								<IconAlertTriangle size={14} class="text-warning-500" />
 							{/if}
 						</span>
 					{:else if label}

package/dist/components/Gridler/components/GridlerFull.svelte

@@ -345,6 +345,7 @@
           items.push({
             id: item.id,
             label: item.label,
+            icon: item.icon,
             onClick: () => {
               item.onselect?.();
               onMenuItemSelect?.(item);