@classic-homes/theme-svelte 1.17.0 → 1.19.0

package/dist/lib/components/SortableList.svelte

@@ -0,0 +1,251 @@
+<script lang="ts" module>
+  /** Attributes to spread on the element that acts as an item's drag handle */
+  export interface SortableHandleProps {
+    type: 'button';
+    'aria-label': string;
+    'aria-roledescription': string;
+    'aria-describedby': string;
+    'aria-pressed': boolean;
+    'data-sortable-handle': string;
+    onpointerdown: (event: PointerEvent) => void;
+    onpointermove: (event: PointerEvent) => void;
+    onpointerup: (event: PointerEvent) => void;
+    onpointercancel: (event: PointerEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onblur: () => void;
+  }
+
+  export interface SortableItemContext<T> {
+    item: T;
+    index: number;
+    /** Spread on a `<button>` inside the item: `<button {...handle}>` */
+    handle: SortableHandleProps;
+    /** The item is being dragged or is picked up by the keyboard */
+    dragging: boolean;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * SortableList - a vertical list the user can reorder by drag or keyboard.
+   *
+   * Each item renders its own drag handle by spreading `handle` on a button.
+   * Pointer: press and drag the handle. Keyboard: focus the handle, press
+   * Space or Enter to pick the item up, move it with the arrow keys, press
+   * Space/Enter again to drop or Escape to put it back. Alt+Arrow moves an
+   * item in one step without picking it up. Every move is announced.
+   *
+   * The list never reorders `items` itself: it calls `onReorder(from, to)`
+   * and expects the parent to update the array.
+   */
+  interface Props {
+    items: T[];
+    /** Stable key for each item */
+    getKey: (item: T, index: number) => string | number;
+    /** Move the item at `from` so it ends up at index `to` */
+    onReorder: (from: number, to: number) => void;
+    /** Renders one item; spread `handle` on its drag-handle button */
+    item: Snippet<[SortableItemContext<T>]>;
+    /** Accessible name of the list, e.g. "Questions" */
+    label: string;
+    /** Name used in announcements and handle labels (default: the 1-based position) */
+    getItemLabel?: (item: T, index: number) => string;
+    /** Disables reordering; handles stay rendered but do nothing */
+    disabled?: boolean;
+    class?: string;
+    itemClass?: string;
+  }
+
+  let {
+    items,
+    getKey,
+    onReorder,
+    item: itemSnippet,
+    label,
+    getItemLabel = (_item: T, index: number) => `Item ${index + 1}`,
+    disabled = false,
+    class: className,
+    itemClass,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const instructionsId = `sortable-${uid}-help`;
+
+  let listEl: HTMLUListElement | undefined = $state();
+  let announcement = $state('');
+
+  // Pointer drag state
+  let dragFrom = $state<number | null>(null);
+  let dragOver = $state<number | null>(null);
+  let dragOffset = $state(0);
+  let startY = 0;
+  let rects: DOMRect[] = [];
+
+  // Keyboard pick-up state. Tracked by position (keys may be indexes), with
+  // the starting position kept for Escape.
+  let grabbed = $state<number | null>(null);
+  let grabbedFrom = 0;
+  // Set while a keyboard move re-renders the list, so the blur it causes
+  // doesn't drop the item
+  let moving = false;
+
+  function announce(message: string) {
+    // Re-set so repeated identical messages are announced again
+    announcement = '';
+    queueMicrotask(() => (announcement = message));
+  }
+
+  function positionText(index: number) {
+    return `position ${index + 1} of ${items.length}`;
+  }
+
+  // By position rather than key: the moved item is at its new index whatever
+  // the parent keys it by.
+  async function focusHandle(index: number) {
+    await tick();
+    listEl?.querySelectorAll<HTMLElement>(':scope > li [data-sortable-handle]')[index]?.focus();
+  }
+
+  async function move(from: number, to: number, keepFocus = true) {
+    if (to < 0 || to >= items.length || from === to) return;
+    const name = getItemLabel(items[from], from);
+    moving = true;
+    onReorder(from, to);
+    if (grabbed === from) grabbed = to;
+    announce(`${name} moved to ${positionText(to)}.`);
+    if (keepFocus) await focusHandle(to);
+    moving = false;
+  }
+
+  function itemShift(index: number): number {
+    if (dragFrom === null || dragOver === null) return 0;
+    if (index === dragFrom) return dragOffset;
+    const height = rects[dragFrom]?.height ?? 0;
+    const gap = rects.length > 1 ? Math.max(0, rects[1].top - rects[0].bottom) : 0;
+    if (dragFrom < dragOver && index > dragFrom && index <= dragOver) return -(height + gap);
+    if (dragFrom > dragOver && index >= dragOver && index < dragFrom) return height + gap;
+    return 0;
+  }
+
+  function endDrag(commit: boolean) {
+    const from = dragFrom;
+    const to = dragOver;
+    dragFrom = null;
+    dragOver = null;
+    dragOffset = 0;
+    rects = [];
+    if (commit && from !== null && to !== null && from !== to) void move(from, to, false);
+  }
+
+  function handleProps(index: number, key: string | number, name: string): SortableHandleProps {
+    return {
+      type: 'button',
+      'aria-label': `Reorder ${name}`,
+      'aria-roledescription': 'sortable handle',
+      'aria-describedby': instructionsId,
+      'aria-pressed': grabbed === index,
+      'data-sortable-handle': String(key),
+      onpointerdown(event) {
+        if (disabled || event.button !== 0 || !listEl) return;
+        event.preventDefault();
+        // Capture on the handle only: capturing on the list would swallow clicks
+        // on the rest of the item.
+        (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+        rects = Array.from(listEl.children, (child) => child.getBoundingClientRect());
+        startY = event.clientY;
+        dragFrom = index;
+        dragOver = index;
+        dragOffset = 0;
+      },
+      onpointermove(event) {
+        if (dragFrom === null) return;
+        dragOffset = event.clientY - startY;
+        const origin = rects[dragFrom];
+        const center = origin.top + origin.height / 2 + dragOffset;
+        // The new index is the number of other items whose midpoint is above
+        // the dragged item's midpoint.
+        dragOver = rects.filter(
+          (rect, i) => i !== dragFrom && rect.top + rect.height / 2 < center
+        ).length;
+      },
+      onpointerup() {
+        endDrag(true);
+      },
+      onpointercancel() {
+        endDrag(false);
+      },
+      onkeydown(event) {
+        if (disabled) return;
+        const picked = grabbed === index;
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          if (picked) {
+            grabbed = null;
+            announce(`${name} dropped at ${positionText(index)}.`);
+          } else {
+            grabbed = index;
+            grabbedFrom = index;
+            announce(`${name} picked up at ${positionText(index)}. Use the arrow keys to move it.`);
+          }
+        } else if (event.key === 'Escape' && picked) {
+          event.preventDefault();
+          event.stopPropagation();
+          grabbed = null;
+          if (index !== grabbedFrom) {
+            moving = true;
+            onReorder(index, grabbedFrom);
+            void focusHandle(grabbedFrom).then(() => (moving = false));
+          }
+          announce(`Reorder cancelled. ${name} is back at ${positionText(grabbedFrom)}.`);
+        } else if (
+          (picked || event.altKey) &&
+          (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+        ) {
+          event.preventDefault();
+          void move(index, event.key === 'ArrowUp' ? index - 1 : index + 1);
+        } else if (picked && (event.key === 'Home' || event.key === 'End')) {
+          event.preventDefault();
+          void move(index, event.key === 'Home' ? 0 : items.length - 1);
+        }
+      },
+      onblur() {
+        // Losing focus while picked up drops the item where it is
+        if (!moving && grabbed === index) grabbed = null;
+      },
+    };
+  }
+</script>
+
+<ul bind:this={listEl} aria-label={label} class={cn('relative', className)}>
+  {#each items as entry, index (getKey(entry, index))}
+    {@const key = getKey(entry, index)}
+    {@const dragging = dragFrom === index || grabbed === index}
+    {@const shift = itemShift(index)}
+    <li
+      class={cn(
+        'relative',
+        dragFrom !== null && dragFrom !== index && 'transition-transform duration-150',
+        dragFrom === index && 'z-10 opacity-90 shadow-lg',
+        itemClass
+      )}
+      style:transform={shift ? `translateY(${shift}px)` : undefined}
+      data-dragging={dragging || undefined}
+    >
+      {@render itemSnippet({
+        item: entry,
+        index,
+        handle: handleProps(index, key, getItemLabel(entry, index)),
+        dragging,
+      })}
+    </li>
+  {/each}
+</ul>
+
+<p id={instructionsId} class="sr-only">
+  Press Space or Enter to pick up, use the arrow keys to move, Space or Enter to drop, Escape to
+  cancel.
+</p>
+<div class="sr-only" role="status" aria-live="assertive" aria-atomic="true">{announcement}</div>

package/dist/lib/components/SortableList.svelte.d.ts

@@ -0,0 +1,64 @@
+/** Attributes to spread on the element that acts as an item's drag handle */
+export interface SortableHandleProps {
+    type: 'button';
+    'aria-label': string;
+    'aria-roledescription': string;
+    'aria-describedby': string;
+    'aria-pressed': boolean;
+    'data-sortable-handle': string;
+    onpointerdown: (event: PointerEvent) => void;
+    onpointermove: (event: PointerEvent) => void;
+    onpointerup: (event: PointerEvent) => void;
+    onpointercancel: (event: PointerEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onblur: () => void;
+}
+export interface SortableItemContext<T> {
+    item: T;
+    index: number;
+    /** Spread on a `<button>` inside the item: `<button {...handle}>` */
+    handle: SortableHandleProps;
+    /** The item is being dragged or is picked up by the keyboard */
+    dragging: boolean;
+}
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        /** Stable key for each item */
+        getKey: (item: T, index: number) => string | number;
+        /** Move the item at `from` so it ends up at index `to` */
+        onReorder: (from: number, to: number) => void;
+        /** Renders one item; spread `handle` on its drag-handle button */
+        item: Snippet<[SortableItemContext<T>]>;
+        /** Accessible name of the list, e.g. "Questions" */
+        label: string;
+        /** Name used in announcements and handle labels (default: the 1-based position) */
+        getItemLabel?: (item: T, index: number) => string;
+        /** Disables reordering; handles stay rendered but do nothing */
+        disabled?: boolean;
+        class?: string;
+        itemClass?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableList: $$IsomorphicComponent;
+type SortableList<T> = InstanceType<typeof SortableList<T>>;
+export default SortableList;

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -165,11 +165,10 @@
       : navigation
   );
 
-  // Reactive media query for mobile detection. Initialized synchronously so
-  // the first client paint doesn't flash the desktop layout (256px content
-  // margin + full-width sidebar) before an effect corrects it. Deliberately
-  // reads the initial `mobileBreakpoint` — later changes are handled by the
-  // matchMedia effect below.
+  // Reactive media query for mobile detection. Initialized synchronously so a
+  // client-only render paints the right layout at once. Deliberately reads the
+  // initial `mobileBreakpoint` — later changes are handled by the matchMedia
+  // effect below.
   // svelte-ignore state_referenced_locally
   const initialIsMobile =
     typeof window !== 'undefined' &&
@@ -179,12 +178,23 @@
     sidebarStore.setMobile(initialIsMobile);
   }
 
-  // Suppress the margin transition until after the first paint so any
-  // hydration correction snaps instead of visibly sliding.
+  // Until mounted the layout is responsive in CSS alone: the server cannot know
+  // the viewport, so a JS-sized layout would render as desktop and visibly snap
+  // to mobile on hydration. Server HTML and the hydrating render therefore share
+  // breakpoint classes; once mounted, JS state (collapse, drawer) takes over.
   let mounted = $state(false);
+  // One frame later still: lets the hand-over to JS sizing (e.g. a saved collapsed
+  // sidebar) snap instead of sliding.
+  let animate = $state(false);
 
   $effect(() => {
     mounted = true;
+    if (typeof requestAnimationFrame !== 'function') {
+      animate = true;
+      return;
+    }
+    const frame = requestAnimationFrame(() => (animate = true));
+    return () => cancelAnimationFrame(frame);
   });
 
   $effect(() => {
@@ -252,6 +262,14 @@
     isMobile ? 0 : sidebarStore.isOpen ? expandedWidth : collapsedWidth
   );
 
+  // Pre-mount responsive classes, per breakpoint (literal strings, for Tailwind)
+  const ssrClasses: Record<Breakpoint, { content: string; sidebar: string }> = {
+    sm: { content: 'sm:ml-[var(--dl-sidebar-width)]', sidebar: 'max-sm:-translate-x-full' },
+    md: { content: 'md:ml-[var(--dl-sidebar-width)]', sidebar: 'max-md:-translate-x-full' },
+    lg: { content: 'lg:ml-[var(--dl-sidebar-width)]', sidebar: 'max-lg:-translate-x-full' },
+  };
+  const ssr = $derived(ssrClasses[mobileBreakpoint]);
+
   const contentPaddingClass = $derived(
     contentPadding === 'none' ? '' : contentPadding === 'compact' ? 'p-2 lg:p-4' : 'p-4 lg:p-6'
   );
@@ -286,21 +304,25 @@
     {onPinnedChange}
     {pinIcon}
     {appId}
+    class={mounted ? undefined : ssr.sidebar}
   />
 
   <!-- Main Content Area -->
   <div
-    class="flex flex-1 flex-col {mounted
+    class="flex flex-1 flex-col {mounted ? '' : ssr.content} {animate
       ? 'transition-[margin] duration-300 motion-reduce:transition-none'
       : ''}"
-    style="margin-left: {sidebarWidth}px;"
+    style={mounted
+      ? `margin-left: ${sidebarWidth}px;`
+      : `--dl-sidebar-width: ${sidebarCollapsed ? collapsedWidth : expandedWidth}px;`}
   >
     {#if showHeader}
       <Header
-        showMenuButton={isMobile}
-        menuOpen={sidebarStore.isOpen}
+        {mobileBreakpoint}
+        showMenuButton={isMobile || !mounted}
+        menuOpen={mounted && isMobile && sidebarStore.isOpen}
         onMenuClick={() => sidebarStore.toggle()}
-        showCollapseButton={!isMobile}
+        showCollapseButton={!isMobile || !mounted}
         sidebarCollapsed={!sidebarStore.isOpen}
         onCollapseClick={() => sidebarStore.toggle()}
         title={pageTitle}

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -346,7 +346,8 @@
       >
         <svg
           class={cn(
-            'h-4 w-4 transition-transform duration-200',
+            'h-4 w-4',
+            sidebarStore.animate && 'transition-transform duration-200',
             isExpanded ? 'rotate-0' : '-rotate-90'
           )}
           fill="none"
@@ -371,7 +372,10 @@
     </div>
 
     {#if isExpanded}
-      <ul class="mt-1 space-y-1 pl-4 overflow-hidden" transition:slide={{ duration: 200 }}>
+      <ul
+        class="mt-1 space-y-1 pl-4 overflow-hidden"
+        transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
+      >
         {#each item.children ?? [] as child (child.id)}
           <li>
             {#if child.children?.length}

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -78,7 +78,8 @@
       <button
         onclick={toggleSection}
         class={cn(
-          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider rounded-md overflow-hidden',
+          // min-h-8: a 32px target (WCAG 2.5.8 asks 24px); the text-xs line alone is 16px
+          'flex min-h-8 w-full items-center justify-between mb-1 px-4 text-xs font-semibold uppercase tracking-wider rounded-md overflow-hidden',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight
             ? 'text-muted-foreground hover:text-foreground'
@@ -90,7 +91,8 @@
         <span class="truncate">{section.title}</span>
         <svg
           class={cn(
-            'h-4 w-4 shrink-0 transition-transform duration-200',
+            'h-4 w-4 shrink-0',
+            sidebarStore.animate && 'transition-transform duration-200',
             isExpanded ? 'rotate-0' : '-rotate-90'
           )}
           fill="none"
@@ -147,7 +149,7 @@
     <ul
       class="space-y-1 px-2 overflow-hidden"
       id={`sidebar-section-${section.id}`}
-      transition:slide={{ duration: 200 }}
+      transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
     >
       {#each section.items as item}
         <li>

package/dist/lib/components/studio/InsertPalette.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" module>
+  import type { IconName } from '../Icon.svelte';
+
+  export interface InsertPaletteItem {
+    id: string;
+    label: string;
+    /** One line on when to use it: "Pick one answer from a short list" */
+    description?: string;
+    icon?: IconName;
+    disabled?: boolean;
+    /** Extra search terms, e.g. ["radio", "single"] */
+    keywords?: string[];
+  }
+
+  export interface InsertPaletteGroup {
+    label: string;
+    items: InsertPaletteItem[];
+  }
+</script>
+
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Dialog from '../Dialog.svelte';
+  import Icon from '../Icon.svelte';
+
+  /**
+   * InsertPalette - the one way to add something to a Studio: a searchable,
+   * grouped picker of question types, slide layouts, blocks...
+   *
+   * Every add button (rail, canvas "+", empty state) opens the same palette,
+   * so there is one place to learn. Each entry says when to use it; pass
+   * `thumbnail` to show a picture of it (slide layouts). Type to filter,
+   * Enter adds the first match, arrow keys move between entries.
+   */
+  interface Props {
+    open?: boolean;
+    groups: InsertPaletteGroup[];
+    onSelect: (id: string) => void;
+    /** Dialog title (default: "Add") */
+    title?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    /** Picture per entry; switches to a grid of cards */
+    thumbnail?: Snippet<[InsertPaletteItem]>;
+  }
+
+  let {
+    open = $bindable(false),
+    groups,
+    onSelect,
+    title = 'Add',
+    description,
+    searchPlaceholder = 'Search',
+    thumbnail,
+  }: Props = $props();
+
+  let query = $state('');
+  let listEl: HTMLDivElement | undefined = $state();
+  let searchEl: HTMLInputElement | undefined = $state();
+
+  const filtered = $derived.by(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return groups;
+    return groups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) =>
+          [item.label, item.description ?? '', ...(item.keywords ?? [])].some((text) =>
+            text.toLowerCase().includes(q)
+          )
+        ),
+      }))
+      .filter((group) => group.items.length > 0);
+  });
+
+  const firstMatch = $derived(filtered.flatMap((g) => g.items).find((item) => !item.disabled));
+
+  $effect(() => {
+    if (!open) return;
+    query = '';
+    void tick().then(() => searchEl?.focus());
+  });
+
+  function choose(item: InsertPaletteItem) {
+    if (item.disabled) return;
+    open = false;
+    onSelect(item.id);
+  }
+
+  function entries() {
+    return Array.from(listEl?.querySelectorAll<HTMLButtonElement>('[data-palette-item]') ?? []);
+  }
+
+  function searchKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && firstMatch) {
+      event.preventDefault();
+      choose(firstMatch);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      entries()[0]?.focus();
+    }
+  }
+
+  function entryKeydown(event: KeyboardEvent) {
+    const all = entries();
+    const index = all.indexOf(event.currentTarget as HTMLButtonElement);
+    let next = -1;
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') next = index + 1;
+    else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') next = index - 1;
+    else return;
+    event.preventDefault();
+    if (next < 0) searchEl?.focus();
+    else all[Math.min(next, all.length - 1)]?.focus();
+  }
+</script>
+
+<Dialog bind:open {title} {description} size={thumbnail ? '2xl' : 'xl'}>
+  <div class="space-y-4 pb-4">
+    <div class="relative">
+      <Icon
+        name="search"
+        size={16}
+        class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+        aria-hidden="true"
+      />
+      <input
+        bind:this={searchEl}
+        bind:value={query}
+        type="search"
+        aria-label={searchPlaceholder}
+        placeholder={searchPlaceholder}
+        class="h-10 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onkeydown={searchKeydown}
+      />
+    </div>
+
+    <div bind:this={listEl} class="space-y-5">
+      {#each filtered as group (group.label)}
+        <section aria-label={group.label}>
+          <h3 class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {group.label}
+          </h3>
+          <ul
+            class={cn(
+              'grid gap-2',
+              thumbnail ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-1 sm:grid-cols-2'
+            )}
+          >
+            {#each group.items as item (item.id)}
+              <li>
+                <button
+                  type="button"
+                  data-palette-item
+                  disabled={item.disabled}
+                  class={cn(
+                    'flex h-full w-full gap-3 rounded-md border border-border p-3 text-left hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                    thumbnail ? 'flex-col' : 'items-start'
+                  )}
+                  onclick={() => choose(item)}
+                  onkeydown={entryKeydown}
+                >
+                  {#if thumbnail}
+                    <span class="block overflow-hidden rounded border border-border bg-muted">
+                      {@render thumbnail(item)}
+                    </span>
+                  {:else if item.icon}
+                    <span
+                      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground"
+                    >
+                      <Icon name={item.icon} size={16} aria-hidden="true" />
+                    </span>
+                  {/if}
+                  <span class="min-w-0">
+                    <span class="block text-sm font-medium">{item.label}</span>
+                    {#if item.description}
+                      <span class="mt-0.5 block text-xs text-muted-foreground">
+                        {item.description}
+                      </span>
+                    {/if}
+                  </span>
+                </button>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {:else}
+        <p class="py-8 text-center text-sm text-muted-foreground">Nothing matches “{query}”.</p>
+      {/each}
+    </div>
+  </div>
+</Dialog>

package/dist/lib/components/studio/InsertPalette.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { IconName } from '../Icon.svelte';
+export interface InsertPaletteItem {
+    id: string;
+    label: string;
+    /** One line on when to use it: "Pick one answer from a short list" */
+    description?: string;
+    icon?: IconName;
+    disabled?: boolean;
+    /** Extra search terms, e.g. ["radio", "single"] */
+    keywords?: string[];
+}
+export interface InsertPaletteGroup {
+    label: string;
+    items: InsertPaletteItem[];
+}
+import { type Snippet } from 'svelte';
+/**
+ * InsertPalette - the one way to add something to a Studio: a searchable,
+ * grouped picker of question types, slide layouts, blocks...
+ *
+ * Every add button (rail, canvas "+", empty state) opens the same palette,
+ * so there is one place to learn. Each entry says when to use it; pass
+ * `thumbnail` to show a picture of it (slide layouts). Type to filter,
+ * Enter adds the first match, arrow keys move between entries.
+ */
+interface Props {
+    open?: boolean;
+    groups: InsertPaletteGroup[];
+    onSelect: (id: string) => void;
+    /** Dialog title (default: "Add") */
+    title?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    /** Picture per entry; switches to a grid of cards */
+    thumbnail?: Snippet<[InsertPaletteItem]>;
+}
+declare const InsertPalette: import("svelte").Component<Props, {}, "open">;
+type InsertPalette = ReturnType<typeof InsertPalette>;
+export default InsertPalette;