From d3c53796157170da24aaea8f37e39a3af1fdb7ed Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Wed, 31 Jul 2024 20:35:45 -0400
Subject: [PATCH 01/11] Add the `DashPanel` component

---
 components/DashPanel.vue | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 components/DashPanel.vue

diff --git a/components/DashPanel.vue b/components/DashPanel.vue
new file mode 100644
index 00000000..c327c477
--- /dev/null
+++ b/components/DashPanel.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import {
+  IconSelector,
+} from '@tabler/icons-vue'
+import { useToggle } from '~/composables/useToggle'
+
+const props = withDefaults(defineProps<{
+  collapsed?: boolean,
+  label?: string,
+}>(), {
+  collapsed: false,
+})
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const state = ref(!props.collapsed)
+const { state: isVisible, toggle } = useToggle({ state })
+</script>
+
+<template>
+  <div class="flex flex-col min-h-0 min-w-0 rounded border border-layer">
+    <header class="flex flex-shrink-0 gap-1 justify-between p-1">
+      <CoreButton class="flex justify-start grow items-center gap-1 pl-1 pr-2 py-0" @click="toggle">
+        <IconSelector class="sq-4" />
+        <slot name="header">
+          <h3 v-if="label">{{ label }}</h3>
+        </slot>
+      </CoreButton>
+    </header>
+    <div class="grid grid-rows-[0fr] transition-all" :class="{ 'grid-rows-[1fr]': isVisible }">
+      <div class="flex flex-col overflow-hidden">
+        <FlexDivider class="flex-shrink-0" />
+        <div class="flex flex-col flex-grow justify-end overflow-hidden">
+          <div class="flex flex-col flex-grow gap-1 p-1">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

From 9feffc2a85ec16a47588211403b86a1a8d890125 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Wed, 31 Jul 2024 20:36:42 -0400
Subject: [PATCH 02/11] Refresh the main menu

---
 pages/menu.vue | 451 ++++++++++++++++++++++++-------------------------
 1 file changed, 224 insertions(+), 227 deletions(-)

diff --git a/pages/menu.vue b/pages/menu.vue
index 76c43460..1a006144 100644
--- a/pages/menu.vue
+++ b/pages/menu.vue
@@ -1,21 +1,24 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {
-  UserCircleIcon as AccountIcon,
-  BeakerIcon,
-  CheckIcon,
-  DocumentIcon,
   DocumentTextIcon,
-  InboxIcon,
   CloudArrowUpIcon as SaveIcon,
-  MagnifyingGlassIcon as SearchIcon,
-  Cog8ToothIcon as SettingsIcon,
   HashtagIcon as TagIcon,
-  TrashIcon,
   Square2StackIcon as WorkspaceIcon,
-  Squares2X2Icon as WorkspacesIcon,
 } from '@heroicons/vue/24/outline'
+import {
+  IconCheck,
+  IconFile,
+  IconInbox,
+  IconLayoutGrid,
+  IconMessages,
+  IconNotebook,
+  IconSearch,
+  IconSettings,
+  IconTestPipe,
+  IconTrash,
+  IconUserCircle,
+} from '@tabler/icons-vue'
 import { nanoid } from 'nanoid'
-import CoreDivider from '#root/components/CoreDivider.vue'
 import CoreLink from '#root/components/CoreLink.vue'
 import ModKKey from '#root/components/ModKKey.vue'
 import TagLink from '#root/components/TagLink.vue'
@@ -23,237 +26,231 @@ import { DEACTIVATE_CONTEXT, SET_CONTEXT_TAGS } from '#root/src/store/actions'
 import { useFiles } from '#root/src/stores/useFiles'
 import { AsyncIterable } from '#root/src/utils/iterables'
 
