@nyuccl/smile 0.2.0-beta.4 → 0.2.0-beta.41

package/dist/runtime/components/dev/devicePresets.js

@@ -18,10 +18,10 @@
  * @property {object} 'ipad-13' iPad 13-inch dimensions
  * @property {object} desktop1 800x600 desktop resolution
  * @property {object} desktop2 1024x768 desktop resolution
- * @property {Object} desktop3 1280x1024 desktop resolution
- * @property {Object} desktop4 1440x900 desktop resolution
- * @property {Object} desktop5 1600x1200 desktop resolution
- * @property {Object} desktop16 1920x1080 desktop resolution
+ * @property {object} desktop3 1280x1024 desktop resolution
+ * @property {object} desktop4 1440x900 desktop resolution
+ * @property {object} desktop5 1600x1200 desktop resolution
+ * @property {object} desktop16 1920x1080 desktop resolution
  */
 export const devicePresets = {
   'iphone': { width: 393, height: 852, name: 'iPhone' },

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-link-button-foreground': 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,9 @@
 <script setup>
+import { BookMarked, BugPlay, Moon, Presentation, Settings, Smile, Sun } from "lucide-vue-next";
+import { useSmileColorMode } from "../../../composables/useColorMode";
 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 },
@@ -24,7 +27,7 @@ const isDarkMode = computed({
 <template>
   <!-- Main sidebar container with icon-only layout -->
   <Sidebar
-    class="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
+    class="w-[calc(var(--sidebar-width-icon)+1px)]! border-r border-dev-lines"
     v-bind="props"
   >
     <!-- Sidebar header with main logo button -->
@@ -36,9 +39,9 @@ const isDarkMode = computed({
             as-child
             class="md:h-8 md:p-0"
           >
-            <a href="#">
+            <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 +65,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>
 
@@ -95,36 +98,36 @@ const isDarkMode = computed({
             </SidebarMenuItem>
             -->
 
-            <!-- Docs -->
+            <!-- Presentation Mode -->
             <SidebarMenuItem>
               <SidebarMenuButton
                 class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
                 :class="{
-                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'docs',
-                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'docs',
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'presentation',
+                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'presentation',
                 }"
-                tooltip="Documentation"
-                @click="api.store.dev.mainView = 'docs'"
+                tooltip="Presentation Mode"
+                @click="api.store.dev.mainView = api.store.dev.mainView === 'presentation' ? 'devmode' : 'presentation'"
               >
-                <i-lucide-book-marked class="!size-5" />
+                <Presentation class="!size-5" />
               </SidebarMenuButton>
             </SidebarMenuItem>
 
-            <!-- Info / Recruitment Setup -->
+            <!-- Docs (coming soon)
             <SidebarMenuItem>
               <SidebarMenuButton
-                as-child
-                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1 hover:!bg-sidebar-border"
-                tooltip="Experiment Info & Recruitment"
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'docs',
+                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'docs',
+                }"
+                tooltip="Documentation"
+                @click="api.store.dev.mainView = 'docs'"
               >
-                <a
-                  href="/info"
-                  target="_blank"
-                >
-                  <i-lucide-info class="!size-5" />
-                </a>
+                <BookMarked class="!size-5" />
               </SidebarMenuButton>
             </SidebarMenuItem>
+            -->
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
@@ -141,11 +144,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 +168,7 @@ const isDarkMode = computed({
             as-child
             tooltip="Configuration"
           >
-            <i-lucide-settings class="!size-5" />
+            <Settings class="!size-5" />
           </SidebarMenuButton>
         </PopoverTrigger>
         <PopoverContent
@@ -180,5 +183,5 @@ const isDarkMode = computed({
 </template>
 
 <style scoped>
-.mainbutton{background-color:#afdaec}.dark .mainbutton{background-color:#c0f0a3;color:#000}
+.mainbutton{background-color:var(--dev-brand-bg);color:var(--dev-brand-text)}
 </style>

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

@@ -1,4 +1,6 @@
 <script setup>
+import { Moon, Sun, SunMoon } from "lucide-vue-next";
+import { useSmileColorMode } from "../../../composables/useColorMode";
 const { mode: experimentColorMode, toggle: toggleColorMode, system } = useSmileColorMode("experiment");
 </script>
 
@@ -12,9 +14,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 -->
@@ -56,8 +58,8 @@ const database_tooltip = computed(() => {
                 :percentage="Math.round(api.store.localState.approxDataSize / 1048576) * 100"
                 :size="12"
                 :stroke-width="40"
-                slicecolor="#aaa"
-                basecolor="#aaa"
+                slicecolor="var(--muted-foreground)"
+                basecolor="var(--muted-foreground)"
               />
             </div>
           </template>

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/KeyCommandNotification.vue

@@ -54,5 +54,5 @@ const _props = defineProps({
 </template>
 
 <style scoped>
-.notification{background:var(--background);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);left:60px;max-width:300px;overflow:hidden;position:fixed;top:50px;z-index:9999}.error-notification{background:#fef2f2;border:1px solid #fecaca}.notification-content{background:linear-gradient(135deg,var(--background) 0,var(--muted) 100%);padding:12px 16px}.error-content{background:linear-gradient(135deg,#fef2f2,#fee2e2)}.command-badge{align-items:center;display:flex;margin-bottom:8px}.command-key{background:var(--primary);border:1px solid var(--primary);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--primary-foreground);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.875rem;font-weight:600;letter-spacing:.025em;padding:4px 8px}.error-key{background:#ef4444;border:1px solid #ef4444;color:#fef2f2}.action-text{color:var(--foreground);font-size:.875rem;font-weight:500;line-height:1.4}.error-text{color:#ef4444}.notification-arrow{background:var(--background);border-left:1px solid var(--border);border-top:1px solid var(--border);height:12px;left:20px;position:absolute;top:-6px;transform:rotate(45deg);width:12px}.error-arrow{background:#fef2f2;border-left:1px solid #fecaca;border-top:1px solid #fecaca}.slide-up-enter-active,.slide-up-leave-active{transition:all .3s cubic-bezier(.4,0,.2,1)}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateX(-100%) translateY(-10px)}@media (prefers-color-scheme:dark){.notification{box-shadow:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -1px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1)}}
+.notification{background:var(--background);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);left:60px;max-width:300px;overflow:hidden;position:fixed;top:50px;z-index:9999}.error-notification{background:var(--error-notif-bg);border:1px solid var(--error-notif-border)}.notification-content{background:linear-gradient(135deg,var(--background) 0,var(--muted) 100%);padding:12px 16px}.error-content{background:linear-gradient(135deg,var(--error-notif-bg) 0,var(--error-notif-bg-end) 100%)}.command-badge{align-items:center;display:flex;margin-bottom:8px}.command-key{background:var(--primary);border:1px solid var(--primary);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--primary-foreground);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.875rem;font-weight:600;letter-spacing:.025em;padding:4px 8px}.error-key{background:var(--error-notif-text);border:1px solid var(--error-notif-text);color:var(--error-notif-bg)}.action-text{color:var(--foreground);font-size:.875rem;font-weight:500;line-height:1.4}.error-text{color:var(--error-notif-text)}.notification-arrow{background:var(--background);border-left:1px solid var(--border);border-top:1px solid var(--border);height:12px;left:20px;position:absolute;top:-6px;transform:rotate(45deg);width:12px}.error-arrow{background:var(--error-notif-bg);border-left:1px solid var(--error-notif-border);border-top:1px solid var(--error-notif-border)}.slide-up-enter-active,.slide-up-leave-active{transition:all .3s cubic-bezier(.4,0,.2,1)}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateX(-100%) translateY(-10px)}@media (prefers-color-scheme:dark){.notification{box-shadow:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -1px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1)}}
 </style>

package/dist/runtime/components/dev/navbar/PanelButtonGroup.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,79 @@
+<script setup>
+import useAPI from "../../../composables/useAPI";
+const api = useAPI();
+</script>
+
+<template>
+  <TooltipProvider>
+    <ButtonGroup
+      variant="outline"
+      size="menu"
+    >
+      <!-- Console toggle -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem @click="api.store.dev.showConsoleBar = !api.store.dev.showConsoleBar">
+            <!-- Console icon (rectangle with bottom panel line) -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              :opacity="api.store.dev.showConsoleBar ? 1 : 0.4"
+            >
+              <rect
+                width="18"
+                height="18"
+                x="3"
+                y="3"
+                rx="2"
+              />
+              <path d="M3 15h18" />
+            </svg>
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {{ api.store.dev.showConsoleBar ? 'Hide Console' : 'Show Console' }} (Ctrl + `)
+        </TooltipContent>
+      </Tooltip>
+
+      <!-- Sidebar toggle -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem @click="api.store.dev.showSideBar = !api.store.dev.showSideBar">
+            <!-- Sidebar icon -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              :opacity="api.store.dev.showSideBar ? 1 : 0.4"
+            >
+              <rect
+                width="18"
+                height="18"
+                x="3"
+                y="3"
+                rx="2"
+              />
+              <path d="M15 3v18" />
+            </svg>
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {{ api.store.dev.showSideBar ? 'Hide Sidebar' : 'Show Sidebar' }} (Ctrl + 1)
+        </TooltipContent>
+      </Tooltip>
+    </ButtonGroup>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/navbar/PanelButtonGroup.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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,9 @@
 <script setup>
+import { ArrowDown, Diamond, House, Presentation } from "lucide-vue-next";
 import { watch, ref, computed } from "vue";
+import { useRoute, navigateTo } from "#imports";
+import useLog from "../../../stores/log";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const _props = defineProps(["routeName"]);
 const log = useLog();
@@ -39,12 +43,12 @@ function goHome() {
   <!-- Dropdown menu listing all routes for navigation -->
   <DropdownMenuContent align="end">
     <DropdownMenuItem
-      class="cursor-pointer border-b border-border mb-1"
+      class="cursor-pointer border-b border-dev-lines mb-1"
       @click="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 +74,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";
@@ -6,11 +7,12 @@ import ReloadButton from "./ReloadButton.vue";
 import ColorModeButton from "./ColorModeButton.vue";
 import DatabaseButtonGroup from "./DatabaseButtonGroup.vue";
 import FullScreenButton from "./FullScreenButton.vue";
-import ViewButton from "./ViewButton.vue";
+import PanelButtonGroup from "./PanelButtonGroup.vue";
 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("");
@@ -40,25 +42,15 @@ onKeyDown((e) => {
 onKeyDown((e) => {
   if (e.ctrlKey && e.key === "1") {
     e.preventDefault();
-    const sideBar = api.store.dev.showSideBar;
-    const consoleBar = api.store.dev.showConsoleBar;
-    if (!sideBar && !consoleBar) {
-      api.store.dev.showSideBar = true;
-      api.store.dev.showConsoleBar = false;
-      showTemporaryNotification("Ctrl + 1", "Showing Sidebar");
-    } else if (sideBar && !consoleBar) {
-      api.store.dev.showSideBar = false;
-      api.store.dev.showConsoleBar = true;
-      showTemporaryNotification("Ctrl + 1", "Showing Console");
-    } else if (!sideBar && consoleBar) {
-      api.store.dev.showSideBar = true;
-      api.store.dev.showConsoleBar = true;
-      showTemporaryNotification("Ctrl + 1", "Showing Both Panels");
-    } else {
-      api.store.dev.showSideBar = false;
-      api.store.dev.showConsoleBar = false;
-      showTemporaryNotification("Ctrl + 1", "Hiding All Panels");
-    }
+    api.store.dev.showSideBar = !api.store.dev.showSideBar;
+    showTemporaryNotification("Ctrl + 1", api.store.dev.showSideBar ? "Showing Sidebar" : "Hiding Sidebar");
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "`") {
+    e.preventDefault();
+    api.store.dev.showConsoleBar = !api.store.dev.showConsoleBar;
+    showTemporaryNotification("Ctrl + `", api.store.dev.showConsoleBar ? "Showing Console" : "Hiding Console");
   }
 });
 onKeyDown((e) => {
@@ -149,21 +141,21 @@ onKeyDown((e) => {
 
 <template>
   <!-- Main navigation bar container -->
-  <nav class="flex items-center justify-between w-full border-b min-h-[36px] max-h-[36px] text-sm px-2">
+  <nav class="flex items-center justify-between w-full border-b border-dev-lines min-h-[36px] max-h-[36px] text-sm px-2">
     <!-- Left section - Developer mode indicator -->
     <div class="flex items-center flex-shrink-0 px-2 py-1 rounded">
       <div class="flex items-center">
         <!-- 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>
@@ -173,7 +165,7 @@ onKeyDown((e) => {
     <!-- Middle section - Centered content area -->
     <div class="flex items-center justify-center flex-1 min-w-0 px-2 py-1 rounded">
       <div class="flex items-center space-x-2">
-        <div class="text-xs text-gray-600">
+        <div class="text-xs text-muted-foreground">
           <!-- Middle content placeholder -->
         </div>
       </div>
@@ -181,7 +173,7 @@ onKeyDown((e) => {
 
     <!-- Right section - Control buttons -->
     <div class="flex items-center flex-shrink-0 px-1 py-1 rounded">
-      <div class="flex items-center space-x-2.5 border-gray-300 pl-4 rounded-l">
+      <div class="flex items-center space-x-2.5 border-border pl-4 rounded-l">
         <!-- Logout button (only when authenticated) -->
         <div class="flex items-center">
           <LogoutButton />
@@ -226,9 +218,9 @@ onKeyDown((e) => {
           <ViewInfoButtonGroup />
         </div>
 
-        <!-- View button -->
+        <!-- Panel toggles (console + sidebar) -->
         <div class="flex items-center">
-          <ViewButton />
+          <PanelButtonGroup />
         </div>
       </div>
     </div>

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

@@ -1,4 +1,6 @@
 <script setup>
+import { ChevronLeft, ChevronRight, SquareMinus } from "lucide-vue-next";
+import useViewAPI from "../../../composables/useViewAPI";
 const api = useViewAPI();
 </script>
 
@@ -16,7 +18,7 @@ const api = useViewAPI();
             :disabled="!api.store.dev.viewProvidesStepper || !api.hasPrevStep()"
             @click="api.goPrevStep()"
           >
-            <i-lucide-chevron-left />
+            <ChevronLeft />
           </ButtonGroupItem>
         </TooltipTrigger>
         <TooltipContent side="bottom">
@@ -32,7 +34,7 @@ const api = useViewAPI();
               v-if="api.pathString"
               class="counter"
             >{{ api.pathString }}</span>
-            <i-iconoir-remove-empty v-else />
+            <SquareMinus v-else />
           </ButtonGroupItem>
         </TooltipTrigger>
         <TooltipContent side="bottom">
@@ -47,7 +49,7 @@ const api = useViewAPI();
             :disabled="!api.store.dev.viewProvidesStepper || !api.hasNextStep()"
             @click="api.goNextStep()"
           >
-            <i-lucide-chevron-right />
+            <ChevronRight />
           </ButtonGroupItem>
         </TooltipTrigger>
         <TooltipContent side="bottom">