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

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

@@ -1,11 +1,20 @@
 <script setup>
-import { ref, computed } from "vue";
+import { Maximize, Moon, RotateCcw, Sun, SunMoon } from "lucide-vue-next";
+import { ref, computed, watch } from "vue";
 import ResponsiveDeviceSelect from "./menu/ResponsiveDeviceSelect.vue";
 import { useElementSize } from "@vueuse/core";
 import { devicePresets } from "./devicePresets.js";
+import useAPI from "../../composables/useAPI";
+import { useSmileColorMode } from "../../composables/useColorMode";
 const api = useAPI();
 const fullScreenDiv = ref(null);
-const { width: _fullScreenWidth, height: _fullScreenHeight } = useElementSize(fullScreenDiv);
+const { width: fullScreenWidth, height: fullScreenHeight } = useElementSize(fullScreenDiv);
+watch([fullScreenWidth, fullScreenHeight], ([w, h]) => {
+  if (api.store.dev.isFullscreen && w > 0 && h > 0) {
+    api.store.dev.deviceWidth = Math.round(w);
+    api.store.dev.deviceHeight = Math.round(h);
+  }
+});
 const {
   state: experimentColorMode,
   mode: experimentColorModeRaw,
@@ -123,7 +132,7 @@ const colorMode = computed(() => {
                   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">
@@ -146,9 +155,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 +182,7 @@ const colorMode = computed(() => {
                   size="xs"
                   @click="toggleFullscreen"
                 >
-                  <i-ic-outline-fullscreen />
+                  <Maximize />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">
@@ -211,5 +220,5 @@ const colorMode = computed(() => {
 </template>
 
 <style scoped>
-.device-container-wrapper,.fullscreen-container{height:100%;position:relative;width:100%}.device-container-wrapper{background-image:linear-gradient(color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px);background-position:-1px 0;background-size:20px 20px;container-type:inline-size;max-width:100%;min-height:100%;overflow-x:auto;overflow-y:auto}.device-content-wrapper{align-items:center;background-color:var(--test-background);display:flex;flex-direction:column;justify-content:flex-start;padding:20px}@container (min-width: 800px){.device-content-wrapper{align-items:center;padding:20px}.device-wrapper{justify-content:center;margin-left:15px}}@container (max-width: 799px){.device-content-wrapper{align-items:flex-start;margin-left:0}.device-wrapper{justify-content:flex-start}.device-info,.device-wrapper{margin-left:15px}}.device-info{background-color:var(--background);border:1px solid var(--border);border-radius:10px;font-family:monospace;font-size:14px;margin-bottom:10px;padding:5px;text-align:center}.device-controls{align-items:center;display:flex;flex-direction:row;gap:8px}.device-controls>*{align-items:center;display:flex;gap:16px}.device-dimensions{color:var(--muted-foreground);font-family:monospace;font-size:.8em}.device-controls :deep(.select-small){font-size:12px!important;height:28px!important;padding:4px 8px!important}.device-controls :deep(.select-small svg){height:12px!important;width:12px!important}.device-wrapper{align-items:center;background-color:var(--background);display:flex;justify-content:flex-start;position:relative}.device-container{border:2px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.1);display:inline-block;height:var(--device-height);overflow-x:auto;overflow-y:auto;width:var(--device-width)}.resize-handle{background:#8f8f8f;border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:absolute;transform-origin:center;transition:all .2s}.resize-handle:hover{background:#90b7e5;transform:scale(1.1)}.resize-handle:active{background:#90b7e5;transform:scale(1.05)}.resize-handle-left{cursor:ew-resize;height:40px;left:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-left:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-left:active{transform:translateY(-50%) scale(1.05)}.resize-handle-right{cursor:ew-resize;height:40px;right:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-right:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-right:active{transform:translateY(-50%) scale(1.05)}.resize-handle-bottom{bottom:-15px;cursor:ns-resize;height:8px;left:50%;transform:translateX(-50%);width:40px}.resize-handle-bottom:hover{transform:translateX(-50%) scale(1.1)}.resize-handle-bottom:active{transform:translateX(-50%) scale(1.05)}
+.device-container-wrapper,.fullscreen-container{height:100%;position:relative;width:100%}.device-container-wrapper{background-image:linear-gradient(color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px);background-position:-1px 0;background-size:20px 20px;container-type:inline-size;max-width:100%;min-height:100%;overflow-x:auto;overflow-y:auto}.device-content-wrapper{align-items:center;background-color:var(--test-background);display:flex;flex-direction:column;justify-content:flex-start;padding:20px}@container (min-width: 800px){.device-content-wrapper{align-items:center;padding:20px}.device-wrapper{justify-content:center;margin-left:15px}}@container (max-width: 799px){.device-content-wrapper{align-items:flex-start;margin-left:0}.device-wrapper{justify-content:flex-start}.device-info,.device-wrapper{margin-left:15px}}.device-info{background-color:var(--background);border:1px solid var(--border);border-radius:10px;font-family:monospace;font-size:14px;margin-bottom:10px;padding:5px;text-align:center}.device-controls{align-items:center;display:flex;flex-direction:row;gap:8px}.device-controls>*{align-items:center;display:flex;gap:16px}.device-dimensions{color:var(--muted-foreground);font-family:monospace;font-size:.8em}.device-controls :deep(.select-small){font-size:12px!important;height:28px!important;padding:4px 8px!important}.device-controls :deep(.select-small svg){height:12px!important;width:12px!important}.device-wrapper{align-items:center;background-color:var(--background);display:flex;justify-content:flex-start;position:relative}.device-container{border:2px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.1);display:inline-block;height:var(--device-height);overflow-x:auto;overflow-y:auto;width:var(--device-width)}.resize-handle{background:var(--resize-handle);border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:absolute;transform-origin:center;transition:all .2s}.resize-handle:hover{background:var(--resize-handle-hover);transform:scale(1.1)}.resize-handle:active{background:var(--resize-handle-hover);transform:scale(1.05)}.resize-handle-left{cursor:ew-resize;height:40px;left:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-left:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-left:active{transform:translateY(-50%) scale(1.05)}.resize-handle-right{cursor:ew-resize;height:40px;right:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-right:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-right:active{transform:translateY(-50%) scale(1.05)}.resize-handle-bottom{bottom:-15px;cursor:ns-resize;height:8px;left:50%;transform:translateX(-50%);width:40px}.resize-handle-bottom:hover{transform:translateX(-50%) scale(1.1)}.resize-handle-bottom:active{transform:translateX(-50%) scale(1.05)}
 </style>

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

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useNuxtApp } from "#imports";
+import PresentationNavBar from "#smile-dev/presentation/PresentationNavBar.vue";
+import PresentationModeView from "../builtins/PresentationModeView.vue";
+import useSmileStore from "../../stores/smilestore";
+import useAPI from "../../composables/useAPI";
+import { useSmileColorMode } from "../../composables/useColorMode";
+const nuxtApp = useNuxtApp();
+const store = useSmileStore();
+useAPI();
+useSmileColorMode("global");
+const timelineReady = ref(false);
+const presentationHome = computed(() => {
+  if (!timelineReady.value) return null;
+  return store.config.global_app_components?.presentation_home || PresentationModeView;
+});
+const presentationHomeProps = computed(() => {
+  if (!timelineReady.value) return {};
+  return store.config.global_app_components?.presentation_home_props || {};
+});
+const presentationPath = ref("/");
+const viewConfig = computed(() => {
+  if (!timelineReady.value) return void 0;
+  const timeline = nuxtApp.$timeline;
+  if (!timeline) return void 0;
+  return timeline.getViewForPath(presentationPath.value);
+});
+const isLoading = computed(() => {
+  return !timelineReady.value;
+});
+onMounted(() => {
+  timelineReady.value = true;
+});
+</script>
+
+<template>
+  <div class="presentation-container bg-background">
+    <LocalDevBanner />
+    <!-- Top toolbar with presentation navigation -->
+    <div class="toolbar">
+      <PresentationNavBar hide-dark-mode />
+    </div>
+
+    <!-- Content area -->
+    <div class="content-wrapper">
+      <div class="content-and-console">
+        <div class="main-content @container bg-background text-foreground">
+          <!-- Loading state -->
+          <div
+            v-if="isLoading"
+            class="loading-container"
+          >
+            <div class="loading-spinner" />
+            <p>Loading...</p>
+          </div>
+          <!-- Presentation home (root view) -->
+          <template v-else>
+            <component
+              :is="presentationHome"
+              v-if="presentationPath === '/' && timelineReady"
+              v-bind="presentationHomeProps"
+            />
+            <!-- Normal timeline view resolution -->
+            <component
+              :is="viewConfig.component"
+              v-else-if="viewConfig && viewConfig.component"
+              v-bind="viewConfig.props"
+            />
+            <div v-else-if="viewConfig === null && timelineReady">
+              <h1>Page not found</h1>
+              <p>No view registered for path: {{ presentationPath }}</p>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.presentation-container{display:flex;flex:1;flex-direction:column;height:100%;width:100%}.toolbar{background-color:var(--dev-bar-bg);height:36px;margin-bottom:auto;margin-top:auto;width:full}.content-wrapper{display:flex;flex:1;overflow:hidden;width:100%}.content-and-console{flex-direction:column;overflow:hidden}.content-and-console,.main-content{display:flex;flex:1;min-height:0;min-width:0}.main-content{flex-direction:column;overflow-x:auto;overflow-y:auto}.loading-container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:200px}.loading-spinner{animation:spin 1s linear infinite;border-top:4px solid var(--spinner-track);border:4px solid var(--spinner-track);border-radius:50%;border-top-color:var(--spinner-active);height:40px;margin-bottom:16px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+</style>

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"]);
@@ -16,7 +18,7 @@ const data_field = computed(() => {
     const pieces = props.data.split(".");
     let view_data = api.all_config;
     for (let i = 0; i < pieces.length; i++) {
-      if (view_data[pieces[i]]) {
+      if (view_data != null && typeof view_data === "object" && pieces[i] in view_data) {
         view_data = view_data[pieces[i]];
       }
     }
@@ -26,9 +28,10 @@ const data_field = computed(() => {
   }
 });
 function truncateText(text, maxLength = 30) {
-  if (!text) return text;
-  if (text.length <= maxLength) return text;
-  return text.substring(0, maxLength) + "...";
+  if (text === null || text === void 0) return text;
+  const str = String(text);
+  if (str.length <= maxLength) return str;
+  return str.substring(0, maxLength) + "...";
 }
 function option_selected(option) {
   emit("selected", option);
@@ -41,10 +44,10 @@ function option_selected(option) {
     <!-- Header section with navigation title -->
     <div
       v-if="header"
-      class="bg-muted text-dev-text px-3 py-2 text-xs font-medium border-b border-dev-lines"
+      class="bg-background text-dev-text px-3 text-xs font-medium border-b border-dev-lines h-8 flex items-center"
     >
       <template v-if="header == '/'">
-        <i-fa6-solid-house class="mr-1" />
+        <House class="mr-1 size-3.5" />
       </template>
       <template v-else>
         <span class="font-mono">{{ header }}</span>
@@ -84,15 +87,15 @@ function option_selected(option) {
             v-else
             :class="[
               'w-full text-left px-2 py-1.5 text-xs font-mono rounded transition-colors duration-150 object-item',
-              'hover:bg-ring hover:text-blue-700',
-              'focus:outline-none focus:ring-1 focus:ring-blue-300 focus:bg-blue-50',
-              key === props.selected ? 'bg-blue-100 text-blue-800 border border-muted' : 'text-gray-700',
+              'hover:bg-accent hover:text-accent-foreground',
+              'focus:outline-none focus:ring-1 focus:ring-ring',
+              key === props.selected ? 'bg-accent text-accent-foreground border border-dev-lines' : 'text-foreground',
             ]"
             @click="option_selected(key)"
           >
             <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-muted-foreground size-3.5" />
             </div>
           </button>
         </li>
@@ -102,5 +105,5 @@ function option_selected(option) {
 </template>
 
 <style scoped>
-.overflow-y-auto::-webkit-scrollbar{width:6px}.overflow-y-auto::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.item-key{color:#0baac3;font-weight:400}.primitive-item .item-value{color:#dda814;font-weight:400}.object-item .item-key,.object-item .item-value{color:#0baac3;font-weight:400}.config-list-container .bg-blue-100{background-color:var(--accent)}.config-list-container .text-blue-800{color:var(--accent-foreground)}.config-list-container .border-blue-200{border-color:var(--accent)}
+.overflow-y-auto::-webkit-scrollbar{width:6px}.overflow-y-auto::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.item-key{color:var(--data-key-color);font-weight:400}.primitive-item .item-value{color:var(--data-value-color);font-weight:400}.object-item .item-key,.object-item .item-value{color:var(--data-key-color);font-weight:400}
 </style>

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(() => {
@@ -49,6 +51,22 @@ function panel2_select(option) {
   save_path();
 }
 function panel3_select(option) {
+  const currentPath = panel_path(0);
+  if (currentPath) {
+    const pieces = currentPath.split(".");
+    let view_data = api.all_config;
+    for (let i = 0; i < pieces.length; i++) {
+      if (view_data != null && typeof view_data === "object" && pieces[i] in view_data) {
+        view_data = view_data[pieces[i]];
+      }
+    }
+    if (view_data != null && typeof view_data === "object" && option in view_data) {
+      const child = view_data[option];
+      if (child == null || typeof child !== "object") {
+        return;
+      }
+    }
+  }
   browse_panels.path.push(String(option));
   save_path();
 }
@@ -68,9 +86,12 @@ function _resetDevState() {
   <!-- Configuration panel with breadcrumb navigation and three-panel layout -->
   <div class="h-full m-0 p-0 flex flex-col">
     <!-- Breadcrumb navigation bar -->
-    <Breadcrumb class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+    <Breadcrumb class="bg-muted border-b border-dev-lines px-3 py-2 font-mono">
       <BreadcrumbList>
-        <template v-for="(option, index) in browse_panels.path" :key="index">
+        <template
+          v-for="(option, index) in browse_panels.path"
+          :key="index"
+        >
           <template v-if="option !== null">
             <BreadcrumbItem>
               <BreadcrumbLink
@@ -79,7 +100,7 @@ function _resetDevState() {
                 @click="panel_jump(index)"
               >
                 <template v-if="option == '/'">
-                  <i-fa6-solid-house />
+                  <House class="size-3.5" />
                 </template>
                 <template v-else>
                   {{ option }}
@@ -95,17 +116,17 @@ function _resetDevState() {
     <!-- Main content area with sidebar and three-panel layout -->
     <div class="flex flex-row flex-1 overflow-hidden">
       <!-- Left sidebar with documentation link -->
-      <div class="flex flex-col w-1/6 min-w-[120px] border-r border-l border-dev-lines bg-muted p-2 gap-2">
+      <div class="flex flex-col w-1/6 min-w-[120px] border-r border-dev-lines bg-muted p-2 gap-2">
         <div class="text-xs text-left mb-2 font-mono">
           Read more about configuration options
           <a
             href="https://smile.gureckislab.org/configuration.html"
-            class="text-blue-600 underline ml-1"
+            class="text-link-button-foreground underline ml-1"
           >in the docs</a>.
         </div>
       </div>
       <!-- Three-panel configuration browser -->
-      <div class="flex-1 grid grid-cols-3 gap-0 bg-gray-50 overflow-hidden">
+      <div class="flex-1 grid grid-cols-3 gap-0 bg-background overflow-hidden">
         <!-- Left panel -->
         <div class="border-r border-dev-lines h-full overflow-hidden">
           <ConfigList
@@ -123,7 +144,7 @@ function _resetDevState() {
           />
         </div>
         <!-- Right panel -->
-        <div class="bg-gray-50 h-full overflow-hidden">
+        <div class="bg-background h-full overflow-hidden">
           <ConfigList
             :data="panel_path(0)"
             @selected="panel3_select"

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(() => {
@@ -64,7 +66,7 @@ function panel_jump(index) {
   <!-- Database browsing panel with breadcrumb navigation and three-panel layout -->
   <div class="h-full p-0 m-0 flex flex-col">
     <!-- Breadcrumb navigation bar -->
-    <Breadcrumb class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+    <Breadcrumb class="bg-muted border-b border-dev-lines px-3 py-2 font-mono">
       <BreadcrumbList>
         <template
           v-for="(option, index) in browse_panels.path"
@@ -78,7 +80,7 @@ function panel_jump(index) {
                 @click="panel_jump(index)"
               >
                 <template v-if="option == '/'">
-                  <i-fa6-solid-house />
+                  <House class="size-3.5" />
                 </template>
                 <template v-else>
                   {{ option }}
@@ -103,7 +105,7 @@ function panel_jump(index) {
         />
       </div>
       <!-- Middle panel - 25% width -->
-      <div class="w-1/4 h-full border-r border-dev-lines p-0 m-0 bg-gray-50">
+      <div class="w-1/4 h-full border-r border-dev-lines p-0 m-0 bg-background">
         <!-- one from end -->
         <DatabaseList
           :data="panel_path(1)"
@@ -112,7 +114,7 @@ function panel_jump(index) {
         />
       </div>
       <!-- Right panel - 50% width -->
-      <div class="w-1/2 h-full p-0 m-0 bg-gray-50">
+      <div class="w-1/2 h-full p-0 m-0 bg-background">
         <!-- zero from end -->
         <DatabaseList
           :data="panel_path(0)"

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`);
@@ -29,13 +32,13 @@ function getBgClass(msg) {
     case "log":
       return "bg-background";
     case "warn":
-      return "bg-yellow-100";
+      return "log-bg-warn";
     case "error":
-      return "bg-red-100";
+      return "log-bg-error";
     case "debug":
       return "bg-muted text-muted-foreground";
     case "success":
-      return "bg-green-100";
+      return "log-bg-success";
     default:
       return "bg-background";
   }
@@ -46,7 +49,7 @@ function getBgClass(msg) {
   <!-- Console log panel with controls and log display -->
   <div class="h-full p-0 m-0 overflow-hidden">
     <!-- Control bar with filters and search -->
-    <div class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+    <div class="bg-muted border-b border-dev-lines px-3 py-2 font-mono">
       <div class="flex items-center justify-end gap-4 text-xs">
         <!-- Since last view toggle -->
         <div class="flex items-center gap-2">
@@ -140,28 +143,49 @@ function getBgClass(msg) {
           v-if="api.store.dev.lastViewLimit"
           class="w-full min-w-0"
         >
-          <template v-for="(msg, idx) in log.page_history" :key="idx">
+          <template
+            v-for="(msg, idx) in log.page_history"
+            :key="idx"
+          >
             <li
               v-if="filter_log(msg)"
               :class="[
                 getBgClass(msg),
-                'text-xs font-mono p-2 pr-0 border-b border-border whitespace-pre-wrap break-words break-all min-w-0 w-full',
+                'text-xs font-mono p-2 pr-0 border-b border-dev-lines whitespace-pre-wrap break-words break-all min-w-0 w-full',
               ]"
             >
               <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')"
+                    class="size-3.5"
+                  />
+                  <Database
+                    v-else-if="msg.message.includes('SMILESTORE')"
+                    class="size-3.5"
+                  />
+                  <Settings
+                    v-else-if="msg.message.includes('DEV MODE')"
+                    class="size-3.5"
+                  />
+                  <Clock
+                    v-else-if="msg.message.includes('TIMELINE STEPPER')"
+                    class="size-3.5"
+                  />
+                  <Timer
+                    v-else-if="msg.message.includes('TRIAL STEPPER')"
+                    class="size-3.5"
+                  />
                   <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
+                    class="size-3.5"
+                  />
                 </div>
                 <!-- Message content -->
                 <div class="min-w-0 flex-1">
@@ -181,28 +205,49 @@ function getBgClass(msg) {
           v-else
           class="w-full min-w-0"
         >
-          <template v-for="(msg, idx) in log.history" :key="idx">
+          <template
+            v-for="(msg, idx) in log.history"
+            :key="idx"
+          >
             <li
               v-if="filter_log(msg)"
               :class="[
                 getBgClass(msg),
-                'text-xs font-mono p-2 pr-0 border-b border-border whitespace-pre-wrap break-words break-all min-w-0 w-full',
+                'text-xs font-mono p-2 pr-0 border-b border-dev-lines whitespace-pre-wrap break-words break-all min-w-0 w-full',
               ]"
             >
               <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')"
+                    class="size-3.5"
+                  />
+                  <Database
+                    v-else-if="msg.message.includes('SMILESTORE')"
+                    class="size-3.5"
+                  />
+                  <Settings
+                    v-else-if="msg.message.includes('DEV MODE')"
+                    class="size-3.5"
+                  />
+                  <Clock
+                    v-else-if="msg.message.includes('TIMELINE STEPPER')"
+                    class="size-3.5"
+                  />
+                  <Timer
+                    v-else-if="msg.message.includes('TRIAL STEPPER')"
+                    class="size-3.5"
+                  />
                   <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
+                    class="size-3.5"
+                  />
                 </div>
                 <!-- Message content -->
                 <div class="min-w-0 flex-1">
@@ -223,5 +268,5 @@ function getBgClass(msg) {
 </template>
 
 <style scoped>
-.overflow-y-scroll::-webkit-scrollbar{width:6px}.overflow-y-scroll::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.bg-background{background-color:var(--background)}.bg-muted{background-color:var(--muted)}.text-muted-foreground{color:var(--muted-foreground)}.border-border{border-color:var(--border)}.bg-yellow-100{background-color:var(--log-yellow)}.bg-red-100{background-color:var(--log-red)}.bg-green-100{background-color:var(--log-green)}
+.overflow-y-scroll::-webkit-scrollbar{width:6px}.overflow-y-scroll::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.bg-background{background-color:var(--background)}.bg-muted{background-color:var(--muted)}.text-muted-foreground{color:var(--muted-foreground)}.border-dev-lines{border-color:var(--dev-lines)}.log-bg-warn{background-color:var(--log-yellow)}.log-bg-error{background-color:var(--log-red)}.log-bg-success{background-color:var(--log-green)}
 </style>

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"]);
@@ -45,10 +47,10 @@ function option_selected(option) {
     <!-- Header section with navigation title -->
     <div
       v-if="header"
-      class="bg-muted text-dev-text px-3 py-2 text-xs font-medium border-b border-dev-lines"
+      class="bg-background text-dev-text px-3 text-xs font-medium border-b border-dev-lines h-8 flex items-center"
     >
       <template v-if="header == '/'">
-        <i-fa6-solid-house class="mr-1" />
+        <House class="size-3.5" />
       </template>
       <template v-else>
         <span class="font-mono">{{ header }}</span>
@@ -88,15 +90,15 @@ function option_selected(option) {
             v-else
             :class="[
               'w-full text-left px-2 py-1.5 text-xs font-mono rounded transition-colors duration-150 object-item',
-              'hover:bg-ring hover:text-blue-700',
-              'focus:outline-none focus:ring-1 focus:ring-blue-300 focus:bg-blue-50',
-              key === props.selected ? 'bg-blue-100 text-blue-800 border border-muted' : 'text-gray-700',
+              'hover:bg-accent hover:text-accent-foreground',
+              'focus:outline-none focus:ring-1 focus:ring-ring',
+              key === props.selected ? 'bg-accent text-accent-foreground border border-dev-lines' : 'text-foreground',
             ]"
             @click="option_selected(key)"
           >
             <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-muted-foreground size-3.5" />
             </div>
           </button>
         </li>
@@ -106,5 +108,5 @@ function option_selected(option) {
 </template>
 
 <style scoped>
-.overflow-y-auto::-webkit-scrollbar{width:6px}.overflow-y-auto::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.item-key{color:#0baac3;font-weight:400}.primitive-item .item-value{color:#dda814;font-weight:400}.object-item .item-key,.object-item .item-value{color:#0baac3;font-weight:400}.database-list-container .bg-blue-100{background-color:var(--accent)}.database-list-container .text-blue-800{color:var(--accent-foreground)}.database-list-container .border-blue-200{border-color:var(--accent)}
+.overflow-y-auto::-webkit-scrollbar{width:6px}.overflow-y-auto::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.item-key{color:var(--data-key-color);font-weight:400}.primitive-item .item-value{color:var(--data-value-color);font-weight:400}.object-item .item-key,.object-item .item-value{color:var(--data-key-color);font-weight:400}
 </style>

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

@@ -1,13 +1,15 @@
 <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>
 
 <template>
   <!-- Main console container with left sidebar and right content area -->
-  <div class="w-full h-full flex border-t border-border overflow-hidden">
+  <div class="w-full h-full flex overflow-hidden border-t border-dev-lines">
     <!-- Left sidebar - 36px wide with tab navigation -->
     <div
       class="w-9 h-full bg-muted border-dev-lines border-r flex flex-col items-center justify-between pt-1 pb-1 flex-shrink-0"
@@ -28,7 +30,7 @@ const api = useAPI();
                 }"
                 @click="api.store.dev.consoleBarTab = 'browse'"
               >
-                <i-tdesign-data-base-filled />
+                <Database class="w-4 h-4" />
               </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/devicePresets.d.ts

@@ -17,10 +17,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: {