@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiEditorTableOverlay.vue

@@ -1,27 +1,18 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
+import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+  checkHydratedRoot,
+  createDispatch,
+  isInteger,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+  warnUnless,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -220,64 +211,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'add-row-before': [event: CustomEvent<{ readonly boundaryIndex: number }>]
@@ -381,7 +315,7 @@ const activeKey = ref('')
 let guardedPrevious: any
 const guarded = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['rowOffset'] == null || typeof hovered.value?.['rowOffset'] === 'string',
       '$hovered.rowOffset:hovered.rowOffset',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowOffset does not satisfy its declared type.',
@@ -392,7 +326,7 @@ const guarded = computed(() => {
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']),
       '$hovered.rowIndex:hovered.rowIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowIndex does not satisfy its declared type.',
@@ -403,7 +337,7 @@ const guardedBinding = computed(() => {
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']),
       '$hovered.columnIndex:hovered.columnIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.columnIndex does not satisfy its declared type.',
@@ -414,7 +348,7 @@ const guardedBinding2 = computed(() => {
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['columnOffset'] == null
       || typeof hovered.value?.['columnOffset'] === 'string',
       '$hovered.columnOffset:hovered.columnOffset',
@@ -426,7 +360,7 @@ const guardedBinding3 = computed(() => {
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']),
       '$hovered.rowIndex:hovered.rowIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowIndex does not satisfy its declared type.',
@@ -437,7 +371,7 @@ const guardedBinding4 = computed(() => {
 let guardedBinding5Previous: any
 const guardedBinding5 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']),
       '$hovered.columnIndex:hovered.columnIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.columnIndex does not satisfy its declared type.',
@@ -448,7 +382,7 @@ const guardedBinding5 = computed(() => {
 let guardedBinding6Previous: any
 const guardedBinding6 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       active.value?.['menuLeft'] == null || typeof active.value?.['menuLeft'] === 'string',
       '$active.menuLeft:active.menuLeft',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.menuLeft does not satisfy its declared type.',
@@ -459,7 +393,7 @@ const guardedBinding6 = computed(() => {
 let guardedBinding7Previous: any
 const guardedBinding7 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       active.value?.['menuTop'] == null || typeof active.value?.['menuTop'] === 'string',
       '$active.menuTop:active.menuTop',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.menuTop does not satisfy its declared type.',
@@ -470,7 +404,7 @@ const guardedBinding7 = computed(() => {
 let guardedBinding8Previous: any
 const guardedBinding8 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']),
       '$active.rowIndex:active.rowIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.rowIndex does not satisfy its declared type.',
@@ -481,7 +415,7 @@ const guardedBinding8 = computed(() => {
 let guardedBinding9Previous: any
 const guardedBinding9 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       active.value?.['columnIndex'] == null || Number.isInteger(active.value?.['columnIndex']),
       '$active.columnIndex:active.columnIndex',
       './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.columnIndex does not satisfy its declared type.',
@@ -494,22 +428,7 @@ provide('html-next:ui-editor-table-overlay:cols', cols)
 provide('html-next:ui-editor-table-overlay:hovered', hovered)
 provide('html-next:ui-editor-table-overlay:active', active)
 provide('html-next:ui-editor-table-overlay:activeKey', activeKey)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editor-table-overlay> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-table-overlay> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-table-overlay')
 
 const isAddRowBeforeDetail = (
   detail: unknown,
@@ -712,44 +631,11 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { rows, cols, hovered, active, activeKey },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-editor-table-overlay"
+    class="ui-editor-table-overlay"
     aria-label="Table controls"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
@@ -777,7 +663,7 @@ function uniqueKeys<T>(
             :data-boundary-index="control.index"
             :aria-label="control.label"
           >
-            <UiIcon name="plus" />
+            <UiIcon class="ui-icon" name="plus" />
             <span class="tooltip" role="tooltip">{{ control.label }}</span>
           </button>
         </div></KeyedBoundary>
@@ -801,7 +687,7 @@ function uniqueKeys<T>(
             :data-boundary-index="control.index"
             :aria-label="control.label"
           >
-            <UiIcon name="plus" />
+            <UiIcon class="ui-icon" name="plus" />
             <span class="tooltip" role="tooltip">{{ control.label }}</span>
           </button>
         </div></KeyedBoundary>
@@ -816,7 +702,7 @@ function uniqueKeys<T>(
         :data-column-index="guardedBinding2"
         :style="{ top: guarded }"
       >
-        <span class="glyph"><UiIcon name="grip-vertical" /></span>
+        <span class="glyph"><UiIcon class="ui-icon" name="grip-vertical" /></span>
       </button>
       <button
         type="button"
@@ -828,7 +714,7 @@ function uniqueKeys<T>(
         :data-column-index="guardedBinding5"
         :style="{ left: guardedBinding3 }"
       >
-        <span class="glyph"><UiIcon name="grip-horizontal" /></span>
+        <span class="glyph"><UiIcon class="ui-icon" name="grip-horizontal" /></span>
       </button></template>
     <button
       v-if="active"
@@ -841,352 +727,297 @@ function uniqueKeys<T>(
       :data-column-index="guardedBinding9"
       :style="{ left: guardedBinding6, top: guardedBinding7 }"
     >
-      <UiIcon name="chevron-down" />
+      <UiIcon class="ui-icon" name="chevron-down" />
     </button>
     <span class="drop-indicator" data-drop-indicator="" hidden="" aria-hidden="true"></span>
   </div>
 </template>
 
 <style scoped>
-[data-component~="ui-editor-table-overlay"] {
-  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;
-}
-
-.rows,
-.cols {
-  pointer-events: none;
-  position: absolute;
-}
-
-.rows {
-  inset: 0;
-  width: 100%;
-}
-
-.cols {
-  inset: 0;
-  height: 100%;
-}
-
-.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: var(--ui-border-width) 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-default-icon-size: 14px;
-  --_ui-default-icon-stroke-width: 2;
-}
-
-.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));
-  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: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-}
-
-.control.row {
-  left: 0;
-  width: 100%;
-  height: 0;
-}
-
-.control.row .handle {
-  top: -12px;
-  left: -30px;
-}
-
-.control.col {
-  top: 0;
-  width: 0;
-  height: 100%;
-}
-
-.control.col .handle {
-  top: -30px;
-  left: -12px;
-}
-
-.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: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
-  height: var(--ui-accent-line-width);
-}
-
-.control.col .line {
-  inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
-  width: var(--ui-accent-line-width);
-}
-
-.control.active .line {
-  opacity: 0.8;
-}
-
-.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: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-}
-
-.control.row .guide {
-  left: -10px;
-  top: -2px;
-}
-
-.control.col .guide {
-  left: -2px;
-  top: -10px;
-}
-
-.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) 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.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: var(--ui-border-width) 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-surface-muted);
-  color: 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);
-  touch-action: none;
-  cursor: grab;
-}
-
-.selector:active {
-  cursor: grabbing;
-}
-
-.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: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  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-default-icon-size: 14px;
-  --_ui-default-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 .glyph,
-.selector:focus-visible .glyph {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.selector.row {
-  left: -9px;
-  width: 18px;
-  height: 32px;
-  transform: translateY(-50%);
-}
-
-.selector.row::before {
-  width: 2px;
-  height: 16px;
-}
-
-.selector.column {
-  top: -9px;
-  width: 32px;
-  height: 18px;
-  transform: translateX(-50%);
-}
-
-.selector.column::before {
-  width: 16px;
-  height: 2px;
-}
-
-@media (hover: none), (pointer: coarse) {
-  .selector::before {
+@scope (.ui-editor-table-overlay) to (.ui-icon) {
+  :scope:where(:scope) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+  :scope:where(:scope) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+  .rows, .cols {
+    pointer-events: none;
+    position: absolute;
+  }
+  .rows {
+    inset: 0;
+    width: 100%;
+  }
+  .cols {
+    inset: 0;
+    height: 100%;
+  }
+  .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: var(--ui-border-width) 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-default-icon-size: 14px;
+    --_ui-default-icon-stroke-width: 2;
+  }
+  .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));
+    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: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
+  .control.row {
+    left: 0;
+    width: 100%;
+    height: 0;
+  }
+  .control.row .handle {
+    top: -12px;
+    left: -30px;
+  }
+  .control.col {
+    top: 0;
+    width: 0;
+    height: 100%;
+  }
+  .control.col .handle {
+    top: -30px;
+    left: -12px;
+  }
+  .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: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+    height: var(--ui-accent-line-width);
+  }
+  .control.col .line {
+    inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+    width: var(--ui-accent-line-width);
+  }
+  .control.active .line {
+    opacity: 0.8;
+  }
+  .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: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  }
+  .control.row .guide {
+    left: -10px;
+    top: -2px;
+  }
+  .control.col .guide {
+    left: -2px;
+    top: -10px;
+  }
+  .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) 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.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: var(--ui-border-width) 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-surface-muted);
+    color: 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);
+    touch-action: none;
+    cursor: grab;
+  }
+  .selector:active {
+    cursor: grabbing;
+  }
+  .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: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+    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-default-icon-size: 14px;
+    --_ui-default-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 .glyph, .selector:focus-visible .glyph {
     opacity: 1;
-    transform: none;
+    transform: scale(1);
   }
-}
-
-.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-default-icon-size: 15px;
-  --_ui-default-icon-stroke-width: 2;
-}
-
-.drop-indicator {
-  position: absolute;
-  z-index: 3;
-  background: var(--ui-accent-solid);
-  box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
-  pointer-events: none;
-}
-
-.drop-indicator.row {
-  left: 0;
-  width: 100%;
-  height: var(--ui-accent-line-width);
-}
-
-.drop-indicator.column {
-  top: 0;
-  width: var(--ui-accent-line-width);
-  height: 100%;
-}
-
-.drop-indicator[hidden] {
-  display: none;
-}
+  .selector.row {
+    left: -9px;
+    width: 18px;
+    height: 32px;
+    transform: translateY(-50%);
+  }
+  .selector.row::before {
+    width: 2px;
+    height: 16px;
+  }
+  .selector.column {
+    top: -9px;
+    width: 32px;
+    height: 18px;
+    transform: translateX(-50%);
+  }
+  .selector.column::before {
+    width: 16px;
+    height: 2px;
+  }
+  @media (hover: none), (pointer: coarse) {
+    .selector::before {
+      opacity: 0;
+    }
 
-[data-component~="ui-editor-table-overlay"][hidden] {
-  display: none;
+    .selector .glyph {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  .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-default-icon-size: 15px;
+    --_ui-default-icon-stroke-width: 2;
+  }
+  .drop-indicator {
+    position: absolute;
+    z-index: 3;
+    background: var(--ui-accent-solid);
+    box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
+    pointer-events: none;
+  }
+  .drop-indicator.row {
+    left: 0;
+    width: 100%;
+    height: var(--ui-accent-line-width);
+  }
+  .drop-indicator.column {
+    top: 0;
+    width: var(--ui-accent-line-width);
+    height: 100%;
+  }
+  .drop-indicator[hidden] {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>