From 52a31cff2f9d226eb2f71de9824be2a06a653114 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sun, 1 Mar 2026 02:12:19 +0300
Subject: [PATCH] Use TanStack Table for variables dialog with resizable
 columns

Replace hand-rolled flex layout with @tanstack/vue-table:
- Proper <table> with column resizing (drag header borders)
- Sticky header row
- FlexRender for cell content (reka-ui Editable inline editing)
- Use culori via parseColor instead of manual hex parsing
---
 bun.lock                           |   5 +
 package.json                       |   5 +-
 src/components/VariablesDialog.vue | 309 +++++++++++++++++------------
 3 files changed, 195 insertions(+), 124 deletions(-)

diff --git a/bun.lock b/bun.lock
index a31220568..690dfc40a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,6 +8,7 @@
         "@open-pencil/cli": "workspace:*",
         "@open-pencil/core": "workspace:*",
         "@tailwindcss/vite": "^4.2.1",
+        "@tanstack/vue-table": "^8.21.3",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-dialog": "^2.6.0",
         "@tauri-apps/plugin-fs": "^2.4.5",
@@ -327,8 +328,12 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.1", "", { "dependencies": { "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "tailwindcss": "4.2.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w=="],
 
+    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+
     "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.19", "", {}, "sha512-/BMP7kNhzKOd7wnDeB8NrIRNLwkf5AhCYCvtfZV2GXWbBieFm/el0n6LOAXlTi6ZwHICSNnQcIxRCWHrLzDY+g=="],
 
