@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/navigation/Tabs.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+
+  interface Tab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    tabs: Tab[];
+    activeTab?: string;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'default' | 'pills';
+    onTabChange?: (tabId: string) => void;
+  }
+
+  let {
+    tabs,
+    activeTab = $bindable(''),
+    orientation = 'horizontal',
+    variant = 'default',
+    onTabChange
+  }: Props = $props();
+
+  function handleTabClick(tabId: string, disabled?: boolean) {
+    if (disabled) return;
+    activeTab = tabId;
+    if (onTabChange) {
+      onTabChange(tabId);
+    }
+  }
+
+  const orientationClasses = {
+    horizontal: 'flex flex-row',
+    vertical: 'flex flex-col'
+  };
+
+  const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-md';
+</script>
+
+<div role="tablist" class="{orientationClasses[orientation]} gap-1 p-1">
+  {#each tabs as tab}
+    <button
+      role="tab"
+      aria-selected={activeTab === tab.id}
+      aria-disabled={tab.disabled}
+      onclick={() => handleTabClick(tab.id, tab.disabled)}
+      disabled={tab.disabled}
+      class="px-4 py-2 {radiusClass} font-body text-sm transition-all duration-300 ease-luxe {activeTab === tab.id ? 'bg-accent text-text accent-glow' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+    >
+      {tab.label}
+    </button>
+  {/each}
+</div>

package/dist/components/navigation/Tabs.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Tab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    tabs: Tab[];
+    activeTab?: string;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'default' | 'pills';
+    onTabChange?: (tabId: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/components/navigation/index.js

@@ -0,0 +1,7 @@
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/components/overlays/Alert.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    dismissible?: boolean;
+    onclose?: () => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'info',
+    title,
+    dismissible = false,
+    onclose,
+    children
+  }: Props = $props();
+
+  let visible = $state(true);
+
+  const variantClasses = {
+    info: 'border-l-4 border-accent',
+    success: 'border-l-4 border-success',
+    warning: 'border-l-4 border-warning',
+    error: 'border-l-4 border-error'
+  };
+
+  const variantTextClasses = {
+    info: 'text-accent-soft',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error'
+  };
+
+  const variantIcons = {
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+  };
+
+  const roleMap = {
+    info: 'status',
+    success: 'status',
+    warning: 'alert',
+    error: 'alert'
+  };
+
+  const ariaLiveMap = {
+    info: 'polite',
+    success: 'polite',
+    warning: 'polite',
+    error: 'assertive'
+  } satisfies Record<'info' | 'success' | 'warning' | 'error', 'polite' | 'assertive'>;
+
+  function handleClose() {
+    visible = false;
+    onclose?.();
+  }
+</script>
+
+{#if visible}
+  <div
+    class="glass-panel rounded-lg p-4 flex gap-3 {variantClasses[variant]} animate-[fade-in_0.2s_var(--ease-luxe)]"
+    role={roleMap[variant]}
+    aria-live={ariaLiveMap[variant]}
+  >
+    <div class="shrink-0 {variantTextClasses[variant]}">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={variantIcons[variant]} />
+      </svg>
+    </div>
+
+    <div class="flex-1 min-w-0">
+      {#if title}
+        <h4 class="font-semibold text-text mb-1">
+          {title}
+        </h4>
+      {/if}
+      <div class="text-sm text-text-soft">
+        {@render children?.()}
+      </div>
+    </div>
+
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={handleClose}
+        class="shrink-0 text-text-soft hover:text-text transition-colors"
+        aria-label="Dismiss alert"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}

package/dist/components/overlays/Alert.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    dismissible?: boolean;
+    onclose?: () => void;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/overlays/CommandPalette.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+
+  interface Command {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    onSelect: () => void;
+    keywords?: string[];
+  }
+
+  interface Props {
+    open?: boolean;
+    commands: Command[];
+    placeholder?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    commands,
+    placeholder = 'Search commands...'
+  }: Props = $props();
+
+  let query = $state('');
+  let selectedIndex = $state(0);
+  let inputElement = $state<HTMLInputElement>();
+  let previousFocus = $state<HTMLElement | null>(null);
+
+  const paletteId = createId('command-palette');
+
+  // Inline fuzzy matching function
+  function fuzzyMatch(text: string, search: string): boolean {
+    const searchChars = search.toLowerCase().split('');
+    const textLower = text.toLowerCase();
+    let searchIndex = 0;
+
+    for (let i = 0; i < textLower.length && searchIndex < searchChars.length; i++) {
+      if (textLower[i] === searchChars[searchIndex]) {
+        searchIndex++;
+      }
+    }
+
+    return searchIndex === searchChars.length;
+  }
+
+  let filteredCommands = $derived(
+    query.trim() === ''
+      ? commands
+      : commands.filter(cmd => {
+          // Match against label
+          if (fuzzyMatch(cmd.label, query)) return true;
+
+          // Match against keywords
+          if (cmd.keywords) {
+            return cmd.keywords.some(keyword => fuzzyMatch(keyword, query));
+          }
+
+          return false;
+        })
+  );
+
+  function handleClose() {
+    open = false;
+    query = '';
+    selectedIndex = 0;
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
+  }
+
+  function handleSelectCommand(command: Command) {
+    command.onSelect();
+    handleClose();
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') {
+      if (!filteredCommands.length) return;
+      event.preventDefault();
+      selectedIndex = (selectedIndex + 1) % filteredCommands.length;
+    } else if (event.key === 'ArrowUp') {
+      if (!filteredCommands.length) return;
+      event.preventDefault();
+      selectedIndex = (selectedIndex - 1 + filteredCommands.length) % filteredCommands.length;
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      if (filteredCommands[selectedIndex]) {
+        handleSelectCommand(filteredCommands[selectedIndex]);
+      } else if (filteredCommands.length) {
+        selectedIndex = 0;
+      }
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      handleClose();
+    }
+  }
+
+  // Reset and clamp selected index when filtered commands change
+  $effect(() => {
+    if (filteredCommands.length === 0) {
+      selectedIndex = -1;
+    } else if (selectedIndex >= filteredCommands.length || selectedIndex < 0) {
+      selectedIndex = 0;
+    }
+  });
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    
+    if (open) {
+      // Store previous focus
+      previousFocus = document.activeElement as HTMLElement;
+
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+
+      // Focus input element
+      requestAnimationFrame(() => {
+        inputElement?.focus();
+      });
+
+      return () => {
+        // Restore body scroll
+        document.body.style.overflow = '';
+
+        // Restore previous focus
+        previousFocus?.focus();
+      };
+    }
+  });
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      class="glass-panel rounded-xl shadow-deep w-full max-w-[36rem] animate-[fade-up_0.3s_var(--ease-luxe)]"
+      role="combobox"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-controls={paletteId}
+      aria-activedescendant={selectedIndex >= 0 && selectedIndex < filteredCommands.length && filteredCommands[selectedIndex] ? `cmd-${filteredCommands[selectedIndex].id}` : undefined}
+      tabindex="0"
+    >
+      <div class="p-4 border-b border-border">
+        <input
+          bind:this={inputElement}
+          bind:value={query}
+          type="text"
+          placeholder={placeholder}
+          onkeydown={handleKeyDown}
+          class="w-full bg-transparent border-none outline-none text-text text-lg placeholder:text-text-muted"
+          aria-autocomplete="list"
+        />
+      </div>
+
+      <div
+        id={paletteId}
+        role="listbox"
+        class="max-h-[400px] overflow-y-auto"
+        style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);"
+      >
+        {#if filteredCommands.length === 0}
+          <div class="p-8 text-center text-text-muted">
+            No commands found
+          </div>
+        {:else}
+          {#each filteredCommands as command, index (command.id)}
+            <button
+              id="cmd-{command.id}"
+              type="button"
+              role="option"
+              aria-selected={index === selectedIndex}
+              tabindex={index === selectedIndex ? 0 : -1}
+              onclick={() => handleSelectCommand(command)}
+              class="w-full flex items-center gap-3 p-4 text-left text-text hover:bg-base-3 transition-colors {index === selectedIndex ? 'accent-glow bg-base-3' : ''}"
+            >
+              {#if command.icon}
+                <div class="shrink-0">
+                  {@render command.icon()}
+                </div>
+              {/if}
+              <span>{command.label}</span>
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  div[role="listbox"]::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-track {
+    background: var(--color-base-3);
+    border-radius: var(--radius-sm);
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: var(--radius-sm);
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-thumb:hover {
+    background: var(--color-accent-soft);
+  }
+</style>

package/dist/components/overlays/CommandPalette.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Command {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    onSelect: () => void;
+    keywords?: string[];
+}
+interface Props {
+    open?: boolean;
+    commands: Command[];
+    placeholder?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/overlays/Drawer.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+  import ScrollArea from '../utilities/ScrollArea.svelte';
+
+  interface Props {
+    open?: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    side = 'right',
+    size = 'md',
+    title,
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    children,
+    footer
+  }: Props = $props();
+
+  let drawerElement = $state<HTMLDivElement>();
+  let previousFocus = $state<HTMLElement | null>(null);
+
+  const titleId = createId('drawer-title');
+
+  const sizeClasses = {
+    left: {
+      sm: 'max-w-[20rem]',
+      md: 'max-w-[28rem]',
+      lg: 'max-w-[36rem]'
+    },
+    right: {
+      sm: 'max-w-[20rem]',
+      md: 'max-w-[28rem]',
+      lg: 'max-w-[36rem]'
+    },
+    top: {
+      sm: 'max-h-[20rem]',
+      md: 'max-h-[28rem]',
+      lg: 'max-h-[36rem]'
+    },
+    bottom: {
+      sm: 'max-h-[20rem]',
+      md: 'max-h-[28rem]',
+      lg: 'max-h-[36rem]'
+    }
+  };
+
+  const positionClasses = {
+    left: 'left-0 top-0 h-full',
+    right: 'right-0 top-0 h-full',
+    top: 'top-0 left-0 w-full',
+    bottom: 'bottom-0 left-0 w-full'
+  };
+
+  const animationClasses = {
+    left: 'animate-[slide-in-left_0.3s_var(--ease-luxe)]',
+    right: 'animate-[slide-in-right_0.3s_var(--ease-luxe)]',
+    top: 'animate-[slide-in-top_0.3s_var(--ease-luxe)]',
+    bottom: 'animate-[slide-in-bottom_0.3s_var(--ease-luxe)]'
+  };
+
+  function handleClose() {
+    open = false;
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+      handleClose();
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (closeOnEscape && event.key === 'Escape') {
+      handleClose();
+    }
+  }
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    
+    if (open) {
+      // Store previous focus
+      previousFocus = document.activeElement as HTMLElement;
+
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+
+      // Add event listeners
+      document.addEventListener('keydown', handleEscape);
+
+      // Focus first interactive element
+      requestAnimationFrame(() => {
+        const firstInteractive = drawerElement?.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        firstInteractive?.focus();
+      });
+
+      return () => {
+        // Restore body scroll
+        document.body.style.overflow = '';
+
+        // Remove event listeners
+        document.removeEventListener('keydown', handleEscape);
+
+        // Restore previous focus
+        previousFocus?.focus();
+      };
+    }
+  });
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={drawerElement}
+      class="glass-panel shadow-deep fixed {positionClasses[side]} {sizeClasses[side][size]} {animationClasses[side]} flex flex-col"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {#if title}
+        <div class="flex items-center justify-between p-6 border-b border-border">
+          <h2 id={titleId} class="text-xl font-semibold text-text">
+            {title}
+          </h2>
+          <button
+            type="button"
+            onclick={handleClose}
+            class="text-text-soft hover:text-text transition-colors"
+            aria-label="Close drawer"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-hidden">
+        <ScrollArea height="100%">
+          <div class="p-6">
+            {@render children?.()}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {#if footer}
+        <div class="flex items-center justify-end gap-3 p-6 border-t border-border">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/overlays/Drawer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/overlays/Dropdown.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    placement = 'bottom-start',
+    children
+  }: Props = $props();
+
+  const placementClasses = {
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2'
+  };
+</script>
+
+{#if open}
+  <div
+    class="absolute {placementClasses[placement]} z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/overlays/Dropdown.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    children?: Snippet;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;