@classic-homes/theme-svelte 1.18.0 → 1.19.0

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

@@ -0,0 +1,29 @@
+import { type Snippet } from 'svelte';
+/**
+ * StudioCanvasItem - one selectable part of the canvas (a question, a block).
+ *
+ * Clicking anywhere in it, or tabbing into it, selects it; the content stays
+ * live, so a previewed question can still be answered. The selected item
+ * gets a ring and its `toolbar` (duplicate, delete...). With `onInsert`, a
+ * "+" between this item and the next adds a new one right there. On phones
+ * picking an item opens the inspector sheet.
+ */
+interface Props {
+    children: Snippet;
+    selected?: boolean;
+    onSelect?: () => void;
+    /** Names the item for screen readers and its Edit button, e.g. "Question 2" */
+    label: string;
+    /** Quick actions shown on the selected item */
+    toolbar?: Snippet;
+    /** Shows a "+" below the item that inserts after it */
+    onInsert?: () => void;
+    /** Accessible name of the insert button (default: "Add below {label}") */
+    insertLabel?: string;
+    /** Marks the item as having problems */
+    invalid?: boolean;
+    class?: string;
+}
+declare const StudioCanvasItem: import("svelte").Component<Props, {}, "">;
+type StudioCanvasItem = ReturnType<typeof StudioCanvasItem>;
+export default StudioCanvasItem;

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

