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

package/dist/module.json

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

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import { defineNuxtModule, createResolver, addServerScanDir, addServerImportsDir, addPlugin, addRouteMiddleware, addLayout, extendPages, addComponentsDir, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerScanDir, addServerImportsDir, addPlugin, addRouteMiddleware, addLayout, extendPages, addComponentsDir, addImports, useLogger } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import { dirname, join, extname, basename } from 'node:path';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
 import tailwindcss from '@tailwindcss/vite';
-import Icons from 'unplugin-icons/vite';
-import Components from 'unplugin-vue-components/vite';
-import IconsResolver from 'unplugin-icons/resolver';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -15,30 +15,75 @@ const module$1 = defineNuxtModule({
   setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    const _require = createRequire(import.meta.url);
     _nuxt.options.ssr = false;
     _nuxt.options.build.transpile.push(runtimeDir);
+    _nuxt.options.nitro = _nuxt.options.nitro || {};
+    _nuxt.options.nitro.watchOptions = _nuxt.options.nitro.watchOptions || {};
+    _nuxt.options.nitro.watchOptions.ignored = _nuxt.options.nitro.watchOptions.ignored || [];
+    if (Array.isArray(_nuxt.options.nitro.watchOptions.ignored)) {
+      _nuxt.options.nitro.watchOptions.ignored.push("**/.data/**");
+    }
+    _nuxt.options.watch = _nuxt.options.watch || {};
+    _nuxt.options.watch.exclude = _nuxt.options.watch.exclude || [];
+    _nuxt.options.watch.exclude.push(".data/**");
+    _nuxt.options.nitro.publicAssets = _nuxt.options.nitro.publicAssets || [];
+    _nuxt.options.nitro.publicAssets.push({
+      dir: resolver.resolve("./runtime/public"),
+      baseURL: "/_smile"
+    });
     addServerScanDir(resolver.resolve("./runtime/server"));
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
     _nuxt.options.runtimeConfig = _nuxt.options.runtimeConfig || {};
     _nuxt.options.runtimeConfig.smile = {
       devPassword: process.env.SMILE_DEV_PASSWORD || "",
+      publicPresentation: process.env.SMILE_PUBLIC_PRESENTATION === "true",
       tursoUrl: process.env.TURSO_DATABASE_URL || "",
       tursoAuthToken: process.env.TURSO_AUTH_TOKEN || ""
     };
     _nuxt.options.runtimeConfig.public = _nuxt.options.runtimeConfig.public || {};
     _nuxt.options.runtimeConfig.public.smile = {
-      codeName: process.env.VITE_CODE_NAME || "",
-      projectRef: process.env.VITE_PROJECT_REF || ""
+      codeName: process.env.VITE_CODE_NAME || "unnamed-experiment",
+      projectRef: process.env.VITE_PROJECT_REF || "local-experiment-main"
     };
     _nuxt.options.alias["#smile-dev"] = resolver.resolve("./runtime/components/dev");
+    _nuxt.options.alias["#smile-composables"] = resolver.resolve("./runtime/composables");
+    for (const dep of ["lucide-vue-next", "@vueuse/core", "motion", "clipboard"]) {
+      _nuxt.options.alias[dep] = dirname(_require.resolve(`${dep}/package.json`));
+    }
+    let smileVersion = "0.0.0";
+    try {
+      const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), "../package.json"), "utf-8"));
+      smileVersion = pkg.version;
+    } catch {
+    }
+    _nuxt.options.vite.define = _nuxt.options.vite.define || {};
+    _nuxt.options.vite.define["import.meta.env.VITE_SMILE_VERSION"] = JSON.stringify(smileVersion);
     _nuxt.options.vite.plugins = _nuxt.options.vite.plugins || [];
     _nuxt.options.vite.plugins.push(tailwindcss());
