@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiEditorTableOverlay.vue

@@ -1,455 +1,686 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import UiIcon from "./UiIcon.vue";
-import * as controllerModule from "../components/ui-editor-table-overlay/ui-editor-table-overlay.js";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-editor-table-overlay/ui-editor-table-overlay.js'
+import UiIcon from './UiIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    geometry?: {
+      readonly rowBoundaries: readonly (number)[]
+      readonly columnBoundaries: readonly (number)[]
+      readonly activeCell: {
+        readonly left: number
+        readonly top: number
+        readonly width: number
+        readonly height: number
+        readonly rowIndex: number
+        readonly columnIndex: number
+      } | null
+      readonly hoveredCell?: {
+        readonly left: number
+        readonly top: number
+        readonly width: number
+        readonly height: number
+        readonly rowIndex: number
+        readonly columnIndex: number
+      } | null
+    } | null
+    open?: boolean
+  }>(),
+  {
+    open: false,
   },
-};
-
-const props = withDefaults(defineProps<{
-  geometry?: { readonly rowBoundaries: readonly (number)[]; readonly columnBoundaries: readonly (number)[]; readonly activeCell: { readonly left: number; readonly top: number; readonly width: number; readonly height: number; readonly rowIndex: number; readonly columnIndex: number } | null; readonly hoveredCell?: { readonly left: number; readonly top: number; readonly width: number; readonly height: number; readonly rowIndex: number; readonly columnIndex: number } | null } | null;
-  open?: boolean | null;
-}>(), {
-  open: false,
-});
+)
 const emit = defineEmits<{
-  "action": [detail: { 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"; readonly rowIndex: number; readonly columnIndex: number; readonly anchor: { readonly left: number; readonly top: number; readonly right: number; readonly bottom: number } }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_rows = ref<any>([]);
-const state_cols = ref<any>([]);
-const state_hovered = ref<any>(null);
-const state_active = ref<any>(null);
-const state_activeKey = ref<any>("");
+  action: [
+    detail: {
+      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'
+      readonly rowIndex: number
+      readonly columnIndex: number
+      readonly anchor: {
+        readonly left: number
+        readonly top: number
+        readonly right: number
+        readonly bottom: number
+      }
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const rows = ref<
+  {
+    key: string
+    index: number
+    offset: string
+    affordance: 'insert-row' | 'insert-column'
+    action: 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after'
+    label: string
+  }[]
+>([])
+const cols = ref<
+  {
+    key: string
+    index: number
+    offset: string
+    affordance: 'insert-row' | 'insert-column'
+    action: 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after'
+    label: string
+  }[]
+>([])
+const hovered = ref<
+  {
+    left: number
+    top: number
+    width: number
+    height: number
+    rowIndex: number
+    columnIndex: number
+    rowOffset: string
+    columnOffset: string
+  } | null
+>(null)
+const active = ref<
+  {
+    left: number
+    top: number
+    width: number
+    height: number
+    rowIndex: number
+    columnIndex: number
+    menuLeft: string
+    menuTop: string
+  } | null
+>(null)
+const activeKey = ref('')
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"action":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    action: { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "action": (detail: unknown) => ((detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["action"] === "add-row-before" || (detail as Record<string, unknown>)["action"] === "add-row-after" || (detail as Record<string, unknown>)["action"] === "add-column-before" || (detail as Record<string, unknown>)["action"] === "add-column-after") && Number.isInteger((detail as Record<string, unknown>)["boundaryIndex"]) && Object.keys(detail as object).every((key) => ["action","boundaryIndex"].includes(key))) || (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["action"] === "select-row" || (detail as Record<string, unknown>)["action"] === "select-column") && Number.isInteger((detail as Record<string, unknown>)["rowIndex"]) && Number.isInteger((detail as Record<string, unknown>)["columnIndex"]) && 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"] === "open-cell-menu" && Number.isInteger((detail as Record<string, unknown>)["rowIndex"]) && Number.isInteger((detail as Record<string, unknown>)["columnIndex"]) && ((detail as Record<string, unknown>)["anchor"] !== null && typeof (detail as Record<string, unknown>)["anchor"] === "object" && !Array.isArray((detail as Record<string, unknown>)["anchor"]) && (typeof ((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["left"] === "number" && Number.isFinite(((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["left"])) && (typeof ((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["top"] === "number" && Number.isFinite(((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["top"])) && (typeof ((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["right"] === "number" && Number.isFinite(((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["right"])) && (typeof ((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["bottom"] === "number" && Number.isFinite(((detail as Record<string, unknown>)["anchor"] as Record<string, unknown>)["bottom"])) && Object.keys((detail as Record<string, unknown>)["anchor"] as object).every((key) => ["left","top","right","bottom"].includes(key))) && Object.keys(detail as object).every((key) => ["action","rowIndex","columnIndex","anchor"].includes(key)))),
-  };
+    action: (detail) =>
+      (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+        && ((detail as Record<string, unknown>)['action'] === 'add-row-before'
+          || (detail as Record<string, unknown>)['action'] === 'add-row-after'
+          || (detail as Record<string, unknown>)['action'] === 'add-column-before'
+          || (detail as Record<string, unknown>)['action'] === 'add-column-after')
+        && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
+        && Object.keys(detail as object).every((key) => ['action', 'boundaryIndex'].includes(key)))
+      || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+        && ((detail as Record<string, unknown>)['action'] === 'select-row'
+          || (detail as Record<string, unknown>)['action'] === 'select-column')
+        && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+        && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+        && 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'] === 'open-cell-menu'
+        && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+        && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+        && ((detail as Record<string, unknown>)['anchor'] !== null
+          && typeof (detail as Record<string, unknown>)['anchor'] === 'object'
+          && !Array.isArray((detail as Record<string, unknown>)['anchor'])
+          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
+                'left'
+              ] === 'number'
+            && Number.isFinite(
+              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left'],
+            ))
+          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
+                'top'
+              ] === 'number'
+            && Number.isFinite(
+              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top'],
+            ))
+          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
+                'right'
+              ] === 'number'
+            && Number.isFinite(
+              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right'],
+            ))
+          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
+                'bottom'
+              ] === 'number'
+            && Number.isFinite(
+              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom'],
+            ))
+          && Object.keys((detail as Record<string, unknown>)['anchor'] as object).every((key) =>
+            ['left', 'top', 'right', 'bottom'].includes(key)
+          ))
+        && Object.keys(detail as object).every((key) =>
+          ['action', 'rowIndex', 'columnIndex', 'anchor'].includes(key)
+        )),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "rows") return state_rows.value;
-  if (name === "cols") return state_cols.value;
-  if (name === "hovered") return state_hovered.value;
-  if (name === "active") return state_active.value;
-  if (name === "activeKey") return state_activeKey.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'rows') return rows.value
+  if (name === 'cols') return cols.value
+  if (name === 'hovered') return hovered.value
+  if (name === 'active') return active.value
+  if (name === 'activeKey') return activeKey.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "rows") { state_rows.value = value; return true; }
-  if (name === "cols") { state_cols.value = value; return true; }
-  if (name === "hovered") { state_hovered.value = value; return true; }
-  if (name === "active") { state_active.value = value; return true; }
-  if (name === "activeKey") { state_activeKey.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'rows') {
+    rows.value = value as never
+    return true
+  }
+  if (name === 'cols') {
+    cols.value = value as never
+    return true
+  }
+  if (name === 'hovered') {
+    hovered.value = value as never
+    return true
+  }
+  if (name === 'active') {
+    active.value = value as never
+    return true
+  }
+  if (name === 'activeKey') {
+    activeKey.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {} as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <div data-component="ui-editor-table-overlay" aria-label="Table controls" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><div class="rows"><template v-for="(control, index) in hn.shape(state_rows, undefined, [], undefined)" :key="(control)?.key"><div class="control row" :data-control-key="hn.attr((control)?.key)" :class="{ 'active': hn.t(((control)?.key === state_activeKey)) }" :style="{ 'top': hn.text((control)?.offset) }"><span class="line" aria-hidden="true"></span><span class="guide" data-ui-guide="" aria-hidden="true"></span><button type="button" class="handle" :data-ui-affordance="hn.attr((control)?.affordance)" :data-action="hn.attr((control)?.action)" :data-boundary-index="hn.attr((control)?.index)" :aria-label="hn.enumerated((control)?.label)"><UiIcon name="plus"></UiIcon><span class="tooltip" role="tooltip">{{ hn.text((control)?.label) }}</span></button></div></template></div><div class="cols"><template v-for="(control, index) in hn.shape(state_cols, undefined, [], undefined)" :key="(control)?.key"><div class="control col" :data-control-key="hn.attr((control)?.key)" :class="{ 'active': hn.t(((control)?.key === state_activeKey)) }" :style="{ 'left': hn.text((control)?.offset) }"><span class="line" aria-hidden="true"></span><span class="guide" data-ui-guide="" aria-hidden="true"></span><button type="button" class="handle" :data-ui-affordance="hn.attr((control)?.affordance)" :data-action="hn.attr((control)?.action)" :data-boundary-index="hn.attr((control)?.index)" :aria-label="hn.enumerated((control)?.label)"><UiIcon name="plus"></UiIcon><span class="tooltip" role="tooltip">{{ hn.text((control)?.label) }}</span></button></div></template></div><template v-if="hn.t(state_hovered)"><button type="button" class="selector row" data-action="select-row" title="Select row" aria-label="Select row" :data-row-index="hn.attr((state_hovered)?.rowIndex)" :data-column-index="hn.attr((state_hovered)?.columnIndex)" :style="{ 'top': hn.text((state_hovered)?.rowOffset) }"><span class="glyph"><UiIcon name="grip-vertical"></UiIcon></span></button><button type="button" class="selector column" data-action="select-column" title="Select column" aria-label="Select column" :data-row-index="hn.attr((state_hovered)?.rowIndex)" :data-column-index="hn.attr((state_hovered)?.columnIndex)" :style="{ 'left': hn.text((state_hovered)?.columnOffset) }"><span class="glyph"><UiIcon name="grip-horizontal"></UiIcon></span></button></template><template v-if="hn.t(state_active)"><button type="button" class="cell-menu" data-action="open-cell-menu" title="Cell actions" aria-label="Cell actions" :data-row-index="hn.attr((state_active)?.rowIndex)" :data-column-index="hn.attr((state_active)?.columnIndex)" :style="{ 'left': hn.text((state_active)?.menuLeft), 'top': hn.text((state_active)?.menuTop) }"><UiIcon name="chevron-down"></UiIcon></button></template></div>
+  <div
+    data-component="ui-editor-table-overlay"
+    aria-label="Table controls"
+    v-bind="$attrs"
+    :hidden="!open"
+    ref="root"
+  >
+    <div class="rows">
+      <div
+        v-for="control in rows"
+        :key="control.key"
+        class="control row"
+        :data-control-key="control.key"
+        :class="{ active: control.key === activeKey }"
+        :style="{ top: control.offset }"
+      >
+        <span class="line" aria-hidden="true"></span>
+        <span class="guide" data-ui-guide="" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="handle"
+          :data-ui-affordance="control.affordance"
+          :data-action="control.action"
+          :data-boundary-index="control.index"
+          :aria-label="control.label"
+        >
+          <UiIcon name="plus" />
+          <span class="tooltip" role="tooltip">{{ control.label }}</span>
+        </button>
+      </div>
+    </div>
+    <div class="cols">
+      <div
+        v-for="control in cols"
+        :key="control.key"
+        class="control col"
+        :data-control-key="control.key"
+        :class="{ active: control.key === activeKey }"
+        :style="{ left: control.offset }"
+      >
+        <span class="line" aria-hidden="true"></span>
+        <span class="guide" data-ui-guide="" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="handle"
+          :data-ui-affordance="control.affordance"
+          :data-action="control.action"
+          :data-boundary-index="control.index"
+          :aria-label="control.label"
+        >
+          <UiIcon name="plus" />
+          <span class="tooltip" role="tooltip">{{ control.label }}</span>
+        </button>
+      </div>
+    </div>
+    <template v-if="hovered"><button
+        type="button"
+        class="selector row"
+        data-action="select-row"
+        title="Select row"
+        aria-label="Select row"
+        :data-row-index="hovered?.rowIndex"
+        :data-column-index="hovered?.columnIndex"
+        :style="{ top: hovered?.rowOffset }"
+      >
+        <span class="glyph"><UiIcon name="grip-vertical" /></span>
+      </button>
+      <button
+        type="button"
+        class="selector column"
+        data-action="select-column"
+        title="Select column"
+        aria-label="Select column"
+        :data-row-index="hovered?.rowIndex"
+        :data-column-index="hovered?.columnIndex"
+        :style="{ left: hovered?.columnOffset }"
+      >
+        <span class="glyph"><UiIcon name="grip-horizontal" /></span>
+      </button></template>
+    <button
+      v-if="active"
+      type="button"
+      class="cell-menu"
+      data-action="open-cell-menu"
+      title="Cell actions"
+      aria-label="Cell actions"
+      :data-row-index="active?.rowIndex"
+      :data-column-index="active?.columnIndex"
+      :style="{ left: active?.menuLeft, top: active?.menuTop }"
+    >
+      <UiIcon name="chevron-down" />
+    </button>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-editor-table-overlay"] {
-      display: block;
-      width: 100%;
-      height: 100%;
-      overflow: visible;
-      pointer-events: none;
-    }
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
 
