@classic-homes/theme-svelte 1.34.0 → 1.34.1

package/dist/lib/components/MultiSelect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import { computeDescribedBy } from '../utils/form.js';
@@ -80,6 +81,7 @@
   const describedBy = $derived(computeDescribedBy(hintId, errorId, !!hint, !!error));
 
   let searchQuery = $state('');
+  let inputEl = $state<HTMLInputElement | null>(null);
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let open = $state(false);
 
@@ -131,6 +133,20 @@
     if (toggled !== null) anchor = toggled;
     value = next;
     onValueChange?.(next);
+    clearInput();
+  }
+
+  /**
+   * The combobox writes the picked option's label into the input; clear it
+   * (through an input event, so the combobox's own state and the filter both
+   * reset) so the next search starts empty and the full list shows again.
+   */
+  function clearInput() {
+    void tick().then(() => {
+      if (!inputEl || inputEl.value === '') return;
+      inputEl.value = '';
+      inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+    });
   }
 
   function removeValue(valueToRemove: string) {
@@ -143,6 +159,7 @@
     open = isOpen;
     if (!isOpen) {
       searchQuery = '';
+      clearInput();
     }
   }
 
@@ -235,6 +252,7 @@
     >
       <div class="relative">
         <ComboboxPrimitive.Input
+          bind:ref={inputEl}
           id={componentId}
           placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
           oninput={handleSearchInput}

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

@@ -15,8 +15,9 @@
    *
    * 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.
+   * pointer. For items edited in place, `insertPlacement="gutter"` puts the
+   * "+" in the left margin and `toolbarPlacement="above"` lifts the toolbar
+   * clear of the item, so neither sits on the text.
    */
   interface Props {
     children: Snippet;
@@ -39,6 +40,12 @@
     revealOnSelect?: boolean;
     /** Where the "+" sits: centred on the item's bottom edge, or in the left gutter beside it */
     insertPlacement?: 'center' | 'gutter';
+    /**
+     * Where the toolbar sits: straddling the item's top edge (default), or
+     * wholly above it, for items edited in place, where the default would
+     * cover the first line of text.
+     */
+    toolbarPlacement?: 'edge' | 'above';
     class?: string;
   }
 
@@ -53,6 +60,7 @@
     invalid = false,
     revealOnSelect = true,
     insertPlacement = 'center',
+    toolbarPlacement = 'edge',
     class: className,
   }: Props = $props();
 
@@ -129,7 +137,10 @@
   {#if selected && toolbar}
     <div
       data-studio-quick-action
-      class="absolute -top-4 right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md"
+      class={cn(
+        'absolute right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md',
+        toolbarPlacement === 'above' ? 'bottom-full mb-1' : '-top-4'
+      )}
     >
       {@render toolbar()}
     </div>

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

@@ -10,8 +10,9 @@ import { type Snippet } from 'svelte';
  *
  * 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.
+ * pointer. For items edited in place, `insertPlacement="gutter"` puts the
+ * "+" in the left margin and `toolbarPlacement="above"` lifts the toolbar
+ * clear of the item, so neither sits on the text.
  */
 interface Props {
     children: Snippet;
@@ -34,6 +35,12 @@ interface Props {
     revealOnSelect?: boolean;
     /** Where the "+" sits: centred on the item's bottom edge, or in the left gutter beside it */
     insertPlacement?: 'center' | 'gutter';
+    /**
+     * Where the toolbar sits: straddling the item's top edge (default), or
+     * wholly above it, for items edited in place, where the default would
+     * cover the first line of text.
+     */
+    toolbarPlacement?: 'edge' | 'above';
     class?: string;
 }
 declare const StudioCanvasItem: import("svelte").Component<Props, {}, "">;

package/package.json

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