-    _nuxt.options.vite.plugins.push(Components({
-      resolvers: [IconsResolver()]
-    }));
-    _nuxt.options.vite.plugins.push(Icons({
-      compiler: "vue3"
-    }));
+    _nuxt.options.vite.optimizeDeps = _nuxt.options.vite.optimizeDeps || {};
+    _nuxt.options.vite.optimizeDeps.include = _nuxt.options.vite.optimizeDeps.include || [];
+    _nuxt.options.vite.optimizeDeps.include.push(
+      "@nyuccl/smile > seedrandom",
+      "@nyuccl/smile > lodash",
+      "@nyuccl/smile > clipboard",
+      "@nyuccl/smile > crypto-js/sha256",
+      "@nyuccl/smile > crypto-js/enc-base64",
+      "@nyuccl/smile > json-stable-stringify",
+      "@nyuccl/smile > qrcode-svg",
+      "@nyuccl/smile > lucide-vue-next",
+      "@nyuccl/smile > reka-ui",
+      "@nyuccl/smile > reka-ui/date",
+      "@nyuccl/smile > @internationalized/date",
+      "@nyuccl/smile > vue-sonner",
+      "@nyuccl/smile > class-variance-authority",
+      "@nyuccl/smile > clsx",
+      "@nyuccl/smile > tailwind-merge",
+      "@nyuccl/smile > @vueuse/core",
+      "@nyuccl/smile > uuid",
+      "@nyuccl/smile > axios",
+      "@nyuccl/smile > motion"
+    );
     _nuxt.options.css.push(resolver.resolve("./runtime/css/main.css"));
     addPlugin(resolver.resolve("./runtime/plugins/store-sync.client"));
     addPlugin(resolver.resolve("./runtime/plugins/seed.client"));
@@ -73,16 +118,41 @@ const module$1 = defineNuxtModule({
         path: "/dev-login",
         file: resolver.resolve("./runtime/pages/dev-login.vue")
       });
-      pages.push({
-        name: "info",
-        path: "/info",
-        file: resolver.resolve("./runtime/pages/info.vue")
-      });
     });
-    addComponentsDir({ path: resolver.resolve("./runtime/components/ui"), pathPrefix: false, global: true, extensions: ["vue"] });
-    addComponentsDir({ path: resolver.resolve("./runtime/components/forms"), pathPrefix: false, global: true, extensions: ["vue"] });
-    addComponentsDir({ path: resolver.resolve("./runtime/components/layouts"), pathPrefix: false, global: true, extensions: ["vue"] });
-    addComponentsDir({ path: resolver.resolve("./runtime/components/builtins"), pathPrefix: false, global: true, extensions: ["vue"] });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/ui"), pathPrefix: false, global: true, extensions: ["vue"], priority: -1 });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/forms"), pathPrefix: false, global: true, extensions: ["vue"], priority: -1 });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/layouts"), pathPrefix: false, global: true, extensions: ["vue"], priority: -1 });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/builtins"), pathPrefix: false, global: true, extensions: ["vue"], priority: -1 });
+    const moduleGlobalNames = /* @__PURE__ */ new Set();
+    const moduleComponentDirs = [
+      resolver.resolve("./runtime/components/ui"),
+      resolver.resolve("./runtime/components/forms"),
+      resolver.resolve("./runtime/components/layouts"),
+      resolver.resolve("./runtime/components/builtins")
+    ];
+    function scanDir(dir) {
+      try {
+        for (const entry of readdirSync(dir)) {
+          const full = join(dir, entry);
+          if (statSync(full).isDirectory()) {
+            scanDir(full);
+          } else if (extname(entry) === ".vue") {
+            moduleGlobalNames.add(basename(entry, ".vue"));
+          }
+        }
+      } catch {
+      }
+    }
+    for (const dir of moduleComponentDirs) {
+      scanDir(dir);
+    }
+    _nuxt.hook("components:extend", (components) => {
+      for (const c of components) {
+        if (!c.global && moduleGlobalNames.has(c.pascalName)) {
+          c.global = true;
+        }
+      }
+    });
     addImports([
       { name: "default", as: "useAPI", from: resolver.resolve("./runtime/composables/useAPI") },
       { name: "default", as: "useViewAPI", from: resolver.resolve("./runtime/composables/useViewAPI") },
@@ -96,6 +166,24 @@ const module$1 = defineNuxtModule({
       { name: "default", as: "useSmileStore", from: resolver.resolve("./runtime/stores/smilestore") },
       { name: "default", as: "useLog", from: resolver.resolve("./runtime/stores/log") }
     ]);
+    if (_nuxt.options.dev) {
+      const logger = useLogger("smile");
+      _nuxt.hook("listen", async (_server, listener) => {
+        const { colors } = await import('consola/utils');
+        const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), "../package.json"), "utf-8"));
+        const fmt = (url) => colors.cyan(colors.underline(url));
+        const urls = await listener.getURLs();
+        const local = urls.find((u) => u.type === "local");
+        if (local) {
+          const base = local.url.replace(/\/$/, "");
+          logger.info(``);
+          logger.info(`  ${colors.bold(`SMILE ${pkg.version}`)}`);
+          logger.info(`  Experiment:    ${fmt(base)}`);
+          logger.info(`  Dev:           ${fmt(`${base}/dev/`)}`);
+          logger.info(`  Presentation:  ${fmt(`${base}/presentation/`)}`);
+        }
+      });
+    }
   }
 });
 