-    [data-component~="ui-editor-table-overlay"] {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: visible;
-      pointer-events: none;
-    }
+[data-component~="ui-editor-table-overlay"] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
 
-    .rows,
-    .cols {
-      pointer-events: none;
-      position: absolute;
-    }
+.rows,
+.cols {
+  pointer-events: none;
+  position: absolute;
+}
 
-    .rows {
-      inset: 0;
-      width: 100%;
-    }
+.rows {
+  inset: 0;
+  width: 100%;
+}
 
-    .cols {
-      inset: 0;
-      height: 100%;
-    }
+.cols {
+  inset: 0;
+  height: 100%;
+}
 
-    .control {
-      position: absolute;
-      z-index: 1;
-      pointer-events: none;
-    }
+.control {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+}
 
-    .handle {
-      position: absolute;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
-      border-radius: var(--ui-radius-round, 999px);
-      background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
-      color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
-      font: inherit;
-      font-size: 16px;
-      line-height: 1;
-      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
-      opacity: 0;
-      scale: 0.72;
-      transition:
-        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-      pointer-events: auto;
-      cursor: pointer;
-    }
+.handle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border-radius: var(--ui-radius-round);
+  background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
+  color: var(--ui-affordance-near-color, var(--ui-text-secondary));
+  font: inherit;
+  font-size: 16px;
+  line-height: 1;
+  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+  opacity: 0;
+  scale: 0.72;
+  transition:
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: auto;
+  cursor: pointer;
+}
 
