@classic-homes/theme-svelte 1.34.0 → 1.35.0

package/dist/lib/components/AppLauncher.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+  import type { IconName } from './Icon.svelte';
+
+  export interface AppLauncherItem {
+    id: string;
+    /** Name under the tile */
+    label: string;
+    /** Where the tile goes: a real link, so Ctrl/middle-click open a new tab */
+    href: string;
+    /** Tile icon (ignored when the `icon` snippet is set) */
+    icon?: IconName;
+    /** Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) */
+    external?: boolean;
+    /** Shown as the tile's tooltip */
+    description?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { Popover } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+  import { buttonVariants } from './button-variants.js';
+
+  /**
+   * AppLauncher - the header's "apps" grid: a grid-icon button that opens a
+   * panel of tiles linking to the other systems people use.
+   *
+   * Tiles are plain links, so Ctrl/middle-click open a new tab; external ones
+   * open in a new tab anyway. Arrow keys move between tiles, Home/End jump to
+   * the first/last, Escape closes and returns focus to the button.
+   */
+  interface Props {
+    apps: AppLauncherItem[];
+    /** Accessible name of the button and the panel (default: "Apps") */
+    triggerLabel?: string;
+    /** Heading at the top of the panel; none when unset */
+    title?: string;
+    /** Tiles per row (default: 3) */
+    columns?: number;
+    /** Panel alignment against the button (default: end) */
+    align?: 'start' | 'center' | 'end';
+    /** Panel open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Classes for the panel */
+    class?: string;
+    /** Classes for the trigger button */
+    triggerClass?: string;
+    /** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
+    icon?: Snippet<[AppLauncherItem]>;
+  }
+
+  let {
+    apps,
+    triggerLabel = 'Apps',
+    title,
+    columns = 3,
+    align = 'end',
+    open = $bindable(false),
+    onOpenChange,
+    class: className,
+    triggerClass,
+    icon,
+  }: Props = $props();
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  /** Arrow keys walk the grid by row and column; Home/End go to the ends. */
+  function handleKeydown(event: KeyboardEvent) {
+    const tiles = Array.from(
+      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-app-launcher-tile]')
+    );
+    const current = tiles.indexOf(document.activeElement as HTMLElement);
+    if (current === -1) return;
+    const last = tiles.length - 1;
+    const step: Record<string, number> = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: columns,
+      ArrowUp: -columns,
+    };
+    let next: number;
+    if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = last;
+    else if (event.key in step) next = current + step[event.key];
+    else return;
+    event.preventDefault();
+    tiles[Math.min(Math.max(next, 0), last)].focus();
+  }
+</script>
+
+<Popover.Root bind:open onOpenChange={handleOpenChange}>
+  <Popover.Trigger
+    class={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), triggerClass)}
+    aria-label={triggerLabel}
+  >
+    <Icon name="grid" size={20} aria-hidden="true" />
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      {align}
+      sideOffset={6}
+      collisionPadding={8}
+      class={cn(
+        'z-50 max-h-[calc(100dvh-5rem)] w-[min(20rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className
+      )}
+    >
+      <nav aria-label={title ?? triggerLabel}>
+        {#if title}
+          <p class="px-2 pb-2 pt-1 text-sm font-semibold">{title}</p>
+        {/if}
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+        <ul
+          class="grid gap-1"
+          style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
+          onkeydown={handleKeydown}
+        >
+          {#each apps as app (app.id)}
+            <li>
+              <a
+                href={app.href}
+                target={app.external ? '_blank' : undefined}
+                rel={app.external ? 'noopener noreferrer' : undefined}
+                title={app.description}
+                data-app-launcher-tile={app.id}
+                class="flex h-full flex-col items-center gap-1.5 rounded-md px-1 py-3 text-center text-xs font-medium text-foreground hover:bg-muted-hover focus-visible:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onclick={() => handleOpenChange(false)}
+              >
+                <span
+                  class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
+                  aria-hidden="true"
+                >
+                  {#if icon}
+                    {@render icon(app)}
+                  {:else}
+                    <Icon name={app.icon ?? 'external-link'} size={22} />
+                  {/if}
+                </span>
+                <span class="line-clamp-2 break-words">{app.label}</span>
+                {#if app.external}
+                  <span class="sr-only">(opens in a new tab)</span>
+                {/if}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

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

@@ -0,0 +1,46 @@
+import type { IconName } from './Icon.svelte';
+export interface AppLauncherItem {
+    id: string;
+    /** Name under the tile */
+    label: string;
+    /** Where the tile goes: a real link, so Ctrl/middle-click open a new tab */
+    href: string;
+    /** Tile icon (ignored when the `icon` snippet is set) */
+    icon?: IconName;
+    /** Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) */
+    external?: boolean;
+    /** Shown as the tile's tooltip */
+    description?: string;
+}
+import type { Snippet } from 'svelte';
+/**
+ * AppLauncher - the header's "apps" grid: a grid-icon button that opens a
+ * panel of tiles linking to the other systems people use.
+ *
+ * Tiles are plain links, so Ctrl/middle-click open a new tab; external ones
+ * open in a new tab anyway. Arrow keys move between tiles, Home/End jump to
+ * the first/last, Escape closes and returns focus to the button.
+ */
+interface Props {
+    apps: AppLauncherItem[];
+    /** Accessible name of the button and the panel (default: "Apps") */
+    triggerLabel?: string;
+    /** Heading at the top of the panel; none when unset */
+    title?: string;
+    /** Tiles per row (default: 3) */
+    columns?: number;
+    /** Panel alignment against the button (default: end) */
+    align?: 'start' | 'center' | 'end';
+    /** Panel open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Classes for the panel */
+    class?: string;
+    /** Classes for the trigger button */
+    triggerClass?: string;
+    /** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
+    icon?: Snippet<[AppLauncherItem]>;
+}
+declare const AppLauncher: import("svelte").Component<Props, {}, "open">;
+type AppLauncher = ReturnType<typeof AppLauncher>;
+export default AppLauncher;

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/dist/lib/index.d.ts

@@ -41,6 +41,7 @@ export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as AppLauncher, type AppLauncherItem } from './components/AppLauncher.svelte';
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';
 export { default as DataPanelContent } from './components/DataPanelContent.svelte';

package/dist/lib/index.js

@@ -49,6 +49,7 @@ export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as AppLauncher } from './components/AppLauncher.svelte';
 // DataPanel Components
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';

package/package.json

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