@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -244,13 +244,22 @@
         return;
       }
 
-      // Focus search with / key (when not in input/textarea)
-      if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName || '')) {
-        e.preventDefault();
-        const searchInput = document.querySelector<HTMLInputElement>('[data-sidebar-search]');
-        if (searchInput) {
-          searchInput.focus();
+      // Focus search with / key - only when a sidebar search exists and the
+      // key isn't meant for something else (a text field, rich-text editor,
+      // a select, a modified shortcut, or a handler that already claimed it).
+      if (e.key === '/') {
+        if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+        const target = e.target as HTMLElement | null;
+        if (
+          target?.isContentEditable ||
+          ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '')
+        ) {
+          return;
         }
+        const searchInput = document.querySelector<HTMLInputElement>('[data-sidebar-search]');
+        if (!searchInput) return;
+        e.preventDefault();
+        searchInput.focus();
       }
     };
 

package/dist/lib/components/layout/Footer.svelte

@@ -52,9 +52,9 @@
   aria-label="Site footer"
   class={cn(
     // Base styles
-    isDark ? 'bg-gray-600 text-white' : 'bg-muted/30',
+    isDark ? 'bg-brand-grey-1 text-white' : 'bg-muted/30',
     // Border styles - strong accent border or standard
-    strongBorder ? 'border-t-[10px] border-gray-500' : 'border-t border-border',
+    strongBorder ? 'border-t-[10px] border-brand-grey-2' : 'border-t border-border',
     className
   )}
 >
@@ -119,7 +119,7 @@
     {/if}
 
     {#if children}
-      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-500' : 'border-border')}>
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-brand-grey-2' : 'border-border')}>
         {@render children()}
       </div>
     {/if}
@@ -127,15 +127,15 @@
     <div
       class={cn(
         'mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row',
-        isDark ? 'border-gray-500' : 'border-border'
+        isDark ? 'border-brand-grey-2' : 'border-border'
       )}
     >
       {#if showLogo}
         <LogoMain variant="horizontal" color={isDark ? 'light' : 'dark'} size="sm" />
       {/if}
 
-      <!-- gray-300, not gray-400: #9ca3af is 3.22:1 on the gray-600 footer -->
-      <p class={cn('text-center text-sm', isDark ? 'text-gray-300' : 'text-muted-foreground')}>
+      <!-- white/80 on brand grey 1 is ~6:1; a mid grey (gray-400) fell to 3.22:1 -->
+      <p class={cn('text-center text-sm', isDark ? 'text-white/80' : 'text-muted-foreground')}>
         {displayCopyright}
       </p>
     </div>

package/dist/lib/components/layout/FormPageLayout.svelte

@@ -73,10 +73,11 @@
         </aside>
       {/if}
 
-      <!-- Main Content -->
-      <main id="form-content" class={hasSidebar ? 'order-last lg:order-first' : ''}>
+      <!-- Main Content. A div, not <main>: this layout sits inside PublicLayout or
+           DashboardLayout, which already render the page's main landmark. -->
+      <div id="form-content" class={hasSidebar ? 'order-last lg:order-first' : ''}>
         {@render children()}
-      </main>
+      </div>
     </div>
 
     <!-- Help Text Footer -->

package/dist/lib/components/layout/Sidebar.svelte

@@ -273,29 +273,33 @@
     if (query === prevSearchQuery) return;
     prevSearchQuery = query;
 
-    if (query) {
-      // Force expand all sections during search
-      const allSectionIds = roleFilteredNavigation.map((section) => section.id);
-      sidebarStore.forceExpandSections(allSectionIds);
-
-      // Force expand items with matching children
-      const itemsToExpand: string[] = [];
-
-      const collectMatchingParents = (items: NavItem[]) => {
-        items.forEach((item) => {
-          if (item.children) {
-            if (hasMatchingDescendant(item, query)) {
-              itemsToExpand.push(item.id);
-            }
-            collectMatchingParents(item.children);
+    if (!query) {
+      // Search cleared: put back what the user had expanded before it.
+      sidebarStore.restoreSearchExpansion();
+      return;
+    }
+
+    // Force expand all sections during search
+    const allSectionIds = roleFilteredNavigation.map((section) => section.id);
+    sidebarStore.forceExpandSections(allSectionIds);
+
+    // Force expand items with matching children
+    const itemsToExpand: string[] = [];
+
+    const collectMatchingParents = (items: NavItem[]) => {
+      items.forEach((item) => {
+        if (item.children) {
+          if (hasMatchingDescendant(item, query)) {
+            itemsToExpand.push(item.id);
           }
-        });
-      };
+          collectMatchingParents(item.children);
+        }
+      });
+    };
 
-      roleFilteredNavigation.forEach((section) => collectMatchingParents(section.items));
-      if (itemsToExpand.length > 0) {
-        sidebarStore.forceExpandItems(itemsToExpand);
-      }
+    roleFilteredNavigation.forEach((section) => collectMatchingParents(section.items));
+    if (itemsToExpand.length > 0) {
+      sidebarStore.forceExpandItems(itemsToExpand);
     }
   });
 
@@ -319,6 +323,34 @@
     sidebarStore.setDefaultItems(defaultExpanded);
   });
 