-    .handle {
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-    }
+.handle {
+  --ui-icon-size: 14px;
+  --ui-icon-stroke-width: 2;
+}
 
-    .handle[data-ui-proximity="near"],
-    .control.active .handle,
-    .handle:focus-visible {
-      opacity: 1;
-      scale: 1;
-    }
+.handle[data-ui-proximity="near"],
+.control.active .handle,
+.handle:focus-visible {
+  opacity: 1;
+  scale: 1;
+}
 
-    .control.active .handle,
-    .handle:focus-visible {
-      border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-      color: var(--ui-text-on-accent, #fff);
-      box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
-    }
+.control.active .handle,
+.handle:focus-visible {
+  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  color: var(--ui-text-on-accent);
+  box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
+}
 
-    .handle:focus-visible,
-    .selector:focus-visible,
-    .cell-menu:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, #5b55d6);
-      outline-offset: 2px;
-    }
+.handle:focus-visible,
+.selector:focus-visible,
+.cell-menu:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
 
-    .control.row {
-      left: 0;
-      width: 100%;
-      height: 0;
-    }
+.control.row {
+  left: 0;
+  width: 100%;
+  height: 0;
+}
 
-    .control.row .handle {
-      top: -12px;
-      left: -30px;
-    }
+.control.row .handle {
+  top: -12px;
+  left: -30px;
+}
 
