@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/utilities/Carousel.svelte

@@ -1,152 +1,124 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface CarouselItem {
-    id: string;
-    content: Snippet | string;
-  }
-
-  interface Props {
-    items: CarouselItem[];
-    currentIndex?: number;
-    autoplay?: boolean;
-    autoplayInterval?: number;
-    showDots?: boolean;
-    showArrows?: boolean;
-  }
-
-  let {
-    items,
-    currentIndex = $bindable(0),
-    autoplay = false,
-    autoplayInterval = 3000,
-    showDots = true,
-    showArrows = true
-  }: Props = $props();
-
-  let startX = $state(0);
-  let currentX = $state(0);
-  let isDragging = $state(false);
-
-  function goToNext() {
-    if (!items.length) return;
-    currentIndex = (currentIndex + 1) % items.length;
-  }
-
-  function goToPrev() {
-    if (!items.length) return;
-    currentIndex = (currentIndex - 1 + items.length) % items.length;
-  }
-
-  function goToIndex(index: number) {
-    if (items.length === 0 || index < 0 || index >= items.length) return;
-    currentIndex = index;
-  }
-
-  function handleTouchStart(event: TouchEvent) {
-    isDragging = true;
-    startX = event.touches[0].clientX;
-    currentX = startX;
-  }
-
-  function handleTouchMove(event: TouchEvent) {
-    if (!isDragging) return;
-    currentX = event.touches[0].clientX;
-  }
-
-  function handleTouchEnd() {
-    if (!isDragging) return;
-    if (!items.length) {
-      isDragging = false;
-      return;
-    }
-    isDragging = false;
-
-    const diff = startX - currentX;
-    const threshold = 50;
-
-    if (diff > threshold) {
-      goToNext();
-    } else if (diff < -threshold) {
-      goToPrev();
-    }
-
-    startX = 0;
-    currentX = 0;
-  }
-
-  $effect(() => {
-    if (!autoplay || items.length < 2) return;
-
-    const interval = setInterval(goToNext, autoplayInterval);
-
-    return () => {
-      clearInterval(interval);
-    };
-  });
-
-  // Clamp currentIndex when items change
-  $effect(() => {
-    if (items.length && (currentIndex < 0 || currentIndex >= items.length)) {
-      currentIndex = 0;
-    }
-  });
-</script>
-
-<div class="glass-panel rounded-lg overflow-hidden relative">
-  <div
-    class="flex transition-transform duration-300 ease-luxe"
-    style="transform: translateX(-{currentIndex * 100}%);"
-    ontouchstart={handleTouchStart}
-    ontouchmove={handleTouchMove}
-    ontouchend={handleTouchEnd}
-  >
-    {#each items as item (item.id)}
-      <div class="min-w-full flex items-center justify-center p-8">
-        {#if typeof item.content === 'string'}
-          <div class="text-text">{item.content}</div>
-        {:else}
-          {@render item.content()}
-        {/if}
-      </div>
-    {/each}
-  </div>
-
-  {#if showArrows && items.length}
-    <button
-      type="button"
-      onclick={goToPrev}
-      class="absolute left-4 top-1/2 -translate-y-1/2 glass-panel rounded-full p-2 text-text hover:accent-glow transition-all"
-      aria-label="Previous item"
-    >
-      <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="M15 19l-7-7 7-7" />
-      </svg>
-    </button>
-
-    <button
-      type="button"
-      onclick={goToNext}
-      class="absolute right-4 top-1/2 -translate-y-1/2 glass-panel rounded-full p-2 text-text hover:accent-glow transition-all"
-      aria-label="Next item"
-    >
-      <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="M9 5l7 7-7 7" />
-      </svg>
-    </button>
-  {/if}
-
-  {#if showDots && items.length}
-    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
-      {#each items as item, index (item.id)}
-        <button
-          type="button"
-          onclick={() => goToIndex(index)}
-          class="w-2 h-2 rounded-full transition-all {index === currentIndex ? 'accent-glow bg-accent w-8' : 'bg-text-muted'}"
-          aria-label="Go to item {index + 1}"
-        >
-        </button>
-      {/each}
-    </div>
-  {/if}
-</div>
+<script lang="ts">let { items, currentIndex = $bindable(0), autoplay = false, autoplayInterval = 3000, showDots = true, showArrows = true } = $props();
+let startX = $state(0);
+let currentX = $state(0);
+let isDragging = $state(false);
+function goToNext() {
+    if (!items.length)
+        return;
+    currentIndex = (currentIndex + 1) % items.length;
+}
+function goToPrev() {
+    if (!items.length)
+        return;
+    currentIndex = (currentIndex - 1 + items.length) % items.length;
+}
+function goToIndex(index) {
+    if (items.length === 0 || index < 0 || index >= items.length)
+        return;
+    currentIndex = index;
+}
+function handleTouchStart(event) {
+    isDragging = true;
+    startX = event.touches[0].clientX;
+    currentX = startX;
+}
+function handleTouchMove(event) {
+    if (!isDragging)
+        return;
+    currentX = event.touches[0].clientX;
+}
+function handleTouchEnd() {
+    if (!isDragging)
+        return;
+    if (!items.length) {
+        isDragging = false;
+        return;
+    }
+    isDragging = false;
+    const diff = startX - currentX;
+    const threshold = 50;
+    if (diff > threshold) {
+        goToNext();
+    }
+    else if (diff < -threshold) {
+        goToPrev();
+    }
+    startX = 0;
+    currentX = 0;
+}
+$effect(() => {
+    if (!autoplay || items.length < 2)
+        return;
+    const interval = setInterval(goToNext, autoplayInterval);
+    return () => {
+        clearInterval(interval);
+    };
+});
+// Clamp currentIndex when items change
+$effect(() => {
+    if (items.length && (currentIndex < 0 || currentIndex >= items.length)) {
+        currentIndex = 0;
+    }
+});
+export {};
+</script>
+
+<div class="relative">
+  <div class="panel-raised rounded-[var(--radius-lg)] overflow-hidden">
+    <div
+      class="flex transition-transform duration-300 ease-luxe"
+      style="transform: translateX(-{currentIndex * 100}%);"
+      ontouchstart={handleTouchStart}
+      ontouchmove={handleTouchMove}
+      ontouchend={handleTouchEnd}
+    >
+    {#each items as item (item.id)}
+      <div class="min-w-full flex items-center justify-center p-8">
+        {#if typeof item.content === 'string'}
+          <div class="text-text">{item.content}</div>
+        {:else}
+          {@render item.content()}
+        {/if}
+      </div>
+    {/each}
+    </div>
+  </div>
+
+  {#if showArrows && items.length}
+    <button
+      type="button"
+      onclick={goToPrev}
+      class="absolute left-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-full p-2 text-text hover:accent-glow transition-all"
+      aria-label="Previous item"
+    >
+      <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="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+
+    <button
+      type="button"
+      onclick={goToNext}
+      class="absolute right-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-full p-2 text-text hover:accent-glow transition-all"
+      aria-label="Next item"
+    >
+      <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="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  {/if}
+
+  {#if showDots && items.length}
+    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+      {#each items as item, index (item.id)}
+        <button
+          type="button"
+          onclick={() => goToIndex(index)}
+          class="w-2 h-2 rounded-full transition-all {index === currentIndex ? 'accent-glow bg-accent w-8' : 'bg-text-muted'}"
+          aria-label="Go to item {index + 1}"
+        >
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/utilities/Collapse.svelte

@@ -1,60 +1,46 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    open: boolean;
-    title: string;
-    children?: Snippet;
-    onToggle?: () => void;
-  }
-
-  let { open, title, children, onToggle }: Props = $props();
-
-  let contentElement = $state<HTMLDivElement>();
-  let openLocal = $state(open);
-
-  const headerId = createId('collapse-header');
-  const contentId = createId('collapse-content');
-
-  function toggleLocal() {
-    openLocal = !openLocal;
-  }
-
-  let effectiveOpen = $derived(onToggle ? open : openLocal);
-  let maxHeight = $derived(effectiveOpen && contentElement ? `${contentElement.scrollHeight}px` : '0px');
-</script>
-
-<div class="border border-border rounded-md overflow-hidden {effectiveOpen ? 'glass-panel' : ''}">
-  <button
-    id={headerId}
-    type="button"
-    onclick={onToggle ?? toggleLocal}
-    class="w-full flex items-center justify-between p-4 text-left text-text font-medium hover:bg-base-3 transition-colors"
-    aria-expanded={effectiveOpen}
-    aria-controls={contentId}
-  >
-    <span>{title}</span>
-    <svg
-      class="w-5 h-5 transition-transform duration-300 ease-luxe {effectiveOpen ? 'rotate-180' : ''}"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-    </svg>
-  </button>
-
-  <div
-    bind:this={contentElement}
-    id={contentId}
-    class="overflow-hidden transition-[max-height] duration-300 ease-luxe"
-    style="max-height: {maxHeight};"
-    role="region"
-    aria-labelledby={headerId}
-  >
-    <div class="p-4 text-text-soft border-t border-border">
-      {@render children?.()}
-    </div>
-  </div>
-</div>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open, title, children, onToggle } = $props();
+let contentElement = $state();
+let openLocal = $state(open);
+const headerId = createId('collapse-header');
+const contentId = createId('collapse-content');
+function toggleLocal() {
+    openLocal = !openLocal;
+}
+let effectiveOpen = $derived(onToggle ? open : openLocal);
+let maxHeight = $derived(effectiveOpen && contentElement ? `${contentElement.scrollHeight}px` : '0px');
+</script>
+
+<div class="border border-border rounded-md overflow-hidden {effectiveOpen ? 'panel-raised' : ''}">
+  <button
+    id={headerId}
+    type="button"
+    onclick={onToggle ?? toggleLocal}
+    class="w-full flex items-center justify-between p-4 text-left text-text font-medium hover:bg-base-3 transition-colors"
+    aria-expanded={effectiveOpen}
+    aria-controls={contentId}
+  >
+    <span>{title}</span>
+    <svg
+      class="w-5 h-5 transition-transform duration-300 ease-luxe {effectiveOpen ? 'rotate-180' : ''}"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+  </button>
+
+  <div
+    bind:this={contentElement}
+    id={contentId}
+    class="overflow-hidden transition-[max-height] duration-300 ease-luxe"
+    style="max-height: {maxHeight};"
+    role="region"
+    aria-labelledby={headerId}
+  >
+    <div class="p-4 text-text-soft border-t border-border">
+      {@render children?.()}
+    </div>
+  </div>
+</div>

package/dist/components/utilities/Hero.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">"use strict";
+let { title, text, features, children, class: className = '', ...restProps } = $props();
+</script>
+
+<div class="hero-section {className}" {...restProps}>
+	{#if title}
+		<div class="mb-4">
+			{@render title()}
+		</div>
+	{/if}
+
+	{#if text}
+		<div class="mb-8 mx-auto max-w-3xl">
+			{@render text()}
+		</div>
+	{/if}
+
+	{#if features}
+		<div class="feature-tags">
+			{@render features()}
+		</div>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.feature-tags {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+		margin-top: 2rem;
+	}
+
+	.hero-section {
+		text-align: center;
+		padding-bottom: 3rem;
+		margin-bottom: 3rem;
+	}</style>

package/dist/components/utilities/Hero.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: import('svelte').Snippet;
+    text?: import('svelte').Snippet;
+    features?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/utilities/Portal.svelte

@@ -1,72 +1,47 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  /**
-   * Portal component - teleports content to a different DOM location.
-   * 
-   * **Focus Management**: This component handles DOM manipulation only.
-   * For focus-sensitive content (modals, drawers, toasts), the parent component
-   * should manage focus using the patterns from Modal.svelte and Drawer.svelte:
-   * - Store previousFocus before opening
-   * - Focus appropriate element after mount
-   * - Restore focus on cleanup
-   * 
-   * **Stacking Coordination**: Multiple portals can coexist. For z-index stacking,
-   * manage via CSS classes on the portal children or implement a portal manager.
-   */
-  interface Props {
-    target?: HTMLElement | string;
-    children?: Snippet;
-  }
-
-  let { target = 'body', children }: Props = $props();
-
-  let mountElement = $state<HTMLElement | null>(null);
-
-  function portal(node: HTMLElement, currentTarget: HTMLElement) {
-    currentTarget.appendChild(node);
-    return {
-      update(newTarget: HTMLElement) {
-        // Handle target prop changes by moving node to new parent
-        if (newTarget !== currentTarget) {
-          newTarget.appendChild(node);
-        }
-      },
-      destroy() {
-        if (node.parentNode) {
-          node.parentNode.removeChild(node);
-        }
-      }
-    };
-  }
-
-  $effect(() => {
-    if (typeof document === 'undefined') return;
-
-    // Resolve target element
-    const targetElement = typeof target === 'string'
-      ? document.querySelector<HTMLElement>(target)
-      : target;
-
-    if (!targetElement) return;
-
-    // Create container div
-    const container = document.createElement('div');
-    targetElement.appendChild(container);
-    mountElement = container;
-
-    return () => {
-      // Cleanup: remove container from DOM
-      container.remove();
-      mountElement = null;
-    };
-  });
-</script>
-
-{#if mountElement}
-  {#if children}
-    <div use:portal={mountElement}>
-      {@render children()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts">let { target = 'body', children } = $props();
+let mountElement = $state(null);
+function portal(node, currentTarget) {
+    currentTarget.appendChild(node);
+    return {
+        update(newTarget) {
+            // Handle target prop changes by moving node to new parent
+            if (newTarget !== currentTarget) {
+                newTarget.appendChild(node);
+            }
+        },
+        destroy() {
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+        }
+    };
+}
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    // Resolve target element
+    const targetElement = typeof target === 'string'
+        ? document.querySelector(target)
+        : target;
+    if (!targetElement)
+        return;
+    // Create container div
+    const container = document.createElement('div');
+    targetElement.appendChild(container);
+    mountElement = container;
+    return () => {
+        // Cleanup: remove container from DOM
+        container.remove();
+        mountElement = null;
+    };
+});
+export {};
+</script>
+
+{#if mountElement}
+  {#if children}
+    <div use:portal={mountElement}>
+      {@render children()}
+    </div>
+  {/if}
+{/if}

package/dist/components/utilities/ScrollArea.svelte

@@ -1,41 +1,33 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    height?: string;
-    children?: Snippet;
-  }
-
-  let { height = '400px', children }: Props = $props();
-</script>
-
-<div
-  class="overflow-y-auto"
-  style="
-    height: {height};
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-accent) var(--color-base-3);
-  "
->
-  {@render children?.()}
-</div>
-
-<style>
-  div::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  div::-webkit-scrollbar-track {
-    background: var(--color-base-3);
-    border-radius: var(--radius-sm);
-  }
-
-  div::-webkit-scrollbar-thumb {
-    background: var(--color-accent);
-    border-radius: var(--radius-sm);
-  }
-
-  div::-webkit-scrollbar-thumb:hover {
-    background: var(--color-accent-soft);
-  }
-</style>
+<script lang="ts">let { height = '400px', children } = $props();
+export {};
+</script>
+
+<div
+  class="overflow-y-auto"
+  style="
+    height: {height};
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent) var(--color-base-3);
+  "
+>
+  {@render children?.()}
+</div>
+
+<style>
+  div::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  div::-webkit-scrollbar-track {
+    background: var(--color-base-3);
+    border-radius: var(--radius-sm);
+  }
+
+  div::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: var(--radius-sm);
+  }
+
+  div::-webkit-scrollbar-thumb:hover {
+    background: var(--color-accent-soft);
+  }</style>