+  // Keep the active item visible: open the section and parent items holding
+  // it when it changes. Declared after the defaults effects so it runs after
+  // them: while nothing is saved, every new navigation re-applies the
+  // defaults, which would close it again. Once the user has toggled (saved),
+  // a section they closed stays closed until the active item moves.
+  let revealedActiveId: string | null = null;
+  $effect(() => {
+    type ActivePath = { id: string; parents: string[] };
+    const findActive = (items: NavItem[], parents: string[]): ActivePath | null => {
+      for (const item of items) {
+        if (item.active) return { id: item.id, parents };
+        const found = item.children && findActive(item.children, [...parents, item.id]);
+        if (found) return found;
+      }
+      return null;
+    };
+    for (const section of roleFilteredNavigation) {
+      const active = findActive(section.items, []);
+      if (!active) continue;
+      if (active.id !== revealedActiveId || !sidebarStore.hasPersistedExpansionState) {
+        sidebarStore.revealExpansion([section.id], active.parents);
+      }
+      revealedActiveId = active.id;
+      return;
+    }
+    revealedActiveId = null;
+  });
+
   // Flyout state for collapsed sidebar
   let hoveredFlyoutItem = $state<NavItem | null>(null);
   let flyoutTop = $state(0);

package/dist/lib/components/media/Image.svelte.d.ts

@@ -25,7 +25,7 @@ declare const Image: import("svelte").Component<Omit<HTMLImgAttributes, "class"
      */
     ratio?: MediaAspectRatio | number;
     /** How the image fills its box */