-    .control.col {
-      top: 0;
-      width: 0;
-      height: 100%;
-    }
+.control.col {
+  top: 0;
+  width: 0;
+  height: 100%;
+}
 
-    .control.col .handle {
-      top: -30px;
-      left: -12px;
-    }
+.control.col .handle {
+  top: -30px;
+  left: -12px;
+}
 
-    .line {
-      position: absolute;
-      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-      opacity: 0;
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    }
+.line {
+  position: absolute;
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  opacity: 0;
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+}
 
-    .control.row .line {
-      inset: -1px 0 auto;
-      height: 2px;
-    }
+.control.row .line {
+  inset: -1px 0 auto;
+  height: 2px;
+}
 
-    .control.col .line {
-      inset: 0 auto 0 -1px;
-      width: 2px;
-    }
+.control.col .line {
+  inset: 0 auto 0 -1px;
+  width: 2px;
+}
 
-    .control.active .line {
-      opacity: 0.8;
-    }
+.control.active .line {
+  opacity: 0.8;
+}
 
-    .guide {
-      position: absolute;
-      width: var(--ui-affordance-guide-size, 4px);
-      height: var(--ui-affordance-guide-size, 4px);
-      border-radius: var(--ui-radius-round, 999px);
-      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-      opacity: var(--ui-affordance-guide-opacity, 0.42);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    }
+.guide {
+  position: absolute;
+  width: var(--ui-affordance-guide-size);
+  height: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+}
 
