@poveste/app 0.15.0 → 0.16.1

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 import { getSandboxUrl } from '../../util/sandbox'
 import TopBarChipItem from '../app/TopBarChipItem.vue'
@@ -16,16 +17,17 @@ const sandboxUrl = computed(() => {
 </script>
 
 <template>
-  <TopBarChipItem
-    v-tooltip="'Open variant in new tab'"
-    :href="sandboxUrl"
-    target="_blank"
-    aria-label="Open variant in new tab"
-    class="poveste-toolbar-new-tab"
-  >
-    <Icon
-      icon="carbon:launch"
-      class="w-4 h-4"
-    />
-  </TopBarChipItem>
+  <HstTooltip content="Open variant in new tab">
+    <TopBarChipItem
+      :href="sandboxUrl"
+      target="_blank"
+      aria-label="Open variant in new tab"
+      class="poveste-toolbar-new-tab"
+    >
+      <Icon
+        icon="carbon:launch"
+        class="w-4 h-4"
+      />
+    </TopBarChipItem>
+  </HstTooltip>
 </template>

package/src/app/components/toolbar/ToolbarResponsiveSize.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { povesteConfig } from '../../util/config'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
+import BaseDropdown from '../base/BaseDropdown.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
 
@@ -29,15 +31,17 @@ const responsiveHeight = autoWhenEmpty('responsiveHeight')
 
 <template>
   <!-- Responsive size -->
-  <VDropdown
-    placement="bottom-end"
-    :skidding="6"
+  <BaseDropdown
+    side="bottom"
+    align="end"
+    :align-offset="6"
     :disabled="!povesteConfig.responsivePresets?.length"
+    tooltip="Responsive sizes"
     class="poveste-toolbar-responsive-size flex-none"
   >
-    <div
-      v-tooltip="'Responsive sizes'"
+    <button
       class="flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group"
+      aria-label="Responsive sizes"
       :class="{
         'hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer': povesteConfig.responsivePresets?.length,
       }"
@@ -50,32 +54,34 @@ const responsiveHeight = autoWhenEmpty('responsiveHeight')
         icon="carbon:chevron-down"
         class="w-3 h-3 opacity-40 group-hover:opacity-70"
       />
-    </div>
+    </button>
 
-    <template #popper="{ hide }">
+    <template #popper="{ close }">
       <div class="flex flex-col items-stretch">
         <BaseCheckbox v-model="settings.rotate">
           Rotate
         </BaseCheckbox>
 
         <div class="flex items-center gap-2 px-4 py-3">
-          <input
-            v-model="responsiveWidth"
-            v-tooltip="'Responsive width (px)'"
-            type="number"
-            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
-            step="16"
-            placeholder="Auto"
-          >
+          <HstTooltip content="Responsive width (px)">
+            <input
+              v-model="responsiveWidth"
+              type="number"
+              class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
+              step="16"
+              placeholder="Auto"
+            >
+          </HstTooltip>
           <span class="opacity-50">×</span>
-          <input
-            v-model="responsiveHeight"
-            v-tooltip="'Responsive height (px)'"
-            type="number"
-            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
-            step="16"
-            placeholder="Auto"
-          >
+          <HstTooltip content="Responsive height (px)">
+            <input
+              v-model="responsiveHeight"
+              type="number"
+              class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
+              step="16"
+              placeholder="Auto"
+            >
+          </HstTooltip>
         </div>
 
         <button
@@ -87,7 +93,7 @@ const responsiveHeight = autoWhenEmpty('responsiveHeight')
               ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
               : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
-          @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height ?? null;hide()"
+          @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height ?? null;close()"
         >
           {{ preset.label }}
           <span class="ml-auto opacity-70 flex gap-1">
@@ -98,5 +104,5 @@ const responsiveHeight = autoWhenEmpty('responsiveHeight')
         </button>
       </div>
     </template>
-  </VDropdown>
+  </BaseDropdown>
 </template>

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import TopBarChipItem from '../app/TopBarChipItem.vue'
 
@@ -7,15 +8,18 @@ const settings = usePreviewSettingsStore().currentSettings
 </script>
 
 <template>
-  <TopBarChipItem
-    v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    aria-label="Toggle text direction"
-    class="poveste-toolbar-text-direction"
-    @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
+  <HstTooltip
+    :content="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
   >
-    <Icon
-      :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
-      class="w-4 h-4"
-    />
-  </TopBarChipItem>
+    <TopBarChipItem
+      aria-label="Toggle text direction"
+      class="poveste-toolbar-text-direction"
+      @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
+    >
+      <Icon
+        :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
+        class="w-4 h-4"
+      />
+    </TopBarChipItem>
+  </HstTooltip>
 </template>

package/src/app/index.ts

@@ -1,5 +1,4 @@
 import { addCollection } from '@iconify/vue'
-import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -19,22 +18,6 @@ export async function mountMainApp() {
 
   const app = createApp(App)
   app.use(createPinia())
-  app.use(FloatingVue, {
-    // Anchor poppers inside the chrome scope so the @scope-wrapped chrome CSS
-    // reaches them. The default <body> teleport target is outside the scope.
-    container: '.poveste-app-root',
-    overflowPadding: 4,
-    arrowPadding: 8,
-    themes: {
-      tooltip: {
-        distance: 8,
-      },
-      dropdown: {
-        computeTransformOrigin: true,
-        distance: 8,
-      },
-    },
-  })
   app.use(router)
   app.mount('#app')
 

package/src/app/sandbox.ts

@@ -210,6 +210,13 @@ const app = createApp({
           // GenericMountStory as an attr, so plugins that don't know the prop
           // ignore it.
           targetVariantId: variantId.value,
+          // And it does not own the state here. The render tree below syncs the
+          // same `variant.state` against the same story, so a live sync from
+          // this pass walks the whole graph a second time for every edit — two
+          // of the sandbox's three syncs, where the app realm runs one (#964).
+          // Same attr fall-through, so a plugin that does not know it ignores it
+          // and keeps the behaviour it had.
+          syncState: false,
         }),
       ]),
       this.story && this.variant
