feat(annotations): v0

packages/draw/.gitignore

@@ -0,0 +1,3 @@
+.yarn
+.output
+.nuxt

packages/draw/README.md

@@ -0,0 +1 @@
+![hiring](assets/images/hiring.png)

packages/draw/app.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="speckle" class="bg-foundation-page text-foreground">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'bg-foundation-page text-foreground'
+  }
+})
+</script>

packages/draw/assets/css/tailwind.css

@@ -0,0 +1,37 @@
+@import '@speckle/ui-components/style.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+html,
+body,
+div#__nuxt {
+  height: 100%;
+}
+
+/* Prevent touch scrolling on canvas containers */
+.canvas-container,
+.konvajs-content {
+  touch-action: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Prevent pull-to-refresh and overscroll */
+body {
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+input[type='text'] {
+  @apply bg-foundation rounded-md h-8 border border-outline-2;
+}
+
+.bg-foundation-transparent {
+  background-color: rgba(var(--foundation-2), 0.5);
+}

packages/draw/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}

packages/draw/components/auth/SignInFlow.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="flex items-center justify-center"
+    :style="{ height: 'calc(100vh - 3rem)' }"
+  >
+    <section
+      class="w-full max-w-md flex flex-col gap-y-8 items-center mx-auto py-12 px-6 border rounded-2xl border-outline-2 bg-foundation"
+    >
+      <h1 class="text-xl md:text-3xl font-semibold text-foreground text-center">
+        Speckle Solid Broccoli
+      </h1>
+      <FormButton color="outline" @click="signIn()">Sign In</FormButton>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthManager } from '~/lib/authn/useAuthManager'
+const { generateChallenge } = useAuthManager()
+const config = useRuntimeConfig()
+const signIn = () => {
+  const challenge = generateChallenge()
+  const authUrl = `https://app.speckle.systems/authn/verify/${config.public.appId}/${challenge}` // TODO: appId from env
+  window.location.href = authUrl
+}
+</script>

packages/draw/components/base/ThemeSwitcher.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <FormButton
+      size="sm"
+      :icon-left="colorMode.preference === 'light' ? Moon : Sun"
+      hide-text
+      color="outline"
+      @click="swapTheme"
+    >
+      click
+    </FormButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Sun, Moon } from 'lucide-vue-next'
+import { useColorMode } from '@vueuse/core'
+const colorMode = useColorMode()
+const swapTheme = () => {
+  if (colorMode.preference === 'light') {
+    colorMode.preference = 'dark'
+  } else {
+    colorMode.preference = 'light'
+  }
+}
+</script>

packages/draw/components/canvas/Card.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="w-full">YO</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ name: string; id: string }>()
+</script>