@classic-homes/theme-svelte 1.18.0 → 1.19.0

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/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;

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

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+  export interface StudioIssue {
+    id: string;
+    /** What is wrong, phrased as what to do: "Add at least two options" */
+    message: string;
+    /** `error` blocks publishing; `warning` is advice (default: error) */
+    severity?: 'error' | 'warning';
+    /** Where it is, e.g. "Question 3" or "Settings" */
+    location?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { Popover } from 'bits-ui';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+
+  /**
+   * IssuesButton - the single place an editor lists what needs fixing.
+   *
+   * A count in the bar that opens a checklist; picking an entry calls
+   * `onSelect` so the editor can select the item and focus the field. Bind
+   * `open` to show the same list when someone tries to publish with errors,
+   * instead of a separate publish-problems dialog. Hidden when there is
+   * nothing to fix, unless `showWhenEmpty`.
+   */
+  interface Props {
+    issues: StudioIssue[];
+    /** Jump to an issue: select its item and focus the field */
+    onSelect?: (issue: StudioIssue) => void;
+    /** Popover open (bindable) */
+    open?: boolean;
+    /** Heading of the list (default: "Before you publish") */
+    title?: string;
+    /** Render a quiet "No issues" chip when the list is empty */
+    showWhenEmpty?: boolean;
+    class?: string;
+  }
+
+  let {
+    issues,
+    onSelect,
+    open = $bindable(false),
+    title = 'Before you publish',
+    showWhenEmpty = false,
+    class: className,
+  }: Props = $props();
+
+  const errors = $derived(issues.filter((i) => (i.severity ?? 'error') === 'error'));
+  const warnings = $derived(issues.filter((i) => i.severity === 'warning'));
+  const countLabel = $derived(
+    [
+      errors.length && `${errors.length} ${errors.length === 1 ? 'issue' : 'issues'} to fix`,
+      warnings.length &&
+        `${warnings.length} ${warnings.length === 1 ? 'suggestion' : 'suggestions'}`,
+    ]
+      .filter(Boolean)
+      .join(', ')
+  );
+
+  function pick(issue: StudioIssue) {
+    open = false;
+    onSelect?.(issue);
+  }
+</script>
+
+{#snippet group(list: StudioIssue[], heading: string, error: boolean)}
+  {#if list.length}
+    <p class="px-3 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+      {heading}
+    </p>
+    <ul class="pb-1">
+      {#each list as issue (issue.id)}
+        <li>
+          <button
+            type="button"
+            class="flex w-full items-start gap-2 px-3 py-2 text-left text-sm hover:bg-muted-hover focus-visible:bg-muted-hover focus-visible:outline-none"
+            onclick={() => pick(issue)}
+          >
+            <Icon
+              name={error ? 'alert-circle' : 'info'}
+              size={16}
+              class={cn('mt-0.5 shrink-0', error ? 'text-destructive' : 'text-warning')}
+              aria-hidden="true"
+            />
+            <span class="min-w-0 flex-1">
+              {#if issue.location}
+                <span class="block text-xs text-muted-foreground">{issue.location}</span>
+              {/if}
+              {issue.message}
+            </span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+{/snippet}
+
+{#if issues.length > 0}
+  <Popover.Root bind:open>
+    <Popover.Trigger
+      class={cn(
+        'inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-sm font-medium hover:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className
+      )}
+      aria-label={countLabel}
+    >
+      <Icon
+        name="alert-triangle"
+        size={16}
+        class={errors.length ? 'text-destructive' : 'text-warning'}
+        aria-hidden="true"
+      />
+      <span aria-hidden="true">{issues.length}</span>
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        align="end"
+        sideOffset={6}
+        collisionPadding={8}
+        class="z-50 flex max-h-[min(28rem,70dvh)] w-80 flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md"
+      >
+        <div class="border-b border-border px-3 py-2">
+          <p class="text-sm font-semibold">{title}</p>
+          <p class="text-xs text-muted-foreground">{countLabel}</p>
+        </div>
+        <div class="overflow-y-auto">
+          {@render group(errors, 'Must fix', true)}
+          {@render group(warnings, 'Suggestions', false)}
+        </div>
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+{:else if showWhenEmpty}
+  <span
+    class={cn('inline-flex h-8 items-center gap-1.5 px-2 text-sm text-muted-foreground', className)}
+  >
+    <Icon name="check-circle" size={16} class="text-success" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">No issues</span>
+  </span>
+{/if}

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

@@ -0,0 +1,33 @@
+export interface StudioIssue {
+    id: string;
+    /** What is wrong, phrased as what to do: "Add at least two options" */
+    message: string;
+    /** `error` blocks publishing; `warning` is advice (default: error) */
+    severity?: 'error' | 'warning';
+    /** Where it is, e.g. "Question 3" or "Settings" */
+    location?: string;
+}
+/**
+ * IssuesButton - the single place an editor lists what needs fixing.
+ *
+ * A count in the bar that opens a checklist; picking an entry calls
+ * `onSelect` so the editor can select the item and focus the field. Bind
+ * `open` to show the same list when someone tries to publish with errors,
+ * instead of a separate publish-problems dialog. Hidden when there is
+ * nothing to fix, unless `showWhenEmpty`.
+ */
+interface Props {
+    issues: StudioIssue[];
+    /** Jump to an issue: select its item and focus the field */
+    onSelect?: (issue: StudioIssue) => void;
+    /** Popover open (bindable) */
+    open?: boolean;
+    /** Heading of the list (default: "Before you publish") */
+    title?: string;
+    /** Render a quiet "No issues" chip when the list is empty */
+    showWhenEmpty?: boolean;
+    class?: string;
+}
+declare const IssuesButton: import("svelte").Component<Props, {}, "open">;
+type IssuesButton = ReturnType<typeof IssuesButton>;
+export default IssuesButton;

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

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+  export type SaveState =
+    | 'saved'
+    | 'saving'
+    | 'unsaved'
+    | 'error'
+    | 'offline'
+    | 'conflict'
+    | 'invalid'
+    | 'readonly';
+</script>
+
+<script lang="ts">
+  import { Popover } from 'bits-ui';
+  import { cn } from '../../utils.js';
+  import Icon, { type IconName } from '../Icon.svelte';
+  import Button from '../Button.svelte';
+
+  /**
+   * SaveStatus - one compact signal for an autosaving editor.
+   *
+   * Shows an icon and one word (Saved, Saving…, Not saved…). When there is
+   * more to say - why a save failed, what needs fixing - the chip opens a
+   * popover with that detail and, for failures, a Retry button. Replaces
+   * stacks of status badges and save-error alerts.
+   */
+  interface Props {
+    state: SaveState;
+    /** Longer explanation shown in the popover, e.g. "Fix 2 questions to save them." */
+    detail?: string;
+    /** Offered in the popover for `error` and `offline` */
+    onRetry?: () => void;
+    /** Override the one-word label */
+    label?: string;
+    class?: string;
+  }
+
+  let { state, detail, onRetry, label, class: className }: Props = $props();
+
+  const meta: Record<SaveState, { label: string; icon: IconName; tone: string }> = {
+    saved: { label: 'Saved', icon: 'check-circle', tone: 'text-muted-foreground' },
+    saving: { label: 'Saving…', icon: 'loader', tone: 'text-muted-foreground' },
+    unsaved: { label: 'Unsaved', icon: 'edit', tone: 'text-muted-foreground' },
+    error: { label: 'Not saved', icon: 'alert-circle', tone: 'text-destructive' },
+    offline: { label: 'Offline', icon: 'wifi-off', tone: 'text-warning' },
+    conflict: { label: 'Conflict', icon: 'alert-triangle', tone: 'text-destructive' },
+    invalid: { label: 'Needs fixes', icon: 'alert-triangle', tone: 'text-warning' },
+    readonly: { label: 'View only', icon: 'eye', tone: 'text-muted-foreground' },
+  };
+
+  const current = $derived(meta[state]);
+  const text = $derived(label ?? current.label);
+  const canRetry = $derived(!!onRetry && (state === 'error' || state === 'offline'));
+  const hasDetail = $derived(!!detail || canRetry);
+  const announced = $derived(
+    state === 'error' || state === 'offline' || state === 'conflict' || state === 'invalid'
+  );
+
+  const chip =
+    'inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-sm font-medium text-foreground';
+</script>
+
+{#snippet content()}
+  <Icon
+    name={current.icon}
+    size={16}
+    class={cn('shrink-0', current.tone, state === 'saving' && 'animate-spin')}
+    aria-hidden="true"
+  />
+  <!-- Icon-only on phones; the word stays available to screen readers -->
+  <span class="sr-only sm:not-sr-only">{text}</span>
+{/snippet}
+
+<div class={cn('inline-flex', className)}>
+  {#if hasDetail}
+    <Popover.Root>
+      <Popover.Trigger
+        class={cn(
+          chip,
+          'hover:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        )}
+        aria-label="Save status: {text}. Show details"
+      >
+        {@render content()}
+        <Icon name="chevron-down" size={14} class="text-muted-foreground" aria-hidden="true" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          align="end"
+          sideOffset={6}
+          collisionPadding={8}
+          class="z-50 w-72 rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md"
+        >
+          <p class="font-medium">{text}</p>
+          {#if detail}<p class="mt-1 text-muted-foreground">{detail}</p>{/if}
+          {#if canRetry}
+            <Button size="sm" variant="secondary" class="mt-3" onclick={() => onRetry?.()}>
+              <Icon name="refresh" size={14} aria-hidden="true" />
+              Retry
+            </Button>
+          {/if}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  {:else}
+    <span class={chip}>{@render content()}</span>
+  {/if}
+  <!-- Only problems are announced; "Saving… Saved" after every keystroke would be noise -->
+  <span class="sr-only" role="status" aria-live="polite">{announced ? text : ''}</span>
+</div>

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

@@ -0,0 +1,22 @@
+export type SaveState = 'saved' | 'saving' | 'unsaved' | 'error' | 'offline' | 'conflict' | 'invalid' | 'readonly';
+/**
+ * SaveStatus - one compact signal for an autosaving editor.
+ *
+ * Shows an icon and one word (Saved, Saving…, Not saved…). When there is
+ * more to say - why a save failed, what needs fixing - the chip opens a
+ * popover with that detail and, for failures, a Retry button. Replaces
+ * stacks of status badges and save-error alerts.
+ */
+interface Props {
+    state: SaveState;
+    /** Longer explanation shown in the popover, e.g. "Fix 2 questions to save them." */
+    detail?: string;
+    /** Offered in the popover for `error` and `offline` */
+    onRetry?: () => void;
+    /** Override the one-word label */
+    label?: string;
+    class?: string;
+}
+declare const SaveStatus: import("svelte").Component<Props, {}, "">;
+type SaveStatus = ReturnType<typeof SaveStatus>;
+export default SaveStatus;