intable 0.0.6 → 0.0.8

package/package.json

@@ -1,51 +1,48 @@
 {
   "name": "intable",
-  "version": "0.0.6",
-  "license": "MIT",
+  "version": "0.0.8",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./theme/*": "./dist/theme/*",
-    "./*": {
-      "import": "./dist/*.js",
-      "types": "./dist/*.d.ts"
-    }
-  },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@solid-primitives/bounds": "^0.1.3",
-    "@solid-primitives/deep": "^0.3.3",
-    "@solid-primitives/event-listener": "^2.4.3",
-    "@solid-primitives/history": "^0.2.2",
-    "@solid-primitives/keyboard": "^1.3.3",
-    "@solid-primitives/media": "^2.3.3",
-    "@solid-primitives/memo": "^1.4.3",
-    "@solid-primitives/mutation-observer": "^1.2.2",
-    "@solid-primitives/pointer": "^0.3.3",
-    "@solid-primitives/props": "^3.2.2",
-    "@solid-primitives/resize-observer": "^2.1.3",
-    "@solid-primitives/scroll": "^2.1.3",
-    "@solid-primitives/storage": "^4.3.3",
-    "@solid-primitives/utils": "^6.3.2",
-    "@tanstack/solid-virtual": "^3.13.12",
+    "@solidjs/router": "^0.16.1",
     "es-toolkit": "^1.39.10",
-    "floating-ui-solid": "^1.0.63",
-    "solid-element": "^1.9.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "solid-js": "^1.9.9",
-    "tinykeys": "^3.0.0",
-    "uuid": "^13.0.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "@intable/vue": "^0.0.8",
+    "intable": "^0.0.8"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@iconify-json/lucide": "^1.2.63",
+    "@iconify-json/solar": "^1.2.4",
+    "@iconify-json/vscode-icons": "^1.2.29",
+    "@types/node": "^25.0.8",
+    "@unocss/transformer-directives": "^66.4.2",
+    "babel-plugin-solid-undestructure": "^1.1.0",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "sass": "^1.90.0",
+    "tinyglobby": "^0.2.15",
+    "typescript": "~5.8.3",
+    "undestructure-macros": "^0.0.1",
+    "unocss": "^66.6.7",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-icons": "^22.2.0",
+    "vite": "npm:rolldown-vite@7.1.12",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-pages": "^0.33.3",
+    "vite-plugin-solid": "^2.11.8",
+    "vue": "^3.5.24"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "devDependencies": {
-    "diff": "^8.0.2"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "node scripts/build.js",
+    "publish:lib": "pnpm build:lib && node scripts/publish.js",
+    "preview": "vite preview"
   }
 }

package/packages/intable/README.md

@@ -0,0 +1,379 @@
+---
+name: intable
+description: A high-performance, plugin-based Excel-like table component for SolidJS with virtual scroll, cell editing, validation, copy/paste, row grouping, tree data, column/row drag, merge cells, diff view, and multi-framework support (Vue, React).
+---
+
+# intable
+
+## 特征
+
+- 类似 Excel 的表格组件
+- 单元格多选、复制、粘贴
+- 单元格编辑、数据校验
+- 列宽、行高可调整
+- 列、行可拖拽
+- 虚拟滚动
+- 数据分组
+- 行展开
+- 树嵌套
+- 插件易扩展
+- 多框架支持（Vue、React）
+- 多 UI库支持（Antd、ElementPlus）
+
+## 快速开始
+
+<details>
+<summary>solid-js</summary>
+
+**安装**
+
+```sh
+pnpm add intable
+```
+
+**使用**
+
+```jsx
+import Intable from 'intable'
+
+const App = () => {
+  const columns = [
+    { id: 'name', name: '名称' },
+    { id: 'date', name: '日期' },
+    { id: 'address', name: '地址' },
+  ]
+
+  const data = [
+    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  ]
+
+  return <Intable data={data} columns={columns} />
+}
+```
+</details>
+
+<details>
+<summary>vue</summary>
+
+**安装**
+
+```sh
+pnpm add @intable/vue
+```
+
+**使用**
+
+```html
+<template>
+  <Intable :data="data" :columns="columns" />
+</template>
+
+<script setup>
+import Intable from '@intable/vue'
+
+const columns = [
+  { id: 'name', name: '名称' },
+  { id: 'date', name: '日期' },
+  { id: 'address', name: '地址' },
+]
+
+const data = [
+  { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+]
+</script>
+```
+</details>
+
+<details>
+<summary>react</summary>
+
+**安装**
+
+```sh
+pnpm add @intable/react
+```
+
+**使用**
+
+```jsx
+import Intable from '@intable/react'
+
+const App = () => {
+  const columns = [
+    { id: 'name', name: '名称' },
+    { id: 'date', name: '日期' },
+    { id: 'address', name: '地址' },
+  ]
+
+  const data = [
+    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  ]
+
+  return <Intable data={data} columns={columns} />
+}
+```
+</details>
+
+## Props
+
+| 属性名       | 描述         | 类型                            | 默认值  |
+| ------------ | ------------ | ------------------------------- | ------- |
+| data         | 数据         | any[]                           |         |
+| columns      | 展示列       | Column[]                        |         |
+| rowKey       | 行唯一键字段 | string                          | `'id'`  |
+| index        | 显示序号     | boolean                         | false   |
+| border       | 显示纵向边框 | boolean                         | false   |
+| stickyHeader | 表头吸顶     | boolean                         | false   |
+| size         | 尺寸         | `'large' \| 'default' \| 'small'` | —     |
+| plugins      | 插件列表     | Plugin[]                        | `[]`    |
+
+## Column
+
+| 属性名   | 描述                   | 类型                          |
+| -------- | ---------------------- | ----------------------------- |
+| id       | 字段名，对应数据 key   | string \| symbol              |
+| name     | 表头显示名称           | string                        |
+| width    | 列宽（px）             | number                        |
+| fixed    | 固定列                 | `'left' \| 'right'`           |
+| render   | 自定义渲染器           | `string \| Render`            |
+| enum     | 枚举映射（用于渲染）   | `Record<string,any> \| {label?,value}[]` |
+| editable | 是否可编辑             | boolean                       |
+| editor   | 编辑器类型或自定义实现 | `string \| Editor`            |
+| resizable| 是否允许调整列宽       | boolean                       |
+
+## 插件
+
+插件通过 `plugins` 属性传入，部分插件需从对应路径手动引入。
+
+---
+
+### VirtualScrollPlugin — 虚拟滚动
+
+大数据量下只渲染可见行列，显著提升性能。
+
+```jsx
+import { VirtualScrollPlugin } from 'intable/plugins/VirtualScrollPlugin'
+
+<Intable
+  plugins={[VirtualScrollPlugin]}
+  virtual={{
+    y: { estimateSize: () => 40, overscan: 10 },  // 行虚拟化参数
+    x: { overscan: 5 },                           // 列虚拟化参数
+  }}
+/>
+```
+
+---
+
+### EditablePlugin — 单元格编辑
+
+在 Column 上设置 `editable: true` 开启单元格编辑，双击或输入字符进入编辑状态。
+
+```jsx
+const columns = [
+  { id: 'name', name: '姓名', editable: true },
+  { id: 'age',  name: '年龄', editable: true, editor: 'number' },
+  { id: 'type', name: '类型', editable: true, editor: 'select', enum: { 1: 'A', 2: 'B' } },
+  { id: 'date', name: '日期', editable: true, editor: 'date' },
+]
+
+<Intable columns={columns} onDataChange={setData} />
+```
+
+内置编辑器类型：`text`（默认）、`number`、`select`、`date`、`time`、`datetime`、`switch`、`checkbox`、`rate`、`color`、`file`。
+
+搭配 UI 库插件可直接使用对应组件：
+- **Antd**：`import { AntdPlugin } from '@intable/react/plugins/antd'`
+- **Element Plus**：`import { ElementPlusPlugin } from '@intable/vue/plugins/element-plus'`
+
+---
+
+### RowSelectionPlugin — 行选择
+
+```jsx
+<Intable
+  rowSelection={{
+    enable: true,
+    multiple: true,              // 多选，默认 true
+    value: selectedRows,         // 受控选中值
+    selectable: row => row.age > 18,  // 可选条件
+    onChange: rows => setSelected(rows),
+  }}
+/>
+```
+
+---
+
+### ExpandPlugin — 行展开
+
+点击行首箭头展开自定义内容区域。
+
+```jsx
+<Intable
+  expand={{
+    enable: true,
+    render: ({ data, y }) => <div>详情：{data.name}</div>,
+  }}
+/>
+```
+
+---
+
+### RowGroupPlugin — 行分组
+
+按指定字段对行进行分级树形分组，支持展开/折叠。
+
+```jsx
+<Intable
+  rowGroup={{ fields: ['type', 'subType'] }}
+/>
+```
+
+---
+
+### TreePlugin — 树形数据
+
+渲染嵌套 `children` 字段的树状数据，支持展开/折叠，自动缩进。
+
+```jsx
+const data = [
+  { id: 1, name: '总部', children: [
+    { id: 2, name: '研发部' },
+    { id: 3, name: '产品部', children: [
+      { id: 4, name: '设计组' },
+    ]},
+  ]},
+]
+
+<Intable
+  tree={{ children: 'children' }}  // 子节点字段名，默认 'children'
+  data={data}
+  columns={[{ id: 'name', name: '名称' }]}
+/>
+```
+
+---
+
+### ResizePlugin — 调整列宽 / 行高
+
+拖动表头右侧边框调整列宽，拖动行底部边框调整行高。
+
+```jsx
+<Intable
+  resizable={{
+    col: { enable: true, min: 60, max: 600 },
+    row: { enable: true, min: 28, max: 200 },
+  }}
+  onColumnsChange={cols => setColumns(cols)}
+/>
+```
+
+也可在单列上单独控制：
+
+```js
+{ id: 'name', name: '姓名', resizable: false }  // 禁止该列拖拽
+```
+
+---
+
+### DragPlugin — 列 / 行拖拽排序
+
+长按后拖拽列标题或行首单元格可重新排序。
+
+```jsx
+<Intable
+  colDrag={true}  // 开启列拖拽
+  rowDrag={true}  // 开启行拖拽
+  onColumnsChange={cols => setColumns(cols)}
+/>
+```
+
+---
+
+### HistoryPlugin — 撤销 / 重做
+
+记录数据变更历史，支持 `Ctrl+Z` / `Ctrl+Y`。
+
+```jsx
+import { HistoryPlugin } from 'intable/plugins/HistoryPlugin'
+
+<Intable plugins={[HistoryPlugin]} />
+```
+
+通过命令调用：
+```js
+store.history.undo()
+store.history.redo()
+```
+
+---
+
+### DiffPlugin — 数据差异对比
+
+将当前数据与快照进行比较，高亮新增/删除/修改行，支持提交。
+
+```jsx
+import { DiffPlugin } from 'intable/plugins/DiffPlugin'
+
+<Intable
+  plugins={[DiffPlugin]}
+  diff={{
+    added: true,    // 高亮新增行，默认 true
+    removed: true,  // 高亮删除行，默认 true
+    changed: true,  // 高亮修改行，默认 true
+    onCommit: (data, { added, removed, changed }) => save(data),
+  }}
+/>
+```
+
+`Ctrl+S` 触发提交，或通过命令：
+```js
+store.commands.diffCommit()
+```
+
+---
+
+### CellMergePlugin — 单元格合并
+
+通过 `merge` 回调或 Column 的 `mergeRow` 快捷属性合并相邻单元格。
+
+```jsx
+// 方式一：全局 merge 回调
+<Intable
+  merge={(row, col, y, x) => {
+    if (col.id === 'name') {
+      let rowspan = 1
+      while (data[y + rowspan]?.name === row.name) rowspan++
+      return rowspan > 1 ? { rowspan } : null
+    }
+  }}
+/>
+
+// 方式二：列级 mergeRow 快捷属性（自动合并相邻等值行）
+const columns = [
+  { id: 'type', name: '类型', mergeRow: true },
+  { id: 'name', name: '名称' },
+]
+<Intable columns={columns} />
+```
+
+---
+
+### CellSelectionPlugin — 单元格多选
+
+鼠标拖拽或 `Shift+点击` 选择矩形区域，箭头键移动焦点。
+
+---
+
+### CopyPastePlugin — 复制粘贴
+
+`Ctrl+C` 复制选中区域为 TSV 格式，`Ctrl+V` 粘贴。

package/packages/intable/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "intable",
+  "version": "0.0.8",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme/*": "./dist/theme/*",
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@solid-primitives/bounds": "^0.1.3",
+    "@solid-primitives/deep": "^0.3.3",
+    "@solid-primitives/event-listener": "^2.4.3",
+    "@solid-primitives/history": "^0.2.2",
+    "@solid-primitives/keyboard": "^1.3.3",
+    "@solid-primitives/media": "^2.3.3",
+    "@solid-primitives/memo": "^1.4.3",
+    "@solid-primitives/mutation-observer": "^1.2.2",
+    "@solid-primitives/pointer": "^0.3.3",
+    "@solid-primitives/props": "^3.2.2",
+    "@solid-primitives/resize-observer": "^2.1.3",
+    "@solid-primitives/scroll": "^2.1.3",
+    "@solid-primitives/storage": "^4.3.3",
+    "@solid-primitives/utils": "^6.3.2",
+    "@tanstack/solid-virtual": "^3.13.12",
+    "es-toolkit": "^1.39.10",
+    "floating-ui-solid": "^1.0.63",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.9",
+    "tinykeys": "^3.0.0",
+    "uuid": "^13.0.0",
+    "zod": "^4.3.6"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "diff": "^8.0.2"
+  }
+}

package/packages/intable/src/assets/ClearFormat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m14.031 1.888l9.657 9.657l-8.345 8.345l-.27.272H20v2H6.748L.253 15.667zm.322 16.164l6.507-6.507l-6.829-6.828l-6.828 6.828l6.828 6.828l.32-.323zM5.788 12.96l-2.707 2.707l4.495 4.495h4.68l.365-.37z" />
+</svg>

package/packages/intable/src/assets/Forms.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M12 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3m7-14h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7M5 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1m12-5h.01M13 12h.01" />
+</svg>

package/packages/intable/src/assets/MergeCell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z" />
+</svg>

package/packages/intable/src/assets/SplitCell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z" />
+</svg>

package/packages/intable/src/assets/gap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M19 5h-4v14h4v-2h-2V7h2zM5 5h4v14H5v-2h2V7H5zm8 2v10h-2V7z" />
+</svg>

package/packages/intable/src/assets/loading.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g>
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
+    <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+  </g>
+</svg>

package/packages/intable/src/assets/paint.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+    color="currentColor">
+    <path
+      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.842 0 2 .116 2-1c0-.609-.317-1.079-.631-1.546c-.46-.683-.917-1.359-.369-2.454c.667-1.333 1.778-1.333 3.482-1.333c.851 0 1.851 0 3.018-.167c2.101-.3 2.5-1.592 2.5-3.5M7 15.002L7.009 15" />
+    <circle cx="9.5" cy="8.5" r="1.5" />
+    <circle cx="16.5" cy="9.5" r="1.5" />
+  </g>
+</svg>

package/packages/intable/src/assets/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

package/packages/intable/src/components/Columns.tsx

@@ -0,0 +1,86 @@
+import { createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from 'solid-js'
+import { render } from 'solid-js/web'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
+import { createElementBounds } from '@solid-primitives/bounds'
+import { clamp, sum } from 'es-toolkit'
+import { usePointerDrag } from '../hooks'
+
+export const Columns = (attrs: Partial<{ gap: number }>) => {
+  const [_, props] = splitProps(mergeProps({ gap: 0 }, attrs), ['children'])
+
+  let ref!: HTMLElement
+
+  const [children, setChildren] = createSignal<HTMLElement[]>([])
+  const cols = createMemo(() => children().length)
+  
+  const update = () => setChildren([...ref!.querySelectorAll('& > [tiptap-is="column"]')])
+  onMount(() => update())
+  createMutationObserver(() => ref, { childList: true }, () => {
+    update()
+    container.parentElement || ref.insertBefore(container, ref.firstChild)
+  })
+
+  const container = <div style='position: absolute; z-index: 1' /> as HTMLElement
+  const bounds2 = createElementBounds(() => container, { trackScroll: false })
+  createEffect(() => {
+    ref.insertBefore(container, ref.firstChild)
+    onCleanup(() => container.remove())
+  })
+
+  createEffect(() => {
+    children().forEach((el, i) => {
+      if (i == children().length - 1) return
+      const dispose = render(() => <Hand index={i} gap={props.gap} reference={el} bounds2={bounds2} onAdd={props.onAdd} />, container)
+      onCleanup(dispose)
+    })
+    const cw = ref.offsetWidth
+    const tgap = (cols() - 1) * props.gap
+    const meanw = (cw - tgap) / cols()
+    children().forEach(el => el.style.width ||= `${meanw}px`)
+    const ws = children().map(el => el.offsetWidth)
+    const sumw = sum(ws) + tgap
+    const sgap =  tgap / cols()
+    children().forEach((el, i) => el.style.width = `calc(${(ws[i] + sgap) / sumw * 100}% - ${sgap}px)`)
+  })
+  
+  return (
+    <div ref={ref} style={`display: flex; gap: ${props.gap}px;`} {...props} cols={cols()}>
+      {attrs.children}
+    </div>
+  )
+}
+
+const Hand = (props) => {
+  const bounds = createElementBounds(props.reference, { trackScroll: false })
+  
+  const style = createMemo(() => (`
+    position: absolute;
+    width: ${props.gap}px;
+    height: ${bounds.height}px;
+    transform: translate(${bounds.right - props.bounds2.left}px, ${bounds.top - props.bounds2.top}px);
+  `))
+
+  let el: HTMLElement
+  usePointerDrag(() => el, {
+    start(e, move) {
+      const col = props.reference!
+      const container = col.parentElement!, cw = container.offsetWidth
+      const [cols, gap] = [+container.getAttribute('cols')!, +container.getAttribute('gap')!]
+      const [left, right] = [col, col.nextElementSibling as HTMLElement]
+      const [lw, rw] = [left?.offsetWidth || 0, right?.offsetWidth || 0]
+      const minw = cw * .05, maxw = lw + rw - minw
+      const sgap = (cols - 1) * gap / cols
+
+      move((e, { ox }) => {
+        left && (left.style.width = `calc(${(clamp(lw + ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
+        right && (right.style.width = `calc(${(clamp(rw - ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
+      })
+    },
+  })
+  
+  return (
+    <div ref={el} ref={props.ref} class='col-hand' style={style()} contenteditable='false'>
+      {props.onAdd && <div class='dot' onClick={() => props.onAdd(props.index)} on:pointerdown={{ handleEvent: e => e.stopPropagation() }} />}
+    </div>
+  )
+}