intable 0.0.6 → 0.0.7

package/packages/intable/src/plugins/TreePlugin.tsx

@@ -0,0 +1,212 @@
+import { useContext } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { type Plugin, type Plugin$0, Ctx } from '../index'
+import { useSelector } from '../hooks/useSelector'
+import { createLazyMemo } from '@solid-primitives/memo'
+
+// ------------------------------------------------------------
+// Module augmentation
+// ------------------------------------------------------------
+
+declare module '../index' {
+  interface TableProps {
+    tree?: {
+      /** Field name that holds children rows. Default: `'children'`. */
+      children?: string
+    }
+  }
+  interface TableStore {
+    tree: ReturnType<typeof useSelector<any[]>>
+    /**
+     * Lookup map populated as a side-effect of the `data` rewriteProp.
+     * Maps each row's rowKey → its tree metadata.
+     * Written via createMutable so reads are reactive.
+     */
+    _treeMeta: Map<any, { depth: number; hasChildren: boolean; parentKey: any }>
+  }
+}
+
+// ------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------
+
+interface FlattenResult {
+  flat: any[]
+  meta: Map<any, { depth: number; hasChildren: boolean; parentKey: any }>
+}
+
+function flattenTree(
+  rows: any[],
+  childrenField: string,
+  rowKeyField: string,
+  isExpand: (key: any) => boolean,
+  depth = 0,
+  parentKey: any = null,
+  flat: any[] = [],
+  meta: Map<any, { depth: number; hasChildren: boolean; parentKey: any }> = new Map(),
+): FlattenResult {
+  for (const row of rows || []) {
+    const key = row[rowKeyField]
+    const children: any[] = row[childrenField]
+    const hasChildren = Array.isArray(children) && children.length > 0
+    meta.set(key, { depth, hasChildren, parentKey })
+    flat.push(row)
+    if (hasChildren && isExpand(key)) {
+      flattenTree(children, childrenField, rowKeyField, isExpand, depth + 1, key, flat, meta)
+    }
+  }
+  return { flat, meta }
+}
+
+// ------------------------------------------------------------
+// Plugin
+// ------------------------------------------------------------
+
+export const TreePlugin: Plugin$0 = store => {
+  const firstCol = createLazyMemo(() => store.props.columns?.findIndex(e => !e[store.internal]) ?? -1)
+  
+  return {
+    name: 'tree',
+
+    store: (store) => ({
+      tree: useSelector({ multiple: true }),
+      _treeMeta: new Map(),
+    }),
+
+    rewriteProps: {
+      tree: ({ tree }) => ({
+        children: 'children',
+        ...tree,
+      }),
+      
+      /**
+       * Flatten nested `children` arrays into a single display list.
+       * Simultaneously populates `store._treeMeta` (depth, hasChildren, parentKey)
+       * so that `Td` can read tree metadata without a second traversal.
+       */
+      data: ({ data }, { store }) => {
+        if (!store.props?.tree) return data
+
+        const childrenField = store.props.tree.children || 'children'
+        const rowKeyField = store.props.rowKey
+
+        const { flat, meta } = flattenTree(
+          data,
+          childrenField,
+          rowKeyField,
+          (key) => store.tree.has(key),
+        )
+
+        // Reactive write: any context reading store._treeMeta will re-run
+        store._treeMeta = meta
+
+        return flat
+      },
+
+      /**
+       * Render the first non-internal column with indentation and an
+       * expand / collapse chevron for rows that have children.
+       */
+      Td: ({ Td }, { store }) => o => {
+        const rowKey = () => store.props.rowKey
+        const meta = () => store._treeMeta?.get(o.data?.[rowKey()])
+
+        o = combineProps(o, {
+          onDblClick() {
+            meta()?.hasChildren && store.tree.toggle(o.data?.[rowKey()])
+          },
+        })
+        
+        return (
+          <Td {...o}>
+            {/* todo */}
+            {o.x === firstCol() ? (
+              <div class='flex items-center' style={`padding-left: ${meta()?.depth! * 16}px`}>
+              {meta()?.hasChildren ? (
+                <ILucideChevronRight
+                  class='icon-clickable mr-1'
+                  style={`transform: rotate(${store.tree.has(o.data?.[rowKey()]) ? 90 : 0}deg); opacity: .6; flex-shrink: 0; transition: transform .15s`}
+                  onClick={(e: MouseEvent) => { e.stopPropagation(); store.tree.toggle(o.data?.[rowKey()]) }}
+                />
+              ) : (
+                // Spacer keeps text aligned with sibling rows that do have an icon
+                <span style='display: inline-block; width: 16px; flex-shrink: 0; margin-right: 4px' />
+              )}
+              {o.children}
+            </div>
+            ) : (
+              o.children
+            )}
+          </Td>
+        )
+      },
+    },
+
+    commands: (store, { addRows }) => ({
+      // add to parent children array if adding inside an expanded group, otherwise add to root
+      addRows(i, rows, before = true) {
+        if (!store.props?.tree) return addRows?.(i, rows, before)
+
+        const { data: flatData, rowKey } = store.props!
+        const childrenField = store.props.tree.children || 'children'
+
+        // Skip internal rows – find the nearest real anchor (same logic as base addRows)
+        let anchor = flatData[i]
+        if (anchor?.[store.internal]) {
+          let p: any = null, n: any = null
+          for (let j = i - 1; j >= 0; j--) { if (!flatData[j]?.[store.internal]) { p = flatData[j]; break } }
+          for (let j = i + 1; j < flatData.length; j++) { if (!flatData[j]?.[store.internal]) { n = flatData[j]; break } }
+          anchor = before ? (p || n) : (n || p)
+        }
+
+        // No anchor or anchor is at root depth → delegate to base addRows untouched
+        if (!anchor) return addRows?.(i, rows, before)
+        const anchorKey = anchor[rowKey]
+        const meta = store._treeMeta?.get(anchorKey)
+        if (!meta || meta.depth === 0) return addRows?.(i, rows, before)
+
+        const parentKey = meta.parentKey
+
+        // Update cell selection to point at the inserted rows
+        const anchorFlatIdx = flatData.findIndex((r: any) => r[rowKey] === anchorKey)
+        if (anchorFlatIdx >= 0 && store.selected) {
+          const insertAt = anchorFlatIdx + (before ? 0 : 1)
+          store.selected.start = [0, insertAt]
+          store.selected.end = [Infinity, insertAt + rows.length - 1]
+        }
+
+        // Splice into the parent's children array (immutably clone up to the splice point)
+        const rawData = [...(store.rawProps.data || [])]
+
+        function insertInto(nodes: any[]): boolean {
+          for (let j = 0; j < nodes.length; j++) {
+            const node = nodes[j]
+            if (node[rowKey] === parentKey) {
+              const children = [...(node[childrenField] || [])]
+              const childIdx = children.findIndex((c: any) => c[rowKey] === anchorKey)
+              const at = childIdx >= 0 ? childIdx + (before ? 0 : 1) : children.length
+              children.splice(at, 0, ...rows)
+              nodes[j] = { ...node, [childrenField]: children }
+              return true
+            }
+            if (Array.isArray(node[childrenField]) && node[childrenField].length) {
+              const childrenCopy = [...node[childrenField]]
+              if (insertInto(childrenCopy)) {
+                nodes[j] = { ...node, [childrenField]: childrenCopy }
+                return true
+              }
+            }
+          }
+          return false
+        }
+
+        insertInto(rawData)
+
+        // Ensure the parent branch is expanded so the new row is visible
+        if (!store.tree.has(parentKey)) store.tree.toggle(parentKey)
+
+        store.props?.onDataChange?.(rawData)
+      },
+    }),
+  }
+}