@@ -235,7 +242,7 @@ app.use(createPinia())
 app.mount('#app')
 
 // Tagging body itself as a story render root puts components teleported to
-// document.body (floating-vue popper, dialogs) inside the user-CSS @scope
+// document.body (poppers, dialogs) inside the user-CSS @scope
 // boundary applied in dev. The custom-controls class opts out of poveste-app
 // source-level rules that add overflow/min-height to the render root.
 document.body.classList.add('__poveste-render-story', '__poveste-render-custom-controls')

package/src/app/style/main.pcss

@@ -2,10 +2,8 @@
    this file is compiled by the postcss CLI into dist/style.css, which rebases
    font URLs relative to the *source* and ships a path into node_modules. Vite
    processes the entries and hashes the files into the book (#219). */
-@import 'floating-vue/dist/style.css';
 @import '@poveste/controls/dist/index.es.css';
 
-@import './floating.pcss';
 @import './transitions.pcss';
 
 /*
@@ -17,6 +15,11 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 
+/* The chrome's tokens, shared with `@poveste/controls` — see the file for why
+   both packages read them rather than each declaring its own. The relative path
+   is the one `@source` below already uses. */
+@import '../../../../poveste-controls/src/style/tokens.css';
+
 /* v4 auto-detection only scans this package; the app renders controls, so their
    utility classes must be generated here too (was a content glob in v3). */
 @source "../../../../poveste-controls/src";
@@ -32,47 +35,6 @@
    in v3 the `ptw-` prefix applied to the dark class and kept them separate. */
 @custom-variant dark (&:where(.ptw-dark, .ptw-dark *));
 
-@theme {
-  /*
-   * primary + gray are themable at runtime: resolved-theme.ts injects
-   * --_poveste-color-<name>-<key> as space-separated RGB channels, and v4's
-   * native color-mix handles opacity (replacing the v3 withOpacityValue shim).
-   */
-  --color-primary-50: rgb(var(--_poveste-color-primary-50));
-  --color-primary-100: rgb(var(--_poveste-color-primary-100));
-  --color-primary-200: rgb(var(--_poveste-color-primary-200));
-  --color-primary-300: rgb(var(--_poveste-color-primary-300));
-  --color-primary-400: rgb(var(--_poveste-color-primary-400));
-  --color-primary-500: rgb(var(--_poveste-color-primary-500));
-  --color-primary-600: rgb(var(--_poveste-color-primary-600));
-  --color-primary-700: rgb(var(--_poveste-color-primary-700));
-  --color-primary-800: rgb(var(--_poveste-color-primary-800));
-  --color-primary-900: rgb(var(--_poveste-color-primary-900));
-
-  --color-gray-50: rgb(var(--_poveste-color-gray-50));
-  --color-gray-100: rgb(var(--_poveste-color-gray-100));
-  --color-gray-200: rgb(var(--_poveste-color-gray-200));
-  --color-gray-300: rgb(var(--_poveste-color-gray-300));
-  --color-gray-400: rgb(var(--_poveste-color-gray-400));
-  --color-gray-500: rgb(var(--_poveste-color-gray-500));
-  --color-gray-600: rgb(var(--_poveste-color-gray-600));
-  --color-gray-700: rgb(var(--_poveste-color-gray-700));
-  --color-gray-750: rgb(var(--_poveste-color-gray-750));
-  --color-gray-800: rgb(var(--_poveste-color-gray-800));
-  --color-gray-850: rgb(var(--_poveste-color-gray-850));
-  --color-gray-900: rgb(var(--_poveste-color-gray-900));
-  --color-gray-950: rgb(var(--_poveste-color-gray-950));
-
-  /* border radius (ported from the root v3 config) */
-  --radius-sm: 0.25rem;
-  --radius: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2rem;
-}
-
 /*
  * Manual reset — replaces Preflight, which is intentionally disabled.
  *
@@ -108,6 +70,18 @@
     font-family: inherit;
   }
 
+  /* Preflight resets these and the replacement above left them out, so a button
+     carrying no background utility painted the UA `ButtonFace`: grey, near enough
+     to light chrome to pass, a white panel against dark. */
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
   a,
   button {
     user-select: none;
@@ -170,7 +144,7 @@
     background-repeat: no-repeat;
     background-position: right;
 
-    /* Subject-side, not `.ptw-dark &` — see the note in floating.pcss. */
+    /* Subject-side, not `.ptw-dark &` — see the note in BaseDropdown.vue. */
     &:where(.ptw-dark, .ptw-dark *) {
       background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }

package/src/app/util/icons.generated.ts

@@ -2,8 +2,8 @@
 import type { IconifyJSON } from '@iconify/vue'
 
 export const iconCollections: IconifyJSON[] = [
-  {"prefix":"carbon","icons":{"add-alt":{"body":"<path fill=\"currentColor\" d=\"M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16S9.4 4 16 4m0-2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2\"/><path fill=\"currentColor\" d=\"M24 15h-7V8h-2v7H8v2h7v7h2v-7h7z\"/>"},"area":{"body":"<path fill=\"currentColor\" d=\"M27 22.142V9.858A3.992 3.992 0 1 0 22.142 5H9.858A3.992 3.992 0 1 0 5 9.858v12.284A3.992 3.992 0 1 0 9.858 27h12.284A3.992 3.992 0 1 0 27 22.142M26 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m16.142-3H9.858A4 4 0 0 0 7 22.142V9.858A4 4 0 0 0 9.858 7h12.284A4 4 0 0 0 25 9.858v12.284A3.99 3.99 0 0 0 22.142 25M26 28a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>"},"audio-console":{"body":"<path fill=\"currentColor\" d=\"M28 14.005h-1v-12h-2v12h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v10h2v-10h1a2.003 2.003 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10-12h-1v-4h-2v4h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v18h2v-18h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10 10H7v-18H5v18H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v4h2v-4h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4H4v-2h4Z\"/>"},"caret-down":{"body":"<path fill=\"currentColor\" d=\"m24 12l-8 10l-8-10z\"/>"},"caret-right":{"body":"<path fill=\"currentColor\" d=\"m12 8l10 8l-10 8z\"/>"},"checkbox":{"body":"<path fill=\"currentColor\" d=\"M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6 26V6h20v20Z\"/>"},"checkmark":{"body":"<path fill=\"currentColor\" d=\"m13 24l-9-9l1.414-1.414L13 21.171L26.586 7.586L28 9z\"/>"},"chevron-down":{"body":"<path fill=\"currentColor\" d=\"M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z\"/>"},"chevron-right":{"body":"<path fill=\"currentColor\" d=\"M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z\"/>"},"chevron-sort":{"body":"<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>"},"close":{"body":"<path fill=\"currentColor\" d=\"M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z\"/>"},"code":{"body":"<path fill=\"currentColor\" d=\"m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23zm11.42 9.484L17.64 6l1.932.517L14.352 26z\"/>"},"code-hide":{"body":"<path fill=\"currentColor\" d=\"m17.713 13.471l1.863-6.953L17.645 6l-1.565 5.838zm6.494 6.494l1.414 1.414L31 16l-7-7l-1.414 1.414L28.172 16zM30 28.586L3.414 2L2 3.414l5.793 5.793L1 16l7 7l1.414-1.414L3.828 16l5.379-5.379l5.677 5.677l-2.461 9.184l1.932.518l2.162-8.069L28.586 30z\"/>"},"color-palette":{"body":"<circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"9\" r=\"2\" fill=\"currentColor\"/><circle cx=\"22\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"23\" cy=\"18\" r=\"2\" fill=\"currentColor\"/><circle cx=\"19\" cy=\"23\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M16.54 2A14 14 0 0 0 2 16a4.82 4.82 0 0 0 6.09 4.65l1.12-.31a3 3 0 0 1 3.79 2.9V27a3 3 0 0 0 3 3a14 14 0 0 0 14-14.54A14.05 14.05 0 0 0 16.54 2m8.11 22.31A11.93 11.93 0 0 1 16 28a1 1 0 0 1-1-1v-3.76a5 5 0 0 0-5-5a5 5 0 0 0-1.33.18l-1.12.31A2.82 2.82 0 0 1 4 16A12 12 0 0 1 16.47 4A12.18 12.18 0 0 1 28 15.53a11.9 11.9 0 0 1-3.35 8.79Z\"/>"},"condition-wait-point":{"body":"<path fill=\"currentColor\" d=\"m8 16l8-8l8 8l-8 8z\"/><path fill=\"currentColor\" d=\"M16 4A12 12 0 1 1 4 16A12.014 12.014 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2\"/>"},"copy-file":{"body":"<path fill=\"currentColor\" d=\"m27.4 14.7l-6.1-6.1C21 8.2 20.5 8 20 8h-8c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V16.1c0-.5-.2-1-.6-1.4M20 10l5.9 6H20zm-8 18V10h6v6c0 1.1.9 2 2 2h6v10z\"/><path fill=\"currentColor\" d=\"M6 18H4V4c0-1.1.9-2 2-2h14v2H6z\"/>"},"cube":{"body":"<path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M16 3.158L26.016 9L16 14.842L5.984 9ZM5 10.74l10 5.833V28.26L5 22.426Zm12 17.52V16.574l10-5.833v11.685Z\"/>"},"cube-view":{"body":"<circle cx=\"16\" cy=\"16\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M23.777 15.479A8.64 8.64 0 0 0 16 10a8.64 8.64 0 0 0-7.777 5.479L8 16l.223.522A8.64 8.64 0 0 0 16 22a8.64 8.64 0 0 0 7.777-5.478L24 16ZM16 20a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4\"/><path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M27 22.426l-11 6.416l-11-6.416V9.574l11-6.416l11 6.416Z\"/>"},"data-vis-1":{"body":"<path fill=\"currentColor\" d=\"M26 22a3.96 3.96 0 0 0-2.02.567l-3.813-3.814a4.965 4.965 0 0 0 0-5.506l2.547-2.547A3.028 3.028 0 1 0 21.3 9.286l-2.547 2.547a4.965 4.965 0 0 0-5.506 0L9.433 8.019A3.96 3.96 0 0 0 10 6a4 4 0 1 0-4 4a3.96 3.96 0 0 0 2.02-.567l3.813 3.814a4.965 4.965 0 0 0 0 5.506l-3.814 3.814A3.96 3.96 0 0 0 6 22a4 4 0 1 0 4 4a3.96 3.96 0 0 0-.567-2.02l3.814-3.813a5 5 0 0 0 1.753.732v3.285a3 3 0 1 0 2 0v-3.285a5 5 0 0 0 1.753-.732l3.814 3.814A3.96 3.96 0 0 0 22 26a4 4 0 1 0 4-4m-10-9a3 3 0 1 1-3 3a3.003 3.003 0 0 1 3-3M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m20 0a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>"},"devices":{"body":"<path fill=\"currentColor\" d=\"M10 30H4a2 2 0 0 1-2-2V16a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2M4 16v12h6V16Z\"/><path fill=\"currentColor\" d=\"M28 4H6a2 2 0 0 0-2 2v6h2V6h22v14H14v2h2v4h-2v2h9v-2h-5v-4h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2\"/>"},"document":{"body":"<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z\"/><path fill=\"currentColor\" d=\"M10 22h12v2H10zm0-6h12v2H10z\"/>"},"document-blank":{"body":"<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.9.9 0 0 0-.3-.7M18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z\"/>"},"document-unknown":{"body":"<circle cx=\"9\" cy=\"28.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M10 25H8v-4h2a2 2 0 0 0 0-4H8a2 2 0 0 0-2 2v.5H4V19a4.005 4.005 0 0 1 4-4h2a4 4 0 0 1 0 8Z\"/><path fill=\"currentColor\" d=\"m27.7 9.3l-7-7A.9.9 0 0 0 20 2H10a2.006 2.006 0 0 0-2 2v8h2V4h8v6a2.006 2.006 0 0 0 2 2h6v16H14v2h12a2.006 2.006 0 0 0 2-2V10a.91.91 0 0 0-.3-.7M20 10V4.4l5.6 5.6Z\"/>"},"edit":{"body":"<path fill=\"currentColor\" d=\"M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4zm-5-5L24 7.6l-3 3L17.4 7zM6 22v-3.6l10-10l3.6 3.6l-10 10z\"/>"},"erase":{"body":"<path fill=\"currentColor\" d=\"M7 27h23v2H7zm20.38-16.49l-7.93-7.92a2 2 0 0 0-2.83 0l-14 14a2 2 0 0 0 0 2.83L7.13 24h9.59l10.66-10.66a2 2 0 0 0 0-2.83M15.89 22H8l-4-4l6.31-6.31l7.93 7.92Zm3.76-3.76l-7.92-7.93L18 4l8 7.93Z\"/>"},"event-schedule":{"body":"<path fill=\"currentColor\" d=\"M21 30a8 8 0 1 1 8-8a8 8 0 0 1-8 8m0-14a6 6 0 1 0 6 6a6 6 0 0 0-6-6\"/><path fill=\"currentColor\" d=\"M22.59 25L20 22.41V18h2v3.59l2 2z\"/><path fill=\"currentColor\" d=\"M28 6a2 2 0 0 0-2-2h-4V2h-2v2h-8V2h-2v2H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V6h4v2h2V6h8v2h2V6h4v6h2Z\"/>"},"flash":{"body":"<path fill=\"currentColor\" d=\"M11.61 29.92a1 1 0 0 1-.6-1.07L12.83 17H8a1 1 0 0 1-1-1.23l3-13A1 1 0 0 1 11 2h10a1 1 0 0 1 .78.37a1 1 0 0 1 .2.85L20.25 11H25a1 1 0 0 1 .9.56a1 1 0 0 1-.11 1l-13 17A1 1 0 0 1 12 30a1.1 1.1 0 0 1-.39-.08M17.75 13l2-9H11.8L9.26 15h5.91l-1.59 10.28L23 13Z\"/>"},"help":{"body":"<path fill=\"currentColor\" d=\"M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12\"/><circle cx=\"16\" cy=\"23.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9\"/>"},"launch":{"body":"<path fill=\"currentColor\" d=\"M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2\"/><path fill=\"currentColor\" d=\"M20 2v2h6.586L18 12.586L19.414 14L28 5.414V12h2V2z\"/>"},"moon":{"body":"<path fill=\"currentColor\" d=\"M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3\"/>"},"open-panel-filled-bottom":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 2v12H4V6Z\"/>"},"open-panel-filled-left":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 22H12V6h16Z\"/>"},"open-panel-filled-right":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M4 6h16v20H4Z\"/>"},"pan-horizontal":{"body":"<path fill=\"currentColor\" d=\"m24 10l-1.414 1.414L26.172 15H5.828l3.586-3.586L8 10l-6 6l6 6l1.414-1.414L5.828 17h20.344l-3.586 3.586L24 22l6-6z\"/>"},"pan-vertical":{"body":"<path fill=\"currentColor\" d=\"m10 8l1.414 1.414L15 5.828v20.344l-3.586-3.586L10 24l6 6l6-6l-1.414-1.414L17 26.172V5.828l3.586 3.586L22 8l-6-6z\"/>"},"panel-expansion":{"body":"<path fill=\"currentColor\" d=\"M12 6H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 8V8h6v6Zm20-8h-6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 18V8h6v16Z\"/>"},"reset":{"body":"<path fill=\"currentColor\" d=\"M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z\"/>"},"save":{"body":"<path fill=\"currentColor\" d=\"m27.71 9.29l-5-5A1 1 0 0 0 22 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V10a1 1 0 0 0-.29-.71M12 6h8v4h-8Zm8 20h-8v-8h8Zm2 0v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8H6V6h4v4a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.41l4 4V26Z\"/>"},"screen":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M18 28h-4v-4h4Zm10-6H4V6h24Z\"/>"},"script-reference":{"body":"<path fill=\"currentColor\" d=\"M4 20v2h4.586L2 28.586L3.414 30L10 23.414V28h2v-8zm23.17 6l-2.58 2.58L26 30l4-4l-4-4l-1.42 1.41zm-8.34 0l2.58-2.58L20 22l-4 4l4 4l1.42-1.41zM25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v12h2V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7M18 10V4.4l5.6 5.6Z\"/>"},"search":{"body":"<path fill=\"currentColor\" d=\"m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9\"/>"},"shape-except":{"body":"<path fill=\"currentColor\" d=\"M28 10h-6V4a2 2 0 0 0-2-2H4a2.003 2.003 0 0 0-2 2v16a2.003 2.003 0 0 0 2 2h6v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M12 20v-8h8v8ZM3.999 4H20v6h-8a2 2 0 0 0-2 2v8H4Z\"/>"},"software-resource-reference":{"body":"<path fill=\"currentColor\" d=\"m6.899 10.283l3.394-3.394l1.414 1.414l-3.394 3.394zM4.9 19.7l-2.3-2.3C2.2 17 2 16.5 2 16s.2-1 .6-1.4l2.3-2.3l1.4 1.4L4 16l2.3 2.3zm1.989 2.007l1.414-1.414l3.394 3.394l-1.414 1.414zM16 30c-.5 0-1-.2-1.4-.6l-2.3-2.3l1.4-1.4L16 28l2.3-2.3l1.4 1.4l-2.3 2.3c-.4.4-.9.6-1.4.6m4.293-6.303l3.394-3.394l1.414 1.414l-3.394 3.394zM27.1 19.7l-1.4-1.4L28 16l-2.3-2.3l1.4-1.4l2.3 2.3c.4.4.6.9.6 1.4s-.2 1-.6 1.4zM20.303 8.313l1.414-1.414l3.394 3.394l-1.414 1.414zM16 2c-.5 0-1 .2-1.4.6l-2.3 2.3l1.4 1.4L16 4l2.3 2.3l1.4-1.4l-2.3-2.3C17 2.2 16.5 2 16 2\"/>"},"sun":{"body":"<path fill=\"currentColor\" d=\"M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6M5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z\"/>"},"text-color":{"body":"<path fill=\"currentColor\" d=\"M22 21h2L17 4h-2L8 21h2l1.61-4h8.74Zm-9.57-6l3.44-8.37h.26L19.54 15ZM6 24h20v4H6z\"/>"},"text-font":{"body":"<path fill=\"currentColor\" d=\"M25 12h-5v2h5a1 1 0 0 1 1 1v2h-4a3.003 3.003 0 0 0-3 3v1a3.003 3.003 0 0 0 3 3h6v-9a3.003 3.003 0 0 0-3-3m-3 10a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4v3Zm-6 2h2L12 7h-2L4 24h2l1.694-5h6.613Zm-7.629-7l2.497-7.371h.266L13.63 17Z\"/>"},"trash-can":{"body":"<path fill=\"currentColor\" d=\"M12 12h2v12h-2zm6 0h2v12h-2z\"/><path fill=\"currentColor\" d=\"M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6Zm4 22V8h16v20Zm4-26h8v2h-8z\"/>"},"view":{"body":"<path fill=\"currentColor\" d=\"M30.94 15.66A16.69 16.69 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25\"/><path fill=\"currentColor\" d=\"M16 10a6 6 0 1 0 6 6a6 6 0 0 0-6-6m0 10a4 4 0 1 1 4-4a4 4 0 0 1-4 4\"/>"},"view-off":{"body":"<path fill=\"currentColor\" d=\"m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17\"/><path fill=\"currentColor\" d=\"M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33Zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25\"/>"},"warning-alt":{"body":"<path fill=\"currentColor\" d=\"M16 23a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 23m-1-11h2v9h-2z\"/><path fill=\"currentColor\" d=\"M29 30H3a1 1 0 0 1-.887-1.461l13-25a1 1 0 0 1 1.774 0l13 25A1 1 0 0 1 29 30M4.65 28h22.7l.001-.003L16.002 6.17h-.004L4.648 27.997Z\"/>"}},"lastModified":1785496919,"aliases":{"software-resource-resource":{"parent":"software-resource-reference"}},"width":32,"height":32},
-  {"prefix":"fluent","icons":{"text-paragraph-direction-left-16-regular":{"body":"<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM3.854 6.146a.5.5 0 0 1 0 .708L2.707 8l1.147 1.146a.5.5 0 1 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708 0\"/>","width":16,"height":16},"text-paragraph-direction-right-16-regular":{"body":"<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM2.146 6.146a.5.5 0 0 1 .708 0l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708-.708L3.293 8L2.146 6.854a.5.5 0 0 1 0-.708\"/>","width":16,"height":16}},"lastModified":1786851660,"width":20,"height":20},
+  {"prefix":"carbon","icons":{"add-alt":{"body":"<path fill=\"currentColor\" d=\"M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16S9.4 4 16 4m0-2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2\"/><path fill=\"currentColor\" d=\"M24 15h-7V8h-2v7H8v2h7v7h2v-7h7z\"/>"},"area":{"body":"<path fill=\"currentColor\" d=\"M27 22.142V9.858A3.992 3.992 0 1 0 22.142 5H9.858A3.992 3.992 0 1 0 5 9.858v12.284A3.992 3.992 0 1 0 9.858 27h12.284A3.992 3.992 0 1 0 27 22.142M26 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m16.142-3H9.858A4 4 0 0 0 7 22.142V9.858A4 4 0 0 0 9.858 7h12.284A4 4 0 0 0 25 9.858v12.284A3.99 3.99 0 0 0 22.142 25M26 28a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>"},"audio-console":{"body":"<path fill=\"currentColor\" d=\"M28 14.005h-1v-12h-2v12h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v10h2v-10h1a2.003 2.003 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10-12h-1v-4h-2v4h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v18h2v-18h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10 10H7v-18H5v18H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v4h2v-4h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4H4v-2h4Z\"/>"},"calendar":{"body":"<path fill=\"currentColor\" d=\"M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 22H6V12h20zm0-16H6V6h4v2h2V6h8v2h2V6h4z\"/>"},"caret-down":{"body":"<path fill=\"currentColor\" d=\"m24 12l-8 10l-8-10z\"/>"},"caret-right":{"body":"<path fill=\"currentColor\" d=\"m12 8l10 8l-10 8z\"/>"},"checkbox":{"body":"<path fill=\"currentColor\" d=\"M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6 26V6h20v20Z\"/>"},"checkmark":{"body":"<path fill=\"currentColor\" d=\"m13 24l-9-9l1.414-1.414L13 21.171L26.586 7.586L28 9z\"/>"},"chevron-down":{"body":"<path fill=\"currentColor\" d=\"M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z\"/>"},"chevron-left":{"body":"<path fill=\"currentColor\" d=\"M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z\"/>"},"chevron-right":{"body":"<path fill=\"currentColor\" d=\"M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z\"/>"},"chevron-sort":{"body":"<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>"},"close":{"body":"<path fill=\"currentColor\" d=\"M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z\"/>"},"code":{"body":"<path fill=\"currentColor\" d=\"m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23zm11.42 9.484L17.64 6l1.932.517L14.352 26z\"/>"},"code-hide":{"body":"<path fill=\"currentColor\" d=\"m17.713 13.471l1.863-6.953L17.645 6l-1.565 5.838zm6.494 6.494l1.414 1.414L31 16l-7-7l-1.414 1.414L28.172 16zM30 28.586L3.414 2L2 3.414l5.793 5.793L1 16l7 7l1.414-1.414L3.828 16l5.379-5.379l5.677 5.677l-2.461 9.184l1.932.518l2.162-8.069L28.586 30z\"/>"},"color-palette":{"body":"<circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"9\" r=\"2\" fill=\"currentColor\"/><circle cx=\"22\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"23\" cy=\"18\" r=\"2\" fill=\"currentColor\"/><circle cx=\"19\" cy=\"23\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M16.54 2A14 14 0 0 0 2 16a4.82 4.82 0 0 0 6.09 4.65l1.12-.31a3 3 0 0 1 3.79 2.9V27a3 3 0 0 0 3 3a14 14 0 0 0 14-14.54A14.05 14.05 0 0 0 16.54 2m8.11 22.31A11.93 11.93 0 0 1 16 28a1 1 0 0 1-1-1v-3.76a5 5 0 0 0-5-5a5 5 0 0 0-1.33.18l-1.12.31A2.82 2.82 0 0 1 4 16A12 12 0 0 1 16.47 4A12.18 12.18 0 0 1 28 15.53a11.9 11.9 0 0 1-3.35 8.79Z\"/>"},"condition-wait-point":{"body":"<path fill=\"currentColor\" d=\"m8 16l8-8l8 8l-8 8z\"/><path fill=\"currentColor\" d=\"M16 4A12 12 0 1 1 4 16A12.014 12.014 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2\"/>"},"copy-file":{"body":"<path fill=\"currentColor\" d=\"m27.4 14.7l-6.1-6.1C21 8.2 20.5 8 20 8h-8c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V16.1c0-.5-.2-1-.6-1.4M20 10l5.9 6H20zm-8 18V10h6v6c0 1.1.9 2 2 2h6v10z\"/><path fill=\"currentColor\" d=\"M6 18H4V4c0-1.1.9-2 2-2h14v2H6z\"/>"},"cube":{"body":"<path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M16 3.158L26.016 9L16 14.842L5.984 9ZM5 10.74l10 5.833V28.26L5 22.426Zm12 17.52V16.574l10-5.833v11.685Z\"/>"},"cube-view":{"body":"<circle cx=\"16\" cy=\"16\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M23.777 15.479A8.64 8.64 0 0 0 16 10a8.64 8.64 0 0 0-7.777 5.479L8 16l.223.522A8.64 8.64 0 0 0 16 22a8.64 8.64 0 0 0 7.777-5.478L24 16ZM16 20a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4\"/><path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M27 22.426l-11 6.416l-11-6.416V9.574l11-6.416l11 6.416Z\"/>"},"data-vis-1":{"body":"<path fill=\"currentColor\" d=\"M26 22a3.96 3.96 0 0 0-2.02.567l-3.813-3.814a4.965 4.965 0 0 0 0-5.506l2.547-2.547A3.028 3.028 0 1 0 21.3 9.286l-2.547 2.547a4.965 4.965 0 0 0-5.506 0L9.433 8.019A3.96 3.96 0 0 0 10 6a4 4 0 1 0-4 4a3.96 3.96 0 0 0 2.02-.567l3.813 3.814a4.965 4.965 0 0 0 0 5.506l-3.814 3.814A3.96 3.96 0 0 0 6 22a4 4 0 1 0 4 4a3.96 3.96 0 0 0-.567-2.02l3.814-3.813a5 5 0 0 0 1.753.732v3.285a3 3 0 1 0 2 0v-3.285a5 5 0 0 0 1.753-.732l3.814 3.814A3.96 3.96 0 0 0 22 26a4 4 0 1 0 4-4m-10-9a3 3 0 1 1-3 3a3.003 3.003 0 0 1 3-3M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m20 0a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>"},"devices":{"body":"<path fill=\"currentColor\" d=\"M10 30H4a2 2 0 0 1-2-2V16a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2M4 16v12h6V16Z\"/><path fill=\"currentColor\" d=\"M28 4H6a2 2 0 0 0-2 2v6h2V6h22v14H14v2h2v4h-2v2h9v-2h-5v-4h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2\"/>"},"document":{"body":"<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z\"/><path fill=\"currentColor\" d=\"M10 22h12v2H10zm0-6h12v2H10z\"/>"},"document-blank":{"body":"<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.9.9 0 0 0-.3-.7M18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z\"/>"},"document-unknown":{"body":"<circle cx=\"9\" cy=\"28.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M10 25H8v-4h2a2 2 0 0 0 0-4H8a2 2 0 0 0-2 2v.5H4V19a4.005 4.005 0 0 1 4-4h2a4 4 0 0 1 0 8Z\"/><path fill=\"currentColor\" d=\"m27.7 9.3l-7-7A.9.9 0 0 0 20 2H10a2.006 2.006 0 0 0-2 2v8h2V4h8v6a2.006 2.006 0 0 0 2 2h6v16H14v2h12a2.006 2.006 0 0 0 2-2V10a.91.91 0 0 0-.3-.7M20 10V4.4l5.6 5.6Z\"/>"},"edit":{"body":"<path fill=\"currentColor\" d=\"M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4zm-5-5L24 7.6l-3 3L17.4 7zM6 22v-3.6l10-10l3.6 3.6l-10 10z\"/>"},"erase":{"body":"<path fill=\"currentColor\" d=\"M7 27h23v2H7zm20.38-16.49l-7.93-7.92a2 2 0 0 0-2.83 0l-14 14a2 2 0 0 0 0 2.83L7.13 24h9.59l10.66-10.66a2 2 0 0 0 0-2.83M15.89 22H8l-4-4l6.31-6.31l7.93 7.92Zm3.76-3.76l-7.92-7.93L18 4l8 7.93Z\"/>"},"event-schedule":{"body":"<path fill=\"currentColor\" d=\"M21 30a8 8 0 1 1 8-8a8 8 0 0 1-8 8m0-14a6 6 0 1 0 6 6a6 6 0 0 0-6-6\"/><path fill=\"currentColor\" d=\"M22.59 25L20 22.41V18h2v3.59l2 2z\"/><path fill=\"currentColor\" d=\"M28 6a2 2 0 0 0-2-2h-4V2h-2v2h-8V2h-2v2H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V6h4v2h2V6h8v2h2V6h4v6h2Z\"/>"},"flash":{"body":"<path fill=\"currentColor\" d=\"M11.61 29.92a1 1 0 0 1-.6-1.07L12.83 17H8a1 1 0 0 1-1-1.23l3-13A1 1 0 0 1 11 2h10a1 1 0 0 1 .78.37a1 1 0 0 1 .2.85L20.25 11H25a1 1 0 0 1 .9.56a1 1 0 0 1-.11 1l-13 17A1 1 0 0 1 12 30a1.1 1.1 0 0 1-.39-.08M17.75 13l2-9H11.8L9.26 15h5.91l-1.59 10.28L23 13Z\"/>"},"help":{"body":"<path fill=\"currentColor\" d=\"M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12\"/><circle cx=\"16\" cy=\"23.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9\"/>"},"launch":{"body":"<path fill=\"currentColor\" d=\"M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2\"/><path fill=\"currentColor\" d=\"M20 2v2h6.586L18 12.586L19.414 14L28 5.414V12h2V2z\"/>"},"moon":{"body":"<path fill=\"currentColor\" d=\"M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3\"/>"},"open-panel-filled-bottom":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 2v12H4V6Z\"/>"},"open-panel-filled-left":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 22H12V6h16Z\"/>"},"open-panel-filled-right":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M4 6h16v20H4Z\"/>"},"pan-horizontal":{"body":"<path fill=\"currentColor\" d=\"m24 10l-1.414 1.414L26.172 15H5.828l3.586-3.586L8 10l-6 6l6 6l1.414-1.414L5.828 17h20.344l-3.586 3.586L24 22l6-6z\"/>"},"pan-vertical":{"body":"<path fill=\"currentColor\" d=\"m10 8l1.414 1.414L15 5.828v20.344l-3.586-3.586L10 24l6 6l6-6l-1.414-1.414L17 26.172V5.828l3.586 3.586L22 8l-6-6z\"/>"},"panel-expansion":{"body":"<path fill=\"currentColor\" d=\"M12 6H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 8V8h6v6Zm20-8h-6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 18V8h6v16Z\"/>"},"reset":{"body":"<path fill=\"currentColor\" d=\"M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z\"/>"},"save":{"body":"<path fill=\"currentColor\" d=\"m27.71 9.29l-5-5A1 1 0 0 0 22 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V10a1 1 0 0 0-.29-.71M12 6h8v4h-8Zm8 20h-8v-8h8Zm2 0v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8H6V6h4v4a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.41l4 4V26Z\"/>"},"screen":{"body":"<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M18 28h-4v-4h4Zm10-6H4V6h24Z\"/>"},"script-reference":{"body":"<path fill=\"currentColor\" d=\"M4 20v2h4.586L2 28.586L3.414 30L10 23.414V28h2v-8zm23.17 6l-2.58 2.58L26 30l4-4l-4-4l-1.42 1.41zm-8.34 0l2.58-2.58L20 22l-4 4l4 4l1.42-1.41zM25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v12h2V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7M18 10V4.4l5.6 5.6Z\"/>"},"search":{"body":"<path fill=\"currentColor\" d=\"m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9\"/>"},"shape-except":{"body":"<path fill=\"currentColor\" d=\"M28 10h-6V4a2 2 0 0 0-2-2H4a2.003 2.003 0 0 0-2 2v16a2.003 2.003 0 0 0 2 2h6v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M12 20v-8h8v8ZM3.999 4H20v6h-8a2 2 0 0 0-2 2v8H4Z\"/>"},"software-resource-reference":{"body":"<path fill=\"currentColor\" d=\"m6.899 10.283l3.394-3.394l1.414 1.414l-3.394 3.394zM4.9 19.7l-2.3-2.3C2.2 17 2 16.5 2 16s.2-1 .6-1.4l2.3-2.3l1.4 1.4L4 16l2.3 2.3zm1.989 2.007l1.414-1.414l3.394 3.394l-1.414 1.414zM16 30c-.5 0-1-.2-1.4-.6l-2.3-2.3l1.4-1.4L16 28l2.3-2.3l1.4 1.4l-2.3 2.3c-.4.4-.9.6-1.4.6m4.293-6.303l3.394-3.394l1.414 1.414l-3.394 3.394zM27.1 19.7l-1.4-1.4L28 16l-2.3-2.3l1.4-1.4l2.3 2.3c.4.4.6.9.6 1.4s-.2 1-.6 1.4zM20.303 8.313l1.414-1.414l3.394 3.394l-1.414 1.414zM16 2c-.5 0-1 .2-1.4.6l-2.3 2.3l1.4 1.4L16 4l2.3 2.3l1.4-1.4l-2.3-2.3C17 2.2 16.5 2 16 2\"/>"},"sun":{"body":"<path fill=\"currentColor\" d=\"M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6M5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z\"/>"},"text-color":{"body":"<path fill=\"currentColor\" d=\"M22 21h2L17 4h-2L8 21h2l1.61-4h8.74Zm-9.57-6l3.44-8.37h.26L19.54 15ZM6 24h20v4H6z\"/>"},"text-font":{"body":"<path fill=\"currentColor\" d=\"M25 12h-5v2h5a1 1 0 0 1 1 1v2h-4a3.003 3.003 0 0 0-3 3v1a3.003 3.003 0 0 0 3 3h6v-9a3.003 3.003 0 0 0-3-3m-3 10a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4v3Zm-6 2h2L12 7h-2L4 24h2l1.694-5h6.613Zm-7.629-7l2.497-7.371h.266L13.63 17Z\"/>"},"trash-can":{"body":"<path fill=\"currentColor\" d=\"M12 12h2v12h-2zm6 0h2v12h-2z\"/><path fill=\"currentColor\" d=\"M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6Zm4 22V8h16v20Zm4-26h8v2h-8z\"/>"},"view":{"body":"<path fill=\"currentColor\" d=\"M30.94 15.66A16.69 16.69 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25\"/><path fill=\"currentColor\" d=\"M16 10a6 6 0 1 0 6 6a6 6 0 0 0-6-6m0 10a4 4 0 1 1 4-4a4 4 0 0 1-4 4\"/>"},"view-off":{"body":"<path fill=\"currentColor\" d=\"m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17\"/><path fill=\"currentColor\" d=\"M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33Zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25\"/>"},"warning-alt":{"body":"<path fill=\"currentColor\" d=\"M16 23a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 23m-1-11h2v9h-2z\"/><path fill=\"currentColor\" d=\"M29 30H3a1 1 0 0 1-.887-1.461l13-25a1 1 0 0 1 1.774 0l13 25A1 1 0 0 1 29 30M4.65 28h22.7l.001-.003L16.002 6.17h-.004L4.648 27.997Z\"/>"}},"lastModified":1789034045,"aliases":{"software-resource-resource":{"parent":"software-resource-reference"}},"width":32,"height":32},
+  {"prefix":"fluent","icons":{"text-paragraph-direction-left-16-regular":{"body":"<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM3.854 6.146a.5.5 0 0 1 0 .708L2.707 8l1.147 1.146a.5.5 0 1 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708 0\"/>","width":16,"height":16},"text-paragraph-direction-right-16-regular":{"body":"<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM2.146 6.146a.5.5 0 0 1 .708 0l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708-.708L3.293 8L2.146 6.854a.5.5 0 0 1 0-.708\"/>","width":16,"height":16}},"lastModified":1789279072,"width":20,"height":20},
   {"prefix":"mdi","icons":{"drag-horizontal-variant":{"body":"<path fill=\"currentColor\" d=\"M21 11H3V9h18zm0 2H3v2h18z\"/>"},"drag-vertical-variant":{"body":"<path fill=\"currentColor\" d=\"M11 21H9V3h2zm4-18h-2v18h2z\"/>"},"tailwind":{"body":"<path fill=\"currentColor\" d=\"M12 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.31.74 1.91 1.35c.98 1 2.09 2.15 4.59 2.15c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C15.61 7.15 14.5 6 12 6m-5 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.3.74 1.91 1.35C8.39 16.85 9.5 18 12 18c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C10.61 13.15 9.5 12 7 12\"/>"}},"lastModified":1737398331,"width":24,"height":24},
   {"prefix":"ri","icons":{"add-line":{"body":"<path fill=\"currentColor\" d=\"M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z\"/>"},"subtract-line":{"body":"<path fill=\"currentColor\" d=\"M5 11v2h14v-2z\"/>"}},"lastModified":1770712905,"width":24,"height":24},
 ]

