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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nyuccl/smile",
   "configKey": "smile",
-  "version": "0.2.0-beta.38",
+  "version": "0.2.0-beta.41",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -24,7 +24,7 @@ function finish() {
       </h1>
 
       <!-- Visual separator -->
-      <hr class="border-gray-300 my-4">
+      <hr class="border-muted-foreground/30 my-4">
 
       <!-- Navigation controls -->
       <div class="flex justify-end">

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

@@ -46,7 +46,7 @@ onUnmounted(() => {
 
     <!-- Close button in top-right corner -->
     <Button
-      class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-100 transition-colors"
+      class="absolute top-4 right-4 text-muted-foreground hover:text-foreground p-2 rounded-full hover:bg-muted transition-colors"
       aria-label="close"
       @click="$emit('toggleConsent')"
     >
@@ -65,7 +65,7 @@ onUnmounted(() => {
             </template>
             <!-- Error fallback if consent text component is not available -->
             <template v-else>
-              <div class="rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-800">
+              <div class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
                 Error: Unable to load consent form text. Please contact the study administrator.
               </div>
             </template>

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

@@ -63,7 +63,7 @@ onBeforeUnmount(() => {
               read the consent form (you can scroll the page).
             </p>
 
-            <div class="border-t border-gray-200 my-4" />
+            <div class="border-t border-border my-4" />
 
             <div class="flex items-center space-x-2 mb-4">
               <Switch
@@ -84,7 +84,7 @@ onBeforeUnmount(() => {
             <div class="hidden">
               <Label
                 for="your_name"
-                class="text-sm font-medium text-gray-700 mb-2 block"
+                class="text-sm font-medium text-foreground mb-2 block"
               >
                 Required! Please enter your name:
               </Label>

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

@@ -43,7 +43,7 @@ function finish(_goto) {
       </p>
 
       <!-- Visual separator -->
-      <hr class="border-gray-300 my-4">
+      <hr class="border-muted-foreground/30 my-4">
 
       <!-- Navigation button container -->
       <div class="flex justify-end">

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

@@ -12,5 +12,5 @@ const isDev = import.meta.dev;
 </template>
 
 <style scoped>
-.local-dev-banner{background:repeating-linear-gradient(-45deg,#facc15,#facc15 10px,#f0c000 0,#f0c000 20px);color:#1a1a1a;flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 0;text-align:center;width:100%}.dark .local-dev-banner{background:repeating-linear-gradient(-45deg,#555,#555 10px,#4a4a4a 0,#4a4a4a 20px);color:#ccc}
+.local-dev-banner{background:repeating-linear-gradient(-45deg,var(--dev-banner-stripe-1),var(--dev-banner-stripe-1) 10px,var(--dev-banner-stripe-2) 10px,var(--dev-banner-stripe-2) 20px);color:var(--dev-banner-text);flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 0;text-align:center;width:100%}
 </style>

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

@@ -82,7 +82,7 @@ function submitForm(event) {
         </p>
 
         <!-- Visual separator -->
-        <hr class="border-gray-300 my-4">
+        <hr class="border-muted-foreground/30 my-4">
 
         <!-- Completion code submission form -->
         <form
@@ -102,11 +102,11 @@ function submitForm(event) {
                 v-model="completionCode"
                 name="completioncode"
                 placeholder="Paste your completion code here"
-                :class="{ 'border-red-500': formError }"
+                :class="{ 'border-destructive': formError }"
               />
               <p
                 v-if="formError"
-                class="text-red-500 text-sm mt-1"
+                class="text-destructive text-sm mt-1"
               >
                 {{ formError }}
               </p>

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

@@ -39,7 +39,7 @@ const _props = defineProps({
       </p>
 
       <!-- Visual separator -->
-      <hr class="border-gray-300 my-4">
+      <hr class="border-muted-foreground/30 my-4">
 
       <!-- Study summary -->
       <p>
@@ -58,9 +58,9 @@ const _props = defineProps({
       >
 
       <!-- Lab information card -->
-      <article class="border border-gray-300 rounded-lg shadow-lg">
+      <article class="border border-border rounded-lg shadow-lg">
         <!-- Card header -->
-        <div class="bg-gray-100 px-3 py-2 text-xs font-medium border-b border-gray-300 rounded-t-lg">
+        <div class="bg-muted px-3 py-2 text-xs font-medium border-b border-border rounded-t-lg">
           <p><Sparkles class="inline" />&nbsp;&nbsp;Who are we?</p>
         </div>
 
@@ -71,26 +71,26 @@ const _props = defineProps({
             <a
               href="http://gureckislab.org"
               target="_blank"
-              class="text-green-500 hover:text-green-600"
+              class="text-link-button-foreground hover:text-link-button-foreground/80"
             >Computation and Cognition Lab</a>
             at New York University under the direction to
             <a
               href="http://todd.gureckislab.org"
               target="_blank"
-              class="text-green-500 hover:text-green-600"
+              class="text-link-button-foreground hover:text-link-button-foreground/80"
             >Dr. Todd Gureckis</a>. Our lab uses games and other fun tasks to study human intellience. Our research is funded in the public
             interest by the United States
             <a
               href="https://nsf.gov"
               target="_new"
-              class="text-green-500 hover:text-green-600"
+              class="text-link-button-foreground hover:text-link-button-foreground/80"
             >National Science Foundation</a>
             among other organizations and non-profit foundations and we publish our work, code, and results for the
             public. We very much appreciate research participants in our studies and have a public
             <a
               href="http://gureckislab.org/research-code-of-ethics.html"
               target="_new"
-              class="text-green-500 hover:text-green-600"
+              class="text-link-button-foreground hover:text-link-button-foreground/80"
             >code of ethics</a>
             we strive to uphold in all our studies.
           </div>

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

@@ -286,7 +286,7 @@ onMounted(() => {
               <Button
                 variant="default"
                 as="a"
-                :href="`${api.config.sona.url}/webstudy_credit.aspx?experiment_id=${api.config.sona.experimentId}&credit_token=${api.config.sona.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
+                :href="`${api.store.private.recruitmentInfo.url}/webstudy_credit.aspx?experiment_id=${api.store.private.recruitmentInfo.experimentId}&credit_token=${api.store.private.recruitmentInfo.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
               >
                 Return to SONA for credit
                 <ArrowRight />
@@ -327,7 +327,7 @@ onMounted(() => {
               <Button
                 variant="default"
                 as="a"
-                :href="`${api.config.sonaPaid.url}/webstudy_credit.aspx?experiment_id=${api.config.sonaPaid.experimentId}&credit_token=${api.config.sonaPaid.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
+                :href="`${api.store.private.recruitmentInfo.url}/webstudy_credit.aspx?experiment_id=${api.store.private.recruitmentInfo.experimentId}&credit_token=${api.store.private.recruitmentInfo.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
               >
                 Return to SONA for payment
                 <ArrowRight />
@@ -368,7 +368,7 @@ onMounted(() => {
               <Button
                 variant="default"
                 as="a"
-                :href="`${api.config.spark.completionUrl}/${api.store.private.recruitmentInfo.subject_ID}`"
+                :href="`${api.store.private.recruitmentInfo.completionUrl}/${api.store.private.recruitmentInfo.subject_ID}`"
               >
                 Return to SPARK
                 <ArrowRight />

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

@@ -70,7 +70,7 @@ onUnmounted(() => {
 
     <!-- Close button -->
     <Button
-      class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-100 transition-colors"
+      class="absolute top-4 right-4 text-muted-foreground hover:text-foreground p-2 rounded-full hover:bg-muted transition-colors"
       aria-label="close"
       @click="$emit('toggleWithdraw')"
     >
@@ -85,7 +85,7 @@ onUnmounted(() => {
           <!-- Modal header with title -->
           <template #title>
             <h3 class="text-3xl font-semibold">
-              <LogOut class="text-red-500 inline-block mr-2" />Withdraw from study?
+              <LogOut class="text-destructive inline-block mr-2" />Withdraw from study?
             </h3>
           </template>
 
@@ -116,7 +116,7 @@ onUnmounted(() => {
                     <Checkbox
                       :id="`withdraw-option-${index}`"
                       :checked="forminfo.reason_select.includes(option)"
-                      class="border-gray-600 data-[state=checked]:bg-gray-800 data-[state=checked]:border-gray-800"
+                      class="border-input data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                       @update:checked="
                         (checked) => {
                           if (checked) {
@@ -141,7 +141,7 @@ onUnmounted(() => {
                     </Label>
                   </div>
                 </div>
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-muted-foreground">
                   Select all that apply.
                 </p>
               </div>
@@ -159,7 +159,7 @@ onUnmounted(() => {
                   class="w-full bg-background dark:bg-background text-base resize-vertical"
                   rows="4"
                 />
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-muted-foreground">
                   Please let us know any additional information you would like to share.
                 </p>
               </div>
@@ -177,7 +177,7 @@ onUnmounted(() => {
                   placeholder="participant@gmail.com"
                   class="w-full text-base bg-background dark:bg-background"
                 />
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-muted-foreground">
                   Please enter your email address so we can follow up with you. This is optional and we otherwise will
                   try to figure out how to reach you. However, this can help avoid any potential problems. Feel free to
                   use an anonymized email like your Prolific contact email, Hide my email (Apple), or create a free

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

@@ -6,6 +6,13 @@ import useSmileStore from "../../stores/smilestore";
 const api = useViewAPI();
 const store = useSmileStore();
 const config = store.config;
+const dbInfo = ref(null);
+if (import.meta.client) {
+  fetch("/api/db-info").then((r) => r.json()).then((data) => {
+    dbInfo.value = data;
+  }).catch(() => {
+  });
+}
 const selectedService = ref(null);
 const baseUrl = computed(() => {
   if (config.deployURL) return config.deployURL.replace(/\/$/, "");
@@ -90,7 +97,7 @@ const services = {
     studyUrl: computed(() => `${baseUrl.value}/mturk`),
     setupSteps: [
       `You'll need the <strong>AWS CLI</strong> or a tool like <a href="https://github.com/Mechanical-Turk-Requester" target="_blank" class="underline font-medium">Boto3 (Python)</a> to create ExternalQuestion HITs.`,
-      'Create an ExternalQuestion XML pointing to the MTurk URL shown below: <pre class="mt-1 p-2 bg-gray-100 rounded text-xs overflow-x-auto">&lt;ExternalQuestion xmlns="..."&gt;\n  &lt;ExternalURL&gt;YOUR_MTURK_URL&lt;/ExternalURL&gt;\n  &lt;FrameHeight&gt;800&lt;/FrameHeight&gt;\n&lt;/ExternalQuestion&gt;</pre>',
+      'Create an ExternalQuestion XML pointing to the MTurk URL shown below: <pre class="mt-1 p-2 bg-muted rounded text-xs overflow-x-auto">&lt;ExternalQuestion xmlns="..."&gt;\n  &lt;ExternalURL&gt;YOUR_MTURK_URL&lt;/ExternalURL&gt;\n  &lt;FrameHeight&gt;800&lt;/FrameHeight&gt;\n&lt;/ExternalQuestion&gt;</pre>',
       "Create the HIT using <code>create_hit_type</code> and <code>create_hit_with_hit_type</code> (or equivalent).",
       "SMILE handles the MTurk form submission automatically \u2014 when participants finish, the Thanks page posts their completion to <code>turkSubmitTo</code>.",
       "For testing, use the <strong>MTurk Sandbox</strong> (<code>https://workersandbox.mturk.com</code>) before publishing to production.",
@@ -380,6 +387,16 @@ const currentService = computed(() => services[selectedService.value]);
                 </button>
               </dd>
 
+              <template v-if="dbInfo">
+                <dt class="text-muted-foreground/60">
+                  Database
+                </dt>
+                <dd class="font-mono flex items-center gap-1">
+                  <span class="text-xs">{{ dbInfo.type }}</span>
+                  <code class="text-xs text-muted-foreground">{{ dbInfo.url }}</code>
+                </dd>
+              </template>
+
               <template v-if="config.github?.repoName">
                 <dt class="text-muted-foreground/60">
                   Repo
@@ -545,5 +562,5 @@ const currentService = computed(() => services[selectedService.value]);
 </style>
 
 <style scoped>
-.is-blue{background-color:#66d1ff;color:#393939}.is-red{background-color:#ff6685;color:#393939}.is-light-yellow{background-color:#f5d58a;color:#393939}.is-yellow{background-color:#ffb70f;color:#393939}.is-pink{background-color:pink;color:#393939}.is-green{background-color:#5be4a6;color:#393939}.is-orange{background-color:#ffb366;color:#393939}.is-teal{background-color:#66d9cc;color:#393939}.is-coral{background-color:#ff8c82;color:#393939}.is-purple{background-color:#ebaeff;border:none;color:#393939}@media screen and (max-width:599px){.text-4xl{font-size:1.5em}}@media screen and (max-width:418px){.text-4xl{display:none}}
+.is-blue{background-color:var(--recruit-blue)}.is-blue,.is-red{color:var(--recruit-text)}.is-red{background-color:var(--recruit-red)}.is-light-yellow{background-color:var(--recruit-yellow-light);color:var(--recruit-text)}.is-yellow{background-color:var(--recruit-yellow)}.is-pink,.is-yellow{color:var(--recruit-text)}.is-pink{background-color:var(--recruit-pink)}.is-green{background-color:var(--recruit-green)}.is-green,.is-orange{color:var(--recruit-text)}.is-orange{background-color:var(--recruit-orange)}.is-teal{background-color:var(--recruit-teal)}.is-coral,.is-teal{color:var(--recruit-text)}.is-coral{background-color:var(--recruit-coral)}.is-purple{background-color:var(--recruit-purple);border:none;color:var(--recruit-text)}@media screen and (max-width:599px){.text-4xl{font-size:1.5em}}@media screen and (max-width:418px){.text-4xl{display:none}}
 </style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { Maximize, Moon, RotateCcw, Sun, SunMoon } from "lucide-vue-next";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import ResponsiveDeviceSelect from "./menu/ResponsiveDeviceSelect.vue";
 import { useElementSize } from "@vueuse/core";
 import { devicePresets } from "./devicePresets.js";
@@ -8,7 +8,13 @@ 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,
@@ -126,7 +132,7 @@ const colorMode = computed(() => {
                   size="xs"
                   @click="toggleRotation"
                 >
-                  <RotateCcw :class="{ 'text-blue-400': api.store.dev.isRotated }" />
+                  <RotateCcw :class="{ 'text-link-button-foreground': api.store.dev.isRotated }" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">
@@ -214,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

@@ -79,5 +79,5 @@ onMounted(() => {
 </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:4px solid #f3f3f3;border-radius:50%;border-top-color:#3498db;height:40px;margin-bottom:16px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.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

@@ -18,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]];
       }
     }
@@ -28,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);
@@ -104,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

@@ -51,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();
 }
@@ -105,7 +121,7 @@ function _resetDevState() {
           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>

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

@@ -32,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";
   }
@@ -268,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-dev-lines{border-color:var(--dev-lines)}.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

@@ -108,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/menu/DevConfigPanel.vue

@@ -154,7 +154,7 @@ function resetDevState() {
                   size="xs"
                   @click="toggleRotation"
                 >
-                  <RotateCcw :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/SmileDevAppMenu.vue

@@ -183,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/DatabaseButtonGroup.vue

@@ -58,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/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/SmileDevNavBar.vue

@@ -165,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>
@@ -173,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 />

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

@@ -35,7 +35,7 @@ defineProps({
     <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>
@@ -43,7 +43,7 @@ defineProps({
 
     <!-- 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 />