package/packages/intable/src/plugins/VirtualScrollPlugin.tsx

@@ -0,0 +1,190 @@
+import { createEffect, createMemo, useContext, mergeProps } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { defaultRangeExtractor } from '@tanstack/solid-virtual'
+import { defaultsDeep } from 'es-toolkit/compat'
+import { useVirtualizer } from '../hooks/useVirtualizer'
+import { RecycleList } from '../components/RecycleList'
+import { Ctx, type Plugin } from '..'
+
+const $ML = Symbol()
+
+declare module '../index' {
+  interface TableProps {
+    virtual?: {
+      x?: Partial<Parameters<typeof useVirtualizer>[0]>
+      y?: Partial<Parameters<typeof useVirtualizer>[0]>
+    }
+  }
+  interface TableStore {
+    // virtualizerY: Virtualizer<HTMLElement, Element>
+    // virtualizerX: Virtualizer<HTMLElement, Element>
+    virtualizerY: ReturnType<typeof useVirtualizer>
+    virtualizerX: ReturnType<typeof useVirtualizer>
+  }
+}
+
+export const VirtualScrollPlugin: Plugin = {
+  name: 'virtual-scroll',
+  rewriteProps: {
+    virtual: ({ virtual }) => defaultsDeep(virtual, {
+      x: { overscan: 5 },
+      y: { overscan: 10 },
+      // x: { batch: 3, overscan: 2 },
+      // y: { batch: 5, overscan: 5 },
+    }),
+    Table: ({ Table }, { store }) => (o) => {
+      let el: HTMLElement
+
+      const { props } = useContext(Ctx)
+      
+      const virtualizerY = useVirtualizer(mergeProps(() => props.virtual?.y, {
+        getScrollElement: () => el,
+        get count() { return props.data?.length || 0 },
+        estimateSize: () => 32,
+        indexAttribute: 'y',
+        extras: (yStart, yEnd) => {
+          const mergeMap = store._mergeMap?.()
+          if (!mergeMap?.spans.size) return []
+          const vx = store.virtualizerX
+          const xStart = vx ? vx.startIdx() : 0
+          const xEnd = vx ? vx.endIdx() : Infinity
+          const extras: number[] = []
+          for (const [key, span] of mergeMap.spans) {
+            if (span.rowspan <= 1) continue
+            const [ay, ax] = key.split(',').map(Number)
+            if (ay > yEnd || ay + span.rowspan - 1 < yStart) continue
+            if (ax > xEnd || ax + span.colspan - 1 < xStart) continue
+            for (let dy = 0; dy < span.rowspan; dy++) extras.push(ay + dy)
+          }
+          return extras
+        },
+      }))
+
+      const virtualizerX = useVirtualizer(mergeProps(() => props.virtual?.x, {
+        horizontal: true,
+        getScrollElement: () => el,
+        get count() { return props.columns?.length || 0 },
+        estimateSize: i => props.columns?.[i].width ?? 40,
+        indexAttribute: 'x',
+        rangeExtractor(range) {
+          return [
+            ...new Set([
+              ...props.columns?.map((e, i) => e.fixed ? i : void 0).filter(e => e != null) || [],
+              ...defaultRangeExtractor(range)
+            ])
+          ]
+        },
+        extras: (xStart, xEnd) => {
+          const fixed = props.columns?.map((e, i) => e.fixed ? i : void 0).filter(e => e != null) || []
+          const headerAnchors = store._headerGroupAnchors?.(xStart, xEnd) || []
+          const base = new Set<number>([...fixed, ...headerAnchors])
+          const mergeMap = store._mergeMap?.()
+          if (!mergeMap?.spans.size) return [...base]
+          const yStart = virtualizerY.startIdx(), yEnd = virtualizerY.endIdx()
+          for (const [key, span] of mergeMap.spans) {
+            if (span.colspan <= 1) continue
+            const [ay, ax] = key.split(',').map(Number)
+            if (ay > yEnd || ay + span.rowspan - 1 < yStart) continue
+            if (ax > xEnd || ax + span.colspan - 1 < xStart) continue
+            for (let dx = 0; dx < span.colspan; dx++) base.add(ax + dx)
+          }
+          return [...base]
+        },
+      }))
+
+      store.virtualizerY = virtualizerY
+      store.virtualizerX = virtualizerX
+
+      store[$ML] = createMemo(() => {
+        const items = store.virtualizerX.getVirtualItems()
+        const ret = {}
+        for (let i = 1; i < items.length; i++) {
+          const item = items[i], prev = items[i - 1]
+          if (item.index - prev.index > 1) ret[item.index] = { item, offset: item.start - prev.end }
+        }
+        return ret
+      })
+
+      o = combineProps({ ref: e => el = e, class: 'virtual' }, o)
+
+      createEffect(() => {
+        const { table } = store
+        table.style.width = store.virtualizerX.getTotalSize() + 'px'
+        table.style.height = store.virtualizerY.getTotalSize() + (store.thead?.offsetHeight || 0) + 'px'
+      })
+
+      return <Table {...o} />
+    },
+    Thead: ({ Thead }, { store }) => o => {
+      o = combineProps(({
+        get style() { return `transform: translate(${store.virtualizerX.getVirtualItems()[0]?.start}px, ${0}px);` }
+      }), o)
+      return <Thead {...o} />
+    },
+    Tbody: ({ Tbody }, { store }) => o => {
+      o = combineProps({
+        get style() { return `transform: translate(${store.virtualizerX.getVirtualItems()[0]?.start}px, ${store.virtualizerY.getVirtualItems()[0]?.start}px)` }
+      }, o)
+      return <Tbody {...o} />
+    },
+    Tr: ({ Tr }, { store }) => (o) => {
+      createEffect(() => o.y != null && store.trSizes[o.y] && store.virtualizerY.resizeItem(o.y!, store.trSizes[o.y!]!.height))
+      return <Tr {...o} />
+    },
+    Td: ({ Td }, { store }) => (o) => {
+      const ml = createMemo(() => store[$ML]()[o.x])
+      const mo = combineProps({ get style() {
+        const cs = o.colspan ?? 1
+        const w = cs > 1
+          ? Array.from({ length: cs }, (_, dx) => store.props.columns?.[o.x + dx]?.width ?? 80).reduce((a, b) => a + b, 0)
+          : (o.col.width || 80)
+        return `width: ${w}px; margin-left: ${o.col.fixed ? 0 : ml()?.offset ?? 0}px`
+      } }, o)
+      return <Td {...mo} />
+    },
+    Th: ({ Th }, { store }) => (o) => {
+      // Only resize the virtualizer for single-column cells; colspan cells would report
+      // their combined width which shouldn't override individual column sizes.
+      createEffect(() => (o.colspan ?? 1) === 1 && store.thSizes[o.x] && store.virtualizerX.resizeItem(o.x, store.thSizes[o.x]!.width))
+      const ml = createMemo(() => store[$ML]?.()[o.x])
+      const mo = combineProps({ get style() {
+        const cs = o.colspan ?? 1
+        const w = cs > 1
+          ? Array.from({ length: cs }, (_, dx) => store.props.columns?.[o.x + dx]?.width ?? 80).reduce((a, b) => a + b, 0)
+          : (o.col.width || 80)
+        return `width: ${w}px; margin-left: ${o.col.fixed ? 0 : ml()?.offset ?? 0}px`
+      } }, o)
+      return <Th {...mo} />
+    },
+    
+    EachRows: ({ EachRows }, { store }) => (o) => {
+      // use recycle-list
+      EachRows = RecycleList
+      const list = createMemo(() => store.virtualizerY.getVirtualItems().map(e => o.each[e.index]))
+      return (
+        <EachRows {...o} each={list()}>
+          {(e, i) => {
+            return o.children(e, createMemo(() => store.virtualizerY.getVirtualItems()[i()]?.index))
+          }}
+        </EachRows>
+      )
+    },
+    EachCells: ({ EachCells }, { store }) => (o) => {
+      // use recycle-list
+      EachCells = RecycleList
+      // Skip X virtualization when the array doesn't match the column virtualizer count
+      // (e.g. header group rows have fewer entries than leaf columns)
+      if (o.each?.length !== store.virtualizerX?.options?.count) {
+        return <EachCells {...o} />
+      }
+      const list = createMemo(() => store.virtualizerX.getVirtualItems().map(e => o.each[e.index]))
+      return (
+        <EachCells {...o} each={list()}>
+          {(e, i) => {
+            return o.children(e, createMemo(() => store.virtualizerX.getVirtualItems()[i()]?.index))
+          }}
+        </EachCells>
+      )
+    },
+  }
+}

