@classic-homes/theme-svelte 1.18.0 → 1.19.1

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * 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;
+  }
+
+  let {
+    children,
+    selected = false,
+    onSelect,
+    label,
+    toolbar,
+    onInsert,
+    insertLabel,
+    invalid = false,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  let element: HTMLDivElement | undefined = $state();
+
+  // Quick actions (toolbar, "+") act on the item without selecting it. A
+  // dialog they open (the insert palette) returns focus to them on close;
+  // treating that focus as "select me" would undo the dialog's own selection.
+  const inQuickAction = (target: EventTarget | null) =>
+    !!(target as Element | null)?.closest?.('[data-studio-quick-action]');
+
+  function select(reveal: boolean) {
+    if (!selected) onSelect?.();
+    if (reveal) studio?.revealInspector();
+  }
+
+  $effect(() => {
+    if (!selected || !element) return;
+    const el = element;
+    void tick().then(() => {
+      // Don't yank the canvas while the user is working inside the item
+      if (el.contains(document.activeElement)) return;
+      const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      el.scrollIntoView?.({ block: 'nearest', behavior: reduce ? 'auto' : 'smooth' });
+    });
+  });
+</script>
+
+<div
+  bind:this={element}
+  role="group"
+  aria-label={label}
+  aria-current={selected ? 'true' : undefined}
+  data-selected={selected || undefined}
+  class={cn(
+    'group/item relative scroll-my-6 rounded-lg transition-shadow',
+    // Problems use a dashed amber outline: in brands whose primary is red, a
+    // red ring would read as "selected"
+    selected ? 'ring-2 ring-primary' : 'hover:ring-1 hover:ring-border',
+    invalid && 'outline-dashed outline-2 -outline-offset-2 outline-warning/70',
+    className
+  )}
+  onclickcapture={(e) => select(!inQuickAction(e.target))}
+  onfocusin={(e) => {
+    if (!inQuickAction(e.target)) select(false);
+  }}
+>
+  {#if !selected}
+    <!-- Keyboard way in for items with no focusable content of their own -->
+    <button
+      type="button"
+      class="sr-only left-2 top-2 z-10 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground focus:not-sr-only focus:absolute"
+      onclick={() => select(true)}
+    >
+      Edit {label}
+    </button>
+  {/if}
+
+  {#if selected && toolbar}
+    <div
+      data-studio-quick-action
+      class="absolute -top-4 right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md"
+    >
+      {@render toolbar()}
+    </div>
+  {/if}
+
+  {@render children()}
+
+  {#if onInsert}
+    <div class="relative h-0" data-studio-quick-action>
+      <button
+        type="button"
+        aria-label={insertLabel ?? `Add below ${label}`}
+        title={insertLabel ?? 'Add below'}
+        class="absolute left-1/2 top-0 z-10 flex h-7 w-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm hover:border-primary hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 [@media(hover:none)]:opacity-100"
+        class:opacity-100={selected}
+        onclick={(e) => {
+          e.stopPropagation();
+          onInsert?.();
+        }}
+      >
+        <Icon name="plus" size={14} aria-hidden="true" />
+      </button>
+    </div>
+  {/if}
+</div>

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;