-    fit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+    fit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
     /** Corner rounding */
     rounded?: "sm" | "md" | "lg" | "xl" | "none" | "full" | undefined;
     /**

package/dist/lib/components/media/Lightbox.svelte

@@ -89,6 +89,10 @@
   const zoom = useMediaZoom();
 
   const activeItem = $derived(items[index]);
+  // Zoom only applies to images. Gating the keys and the pan mode on this keeps
+  // '+' on a video or embed from leaving an invisible zoom that hijacks arrows.
+  const canZoom = $derived(zoomable && activeItem?.kind === 'image');
+  const panning = $derived(canZoom && zoom.zoomed);
   const hasMultiple = $derived(items.length > 1);
   const canGoPrevious = $derived(loop || index > 0);
   const canGoNext = $derived(loop || index < items.length - 1);
@@ -157,7 +161,7 @@
     switch (event.key) {
       case 'ArrowLeft':
         // While zoomed, arrows pan the image instead of changing items.
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(40, 0);
         } else if (hasMultiple) {
@@ -166,7 +170,7 @@
         }
         break;
       case 'ArrowRight':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(-40, 0);
         } else if (hasMultiple) {
@@ -175,13 +179,13 @@
         }
         break;
       case 'ArrowUp':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(0, 40);
         }
         break;
       case 'ArrowDown':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(0, -40);
         }
@@ -196,18 +200,18 @@
         break;
       case '+':
       case '=':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.zoomIn();
         break;
       case '-':
       case '_':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.zoomOut();
         break;
       case '0':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.reset();
         break;
@@ -215,7 +219,7 @@
   }
 
   function handleSwipeStart(event: PointerEvent) {
-    if (zoom.zoomed || !hasMultiple) return;
+    if (panning || !hasMultiple) return;
     swipeActive = true;
     swipeStartX = event.clientX;
     swipeStartY = event.clientY;
@@ -280,7 +284,7 @@
           {/if}
         </div>
 
-        {#if zoomable && activeItem?.kind === 'image'}
+        {#if canZoom}
           <button
             type="button"
             class={chromeButtonClass}

package/dist/lib/components/media/MediaCarousel.svelte

@@ -145,6 +145,10 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
+    // Only keys pressed on the track itself. A video player or seek slider
+    // inside a slide handles the same arrows; acting on the bubbled event too
+    // would seek and change slides at once.
+    if (event.defaultPrevented || event.target !== event.currentTarget) return;
     switch (event.key) {
       case 'ArrowLeft':
         event.preventDefault();
@@ -221,6 +225,7 @@
           aria-roledescription="slide"
           aria-label="{slideIndex + 1} of {items.length}"
           aria-hidden={slideIndex !== index ? 'true' : undefined}
+          inert={slideIndex !== index}
           class="w-full shrink-0 snap-center"
         >
           {#if item.kind === 'image'}

package/dist/lib/components/media/MediaGrid.svelte

@@ -164,6 +164,9 @@
   let activeIndex = $state(0);
   let lightboxOpen = $state(false);
   let lightboxIndex = $state(0);
+  // The roving tab stop, clamped so a shrinking `items` list never leaves
+  // every tile at tabindex=-1.
+  const tabStop = $derived(Math.min(activeIndex, Math.max(items.length - 1, 0)));
 
   const gapClass = $derived(
     ({ none: 'gap-0', sm: 'gap-2', md: 'gap-4', lg: 'gap-6' } as const)[gap]
@@ -315,7 +318,7 @@
           onselect={handleSelect}
           class="h-full"
           data-media-tile
-          tabindex={!singleTabStop || index === activeIndex ? 0 : -1}
+          tabindex={!singleTabStop || index === tabStop ? 0 : -1}
         />
       </li>
     {/each}

package/dist/lib/components/notifications/NotificationDialog.svelte

@@ -15,6 +15,7 @@
     getPriorityLabel,
   } from '@classic-homes/notifications/core';
   import { cn } from '../../utils.js';
+  import { safeHref } from '../../utils/url.js';
   import Dialog from '../Dialog.svelte';
   import Button from '../Button.svelte';
   import Icon, { type IconName } from '../Icon.svelte';
@@ -57,6 +58,8 @@
   const formattedTime = $derived(notification ? formatFullTimestamp(notification.createdAt) : '');
   const typeLabel = $derived(notification ? getTypeLabel(notification.type) : '');
   const priorityLabel = $derived(notification ? getPriorityLabel(notification.priority) : '');
+  // actionUrl is API data: drop javascript:/data: and other unsafe schemes
+  const actionHref = $derived(safeHref(notification?.actionUrl));
 
   function handleOpenChange(newOpen: boolean) {
     if (!newOpen) {
@@ -94,7 +97,7 @@
         <div
           class={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-            notification.read ? 'bg-muted' : 'bg-blue-100'
+            notification.read ? 'bg-muted' : 'bg-info/15'
           )}
         >
           <Icon name={iconName} size={20} class={iconColor} />
@@ -138,10 +141,10 @@
         </div>
 
         <!-- Action link -->
-        {#if notification.actionUrl && notification.actionLabel}
+        {#if actionHref && notification.actionLabel}
           <div class="pt-2">
             <a
-              href={notification.actionUrl}
+              href={actionHref}
               class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
             >
               {notification.actionLabel}
@@ -202,8 +205,8 @@
               {/snippet}
             </Button>
           {/if}
-          {#if notification.actionUrl}
-            <Button class={footerButtonClass} href={notification.actionUrl}>
+          {#if actionHref}
+            <Button class={footerButtonClass} href={actionHref}>
               {#snippet children()}
                 {notification.actionLabel || 'View Details'}
               {/snippet}

package/dist/lib/components/notifications/NotificationItem.svelte

@@ -15,6 +15,7 @@
     getTypeLabel,
   } from '@classic-homes/notifications/core';
   import { cn } from '../../utils.js';
+  import { safeHref } from '../../utils/url.js';
   import Icon, { type IconName } from '../Icon.svelte';
   import Badge from '../Badge.svelte';
   import Checkbox from '../Checkbox.svelte';
@@ -49,6 +50,8 @@
   const priorityBadgeVariant = $derived(getPriorityBadgeVariant(notification.priority));
   const relativeTime = $derived(formatRelativeTime(notification.createdAt));
   const typeLabel = $derived(getTypeLabel(notification.type));
+  // actionUrl is API data: drop javascript:/data: and other unsafe schemes
+  const actionHref = $derived(safeHref(notification.actionUrl));
 
   function handleClick() {
     onClick?.(notification);
@@ -59,6 +62,9 @@
   }
 
   function handleKeyDown(e: KeyboardEvent) {
+    // Only keys pressed on the row itself; Enter on the nested action link
+    // must follow the link, not activate the row.
+    if (e.target !== e.currentTarget) return;
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       onClick?.(notification);
@@ -70,7 +76,7 @@
 <div
   class={cn(
     'group relative flex gap-3 rounded-lg border p-4',
-    !notification.read && 'bg-blue-50/50 border-blue-200',
+    !notification.read && 'bg-info/5 border-info/30',
     notification.read && 'bg-card border-border',
     onClick && 'cursor-pointer hover:bg-muted/50',
     isSelected && 'ring-2 ring-primary ring-offset-2',
@@ -88,7 +94,11 @@
       onclick={(e) => e.stopPropagation()}
       onkeydown={(e) => e.stopPropagation()}
     >
-      <Checkbox checked={isSelected} onCheckedChange={handleCheckboxChange} />
+      <Checkbox
+        checked={isSelected}
+        onCheckedChange={handleCheckboxChange}
+        aria-label={`Select notification: ${notification.title}`}
+      />
     </div>
   {/if}
 
@@ -96,7 +106,7 @@
   <div
     class={cn(
       'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-      notification.read ? 'bg-muted' : 'bg-blue-100'
+      notification.read ? 'bg-muted' : 'bg-info/15'
     )}
   >
     <Icon name={iconName} size={20} class={iconColor} />
@@ -132,15 +142,15 @@
           {relativeTime}
         </span>
         {#if !notification.read}
-          <span class="h-2 w-2 rounded-full bg-blue-500" aria-label="Unread"></span>
+          <span class="h-2 w-2 rounded-full bg-info" aria-label="Unread"></span>
         {/if}
       </div>
     </div>
 
-    {#if notification.actionUrl && notification.actionLabel}
+    {#if actionHref && notification.actionLabel}
       <div class="mt-2">
         <a
-          href={notification.actionUrl}
+          href={actionHref}
           class="text-sm font-medium text-primary hover:underline"
           onclick={(e) => e.stopPropagation()}
         >

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

@@ -93,8 +93,11 @@
     onSelect(item.id);
   }
 
+  // Disabled entries can't take focus, so arrow navigation must skip them.
   function entries() {
-    return Array.from(listEl?.querySelectorAll<HTMLButtonElement>('[data-palette-item]') ?? []);
+    return Array.from(
+      listEl?.querySelectorAll<HTMLButtonElement>('[data-palette-item]:not(:disabled)') ?? []
+    );
   }
 
   function searchKeydown(event: KeyboardEvent) {

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

@@ -24,7 +24,11 @@
     toolbar?: Snippet;
     /** Accessible name of the canvas region (default: "Canvas") */
     label?: string;