package/packages/intable/src/plugins/ZodValidatorPlugin.tsx

@@ -0,0 +1,61 @@
+import type { ZodType } from 'zod'
+import type { Plugin, TableColumn } from '..'
+
+declare module '../index' {
+  interface TableColumn {
+    /**
+     * Zod schema to validate the edited value for this column.
+     *
+     * ```ts
+     * { id: 'age', zodSchema: z.number().int().min(0).max(150) }
+     * ```
+     */
+    zodSchema?: ZodType<any, any, any>
+  }
+}
+
+/**
+ * ZodValidatorPlugin — three-level validation pipeline for editable cells.
+ *
+ * Validation runs in order; the first failure short-circuits the rest:
+ * 1. `col.zodSchema` — Zod schema declared on the column
+ * 2. `col.validator` — per-column custom validator function
+ * 3. `props.validator` — table-level validator (passed as a prop to `<Intable>`)
+ *
+ * ```tsx
+ * const cols = [
+ *   {
+ *     id: 'email',
+ *     zodSchema: z.string().email('Invalid email'),
+ *     validator: async (value) => {
+ *       const taken = await checkEmailTaken(value)
+ *       return taken ? 'Email already in use' : true
+ *     },
+ *   },
+ *   { id: 'age', zodSchema: z.coerce.number().int().min(0).max(150) },
+ * ]
+ * <Intable columns={cols} plugins={[ZodValidatorPlugin]} />
+ * ```
+ */
+export const ZodValidatorPlugin: Plugin = {
+  name: 'zod-validator',
+  rewriteProps: {
+    validator: ({ validator }) => async (value, data, col: TableColumn) => {
+      // 1. Zod schema on the column
+      const schema = col.zodSchema
+      if (schema) {
+        const result = schema.safeParse(value)
+        if (!result.success) {
+          return result.error.issues[0]?.message ?? false
+        }
+      }
+
+      // 2. Table-level validator
+      if (validator) {
+        return validator(value, data, col)
+      }
+
+      return true
+    },
+  },
+}

