@classic-homes/theme-svelte 1.20.0 → 1.21.0

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

@@ -0,0 +1,50 @@
+/**
+ * StudioCanvasItem and the inspector sheet: picking an item opens the
+ * inspector on phones, unless the item is edited in place.
+ */
+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();
+    });
+});

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

@@ -27,6 +27,11 @@
     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;
     class?: string;
   }
 
@@ -39,6 +44,7 @@
     onInsert,
     insertLabel,
     invalid = false,
+    revealOnSelect = true,
     class: className,
   }: Props = $props();
 
@@ -53,7 +59,7 @@
 
   function select(reveal: boolean) {
     if (!selected) onSelect?.();
-    if (reveal) studio?.revealInspector();
+    if (reveal && revealOnSelect) studio?.revealInspector();
   }
 
   $effect(() => {

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

@@ -22,6 +22,11 @@ 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;
     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.21.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",