@classic-homes/theme-svelte 1.17.0 → 1.19.0

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;

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;