@classic-homes/theme-svelte 1.18.0 → 1.19.1

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

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import Sheet from '../Sheet.svelte';
+  import { setStudioContext, type StudioLayout } from './context.js';
+
+  /**
+   * Studio - full-screen frame for editors (survey builders, slide decks,
+   * page and form builders).
+   *
+   * One fixed layout that never page-scrolls:
+   *
+   * ```
+   * ┌ bar ─────────────────────────────────────────┐
+   * │ banner (optional)                            │
+   * ├ rail ──┬ canvas ─────────────┬ inspector ────┤
+   * │ outline│ the real thing,     │ settings for  │
+   * │        │ click to select     │ the selection │
+   * └────────┴─────────────────────┴───────────────┘
+   * ```
+   *
+   * Rail, canvas and inspector scroll on their own. Below 1280px the rail
+   * moves into a left sheet; below 768px the inspector moves into a bottom
+   * sheet as well, leaving the canvas full screen. Parts read the layout
+   * through `getStudioContext()`, so `StudioOutline` closes its sheet after a
+   * pick and `StudioCanvasItem` opens the inspector sheet on phones.
+   *
+   * Leave out `rail` and `inspector` for full-width modes such as a settings
+   * page (render a `StudioPage` as the canvas).
+   */
+  interface Props {
+    /** Top bar, normally a `StudioBar` */
+    bar: Snippet;
+    /** One message slot under the bar, for conflicts and decisions that block editing */
+    banner?: Snippet;
+    /** Left column, normally a `StudioOutline` */
+    rail?: Snippet;
+    /** Main area, normally a `StudioCanvas` or `StudioPage` */
+    canvas: Snippet;
+    /** Right column, normally a `StudioInspector` */
+    inspector?: Snippet;
+    /** Accessible name of the rail and the button that opens it (default: "Outline") */
+    railLabel?: string;
+    /** Accessible name of the inspector and the button that opens it (default: "Properties") */
+    inspectorLabel?: string;
+    /** Rail sheet open below 1280px (bindable) */
+    railOpen?: boolean;
+    /** Inspector sheet open below 768px (bindable) */
+    inspectorOpen?: boolean;
+    class?: string;
+  }
+
+  let {
+    bar,
+    banner,
+    rail,
+    canvas,
+    inspector,
+    railLabel = 'Outline',
+    inspectorLabel = 'Properties',
+    railOpen = $bindable(false),
+    inspectorOpen = $bindable(false),
+    class: className,
+  }: Props = $props();
+
+  // Starts wide so SSR and desktop's first paint match. The columns also carry
+  // the breakpoints as CSS, so server-rendered HTML is already right on phones.
+  let layout = $state<StudioLayout>('wide');
+
+  onMount(() => {
+    const wide = window.matchMedia('(min-width: 1280px)');
+    const medium = window.matchMedia('(min-width: 768px)');
+    const update = () => {
+      layout = wide.matches ? 'wide' : medium.matches ? 'medium' : 'compact';
+      if (layout === 'wide') railOpen = false;
+      if (layout !== 'compact') inspectorOpen = false;
+    };
+    update();
+    wide.addEventListener('change', update);
+    medium.addEventListener('change', update);
+    return () => {
+      wide.removeEventListener('change', update);
+      medium.removeEventListener('change', update);
+    };
+  });
+
+  const railInSheet = $derived(!!rail && layout !== 'wide');
+  const inspectorInSheet = $derived(!!inspector && layout === 'compact');
+
+  setStudioContext({
+    get layout() {
+      return layout;
+    },
+    get railInSheet() {
+      return railInSheet;
+    },
+    get inspectorInSheet() {
+      return inspectorInSheet;
+    },
+    openRail: () => {
+      if (railInSheet) railOpen = true;
+    },
+    closeRail: () => (railOpen = false),
+    revealInspector: () => {
+      railOpen = false;
+      if (inspectorInSheet) inspectorOpen = true;
+    },
+    closeInspector: () => (inspectorOpen = false),
+  });
+
+  const floatingButton =
+    'pointer-events-auto inline-flex h-9 items-center gap-2 rounded-full border border-border bg-background px-3 text-sm font-medium shadow-md hover:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+</script>
+
+<div class={cn('flex h-dvh flex-col overflow-hidden bg-background text-foreground', className)}>
+  {@render bar()}
+
+  {#if banner}
+    <div class="shrink-0">{@render banner()}</div>
+  {/if}
+
+  <div class="relative flex min-h-0 flex-1">
+    {#if rail && !railInSheet}
+      <aside
+        aria-label={railLabel}
+        class="hidden w-64 shrink-0 flex-col overflow-hidden border-r border-border bg-background xl:flex"
+      >
+        {@render rail()}
+      </aside>
+    {/if}
+
+    <div class="relative min-w-0 flex-1 overflow-hidden bg-muted/40">
+      {@render canvas()}
+
+      {#if railInSheet || inspectorInSheet}
+        <div
+          class="pointer-events-none absolute inset-x-3 bottom-3 z-10 flex items-end justify-between gap-2"
+        >
+          {#if railInSheet}
+            <button
+              type="button"
+              class={floatingButton}
+              aria-expanded={railOpen}
+              onclick={() => (railOpen = true)}
+            >
+              <Icon name="list" size={16} aria-hidden="true" />
+              {railLabel}
+            </button>
+          {:else}
+            <span></span>
+          {/if}
+          {#if inspectorInSheet}
+            <button
+              type="button"
+              class={floatingButton}
+              aria-expanded={inspectorOpen}
+              onclick={() => (inspectorOpen = true)}
+            >
+              <Icon name="settings" size={16} aria-hidden="true" />
+              {inspectorLabel}
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    {#if inspector && !inspectorInSheet}
+      <aside
+        aria-label={inspectorLabel}
+        class="hidden w-80 shrink-0 flex-col overflow-hidden border-l border-border bg-background md:flex 2xl:w-96"
+      >
+        {@render inspector()}
+      </aside>
+    {/if}
+  </div>
+</div>
+
+{#if rail && railInSheet}
+  <Sheet bind:open={railOpen} side="left" size="sm" title={railLabel}>
+    <div class="flex h-full flex-col">{@render rail()}</div>
+  </Sheet>
+{/if}
+
+{#if inspector && inspectorInSheet}
+  <Sheet bind:open={inspectorOpen} side="bottom" title={inspectorLabel} hideTitle>
+    {@render inspector()}
+  </Sheet>
+{/if}

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

@@ -0,0 +1,49 @@
+import { type Snippet } from 'svelte';
+/**
+ * Studio - full-screen frame for editors (survey builders, slide decks,
+ * page and form builders).
+ *
+ * One fixed layout that never page-scrolls:
+ *
+ * ```
+ * ┌ bar ─────────────────────────────────────────┐
+ * │ banner (optional)                            │
+ * ├ rail ──┬ canvas ─────────────┬ inspector ────┤
+ * │ outline│ the real thing,     │ settings for  │
+ * │        │ click to select     │ the selection │
+ * └────────┴─────────────────────┴───────────────┘
+ * ```
+ *
+ * Rail, canvas and inspector scroll on their own. Below 1280px the rail
+ * moves into a left sheet; below 768px the inspector moves into a bottom
+ * sheet as well, leaving the canvas full screen. Parts read the layout
+ * through `getStudioContext()`, so `StudioOutline` closes its sheet after a
+ * pick and `StudioCanvasItem` opens the inspector sheet on phones.
+ *
+ * Leave out `rail` and `inspector` for full-width modes such as a settings
+ * page (render a `StudioPage` as the canvas).
+ */
+interface Props {
+    /** Top bar, normally a `StudioBar` */
+    bar: Snippet;
+    /** One message slot under the bar, for conflicts and decisions that block editing */
+    banner?: Snippet;
+    /** Left column, normally a `StudioOutline` */
+    rail?: Snippet;
+    /** Main area, normally a `StudioCanvas` or `StudioPage` */
+    canvas: Snippet;
+    /** Right column, normally a `StudioInspector` */
+    inspector?: Snippet;
+    /** Accessible name of the rail and the button that opens it (default: "Outline") */
+    railLabel?: string;
+    /** Accessible name of the inspector and the button that opens it (default: "Properties") */
+    inspectorLabel?: string;
+    /** Rail sheet open below 1280px (bindable) */
+    railOpen?: boolean;
+    /** Inspector sheet open below 768px (bindable) */
+    inspectorOpen?: boolean;
+    class?: string;
+}
+declare const Studio: import("svelte").Component<Props, {}, "railOpen" | "inspectorOpen">;
+type Studio = ReturnType<typeof Studio>;
+export default Studio;

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

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import DropdownMenu, {
+    type DropdownMenuItem,
+    type DropdownMenuGroup,
+  } from '../DropdownMenu.svelte';
+  import SegmentedControl, { type SegmentedControlOption } from '../SegmentedControl.svelte';
+
+  /**
+   * StudioBar - the one bar across the top of a Studio.
+   *
+   * Left: back link and the document title, edited in place. Middle: the
+   * modes that separate building from configuring (e.g. Build · Settings ·
+   * Share). Right: save status, issues, the primary action, and one overflow
+   * menu for everything else (export, history, delete...). On phones the
+   * modes wrap onto their own row.
+   */
+  interface Props {
+    /** Title of the document being edited (bindable) */
+    title?: string;
+    /** Called when an edited title is committed (blur or Enter) */
+    onTitleChange?: (title: string) => void;
+    /** Show the title as text instead of an input */
+    titleReadonly?: boolean;
+    titlePlaceholder?: string;
+    /** Small line under the title, e.g. "Survey · 5 questions" */
+    subtitle?: string;
+    /** Back link, e.g. to the list of surveys */
+    backHref?: string;
+    /** Accessible name of the back link (default: "Back") */
+    backLabel?: string;
+    /** Mode tabs; omit for single-mode editors */
+    modes?: SegmentedControlOption[];
+    /** Active mode (bindable) */
+    mode?: string;
+    onModeChange?: (mode: string) => void;
+    /** Save state, normally a `SaveStatus` */
+    status?: Snippet;
+    /** Issues, normally an `IssuesButton` */
+    issues?: Snippet;
+    /** Primary action(s), e.g. a Publish or Present button */
+    actions?: Snippet;
+    /** Overflow menu items (export, history, delete...) */
+    menuItems?: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Accessible name of the overflow menu (default: "More actions") */
+    menuLabel?: string;
+    class?: string;
+  }
+
+  let {
+    title = $bindable(''),
+    onTitleChange,
+    titleReadonly = false,
+    titlePlaceholder = 'Untitled',
+    subtitle,
+    backHref,
+    backLabel = 'Back',
+    modes,
+    mode = $bindable(modes?.[0]?.value ?? ''),
+    onModeChange,
+    status,
+    issues,
+    actions,
+    menuItems,
+    menuLabel = 'More actions',
+    class: className,
+  }: Props = $props();
+
+  // Title value when editing began, so Escape can put it back
+  let titleAtFocus = '';
+
+  function commitTitle(input: HTMLInputElement) {
+    const next = input.value.trim();
+    if (!next) {
+      title = titleAtFocus;
+      return;
+    }
+    if (next !== titleAtFocus) onTitleChange?.(next);
+    titleAtFocus = next;
+  }
+
+  function titleKeydown(event: KeyboardEvent) {
+    const input = event.currentTarget as HTMLInputElement;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      input.blur();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      title = titleAtFocus;
+      input.value = titleAtFocus;
+      input.blur();
+    }
+  }
+</script>
+
+<header
+  class={cn(
+    'flex shrink-0 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-background px-2 py-2 md:h-14 md:flex-nowrap md:gap-x-3 md:px-3 md:py-0',
+    className
+  )}
+>
+  <div class="flex min-w-0 flex-1 items-center gap-1 md:basis-0">
+    {#if backHref}
+      <a
+        href={backHref}
+        class="flex h-9 w-9 shrink-0 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"
+        aria-label={backLabel}
+        title={backLabel}
+      >
+        <Icon name="arrow-left" size={18} aria-hidden="true" />
+      </a>
+    {/if}
+    <div class="min-w-0 flex-1">
+      <h1 class={titleReadonly ? 'truncate px-1.5 text-base font-semibold' : 'sr-only'}>
+        {title || titlePlaceholder}
+      </h1>
+      {#if !titleReadonly}
+        <input
+          bind:value={title}
+          aria-label="Title"
+          placeholder={titlePlaceholder}
+          class="block w-full max-w-md truncate rounded-md border border-transparent bg-transparent px-1.5 py-0.5 text-base font-semibold leading-tight outline-none hover:border-border focus:border-input focus:bg-background focus:ring-2 focus:ring-ring"
+          onfocus={(e) => (titleAtFocus = (e.currentTarget as HTMLInputElement).value)}
+          onblur={(e) => commitTitle(e.currentTarget as HTMLInputElement)}
+          onkeydown={titleKeydown}
+        />
+      {/if}
+      {#if subtitle}
+        <p class="truncate px-1.5 text-xs text-muted-foreground">{subtitle}</p>
+      {/if}
+    </div>
+  </div>
+
+  {#if modes && modes.length > 1}
+    <div class="order-last flex w-full justify-center md:order-none md:w-auto">
+      <SegmentedControl
+        options={modes}
+        bind:value={mode}
+        onValueChange={onModeChange}
+        label="Editor mode"
+        size="sm"
+        class="w-full md:w-auto [&>*]:flex-1 md:[&>*]:flex-none"
+      />
+    </div>
+  {/if}
+
+  <div class="flex shrink-0 items-center justify-end gap-1 md:flex-1 md:basis-0 md:gap-2">
+    {#if status}{@render status()}{/if}
+    {#if issues}{@render issues()}{/if}
+    {#if actions}{@render actions()}{/if}
+    {#if menuItems && menuItems.length > 0}
+      <DropdownMenu
+        items={menuItems}
+        align="end"
+        triggerVariant="ghost"
+        triggerSize="icon"
+        triggerClass="h-9 w-9"
+        triggerLabel={menuLabel}
+      >
+        {#snippet trigger()}
+          <Icon name="more-horizontal" size={18} aria-hidden="true" />
+        {/snippet}
+      </DropdownMenu>
+    {/if}
+  </div>
+</header>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import { type DropdownMenuItem, type DropdownMenuGroup } from '../DropdownMenu.svelte';
+import { type SegmentedControlOption } from '../SegmentedControl.svelte';
+/**
+ * StudioBar - the one bar across the top of a Studio.
+ *
+ * Left: back link and the document title, edited in place. Middle: the
+ * modes that separate building from configuring (e.g. Build · Settings ·
+ * Share). Right: save status, issues, the primary action, and one overflow
+ * menu for everything else (export, history, delete...). On phones the
+ * modes wrap onto their own row.
+ */
+interface Props {
+    /** Title of the document being edited (bindable) */
+    title?: string;
+    /** Called when an edited title is committed (blur or Enter) */
+    onTitleChange?: (title: string) => void;
+    /** Show the title as text instead of an input */
+    titleReadonly?: boolean;
+    titlePlaceholder?: string;
+    /** Small line under the title, e.g. "Survey · 5 questions" */
+    subtitle?: string;
+    /** Back link, e.g. to the list of surveys */
+    backHref?: string;
+    /** Accessible name of the back link (default: "Back") */
+    backLabel?: string;
+    /** Mode tabs; omit for single-mode editors */
+    modes?: SegmentedControlOption[];
+    /** Active mode (bindable) */
+    mode?: string;
+    onModeChange?: (mode: string) => void;
+    /** Save state, normally a `SaveStatus` */
+    status?: Snippet;
+    /** Issues, normally an `IssuesButton` */
+    issues?: Snippet;
+    /** Primary action(s), e.g. a Publish or Present button */
+    actions?: Snippet;
+    /** Overflow menu items (export, history, delete...) */
+    menuItems?: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Accessible name of the overflow menu (default: "More actions") */
+    menuLabel?: string;
+    class?: string;
+}
+declare const StudioBar: import("svelte").Component<Props, {}, "title" | "mode">;
+type StudioBar = ReturnType<typeof StudioBar>;
+export default StudioBar;

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import SegmentedControl from '../SegmentedControl.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * StudioCanvas - the middle of a Studio: the real thing, as people will see it.
+   *
+   * Scrolls on its own and centres its content on a quiet backdrop. With
+   * `deviceToggle`, a Desktop/Phone switch narrows the frame to phone width.
+   * Wrap each selectable part in a `StudioCanvasItem`, or, for content
+   * rendered elsewhere (an iframe), handle selection yourself.
+   */
+  interface Props {
+    children: Snippet;
+    /** Show the Desktop/Phone switch */
+    deviceToggle?: boolean;
+    /** Previewed device (bindable) */
+    device?: 'desktop' | 'phone';
+    /** Width of the frame on desktop (default: 48rem, a readable column) */
+    maxWidth?: string;
+    /** Extra controls beside the device switch */
+    toolbar?: Snippet;
+    /** Accessible name of the canvas region (default: "Canvas") */
+    label?: string;
+    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    onBackgroundClick?: () => void;
+    /** Classes for the frame that holds the content */
+    frameClass?: string;
+    class?: string;
+  }
+
+  let {
+    children,
+    deviceToggle = false,
+    device = $bindable('desktop'),
+    maxWidth = '48rem',
+    toolbar,
+    label = 'Canvas',
+    onBackgroundClick,
+    frameClass,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  // On a phone the canvas already is phone width; the switch would do nothing
+  const showDevices = $derived(deviceToggle && studio?.layout !== 'compact');
+  const width = $derived(device === 'phone' && showDevices ? '390px' : maxWidth);
+</script>
+
+<section aria-label={label} class={cn('flex h-full flex-col', className)}>
+  {#if showDevices || toolbar}
+    <div class="flex shrink-0 items-center justify-end gap-2 px-3 pt-3">
+      {#if toolbar}{@render toolbar()}{/if}
+      {#if showDevices}
+        <SegmentedControl
+          bind:value={device}
+          label="Preview size"
+          size="sm"
+          options={[
+            { value: 'desktop', label: 'Desktop', icon: 'monitor' },
+            { value: 'phone', label: 'Phone', icon: 'smartphone' },
+          ]}
+        />
+      {/if}
+    </div>
+  {/if}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div
+    class="min-h-0 flex-1 overflow-y-auto px-3 pb-20 pt-3 md:px-6 md:pb-10"
+    onclick={(e) => {
+      if (e.target === e.currentTarget) onBackgroundClick?.();
+    }}
+  >
+    <div
+      class={cn(
+        'mx-auto w-full rounded-lg border border-border bg-background shadow-sm transition-[max-width] duration-200',
+        frameClass
+      )}
+      style:max-width={width}
+    >
+      {@render children()}
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+/**
+ * StudioCanvas - the middle of a Studio: the real thing, as people will see it.
+ *
+ * Scrolls on its own and centres its content on a quiet backdrop. With
+ * `deviceToggle`, a Desktop/Phone switch narrows the frame to phone width.
+ * Wrap each selectable part in a `StudioCanvasItem`, or, for content
+ * rendered elsewhere (an iframe), handle selection yourself.
+ */
+interface Props {
+    children: Snippet;
+    /** Show the Desktop/Phone switch */
+    deviceToggle?: boolean;
+    /** Previewed device (bindable) */
+    device?: 'desktop' | 'phone';
+    /** Width of the frame on desktop (default: 48rem, a readable column) */
+    maxWidth?: string;
+    /** Extra controls beside the device switch */
+    toolbar?: Snippet;
+    /** Accessible name of the canvas region (default: "Canvas") */
+    label?: string;
+    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    onBackgroundClick?: () => void;
+    /** Classes for the frame that holds the content */
+    frameClass?: string;
+    class?: string;
+}
+declare const StudioCanvas: import("svelte").Component<Props, {}, "device">;
+type StudioCanvas = ReturnType<typeof StudioCanvas>;
+export default StudioCanvas;