2025 September MVP Build

web/app.vue → web/app/app.vue

@@ -62,6 +62,7 @@ form {
 }
 
 main {
+  @apply min-h-screen;
   @apply bg-dark-900 text-light-200;
   @apply overflow-x-hidden;
 }

web/components/atelier/inspector/view/Properties.vue → web/app/components/atelier/inspector/view/Properties.vue

@@ -42,20 +42,19 @@
 </style>
 
 <script setup lang="ts">
-const { currentTree, selectedNode, currentComponents } = storeToRefs(
-  useDeckStore()
-);
+const { currentTree, selectedNode, currentComponents } =
+  storeToRefs(useDeckStore());
 
 // https://github.com/nuxt/nuxt/issues/14036
 const resolvedComponents = {
-  animation: resolveComponent("NodeComponentAnimation"),
-  base: resolveComponent("NodeComponentBase"),
-  camera: resolveComponent("NodeComponentCamera"),
-  layout: resolveComponent("NodeComponentLayout"),
-  mesh: resolveComponent("NodeComponentMesh"),
-  scene: resolveComponent("NodeComponentScene"),
-  transform: resolveComponent("NodeComponentTransform"),
-  typography: resolveComponent("NodeComponentTypography"),
+  animation: resolveComponent("LazyNodeComponentAnimation"),
+  base: resolveComponent("LazyNodeComponentBase"),
+  camera: resolveComponent("LazyNodeComponentCamera"),
+  layout: resolveComponent("LazyNodeComponentLayout"),
+  mesh: resolveComponent("LazyNodeComponentMesh"),
+  scene: resolveComponent("LazyNodeComponentScene"),
+  transform: resolveComponent("LazyNodeComponentTransform"),
+  typography: resolveComponent("LazyNodeComponentTypography"),
 };
 
 const nodeComponents = computed<ComponentModel[]>(() => {
@@ -65,6 +64,8 @@ const nodeComponents = computed<ComponentModel[]>(() => {
 });
 
 function searchNodeComponents(node: string): ComponentModel[] {
+  if (!currentComponents.value) return [];
+
   return currentComponents.value
     .filter((component) => component.node === node)
     .sort((a, b) => a.type.localeCompare(b.type));

web/components/atelier/render/Element.vue → web/app/components/atelier/render/Element.vue

@@ -157,7 +157,10 @@ watchThrottled(
     if (!transform) return;
 
     if (!startTransform.value || !startDrag.value) {
-      startTransform.value = { x: transform.data.x, y: transform.data.y };
+      startTransform.value = {
+        x: transform.data.position.x,
+        y: transform.data.position.y,
+      };
       startDrag.value = { x: newX, y: newY };
 
       return;
@@ -178,8 +181,8 @@ watchThrottled(
 
     const snappedPos = applySnapping(newPosX, newPosY);
 
-    transform.data.x = Math.round(snappedPos.x);
-    transform.data.y = Math.round(snappedPos.y);
+    transform.data.position.x = Math.round(snappedPos.x);
+    transform.data.position.y = Math.round(snappedPos.y);
   },
   { throttle }
 );

web/components/atelier/timeline/index.vue → web/app/components/atelier/timeline/index.vue

@@ -112,7 +112,7 @@ watchThrottled(
       wheelDelta.value = 0;
     }
   },
-  { throttle }
+  { throttle },
 );
 
 async function insertNewSlides() {
@@ -121,7 +121,7 @@ async function insertNewSlides() {
   try {
     isLoading.value = true;
 
-    await deckStore.insertNewSlides(useRoute().params.id.toString());
+    await deckStore.insertNewSlides(useRoute().params.id?.toString() ?? "");
   } finally {
     setTimeout(() => {
       isLoading.value = false;

web/app/components/content/Mermaid.vue

@@ -0,0 +1,19 @@
+<!-- https://github.com/nuxt/content/issues/1866#issuecomment-1434274988 -->
+
+<template>
+  <div v-if="show" class="mermaid">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const show = ref(false);
+
+onMounted(async () => {
+  show.value = true;
+
+  await nextTick();
+
+  useNuxtApp().$mermaid().run();
+});
+</script>

web/components/landing/Navbar.vue → web/app/components/landing/Navbar.vue

@@ -10,7 +10,7 @@
       <NuxtLink>Product</NuxtLink>
       <NuxtLink>Community</NuxtLink>
       <NuxtLink>Pricing</NuxtLink>
-      <NuxtLink>Documentation</NuxtLink>
+      <NuxtLink to="/docs">Docs</NuxtLink>
       <NuxtLink>Blog</NuxtLink>
     </nav>
     <div class="actions">

web/app/components/landing/Pricing.vue

@@ -0,0 +1,21 @@
+<template>
+  <section>
+    <h2>Pricing plans</h2>
+    <div>
+      <div class="plan">
+        <h3>Free</h3>
+        <p>For personal use.</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="postcss">
+h2 {
+  @apply text-5xl;
+}
+
+.plan {
+  @apply border-solid border-gray-200 rounded-lg p-4;
+}
+</style>

web/components/node/component/Base.vue → web/app/components/node/component/Base.vue

@@ -1,10 +1,8 @@
 <template>
   <NodeComponent name="base">
-    <NodeComponentFieldText
-      name="reference"
-      :disabled="isRoot"
-      v-model:value="reference"
-    />
+    <NodeComponentRow name="reference">
+      <NodeComponentRowFieldText v-model:value="reference" :disabled="isRoot" />
+    </NodeComponentRow>
   </NodeComponent>
 </template>
 

web/app/components/node/component/Camera.vue

@@ -0,0 +1,21 @@
+<template>
+  <NodeComponent name="camera">
+    <NodeComponentRow name="position">
+      <NodeComponentRowFieldNumber name="x" v-model:value="component.data.x" />
+      <NodeComponentRowFieldNumber name="y" v-model:value="component.data.y" />
+      <NodeComponentRowFieldNumber name="z" v-model:value="component.data.z" />
+    </NodeComponentRow>
+  </NodeComponent>
+</template>
+
+<script setup lang="ts">
+const { updateNodeComponent } = useDeckStore();
+
+const props = defineProps<{
+  component: ComponentModel;
+}>();
+
+watch(props.component.data, () => {
+  updateNodeComponent(props.component);
+});
+</script>

web/app/components/node/component/Layout.vue

@@ -0,0 +1,56 @@
+<template>
+  <NodeComponent name="layout">
+    <NodeComponentRow name="background">
+      <NodeComponentRowFieldColour
+        v-model:value="props.component.data.background"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="spacing">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.margin"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="align">
+      <NodeComponentRowFieldRadio
+        :options="[
+          { value: 'start', icon: 'i-carbon-align-vertical-top' },
+          { value: 'center', icon: 'i-carbon-align-vertical-center' },
+          { value: 'end', icon: 'i-carbon-align-vertical-bottom' },
+        ]"
+        v-model:value="props.component.data.align"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="direction">
+      <NodeComponentRowFieldRadio
+        :options="[
+          { value: 'row', icon: 'i-carbon-align-horizontal-left' },
+          { value: 'column', icon: 'i-carbon-align-horizontal-center' },
+        ]"
+        v-model:value="props.component.data.direction"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="columns">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.columns"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="rows">
+      <NodeComponentRowFieldNumber v-model:value="props.component.data.rows" />
+    </NodeComponentRow>
+    <NodeComponentRow name="gap">
+      <NodeComponentRowFieldNumber v-model:value="props.component.data.gap" />
+    </NodeComponentRow>
+  </NodeComponent>
+</template>
+
+<script setup lang="ts">
+const { updateNodeComponent } = useDeckStore();
+
+const props = defineProps<{
+  component: ComponentModel;
+}>();
+
+watch(props.component.data, () => {
+  updateNodeComponent(props.component);
+});
+</script>

web/app/components/node/component/Mesh.vue

@@ -0,0 +1,66 @@
+<template>
+  <NodeComponent name="model">
+    <NodeComponentRow name="type">
+      <NodeComponentRowFieldSelect
+        v-model:value="props.component.data.type"
+        :options="[
+          ...primitiveTypes,
+          ...useAssetsStore().models.map((model) => model.name),
+        ]"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="fallback">
+      <NodeComponentRowFieldSelect
+        :disabled="primitiveTypes.includes(props.component.data.type)"
+        v-model:value="props.component.data.fallback"
+        :options="['none', ...primitiveTypes]"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="colour">
+      <NodeComponentRowFieldColour
+        v-model:value="props.component.data.colour"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="texture">
+      <NodeComponentRowFieldSelect
+        v-model:value="props.component.data.texture"
+        :options="[
+          'default',
+          ...useAssetsStore().images.map((image) => image.name),
+        ]"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="position">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.x"
+        name="x"
+      />
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.y"
+        name="y"
+      />
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.z"
+        name="z"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="scale">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.scale"
+        name="scale"
+      />
+    </NodeComponentRow>
+  </NodeComponent>
+</template>
+
+<script setup lang="ts">
+const { updateNodeComponent } = useDeckStore();
+
+const props = defineProps<{
+  component: ComponentModel;
+}>();
+
+watch(props.component.data, () => {
+  updateNodeComponent(props.component);
+});
+</script>

web/components/node/component/Scene.vue → web/app/components/node/component/Scene.vue

@@ -1,9 +1,10 @@
 <template>
   <NodeComponent name="scene">
-    <NodeComponentFieldColour
-      name="background"
-      v-model:value="props.component.data.background"
-    />
+    <NodeComponentRow name="background">
+      <NodeComponentRowFieldColour
+        v-model:value="props.component.data.background"
+      />
+    </NodeComponentRow>
   </NodeComponent>
 </template>
 

web/app/components/node/component/Transform.vue

@@ -0,0 +1,38 @@
+<template>
+  <NodeComponent name="transform">
+    <NodeComponentRow name="position">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.position.x"
+      />
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.position.y"
+      />
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.position.z"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="width">
+      <NodeComponentRowFieldNumber v-model:value="props.component.data.width" />
+    </NodeComponentRow>
+    <NodeComponentRow name="height">
+      <NodeComponentRowFieldNumber
+        v-model:value="props.component.data.height"
+      />
+    </NodeComponentRow>
+    <NodeComponentRow name="scale">
+      <NodeComponentRowFieldNumber v-model:value="props.component.data.scale" />
+    </NodeComponentRow>
+  </NodeComponent>
+</template>
+
+<script setup lang="ts">
+const { updateNodeComponent } = useDeckStore();
+
+const props = defineProps<{
+  component: ComponentModel;
+}>();
+
+watch(props.component.data, () => {
+  updateNodeComponent(props.component);
+});
+</script>