From 3684caea87d76f74f81f70d47c298ef79be3ec8c Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 7 Mar 2026 14:27:17 +0300
Subject: [PATCH] Fix duplicate :class, rename race, useFileDialog leak,
 restore clip/wrap

---
 src/components/AppMenu.vue                  | 17 ++++-----
 src/components/FontPicker.vue               |  8 +++-
 src/components/MobileHud.vue                |  8 +++-
 src/components/NodeContextMenuContent.vue   |  4 +-
 src/components/Toolbar.vue                  | 14 ++++---
 src/components/chat/ChatInput.vue           | 29 ++++++++++++--
 src/components/properties/LayoutSection.vue | 42 ++++++++++++++++++++-
 src/components/ui/button.ts                 | 10 +----
 src/components/ui/menu.ts                   |  5 ++-
 src/components/ui/select.ts                 |  2 +-
 src/components/ui/surface.ts                |  2 +-
 src/composables/use-menu.ts                 | 11 +++---
 12 files changed, 110 insertions(+), 42 deletions(-)

diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 6958eff26..86f88ed8f 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -27,15 +27,17 @@ import { useEditorStore } from '@/stores/editor'
 const store = useEditorStore()
 
 const DOCUMENT_NAME_ID = 'document-name'
-const nameInputRef = ref<HTMLInputElement | null>(null)
 const rename = useInlineRename<'document-name'>((_id, name) => {
   store.state.documentName = name
 })
 const editingName = computed(() => rename.editingId.value === DOCUMENT_NAME_ID)
 
