@nyuccl/smile 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/runtime/components/builtins/WithdrawView.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { AlertTriangle, HandMetal } from "lucide-vue-next";
 import { computed } from "vue";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 api.saveData(true);
 const cardContent = {
@@ -66,7 +68,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-bye class="text-withdraw-text inline-block text-5xl mb-2" />
+            <HandMetal class="text-withdraw-text inline-block text-5xl mb-2" />
             <br>{{ content.title }}
           </p>
         </CardHeader>
@@ -82,7 +84,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-attention class="text-warning-text inline-block text-5xl mb-2" />
+            <AlertTriangle class="text-warning-text inline-block text-5xl mb-2" />
             <br>Access Error
           </p>
         </CardHeader>

package/dist/runtime/components/dev/RecruitmentChooserView.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowRight, Dices } from "lucide-vue-next";
 import { computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const devUrls = computed(() => {
   const urls = {};
@@ -45,8 +47,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-blue"
           >
-            <a :href="devUrls['prolific']"><i-lucide-dices /> Prolific User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['prolific']"><Dices /> Prolific User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -69,8 +71,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-pink"
           >
-            <a :href="devUrls['cloudresearch']"><i-lucide-dices /> CR User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['cloudresearch']"><Dices /> CR User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -96,7 +98,7 @@ const devUrls = computed(() => {
             <a
               href="/dev/mturk?assignmentId=ASSIGNMENT_ID_NOT_AVAILABLE&hitId=123RVWYBAZW00EXAMPLE&turkSubmitTo=https://www.mturk.com/&workerId=AZ3456EXAMPLE"
             >AMT Preview Mode
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
           <Button
@@ -106,8 +108,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-yellow"
           >
-            <a :href="devUrls['mturk']"><i-lucide-dices /> AMT User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['mturk']"><Dices /> AMT User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -129,8 +131,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-green"
           >
-            <a :href="devUrls['citizensci']"><i-lucide-dices /> Citizen Sci User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['citizensci']"><Dices /> Citizen Sci User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -152,8 +154,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-orange"
           >
-            <a :href="devUrls['sona']"><i-lucide-dices /> SONA User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['sona']"><Dices /> SONA User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -175,8 +177,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-teal"
           >
-            <a :href="devUrls['sona_paid']"><i-lucide-dices /> SONA Paid User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['sona_paid']"><Dices /> SONA Paid User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -198,8 +200,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-red"
           >
-            <a :href="devUrls['spark']"><i-lucide-dices /> SPARK User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['spark']"><Dices /> SPARK User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -222,8 +224,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-coral"
           >
-            <a :href="devUrls['panda']"><i-lucide-dices /> PANDA User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['panda']"><Dices /> PANDA User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>
@@ -243,8 +245,8 @@ const devUrls = computed(() => {
             size="xs"
             class="is-purple"
           >
-            <a :href="devUrls['web']"><i-lucide-dices /> Anon Web User
-              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            <a :href="devUrls['web']"><Dices /> Anon Web User
+              <ArrowRight class="inline-block ml-1 w-4 h-4" />
             </a>
           </Button>
         </CardContent>

package/dist/runtime/components/dev/ResponsiveDeviceContainer.vue

@@ -1,8 +1,10 @@
 <script setup>
+import { Maximize, Moon, RotateCcw, Sun, SunMoon } from "lucide-vue-next";
 import { ref, computed } from "vue";
 import ResponsiveDeviceSelect from "./menu/ResponsiveDeviceSelect.vue";
 import { useElementSize } from "@vueuse/core";
 import { devicePresets } from "./devicePresets.js";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const fullScreenDiv = ref(null);
 const { width: _fullScreenWidth, height: _fullScreenHeight } = useElementSize(fullScreenDiv);
@@ -123,7 +125,7 @@ const colorMode = computed(() => {
                   size="xs"
                   @click="toggleRotation"
                 >
-                  <i-carbon-rotate-counterclockwise-filled :class="{ 'text-blue-400': api.store.dev.isRotated }" />
+                  <RotateCcw :class="{ 'text-blue-400': api.store.dev.isRotated }" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">
@@ -146,9 +148,9 @@ const colorMode = computed(() => {
                   size="xs"
                   @click="toggleColorMode"
                 >
-                  <i-lucide-moon v-if="experimentColorModeRaw === 'light'" />
-                  <i-lucide-sun-moon v-else-if="experimentColorModeRaw === 'dark'" />
-                  <i-lucide-sun v-else />
+                  <Moon v-if="experimentColorModeRaw === 'light'" />
+                  <SunMoon v-else-if="experimentColorModeRaw === 'dark'" />
+                  <Sun v-else />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">
@@ -173,7 +175,7 @@ const colorMode = computed(() => {
                   size="xs"
                   @click="toggleFullscreen"
                 >
-                  <i-ic-outline-fullscreen />
+                  <Maximize />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">

package/dist/runtime/components/dev/console/ConfigList.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ChevronRight, House } from "lucide-vue-next";
 import { computed } from "vue";
+import useAPI from "../../../composables/useAPI";
 const props = defineProps(["data", "selected"]);
 const api = useAPI();
 const emit = defineEmits(["selected"]);
@@ -44,7 +46,7 @@ function option_selected(option) {
       class="bg-muted text-dev-text px-3 py-2 text-xs font-medium border-b border-dev-lines"
     >
       <template v-if="header == '/'">
-        <i-fa6-solid-house class="mr-1" />
+        <House class="mr-1" />
       </template>
       <template v-else>
         <span class="font-mono">{{ header }}</span>
@@ -92,7 +94,7 @@ function option_selected(option) {
           >
             <div class="flex items-center justify-between">
               <span class="font-semibold text-foreground item-key">{{ truncateText(key) }}</span>
-              <i-fa6-solid-angle-right class="text-gray-400 text-xs" />
+              <ChevronRight class="text-gray-400 text-xs" />
             </div>
           </button>
         </li>

package/dist/runtime/components/dev/console/ConsoleConfigPanel.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { House } from "lucide-vue-next";
 import { reactive, computed, onMounted } from "vue";
 import ConfigList from "./ConfigList.vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const browse_panels = reactive({ path: ["/", null, null] });
 onMounted(() => {
@@ -79,7 +81,7 @@ function _resetDevState() {
                 @click="panel_jump(index)"
               >
                 <template v-if="option == '/'">
-                  <i-fa6-solid-house />
+                  <House />
                 </template>
                 <template v-else>
                   {{ option }}

package/dist/runtime/components/dev/console/ConsoleDatabaseBrowsePanel.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { House } from "lucide-vue-next";
 import { reactive, computed, onMounted } from "vue";
 import DatabaseList from "./DatabaseList.vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const browse_panels = reactive({ path: ["/", null, null] });
 onMounted(() => {
@@ -78,7 +80,7 @@ function panel_jump(index) {
                 @click="panel_jump(index)"
               >
                 <template v-if="option == '/'">
-                  <i-fa6-solid-house />
+                  <House />
                 </template>
                 <template v-else>
                   {{ option }}

package/dist/runtime/components/dev/console/ConsoleLogPanel.vue

@@ -1,5 +1,8 @@
 <script setup>
+import { ChevronRight, Clock, Database, GitBranch, Settings, Timer } from "lucide-vue-next";
 import { computed } from "vue";
+import useLog from "../../../stores/log";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const log = useLog();
 const height_pct = computed(() => `${api.store.dev.consoleBarHeight - 55}px`);
@@ -151,17 +154,17 @@ function getBgClass(msg) {
               <div class="flex items-start gap-1 min-w-0">
                 <!-- Icon indicator based on message content -->
                 <div class="flex-shrink-0 mt-0.5">
-                  <i-fa6-solid-code-branch v-if="msg.message.includes('ROUTER GUARD')" />
-                  <i-fa6-solid-database v-else-if="msg.message.includes('SMILESTORE')" />
-                  <i-fa6-solid-gear v-else-if="msg.message.includes('DEV MODE')" />
-                  <i-fa6-solid-clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
-                  <i-fa6-regular-clock v-else-if="msg.message.includes('TRIAL STEPPER')" />
+                  <GitBranch v-if="msg.message.includes('ROUTER GUARD')" />
+                  <Database v-else-if="msg.message.includes('SMILESTORE')" />
+                  <Settings v-else-if="msg.message.includes('DEV MODE')" />
+                  <Clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
+                  <Timer v-else-if="msg.message.includes('TRIAL STEPPER')" />
                   <img
                     v-else-if="msg.message.includes('FIRESTORE')"
-                    src="/src/assets/dev/firebase-bw.svg"
+                    :src="'/firebase-bw.svg'"
                     width="15"
                   >
-                  <i-fa6-solid-angle-right v-else />
+                  <ChevronRight v-else />
                 </div>
                 <!-- Message content -->
                 <div class="min-w-0 flex-1">
@@ -192,17 +195,17 @@ function getBgClass(msg) {
               <div class="flex items-start gap-1 min-w-0">
                 <!-- Icon indicator based on message content -->
                 <div class="flex-shrink-0 mt-0.5">
-                  <i-fa6-solid-code-branch v-if="msg.message.includes('ROUTER GUARD')" />
-                  <i-fa6-solid-database v-else-if="msg.message.includes('SMILESTORE')" />
-                  <i-fa6-solid-gear v-else-if="msg.message.includes('DEV MODE')" />
-                  <i-fa6-solid-clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
-                  <i-fa6-regular-clock v-else-if="msg.message.includes('TRIAL STEPPER')" />
+                  <GitBranch v-if="msg.message.includes('ROUTER GUARD')" />
+                  <Database v-else-if="msg.message.includes('SMILESTORE')" />
+                  <Settings v-else-if="msg.message.includes('DEV MODE')" />
+                  <Clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
+                  <Timer v-else-if="msg.message.includes('TRIAL STEPPER')" />
                   <img
                     v-else-if="msg.message.includes('FIRESTORE')"
-                    src="/src/assets/dev/firebase-bw.svg"
+                    :src="'/firebase-bw.svg'"
                     width="15"
                   >
-                  <i-fa6-solid-angle-right v-else />
+                  <ChevronRight v-else />
                 </div>
                 <!-- Message content -->
                 <div class="min-w-0 flex-1">

package/dist/runtime/components/dev/console/DatabaseList.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ChevronRight, House } from "lucide-vue-next";
 import { computed } from "vue";
+import useAPI from "../../../composables/useAPI";
 const props = defineProps(["data", "selected"]);
 const api = useAPI();
 const emit = defineEmits(["selected"]);
@@ -48,7 +50,7 @@ function option_selected(option) {
       class="bg-muted text-dev-text px-3 py-2 text-xs font-medium border-b border-dev-lines"
     >
       <template v-if="header == '/'">
-        <i-fa6-solid-house class="mr-1" />
+        <House class="mr-1" />
       </template>
       <template v-else>
         <span class="font-mono">{{ header }}</span>
@@ -96,7 +98,7 @@ function option_selected(option) {
           >
             <div class="flex items-center justify-between">
               <span class="font-semibold text-foreground item-key">{{ truncateText(key) }}</span>
-              <i-fa6-solid-angle-right class="text-gray-400 text-xs" />
+              <ChevronRight class="text-gray-400 text-xs" />
             </div>
           </button>
         </li>

package/dist/runtime/components/dev/console/SmileDevConsole.vue

@@ -1,7 +1,9 @@
 <script setup>
+import { ChevronDown, Database, Settings, Terminal } from "lucide-vue-next";
 import ConsoleDatabaseBrowsePanel from "./ConsoleDatabaseBrowsePanel.vue";
 import ConsoleLogPanel from "./ConsoleLogPanel.vue";
 import ConsoleConfigPanel from "./ConsoleConfigPanel.vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
@@ -28,7 +30,7 @@ const api = useAPI();
                 }"
                 @click="api.store.dev.consoleBarTab = 'browse'"
               >
-                <i-tdesign-data-base-filled />
+                <Database />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -51,7 +53,7 @@ const api = useAPI();
                 }"
                 @click="api.store.dev.consoleBarTab = 'log'"
               >
-                <i-mdi-console-line class="w-4 h-4" />
+                <Terminal class="w-4 h-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -74,7 +76,7 @@ const api = useAPI();
                 }"
                 @click="api.store.dev.consoleBarTab = 'config'"
               >
-                <i-fa6-solid-gear class="w-4 h-4" />
+                <Settings class="w-4 h-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -94,7 +96,7 @@ const api = useAPI();
               class="w-8 h-8 hover:!bg-sidebar-border"
               @click="api.store.dev.showConsoleBar = false"
             >
-              <i-uil-down-arrow class="w-4 h-4" />
+              <ChevronDown class="w-4 h-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">

package/dist/runtime/components/dev/menu/DevConfigPanel.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { RotateCcw } from "lucide-vue-next";
 import ResponsiveDeviceSelect from "./ResponsiveDeviceSelect.vue";
 import { devicePresets } from "../devicePresets.js";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const checkForMatchingPreset = () => {
   for (const [key, preset] of Object.entries(devicePresets)) {
@@ -152,7 +154,7 @@ function resetDevState() {
                   size="xs"
                   @click="toggleRotation"
                 >
-                  <i-carbon-rotate-counterclockwise-filled :class="{ 'text-blue-400': api.store.dev.isRotated }" />
+                  <RotateCcw :class="{ 'text-blue-400': api.store.dev.isRotated }" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">

package/dist/runtime/components/dev/menu/ResponsiveDeviceSelect.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { devicePresets } from "../devicePresets.js";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const handleDeviceChange = (value) => {
   console.log("handleDeviceChange called with:", value);

package/dist/runtime/components/dev/menu/SmileDevAppMenu.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { BookMarked, BugPlay, Info, Moon, Settings, Smile, Sun } from "lucide-vue-next";
 import { computed } from "vue";
 import DevConfigPanel from "./DevConfigPanel.vue";
+import useAPI from "../../../composables/useAPI";
 const props = defineProps({
   side: { type: String, required: false },
   variant: { type: String, required: false },
@@ -38,7 +40,7 @@ const isDarkMode = computed({
           >
             <a href="#">
               <div class="mainbutton text-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                <i-lucide-smile />
+                <Smile />
               </div>
             </a>
           </SidebarMenuButton>
@@ -62,7 +64,7 @@ const isDarkMode = computed({
                 tooltip="Developer Mode"
                 @click="api.store.dev.mainView = 'devmode'"
               >
-                <i-lucide-bug-play class="!size-5" />
+                <BugPlay class="!size-5" />
               </SidebarMenuButton>
             </SidebarMenuItem>
 
@@ -106,7 +108,7 @@ const isDarkMode = computed({
                 tooltip="Documentation"
                 @click="api.store.dev.mainView = 'docs'"
               >
-                <i-lucide-book-marked class="!size-5" />
+                <BookMarked class="!size-5" />
               </SidebarMenuButton>
             </SidebarMenuItem>
 
@@ -121,7 +123,7 @@ const isDarkMode = computed({
                   href="/info"
                   target="_blank"
                 >
-                  <i-lucide-info class="!size-5" />
+                  <Info class="!size-5" />
                 </a>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -141,11 +143,11 @@ const isDarkMode = computed({
               tooltip="Toggle Dark Mode"
               @click="isDarkMode = !isDarkMode"
             >
-              <i-lucide-moon
+              <Moon
                 v-if="isDarkMode"
                 class="!size-5"
               />
-              <i-lucide-sun
+              <Sun
                 v-else
                 class="!size-5"
               />
@@ -165,7 +167,7 @@ const isDarkMode = computed({
             as-child
             tooltip="Configuration"
           >
-            <i-lucide-settings class="!size-5" />
+            <Settings class="!size-5" />
           </SidebarMenuButton>
         </PopoverTrigger>
         <PopoverContent

package/dist/runtime/components/dev/navbar/ColorModeButton.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Moon, Sun, SunMoon } from "lucide-vue-next";
 const { mode: experimentColorMode, toggle: toggleColorMode, system } = useSmileColorMode("experiment");
 </script>
 
@@ -12,9 +13,9 @@ const { mode: experimentColorMode, toggle: toggleColorMode, system } = useSmileC
           variant="outline"
           @click="toggleColorMode()"
         >
-          <i-lucide-moon v-if="experimentColorMode === 'light'" />
-          <i-lucide-sun-moon v-else-if="experimentColorMode === 'dark'" />
-          <i-lucide-sun v-else />
+          <Moon v-if="experimentColorMode === 'light'" />
+          <SunMoon v-else-if="experimentColorMode === 'dark'" />
+          <Sun v-else />
         </Button>
       </TooltipTrigger>
       <TooltipContent side="bottom">

package/dist/runtime/components/dev/navbar/DatabaseButtonGroup.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { Database, RefreshCw } from "lucide-vue-next";
 import { computed } from "vue";
 import CircleProgress from "./CircleProgress.vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const database_tooltip = computed(() => {
   let msg = "";
@@ -32,7 +34,7 @@ const database_tooltip = computed(() => {
           variant="outline"
         >
           <!-- Database icon with status styling -->
-          <i-lucide-database
+          <Database
             style="font-size: 2em"
             class="disconnected"
             :class="{ connected: api.store.browserEphemeral.dataLoaded }"
@@ -40,13 +42,13 @@ const database_tooltip = computed(() => {
 
           <!-- Sync icon with status styling -->
           <template v-if="!api.store.browserEphemeral.dataLoaded">
-            <i-lucide-refresh-cw class="has-text-grey" />
+            <RefreshCw class="has-text-grey" />
           </template>
           <template v-else-if="api.store.browserEphemeral.unsavedChanges && api.store.browserEphemeral.dataLoaded">
-            <i-lucide-refresh-cw class="outofsync" />
+            <RefreshCw class="outofsync" />
           </template>
           <template v-else>
-            <i-lucide-refresh-cw class="insync" />
+            <RefreshCw class="insync" />
           </template>
 
           <!-- Progress circle for data usage -->

package/dist/runtime/components/dev/navbar/FullScreenButton.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { Maximize, Minimize } from "lucide-vue-next";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
@@ -12,11 +14,11 @@ const api = useAPI();
           variant="outline"
           @click="api.store.dev.isFullscreen = !api.store.dev.isFullscreen"
         >
-          <i-ic-outline-fullscreen
+          <Maximize
             v-if="!api.store.dev.isFullscreen"
             :stroke-width="2.5"
           />
-          <i-ic-outline-fullscreen-exit
+          <Minimize
             v-else
             :stroke-width="2.5"
           />

package/dist/runtime/components/dev/navbar/ReloadButton.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { RotateCcw } from "lucide-vue-next";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
@@ -12,7 +14,7 @@ const api = useAPI();
           variant="outline"
           @click="api.reloadBrowser()"
         >
-          <i-lucide-rotate-ccw :stroke-width="2.5" />
+          <RotateCcw :stroke-width="2.5" />
         </Button>
       </TooltipTrigger>
       <TooltipContent side="bottom">

package/dist/runtime/components/dev/navbar/ResetButton.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { Zap } from "lucide-vue-next";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
@@ -12,7 +14,7 @@ const api = useAPI();
           variant="outline"
           @click="api.resetLocalState()"
         >
-          <i-f7-bolt-fill />
+          <Zap />
         </Button>
       </TooltipTrigger>
       <TooltipContent side="bottom">

package/dist/runtime/components/dev/navbar/RouteJumper.vue

@@ -1,5 +1,8 @@
 <script setup>
+import { ArrowDown, Diamond, House, Presentation } from "lucide-vue-next";
 import { watch, ref, computed } from "vue";
+import useLog from "../../../stores/log";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const _props = defineProps(["routeName"]);
 const log = useLog();
@@ -44,7 +47,7 @@ function goHome() {
     >
       <span class="text-[0.65rem] font-mono">
         <div class="routename font-medium">
-          <i-lucide-house class="inline mr-1" />
+          <House class="inline mr-1" />
           {{ isPresentation ? '/home' : '/recruit' }}
         </div>
       </span>
@@ -70,15 +73,15 @@ function goHome() {
               style="margin-left: 5px"
             >&nbsp;</span>
           </template>
-          <i-lucide-arrow-down
+          <ArrowDown
             v-if="r.meta.sequential"
             class="inline mr-1"
           />
-          <i-lucide-presentation
+          <Presentation
             v-else-if="r.name === 'presentation_home'"
             class="inline mr-1"
           />
-          <i-lucide-diamond
+          <Diamond
             v-else
             class="inline mr-1"
           />

package/dist/runtime/components/dev/navbar/SmileDevNavBar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { BugPlay } from "lucide-vue-next";
 import StepInfoButtonGroup from "./StepInfoButtonGroup.vue";
 import ViewInfoButtonGroup from "./ViewInfoButtonGroup.vue";
 import ResetButton from "./ResetButton.vue";
@@ -11,6 +12,7 @@ import KeyCommandNotification from "./KeyCommandNotification.vue";
 import LogoutButton from "../presentation/LogoutButton.vue";
 import { ref } from "vue";
 import { onKeyDown } from "@vueuse/core";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const showNotification = ref(false);
 const notificationCommand = ref("");
@@ -156,14 +158,14 @@ onKeyDown((e) => {
         <!-- Desktop version -->
         <div class="hidden sm:block">
           <div class="flex items-center text-xs font-normal">
-            <i-lucide-bug-play class="size-4 mr-1" />
+            <BugPlay class="size-4 mr-1" />
             <b>DEVELOPER MODE</b> &nbsp;({{ api.config.smileVersion }})
           </div>
         </div>
         <!-- Mobile version -->
         <div class="block sm:hidden">
           <div class="flex items-center text-xs font-normal">
-            <i-lucide-bug-play class="size-4 mr-1" />
+            <BugPlay class="size-4 mr-1" />
             <b>DEV</b> &nbsp;({{ api.config.smileVersion }})
           </div>
         </div>