@threadlabs/looma 0.18.5 → 0.19.0

package/editor/chunks/extensions.js

@@ -6050,6 +6050,21 @@ function createLoomaMentionExtension(options = {}) {
 			char: "@",
 			allowSpaces: false,
 			startOfLine: false,
+			allow: ({ editor, state, range, isActive }) => {
+				const $from = state.doc.resolve(range.from);
+				const mentionType = state.schema.nodes.mention;
+				if (!mentionType || !$from.parent.type.contentMatch.matchType(mentionType)) return false;
+				for (let depth = $from.depth; depth >= 0; depth -= 1) if ($from.node(depth).type.spec.code) return false;
+				const codeMark = state.schema.marks.code;
+				if (codeMark && state.doc.rangeHasMark(range.from, range.to, codeMark)) return false;
+				const previous = LoomaMentionSuggestionPluginKey.getState(editor.view.state);
+				if (isActive && previous?.range?.from === range.from) return true;
+				const before = editor.view.state.doc.content;
+				const start = before.findDiffStart(state.doc.content);
+				const end = before.findDiffEnd(state.doc.content);
+				if (start === null || !end || range.from < start || range.from >= end.b) return false;
+				return state.doc.textBetween(start, end.b) === "@";
+			},
 			items: ({ query }) => resolveMentionItems(options.items, query, limit),
 			render: () => {
 				let selectedIndex = 0;
@@ -9275,8 +9290,8 @@ function getLoomaTableExtensions() {
 * the code and explicit language stay in the document schema.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeBlockNodeView } = options;
-	const codeBlock = LoomaCodeBlock.configure({ lowlight: createLowlight(codeLanguages) });
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeLowlight, codeBlockNodeView } = options;
+	const codeBlock = LoomaCodeBlock.configure({ lowlight: codeLowlight ?? createLowlight(codeLanguages) });
 	return [
 		Document,
 		Paragraph,
@@ -9648,7 +9663,7 @@ function normalizeActiveTableColumnWidths(editor, tableElement, minWidth = 25) {
 *
 * Boundary indices address the visual grid edges measured by the overlay. The
 * helper maps them into the current table transaction, rejects indices that do
-* not represent a legal insertion edge, dispatches once, and restores editor
+* not represent a legal insertion edge or reorder destination, dispatches once, and restores editor
 * focus. `open-cell-menu` returns handled without editing because menu ownership
 * remains with the application/adapter.
 *
@@ -9661,6 +9676,27 @@ function handleTableOverlayAction(editor, detail) {
 	const tableInfo = findTable(editor);
 	if (!tableInfo) return false;
 	const { action } = detail;
+	if (action === "reorder-row" || action === "reorder-column") {
+		const { fromIndex, toIndex } = detail;
+		const { pos: tablePos, node: table } = tableInfo;
+		const map = TableMap.get(table);
+		const axis = action === "reorder-row" ? "row" : "column";
+		const limit = axis === "row" ? map.height : map.width;
+		if (!Number.isInteger(fromIndex) || !Number.isInteger(toIndex) || fromIndex < 0 || toIndex < 0 || fromIndex >= limit || toIndex >= limit || fromIndex === toIndex) return false;
+		const cellPos = tablePos + 1 + map.map[axis === "row" ? fromIndex * map.width : fromIndex];
+		const command = axis === "row" ? moveTableRow : moveTableColumn;
+		try {
+			const moved = command({
+				from: fromIndex,
+				to: toIndex,
+				pos: cellPos
+			})(editor.state, editor.view.dispatch);
+			if (moved) editor.view.focus();
+			return moved;
+		} catch {
+			return false;
+		}
+	}
 	if (action === "select-row" || action === "select-column") return selectTableAxis(editor, action === "select-row" ? "row" : "column", detail.rowIndex, detail.columnIndex);
 	if (action === "open-cell-menu" || action === "open-row-menu" || action === "open-column-menu") return true;
 	if (!("boundaryIndex" in detail)) return false;

package/editor/extensions/preset.d.ts

@@ -29,6 +29,8 @@ export interface DefaultEditorExtensionsOptions {
     disableHighlight?: boolean;
     /** Code block grammars to register. None are loaded by default. */
     codeLanguages?: LoomaCodeLanguages;
+    /** Shared highlighter that can receive grammars after editor creation. */
+    codeLowlight?: ReturnType<typeof createLowlight>;
     /** Optional presentation for a code block; the Vue editor supplies its language control. */
     codeBlockNodeView?: NodeViewRenderer;
 }

package/editor/extensions/table-commands.d.ts

@@ -110,7 +110,7 @@ export declare function normalizeActiveTableColumnWidths(editor: Editor, tableEl
  *
  * Boundary indices address the visual grid edges measured by the overlay. The
  * helper maps them into the current table transaction, rejects indices that do
- * not represent a legal insertion edge, dispatches once, and restores editor
+ * not represent a legal insertion edge or reorder destination, dispatches once, and restores editor
  * focus. `open-cell-menu` returns handled without editing because menu ownership
  * remains with the application/adapter.
  *

package/editor/table-overlay.d.ts

@@ -9,16 +9,21 @@ export type TableInsertionAction = "add-row-before" | "add-row-after" | "add-col
  * UI stays independent of Tiptap/ProseMirror positions; adapters translate
  * these logical coordinates with `handleTableOverlayAction`.
  */
-export type TableOverlayAction = TableInsertionAction | "select-row" | "select-column" | "open-cell-menu" | "open-row-menu" | "open-column-menu";
+export type TableOverlayAction = TableInsertionAction | "select-row" | "select-column" | "reorder-row" | "reorder-column" | "open-cell-menu" | "open-row-menu" | "open-column-menu";
 /**
  * Discriminated action payload.
- * Boundary indices refer to entries in the measured boundary arrays. Cell
- * indices refer to the logical grid after row/column spans are expanded. The
+ * Boundary indices refer to entries in the measured boundary arrays. Reorder
+ * indices refer to source and destination rows or columns. Cell indices refer
+ * to the logical grid after row/column spans are expanded. The
  * menu anchor uses CSS-pixel viewport coordinates suitable for fixed surfaces.
  */
 export type TableOverlayActionEventDetail = {
     action: TableInsertionAction;
     boundaryIndex: number;
+} | {
+    action: "reorder-row" | "reorder-column";
+    fromIndex: number;
+    toIndex: number;
 } | {
     action: "select-row" | "select-column";
     rowIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.18.5",
+  "version": "0.19.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -79,6 +79,7 @@
   "dependencies": {
     "@nextwebwg/html-next": "1.0.0-alpha.7",
     "dompurify": "3.4.15",
+    "highlight.js": "11.11.2",
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0"

package/styles/ui-editor-table-overlay.css

@@ -223,6 +223,12 @@
 
     .selector {
       border-radius: var(--ui-radius-round);
+      touch-action: none;
+      cursor: grab;
+    }
+
+    .selector:active {
+      cursor: grabbing;
     }
 
     .selector::before {
@@ -308,6 +314,30 @@
       --_ui-default-icon-stroke-width: 2;
     }
 
+    .drop-indicator {
+      position: absolute;
+      z-index: 3;
+      background: var(--ui-accent-solid);
+      box-shadow: 0 0 0 2px var(--ui-surface);
+      pointer-events: none;
+    }
+
+    .drop-indicator.row {
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+
+    .drop-indicator.column {
+      top: 0;
+      width: 2px;
+      height: 100%;
+    }
+
+    .drop-indicator[hidden] {
+      display: none;
+    }
+
     :scope[hidden] {
       display: none;
     }

package/styles/ui-editor-table-toolbar.css

@@ -118,10 +118,12 @@
     }
 
     .menu {
+      box-sizing: border-box;
       position: absolute;
       top: calc(100% + var(--ui-space-2));
       right: 0;
       min-width: 12rem;
+      max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);
       background: var(--ui-surface);
       border: 1px solid var(--ui-border-strong);
@@ -131,6 +133,9 @@
       flex-direction: column;
       gap: 2px;
       z-index: 2;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
     }
 
     .menu-section + .menu-section {
@@ -157,7 +162,7 @@
 
     .swatches {
       display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 2px;
     }
 
@@ -171,7 +176,7 @@
       height: 14px;
       flex: 0 0 14px;
       border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
-      border-radius: 3px;
+      border-radius: var(--ui-radius-round);
       background: var(--_swatch);
     }
 

package/vanilla/UiEditorTableOverlay.d.ts

@@ -1,6 +1,6 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiEditorTableOverlayEventMap {
-  action: CustomEvent<{ readonly action: "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after"; readonly boundaryIndex: number } | { readonly action: "select-row" | "select-column"; readonly rowIndex: number; readonly columnIndex: number } | { readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu"; readonly rowIndex: number; readonly columnIndex: number; readonly anchor: { readonly left: number; readonly top: number; readonly right: number; readonly bottom: number } }>;
+  action: CustomEvent<{ readonly action: "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after"; readonly boundaryIndex: number } | { readonly action: "select-row" | "select-column"; readonly rowIndex: number; readonly columnIndex: number } | { readonly action: "reorder-row" | "reorder-column"; readonly fromIndex: number; readonly toIndex: number } | { readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu"; readonly rowIndex: number; readonly columnIndex: number; readonly anchor: { readonly left: number; readonly top: number; readonly right: number; readonly bottom: number } }>;
 }
 export interface UiEditorTableOverlayElement extends HTMLDivElement {
   addEventListener<K extends keyof UiEditorTableOverlayEventMap>(type: K, listener: (this: UiEditorTableOverlayElement, event: UiEditorTableOverlayEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;

package/vanilla/UiEditorTableOverlay.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editor-table-overlay/ui-editor-table-overlay.js";
 import "../styles/ui-editor-table-overlay.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-table-overlay","props":{"geometry":{"type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"rowBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"columnBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"activeCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":false},{"name":"hoveredCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":true}],"open":false},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"geometry"}},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"aria-label","value":"Table controls"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"rows"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control row"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"top","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"},{"kind":"directive","name":"value","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[]}]}],"flow":{"kind":"each","item":"control","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"cols"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control col"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"left","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"},{"kind":"directive","name":"value","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[]}]}],"flow":{"kind":"each","item":"control","list":"cols","listPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector row"},{"kind":"attribute","name":"top","expression":"hovered.rowOffset","expressionPlan":{"source":"hovered.rowOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowOffset"},"dependencies":["hovered.rowOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-row"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Row actions"},{"kind":"literal","name":"aria-label","value":"Row actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-vertical"}],"children":[]}]}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector column"},{"kind":"attribute","name":"left","expression":"hovered.columnOffset","expressionPlan":{"source":"hovered.columnOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnOffset"},"dependencies":["hovered.columnOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-column"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Column actions"},{"kind":"literal","name":"aria-label","value":"Column actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-horizontal"}],"children":[]}]}]}],"flow":{"kind":"if","test":"hovered","testPlan":{"source":"hovered","ast":{"kind":"id","name":"hovered"},"dependencies":["hovered"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell-menu"},{"kind":"attribute","name":"left","expression":"active.menuLeft","expressionPlan":{"source":"active.menuLeft","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuLeft"},"dependencies":["active.menuLeft"]},"target":"style"},{"kind":"attribute","name":"top","expression":"active.menuTop","expressionPlan":{"source":"active.menuTop","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuTop"},"dependencies":["active.menuTop"]},"target":"style"},{"kind":"literal","name":"data-action","value":"open-cell-menu"},{"kind":"attribute","name":"data-row-index","expression":"active.rowIndex","expressionPlan":{"source":"active.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"rowIndex"},"dependencies":["active.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"active.columnIndex","expressionPlan":{"source":"active.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"columnIndex"},"dependencies":["active.columnIndex"]}},{"kind":"literal","name":"title","value":"Cell actions"},{"kind":"literal","name":"aria-label","value":"Cell actions"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}],"flow":{"kind":"if","test":"active","testPlan":{"source":"active","ast":{"kind":"id","name":"active"},"dependencies":["active"]}}}]},"declarations":[{"kind":"state","name":"rows","type":"list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"cols","type":"list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hovered","type":"object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"active","type":"object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"activeKey","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-editor-table-overlay","props":{"geometry":{"type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"rowBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"columnBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"activeCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":false},{"name":"hoveredCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":true}],"open":false},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"geometry"}},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"aria-label","value":"Table controls"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"rows"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control row"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"top","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"},{"kind":"directive","name":"value","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[]}]}],"flow":{"kind":"each","item":"control","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"cols"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control col"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"left","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"},{"kind":"directive","name":"value","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[]}]}],"flow":{"kind":"each","item":"control","list":"cols","listPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector row"},{"kind":"attribute","name":"top","expression":"hovered.rowOffset","expressionPlan":{"source":"hovered.rowOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowOffset"},"dependencies":["hovered.rowOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-row"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Drag row to reorder; click for actions"},{"kind":"literal","name":"aria-label","value":"Row actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-vertical"}],"children":[]}]}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector column"},{"kind":"attribute","name":"left","expression":"hovered.columnOffset","expressionPlan":{"source":"hovered.columnOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnOffset"},"dependencies":["hovered.columnOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-column"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Drag column to reorder; click for actions"},{"kind":"literal","name":"aria-label","value":"Column actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-horizontal"}],"children":[]}]}]}],"flow":{"kind":"if","test":"hovered","testPlan":{"source":"hovered","ast":{"kind":"id","name":"hovered"},"dependencies":["hovered"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell-menu"},{"kind":"attribute","name":"left","expression":"active.menuLeft","expressionPlan":{"source":"active.menuLeft","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuLeft"},"dependencies":["active.menuLeft"]},"target":"style"},{"kind":"attribute","name":"top","expression":"active.menuTop","expressionPlan":{"source":"active.menuTop","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuTop"},"dependencies":["active.menuTop"]},"target":"style"},{"kind":"literal","name":"data-action","value":"open-cell-menu"},{"kind":"attribute","name":"data-row-index","expression":"active.rowIndex","expressionPlan":{"source":"active.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"rowIndex"},"dependencies":["active.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"active.columnIndex","expressionPlan":{"source":"active.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"columnIndex"},"dependencies":["active.columnIndex"]}},{"kind":"literal","name":"title","value":"Cell actions"},{"kind":"literal","name":"aria-label","value":"Cell actions"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}],"flow":{"kind":"if","test":"active","testPlan":{"source":"active","ast":{"kind":"id","name":"active"},"dependencies":["active"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator"},{"kind":"literal","name":"data-drop-indicator","value":""},{"kind":"literal","name":"hidden","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"rows","type":"list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"cols","type":"list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hovered","type":"object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"active","type":"object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"activeKey","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: reorder-row | reorder-column, fromIndex: integer, toIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorTableOverlay(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -72,7 +72,7 @@ export function createUiEditorTableOverlay(options = {}) {
   element15.setAttribute("type", "button");
   element15.setAttribute("class", "selector row");
   element15.setAttribute("data-action", "select-row");
-  element15.setAttribute("title", "Row actions");
+  element15.setAttribute("title", "Drag row to reorder; click for actions");
   element15.setAttribute("aria-label", "Row actions");
   const element16 = document.createElement("span");
   element16.setAttribute("class", "glyph");
@@ -85,7 +85,7 @@ export function createUiEditorTableOverlay(options = {}) {
   element18.setAttribute("type", "button");
   element18.setAttribute("class", "selector column");
   element18.setAttribute("data-action", "select-column");
-  element18.setAttribute("title", "Column actions");
+  element18.setAttribute("title", "Drag column to reorder; click for actions");
   element18.setAttribute("aria-label", "Column actions");
   const element19 = document.createElement("span");
   element19.setAttribute("class", "glyph");
@@ -105,6 +105,12 @@ export function createUiEditorTableOverlay(options = {}) {
   element22.setAttribute("name", "chevron-down");
   element21.append(element22);
   element.append(element21);
+  const element23 = document.createElement("span");
+  element23.setAttribute("class", "drop-indicator");
+  element23.setAttribute("data-drop-indicator", "");
+  element23.setAttribute("hidden", "");
+  element23.setAttribute("aria-hidden", "true");
+  element.append(element23);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vue/UiEditorTableOverlay.d.ts

@@ -29,6 +29,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly action: "select-row" | "select-column";
         readonly rowIndex: number;
         readonly columnIndex: number;
+    } | {
+        readonly action: "reorder-row" | "reorder-column";
+        readonly fromIndex: number;
+        readonly toIndex: number;
     } | {
         readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu";
         readonly rowIndex: number;
@@ -48,6 +52,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly action: "select-row" | "select-column";
         readonly rowIndex: number;
         readonly columnIndex: number;
+    } | {
+        readonly action: "reorder-row" | "reorder-column";
+        readonly fromIndex: number;
+        readonly toIndex: number;
     } | {
         readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu";
         readonly rowIndex: number;

package/vue/UiEditorTableOverlay.vue

@@ -44,6 +44,10 @@ const emit = defineEmits<{
       readonly action: 'select-row' | 'select-column'
       readonly rowIndex: number
       readonly columnIndex: number
+    } | {
+      readonly action: 'reorder-row' | 'reorder-column'
+      readonly fromIndex: number
+      readonly toIndex: number
     } | {
       readonly action: 'open-cell-menu' | 'open-row-menu' | 'open-column-menu'
       readonly rowIndex: number
@@ -121,6 +125,14 @@ const isActionDetail = (detail: unknown): boolean =>
     && Object.keys(detail as object).every((key) =>
       ['action', 'rowIndex', 'columnIndex'].includes(key)
     ))
+  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+    && ((detail as Record<string, unknown>)['action'] === 'reorder-row'
+      || (detail as Record<string, unknown>)['action'] === 'reorder-column')
+    && Number.isInteger((detail as Record<string, unknown>)['fromIndex'])
+    && Number.isInteger((detail as Record<string, unknown>)['toIndex'])
+    && Object.keys(detail as object).every((key) =>
+      ['action', 'fromIndex', 'toIndex'].includes(key)
+    ))
   || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
     && ((detail as Record<string, unknown>)['action'] === 'open-cell-menu'
       || (detail as Record<string, unknown>)['action'] === 'open-row-menu'
@@ -231,7 +243,7 @@ useComponentHost(controllerModule.default, {
         type="button"
         class="selector row"
         data-action="select-row"
-        title="Row actions"
+        title="Drag row to reorder; click for actions"
         aria-label="Row actions"
         :data-row-index="hovered?.rowIndex"
         :data-column-index="hovered?.columnIndex"
@@ -243,7 +255,7 @@ useComponentHost(controllerModule.default, {
         type="button"
         class="selector column"
         data-action="select-column"
-        title="Column actions"
+        title="Drag column to reorder; click for actions"
         aria-label="Column actions"
         :data-row-index="hovered?.rowIndex"
         :data-column-index="hovered?.columnIndex"
@@ -264,6 +276,7 @@ useComponentHost(controllerModule.default, {
     >
       <UiIcon name="chevron-down" />
     </button>
+    <span class="drop-indicator" data-drop-indicator="" hidden="" aria-hidden="true"></span>
   </div>
 </template>
 
@@ -491,6 +504,12 @@ useComponentHost(controllerModule.default, {
 
 .selector {
   border-radius: var(--ui-radius-round);
+  touch-action: none;
+  cursor: grab;
+}
+
+.selector:active {
+  cursor: grabbing;
 }
 
 .selector::before {
@@ -576,6 +595,30 @@ useComponentHost(controllerModule.default, {
   --_ui-default-icon-stroke-width: 2;
 }
 
+.drop-indicator {
+  position: absolute;
+  z-index: 3;
+  background: var(--ui-accent-solid);
+  box-shadow: 0 0 0 2px var(--ui-surface);
+  pointer-events: none;
+}
+
+.drop-indicator.row {
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.drop-indicator.column {
+  top: 0;
+  width: 2px;
+  height: 100%;
+}
+
+.drop-indicator[hidden] {
+  display: none;
+}
+
 [data-component~="ui-editor-table-overlay"][hidden] {
   display: none;
 }

package/vue/UiEditorTableToolbar.vue

@@ -381,10 +381,12 @@ function attribute(value: unknown): any {
 }
 
 .menu {
+  box-sizing: border-box;
   position: absolute;
   top: calc(100% + var(--ui-space-2));
   right: 0;
   min-width: 12rem;
+  max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);
   background: var(--ui-surface);
   border: 1px solid var(--ui-border-strong);
@@ -394,6 +396,9 @@ function attribute(value: unknown): any {
   flex-direction: column;
   gap: 2px;
   z-index: 2;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
 }
 
 .menu-section + .menu-section {
@@ -420,7 +425,7 @@ function attribute(value: unknown): any {
 
 .swatches {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2px;
 }
 
@@ -434,7 +439,7 @@ function attribute(value: unknown): any {
   height: 14px;
   flex: 0 0 14px;
   border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
-  border-radius: 3px;
+  border-radius: var(--ui-radius-round);
   background: var(--_swatch);
 }