@nyuccl/smile 0.2.0-beta.3 → 0.2.0-beta.32

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nyuccl/smile",
   "configKey": "smile",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.32",
   "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 } from 'node:path';
+import { readFileSync } 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,13 +15,21 @@ 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.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 || ""
     };
@@ -31,14 +39,35 @@ const module$1 = defineNuxtModule({
       projectRef: process.env.VITE_PROJECT_REF || ""
     };
     _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`));
+    }
     _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,11 +102,6 @@ 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"] });
@@ -96,6 +120,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();
@@ -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,
@@ -48,7 +50,7 @@ onUnmounted(() => {
       aria-label="close"
       @click="$emit('toggleConsent')"
     >
-      <i-fa6-solid-xmark class="text-xl" />
+      <X class="text-xl" />
     </Button>
 
     <!-- Modal content container -->

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,

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 -->
@@ -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,#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}
+</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: {

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { ArrowRight } from "lucide-vue-next";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const props = defineProps({
   title: {
@@ -77,14 +78,14 @@ function goToSection(section) {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background">
+  <div class="min-h-full flex flex-col bg-background">
     <!-- Header Section -->
     <header class="bg-muted/50 border-b py-6">
       <div class="w-2/3 mx-auto px-6 py-8">
         <h1 class="text-5xl font-bold text-foreground mb-4 leading-tight">
           {{ title }}
         </h1>
-        <p class="text-2xl text-muted-foreground leading-relaxed">
+        <p class="text-lg text-muted-foreground leading-relaxed">
           {{ subtitle }}
         </p>
       </div>
@@ -95,7 +96,7 @@ function goToSection(section) {
       <div class="w-2/3 mx-auto px-6 py-8">
         <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
           <!-- Authors -->
-          <div class="md:col-span-2">
+          <div class="md:col-span-3">
             <h3 class="text-[0.65rem] font-extralight uppercase tracking-widest text-muted-foreground mb-4">
               Authors
             </h3>
@@ -132,7 +133,7 @@ function goToSection(section) {
           </div>
 
           <!-- Affiliations -->
-          <div class="md:col-span-3">
+          <div class="md:col-span-4">
             <h3 class="text-[0.65rem] font-extralight uppercase tracking-widest text-muted-foreground mb-4">
               Affiliations
             </h3>
@@ -183,13 +184,13 @@ function goToSection(section) {
     </section>
 
     <!-- Main Content -->
-    <main class="w-2/3 mx-auto px-6 py-12">
+    <main class="w-2/3 mx-auto px-6 py-12 flex-1">
       <!-- Project Description -->
       <div class="prose prose-gray max-w-none mb-12">
         <p
           v-for="(paragraph, index) in descriptionParagraphs"
           :key="index"
-          class="text-lg text-muted-foreground leading-relaxed mb-4"
+          class="text-md text-muted-foreground leading-relaxed mb-4"
         >
           {{ paragraph }}
         </p>
@@ -204,12 +205,12 @@ function goToSection(section) {
           :key="index"
         >
           <div>
-            <h3 class="text-xl font-semibold text-foreground mb-3">
+            <h3 class="text-base font-semibold text-foreground mb-2">
               {{ section.title }}
             </h3>
             <p
               v-if="section.description"
-              class="text-lg text-muted-foreground mb-4"
+              class="text-md text-muted-foreground mb-3"
             >
               {{ section.description }}
             </p>

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

@@ -1,5 +1,8 @@
 <script setup>
+import { CircleX, Hand, Search } from "lucide-vue-next";
 import { ref } from "vue";
+import useSmileStore from "../../stores/smilestore";
+import useAPI from "../../composables/useAPI";
 const smilestore = useSmileStore();
 const api = useAPI();
 const email = ref("");
@@ -48,7 +51,7 @@ function submitWithdraw() {
       >
         <img
           :src="api.getPublicUrl(api.config.brandLogoFn)"
-          width="90"
+          width="120"
           class="dark-aware-img"
         >
       </a>
@@ -80,7 +83,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleConsent()"
             >
-              <i-fa6-solid-magnifying-glass />
+              <Search />
               <span class="@[400px]:inline hidden">View consent</span>
             </Button>
             <Button
@@ -93,7 +96,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleWithdraw()"
             >
-              <i-fa6-solid-circle-xmark />
+              <CircleX />
               <span class="@[400px]:inline hidden">Withdraw</span>
             </Button>
             <Button
@@ -102,7 +105,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleReport()"
             >
-              <i-fa6-solid-hand />
+              <Hand />
               Report issue
             </Button>
           </div>

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

@@ -1,4 +1,6 @@
 <script setup>
+import { Sparkles } from "lucide-vue-next";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const _props = defineProps({
   estimated_time: {
@@ -50,16 +52,16 @@ const _props = defineProps({
     <template #right>
       <!-- Lab logo (hidden on smaller screens) -->
       <img
-        src="@/user/assets/brain.svg"
+        :src="api.config.advertisementImageFn"
         width="220"
-        class="mb-4 hidden @xl:block"
+        :class="['mb-4 hidden @xl:block', { 'dark-aware-img': api.config.advertisementImageInvertDark }]"
       >
 
       <!-- Lab information card -->
       <article class="border border-gray-300 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">
-          <p><i-fa6-solid-bahai class="inline" />&nbsp;&nbsp;Who are we?</p>
+          <p><Sparkles class="inline" />&nbsp;&nbsp;Who are we?</p>
         </div>
 
         <!-- Card content with lab details -->

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

@@ -1,5 +1,7 @@
 <script setup>
+import { Pencil } from "lucide-vue-next";
 import { reactive, computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 if (!api.persist.isDefined("forminfo")) {
   api.persist.forminfo = reactive({
@@ -46,7 +48,7 @@ function finish() {
       <!-- Page title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-pencil class="inline mr-2" />&nbsp;Give us feedback
+          <Pencil class="inline mr-2" />&nbsp;Give us feedback
         </h3>
         <p class="text-lg mb-8">
           Please give us feedback about your experience with the study. Your feedback will help us improve our study and