@@ -0,0 +1,133 @@
+<script lang="ts" module>
+  export interface StudioInspectorTab {
+    id: string;
+    label: string;
+    /** Shown after the label, e.g. the number of comments */
+    count?: number;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  /**
+   * StudioInspector - the Studio's right column: settings for whatever is
+   * selected, and nothing else.
+   *
+   * A header names the selection ("Question 3", "Single choice") with room
+   * for an action such as Change type; `tabs` put related views side by side
+   * with editing (e.g. Slide · Comments) instead of replacing it. Group the
+   * fields with `StudioInspectorSection`, content first and rarely-used
+   * settings in a collapsed "Advanced" section.
+   */
+  interface Props {
+    /** What is selected, e.g. "Question 3" */
+    title?: string;
+    /** Its kind, e.g. "Single choice" */
+    description?: string;
+    /** Header action, e.g. a Change type menu */
+    headerActions?: Snippet;
+    tabs?: StudioInspectorTab[];
+    /** Active tab (bindable) */
+    tab?: string;
+    onTabChange?: (tab: string) => void;
+    /** The fields; with tabs, render the active tab's content */
+    children: Snippet;
+    /** Pinned under the fields */
+    footer?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    headerActions,
+    tabs,
+    tab = $bindable(tabs?.[0]?.id ?? ''),
+    onTabChange,
+    children,
+    footer,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+
+  function choose(id: string) {
+    if (id === tab) return;
+    tab = id;
+    onTabChange?.(id);
+  }
+
+  function tabKeydown(event: KeyboardEvent, index: number) {
+    if (!tabs) return;
+    let next = -1;
+    if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
+    else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;
+    if (next < 0) return;
+    event.preventDefault();
+    choose(tabs[next].id);
+    document.getElementById(`${uid}-tab-${tabs[next].id}`)?.focus();
+  }
+</script>
+
+<div class={cn('flex h-full min-h-0 flex-col', className)}>
+  {#if title || headerActions}
+    <div class="flex shrink-0 items-start gap-2 border-b border-border px-4 py-3">
+      <div class="min-w-0 flex-1">
+        {#if title}<h2 class="truncate text-sm font-semibold">{title}</h2>{/if}
+        {#if description}
+          <p class="truncate text-xs text-muted-foreground">{description}</p>
+        {/if}
+      </div>
+      {#if headerActions}
+        <div class="flex shrink-0 items-center gap-1">{@render headerActions()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if tabs && tabs.length > 1}
+    <div
+      role="tablist"
+      aria-label={title ?? 'Inspector'}
+      class="flex shrink-0 gap-4 border-b border-border px-4"
+    >
+      {#each tabs as t, index (t.id)}
+        <button
+          type="button"
+          role="tab"
+          id="{uid}-tab-{t.id}"
+          aria-selected={t.id === tab}
+          aria-controls="{uid}-panel"
+          tabindex={t.id === tab ? 0 : -1}
+          class={cn(
+            '-mb-px border-b-2 py-2 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            t.id === tab
+              ? 'border-primary text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+          onclick={() => choose(t.id)}
+          onkeydown={(e) => tabKeydown(e, index)}
+        >
+          {t.label}
+          {#if t.count}
+            <span class="ml-1 rounded-full bg-muted px-1.5 text-xs tabular-nums">{t.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  <div
+    class="min-h-0 flex-1 overflow-y-auto"
+    id={tabs && tabs.length > 1 ? `${uid}-panel` : undefined}
+    role={tabs && tabs.length > 1 ? 'tabpanel' : undefined}
+    aria-labelledby={tabs && tabs.length > 1 ? `${uid}-tab-${tab}` : undefined}
+  >
+    {@render children()}
+  </div>
+
+  {#if footer}
+    <div class="shrink-0 border-t border-border px-4 py-3">{@render footer()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,37 @@
+export interface StudioInspectorTab {
+    id: string;
+    label: string;
+    /** Shown after the label, e.g. the number of comments */
+    count?: number;
+}
+import type { Snippet } from 'svelte';
+/**
+ * StudioInspector - the Studio's right column: settings for whatever is
+ * selected, and nothing else.
+ *
+ * A header names the selection ("Question 3", "Single choice") with room
+ * for an action such as Change type; `tabs` put related views side by side
+ * with editing (e.g. Slide · Comments) instead of replacing it. Group the
+ * fields with `StudioInspectorSection`, content first and rarely-used
+ * settings in a collapsed "Advanced" section.
+ */
+interface Props {
+    /** What is selected, e.g. "Question 3" */
+    title?: string;
+    /** Its kind, e.g. "Single choice" */
+    description?: string;
+    /** Header action, e.g. a Change type menu */
+    headerActions?: Snippet;
+    tabs?: StudioInspectorTab[];
+    /** Active tab (bindable) */
+    tab?: string;
+    onTabChange?: (tab: string) => void;
+    /** The fields; with tabs, render the active tab's content */
+    children: Snippet;
+    /** Pinned under the fields */
+    footer?: Snippet;
+    class?: string;
+}
+declare const StudioInspector: import("svelte").Component<Props, {}, "tab">;
+type StudioInspector = ReturnType<typeof StudioInspector>;
+export default StudioInspector;

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+
+  /**
+   * StudioInspectorSection - a titled group of fields in the inspector.
+   *
+   * Set `collapsible` for settings most people never touch ("Advanced"); they
+   * start closed unless `open` is set, and the heading says how many are set
+   * via `summary` so nothing hides silently.
+   */
+  interface Props {
+    title?: string;
+    /** Short hint under the title */
+    description?: string;
+    /** Collapse behind the title */
+    collapsible?: boolean;
+    /** Expanded (bindable); only used when collapsible */
+    open?: boolean;
+    /** Shown beside a collapsed title, e.g. "2 set" */
+    summary?: string;
+    children: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    collapsible = false,
+    open = $bindable(false),
+    summary,
+    children,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const expanded = $derived(!collapsible || open);
+</script>
+
+<section
+  class={cn('border-b border-border px-4 py-4 last:border-b-0', className)}
+  aria-labelledby={title ? `${uid}-title` : undefined}
+>
+  {#if title}
+    {#if collapsible}
+      <h3 id="{uid}-title" class="-my-1">
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-controls="{uid}-body"
+          class="flex w-full items-center gap-2 rounded-md py-1 text-left text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onclick={() => (open = !open)}
+        >
+          <Icon
+            name="chevron-right"
+            size={16}
+            class={cn('shrink-0 text-muted-foreground transition-transform', open && 'rotate-90')}
+            aria-hidden="true"
+          />
+          <span class="flex-1">{title}</span>
+          {#if summary && !open}
+            <span class="text-xs font-normal text-muted-foreground">{summary}</span>
+          {/if}
+        </button>
+      </h3>
+    {:else}
+      <h3 id="{uid}-title" class="text-sm font-semibold">{title}</h3>
+    {/if}
+    {#if description && expanded}
+      <p class="mt-1 text-xs text-muted-foreground">{description}</p>
+    {/if}
+  {/if}
+  {#if expanded}
+    <div id="{uid}-body" class={cn('space-y-4', title && 'mt-3')}>
+      {@render children()}
+    </div>
+  {/if}
+</section>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/**
+ * StudioInspectorSection - a titled group of fields in the inspector.
+ *
+ * Set `collapsible` for settings most people never touch ("Advanced"); they
+ * start closed unless `open` is set, and the heading says how many are set
+ * via `summary` so nothing hides silently.
+ */
+interface Props {
+    title?: string;
+    /** Short hint under the title */
+    description?: string;
+    /** Collapse behind the title */
+    collapsible?: boolean;
+    /** Expanded (bindable); only used when collapsible */
+    open?: boolean;
+    /** Shown beside a collapsed title, e.g. "2 set" */
+    summary?: string;
+    children: Snippet;
+    class?: string;
+}
+declare const StudioInspectorSection: import("svelte").Component<Props, {}, "open">;
+type StudioInspectorSection = ReturnType<typeof StudioInspectorSection>;
+export default StudioInspectorSection;

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

@@ -0,0 +1,303 @@
+<script lang="ts" module>
+  import type { IconName } from '../Icon.svelte';
+
+  export interface StudioOutlineEntry {
+    id: string;
+    title: string;
+    /** Second line, e.g. the question type or slide layout */
+    subtitle?: string;
+    icon?: IconName;
+    /** Number of problems on this item; shown as a count, not just a colour */
+    issues?: number;
+    /** Colour of the issue count (default: error) */
+    issueSeverity?: 'error' | 'warning';
+    /** Dim the row, e.g. a hidden slide */
+    muted?: boolean;
+    /** Short trailing tag, e.g. "Hidden" or "2 comments" */
+    badge?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import DropdownMenu, { type DropdownMenuItem } from '../DropdownMenu.svelte';
+  import SortableList from '../SortableList.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * StudioOutline - the Studio's rail: every item in order, the one place to
+   * select, reorder and add.
+   *
+   * Rows reorder by their drag handle (or keyboard, see `SortableList`); the
+   * row menu holds duplicate/delete and Move up/down. Arrow keys move between
+   * rows. Picking a row inside the phone sheet closes the sheet and opens the
+   * inspector. Pass `thumbnail` to show a preview per row (slides).
+   */
+  interface Props {
+    items: StudioOutlineEntry[];
+    /** Selected item id (bindable) */
+    selected?: string | null;
+    onSelect?: (id: string) => void;
+    /** Move item `from` to index `to`; omit to turn reordering off */
+    onReorder?: (from: number, to: number) => void;
+    /** Row menu items; Move up/down are added for you when `onReorder` is set */
+    menuItems?: (entry: StudioOutlineEntry, index: number) => DropdownMenuItem[];
+    /** Shows the add button at the bottom of the rail */
+    onAdd?: () => void;
+    /** Add button text (default: "Add") */
+    addLabel?: string;
+    /** Accessible name of the list, e.g. "Questions" (default: "Items") */
+    label?: string;
+    /** Number rows 1, 2, 3... (default: true) */
+    numbered?: boolean;
+    /** Preview per row, e.g. a slide thumbnail */
+    thumbnail?: Snippet<[StudioOutlineEntry, number]>;
+    /** Above the list, e.g. a heading or filter */
+    header?: Snippet;
+    /** Shown when there are no items */
+    empty?: Snippet;
+    class?: string;
+  }
+
+  let {
+    items,
+    selected = $bindable(null),
+    onSelect,
+    onReorder,
+    menuItems,
+    onAdd,
+    addLabel = 'Add',
+    label = 'Items',
+    numbered = true,
+    thumbnail,
+    header,
+    empty,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  let listHost: HTMLDivElement | undefined = $state();
+
+  const focusIndex = $derived(
+    Math.max(
+      0,
+      items.findIndex((i) => i.id === selected)
+    )
+  );
+
+  function select(id: string) {
+    selected = id;
+    onSelect?.(id);
+    studio?.revealInspector();
+  }
+
+  function rowButtons() {
+    return Array.from(listHost?.querySelectorAll<HTMLElement>('[data-outline-row]') ?? []);
+  }
+
+  function rowKeydown(event: KeyboardEvent, index: number) {
+    const buttons = rowButtons();
+    let next = -1;
+    if (event.key === 'ArrowDown') next = Math.min(index + 1, buttons.length - 1);
+    else if (event.key === 'ArrowUp') next = Math.max(index - 1, 0);
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = buttons.length - 1;
+    if (next < 0) return;
+    event.preventDefault();
+    buttons[next]?.focus();
+  }
+
+  function rowMenu(entry: StudioOutlineEntry, index: number): DropdownMenuItem[] {
+    const own = menuItems?.(entry, index) ?? [];
+    if (!onReorder) return own;
+    const reorder = onReorder;
+    const moves: DropdownMenuItem[] = [
+      {
+        label: 'Move up',
+        icon: 'arrow-up',
+        disabled: index === 0,
+        onSelect: () => reorder(index, index - 1),
+      },
+      {
+        label: 'Move down',
+        icon: 'arrow-down',
+        disabled: index === items.length - 1,
+        onSelect: () => reorder(index, index + 1),
+      },
+    ];
+    return own.length ? [...moves, { type: 'separator' }, ...own] : moves;
+  }
+
+  // Keep the selected row visible when selection comes from the canvas
+  $effect(() => {
+    const id = selected;
+    if (!id || !listHost) return;
+    void tick().then(() => {
+      listHost
+        ?.querySelector(`[data-outline-id="${CSS.escape(id)}"]`)
+        ?.scrollIntoView?.({ block: 'nearest' });
+    });
+  });
+</script>
+
+{#snippet row(entry: StudioOutlineEntry, index: number, handle?: Record<string, unknown>)}
+  {@const active = entry.id === selected}
+  {@const menu = rowMenu(entry, index)}
+  <div
+    data-outline-id={entry.id}
+    class={cn(
+      'group relative flex items-stretch gap-0.5 rounded-md',
+      active ? 'bg-primary/10 ring-1 ring-inset ring-primary/40' : 'hover:bg-muted-hover'
+    )}
+  >
+    {#if handle}
+      <button
+        {...handle}
+        class="flex w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-l-md text-muted-foreground opacity-0 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing group-hover:opacity-100 aria-pressed:opacity-100 [@media(hover:none)]:opacity-100"
+        class:opacity-100={active}
+      >
+        <Icon name="grip" size={14} aria-hidden="true" />
+      </button>
+    {/if}
+
+    <button
+      type="button"
+      data-outline-row
+      tabindex={index === focusIndex ? 0 : -1}
+      aria-current={active ? 'true' : undefined}
+      class={cn(
+        'flex min-w-0 flex-1 flex-col gap-1.5 rounded-md py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        !handle && 'pl-2',
+        entry.muted && 'opacity-60'
+      )}
+      onclick={() => select(entry.id)}
+      onkeydown={(e) => rowKeydown(e, index)}
+    >
+      {#if thumbnail}
+        <div class="w-full overflow-hidden rounded border border-border bg-background">
+          {@render thumbnail(entry, index)}
+        </div>
+      {/if}
+      <span class="flex min-w-0 items-start gap-2">
+        {#if numbered}
+          <span class="w-5 shrink-0 pt-px text-right text-xs tabular-nums text-muted-foreground">
+            {index + 1}
+          </span>
+        {/if}
+        {#if entry.icon && !thumbnail}
+          <Icon
+            name={entry.icon}
+            size={16}
+            class="mt-px shrink-0 text-muted-foreground"
+            aria-hidden="true"
+          />
+        {/if}
+        <span class="min-w-0 flex-1">
+          <span
+            class={cn(
+              'block truncate text-sm',
+              active ? 'font-medium text-foreground' : 'text-foreground'
+            )}
+          >
+            {entry.title || 'Untitled'}
+          </span>
+          {#if entry.subtitle}
+            <span class="block truncate text-xs text-muted-foreground">{entry.subtitle}</span>
+          {/if}
+        </span>
+        {#if entry.badge}
+          <span
+            class="shrink-0 rounded bg-muted px-1.5 py-px text-[0.6875rem] text-muted-foreground"
+          >
+            {entry.badge}
+          </span>
+        {/if}
+        {#if entry.issues}
+          <span
+            class="inline-flex shrink-0 items-center gap-0.5 text-xs font-medium tabular-nums"
+            title="{entry.issues} {entry.issues === 1 ? 'issue' : 'issues'}"
+          >
+            <Icon
+              name="alert-triangle"
+              size={12}
+              class={entry.issueSeverity === 'warning' ? 'text-warning' : 'text-destructive'}
+              aria-hidden="true"
+            />
+            {entry.issues}
+            <span class="sr-only">{entry.issues === 1 ? 'issue' : 'issues'}</span>
+          </span>
+        {/if}
+      </span>
+    </button>
+
+    {#if menu.length}
+      <div
+        class={cn(
+          'flex shrink-0 items-start pt-1 opacity-0 focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100',
+          active && 'opacity-100'
+        )}
+      >
+        <DropdownMenu
+          items={menu}
+          align="end"
+          triggerClass="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          triggerLabel="Actions for {entry.title || `item ${index + 1}`}"
+        >
+          {#snippet trigger()}
+            <Icon name="more-horizontal" size={16} aria-hidden="true" />
+          {/snippet}
+        </DropdownMenu>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('flex h-full min-h-0 flex-col', className)}>
+  {#if header}
+    <div class="shrink-0 border-b border-border px-3 py-2">{@render header()}</div>
+  {/if}
+
+  <div bind:this={listHost} class="min-h-0 flex-1 overflow-y-auto p-2">
+    {#if items.length === 0}
+      {#if empty}
+        {@render empty()}
+      {:else}
+        <p class="px-2 py-6 text-center text-sm text-muted-foreground">Nothing here yet.</p>
+      {/if}
+    {:else if onReorder}
+      <SortableList
+        {items}
+        getKey={(entry) => entry.id}
+        {onReorder}
+        {label}
+        getItemLabel={(entry, index) => entry.title || `item ${index + 1}`}
+        class="space-y-0.5"
+      >
+        {#snippet item({ item: entry, index, handle })}
+          {@render row(entry, index, handle as unknown as Record<string, unknown>)}
+        {/snippet}
+      </SortableList>
+    {:else}
+      <ul aria-label={label} class="space-y-0.5">
+        {#each items as entry, index (entry.id)}
+          <li>{@render row(entry, index)}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if onAdd}
+    <div class="shrink-0 border-t border-border p-2">
+      <button
+        type="button"
+        class="flex h-9 w-full items-center justify-center gap-2 rounded-md border border-dashed border-border text-sm font-medium text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onclick={onAdd}
+      >
+        <Icon name="plus" size={16} aria-hidden="true" />
+        {addLabel}
+      </button>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,55 @@
+import type { IconName } from '../Icon.svelte';
+export interface StudioOutlineEntry {
+    id: string;
+    title: string;
+    /** Second line, e.g. the question type or slide layout */
+    subtitle?: string;
+    icon?: IconName;
+    /** Number of problems on this item; shown as a count, not just a colour */
+    issues?: number;
+    /** Colour of the issue count (default: error) */
+    issueSeverity?: 'error' | 'warning';
+    /** Dim the row, e.g. a hidden slide */
+    muted?: boolean;
+    /** Short trailing tag, e.g. "Hidden" or "2 comments" */
+    badge?: string;
+}
+import { type Snippet } from 'svelte';
+import { type DropdownMenuItem } from '../DropdownMenu.svelte';
+/**
+ * StudioOutline - the Studio's rail: every item in order, the one place to
+ * select, reorder and add.
+ *
+ * Rows reorder by their drag handle (or keyboard, see `SortableList`); the
+ * row menu holds duplicate/delete and Move up/down. Arrow keys move between
+ * rows. Picking a row inside the phone sheet closes the sheet and opens the
+ * inspector. Pass `thumbnail` to show a preview per row (slides).
+ */
+interface Props {
+    items: StudioOutlineEntry[];
+    /** Selected item id (bindable) */
+    selected?: string | null;
+    onSelect?: (id: string) => void;
+    /** Move item `from` to index `to`; omit to turn reordering off */
+    onReorder?: (from: number, to: number) => void;
+    /** Row menu items; Move up/down are added for you when `onReorder` is set */
+    menuItems?: (entry: StudioOutlineEntry, index: number) => DropdownMenuItem[];
+    /** Shows the add button at the bottom of the rail */
+    onAdd?: () => void;
+    /** Add button text (default: "Add") */
+    addLabel?: string;
+    /** Accessible name of the list, e.g. "Questions" (default: "Items") */
+    label?: string;
+    /** Number rows 1, 2, 3... (default: true) */
+    numbered?: boolean;
+    /** Preview per row, e.g. a slide thumbnail */
+    thumbnail?: Snippet<[StudioOutlineEntry, number]>;
+    /** Above the list, e.g. a heading or filter */
+    header?: Snippet;
+    /** Shown when there are no items */
+    empty?: Snippet;
+    class?: string;
+}
+declare const StudioOutline: import("svelte").Component<Props, {}, "selected">;
+type StudioOutline = ReturnType<typeof StudioOutline>;
+export default StudioOutline;