@abraca/nuxt 1.6.0 → 1.8.0

package/dist/runtime/components/renderers/gallery/AGalleryItemCard.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { computed, ref } from "vue";
+import { getMetaColor } from "../../../utils/getMetaColor";
+const props = defineProps({
+  item: { type: Object, required: true },
+  galleryAspect: { type: String, required: true },
+  cardStyle: { type: String, required: true },
+  showLabels: { type: Boolean, required: true },
+  isDragging: { type: Boolean, required: true },
+  isDragOver: { type: Boolean, required: true },
+  focusers: { type: Array, required: true },
+  canWrite: { type: Boolean, required: true },
+  renameId: { type: [String, null], required: true },
+  renameValue: { type: String, required: true }
+});
+const emit = defineEmits(["commit-rename", "cancel-rename", "update:rename-value"]);
+const meta = computed(() => props.item.meta ?? {});
+const metaColor = computed(() => getMetaColor(meta.value));
+const coverFailed = ref(false);
+const hasCover = computed(() => !!meta.value.coverUploadId && !coverFailed.value);
+const hasIcon = computed(() => !!meta.value.icon);
+const hasColor = computed(() => !!metaColor.value);
+const ratingStars = computed(() => {
+  const r = meta.value.rating ?? 0;
+  return r > 0 ? r : 0;
+});
+const visibleTags = computed(() => {
+  const tags = meta.value.tags ?? [];
+  return tags.slice(0, 2);
+});
+const overflowTagCount = computed(() => {
+  const tags = meta.value.tags ?? [];
+  return Math.max(0, tags.length - 2);
+});
+const formattedDate = computed(() => {
+  const raw = meta.value.datetimeStart ?? meta.value.dateStart ?? meta.value.dateTaken;
+  if (!raw) return null;
+  try {
+    const d = new Date(raw);
+    return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  } catch {
+    return null;
+  }
+});
+const priority = computed(() => meta.value.priority ?? 0);
+function onCoverError() {
+  coverFailed.value = true;
+}
+</script>
+
+<template>
+  <div
+    class="group relative rounded-lg border border-(--ui-border) hover:border-(--ui-primary) transition-colors overflow-hidden cursor-pointer"
+    :class="{
+  'opacity-40 scale-95': isDragging,
+  'ring-2 ring-(--ui-primary)/40': isDragOver
+}"
+    :style="[
+  focusers.length ? { boxShadow: `0 0 0 2px ${focusers[0].user?.color ?? '#888'}` } : {},
+  metaColor ? { borderBottom: `3px solid ${metaColor}` } : {}
+]"
+  >
+    <!-- Remote user badge -->
+    <div
+      v-if="focusers.length"
+      class="absolute top-1 right-1 z-10 flex gap-0.5"
+    >
+      <span
+        v-for="f in focusers"
+        :key="f.clientId"
+        class="text-[10px] leading-none px-1.5 py-0.5 rounded-full text-white truncate max-w-20"
+        :style="{ backgroundColor: f.user?.color ?? '#888' }"
+      >
+        {{ f.user?.name ?? "User" }}
+      </span>
+    </div>
+
+    <!-- Cover zone -->
+    <div
+      class="bg-(--ui-bg-elevated) flex items-center justify-center overflow-hidden relative"
+      :style="{ aspectRatio: galleryAspect }"
+    >
+      <AGalleryCoverImage
+        v-if="hasCover"
+        :upload-id="meta.coverUploadId"
+        :doc-id="meta.coverDocId ?? item.id"
+        :mime-type="meta.coverMimeType"
+        class="w-full h-full"
+        @error="onCoverError"
+      />
+
+      <!-- Icon fallback (with optional color tint) -->
+      <div
+        v-else-if="hasIcon"
+        class="w-full h-full flex items-center justify-center"
+        :style="metaColor ? { backgroundColor: `${metaColor}18` } : {}"
+      >
+        <UIcon
+          :name="`i-lucide-${meta.icon}`"
+          class="size-12"
+          :style="metaColor ? { color: metaColor } : {}"
+          :class="!metaColor ? 'text-(--ui-text-dimmed) opacity-60' : ''"
+        />
+      </div>
+
+      <!-- Color swatch fallback -->
+      <div
+        v-else-if="hasColor"
+        class="w-full h-full"
+        :style="{ backgroundColor: `${metaColor}20` }"
+      >
+        <div class="w-full h-full flex items-center justify-center">
+          <div
+            class="size-10 rounded-full"
+            :style="{ backgroundColor: metaColor }"
+          />
+        </div>
+      </div>
+
+      <!-- Default placeholder -->
+      <UIcon
+        v-else
+        name="i-lucide-file-text"
+        class="size-8 text-(--ui-text-dimmed) opacity-40"
+      />
+
+      <!-- Detailed overlays -->
+      <template v-if="cardStyle === 'detailed'">
+        <div
+          v-if="ratingStars > 0"
+          class="absolute right-1.5 flex gap-px bg-black/40 rounded px-1 py-0.5"
+          :class="focusers.length ? 'top-7' : 'top-1.5'"
+        >
+          <UIcon
+            v-for="i in ratingStars"
+            :key="i"
+            name="i-lucide-star"
+            class="size-3 text-amber-400"
+          />
+        </div>
+
+        <div
+          v-if="visibleTags.length"
+          class="absolute bottom-1.5 left-1.5 flex gap-1 max-w-[70%]"
+        >
+          <UBadge
+            v-for="tag in visibleTags"
+            :key="tag"
+            size="xs"
+            variant="subtle"
+            class="truncate max-w-24 backdrop-blur-sm"
+          >
+            {{ tag }}
+          </UBadge>
+          <UBadge
+            v-if="overflowTagCount > 0"
+            size="xs"
+            variant="subtle"
+            class="backdrop-blur-sm"
+          >
+            +{{ overflowTagCount }}
+          </UBadge>
+        </div>
+
+        <UBadge
+          v-if="formattedDate"
+          size="xs"
+          variant="subtle"
+          class="absolute bottom-1.5 right-1.5 backdrop-blur-sm"
+        >
+          {{ formattedDate }}
+        </UBadge>
+      </template>
+    </div>
+
+    <!-- Label zone -->
+    <div
+      v-if="showLabels"
+      class="p-2 border-t border-(--ui-border) flex items-center justify-between gap-1"
+    >
+      <div class="flex-1 min-w-0">
+        <UInput
+          v-if="canWrite && renameId === item.id"
+          :model-value="renameValue"
+          size="xs"
+          variant="none"
+          class="flex-1 -mx-1"
+          autofocus
+          @update:model-value="emit('update:rename-value', $event)"
+          @keydown.enter="emit('commit-rename')"
+          @keydown.escape="emit('cancel-rename')"
+          @blur="emit('commit-rename')"
+          @click.stop
+        />
+        <template v-else>
+          <div class="flex items-center gap-1">
+            <UIcon
+              v-if="hasIcon && hasCover"
+              :name="`i-lucide-${meta.icon}`"
+              class="size-3.5 shrink-0 text-(--ui-text-muted)"
+            />
+            <p class="text-xs font-medium truncate">
+              {{ item.label }}
+            </p>
+            <UIcon
+              v-if="priority >= 2"
+              name="i-lucide-flag"
+              class="size-3 shrink-0"
+              :class="{
+  'text-amber-400': priority === 2,
+  'text-red-400': priority >= 3
+}"
+            />
+          </div>
+          <p
+            v-if="meta.subtitle"
+            class="text-[10px] text-(--ui-text-dimmed) truncate mt-0.5"
+          >
+            {{ meta.subtitle }}
+          </p>
+        </template>
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/gallery/AGalleryItemCard.vue.d.ts