-export default {
-  components: {
-    AccountIcon,
-    BeakerIcon,
-    CheckIcon,
-    CoreDivider,
-    CoreLink,
-    DocumentIcon,
-    DocumentTextIcon,
-    TagIcon,
-    InboxIcon,
-    ModKKey,
-    SaveIcon,
-    SearchIcon,
-    SettingsIcon,
-    TagLink,
-    TrashIcon,
-    WorkspaceIcon,
-    WorkspacesIcon,
-  },
-  setup() {
-    const { user } = useUser()
-    const { public: { fathomEventCtaSaveDocs, firebaseDisabled, linkFeedback } } = useConfig()
-    const mq = useMq()
-    const mediumPlus = computed(() => mq.value.mdPlus)
+const { user } = useUser()
+const { store } = useVuex()
+const { public: { fathomEventCtaSaveDocs, firebaseDisabled, linkFeedback } } = useConfig()
+const mq = useMq()
+const { pinnedDocs, unpinDoc } = usePinnedDocs()
+const { doc } = useDocs()
+const router = useRouter()
 
-    const trackCta = () => {
-      window.fathom?.trackGoal(fathomEventCtaSaveDocs, 0)
-    }
+const mediumPlus = computed(() => mq.value.mdPlus)
+const experimentalFeaturesEnabled = computed(() => store.state.settings.experimental)
+const context = computed(() => store.state.context)
+const contextTags = computed(() => [...context.value.tags].sort())
+const contexts = computed(() => store.getters.sortedContexts)
+const tags = computed(() => store.getters.tags)
+
+const clearContext = () => {
+  store.dispatch(DEACTIVATE_CONTEXT)
+}
 
-    return {
-      firebaseDisabled,
-      linkFeedback,
-      mediumPlus,
-      trackCta,
-      user,
+const openFile = async () => {
+  const id = nanoid()
+  // @ts-expect-error This API is valid but is not recognized by TypeScript.
+  const [handle] = await window.showOpenFilePicker({
+    types: [
+      {
+        description: 'Markdown Files',
+        accept: {
+          'text/markdown': ['.markdown', '.md'],
+        },
+      },
+    ],
+  })
+
+  try {
+    const { id } = await AsyncIterable(useFiles().files).any((file) => {
+      return file.handle.isSameEntry(handle)
+    })
+
+    if (id) {
+      return router.push({ path: `/file-editor/${id}` })
     }
-  },
-  computed: {
-    authIsEvaluated() {
-      return this.$store.state.auth.isEvaluated
-    },
-    context() {
-      return this.$store.state.context
-    },
-    contextTags() {
-      return [...this.context.tags].sort()
-    },
-    contexts() {
-      return this.$store.getters.sortedContexts
-    },
-    experimentalFeaturesEnabled() {
-      return this.$store.state.settings.experimental
-    },
-    tags() {
-      return this.$store.getters.tags
-    },
-  },
-  methods: {
-    clearContext() {
-      this.$store.dispatch(DEACTIVATE_CONTEXT)
-    },
-    async openFile() {
-      const id = nanoid()
-      // @ts-expect-error This API is valid but is not recognized by TypeScript.
-      const [handle] = await window.showOpenFilePicker({
-        types: [
-          {
-            description: 'Markdown Files',
-            accept: {
-              'text/markdown': ['.markdown', '.md'],
-            },
-          },
-        ],
-      })
+  } catch {}
 
-      try {
-        const { id } = await AsyncIterable(useFiles().files).any((file) => {
-          return file.handle.isSameEntry(handle)
-        })
+  await handle.createWritable()
 
-        if (id) {
-          return this.$router.push({ path: `/file-editor/${id}` })
-        }
-      } catch {}
+  useFiles().add({ id, handle })
 
-      await handle.createWritable()
+  return router.push({ path: `/file-editor/${id}` })
+}
 
-      useFiles().add({ id, handle })
-      return this.$router.push({ path: `/file-editor/${id}` })
-    },
-    setContext(context: unknown) {
-      this.$store.dispatch(SET_CONTEXT_TAGS, { context })
-    },
-  },
+const setContext = (context: unknown) => {
+  store.dispatch(SET_CONTEXT_TAGS, { context })
+}
+
+const closeTab = async (id: string) => {
+  if (doc.value?.id === id) {
+    await router.push({ path: '/docs/new' })
+  }
+
+  unpinDoc(id)
+}
+
+const trackCta = () => {
+  window.fathom?.trackGoal(fathomEventCtaSaveDocs, 0)
 }
 </script>
 
 <template>
-  <CoreScrollable>
-    <CoreNavPanel class="flex flex-col gap-1">
-      <CoreLink :to="{ path: '/docs' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <SearchIcon class="sq-5" />
-          <span>Search</span>
+  <CoreScrollable class="p-1">
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-col gap-1">
+        <div class="flex flex-col gap-1">
+          <CoreButton :as="CoreLink" :to="{ path: '/docs' }" class="sidebar-link">
+            <IconSearch :stroke-width="1.25" class="sq-5" />
+            <span class="grow">Search</span>
+          </CoreButton>
         </div>
-      </CoreLink>
-      <CoreLink :to="{ path: '/docs/f/untagged' }" class="sidebar-link">
-        <InboxIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Inbox</span>
-          <ModKKey class="text-layer-muted">U</ModKKey>
-        </span>
-      </CoreLink>
-      <CoreLink :to="{ path: '/notepad' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <CoreAsset type="Daily" class="sq-5" />
-          <span>Daily Notepad</span>
+        <CoreLayer class="flex flex-col gap-1">
+          <FlexDivider class="-mx-1" />
+          <DashPanel class="flex flex-col bg-layer" label="Recent">
+            <div v-if="pinnedDocs.length > 0" class="flex flex-col gap-1">
+              <CoreButton v-for="pinnedDoc in pinnedDocs" :key="pinnedDoc.id" :as="CoreLink" :to="{ path: `/docs/${pinnedDoc.id}` }" class="allow-link-active">
+                <span class="flex-grow text-ellipsis overflow-hidden">{{ pinnedDoc.label }}</span>
+                <CoreLayer class="flex -mr-1">
+                  <CoreButton class="p-1 bg-transparent" @click.prevent.stop="() => closeTab(pinnedDoc.id)">
+                    <Icon name="Dismiss" size="1rem" />
+                  </CoreButton>
+                </CoreLayer>
+              </CoreButton>
+            </div>
+            <div v-else>
+              <span class="text-layer-muted">Nothing to see here...</span>
+            </div>
+          </DashPanel>
+        </CoreLayer>
+        <FlexDivider class="-mx-1" />
+        <div class="flex flex-col gap-1">
+          <CoreLink :to="{ path: '/docs/f/untagged' }" class="sidebar-link">
+            <IconInbox :stroke-width="1.25" class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Inbox</span>
+              <ModKKey class="text-layer-muted">U</ModKKey>
+            </span>
+          </CoreLink>
+          <CoreLink :to="{ path: '/notepad' }" class="sidebar-link">
+            <div class="flex gap-2 items-center">
+              <IconNotebook :stroke-width="1.25" class="sq-5" />
+              <span>Daily Notepad</span>
+            </div>
+          </CoreLink>
+          <CoreLink :to="{ path: '/workspaces' }" class="sidebar-link">
+            <IconLayoutGrid :stroke-width="1.25" class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span class="action">Workspaces</span>
+              <ModKKey class="text-layer-muted">C</ModKKey>
+            </span>
+          </CoreLink>
         </div>
-      </CoreLink>
-      <CoreLink :to="{ path: '/workspaces' }" class="sidebar-link">
-        <WorkspacesIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span class="action">Workspaces</span>
-          <ModKKey class="text-layer-muted">C</ModKKey>
-        </span>
-      </CoreLink>
-      <CoreLink :to="linkFeedback" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <CoreAsset type="Feedback" class="sq-5" />
-          <span>Feedback</span>
+        <div v-if="experimentalFeaturesEnabled" class="flex flex-col gap-1">
+          <FlexDivider class="-mx-1" />
+          <button class="sidebar-link w-full" @click="openFile">
+            <IconFile :stroke-width="1.25" class="sq-5" />
+            <span class="action flex flex-grow items-center justify-between ml-2">
+              <span>Open File</span>
+              <IconTestPipe :stroke-width="1.25" class="text-layer-muted w-5" title="Experimental" />
+            </span>
+          </button>
+          <CoreLink :to="{ path: '/assistant' }" class="sidebar-link allow-link-active">
+            <CoreAsset type="Logo" class="sq-5" />
+            <span class="action flex flex-grow items-center justify-between ml-2">
+              <span>Assistant</span>
+              <IconTestPipe :stroke-width="1.25" class="text-layer-muted w-5" title="Experimental" />
+            </span>
+          </CoreLink>
         </div>
-      </CoreLink>
-      <div v-if="experimentalFeaturesEnabled">
-        <button class="sidebar-link w-full" title="Experimental" @click="openFile">
-          <DocumentIcon class="sq-5" />
-          <span class="action flex flex-grow items-center justify-between ml-3">
-            <span>Open File</span>
-            <BeakerIcon class="text-layer-muted w-5" />
-          </span>
-        </button>
-      </div>
-      <CoreLink v-if="experimentalFeaturesEnabled" :to="{ path: '/assistant' }" class="sidebar-link allow-link-active">
-        <CoreAsset type="Logo" class="sq-5" />
-        <span class="action flex flex-grow items-center justify-between ml-3">
-          <span>Assistant</span>
-          <BeakerIcon class="text-layer-muted w-5" />
-        </span>
-      </CoreLink>
-      <CoreLink v-if="!firebaseDisabled && !user.id" :to="{ path: '/account' }" class="sidebar-link text-brand" @click="trackCta">
-        <SaveIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Save Docs</span>
-        </span>
-      </CoreLink>
-      <CoreLink :to="{ path: '/settings' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <SettingsIcon class="sq-5" />
-          <span>Settings</span>
-        </div>
-      </CoreLink>
-      <CoreLink :to="{ path: '/account' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <AccountIcon class="sq-5" />
-          <span>Account</span>
+        <FlexDivider class="-mx-1" />
+        <div class="flex flex-col gap-1">
+          <CoreLink :to="linkFeedback" class="sidebar-link">
+            <div class="flex gap-3 items-center">
+              <IconMessages :stroke-width="1.25" class="sq-5" />
+              <span>Feedback</span>
+            </div>
+          </CoreLink>
+          <CoreLink v-if="!firebaseDisabled && !user.id" :to="{ path: '/account' }" class="sidebar-link text-brand" @click="trackCta">
+            <SaveIcon class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Save Docs</span>
+            </span>
+          </CoreLink>
+          <CoreLink :to="{ path: '/settings' }" class="sidebar-link">
+            <div class="flex gap-3 items-center">
+              <IconSettings :stroke-width="1.25" class="sq-5" />
+              <span>Settings</span>
+            </div>
+          </CoreLink>
+          <CoreLink :to="{ path: '/account' }" class="sidebar-link">
+            <div class="flex gap-3 items-center">
+              <IconUserCircle :stroke-width="1.25" class="sq-5" />
+              <span>Account</span>
+            </div>
+          </CoreLink>
         </div>
-      </CoreLink>
-    </CoreNavPanel>
-    <CoreDivider />
-    <CoreNavPanel class="flex flex-col gap-1" label="Filters">
-      <CoreLink :to="{ path: '/docs/f/tasks' }" class="sidebar-link">
-        <CheckIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Tasks</span>
-          <ModKKey class="text-layer-muted">T</ModKKey>
-        </span>
-      </CoreLink>
-      <CoreLink :to="{ path: '/docs/f/discarded' }" class="sidebar-link">
-        <TrashIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Discarded</span>
-          <ModKKey class="text-layer-muted">D</ModKKey>
-        </span>
-      </CoreLink>
-    </CoreNavPanel>
-    <CoreDivider v-if="context.active || contextTags.length" />
-    <CoreNavPanel v-if="context.active || contextTags.length" label="Workspace">
-      <template #label-alt-action>
-        <CoreButton class="p-0.5" @click.stop="clearContext">
-          <svg class="sq-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </CoreButton>
-      </template>
-      <div class="flex flex-col gap-2 md:gap-1">
-        <TagLink v-for="tag in contextTags" :key="tag" :tag="tag" class="sidebar-link" />
-      </div>
-    </CoreNavPanel>
-    <CoreDivider v-if="contexts.length" />
-    <CoreNavPanel v-if="contexts.length" class="flex flex-col gap-1" label="Workspaces">
-      <button v-for="workspace in contexts" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
-        <WorkspaceIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>{{ workspace.name }}</span>
-        </span>
-      </button>
-    </CoreNavPanel>
-    <CoreDivider v-if="tags.length" />
-    <CoreNavPanel v-if="tags.length" class="flex flex-col gap-1" label="Tags">
-      <CoreLink class="sidebar-link md:hidden" :to="{ path: '/tags' }">
-        <TagIcon class="sq-5" />
-        <span class="ml-3 flex-grow">Tags</span>
-      </CoreLink>
-      <div v-if="mediumPlus" class="flex flex-col gap-1">
-        <TagLink v-for="tag in tags" :key="tag" :tag="tag" class="sidebar-link" />
       </div>
-    </CoreNavPanel>
-    <CoreDivider />
-    <CoreNavPanel class="flex flex-col gap-1" label="Policies">
-      <CoreLink :to="{ path: '/privacy-policy' }" class="sidebar-link">
-        <DocumentTextIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Privacy Policy</span>
-        </span>
-      </CoreLink>
-      <CoreLink :to="{ path: '/terms-and-conditions' }" class="sidebar-link">
-        <DocumentTextIcon class="sq-5" />
-        <span class="action flex flex-grow items-stretch justify-between ml-3">
-          <span>Terms &amp; Conditions</span>
-        </span>
-      </CoreLink>
-    </CoreNavPanel>
+      <FlexDivider class="-mx-1" />
+      <CoreLayer class="flex flex-col gap-1">
+        <DashPanel class="flex flex-col bg-layer" collapsed label="Filters">
+          <CoreLink :to="{ path: '/docs/f/tasks' }" class="sidebar-link">
+            <IconCheck :stroke-width="1.25" class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Tasks</span>
+              <ModKKey class="text-layer-muted">T</ModKKey>
+            </span>
+          </CoreLink>
+          <CoreLink :to="{ path: '/docs/f/discarded' }" class="sidebar-link">
+            <IconTrash :stroke-width="1.25" class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Discarded</span>
+              <ModKKey class="text-layer-muted">D</ModKKey>
+            </span>
+          </CoreLink>
+        </DashPanel>
+        <DashPanel v-if="context.active || contextTags.length" class="bg-layer" label="Workspace">
+          <template #label-alt-action>
+            <CoreButton class="p-0.5" @click.stop="clearContext">
+              <svg class="sq-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </CoreButton>
+          </template>
+          <div class="flex flex-col gap-2 md:gap-1">
+            <TagLink v-for="tag in contextTags" :key="tag" :tag="tag" class="sidebar-link" />
+          </div>
+        </DashPanel>
+        <DashPanel v-if="contexts.length" class="flex flex-col bg-layer" collapsed label="Workspaces">
+          <button v-for="workspace in contexts" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
+            <WorkspaceIcon class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>{{ workspace.name }}</span>
+            </span>
+          </button>
+        </DashPanel>
+        <DashPanel v-if="tags.length" class="flex flex-col bg-layer" collapsed label="Tags">
+          <CoreLink class="sidebar-link md:hidden" :to="{ path: '/tags' }">
+            <TagIcon class="sq-5" />
+            <span class="ml-3 flex-grow">Tags</span>
+          </CoreLink>
+          <div v-if="mediumPlus" class="flex flex-col gap-1">
+            <TagLink v-for="tag in tags" :key="tag" :tag="tag" class="sidebar-link" />
+          </div>
+        </DashPanel>
+        <DashPanel class="flex flex-col bg-layer" collapsed label="Policies">
+          <CoreLink :to="{ path: '/privacy-policy' }" class="sidebar-link">
+            <DocumentTextIcon class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Privacy Policy</span>
+            </span>
+          </CoreLink>
+          <CoreLink :to="{ path: '/terms-and-conditions' }" class="sidebar-link">
+            <DocumentTextIcon class="sq-5" />
+            <span class="action flex flex-grow items-stretch justify-between ml-2">
+              <span>Terms &amp; Conditions</span>
+            </span>
+          </CoreLink>
+        </DashPanel>
+      </CoreLayer>
+    </div>
   </CoreScrollable>
 </template>

From c22a0602afd8f69c1a6f87ff8c5b815de04b6783 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Wed, 31 Jul 2024 22:32:17 -0400
Subject: [PATCH 03/11] Add `#components` import alias

---
 nuxt.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7146e17e..4561cbdd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -18,6 +18,7 @@ const fathomScript = process.env.NUXT_PUBLIC_FATHOM_SITE_URL
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   alias: {
+    '#components': join(root, './components'),
     '#composables': join(root, './composables'),
     '#helpers': join(root, './helpers'),
     '#root': join(root, '.'),

From 9058647fec539c54c656c87a04b011fd9b700307 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Wed, 31 Jul 2024 22:33:04 -0400
Subject: [PATCH 04/11] Replace Heroicons with Tabler

---
 .eslintrc-todo.json                     |  8 ---
 assets/discord.svg                      |  3 -
 assets/github.svg                       |  3 -
 assets/google.svg                       |  6 --
 assets/graph.svg                        | 15 ----
 assets/scene-community.svg              | 51 --------------
 assets/scene-oss.svg                    | 60 ----------------
 assets/scene-portable.svg               | 62 ----------------
 assets/scene-secure.svg                 | 47 -------------
 assets/scene-surveillance.svg           | 25 -------
 components/AssetArrowUp.vue             |  3 -
 components/AssetBolt.vue                |  3 -
 components/AssetLock.vue                |  3 -
 components/AssetTrash.vue               |  3 -
 components/Assistant.vue                | 34 +++------
 components/AssistantChatMessage.vue     |  3 +-
 components/AssistantHistoryChat.vue     |  2 +-
 components/AuthMagicLink.vue            |  4 +-
 components/AuthMagicLinkModal.vue       |  4 +-
 components/AuthSocialLinks.vue          | 10 +--
 components/AuthTier.vue                 |  4 +-
 components/Banner.vue                   |  8 ---
 components/CheckListItem.vue            |  3 +-
 components/CoreAlert.vue                | 29 --------
 components/CoreAsset.vue                | 55 ---------------
 components/CoreEditorToolbar.vue        | 36 +++-------
 components/CoreInput.vue                |  4 +-
 components/CoreListboxButton.vue        |  6 +-
 components/CoreMenu.vue                 |  4 +-
 components/CoreNavPanel.vue             |  4 +-
 components/DashPanel.vue                | 12 ++--
 components/DiscardableAction.vue        | 22 +++---
 components/Doc.vue                      |  8 +--
 components/DocLink.vue                  |  8 +--
 components/DocList.vue                  |  8 +--
 components/Icon.vue                     | 94 +++++++++++++++++++++++++
 components/Modal.vue                    |  4 +-
 components/Providers.vue                | 18 ++---
 components/Tag.vue                      |  6 +-
 components/settings/Appearance.vue      |  2 +-
 layouts/dashboard.vue                   | 17 +++--
 lib/components/DesignSystemColors.vue   |  3 -
 package.json                            |  1 -
 pages/account.vue                       |  8 +--
 pages/assistant/conversations/index.vue |  4 +-
 pages/docs/[docId]/meta.vue             | 34 +++------
 pages/docs/import.vue                   |  5 +-
 pages/index.vue                         |  8 +--
 pages/menu.vue                          | 70 ++++++------------
 pages/quick-action.vue                  | 39 ----------
 pages/workspaces.vue                    |  3 +-
 pnpm-lock.yaml                          | 12 ----
 52 files changed, 210 insertions(+), 678 deletions(-)
 delete mode 100644 assets/discord.svg
 delete mode 100644 assets/github.svg
 delete mode 100644 assets/google.svg
 delete mode 100644 assets/graph.svg
 delete mode 100644 assets/scene-community.svg
 delete mode 100644 assets/scene-oss.svg
 delete mode 100644 assets/scene-portable.svg
 delete mode 100644 assets/scene-secure.svg
 delete mode 100644 assets/scene-surveillance.svg
 delete mode 100644 components/AssetArrowUp.vue
 delete mode 100644 components/AssetBolt.vue
 delete mode 100644 components/AssetLock.vue
 delete mode 100644 components/AssetTrash.vue
 delete mode 100644 components/CoreAlert.vue
 delete mode 100644 components/CoreAsset.vue
 create mode 100644 components/Icon.vue
 delete mode 100644 pages/quick-action.vue

diff --git a/.eslintrc-todo.json b/.eslintrc-todo.json
index 642a0f09..e9acb091 100644
--- a/.eslintrc-todo.json
+++ b/.eslintrc-todo.json
@@ -80,14 +80,6 @@
         "vue/block-tag-newline": "warn"
       }
     },
-    {
-      "files": [
-        "components/CoreAlert.vue"
-      ],
-      "rules": {
-        "vue/no-setup-props-reactivity-loss": "warn"
-      }
-    },
     {
       "files": [
         "components/DiscardableAction.vue"
diff --git a/assets/discord.svg b/assets/discord.svg
deleted file mode 100644
index 5679f487..00000000
--- a/assets/discord.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"/>
-</svg>
diff --git a/assets/github.svg b/assets/github.svg
deleted file mode 100644
index 64cf04ef..00000000
--- a/assets/github.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg fill="currentColor" viewBox="0 0 136 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-  <path d="M67.867,0c-37.48,0 -67.867,30.388 -67.867,67.875c0,29.988 19.446,55.425 46.417,64.404c3.396,0.621 4.633,-1.475 4.633,-3.275c0,-1.608 -0.058,-5.879 -0.092,-11.541c-18.879,4.1 -22.862,-9.1 -22.862,-9.1c-3.088,-7.842 -7.538,-9.93 -7.538,-9.93c-6.162,-4.208 0.467,-4.125 0.467,-4.125c6.813,0.48 10.396,6.996 10.396,6.996c6.054,10.371 15.887,7.375 19.754,5.638c0.617,-4.384 2.367,-7.375 4.308,-9.071c-15.07,-1.713 -30.916,-7.538 -30.916,-33.546c-0,-7.408 2.646,-13.467 6.987,-18.212c-0.7,-1.717 -3.029,-8.617 0.663,-17.963c-0,0 5.7,-1.825 18.666,6.958c5.413,-1.508 11.221,-2.258 16.992,-2.283c5.763,0.025 11.571,0.775 16.992,2.283c12.958,-8.783 18.646,-6.958 18.646,-6.958c3.704,9.346 1.375,16.246 0.674,17.963c4.35,4.745 6.98,10.804 6.98,18.212c-0,26.075 -15.871,31.813 -30.992,33.492c2.438,2.096 4.608,6.237 4.608,12.571c0,9.07 -0.083,16.391 -0.083,18.616c0,1.817 1.221,3.929 4.667,3.267c26.95,-8.996 46.379,-34.417 46.379,-64.396c-0,-37.487 -30.392,-67.875 -67.879,-67.875"/>
-</svg>
diff --git a/assets/google.svg b/assets/google.svg
deleted file mode 100644
index 7377fb32..00000000
--- a/assets/google.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg fill="currentColor" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
-  <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/>
-  <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/>
-  <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"/>
-  <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/>
-</svg>
diff --git a/assets/graph.svg b/assets/graph.svg
deleted file mode 100644
index 69c27947..00000000
--- a/assets/graph.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.42259 4.73583C9.29642 3.13145 7.89353 1.93312 6.28915 2.05929C5.4884 2.12225 4.78878 2.50326 4.30452 3.06861C3.81851 3.636 3.54939 4.38908 3.61259 5.19271C3.67578 5.99634 4.05931 6.6981 4.62803 7.18255C4.9075 7.4206 5.23169 7.60618 5.58456 7.7256C5.94721 7.84833 6.34019 7.90117 6.74605 7.86925C7.22868 7.8313 7.67458 7.67781 8.05872 7.43805C8.30972 7.2814 8.53433 7.08792 8.72563 6.86578C9.11996 6.40786 9.37265 5.82814 9.42259 5.19813C9.4346 5.04661 9.43488 4.89218 9.42259 4.73583Z" fill="currentColor"/>
-  <path d="M18.6942 6.36116C18.6075 5.25803 17.6429 4.43408 16.5398 4.52083C15.9892 4.56412 15.5082 4.82609 15.1752 5.21482C14.906 5.52904 14.7336 5.9261 14.6994 6.35743C14.6912 6.46162 14.691 6.5678 14.6994 6.6753C14.7429 7.22786 15.0066 7.71037 15.3976 8.04347C15.7873 8.37537 16.3033 8.55893 16.8539 8.51564C17.957 8.42889 18.781 7.4643 18.6942 6.36116Z" fill="currentColor"/>
-  <path d="M5.87914 14.0057C5.82252 13.2856 5.29841 12.7142 4.62803 12.5659C4.4767 12.5324 4.31791 12.5205 4.15536 12.5332C3.71485 12.5679 3.32998 12.7775 3.06358 13.0885C2.79622 13.4006 2.64816 13.8149 2.68293 14.257C2.71769 14.6991 2.92868 15.0851 3.24155 15.3517C3.55329 15.6172 3.96619 15.7641 4.4067 15.7294C5.2893 15.66 5.94855 14.8883 5.87914 14.0057Z" fill="currentColor"/>
-  <path d="M10.6239 19.6704C10.7311 21.0341 11.9236 22.0528 13.2874 21.9455C13.9681 21.892 14.5628 21.5681 14.9744 21.0876C15.1038 20.9365 15.2151 20.77 15.3053 20.5915C15.5031 20.2001 15.5995 19.7512 15.5626 19.282C15.5538 19.1698 15.5376 19.06 15.5146 18.9529C15.3976 18.4079 15.1035 17.9347 14.6994 17.5906C14.2177 17.1802 13.5797 16.9533 12.8991 17.0068C11.5353 17.1141 10.5166 18.3066 10.6239 19.6704Z" fill="currentColor"/>
-  <path d="M19.5968 12.3567C18.7142 12.4261 18.055 13.1978 18.1244 14.0805C18.1347 14.2122 18.1607 14.339 18.2005 14.4592C18.3286 14.847 18.5995 15.1655 18.9468 15.3579C19.2124 15.505 19.5227 15.5785 19.8481 15.5529C20.2886 15.5182 20.6735 15.3086 20.9399 14.9976C21.2073 14.6855 21.3553 14.2712 21.3205 13.8291C21.2858 13.387 21.0748 13.001 20.7619 12.7345C20.4502 12.4689 20.0373 12.3221 19.5968 12.3567Z" fill="currentColor"/>
-  <path d="M9.42259 4.73583C9.29642 3.13145 7.89353 1.93312 6.28915 2.05929C5.4884 2.12225 4.78878 2.50326 4.30452 3.06861C3.81851 3.636 3.54939 4.38908 3.61259 5.19271C3.67578 5.99634 4.05931 6.6981 4.62803 7.18255C4.9075 7.4206 5.23169 7.60618 5.58456 7.7256C5.94721 7.84833 6.34019 7.90117 6.74605 7.86925C7.22868 7.8313 7.67458 7.67781 8.05872 7.43805C8.30972 7.2814 8.53433 7.08792 8.72563 6.86578C9.11996 6.40786 9.37265 5.82814 9.42259 5.19813C9.4346 5.04661 9.43488 4.89218 9.42259 4.73583Z" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M18.6942 6.36116C18.6075 5.25803 17.6429 4.43408 16.5398 4.52083C15.9892 4.56412 15.5082 4.82609 15.1752 5.21482C14.906 5.52904 14.7336 5.9261 14.6994 6.35743C14.6912 6.46162 14.691 6.5678 14.6994 6.6753C14.7429 7.22786 15.0066 7.71037 15.3976 8.04347C15.7873 8.37537 16.3033 8.55893 16.8539 8.51564C17.957 8.42889 18.781 7.4643 18.6942 6.36116Z" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M5.87914 14.0057C5.82252 13.2856 5.29841 12.7142 4.62803 12.5659C4.4767 12.5324 4.31791 12.5205 4.15536 12.5332C3.71485 12.5679 3.32998 12.7775 3.06358 13.0885C2.79622 13.4006 2.64816 13.8149 2.68293 14.257C2.71769 14.6991 2.92868 15.0851 3.24155 15.3517C3.55329 15.6172 3.96619 15.7641 4.4067 15.7294C5.2893 15.66 5.94855 14.8883 5.87914 14.0057Z" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M10.6239 19.6704C10.7311 21.0341 11.9236 22.0528 13.2874 21.9455C13.9681 21.892 14.5628 21.5681 14.9744 21.0876C15.1038 20.9365 15.2151 20.77 15.3053 20.5915C15.5031 20.2001 15.5995 19.7512 15.5626 19.282C15.5538 19.1698 15.5376 19.06 15.5146 18.9529C15.3976 18.4079 15.1035 17.9347 14.6994 17.5906C14.2177 17.1802 13.5797 16.9533 12.8991 17.0068C11.5353 17.1141 10.5166 18.3066 10.6239 19.6704Z" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M19.5968 12.3567C18.7142 12.4261 18.055 13.1978 18.1244 14.0805C18.1347 14.2122 18.1607 14.339 18.2005 14.4592C18.3286 14.847 18.5995 15.1655 18.9468 15.3579C19.2124 15.505 19.5227 15.5785 19.8481 15.5529C20.2886 15.5182 20.6735 15.3086 20.9399 14.9976C21.2073 14.6855 21.3553 14.2712 21.3205 13.8291C21.2858 13.387 21.0748 13.001 20.7619 12.7345C20.4502 12.4689 20.0373 12.3221 19.5968 12.3567Z" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M6.52386 4.99951L13.0394 19.7058" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M4.24353 14.2142L6.47737 4.953" stroke="currentColor"/>
-  <path d="M13.0641 19.5702L19.6811 13.9888L16.702 6.56042" stroke="currentColor"/>
-</svg>
diff --git a/assets/scene-community.svg b/assets/scene-community.svg
deleted file mode 100644
index b7ac6ecb..00000000
--- a/assets/scene-community.svg
+++ /dev/null
@@ -1,51 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660.67004 513.66796"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <polygon points="476.60745 95.10262 428.21881 95.10262 428.21881 17.88672 476.60745 33.3299 476.60745 95.10262" fill="#2f2e41"/>
-  <g>
-    <polygon points="485.19781 487.15109 475.21198 487.38674 469.64572 442.52422 484.38226 442.1755 485.19781 487.15109" fill="#a0616a"/>
-    <path d="M450.93774,507.98449h0c0,1.68692,1.19714,3.05447,2.67392,3.05447h19.82098s1.95056-7.8407,9.90323-11.21497l.54886,11.21497h10.22495l-1.23886-18.03317s2.73523-9.6478-2.94525-14.5795c-5.68054-4.93167-1.07953-4.24515-1.07953-4.24515l-2.23462-11.16116-15.45102,1.81693-.11362,17.52042-7.49826,17.39066-10.99814,5.43289c-.97888,.48355-1.61258,1.5853-1.61258,2.80356l-.00012,.00003,.00006,.00003Z" fill="#2f2e41"/>
-  </g>
-  <g>
-    <polygon points="434.01981 487.15109 424.034 487.38674 418.46774 442.52422 433.20428 442.1755 434.01981 487.15109" fill="#a0616a"/>
-    <path d="M399.75974,507.98449h0c0,1.68692,1.19714,3.05447,2.67392,3.05447h19.82098s1.95056-7.8407,9.90323-11.21497l.54886,11.21497h10.22498l-1.23886-18.03317s2.73523-9.6478-2.94525-14.5795c-5.68054-4.93167-1.07953-4.24515-1.07953-4.24515l-2.23462-11.16116-15.45102,1.81693-.11362,17.52042-7.49826,17.39066-10.99814,5.43289c-.97888,.48355-1.61258,1.5853-1.61258,2.80356l-.00012,.00003,.00003,.00003Z" fill="#2f2e41"/>
-  </g>
-  <path d="M479.69608,179.52535l-63.83182,38.09319-14.41364,58.6841,7.20682,181.19998h31.60785l7.00009-174.50793,14.01236,174.50793h32.10236l8.11957-195.96588c2.23615-14.24153,.47134-28.82428-5.09747-42.12126l-16.70612-39.89014v.00002Z" fill="#2f2e41"/>
-  <path d="M465.28244,63.18671l-26.76819-2.05909-7.20682,14.41364-20.59091,5.14773-5.14774,63.83183c10.18344,26.45763,16.57611,51.74094,10.29544,73.09772l78.24545-4.11818-13.06387-35.32477s-.32022-13.06387,6.8866-30.56615-4.11819-62.80227-4.11819-62.80227l-16.47272-4.11818-2.05908-17.50227h.00003Z" fill="#ff6666"/>
-  <g>
-    <path d="M285.04523,88.01722c2.60648,.08077,5.01508-.43385,6.90954-1.35578l24.78147,2.33778,.76745-11.82457-25.22097-1.09834c-1.83374-1.03748-4.20587-1.70024-6.81235-1.781-5.95447-.1845-10.87667,2.73767-10.99407,6.52688s4.61443,7.0105,10.56888,7.19503h.00004Z" fill="#a0616a"/>
-    <path d="M431.63758,124.1151s-.87513-37.66936-9.13728-43.3234c-3.40733-2.33173-55.79835-2.86144-57.70688-3.05922-11.7705-1.21982-20.14619-5.89291-30.05665-6.40513-24.15143-1.24822-36.36142,4.61263-36.36142,4.61263l-.4261,12.09401,133.68833,36.08112h0Z" fill="#ff6666"/>
-  </g>
-  <circle id="b" cx="449.61813" cy="38.77752" r="21.37412" fill="#a0616a"/>
-  <path d="M443.13531,6.9502c-4.59747,2.89805-7.96442,.82321-11.24823,2.2848-6.41595,2.85567-17.2478,22.91289-16.27109,31.31003,1.38333,11.89259,5.75455,12.38228,5.62411,20.91467-.20944,13.70108-1.29807,13.64424,1.50778,18.42823,3.12073,5.3209,20.79678,3.87619,24.07825-3.33932,.64737-1.42351-6.54358-.86368-14.48914-19.53917-3.98712-9.37141-1.36966-17.91088,0-21.62045,.32068-.86851,.46719-7.03431,1.15149-6.35002,6,6,9.36322,1.61404,12.98618,1.11071,7.43539-1.03298,13.03461,4.9656,15.29056,2.81206,1.67871-1.60251-.46268-5.83954,.3515-6.15137,.86807-.33248,3.74231,4.31568,5.62411,9.31494,1.21353,3.22392,1.82028,4.83586,1.75754,6.67864-.19379,5.69077-1.64487,21.82578-4.21591,26.56006-5.55215,10.22368,1.43896,14.08128,5.7977,13.336,3.52148-.60214,19.08893,1.76859,19.94095,.04809,.759-1.53272-.97482-17.29877-2.79672-31.95602-2.18982-17.61713-10.96655-33.80629-24.72836-45.02108-.80704-.65767-1.409-1.10891-1.7308-1.28132-.76224-.40838-8.62128-4.48915-14.4118-1.23027-2.13171,1.19972-1.78458,2.15685-4.21808,3.69082l-.00003-.00003Z" fill="#2f2e41"/>
-  <g>
-    <polygon points="176.13661 503.83715 164.2775 503.83599 158.63605 458.09316 176.13899 458.09438 176.13661 503.83715" fill="#ffb6b6"/>
-    <path d="M135.50577,503.56811h0c-.36925,.62189-.56409,2.62906-.56409,3.35226h0c0,2.22293,1.80202,4.02502,4.02502,4.02502h36.72632c1.51648,0,2.7459-1.22934,2.7459-2.74591v-1.52902s1.8168-4.59555-1.92369-10.2598c0,0-4.64894,4.43521-11.59566-2.51151l-2.04852-3.71106-14.82851,10.84482-8.21921,1.01172c-1.7982,.22131-3.39246-.03436-4.31743,1.52347h-.00014Z" fill="#2f2e41"/>
-  </g>
-  <g>
-    <polygon points="226.13661 503.83715 214.2775 503.83599 208.63605 458.09316 226.13899 458.09438 226.13661 503.83715" fill="#ffb6b6"/>
-    <path d="M185.50577,503.56811h0c-.36925,.62189-.56409,2.62906-.56409,3.35226h0c0,2.22293,1.80202,4.02502,4.02502,4.02502h36.72632c1.51648,0,2.7459-1.22934,2.7459-2.74591v-1.52902s1.8168-4.59555-1.92369-10.2598c0,0-4.64894,4.43521-11.59566-2.51151l-2.04852-3.71106-14.82851,10.84482-8.21921,1.01172c-1.7982,.22131-3.39246-.03436-4.31743,1.52347h-.00014Z" fill="#2f2e41"/>
-  </g>
-  <polygon points="228.48848 215.03898 141.48848 214.03898 132.48848 271.03896 154.48848 468.03896 183.33099 468.03896 189.98848 284.53896 201.98848 471.53896 231.51997 471.53896 244.98848 258.53896 228.48848 215.03898" fill="#2f2e41"/>
-  <g>
-    <path d="M597.3208,495.98068c2.06592,.12936,3.2077-2.43738,1.64465-3.93332l-.15552-.61819c.02045-.0495,.04108-.09897,.06177-.14838,2.08923-4.98181,9.16992-4.94742,11.24139,.04178,1.83856,4.42816,4.17944,8.86389,4.7558,13.54593,.25836,2.0668,.14215,4.17236-.31647,6.20047,4.30804-9.41058,6.57513-19.68661,6.57513-30.02078,0-2.59653-.14215-5.19302-.43274-7.78296-.23901-2.11853-.56842-4.22409-.99469-6.31033-2.30573-11.27719-7.29852-22.01825-14.50012-30.98962-3.46198-1.89249-6.34906-4.85065-8.09296-8.39651-.62646-1.2789-1.11737-2.65463-1.34991-4.05618,.39398,.05167,1.48553-5.94867,1.18842-6.3168,.54907-.83316,1.5318-1.24734,2.13147-2.06033,2.9823-4.0434,7.09119-3.3374,9.23621,2.15726,4.58221,2.31265,4.62659,6.14807,1.81494,9.83682-1.78876,2.34683-2.03455,5.52234-3.60406,8.03479,.1615,.2067,.32947,.40695,.49091,.61365,2.96106,3.79788,5.52209,7.88,7.68103,12.16858-.61017-4.7662,.29065-10.50821,1.82642-14.20959,1.74817-4.21732,5.0249-7.76917,7.91046-11.41501,3.466-4.37924,10.57336-2.46805,11.18402,3.08331,.00592,.05374,.01166,.10745,.01733,.16119-.42859,.24179-.84851,.49866-1.25867,.76993-2.33948,1.54724-1.53094,5.17386,1.24109,5.60175l.06274,.00967c-.15503,1.54367-.41986,3.07443-.80731,4.57938,3.70178,14.3158-4.2901,19.52991-15.70148,19.76413-.25189,.12915-.49738,.25833-.74927,.3811,1.15619,3.25525,2.07983,6.59448,2.7644,9.97891,.61359,2.99042,1.03992,6.01318,1.27887,9.04889,.29718,3.83005,.2713,7.6796-.0517,11.50323l.01941-.13562c.82025-4.21115,3.10669-8.14462,6.42657-10.87027,4.94562-4.06265,11.9328-5.55869,17.26825-8.82425,2.56836-1.57196,5.85944,.45944,5.41119,3.43707l-.02179,.14261c-.79443,.32288-1.56946,.69754-2.31873,1.11734-.42859,.24185-.84845,.49866-1.25867,.76993-2.33948,1.5473-1.53094,5.17392,1.24109,5.60181l.06281,.00964c.04523,.00647,.08398,.01294,.12909,.01944-1.36279,3.23581-3.26166,6.23923-5.63855,8.82922-2.31464,12.49713-12.25604,13.68283-22.8902,10.04355h-.00647c-1.1626,5.06378-2.86127,10.01126-5.04437,14.72623h-18.0202c-.06464-.20023-.12274-.40692-.18091-.60718,1.66638,.10342,3.3457,.0065,4.98627-.29703-1.33704-1.64059-2.67395-3.2941-4.01099-4.93463-.03229-.03229-.05817-.06461-.08398-.09689-.67816-.8396-1.36279-1.67282-2.04102-2.51245l-.00037-.00101c-.04248-2.57755,.26654-5.14661,.87878-7.63983l.00055-.00034,.00006-.00009Z" fill="#f2f2f2"/>
-    <path d="M0,512.47796c0,.66003,.53003,1.19,1.19006,1.19H659.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#ccc"/>
-  </g>
-  <polygon points="198.98848 65.53897 168.02391 65.53897 161.98848 77.53897 132.48848 91.08621 142.98848 168.53898 134.98848 219.53898 234.92155 219.53898 225.98848 160.53898 237.98848 89.53897 204.98848 76.53897 198.98848 65.53897" fill="#e6e6e6"/>
-  <path d="M302.63635,253.22138c-1.35047-2.75524-1.96668-5.58707-1.89691-8.06518l-14.52297-25.43477,12.30503-6.55655,13.40724,26.50697c2.00147,1.46292,3.86228,3.6847,5.21277,6.43994,3.08516,6.29436,2.33906,12.98845-1.66643,14.95171-4.00549,1.96326-9.75355-1.54773-12.83871-7.84209v-.00003Z" fill="#ffb6b6"/>
-  <path d="M206.90837,86.12585s9.7973-10.08042,20.78782-3.06555c10.99052,7.01487,51.08317,78.79864,51.08317,78.79864l30.92691,61.71237-21.82984,10.17021-26.33701-59.09482-55.31011-59.5213,.67909-28.99957-.00002,.00002Z" fill="#e6e6e6"/>
-  <circle cx="182.19489" cy="31.72918" r="27.96054" fill="#ffb6b6"/>
-  <path d="M173.42004,54.23213c.12943,2.73928,.19415,4.10893-.2267,4.27447-1.26678,.49829-17.57945-9.13559-19.50031-15.5487-.89589-2.99112-.13937-3.05075-.7933-11.56027-.62544-8.13874-1.32661-8.2036-.49765-10.21717,.92139-2.238,3.73517-4.99537,9.36273-10.51014,2.12782-2.08517,3.19174-3.12776,3.86336-3.66681,2.03552-1.63376,9.61858-7.72008,16.57198-6.93375,2.9146,.32961,2.41647,1.49329,13.30482,7.39793,.93784,.50858,2.19548,1.17994,3.93233,1.95076,4.22417,1.87472,6.84479,2.36074,8.22437,2.88354,8.36092,3.16845,5.90727,20.81824,5.1888,20.91941-.26189,.03688-.33296-2.25184-1.70499-2.44106-1.23499-.17032-2.02139,1.56761-3.14391,1.63086-3.06528,.17273,.33879-2.76164-7.1635-6.02074-2.9165-1.26696,5.19873,4.44557-2.5266,4.35285-12.08104-.14501-4.35448,.6239-8.94247,3.03394-3.34595,1.75761-16.80617-7.91495-16.25926-4.82419,.38574,2.18,1.96767,2.80764,1.73946,5.24985-.22108,2.36604-1.99922,4.91621-3.5677,5.00992-1.44562,.08636-2.23788-1.94234-2.72009-1.74821-.52454,.21117,.05157,2.75692,1.18263,5.37242,1.43588,3.32038,2.29295,3.3464,3.05023,5.9001,.43558,1.46882,.49896,2.81088,.62579,5.495h-.00002Z" fill="#2f2e41"/>
-  <path d="M393.7945,245.01136l-180.15781-45.83693c-11.5164-2.93008-18.50203-14.68339-15.57195-26.19979l22.41268-88.09098c2.93008-11.5164,14.68339-18.50203,26.19979-15.57195l180.15781,45.83693c11.5164,2.93008,18.50203,14.68339,15.57195,26.19979l-22.41268,88.09097c-2.93008,11.5164-14.68339,18.50203-26.19979,15.57195h0Z" fill="#fff"/>
-  <path d="M393.7945,245.01136l-180.15781-45.83693c-5.7582-1.46504-10.38371-5.13589-13.68797-10.00331-4.80751-7.08182-6.06196-15.99784-3.95144-24.29302l18.79461-73.87046c2.11051-8.29518,7.47354-15.52754,15.081-19.45067,5.2287-2.69641,11.04613-3.7103,16.80433-2.24526l180.15781,45.83693c11.53495,2.9348,18.50675,14.66484,15.57195,26.19979l-22.41268,88.09097c-2.93008,11.5164-14.68339,18.50203-26.19979,15.57195h0ZM246.18408,71.24996c-10.46448-2.66244-7.72944,6.81486-10.39189,17.27934l-.00002,.00009c-12.98962,51.05451,13.87706,103.83737,62.80805,123.35791,26.41344,10.53738,48.38357,19.15044,48.38357,19.15044,36.58969,9.30939,73.79823-12.80567,83.10762-49.39536l10.37732-40.7871c2.66244-10.46448-3.66236-21.10595-14.12684-23.76839l-180.15781-45.83692Z" fill="#3f3d56"/>
-  <path d="M330.47886,140.66837l-.00006-.00002c-1.25546-10.32043-10.63949-17.66902-20.95986-16.4136l-.00006-.00002c-10.22249,1.24352-17.52398,10.46277-16.44173,20.66702l-.29938,.03641,4.54631,37.37348,34.39032-4.18341c1.08685,.05877,2.19263,.02961,3.31059-.10642l.00006,.00002c10.3204-1.25545,17.66902-10.63951,16.41356-20.95991v-.00004c-1.25545-10.32041-10.63949-17.669-20.95985-16.41356l.0001,.00009h0Z" fill="#ff6666"/>
-  <path d="M264.55969,493.7224h-.00003c-1.45657-3.7532-5.67987-5.61499-9.43306-4.15845h-.00002c-3.71759,1.44272-5.57742,5.5997-4.19696,9.32584l-.10889,.04224,5.27463,13.59152,12.50662-4.85361c.41348-.08173,.82568-.19824,1.23224-.35605h.00003c3.75317-1.45657,5.61499-5.6799,4.15842-9.43307v-.00003c-1.45657-3.7532-5.67987-5.61499-9.43304-4.15842l.00006,.00003Z" fill="#e6e6e6"/>
-  <path d="M544.55969,493.7224h0c-1.45654-3.7532-5.67987-5.61499-9.43304-4.15845h0c-3.71759,1.44272-5.57745,5.5997-4.19696,9.32584l-.10889,.04224,5.27466,13.59152,12.50665-4.85361c.41351-.08173,.82568-.19824,1.23224-.35605h0c3.75317-1.45657,5.61499-5.6799,4.15845-9.43307v-.00003c-1.45654-3.7532-5.67987-5.61499-9.43304-4.15842l.00006,.00003h-.00012Z" fill="#e6e6e6"/>
-  <circle cx="315.71168" cy="224.38595" r="24" fill="#ff6666"/>
-  <path d="M206.61116,127.053c-2.57521,1.66838-5.31372,2.61681-7.78256,2.84207l-23.52834,17.4431-7.97261-11.43854,24.72554-16.46272c1.21465-2.16116,3.19952-4.27285,5.77473-5.94123,5.88306-3.81141,12.61836-3.86623,15.04379-.12248,2.42543,3.74376-.3775,9.86837-6.26054,13.67979h-.00002v.00002Z" fill="#ffb6b6"/>
-  <path d="M151.50369,86.34849s-18-2-21,5-9,76.99999-9,76.99999l10,17,65.57875-49.63223-13.28033-13.28034-28.10548,13.28034-4.19292-49.36777h-.00002Z" fill="#e6e6e6"/>
-  <g>
-    <path d="M412.21765,108.9675c2.13898,2.19999,4.5975,3.73446,6.95416,4.50389l19.05283,22.24487,10.31979-9.37574-20.43829-21.55572c-.70285-2.37739-2.1676-4.87808-4.30658-7.07807-4.88651-5.02587-11.44046-6.57928-14.6387-3.46969-3.19827,3.10959-1.82968,9.70462,3.05679,14.73047h0Z" fill="#a0616a"/>
-    <path d="M475.0062,81.5578s17.99335,2.05887,19.3591,9.55119-8.37411,77.07058-8.37411,77.07058l-13.53482,14.34604-52.8786-62.99034,15.90439-9.98926,24.44208,19.20599,15.08194-47.1942h.00003Z" fill="#ff6666"/>
-  </g>
-  <circle cx="232.39196" cy="147.33817" r="15.00444" fill="#e6e6e6"/>
-</svg>
diff --git a/assets/scene-oss.svg b/assets/scene-oss.svg
deleted file mode 100644
index 11a2924a..00000000
--- a/assets/scene-oss.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 598.99741"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <circle cx="332.00497" cy="292.00357" r="292.00357" fill="#f2f2f2"/>
-  <path d="M1114,668.4987a13.68982,13.68982,0,0,1-.16992,2.12c-7.14014,43.76-234.46008,78.88-513.83008,78.88s-506.69-35.12-513.83-78.88a13.67509,13.67509,0,0,1-.17-2.12c0-.2,0-.41.02-.61,0-.11005.01-.21.01-.32a.48944.48944,0,0,0,.01-.12c.04-.45.1-.88.18-1.32,3.26-17.89,43.35-34.33,108.74-47.5,53.48-10.77,123.89-19.36,204.93-24.76,61.5-4.1,129.12-6.37,200.11-6.37,57.12,0,112.06,1.47,163.38,4.17h.02q16.11.855,31.74,1.87c71.33,4.62,134.63,11.69,185.63,20.54,31.37,5.45,58.1,11.58,79.18994,18.22h.01c32.46,10.23,51.6001,21.7,53.81006,33.83.08.44.13989.87.17993,1.32a.48659.48659,0,0,0,.01.12c0,.11.01.21.01.32C1114,668.08867,1114,668.29869,1114,668.4987Z" transform="translate(-86 -150.5013)" fill="#3f3d56"/>
-  <ellipse cx="501" cy="571.99741" rx="165" ry="24" opacity="0.1"/>
-  <path d="M1059.96,632.29869c-5.77,1.65-12.27,3.18-19.3999,4.58-29.36011,5.78-69.42005,9.33-113.53,9.33-49.28,0-93.45-4.43-123.38-11.44-24.84-5.81994-39.88-13.38995-39.88-21.69995,0-7.30005,11.63995-14.06,31.37-19.53,71.33,4.62,134.63,11.69,185.63,20.54C1012.14,619.52867,1038.87,625.65868,1059.96,632.29869Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <path d="M618,621.2487c0,15.13-94.92,27.4-212,27.4s-212-12.27-212-27.4a4.372,4.372,0,0,1,.96-2.62c53.48-10.77,123.89-19.36,204.93-24.76q3.045-.015,6.11-.01C523.08,593.85869,618,606.1187,618,621.2487Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <rect x="416.47191" y="334.97493" width="41.68539" height="134.58427" fill="#ff6666"/>
-  <rect x="279.50562" y="271.85134" width="41.68539" height="197.70787" fill="#ff6666"/>
-  <rect x="143.73034" y="271.85134" width="41.68539" height="197.70787" fill="#ff6666"/>
-  <rect x="211.61798" y="271.85134" width="41.68539" height="134.58427" fill="#ff6666"/>
-  <rect x="347.39326" y="271.85134" width="41.68539" height="39.30337" fill="#ff6666"/>
-  <rect x="347.39326" y="334.97493" width="41.68539" height="134.58427" fill="#8a8b8c"/>
-  <rect x="416.47191" y="271.85134" width="109.57303" height="39.30337" fill="#ff6666"/>
-  <path d="M901.062,410.53031q42.74823,0,72.77372,29.83923A97.98265,97.98265,0,0,1,995.66753,473.208a107.34579,107.34579,0,0,1,.09551,78.40916,93.53335,93.53335,0,0,1-21.73946,32.294,104.70367,104.70367,0,0,1-33.84136,22.5609,101.42451,101.42451,0,0,1-39.11384,7.82277,99.01466,99.01466,0,0,1-38.66173-7.73362A104.84511,104.84511,0,0,1,807.00731,551.165a101.7643,101.7643,0,0,1,.08913-77.59409A102.30668,102.30668,0,0,1,829.565,440.18488Q858.67354,410.53668,901.062,410.53031Zm.36932,18.3773q-34.93023,0-58.76787,24.37889A87.59486,87.59486,0,0,0,824.197,480.66778a80.78885,80.78885,0,0,0,0,63.31126,86.24851,86.24851,0,0,0,45.5771,45.30965,82.68682,82.68682,0,0,0,63.41-.08914,87.99456,87.99456,0,0,0,27.74106-18.37412q23.83128-23.28683,23.82809-58.40491a83.65859,83.65859,0,0,0-6.18627-32.02018,81.465,81.465,0,0,0-18.0016-26.92917Q935.98906,428.9092,901.43132,428.90761Zm-1.27673,66.59064-13.64925,7.09685a14.0061,14.0061,0,0,0-5.36482-6.36774,12.08742,12.08742,0,0,0-5.91563-1.818q-13.63969,0-13.64606,18.01115,0,8.18574,3.45449,13.09526,3.45768,4.9143,10.19157,4.91589,8.91644,0,12.55719-8.73335l12.55082,6.36774a29.99,29.99,0,0,1-26.74451,16.01168q-13.64448,0-22.01646-8.3704-8.36721-8.36721-8.36721-23.28364,0-14.55666,8.45954-23.10535,8.45795-8.5487,21.37969-8.55187Q891.97045,480.75694,900.15459,495.49825Zm58.76469,0-13.46459,7.09685a13.99175,13.99175,0,0,0-5.368-6.36774,12.37253,12.37253,0,0,0-6.09393-1.818q-13.64446,0-13.64924,18.01115,0,8.18574,3.45767,13.09526,3.45291,4.9143,10.19157,4.91589,8.90688,0,12.54764-8.73335l12.73548,6.36774a31.27658,31.27658,0,0,1-11.27409,11.73575,29.39766,29.39766,0,0,1-15.46405,4.27593q-13.83072,0-22.09923-8.3704-8.2908-8.36721-8.28444-23.28364,0-14.55666,8.46273-23.10535,8.45319-8.5487,21.37333-8.55187Q950.91184,480.75694,958.91928,495.49825Z" transform="translate(-86 -150.5013)" fill="#ff6666"/>
-  <path d="M839.41688,660.83685c0,48.73748-67.93425,33.66253-151.11288,33.66253s-150.10359,15.075-150.10359-33.66253,67.925-59.33747,151.10359-59.33747S839.41688,612.09937,839.41688,660.83685Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <path d="M839.41688,648.83685c0,48.73748-67.93425,33.66253-151.11288,33.66253s-150.10359,15.075-150.10359-33.66253,67.925-59.33747,151.10359-59.33747S839.41688,600.09937,839.41688,648.83685Z" transform="translate(-86 -150.5013)" fill="#3f3d56"/>
-  <path d="M825.54156,561.34329l3.43359,14.16355a.88462.88462,0,0,1-.01719.478l-15.57547,48.67335a.88465.88465,0,0,1-1.72156-.16974l-2.15469-18.96122a.88471.88471,0,0,1,.03787-.374l14.29657-43.87567A.88465.88465,0,0,1,825.54156,561.34329Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <polygon points="738.278 412.038 741.449 424.19 727.711 468.572 724.541 454.835 738.278 412.038" fill="#f2f2f2"/>
-  <path d="M755.06392,628.58381c.52836,1.58507,54.949-.52835,55.47732-1.05671a11.4687,11.4687,0,0,0,1.16235-2.11342c.49669-1.05671.95107-2.11342.95107-2.11342l-2.11342-17.10815L756.649,604.27946s-1.34734,14.49808-1.62209,21.13422A15.85321,15.85321,0,0,0,755.06392,628.58381Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <polygon points="717.673 458.005 718.729 472.799 694.953 472.799 694.953 458.005 717.673 458.005" opacity="0.1"/>
-  <polygon points="687.028 462.76 687.17 462.732 686.5 469.1 673.291 469.1 673.291 462.76 687.028 462.76" opacity="0.1"/>
-  <path d="M755.06392,628.58381c.52836,1.58507,54.949-.52835,55.47732-1.05671a11.4687,11.4687,0,0,0,1.16235-2.11342H755.0269A15.85321,15.85321,0,0,0,755.06392,628.58381Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <path d="M671.05541,573.10649h14.79395l36.45652-14.26559s25.88942-10.56711,23.776,9.5104S740.27,615.37493,740.27,615.37493s-11.62382-5.28356-17.96409-3.69849-2.11342-32.22968-2.11342-32.22968-51.77883,24.8327-56.534,21.66257-5.81191-25.36106-5.81191-25.36106Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M671.05541,573.10649h14.79395l36.45652-14.26559s25.88942-10.56711,23.776,9.5104S740.27,615.37493,740.27,615.37493s-11.62382-5.28356-17.96409-3.69849-2.11342-32.22968-2.11342-32.22968-51.77883,24.8327-56.534,21.66257-5.81191-25.36106-5.81191-25.36106Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <path d="M694.36337,526.77716l17.90376,25.72347,41.74008,34.87146s38.56994,8.982,33.28639,15.32231-37.51323-6.34027-37.51323-6.34027S701.7,561.48268,700.115,558.8409s-19.0208-27.47448-19.0208-27.47448Z" transform="translate(-86 -150.5013)" fill="#a0616a"/>
-  <path d="M694.36337,526.77716l17.90376,25.72347,41.74008,34.87146s38.56994,8.982,33.28639,15.32231-37.51323-6.34027-37.51323-6.34027S701.7,561.48268,700.115,558.8409s-19.0208-27.47448-19.0208-27.47448Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <circle cx="605.66127" cy="324.33109" r="23.77599" fill="#a0616a"/>
-  <path d="M690.0762,495.9666s-7.92533,13.73724-9.51039,21.13422-23.776-14.79395-23.776-14.79395l-2.90595-7.66115s20.87-9.77458,19.285-17.69991S690.0762,495.9666,690.0762,495.9666Z" transform="translate(-86 -150.5013)" fill="#a0616a"/>
-  <path d="M683.73594,506.00536l11.62382,22.71928s-2.64178,11.09546-6.86862,12.15217-22.19093-13.73724-22.19093-13.73724Z" transform="translate(-86 -150.5013)" fill="#d0cde1"/>
-  <path d="M694.30305,537.17833l21.66257,28.53119,51.77883,38.56994s37.51323,7.92534,29.05955,13.73724-32.758-5.28355-32.758-5.28355-52.30718-28.00284-63.40265-39.62666-31.70132-31.173-31.70132-31.173Z" transform="translate(-86 -150.5013)" fill="#a0616a"/>
-  <path d="M665.2435,581.56018l6.34026,10.03875,37.83932-11.9045a29.75135,29.75135,0,0,1,24.7708,2.98851c6.60444,4.1608,10.83129,10.76524,1.32089,20.53981-19.0208,19.54915-31.70133,8.982-31.70133,8.982s-63.931,30.11625-74.49811,15.3223-11.09546-22.19093-11.09546-22.19093S658.90323,579.97511,665.2435,581.56018Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M744.49681,616.43164s16.90737,11.09546-3.17013,16.379-34.87146-2.11343-34.87146-2.11343-17.43573,0-17.43573-8.982,5.81191-10.03875,5.81191-10.03875l17.96409,2.64178S734.45806,608.50631,744.49681,616.43164Z" transform="translate(-86 -150.5013)" fill="#d0cde1"/>
-  <path d="M711.16583,468.8514a17.728,17.728,0,0,0,4.98235,1.78469,4.548,4.548,0,0,0,4.59533-1.96886,6.18073,6.18073,0,0,0,.522-2.7952c.06365-2.90132-.14619-6.03778-1.98475-8.28309-1.1701-1.429-2.87816-2.32977-4.08936-3.72406a17.59821,17.59821,0,0,1-2.06717-3.37767c-2.35552-4.42406-5.84318-8.67589-10.69025-9.9513a23.18347,23.18347,0,0,0-6.24-.47707l-12.20625.17221a21.25081,21.25081,0,0,0-5.872.632c-3.92885,1.1879-6.78945,4.49179-9.40936,7.65139a47.85117,47.85117,0,0,0-5.39639,7.44763,26.133,26.133,0,0,0-3.09771,12.80437,11.97989,11.97989,0,0,0,.43881,3.38808,18.80129,18.80129,0,0,0,1.33168,2.925c2.28907,4.49613,3.64824,10.1121,1.07032,14.44908,4.47812-1.82926,8.90892-4.22774,11.863-8.05834,1.3215-1.71364,2.35787-3.7197,4.119-4.9772s4.63076-1.36658,5.76072.479a5.163,5.163,0,0,1,.58258,2.41835,11.084,11.084,0,0,0,.66762,4.08133,3.05833,3.05833,0,0,0,3.32224,1.8956c2.30039-.648,2.0801-4.17861,3.85194-5.78243,1.3456-1.218,3.42157-.98516,5.15028-1.53807a7.64334,7.64334,0,0,0,4.38653-4.32052c.65453-1.46807.64508-5.3098,1.88365-6.10481C706.19386,466.62453,709.72609,468.20958,711.16583,468.8514Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M651.99646,492.13947a6.27057,6.27057,0,0,1,3.26389.00831c3.39162.91054,10.99473,3.321,12.62493,6.989,2.11342,4.7552,9.51039,12.15217,9.51039,12.15217s10.03876,10.03875,7.92534,16.90737-10.03876,14.794-10.03876,14.794,2.11342,32.758-8.45368,41.21172-14.794,2.64178-14.794,10.56711-32.758,32.758-39.0983,17.43573c0,0,3.17014-28.5312,2.11343-38.56995C614.00826,563.74087,615.53292,502.01108,651.99646,492.13947Z" transform="translate(-86 -150.5013)" fill="#d0cde1"/>
-  <path d="M668.942,505.477s32.22968,23.776,26.41777,33.81475c0,0-19.54915,9.5104-23.776,8.982s-20.60586-19.02079-24.8327-20.60586S640.4108,497.55167,668.942,505.477Z" transform="translate(-86 -150.5013)" fill="#d0cde1"/>
-  <path d="M579.81065,526.78274c-5.01266,1.69284-9.5539,5.65228-10.58039,10.84253-.47582,2.40592-.18409,4.907-.58451,7.32661-.92865,5.61161-5.33358,9.89722-9.39638,13.878s-8.2584,8.60617-8.55492,14.28636c-.3247,6.22,4.1862,12.047,3.40563,18.22633-.90687,7.17909-8.48947,11.831-10.36389,18.82016-1.25164,4.667.28211,9.6942,2.8055,13.81484,4.80858,7.85231,13.0279,13.18323,21.78085,16.041s18.07506,3.45905,27.28222,3.55552c11.21079.11746,23.38277-.845,31.806-8.244a25.48043,25.48043,0,0,0,8.459-16.5882c.8002-8.57064-2.77695-17.42641-.30951-25.67311,1.55287-5.19,5.44709-9.93,4.86592-15.316-.56823-5.26625-5.16773-8.99907-8.32312-13.25346-2.9461-3.97222-4.7338-8.66319-6.48587-13.28794l-5.99481-15.82383c-1.17848-3.1107-2.47257-6.38232-5.09885-8.424-4.91665-3.8221-12.82242-3.07115-18.57152-2.28285C590.61855,525.412,584.93966,525.0506,579.81065,526.78274Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M581.68806,572.87747s2.65748,8.63681-17.27362,18.60236,1.99311,20.59548,1.99311,20.59548l23.25295,5.315s23.91732-3.32185,26.5748-7.30808,7.30808-17.27362,5.97934-19.26673a31.0614,31.0614,0,0,0-3.32186-3.98622s-15.94488-2.65748-15.28051-9.96555S581.68806,572.87747,581.68806,572.87747Z" transform="translate(-86 -150.5013)" fill="#ffb9b9"/>
-  <path d="M581.68806,572.87747s2.65748,8.63681-17.27362,18.60236,1.99311,20.59548,1.99311,20.59548l23.25295,5.315s23.91732-3.32185,26.5748-7.30808,7.30808-17.27362,5.97934-19.26673a31.0614,31.0614,0,0,0-3.32186-3.98622s-15.94488-2.65748-15.28051-9.96555S581.68806,572.87747,581.68806,572.87747Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <circle cx="508.64328" cy="414.73592" r="21.25984" fill="#ffb9b9"/>
-  <path d="M592.318,610.08219s-25.60367-1.87245-26.08923-19.53858c0,0-9.12238-1.05689-11.77986,1.60059s-11.2943,4.65059-11.2943,11.29429,14.61615,26.57481,14.61615,26.57481,7.97244,26.5748,4.65059,31.22539-3.98622,16.60925-3.98622,16.60925,33.2185-2.65748,38.53346,0,26.57481,2.65748,27.90355,0-1.32874-35.876-1.32874-35.876,5.97933-7.97244,4.65059-17.27362L644.13885,606.096s-5.97933-17.938-15.28051-17.938c0,0-12.623-3.32185-12.95522-1.66092S622.21464,606.76034,592.318,610.08219Z" transform="translate(-86 -150.5013)" fill="#ff6584"/>
-  <path d="M532.52467,668.54676s5.97933,9.30118,21.25985,11.29429,17.938-3.32185,16.60925-4.65059-17.27362-7.30807-17.27362-7.30807l-9.30119-7.30807Z" transform="translate(-86 -150.5013)" fill="#ffb9b9"/>
-  <path d="M641.48137,660.57432l-17.27362,9.96555s-22.58859-1.32874-13.95178,5.315,24.5817,3.98622,24.5817,3.98622l15.28051-7.30807Z" transform="translate(-86 -150.5013)" fill="#ffb9b9"/>
-  <path d="M555.11326,677.84794s-15.94489,39.19784,3.32185,45.17717,72.41634,4.65059,84.375-3.32185,15.28051-18.60236,13.2874-21.92421-15.28051-12.623-24.58169-13.2874S555.11326,677.84794,555.11326,677.84794Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M555.11326,677.84794s-15.94489,39.19784,3.32185,45.17717,72.41634,4.65059,84.375-3.32185,15.28051-18.60236,13.2874-21.92421-15.28051-12.623-24.58169-13.2874S555.11326,677.84794,555.11326,677.84794Z" transform="translate(-86 -150.5013)" opacity="0.05"/>
-  <path d="M630.37766,680.28318s56.28087-20.37323,55.6165,4.20847-35.876,31.22539-35.876,31.22539l-10.62992,1.32874-58.46457,1.99311s1.99311-10.62992-2.65748-11.95866c0,0,15.28051-3.98622,15.94488-4.65059s38.53347-13.95177,41.19095-14.61614,10.62992-5.97934,16.60925-5.315c0,0,6.6437-5.315,13.95177-3.98622l-20.59547,1.32874Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M630.37766,680.28318s56.28087-20.37323,55.6165,4.20847-35.876,31.22539-35.876,31.22539l-10.62992,1.32874-58.46457,1.99311s1.99311-10.62992-2.65748-11.95866c0,0,15.28051-3.98622,15.94488-4.65059s38.53347-13.95177,41.19095-14.61614,10.62992-5.97934,16.60925-5.315c0,0,6.6437-5.315,13.95177-3.98622l-20.59547,1.32874Z" transform="translate(-86 -150.5013)" opacity="0.1"/>
-  <polygon points="534.434 533.081 541.53 549.271 584.714 533.99 588.036 525.354 576.741 523.36 554.035 527.347 544.187 530.004 534.434 533.081" fill="#2f2e41"/>
-  <polygon points="534.434 533.081 541.53 549.271 584.714 533.99 588.036 525.354 576.741 523.36 554.035 527.347 544.187 530.004 534.434 533.081" opacity="0.1"/>
-  <path d="M528.53845,703.094s12.623,15.94488,27.23918,19.9311,22.58858-1.32874,22.58858-1.32874L573.71562,703.094l-1.99311-11.95866L563.0857,685.156l-17.27363-7.97245-20.59547-6.6437s-8.63681-1.32874-8.63681,0,7.97244,21.25985,7.97244,21.25985Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M543.819,711.73082s2.65748,19.26673,5.97934,20.59547,13.2874-1.32874,15.94488-2.65748,11.69054-7.45919,11.69054-7.45919S545.81207,710.40208,543.819,711.73082Z" transform="translate(-86 -150.5013)" fill="#f2f2f2"/>
-  <polygon points="518.277 563.223 530.9 565.216 529.571 580.496 511.964 576.22 518.277 563.223" fill="#ffb9b9"/>
-  <path d="M612.18567,717.97655s-5.91592,7.04167.06341,11.02789l3.98622,3.32185s13.28741,2.65748,14.61615,3.98622,6.6437-1.99311,6.6437-1.99311.66437-19.9311,0-21.25984-8.63681-2.65748-9.30118-1.32874-8.63682,3.32185-13.28741,1.99311Z" transform="translate(-86 -150.5013)" fill="#f2f2f2"/>
-  <path d="M559.09948,682.49853s-46.50591-27.23917-53.814-17.27362-15.28051,23.91733,5.97933,34.54725,87.69685,32.55413,87.69685,32.55413,9.96555-15.28051,9.96555-19.26673c0,0-35.21161-15.94488-41.19094-17.27362s-29.89666-16.60926-33.21851-17.938-7.97244-5.315-7.97244-5.315Z" transform="translate(-86 -150.5013)" fill="#2f2e41"/>
-  <path d="M545.81207,600.11664l-2.65748,1.99311s-5.97933,15.28052-6.6437,23.91733-8.63681,35.21161-7.97244,38.53346,1.32874,5.97933,5.315,9.30118c0,0,5.315-11.95866,14.61615-9.96555l11.29429-41.19094Z" transform="translate(-86 -150.5013)" fill="#ff6584"/>
-  <path d="M638.82389,600.11664l5.315,5.97933s3.32185,7.97245,3.32185,9.96556,6.6437,31.22539,7.30807,32.55413,3.32185,17.938,0,21.92421-9.30118,6.6437-9.30118,6.6437,3.98622-13.95177-8.63681-14.61614l1.32874-5.315-11.95866-39.8622Z" transform="translate(-86 -150.5013)" fill="#ff6584"/>
-  <path d="M547.14082,645.85762v34.9949a8.41342,8.41342,0,0,0,8.2888,8.41251l73.18511,1.08423a8.41344,8.41344,0,0,0,8.53185-8.08916l1.34611-34.999a8.41344,8.41344,0,0,0-8.28529-8.73591l-74.53123-1.08016A8.41342,8.41342,0,0,0,547.14082,645.85762Z" transform="translate(-86 -150.5013)" fill="#3f3d56"/>
-  <ellipse cx="509.89011" cy="401.732" rx="22.88412" ry="12.32222" fill="#2f2e41"/>
-  <circle cx="505.9858" cy="513.72706" r="5.31496" fill="#f2f2f2"/>
-</svg>
diff --git a/assets/scene-portable.svg b/assets/scene-portable.svg
deleted file mode 100644
index f3550348..00000000
--- a/assets/scene-portable.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674.74026 489"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M575.557,676.4931c.7522,5.89331,3.51807,11.28516,6.46869,16.47907.09753.17682.19794.351.30078.52783h30.66736c.62024-.161,1.23248-.33783,1.84216-.52783a33.52388,33.52388,0,0,0,9.68317-4.76373c11.28247-8.12867,15.624-23.48871,13.663-37.25208-1.21936-8.551-4.97216-17.28137-12.28-21.88672a18.43735,18.43735,0,0,0-13.2566-2.32251c-.11621.02112-.23236.04749-.351.07129a13.67965,13.67965,0,0,0-9.16327,6.44226c-3.48364,6.1889-1.4093,13.85571.30347,20.744,1.70758,6.88831,2.634,15.13306-2.32245,20.2135a12.64395,12.64395,0,0,0-14.70288-16.4342c-.35889.07653-.71265.16363-1.061.26922a11.77269,11.77269,0,0,0-2.4201,1.01343C577.08246,662.33124,574.715,669.85028,575.557,676.4931Z" transform="translate(-262.62987 -205.5)" fill="#f2f2f2"/>
-  <path d="M593.74091,692.97217c-.84973.19793-1.70221.37213-2.55994.52783h4.637c.60712-.16364,1.21149-.33783,1.81042-.52783q1.97553-.61752,3.8902-1.41724a34.89995,34.89995,0,0,0,13.40442-9.66467,27.2815,27.2815,0,0,0,4.228-6.90674,31.36944,31.36944,0,0,0,2.164-8.83862,62.859,62.859,0,0,0-1.24561-18.7461,78.23988,78.23988,0,0,0-6.11236-18.33441q-.50272-1.0491-1.0398-2.085a.40687.40687,0,0,0-.27179-.23224.46894.46894,0,0,0-.351.07129.55591.55591,0,0,0-.21906.73371,77.33792,77.33792,0,0,1,6.48713,17.672,68.02229,68.02229,0,0,1,1.92926,18.39508,29.35028,29.35028,0,0,1-5.16754,16.10163,32.4856,32.4856,0,0,1-12.16138,9.97876A44.6376,44.6376,0,0,1,593.74091,692.97217Z" transform="translate(-262.62987 -205.5)" fill="#fff"/>
-  <path d="M583.56421,693.5h1.36713c.15308-.17419.3009-.351.446-.52783a29.14011,29.14011,0,0,0,6.13355-13.1062,28.43331,28.43331,0,0,0-2.45178-17.69574,29.09218,29.09218,0,0,0-2.64978-4.38636c-.35889.07654-.71265.16364-1.061.26923a27.504,27.504,0,0,1-1.31176,34.91907C583.88367,693.149,583.72529,693.32581,583.56421,693.5Z" transform="translate(-262.62987 -205.5)" fill="#fff"/>
-  <path d="M931.05752,369.72079,793.52185,419.60093l-59.558-164.22079L871.49947,205.5Z" transform="translate(-262.62987 -205.5)" fill="#f1f1f1"/>
-  <path d="M931.05752,369.72079,793.52185,419.60093l-59.558-164.22079L871.49947,205.5Z" transform="translate(-262.62987 -205.5)" fill="#f1f1f1"/>
-  <rect x="791.59543" y="299.31879" width="83.64649" height="3.9548" transform="translate(-315.41956 96.69888) rotate(-19.93422)" fill="#fff"/>
-  <rect x="795.10115" y="308.98519" width="83.64649" height="3.9548" transform="translate(-318.50519 98.47329) rotate(-19.93422)" fill="#fff"/>
-  <rect x="798.60687" y="318.6516" width="83.64649" height="3.9548" transform="translate(-321.59082 100.2477) rotate(-19.93422)" fill="#fff"/>
-  <circle cx="525.27608" cy="112.91865" r="2.58099" fill="#fff"/>
-  <rect x="776.48936" y="257.66648" width="83.64649" height="3.9548" transform="translate(-302.12366 89.05299) rotate(-19.93422)" fill="#fff"/>
-  <rect x="779.99509" y="267.33289" width="83.64649" height="3.9548" transform="translate(-305.20929 90.8274) rotate(-19.93422)" fill="#fff"/>
-  <rect x="783.50081" y="276.99929" width="83.64649" height="3.9548" transform="translate(-308.29492 92.60181) rotate(-19.93422)" fill="#fff"/>
-  <circle cx="510.02336" cy="70.86195" r="2.58099" fill="#fff"/>
-  <rect x="806.84816" y="341.37549" width="83.64649" height="3.9548" transform="translate(-328.84454 104.419) rotate(-19.93422)" fill="#fff"/>
-  <rect x="810.35388" y="351.04189" width="83.64649" height="3.9548" transform="translate(-331.93017 106.19341) rotate(-19.93422)" fill="#fff"/>
-  <rect x="813.8596" y="360.7083" width="83.64649" height="3.9548" transform="translate(-335.0158 107.96782) rotate(-19.93422)" fill="#fff"/>
-  <circle cx="540.38215" cy="154.57095" r="2.58099" fill="#fff"/>
-  <path d="M937.3701,419.58633l-146.30136,0,0-174.68724,146.30136,0Z" transform="translate(-262.62987 -205.5)" fill="#fff"/>
-  <path d="M937.3701,419.58633l-146.30136,0,0-174.68724,146.30136,0Zm-143.72037-2.581,141.13938,0,0-169.52526-141.13938,0Z" transform="translate(-262.62987 -205.5)" fill="#e5e5e5"/>
-  <path d="M887.7254,309.46477H851.0522a1.95294,1.95294,0,0,1-1.9507-1.95071v-36.6732a1.95294,1.95294,0,0,1,1.95071-1.9507l36.6732,0a1.95293,1.95293,0,0,1,1.9507,1.9507l0,36.6732A1.95293,1.95293,0,0,1,887.7254,309.46477Zm-36.67319-39.79433a1.1717,1.1717,0,0,0-1.17042,1.17042l0,36.6732a1.17171,1.17171,0,0,0,1.17042,1.17043h36.6732a1.1717,1.1717,0,0,0,1.17042-1.17042l0-36.6732a1.1717,1.1717,0,0,0-1.17042-1.17042Z" transform="translate(-262.62987 -205.5)" fill="#e5e5e5"/>
-  <path d="M877.19161,313.95138h-36.6732a1.75761,1.75761,0,0,1-1.75563-1.75563v-36.6732a1.75762,1.75762,0,0,1,1.75563-1.75564l36.67321,0a1.75762,1.75762,0,0,1,1.75563,1.75563l0,36.6732A1.7576,1.7576,0,0,1,877.19161,313.95138Z" transform="translate(-262.62987 -205.5)" fill="#ff6666"/>
-  <rect x="550.41929" y="123.99235" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <rect x="550.41929" y="134.30374" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <rect x="550.41928" y="144.61513" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <rect x="550.41928" y="162.76318" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <rect x="550.41928" y="173.07457" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <rect x="550.41928" y="183.38597" width="102.34056" height="3.9548" fill="#f1f1f1"/>
-  <polygon points="197.095 477.736 207.858 477.736 212.979 436.22 197.093 436.221 197.095 477.736" fill="#ffb8b8"/>
-  <path d="M456.979,679.72228l21.19709-.00086h.00086a13.50917,13.50917,0,0,1,13.50844,13.50823v.439l-34.70574.00129Z" transform="translate(-262.62987 -205.5)" fill="#2f2e41"/>
-  <polygon points="121.713 470.364 132.161 472.95 147.106 433.88 131.686 430.064 121.713 470.364" fill="#ffb8b8"/>
-  <path d="M382.52206,671.79346l20.57639,5.092.00083.0002a13.50918,13.50918,0,0,1,9.86724,16.35812l-.10547.42611-33.68945-8.33722Z" transform="translate(-262.62987 -205.5)" fill="#2f2e41"/>
-  <path d="M424.15994,507.0938l-9.46447,53.87466s-3.64018,6.55232-2.18411,9.46447,2.18411,2.91214,0,4.36821-5.09625,0-4.36821,3.64018a37.16265,37.16265,0,0,1,.728,6.55232l-20.385,69.89145s-13.10465,5.82429-3.64018,9.46447,18.92893,6.55232,21.113,2.91214,0-8.00839,0-8.00839l33.48965-80.084s5.09625-7.28036,5.09625-11.64858S461.28977,531.847,461.28977,531.847s.728,31.30555,1.45607,33.48966-1.45607,6.55232-1.45607,9.46446-1.45607,2.91215,0,4.36822,1.45607,18.20089,1.45607,18.20089-8.73643,64.7952-3.64018,65.52323,19.657-.728,19.657-3.64017a3.63264,3.63264,0,0,0-2.18411-3.64018L486.043,600.2824a11.58433,11.58433,0,0,1,.728-6.55232c1.45608-2.91215,1.45608-2.91215,1.45608-4.36822s-.728-2.18411,0-2.91214a3.59477,3.59477,0,0,0,.728-2.18411s-1.45607-4.36822-.728-5.09625,16.74482-55.33073,11.64857-61.88305S424.15994,507.0938,424.15994,507.0938Z" transform="translate(-262.62987 -205.5)" fill="#2f2e41"/>
-  <circle cx="194.09073" cy="166.4056" r="18.92893" fill="#ffb8b8"/>
-  <path d="M443.34671,385.61335c.97328-.65269,1.011-2.14627.68475-3.3581a12.60351,12.60351,0,0,1-.86847-3.63611c.13937-3.37767,4.79141-4.73253,5.05717-8.09366.16347-2.06714-1.4407-4.35292-.515-6.14273.58458-1.13026,1.94414-1.50718,3.18216-1.7242a39.5376,39.5376,0,0,1,14.50231.19476l.69741-1.8321,3.54292,2.33766c.19349-1.137,1.76727-1.251,2.79584-.70531s1.919,1.488,3.04139,1.67c1.7889.29,3.203-1.64734,3.10852-3.51144a9.17566,9.17566,0,0,0-2.42255-5.02508,39.84944,39.84944,0,0,0-10.67343-9.23948l.98317-1.77153-2.10546.84553-.231-2.11872-2.05121,1.15287-.02921-1.90828c-2.19611,2.52172-6.02064,2.43483-9.3778,2.66221a26.99544,26.99544,0,0,0-15.42333,5.73429,20.50734,20.50734,0,0,0-7.50586,14.74027c-.1906,4.45327,1.3446,9.87334,4.6327,13.17558C437.3605,382.0614,441.78869,380.23986,443.34671,385.61335Z" transform="translate(-262.62987 -205.5)" fill="#2f2e41"/>
-  <path d="M503.16743,555.55964a9.01338,9.01338,0,0,1,.77684-13.799l-5.0487-19.96868,11.38661-6.02776,6.73369,28.29978a9.06219,9.06219,0,0,1-13.84844,11.49569Z" transform="translate(-262.62987 -205.5)" fill="#ffb8b8"/>
-  <path d="M472.73489,529.7173c-23.00911.00176-44.18872-10.41223-44.47461-10.55517l-.23751-.11876-1.93088-46.33885c-.55991-1.63751-11.58548-33.94913-13.4528-44.21929-1.892-10.40518,25.52826-19.537,28.858-20.605l.75563-8.37051,30.72778-3.31108,3.89452,10.71043,11.02382,4.13357a5.45269,5.45269,0,0,1,3.37947,6.40576l-6.12691,24.9158,12.05171,82.4335-.30942.13943A58.50177,58.50177,0,0,1,472.73489,529.7173Z" transform="translate(-262.62987 -205.5)" fill="#ff6666"/>
-  <path d="M500.20569,534.88932,489.5421,490.99023l-11.558-52.97421,5.867-26.40243H488.867c.09193,0,9.20686.13635,11.1694,11.91074,1.90075,11.40449,7.63268,47.6997,7.6903,48.06477l9.6876,62.001Z" transform="translate(-262.62987 -205.5)" fill="#ff6666"/>
-  <path d="M644.62987,694.5h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-262.62987 -205.5)" fill="#cbcbcb"/>
-  <path d="M481.27407,593.88611,383.2649,530.067l78.5005-120.5559,98.00917,63.81909Z" transform="translate(-262.62987 -205.5)" fill="#fff"/>
-  <path d="M481.27407,593.88611,383.2649,530.067l78.5005-120.5559,98.00917,63.81909Zm-95.06813-64.44045,94.44676,61.49941,76.18083-116.9935-94.44676-61.49941Z" transform="translate(-262.62987 -205.5)" fill="#e5e5e5"/>
-  <rect x="477.74369" y="464.03998" width="3.25692" height="65.35732" transform="translate(-461.08673 421.88957) rotate(-56.92966)" fill="#ff6666"/>
-  <rect x="473.12297" y="471.13617" width="3.25692" height="65.35732" transform="matrix(0.54567, -0.838, 0.838, 0.54567, -469.13269, 421.24143)" fill="#ff6666"/>
-  <rect x="468.50226" y="478.23237" width="3.25692" height="65.35732" transform="translate(-477.17865 420.59329) rotate(-56.92966)" fill="#ff6666"/>
-  <circle cx="184.40409" cy="270.73089" r="2.12554" fill="#ff6666"/>
-  <rect x="497.65424" y="433.46266" width="3.25692" height="65.35732" transform="translate(-426.4169 424.68239) rotate(-56.92966)" fill="#e5e5e5"/>
-  <rect x="493.03353" y="440.55886" width="3.25692" height="65.35732" transform="translate(-434.46286 424.03425) rotate(-56.92966)" fill="#e5e5e5"/>
-  <rect x="488.41281" y="447.65505" width="3.25692" height="65.35732" transform="matrix(0.54567, -0.838, 0.838, 0.54567, -442.50882, 423.38611)" fill="#e5e5e5"/>
-  <circle cx="204.50795" cy="239.8567" r="2.12554" fill="#e5e5e5"/>
-  <rect x="457.63983" y="494.91417" width="3.25692" height="65.35732" transform="translate(-496.09317 419.06963) rotate(-56.92966)" fill="#e5e5e5"/>
-  <rect x="453.01911" y="502.01036" width="3.25692" height="65.35732" transform="translate(-504.13912 418.42149) rotate(-56.92966)" fill="#e5e5e5"/>
-  <rect x="448.3984" y="509.10655" width="3.25692" height="65.35732" transform="translate(-512.18508 417.77335) rotate(-56.92966)" fill="#e5e5e5"/>
-  <circle cx="164.49353" cy="301.30821" r="2.12554" fill="#e5e5e5"/>
-  <path d="M454.57626,527.47073a9.01331,9.01331,0,0,0-11.00435-8.36186L431.65248,502.3111l-11.97461,4.75371,17.16572,23.48528a9.06218,9.06218,0,0,0,17.73267-3.07936Z" transform="translate(-262.62987 -205.5)" fill="#ffb8b8"/>
-  <path d="M431.34573,526.22588l-36.06628-46.7888,13.51372-42.47138c.99029-10.67789,7.67205-13.65953,7.9564-13.78136l.43368-.18605,11.75943,31.35938-8.63418,23.0245,21.19236,35.6425Z" transform="translate(-262.62987 -205.5)" fill="#ff6666"/>
-  <rect x="393.40551" y="311" width="6" height="2" fill="#cbcbcb"/>
-  <path d="M830.969,518.5H818.90233v-2H830.969Zm-24.13331,0H794.769v-2h12.06665Zm-24.1333,0H770.63572v-2h12.06665Zm-24.13354,0H746.50218v-2h12.06665Zm-24.1333,0H722.36888v-2h12.06665Zm-24.1333,0H698.23558v-2h12.06665Zm-24.1333,0H674.10228v-2h12.06665Z" transform="translate(-262.62987 -205.5)" fill="#cbcbcb"/>
-  <polygon points="587.406 313 580.406 313 580.406 311 585.406 311 585.406 306 587.406 306 587.406 313" fill="#cbcbcb"/>
-  <rect x="585.40551" y="293.86035" width="2" height="6.06982" fill="#cbcbcb"/>
-  <rect x="585.40551" y="281.79004" width="2" height="6" fill="#cbcbcb"/>
-</svg>
diff --git a/assets/scene-secure.svg b/assets/scene-secure.svg
deleted file mode 100644
index b3b56b0e..00000000
--- a/assets/scene-secure.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 866.52362 637.05628"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M971.73819,768.52814v-72.34S999.92985,747.47411,971.73819,768.52814Z" transform="translate(-166.73819 -131.47186)" fill="#f1f1f1"/>
-  <path d="M973.47966,768.51541,920.19,719.59417S977.03523,733.5097,973.47966,768.51541Z" transform="translate(-166.73819 -131.47186)" fill="#f1f1f1"/>
-  <path d="M743.26636,577.44241a9.09535,9.09535,0,0,1,9.85146-9.872l9.60661-18.431,12.62434,3.10614-13.932,25.83764a9.14461,9.14461,0,0,1-18.15045-.64078Z" transform="translate(-166.73819 -131.47186)" fill="#ffb7b7"/>
-  <polygon points="633.871 625.527 623.218 625.526 618.15 584.437 633.873 584.438 633.871 625.527" fill="#ffb7b7"/>
-  <path d="M803.32565,767.32462l-34.34883-.00127v-.43446a13.37025,13.37025,0,0,1,13.36952-13.36931h.00085l20.9791.00085Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <polygon points="719.549 617.569 709.271 620.371 693.57 582.063 708.739 577.927 719.549 617.569" fill="#ffb7b7"/>
-  <path d="M891.62477,758.288,858.486,767.32462l-.11432-.41915a13.37025,13.37025,0,0,1,9.38068-16.416l.00082-.00022L887.99322,744.97Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <polygon points="614.423 448.033 609.109 528.727 620.524 619.261 639.221 613.554 640.009 532.663 654.966 486.018 699.25 610.602 719.521 603.123 702.792 522.232 693.345 446.262 614.423 448.033" fill="#2f2e41"/>
-  <path d="M832.82255,437.80621,801.33678,442.449,789.994,453.66711l-3.5219,40.30669,2.18745,35.702-9.11869,62.959s22.93018-12.72919,40.70053,3.20519,42.63547,2.816,43.147-7.784Z" transform="translate(-166.73819 -131.47186)" fill="#cbcbcb"/>
-  <path d="M816.83429,488.35732l-.00043-.04526,15.64133-50.984.20211-.01318c1.11327-.07248,27.33679-1.618,33.20236,11.33006l.02836.06246-1.78163,52.983,2.45371,82.97939-48.50061,10.50471-.35252.07678Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <path d="M799.50072,484.833l2.86926-43.2209c-20.40666,1.2694-20.09926,15.73786-20.07577,16.3687l-.223,64.64973-4.08709,69.1641,14.86038-1.11441Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <path d="M753.48519,563.47709l18.11738-42.04748L784.248,498.208l6.60212,41.88934-22.9224,34.38352Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <path d="M828.36,548.00623a9.09534,9.09534,0,0,1,12.32532-6.52638l14.61634-14.77674,11.14617,6.69216L845.51367,553.973A9.14461,9.14461,0,0,1,828.36,548.00623Z" transform="translate(-166.73819 -131.47186)" fill="#ffb7b7"/>
-  <path d="M840.65123,536.08544,870.45248,503.393,850.72593,475.2442l2.03043-13.762L864.38293,447.12l.2269.29336c1.23932,1.60372,30.36218,39.43935,31.19784,53.76257.83853,14.37622-41.02087,50.74162-42.80336,52.28232l-.24766.21428Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <circle cx="647.9164" cy="281.61187" r="21.18132" fill="#ffb7b7"/>
-  <path d="M834.57593,396.15035l1.02686-2.06675-5.1669-2.56715s-5.69991-9.27437-16.01412-6.66807-14.95472,4.16612-14.95472,4.16612l-5.15383,2.59323,2.58668,2.57367-4.6404,1.55986,3.10011,1.54028-3.60707,2.07328,1.94177,10.62831s3.22513-8.06117,9.42537-4.98062,17.5414-1.59245,17.5414-1.59245l9.853,19.06862s2.03267-6.6845,5.65681-4.9021C836.17091,417.57661,845.42963,402.83144,834.57593,396.15035Z" transform="translate(-166.73819 -131.47186)" fill="#2f2e41"/>
-  <path d="M594.90728,516.06962,272.80489,604.901,166.73819,220.3032l322.10239-88.83134Z" transform="translate(-166.73819 -131.47186)" fill="#fff"/>
-  <path d="M594.90728,516.06962,272.80489,604.901,166.73819,220.3032l322.10239-88.83134ZM276.92016,597.65144l310.73759-85.69709-102.93244-373.233-310.7376,85.6971Z" transform="translate(-166.73819 -131.47186)" fill="#f1f1f1"/>
-  <path d="M418.744,303.76532l-80.741,22.26726a4.46018,4.46018,0,0,1-5.47917-3.11031l-22.26725-80.74105a4.46017,4.46017,0,0,1,3.11031-5.47917l80.74105-22.26725a4.46016,4.46016,0,0,1,5.47916,3.11031l22.26726,80.74105A4.46016,4.46016,0,0,1,418.744,303.76532ZM313.8406,238.42a2.676,2.676,0,0,0-1.86619,3.2875l22.26726,80.74105a2.676,2.676,0,0,0,3.2875,1.86619l80.741-22.26726a2.676,2.676,0,0,0,1.86619-3.2875l-22.26726-80.741a2.676,2.676,0,0,0-3.2875-1.86619Z" transform="translate(-166.73819 -131.47186)" fill="#e5e5e5"/>
-  <path d="M398.2766,320.03913l-80.741,22.26726a4.01409,4.01409,0,0,1-4.93125-2.79928L290.337,258.76606a4.01409,4.01409,0,0,1,2.79928-4.93125l80.741-22.26726a4.01409,4.01409,0,0,1,4.93125,2.79928l22.26726,80.74105A4.01408,4.01408,0,0,1,398.2766,320.03913Z" transform="translate(-166.73819 -131.47186)" fill="#ff6666"/>
-  <rect x="263.48929" y="361.96862" width="233.72825" height="9.03209" transform="translate(-250.48374 -17.16149) rotate(-15.41811)" fill="#f1f1f1"/>
-  <rect x="269.75017" y="384.67055" width="233.72825" height="9.03209" transform="translate(-256.29398 -14.67996) rotate(-15.41811)" fill="#f1f1f1"/>
-  <rect x="276.01104" y="407.37248" width="233.72825" height="9.03209" transform="translate(-262.10422 -12.19843) rotate(-15.41811)" fill="#f1f1f1"/>
-  <rect x="287.03019" y="447.32789" width="233.72825" height="9.03209" transform="translate(-272.33023 -7.83093) rotate(-15.41811)" fill="#f1f1f1"/>
-  <rect x="293.29106" y="470.02982" width="233.72825" height="9.03209" transform="translate(-278.14047 -5.34939) rotate(-15.41811)" fill="#f1f1f1"/>
-  <rect x="299.55194" y="492.73176" width="233.72825" height="9.03209" transform="translate(-283.9507 -2.86786) rotate(-15.41811)" fill="#f1f1f1"/>
-  <path d="M698.0144,603.61617H363.88724V204.66055H698.0144Z" transform="translate(-166.73819 -131.47186)" fill="#fff"/>
-  <path d="M698.0144,603.61617H363.88724V204.66055H698.0144Zm-328.23263-5.89454H692.11986V210.55508H369.78177Z" transform="translate(-166.73819 -131.47186)" fill="#e5e5e5"/>
-  <rect x="279.40817" y="244.69464" width="191.03421" height="9.03209" fill="#ff6666"/>
-  <rect x="279.40817" y="268.17807" width="191.03421" height="9.03209" fill="#ff6666"/>
-  <rect x="279.40817" y="291.66149" width="191.03421" height="9.03209" fill="#ff6666"/>
-  <circle cx="263.87741" cy="250.53394" r="5.89453" fill="#ff6666"/>
-  <rect x="279.40817" y="143.50512" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <rect x="279.40817" y="166.98855" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <rect x="279.40817" y="190.47198" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <circle cx="263.87741" cy="148.36201" r="5.89453" fill="#e5e5e5"/>
-  <rect x="279.40817" y="346.86657" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <rect x="279.40817" y="370.35" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <rect x="279.40817" y="393.83343" width="191.03421" height="9.03209" fill="#e5e5e5"/>
-  <circle cx="263.87741" cy="351.72346" r="5.89453" fill="#e5e5e5"/>
-  <circle cx="515.67691" cy="438.20509" r="68.29339" fill="#ff6666"/>
-  <path d="M701.33633,565.32032V552.25311a18.92123,18.92123,0,1,0-37.84245,0v13.06721a9.83809,9.83809,0,0,0-9.39555,9.82325v30.87926h56.63355V575.14357A9.83809,9.83809,0,0,0,701.33633,565.32032ZM682.4151,539.99384a12.27276,12.27276,0,0,1,12.25846,12.25927v13.04444H670.15665V552.25311A12.27275,12.27275,0,0,1,682.4151,539.99384Z" transform="translate(-166.73819 -131.47186)" fill="#fff"/>
-  <path d="M687.50571,580.56948a5.09061,5.09061,0,1,0-7.95433,4.207v11.065H685.278v-11.065A5.08421,5.08421,0,0,0,687.50571,580.56948Z" transform="translate(-166.73819 -131.47186)" fill="#ff6666"/>
-  <path d="M1032.26181,768.12193h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-166.73819 -131.47186)" fill="#cbcbcb"/>
-</svg>
diff --git a/assets/scene-surveillance.svg b/assets/scene-surveillance.svg
deleted file mode 100644
index f73228bc..00000000
--- a/assets/scene-surveillance.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 910.88794 653.61419"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect y="646.47623" width="431.1819" height="1.87469" fill="#3f3d56"/>
-  <polygon points="109.607 639.942 121.866 639.942 127.699 592.654 109.605 592.654 109.607 639.942" fill="#ffb8b8"/>
-  <path d="M251.53582,759.63143h38.53073a0,0,0,0,1,0,0V774.5183a0,0,0,0,1,0,0H266.42267a14.88685,14.88685,0,0,1-14.88685-14.88685v0A0,0,0,0,1,251.53582,759.63143Z" transform="translate(397.08134 1410.94447) rotate(179.99738)" fill="#2f2e41"/>
-  <polygon points="44.379 637.585 56.532 639.205 68.564 593.103 50.629 590.712 44.379 637.585" fill="#ffb8b8"/>
-  <path d="M185.6415,759.43939h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H200.52836a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(162.1087 1430.92651) rotate(-172.40554)" fill="#2f2e41"/>
-  <polygon points="61.796 444.64 130.796 447.64 127.796 622.64 109.796 620.64 95.796 501.64 62.796 628.64 44.796 625.64 61.796 444.64" fill="#2f2e41"/>
-  <path d="M252.35236,463.83242l-24-4.90286-15,109.90286s44,29,58-1Z" transform="translate(-144.55603 -123.1929)" fill="#ff6666"/>
-  <circle cx="97.32782" cy="303.17101" r="24.56103" fill="#ffb8b8"/>
-  <path d="M228.35236,457.83242l-35,11s17,85-11,129c0,0,35,37,50-46C232.35236,551.83242,244.35236,484.83242,228.35236,457.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
-  <path d="M252.35236,463.83242l26,16s14,117,0,128S252.35236,463.83242,252.35236,463.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
-  <path d="M289.1621,624.79959a10.0558,10.0558,0,0,1,.96818-15.3889l-10.57065-34.13562,17.83265,5.17981,7.30413,31.62164a10.11027,10.11027,0,0,1-15.53431,12.72307Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/>
-  <path d="M199.338,614.92719a10.05577,10.05577,0,0,1-1.00976-15.38624l-14.85349-32.50158,18.349,2.85437,11.292,30.42646a10.11027,10.11027,0,0,1-13.77778,14.607Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/>
-  <polygon points="57.796 346.64 48.796 345.64 25.796 420.64 48.796 472.64 66.796 461.64 46.796 418.64 62.796 372.64 57.796 346.64" fill="#2f2e41"/>
-  <polygon points="128.796 355.64 133.796 356.64 157.796 473.64 141.796 478.64 122.796 409.64 128.796 355.64" fill="#2f2e41"/>
-  <path d="M225.00655,436.44921a14.06316,14.06316,0,0,1,8.44415-11.03667c4.7277-1.93846,10.06074-1.11966,15.15695-.7489s10.76991.04877,14.44758-3.49856c3.3597-3.24064,4.11524-8.61848,2.49281-12.99537s-5.29609-7.775-9.46944-9.866a40.79142,40.79142,0,0,0-13.47062-3.56c-6.811-.82288-13.80511-.92776-20.44341.80412s-4.9267,5.44408-8.81681,11.095-5.05548,13.34984-2.08959,19.53611c1.98454,4.13936,5.54088,7.27259,9.004,10.28584" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
-  <path d="M774.394,707.49843l-.00049-1.87469c3.72742-.00092,7.51117-.07782,11.24732-.227l.07507,1.87286C781.95514,707.42061,778.14618,707.49752,774.394,707.49843Zm-11.31872-.21692c-3.74756-.14648-7.55005-.37072-11.30134-.66638l.1474-1.8692c3.727.29474,7.50434.51721,11.22718.66272Zm33.942-.6911-.14923-1.8692c3.72009-.29748,7.48511-.67553,11.18964-1.12317l.22522,1.86188c-3.72968.45032-7.51984.8302-11.26563,1.13043Zm-56.51025-1.093c-3.738-.44764-7.51026-.97583-11.213-1.56989l.29749-1.85089c3.67755.59039,7.42511,1.11493,11.13794,1.5589Zm78.98608-1.62024-.29932-1.85089c3.67664-.59412,7.399-1.27424,11.06379-2.01935l.37347,1.83624c-3.689.75153-7.43652,1.43536-11.13788,2.034Zm-101.33929-1.97083c-3.68946-.74695-7.4068-1.579-11.05005-2.47064l.4458-1.82159c3.619.887,7.31164,1.7127,10.97589,2.45416Zm123.525-2.54657-.44855-1.81976c3.63-.89343,7.2851-1.87195,10.8642-2.90906l.52179,1.80145C849.01239,697.47591,845.33258,698.46084,841.67883,699.35976Zm-145.51611-2.84045c-3.61487-1.04352-7.253-2.1731-10.81342-3.35761l.59223-1.77948c3.53656,1.17719,7.15051,2.29944,10.74109,3.33564ZM863.42511,693.061l-.59406-1.77771c3.53888-1.18267,7.10248-2.45416,10.59284-3.78051l.66638,1.752C870.57605,690.59035,866.98779,691.871,863.42511,693.061Zm-188.77344-3.70458c-3.51691-1.33283-7.05945-2.75715-10.52966-4.23548l.73462-1.72461c3.4469,1.46826,6.96606,2.88349,10.45965,4.20618Zm209.91052-4.32331-.736-1.72461c3.42718-1.46368,6.8681-3.01526,10.22668-4.61261l.80555,1.69348C891.477,681.99679,888.01227,683.55929,884.56219,685.0331ZM653.775,680.46352c-3.40521-1.61658-6.81915-3.32281-10.14654-5.07214l.87237-1.65869c3.305,1.73645,6.69556,3.43176,10.07788,5.03735Zm251.18836-5.13165-.8733-1.65869c3.30182-1.73743,6.60907-3.5636,9.82941-5.42639l.93921,1.62207c-3.24231,1.87561-6.57153,3.71368-9.89526,5.463Zm-271.265-5.41724c-3.267-1.88843-6.52991-3.86383-9.69849-5.87127l1.00324-1.58362c3.14709,1.99371,6.38849,3.9563,9.63348,5.83282Zm290.8313-5.90423-1.00323-1.58362c3.14251-1.991,6.29418-4.07709,9.36712-6.20172l1.06549,1.5415c-3.093,2.13928-6.26581,4.24-9.42932,6.24384ZM614.548,657.78853c-3.09991-2.142-6.19214-4.37188-9.19092-6.62829l1.12684-1.49756c2.97912,2.24084,6.05065,4.45605,9.12957,6.58435Zm328.58582-6.64019-1.12763-1.49756c2.97223-2.23535,5.94818-4.56867,8.84534-6.93585l1.18634,1.45178c-2.9165,2.38275-5.91254,4.73163-8.904,6.98163Zm-346.69251-6.9798c-2.91046-2.37817-5.81268-4.84784-8.6261-7.34137l1.24311-1.40234c2.7951,2.47613,5.6781,4.93023,8.56933,7.29193Zm364.2157-7.33679-1.2431-1.40235c2.79285-2.47522,5.57373-5.041,8.265-7.62512l1.298,1.35291c-2.70856,2.60064-5.50782,5.18292-8.31983,7.67456ZM579.49121,629.149c-2.704-2.59784-5.3985-5.2909-8.00775-8.00409l1.35107-1.29987c2.59235,2.6958,5.26892,5.37146,7.95557,7.951Zm397.49444-7.99677-1.35113-1.29986c2.58411-2.68757,5.15179-5.46759,7.63245-8.2641l1.40234,1.24493C982.17218,615.64712,979.58722,618.44631,976.98565,621.15218Zm-413.18231-8.32263c-2.49945-2.81757-4.96869-5.71655-7.34-8.61652l1.45178-1.18634c2.35483,2.88074,4.808,5.7605,7.29056,8.55793Zm428.212-8.61835-1.45178-1.18634c2.369-2.8963,4.7069-5.87494,6.94958-8.85266L999.01068,595.3C996.75335,598.29781,994.399,601.29568,992.01532,604.2112Zm-442.5391-8.89752c-2.25915-2.99969-4.48767-6.08453-6.62326-9.17029l1.54151-1.06732c2.1214,3.06561,4.33481,6.13031,6.57931,9.10986Zm456.16825-9.20142-1.54151-1.06549c2.12915-3.07934,4.22174-6.23742,6.2182-9.38635l1.58362,1.00324C1009.89459,579.83364,1007.78833,583.01278,1005.64447,586.11226Zm-469.04029-9.3955c-2.00881-3.16724-3.98144-6.41956-5.86349-9.66736l1.62207-.93921c1.8692,3.22583,3.829,6.45618,5.82413,9.60236Zm481.17835-9.74793-1.62207-.93921c1.87653-3.24322,3.70819-6.56146,5.4447-9.86139l1.65869.87329c-1.74756,3.3219-3.592,6.66218-5.48138,9.92731ZM525.27316,557.155c-1.74655-3.31641-3.45007-6.71527-5.063-10.10217l1.69254-.80555c1.60238,3.364,3.29446,6.74,5.02911,10.03443Zm503.06821-10.25684-1.69348-.80554c1.60467-3.37591,3.16357-6.8324,4.63183-10.27423l1.72461.736C1031.526,540.01906,1029.957,543.49935,1028.34137,546.89815Zm-512.781-10.13788c-1.4765-3.45282-2.899-6.97522-4.22861-10.47015l1.752-.66638c1.32089,3.47021,2.73379,6.96973,4.20022,10.39874Zm521.68585-10.73468-1.753-.66455c1.3291-3.50683,2.60334-7.08142,3.7851-10.623l1.77771.59314C1039.867,518.89748,1038.58453,522.495,1037.24621,526.02559ZM507.52014,515.62777c-1.19366-3.5636-2.32965-7.20038-3.37637-10.80792l1.80053-.52179c1.03989,3.58282,2.16809,7.19488,3.35352,10.73468Zm536.90088-11.11-1.80145-.52c1.03436-3.57733,2.0111-7.23242,2.90362-10.8656l1.81976.44672C1046.44494,497.23678,1045.46179,500.91756,1044.421,504.51778Zm-543.212-10.634c-.90072-3.65057-1.73785-7.36609-2.48938-11.045l1.83719-.37531c.746,3.65424,1.57767,7.346,2.472,10.9718Zm548.6109-11.35168-1.83807-.37348c.74146-3.65149,1.41882-7.37433,2.01386-11.06421l1.85089.2984C1051.24792,475.10744,1050.566,478.855,1049.81994,482.53213ZM496.67972,471.70131c-.601-3.70092-1.13553-7.47229-1.58866-11.20977l1.861-.22522c.45038,3.71283.9813,7.45855,1.57859,11.1347Zm556.74319-11.52282-1.86188-.22339c.4458-3.711.822-7.47592,1.11676-11.1901l1.86921.14829c-.29755,3.73935-.6756,7.52948-1.12409,11.26514ZM493.95462,449.22771c-.30255-3.74438-.5332-7.54687-.68561-11.30221l1.87286-.076c.15149,3.73019.3808,7.50751.681,11.22717Zm561.266-11.61484-1.87286-.07415c.14648-3.73569.22149-7.519.22149-11.245l-.00091-.62109h1.87469l.00092.617c.00006,3.7544-.07495,7.56241-.22327,11.32324ZM494.907,426.60448h-1.87469l.00045-.31488c0-3.65695.071-7.36059.21146-11.00335l1.87286.07232c-.13913,3.619-.20962,7.29788-.20962,10.93515Zm558.41419-12.17413c-.15473-3.72241-.38721-7.49973-.69294-11.22626l1.86921-.15286c.30664,3.75168.541,7.55374.69659,11.3013ZM495.774,404.13094l-1.8692-.14645c.29474-3.754.66916-7.54459,1.11219-11.26746l1.86187.22153C496.43851,396.63668,496.06686,400.40258,495.774,404.13094Zm555.71378-12.11554c-.45221-3.69723-.98676-7.443-1.59094-11.1329l1.85089-.30252c.60687,3.71463,1.14606,7.48553,1.6001,11.2084ZM498.4313,381.80016l-1.85092-.2966c.59409-3.71188,1.27194-7.46081,2.01569-11.14157l1.83716.37073C499.695,374.38921,499.02173,378.11254,498.4313,381.80016Zm549.42606-11.97824c-.75244-3.66336-1.5882-7.35327-2.48438-10.96857l1.81977-.45129c.90258,3.63956,1.74383,7.3551,2.50085,11.04272Zm-544.97681-10.066-1.82116-.44488c.8916-3.64872,1.87106-7.33039,2.91091-10.94339l1.80149.51855c-1.03305,3.58878-2.00559,7.24573-2.89127,10.86972Zm539.566-11.76175c-1.04352-3.5805-2.175-7.19125-3.36493-10.73147l1.77765-.59684c1.19733,3.564,2.337,7.199,3.3869,10.80381ZM509.101,338.14373l-1.779-.59134c1.18634-3.56955,2.4642-7.16928,3.7984-10.699l1.75388.66275C511.54873,331.02251,510.27911,334.598,509.101,338.14373Zm526.18176-11.46747c-1.33191-3.48715-2.7489-6.98438-4.21167-10.39508l1.72278-.73871c1.47284,3.43359,2.8999,6.95416,4.241,10.46466Zm-518.20739-9.6225-1.7255-.73413c1.4733-3.46335,3.03861-6.94546,4.652-10.34842l1.69391.8028C520.09292,310.1545,518.5386,313.6133,517.07538,317.05376Zm509.36572-10.99283c-1.60468-3.36038-3.29993-6.73446-5.03919-10.02847l1.65686-.87555c1.752,3.31644,3.45923,6.713,5.074,10.09668Zm-499.71253-9.36847-1.66052-.87054c1.74747-3.33063,3.58829-6.6727,5.4708-9.93375l1.6239.93735c-1.87018,3.23911-3.69864,6.55917-5.43421,9.86691ZM1015.959,286.21224c-1.87469-3.22717-3.83728-6.45575-5.83465-9.59689l1.58178-1.006c2.01111,3.16221,3.98652,6.41272,5.874,9.661Zm-477.96945-9.02338-1.58453-1.00235c2.01111-3.17959,4.11419-6.361,6.25024-9.45544l1.54242,1.065c-2.12189,3.07388-4.21033,6.23377-6.20813,9.39276Zm465.9166-9.931c-2.12641-3.06424-4.34351-6.1271-6.58893-9.10211l1.49573-1.12958c2.261,2.99512,4.49267,6.07813,6.63287,9.16346Zm-453.1287-8.59542-1.4985-1.12592c2.25915-3.007,4.60941-6.00766,6.98529-8.91949l1.4527,1.18542c-2.36029,2.89212-4.695,5.87305-6.93952,8.85995Zm439.58927-9.34012c-2.36444-2.88483-4.82135-5.76142-7.30017-8.54969l1.40051-1.24581c2.49628,2.807,4.96869,5.70282,7.34961,8.60733ZM565.00482,241.229l-1.40329-1.24215c2.48892-2.81208,5.07077-5.614,7.6741-8.32816l1.353,1.298c-2.586,2.69577-5.15088,5.47943-7.62378,8.27227Zm410.42383-8.70987c-2.59418-2.69168-5.2735-5.36367-7.96472-7.94232l1.29712-1.35385c2.70861,2.596,5.40625,5.28589,8.0169,7.99542Zm-394.85358-7.52215-1.29986-1.35111c2.705-2.6029,5.50189-5.18792,8.31213-7.68417l1.24487,1.40143c-2.79193,2.47977-5.57007,5.04834-8.2572,7.63382Zm378.61286-8.03934c-2.80109-2.47656-5.68726-4.92706-8.57715-7.28277l1.18451-1.45316c2.909,2.37177,5.81451,4.83826,8.63391,7.33176Zm-361.8014-6.89007-1.18817-1.45c2.90863-2.38229,5.90192-4.73437,8.89618-6.99168l1.12866,1.49666c-2.97461,2.24222-5.94775,4.57919-8.83673,6.945Zm344.35877-7.32718c-2.99054-2.24453-6.06531-4.45655-9.13642-6.57474l1.06366-1.54334c3.09217,2.13239,6.18708,4.35906,9.19867,6.61869Zm-326.415-6.20356-1.06824-1.54058c3.09033-2.14154,6.26074-4.24555,9.4234-6.25391l1.00507,1.5827c-3.14154,1.99457-6.291,4.0844-9.36023,6.21175Zm307.8822-6.57519c-3.16083-1.99645-6.404-3.95491-9.64081-5.82092l.93738-1.62389c3.257,1.87837,6.5221,3.8501,9.7049,5.85983Zm-288.9223-5.46529-.94055-1.62205c3.24139-1.87975,6.56878-3.7215,9.88885-5.47307l.87512,1.65776c-3.29858,1.74008-6.60357,3.56947-9.82342,5.4373Zm269.41272-5.78476c-3.31091-1.73465-6.70337-3.42582-10.08386-5.02636l.80188-1.69437c3.40338,1.61107,6.81958,3.31367,10.15161,5.06023ZM654.14435,174.0248l-.80689-1.69255c3.38049-1.61153,6.843-3.17775,10.29163-4.65517l.73779,1.72321c-3.42535,1.46728-6.86493,3.023-10.22253,4.62445Zm229.1922-4.95451c-3.4455-1.46324-6.96607-2.8743-10.46466-4.19521l.66271-1.75387c3.52149,1.3296,7.06678,2.75073,10.53425,4.22358ZM674.76471,165.1941l-.66779-1.752c3.50775-1.33739,7.09424-2.62166,10.65961-3.81761l.59588,1.77768c-3.54107,1.1876-7.10333,2.46365-10.5877,3.79187Zm187.4768-4.08673c-3.54254-1.1749-7.15741-2.293-10.74475-3.32331l.51813-1.80146c3.61121,1.03712,7.24982,2.16259,10.81616,3.34527Zm-166.15478-3.06562-.52362-1.79965c3.60522-1.049,7.28418-2.03854,10.93426-2.94157l.45038,1.81978c-3.62585.897-7.28,1.88014-10.861,2.92138Zm144.53943-3.14206c-3.61945-.88287-7.31348-1.70443-10.97864-2.44178l.36981-1.83809c3.68988.74238,7.40863,1.56988,11.0528,2.45826Zm-122.709-2.25692-.37622-1.83626c3.67523-.75246,7.42194-1.44081,11.13611-2.04634l.30206,1.85C725.28924,151.212,721.56775,151.8958,717.91717,152.64277Zm100.66236-2.18044c-3.68671-.58768-7.43476-1.10853-11.1402-1.547l.22058-1.86189c3.73016.44167,7.50342.96573,11.21436,1.558Zm-78.46662-1.4367-.227-1.861c3.72925-.454,7.519-.839,11.2638-1.14285l.152,1.8683c-3.72009.30255-7.48461.68427-11.18872,1.13555Zm56.134-1.20876c-3.71644-.28972-7.49427-.5085-11.22809-.64992l.07141-1.87379c3.75854.1428,7.561.363,11.30224.65449Zm-33.71857-.61377-.07691-1.87286c3.74848-.1547,7.557-.23618,11.31965-.24257l.00274,1.87469c-3.73743.00641-7.52118.08742-11.24542.24074Z" transform="translate(-144.55603 -123.1929)" fill="#ccc"/>
-  <circle cx="530.38349" cy="297.68538" r="180.90894" fill="#3f3d56"/>
-  <ellipse cx="466.17488" cy="297.68538" rx="96.07861" ry="132.16663" fill="#fff"/>
-  <ellipse cx="434.32575" cy="325.68538" rx="26.81427" ry="42.18085" fill="#3f3d56"/>
-  <circle cx="885.81702" cy="196.65475" r="17.80969" fill="#ff6666"/>
-  <circle cx="680.09215" cy="26.24586" r="26.24586" fill="#ff6666"/>
-  <circle cx="662.70442" cy="581.35092" r="17.80969" fill="#ff6666"/>
-</svg>
diff --git a/components/AssetArrowUp.vue b/components/AssetArrowUp.vue
deleted file mode 100644
index 29ee5141..00000000
--- a/components/AssetArrowUp.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-export { ArrowUpIcon as default } from '@heroicons/vue/24/outline'
-</script>
diff --git a/components/AssetBolt.vue b/components/AssetBolt.vue
deleted file mode 100644
index fd61a478..00000000
--- a/components/AssetBolt.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-export { BoltIcon as default } from '@heroicons/vue/24/outline'
-</script>
diff --git a/components/AssetLock.vue b/components/AssetLock.vue
deleted file mode 100644
index 2b94d703..00000000
--- a/components/AssetLock.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-export { LockClosedIcon as default } from '@heroicons/vue/24/outline'
-</script>
diff --git a/components/AssetTrash.vue b/components/AssetTrash.vue
deleted file mode 100644
index c0e88dfa..00000000
--- a/components/AssetTrash.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-export { TrashIcon as default } from '@heroicons/vue/24/outline'
-</script>
diff --git a/components/Assistant.vue b/components/Assistant.vue
index 0c0b1511..c92ceeb7 100644
--- a/components/Assistant.vue
+++ b/components/Assistant.vue
@@ -1,8 +1,6 @@
 <script lang="ts">
 import { Prec } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
-import { PhotoIcon as AddImagesIcon } from '@heroicons/vue/24/outline'
-import { StopIcon as TokenIcon } from '@heroicons/vue/24/solid'
 import { type Options } from 'ink-mde'
 import { nanoid } from 'nanoid'
 import CoreLink from './CoreLink.vue'
@@ -11,10 +9,6 @@ import CoreDivider from '#root/components/CoreDivider.vue'
 import { type SystemInstruction, useSystemInstructions } from '#root/composables/useSystemInstructions'
 
 export default defineComponent({
-  components: {
-    AddImagesIcon,
-    TokenIcon,
-  },
   props: {
     chatId: {
       type: String,
@@ -323,13 +317,13 @@ export default defineComponent({
                   <CoreListboxButton class="bg-layer w-full">
                     <div class="md:hidden" />
                     <div class="flex items-center justify-center gap-3">
-                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
+                      <Icon name="BrandOpenAI" />
                       <span>{{ languageModel.label }}</span>
                     </div>
                   </CoreListboxButton>
                   <CoreListboxOptions class="z-20 bg-layer">
                     <div class="flex gap-0.5 items-center p-2 text-layer-muted mb-2">
-                      <TokenIcon class="sq-4" />
+                      <Icon name="ContextSize" />
                       <small>Total Context Size (in Tokens)</small>
                     </div>
                     <div class="grid auto-rows-auto auto-cols-auto">
@@ -344,14 +338,14 @@ export default defineComponent({
                         :value="model"
                       >
                         <span class="flex items-center justify-start gap-2 col-start-1">
-                          <svg class="sq-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
+                          <Icon name="BrandOpenAI" />
                           <span>{{ model.label }}</span>
                           <small v-if="model.comingSoon" class="text-primary border border-current rounded px-1">Coming Soon!</small>
                         </span>
 
                         <span class="flex items-center justify-start gap-4 col-start-2">
                           <small class="text-xs text-layer-muted flex items-center gap-0.5">
-                            <TokenIcon class="sq-4" />
+                            <Icon name="ContextSize" />
                             {{ model.contextWindow }}
                           </small>
                         </span>
@@ -362,15 +356,11 @@ export default defineComponent({
               </CoreFormControlGroup>
               <CoreFormControlGroup>
                 <CoreButtonLink :to="{ path: '/assistant/conversations' }" class="flex gap-2 items-center">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
-                  </svg>
+                  <Icon name="Message" />
                   <span>History</span>
                 </CoreButtonLink>
                 <CoreButtonLink :counter="true" :to="{ path: '/assistant' }" class="flex gap-2 items-center">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
-                  </svg>
+                  <Icon name="MessagePlus" />
                   <span>New</span>
                 </CoreButtonLink>
               </CoreFormControlGroup>
@@ -395,8 +385,8 @@ export default defineComponent({
                     :layer="1"
                     :value="instruction"
                   >
-                    <span class="flex items-center justify-start gap-2 col-start-1">
-                      <svg class="sq-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
+                    <span class="flex items-center justify-start gap-2 col-start-1 min-w-full">
+                      <Icon name="Instruction" />
                       <span>{{ instruction.description }}</span>
                     </span>
                   </CoreListboxOption>
@@ -460,9 +450,7 @@ export default defineComponent({
               @click="choosePrompt(examplePrompt)"
             >
               <p class="flex items-center gap-3">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                  <path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd" />
-                </svg>
+                <Icon name="Sparkles" />
                 <span>{{ examplePrompt }}</span>
               </p>
             </CoreButton>
@@ -471,7 +459,7 @@ export default defineComponent({
       </CoreScrollable>
       <CoreLayer class="absolute right-4 bottom-4">
         <CoreButton v-if="showBackToTop" class="p-2 bg-layer" @click="scrollToTop">
-          <AssetArrowUp class="w-4" />
+          <Icon name="ArrowUp" />
         </CoreButton>
       </CoreLayer>
     </div>
@@ -503,7 +491,7 @@ export default defineComponent({
                     </span>
                   </CoreButton>
                   <CoreButton as="label" title="Attach images">
-                    <AddImagesIcon class="sq-5" />
+                    <Icon name="ImagePlus" />
                     <input class="hidden" type="file" accept="image/*" multiple @change="addFiles">
                   </CoreButton>
                 </div>
diff --git a/components/AssistantChatMessage.vue b/components/AssistantChatMessage.vue
index 63b8f282..65812ff5 100644
--- a/components/AssistantChatMessage.vue
+++ b/components/AssistantChatMessage.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ClipboardIcon } from '@heroicons/vue/24/outline'
 import { readonly } from '#root/src/vendor/plugins/readonly'
 import { useVue } from '#shared/composables'
 
@@ -60,7 +59,7 @@ const copyMessage = async () => {
       <small>{{ createdAt }}</small>
       <CoreMenu>
         <CoreMenuItem :layer="1" @click="copyMessage">
-          <ClipboardIcon class="sq-5" />
+          <Icon name="Clipboard" />
           <span>Copy message</span>
         </CoreMenuItem>
       </CoreMenu>
diff --git a/components/AssistantHistoryChat.vue b/components/AssistantHistoryChat.vue
index 34d0ec58..066b4253 100644
--- a/components/AssistantHistoryChat.vue
+++ b/components/AssistantHistoryChat.vue
@@ -43,7 +43,7 @@ export default defineComponent({
         </div>
         <CoreMenu>
           <CoreMenuItem :layer="2" @click="discard">
-            <AssetTrash class="h-5 w-5" />
+            <Icon name="Trash" />
             <span>Discard</span>
           </CoreMenuItem>
         </CoreMenu>
diff --git a/components/AuthMagicLink.vue b/components/AuthMagicLink.vue
index 773def27..b28efb7b 100644
--- a/components/AuthMagicLink.vue
+++ b/components/AuthMagicLink.vue
@@ -1,12 +1,10 @@
 <script lang="ts">
-import { EnvelopeIcon } from '@heroicons/vue/24/solid'
 import { type PropType, defineComponent } from 'vue'
 import FormText from '#root/components/FormText.vue'
 import { type AuthMagicLinkForm } from '#composables/useAuth'
 
 export default defineComponent({
   components: {
-    EnvelopeIcon,
     FormText,
   },
   props: {
@@ -39,7 +37,7 @@ export default defineComponent({
   <form class="flex flex-col gap-3" @submit.prevent="send">
     <FormText v-model="form.email" label="Email" placeholder="Enter your email address..." type="email">
       <template #icon>
-        <EnvelopeIcon class="h-5 w-5" />
+        <Icon name="Email" />
       </template>
     </FormText>
     <div class="flex flex-col gap-1">
diff --git a/components/AuthMagicLinkModal.vue b/components/AuthMagicLinkModal.vue
index d9377cac..40b31142 100644
--- a/components/AuthMagicLinkModal.vue
+++ b/components/AuthMagicLinkModal.vue
@@ -1,12 +1,10 @@
 <script lang="ts">
-import { EnvelopeIcon } from '@heroicons/vue/24/solid'
 import { type PropType, defineComponent } from 'vue'
 import Modal from '#root/components/Modal.vue'
 import { type AuthMagicLinkForm } from '#composables/useAuth'
 
 export default defineComponent({
   components: {
-    EnvelopeIcon,
     Modal,
   },
   props: {
@@ -48,7 +46,7 @@ export default defineComponent({
     <div>
       <p>For your security, please confirm your email address.</p>
       <label class="flex items-center gap-3 cursor-text rounded px-3 py-2 outline-none mt-4 border border-layer">
-        <EnvelopeIcon class="h-5 w-5" />
+        <Icon name="Email" />
         <input v-model="form.email" class="bg-transparent flex-grow outline-none" placeholder="Email address" type="email">
       </label>
       <p v-if="form.error" class="mt-1 text-red-500">{{ form.error }}</p>
diff --git a/components/AuthSocialLinks.vue b/components/AuthSocialLinks.vue
index ba68c719..6a0bb8d7 100644
--- a/components/AuthSocialLinks.vue
+++ b/components/AuthSocialLinks.vue
@@ -1,7 +1,5 @@
 <script lang="ts">
 import { type PropType, computed, defineComponent } from 'vue'
-import LocalGitHubIcon from '#root/assets/github.svg?component'
-import LocalGoogleIcon from '#root/assets/google.svg?component'
 import { type AuthSocialForm } from '#composables/useAuth'
 
 /**
@@ -13,10 +11,6 @@ import { type AuthSocialForm } from '#composables/useAuth'
  * />
  */
 export default defineComponent({
-  components: {
-    LocalGitHubIcon,
-    LocalGoogleIcon,
-  },
   props: {
     form: {
       default: () => ({
@@ -61,7 +55,7 @@ export default defineComponent({
       data-test-id="sign-in-with-github"
       @click="clickProvider('github')"
     >
-      <LocalGitHubIcon class="h-5 w-5" />
+      <Icon name="BrandGitHub" />
       <span>Continue with GitHub</span>
     </CoreButton>
     <CoreButton
@@ -70,7 +64,7 @@ export default defineComponent({
       data-test-id="sign-in-with-google"
       @click="clickProvider('google')"
     >
-      <LocalGoogleIcon class="h-5 w-5" />
+      <Icon name="BrandGoogle" />
       <span>Continue with Google</span>
     </CoreButton>
     <p v-if="form.error" class="text-red-500">
diff --git a/components/AuthTier.vue b/components/AuthTier.vue
index c28a2e94..bff22665 100644
--- a/components/AuthTier.vue
+++ b/components/AuthTier.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { ArrowUpCircleIcon } from '@heroicons/vue/24/outline'
 import { type PropType, defineComponent } from 'vue'
 import AuthMagicLink from '#root/components/AuthMagicLink.vue'
 import AuthSocialLinks from '#root/components/AuthSocialLinks.vue'
@@ -10,7 +9,6 @@ import { type Tier } from '#composables/useTiers'
 
 export default defineComponent({
   components: {
-    ArrowUpCircleIcon,
     AuthMagicLink,
     AuthSocialLinks,
     CoreButton,
@@ -69,7 +67,7 @@ export default defineComponent({
     <p v-if="$slots.description"><slot name="description">{{ tier.description }}</slot></p>
     <section v-if="tier.allowUpgrade" class="flex flex-col gap-2">
       <CoreButton class="text-primary" @click="onUpgrade">
-        <ArrowUpCircleIcon class="h-6" />
+        <Icon name="ArrowUpCircle" />
         <span>Upgrade Subscription</span>
       </CoreButton>
     </section>
diff --git a/components/Banner.vue b/components/Banner.vue
index 2f6eca79..b76ada1e 100644
--- a/components/Banner.vue
+++ b/components/Banner.vue
@@ -13,14 +13,6 @@ const trackCta = () => {
 <template>
   <CoreCard v-if="!isSubscribed" class="text-center rounded">
     <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
-      <div class="w-full lg:w-auto text-left inline-flex">
-        <strong class="inline-flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z" />
-          </svg>
-          <span class="whitespace-nowrap text-lg">Octo Pro</span>
-        </strong>
-      </div>
       <div class="lg:ml-2">Share your docs, attach files, and get early access to new features.</div>
       <div class="flex items-center justify-end">
         <CoreButton :as="CoreLink" :to="{ path: '/account' }" class="whitespace-nowrap text-primary" @click="trackCta">
diff --git a/components/CheckListItem.vue b/components/CheckListItem.vue
index c6dd8142..4520e044 100644
--- a/components/CheckListItem.vue
+++ b/components/CheckListItem.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { CheckCircleIcon } from '@heroicons/vue/24/outline'
 </script>
 
 <template>
   <li class="flex items-center gap-3">
-    <CheckCircleIcon class="h-6 w-6" />
+    <Icon name="CheckCircle" />
     <span>
       <slot />
     </span>
diff --git a/components/CoreAlert.vue b/components/CoreAlert.vue
deleted file mode 100644
index fc9cc1cc..00000000
--- a/components/CoreAlert.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import { ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/vue/24/outline'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  type: 'danger' | 'notice' | 'warning',
-}>()
-
-const isDanger = computed(() => props.type === 'danger')
-const isNotice = computed(() => props.type === 'notice')
-const isWarning = computed(() => props.type === 'warning')
-</script>
-
-<template>
-  <section
-    :class="{ 'text-red-200': isDanger, 'text-blue-200': isNotice, 'text-yellow-200': isWarning }"
-    class="flex gap-3 rounded p-2 border border-layer"
-    role="alert"
-  >
-    <span class="flex items-start">
-      <slot name="icon">
-        <XCircleIcon v-if="isDanger" class="h-6" />
-        <ExclamationCircleIcon v-else-if="isWarning" class="h-6" />
-        <InformationCircleIcon v-else class="h-6" />
-      </slot>
-    </span>
-    <slot />
-  </section>
-</template>
diff --git a/components/CoreAsset.vue b/components/CoreAsset.vue
deleted file mode 100644
index db0e2b64..00000000
--- a/components/CoreAsset.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import {
-  UserCircleIcon as Account,
-  CheckIcon as CheckMark,
-  CalendarIcon as Daily,
-  XMarkIcon as Dismiss,
-  DocumentIcon as Document,
-  DocumentPlusIcon as DocumentPlus,
-  DocumentTextIcon as DocumentWithText,
-  BeakerIcon as Experimental,
-  ChatBubbleLeftRightIcon as Feedback,
-  InboxIcon as Inbox,
-  CloudArrowUpIcon as Save,
-  MagnifyingGlassIcon as Search,
-  ChevronUpDownIcon as SectionToggle,
-  Cog8ToothIcon as Settings,
-  HashtagIcon as Tag,
-  TrashIcon as Trash,
-  Square2StackIcon as Workspace,
-  Squares2X2Icon as Workspaces,
-} from '@heroicons/vue/24/outline'
-import Logo from '#root/assets/logo-icon.svg?component'
-import GitHub from '#root/assets/github.svg?component'
-
-defineProps<{
-  type: keyof typeof assets,
-}>()
-
-const assets = {
-  Account,
-  CheckMark,
-  Daily,
-  Dismiss,
-  Document,
-  DocumentPlus,
-  DocumentWithText,
-  Experimental,
-  Feedback,
-  GitHub,
-  Inbox,
-  Logo,
-  Save,
-  Search,
-  SectionToggle,
-  Settings,
-  Tag,
-  Trash,
-  Workspace,
-  Workspaces,
-}
-</script>
-
-<template>
-  <component :is="assets[type]" />
-</template>
diff --git a/components/CoreEditorToolbar.vue b/components/CoreEditorToolbar.vue
index f2530d6e..ea909212 100644
--- a/components/CoreEditorToolbar.vue
+++ b/components/CoreEditorToolbar.vue
@@ -1,18 +1,4 @@
 <script lang="ts" setup>
-import {
-  IconBlockquote,
-  IconBold,
-  IconCode,
-  IconHeading,
-  IconItalic,
-  IconLink,
-  IconList,
-  IconListCheck,
-  IconListNumbers,
-  IconPhoto,
-  IconUpload,
-} from '@tabler/icons-vue'
-
 withDefaults(defineProps<{
   blockquote?: boolean,
   bold?: boolean,
@@ -64,43 +50,43 @@ const triggerUpload = () => {
   <div class="flex gap-1 lg:gap-4">
     <div v-if="heading || bold || italic" class="flex gap-1">
       <CoreButton v-if="heading" class="p-1 border border-layer" title="Heading" @click="$emit('heading')">
-        <IconHeading class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatHeading" />
       </CoreButton>
       <CoreButton v-if="bold" class="p-1 border border-layer" title="Bold" @click="$emit('bold')">
-        <IconBold class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatBold" />
       </CoreButton>
       <CoreButton v-if="italic" class="p-1 border border-layer" title="Italic" @click="$emit('italic')">
-        <IconItalic class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatItalic" />
       </CoreButton>
     </div>
     <div v-if="blockquote || code" class="flex gap-1">
       <CoreButton v-if="blockquote" class="p-1 border border-layer" title="Blockquote" @click="$emit('blockquote')">
-        <IconBlockquote class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatBlockquote" />
       </CoreButton>
       <CoreButton v-if="code" class="p-1 border border-layer" title="Code" @click="$emit('code')">
-        <IconCode class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatCode" />
       </CoreButton>
     </div>
     <div v-if="bulletList || numberList || taskList" class="flex gap-1">
       <CoreButton v-if="bulletList" class="p-1 border border-layer" title="Bullet List" @click="$emit('bulletList')">
-        <IconList class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatListBulleted" />
       </CoreButton>
       <CoreButton v-if="numberList" class="p-1 border border-layer" title="Number List" @click="$emit('numberList')">
-        <IconListNumbers class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatListNumbered" />
       </CoreButton>
       <CoreButton v-if="taskList" class="p-1 border border-layer" title="Task List" @click="$emit('taskList')">
-        <IconListCheck class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatListChecked" />
       </CoreButton>
     </div>
     <div v-if="link || image || upload" class="flex gap-1">
       <CoreButton v-if="link" class="p-1 border border-layer" title="Link" @click="$emit('link')">
-        <IconLink class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatLink" />
       </CoreButton>
       <CoreButton v-if="image" class="p-1 border border-layer" title="Image" @click="$emit('image')">
-        <IconPhoto class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatImage" />
       </CoreButton>
       <CoreButton v-if="upload" class="p-1 border border-layer" title="Upload" @click="triggerUpload">
-        <IconUpload class="sq-6" :stroke-width="1.25" />
+        <Icon name="FormatUpload" />
         <input ref="fileInput" class="hidden" type="file" @change="$emit('upload', $event)">
       </CoreButton>
     </div>
diff --git a/components/CoreInput.vue b/components/CoreInput.vue
index 221f6825..228e7b1e 100644
--- a/components/CoreInput.vue
+++ b/components/CoreInput.vue
@@ -111,9 +111,7 @@ onMounted(() => {
         <div class="flex flex-col flex-grow overflow-hidden px-2 py-1 relative rounded border border-layer">
           <span v-if="private" class="absolute flex inset-0 items-center justify-center z-10 group-focus-within:opacity-0 group-focus-within:-z-10 bg-layer">
             <span class="flex gap-2 items-center">
-              <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
+              <Icon name="Private" />
               <span>Tap to view</span>
             </span>
           </span>
diff --git a/components/CoreListboxButton.vue b/components/CoreListboxButton.vue
index 09967ec2..fac61054 100644
--- a/components/CoreListboxButton.vue
+++ b/components/CoreListboxButton.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ListboxButton } from '@headlessui/vue'
-import { ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 import { CoreButton } from '#components'
 </script>
 
@@ -13,10 +12,7 @@ import { CoreButton } from '#components'
     <span
       class="pointer-events-none flex items-center"
     >
-      <ChevronUpDownIcon
-        class="h-5 w-5 text-layer-muted"
-        aria-hidden="true"
-      />
+      <Icon name="Toggle" class="text-layer-muted" aria-hidden="true" />
     </span>
   </ListboxButton>
 </template>
diff --git a/components/CoreMenu.vue b/components/CoreMenu.vue
index f240eef5..8b82cf5a 100644
--- a/components/CoreMenu.vue
+++ b/components/CoreMenu.vue
@@ -7,9 +7,7 @@ import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
     <MenuButton as="template">
       <slot name="menu-button">
         <CoreButton class="ui-open:bg-layer-hover">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
-          </svg>
+          <Icon name="DotsVertical" />
         </CoreButton>
       </slot>
     </MenuButton>
diff --git a/components/CoreNavPanel.vue b/components/CoreNavPanel.vue
index c5cc031c..d5f97b09 100644
--- a/components/CoreNavPanel.vue
+++ b/components/CoreNavPanel.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
 import { type Component, computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -24,8 +23,7 @@ const toggleContent = () => {
     <slot name="label">
       <h6 v-if="label" class="flex items-center justify-between text-sm text-layer-muted cursor-pointer" @click="toggleContent">
         <span class="flex items-center flex-grow gap-1">
-          <ChevronDownIcon v-if="showContent" class="h-4" />
-          <ChevronRightIcon v-else class="h-4" />
+          <Icon name="Toggle" class="h-4" />
           <span class="inline-flex flex-grow justify-between items-center">
             <span>{{ label }}</span>
             <slot name="label-alt-action" />
diff --git a/components/DashPanel.vue b/components/DashPanel.vue
index c327c477..6bd80ad9 100644
--- a/components/DashPanel.vue
+++ b/components/DashPanel.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import {
-  IconSelector,
-} from '@tabler/icons-vue'
 import { useToggle } from '~/composables/useToggle'
 
 const props = withDefaults(defineProps<{
+  closeable?: boolean,
   collapsed?: boolean,
   label?: string,
 }>(), {
+  closeable: false,
   collapsed: false,
 })
 
+defineEmits(['close'])
+
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const state = ref(!props.collapsed)
 const { state: isVisible, toggle } = useToggle({ state })
@@ -20,11 +21,14 @@ const { state: isVisible, toggle } = useToggle({ state })
   <div class="flex flex-col min-h-0 min-w-0 rounded border border-layer">
     <header class="flex flex-shrink-0 gap-1 justify-between p-1">
       <CoreButton class="flex justify-start grow items-center gap-1 pl-1 pr-2 py-0" @click="toggle">
-        <IconSelector class="sq-4" />
+        <Icon name="Toggle" size="1rem" />
         <slot name="header">
           <h3 v-if="label">{{ label }}</h3>
         </slot>
       </CoreButton>
+      <CoreButton v-if="closeable" class="flex shrink items-center px-1 py-0" @click="$emit('close')">
+        <Icon name="Dismiss" size="1rem" />
+      </CoreButton>
     </header>
     <div class="grid grid-rows-[0fr] transition-all" :class="{ 'grid-rows-[1fr]': isVisible }">
       <div class="flex flex-col overflow-hidden">
diff --git a/components/DiscardableAction.vue b/components/DiscardableAction.vue
index dde4c736..64e4aa8f 100644
--- a/components/DiscardableAction.vue
+++ b/components/DiscardableAction.vue
@@ -1,12 +1,3 @@
-<template>
-  <button class="flex items-center cursor-pointer" @click.stop="toggle">
-    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-    </svg>
-    <div class="ml-6 md:ml-3 text-left flex-grow">{{ actionText }}</div>
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -16,13 +7,20 @@ export default {
   },
   computed: {
     actionText() {
-      return this.discardedAt ? 'Restore' : 'Discard';
+      return this.discardedAt ? 'Restore' : 'Discard'
     },
   },
   methods: {
     toggle() {
-      this.discardedAt ? this.onRestore() : this.onDiscard();
+      this.discardedAt ? this.onRestore() : this.onDiscard()
     },
   },
-};
+}
 </script>
+
+<template>
+  <button class="flex items-center gap-2 cursor-pointer" @click.stop="toggle">
+    <Icon name="Trash" />
+    <div class="text-left flex-grow">{{ actionText }}</div>
+  </button>
+</template>
diff --git a/components/Doc.vue b/components/Doc.vue
index 6f086e98..b0bf62b9 100644
--- a/components/Doc.vue
+++ b/components/Doc.vue
@@ -68,15 +68,11 @@ export default {
       </p>
       <div v-if="allowDiscard">
         <CoreButton v-if="discardedAt" class="text-sm" @click.stop="restore">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
+          <Icon name="Trash" />
           <span>Restore</span>
         </CoreButton>
         <CoreButton v-else class="text-sm text-red-500" @click.stop="discard">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
+          <Icon name="Trash" />
           <span>Discard</span>
         </CoreButton>
       </div>
diff --git a/components/DocLink.vue b/components/DocLink.vue
index 7ea3a536..a0aa181d 100644
--- a/components/DocLink.vue
+++ b/components/DocLink.vue
@@ -5,10 +5,8 @@ defineProps<{ doc: Doc }>()
 </script>
 
 <template>
-  <CoreLink :to="{ path: `/docs/${doc.id}` }" class="flex items-center">
-    <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-    </svg>
-    <span class="flex-grow overflow-hidden truncate ml-3">{{ doc.label }}</span>
+  <CoreLink :to="{ path: `/docs/${doc.id}` }" class="flex items-center gap-2">
+    <Icon name="Doc" />
+    <span class="flex-grow overflow-hidden truncate">{{ doc.label }}</span>
   </CoreLink>
 </template>
diff --git a/components/DocList.vue b/components/DocList.vue
index 66dc6c91..93eab731 100644
--- a/components/DocList.vue
+++ b/components/DocList.vue
@@ -138,16 +138,12 @@ export default defineComponent({
       >
         <LazyDoc v-bind="doc" :allow-discard="isEditing" class="h-96" />
         <div v-if="doc.selected" class="flex items-center justify-center rounded absolute inset-0 bg-layer bg-opacity-50">
-          <svg height="3em" width="3em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
+          <Icon name="CheckCircle" size="3rem" />
         </div>
       </div>
       <div v-if="showLoadMore" class="flex items-center justify-center rounded cursor-pointer">
         <CoreButton class="text-lg px-8 py-6" @click="loadMore">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
+          <Icon name="DocLoad" size="1.5rem" />
           <span>Load More</span>
         </CoreButton>
       </div>
diff --git a/components/Icon.vue b/components/Icon.vue
new file mode 100644
index 00000000..0d2c5792
--- /dev/null
+++ b/components/Icon.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import * as Tabler from '@tabler/icons-vue'
+import Logo from '#root/assets/logo-icon.svg?component'
+
+withDefaults(defineProps<{
+  name: keyof typeof icons,
+  /**
+   * Value for `height` and `width` attributes.
+   *
+   * @default '1.25rem'
+   */
+  size?: number | string,
+  /**
+   * Value for `stroke-width` attribute.
+   *
+   * @default 1.25
+   */
+  strokeWidth?: number,
+}>(), {
+  size: '1.25rem',
+  strokeWidth: 1.25,
+})
+
+const icons = {
+  Logo,
+  Account: Tabler.IconUserCircle,
+  ArrowRight: Tabler.IconArrowRight,
+  ArrowUp: Tabler.IconArrowUp,
+  ArrowUpCircle: Tabler.IconCircleArrowUp,
+  BrandCodeSandbox: Tabler.IconBrandCodesandbox,
+  BrandDiscord: Tabler.IconBrandDiscord,
+  BrandGitHub: Tabler.IconBrandGithub,
+  BrandGoogle: Tabler.IconBrandGoogle,
+  BrandOpenAI: Tabler.IconBrandOpenai,
+  Check: Tabler.IconCheck,
+  CheckCircle: Tabler.IconCircleCheck,
+  Clipboard: Tabler.IconClipboard,
+  ContextSize: Tabler.IconRulerMeasure2,
+  Daily: Tabler.IconNotebook,
+  Dismiss: Tabler.IconX,
+  Doc: Tabler.IconFile,
+  DocDuplicate: Tabler.IconFiles,
+  DocImport: Tabler.IconFileImport,
+  DocLoad: Tabler.IconFileIsr,
+  DocPlus: Tabler.IconFilePlus,
+  DocWithText: Tabler.IconFileText,
+  DotsVertical: Tabler.IconDotsVertical,
+  Email: Tabler.IconMail,
+  Experimental: Tabler.IconTestPipe,
+  Feedback: Tabler.IconMessages,
+  FormatBlockquote: Tabler.IconBlockquote,
+  FormatBold: Tabler.IconBold,
+  FormatCode: Tabler.IconCode,
+  FormatHeading: Tabler.IconHeading,
+  FormatImage: Tabler.IconPhoto,
+  FormatItalic: Tabler.IconItalic,
+  FormatLink: Tabler.IconLink,
+  FormatListBulleted: Tabler.IconList,
+  FormatListChecked: Tabler.IconListCheck,
+  FormatListNumbered: Tabler.IconListNumbers,
+  FormatUpload: Tabler.IconUpload,
+  Graph: Tabler.IconAffiliate,
+  ImagePlus: Tabler.IconPhotoPlus,
+  Inbox: Tabler.IconInbox,
+  Instruction: Tabler.IconListDetails,
+  LockClosed: Tabler.IconLock,
+  LockOpen: Tabler.IconLockOpen,
+  LogOut: Tabler.IconLogout,
+  Menu: Tabler.IconMenu2,
+  Message: Tabler.IconMessage,
+  MessagePlus: Tabler.IconMessagePlus,
+  Moon: Tabler.IconMoon,
+  NetworkAvailable: Tabler.IconCloudCheck,
+  NetworkUnavailable: Tabler.IconCloudX,
+  OpenFile: Tabler.IconFileDots,
+  PencilPlus: Tabler.IconPencilPlus,
+  Private: Tabler.IconShieldLock,
+  Save: Tabler.IconCloudUp,
+  Search: Tabler.IconSearch,
+  Settings: Tabler.IconSettings,
+  Sparkles: Tabler.IconSparkles,
+  Sun: Tabler.IconSun,
+  SunWithMoon: Tabler.IconSunMoon,
+  Tag: Tabler.IconHash,
+  Toggle: Tabler.IconSelector,
+  Trash: Tabler.IconTrash,
+  Workspace: Tabler.IconFolder,
+  Workspaces: Tabler.IconFolders,
+}
+</script>
+
+<template>
+  <component :is="icons[name]" :height="size" :width="size" :stroke-width="strokeWidth" />
+</template>
diff --git a/components/Modal.vue b/components/Modal.vue
index 95421c3c..d2d0a305 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -25,9 +25,7 @@ export default defineComponent({
             <slot name="header" />
           </h1>
           <button class="p-2 -m-2" @click="onClose">
-            <svg class="sq-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
+            <Icon name="Dismiss" />
           </button>
         </header>
         <CoreScrollable class="max-h-96">
diff --git a/components/Providers.vue b/components/Providers.vue
index 8fa8e8d0..be9ab27e 100644
--- a/components/Providers.vue
+++ b/components/Providers.vue
@@ -1,14 +1,8 @@
 <script lang="ts">
 import { GithubAuthProvider, GoogleAuthProvider, getAuth, getRedirectResult, linkWithRedirect } from 'firebase/auth'
 import { computed, defineComponent } from 'vue'
-import IconGitHub from '#root/assets/github.svg?component'
-import IconGoogle from '#root/assets/google.svg?component'
 
 export default defineComponent({
-  components: {
-    IconGitHub,
-    IconGoogle,
-  },
   setup() {
     const { user } = useUser()
     const github = computed(() => user.value.providers.find(({ providerId: id }) => id === 'github.com'))
@@ -54,7 +48,7 @@ export default defineComponent({
     <div>
       <div v-if="github" class="mb-4">
         <div class="flex items-center">
-          <IconGitHub class="h-5 w-5" />
+          <Icon name="BrandGitHub" />
           <span class="font-bold text-lg ml-3">GitHub</span>
           <span class="border border-layer text-base font-normal px-1 rounded ml-2">Linked</span>
         </div>
@@ -63,7 +57,7 @@ export default defineComponent({
 
       <div v-if="google" class="mb-4">
         <div class="flex items-center">
-          <IconGoogle class="h-5 w-5" />
+          <Icon name="BrandGoogle" />
           <span class="font-bold text-lg ml-3">Google</span>
           <span class="border border-layer text-base font-normal px-1 rounded ml-2">Linked</span>
         </div>
@@ -73,19 +67,17 @@ export default defineComponent({
 
     <CoreLayer class="flex flex-col gap-2 lg:max-w-xs">
       <CoreButton v-if="!github" class="w-full lg:w-auto whitespace-nowrap justify-start" @click="linkGitHub">
-        <IconGitHub class="h-5 w-5" />
+        <Icon name="BrandGitHub" />
         <span>Link GitHub</span>
       </CoreButton>
 
       <CoreButton v-if="!google" class="w-full lg:w-auto whitespace-nowrap justify-start" @click="linkGoogle">
-        <IconGoogle class="h-5 w-5" />
+        <Icon name="BrandGoogle" />
         <span>Link Google</span>
       </CoreButton>
 
       <CoreButton class="w-full lg:w-auto whitespace-nowrap justify-start text-red-400" @click="signOut">
-        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-        </svg>
+        <Icon name="LogOut" />
         <span class="action">Sign Out</span>
       </CoreButton>
     </CoreLayer>
diff --git a/components/Tag.vue b/components/Tag.vue
index 14c5ecbc..3b466c5b 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { HashtagIcon as TagIcon } from '@heroicons/vue/24/outline'
 import { useSlots } from 'vue'
 
 const assetMap = {
@@ -9,7 +8,7 @@ const assetMap = {
 
 const defaultSlotNodes = computed(() => useSlots().default?.() || [])
 
-const assetType = computed(() => {
+const icon = computed(() => {
   if (defaultSlotNodes.value.length === 1) {
     for (const node of defaultSlotNodes.value) {
       if (typeof node.children === 'string') {
@@ -22,8 +21,7 @@ const assetType = computed(() => {
 
 <template>
   <span class="inline-flex min-w-0 items-center gap-2">
-    <CoreAsset v-if="assetType" :type="assetType" class="sq-5" />
-    <TagIcon v-else class="w-5" />
+    <Icon :name="icon || 'Tag'" />
     <span class="flex-grow flex-shrink text-ellipsis whitespace-nowrap overflow-hidden">
       <slot />
     </span>
diff --git a/components/settings/Appearance.vue b/components/settings/Appearance.vue
index 1d9e9ac0..697777a7 100644
--- a/components/settings/Appearance.vue
+++ b/components/settings/Appearance.vue
@@ -27,7 +27,7 @@ const experimental = computed(() => store.state.settings.experimental)
           <input v-model="appearance" type="radio" value="custom" class="radio">
           <span class="flex items-center justify-between gap-2">
             <span>Custom</span>
-            <CoreAsset type="Experimental" class="sq-5 text-layer-muted" />
+            <Icon name="Experimental" class="text-layer-muted" />
           </span>
         </CoreButton>
       </CoreLayer>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index a463938a..85e2af39 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { IconDotsVertical, IconMenu2, IconMoon, IconPencilPlus, IconSun, IconSunMoon } from '@tabler/icons-vue'
 import { computed, onMounted, onUnmounted } from 'vue'
 import CoreButton from '#root/components/CoreButton.vue'
 import CoreDivider from '#root/components/CoreDivider.vue'
@@ -56,15 +55,15 @@ onUnmounted(() => {
       <div class="flex p-1 items-center">
         <div class="flex gap-1 flex-row-reverse lg:flex-row items-center basis-full justify-start">
           <CoreButton class="hidden lg:flex" @click="toggleMenu">
-            <IconMenu2 :stroke-width="1.25" class="h-6" />
+            <Icon name="Menu" />
             <span>Menu</span>
           </CoreButton>
           <CoreButton :as="CoreLink" :to="{ path: '/menu' }" class="lg:hidden">
-            <IconMenu2 :stroke-width="1.25" class="h-6" />
+            <Icon name="Menu" />
             <span>Menu</span>
           </CoreButton>
           <CoreButton :as="CoreLink" :to="{ path: '/docs/new' }">
-            <IconPencilPlus :stroke-width="1.25" class="h-6" />
+            <Icon name="PencilPlus" />
             <span>New</span>
           </CoreButton>
         </div>
@@ -97,15 +96,15 @@ onUnmounted(() => {
         </div>
         <div class="flex items-center gap-1 lg:basis-full justify-end">
           <CoreButton class="hidden lg:flex" @click="toggleAppearance">
-            <IconMoon v-if="isDark" :stroke-width="1.25" class="w-6" />
-            <IconSun v-else-if="isLight" :stroke-width="1.25" class="w-6" />
-            <IconSunMoon v-else :stroke-width="1.25" class="w-6" />
+            <Icon v-if="isDark" name="Moon" />
+            <Icon v-else-if="isLight" name="Sun" />
+            <Icon v-else name="SunWithMoon" />
           </CoreButton>
           <CoreButton v-if="doc" class="hidden lg:flex" data-test-id="toggle-meta" data-test-toggle-meta @click="toggleMeta">
-            <IconDotsVertical :stroke-width="1.25" class="h-6" />
+            <Icon name="DotsVertical" />
           </CoreButton>
           <CoreButton v-if="doc" :as="CoreLink" :to="{ path: `/docs/${doc.id}/meta` }" class="lg:hidden" data-test-id="toggle-meta" data-test-toggle-meta>
-            <IconDotsVertical :stroke-width="1.25" class="h-6" />
+            <Icon name="DotsVertical" />
           </CoreButton>
         </div>
       </div>
diff --git a/lib/components/DesignSystemColors.vue b/lib/components/DesignSystemColors.vue
index d3a7998d..20de0c8a 100644
--- a/lib/components/DesignSystemColors.vue
+++ b/lib/components/DesignSystemColors.vue
@@ -19,9 +19,6 @@ watch(color, () => {
     <div class="flex gap-2">
       <CoreButton as="label" class="items-center relative overflow-hidden" :style="{ backgroundColor: color, color: neutral.textColor }">
         <input v-model="color" type="color" class="absolute left-0 bottom-0 opacity-0 cursor-pointer">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-          <path fill-rule="evenodd" d="M3.5 2A1.5 1.5 0 0 0 2 3.5V15a3 3 0 1 0 6 0V3.5A1.5 1.5 0 0 0 6.5 2h-3Zm11.753 6.99L9.5 14.743V6.257l1.51-1.51a1.5 1.5 0 0 1 2.122 0l2.121 2.121a1.5 1.5 0 0 1 0 2.122ZM8.364 18H16.5a1.5 1.5 0 0 0 1.5-1.5v-3a1.5 1.5 0 0 0-1.5-1.5h-2.136l-6 6ZM5 16a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
-        </svg>
         <span>Choose Color</span>
       </CoreButton>
       <CoreButton as="label">
diff --git a/package.json b/package.json
index cd519deb..5dd147dd 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
   },
   "devDependencies": {
     "@csstools/postcss-oklab-function": "^3.0.9",
-    "@heroicons/vue": "^2.1.1",
     "@nuxtjs/tailwindcss": "^6.10.3",
     "@pinia/nuxt": "^0.4.11",
     "@playwright/test": "^1.41.2",
diff --git a/pages/account.vue b/pages/account.vue
index 590221be..23aac204 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -34,15 +34,11 @@ export default defineComponent({
     <section v-if="user.id" class="mb-8">
       <h3 class="text-3xl mb-4">Status</h3>
       <div v-if="online" class="flex items-center">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+        <Icon name="NetworkAvailable" />
         <span class="ml-2">Docs are currently syncing to your account.</span>
       </div>
       <div v-else class="flex items-center text-red-400">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+        <Icon name="NetworkUnavailable" />
         <span class="ml-2">You are currently offline. Docs will continue syncing when you go online.</span>
       </div>
     </section>
diff --git a/pages/assistant/conversations/index.vue b/pages/assistant/conversations/index.vue
index 06bfba09..71d6ab45 100644
--- a/pages/assistant/conversations/index.vue
+++ b/pages/assistant/conversations/index.vue
@@ -41,9 +41,7 @@ export default defineComponent({
       <CoreLayer class="flex gap-2 items-center justify-end">
         <CoreButtonLink :counter="true" :to="{ path: '/assistant' }" class="flex gap-2 items-center">
           <span>New</span>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
-          </svg>
+          <Icon name="MessagePlus" />
         </CoreButtonLink>
       </CoreLayer>
       <CoreLayer class="flex flex-col flex-grow gap-8">
diff --git a/pages/docs/[docId]/meta.vue b/pages/docs/[docId]/meta.vue
index b9f50989..402e6596 100644
--- a/pages/docs/[docId]/meta.vue
+++ b/pages/docs/[docId]/meta.vue
@@ -143,30 +143,22 @@ export default {
   <CoreScrollable v-if="doc">
     <CoreNavPanel class="flex flex-col gap-1">
       <button class="sidebar-link w-full" @click.stop="duplicateDocument">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
-        </svg>
-        <span class="ml-6 md:ml-3 flex-grow text-left">Duplicate</span>
+        <Icon name="DocDuplicate" />
+        <span class="ml-2 flex-grow text-left">Duplicate</span>
       </button>
       <DiscardableAction v-if="doc.id" :discarded-at="doc.discardedAt" :on-discard="discardDocument" :on-restore="restoreDocument" class="sidebar-link w-full" />
       <button v-if="hasCodeblocks" class="sidebar-link w-full" @click="openSandbox">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-        </svg>
-        <span class="ml-6 md:ml-3 flex-grow text-left">Create Sandbox</span>
+        <Icon name="BrandCodeSandbox" />
+        <span class="ml-2 flex-grow text-left">Create Sandbox</span>
       </button>
       <template v-if="doc.public">
         <button class="sidebar-link w-full" @click="restrictDocument">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-          </svg>
-          <span class="ml-6 md:ml-3 flex-grow text-left">Make Private</span>
+          <Icon name="LockClosed" />
+          <span class="ml-2 flex-grow text-left">Make Private</span>
         </button>
         <button class="sidebar-link w-full" @click="copyPublicUrl">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-          </svg>
-          <span class="ml-6 md:ml-3 flex-grow text-left">Copy Link</span>
+          <Icon name="Clipboard" />
+          <span class="ml-2 flex-grow text-left">Copy Link</span>
         </button>
         <CoreLayer>
           <input ref="link" :value="publicUrl" type="text" class="bg-layer rounded p-2 w-full" readonly data-test-public-url>
@@ -174,10 +166,8 @@ export default {
       </template>
       <template v-else>
         <button class="sidebar-link w-full" data-test-share-doc @click="shareDocument">
-          <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
-          </svg>
-          <span class="ml-6 md:ml-3 flex-grow text-left">Make Public</span>
+          <Icon name="LockOpen" />
+          <span class="ml-2 flex-grow text-left">Make Public</span>
         </button>
       </template>
     </CoreNavPanel>
@@ -206,9 +196,7 @@ export default {
     <CoreDivider v-if="doc.tasks.length" />
     <CoreNavPanel v-if="doc.tasks.length" class="flex flex-col gap-1" label="Tasks">
       <div v-for="task in doc.tasks" :key="task" class="flex items-center px-3 py-2 my-1 md:px-2 md:py-1">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-        </svg>
+        <Icon name="Check" />
         <span class="flex-grow overflow-hidden truncate ml-3">{{ task }}</span>
       </div>
     </CoreNavPanel>
diff --git a/pages/docs/import.vue b/pages/docs/import.vue
index 9b0a9daf..15db3956 100644
--- a/pages/docs/import.vue
+++ b/pages/docs/import.vue
@@ -83,10 +83,7 @@ export default defineComponent({
       <CoreLayer>
         <CoreButton as="label">
           <input type="file" class="hidden" accept=".md,.markdown,text/markdown" multiple @change="onFiles">
-          <svg class="w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-miterlimit="5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M10 13V4M10 4L13 7M10 4L7 7" />
-            <path d="M2 13V15C2 15.5523 2.44772 16 3 16H17C17.5523 16 18 15.5523 18 15V13" />
-          </svg>
+          <Icon name="DocImport" />
           <span>Choose Markdown files to import</span>
         </CoreButton>
       </CoreLayer>
diff --git a/pages/index.vue b/pages/index.vue
index 43f19675..a6ef21b0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -46,9 +46,7 @@ onMounted(() => {
               <CoreButton :as="CoreLink" :to="ctaRoute" class="bg-brand hover:bg-brand transition whitespace-nowrap justify-center gap-3 mt-1 text-black text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
                 <span class="flex items-center gap-3 align-center">
                   <span>{{ ctaLabel }}</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
+                  <Icon name="ArrowRight" />
                 </span>
               </CoreButton>
             </div>
@@ -118,9 +116,7 @@ onMounted(() => {
               <CoreButton :as="CoreLink" :to="ctaRoute" class="bg-brand hover:bg-brand transition whitespace-nowrap justify-center gap-3 mt-1 text-black text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
                 <span class="flex items-center gap-3 align-center">
                   <span>{{ ctaLabel }}</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
+                  <Icon name="ArrowRight" />
                 </span>
               </CoreButton>
             </div>
diff --git a/pages/menu.vue b/pages/menu.vue
index 1a006144..6d2583a6 100644
--- a/pages/menu.vue
+++ b/pages/menu.vue
@@ -1,23 +1,4 @@
 <script lang="ts" setup>
-import {
-  DocumentTextIcon,
-  CloudArrowUpIcon as SaveIcon,
-  HashtagIcon as TagIcon,
-  Square2StackIcon as WorkspaceIcon,
-} from '@heroicons/vue/24/outline'
-import {
-  IconCheck,
-  IconFile,
-  IconInbox,
-  IconLayoutGrid,
-  IconMessages,
-  IconNotebook,
-  IconSearch,
-  IconSettings,
-  IconTestPipe,
-  IconTrash,
-  IconUserCircle,
-} from '@tabler/icons-vue'
 import { nanoid } from 'nanoid'
 import CoreLink from '#root/components/CoreLink.vue'
 import ModKKey from '#root/components/ModKKey.vue'
@@ -99,7 +80,7 @@ const trackCta = () => {
       <div class="flex flex-col gap-1">
         <div class="flex flex-col gap-1">
           <CoreButton :as="CoreLink" :to="{ path: '/docs' }" class="sidebar-link">
-            <IconSearch :stroke-width="1.25" class="sq-5" />
+            <Icon name="Search" />
             <span class="grow">Search</span>
           </CoreButton>
         </div>
@@ -124,7 +105,7 @@ const trackCta = () => {
         <FlexDivider class="-mx-1" />
         <div class="flex flex-col gap-1">
           <CoreLink :to="{ path: '/docs/f/untagged' }" class="sidebar-link">
-            <IconInbox :stroke-width="1.25" class="sq-5" />
+            <Icon name="Inbox" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Inbox</span>
               <ModKKey class="text-layer-muted">U</ModKKey>
@@ -132,12 +113,12 @@ const trackCta = () => {
           </CoreLink>
           <CoreLink :to="{ path: '/notepad' }" class="sidebar-link">
             <div class="flex gap-2 items-center">
-              <IconNotebook :stroke-width="1.25" class="sq-5" />
+              <Icon name="Daily" />
               <span>Daily Notepad</span>
             </div>
           </CoreLink>
           <CoreLink :to="{ path: '/workspaces' }" class="sidebar-link">
-            <IconLayoutGrid :stroke-width="1.25" class="sq-5" />
+            <Icon name="Workspaces" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span class="action">Workspaces</span>
               <ModKKey class="text-layer-muted">C</ModKKey>
@@ -147,43 +128,43 @@ const trackCta = () => {
         <div v-if="experimentalFeaturesEnabled" class="flex flex-col gap-1">
           <FlexDivider class="-mx-1" />
           <button class="sidebar-link w-full" @click="openFile">
-            <IconFile :stroke-width="1.25" class="sq-5" />
+            <Icon name="OpenFile" />
             <span class="action flex flex-grow items-center justify-between ml-2">
               <span>Open File</span>
-              <IconTestPipe :stroke-width="1.25" class="text-layer-muted w-5" title="Experimental" />
+              <Icon name="Experimental" class="text-layer-muted" title="Experimental" />
             </span>
           </button>
           <CoreLink :to="{ path: '/assistant' }" class="sidebar-link allow-link-active">
-            <CoreAsset type="Logo" class="sq-5" />
+            <Icon name="Logo" />
             <span class="action flex flex-grow items-center justify-between ml-2">
               <span>Assistant</span>
-              <IconTestPipe :stroke-width="1.25" class="text-layer-muted w-5" title="Experimental" />
+              <Icon name="Experimental" class="text-layer-muted" title="Experimental" />
             </span>
           </CoreLink>
         </div>
         <FlexDivider class="-mx-1" />
         <div class="flex flex-col gap-1">
           <CoreLink :to="linkFeedback" class="sidebar-link">
-            <div class="flex gap-3 items-center">
-              <IconMessages :stroke-width="1.25" class="sq-5" />
+            <div class="flex gap-2 items-center">
+              <Icon name="Feedback" />
               <span>Feedback</span>
             </div>
           </CoreLink>
           <CoreLink v-if="!firebaseDisabled && !user.id" :to="{ path: '/account' }" class="sidebar-link text-brand" @click="trackCta">
-            <SaveIcon class="sq-5" />
+            <Icon name="Save" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Save Docs</span>
             </span>
           </CoreLink>
           <CoreLink :to="{ path: '/settings' }" class="sidebar-link">
-            <div class="flex gap-3 items-center">
-              <IconSettings :stroke-width="1.25" class="sq-5" />
+            <div class="flex gap-2 items-center">
+              <Icon name="Settings" />
               <span>Settings</span>
             </div>
           </CoreLink>
           <CoreLink :to="{ path: '/account' }" class="sidebar-link">
-            <div class="flex gap-3 items-center">
-              <IconUserCircle :stroke-width="1.25" class="sq-5" />
+            <div class="flex gap-2 items-center">
+              <Icon name="Account" />
               <span>Account</span>
             </div>
           </CoreLink>
@@ -193,35 +174,28 @@ const trackCta = () => {
       <CoreLayer class="flex flex-col gap-1">
         <DashPanel class="flex flex-col bg-layer" collapsed label="Filters">
           <CoreLink :to="{ path: '/docs/f/tasks' }" class="sidebar-link">
-            <IconCheck :stroke-width="1.25" class="sq-5" />
+            <Icon name="Check" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Tasks</span>
               <ModKKey class="text-layer-muted">T</ModKKey>
             </span>
           </CoreLink>
           <CoreLink :to="{ path: '/docs/f/discarded' }" class="sidebar-link">
-            <IconTrash :stroke-width="1.25" class="sq-5" />
+            <Icon name="Trash" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Discarded</span>
               <ModKKey class="text-layer-muted">D</ModKKey>
             </span>
           </CoreLink>
         </DashPanel>
-        <DashPanel v-if="context.active || contextTags.length" class="bg-layer" label="Workspace">
-          <template #label-alt-action>
-            <CoreButton class="p-0.5" @click.stop="clearContext">
-              <svg class="sq-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </CoreButton>
-          </template>
+        <DashPanel v-if="context.active || contextTags.length" class="bg-layer" closeable label="Workspace" @close="clearContext">
           <div class="flex flex-col gap-2 md:gap-1">
             <TagLink v-for="tag in contextTags" :key="tag" :tag="tag" class="sidebar-link" />
           </div>
         </DashPanel>
         <DashPanel v-if="contexts.length" class="flex flex-col bg-layer" collapsed label="Workspaces">
           <button v-for="workspace in contexts" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
-            <WorkspaceIcon class="sq-5" />
+            <Icon name="Workspace" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>{{ workspace.name }}</span>
             </span>
@@ -229,7 +203,7 @@ const trackCta = () => {
         </DashPanel>
         <DashPanel v-if="tags.length" class="flex flex-col bg-layer" collapsed label="Tags">
           <CoreLink class="sidebar-link md:hidden" :to="{ path: '/tags' }">
-            <TagIcon class="sq-5" />
+            <Icon name="Tag" />
             <span class="ml-3 flex-grow">Tags</span>
           </CoreLink>
           <div v-if="mediumPlus" class="flex flex-col gap-1">
@@ -238,13 +212,13 @@ const trackCta = () => {
         </DashPanel>
         <DashPanel class="flex flex-col bg-layer" collapsed label="Policies">
           <CoreLink :to="{ path: '/privacy-policy' }" class="sidebar-link">
-            <DocumentTextIcon class="sq-5" />
+            <Icon name="DocWithText" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Privacy Policy</span>
             </span>
           </CoreLink>
           <CoreLink :to="{ path: '/terms-and-conditions' }" class="sidebar-link">
-            <DocumentTextIcon class="sq-5" />
+            <Icon name="DocWithText" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>Terms &amp; Conditions</span>
             </span>
diff --git a/pages/quick-action.vue b/pages/quick-action.vue
deleted file mode 100644
index 34327ca2..00000000
--- a/pages/quick-action.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-useHead({
-  title: 'Quick Action',
-})
-</script>
-
-<template>
-  <CorePage>
-    <h2 class="text-2xl mb-3">Quick Actions</h2>
-    <h6 class="font-normal mb-5">The Quick Action button is always visible, and its function changes depending on what you are doing.</h6>
-    <div class="mb-8">
-      <h3 class="flex items-center text-xl mb-2">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span class="ml-3">Info</span>
-      </h3>
-      <p>This button appears on an active doc. It will take you to the doc meta page.</p>
-    </div>
-    <div class="mb-8">
-      <h3 class="flex items-center text-xl mb-2">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-        <span class="ml-3">Close</span>
-      </h3>
-      <p>This button shows up on all non-doc screens. It will take you back to the editor.</p>
-    </div>
-    <div class="mb-8">
-      <h4 class="flex items-center text-xl mb-2">
-        <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span class="ml-3">Help</span>
-      </h4>
-      <p>This button is visible on the dashboard, and it takes you to this page.</p>
-    </div>
-  </CorePage>
-</template>
diff --git a/pages/workspaces.vue b/pages/workspaces.vue
index bf195510..f0dbc578 100644
--- a/pages/workspaces.vue
+++ b/pages/workspaces.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { TrashIcon } from '@heroicons/vue/24/outline'
 import { nanoid } from 'nanoid'
 import CoreButton from '#root/components/CoreButton.vue'
 import Tag from '#root/components/Tag.vue'
@@ -71,7 +70,7 @@ onUnmounted(() => {
               <Tag v-for="tag in workspace.tags" :key="tag" class="p-2 rounded border border-layer">{{ tag }}</Tag>
             </div>
             <CoreButton class="absolute top-4 right-4" @click="removeWorkspace(workspace)">
-              <TrashIcon class="w-5" />
+              <Icon name="Trash" />
             </CoreButton>
           </CoreCard>
         </CoreLayer>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b501edce..ce927c28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,9 +103,6 @@ importers:
       '@csstools/postcss-oklab-function':
         specifier: ^3.0.9
         version: 3.0.9(postcss@8.4.38)
-      '@heroicons/vue':
-        specifier: ^2.1.1
-        version: 2.1.1(vue@3.4.21(typescript@5.3.3))
       '@nuxtjs/tailwindcss':
         specifier: ^6.10.3
         version: 6.10.3(rollup@2.79.1)(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3))
@@ -1763,11 +1760,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  '@heroicons/vue@2.1.1':
-    resolution: {integrity: sha512-Yi5nh/89L193ALgHyJUQUdNLsKXPrrE3yj5yiR8WAlo7nZyXGxGauQcEAmBsa2XJGMhBMuEdoOiuZ8wEwTBxVQ==}
-    peerDependencies:
-      vue: '>= 3'
-
   '@humanwhocodes/config-array@0.11.13':
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -12023,10 +12015,6 @@ snapshots:
       '@tanstack/vue-virtual': 3.0.2(vue@3.4.21(typescript@5.3.3))
       vue: 3.4.21(typescript@5.3.3)
 
-  '@heroicons/vue@2.1.1(vue@3.4.21(typescript@5.3.3))':
-    dependencies:
-      vue: 3.4.21(typescript@5.3.3)
-
   '@humanwhocodes/config-array@0.11.13':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.1

From 7123f1f384c560a4cc20b9410c04f5ebb41b8abe Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Aug 2024 00:14:26 -0400
Subject: [PATCH 05/11] Add graph link to experimental features

---
 pages/menu.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/menu.vue b/pages/menu.vue
index 6d2583a6..648647a1 100644
--- a/pages/menu.vue
+++ b/pages/menu.vue
@@ -127,6 +127,13 @@ const trackCta = () => {
         </div>
         <div v-if="experimentalFeaturesEnabled" class="flex flex-col gap-1">
           <FlexDivider class="-mx-1" />
+          <CoreLink :to="{ path: '/graph' }" class="sidebar-link">
+            <Icon name="Graph" />
+            <span class="action flex flex-grow items-center justify-between ml-2">
+              <span>Graph Explorer</span>
+              <Icon name="Experimental" class="text-layer-muted" title="Experimental" />
+            </span>
+          </CoreLink>
           <button class="sidebar-link w-full" @click="openFile">
             <Icon name="OpenFile" />
             <span class="action flex flex-grow items-center justify-between ml-2">

From 0490e5432d995f98903a1ef70ef08484532e0051 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Aug 2024 19:22:46 -0400
Subject: [PATCH 06/11] Fix incorrect toolbar padding

---
 components/CoreEditor.vue           | 36 +++++++++++++++--------------
 test/e2e/healthchecks/index.spec.ts | 14 -----------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/components/CoreEditor.vue b/components/CoreEditor.vue
index c0bd6823..6be38e8d 100644
--- a/components/CoreEditor.vue
+++ b/components/CoreEditor.vue
@@ -117,22 +117,24 @@ export default defineComponent({
 <template>
   <div class="core-editor flex flex-col-reverse lg:flex-col flex-grow flex-shrink min-h-0 rounded">
     <template v-if="options?.interface?.toolbar">
-      <CoreScrollable class="core-editor-scrollable flex-shrink-0 w-full mx-auto">
-        <CoreEditorToolbar
-          class="core-editor-toolbar mx-auto px-1 overflow-hidden lg:px-0 py-1 flex-shrink-0 rounded min-w-full"
-          :upload="options?.toolbar?.upload"
-          @blockquote="formatSelection('quote')"
-          @bold="formatSelection('bold')"
-          @bullet-list="formatSelection('list')"
-          @code="formatSelection('code')"
-          @heading="formatSelection('heading')"
-          @image="formatSelection('image')"
-          @italic="formatSelection('italic')"
-          @link="formatSelection('link')"
-          @number-list="formatSelection('ordered_list')"
-          @task-list="formatSelection('task_list')"
-          @upload="handleUpload"
-        />
+      <CoreScrollable class="core-editor-scrollable flex-shrink-0 w-full">
+        <div class="mx-auto p-1 min-w-full">
+          <CoreEditorToolbar
+            class="core-editor-toolbar flex-shrink-0 mx-auto"
+            :upload="options?.toolbar?.upload"
+            @blockquote="formatSelection('quote')"
+            @bold="formatSelection('bold')"
+            @bullet-list="formatSelection('list')"
+            @code="formatSelection('code')"
+            @heading="formatSelection('heading')"
+            @image="formatSelection('image')"
+            @italic="formatSelection('italic')"
+            @link="formatSelection('link')"
+            @number-list="formatSelection('ordered_list')"
+            @task-list="formatSelection('task_list')"
+            @upload="handleUpload"
+          />
+        </div>
       </CoreScrollable>
       <CoreDivider />
     </template>
@@ -162,7 +164,7 @@ export default defineComponent({
   --ink-syntax-hashtag-background-color: rgb(v-bind('nextLayer.bgCssVar'));
   --ink-syntax-processing-instruction-color: rgb(v-bind('nextLayer.textCssVar') / 0.1);
 
-  .core-editor-scrollable {
+  .core-editor-toolbar {
     max-width: var(--core-editor-max-width-in-chars);
   }
 
diff --git a/test/e2e/healthchecks/index.spec.ts b/test/e2e/healthchecks/index.spec.ts
index d5690ba8..bae83932 100644
--- a/test/e2e/healthchecks/index.spec.ts
+++ b/test/e2e/healthchecks/index.spec.ts
@@ -30,17 +30,3 @@ test.describe('auth', () => {
     expect(page.url()).toMatch(/\/docs\/new$/)
   })
 })
-
-test('sets the max-width of the editor to the readability max-width setting', async ({ page }) => {
-  await page.goto('/docs/new')
-
-  await page.waitForLoadState('networkidle')
-
-  const inkContainers = await page.locator('.ink-mde-container').all()
-
-  expect(inkContainers).toHaveLength(2)
-
-  for (const inkContainer of inkContainers) {
-    await expect(inkContainer).toHaveCSS('max-width', '1000px')
-  }
-})

From ac30a90ebe7f977b35bc1465b095944733071125 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Aug 2024 19:23:02 -0400
Subject: [PATCH 07/11] Refresh the meta (aside) menu

---
 components/CoreNavPanel.vue |  38 --------
 layouts/dashboard.vue       |   2 +-
 pages/docs/[docId]/meta.vue | 179 +++++++++++++++++++-----------------
 3 files changed, 98 insertions(+), 121 deletions(-)
 delete mode 100644 components/CoreNavPanel.vue

diff --git a/components/CoreNavPanel.vue b/components/CoreNavPanel.vue
deleted file mode 100644
index d5f97b09..00000000
--- a/components/CoreNavPanel.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { type Component, computed, ref } from 'vue'
-
-const props = defineProps<{
-  as?: string | Component,
-  horizontal?: boolean,
-  label?: string,
-}>()
-
-const component = computed(() => props.as || 'section')
-const showContent = ref(true)
-
-const toggleContent = () => {
-  showContent.value = !showContent.value
-}
-</script>
-
-<template>
-  <component
-    :is="component"
-    class="flex flex-col gap-2 p-1"
-  >
-    <slot name="label">
-      <h6 v-if="label" class="flex items-center justify-between text-sm text-layer-muted cursor-pointer" @click="toggleContent">
-        <span class="flex items-center flex-grow gap-1">
-          <Icon name="Toggle" class="h-4" />
-          <span class="inline-flex flex-grow justify-between items-center">
-            <span>{{ label }}</span>
-            <slot name="label-alt-action" />
-          </span>
-        </span>
-      </h6>
-    </slot>
-    <div v-if="showContent" class="flex gap-1" :class="{ 'flex-col': !horizontal }">
-      <slot />
-    </div>
-  </component>
-</template>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index 85e2af39..8e1d6183 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -116,7 +116,7 @@ onUnmounted(() => {
       </div>
     </CoreLayer>
     <FlexDivider class="hidden lg:block" />
-    <Gutter :show="isSecondaryGutterShowing" :size="256" class="hidden lg:flex">
+    <Gutter :show="isSecondaryGutterShowing" :size="256" class="hidden lg:flex justify-end flex-nowrap">
       <TheRightSidebar class="hidden lg:flex flex-grow flex-shrink-0 w-full" />
     </Gutter>
     <ToastList class="fixed bottom-8 right-8 m-auto" />
diff --git a/pages/docs/[docId]/meta.vue b/pages/docs/[docId]/meta.vue
index 402e6596..075ad8ec 100644
--- a/pages/docs/[docId]/meta.vue
+++ b/pages/docs/[docId]/meta.vue
@@ -141,91 +141,106 @@ export default {
 
 <template>
   <CoreScrollable v-if="doc">
-    <CoreNavPanel class="flex flex-col gap-1">
-      <button class="sidebar-link w-full" @click.stop="duplicateDocument">
-        <Icon name="DocDuplicate" />
-        <span class="ml-2 flex-grow text-left">Duplicate</span>
-      </button>
-      <DiscardableAction v-if="doc.id" :discarded-at="doc.discardedAt" :on-discard="discardDocument" :on-restore="restoreDocument" class="sidebar-link w-full" />
-      <button v-if="hasCodeblocks" class="sidebar-link w-full" @click="openSandbox">
-        <Icon name="BrandCodeSandbox" />
-        <span class="ml-2 flex-grow text-left">Create Sandbox</span>
-      </button>
-      <template v-if="doc.public">
-        <button class="sidebar-link w-full" @click="restrictDocument">
-          <Icon name="LockClosed" />
-          <span class="ml-2 flex-grow text-left">Make Private</span>
+    <div class="flex flex-col flex-grow">
+      <div class="flex flex-col gap-1 p-1">
+        <button class="sidebar-link w-full" @click.stop="duplicateDocument">
+          <Icon name="DocDuplicate" />
+          <span class="ml-2 flex-grow text-left">Duplicate</span>
         </button>
-        <button class="sidebar-link w-full" @click="copyPublicUrl">
-          <Icon name="Clipboard" />
-          <span class="ml-2 flex-grow text-left">Copy Link</span>
+        <DiscardableAction v-if="doc.id" :discarded-at="doc.discardedAt" :on-discard="discardDocument" :on-restore="restoreDocument" class="sidebar-link w-full" />
+        <button v-if="hasCodeblocks" class="sidebar-link w-full" @click="openSandbox">
+          <Icon name="BrandCodeSandbox" />
+          <span class="ml-2 flex-grow text-left">Create Sandbox</span>
         </button>
-        <CoreLayer>
-          <input ref="link" :value="publicUrl" type="text" class="bg-layer rounded p-2 w-full" readonly data-test-public-url>
+        <template v-if="doc.public">
+          <button class="sidebar-link w-full" @click="restrictDocument">
+            <Icon name="LockClosed" />
+            <span class="ml-2 flex-grow text-left">Make Private</span>
+          </button>
+          <button class="sidebar-link w-full" @click="copyPublicUrl">
+            <Icon name="Clipboard" />
+            <span class="ml-2 flex-grow text-left">Copy Link</span>
+          </button>
+          <CoreLayer>
+            <input ref="link" :value="publicUrl" type="text" class="bg-layer rounded p-2 w-full" readonly data-test-public-url>
+          </CoreLayer>
+        </template>
+        <template v-else>
+          <button class="sidebar-link w-full" data-test-share-doc @click="shareDocument">
+            <Icon name="LockOpen" />
+            <span class="ml-2 flex-grow text-left">Make Public</span>
+          </button>
+        </template>
+      </div>
+      <template v-if="references.length || backlinks.length || doc.tags.length || doc.tasks.length">
+        <FlexDivider />
+        <CoreLayer class="flex flex-col gap-1 p-1">
+          <DashPanel
+            v-if="references.length"
+            class="bg-layer"
+            data-test-id="doc-references"
+            label="References"
+          >
+            <DocLink v-for="reference in references" :key="reference.id" :doc="reference" class="sidebar-link" />
+          </DashPanel>
+          <DashPanel
+            v-if="backlinks.length"
+            class="bg-layer"
+            data-test-id="doc-backlinks"
+            label="Backlinks"
+          >
+            <DocLink v-for="reference in backlinks" :key="reference.id" :doc="reference" class="sidebar-link" />
+          </DashPanel>
+          <DashPanel
+            v-if="doc.tags.length"
+            class="bg-layer"
+            collapsed
+            label="Tags"
+          >
+            <TagLink v-for="tag in doc.tags" :key="tag" :tag="tag" class="sidebar-link" />
+          </DashPanel>
+          <DashPanel
+            v-if="doc.tasks.length"
+            class="bg-layer"
+            collapsed
+            label="Tasks"
+          >
+            <div v-for="task in doc.tasks" :key="task" class="flex items-center px-3 py-2 my-1 md:px-2 md:py-1">
+              <Icon name="Check" />
+              <span class="flex-grow overflow-hidden truncate ml-2">{{ task }}</span>
+            </div>
+          </DashPanel>
         </CoreLayer>
       </template>
-      <template v-else>
-        <button class="sidebar-link w-full" data-test-share-doc @click="shareDocument">
-          <Icon name="LockOpen" />
-          <span class="ml-2 flex-grow text-left">Make Public</span>
-        </button>
-      </template>
-    </CoreNavPanel>
-    <CoreDivider v-if="references.length" />
-    <CoreNavPanel
-      v-if="references.length"
-      class="flex flex-col gap-1"
-      data-test-id="doc-references"
-      label="References"
-    >
-      <DocLink v-for="reference in references" :key="reference.id" :doc="reference" class="sidebar-link" />
-    </CoreNavPanel>
-    <CoreDivider v-if="backlinks.length" />
-    <CoreNavPanel
-      v-if="backlinks.length"
-      class="flex flex-col gap-1"
-      data-test-id="doc-backlinks"
-      label="Backlinks"
-    >
-      <DocLink v-for="reference in backlinks" :key="reference.id" :doc="reference" class="sidebar-link" />
-    </CoreNavPanel>
-    <CoreDivider v-if="doc.tags.length" />
-    <CoreNavPanel v-if="doc.tags.length" class="flex flex-col gap-1" label="Tags">
-      <TagLink v-for="tag in doc.tags" :key="tag" :tag="tag" class="sidebar-link" />
-    </CoreNavPanel>
-    <CoreDivider v-if="doc.tasks.length" />
-    <CoreNavPanel v-if="doc.tasks.length" class="flex flex-col gap-1" label="Tasks">
-      <div v-for="task in doc.tasks" :key="task" class="flex items-center px-3 py-2 my-1 md:px-2 md:py-1">
-        <Icon name="Check" />
-        <span class="flex-grow overflow-hidden truncate ml-3">{{ task }}</span>
-      </div>
-    </CoreNavPanel>
-    <CoreDivider />
-    <CoreNavPanel class="flex flex-col flex-grow justify-end gap-1">
-      <div v-if="doc.updatedAt">
-        <small class="text-layer-muted">Last Saved</small>
-        <div class="capitalize pt-2 md:pt-1">
-          {{ savedAt }}
-        </div>
-      </div>
-      <div v-if="doc.createdAt" class="mt-3 md:mt-2">
-        <small class="text-layer-muted">Created</small>
-        <div class="pt-2 md:pt-1">
-          {{ createdAt }}
-        </div>
-      </div>
-      <div v-if="doc.updatedAt" class="mt-3 md:mt-2">
-        <small class="text-layer-muted">Updated</small>
-        <div class="pt-2 md:pt-1">
-          {{ updatedAt }}
-        </div>
-      </div>
-      <div v-if="doc.discardedAt" class="mt-3 md:mt-2">
-        <small class="text-layer-muted">Discarded</small>
-        <div class="pt-2 md:pt-1">
-          {{ discardedAt }}
-        </div>
-      </div>
-    </CoreNavPanel>
+      <FlexDivider />
+      <CoreLayer class="flex flex-col gap-1 p-1">
+        <DashPanel class="bg-layer" label="Timestamps">
+          <div v-if="doc.updatedAt">
+            <small class="text-layer-muted">Last Saved</small>
+            <div class="capitalize pt-2 md:pt-1">
+              {{ savedAt }}
+            </div>
+          </div>
+          <div v-if="doc.createdAt" class="mt-3 md:mt-2">
+            <small class="text-layer-muted">Created</small>
+            <div class="pt-2 md:pt-1">
+              {{ createdAt }}
+            </div>
+          </div>
+          <div v-if="doc.updatedAt" class="mt-3 md:mt-2">
+            <small class="text-layer-muted">Updated</small>
+            <div class="pt-2 md:pt-1">
+              {{ updatedAt }}
+            </div>
+          </div>
+          <div v-if="doc.discardedAt" class="mt-3 md:mt-2">
+            <small class="text-layer-muted">Discarded</small>
+            <div class="pt-2 md:pt-1">
+              {{ discardedAt }}
+            </div>
+          </div>
+        </DashPanel>
+      </CoreLayer>
+    </div>
   </CoreScrollable>
 </template>

From 60388aa124ae4b6e7d1399e9e7513bb9532c5764 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Fri, 2 Aug 2024 17:57:08 -0400
Subject: [PATCH 08/11] Increase the toolbar icon sizes

---
 components/CoreEditorToolbar.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/CoreEditorToolbar.vue b/components/CoreEditorToolbar.vue
index ea909212..80e22772 100644
--- a/components/CoreEditorToolbar.vue
+++ b/components/CoreEditorToolbar.vue
@@ -50,43 +50,43 @@ const triggerUpload = () => {
   <div class="flex gap-1 lg:gap-4">
     <div v-if="heading || bold || italic" class="flex gap-1">
       <CoreButton v-if="heading" class="p-1 border border-layer" title="Heading" @click="$emit('heading')">
-        <Icon name="FormatHeading" />
+        <Icon name="FormatHeading" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="bold" class="p-1 border border-layer" title="Bold" @click="$emit('bold')">
-        <Icon name="FormatBold" />
+        <Icon name="FormatBold" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="italic" class="p-1 border border-layer" title="Italic" @click="$emit('italic')">
-        <Icon name="FormatItalic" />
+        <Icon name="FormatItalic" size="1.5rem" />
       </CoreButton>
     </div>
     <div v-if="blockquote || code" class="flex gap-1">
       <CoreButton v-if="blockquote" class="p-1 border border-layer" title="Blockquote" @click="$emit('blockquote')">
-        <Icon name="FormatBlockquote" />
+        <Icon name="FormatBlockquote" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="code" class="p-1 border border-layer" title="Code" @click="$emit('code')">
-        <Icon name="FormatCode" />
+        <Icon name="FormatCode" size="1.5rem" />
       </CoreButton>
     </div>
     <div v-if="bulletList || numberList || taskList" class="flex gap-1">
       <CoreButton v-if="bulletList" class="p-1 border border-layer" title="Bullet List" @click="$emit('bulletList')">
-        <Icon name="FormatListBulleted" />
+        <Icon name="FormatListBulleted" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="numberList" class="p-1 border border-layer" title="Number List" @click="$emit('numberList')">
-        <Icon name="FormatListNumbered" />
+        <Icon name="FormatListNumbered" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="taskList" class="p-1 border border-layer" title="Task List" @click="$emit('taskList')">
-        <Icon name="FormatListChecked" />
+        <Icon name="FormatListChecked" size="1.5rem" />
       </CoreButton>
     </div>
     <div v-if="link || image || upload" class="flex gap-1">
       <CoreButton v-if="link" class="p-1 border border-layer" title="Link" @click="$emit('link')">
-        <Icon name="FormatLink" />
+        <Icon name="FormatLink" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="image" class="p-1 border border-layer" title="Image" @click="$emit('image')">
-        <Icon name="FormatImage" />
+        <Icon name="FormatImage" size="1.5rem" />
       </CoreButton>
       <CoreButton v-if="upload" class="p-1 border border-layer" title="Upload" @click="triggerUpload">
-        <Icon name="FormatUpload" />
+        <Icon name="FormatUpload" size="1.5rem" />
         <input ref="fileInput" class="hidden" type="file" @change="$emit('upload', $event)">
       </CoreButton>
     </div>

From 89baa5dcbd1198760bec6992864f285bacd83448 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Fri, 2 Aug 2024 17:57:46 -0400
Subject: [PATCH 09/11] wip: Add indent and unindent buttons

---
 components/CoreEditor.vue        |  4 ++++
 components/CoreEditorToolbar.vue | 14 ++++++++++++++
 components/Icon.vue              |  2 ++
 3 files changed, 20 insertions(+)

diff --git a/components/CoreEditor.vue b/components/CoreEditor.vue
index 6be38e8d..7ab259ec 100644
--- a/components/CoreEditor.vue
+++ b/components/CoreEditor.vue
@@ -80,6 +80,10 @@ export default defineComponent({
       instance.value?.format(type, {})
     }
 
+    // const indent = () => {
+
+    // }
+
     const handleUpload = async (event: Event) => {
       const target = event.target as HTMLInputElement
 
diff --git a/components/CoreEditorToolbar.vue b/components/CoreEditorToolbar.vue
index 80e22772..1c2c8335 100644
--- a/components/CoreEditorToolbar.vue
+++ b/components/CoreEditorToolbar.vue
@@ -6,10 +6,12 @@ withDefaults(defineProps<{
   code?: boolean,
   heading?: boolean,
   image?: boolean,
+  indent?: boolean,
   italic?: boolean,
   link?: boolean,
   numberList?: boolean,
   taskList?: boolean,
+  unindent?: boolean,
   upload?: boolean,
 }>(), {
   blockquote: true,
@@ -18,10 +20,12 @@ withDefaults(defineProps<{
   code: true,
   heading: true,
   image: true,
+  indent: true,
   italic: true,
   link: true,
   numberList: true,
   taskList: true,
+  unindent: true,
   upload: false,
 })
 
@@ -32,10 +36,12 @@ defineEmits<{
   code: [],
   heading: [],
   image: [],
+  indent: [],
   italic: [],
   link: [],
   numberList: [],
   taskList: [],
+  unindent: [],
   upload: [event: Event],
 }>()
 
@@ -48,6 +54,14 @@ const triggerUpload = () => {
 
 <template>
   <div class="flex gap-1 lg:gap-4">
+    <div v-if="indent || unindent" class="flex gap-1">
+      <CoreButton v-if="indent" class="p-1 border border-layer" title="Indent" @click="$emit('indent')">
+        <Icon name="FormatIndent" size="1.5rem" />
+      </CoreButton>
+      <CoreButton v-if="unindent" class="p-1 border border-layer" title="Unindent" @click="$emit('unindent')">
+        <Icon name="FormatUnindent" size="1.5rem" />
+      </CoreButton>
+    </div>
     <div v-if="heading || bold || italic" class="flex gap-1">
       <CoreButton v-if="heading" class="p-1 border border-layer" title="Heading" @click="$emit('heading')">
         <Icon name="FormatHeading" size="1.5rem" />
diff --git a/components/Icon.vue b/components/Icon.vue
index 0d2c5792..a3afecfd 100644
--- a/components/Icon.vue
+++ b/components/Icon.vue
@@ -53,11 +53,13 @@ const icons = {
   FormatCode: Tabler.IconCode,
   FormatHeading: Tabler.IconHeading,
   FormatImage: Tabler.IconPhoto,
+  FormatIndent: Tabler.IconIndentIncrease,
   FormatItalic: Tabler.IconItalic,
   FormatLink: Tabler.IconLink,
   FormatListBulleted: Tabler.IconList,
   FormatListChecked: Tabler.IconListCheck,
   FormatListNumbered: Tabler.IconListNumbers,
+  FormatUnindent: Tabler.IconIndentDecrease,
   FormatUpload: Tabler.IconUpload,
   Graph: Tabler.IconAffiliate,
   ImagePlus: Tabler.IconPhotoPlus,

From 8a18355b6ea37b0a3d59b8407e7bb5c5608190fb Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Sat, 3 Aug 2024 22:01:47 -0400
Subject: [PATCH 10/11] Enable Tailwind intellisense on `TransitionRoot`
 attributes

---
 .vscode/settings.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e56d94bf..dbe97a53 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,17 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "class:list",
+    "className",
+    "enter",
+    "enter-from",
+    "enter-to",
+    "leave",
+    "leave-from",
+    "leave-to",
+    "ngClass"
+  ],
   "typescript.tsdk": "./node_modules/typescript/lib"
 }

From bd5f1e504327b9521c56356401845d431302bedc Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Sat, 3 Aug 2024 22:07:13 -0400
Subject: [PATCH 11/11] Improve first 2 light-theme layer colors

---
 assets/css/tailwind.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 5dd3f110..8abbd1ab 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -99,7 +99,7 @@
 
     --layer-1-bg: 255 255 255;
     --layer-1-bg-hover: 244 244 245;
-    --layer-1-bg-active: 255 255 255;
+    --layer-1-bg-active: 244 244 245;
     --layer-1-bg-disabled: 253 253 253;
     --layer-1-border: var(--layer-0-bg-hover);
     --layer-1-text: 24 24 27;
@@ -108,10 +108,10 @@
     --layer-1-text-disabled: 113 113 122;
     --layer-1-text-muted: 113 113 122;
 
-    --layer-2-bg: 228 228 231;
-    --layer-2-bg-hover: 212 212 216;
+    --layer-2-bg: 244 244 245;
+    --layer-2-bg-hover: 228 228 231;
     --layer-2-bg-active: 228 228 231;
-    --layer-2-bg-disabled: 226 226 229;
+    --layer-2-bg-disabled: 242 242 243;
     --layer-2-border: var(--layer-2-bg-hover);
     --layer-2-text: 24 24 27;
     --layer-2-text-hover: 24 24 27;
@@ -119,10 +119,10 @@
     --layer-2-text-disabled: 113 113 122;
     --layer-2-text-muted: 113 113 122;
 
-    --layer-3-bg: 212 212 216;
-    --layer-3-bg-hover: 161 161 170;
+    --layer-3-bg: 228 228 231;
+    --layer-3-bg-hover: 212 212 216;
     --layer-3-bg-active: 212 212 216;
-    --layer-3-bg-disabled: 210 210 214;
+    --layer-3-bg-disabled: 226 226 229;
     --layer-3-border: var(--layer-3-bg-hover);
     --layer-3-text: 24 24 27;
     --layer-3-text-hover: 24 24 27;
@@ -130,10 +130,10 @@
     --layer-3-text-disabled: 113 113 122;
     --layer-3-text-muted: 113 113 122;
 
-    --layer-4-bg: 161 161 170;
-    --layer-4-bg-hover: 113 113 122;
+    --layer-4-bg: 212 212 216;
+    --layer-4-bg-hover: 161 161 170;
     --layer-4-bg-active: 161 161 170;
-    --layer-4-bg-disabled: 159 159 168;
+    --layer-4-bg-disabled: 210 210 214;
     --layer-4-border: var(--layer-4-bg-hover);
     --layer-4-text: 24 24 27;
     --layer-4-text-hover: 24 24 27;
@@ -141,10 +141,10 @@
     --layer-4-text-disabled: 113 113 122;
     --layer-4-text-muted: 113 113 122;
 
-    --layer-5-bg: 113 113 122;
-    --layer-5-bg-hover: 82 82 91;
-    --layer-5-bg-active: 113 113 122;
-    --layer-5-bg-disabled: 111 111 120;
+    --layer-5-bg: 161 161 170;
+    --layer-5-bg-hover: 113 113 122;
+    --layer-5-bg-active: 161 161 170;
+    --layer-5-bg-disabled: 159 159 168;
     --layer-5-border: var(--layer-5-bg-hover);
     --layer-5-text: 24 24 27;
     --layer-5-text-hover: 24 24 27;