@svadmin/ui 0.64.0 → 0.65.0

package/dist/components/KanbanBoard.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Plus, GripVertical } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+    assignee?: { name: string; avatar?: string };
+    dueDate?: string;
+  }
+
+  export interface KanbanColumn {
+    id: string;
+    title: string;
+    colorBadge?: string;
+  }
+
+  interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    allowAddCard?: boolean;
+    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardclick?: (card: KanbanCard) => void;
+    oncardadd?: (columnId: string, title: string) => void;
+    class?: string;
+  }
+
+  let {
+    columns = [],
+    cards = $bindable([]),
+    allowAddCard = true,
+    oncardmove,
+    oncardclick,
+    oncardadd,
+    class: className = '',
+  }: Props = $props();
+
+  let draggedCardId = $state<string | null>(null);
+  let addingColumnId = $state<string | null>(null);
+  let newCardTitle = $state('');
+
+  function handleDragStart(e: DragEvent, cardId: string) {
+    draggedCardId = cardId;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', cardId);
+    }
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  function handleDrop(targetColId: string) {
+    if (!draggedCardId) return;
+    const card = cards.find((c) => c.id === draggedCardId);
+    if (card && card.columnId !== targetColId) {
+      cards = cards.map((c) =>
+        c.id === draggedCardId ? { ...c, columnId: targetColId } : c
+      );
+      oncardmove?.(draggedCardId, targetColId);
+    }
+    draggedCardId = null;
+  }
+
+  function submitAddCard(columnId: string) {
+    if (!newCardTitle.trim()) {
+      addingColumnId = null;
+      return;
+    }
+    const newCard: KanbanCard = {
+      id: `k_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+      title: newCardTitle.trim(),
+      columnId,
+    };
+    cards = [...cards, newCard];
+    oncardadd?.(columnId, newCardTitle.trim());
+    newCardTitle = '';
+    addingColumnId = null;
+  }
+
+  function getPriorityClass(priority?: string) {
+    switch (priority) {
+      case 'urgent':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'high':
+        return 'bg-warning/15 text-warning border-warning/30';
+      case 'medium':
+        return 'bg-primary/10 text-primary border-primary/20';
+      default:
+        return 'bg-muted text-muted-foreground border-border/40';
+    }
+  }
+</script>
+
+<div class={cn('flex gap-4 overflow-x-auto pb-4 text-xs select-none', className)}>
+  {#each columns as col (col.id)}
+    {@const colCards = cards.filter((c) => c.columnId === col.id)}
+    <div
+      role="region"
+      aria-label={col.title}
+      class="flex flex-col w-72 shrink-0 rounded-xl border border-border/70 bg-card/60 shadow-xs max-h-[80vh]"
+      ondragover={handleDragOver}
+      ondrop={() => handleDrop(col.id)}
+    >
+      <!-- Column Header -->
+      <div class="flex items-center justify-between p-3 border-b border-border/50">
+        <div class="flex items-center gap-2 font-semibold text-foreground">
+          <span>{col.title}</span>
+          <span class="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-mono text-muted-foreground">
+            {colCards.length}
+          </span>
+        </div>
+
+        {#if allowAddCard}
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+            onclick={() => {
+              addingColumnId = col.id;
+              newCardTitle = '';
+            }}
+          >
+            <Plus class="h-3.5 w-3.5" />
+          </Button>
+        {/if}
+      </div>
+
+      <!-- Column Card List -->
+      <div class="flex-1 overflow-y-auto p-2 space-y-2 min-h-24">
+        {#each colCards as card (card.id)}
+          <div
+            role="button"
+            tabindex="0"
+            draggable="true"
+            class={cn(
+              'group relative flex flex-col gap-2 rounded-lg border border-border/60 bg-card p-3 shadow-xs transition-all cursor-grab active:cursor-grabbing hover:border-border hover:shadow-sm text-left',
+              draggedCardId === card.id ? 'opacity-40 ring-2 ring-primary/40' : ''
+            )}
+            ondragstart={(e) => handleDragStart(e, card.id)}
+            onclick={() => oncardclick?.(card)}
+            onkeydown={(e) => { if (e.key === 'Enter') oncardclick?.(card); }}
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="font-medium text-foreground leading-snug">{card.title}</div>
+              <GripVertical class="h-3.5 w-3.5 text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+            </div>
+
+            {#if card.description}
+              <div class="text-[11px] text-muted-foreground line-clamp-2">{card.description}</div>
+            {/if}
+
+            <div class="flex flex-wrap items-center justify-between gap-1.5 pt-1 border-t border-border/40 text-[10px]">
+              <div class="flex flex-wrap items-center gap-1">
+                {#if card.priority}
+                  <Badge variant="outline" class={cn('text-[9px] px-1 py-0 uppercase font-mono font-medium', getPriorityClass(card.priority))}>
+                    {card.priority}
+                  </Badge>
+                {/if}
+                {#each card.tags ?? [] as tag (tag)}
+                  <span class="rounded bg-muted/60 px-1 py-0.5 text-muted-foreground">#{tag}</span>
+                {/each}
+              </div>
+
+              {#if card.assignee}
+                <div class="flex items-center gap-1 text-muted-foreground">
+                  <div class="flex h-4 w-4 items-center justify-center rounded-full bg-primary/20 text-[9px] font-semibold text-primary">
+                    {card.assignee.name.slice(0, 1).toUpperCase()}
+                  </div>
+                  <span class="truncate max-w-16">{card.assignee.name}</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/each}
+
+        {#if addingColumnId === col.id}
+          <div class="rounded-lg border border-primary/40 bg-card p-2.5 space-y-2 shadow-xs">
+            <textarea
+              bind:value={newCardTitle}
+              placeholder="Card title..."
+              rows={2}
+              class="w-full rounded border border-input bg-background p-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+              onkeydown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  submitAddCard(col.id);
+                } else if (e.key === 'Escape') {
+                  addingColumnId = null;
+                }
+              }}
+            ></textarea>
+            <div class="flex items-center justify-end gap-1.5">
+              <Button variant="ghost" size="sm" class="h-6 text-[11px] px-2" onclick={() => { addingColumnId = null; }}>Cancel</Button>
+              <Button size="sm" class="h-6 text-[11px] px-2" onclick={() => submitAddCard(col.id)}>Add</Button>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>

package/dist/components/KanbanBoard.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+    assignee?: {
+        name: string;
+        avatar?: string;
+    };
+    dueDate?: string;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    colorBadge?: string;
+}
+interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    allowAddCard?: boolean;
+    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardclick?: (card: KanbanCard) => void;
+    oncardadd?: (columnId: string, title: string) => void;
+    class?: string;
+}
+declare const KanbanBoard: import("svelte").Component<Props, {}, "cards">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;

package/dist/components/MasterDetailView.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Search } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    items: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    subtitleKey?: string;
+    listWidth?: string;
+    emptyText?: string;
+    itemSnippet?: Snippet<[Record<string, unknown>, boolean]>;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    selectedId = $bindable(items[0]?.id as (string | number | undefined)),
+    idKey = 'id',
+    titleKey = 'title',
+    subtitleKey = 'subtitle',
+    listWidth = 'w-72 sm:w-80',
+    emptyText = 'No items found',
+    itemSnippet,
+    detailSnippet,
+    class: className = '',
+  }: Props = $props();
+
+  let searchQuery = $state('');
+
+  const filteredItems = $derived(
+    items.filter((item) => {
+      if (!searchQuery.trim()) return true;
+      const title = String(item[titleKey] ?? '').toLowerCase();
+      const subtitle = String(item[subtitleKey] ?? '').toLowerCase();
+      const q = searchQuery.toLowerCase().trim();
+      return title.includes(q) || subtitle.includes(q);
+    })
+  );
+
+  const activeItem = $derived(
+    items.find((item) => String(item[idKey]) === String(selectedId)) ?? filteredItems[0]
+  );
+</script>
+
+<div class={cn('flex h-full min-h-[420px] rounded-xl border border-border bg-card shadow-xs overflow-hidden text-xs', className)}>
+  <!-- Master List Panel -->
+  <div class={cn('flex flex-col border-r border-border/60 bg-muted/15 shrink-0', listWidth)}>
+    <!-- Search Bar -->
+    <div class="p-3 border-b border-border/60">
+      <div class="relative">
+        <Search class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+        <input
+          type="text"
+          bind:value={searchQuery}
+          placeholder="Search items..."
+          class="h-8 w-full rounded-md border border-input bg-background pl-8 pr-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    </div>
+
+    <!-- Scrollable Items List -->
+    <div class="flex-1 overflow-y-auto divide-y divide-border/40">
+      {#each filteredItems as item (item[idKey])}
+        {@const isSelected = String(item[idKey]) === String(activeItem?.[idKey])}
+        <button
+          type="button"
+          class={cn(
+            'w-full text-left p-3 transition-colors cursor-pointer border-0 bg-transparent',
+            isSelected
+              ? 'bg-primary/10 border-l-3 border-primary text-foreground font-medium'
+              : 'hover:bg-muted/40 text-muted-foreground'
+          )}
+          onclick={() => { selectedId = item[idKey] as (string | number); }}
+        >
+          {#if itemSnippet}
+            {@render itemSnippet(item, isSelected)}
+          {:else}
+            <div class={cn('font-semibold truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+              {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+            </div>
+            {#if item[subtitleKey]}
+              <div class="text-[11px] text-muted-foreground truncate mt-0.5">
+                {item[subtitleKey]}
+              </div>
+            {/if}
+          {/if}
+        </button>
+      {/each}
+
+      {#if filteredItems.length === 0}
+        <div class="p-6 text-center text-muted-foreground">
+          {emptyText}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Detail Content Panel -->
+  <div class="flex-1 flex flex-col overflow-y-auto p-6 bg-card">
+    {#if activeItem}
+      {#if detailSnippet}
+        {@render detailSnippet(activeItem)}
+      {:else}
+        <div class="space-y-4">
+          <div class="pb-3 border-b border-border/60">
+            <h3 class="text-base font-semibold text-foreground">
+              {activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}
+            </h3>
+            {#if activeItem[subtitleKey]}
+              <p class="text-xs text-muted-foreground mt-0.5">{activeItem[subtitleKey]}</p>
+            {/if}
+          </div>
+
+          <div class="grid grid-cols-2 gap-3 text-xs">
+            {#each Object.entries(activeItem) as [k, v] (k)}
+              <div class="p-2.5 rounded-lg bg-muted/20 border border-border/40">
+                <span class="text-muted-foreground font-medium block text-[11px] mb-0.5">{k}</span>
+                <span class="font-mono text-foreground break-words">{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</span>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <div class="flex-1 flex items-center justify-center text-muted-foreground">
+        Select an item from the list to view details
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/components/MasterDetailView.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    items: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    subtitleKey?: string;
+    listWidth?: string;
+    emptyText?: string;
+    itemSnippet?: Snippet<[Record<string, unknown>, boolean]>;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+    class?: string;
+}
+declare const MasterDetailView: import("svelte").Component<Props, {}, "selectedId">;
+type MasterDetailView = ReturnType<typeof MasterDetailView>;
+export default MasterDetailView;

package/dist/components/MediaLibraryModal.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import * as Dialog from './ui/dialog/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Upload, Image as ImageIcon, Check, Search, Folder } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface MediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    type?: string;
+    category?: string;
+  }
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    multiple?: boolean;
+    selectedUrls?: string[];
+    mediaItems?: MediaItem[];
+    categories?: string[];
+    onselect?: (urls: string[]) => void;
+    onupload?: (files: File[]) => void | Promise<void>;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    title = 'Media Asset Library',
+    multiple = false,
+    selectedUrls = $bindable([]),
+    mediaItems = [],
+    categories = ['All', 'Images', 'Documents', 'Banners'],
+    onselect,
+    onupload,
+    class: className = '',
+  }: Props = $props();
+
+  let activeCategory = $state('All');
+  let searchQuery = $state('');
+  let localSelected = $state<string[]>([...selectedUrls]);
+
+  const filteredMedia = $derived(
+    mediaItems.filter((item) => {
+      const matchCat = activeCategory === 'All' || item.category === activeCategory;
+      const matchSearch = !searchQuery.trim() || item.name.toLowerCase().includes(searchQuery.toLowerCase().trim());
+      return matchCat && matchSearch;
+    })
+  );
+
+  function toggleSelect(url: string) {
+    if (multiple) {
+      if (localSelected.includes(url)) {
+        localSelected = localSelected.filter((u) => u !== url);
+      } else {
+        localSelected = [...localSelected, url];
+      }
+    } else {
+      localSelected = [url];
+    }
+  }
+
+  function handleConfirm() {
+    selectedUrls = [...localSelected];
+    onselect?.(selectedUrls);
+    open = false;
+  }
+
+  function handleFileInput(e: Event) {
+    const target = e.currentTarget as HTMLInputElement;
+    if (target.files?.length) {
+      onupload?.(Array.from(target.files));
+    }
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class={cn('sm:max-w-3xl max-h-[85vh] flex flex-col p-0 overflow-hidden text-xs', className)}>
+    <!-- Header -->
+    <Dialog.Header class="p-4 border-b border-border/60">
+      <Dialog.Title class="flex items-center gap-2">
+        <ImageIcon class="h-4 w-4 text-primary" />
+        <span>{title}</span>
+      </Dialog.Title>
+    </Dialog.Header>
+
+    <!-- Toolbar: Search & Categories -->
+    <div class="flex flex-wrap items-center justify-between gap-3 p-3 bg-muted/20 border-b border-border/60">
+      <div class="flex items-center gap-1.5 overflow-x-auto">
+        {#each categories as cat (cat)}
+          <button
+            type="button"
+            class={cn(
+              'px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer border-0',
+              activeCategory === cat
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-card text-muted-foreground hover:text-foreground hover:bg-muted/60'
+            )}
+            onclick={() => { activeCategory = cat; }}
+          >
+            {cat}
+          </button>
+        {/each}
+      </div>
+
+      <div class="flex items-center gap-2">
+        <div class="relative w-48">
+          <Search class="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            bind:value={searchQuery}
+            placeholder="Search media..."
+            class="h-7.5 w-full rounded-md border border-input bg-background pl-7.5 pr-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </div>
+
+        <label class="inline-flex">
+          <input type="file" multiple class="hidden" onchange={handleFileInput} />
+          <span class="inline-flex items-center gap-1 h-7.5 px-2.5 rounded-md bg-secondary text-secondary-foreground text-xs font-medium hover:bg-secondary/80 cursor-pointer">
+            <Upload class="h-3.5 w-3.5" />
+            Upload
+          </span>
+        </label>
+      </div>
+    </div>
+
+    <!-- Media Grid -->
+    <div class="flex-1 overflow-y-auto p-4 min-h-64">
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {#each filteredMedia as item (item.id)}
+          {@const isChosen = localSelected.includes(item.url)}
+          <button
+            type="button"
+            class={cn(
+              'group relative flex flex-col rounded-lg border text-left overflow-hidden transition-all cursor-pointer p-0 bg-card',
+              isChosen
+                ? 'border-primary ring-2 ring-primary/30 shadow-xs'
+                : 'border-border/60 hover:border-border hover:shadow-xs'
+            )}
+            onclick={() => toggleSelect(item.url)}
+          >
+            <!-- Thumbnail preview -->
+            <div class="relative h-28 w-full bg-muted/40 flex items-center justify-center overflow-hidden">
+              {#if item.type?.startsWith('image') || item.url.match(/\.(jpeg|jpg|gif|png|webp|svg)$/i)}
+                <img src={item.url} alt={item.name} class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-200" />
+              {:else}
+                <Folder class="h-8 w-8 text-muted-foreground/60" />
+              {/if}
+
+              <!-- Select Checkmark Badge -->
+              {#if isChosen}
+                <div class="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xs">
+                  <Check class="h-3 w-3" />
+                </div>
+              {/if}
+            </div>
+
+            <!-- Metadata Info -->
+            <div class="p-2 space-y-0.5">
+              <div class="font-medium text-foreground truncate">{item.name}</div>
+              <div class="flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>{item.size ?? '—'}</span>
+                {#if item.category}
+                  <Badge variant="secondary" class="text-[9px] px-1 py-0">{item.category}</Badge>
+                {/if}
+              </div>
+            </div>
+          </button>
+        {/each}
+      </div>
+
+      {#if filteredMedia.length === 0}
+        <div class="flex flex-col items-center justify-center py-16 text-muted-foreground text-center space-y-2">
+          <ImageIcon class="h-8 w-8 opacity-40" />
+          <p>No media files found</p>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    <Dialog.Footer class="p-3 border-t border-border/60 bg-muted/20 flex items-center justify-between">
+      <div class="text-muted-foreground">
+        Selected <strong class="text-foreground">{localSelected.length}</strong> file(s)
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" onclick={() => { open = false; }}>Cancel</Button>
+        <Button size="sm" disabled={localSelected.length === 0} onclick={handleConfirm}>
+          Insert Selected
+        </Button>
+      </div>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

package/dist/components/MediaLibraryModal.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface MediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    type?: string;
+    category?: string;
+}
+interface Props {
+    open?: boolean;
+    title?: string;
+    multiple?: boolean;
+    selectedUrls?: string[];
+    mediaItems?: MediaItem[];
+    categories?: string[];
+    onselect?: (urls: string[]) => void;
+    onupload?: (files: File[]) => void | Promise<void>;
+    class?: string;
+}
+declare const MediaLibraryModal: import("svelte").Component<Props, {}, "open" | "selectedUrls">;
+type MediaLibraryModal = ReturnType<typeof MediaLibraryModal>;
+export default MediaLibraryModal;