-    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    /**
+     * Clicked on the backdrop, outside any item: usually clears the selection.
+     * Also called on Escape pressed inside the canvas (outside a text field),
+     * the keyboard path back to "nothing selected".
+     */
     onBackgroundClick?: () => void;
     /** Classes for the frame that holds the content */
     frameClass?: string;
@@ -47,6 +51,20 @@
   // On a phone the canvas already is phone width; the switch would do nothing
   const showDevices = $derived(deviceToggle && studio?.layout !== 'compact');
   const width = $derived(device === 'phone' && showDevices ? '390px' : maxWidth);
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key !== 'Escape' || e.defaultPrevented || !onBackgroundClick) return;
+    // Escape in a field belongs to the field (clearing, closing its own UI).
+    const target = e.target as HTMLElement | null;
+    if (
+      target?.isContentEditable ||
+      ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    onBackgroundClick();
+  }
 </script>
 
 <section aria-label={label} class={cn('flex h-full flex-col', className)}>
@@ -67,12 +85,15 @@
     </div>
   {/if}
 
-  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <!-- Backdrop click clears the selection; Escape (bubbling from a focused
+       item) is the keyboard equivalent. -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="min-h-0 flex-1 overflow-y-auto px-3 pb-20 pt-3 md:px-6 md:pb-10"
     onclick={(e) => {
       if (e.target === e.currentTarget) onBackgroundClick?.();
     }}