+    "@tanstack/vue-table": ["@tanstack/vue-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "vue": ">=3.2" } }, "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw=="],
+
     "@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.13.19", "", { "dependencies": { "@tanstack/virtual-core": "3.13.19" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-07Fp1TYuIziB4zIDA/moeDKHODePy3K1fN4c4VIAGnkxo1+uOvBJP7m54CoxKiQX6Q9a1dZnznrwOg9C86yvvA=="],
 
     "@tauri-apps/api": ["@tauri-apps/api@2.10.1", "", {}, "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw=="],
diff --git a/package.json b/package.json
index d16c90c59..b00937eea 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,14 @@
     "open-pencil": "bun packages/cli/src/index.ts"
   },
   "dependencies": {
+    "@open-pencil/cli": "workspace:*",
+    "@open-pencil/core": "workspace:*",
     "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/vue-table": "^8.21.3",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-fs": "^2.4.5",
     "@tauri-apps/plugin-opener": "^2",
-    "@open-pencil/cli": "workspace:*",
-    "@open-pencil/core": "workspace:*",
     "@vueuse/core": "^14.2.1",
     "canvaskit-wasm": "^0.40.0",
     "culori": "^4.0.2",
diff --git a/src/components/VariablesDialog.vue b/src/components/VariablesDialog.vue
index 769c07ab2..919a48fc1 100644
--- a/src/components/VariablesDialog.vue
+++ b/src/components/VariablesDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, h } from 'vue'
 import {
   DialogRoot,
   DialogPortal,
@@ -16,10 +16,11 @@ import {
   EditableInput,
   EditablePreview
 } from 'reka-ui'
+import { useVueTable, getCoreRowModel, FlexRender, type ColumnDef } from '@tanstack/vue-table'
 
-import { colorToHexRaw } from '@/engine/color'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 import { useEditorStore } from '@/stores/editor'
-import type { Variable, Color, VariableCollectionMode } from '@/engine/scene-graph'
+import type { Variable, Color } from '@/engine/scene-graph'
 
 const open = defineModel<boolean>('open', { default: false })
 const store = useEditorStore()
@@ -70,18 +71,6 @@ const variables = computed(() => {
   return all.filter((v) => v.name.toLowerCase().includes(q))
 })
 
-const groupedVariables = computed(() => {
-  const groups = new Map<string, Variable[]>()
-  for (const v of variables.value) {
-    const parts = v.name.split('/')
-    const group = parts.length > 1 ? parts.slice(0, -1).join('/') : ''
-    const arr = groups.get(group) ?? []
-    if (!groups.has(group)) groups.set(group, arr)
-    arr.push(v)
-  }
-  return groups
-})
-
 function formatModeValue(variable: Variable, modeId: string): string {
   const value = variable.valuesByMode[modeId]
   if (value === undefined) return '—'
@@ -124,13 +113,8 @@ function commitNameEdit(variable: Variable, newName: string) {
 
 function commitValueEdit(variable: Variable, modeId: string, newValue: string) {
   if (variable.type === 'COLOR') {
-    const hex = newValue.replace('#', '')
-    if (/^[0-9a-fA-F]{6}$/.test(hex)) {
-      const r = parseInt(hex.slice(0, 2), 16) / 255
-      const g = parseInt(hex.slice(2, 4), 16) / 255
-      const b = parseInt(hex.slice(4, 6), 16) / 255
-      variable.valuesByMode[modeId] = { r, g, b, a: 1 }
-    }
+    const color = parseColor(newValue.startsWith('#') ? newValue : `#${newValue}`)
+    variable.valuesByMode[modeId] = color
   } else if (variable.type === 'FLOAT') {
     const num = parseFloat(newValue)
     if (!isNaN(num)) variable.valuesByMode[modeId] = num
@@ -182,10 +166,131 @@ function removeVariable(id: string) {
   store.requestRender()
 }
 
-function modeColumnWidth(modes: VariableCollectionMode[]): string {
-  if (modes.length <= 1) return 'flex-1'
-  return `w-[${Math.floor(100 / modes.length)}%]`
-}
+const columns = computed<ColumnDef<Variable>[]>(() => {
+  const nameCol: ColumnDef<Variable> = {
+    id: 'name',
+    header: 'Name',
+    size: 200,
+    minSize: 120,
+    maxSize: 400,
+    cell: ({ row }) => {
+      const v = row.original
+      const iconClass = 'size-3.5 shrink-0 text-muted'
+      const icon =
+        v.type === 'COLOR'
+          ? h('span', { class: `${iconClass} icon-[lucide--circle-dot]` })
+          : v.type === 'FLOAT'
+            ? h('span', { class: `${iconClass} icon-[lucide--hash]` })
+            : v.type === 'STRING'
+              ? h('span', { class: `${iconClass} icon-[lucide--type]` })
+              : h('span', { class: `${iconClass} icon-[lucide--toggle-left]` })
+
+      return h('div', { class: 'flex items-center gap-2' }, [
+        icon,
+        h(
+          EditableRoot,
+          {
+            defaultValue: shortName(v),
+            class: 'min-w-0 flex-1',
+            onSubmit: (val: string) => commitNameEdit(v, val)
+          },
+          () =>
+            h(EditableArea, { class: 'flex' }, () => [
+              h(EditablePreview, {
+                class: 'min-w-0 flex-1 cursor-text truncate text-xs text-surface'
+              }),
+              h(EditableInput, {
+                class:
+                  'min-w-0 flex-1 rounded border border-border bg-surface/10 px-1 py-0.5 text-xs text-surface outline-none'
+              })
+            ])
+        )
+      ])
+    }
+  }
+
+  const modeCols: ColumnDef<Variable>[] = activeModes.value.map((mode) => ({
+    id: `mode-${mode.modeId}`,
+    header: mode.name,
+    size: 200,
+    minSize: 120,
+    maxSize: 500,
+    cell: ({ row }) => {
+      const v = row.original
+      const swatch = getModeSwatchColor(v, mode.modeId)
+      const children = []
+
+      if (swatch) {
+        children.push(
+          h('div', {
+            class: 'size-5 shrink-0 rounded border border-border',
+            style: { background: swatch }
+          })
+        )
+      }
+
+      children.push(
+        h(
+          EditableRoot,
+          {
+            defaultValue: formatModeValue(v, mode.modeId),
+            class: 'min-w-0 flex-1',
+            onSubmit: (val: string) => commitValueEdit(v, mode.modeId, val)
+          },
+          () =>
+            h(EditableArea, { class: 'flex' }, () => [
+              h(EditablePreview, {
+                class: 'min-w-0 flex-1 cursor-text truncate font-mono text-xs text-muted'
+              }),
+              h(EditableInput, {
+                class:
+                  'min-w-0 flex-1 rounded border border-border bg-surface/10 px-1 py-0.5 font-mono text-xs text-surface outline-none'
+              })
+            ])
+        )
+      )
+
+      return h('div', { class: 'flex items-center gap-2' }, children)
+    }
+  }))
+
+  const deleteCol: ColumnDef<Variable> = {
+    id: 'actions',
+    header: '',
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
+    enableResizing: false,
+    cell: ({ row }) =>
+      h(
+        'button',
+        {
+          class:
+            'flex size-5 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted opacity-0 transition-opacity group-hover:opacity-100 hover:text-surface',
+          onClick: () => removeVariable(row.original.id)
+        },
+        h('span', { class: 'icon-[lucide--x] size-3' })
+      )
+  }
+
+  return [nameCol, ...modeCols, deleteCol]
+})
+
+const table = useVueTable({
+  get data() {
+    return variables.value
+  },
+  get columns() {
+    return columns.value
+  },
+  columnResizeMode: 'onChange',
+  getCoreRowModel: getCoreRowModel(),
+  defaultColumn: {
+    minSize: 60,
+    maxSize: 800
+  },
+  getRowId: (row) => row.id
+})
 </script>
 
 <template>
@@ -196,7 +301,6 @@ function modeColumnWidth(modes: VariableCollectionMode[]): string {
         class="fixed left-1/2 top-1/2 z-50 flex h-[75vh] w-[800px] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border border-border bg-panel shadow-2xl outline-none"
       >
         <div v-if="collections.length === 0" class="flex flex-1 flex-col">
-          <!-- Header for empty state -->
           <div class="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
             <DialogTitle class="text-sm font-semibold text-surface">Local variables</DialogTitle>
             <DialogClose
@@ -220,7 +324,7 @@ function modeColumnWidth(modes: VariableCollectionMode[]): string {
 
         <template v-else>
           <TabsRoot v-model="activeTab" class="flex flex-1 flex-col overflow-hidden">
-            <!-- Top bar: collection tabs + search + actions -->
+            <!-- Top bar -->
             <div class="flex shrink-0 items-center border-b border-border">
               <TabsList class="flex flex-1 gap-0.5 overflow-x-auto px-3 py-1">
                 <template v-for="col in collections" :key="col.id">
@@ -275,106 +379,67 @@ function modeColumnWidth(modes: VariableCollectionMode[]): string {
               :value="col.id"
               class="flex flex-1 flex-col overflow-hidden outline-none"
             >
-              <!-- Column headers -->
-              <div class="flex shrink-0 border-b border-border text-[11px] font-medium text-muted">
-                <div class="w-[200px] shrink-0 px-4 py-2">Name</div>
-                <div
-                  v-for="mode in activeModes"
-                  :key="mode.modeId"
-                  class="flex-1 border-l border-border px-4 py-2"
+              <div class="flex-1 overflow-auto">
+                <table
+                  class="w-full border-collapse"
+                  :style="{ width: `${table.getCenterTotalSize()}px` }"
                 >
-                  {{ mode.name }}
-                </div>
-                <!-- Spacer for delete button column -->
-                <div class="w-8 shrink-0" />
-              </div>
-
-              <!-- Rows -->
-              <div class="flex-1 overflow-y-auto">
-                <template v-for="[group, vars] in groupedVariables" :key="group">
-                  <div
-                    v-if="group"
-                    class="border-b border-border/50 px-4 py-1.5 text-[10px] font-medium uppercase tracking-wider text-muted"
-                  >
-                    {{ group }}
-                  </div>
-                  <div
-                    v-for="v in vars"
-                    :key="v.id"
-                    class="group flex items-center border-b border-border/30 hover:bg-hover/50"
-                  >
-                    <!-- Name column -->
-                    <div class="flex w-[200px] shrink-0 items-center gap-2 px-4 py-2">
-                      <icon-lucide-circle-dot
-                        v-if="v.type === 'COLOR'"
-                        class="size-3.5 shrink-0 text-muted"
-                      />
-                      <icon-lucide-hash
-                        v-else-if="v.type === 'FLOAT'"
-                        class="size-3.5 shrink-0 text-muted"
-                      />
-                      <icon-lucide-type
-                        v-else-if="v.type === 'STRING'"
-                        class="size-3.5 shrink-0 text-muted"
-                      />
-                      <icon-lucide-toggle-left v-else class="size-3.5 shrink-0 text-muted" />
-                      <EditableRoot
-                        :default-value="shortName(v)"
-                        class="min-w-0 flex-1"
-                        @submit="commitNameEdit(v, $event)"
-                      >
-                        <EditableArea class="flex">
-                          <EditablePreview
-                            class="min-w-0 flex-1 cursor-text truncate text-xs text-surface"
-                          />
-                          <EditableInput
-                            class="min-w-0 flex-1 rounded border border-border bg-surface/10 px-1 py-0.5 text-xs text-surface outline-none"
-                          />
-                        </EditableArea>
-                      </EditableRoot>
-                    </div>
-
-                    <!-- Value columns (one per mode) -->
-                    <div
-                      v-for="mode in activeModes"
-                      :key="mode.modeId"
-                      class="flex flex-1 items-center gap-2 border-l border-border/30 px-4 py-2"
+                  <thead class="sticky top-0 z-10 bg-panel">
+                    <tr
+                      v-for="headerGroup in table.getHeaderGroups()"
+                      :key="headerGroup.id"
+                      class="border-b border-border"
                     >
-                      <div
-                        v-if="v.type === 'COLOR'"
-                        class="size-5 shrink-0 rounded border border-border"
-                        :style="{ background: getModeSwatchColor(v, mode.modeId) ?? '#000' }"
-                      />
-                      <EditableRoot
-                        :default-value="formatModeValue(v, mode.modeId)"
-                        class="min-w-0 flex-1"
-                        @submit="commitValueEdit(v, mode.modeId, $event)"
+                      <th
+                        v-for="header in headerGroup.headers"
+                        :key="header.id"
+                        class="relative px-4 py-2 text-left text-[11px] font-medium text-muted"
+                        :style="{ width: `${header.getSize()}px` }"
                       >
-                        <EditableArea class="flex">
-                          <EditablePreview
-                            class="min-w-0 flex-1 cursor-text truncate font-mono text-xs text-muted"
-                          />
-                          <EditableInput
-                            class="min-w-0 flex-1 rounded border border-border bg-surface/10 px-1 py-0.5 font-mono text-xs text-surface outline-none"
-                          />
-                        </EditableArea>
-                      </EditableRoot>
-                    </div>
-
-                    <!-- Delete -->
-                    <div class="flex w-8 shrink-0 items-center justify-center">
-                      <button
-                        class="flex size-5 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted opacity-0 transition-opacity group-hover:opacity-100 hover:text-surface"
-                        @click="removeVariable(v.id)"
+                        <FlexRender
+                          v-if="!header.isPlaceholder"
+                          :render="header.column.columnDef.header"
+                          :props="header.getContext()"
+                        />
+                        <!-- Resize handle -->
+                        <div
+                          v-if="header.column.getCanResize()"
+                          class="absolute top-0 right-0 h-full w-1 cursor-col-resize select-none touch-none"
+                          :class="
+                            header.column.getIsResizing()
+                              ? 'bg-accent'
+                              : 'bg-transparent hover:bg-border'
+                          "
+                          @mousedown="header.getResizeHandler()?.($event)"
+                          @touchstart="header.getResizeHandler()?.($event)"
+                          @dblclick="header.column.resetSize()"
+                        />
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="row in table.getRowModel().rows"
+                      :key="row.id"
+                      class="group border-b border-border/30 hover:bg-hover/50"
+                    >
+                      <td
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                        class="px-4 py-1.5"
+                        :style="{ width: `${cell.column.getSize()}px` }"
                       >
-                        <icon-lucide-x class="size-3" />
-                      </button>
-                    </div>
-                  </div>
-                </template>
+                        <FlexRender
+                          :render="cell.column.columnDef.cell"
+                          :props="cell.getContext()"
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
 
-              <!-- Footer: create variable -->
+              <!-- Footer -->
               <button
                 class="flex w-full shrink-0 cursor-pointer items-center gap-1.5 border-t border-border bg-transparent px-4 py-2 text-xs text-muted hover:bg-hover hover:text-surface"
                 @click="addVariable"