package/packages/intable/src/style.scss

@@ -0,0 +1,244 @@
+.data-table {
+  --bg: #fff;
+  --c-primary: #51a2ff;
+  
+  --menu-bg: #fff;
+  --li-hover-bg: rgb(153, 161, 175, .2);
+  
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #ebeef5;
+  --table-c: #606266;
+  --table-bg: #fff;
+
+  --table-header-c: #909399;
+  --table-header-bg: var(--table-bg);
+  
+  --table-row-hover-bg: #f5f7fa;
+  
+  --select-area-bg: #5292f71a;
+  
+
+  @apply relative text-[14px] c-[--table-c] b-[--table-b-c];
+
+  &--table {
+    @apply table-fixed w-max border-collapse b-0 outline-0 c-[--table-c];
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  thead {
+    @apply c-[--table-header-c];
+  }
+
+  tr:hover {
+    & > td {
+      @apply bg-[--table-row-hover-bg];
+    }
+  }
+
+  th {
+    @apply bg-[--table-header-bg];
+  }
+
+  td {
+    @apply bg-[--table-bg];
+  }
+
+  td, th {
+    @apply px-2 py-.5 outline-0 b-(0 solid [--table-b-c]) b-b-0 box-border v-mid;
+    text-align: inherit;
+      background-image: linear-gradient(var(--table-b-c), var(--table-b-c));
+      background-repeat: no-repeat;
+      background-size: 100% 1px, 1px 100%;
+      background-position: 100% 100%, 100% 0;
+  }
+
+  td:empty::after {
+    content: 'ㅤ' !important;
+  }
+
+  &--border {
+    @apply b-1;
+
+    th, td {
+      background-image: linear-gradient(var(--table-b-c), var(--table-b-c)), linear-gradient(var(--table-b-c), var(--table-b-c));
+    }
+  }
+
+  &--scroll-view {
+    @apply of-auto;
+  }
+
+  &__layers {
+    @apply pointer-events-none absolute left-0 top-0 [&>*]:absolute z-1;
+  }
+}
+
+.range-selected {
+  @apply relative;
+  & > .area {
+    @apply absolute inset-0 bg-[--select-area-bg] b-(0px solid [--c-primary]) pointer-events-none;
+  }
+
+  &-l > .area { @apply b-l-1.5px }
+  &-r > .area { @apply b-r-1.5px }
+  &-t > .area { @apply b-t-1.5px }
+  &-b > .area { @apply b-b-1.5px }
+}
+
+.row-range-highlight, .col-range-highlight {
+  @apply relative;
+  & > .area {
+    @apply absolute inset-0 bg-[--c-primary]/10 b-(0 solid [--c-primary]) pointer-events-none;
+  }
+}
+
+.row-range-highlight.index > .area {
+  @apply b-r-1;
+}
+
+.col-range-highlight > .area {
+  @apply b-b-1;
+}
+
+.sticky-header {
+  @apply sticky top-0 bg-#fff z-9;
+  &::after {
+    @apply content-[''] absolute top-full w-full h-[10px] pointer-events-none;
+    box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .15);
+  }
+}
+
+.fixed-left, .fixed-right {
+  @apply sticky! z-1 bg-#fff;
+  &.is-first::after, &.is-last::after {
+    @apply content-[''] absolute top-0 w-[10px] h-full pointer-events-none;
+  }
+}
+
+.is-scroll-right, .is-scroll-mid {
+  .fixed-left.is-last::after {
+    @apply left-full;
+    box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .15);
+  }
+}
+
+.is-scroll-left, .is-scroll-mid {
+  .fixed-right.is-first::after {
+    @apply right-full;
+    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, .15);
+  }
+}
+
+.copied .range-selected {
+  & > .area { border-style: dashed; }
+}
+
+// 
+.data-table.virtual {
+  @apply block of-auto;
+
+  thead { @apply block w-fit [&>tr]-(flex) [&>tr>th]-(block flex-[0_0_auto]); }
+  tbody { @apply block w-fit [&>tr]-(flex) [&>tr>td]-(block flex-[0_0_auto]); }
+}
+
+.row-selection {
+  @apply relative w-10;
+  & > label {
+    @apply absolute inset-0 flex justify-center items-center w-full h-full;
+  }
+}
+
+.icon-clickable { 
+  @apply flex justify-center items-center p-.5 w-5 h-5 box-border rd-1 hover:bg-gray/30 [&>svg]:(w-full h-full);
+}
+
+input[type="checkbox"].you-checkbox {
+  @apply relative size-4 m-1 rd-1 c-#2196f3 b-(2 solid current) outline-offset--0 focus:outline-(4 solid #2196f3/40) cusor-pointer appearance-none checked:bg-current;
+  &.checked::after {
+    @apply content-["✓"] absolute top-50% left-50% translate--50% text-3 c-#fff z-1;
+  }
+}
+
+td.is-editing {
+  @apply relative;
+}
+
+td.is-invalid {
+  @apply relative;
+  outline: 1.5px solid #ff4d4f;
+  outline-offset: -1.5px;
+}
+
+.in-cell-edit-wrapper {
+  @apply absolute inset-0 z-1;
+  box-shadow: 0 0 10px -2px #00000050;
+}
+
+.cell-validating {
+  @apply absolute right-1 top-50% translate-y--50% w-3 h-3 rd-full border-2 border-[--c-primary] border-t-transparent animate-spin block pointer-events-none;
+}
+
+.cell-validation-error {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 10;
+  background: #fff1f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px #00000020;
+  pointer-events: none;
+  &:empty {
+    display: none;
+  }
+}
+
+.in-cell__resize-handle {
+  @apply absolute size-full hover:after:bg-[--c-primary]/40 active:after:bg-[--c-primary];
+  &::after {
+    @apply content-[''];
+  }
+}
+
+// 
+.li {
+  @apply relative cursor-pointer;
+  &:hover, &.hover {
+    @apply bg-[--li-hover-bg];
+  }
+  &:active, &.selected, &.active {
+    &::before {
+      content: '';
+      @apply absolute inset-0 rd-inherit bg-gray/15;
+    }
+  }
+  &.disabled, &[disabled] {
+    opacity: .4;
+  }
+}
+
+.tt-menu {
+  @apply py-1 shadow-lg rd-2 space-y-.5 text-sm b-(1 solid gray/30) bg-[--menu-bg] cursor-default;
+}
+
+.tt-menu-x {
+  @apply px-1 shadow-lg rd-2 space-x-.5 text-sm b-(1 solid gray/30) bg-[--menu-bg] cursor-default;
+
+  & > .hr {
+    @apply w-[1px] my-1.5 bg-gray/30;
+  }
+}
+
+// drag
+.col__guide-line, .row__guide-line {
+  @apply fixed top-0 left-0 bg-[--c-primary] z-9 pointer-events-none;
+}
+
+th[draggable="true"], td[draggable="true"] {
+  @apply cursor-move;
+}