@threadlabs/looma 0.5.0 → 0.5.2

package/vue/UiEditorTableToolbar.vue

@@ -1,339 +1,514 @@
-<!-- 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-toolbar/ui-editor-table-toolbar.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-toolbar/ui-editor-table-toolbar.js'
+import UiIcon from './UiIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    actions?:
+      readonly (
+        | 'align-left'
+        | 'align-center'
+        | 'align-right'
+        | 'background-none'
+        | 'background-gray'
+        | 'background-yellow'
+        | 'background-blue'
+        | 'background-green'
+        | 'background-red'
+        | 'add-row-before'
+        | 'add-row-after'
+        | 'add-column-before'
+        | 'add-column-after'
+        | 'clear-cells'
+        | 'merge-cells'
+        | 'split-cell'
+        | 'delete-row'
+        | 'delete-column'
+        | 'delete-table'
+      )[]
+    cellAlignment?: 'left' | 'center' | 'right'
+    cellBackground?: string
+    open?: boolean
+  }>(),
+  {
+    cellAlignment: 'left',
+    cellBackground: '',
+    open: false,
   },
-};
-
-const props = withDefaults(defineProps<{
-  actions?: readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null;
-  cellAlignment?: "left" | "center" | "right" | null;
-  cellBackground?: string | null;
-  open?: boolean | null;
-}>(), {
-  cellAlignment: "left",
-  cellBackground: "",
-  open: false,
-});
+)
 const emit = defineEmits<{
-  "action": [detail: { readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_alignments = ref<any>([]);
-const state_structure = ref<any>([]);
-const state_swatches = ref<any>([]);
-const state_sections = ref<any>([]);
-const state_hasOverflow = ref<any>(false);
-const state_overflowOpen = ref<any>(false);
+  action: [
+    detail: {
+      readonly action:
+        | 'align-left'
+        | 'align-center'
+        | 'align-right'
+        | 'background-none'
+        | 'background-gray'
+        | 'background-yellow'
+        | 'background-blue'
+        | 'background-green'
+        | 'background-red'
+        | 'add-row-before'
+        | 'add-row-after'
+        | 'add-column-before'
+        | 'add-column-after'
+        | 'clear-cells'
+        | 'merge-cells'
+        | 'split-cell'
+        | 'delete-row'
+        | 'delete-column'
+        | 'delete-table'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const alignments = ref<
+  { action: 'align-left' | 'align-center' | 'align-right'; label: string; active: boolean }[]
+>([])
+const structure = ref<
+  { action: 'add-row-after' | 'add-column-after'; label: string; icon: string }[]
+>([])
+const swatches = ref<{ action: string; label: string; color: string; selected: boolean }[]>([])
+const sections = ref<
+  { heading: string; items: { action: string; label: string; icon: string; danger: boolean }[] }[]
+>([])
+const hasOverflow = ref(false)
+const overflowOpen = ref(false)
 
 /** 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"] === "align-left" || (detail as Record<string, unknown>)["action"] === "align-center" || (detail as Record<string, unknown>)["action"] === "align-right" || (detail as Record<string, unknown>)["action"] === "background-none" || (detail as Record<string, unknown>)["action"] === "background-gray" || (detail as Record<string, unknown>)["action"] === "background-yellow" || (detail as Record<string, unknown>)["action"] === "background-blue" || (detail as Record<string, unknown>)["action"] === "background-green" || (detail as Record<string, unknown>)["action"] === "background-red" || (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" || (detail as Record<string, unknown>)["action"] === "clear-cells" || (detail as Record<string, unknown>)["action"] === "merge-cells" || (detail as Record<string, unknown>)["action"] === "split-cell" || (detail as Record<string, unknown>)["action"] === "delete-row" || (detail as Record<string, unknown>)["action"] === "delete-column" || (detail as Record<string, unknown>)["action"] === "delete-table") && Object.keys(detail as object).every((key) => ["action"].includes(key))),
-  };
+    action: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && ((detail as Record<string, unknown>)['action'] === 'align-left'
+        || (detail as Record<string, unknown>)['action'] === 'align-center'
+        || (detail as Record<string, unknown>)['action'] === 'align-right'
+        || (detail as Record<string, unknown>)['action'] === 'background-none'
+        || (detail as Record<string, unknown>)['action'] === 'background-gray'
+        || (detail as Record<string, unknown>)['action'] === 'background-yellow'
+        || (detail as Record<string, unknown>)['action'] === 'background-blue'
+        || (detail as Record<string, unknown>)['action'] === 'background-green'
+        || (detail as Record<string, unknown>)['action'] === 'background-red'
+        || (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'
+        || (detail as Record<string, unknown>)['action'] === 'clear-cells'
+        || (detail as Record<string, unknown>)['action'] === 'merge-cells'
+        || (detail as Record<string, unknown>)['action'] === 'split-cell'
+        || (detail as Record<string, unknown>)['action'] === 'delete-row'
+        || (detail as Record<string, unknown>)['action'] === 'delete-column'
+        || (detail as Record<string, unknown>)['action'] === 'delete-table')
+      && Object.keys(detail as object).every((key) => ['action'].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 === "alignments") return state_alignments.value;
-  if (name === "structure") return state_structure.value;
-  if (name === "swatches") return state_swatches.value;
-  if (name === "sections") return state_sections.value;
-  if (name === "hasOverflow") return state_hasOverflow.value;
-  if (name === "overflowOpen") return state_overflowOpen.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'alignments') return alignments.value
+  if (name === 'structure') return structure.value
+  if (name === 'swatches') return swatches.value
+  if (name === 'sections') return sections.value
+  if (name === 'hasOverflow') return hasOverflow.value
+  if (name === 'overflowOpen') return overflowOpen.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "alignments") { state_alignments.value = value; return true; }
-  if (name === "structure") { state_structure.value = value; return true; }
-  if (name === "swatches") { state_swatches.value = value; return true; }
-  if (name === "sections") { state_sections.value = value; return true; }
-  if (name === "hasOverflow") { state_hasOverflow.value = value; return true; }
-  if (name === "overflowOpen") { state_overflowOpen.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'alignments') {
+    alignments.value = value as never
+    return true
+  }
+  if (name === 'structure') {
+    structure.value = value as never
+    return true
+  }
+  if (name === 'swatches') {
+    swatches.value = value as never
+    return true
+  }
+  if (name === 'sections') {
+    sections.value = value as never
+    return true
+  }
+  if (name === 'hasOverflow') {
+    hasOverflow.value = value as never
+    return true
+  }
+  if (name === 'overflowOpen') {
+    overflowOpen.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-toolbar" role="toolbar" aria-label="Table actions" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><template v-if="hn.t(state_alignments)"><div class="group" role="group" aria-label="Cell alignment"><template v-for="(item, index) in hn.shape(state_alignments, undefined, [], undefined)" :key="(item)?.action"><button type="button" class="icon-button" :data-action="hn.attr((item)?.action)" :aria-label="hn.enumerated((item)?.label)" :title="hn.attr((item)?.label)" :aria-pressed="hn.enumerated((item)?.active)" :class="{ 'active': hn.t((item)?.active) }"><UiIcon :name="(item)?.action"></UiIcon></button></template></div></template><template v-if="hn.t((hn.t(state_alignments) && hn.t(state_structure)))"><div class="sep" aria-hidden="true"></div></template><template v-if="hn.t(state_structure)"><div class="group" role="group" aria-label="Table structure"><template v-for="(item, index) in hn.shape(state_structure, undefined, [], undefined)" :key="(item)?.action"><button type="button" :data-action="hn.attr((item)?.action)"><UiIcon :name="(item)?.icon"></UiIcon><span>{{ hn.text((item)?.label) }}</span></button></template></div></template><template v-if="hn.t((hn.t((hn.t(state_alignments) || hn.t(state_structure))) && hn.t(state_hasOverflow)))"><div class="sep" aria-hidden="true"></div></template><template v-if="hn.t(state_hasOverflow)"><div class="overflow"><button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" :aria-expanded="hn.enumerated(state_overflowOpen)"><UiIcon name="table"></UiIcon><span>Table options</span><span class="chevron"><UiIcon name="chevron-down"></UiIcon></span></button><template v-if="hn.t(state_overflowOpen)"><div class="menu" role="menu" aria-label="More table actions"><template v-if="hn.t(state_swatches)"><div class="menu-section" role="none"><div class="menu-heading" role="presentation">Background</div><div class="swatches" role="group" aria-label="Cell background"><template v-for="(swatch, index) in hn.shape(state_swatches, undefined, [], undefined)" :key="(swatch)?.action"><button type="button" class="swatch-button" role="menuitemradio" :aria-checked="hn.enumerated((swatch)?.selected)" :data-action="hn.attr((swatch)?.action)" :class="{ 'selected': hn.t((swatch)?.selected) }"><span class="swatch" :class="{ 'default': hn.t(!hn.t((swatch)?.color)) }" :style="{ '--ui-editor-table-toolbar-swatch': hn.text((swatch)?.color) }"></span><span>{{ hn.text((swatch)?.label) }}</span></button></template></div></div></template><template v-for="(section, index) in hn.shape(state_sections, undefined, [], undefined)" :key="(section)?.heading"><div class="menu-section divided" role="none"><div class="menu-heading" role="presentation">{{ hn.text((section)?.heading) }}</div><template v-for="(item, index) in hn.shape((section)?.items, undefined, [], undefined)" :key="(item)?.action"><button type="button" role="menuitem" :data-action="hn.attr((item)?.action)" :class="{ 'danger': hn.t((item)?.danger) }"><UiIcon :name="(item)?.icon"></UiIcon><span>{{ hn.text((item)?.label) }}</span></button></template></div></template></div></template></div></template></div>
+  <div
+    data-component="ui-editor-table-toolbar"
+    role="toolbar"
+    aria-label="Table actions"
+    v-bind="$attrs"
+    :hidden="!open"
+    ref="root"
+  >
+    <div v-if="alignments.length" class="group" role="group" aria-label="Cell alignment">
+      <button
+        v-for="item in alignments"
+        :key="item.action"
+        type="button"
+        class="icon-button"
+        :data-action="item.action"
+        :aria-label="item.label"
+        :title="item.label"
+        :aria-pressed="item.active"
+        :class="{ active: item.active }"
+      >
+        <UiIcon :name="item.action" />
+      </button>
+    </div>
+    <div v-if="alignments.length && structure.length" class="sep" aria-hidden="true"></div>
+    <div v-if="structure.length" class="group" role="group" aria-label="Table structure">
+      <button v-for="item in structure" :key="item.action" type="button" :data-action="item.action">
+        <UiIcon :name="item.icon" />
+        <span>{{ item.label }}</span>
+      </button>
+    </div>
+    <div
+      v-if="(alignments.length || structure.length) && hasOverflow"
+      class="sep"
+      aria-hidden="true"
+    >
+    </div>
+    <div v-if="hasOverflow" class="overflow">
+      <button
+        type="button"
+        class="more"
+        data-action="toggle-overflow"
+        aria-haspopup="menu"
+        :aria-expanded="overflowOpen"
+      >
+        <UiIcon name="table" />
+        <span>Table options</span>
+        <span class="chevron"><UiIcon name="chevron-down" /></span>
+      </button>
+      <div v-if="overflowOpen" class="menu" role="menu" aria-label="More table actions">
+        <div v-if="swatches.length" class="menu-section" role="none">
+          <div class="menu-heading" role="presentation">Background</div>
+          <div class="swatches" role="group" aria-label="Cell background">
+            <button
+              v-for="swatch in swatches"
+              :key="swatch.action"
+              type="button"
+              class="swatch-button"
+              role="menuitemradio"
+              :aria-checked="swatch.selected"
+              :data-action="swatch.action"
+              :class="{ selected: swatch.selected }"
+            >
+              <span
+                class="swatch"
+                :class="{ default: !swatch.color }"
+                :style="{ '--ui-editor-table-toolbar-swatch': swatch.color }"
+              ></span>
+              <span>{{ swatch.label }}</span>
+            </button>
+          </div>
+        </div>
+        <div
+          v-for="section in sections"
+          :key="section.heading"
+          class="menu-section divided"
+          role="none"
+        >
+          <div class="menu-heading" role="presentation">{{ section.heading }}</div>
+          <button
+            v-for="item in section.items"
+            :key="item.action"
+            type="button"
+            role="menuitem"
+            :data-action="item.action"
+            :class="{ danger: item.danger }"
+          >
+            <UiIcon :name="item.icon" />
+            <span>{{ item.label }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] {
-      min-width: max-content;
-      min-height: 100%;
-      padding: 0;
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      backdrop-filter: none;
-    }
+  min-width: max-content;
+  min-height: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
 
-    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button {
-      min-height: 44px;
-      background: transparent;
-    }
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button {
+  min-height: 44px;
+  background: transparent;
+}
 
-    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
-    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-    }
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+}
 
-    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
-      top: auto;
-      right: 0;
-      bottom: calc(100% + var(--ui-space-2, 8px));
-      max-height: min(50dvh, 22rem);
-      overflow-y: auto;
-      overscroll-behavior: contain;
-    }
-    [data-component~="ui-editor-table-toolbar"] {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1, 4px);
-      padding: var(--ui-space-1, 4px);
-      background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: calc(var(--ui-radius-md, 6px) + 2px);
-      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-      backdrop-filter: blur(10px);
-    }
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
+  top: auto;
+  right: 0;
+  bottom: calc(100% + var(--ui-space-2, 8px));
+  max-height: min(50dvh, 22rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+[data-component~="ui-editor-table-toolbar"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1, 4px);
+  padding: var(--ui-space-1, 4px);
+  background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  backdrop-filter: blur(10px);
+}
 
-    .group {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-      overflow: hidden;
-    }
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+}
 
-    .sep {
-      width: 1px;
-      align-self: stretch;
-      background: var(--ui-border, #e5e7eb);
-    }
+.sep {
+  width: 1px;
+  align-self: stretch;
+  background: var(--ui-border, #e5e7eb);
+}
 
-    .overflow {
-      position: relative;
-    }
+.overflow {
+  position: relative;
+}
 
-    [data-component~="ui-editor-table-toolbar"] button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--ui-space-1-5, 6px);
-      min-height: 32px;
-      border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
-      background: transparent;
-      color: var(--ui-text-primary, #111827);
-      cursor: pointer;
-      font-size: var(--ui-text-sm, 0.875rem);
-      font-weight: 500;
-      line-height: 1;
-      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
-      white-space: nowrap;
-    }
+[data-component~="ui-editor-table-toolbar"] button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-1-5, 6px);
+  min-height: 32px;
+  border: 0;
+  border-radius: var(--ui-radius-sm, 4px);
+  background: transparent;
+  color: var(--ui-text-primary, #111827);
+  cursor: pointer;
+  font-size: var(--ui-text-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1;
+  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+  white-space: nowrap;
+}
 
-    [data-component~="ui-editor-table-toolbar"] button:hover {
-      background: var(--ui-surface-hover, #f3f4f6);
-    }
+[data-component~="ui-editor-table-toolbar"] button:hover {
+  background: var(--ui-surface-hover, #f3f4f6);
+}
 
-    [data-component~="ui-editor-table-toolbar"] button.active {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-      color: var(--ui-accent-active, #003d7a);
-    }
+[data-component~="ui-editor-table-toolbar"] button.active {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+  color: var(--ui-accent-active, #003d7a);
+}
 
-    .group button {
-      border-radius: var(--ui-radius-sm, 4px);
-    }
+.group button {
+  border-radius: var(--ui-radius-sm, 4px);
+}
 
-    .group button + button {
-      border-left: 0;
-    }
+.group button + button {
+  border-left: 0;
+}
 
-    [data-component~="ui-editor-table-toolbar"] .more {
-      border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
-    }
+[data-component~="ui-editor-table-toolbar"] .more {
+  border: 0;
+  border-radius: var(--ui-radius-sm, 4px);
+}
 
-    [data-component~="ui-editor-table-toolbar"] button.danger {
-      color: var(--ui-danger, #dc2626);
-    }
+[data-component~="ui-editor-table-toolbar"] button.danger {
+  color: var(--ui-danger, #dc2626);
+}
 
-    [data-component~="ui-editor-table-toolbar"] {
-      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-    }
+[data-component~="ui-editor-table-toolbar"] {
+  --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+  --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+}
 
-    .chevron {
-      display: inline-flex;
-      --ui-icon-size: 0.875rem;
-    }
+.chevron {
+  display: inline-flex;
+  --ui-icon-size: 0.875rem;
+}
 
-    [data-component~="ui-editor-table-toolbar"] .icon-button {
-      width: 32px;
-      padding-inline: 0;
-    }
+[data-component~="ui-editor-table-toolbar"] .icon-button {
+  width: 32px;
+  padding-inline: 0;
+}
 
-    .menu {
-      position: absolute;
-      top: calc(100% + var(--ui-space-2, 8px));
-      right: 0;
-      min-width: 12rem;
-      padding: var(--ui-space-1, 4px);
-      background: var(--ui-surface, #fff);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-md, 6px);
-      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      z-index: 2;
-    }
+.menu {
+  position: absolute;
+  top: calc(100% + var(--ui-space-2, 8px));
+  right: 0;
+  min-width: 12rem;
+  padding: var(--ui-space-1, 4px);
+  background: var(--ui-surface, #fff);
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: var(--ui-radius-md, 6px);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 2;
+}
 
-    .menu-section + .menu-section {
-      margin-top: var(--ui-space-1, 4px);
-      padding-top: var(--ui-space-1, 4px);
-      border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
-    }
+.menu-section + .menu-section {
+  margin-top: var(--ui-space-1, 4px);
+  padding-top: var(--ui-space-1, 4px);
+  border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+}
 
-    .menu-heading {
-      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-      font-size: 0.6875rem;
-      font-weight: 700;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      color: var(--ui-text-muted, #6b7280);
-    }
+.menu-heading {
+  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ui-text-muted, #6b7280);
+}
 
-    .menu button {
-      display: flex;
-      justify-content: flex-start;
-      width: 100%;
-      text-align: left;
-    }
+.menu button {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: left;
+}
 
-    .swatches {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 2px;
-    }
+.swatches {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2px;
+}
 
-    [data-component~="ui-editor-table-toolbar"] .swatch-button {
-      gap: var(--ui-space-1, 4px);
-      justify-content: flex-start;
-    }
+[data-component~="ui-editor-table-toolbar"] .swatch-button {
+  gap: var(--ui-space-1, 4px);
+  justify-content: flex-start;
+}
 
-    .swatch {
-      width: 14px;
-      height: 14px;
-      flex: 0 0 14px;
-      border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
-      border-radius: 3px;
-      background: var(--ui-editor-table-toolbar-swatch);
-    }
+.swatch {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+  border-radius: 3px;
+  background: var(--ui-editor-table-toolbar-swatch);
+}
 
-    .swatch.default {
-      background:
-        linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
-        var(--ui-surface, #fff);
-    }
+.swatch.default {
+  background:
+    linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+    var(--ui-surface, #fff);
+}
 
-    .swatch-button.selected {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-    }
+.swatch-button.selected {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+}
 
-    [data-component~="ui-editor-table-toolbar"][hidden] {
-      display: none;
-    }
+[data-component~="ui-editor-table-toolbar"][hidden] {
+  display: none;
+}
 </style>