@abraca/nuxt 2.0.0 → 2.0.3

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

@@ -1,459 +0,0 @@
-<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";
-import SpatialTransformInputs from "./spatial/SpatialTransformInputs.vue";
-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>
-
-          <!-- Shape selector (hide for GLB — shape comes from the file) -->
-          <div
-            v-if="editable && selectedEntry.meta?.spShape !== 'glb'"
-            class="sp-prop-row"
-          >
-            <span class="sp-prop-label">Shape</span>
-            <USelectMenu
-              :model-value="selectedEntry.meta?.spShape ?? 'box'"
-              :items="shapes"
-              size="xs"
-              class="flex-1"
-              @update:model-value="tree.updateMeta(selectedEntry.id, { spShape: $event })"
-            />
-          </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>
-
-          <!-- Transform inputs (Pos / Rot / Scale) -->
-          <SpatialTransformInputs
-            v-if="editable"
-            :entry="selectedEntry"
-            :tree="tree"
-          />
-        </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

@@ -1,19 +0,0 @@
-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/spatial/SpatialGround.d.vue.ts

@@ -1,20 +0,0 @@
-/**
- * Ground plane with grid helper and shadow-receiving surface.
- * Ported from cou-sh/app/components/spatial/SpatialGround.vue
- */
-type __VLS_Props = {
-    gridSize?: number;
-    gridDivisions?: number;
-    color1?: string;
-    color2?: string;
-    groundColor?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    groundColor: string;
-    gridSize: number;
-    gridDivisions: number;
-    color1: string;
-    color2: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,26 +0,0 @@
-<script setup>
-defineProps({
-  gridSize: { type: Number, required: false, default: 100 },
-  gridDivisions: { type: Number, required: false, default: 100 },
-  color1: { type: String, required: false, default: "#555" },
-  color2: { type: String, required: false, default: "#333" },
-  groundColor: { type: String, required: false, default: "#111118" }
-});
-const HALF_PI = -Math.PI / 2;
-</script>
-
-<template>
-  <TresGridHelper :args="[gridSize, gridDivisions, color1, color2]" />
-  <TresMesh
-    :rotation-x="HALF_PI"
-    :position-y="-5e-3"
-    receive-shadow
-  >
-    <TresPlaneGeometry :args="[gridSize, gridSize]" />
-    <TresMeshStandardMaterial
-      :color="groundColor"
-      :opacity="0.3"
-      :transparent="true"
-    />
-  </TresMesh>
-</template>

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

@@ -1,20 +0,0 @@
-/**
- * Ground plane with grid helper and shadow-receiving surface.
- * Ported from cou-sh/app/components/spatial/SpatialGround.vue
- */
-type __VLS_Props = {
-    gridSize?: number;
-    gridDivisions?: number;
-    color1?: string;
-    color2?: string;
-    groundColor?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    groundColor: string;
-    gridSize: number;
-    gridDivisions: number;
-    color1: string;
-    color2: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,17 +0,0 @@
-import type { TreeEntry } from '../../../types.js';
-type __VLS_Props = {
-    entry: TreeEntry;
-    tree: {
-        childrenOf: (parentId: string | null) => TreeEntry[];
-        updateMeta: (id: string, meta: Record<string, unknown>) => void;
-    };
-    selectedIds: Set<string>;
-    remoteSelections: Map<string, {
-        color: string;
-        name: string;
-    }[]>;
-    draggingId: string | null;
-};
-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;