package/dist/runtime/components/builtins/AdvertisementView.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<{
+    imageWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    imageWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    imageWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +1,10 @@
 <script setup>
 import { onMounted, ref, onBeforeUnmount } from "vue";
 import { animate } from "motion";
+import useViewAPI from "../../composables/useViewAPI";
+const props = defineProps({
+  imageWidth: { type: [String, Number], default: 320 }
+});
 const api = useViewAPI();
 let timer;
 let clicked = false;
@@ -35,9 +39,9 @@ onBeforeUnmount(() => {
   >
     <img
       ref="logo"
-      src="/brain.svg"
-      width="220"
-      class="dark-aware-img"
+      :src="api.config.advertisementImageFn"
+      :width="props.imageWidth"
+      :class="{ 'dark-aware-img': api.config.advertisementImageInvertDark }"
     >
 
     <h1

package/dist/runtime/components/builtins/AdvertisementView.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<{
+    imageWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    imageWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    imageWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,4 +1,6 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const _props = defineProps({
   debriefText: {
@@ -35,7 +37,7 @@ function finish() {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

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

@@ -1,6 +1,8 @@
 <script setup>
+import { ArrowLeft, ArrowRight, CalendarIcon, User } from "lucide-vue-next";
 import { reactive, computed, ref } from "vue";
-import { CalendarIcon } from "lucide-vue-next";
+import { cn } from "../../lib/utils";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 api.steps.append([{ id: "survey_page1" }, { id: "survey_page2" }, { id: "survey_page3" }]);
 const isPopoverOpen = ref(false);
@@ -75,7 +77,7 @@ function finish() {
       <!-- Page title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-person class="inline mr-2" />Demographic Information
+          <User class="inline mr-2" />Demographic Information
         </h3>
         <p class="text-lg mb-8">
           We request some information about you which we can use to understand aggregate differences between
@@ -290,7 +292,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -450,7 +452,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button
@@ -459,7 +461,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -1188,7 +1190,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowLeft, ArrowRight, Monitor } from "lucide-vue-next";
 import { reactive, computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 api.steps.append([{ id: "device_page1" }, { id: "device_page2" }]);
 if (!api.persist.isDefined("forminfo")) {
@@ -61,7 +63,7 @@ function finish() {
       <!-- Title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-desktop class="inline mr-2" />&nbsp;Computer/Device Information
+          <Monitor class="inline mr-2" />&nbsp;Computer/Device Information
         </h3>
         <p class="text-lg mb-8">
           We request some basic information about the computer you are using right now. We also can use this information
@@ -277,7 +279,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -434,7 +436,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button

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

@@ -1,4 +1,6 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 function finish() {
   api.goNextView();
@@ -22,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">
@@ -31,7 +33,7 @@ function finish() {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

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

@@ -1,4 +1,7 @@
 <script setup>
+import { computed } from "vue";
+import { useRoute } from "#imports";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const route = useRoute();
 const showStatusBar = computed(() => {

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const faveColor = ref("");
 function finish() {
@@ -48,7 +50,7 @@ function finish() {
             @click="finish()"
           >
             next
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const faveNumber = ref("1");
 function finish() {
@@ -48,7 +50,7 @@ function finish() {
             @click="finish()"
           >
             next
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>

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

@@ -1,5 +1,7 @@
 <script setup>
+import { X } from "lucide-vue-next";
 import { watch, onUnmounted } from "vue";
+import useAPI from "../../composables/useAPI";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -44,11 +46,11 @@ 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')"
     >
-      <i-fa6-solid-xmark class="text-xl" />
+      <X class="text-xl" />
     </Button>
 
     <!-- Modal content container -->
@@ -63,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

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch, onBeforeUnmount } from "vue";
 import { animate } from "motion";
+import useViewAPI from "../../composables/useViewAPI";
 const _props = defineProps({
   informedConsentText: {
     type: Object,
@@ -62,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
@@ -83,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/InstructionsQuiz.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowLeft, ArrowRight, CircleAlert, SquareCheckBig } from "lucide-vue-next";
 import { computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const props = defineProps({
   questions: {
@@ -127,7 +129,7 @@ init();
     >
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Did we explain things clearly?
+          <SquareCheckBig class="inline mr-2" />&nbsp;Did we explain things clearly?
         </h3>
         <p class="text-lg mb-8">
           Using the information provided in the previous pages, please select the correct answer for each question. Do
@@ -200,7 +202,7 @@ init();
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous page
             </Button>
             <div v-else />
@@ -210,7 +212,7 @@ init();
               @click="api.isLastBlockStep() ? submitQuiz() : api.goNextStep()"
             >
               {{ api.isLastBlockStep() ? 'Submit' : 'Next page' }}
-              <i-fa6-solid-arrow-right v-if="!api.isLastBlockStep()" />
+              <ArrowRight v-if="!api.isLastBlockStep()" />
             </Button>
           </div>
         </div>
@@ -229,7 +231,7 @@ init();
     <div class="text-center items-center justify-center">
       <h3 class="text-3xl font-bold mb-4">
         <div class="flex justify-center mb-2">
-          <i-fa6-solid-square-check class="text-[4rem]" />
+          <SquareCheckBig class="text-[4rem]" />
         </div>
         Congrats! You passed.
       </h3>
@@ -256,7 +258,7 @@ init();
     <div class="text-center items-center justify-center">
       <h3 class="text-3xl font-bold mb-4">
         <div class="flex justify-center mb-2">
-          <i-bx-error class="text-[4rem]" />
+          <CircleAlert class="text-[4rem]" />
         </div>
         Sorry! You did not get all the answers correct.
       </h3>

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowRight, BookOpen } from "lucide-vue-next";
 import { computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const cond = api.getConditionByName("instructionsVersion");
 const instText = computed(() => {
@@ -32,7 +34,7 @@ function finish(_goto) {
     <div class="w-[80%] h-[80%]">
       <!-- Instruction header with icon -->
       <h1 class="text-2xl font-bold mb-4">
-        <i-material-symbols-integration-instructions class="inline-block mr-2 text-3xl" /> Instructions
+        <BookOpen class="inline-block mr-2 text-3xl" /> Instructions
       </h1>
 
       <!-- Dynamic instruction text based on condition -->
@@ -41,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">
@@ -50,7 +52,7 @@ function finish(_goto) {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

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

@@ -0,0 +1,16 @@
+<script setup>
+const isDev = import.meta.dev;
+</script>
+
+<template>
+  <div
+    v-if="isDev"
+    class="local-dev-banner"
+  >
+    LOCAL DEV SERVER
+  </div>
+</template>
+
+<style scoped>
+.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

@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const props = defineProps({
   estimated_time: {
@@ -81,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
@@ -101,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>