@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/ui/PresetFileManager.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { stopPropagation } from 'svelte/legacy';
+
   import { onMount } from 'svelte';
   import type { PresetMeta } from '../lib/themeTypes';
   import {
@@ -12,17 +14,17 @@
   import { dirty } from '../lib/editorStore';
   import UIDialog from './UIDialog.svelte';
 
-  let files: PresetMeta[] = [];
-  let showFileList = false;
-  let saveAsEditing = false;
-  let saveAsName = '';
-  let saveAsInput: HTMLInputElement;
+  let files: PresetMeta[] = $state([]);
+  let showFileList = $state(false);
+  let saveAsEditing = $state(false);
+  let saveAsName = $state('');
+  let saveAsInput: HTMLInputElement | undefined = $state();
 
-  let activeFileName = 'default';
-  let currentDisplayName = 'Default';
+  let activeFileName = $state('default');
+  let currentDisplayName = $state('Default');
 
-  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
-  let applyStatus: 'idle' | 'applying' = 'idle';
+  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
+  let applyStatus: 'idle' | 'applying' = $state('idle');
 
   async function refreshFiles() {
     try {
@@ -186,7 +188,7 @@
         class:saving={saveStatus === 'saving'}
         class:saved={saveStatus === 'saved'}
         class:error={saveStatus === 'error'}
-        on:click={handleSave}
+        onclick={handleSave}
         disabled={saveStatus === 'saving' || applyStatus === 'applying'}
         title="Capture the current theme + component configs into this preset"
       >
@@ -203,7 +205,7 @@
       </button>
       <button
         class="pfm-btn increment-btn"
-        on:click={handleSaveIncrement}
+        onclick={handleSaveIncrement}
         disabled={saveStatus === 'saving' || applyStatus === 'applying'}
         title="Save as incremented preset"
       >
@@ -218,25 +220,25 @@
           type="text"
           bind:value={saveAsName}
           bind:this={saveAsInput}
-          on:keydown={handleSaveAsKeydown}
+          onkeydown={handleSaveAsKeydown}
           placeholder="Preset name..."
         />
         <div class="save-as-actions">
           <button
             class="inline-btn confirm-btn"
-            on:click={confirmSaveAs}
+            onclick={confirmSaveAs}
             disabled={!saveAsName.trim()}
             title="Save"
           >
             <i class="fas fa-check"></i>
           </button>
-          <button class="inline-btn cancel-btn" on:click={cancelSaveAs} title="Cancel">
+          <button class="inline-btn cancel-btn" onclick={cancelSaveAs} title="Cancel">
             <i class="fas fa-times"></i>
           </button>
         </div>
       </div>
     {:else}
-      <button class="pfm-btn" on:click={openSaveAs} title="Save as new preset">
+      <button class="pfm-btn" onclick={openSaveAs} title="Save as new preset">
         <i class="fas fa-copy"></i>
         <span>Save As</span>
       </button>
@@ -245,7 +247,7 @@
     <button
       class="pfm-btn"
       class:active={showFileList}
-      on:click={toggleFileList}
+      onclick={toggleFileList}
       disabled={applyStatus === 'applying'}
       title="Load a preset"
     >
@@ -263,7 +265,7 @@
   <div class="load-list">
     {#each files as file}
       <div class="load-item" class:active={file.fileName === activeFileName}>
-        <button class="load-name-btn" on:click={() => handleApply(file)}>
+        <button class="load-name-btn" onclick={() => handleApply(file)}>
           {file.name}
         </button>
         {#if file.fileName === activeFileName}
@@ -272,7 +274,7 @@
         {#if file.fileName !== 'default'}
           <button
             class="file-delete-btn"
-            on:click|stopPropagation={() => handleDelete(file)}
+            onclick={stopPropagation(() => handleDelete(file))}
             title="Delete {file.name}"
           >
             <i class="fas fa-trash-alt"></i>

package/src/ui/ProjectFontsSection.svelte

@@ -15,28 +15,28 @@
   const GOOGLE_FONTS: GoogleFontEntry[] = (googleFontsData as any).fonts;
 
   type AddMode = 'closed' | 'google' | 'url' | 'fontface';
-  let addMode: AddMode = 'closed';
+  let addMode: AddMode = $state('closed');
 
   // Google search
-  let googleQuery = '';
-  $: googleMatches = googleQuery.trim().length >= 1
+  let googleQuery = $state('');
+  let googleMatches = $derived(googleQuery.trim().length >= 1
     ? GOOGLE_FONTS
         .filter((f) => f.family.toLowerCase().includes(googleQuery.toLowerCase()))
         .slice(0, 20)
-    : GOOGLE_FONTS.slice(0, 10);
+    : GOOGLE_FONTS.slice(0, 10));
 
   // URL paste
-  let urlInput = '';
-  let urlError = '';
-  let urlDiscovering = false;
-  let urlParsed: ParsedFamily[] | null = null;
-  let urlPickedNames = new Set<string>();
-  let urlNeedsManualFamilies = false;
-  let urlManualFamilies = '';
+  let urlInput = $state('');
+  let urlError = $state('');
+  let urlDiscovering = $state(false);
+  let urlParsed: ParsedFamily[] | null = $state(null);
+  let urlPickedNames = $state(new Set<string>());
+  let urlNeedsManualFamilies = $state(false);
+  let urlManualFamilies = $state('');
 
   // @font-face paste
-  let fontFaceText = '';
-  let fontFaceParsed: ParsedFamily[] = [];
+  let fontFaceText = $state('');
+  let fontFaceParsed: ParsedFamily[] = $state([]);
 
   function reset() {
     addMode = 'closed';
@@ -52,8 +52,8 @@
     fontFaceParsed = [];
   }
 
-  $: fontSourcesList = $editorState.fonts.sources;
-  $: fontStacksList = $editorState.fonts.stacks;
+  let fontSourcesList = $derived($editorState.fonts.sources);
+  let fontStacksList = $derived($editorState.fonts.stacks);
 
   function commitSources(next: FontSource[]) {
     setFontSources(next);
@@ -161,7 +161,7 @@
       .map((s) => s.variable);
   }
 
-  let expanded = new Set<string>();
+  let expanded = $state(new Set<string>());
   function toggleExpanded(familyId: string) {
     const next = new Set(expanded);
     if (next.has(familyId)) next.delete(familyId); else next.add(familyId);
@@ -200,7 +200,7 @@
                     type="button"
                     class="pf-family-disclosure"
                     class:open={isOpen}
-                    on:click={() => toggleExpanded(fam.id)}
+                    onclick={() => toggleExpanded(fam.id)}
                     aria-label={isOpen ? 'Collapse weights' : 'Expand weights'}
                     aria-expanded={isOpen}
                   ><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
@@ -212,7 +212,7 @@
                 <button
                   type="button"
                   class="pf-family-remove"
-                  on:click={() => removeFamily(source.id, fam.id)}
+                  onclick={() => removeFamily(source.id, fam.id)}
                   aria-label={`Remove ${fam.name}`}
                   title="Remove family"
                 ><i class="fas fa-xmark" aria-hidden="true"></i></button>
@@ -239,14 +239,14 @@
   </div>
 
   {#if addMode === 'closed'}
-    <button type="button" class="pf-add-toggle" on:click={() => (addMode = 'google')}>+ add font</button>
+    <button type="button" class="pf-add-toggle" onclick={() => (addMode = 'google')}>+ add font</button>
   {:else}
     <div class="pf-add-panel">
       <div class="pf-add-tabs">
-        <button type="button" class:active={addMode === 'google'} on:click={() => (addMode = 'google')}>Google search</button>
-        <button type="button" class:active={addMode === 'url'} on:click={() => (addMode = 'url')}>Paste URL</button>
-        <button type="button" class:active={addMode === 'fontface'} on:click={() => (addMode = 'fontface')}>@font-face</button>
-        <button type="button" class="pf-add-close" on:click={reset} aria-label="Cancel">×</button>
+        <button type="button" class:active={addMode === 'google'} onclick={() => (addMode = 'google')}>Google search</button>
+        <button type="button" class:active={addMode === 'url'} onclick={() => (addMode = 'url')}>Paste URL</button>
+        <button type="button" class:active={addMode === 'fontface'} onclick={() => (addMode = 'fontface')}>@font-face</button>
+        <button type="button" class="pf-add-close" onclick={reset} aria-label="Cancel">×</button>
       </div>
 
       {#if addMode === 'google'}
@@ -261,7 +261,7 @@
             <li class="pf-result">
               <span class="pf-result-preview" style="font-family: '{m.family}', {m.category};">{m.family}</span>
               <span class="pf-result-meta">{m.category} · {m.variants.length}w</span>
-              <button type="button" class="pf-result-add" on:click={() => addGoogleFont(m)}>add</button>
+              <button type="button" class="pf-result-add" onclick={() => addGoogleFont(m)}>add</button>
             </li>
           {/each}
           {#if googleMatches.length === 0}
@@ -276,7 +276,7 @@
           bind:value={urlInput}
         />
         <div class="pf-row">
-          <button type="button" class="pf-btn" on:click={discoverUrl} disabled={!urlInput.trim() || urlDiscovering}>
+          <button type="button" class="pf-btn" onclick={discoverUrl} disabled={!urlInput.trim() || urlDiscovering}>
             {urlDiscovering ? 'Checking…' : 'Detect families'}
           </button>
         </div>
@@ -290,7 +290,7 @@
                   <input
                     type="checkbox"
                     checked={urlPickedNames.has(f.name)}
-                    on:change={(e) => {
+                    onchange={(e) => {
                       const target = e.currentTarget;
                       const s = new Set(urlPickedNames);
                       if (target.checked) s.add(f.name); else s.delete(f.name);
@@ -305,7 +305,7 @@
               </li>
             {/each}
           </ul>
-          <button type="button" class="pf-btn primary" on:click={addUrlSource}>Add {urlPickedNames.size} selected</button>
+          <button type="button" class="pf-btn primary" onclick={addUrlSource}>Add {urlPickedNames.size} selected</button>
         {:else if urlNeedsManualFamilies}
           <div class="pf-detected">Couldn't auto-detect families (CORS or no metadata). Name them:</div>
           <input
@@ -314,7 +314,7 @@
             placeholder="Comma-separated family names"
             bind:value={urlManualFamilies}
           />
-          <button type="button" class="pf-btn primary" on:click={addUrlSource} disabled={!urlManualFamilies.trim()}>Add</button>
+          <button type="button" class="pf-btn primary" onclick={addUrlSource} disabled={!urlManualFamilies.trim()}>Add</button>
         {/if}
       {:else if addMode === 'fontface'}
         <textarea
@@ -322,12 +322,12 @@
           placeholder={'Paste one or more @font-face { ... } rules'}
           rows="6"
           bind:value={fontFaceText}
-          on:input={parseFontFaceTextInput}
+          oninput={parseFontFaceTextInput}
         ></textarea>
         {#if fontFaceParsed.length > 0}
           <div class="pf-detected">Detected: {fontFaceParsed.map((f) => f.name).join(', ')}</div>
         {/if}
-        <button type="button" class="pf-btn primary" on:click={addFontFaceSource} disabled={fontFaceParsed.length === 0}>Add</button>
+        <button type="button" class="pf-btn primary" onclick={addFontFaceSource} disabled={fontFaceParsed.length === 0}>Add</button>
       {/if}
     </div>
   {/if}

package/src/ui/SurfacesTab.svelte

@@ -126,7 +126,7 @@
     }
   ];
 
-  let copiedVar: string | null = null;
+  let copiedVar: string | null = $state(null);
   function copyVariable(v: string) {
     navigator.clipboard.writeText(v);
     copiedVar = v;
@@ -222,7 +222,7 @@
                     class="swatch-box"
                     style="background: var({swatch.variable});"
                   ></div>
-                  <button class="swatch-name copyable" class:copied={copiedVar === swatch.variable} on:click={() => copyVariable(swatch.variable)}>{copiedVar === swatch.variable ? 'copied!' : swatch.name}</button>
+                  <button class="swatch-name copyable" class:copied={copiedVar === swatch.variable} onclick={() => copyVariable(swatch.variable)}>{copiedVar === swatch.variable ? 'copied!' : swatch.name}</button>
                 {:else}
                   <div class="swatch-box empty"></div>
                   <div class="swatch-name">&nbsp;</div>
@@ -248,7 +248,7 @@
                   class="border-box"
                   style="border: 2px solid var({border.variable});"
                 ></div>
-                <button class="border-name copyable" class:copied={copiedVar === border.variable} on:click={() => copyVariable(border.variable)}>{copiedVar === border.variable ? 'copied!' : border.name}</button>
+                <button class="border-name copyable" class:copied={copiedVar === border.variable} onclick={() => copyVariable(border.variable)}>{copiedVar === border.variable ? 'copied!' : border.name}</button>
               </div>
             {/each}
           </div>

package/src/ui/TextTab.svelte

@@ -78,7 +78,7 @@
     }
   ];
 
-  let copiedVar: string | null = null;
+  let copiedVar: string | null = $state(null);
   function copyVariable(v: string) {
     navigator.clipboard.writeText(v);
     copiedVar = v;
@@ -100,7 +100,7 @@
               Ag
             </div>
             <div class="text-color-info">
-              <button class="text-color-name copyable" class:copied={copiedVar === color.variable} on:click={() => copyVariable(color.variable)}>{copiedVar === color.variable ? 'copied!' : color.name}</button>
+              <button class="text-color-name copyable" class:copied={copiedVar === color.variable} onclick={() => copyVariable(color.variable)}>{copiedVar === color.variable ? 'copied!' : color.name}</button>
               <div class="text-color-variable">{color.variable}</div>
               <div class="text-color-description">{color.description}</div>
             </div>

package/src/ui/ThemeFileManager.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { stopPropagation } from 'svelte/legacy';
+
+  import { onMount } from 'svelte';
   import type { ThemeMeta } from '../lib/themeTypes';
   import { listThemes, deleteTheme, setActiveFile, sanitizeFileName, getProductionInfo, setProductionFile } from '../lib/themeService';
   import type { ProductionInfo } from '../lib/themeService';
@@ -7,23 +9,24 @@
   import { dirty } from '../lib/editorStore';
   import UIDialog from './UIDialog.svelte';
 
-  const dispatch = createEventDispatcher<{
-    save: { fileName: string; displayName: string };
-    load: { fileName: string };
-  }>();
+  interface Props {
+    saveStatus?: 'idle' | 'saving' | 'saved' | 'error';
+    onsave?: (payload: { fileName: string; displayName: string }) => void;
+    onload?: (payload: { fileName: string }) => void;
+  }
 
-  export let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
+  let { saveStatus = 'idle', onsave, onload }: Props = $props();
 
-  let files: ThemeMeta[] = [];
-  let showFileList = false;
-  let saveAsEditing = false;
-  let saveAsName = '';
-  let saveAsInput: HTMLInputElement;
-  let currentDisplayName = 'Default';
+  let files: ThemeMeta[] = $state([]);
+  let showFileList = $state(false);
+  let saveAsEditing = $state(false);
+  let saveAsName = $state('');
+  let saveAsInput: HTMLInputElement | undefined = $state();
+  let currentDisplayName = $state('Default');
 
   // --- Production state ---
-  let productionInfo: ProductionInfo | null = null;
-  let productionUpdateStatus: 'idle' | 'updating' | 'done' | 'error' = 'idle';
+  let productionInfo: ProductionInfo | null = $state(null);
+  let productionUpdateStatus: 'idle' | 'updating' | 'done' | 'error' = $state('idle');
 
   async function refreshFiles() {
     try {
@@ -65,7 +68,7 @@
   });
 
   function handleSave() {
-    dispatch('save', { fileName: $activeFileName, displayName: currentDisplayName });
+    onsave?.({ fileName: $activeFileName, displayName: currentDisplayName });
   }
 
   function handleSaveIncrement() {
@@ -83,7 +86,7 @@
     const displayName = `${baseName}_${suffix}`;
     const fileName = `${baseFileName}_${suffix}`;
 
-    dispatch('save', { fileName, displayName });
+    onsave?.({ fileName, displayName });
     $activeFileName = fileName;
     currentDisplayName = displayName;
     setTimeout(() => refreshFiles(), 500);
@@ -106,7 +109,7 @@
       return;
     }
     saveAsEditing = false;
-    dispatch('save', { fileName, displayName });
+    onsave?.({ fileName, displayName });
     $activeFileName = fileName;
     currentDisplayName = displayName;
     setTimeout(() => refreshFiles(), 500);
@@ -122,7 +125,7 @@
     await setActiveFile(file.fileName);
     $activeFileName = file.fileName;
     currentDisplayName = file.name;
-    dispatch('load', { fileName: file.fileName });
+    onload?.({ fileName: file.fileName });
     // editorStore.loadFromFile clears history and resets dirty — no snapshot needed here.
   }
 
@@ -135,7 +138,7 @@
       if (file.fileName === $activeFileName) {
         $activeFileName = 'default';
         currentDisplayName = 'Default';
-        dispatch('load', { fileName: 'default' });
+        onload?.({ fileName: 'default' });
       }
     } catch {
       // silent
@@ -168,8 +171,8 @@
   }
 
   type SortKey = 'name' | 'updatedAt';
-  let sortKey: SortKey = 'updatedAt';
-  let sortDir: 'asc' | 'desc' = 'desc';
+  let sortKey: SortKey = $state('updatedAt');
+  let sortDir: 'asc' | 'desc' = $state('desc');
 
   function toggleSort(key: SortKey) {
     if (sortKey === key) {
@@ -181,7 +184,7 @@
     }
   }
 
-  $: sortedFiles = [...files].sort((a, b) => {
+  let sortedFiles = $derived([...files].sort((a, b) => {
     let cmp = 0;
     if (sortKey === 'name') {
       cmp = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
@@ -189,7 +192,7 @@
       cmp = (a.updatedAt || '').localeCompare(b.updatedAt || '');
     }
     return sortDir === 'asc' ? cmp : -cmp;
-  });
+  }));
 </script>
 
 <div class="theme-file-manager">
@@ -206,7 +209,7 @@
         class:saving={saveStatus === 'saving'}
         class:saved={saveStatus === 'saved'}
         class:error={saveStatus === 'error'}
-        on:click={handleSave}
+        onclick={handleSave}
         disabled={saveStatus === 'saving'}
         title="Save to current file"
       >
@@ -217,7 +220,7 @@
       </button>
       <button
         class="tfm-btn increment-btn"
-        on:click={handleSaveIncrement}
+        onclick={handleSaveIncrement}
         disabled={saveStatus === 'saving'}
         title="Save as incremented copy"
       >
@@ -232,14 +235,14 @@
           type="text"
           bind:value={saveAsName}
           bind:this={saveAsInput}
-          on:keydown={handleSaveAsKeydown}
+          onkeydown={handleSaveAsKeydown}
           placeholder="Theme name..."
         />
         <div class="save-as-actions">
-          <button class="inline-btn confirm-btn" on:click={confirmSaveAs} disabled={!saveAsName.trim()} title="Save">
+          <button class="inline-btn confirm-btn" onclick={confirmSaveAs} disabled={!saveAsName.trim()} title="Save">
             <i class="fas fa-check"></i>
           </button>
-          <button class="inline-btn cancel-btn" on:click={cancelSaveAs} title="Cancel">
+          <button class="inline-btn cancel-btn" onclick={cancelSaveAs} title="Cancel">
             <i class="fas fa-times"></i>
           </button>
         </div>
@@ -247,7 +250,7 @@
     {:else}
       <button
         class="tfm-btn"
-        on:click={openSaveAs}
+        onclick={openSaveAs}
         title="Save as new file"
       >
         <i class="fas fa-copy"></i>
@@ -258,7 +261,7 @@
     <button
       class="tfm-btn"
       class:active={showFileList}
-      on:click={toggleFileList}
+      onclick={toggleFileList}
       title="Load a theme"
     >
       <i class="fas fa-folder-open"></i>
@@ -287,7 +290,7 @@
       class:updating={productionUpdateStatus === 'updating'}
       class:done={productionUpdateStatus === 'done'}
       class:error={productionUpdateStatus === 'error'}
-      on:click={handleUpdateProduction}
+      onclick={handleUpdateProduction}
       disabled={productionUpdateStatus === 'updating' || (productionInfo?.fileName === $activeFileName)}
       title={productionInfo?.fileName === $activeFileName ? 'Already in production' : `Set "${currentDisplayName}" as production`}
     >
@@ -317,7 +320,7 @@
       <button
         class="sort-btn name-col"
         class:active-sort={sortKey === 'name'}
-        on:click={() => toggleSort('name')}
+        onclick={() => toggleSort('name')}
       >
         <span>Name</span>
         {#if sortKey === 'name'}
@@ -327,7 +330,7 @@
       <button
         class="sort-btn date-col"
         class:active-sort={sortKey === 'updatedAt'}
-        on:click={() => toggleSort('updatedAt')}
+        onclick={() => toggleSort('updatedAt')}
       >
         <span>Date</span>
         {#if sortKey === 'updatedAt'}
@@ -338,7 +341,7 @@
     </div>
     {#each sortedFiles as file}
       <div class="load-item" class:active={file.fileName === $activeFileName}>
-        <button class="load-name-btn" on:click={() => handleLoad(file)}>
+        <button class="load-name-btn" onclick={() => handleLoad(file)}>
           {file.name}
         </button>
         <span class="updated-at" title={file.updatedAt}>{formatUpdatedAt(file.updatedAt)}</span>
@@ -348,7 +351,7 @@
         {#if file.fileName !== 'default'}
           <button
             class="file-delete-btn"
-            on:click|stopPropagation={() => handleDelete(file)}
+            onclick={stopPropagation(() => handleDelete(file))}
             title="Delete {file.name}"
           >
             <i class="fas fa-trash-alt"></i>

package/src/ui/Toggle.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let checked: boolean = false;
-  export let disabled: boolean = false;
-  export let label: string = '';
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    onchange?: (checked: boolean) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: boolean }>();
+  let { checked = $bindable(false), disabled = false, label = '', onchange }: Props = $props();
 
   function toggle() {
     if (disabled) return;
     checked = !checked;
-    dispatch('change', checked);
+    onchange?.(checked);
   }
 </script>
 
@@ -19,12 +20,13 @@
     type="button"
     role="switch"
     aria-checked={checked}
+    aria-label={label || 'Toggle'}
     {disabled}
     class="toggle-track"
     class:on={checked}
-    on:click={toggle}
+    onclick={toggle}
   >
-    <span class="toggle-thumb" />
+    <span class="toggle-thumb"></span>
   </button>
   {#if label}
     <span class="toggle-label">{label}</span>

package/src/ui/UICopyPopover.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { copyPopover } from '../lib/copyPopover';
 
-  let bubbleEl: HTMLDivElement | null = null;
-  let bubbleW = 0;
-  let bubbleH = 0;
+  let bubbleEl: HTMLDivElement | null = $state(null);
+  let bubbleW = $state(0);
+  let bubbleH = $state(0);
 
-  $: if (bubbleEl && $copyPopover.visible) {
-    const r = bubbleEl.getBoundingClientRect();
-    bubbleW = r.width;
-    bubbleH = r.height;
-  }
+  run(() => {
+    if (bubbleEl && $copyPopover.visible) {
+      const r = bubbleEl.getBoundingClientRect();
+      bubbleW = r.width;
+      bubbleH = r.height;
+    }
+  });
 
   const GAP = 8;
 
-  $: anchor = $copyPopover.anchor;
-  $: rawLeft = anchor ? anchor.left + anchor.width / 2 - bubbleW / 2 : 0;
-  $: rawTop = anchor ? anchor.top - bubbleH - GAP : 0;
-  $: maxLeft = typeof window !== 'undefined' ? window.innerWidth - bubbleW - 4 : rawLeft;
-  $: clampedLeft = Math.max(4, Math.min(rawLeft, maxLeft));
-  $: clampedTop = Math.max(4, rawTop);
-  $: arrowLeft = anchor ? anchor.left + anchor.width / 2 - clampedLeft : bubbleW / 2;
+  let anchor = $derived($copyPopover.anchor);
+  let rawLeft = $derived(anchor ? anchor.left + anchor.width / 2 - bubbleW / 2 : 0);
+  let rawTop = $derived(anchor ? anchor.top - bubbleH - GAP : 0);
+  let maxLeft = $derived(typeof window !== 'undefined' ? window.innerWidth - bubbleW - 4 : rawLeft);
+  let clampedLeft = $derived(Math.max(4, Math.min(rawLeft, maxLeft)));
+  let clampedTop = $derived(Math.max(4, rawTop));
+  let arrowLeft = $derived(anchor ? anchor.left + anchor.width / 2 - clampedLeft : bubbleW / 2);
 </script>
 
 {#if $copyPopover.visible && anchor}