@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,257 @@
+<script setup>
+import { computed, shallowRef, watch } from "vue";
+const props = defineProps({
+  entry: { type: Object, required: true },
+  tree: { type: Object, required: true },
+  selectedIds: { type: Set, required: true },
+  remoteSelections: { type: Map, required: true },
+  draggingId: { type: [String, null], required: true }
+});
+const children = computed(() => props.tree.childrenOf(props.entry.id));
+const isSelected = computed(() => props.selectedIds.has(props.entry.id));
+const remoteSelectionsForThis = computed(
+  () => props.remoteSelections.get(props.entry.id) ?? []
+);
+const shape = computed(() => props.entry.meta?.spShape ?? "box");
+const position = computed(() => [
+  props.entry.meta?.spX ?? 0,
+  props.entry.meta?.spY ?? 0,
+  props.entry.meta?.spZ ?? 0
+]);
+const rotation = computed(() => {
+  const deg2rad = Math.PI / 180;
+  return [
+    (props.entry.meta?.spRX ?? 0) * deg2rad,
+    (props.entry.meta?.spRY ?? 0) * deg2rad,
+    (props.entry.meta?.spRZ ?? 0) * deg2rad
+  ];
+});
+const scale = computed(() => [
+  props.entry.meta?.spSX ?? 1,
+  props.entry.meta?.spSY ?? 1,
+  props.entry.meta?.spSZ ?? 1
+]);
+const color = computed(() => props.entry.meta?.color ?? "#6366f1");
+const opacity = computed(() => (props.entry.meta?.spOpacity ?? 100) / 100);
+const isTransparent = computed(() => opacity.value < 1);
+const isGroup = computed(() => children.value.length > 0 && shape.value !== "glb");
+const glbModel = shallowRef(null);
+const uploadId = computed(() => props.entry.meta?.spModelUploadId);
+const docId = computed(() => props.entry.meta?.spModelDocId);
+watch([shape, uploadId, docId], async ([sh, uid, did]) => {
+  if (sh !== "glb" || !uid || !did) {
+    glbModel.value = null;
+    return;
+  }
+  try {
+    const threePkg = "three";
+    const { GLTFLoader } = await import(
+      /* @vite-ignore */
+      `${threePkg}/examples/jsm/loaders/GLTFLoader.js`
+    );
+    const THREE = await import(
+      /* @vite-ignore */
+      threePkg
+    );
+    const loader = new GLTFLoader();
+    try {
+      const { DRACOLoader } = await import(
+        /* @vite-ignore */
+        `${threePkg}/examples/jsm/loaders/DRACOLoader.js`
+      );
+      const dracoLoader = new DRACOLoader();
+      dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
+      loader.setDRACOLoader(dracoLoader);
+    } catch {
+    }
+    const gltf = await loader.loadAsync(uid);
+    const box = new THREE.Box3().setFromObject(gltf.scene);
+    const size = box.getSize(new THREE.Vector3());
+    const center = box.getCenter(new THREE.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z);
+    if (maxDim > 0) {
+      const s = 1 / maxDim;
+      gltf.scene.scale.multiplyScalar(s);
+      gltf.scene.position.sub(center.multiplyScalar(s));
+    }
+    glbModel.value = gltf.scene;
+  } catch (e) {
+    console.error("[SpatialObject] Failed to load GLB", uid, e);
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <TresGroup
+    :position="position"
+    :rotation="rotation"
+    :scale="scale"
+    :user-data="{ entryId: entry.id }"
+  >
+    <!-- GLB Model -->
+    <template v-if="shape === 'glb'">
+      <primitive
+        v-if="glbModel"
+        :object="glbModel"
+      />
+      <TresMesh
+        v-else
+        cast-shadow
+        receive-shadow
+      >
+        <TresBoxGeometry :args="[0.5, 0.5, 0.5]" />
+        <TresMeshStandardMaterial
+          color="#888888"
+          :wireframe="true"
+          :opacity="0.4"
+          :transparent="true"
+        />
+      </TresMesh>
+    </template>
+
+    <TresMesh
+      v-else-if="shape === 'box'"
+      cast-shadow
+      receive-shadow
+    >
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else-if="shape === 'sphere'"
+      cast-shadow
+      receive-shadow
+    >
+      <TresSphereGeometry :args="[0.5, 32, 32]" />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else-if="shape === 'cylinder'"
+      cast-shadow
+      receive-shadow
+    >
+      <TresCylinderGeometry :args="[0.5, 0.5, 1, 32]" />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else-if="shape === 'cone'"
+      cast-shadow
+      receive-shadow
+    >
+      <TresConeGeometry :args="[0.5, 1, 32]" />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else-if="shape === 'plane'"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[1, 1]" />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+        :side="2"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else-if="shape === 'torus'"
+      cast-shadow
+      receive-shadow
+    >
+      <TresTorusGeometry :args="[0.4, 0.15, 16, 32]" />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <TresMesh
+      v-else
+      cast-shadow
+      receive-shadow
+    >
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial
+        :color="color"
+        :opacity="opacity"
+        :transparent="isTransparent"
+      />
+    </TresMesh>
+
+    <!-- Selection highlight -->
+    <TresMesh
+      v-if="isSelected"
+      :scale="[1.02, 1.02, 1.02]"
+    >
+      <TresBoxGeometry />
+      <TresMeshBasicMaterial
+        color="#ffffff"
+        :wireframe="true"
+        :opacity="0.5"
+        :transparent="true"
+      />
+    </TresMesh>
+
+    <!-- Remote user selection indicators -->
+    <TresMesh
+      v-for="rs in remoteSelectionsForThis"
+      :key="rs.color"
+      :scale="[1.04, 1.04, 1.04]"
+    >
+      <TresBoxGeometry />
+      <TresMeshBasicMaterial
+        :color="rs.color"
+        :wireframe="true"
+        :opacity="0.35"
+        :transparent="true"
+      />
+    </TresMesh>
+
+    <!-- Group bounding indicator -->
+    <TresMesh
+      v-if="isGroup"
+      :scale="[1.1, 1.1, 1.1]"
+    >
+      <TresBoxGeometry />
+      <TresMeshBasicMaterial
+        color="#888888"
+        :wireframe="true"
+        :opacity="0.15"
+        :transparent="true"
+      />
+    </TresMesh>
+
+    <!-- Recursive children -->
+    <SpatialObject
+      v-for="child in children"
+      :key="child.id"
+      :entry="child"
+      :tree="tree"
+      :selected-ids="selectedIds"
+      :remote-selections="remoteSelections"
+      :dragging-id="draggingId"
+    />
+  </TresGroup>
+</template>

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

@@ -0,0 +1,17 @@
+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;

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

@@ -0,0 +1,15 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (ctx: {
+        scene: any;
+        camera: any;
+        canvas: any;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onReady?: ((ctx: {
+        scene: any;
+        camera: any;
+        canvas: any;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+<script setup>
+import { watchEffect } from "vue";
+const emit = defineEmits(["ready"]);
+const { useTresContext } = await import("@tresjs/core");
+const ctx = useTresContext();
+watchEffect(() => {
+  const s = ctx.scene?.value;
+  const c = ctx.camera?.activeCamera?.value;
+  const r = ctx.renderer?.instance;
+  if (s && c && r) {
+    emit("ready", { scene: s, camera: c, canvas: r.domElement });
+  }
+});
+</script>
+
+<template>
+  <div style="display:none" />
+</template>

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

@@ -0,0 +1,15 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (ctx: {
+        scene: any;
+        camera: any;
+        canvas: any;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onReady?: ((ctx: {
+        scene: any;
+        camera: any;
+        canvas: any;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    position: [number, number, number];
+    color: string;
+    name: string;
+};
+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/SpatialUserAvatar.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  position: { type: Array, required: true },
+  color: { type: String, required: true },
+  name: { type: String, required: true }
+});
+const smoothX = ref(props.position[0]);
+const smoothY = ref(props.position[1]);
+const smoothZ = ref(props.position[2]);
+const LERP = 0.12;
+let rafId = 0;
+function tick() {
+  rafId = requestAnimationFrame(tick);
+  smoothX.value += (props.position[0] - smoothX.value) * LERP;
+  smoothY.value += (props.position[1] - smoothY.value) * LERP;
+  smoothZ.value += (props.position[2] - smoothZ.value) * LERP;
+}
+onMounted(() => {
+  rafId = requestAnimationFrame(tick);
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(rafId);
+});
+watch(() => props.position, (pos) => {
+  const dx = pos[0] - smoothX.value;
+  const dy = pos[1] - smoothY.value;
+  const dz = pos[2] - smoothZ.value;
+  if (dx * dx + dy * dy + dz * dz > 400) {
+    smoothX.value = pos[0];
+    smoothY.value = pos[1];
+    smoothZ.value = pos[2];
+  }
+});
+const avatarPos = computed(() => [
+  smoothX.value,
+  smoothY.value,
+  smoothZ.value
+]);
+</script>
+
+<template>
+  <TresGroup :position="avatarPos">
+    <TresMesh :position-y="0.4">
+      <TresCapsuleGeometry :args="[0.15, 0.4, 8, 16]" />
+      <TresMeshStandardMaterial :color="color" />
+    </TresMesh>
+    <TresMesh :position-y="0.85">
+      <TresSphereGeometry :args="[0.12, 16, 16]" />
+      <TresMeshStandardMaterial :color="color" />
+    </TresMesh>
+  </TresGroup>
+</template>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    position: [number, number, number];
+    color: string;
+    name: string;
+};
+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/ATableColumnHeader.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    columnId: string;
+    label: string;
+    width?: number;
+    sortKey?: string;
+    sortDir?: 'asc' | 'desc';
+    canRename?: boolean;
+    canDelete?: boolean;
+    canDrag?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (dir: "asc" | "desc" | "clear") => any;
+    delete: () => any;
+    rename: (label: string) => any;
+    resizeStart: (e: PointerEvent) => any;
+    dragPointerDown: (e: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSort?: ((dir: "asc" | "desc" | "clear") => any) | undefined;
+    onDelete?: (() => any) | undefined;
+    onRename?: ((label: string) => any) | undefined;
+    onResizeStart?: ((e: PointerEvent) => any) | undefined;
+    onDragPointerDown?: ((e: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,129 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  columnId: { type: String, required: true },
+  label: { type: String, required: true },
+  width: { type: Number, required: false },
+  sortKey: { type: String, required: false },
+  sortDir: { type: String, required: false },
+  canRename: { type: Boolean, required: false },
+  canDelete: { type: Boolean, required: false },
+  canDrag: { type: Boolean, required: false }
+});
+const emit = defineEmits(["rename", "delete", "sort", "resizeStart", "dragPointerDown"]);
+const isEditing = ref(false);
+const editValue = ref("");
+function startRename() {
+  if (!props.canRename) return;
+  isEditing.value = true;
+  editValue.value = props.label;
+}
+function commitRename() {
+  if (editValue.value.trim()) {
+    emit("rename", editValue.value.trim());
+  }
+  isEditing.value = false;
+}
+const isSorted = computed(() => props.sortKey === props.columnId);
+const menuItems = computed(() => {
+  const items = [];
+  const sortGroup = [
+    {
+      label: "Sort A \u2192 Z",
+      icon: "i-lucide-arrow-up-narrow-wide",
+      onSelect: () => emit("sort", "asc")
+    },
+    {
+      label: "Sort Z \u2192 A",
+      icon: "i-lucide-arrow-down-wide-narrow",
+      onSelect: () => emit("sort", "desc")
+    }
+  ];
+  if (isSorted.value) {
+    sortGroup.push({
+      label: "Clear sort",
+      icon: "i-lucide-x",
+      onSelect: () => emit("sort", "clear")
+    });
+  }
+  items.push(sortGroup);
+  if (props.canRename) {
+    items.push([{
+      label: "Rename",
+      icon: "i-lucide-pencil",
+      onSelect: () => startRename()
+    }]);
+  }
+  if (props.canDelete) {
+    items.push([{
+      label: "Delete",
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect: () => emit("delete")
+    }]);
+  }
+  return items;
+});
+</script>
+
+<template>
+  <th
+    class="text-left px-3 py-2 text-xs font-medium text-(--ui-text-muted) relative select-none"
+    :style="width ? { width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px` } : { minWidth: '120px' }"
+  >
+    <div class="group flex items-center gap-1">
+      <span
+        v-if="canDrag"
+        class="cursor-grab opacity-0 group-hover:opacity-60 touch-none shrink-0"
+        @pointerdown.stop="emit('dragPointerDown', $event)"
+      >
+        <UIcon
+          name="i-lucide-grip-vertical"
+          class="size-3.5"
+        />
+      </span>
+
+      <input
+        v-if="isEditing"
+        v-model="editValue"
+        class="bg-transparent outline-none text-xs font-medium w-full"
+        autofocus
+        @keydown.enter="commitRename"
+        @keydown.escape="isEditing = false"
+        @blur="commitRename"
+      >
+      <span
+        v-else
+        class="truncate cursor-default"
+        :class="canRename ? 'cursor-text' : ''"
+        @dblclick="startRename"
+      >
+        {{ label }}
+      </span>
+
+      <UIcon
+        v-if="isSorted"
+        :name="sortDir === 'desc' ? 'i-lucide-arrow-down' : 'i-lucide-arrow-up'"
+        class="size-3 text-(--ui-text-dimmed) shrink-0"
+      />
+
+      <UDropdownMenu
+        :items="menuItems"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          icon="i-lucide-ellipsis"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          class="opacity-0 group-hover:opacity-100 shrink-0"
+        />
+      </UDropdownMenu>
+    </div>
+
+    <div
+      class="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-(--ui-primary)/30 transition-colors"
+      @pointerdown.stop.prevent="emit('resizeStart', $event)"
+    />
+  </th>
+</template>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    columnId: string;
+    label: string;
+    width?: number;
+    sortKey?: string;
+    sortDir?: 'asc' | 'desc';
+    canRename?: boolean;
+    canDelete?: boolean;
+    canDrag?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (dir: "asc" | "desc" | "clear") => any;
+    delete: () => any;
+    rename: (label: string) => any;
+    resizeStart: (e: PointerEvent) => any;
+    dragPointerDown: (e: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSort?: ((dir: "asc" | "desc" | "clear") => any) | undefined;
+    onDelete?: (() => any) | undefined;
+    onRename?: ((label: string) => any) | undefined;
+    onResizeStart?: ((e: PointerEvent) => any) | undefined;
+    onDragPointerDown?: ((e: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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

@@ -0,0 +1,21 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+type __VLS_Props = {
+    tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    tableView: ReturnType<typeof useTableView>;
+    states: any[];
+    myClientId: number;
+    setLocalState: (state: Record<string, any>) => void;
+    editable?: boolean;
+};
+declare function addRow(): void;
+declare function addMetaColumn(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addMetaColumn: typeof addMetaColumn;
+    addRow: typeof addRow;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openNode: (id: string, label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenNode?: ((id: string, label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;