@classic-homes/theme-svelte 1.20.0 → 1.22.0

package/dist/__tests__/studio-canvas-item.svelte.test.js

@@ -0,0 +1,98 @@
+/**
+ * StudioCanvasItem: picking an item opens the inspector on phones unless it
+ * is edited in place; only picking it from elsewhere scrolls it into view;
+ * the "+" can sit in the gutter.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+const revealInspector = vi.fn();
+vi.mock('../lib/components/studio/context.js', () => ({
+    getStudioContext: () => ({ revealInspector }),
+    setStudioContext: () => { },
+}));
+const { default: StudioCanvasItem } = await import('../lib/components/studio/StudioCanvasItem.svelte');
+let instance = null;
+let host;
+function render(props) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    instance = mount(StudioCanvasItem, {
+        target: host,
+        props: {
+            label: 'Block 1',
+            children: createRawSnippet(() => ({ render: () => '<p>Body</p>' })),
+            ...props,
+        },
+    });
+    flushSync();
+    return host;
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    revealInspector.mockClear();
+});
+describe('StudioCanvasItem revealOnSelect', () => {
+    it('reveals the inspector when picked, by default', () => {
+        const el = render({ onSelect: vi.fn() });
+        el.querySelector('p').click();
+        expect(revealInspector).toHaveBeenCalledTimes(1);
+    });
+    it('selects without revealing the inspector when edited in place', () => {
+        const onSelect = vi.fn();
+        const el = render({ onSelect, revealOnSelect: false });
+        el.querySelector('p').click();
+        expect(onSelect).toHaveBeenCalledTimes(1);
+        expect(revealInspector).not.toHaveBeenCalled();
+    });
+});
+describe('StudioCanvasItem scrolling', () => {
+    const scrollIntoView = vi.fn();
+    Element.prototype.scrollIntoView = scrollIntoView;
+    afterEach(() => scrollIntoView.mockClear());
+    async function settle() {
+        flushSync();
+        await Promise.resolve();
+        await Promise.resolve();
+    }
+    it('scrolls into view when selected from elsewhere', async () => {
+        render({ selected: false });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        unmount(instance);
+        render({ selected: true });
+        await settle();
+        expect(scrollIntoView).toHaveBeenCalled();
+    });
+    it('does not move when picked on the canvas', async () => {
+        let selected = $state(false);
+        const el = render({
+            get selected() {
+                return selected;
+            },
+            onSelect: () => (selected = true),
+        });
+        const body = el.querySelector('p');
+        body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        body.click();
+        await settle();
+        expect(selected).toBe(true);
+        expect(scrollIntoView).not.toHaveBeenCalled();
+    });
+});
+describe('StudioCanvasItem insertPlacement', () => {
+    it('centres the "+" by default and puts it in the gutter on request', () => {
+        let el = render({ onInsert: vi.fn() });
+        expect(el.querySelector('button[aria-label="Add below Block 1"]').className).toContain('left-1/2');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        unmount(instance);
+        el = render({ onInsert: vi.fn(), insertPlacement: 'gutter', selected: true });
+        const plus = el.querySelector('button[aria-label="Add below Block 1"]');
+        expect(plus.className).toContain('right-full');
+        expect(plus.className).not.toContain('left-1/2');
+        // Not pinned visible over a selected item's text
+        expect(plus.className).not.toMatch(/(^| )opacity-100( |$)/);
+    });
+});

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

@@ -12,6 +12,11 @@
    * 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.
+   *
+   * Picking an item from elsewhere (an outline, an issue list) scrolls it into
+   * view; picking it on the canvas does not, so it never moves under the
+   * pointer. `insertPlacement="gutter"` puts the "+" in the left margin, for
+   * items edited in place, where a centred "+" would sit on the text.
    */
   interface Props {
     children: Snippet;
@@ -27,6 +32,13 @@
     insertLabel?: string;
     /** Marks the item as having problems */
     invalid?: boolean;
+    /**
+     * Open the inspector sheet on phones when the item is picked (default).
+     * Turn off for items edited in place, where the sheet would cover them.
+     */
+    revealOnSelect?: boolean;
+    /** Where the "+" sits: centred on the item's bottom edge, or in the left gutter beside it */
+    insertPlacement?: 'center' | 'gutter';
     class?: string;
   }
 
@@ -39,11 +51,15 @@
     onInsert,
     insertLabel,
     invalid = false,
+    revealOnSelect = true,
+    insertPlacement = 'center',
     class: className,
   }: Props = $props();
 
   const studio = getStudioContext();
   let element: HTMLDivElement | undefined = $state();
+  /** The item was picked on the canvas (pointer or focus), so it is already in view. */
+  let pickedHere = false;
 
   // Quick actions (toolbar, "+") act on the item without selecting it. A
   // dialog they open (the insert palette) returns focus to them on close;
@@ -53,11 +69,18 @@
 
   function select(reveal: boolean) {
     if (!selected) onSelect?.();
-    if (reveal) studio?.revealInspector();
+    if (reveal && revealOnSelect) studio?.revealInspector();
   }
 
   $effect(() => {
-    if (!selected || !element) return;
+    if (!selected || !element) {
+      pickedHere = false;
+      return;
+    }
+    if (pickedHere) {
+      pickedHere = false;
+      return;
+    }
     const el = element;
     void tick().then(() => {
       // Don't yank the canvas while the user is working inside the item
@@ -82,9 +105,14 @@
     invalid && 'outline-dashed outline-2 -outline-offset-2 outline-warning/70',
     className
   )}
+  onpointerdowncapture={(e) => {
+    if (!selected && !inQuickAction(e.target)) pickedHere = true;
+  }}
   onclickcapture={(e) => select(!inQuickAction(e.target))}
   onfocusin={(e) => {
-    if (!inQuickAction(e.target)) select(false);
+    if (inQuickAction(e.target)) return;
+    if (!selected) pickedHere = true;
+    select(false);
   }}
 >
   {#if !selected}
@@ -115,8 +143,13 @@
         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}
+        class={cn(
+          'absolute top-0 z-10 flex h-7 w-7 -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',
+          insertPlacement === 'gutter'
+            ? 'right-full mr-1.5 group-focus-within/item:opacity-100'
+            : 'left-1/2 -translate-x-1/2',
+          selected && insertPlacement === 'center' && 'opacity-100'
+        )}
         onclick={(e) => {
           e.stopPropagation();
           onInsert?.();

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

@@ -7,6 +7,11 @@ import { type Snippet } from 'svelte';
  * 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.
+ *
+ * Picking an item from elsewhere (an outline, an issue list) scrolls it into
+ * view; picking it on the canvas does not, so it never moves under the
+ * pointer. `insertPlacement="gutter"` puts the "+" in the left margin, for
+ * items edited in place, where a centred "+" would sit on the text.
  */
 interface Props {
     children: Snippet;
@@ -22,6 +27,13 @@ interface Props {
     insertLabel?: string;
     /** Marks the item as having problems */
     invalid?: boolean;
+    /**
+     * Open the inspector sheet on phones when the item is picked (default).
+     * Turn off for items edited in place, where the sheet would cover them.
+     */
+    revealOnSelect?: boolean;
+    /** Where the "+" sits: centred on the item's bottom edge, or in the left gutter beside it */
+    insertPlacement?: 'center' | 'gutter';
     class?: string;
 }
 declare const StudioCanvasItem: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",