@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/overlay/Popover.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import * as Popover from '../../components/ui/popover/index.js';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Align = 'start' | 'center' | 'end';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    trigger?: any;
+    content?: any;
+    side?: Side;
+    align?: Align;
+    open?: boolean;
+    onopenchange?: (open: boolean) => void;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/widgets/overlay/Toast.svelte

@@ -0,0 +1,91 @@
+<!-- src/lib/widgets/overlay/Toast.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { fly, fade } from 'svelte/transition';
+  import { cn } from '../../utils.js';
+  import type { ToastBus, ToastVariant } from '../../core/toast-bus.svelte.js';
+  import InfoIcon from '@lucide/svelte/icons/info';
+  import CheckIcon from '@lucide/svelte/icons/circle-check';
+  import WarnIcon from '@lucide/svelte/icons/triangle-alert';
+  import ErrorIcon from '@lucide/svelte/icons/circle-alert';
+  import XIcon from '@lucide/svelte/icons/x';
+
+  type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    position?: Position;
+    max?: number;
+  }
+
+  let { id, class: className, style, position = 'top-right', max = 5 }: Props = $props();
+
+  const bus = getContext<ToastBus | undefined>('ui-toasts');
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const visible = $derived.by(() => {
+    const recent = (bus?.toasts ?? []).slice(-max);
+    return position.startsWith('top') ? [...recent].reverse() : recent;
+  });
+
+  const positionClass = $derived(
+    position === 'top-left' ? 'top-4 left-4 items-start'
+    : position === 'bottom-right' ? 'bottom-4 right-4 items-end'
+    : position === 'bottom-left' ? 'bottom-4 left-4 items-start'
+    : 'top-4 right-4 items-end' // default top-right
+  );
+
+  function variantIcon(v: ToastVariant) {
+    return v === 'success' ? CheckIcon
+      : v === 'warning' ? WarnIcon
+      : v === 'error' ? ErrorIcon
+      : InfoIcon;
+  }
+
+  function variantTone(v: ToastVariant) {
+    return v === 'success' ? 'text-emerald-600 dark:text-emerald-400'
+      : v === 'warning' ? 'text-amber-600 dark:text-amber-400'
+      : v === 'error' ? 'text-rose-600 dark:text-rose-400'
+      : 'text-blue-600 dark:text-blue-400';
+  }
+
+  const flyOffset = $derived(position.startsWith('top') ? -16 : 16);
+</script>
+
+{#if bus}
+  <!-- z-[100] intentionally exceeds the z-50 used by dialogs so toasts stay visible while a modal is open. -->
+  <div
+    {id}
+    class={cn('fixed z-[100] flex flex-col gap-2 pointer-events-none', positionClass, className)}
+    style={styleString}
+    aria-live="polite"
+  >
+    {#each visible as toast (toast.id)}
+      {@const Icon = variantIcon(toast.variant)}
+      <div
+        class="pointer-events-auto flex items-start gap-2 rounded-md border border-border bg-background px-3 py-2 shadow-lg min-w-[220px] max-w-[360px]"
+        aria-atomic="true"
+        in:fly={{ y: flyOffset, duration: 200 }}
+        out:fade={{ duration: 150 }}
+      >
+        <span class={cn('mt-0.5', variantTone(toast.variant))}>
+          <Icon size={16} />
+        </span>
+        <p class="text-sm leading-snug flex-1">{toast.message}</p>
+        <button
+          type="button"
+          class="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Dismiss"
+          onclick={() => bus.dismiss(toast.id)}
+        >
+          <XIcon size={14} />
+        </button>
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/widgets/overlay/Toast.svelte.d.ts

@@ -0,0 +1,11 @@
+type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    position?: Position;
+    max?: number;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/widgets/overlay/Tooltip.svelte

@@ -0,0 +1,70 @@
+<!--
+  src/lib/widgets/overlay/Tooltip.svelte
+  Updated 2026-09-12: the children branch gates on `children` alone, not
+  `hasChildren && children`, so a hand-written Svelte caller that passes
+  children renders them. Gating on `hasChildren` here would drop the
+  fallback branch below; NodeRenderer now only passes `children` when the
+  spec node actually has default kids, which makes the snippet truthful.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { TEXT_TRIGGER } from '../../components/ui/trigger.js';
+  import InfoIcon from '@lucide/svelte/icons/info';
+  import * as Tooltip from '../../components/ui/tooltip/index.js';
+  import NodeRenderer from '../../components/NodeRenderer.svelte';
+
+  type Side = 'top' | 'right' | 'bottom' | 'left';
+  type Align = 'start' | 'center' | 'end';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Trigger as a Ripple spec node, or a plain string. Snippet children
+     *  win when provided. */
+    trigger?: any;
+    /** Tooltip body text (text-only by design — use popover for richer content). */
+    content?: string;
+    side?: Side;
+    align?: Align;
+    /** Open delay in ms. */
+    delay?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let {
+    id, class: className, style, trigger, content,
+    side = 'top', align = 'center', delay = 200,
+    children, hasChildren = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const triggerIsString = $derived(typeof trigger === 'string');
+  const triggerIsSpec = $derived(
+    trigger != null && typeof trigger === 'object' && !Array.isArray(trigger)
+  );
+</script>
+
+<Tooltip.Provider delayDuration={delay}>
+  <Tooltip.Root>
+    <Tooltip.Trigger {id} class={cn(!children && triggerIsString && TEXT_TRIGGER, className)} style={styleString}>
+      {#if children}
+        {@render children()}
+      {:else if triggerIsString}
+        {trigger}<InfoIcon size={14} aria-hidden="true" />
+      {:else if triggerIsSpec}
+        <NodeRenderer node={trigger} />
+      {/if}
+    </Tooltip.Trigger>
+    {#if content}
+      <Tooltip.Content {side} {align}>
+        {content}
+      </Tooltip.Content>
+    {/if}
+  </Tooltip.Root>
+</Tooltip.Provider>

package/dist/widgets/overlay/Tooltip.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import * as Tooltip from '../../components/ui/tooltip/index.js';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Align = 'start' | 'center' | 'end';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Trigger as a Ripple spec node, or a plain string. Snippet children
+     *  win when provided. */
+    trigger?: any;
+    /** Tooltip body text (text-only by design — use popover for richer content). */
+    content?: string;
+    side?: Side;
+    align?: Align;
+    /** Open delay in ms. */
+    delay?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/widgets/overlay/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file overlay/index.ts
+ * @description Barrel export for overlay widgets (confirm dialogs, etc.).
+ * @changes
+ *   - Initial creation alongside ConfirmDialog for Phase B flow-actions
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as HoverCard } from './HoverCard.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as NotificationCenter } from './NotificationCenter.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { default as Coachmark } from './Coachmark.svelte';

package/dist/widgets/overlay/index.js

@@ -0,0 +1,18 @@
+/**
+ * @file overlay/index.ts
+ * @description Barrel export for overlay widgets (confirm dialogs, etc.).
+ * @changes
+ *   - Initial creation alongside ConfirmDialog for Phase B flow-actions
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as HoverCard } from './HoverCard.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as NotificationCenter } from './NotificationCenter.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { default as Coachmark } from './Coachmark.svelte';

package/dist/widgets/overlay/palette-search.d.ts

@@ -0,0 +1,33 @@
+export interface PaletteItem {
+    id: string;
+    label: string;
+    /** Section heading, e.g. "Commands", "Templates", "Elements", "Pages". */
+    group?: string;
+    /** Other words a person might type ("bin" for Delete). */
+    aliases?: string[];
+    keywords?: string[];
+    /** Where it lives in the menus, e.g. "Object > Arrange > Bring to front". */
+    menu?: string;
+    description?: string;
+    /** Shortcut hint, shown as typed, e.g. "⌘D". */
+    shortcut?: string;
+    /** Lucide icon slug. */
+    icon?: string;
+    /** Thumbnail image URL (templates, elements, pages). Wins over `icon`. */
+    thumb?: string;
+    disabled?: boolean;
+}
+export interface PreparedItem {
+    item: PaletteItem;
+    label: string;
+    aliases: string[];
+    rest: string;
+    description: string;
+}
+export declare function preparePalette(items: PaletteItem[]): PreparedItem[];
+export declare function scorePalette(p: PreparedItem, query: string): number;
+/** Ranked matches, capped at `limit`. `total` is the uncapped match count. */
+export declare function searchPalette(index: PreparedItem[], query: string, limit?: number): {
+    items: PaletteItem[];
+    total: number;
+};

package/dist/widgets/overlay/palette-search.js

@@ -0,0 +1,94 @@
+// widgets/overlay/palette-search.ts
+// The item model and ranking behind CommandPalette. Pure, so the scorer is
+// tested directly and stays fast over a large source (≈1,600 editor commands
+// plus templates): `preparePalette` lowercases every searchable field once per
+// item list, and `searchPalette` only does string tests per keystroke.
+//
+// Every whitespace-separated token must match somewhere (AND). A token scores by
+// where it lands: label prefix 80, label word start 60, label substring 40,
+// alias 0.9x those, menu path / keywords / group 25, description 10, and a
+// fuzzy in-order match on the label (up to 15, tighter is better). An exact
+// label match gets a bonus; ties go to the shorter label.
+export function preparePalette(items) {
+    const out = [];
+    for (const item of items) {
+        if (item.disabled)
+            continue;
+        out.push({
+            item,
+            label: item.label.toLowerCase(),
+            aliases: (item.aliases ?? []).map((a) => a.toLowerCase()),
+            rest: [item.menu ?? '', ...(item.keywords ?? []), item.group ?? ''].join(' ').toLowerCase(),
+            description: (item.description ?? '').toLowerCase(),
+        });
+    }
+    return out;
+}
+const WORD_START = /[\s>/._:-]/;
+function tier(text, t) {
+    const at = text.indexOf(t);
+    if (at < 0)
+        return 0;
+    if (at === 0)
+        return 80;
+    if (WORD_START.test(text[at - 1]))
+        return 60;
+    // A later occurrence may still sit on a word start ("ring" in "bring to ring").
+    for (let i = text.indexOf(t, at + 1); i > 0; i = text.indexOf(t, i + 1)) {
+        if (WORD_START.test(text[i - 1]))
+            return 60;
+    }
+    return 40;
+}
+/** In-order character match: 15 for a contiguous run, less as it spreads out. */
+function fuzzy(text, t) {
+    let i = 0;
+    let first = -1;
+    let last = -1;
+    for (let k = 0; k < text.length && i < t.length; k++) {
+        if (text[k] === t[i]) {
+            if (first < 0)
+                first = k;
+            last = k;
+            i++;
+        }
+    }
+    if (i < t.length)
+        return 0;
+    const spread = last - first + 1 - t.length;
+    return Math.max(1, 15 - spread);
+}
+export function scorePalette(p, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return 1;
+    let total = 0;
+    for (const t of q.split(/\s+/)) {
+        let best = tier(p.label, t);
+        for (const a of p.aliases)
+            best = Math.max(best, tier(a, t) * 0.9);
+        if (best < 25 && p.rest.includes(t))
+            best = 25;
+        if (best < 10 && p.description.includes(t))
+            best = 10;
+        if (best === 0)
+            best = fuzzy(p.label, t);
+        if (best === 0)
+            return 0;
+        total += best;
+    }
+    if (p.label === q)
+        total += 50;
+    return total - p.label.length * 0.01;
+}
+/** Ranked matches, capped at `limit`. `total` is the uncapped match count. */
+export function searchPalette(index, query, limit = 50) {
+    const hits = [];
+    for (const p of index) {
+        const s = scorePalette(p, query);
+        if (s > 0)
+            hits.push({ item: p.item, s });
+    }
+    hits.sort((a, b) => b.s - a.s);
+    return { items: hits.slice(0, limit).map((h) => h.item), total: hits.length };
+}

package/dist/widgets/premium/AnimatedBeam.svelte

@@ -0,0 +1,63 @@
+<!--
+  @file widgets/premium/AnimatedBeam.svelte
+  @description An SVG curved path with an animated gradient stroke that flows
+    between two anchors. Pure SVG + CSS (Tier 0 — no JS engine, SSR-safe). The
+    curve is self-contained (viewBox-relative); a host that needs measured
+    endpoints can overlay it absolutely. The flowing pulse is a CSS
+    stroke-dashoffset keyframe.
+  @provenance Adapted from aceternity.sveltekit.io (MIT — Svelte Aceternity
+    port). Ripple-shaped; MIT preserved.
+  @created 2026-05-30 — RFC 12 premium pack.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    /** Seconds per flow. Default 4. */
+    duration?: number;
+    /** Arc height (viewBox units, negative bows up). Default -40. */
+    curvature?: number;
+    /** Gradient start colour. Default '#18CCFC'. */
+    gradientStart?: string;
+    /** Gradient stop colour. Default '#AE48FF'. */
+    gradientStop?: string;
+  }
+  let { id, class: className, style, duration = 4, curvature = -40, gradientStart = '#18CCFC', gradientStop = '#AE48FF' }: Props = $props();
+  const styleString = $derived([
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : '',
+    `--beam-duration:${duration}s`,
+  ].filter(Boolean).join(';'));
+  // A horizontal quadratic curve across the viewBox, bowed by `curvature`.
+  const path = $derived(`M 4 50 Q 100 ${50 + curvature} 196 50`);
+  // SSR-safe stable id: a deterministic hash of the gradient's distinguishing
+  // props, NOT Math.random() (which differs between the prerender pass and
+  // client hydration, breaking the url(#id) reference so the beam goes invisible
+  // on a prerendered Paw Site). Identical beams can safely share a gradient id.
+  function beamHash(s: string): string {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return (h >>> 0).toString(36);
+  }
+  const gradientId = $derived(`ripple-beam-grad-${id ?? beamHash(`${gradientStart}|${gradientStop}|${curvature}|${duration}`)}`);
+</script>
+
+<svg {id} data-animated-beam viewBox="0 0 200 100" fill="none" preserveAspectRatio="none" class={cn('ripple-animated-beam w-full', className)} style={styleString} aria-hidden="true">
+  <defs>
+    <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color={gradientStart} stop-opacity="0" />
+      <stop offset="50%" stop-color={gradientStart} />
+      <stop offset="100%" stop-color={gradientStop} stop-opacity="0" />
+    </linearGradient>
+  </defs>
+  <path d={path} stroke="currentColor" stroke-opacity="0.12" stroke-width="1.5" />
+  <path d={path} stroke={`url(#${gradientId})`} stroke-width="2" stroke-linecap="round" class="ripple-beam-flow" />
+</svg>
+
+<style>
+  .ripple-beam-flow {
+    stroke-dasharray: 40 220;
+    animation: ripple-beam-flow var(--beam-duration, 4s) linear infinite;
+  }
+  @keyframes ripple-beam-flow { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
+  @media (prefers-reduced-motion: reduce) { .ripple-beam-flow { animation: none; } }
+</style>

package/dist/widgets/premium/AnimatedBeam.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Seconds per flow. Default 4. */
+    duration?: number;
+    /** Arc height (viewBox units, negative bows up). Default -40. */
+    curvature?: number;
+    /** Gradient start colour. Default '#18CCFC'. */
+    gradientStart?: string;
+    /** Gradient stop colour. Default '#AE48FF'. */
+    gradientStop?: string;
+}
+declare const AnimatedBeam: import("svelte").Component<Props, {}, "">;
+type AnimatedBeam = ReturnType<typeof AnimatedBeam>;
+export default AnimatedBeam;

package/dist/widgets/premium/Aurora.svelte

@@ -0,0 +1,66 @@
+<!--
+  @file widgets/premium/Aurora.svelte
+  @description A soft, slowly drifting multi-radial-gradient backdrop rendered
+    behind its children (Tier 0 — CSS keyframe shifting gradient positions, no
+    JS engine, SSR-safe). Used as a hero/section background.
+  @provenance Adapted from aceternity.sveltekit.io (MIT — Svelte Aceternity
+    port). Ripple-shaped; MIT preserved.
+  @created 2026-05-30 — RFC 12 premium pack.
+  Updated 2026-09-12: body gate is `hasChildren || children` with an optional
+  `children?.()` call, so a hand-written Svelte caller that passes children but no
+  `hasChildren` renders them. The spec renderer's `hasChildren` path is unchanged.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    /** Gradient stops driving the aurora. Default a blue/violet/teal blend. */
+    colors?: string[];
+    /** Seconds per drift cycle (lower = faster). Default 12. */
+    speed?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+  let {
+    id, class: className, style,
+    colors = ['#3b82f6', '#8b5cf6', '#06b6d4'],
+    speed = 12,
+    children, hasChildren = false,
+  }: Props = $props();
+  const [c1, c2, c3] = $derived([colors[0] ?? '#3b82f6', colors[1] ?? '#8b5cf6', colors[2] ?? colors[0] ?? '#06b6d4']);
+  const styleString = $derived([
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : '',
+    `--aurora-speed:${speed}s`,
+    `--aurora-c1:${c1}`,
+    `--aurora-c2:${c2}`,
+    `--aurora-c3:${c3}`,
+  ].filter(Boolean).join(';'));
+</script>
+
+<div {id} class={cn('relative overflow-hidden isolate', className)} style={styleString}>
+  <div
+    data-aurora
+    aria-hidden="true"
+    class="ripple-aurora pointer-events-none absolute inset-0 -z-10"
+  ></div>
+  {#if hasChildren || children}{@render children?.()}{/if}
+</div>
+
+<style>
+  .ripple-aurora {
+    background:
+      radial-gradient(40% 50% at 20% 20%, var(--aurora-c1) 0%, transparent 60%),
+      radial-gradient(45% 55% at 80% 30%, var(--aurora-c2) 0%, transparent 60%),
+      radial-gradient(50% 60% at 50% 80%, var(--aurora-c3) 0%, transparent 60%);
+    filter: blur(60px) saturate(1.2);
+    opacity: 0.45;
+    background-size: 200% 200%;
+    animation: ripple-aurora-drift var(--aurora-speed, 12s) ease-in-out infinite alternate;
+  }
+  @keyframes ripple-aurora-drift {
+    from { background-position: 0% 50%, 100% 0%, 50% 100%; }
+    to { background-position: 100% 50%, 0% 100%, 50% 0%; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ripple-aurora { animation: none; } }
+</style>

package/dist/widgets/premium/Aurora.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Gradient stops driving the aurora. Default a blue/violet/teal blend. */
+    colors?: string[];
+    /** Seconds per drift cycle (lower = faster). Default 12. */
+    speed?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Aurora: import("svelte").Component<Props, {}, "">;
+type Aurora = ReturnType<typeof Aurora>;
+export default Aurora;

package/dist/widgets/premium/BentoGrid.svelte

@@ -0,0 +1,46 @@
+<!--
+  @file widgets/premium/BentoGrid.svelte
+  @description A bento/masonry-style feature grid: cells span 1-3 columns for a
+    varied, magazine-like layout. Pure CSS grid (Tailwind), no animation — so it
+    is SSR-safe by construction and never touches the motion engine.
+  @provenance Adapted from svelte-animations (github.com/SikandarJODD/
+    svelte-animations, MIT — Svelte Magic UI port). Ripple-shaped; MIT preserved.
+  @created 2026-05-30 — RFC 12 premium pack.
+  Updated 2026-09-12: body gate is `hasChildren || children` with an optional
+  `children?.()` call, so a hand-written Svelte caller that passes children but no
+  `hasChildren` renders them. The spec renderer's `hasChildren` path is unchanged.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  interface BentoItem { title: string; description?: string; span?: 1 | 2 | 3; }
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    /** Declarative cells. Omit to supply your own via children. */
+    items?: BentoItem[];
+    /** Column count. Default 3. */
+    columns?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+  let { id, class: className, style, items = [], columns = 3, children, hasChildren = false }: Props = $props();
+  const styleString = $derived([
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : '',
+    `--bento-cols:${columns}`,
+  ].filter(Boolean).join(';'));
+  const spanClass = (span?: 1 | 2 | 3) => (span === 3 ? 'col-span-3' : span === 2 ? 'col-span-2' : 'col-span-1');
+</script>
+
+<div {id} data-bento-grid class={cn('ripple-bento grid gap-4', className)} style={styleString}>
+  {#each items as item}
+    <div class={cn('rounded-xl border bg-card p-5 flex flex-col gap-2', spanClass(item.span))}>
+      <h3 class="font-semibold leading-tight">{item.title}</h3>
+      {#if item.description}<p class="text-sm text-muted-foreground">{item.description}</p>{/if}
+    </div>
+  {/each}
+  {#if hasChildren || children}{@render children?.()}{/if}
+</div>
+
+<style>
+  .ripple-bento { grid-template-columns: repeat(var(--bento-cols, 3), minmax(0, 1fr)); }
+</style>

package/dist/widgets/premium/BentoGrid.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface BentoItem {
+    title: string;
+    description?: string;
+    span?: 1 | 2 | 3;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Declarative cells. Omit to supply your own via children. */
+    items?: BentoItem[];
+    /** Column count. Default 3. */
+    columns?: number;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const BentoGrid: import("svelte").Component<Props, {}, "">;
+type BentoGrid = ReturnType<typeof BentoGrid>;
+export default BentoGrid;