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

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

@@ -1,6 +1,9 @@
 <script setup>
+import { ArrowDown, ChevronsLeft, ChevronsRight, Diamond, Pin, PinOff, Presentation, WandSparkles } from "lucide-vue-next";
 import { computed } from "vue";
 import RouteJumper from "./RouteJumper.vue";
+import { useRoute } from "#imports";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const route = useRoute();
 const isDevMode = computed(() => route.path.startsWith("/dev/") || route.path === "/dev");
@@ -41,7 +44,7 @@ const togglePin = () => {
             :disabled="!api.hasAutofill()"
             @click="api.autofill()"
           >
-            <i-mdi-magic />
+            <WandSparkles />
           </ButtonGroupItem>
         </TooltipTrigger>
         <TooltipContent side="bottom">
@@ -57,7 +60,7 @@ const togglePin = () => {
               :disabled="api.store.dev.pinnedRoute !== null"
               @click="api.goToView(api.route?.meta?.prev)"
             >
-              <i-meteor-icons-angles-left />
+              <ChevronsLeft />
             </ButtonGroupItem>
           </TooltipTrigger>
           <TooltipContent side="bottom">
@@ -67,7 +70,7 @@ const togglePin = () => {
       </template>
       <template v-else>
         <ButtonGroupItem disabled>
-          <i-meteor-icons-angles-left />
+          <ChevronsLeft />
         </ButtonGroupItem>
       </template>
 
@@ -79,7 +82,7 @@ const togglePin = () => {
               :disabled="api.store.dev.pinnedRoute !== null"
               @click="api.goNextView()"
             >
-              <i-meteor-icons-angles-right />
+              <ChevronsRight />
             </ButtonGroupItem>
           </TooltipTrigger>
           <TooltipContent side="bottom">
@@ -89,7 +92,7 @@ const togglePin = () => {
       </template>
       <template v-else>
         <ButtonGroupItem disabled>
-          <i-meteor-icons-angles-right />
+          <ChevronsRight />
         </ButtonGroupItem>
       </template>
 
@@ -101,8 +104,8 @@ const togglePin = () => {
               :class="{ pinned: api.store.dev.pinnedRoute !== null }"
               @click="togglePin()"
             >
-              <i-ic-baseline-pin-off v-if="api.store.dev.pinnedRoute !== null" />
-              <i-ic-baseline-push-pin v-else />
+              <PinOff v-if="api.store.dev.pinnedRoute !== null" />
+              <Pin v-else />
             </ButtonGroupItem>
           </TooltipTrigger>
           <TooltipContent side="bottom">
@@ -120,15 +123,15 @@ const togglePin = () => {
           <ButtonGroupItem :class="buttonstyle">
             <div class="font-mono text-[0.65rem] font-medium min-w-[100px]">
               <!-- Route type icons -->
-              <i-lucide-arrow-down
+              <ArrowDown
                 v-if="currentTimelineMeta.sequential"
                 class="inline size-3 mr-1"
               />
-              <i-lucide-presentation
+              <Presentation
                 v-else-if="api.currentRouteName() === 'presentation_home'"
                 class="inline size-3 mr-1"
               />
-              <i-lucide-diamond
+              <Diamond
                 v-else
                 class="inline size-3 mr-1"
               />

package/dist/runtime/components/dev/presentation/DarkModeButton.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { Moon, Sun, SunMoon } from "lucide-vue-next";
+import { useSmileColorMode } from "../../../composables/useColorMode";
 const {
   state: _globalColorMode,
   mode: globalColorModeRaw,
@@ -19,11 +21,11 @@ const {
           @click="toggleColorMode"
         >
           <!-- Light mode icon -->
-          <i-lucide-moon v-if="globalColorModeRaw === 'light'" />
+          <Moon v-if="globalColorModeRaw === 'light'" />
           <!-- Dark mode icon -->
-          <i-lucide-sun-moon v-else-if="globalColorModeRaw === 'dark'" />
+          <SunMoon v-else-if="globalColorModeRaw === 'dark'" />
           <!-- System mode icon -->
-          <i-lucide-sun v-else />
+          <Sun v-else />
         </Button>
       </TooltipTrigger>
       <!-- Tooltip content with dynamic text -->

package/dist/runtime/components/dev/presentation/LogoutButton.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { LogOut } from "lucide-vue-next";
 import { ref, onMounted } from "vue";
 const isLoggedIn = ref(false);
 onMounted(async () => {
@@ -27,7 +28,7 @@ async function logout() {
           variant="outline"
           @click="logout"
         >
-          <i-lucide-log-out />
+          <LogOut />
         </Button>
       </TooltipTrigger>
       <TooltipContent>

package/dist/runtime/components/dev/presentation/PresentationModeResetButton.vue

@@ -1,7 +1,16 @@
 <script setup>
+import { Home } from "lucide-vue-next";
+import { navigateTo, useRoute } from "#imports";
+import useAPI from "../../../composables/useAPI";
 const _props = defineProps(["icon"]);
 function goHome() {
-  navigateTo("/presentation/");
+  const route = useRoute();
+  if (route.path.startsWith("/dev")) {
+    const api = useAPI();
+    api.store.dev.mainView = "devmode";
+  } else {
+    navigateTo("/presentation/");
+  }
 }
 </script>
 
@@ -14,7 +23,7 @@ function goHome() {
           variant="outline"
           @click="goHome"
         >
-          <i-lucide-home />
+          <Home />
         </Button>
       </TooltipTrigger>
       <TooltipContent>

package/dist/runtime/components/dev/presentation/PresentationNavBar.d.vue.ts

@@ -1,3 +1,15 @@
 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>;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    hideDarkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hideDarkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    hideDarkMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/presentation/PresentationNavBar.vue

@@ -1,9 +1,13 @@
 <script setup>
+import { Presentation } from "lucide-vue-next";
 import RouteInfoButton from "../navbar/ViewInfoButtonGroup.vue";
 import ResetButton from "./PresentationModeResetButton.vue";
 import QRCodeButton from "./QRCodeButton.vue";
 import DarkModeButton from "./DarkModeButton.vue";
 import LogoutButton from "./LogoutButton.vue";
+defineProps({
+  hideDarkMode: { type: Boolean, default: false }
+});
 </script>
 
 <template>
@@ -15,13 +19,13 @@ import LogoutButton from "./LogoutButton.vue";
         <!-- Desktop presentation mode label -->
         <div class="hidden sm:block">
           <div class="flex items-center text-xs font-normal">
-            <i-uil-presentation-line class="size-4 mr-1" /><b>PRESENTATION MODE</b>
+            <Presentation class="size-4 mr-1" /><b>PRESENTATION MODE</b>
           </div>
         </div>
         <!-- Mobile presentation mode label -->
         <div class="block sm:hidden">
           <div class="flex items-center text-xs font-semibold">
-            <i-lucide-presentation class="size-4 mr-1" /><b>PRES</b>
+            <Presentation class="size-4 mr-1" /><b>PRES</b>
           </div>
         </div>
       </div>
@@ -31,7 +35,7 @@ import LogoutButton from "./LogoutButton.vue";
     <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">
         <!-- Middle content placeholder -->
-        <div class="text-xs text-gray-600">
+        <div class="text-xs text-muted-foreground">
           <!-- Middle content placeholder -->
         </div>
       </div>
@@ -39,14 +43,17 @@ import LogoutButton from "./LogoutButton.vue";
 
     <!-- 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 />
         </div>
 
-        <!-- Dark mode toggle button -->
-        <div class="flex items-center">
+        <!-- Dark mode toggle button (hidden when embedded in dev layout, sidebar provides one) -->
+        <div
+          v-if="!hideDarkMode"
+          class="flex items-center"
+        >
           <DarkModeButton />
         </div>
 

package/dist/runtime/components/dev/presentation/PresentationNavBar.vue.d.ts

@@ -1,3 +1,15 @@
 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>;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    hideDarkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hideDarkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    hideDarkMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/presentation/QRCodeButton.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { Download, QrCode } from "lucide-vue-next";
 import { computed } from "vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const qrUrl = computed(() => {
   const deployUrl = api.config.deployURL || (import.meta.client ? window.location.origin : "");
@@ -16,7 +18,7 @@ const qrUrl = computed(() => {
         size="menu"
         variant="outline"
       >
-        <i-lucide-qr-code />
+        <QrCode />
       </Button>
     </DropdownMenuTrigger>
     <!-- Dropdown content -->
@@ -55,7 +57,7 @@ const qrUrl = computed(() => {
               download="qr.svg"
               class="flex items-center gap-2"
             >
-              <i-lucide-download class="size-3" />
+              <Download class="size-3" />
               <span>Download QR</span>
             </a>
           </Button>

package/dist/runtime/components/dev/sidebar/AppProgressPanel.vue

@@ -1,10 +1,12 @@
 <script setup>
+import { CloudUpload, Database, UserMinus } from "lucide-vue-next";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
 <template>
   <!-- App progress stepper panel -->
-  <Stepper class="flex w-full items-start gap-2 my-0 pt-4 pb-2 border-t border-border">
+  <Stepper class="flex w-full items-start gap-2 my-0 pt-4 pb-2 border-t border-dev-lines">
     <!-- Step 1: User known/unknown -->
     <StepperItem
       class="relative flex w-full flex-col items-center justify-center"
@@ -12,23 +14,23 @@ const api = useAPI();
     >
       <StepperSeparator
         class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted"
-        :class="[api.store.cookieState.knownUser ? 'bg-green-500' : 'bg-gray-300']"
+        :class="[api.store.cookieState.knownUser ? 'bg-status-green-fill' : '']"
       />
 
       <StepperTrigger as-child>
         <div
           class="z-10 rounded-full shrink-0 p-3"
-          :class="[api.store.cookieState.knownUser ? 'bg-green-200' : 'bg-muted']"
+          :class="[api.store.cookieState.knownUser ? 'bg-status-green-bg' : 'bg-muted']"
         >
-          <i-heroicons-user-minus-16-solid
-            :class="[api.store.cookieState.knownUser ? 'text-green-500' : 'text-gray-500']"
+          <UserMinus
+            :class="[api.store.cookieState.knownUser ? 'text-status-green-text' : 'text-muted-foreground']"
           />
         </div>
       </StepperTrigger>
 
       <div class="flex flex-col items-center text-center">
         <StepperDescription
-          :class="[api.store.cookieState.knownUser ? 'text-green-500' : 'text-gray-500']"
+          :class="[api.store.cookieState.knownUser ? 'text-status-green-text' : 'text-muted-foreground']"
           class="text-[0.6rem] text-muted-foreground transition font-mono"
         >
           {{ api.store.cookieState.knownUser ? 'Known user' : 'Unknown user' }}
@@ -45,26 +47,26 @@ const api = useAPI();
         class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted"
         :class="[
           api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
-            ? 'bg-green-500'
+            ? 'bg-status-green-fill'
             : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
-              ? 'bg-yellow-500'
-              : 'bg-gray-300',
+              ? 'bg-status-yellow-fill'
+              : '',
         ]"
       />
 
       <StepperTrigger as-child>
         <div
           class="z-10 rounded-full shrink-0 p-3 cursor-pointer"
-          :class="[api.store.browserEphemeral.dataLoaded ? 'bg-green-200' : 'bg-muted']"
+          :class="[api.store.browserEphemeral.dataLoaded ? 'bg-status-green-bg' : 'bg-muted']"
           @click="api.connectDB()"
         >
-          <i-lucide-database :class="[api.store.browserEphemeral.dataLoaded ? 'text-green-500' : 'text-gray-500']" />
+          <Database :class="[api.store.browserEphemeral.dataLoaded ? 'text-status-green-text' : 'text-muted-foreground']" />
         </div>
       </StepperTrigger>
 
       <div class="flex flex-col items-center text-center">
         <StepperDescription
-          :class="[api.store.browserEphemeral.dataLoaded ? 'text-green-500' : 'text-gray-500']"
+          :class="[api.store.browserEphemeral.dataLoaded ? 'text-status-green-text' : 'text-muted-foreground']"
           class="text-[0.6rem] text-muted-foreground transition font-mono"
         >
           {{ api.store.browserEphemeral.dataLoaded ? 'Record created' : 'No record yet' }}
@@ -82,19 +84,19 @@ const api = useAPI();
           class="z-10 rounded-full shrink-0 p-3"
           :class="[
             api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
-              ? 'bg-green-200'
+              ? 'bg-status-green-bg'
               : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
-                ? 'bg-amber-100'
+                ? 'bg-status-yellow-bg'
                 : 'bg-muted',
           ]"
         >
-          <i-fluent-cloud-sync-24-filled
+          <CloudUpload
             :class="[
               api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
-                ? 'text-green-500'
+                ? 'text-status-green-text'
                 : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
-                  ? 'text-yellow-500'
-                  : 'text-gray-500',
+                  ? 'text-status-yellow-text'
+                  : 'text-muted-foreground',
             ]"
           />
         </div>
@@ -104,10 +106,10 @@ const api = useAPI();
         <StepperDescription
           :class="[
             api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
-              ? 'text-green-500'
+              ? 'text-status-green-text'
               : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
-                ? 'text-red-500'
-                : 'text-gray-500',
+                ? 'text-status-red-text'
+                : 'text-muted-foreground',
           ]"
           class="text-[0.6rem] text-muted-foreground transition font-mono"
         >

package/dist/runtime/components/dev/sidebar/ConfigurationVariablesPanel.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { computed } from "vue";
+import useAPI from "../../../composables/useAPI";
+import { useSmileColorMode } from "../../../composables/useColorMode";
 const api = useAPI();
 const { system, mode: experimentColorMode } = useSmileColorMode("experiment");
 const colorModeSelect = computed({
@@ -29,7 +31,7 @@ const colorModeDisplayText = computed(() => {
     <table class="w-full">
       <tbody>
         <!-- Consent, Known, Done, Withdrew, Viz toggles -->
-        <tr class="table-row-base">
+        <tr class="table-row-base ">
           <td
             class="table-cell-base table-cell-left table-cell-small font-mono"
             colspan="4"
@@ -84,11 +86,11 @@ const colorModeDisplayText = computed(() => {
           </td>
         </tr>
         <!-- Window size and aggressive mode -->
-        <tr class="table-row-base table-row-base-bottom">
+        <tr class="table-row-base table-row-base-bottom ">
           <td
             class="table-cell-base table-cell-left table-cell-small font-mono"
             :class="{
-              'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400': api.store.browserEphemeral.tooSmall,
+              'bg-danger-button-light text-danger-button-light-foreground': api.store.browserEphemeral.tooSmall,
             }"
             colspan="4"
           >
@@ -124,7 +126,7 @@ const colorModeDisplayText = computed(() => {
           </td>
         </tr>
         <!-- Responsive UI and color mode -->
-        <tr class="table-row-base table-row-base-bottom">
+        <tr class="table-row-base table-row-base-bottom ">
           <td
             class="table-cell-base table-cell-left table-cell-small font-mono"
             colspan="4"
@@ -215,5 +217,5 @@ const colorModeDisplayText = computed(() => {
 </template>
 
 <style scoped>
-.table-cell-small{font-size:.6em}table{border-collapse:collapse;border-spacing:0}td{border:none;padding:.5rem .85rem}
+.table-cell-small{font-size:.6em}table{border-collapse:collapse;border-spacing:0}td{border:none;border-bottom:1px solid var(--dev-lines);padding:.5rem .85rem}tr:last-child td{border-bottom:none}
 </style>

package/dist/runtime/components/dev/sidebar/DatabaseStatusInfoPanel.vue

@@ -1,6 +1,14 @@
 <script setup>
 import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
+const dbInfo = ref(null);
+if (import.meta.client) {
+  fetch("/api/db-info").then((r) => r.json()).then((data) => {
+    dbInfo.value = data;
+  }).catch(() => {
+  });
+}
 const timer = ref(null);
 const _sync_state = computed(() => {
   if (api.store.browserEphemeral.unsavedChanges && api.store.browserEphemeral.dataLoaded) {
@@ -47,8 +55,20 @@ onBeforeUnmount(() => {
   <!-- Database status info panel -->
   <table class="w-full text-sm table-border-top">
     <tbody>
+      <!-- Database row -->
+      <tr
+        v-if="dbInfo"
+        class="table-row-base table-row-even hidden sm:table-row"
+      >
+        <td class="table-cell-base table-cell-left table-cell-small">
+          <b>Database:</b>
+        </td>
+        <td class="table-cell-base table-cell-left table-cell-mono table-cell-small">
+          {{ dbInfo.type }} <span class="text-muted-foreground">{{ dbInfo.url }}</span>
+        </td>
+      </tr>
       <!-- Last route row -->
-      <tr class="table-row-base table-row-even hidden sm:table-row">
+      <tr class="table-row-base table-row-odd hidden sm:table-row">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Last route:</b>
         </td>
@@ -57,7 +77,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- Mode row -->
-      <tr class="table-row-base table-row-odd hidden sm:table-row">
+      <tr class="table-row-base table-row-even hidden sm:table-row">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Mode:</b>
         </td>
@@ -66,7 +86,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- DocRef row -->
-      <tr class="table-row-base table-row-even">
+      <tr class="table-row-base table-row-odd">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>DocRef:</b>
         </td>
@@ -75,7 +95,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- Writes row -->
-      <tr class="table-row-base table-row-odd hidden sm:table-row">
+      <tr class="table-row-base table-row-even hidden sm:table-row">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Writes:</b>
         </td>
@@ -84,7 +104,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- Last write row -->
-      <tr class="table-row-base table-row-even hidden sm:table-row">
+      <tr class="table-row-base table-row-odd hidden sm:table-row">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Last save:</b>
         </td>
@@ -93,7 +113,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- Auto save row -->
-      <tr class="table-row-base table-row-odd hidden sm:table-row">
+      <tr class="table-row-base table-row-even hidden sm:table-row">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Auto save:</b>
         </td>
@@ -102,7 +122,7 @@ onBeforeUnmount(() => {
         </td>
       </tr>
       <!-- Size row -->
-      <tr class="table-row-base table-row-even hidden sm:table-row table-border-bottom">
+      <tr class="table-row-base table-row-odd hidden sm:table-row table-border-bottom">
         <td class="table-cell-base table-cell-left table-cell-small">
           <b>Size:</b>
         </td>

package/dist/runtime/components/dev/sidebar/RandomizationSidebarPanel.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
+import useSmileStore from "../../../stores/smilestore";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 const smilestore = useSmileStore();
 const seed = ref(smilestore.getSeedID);
@@ -22,7 +24,9 @@ watch(
   }
 );
 const getBranchType = (index, total) => {
-  if (index === 0) {
+  if (total === 1) {
+    return "\u2500\u2500 ";
+  } else if (index === 0) {
     return "\u250C\u2500 ";
   } else if (index === total - 1) {
     return "\u2514\u2500 ";
@@ -38,13 +42,13 @@ const getBranchType = (index, total) => {
     <div class="h-fit p-0 m-0">
       <!-- Random seed section header -->
       <div
-        class="text-xs text-muted-foreground font-mono text-left bg-muted px-2 py-1.5 m-0 border-t border-b border-border"
+        class="text-xs text-muted-foreground font-mono text-left bg-muted px-2 py-1.5 m-0 border-t border-b border-dev-lines"
       >
         Random seed
       </div>
 
       <!-- Random seed configuration section -->
-      <div class="bg-background pb-5 border-b border-border">
+      <div class="bg-background pb-5 border-b border-dev-lines">
         <div class="text-xs m-2">
           Toggle to use a fixed seed (off means uses the current time as seed). A specific seed can be set in the input
           field. Press the arrow to reload the view with the new seed.
@@ -100,7 +104,7 @@ const getBranchType = (index, total) => {
       >
         <!-- Random variables header -->
         <div
-          class="text-xs text-left font-mono bg-muted text-muted-foreground px-2 py-1.5 m-0 border-t border-b border-border"
+          class="text-xs text-left font-mono bg-muted text-muted-foreground px-2 py-1.5 m-0 border-t border-b border-dev-lines"
         >
           Random Variables
         </div>
@@ -120,7 +124,7 @@ const getBranchType = (index, total) => {
                 :key="key"
               >
                 <li class="flex items-center mb-0 ml-0.5 mt-1">
-                  <span class="font-mono text-sm text-gray-500 whitespace-pre mr-0">{{
+                  <span class="font-mono text-sm text-muted-foreground whitespace-pre mr-0">{{
                     getBranchType(index, Object.keys(smilestore.localState.possibleConditions).length)
                   }}</span>
                   <Select

package/dist/runtime/components/dev/sidebar/SmileDevSideBar.vue

@@ -5,6 +5,7 @@ import DatabaseStatusInfoPanel from "./DatabaseStatusInfoPanel.vue";
 import RandomizationSidebarPanel from "./RandomizationSidebarPanel.vue";
 import StudyInfoPanel from "./StudyInfoPanel.vue";
 import AppProgressPanel from "./AppProgressPanel.vue";
+import useAPI from "../../../composables/useAPI";
 const api = useAPI();
 </script>
 
@@ -15,7 +16,7 @@ const api = useAPI();
     <div class="sidebar-content">
       <Tabs
         v-model="api.store.dev.sideBarTab"
-        class="w-full border-t border-border py-2"
+        class="w-full py-2"
       >
         <!-- Tab navigation -->
         <TabsList class="mx-auto text-xs">
@@ -58,13 +59,19 @@ const api = useAPI();
 
     <!-- Footer panels -->
     <div class="sidebar-footer">
-      <ConfigurationVariablesPanel />
-      <AppProgressPanel />
-      <StudyInfoPanel />
+      <div class="border-t border-dev-lines">
+        <ConfigurationVariablesPanel />
+      </div>
+      <div>
+        <AppProgressPanel />
+      </div>
+      <div class="border-t border-dev-lines">
+        <StudyInfoPanel />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.sidebar-container{display:flex;flex-direction:column;height:100%;max-height:100%}.sidebar-content{flex:1;overflow-y:auto}.sidebar-footer{margin-top:auto;padding-top:1rem}
+.sidebar-container{display:flex;flex-direction:column;height:100%;max-height:100%}.sidebar-content{flex:1;overflow-y:auto}.sidebar-footer{margin-top:auto}
 </style>

package/dist/runtime/components/dev/sidebar/StepDataViewer.d.vue.ts

@@ -11,12 +11,12 @@ export type Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor | ArrayConstructor | null)[];
+        type: (NumberConstructor | StringConstructor | ObjectConstructor | ArrayConstructor | BooleanConstructor | null)[];
         required: true;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor | ArrayConstructor | null)[];
+        type: (NumberConstructor | StringConstructor | ObjectConstructor | ArrayConstructor | BooleanConstructor | null)[];
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/sidebar/StepDataViewer.vue

@@ -78,5 +78,5 @@ const isSinglePrimitive = (value) => {
 </template>
 
 <style scoped>
-.data-path-viewer{font-family:monospace;font-size:.7rem;line-height:1.4}.data-node{margin:2px 0}.node-content{cursor:pointer;padding:2px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.node-content:hover{background-color:#f0f0f0}.expand-icon{color:#666;display:inline-block;width:16px}.key{color:#0baac3;margin-right:4px}.preview{color:#666;font-style:italic}.primitive-value{color:#dda814}.nested-content{border-left:1px dotted #ccc;padding-left:20px}
+.data-path-viewer{font-family:monospace;font-size:.7rem;line-height:1.4}.data-node{margin:2px 0}.node-content{cursor:pointer;padding:2px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.node-content:hover{background-color:var(--muted)}.expand-icon{color:var(--muted-foreground);display:inline-block;width:16px}.key{color:var(--data-key-color);margin-right:4px}.preview{color:var(--muted-foreground);font-style:italic}.primitive-value{color:var(--data-value-color)}.nested-content{border-left:1px dotted var(--border);padding-left:20px}
 </style>