-    .control.row .guide {
-      left: -10px;
-      top: -2px;
-    }
+.control.row .guide {
+  left: -10px;
+  top: -2px;
+}
 
-    .control.col .guide {
-      left: -2px;
-      top: -10px;
-    }
+.control.col .guide {
+  left: -2px;
+  top: -10px;
+}
 
-    .control:has(.handle[data-ui-proximity="near"]) .guide,
-    .control.active .guide {
-      opacity: 0;
-    }
+.control:has(.handle[data-ui-proximity="near"]) .guide,
+.control.active .guide {
+  opacity: 0;
+}
 
-    .tooltip {
-      position: absolute;
-      z-index: 2;
-      top: calc(100% + 6px);
-      left: 50%;
-      width: max-content;
-      max-width: 14rem;
-      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-      border-radius: var(--ui-radius-1, 4px);
-      background: var(--ui-text-primary, #1a1a1a);
-      color: var(--ui-surface-elevated, #fff);
-      font-size: var(--ui-font-size-xs, 0.75rem);
-      font-weight: var(--ui-font-medium, 500);
-      line-height: var(--ui-line-height-md, 1.4);
-      opacity: 0;
-      transform: translateX(-50%);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-      pointer-events: none;
-    }
+.tooltip {
+  position: absolute;
+  z-index: 2;
+  top: calc(100% + 6px);
+  left: 50%;
+  width: max-content;
+  max-width: 14rem;
+  padding: var(--ui-space-1) var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-text-primary);
+  color: var(--ui-surface-elevated);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-md);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: none;
+}
 