+function setNameInputRef(el: HTMLInputElement | null) {
+  if (el) void rename.focusInput(el)
+}
+
 function startRename() {
   rename.start(DOCUMENT_NAME_ID, store.state.documentName)
-  void rename.focusInput(nameInputRef.value)
 }
 
 function commitRename(input: HTMLInputElement) {
@@ -176,7 +178,7 @@ const topMenus = [
       <img data-test-id="app-logo" src="/favicon-32.png" class="size-4" alt="OpenPencil" />
       <input
         v-if="editingName"
-        ref="nameInputRef"
+        :ref="(el) => setNameInputRef(el as HTMLInputElement | null)"
         data-test-id="app-document-name-input"
         class="min-w-0 flex-1 rounded border border-accent bg-input px-1 py-0.5 text-xs text-surface outline-none"
         :value="store.state.documentName"
@@ -219,17 +221,12 @@ const topMenus = [
               <template v-for="(item, i) in menu.items" :key="i">
                 <MenubarSeparator v-if="item.separator" :class="menuSeparator()" />
                 <MenubarSub v-else-if="item.sub">
-                  <MenubarSubTrigger
-                    :class="menuItem()"
-                  >
+                  <MenubarSubTrigger :class="menuItem()">
                     <span class="flex-1">{{ item.label }}</span>
                     <IconChevronRight class="size-3 text-muted" />
                   </MenubarSubTrigger>
                   <MenubarPortal>
-                    <MenubarSubContent
-                      :side-offset="4"
-                      :class="menuContent({ class: 'min-w-44' })"
-                    >
+                    <MenubarSubContent :side-offset="4" :class="menuContent({ class: 'min-w-44' })">
                       <template v-for="(sub, j) in item.sub" :key="j">
                         <MenubarSeparator v-if="sub.separator" :class="menuSeparator()" />
                         <MenubarItem
diff --git a/src/components/FontPicker.vue b/src/components/FontPicker.vue
index ca9e4d14f..3320c3ba7 100644
--- a/src/components/FontPicker.vue
+++ b/src/components/FontPicker.vue
@@ -63,7 +63,13 @@ function onSelect(val: string) {
     <PopoverContent
       :side-offset="2"
       align="start"
-      :class="panelSurface({ radius: 'md', padding: 'none', class: 'z-50 flex min-w-56 w-[var(--reka-popper-anchor-width)] flex-col overflow-hidden' })"
+      :class="
+        panelSurface({
+          radius: 'md',
+          padding: 'none',
+          class: 'z-50 flex min-w-56 w-[var(--reka-popper-anchor-width)] flex-col overflow-hidden'
+        })
+      "
       @open-auto-focus.prevent
     >
       <ListboxRoot :model-value="modelValue" @update:model-value="onSelect">
diff --git a/src/components/MobileHud.vue b/src/components/MobileHud.vue
index d2706d76a..280790202 100644
--- a/src/components/MobileHud.vue
+++ b/src/components/MobileHud.vue
@@ -222,7 +222,13 @@ const onlineCount = computed(() => props.collabPeers.length + 1)
             <DropdownMenuItem
               v-for="item in menuItems"
               :key="item.label"
-              :class="menuItem({ justify: 'start', class: 'w-full gap-2.5 rounded-lg border-none bg-transparent px-2.5 py-2 active:bg-hover' })"
+              :class="
+                menuItem({
+                  justify: 'start',
+                  class:
+                    'w-full gap-2.5 rounded-lg border-none bg-transparent px-2.5 py-2 active:bg-hover'
+                })
+              "
               @click="item.action()"
             >
               <component :is="item.icon" class="size-4 text-muted" />
diff --git a/src/components/NodeContextMenuContent.vue b/src/components/NodeContextMenuContent.vue
index 990986e87..d7f379e0c 100644
--- a/src/components/NodeContextMenuContent.vue
+++ b/src/components/NodeContextMenuContent.vue
@@ -102,7 +102,9 @@ function copyAsJSX() {
 
 const itemClass = menuItem()
 const componentItemClass = menuItem({ tone: 'component' })
-const menuClass = menuContent({ class: 'min-w-56 shadow-[0_8px_30px_rgb(0_0_0/0.4)] animate-in fade-in zoom-in-95' })
+const menuClass = menuContent({
+  class: 'min-w-56 shadow-[0_8px_30px_rgb(0_0_0/0.4)] animate-in fade-in zoom-in-95'
+})
 const separatorClass = menuSeparator({ class: 'my-1' })
 </script>
 
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index adbf1823b..3d77904b0 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -181,8 +181,11 @@ function goNext() {
                   v-for="sub in tool.flyout"
                   :key="sub"
                   :data-test-id="`toolbar-flyout-item-${sub.toLowerCase()}`"
-                  :class="menuItem()"
-                  :class="store.state.activeTool === sub ? 'bg-accent text-white' : undefined"
+                  :class="
+                    menuItem({
+                      class: store.state.activeTool === sub ? 'bg-accent text-white' : undefined
+                    })
+                  "
                   @select="store.setTool(sub)"
                 >
                   <component :is="toolIcons[sub]" class="size-3.5" />
@@ -294,11 +297,10 @@ function goNext() {
                       v-for="sub in tool.flyout"
                       :key="sub"
                       :data-test-id="`mobile-toolbar-flyout-item-${sub.toLowerCase()}`"
-                      :class="menuItem()"
                       :class="
-                        store.state.activeTool === sub
-                          ? 'bg-accent text-white'
-                          : 'text-surface hover:bg-hover'
+                        menuItem({
+                          class: store.state.activeTool === sub ? 'bg-accent text-white' : undefined
+                        })
                       "
                       @select="store.setTool(sub)"
                     >
diff --git a/src/components/chat/ChatInput.vue b/src/components/chat/ChatInput.vue
index 34ac7672d..44a61a56d 100644
--- a/src/components/chat/ChatInput.vue
+++ b/src/components/chat/ChatInput.vue
@@ -54,7 +54,12 @@ function handleSubmit(e: Event) {
         <SelectRoot v-model="modelId">
           <SelectTrigger
             data-test-id="chat-model-selector"
-            :class="selectTrigger({ class: 'gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[10px] text-muted' })"
+            :class="
+              selectTrigger({
+                class:
+                  'gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[10px] text-muted'
+              })
+            "
           >
             <icon-lucide-bot class="size-3" />
             {{ selectedModelName }}
@@ -65,7 +70,9 @@ function handleSubmit(e: Event) {
               position="popper"
               side="top"
               :side-offset="4"
-              :class="selectContent({ radius: 'lg', padding: 'md', class: 'max-h-60 overflow-y-auto' })"
+              :class="
+                selectContent({ radius: 'lg', padding: 'md', class: 'max-h-60 overflow-y-auto' })
+              "
             >
               <SelectViewport>
                 <SelectItem
@@ -103,7 +110,14 @@ function handleSubmit(e: Event) {
             <button
               type="button"
               data-test-id="chat-stop-button"
-              :class="uiButton({ tone: 'ghost', shape: 'rounded', size: 'sm', class: 'shrink-0 border border-border px-2 py-1.5' })"
+              :class="
+                uiButton({
+                  tone: 'ghost',
+                  shape: 'rounded',
+                  size: 'sm',
+                  class: 'shrink-0 border border-border px-2 py-1.5'
+                })
+              "
               @click="emit('stop')"
             >
               <icon-lucide-square class="size-3" />
@@ -124,7 +138,14 @@ function handleSubmit(e: Event) {
             <button
               type="submit"
               data-test-id="chat-send-button"
-              :class="uiButton({ tone: 'accent', shape: 'rounded', size: 'sm', class: 'shrink-0 px-2.5 py-1.5 font-medium' })"
+              :class="
+                uiButton({
+                  tone: 'accent',
+                  shape: 'rounded',
+                  size: 'sm',
+                  class: 'shrink-0 px-2.5 py-1.5 font-medium'
+                })
+              "
               :disabled="!input.trim()"
             >
               <icon-lucide-send class="size-3" />
diff --git a/src/components/properties/LayoutSection.vue b/src/components/properties/LayoutSection.vue
index c8ea2ac2f..16e444a66 100644
--- a/src/components/properties/LayoutSection.vue
+++ b/src/components/properties/LayoutSection.vue
@@ -188,27 +188,44 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
     <template v-if="node.layoutMode !== 'NONE'">
       <div class="mt-1.5 flex gap-0.5">
         <button
+          data-test-id="layout-direction-horizontal"
           class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
           :class="
             node.layoutMode === 'HORIZONTAL'
               ? 'border-accent bg-accent/10 text-accent'
               : 'border-border text-muted hover:bg-hover hover:text-surface'
           "
+          title="Horizontal layout"
           @click="store.setLayoutMode(node.id, 'HORIZONTAL')"
         >
           <icon-lucide-arrow-right class="size-3.5" />
         </button>
         <button
+          data-test-id="layout-direction-vertical"
           class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
           :class="
             node.layoutMode === 'VERTICAL'
               ? 'border-accent bg-accent/10 text-accent'
               : 'border-border text-muted hover:bg-hover hover:text-surface'
           "
+          title="Vertical layout"
           @click="store.setLayoutMode(node.id, 'VERTICAL')"
         >
           <icon-lucide-arrow-down class="size-3.5" />
         </button>
+        <button
+          data-test-id="layout-direction-wrap"
+          class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
+          :class="
+            node.layoutWrap === 'WRAP'
+              ? 'border-accent bg-accent/10 text-accent'
+              : 'border-border text-muted hover:bg-hover hover:text-surface'
+          "
+          title="Wrap"
+          @click="updateProp('layoutWrap', node.layoutWrap === 'WRAP' ? 'NO_WRAP' : 'WRAP')"
+        >
+          <icon-lucide-wrap-text class="size-3.5" />
+        </button>
       </div>
 
       <div class="mt-2 grid grid-cols-2 gap-1.5">
@@ -237,7 +254,10 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
         </button>
       </div>
 
-      <div v-if="showIndividualPadding || !hasUniformPadding()" class="mt-1.5 grid grid-cols-2 gap-1.5">
+      <div
+        v-if="showIndividualPadding || !hasUniformPadding()"
+        class="mt-1.5 grid grid-cols-2 gap-1.5"
+      >
         <ScrubInput
           icon="Top"
           :model-value="Math.round(node.paddingTop)"
@@ -270,7 +290,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
 
       <div class="mt-2">
         <label class="mb-1 block text-[11px] text-muted">Alignment</label>
-        <div class="grid grid-cols-3 gap-1">
+        <div data-test-id="layout-alignment-grid" class="grid grid-cols-3 gap-1">
           <button
             v-for="cell in ALIGN_GRID"
             :key="`${cell.primary}-${cell.counter}`"
@@ -288,4 +308,22 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
       </div>
     </template>
   </div>
+
+  <div v-if="node.type === 'FRAME'" class="border-b border-border px-3 py-2">
+    <label class="flex cursor-pointer items-center gap-2 text-xs text-surface">
+      <input
+        type="checkbox"
+        class="accent-accent"
+        :checked="node.clipsContent"
+        @change="
+          store.updateNodeWithUndo(
+            node.id,
+            { clipsContent: !node.clipsContent },
+            'Toggle clip content'
+          )
+        "
+      />
+      Clip content
+    </label>
+  </div>
 </template>
diff --git a/src/components/ui/button.ts b/src/components/ui/button.ts
index 2edb918be..bb126fb2c 100644
--- a/src/components/ui/button.ts
+++ b/src/components/ui/button.ts
@@ -1,5 +1,5 @@
-import { tv } from 'tailwind-variants'
 import { twMerge } from 'tailwind-merge'
+import { tv } from 'tailwind-variants'
 
 const button = tv({
   base: 'inline-flex items-center justify-center transition-colors select-none',
@@ -24,10 +24,6 @@ const button = tv({
     bordered: {
       true: 'border border-white/10',
       false: ''
-    },
-    active: {
-      true: '',
-      false: ''
     }
   },
   compoundVariants: [
@@ -43,8 +39,7 @@ const button = tv({
     tone: 'ghost',
     shape: 'rounded',
     size: 'sm',
-    bordered: false,
-    active: false
+    bordered: false
   }
 })
 
@@ -53,7 +48,6 @@ export function uiButton(options?: {
   shape?: 'square' | 'rounded' | 'pill'
   size?: 'sm' | 'md' | 'icon' | 'iconSm'
   bordered?: boolean
-  active?: boolean
   class?: string
 }) {
   return twMerge(button(options), options?.class)
diff --git a/src/components/ui/menu.ts b/src/components/ui/menu.ts
index 0bc031b6c..a2e847a92 100644
--- a/src/components/ui/menu.ts
+++ b/src/components/ui/menu.ts
@@ -1,5 +1,5 @@
-import { tv } from 'tailwind-variants'
 import { twMerge } from 'tailwind-merge'
+import { tv } from 'tailwind-variants'
 
 const content = tv({
   base: 'z-50 rounded-lg border border-border bg-panel p-1 shadow-lg'
@@ -10,7 +10,8 @@ const item = tv({
   variants: {
     tone: {
       default: 'text-surface',
-      component: 'text-[#9747ff] data-[highlighted]:bg-[#9747ff]/12 data-[disabled]:text-[#9747ff]/40'
+      component:
+        'text-[#9747ff] data-[highlighted]:bg-[#9747ff]/12 data-[disabled]:text-[#9747ff]/40'
     },
     justify: {
       between: 'justify-between gap-6',
diff --git a/src/components/ui/select.ts b/src/components/ui/select.ts
index b98d1107d..aa3232a7f 100644
--- a/src/components/ui/select.ts
+++ b/src/components/ui/select.ts
@@ -1,5 +1,5 @@
-import { tv } from 'tailwind-variants'
 import { twMerge } from 'tailwind-merge'
+import { tv } from 'tailwind-variants'
 
 const trigger = tv({
   base: 'flex items-center justify-between border border-border bg-input text-surface outline-none hover:bg-hover'
diff --git a/src/components/ui/surface.ts b/src/components/ui/surface.ts
index 4eb9a9409..95b5d9288 100644
--- a/src/components/ui/surface.ts
+++ b/src/components/ui/surface.ts
@@ -1,5 +1,5 @@
-import { tv } from 'tailwind-variants'
 import { twMerge } from 'tailwind-merge'
+import { tv } from 'tailwind-variants'
 
 const surface = tv({
   base: 'border border-border bg-panel',
diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index f849e0960..92abea26d 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -1,5 +1,4 @@
 import { onUnmounted } from 'vue'
-import { useFileDialog } from '@vueuse/core'
 
 import { IS_TAURI } from '@/constants'
 import { useEditorStore } from '@/stores/editor'
@@ -38,12 +37,14 @@ export async function openFileDialog() {
     }
   }
 
-  const { open, onChange } = useFileDialog({ accept: '.fig', multiple: false })
-  onChange((files) => {
-    const file = files?.[0]
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.fig'
+  input.addEventListener('change', () => {
+    const file = input.files?.[0]
     if (file) void openFileInNewTab(file)
   })
-  open()
+  input.click()
 }
 
 const store = useEditorStore()