@@ -0,0 +1,40 @@
+import type { TreeEntry } from '../../../composables/useChildTree.js';
+type __VLS_Props = {
+    item: TreeEntry;
+    galleryAspect: string;
+    cardStyle: string;
+    showLabels: boolean;
+    isDragging: boolean;
+    isDragOver: boolean;
+    focusers: Array<{
+        clientId: number;
+        user?: {
+            name?: string;
+            color?: string;
+        };
+    }>;
+    canWrite: boolean;
+    renameId: string | null;
+    renameValue: string;
+};
+declare var __VLS_62: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_62) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "commit-rename": () => any;
+    "cancel-rename": () => any;
+    "update:rename-value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onCommit-rename"?: (() => any) | undefined;
+    "onCancel-rename"?: (() => any) | undefined;
+    "onUpdate:rename-value"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/renderers/spatial/SpatialTransformInputs.d.vue.ts

@@ -0,0 +1,16 @@
+/**
+ * SpatialTransformInputs — internal sub-component for ASpatialRenderer.
+ *
+ * Position / Rotation / Scale numeric inputs for a selected spatial object.
+ * Ported from cou-sh/app/components/spatial/SpatialTransformInputs.vue.
+ * Not auto-imported.
+ */
+import type { TreeEntry } from '../../../composables/useChildTree.js';
+import type { useChildTree } from '../../../composables/useChildTree.js';
+type __VLS_Props = {
+    entry: TreeEntry;
+    tree: ReturnType<typeof useChildTree>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/spatial/SpatialTransformInputs.vue

@@ -0,0 +1,66 @@
+<script setup>
+const props = defineProps({
+  entry: { type: Object, required: true },
+  tree: { type: null, required: true }
+});
+function update(key, value) {
+  const num = Number.parseFloat(value);
+  if (Number.isFinite(num)) {
+    props.tree.updateMeta(props.entry.id, { [key]: num });
+  }
+}
+const rows = [
+  { label: "Pos", fields: [
+    { key: "spX", axis: "X" },
+    { key: "spY", axis: "Y" },
+    { key: "spZ", axis: "Z" }
+  ] },
+  { label: "Rot", fields: [
+    { key: "spRX", axis: "X" },
+    { key: "spRY", axis: "Y" },
+    { key: "spRZ", axis: "Z" }
+  ] },
+  { label: "Scale", fields: [
+    { key: "spSX", axis: "X" },
+    { key: "spSY", axis: "Y" },
+    { key: "spSZ", axis: "Z" }
+  ] }
+];
+function getVal(key) {
+  const v = props.entry.meta?.[key];
+  if (typeof v === "number") return v;
+  if (key.startsWith("spS")) return 1;
+  return 0;
+}
+</script>
+
+<template>
+  <div class="sp-transform-inputs">
+    <div
+      v-for="row in rows"
+      :key="row.label"
+      class="sp-row"
+    >
+      <span class="sp-label">{{ row.label }}</span>
+      <div
+        v-for="f in row.fields"
+        :key="f.key"
+        class="sp-field"
+      >
+        <span class="sp-axis">{{ f.axis }}</span>
+        <UInput
+          type="number"
+          size="xs"
+          :model-value="String(getVal(f.key))"
+          step="0.1"
+          class="sp-input"
+          @update:model-value="update(f.key, String($event))"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sp-transform-inputs{display:flex;flex-direction:column;gap:4px;margin-top:8px}.sp-row{align-items:center;display:flex;gap:4px}.sp-label{color:var(--ui-text-dimmed);flex-shrink:0;font-size:.7rem;font-weight:600;width:36px}.sp-field{align-items:center;display:flex;flex:1;gap:2px;min-width:0}.sp-axis{color:var(--ui-text-muted);flex-shrink:0;font-size:.65rem;font-weight:600;text-align:center;width:10px}.sp-input{flex:1;min-width:0}.sp-input :deep(input){font-size:.7rem;padding:2px 4px;text-align:right}
+</style>

package/dist/runtime/components/renderers/spatial/SpatialTransformInputs.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * SpatialTransformInputs — internal sub-component for ASpatialRenderer.
+ *
+ * Position / Rotation / Scale numeric inputs for a selected spatial object.
+ * Ported from cou-sh/app/components/spatial/SpatialTransformInputs.vue.
+ * Not auto-imported.
+ */
+import type { TreeEntry } from '../../../composables/useChildTree.js';
+import type { useChildTree } from '../../../composables/useChildTree.js';
+type __VLS_Props = {
+    entry: TreeEntry;
+    tree: ReturnType<typeof useChildTree>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/ATableFlatMode.d.vue.ts

@@ -1,4 +1,5 @@
 import type { useTableView } from '../../../composables/useTableView.js';
+import type { AbracadabraLocale } from '../../../locale.js';
 type __VLS_Props = {
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
     tableView: ReturnType<typeof useTableView>;
@@ -6,6 +7,7 @@ type __VLS_Props = {
     myClientId: number;
     setLocalState: (state: Record<string, any>) => void;
     editable?: boolean;
+    labels?: Partial<AbracadabraLocale['renderers']['table']>;
 };
 declare function addRow(): void;
 declare function addMetaColumn(): void;

package/dist/runtime/components/renderers/table/ATableFlatMode.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, computed, onBeforeUnmount } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { useTouchDrag } from "../../../composables/useTouchDrag";
+import { DEFAULT_LOCALE } from "../../../locale";
 import ATableColumnHeader from "./ATableColumnHeader.vue";
 import ATableCell from "./cells/ATableCell.vue";
 const props = defineProps({
@@ -9,9 +11,14 @@ const props = defineProps({
   states: { type: Array, required: true },
   myClientId: { type: Number, required: true },
   setLocalState: { type: Function, required: true },
-  editable: { type: Boolean, required: false }
+  editable: { type: Boolean, required: false },
+  labels: { type: Object, required: false }
 });
 const emit = defineEmits(["openNode"]);
+const labels = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.table,
+  ...props.labels ?? {}
+}));
 function camelToTitle(s) {
   return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
 }
@@ -219,9 +226,96 @@ function cellEditor(rowId, fieldId) {
     (s) => s["table:editing"]?.rowId === rowId && s["table:editing"]?.fieldId === fieldId
   );
 }