package/src/app/util/scroll.ts

@@ -1,7 +1,33 @@
 import type { Ref } from 'vue'
-import scrollIntoView from 'scroll-into-view-if-needed'
 import { onMounted, watch } from 'vue'
 
+/**
+ * The closest ancestor that can actually scroll, or `null` for the viewport.
+ *
+ * `overlay` is in the test because it is what `overflow: overlay` computes to
+ * where it is still supported, and an element scrolling under it would
+ * otherwise be measured against the wrong box.
+ */
+function scrollParent(el: HTMLElement): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    if (/auto|scroll|overlay/.test(style.overflowY + style.overflowX)) {
+      return node
+    }
+  }
+  return null
+}
+
+/** Whether the element is already wholly inside the box that would scroll. */
+function isVisibleIn(el: HTMLElement, scroller: HTMLElement | null): boolean {
+  const rect = el.getBoundingClientRect()
+  const bounds = scroller?.getBoundingClientRect()
+  const top = bounds?.top ?? 0
+  const bottom = bounds?.bottom ?? window.innerHeight
+
+  return rect.top >= top && rect.bottom <= bottom
+}
+
 // `el` is a template ref, so it is undefined until the component mounts and
 // again once it unmounts. `autoScroll` has always guarded for that; the
 // signature was the only thing claiming otherwise, and it made four callers
