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

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: {
@@ -37,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>
@@ -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">
+      <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">
-          <p><i-fa6-solid-bahai class="inline" />&nbsp;&nbsp;Who are we?</p>
+        <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>
 
         <!-- Card content with lab details -->
@@ -69,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/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

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

@@ -1,7 +1,8 @@
 <script setup>
-import * as _Clipboard from "clipboard";
+import { ArrowRight, ClipboardCopy, SquareCheckBig } from "lucide-vue-next";
+import Clipboard from "clipboard";
 import { onMounted, ref } from "vue";
-const Clipboard = _Clipboard.default || _Clipboard;
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const alreadyCompleted = !!api.store.cookieState.completionCode;
 const isUploading = ref(!alreadyCompleted);
@@ -78,7 +79,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to begin the process of payment. This will notify Prolific you successfully
@@ -104,7 +105,7 @@ onMounted(() => {
                 :href="`https://app.prolific.co/submissions/complete?cc=${completionCode}`"
               >
                 Submit my work to Prolific
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -120,7 +121,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please copy the code displayed below (or click the button) and paste it into the Mechanical Turk window to
@@ -154,7 +155,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-cloudresearch"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -171,7 +172,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please verify the code displayed below is visible in the form on the Mechanical Turk website. If it is not
@@ -206,7 +207,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-mturk"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -223,7 +224,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               This still needs to be implemented
@@ -247,7 +248,7 @@ onMounted(() => {
                 :href="!api.config.anonymousMode ? 'http://gureckislab.org' : 'http://google.com'"
               >
                 Submit my work
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -263,7 +264,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's record your credit!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's record your credit!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SONA and receive credit for completing this study.
@@ -285,10 +286,10 @@ 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
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -304,7 +305,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SONA and begin the payment process.
@@ -326,10 +327,10 @@ 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
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -345,7 +346,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SPARK and complete your session.
@@ -367,10 +368,10 @@ 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
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -386,7 +387,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Your data have been successfully recorded. You may now close this window or follow any
@@ -422,7 +423,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Your data have been successfully recorded and you can close this window or navigate to another page.

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

@@ -1,4 +1,6 @@
 <script setup>
+import { ArrowRight, Move } from "lucide-vue-next";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const props = defineProps(["triggered"]);
 function finish() {
@@ -27,7 +29,7 @@ function finish() {
       >
         <!-- Resize icon -->
         <div class="text-4xl text-window-sizer-text mb-4 flex justify-center">
-          <i-fa6-solid-arrows-up-down-left-right />
+          <Move />
         </div>
 
         <!-- Main instruction text -->
@@ -55,7 +57,7 @@ function finish() {
             @click="finish()"
           >
             It is visible now, I'm ready
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>
@@ -67,7 +69,7 @@ function finish() {
       >
         <!-- Resize icon -->
         <span class="text-4xl text-window-sizer-text mb-4 flex justify-center">
-          <i-fa6-solid-arrows-up-down-left-right />
+          <Move />
         </span>
 
         <!-- Re-adjustment instruction text -->

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

@@ -1,5 +1,7 @@
 <script setup>
+import { LogOut, X } from "lucide-vue-next";
 import { reactive, watch, onUnmounted } from "vue";
+import useAPI from "../../composables/useAPI";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -68,11 +70,11 @@ 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')"
     >
-      <i-fa6-solid-xmark class="text-xl" />
+      <X class="text-xl" />
     </Button>
 
     <!-- Modal content container -->
@@ -83,7 +85,7 @@ onUnmounted(() => {
           <!-- Modal header with title -->
           <template #title>
             <h3 class="text-3xl font-semibold">
-              <i-ph-hand-withdraw-thin class="text-red-500 inline-block mr-2" />Withdraw from study?
+              <LogOut class="text-destructive inline-block mr-2" />Withdraw from study?
             </h3>
           </template>
 
@@ -114,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) {
@@ -139,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>
@@ -157,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>
@@ -175,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/builtins/WithdrawView.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { AlertTriangle, HandMetal } from "lucide-vue-next";
 import { computed } from "vue";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 api.saveData(true);
 const cardContent = {
@@ -66,7 +68,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-bye class="text-withdraw-text inline-block text-5xl mb-2" />
+            <HandMetal class="text-withdraw-text inline-block text-5xl mb-2" />
             <br>{{ content.title }}
           </p>
         </CardHeader>
@@ -82,7 +84,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-attention class="text-warning-text inline-block text-5xl mb-2" />
+            <AlertTriangle class="text-warning-text inline-block text-5xl mb-2" />
             <br>Access Error
           </p>
         </CardHeader>