+function onRowPointerEnter(rowId) {
+  if (rowDragId.value) return;
+  props.setLocalState({ "table:hovering": rowId });
+}
+function onRowPointerLeave() {
+  if (rowDragId.value) return;
+  props.setLocalState({ "table:hovering": null });
+}
+function rowHoverers(rowId) {
+  const result = [];
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:hovering"] === rowId && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+function rowEditors(rowId) {
+  const result = [];
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:editing"]?.rowId === rowId && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+function remoteResizeColor(colId) {
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:resizing"] === colId && s.user) {
+      return s.user.color ?? null;
+    }
+  }
+  return null;
+}
+const ctxRow = ref(null);
+const ctxPos = ref({ x: 0, y: 0 });
+const showCtx = ref(false);
+function onRowContextMenu(e, row) {
+  if (props.editable === false) return;
+  e.preventDefault();
+  ctxRow.value = row;
+  ctxPos.value = { x: e.clientX, y: e.clientY };
+  showCtx.value = true;
+}
+useEventListener(typeof window !== "undefined" ? window : null, "pointerdown", () => {
+  showCtx.value = false;
+});
+let longPressTimer = null;
+function startLongPress(e, row) {
+  if (props.editable === false) return;
+  longPressTimer = setTimeout(() => {
+    const touch = e.touches[0];
+    if (touch) {
+      ctxRow.value = row;
+      ctxPos.value = { x: touch.clientX, y: touch.clientY };
+      showCtx.value = true;
+    }
+    longPressTimer = null;
+  }, 500);
+}
+function cancelLongPress() {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer);
+    longPressTimer = null;
+  }
+}
+const ctxItems = computed(() => {
+  if (!ctxRow.value) return [];
+  const row = ctxRow.value;
+  return [
+    [
+      { label: labels.value.open, icon: "i-lucide-external-link", onSelect: () => emit("openNode", row.id, row.label) },
+      { label: labels.value.rename, icon: "i-lucide-pencil", onSelect: () => {
+        const nameCol = allColumns.value.find((c) => c.type === "label");
+        if (nameCol) startEdit(row, nameCol);
+      } },
+      { label: labels.value.duplicate, icon: "i-lucide-copy", onSelect: () => props.tree.duplicateEntry(row.id) }
+    ],
+    [
+      { label: labels.value.delete, icon: "i-lucide-trash-2", color: "error", onSelect: () => deleteRow(row) }
+    ]
+  ];
+});
 onBeforeUnmount(() => {
   props.setLocalState({
     "table:editing": null,
+    "table:hovering": null,
     "table:resizing": null
   });
 });
