@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/renderers/ASpatialRenderer.vue

@@ -0,0 +1,436 @@
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useSpatialCamera } from "../../composables/useSpatialCamera";
+import { useSpatialDrag } from "../../composables/useSpatialDrag";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const _locale = config.public;
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const gridVisible = ref(true);
+function toggleGrid() {
+  gridVisible.value = !gridVisible.value;
+}
+const {
+  cameraRef,
+  cameraPosition,
+  cameraTarget,
+  controlMode,
+  focusOn,
+  onCanvasPointerDown: camPointerDown,
+  onCanvasPointerMove: camPointerMove,
+  onCanvasPointerUp: camPointerUp,
+  onCanvasWheel
+} = useSpatialCamera(setLocalState);
+const selectedIds = ref(/* @__PURE__ */ new Set());
+const selectedEntry = computed(() => {
+  if (selectedIds.value.size !== 1) return null;
+  const id = [...selectedIds.value][0];
+  return tree.entries.value.find((e) => e.id === id) ?? null;
+});
+watch(selectedIds, (ids) => {
+  setLocalState({ spatial: { selectedIds: [...ids] } });
+}, { deep: true });
+const sceneSettings = { data: {} };
+const {
+  draggingId,
+  bindScene,
+  onPointerDown: dragPointerDown,
+  onPointerMove: dragPointerMove,
+  onPointerUp: dragPointerUp
+} = useSpatialDrag(tree, selectedIds, cameraRef, setLocalState, sceneSettings);
+const topLevelEntries = computed(() => tree.childrenOf(null));
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const remoteUsers3D = computed(
+  () => states.value.filter((s) => s.clientId !== myClientId.value && s.spatial?.camera).map((s) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "?",
+    color: s.user?.color ?? "#888",
+    position: s.spatial.camera.position,
+    selectedIds: s.spatial?.selectedIds ?? []
+  }))
+);
+const remoteSelectionMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const u of remoteUsers3D.value) {
+    for (const id of u.selectedIds) {
+      if (!map.has(id)) map.set(id, []);
+      map.get(id).push({ color: u.color, name: u.name });
+    }
+  }
+  return map;
+});
+const shapes = ["box", "sphere", "cylinder", "cone", "plane", "torus"];
+const shapeIcons = {
+  box: "i-lucide-box",
+  sphere: "i-lucide-circle",
+  cylinder: "i-lucide-cylinder",
+  cone: "i-lucide-triangle",
+  plane: "i-lucide-square",
+  torus: "i-lucide-donut",
+  glb: "i-lucide-package"
+};
+function addObject(shape = "box") {
+  if (!props.editable) return;
+  const label = shape.charAt(0).toUpperCase() + shape.slice(1);
+  const offset = topLevelEntries.value.length * 1.5;
+  const id = tree.createChild(null, label);
+  tree.updateMeta(id, {
+    spShape: shape,
+    spX: offset,
+    spY: shape === "plane" ? 0 : 0.5,
+    spZ: 0,
+    spSX: 1,
+    spSY: 1,
+    spSZ: 1,
+    color: "#6366f1"
+  });
+  selectedIds.value = /* @__PURE__ */ new Set([id]);
+}
+function deleteSelected() {
+  if (!props.editable) return;
+  for (const id of selectedIds.value) tree.deleteEntry(id);
+  selectedIds.value = /* @__PURE__ */ new Set();
+}
+function duplicateSelected() {
+  if (!props.editable || !selectedEntry.value) return;
+  const newId = tree.duplicateEntry(selectedEntry.value.id);
+  const entry = tree.entries.value.find((e) => e.id === newId);
+  if (entry) tree.updateMeta(newId, { spX: (entry.meta?.spX ?? 0) + 1.5 });
+  selectedIds.value = /* @__PURE__ */ new Set([newId]);
+}
+const shapeMenuItems = computed(() => [
+  shapes.map((s) => ({
+    label: s.charAt(0).toUpperCase() + s.slice(1),
+    icon: shapeIcons[s] ?? "i-lucide-box",
+    onSelect: () => addObject(s)
+  }))
+]);
+function shapeIcon(shape) {
+  return shapeIcons[shape ?? "box"] ?? "i-lucide-box";
+}
+const contextMenuItems = computed(() => {
+  const items = [];
+  if (selectedEntry.value) {
+    items.push([
+      { label: "Open", icon: "i-lucide-external-link", onSelect: () => openNode(selectedEntry.value.id, selectedEntry.value.label) },
+      { label: "Duplicate", icon: "i-lucide-copy", onSelect: duplicateSelected }
+    ]);
+  }
+  if (selectedIds.value.size > 0) {
+    items.push([{ label: "Delete", icon: "i-lucide-trash-2", color: "error", onSelect: deleteSelected }]);
+  }
+  items.push(shapes.map((s) => ({
+    label: `Add ${s.charAt(0).toUpperCase() + s.slice(1)}`,
+    icon: "i-lucide-plus",
+    onSelect: () => addObject(s)
+  })));
+  return items;
+});
+let pointerDownHitId = null;
+let pointerDownTime = 0;
+let isPointerActive = false;
+function onCanvasPointerDown(ev) {
+  isPointerActive = true;
+  if (ev.button !== 0) {
+    camPointerDown(ev);
+    return;
+  }
+  pointerDownTime = performance.now();
+  pointerDownHitId = dragPointerDown(ev);
+  if (pointerDownHitId && !props.editable) {
+    pointerDownHitId = null;
+    camPointerDown(ev);
+    return;
+  }
+  if (pointerDownHitId) {
+    if (ev.shiftKey) {
+      const next = new Set(selectedIds.value);
+      if (next.has(pointerDownHitId)) next.delete(pointerDownHitId);
+      else next.add(pointerDownHitId);
+      selectedIds.value = next;
+    } else if (!selectedIds.value.has(pointerDownHitId)) {
+      selectedIds.value = /* @__PURE__ */ new Set([pointerDownHitId]);
+    }
+  } else {
+    camPointerDown(ev);
+  }
+}
+function onWindowPointerMove(ev) {
+  if (!isPointerActive) return;
+  if (draggingId.value) dragPointerMove(ev);
+  else camPointerMove(ev);
+}
+function onWindowPointerUp(ev) {
+  if (!isPointerActive) return;
+  isPointerActive = false;
+  if (draggingId.value) {
+    dragPointerUp(ev);
+  } else {
+    camPointerUp();
+    const elapsed = performance.now() - pointerDownTime;
+    if (!pointerDownHitId && ev.button === 0 && !ev.shiftKey && elapsed < 300) {
+      selectedIds.value = /* @__PURE__ */ new Set();
+    }
+  }
+  pointerDownHitId = null;
+}
+function onCanvasDblClick(ev) {
+  const hitId = dragPointerDown(ev);
+  dragPointerUp(ev);
+  if (hitId) {
+    const entry = tree.entries.value.find((e) => e.id === hitId);
+    if (entry) {
+      focusOn([entry.meta?.spX ?? 0, entry.meta?.spY ?? 0, entry.meta?.spZ ?? 0]);
+    }
+  }
+}
+function onKeyDown(ev) {
+  if (ev.target?.tagName === "INPUT") return;
+  if ((ev.key === "Delete" || ev.key === "Backspace") && props.editable && selectedIds.value.size > 0) {
+    ev.preventDefault();
+    deleteSelected();
+  }
+  if (ev.key === "d" && (ev.metaKey || ev.ctrlKey) && props.editable && selectedEntry.value) {
+    ev.preventDefault();
+    duplicateSelected();
+  }
+  if (ev.key === "Escape") selectedIds.value = /* @__PURE__ */ new Set();
+}
+onMounted(() => {
+  window.addEventListener("keydown", onKeyDown);
+  window.addEventListener("pointermove", onWindowPointerMove);
+  window.addEventListener("pointerup", onWindowPointerUp);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeyDown);
+  window.removeEventListener("pointermove", onWindowPointerMove);
+  window.removeEventListener("pointerup", onWindowPointerUp);
+});
+const isDark = computed(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
+const clearColor = computed(() => isDark.value ? "#111118" : "#f0f0f4");
+const gridColor1 = computed(() => isDark.value ? "#555" : "#ccc");
+const gridColor2 = computed(() => isDark.value ? "#333" : "#ddd");
+const groundColor = computed(() => isDark.value ? "#111118" : "#f0f0f4");
+function onSceneReady({ scene: s, camera: c, canvas: cvs }) {
+  if (cvs && s && c) bindScene(cvs, s, c);
+}
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="spatial-container">
+    <ClientOnly>
+      <UContextMenu
+        :items="editable ? contextMenuItems : []"
+        class="absolute inset-0"
+      >
+        <div
+          class="spatial-canvas-wrap"
+          data-swipe-ignore
+          @pointerdown="onCanvasPointerDown"
+          @wheel.prevent="onCanvasWheel"
+          @dblclick="onCanvasDblClick"
+        >
+          <TresCanvas
+            shadows
+            :clear-color="clearColor"
+          >
+            <SpatialSceneBridge @ready="onSceneReady" />
+            <TresPerspectiveCamera
+              ref="cameraRef"
+              :position="cameraPosition"
+              :look-at="cameraTarget"
+              :fov="60"
+              :near="0.1"
+              :far="1e3"
+            />
+
+            <TresAmbientLight :intensity="isDark ? 0.5 : 0.8" />
+            <TresDirectionalLight
+              :position="[15, 25, 15]"
+              :intensity="isDark ? 1.2 : 1"
+              cast-shadow
+            />
+            <TresDirectionalLight
+              :position="[-10, 10, -10]"
+              :intensity="isDark ? 0.3 : 0.5"
+            />
+
+            <SpatialGround
+              v-if="gridVisible"
+              :color1="gridColor1"
+              :color2="gridColor2"
+              :ground-color="groundColor"
+            />
+
+            <SpatialObject
+              v-for="entry in topLevelEntries"
+              :key="entry.id"
+              :entry="entry"
+              :tree="tree"
+              :selected-ids="selectedIds"
+              :remote-selections="remoteSelectionMap"
+              :dragging-id="draggingId"
+            />
+
+            <SpatialUserAvatar
+              v-for="u in remoteUsers3D"
+              :key="u.clientId"
+              :position="u.position"
+              :color="u.color"
+              :name="u.name"
+            />
+          </TresCanvas>
+        </div>
+
+        <!-- Toolbar -->
+        <div class="spatial-toolbar">
+          <template v-if="editable">
+            <div class="toolbar-group">
+              <UDropdownMenu :items="shapeMenuItems">
+                <UButton
+                  icon="i-lucide-plus"
+                  size="sm"
+                  variant="ghost"
+                  color="neutral"
+                />
+              </UDropdownMenu>
+            </div>
+            <div class="toolbar-divider" />
+          </template>
+          <div class="toolbar-group">
+            <UButton
+              icon="i-lucide-rotate-3d"
+              size="sm"
+              :color="controlMode === 'orbit' ? 'primary' : 'neutral'"
+              :variant="controlMode === 'orbit' ? 'soft' : 'ghost'"
+              @click="controlMode = 'orbit'"
+            />
+            <UButton
+              icon="i-lucide-move-3d"
+              size="sm"
+              :color="controlMode === 'fly' ? 'primary' : 'neutral'"
+              :variant="controlMode === 'fly' ? 'soft' : 'ghost'"
+              @click="controlMode = 'fly'"
+            />
+          </div>
+          <div class="toolbar-divider" />
+          <UButton
+            v-if="editable"
+            icon="i-lucide-grid-3x3"
+            size="sm"
+            :color="gridVisible ? 'primary' : 'neutral'"
+            :variant="gridVisible ? 'soft' : 'ghost'"
+            :class="{ 'opacity-40': !gridVisible }"
+            @click="toggleGrid"
+          />
+        </div>
+
+        <!-- Properties panel -->
+        <div
+          v-if="selectedEntry"
+          class="spatial-properties"
+        >
+          <div class="sp-prop-header">
+            <UIcon
+              :name="shapeIcon(selectedEntry.meta?.spShape)"
+              class="size-4 shrink-0 text-(--ui-text-muted)"
+            />
+            <span class="sp-prop-name">{{ selectedEntry.label }}</span>
+            <UButton
+              icon="i-lucide-external-link"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              @click="openNode(selectedEntry.id, selectedEntry.label)"
+            />
+            <UButton
+              v-if="editable"
+              icon="i-lucide-trash-2"
+              size="xs"
+              variant="ghost"
+              color="error"
+              @click="deleteSelected"
+            />
+          </div>
+
+          <div
+            v-if="editable && selectedEntry.meta?.spShape !== 'glb'"
+            class="sp-prop-row"
+          >
+            <span class="sp-prop-label">Color</span>
+            <div class="flex gap-1 flex-wrap">
+              <button
+                v-for="c in ['#6366f1', '#ef4444', '#22c55e', '#3b82f6', '#f97316', '#a855f7', '#ec4899', '#14b8a6']"
+                :key="c"
+                class="size-5 rounded-full cursor-pointer border-2 transition-transform hover:scale-110"
+                :class="selectedEntry.meta?.color === c ? 'border-(--ui-text)' : 'border-transparent'"
+                :style="{ background: c }"
+                @click="tree.updateMeta(selectedEntry.id, { color: c })"
+              />
+            </div>
+          </div>
+
+          <div
+            v-if="editable && selectedEntry.meta?.spShape !== 'glb'"
+            class="sp-prop-row"
+          >
+            <span class="sp-prop-label">Opacity</span>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              :value="selectedEntry.meta?.spOpacity ?? 100"
+              class="flex-1 h-1.5 accent-(--color-primary-500)"
+              @input="tree.updateMeta(selectedEntry.id, { spOpacity: Number($event.target.value) })"
+            >
+            <span class="text-[10px] w-7 text-right text-(--ui-text-dimmed)">{{ selectedEntry.meta?.spOpacity ?? 100 }}%</span>
+          </div>
+        </div>
+
+        <!-- Connected users -->
+        <div
+          v-if="connectedUsers.length > 1"
+          class="spatial-presence"
+        >
+          <UAvatar
+            v-for="u in connectedUsers"
+            :key="u.clientId"
+            :alt="u.name"
+            size="xs"
+            :style="{ border: `2px solid ${u.color}`, borderRadius: '50%' }"
+          />
+        </div>
+      </UContextMenu>
+    </ClientOnly>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.spatial-container{flex:1;height:100%;min-height:0;overflow:hidden;position:relative;width:100%}.spatial-canvas-wrap{inset:0;position:absolute;touch-action:none}.spatial-toolbar{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;bottom:2rem;display:flex;gap:3px;left:50%;padding:3px;position:absolute;transform:translateX(-50%);z-index:20}.toolbar-group{align-items:center;display:flex;gap:1px}.toolbar-divider{background:var(--ui-border);flex-shrink:0;height:20px;margin:0 2px;width:1px}.spatial-properties{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:8px;display:flex;flex-direction:column;gap:6px;max-height:calc(100% - 24px);overflow-y:auto;padding:10px;position:absolute;right:12px;top:12px;width:260px;z-index:10}.sp-prop-header{align-items:center;display:flex;gap:6px}.sp-prop-name{flex:1;font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-prop-row{align-items:center;display:flex;gap:6px}.sp-prop-label{color:var(--ui-text-dimmed);flex-shrink:0;font-size:.7rem;font-weight:500;width:48px}.spatial-presence{bottom:12px;display:flex;gap:4px;left:12px;position:absolute;z-index:10}
+</style>

package/dist/runtime/components/renderers/ASpatialRenderer.vue.d.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/ATableRenderer.d.vue.ts

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['table']>;
+    editable?: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;