@@ -13,16 +39,28 @@ export function useScrollOnActive(active: Ref<boolean>, el: Ref<HTMLElement | un
     }
   }, { flush: 'post' })
 
+  /*
+   * What `scroll-into-view-if-needed` was here for: centre the element, but
+   * only when it is not already on screen. The platform has no single option
+   * for that pair — `block: 'center'` always scrolls, and `block: 'nearest'`
+   * never centres — so the "if needed" half is the check above and the
+   * "centre" half is the native call.
+   *
+   * Two `getBoundingClientRect` reads, on an activation event rather than per
+   * frame, so this is not the per-event shape CONVENTIONS.md rule 6 is about.
+   *
+   * The library took `boundary: document.body`, which native has no equivalent
+   * for: it will scroll every scrollable ancestor up to the document. The
+   * chrome's layout is full-height and the document does not scroll, so there
+   * is nothing above the pane for it to move.
+   */
   function autoScroll() {
-    if (el.value) {
-      scrollIntoView(el.value, {
-        scrollMode: 'if-needed',
-        block: 'center',
-        inline: 'nearest',
-        behavior: 'smooth',
-        boundary: document.body,
-      })
+    const target = el.value
+    if (!target || isVisibleIn(target, scrollParent(target))) {
+      return
     }
+
+    target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
   }
 
   onMounted(() => {