@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/pages/info.vue

@@ -0,0 +1,462 @@
+<script setup>
+import { ref, computed } from "vue";
+const store = useSmileStore();
+const config = store.config;
+const baseUrl = computed(() => {
+  if (config.deployURL) return config.deployURL.replace(/\/$/, "");
+  if (import.meta.client) return window.location.origin;
+  return "https://your-app.vercel.app";
+});
+const urls = store.browserEphemeral.urls;
+const fullUrls = computed(() => {
+  const result = {};
+  for (const [key, path] of Object.entries(urls)) {
+    result[key] = `${baseUrl.value}${path}`;
+  }
+  return result;
+});
+const selectedService = ref("prolific");
+const copied = ref("");
+async function copyToClipboard(text, label) {
+  try {
+    await navigator.clipboard.writeText(text);
+    copied.value = label;
+    setTimeout(() => {
+      copied.value = "";
+    }, 2e3);
+  } catch {
+    const el = document.createElement("textarea");
+    el.value = text;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+    copied.value = label;
+    setTimeout(() => {
+      copied.value = "";
+    }, 2e3);
+  }
+}
+const services = {
+  prolific: {
+    name: "Prolific",
+    color: "bg-blue-100 text-blue-800 border-blue-300",
+    description: "Prolific.co is a dedicated platform for online behavioral research with high-quality participants.",
+    urlNote: 'Prolific appends query parameters automatically. Use the "Study URL" below as your study link in Prolific.',
+    setupSteps: [
+      'Go to <a href="https://app.prolific.co" target="_blank" class="underline font-medium">app.prolific.co</a> and create a new study.',
+      "Set the <strong>Study URL</strong> to the Prolific URL shown below. Prolific will automatically append <code>PROLIFIC_PID</code>, <code>STUDY_ID</code>, and <code>SESSION_ID</code> query parameters.",
+      `Under <strong>Study completion</strong>, select "I'll redirect them using a URL". Set the completion URL to: <code>https://app.prolific.co/submissions/complete?cc=YOUR_CODE</code> (SMILE handles this automatically via the Thanks page).`,
+      "Set your <strong>Audience</strong> filters (country, language, demographics, etc.).",
+      "Set the estimated <strong>completion time</strong> and <strong>reward</strong>. Prolific requires fair pay (currently min ~$8/hr equivalent).",
+      "Click <strong>Preview</strong> to test the external study link opens correctly, then <strong>Publish</strong> when ready."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/prolific`)
+  },
+  cloudresearch: {
+    name: "CloudResearch",
+    color: "bg-pink-100 text-pink-800 border-pink-300",
+    description: "CloudResearch recruits from multiple sources including MTurk, with built-in bot and server farm screening.",
+    urlNote: "CloudResearch appends <code>assignmentId</code>, <code>hitId</code>, <code>turkSubmitTo</code>, and <code>workerId</code> as query parameters.",
+    setupSteps: [
+      'Go to <a href="https://app.cloudresearch.com" target="_blank" class="underline font-medium">app.cloudresearch.com</a> and create a new study.',
+      'Choose <strong>"Survey / External Link"</strong> as your study type.',
+      "Set the <strong>Survey URL</strong> to the CloudResearch URL shown below.",
+      'Under <strong>Completion Code Settings</strong>, choose "I will generate a unique code". SMILE auto-generates a completion code on the Thanks page that participants copy back.',
+      "Configure your <strong>participant requirements</strong> (approval rate, location, etc.).",
+      "Set <strong>payment</strong> and <strong>number of participants</strong>.",
+      "Use the <strong>Preview</strong> button to verify the link works, then <strong>Launch</strong>."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/cloudresearch`)
+  },
+  mturk: {
+    name: "Mechanical Turk",
+    color: "bg-yellow-100 text-yellow-800 border-yellow-300",
+    description: "Amazon Mechanical Turk \u2014 the original crowd labor market for online tasks and research.",
+    urlNote: "MTurk uses an ExternalQuestion HIT type. The URL must be HTTPS. MTurk appends <code>assignmentId</code>, <code>hitId</code>, <code>turkSubmitTo</code>, and <code>workerId</code>.",
+    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 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.",
+      'Monitor HITs via the <a href="https://requester.mturk.com" target="_blank" class="underline font-medium">Requester dashboard</a>.'
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/mturk`)
+  },
+  citizensci: {
+    name: "Citizen Science",
+    color: "bg-green-100 text-green-800 border-green-300",
+    description: "A stand-in for lab-run citizen science portals or custom recruitment.",
+    urlNote: "Parameters <code>CITIZEN_ID</code>, <code>CITIZEN_STUDY_ID</code>, and <code>CITIZEN_SESSION_ID</code> are appended by the referring portal.",
+    setupSteps: [
+      "Configure your citizen science portal to link to the URL shown below.",
+      "The portal should append <code>CITIZEN_ID</code>, <code>CITIZEN_STUDY_ID</code>, and <code>CITIZEN_SESSION_ID</code> as query parameters to identify participants.",
+      "SMILE will read these parameters and store them in the participant's recruitment info.",
+      "On completion, participants see a standard Thanks page. Configure your portal to accept the SMILE completion code if needed."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/citizensci`)
+  },
+  sona: {
+    name: "SONA (Credit)",
+    color: "bg-orange-100 text-orange-800 border-orange-300",
+    description: 'SONA is a platform for running experiments from the university "for credit" pool of students.',
+    urlNote: "SONA appends a <code>survey_code</code> query parameter that is used to grant credit upon completion.",
+    setupSteps: [
+      "Log in to your university's SONA system and create a new <strong>Online External Study</strong>.",
+      "Set the <strong>Study URL</strong> to the SONA URL shown below. SONA will automatically replace <code>%SURVEY_CODE%</code> with the participant's unique code.",
+      "Under <strong>Study Information</strong>, set the estimated duration and number of credits.",
+      "Set your <strong>Participant Restrictions</strong> (prerequisites, disqualifiers, etc.).",
+      "Configure the following environment variables in your deployment: <code>VITE_SONA_URL</code> (your SONA domain), <code>VITE_SONA_EXPERIMENT_ID</code>, and <code>VITE_SONA_CREDIT_TOKEN</code>.",
+      "SMILE automatically redirects participants back to SONA to grant credit upon completion."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/sona/?survey_code=%SURVEY_CODE%`)
+  },
+  sona_paid: {
+    name: "SONA (Paid)",
+    color: "bg-teal-100 text-teal-800 border-teal-300",
+    description: "SONA Paid is a platform for running paid experiments from the university participant pool.",
+    urlNote: "Same as SONA credit but uses separate config for paid study completion.",
+    setupSteps: [
+      "Log in to your university's SONA system and create a new <strong>Online External Study</strong> (paid type).",
+      "Set the <strong>Study URL</strong> to the SONA Paid URL shown below.",
+      "Configure payment amount and study duration.",
+      "Configure the following environment variables: <code>VITE_SONA_PAID_URL</code>, <code>VITE_SONA_PAID_EXPERIMENT_ID</code>, and <code>VITE_SONA_PAID_CREDIT_TOKEN</code>.",
+      "SMILE automatically redirects participants back to SONA for payment upon completion."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/sona_paid/?survey_code=%SURVEY_CODE%`)
+  },
+  spark: {
+    name: "SPARK",
+    color: "bg-red-100 text-red-800 border-red-300",
+    description: "SPARK is a recruitment service from the Hartley Lab for adolescent participants of various ages.",
+    urlNote: "SPARK appends <code>subject_ID</code>, <code>participant_ID</code>, <code>age</code>, and <code>gender</code> as query parameters.",
+    setupSteps: [
+      "Coordinate with the SPARK platform team to register your study.",
+      "Provide the SPARK URL shown below as the study link.",
+      "SPARK will append participant demographic information (subject ID, participant ID, age, gender) as query parameters.",
+      "Upon completion, SMILE redirects participants back to the SPARK completion endpoint."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/spark`)
+  },
+  panda: {
+    name: "PANDA",
+    color: "bg-rose-100 text-rose-800 border-rose-300",
+    description: "PANDA (Princeton and NYU Discoveries in Action) is a recruitment platform for younger participants.",
+    urlNote: "PANDA appends an <code>ID</code> query parameter to identify the participant.",
+    setupSteps: [
+      'Register your study with the <a href="https://www.discoveriesinaction.org" target="_blank" class="underline font-medium">PANDA platform</a>.',
+      "Provide the PANDA URL shown below as the study link.",
+      "PANDA loads studies in dual iframes (mobile/desktop). SMILE automatically detects and handles the hidden iframe.",
+      "Note: PANDA clears localStorage on each session start to support families running the study multiple times.",
+      "Upon completion, participants see a generic thanks message. No redirect is performed."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome/panda`)
+  },
+  web: {
+    name: "Anonymous Web",
+    color: "bg-purple-100 text-purple-800 border-purple-300",
+    description: "Direct web access \u2014 no recruitment service. Participants arrive via a shared link.",
+    urlNote: "No special query parameters. Share this URL directly.",
+    setupSteps: [
+      "Share the URL shown below via email, social media, QR code, or any other channel.",
+      "Participants are assigned a random anonymous ID. No recruitment service metadata is collected.",
+      "Since there is no external payment system, you'll need to arrange compensation separately if applicable.",
+      "This mode is useful for pilot testing, demos, or unpaid studies."
+    ],
+    studyUrl: computed(() => `${baseUrl.value}/welcome`)
+  }
+};
+const currentService = computed(() => services[selectedService.value]);
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 text-gray-900 font-sans">
+    <div class="max-w-3xl mx-auto px-4 py-10">
+      <!-- Header -->
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold mb-2">
+          Experiment Info
+        </h1>
+        <p class="text-gray-600">
+          Deployment details, recruitment URLs, and setup instructions for your experiment.
+        </p>
+      </div>
+
+      <!-- Experiment Details Card -->
+      <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+        <h2 class="text-lg font-semibold mb-4">
+          Experiment Details
+        </h2>
+        <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
+          <dt class="text-gray-500 font-medium">
+            Project
+          </dt>
+          <dd>{{ config.projectName || config.projectRef || '(not set)' }}</dd>
+
+          <dt class="text-gray-500 font-medium">
+            Code Name
+          </dt>
+          <dd>{{ config.codeName || '(not set)' }}</dd>
+
+          <dt class="text-gray-500 font-medium">
+            Version
+          </dt>
+          <dd>{{ config.smileVersion || '(not set)' }}</dd>
+
+          <template v-if="config.github?.repoName">
+            <dt class="text-gray-500 font-medium">
+              Repository
+            </dt>
+            <dd>
+              <a
+                :href="`https://github.com/${config.github.owner}/${config.github.repoName}`"
+                target="_blank"
+                class="text-blue-600 underline"
+              >
+                {{ config.github.owner }}/{{ config.github.repoName }}
+              </a>
+            </dd>
+
+            <dt class="text-gray-500 font-medium">
+              Branch
+            </dt>
+            <dd>{{ config.github.branch || '(unknown)' }}</dd>
+
+            <dt class="text-gray-500 font-medium">
+              Last Commit
+            </dt>
+            <dd>
+              <a
+                v-if="config.github.lastCommitHash"
+                :href="config.github.commitURL"
+                target="_blank"
+                class="text-blue-600 underline font-mono text-xs"
+              >
+                {{ config.github.lastCommitHash }}
+              </a>
+              <span
+                v-if="config.github.lastCommitMsg"
+                class="ml-2 text-gray-500"
+              >
+                {{ config.github.lastCommitMsg }}
+              </span>
+            </dd>
+          </template>
+
+          <dt class="text-gray-500 font-medium">
+            Deploy URL
+          </dt>
+          <dd class="font-mono text-xs break-all">
+            {{ baseUrl }}
+          </dd>
+        </dl>
+
+        <!-- QR Code for production URL -->
+        <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4">
+          <img
+            :src="`/api/qr?url=${encodeURIComponent(baseUrl)}`"
+            alt="QR Code"
+            class="w-32 h-32"
+          >
+          <div class="text-sm text-gray-500">
+            <p class="font-medium text-gray-700 mb-1">
+              QR Code
+            </p>
+            <p>Scan to open the experiment on a mobile device, or download for posters and presentations.</p>
+            <a
+              :href="`/api/qr?url=${encodeURIComponent(baseUrl)}`"
+              download="qr.svg"
+              class="inline-flex items-center gap-1 mt-2 text-blue-600 underline text-xs"
+            >
+              Download SVG
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quick Links -->
+      <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+        <h2 class="text-lg font-semibold mb-4">
+          Mode URLs
+        </h2>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <div>
+              <span class="font-medium">Production</span>
+              <span class="text-gray-500 ml-2">— participants see this</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ baseUrl }}/</code>
+              <button
+                class="text-xs px-2 py-1 border rounded hover:bg-gray-50"
+                @click="copyToClipboard(`${baseUrl}/`, 'prod')"
+              >
+                {{ copied === 'prod' ? 'Copied!' : 'Copy' }}
+              </button>
+            </div>
+          </div>
+          <div class="flex items-center justify-between">
+            <div>
+              <span class="font-medium">Dev Mode</span>
+              <span class="text-gray-500 ml-2">— sidebar + console</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ baseUrl }}/dev/</code>
+              <button
+                class="text-xs px-2 py-1 border rounded hover:bg-gray-50"
+                @click="copyToClipboard(`${baseUrl}/dev/`, 'dev')"
+              >
+                {{ copied === 'dev' ? 'Copied!' : 'Copy' }}
+              </button>
+            </div>
+          </div>
+          <div class="flex items-center justify-between">
+            <div>
+              <span class="font-medium">Presentation</span>
+              <span class="text-gray-500 ml-2">— nav bar for demos</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ baseUrl }}/presentation/</code>
+              <button
+                class="text-xs px-2 py-1 border rounded hover:bg-gray-50"
+                @click="copyToClipboard(`${baseUrl}/presentation/`, 'pres')"
+              >
+                {{ copied === 'pres' ? 'Copied!' : 'Copy' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recruitment Service Section -->
+      <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+        <h2 class="text-lg font-semibold mb-4">
+          Recruitment Service Setup
+        </h2>
+
+        <!-- Service Selector -->
+        <div class="mb-6">
+          <label
+            for="service-select"
+            class="block text-sm font-medium text-gray-700 mb-1"
+          >
+            Select a recruitment platform:
+          </label>
+          <select
+            id="service-select"
+            v-model="selectedService"
+            class="w-full max-w-xs border border-gray-300 rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="prolific">
+              Prolific
+            </option>
+            <option value="cloudresearch">
+              CloudResearch
+            </option>
+            <option value="mturk">
+              Mechanical Turk
+            </option>
+            <option value="sona">
+              SONA (Credit)
+            </option>
+            <option value="sona_paid">
+              SONA (Paid)
+            </option>
+            <option value="spark">
+              SPARK
+            </option>
+            <option value="panda">
+              PANDA
+            </option>
+            <option value="citizensci">
+              Citizen Science
+            </option>
+            <option value="web">
+              Anonymous Web
+            </option>
+          </select>
+        </div>
+
+        <!-- Selected Service Details -->
+        <div
+          class="border rounded-lg overflow-hidden"
+          :class="currentService.color.replace(/text-\S+/, '').trim()"
+        >
+          <div
+            class="px-4 py-3 border-b"
+            :class="currentService.color"
+          >
+            <h3 class="font-semibold">
+              {{ currentService.name }}
+            </h3>
+            <p class="text-sm mt-1 opacity-80">
+              {{ currentService.description }}
+            </p>
+          </div>
+
+          <div class="p-4 bg-white">
+            <!-- Study URL -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Study URL</label>
+              <p
+                class="text-xs text-gray-500 mb-2"
+                v-html="currentService.urlNote"
+              />
+              <div class="flex items-center gap-2">
+                <code class="flex-1 text-xs bg-gray-50 border rounded px-3 py-2 break-all select-all">
+                  {{ currentService.studyUrl.value }}
+                </code>
+                <button
+                  class="shrink-0 text-xs px-3 py-2 border rounded hover:bg-gray-50 font-medium"
+                  @click="copyToClipboard(currentService.studyUrl.value, 'study')"
+                >
+                  {{ copied === 'study' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Full Test URL (with example params) -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Test URL (with example params)</label>
+              <div class="flex items-center gap-2">
+                <code class="flex-1 text-xs bg-gray-50 border rounded px-3 py-2 break-all select-all">
+                  {{ fullUrls[selectedService] }}
+                </code>
+                <button
+                  class="shrink-0 text-xs px-3 py-2 border rounded hover:bg-gray-50 font-medium"
+                  @click="copyToClipboard(fullUrls[selectedService], 'test')"
+                >
+                  {{ copied === 'test' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Setup Instructions -->
+            <div>
+              <h4 class="text-sm font-medium text-gray-700 mb-2">
+                Setup Instructions
+              </h4>
+              <ol class="list-decimal list-outside ml-5 space-y-2 text-sm text-gray-700">
+                <li
+                  v-for="(step, i) in currentService.setupSteps"
+                  :key="i"
+                  class="leading-relaxed"
+                  v-html="step"
+                />
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Back link -->
+      <div class="text-center text-sm text-gray-500">
+        <NuxtLink
+          to="/dev/"
+          class="text-blue-600 underline"
+        >Back to Dev Mode</NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/pages/info.vue.d.ts

@@ -0,0 +1,3 @@
+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>;

package/dist/runtime/pages/presentation/[...slug].d.vue.ts

@@ -0,0 +1,3 @@
+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>;

package/dist/runtime/pages/presentation/[...slug].vue

@@ -0,0 +1,65 @@
+<template>
+  <NuxtLayout name="presentation">
+    <!-- Presentation home page at /presentation/ root -->
+    <component
+      :is="presentationHome"
+      v-if="isRoot && timelineReady"
+      v-bind="presentationHomeProps"
+    />
+    <!-- Normal timeline view resolution -->
+    <component
+      :is="viewConfig.component"
+      v-else-if="viewConfig && viewConfig.component"
+      v-bind="viewConfig.props"
+    />
+    <div v-else-if="viewConfig === null && timelineReady">
+      <h1>Page not found</h1>
+      <p>No view registered for path: {{ experimentPath }}</p>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup>
+import PresentationModeView from "../../components/builtins/PresentationModeView.vue";
+import useSmileStore from "../../stores/smilestore";
+const route = useRoute();
+const nuxtApp = useNuxtApp();
+const store = useSmileStore();
+const timelineReady = ref(false);
+const experimentPath = computed(() => {
+  return route.path.replace(/^\/presentation/, "") || "/";
+});
+const isRoot = computed(() => {
+  return experimentPath.value === "/";
+});
+const presentationHome = computed(() => {
+  if (!timelineReady.value) return null;
+  return store.config.global_app_components?.presentation_home || PresentationModeView;
+});
+const presentationHomeProps = computed(() => {
+  if (!timelineReady.value) return {};
+  return store.config.global_app_components?.presentation_home_props || {};
+});
+const viewConfig = computed(() => {
+  if (!timelineReady.value) return void 0;
+  const timeline = nuxtApp.$timeline;
+  if (!timeline) return void 0;
+  return timeline.getViewForPath(experimentPath.value);
+});
+onMounted(() => {
+  timelineReady.value = true;
+});
+watch(viewConfig, (config) => {
+  if (isRoot.value) return;
+  if (config && config.redirect) {
+    if (config.redirect.name) {
+      const target = nuxtApp.$timeline.routes.find((r) => r.name === config.redirect.name);
+      if (target) {
+        navigateTo("/presentation" + target.path);
+      }
+    } else if (config.redirect.path) {
+      navigateTo("/presentation" + config.redirect.path);
+    }
+  }
+}, { immediate: true });
+</script>

package/dist/runtime/pages/presentation/[...slug].vue.d.ts

@@ -0,0 +1,3 @@
+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>;

package/dist/runtime/plugins/dev-sync.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/dev-sync.client.js

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview Client-only plugin that syncs store.dev changes back to the
+ * dev cookie. Needed because Pinia SSR hydration replaces the useCookie() ref
+ * with a plain object, breaking the two-way cookie binding.
+ */
+import { defineNuxtPlugin } from '#imports'
+import { watch } from 'vue'
+import useSmileStore from '../stores/smilestore.js'
+import appconfig from '../core/config.js'
+
+export default defineNuxtPlugin(() => {
+  if (appconfig.mode !== 'development') return
+
+  const store = useSmileStore()
+  const cookieName = `smile_${appconfig.codeName}_dev`
+
+  // Sync store.dev → cookie on every change, writing directly to document.cookie
+  watch(
+    () => store.dev,
+    (val) => {
+      const encoded = encodeURIComponent(JSON.stringify(val))
+      document.cookie = `${cookieName}=${encoded}; path=/; max-age=${86400 * 365}; SameSite=Lax`
+    },
+    { deep: true },
+  )
+})

package/dist/runtime/plugins/seed.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/seed.client.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Client-only plugin that initializes the global random seed.
+ * Extracted from smilestore.js module-scope code to avoid running during SSR.
+ *
+ * This plugin reads seed state from the store (cookieState + localState),
+ * calls seedrandom() to set the global Math.random seed, and writes
+ * the seedID/seedSet back to the store if newly generated.
+ *
+ * Must run AFTER store-sync.client.js so localState is patched from localStorage.
+ */
+import { defineNuxtPlugin } from '#imports'
+import { v4 as uuidv4 } from 'uuid'
+import seedrandom from 'seedrandom'
+import useSmileStore from '../stores/smilestore.js'
+
+export default defineNuxtPlugin(() => {
+  const store = useSmileStore()
+
+  const useSeed = store.localState.useSeed
+  const seedSet = store.cookieState.seedSet
+  const existingSeedID = store.cookieState.seedID
+
+  let seed
+  if (useSeed) {
+    if (seedSet && existingSeedID) {
+      seed = existingSeedID
+    }
+    else {
+      seed = uuidv4()
+    }
+  }
+  else {
+    seed = null
+  }
+
+  if (seed) {
+    seedrandom(seed, { global: true })
+
+    if (!seedSet || existingSeedID !== seed) {
+      store.cookieState.seedID = seed
+      store.cookieState.seedSet = true
+    }
+  }
+})

package/dist/runtime/plugins/store-sync.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;