@@ -239,12 +333,12 @@ defineExpose({ addMetaColumn, addRow });
         class="size-10 text-(--ui-text-dimmed)"
       />
       <p class="text-sm text-(--ui-text-muted)">
-        No rows yet
+        {{ labels.noRows }}
       </p>
       <UButton
         v-if="editable !== false"
         icon="i-lucide-plus"
-        label="Add row"
+        :label="labels.addRow"
         size="sm"
         @click="addRow"
       />
@@ -278,6 +372,7 @@ defineExpose({ addMetaColumn, addRow });
   colDragOverId === col.id ? 'border-l-2 border-(--ui-primary)' : '',
   colDragId === col.id ? 'opacity-30' : ''
 ]"
+              :style="remoteResizeColor(col.id) ? { backgroundColor: remoteResizeColor(col.id) + '20' } : {}"
               @rename="renameColumn(col, $event)"
               @delete="deleteColumn(col)"
               @sort="handleSort(col.id === '__label' ? '__label' : col.metaKey ?? col.id, $event)"
@@ -299,8 +394,29 @@ defineExpose({ addMetaColumn, addRow });
   rowDragOverId === row.id ? 'border-t-2 border-(--ui-primary)' : 'border-b border-(--ui-border)',
   rowDragId === row.id ? 'opacity-30' : ''
 ]"
+            @contextmenu="onRowContextMenu($event, row)"
+            @touchstart.passive="startLongPress($event, row)"
+            @touchend="cancelLongPress"
+            @touchmove="cancelLongPress"
+            @pointerenter="onRowPointerEnter(row.id)"
+            @pointerleave="onRowPointerLeave"
           >