-    .control.row .tooltip {
-      top: 50%;
-      left: auto;
-      right: calc(100% + 8px);
-      transform: translateY(-50%);
-    }
+.control.row .tooltip {
+  top: 50%;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
 
-    .control.active .tooltip,
-    .handle:focus-visible .tooltip {
-      opacity: 1;
-    }
+.control.active .tooltip,
+.handle:focus-visible .tooltip {
+  opacity: 1;
+}
 
-    .selector,
-    .cell-menu {
-      position: absolute;
-      z-index: 2;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      border: 1px solid transparent;
-      background: transparent;
-      color: var(--ui-text-secondary, #5c5c5c);
-      box-shadow: none;
-      pointer-events: auto;
-      cursor: pointer;
-      transition:
-        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    }
+.selector,
+.cell-menu {
+  position: absolute;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ui-text-secondary);
+  box-shadow: none;
+  pointer-events: auto;
+  cursor: pointer;
+  transition:
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+}
 
-    .selector:hover,
-    .cell-menu:hover {
-      background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
-      color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
-      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
-    }
+.selector:hover,
+.cell-menu:hover {
+  background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+}
 
-    .selector {
-      border-radius: var(--ui-radius-round, 999px);
-    }
+.selector {
+  border-radius: var(--ui-radius-round);
+}
 
-    .selector::before {
-      content: "";
-      position: absolute;
-      inset: 50% auto auto 50%;
-      border-radius: var(--ui-radius-round, 999px);
-      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-      opacity: var(--ui-affordance-guide-opacity, 0.42);
-      transform: translate(-50%, -50%);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-      pointer-events: none;
-    }
+.selector::before {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: none;
+}
 
-    .selector .glyph {
-      display: block;
-      width: 14px;
-      height: 14px;
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-      opacity: 0;
-      transform: scale(0.72);
-      transition:
-        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    }
+.selector .glyph {
+  display: block;
+  width: 14px;
+  height: 14px;
+  --ui-icon-size: 14px;
+  --ui-icon-stroke-width: 2;
+  opacity: 0;
+  transform: scale(0.72);
+  transition:
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+}
 
-    .selector:hover::before,
-    .selector:focus-visible::before {
-      opacity: 0;
-    }
+.selector:hover::before,
+.selector:focus-visible::before {
+  opacity: 0;
+}
 
-    .selector:hover .glyph,
-    .selector:focus-visible .glyph {
-      opacity: 1;
-      transform: scale(1);
-    }
+.selector:hover .glyph,
+.selector:focus-visible .glyph {
+  opacity: 1;
+  transform: scale(1);
+}
 
-    .selector.row {
-      left: -9px;
-      width: 18px;
-      height: 32px;
-      transform: translateY(-50%);
-    }
+.selector.row {
+  left: -9px;
+  width: 18px;
+  height: 32px;
+  transform: translateY(-50%);
+}
 
-    .selector.row::before {
-      width: 2px;
-      height: 16px;
-    }
+.selector.row::before {
+  width: 2px;
+  height: 16px;
+}
 
-    .selector.column {
-      top: -9px;
-      width: 32px;
-      height: 18px;
-      transform: translateX(-50%);
-    }
+.selector.column {
+  top: -9px;
+  width: 32px;
+  height: 18px;
+  transform: translateX(-50%);
+}
 
-    .selector.column::before {
-      width: 16px;
-      height: 2px;
-    }
+.selector.column::before {
+  width: 16px;
+  height: 2px;
+}
 
-    @media (hover: none), (pointer: coarse) {
-      .selector::before {
-        opacity: 0;
-      }
+@media (hover: none), (pointer: coarse) {
+  .selector::before {
+    opacity: 0;
+  }
 
-      .selector .glyph {
-        opacity: 1;
-        transform: none;
-      }
-    }
+  .selector .glyph {
+    opacity: 1;
+    transform: none;
+  }
+}
 
-    .cell-menu {
-      width: 24px;
-      height: 24px;
-      border-radius: var(--ui-radius-1, 4px);
-      background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
-    }
+.cell-menu {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ui-radius-sm);
+  background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
+}
 
-    .cell-menu {
-      --ui-icon-size: 15px;
-      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-    }
+.cell-menu {
+  --ui-icon-size: 15px;
+  --ui-icon-stroke-width: 2;
+}
 
-    [data-component~="ui-editor-table-overlay"][hidden] {
-      display: none;
-    }
+[data-component~="ui-editor-table-overlay"][hidden] {
+  display: none;
+}
 </style>