@classic-homes/theme-svelte 1.17.0 → 1.19.0

package/dist/__tests__/dropdown-trigger.test.js

@@ -27,4 +27,13 @@ describe('DropdownMenu trigger', () => {
         }
         expect(button.classList.contains('custom')).toBe(true);
     });
+    it('adds a disclosure chevron only with showChevron', () => {
+        const { unmount } = render(DropdownMenu, { props: { items, trigger } });
+        expect(screen.getByRole('button', { name: 'Menu' }).querySelector('svg')).toBeNull();
+        unmount();
+        render(DropdownMenu, { props: { items, trigger, triggerVariant: 'ghost', showChevron: true } });
+        const chevron = screen.getByRole('button', { name: 'Menu' }).querySelector('svg');
+        expect(chevron).not.toBeNull();
+        expect(chevron?.getAttribute('aria-hidden')).toBe('true');
+    });
 });

package/dist/__tests__/sidebar-mobile.test.js

@@ -70,4 +70,17 @@ describe('sidebar mobile semantics', () => {
         sidebarStore.setMobile(false);
         expect(sidebarStore.isOpen).toBe(false);
     });
+    it('does not animate expansion until the frames after initialize', async () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-sections`, JSON.stringify(['a']));
+        // A fresh store instance would start false; the singleton may already be settled
+        // from earlier tests, so check the reset-on-initialize path via a new appId.
+        sidebarStore.animate = false;
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isSectionExpanded('a')).toBe(true);
+        expect(sidebarStore.animate).toBe(false);
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(sidebarStore.animate).toBe(true);
+    });
 });

package/dist/__tests__/studio.test.js

@@ -0,0 +1,223 @@
+/**
+ * Studio editor frame: outline selection and reordering (pointer-free, by
+ * keyboard), the save and issues signals, and the responsive move of the
+ * outline and inspector into sheets.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, tick, createRawSnippet } from 'svelte';
+import StudioOutline from '../lib/components/studio/StudioOutline.svelte';
+import SaveStatus from '../lib/components/studio/SaveStatus.svelte';
+import IssuesButton from '../lib/components/studio/IssuesButton.svelte';
+import Studio from '../lib/components/studio/Studio.svelte';
+import StudioCanvasItem from '../lib/components/studio/StudioCanvasItem.svelte';
+let instance = null;
+let host;
+function render(component, props) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    instance = mount(component, { target: host, props });
+    flushSync();
+    return host;
+}
+function viewport(width) {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => {
+        const min = Number(/min-width:\s*(\d+)/.exec(query)?.[1] ?? 0);
+        return {
+            matches: width >= min,
+            media: query,
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        };
+    });
+}
+const html = (markup) => createRawSnippet(() => ({ render: () => markup }));
+function key(target, k, init = {}) {
+    target.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, ...init }));
+    flushSync();
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+});
+const entries = [
+    { id: 'a', title: 'Name' },
+    { id: 'b', title: 'Email', issues: 2 },
+    { id: 'c', title: 'Rating' },
+];
+describe('StudioOutline', () => {
+    it('selects a row and marks it current', () => {
+        const onSelect = vi.fn();
+        const el = render(StudioOutline, { items: entries, selected: 'a', onSelect });
+        const rows = el.querySelectorAll('[data-outline-row]');
+        rows[2].click();
+        flushSync();
+        expect(onSelect).toHaveBeenCalledWith('c');
+        expect(rows[2].getAttribute('aria-current')).toBe('true');
+        expect(rows[0].hasAttribute('aria-current')).toBe(false);
+    });
+    it('keeps one row in the tab order and moves focus with the arrow keys', () => {
+        const el = render(StudioOutline, { items: entries, selected: 'b' });
+        const rows = el.querySelectorAll('[data-outline-row]');
+        expect([...rows].map((r) => r.tabIndex)).toEqual([-1, 0, -1]);
+        rows[1].focus();
+        key(rows[1], 'ArrowDown');
+        expect(document.activeElement).toBe(rows[2]);
+    });
+    it('shows issue counts as text, not only colour', () => {
+        const el = render(StudioOutline, { items: entries });
+        expect(el.textContent).toContain('2');
+        expect(el.textContent).toContain('issues');
+    });
+    it('reorders with the keyboard: pick up, move, drop', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        const handle = el.querySelector('[data-sortable-handle="a"]');
+        expect(handle.getAttribute('aria-label')).toBe('Reorder Name');
+        key(handle, ' ');
+        expect(handle.getAttribute('aria-pressed')).toBe('true');
+        key(handle, 'ArrowDown');
+        expect(onReorder).toHaveBeenCalledWith(0, 1);
+    });
+    it('moves in one step with Alt+Arrow', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        const handle = el.querySelector('[data-sortable-handle="c"]');
+        key(handle, 'ArrowUp', { altKey: true });
+        expect(onReorder).toHaveBeenCalledWith(2, 1);
+    });
+    it('ignores arrows on a handle that is not picked up', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        key(el.querySelector('[data-sortable-handle="a"]'), 'ArrowDown');
+        expect(onReorder).not.toHaveBeenCalled();
+    });
+    it('has no drag handles when reordering is off', () => {
+        const el = render(StudioOutline, { items: entries });
+        expect(el.querySelector('[data-sortable-handle]')).toBeNull();
+    });
+    it('renders the add button only when onAdd is given', () => {
+        const onAdd = vi.fn();
+        const el = render(StudioOutline, { items: entries, onAdd, addLabel: 'Add question' });
+        const add = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Add question'));
+        add.click();
+        expect(onAdd).toHaveBeenCalled();
+    });
+});
+describe('SaveStatus', () => {
+    it('shows one word for routine states and announces nothing', () => {
+        const el = render(SaveStatus, { state: 'saved' });
+        expect(el.textContent).toContain('Saved');
+        expect(el.querySelector('[role="status"]').textContent).toBe('');
+    });
+    it('announces failures and offers Retry in its details', async () => {
+        const onRetry = vi.fn();
+        const el = render(SaveStatus, {
+            state: 'error',
+            detail: 'The server did not answer.',
+            onRetry,
+        });
+        expect(el.querySelector('[role="status"]').textContent).toBe('Not saved');
+        const trigger = el.querySelector('button');
+        expect(trigger.getAttribute('aria-label')).toContain('Not saved');
+        trigger.click();
+        flushSync();
+        await tick();
+        const retry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Retry'));
+        expect(document.body.textContent).toContain('The server did not answer.');
+        retry.click();
+        expect(onRetry).toHaveBeenCalled();
+    });
+});
+describe('IssuesButton', () => {
+    const issues = [
+        { id: '1', message: 'Add a question', location: 'Questions' },
+        { id: '2', message: 'Add at least two options', location: 'Question 2' },
+        { id: '3', message: 'Consider a close date', severity: 'warning' },
+    ];
+    it('is hidden when there is nothing to fix', () => {
+        const el = render(IssuesButton, { issues: [] });
+        expect(el.querySelector('button')).toBeNull();
+    });
+    it('names errors and suggestions in its label', () => {
+        const el = render(IssuesButton, { issues });
+        expect(el.querySelector('button').getAttribute('aria-label')).toBe('2 issues to fix, 1 suggestion');
+    });
+    it('jumps to an issue and closes', async () => {
+        const onSelect = vi.fn();
+        const el = render(IssuesButton, { issues, onSelect });
+        el.querySelector('button').click();
+        flushSync();
+        await tick();
+        const entry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Add at least two options'));
+        entry.click();
+        flushSync();
+        expect(onSelect).toHaveBeenCalledWith(issues[1]);
+    });
+});
+describe('Studio layout', () => {
+    const parts = {
+        bar: html('<header>Bar</header>'),
+        rail: html('<nav>Rail</nav>'),
+        canvas: html('<p>Canvas</p>'),
+        inspector: html('<div>Inspector</div>'),
+    };
+    it('shows rail, canvas and inspector side by side when wide', () => {
+        viewport(1440);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside[aria-label="Outline"]')).not.toBeNull();
+        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
+        expect(el.textContent).not.toContain('Outline');
+    });
+    it('moves the rail into a sheet below 1280px', () => {
+        viewport(1024);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside[aria-label="Outline"]')).toBeNull();
+        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
+        const open = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Outline'));
+        open.click();
+        flushSync();
+        expect(document.body.textContent).toContain('Rail');
+    });
+    it('leaves only the canvas on phones', () => {
+        viewport(390);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside')).toBeNull();
+        expect(el.textContent).toContain('Canvas');
+        const labels = [...el.querySelectorAll('button')].map((b) => b.textContent?.trim());
+        expect(labels).toEqual(['Outline', 'Properties']);
+    });
+});
+describe('StudioCanvasItem', () => {
+    it('selects on click and offers a keyboard way in', () => {
+        const onSelect = vi.fn();
+        const el = render(StudioCanvasItem, {
+            label: 'Question 1',
+            onSelect,
+            children: html('<p>Body</p>'),
+        });
+        const edit = el.querySelector('button');
+        expect(edit.textContent?.trim()).toBe('Edit Question 1');
+        el.querySelector('p').click();
+        expect(onSelect).toHaveBeenCalled();
+    });
+    it('inserts below without needing a selection change', () => {
+        const onInsert = vi.fn();
+        const el = render(StudioCanvasItem, {
+            label: 'Question 1',
+            selected: true,
+            onInsert,
+            children: html('<p>Body</p>'),
+        });
+        el.querySelector('button[aria-label="Add below Question 1"]').click();
+        expect(onInsert).toHaveBeenCalled();
+    });
+});

package/dist/lib/components/DropdownMenu.svelte

@@ -50,6 +50,11 @@
     triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
   }
 
   let {
@@ -64,6 +69,7 @@
     triggerVariant,
     triggerSize = 'sm',
     triggerLabel,
+    showChevron = false,
   }: Props = $props();
 
   function handleOpenChange(newOpen: boolean) {
@@ -130,6 +136,17 @@
         aria-label={triggerLabel}
       >
         {@render trigger()}
+        {#if showChevron}
+          <Icon
+            name="chevron-down"
+            size={16}
+            class={cn(
+              'ml-1 shrink-0 opacity-60 transition-transform duration-200 motion-reduce:transition-none',
+              open && 'rotate-180'
+            )}
+            aria-hidden="true"
+          />
+        {/if}
       </button>
     {/snippet}
   </DropdownMenuPrimitive.Trigger>

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -44,6 +44,11 @@ interface Props {
     triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/lib/components/Sheet.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  /**
+   * Sheet - a modal panel that slides in from an edge of the screen.
+   *
+   * Use it for secondary surfaces that belong beside the page rather than on
+   * top of it: version history, a phone-width outline or inspector, filters.
+   * Built on the same Bits UI dialog as `Dialog` (focus trap, Escape, scrim
+   * click and focus return), so only the placement differs.
+   */
+  const sheet = tv({
+    slots: {
+      content:
+        'fixed z-50 flex flex-col border-border bg-background shadow-lg outline-none duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out',
+    },
+    variants: {
+      side: {
+        right: {
+          content:
+            'inset-y-0 right-0 h-dvh w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+        },
+        left: {
+          content:
+            'inset-y-0 left-0 h-dvh w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+        },
+        bottom: {
+          content:
+            'inset-x-0 bottom-0 max-h-[85dvh] w-full rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        },
+      },
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    compoundVariants: [
+      { side: ['left', 'right'], size: 'sm', class: { content: 'sm:max-w-xs' } },
+      { side: ['left', 'right'], size: 'md', class: { content: 'sm:max-w-md' } },
+      { side: ['left', 'right'], size: 'lg', class: { content: 'sm:max-w-xl' } },
+    ],
+    defaultVariants: { side: 'right', size: 'md' },
+  });
+
+  interface Props {
+    /** Whether the sheet is open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Edge the sheet slides in from (default: right) */
+    side?: 'left' | 'right' | 'bottom';
+    /** Width of a left/right sheet from `sm` up; phones always get the full width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Heading, also the sheet's accessible name */
+    title: string;
+    /**
+     * Hide the heading row (the title still names the sheet for screen
+     * readers) when the content brings its own header. The close button moves
+     * into the grab bar (bottom) or the top-right corner (left/right).
+     */
+    hideTitle?: boolean;
+    description?: string;
+    /** Buttons beside the close button */
+    headerActions?: Snippet;
+    /** Pinned footer, e.g. the sheet's primary action */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    side = 'right',
+    size = 'md',
+    title,
+    hideTitle = false,
+    description,
+    headerActions,
+    footer,
+    children,
+    class: className,
+  }: Props = $props();
+
+  const styles = $derived(sheet({ side, size }));
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+</script>
+
+<!-- Rendered inside Content, so Close finds its dialog -->
+{#snippet closeButton()}
+  <DialogPrimitive.Close
+    class="flex h-9 w-9 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="Close"
+  >
+    <Icon name="close" size={18} aria-hidden="true" />
+  </DialogPrimitive.Close>
+{/snippet}
+
+<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay
+      class="fixed inset-0 z-50 bg-foreground/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogPrimitive.Content class={cn(styles.content(), className)}>
+      {#if side === 'bottom'}
+        <!-- Grab bar row; carries the close button when the title is hidden -->
+        <div class="relative flex h-6 shrink-0 items-center justify-center">
+          <div class="h-1.5 w-10 rounded-full bg-muted" aria-hidden="true"></div>
+          {#if hideTitle}
+            <div class="absolute right-2 top-1">{@render closeButton()}</div>
+          {/if}
+        </div>
+      {/if}
+
+      {#if hideTitle}
+        <DialogPrimitive.Title class="sr-only">{title}</DialogPrimitive.Title>
+        {#if description}
+          <DialogPrimitive.Description class="sr-only">{description}</DialogPrimitive.Description>
+        {/if}
+        {#if side !== 'bottom'}
+          <div class="absolute right-2 top-2 z-10">{@render closeButton()}</div>
+        {/if}
+      {:else}
+        <div class="flex shrink-0 items-start gap-3 border-b border-border px-4 py-3">
+          <div class="min-w-0 flex-1">
+            <DialogPrimitive.Title class="text-base font-semibold leading-tight">
+              {title}
+            </DialogPrimitive.Title>
+            {#if description}
+              <DialogPrimitive.Description class="mt-1 text-sm text-muted-foreground">
+                {description}
+              </DialogPrimitive.Description>
+            {/if}
+          </div>
+          <div class="-mr-1 ml-auto flex shrink-0 items-center gap-1">
+            {#if headerActions}{@render headerActions()}{/if}
+            {@render closeButton()}
+          </div>
+        </div>
+      {/if}
+      <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {@render children()}
+      </div>
+      {#if footer}
+        <div class="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
+          {@render footer()}
+        </div>
+      {/if}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/lib/components/Sheet.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the sheet is open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Edge the sheet slides in from (default: right) */
+    side?: 'left' | 'right' | 'bottom';
+    /** Width of a left/right sheet from `sm` up; phones always get the full width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Heading, also the sheet's accessible name */
+    title: string;
+    /**
+     * Hide the heading row (the title still names the sheet for screen
+     * readers) when the content brings its own header. The close button moves
+     * into the grab bar (bottom) or the top-right corner (left/right).
+     */
+    hideTitle?: boolean;
+    description?: string;
+    /** Buttons beside the close button */
+    headerActions?: Snippet;
+    /** Pinned footer, e.g. the sheet's primary action */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;