+    onkeydown={handleKeydown}
   >
     <div
       class={cn(

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

@@ -19,7 +19,11 @@ interface Props {
     toolbar?: Snippet;
     /** Accessible name of the canvas region (default: "Canvas") */
     label?: string;
-    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    /**
+     * Clicked on the backdrop, outside any item: usually clears the selection.
+     * Also called on Escape pressed inside the canvas (outside a text field),
+     * the keyboard path back to "nothing selected".
+     */
     onBackgroundClick?: () => void;
     /** Classes for the frame that holds the content */
     frameClass?: string;

package/dist/lib/composables/useAsync.svelte.d.ts

@@ -6,7 +6,7 @@
  * - Error handling with toast integration
  * - Success/error callbacks
  * - Retry functionality
- * - Abort/cancel support
+ * - Overlapping calls: only the latest call (and none after reset) updates state
  * - Debounce support
  *
  * @example

package/dist/lib/composables/useAsync.svelte.js

@@ -6,7 +6,7 @@
  * - Error handling with toast integration
  * - Success/error callbacks
  * - Retry functionality
- * - Abort/cancel support
+ * - Overlapping calls: only the latest call (and none after reset) updates state
  * - Debounce support
  *
  * @example
@@ -51,21 +51,35 @@ export function useAsync(options) {
     // Derived state
     const isSuccess = $derived(isExecuted && !error && !isLoading);
     const isError = $derived(isExecuted && !!error);
-    // Debounce timer
+    // Debounce timer, and the resolver of the call it is holding back
     let debounceTimer;
+    let pendingResolve;
+    // Id of the latest call; results from older calls are ignored
+    let callId = 0;
     /**
-     * Execute the async function
+     * Cancel a pending debounced call, settling its promise with undefined
      */
-    async function execute(...args) {
-        // Clear any pending debounce
+    function cancelPending() {
         if (debounceTimer) {
             clearTimeout(debounceTimer);
             debounceTimer = undefined;
         }
+        pendingResolve?.(undefined);
+        pendingResolve = undefined;
+    }
+    /**
+     * Execute the async function
+     */
+    async function execute(...args) {
+        // Clear any pending debounce
+        cancelPending();
         // If debounce is set, delay execution
         if (debounceMs && debounceMs > 0) {
             return new Promise((resolve) => {
+                pendingResolve = resolve;
                 debounceTimer = setTimeout(async () => {
+                    debounceTimer = undefined;
+                    pendingResolve = undefined;
                     const result = await executeImmediate(...args);
                     resolve(result);
                 }, debounceMs);
@@ -77,12 +91,16 @@ export function useAsync(options) {
      * Execute immediately without debounce
      */
     async function executeImmediate(...args) {
+        const id = ++callId;
         lastArgs = args;
         isLoading = true;
         error = undefined;
         isExecuted = true;
         try {
             const result = await fn(...args);
+            // A newer call (or reset) superseded this one: leave state alone
+            if (id !== callId)
+                return result;
             data = result;
             if (onSuccess) {
                 onSuccess(result);
@@ -93,6 +111,8 @@ export function useAsync(options) {
             return result;
         }
         catch (err) {
+            if (id !== callId)
+                return undefined;
             const normalizedError = err instanceof Error ? err : new Error(String(err));
             error = normalizedError;
             if (onError) {
@@ -104,7 +124,8 @@ export function useAsync(options) {
             return undefined;
         }
         finally {
-            isLoading = false;
+            if (id === callId)
+                isLoading = false;
         }
     }
     /**
@@ -121,11 +142,9 @@ export function useAsync(options) {
      * Reset state to initial values
      */
     function reset() {
-        // Clear any pending debounce
-        if (debounceTimer) {
-            clearTimeout(debounceTimer);
-            debounceTimer = undefined;
-        }
+        // Clear any pending debounce, and drop the result of any call in flight
+        cancelPending();
+        callId++;
         data = initialData;
         error = undefined;
         isLoading = false;
@@ -153,11 +172,11 @@ export function useAsync(options) {
     function clearError() {
         error = undefined;
     }
-    // Execute immediately if requested
-    if (immediate && immediateArgs) {
+    // Execute immediately if requested (zero-argument functions need no immediateArgs)
+    if (immediate) {
         // Use $effect-like behavior by queueing the execution
         queueMicrotask(() => {
-            execute(...immediateArgs);
+            execute(...(immediateArgs ?? []));
         });
     }
     return {

package/dist/lib/composables/useFocusTrap.svelte.js

@@ -8,12 +8,19 @@ const FOCUSABLE_SELECTOR = [
     'iframe',
     'object',
     'embed',
-    '[contenteditable]',
+    '[contenteditable]:not([contenteditable="false"])',
     '[tabindex]:not([tabindex="-1"])',
 ].join(',');
 function getFocusableElements(container) {
     const elements = container.querySelectorAll(FOCUSABLE_SELECTOR);
-    return Array.from(elements).filter((el) => el.offsetParent !== null && getComputedStyle(el).visibility !== 'hidden');
+    return Array.from(elements).filter((el) => 
+    // tabindex="-1" on a natively focusable element (roving-tabindex radios,
+    // toolbar buttons) takes it out of the Tab order, so it can't be the
+    // trap's first or last stop.
+    el.tabIndex >= 0 &&
+        !el.closest('[inert]') &&
+        el.offsetParent !== null &&
+        getComputedStyle(el).visibility !== 'hidden');
 }
 /**
  * Creates a focus trap action for use with Svelte's use: directive.