-            <td class="w-0 p-0" />
+            <td class="w-0 p-0 relative overflow-visible">
+              <!-- Remote editing indicator (left bar) -->
+              <div
+                v-if="rowEditors(row.id).length"
+                class="absolute left-0 top-0 bottom-0 w-0.5 rounded-full z-10"
+                :style="{ background: rowEditors(row.id)[0].color }"
+              />
+              <!-- Remote hover name badge -->
+              <span
+                v-if="rowHoverers(row.id).length"
+                class="absolute -top-2.5 left-6 text-[10px] px-1 rounded text-white leading-tight z-10 whitespace-nowrap pointer-events-none"
+                :style="{ backgroundColor: rowHoverers(row.id)[0].color }"
+              >
+                {{ rowHoverers(row.id).map((h) => h.name).join(", ") }}
+              </span>
+            </td>
             <td
               class="px-1 py-1.5 text-(--ui-text-dimmed) opacity-0 group-hover:opacity-60 cursor-grab w-6 touch-none"
               @pointerdown="editable !== false && handleRowPointerDown($event, row.id)"
@@ -313,23 +429,33 @@ defineExpose({ addMetaColumn, addRow });
             <td class="px-2 py-1.5 text-xs text-(--ui-text-dimmed) select-none w-20">
               <div class="flex items-center gap-0.5">
                 <span class="w-4 text-center">{{ idx + 1 }}</span>
-                <UButton
-                  icon="i-lucide-external-link"
-                  size="xs"
-                  variant="ghost"
-                  color="neutral"
-                  class="opacity-0 group-hover:opacity-100"
-                  @click="emit('openNode', row.id, row.label)"
-                />
-                <UButton
+                <UTooltip
+                  :text="labels.openAsSlideover"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-external-link"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="emit('openNode', row.id, row.label)"
+                  />
+                </UTooltip>
+                <UTooltip
                   v-if="editable !== false"
-                  icon="i-lucide-trash-2"
-                  size="xs"
-                  variant="ghost"
-                  color="error"
-                  class="opacity-0 group-hover:opacity-100"
-                  @click="deleteRow(row)"
-                />
+                  :text="labels.deleteRow"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="deleteRow(row)"
+                  />
+                </UTooltip>
               </div>
             </td>
             <td
@@ -359,9 +485,46 @@ defineExpose({ addMetaColumn, addRow });
         class="w-full text-left px-3 py-2 text-xs text-(--ui-text-dimmed) hover:bg-(--ui-bg-elevated) border-b border-(--ui-border) transition-colors"
         @click="addRow"
       >
-        + Add row
+        + {{ labels.addRow }}
       </button>
     </template>
+
+    <!-- Row context menu -->
+    <Teleport
+      v-if="editable !== false"
+      to="body"
+    >
+      <div
+        v-if="showCtx && ctxItems.length"
+        class="fixed z-50 min-w-40 bg-(--ui-bg) border border-(--ui-border) rounded-lg shadow-xl py-1 text-sm"
+        :style="{ left: ctxPos.x + 'px', top: ctxPos.y + 'px' }"
+      >
+        <template
+          v-for="(group, gi) in ctxItems"
+          :key="gi"
+        >
+          <div
+            v-if="gi > 0"
+            class="my-1 border-t border-(--ui-border)"
+          />
+          <button
+            v-for="item in group"
+            :key="item.label"
+            class="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) text-left cursor-default"
+            :class="item.color === 'error' ? 'text-(--ui-color-error-500)' : 'text-(--ui-text)'"
+            @pointerdown.stop
+            @click="item.onSelect();
+  showCtx = false"
+          >
+            <UIcon
+              :name="item.icon"
+              class="size-3.5 shrink-0 opacity-70"
+            />
+            {{ item.label }}
+          </button>
+        </template>
+      </div>
+    </Teleport>
   </div>
 </template>
 

package/dist/runtime/components/renderers/table/ATableFlatMode.vue.d.ts

@@ -1,4 +1,5 @@
 import type { useTableView } from '../../../composables/useTableView.js';
+import type { AbracadabraLocale } from '../../../locale.js';
 type __VLS_Props = {
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
     tableView: ReturnType<typeof useTableView>;
@@ -6,6 +7,7 @@ type __VLS_Props = {
     myClientId: number;
     setLocalState: (state: Record<string, any>) => void;
     editable?: boolean;
+    labels?: Partial<AbracadabraLocale['renderers']['table']>;
 };
 declare function addRow(): void;
 declare function addMetaColumn(): void;