@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/dev/menu/DevConfigPanel.vue

@@ -0,0 +1,178 @@
+<script setup>
+import ResponsiveDeviceSelect from "./ResponsiveDeviceSelect.vue";
+import { devicePresets } from "../devicePresets.js";
+const api = useAPI();
+const checkForMatchingPreset = () => {
+  for (const [key, preset] of Object.entries(devicePresets)) {
+    const matchesNormal = api.store.dev.deviceWidth === preset.width && api.store.dev.deviceHeight === preset.height;
+    const matchesRotated = api.store.dev.deviceWidth === preset.height && api.store.dev.deviceHeight === preset.width;
+    if (matchesNormal || matchesRotated) {
+      api.store.dev.selectedDevice = key;
+      return;
+    }
+  }
+  api.store.dev.selectedDevice = "custom";
+};
+const toggleRotation = () => {
+  const tempWidth = api.store.dev.deviceWidth;
+  api.store.dev.deviceWidth = api.store.dev.deviceHeight;
+  api.store.dev.deviceHeight = tempWidth;
+  api.store.dev.isRotated = !api.store.dev.isRotated;
+  checkForMatchingPreset();
+};
+function resetDevState() {
+  localStorage.removeItem(api.config.devLocalStorageKey);
+  const defaults = { viewProvidesAutofill: null, viewProvidesStepper: false, showConsoleBar: false, showSideBar: false, pinnedRoute: null, mainView: "devmode", consoleBarHeight: 300, consoleBarTab: "browse", sideBarTab: "steps", searchParams: "", logFilter: "All", notificationFilter: "Errors only", lastViewLimit: false, dataPath: null, configPath: null, selectedDevice: "desktop2", deviceWidth: 1024, deviceHeight: 768, isRotated: false, isFullscreen: false, routePanelVisible: false, globalColorMode: "auto", experimentColorMode: "auto" };
+  Object.assign(api.store.dev, defaults);
+  location.reload();
+}
+</script>
+
+<template>
+  <!-- Main configuration container -->
+  <div class="grid gap-4">
+    <!-- Header section with title and description -->
+    <div class="space-y-2">
+      <h4 class="font-medium leading-none">
+        Developer Configurations
+      </h4>
+      <p class="text-sm text-muted-foreground">
+        Adjust or reset developer mode settings.
+      </p>
+    </div>
+
+    <!-- Visual separator with "Panels" label -->
+    <div class="relative">
+      <div class="absolute inset-0 flex items-center">
+        <Separator />
+      </div>
+      <div class="relative flex justify-center text-xs uppercase">
+        <span class="bg-background px-2 text-muted-foreground">Panels</span>
+      </div>
+    </div>
+
+    <!-- Configuration options grid -->
+    <div class="grid gap-2">
+      <!-- Sidebar visibility toggle -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="sidebar">Show Sidebar</Label>
+        <Switch
+          id="sidebar"
+          v-model="api.store.dev.showSideBar"
+          class="col-span-2"
+        />
+      </div>
+
+      <!-- Sidebar tab selection -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="sidebarTab">Sidebar Tab</Label>
+        <div class="col-span-2">
+          <Select v-model="api.store.dev.sideBarTab">
+            <SelectTrigger>
+              <SelectValue placeholder="Select tab" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="steps">
+                Steps
+              </SelectItem>
+              <SelectItem value="randomization">
+                Random
+              </SelectItem>
+              <SelectItem value="db">
+                Info
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <!-- Console visibility toggle -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="console">Show Console</Label>
+        <Switch
+          id="console"
+          v-model="api.store.dev.showConsoleBar"
+          class="col-span-2"
+        />
+      </div>
+
+      <!-- Console tab selection -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="consoleBarTab">Console Tab</Label>
+        <div class="col-span-2">
+          <Select v-model="api.store.dev.consoleBarTab">
+            <SelectTrigger>
+              <SelectValue placeholder="Select tab" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="browse">
+                Data Browser
+              </SelectItem>
+              <SelectItem value="log">
+                Log
+              </SelectItem>
+              <SelectItem value="config">
+                Config
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <!-- Visual separator with "Responsive Mode" label -->
+      <div class="relative mt-5">
+        <div class="absolute inset-0 flex items-center">
+          <Separator />
+        </div>
+        <div class="relative flex justify-center text-xs uppercase">
+          <span class="bg-background px-2 text-muted-foreground">Responsive Mode</span>
+        </div>
+      </div>
+
+      <!-- Fullscreen toggle -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="width">Full screen</Label>
+        <Switch
+          id="width"
+          v-model="api.store.dev.isFullscreen"
+          class="col-span-2"
+        />
+      </div>
+
+      <!-- Device selection with rotation button -->
+      <div class="grid grid-cols-3 items-center gap-4">
+        <Label for="device">Target Device</Label>
+        <div class="col-span-2 flex items-center gap-2">
+          <ResponsiveDeviceSelect />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="outline"
+                  size="xs"
+                  @click="toggleRotation"
+                >
+                  <i-carbon-rotate-counterclockwise-filled :class="{ 'text-blue-400': api.store.dev.isRotated }" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Rotate device</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    </div>
+
+    <!-- Reset button section -->
+    <div class="flex justify-end mt-5">
+      <Button
+        variant="outline"
+        size="sm"
+        @click="resetDevState"
+      >
+        Reset to Default
+      </Button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/dev/menu/DevConfigPanel.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/components/dev/menu/ResponsiveDeviceSelect.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/components/dev/menu/ResponsiveDeviceSelect.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { devicePresets } from "../devicePresets.js";
+const api = useAPI();
+const handleDeviceChange = (value) => {
+  console.log("handleDeviceChange called with:", value);
+  if (value === "custom") {
+    api.store.dev.selectedDevice = "custom";
+    return;
+  }
+  const preset = devicePresets[value];
+  console.log("preset found:", preset);
+  if (preset) {
+    api.store.dev.deviceWidth = preset.width;
+    api.store.dev.deviceHeight = preset.height;
+    api.store.dev.selectedDevice = value;
+    console.log("Updated dimensions to:", api.store.dev.deviceWidth, "x", api.store.dev.deviceHeight);
+  } else {
+    console.log("No preset found for value:", value);
+  }
+};
+</script>
+
+<template>
+  <!-- Device selection dropdown -->
+  <Select
+    v-model="api.store.dev.selectedDevice"
+    @update:model-value="handleDeviceChange"
+  >
+    <SelectTrigger class="select-small">
+      <SelectValue placeholder="Custom size" />
+    </SelectTrigger>
+    <SelectContent>
+      <!-- Mobile devices group -->
+      <SelectGroup>
+        <SelectLabel class="mt-2">
+          Mobile
+        </SelectLabel>
+        <SelectItem value="iphone">
+          iPhone
+        </SelectItem>
+        <SelectItem value="iphone-plus">
+          iPhone Plus
+        </SelectItem>
+        <SelectItem value="iphone-pro">
+          iPhone Pro
+        </SelectItem>
+        <SelectItem value="iphone-pro-max">
+          iPhone Pro Max
+        </SelectItem>
+        <SelectItem value="iphone-se">
+          iPhone SE
+        </SelectItem>
+      </SelectGroup>
+
+      <!-- Tablet devices group -->
+      <SelectGroup>
+        <SelectLabel class="mt-2">
+          Tablet
+        </SelectLabel>
+        <SelectItem value="ipad-11">
+          iPad 11-inch
+        </SelectItem>
+        <SelectItem value="ipad-13">
+          iPad 13-inch
+        </SelectItem>
+      </SelectGroup>
+
+      <!-- Desktop resolutions group -->
+      <SelectGroup>
+        <SelectLabel class="mt-2">
+          Desktop
+        </SelectLabel>
+        <SelectItem value="desktop1">
+          800x600
+        </SelectItem>
+        <SelectItem value="desktop2">
+          1024x768
+        </SelectItem>
+        <SelectItem value="desktop3">
+          1280x1024
+        </SelectItem>
+        <SelectItem value="desktop4">
+          1440x900
+        </SelectItem>
+        <SelectItem value="desktop5">
+          1600x1200
+        </SelectItem>
+        <SelectItem value="desktop16">
+          1920x1080
+        </SelectItem>
+      </SelectGroup>
+
+      <!-- Other options group -->
+      <SelectGroup>
+        <SelectLabel class="mt-2">
+          Other
+        </SelectLabel>
+        <SelectItem value="custom">
+          Custom size
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+
+<style scoped>
+:deep(.select-small){font-size:12px!important;height:28px!important;padding:4px 8px!important}:deep(.select-small svg){height:12px!important;width:12px!important}
+</style>

package/dist/runtime/components/dev/menu/ResponsiveDeviceSelect.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/components/dev/menu/SmileDevAppMenu.d.vue.ts

@@ -0,0 +1,62 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for sidebar configuration
+ */
+export type Props = {
+    /**
+     * - Side of the sidebar ('left' or 'right')
+     */
+    side?: string | undefined;
+    /**
+     * - Variant of the sidebar styling
+     */
+    variant?: string | undefined;
+    /**
+     * - Collapsible behavior ('icon' or 'none')
+     */
+    collapsible?: string | undefined;
+    /**
+     * - Additional CSS classes
+     */
+    class?: string | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: {
+        type: StringConstructor;
+        required: false;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+    };
+    collapsible: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    side: {
+        type: StringConstructor;
+        required: false;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+    };
+    collapsible: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+}>> & Readonly<{}>, {
+    collapsible: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/menu/SmileDevAppMenu.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { computed } from "vue";
+import DevConfigPanel from "./DevConfigPanel.vue";
+const props = defineProps({
+  side: { type: String, required: false },
+  variant: { type: String, required: false },
+  collapsible: { type: String, required: false, default: "icon" },
+  class: { type: null, required: false }
+});
+const api = useAPI();
+const { state: globalColorMode, setLight, setDark } = useSmileColorMode("global");
+const isDarkMode = computed({
+  get: () => globalColorMode.value === "dark",
+  set: (value) => {
+    if (value) {
+      setDark();
+    } else {
+      setLight();
+    }
+  }
+});
+</script>
+
+<template>
+  <!-- Main sidebar container with icon-only layout -->
+  <Sidebar
+    class="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
+    v-bind="props"
+  >
+    <!-- Sidebar header with main logo button -->
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            size="lg"
+            as-child
+            class="md:h-8 md:p-0"
+          >
+            <a href="#">
+              <div class="mainbutton text-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <i-lucide-smile />
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+
+    <!-- Sidebar content with navigation menu -->
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupContent class="px-1.5 md:px-0">
+          <SidebarMenu>
+            <!-- Developer Mode navigation item -->
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'devmode',
+                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'devmode',
+                }"
+                tooltip="Developer Mode"
+                @click="api.store.dev.mainView = 'devmode'"
+              >
+                <i-lucide-bug-play class="!size-5" />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+
+            <!-- Analyze
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'dashboard',
+                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'dashboard'
+                }"
+                tooltip="Analyze Data"
+                @click="api.store.dev.mainView = 'dashboard'"
+              >
+                <i-ix-analyze class="!size-5" />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            -->
+
+            <!-- Recruit
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+                tooltip="Recruit Participants"
+                :isActive="api.store.dev.mainView === 'recruit'"
+                @click="api.store.dev.mainView = 'recruit'"
+              >
+                <i-bxs-megaphone class="!size-5" :class="{ 'text-chart-1': api.store.dev.mainView === 'recruit' }" />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            -->
+
+            <!-- Docs -->
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'docs',
+                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'docs',
+                }"
+                tooltip="Documentation"
+                @click="api.store.dev.mainView = 'docs'"
+              >
+                <i-lucide-book-marked class="!size-5" />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+
+            <!-- Info / Recruitment Setup -->
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                as-child
+                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1 hover:!bg-sidebar-border"
+                tooltip="Experiment Info & Recruitment"
+              >
+                <a
+                  href="/info"
+                  target="_blank"
+                >
+                  <i-lucide-info class="!size-5" />
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+
+    <!-- Sidebar footer with utility buttons -->
+    <SidebarFooter>
+      <!-- Color mode toggle button -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <SidebarMenuButton
+              class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+              tooltip="Toggle Dark Mode"
+              @click="isDarkMode = !isDarkMode"
+            >
+              <i-lucide-moon
+                v-if="isDarkMode"
+                class="!size-5"
+              />
+              <i-lucide-sun
+                v-else
+                class="!size-5"
+              />
+            </SidebarMenuButton>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>{{ isDarkMode ? 'Switch to Light Mode (Global)' : 'Switch to Dark Mode (Global)' }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <!-- Developer configuration popover -->
+      <Popover>
+        <PopoverTrigger>
+          <SidebarMenuButton
+            class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
+            as-child
+            tooltip="Configuration"
+          >
+            <i-lucide-settings class="!size-5" />
+          </SidebarMenuButton>
+        </PopoverTrigger>
+        <PopoverContent
+          side="right"
+          align="end"
+        >
+          <DevConfigPanel />
+        </PopoverContent>
+      </Popover>
+    </SidebarFooter>
+  </Sidebar>
+</template>
+
+<style scoped>
+.mainbutton{background-color:#afdaec}.dark .mainbutton{background-color:#c0f0a3;color:#000}
+</style>

package/dist/runtime/components/dev/menu/SmileDevAppMenu.vue.d.ts

@@ -0,0 +1,62 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for sidebar configuration
+ */
+export type Props = {
+    /**
+     * - Side of the sidebar ('left' or 'right')
+     */
+    side?: string | undefined;
+    /**
+     * - Variant of the sidebar styling
+     */
+    variant?: string | undefined;
+    /**
+     * - Collapsible behavior ('icon' or 'none')
+     */
+    collapsible?: string | undefined;
+    /**
+     * - Additional CSS classes
+     */
+    class?: string | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: {
+        type: StringConstructor;
+        required: false;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+    };
+    collapsible: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    side: {
+        type: StringConstructor;
+        required: false;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+    };
+    collapsible: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+}>> & Readonly<{}>, {
+    collapsible: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/navbar/CircleProgress.d.vue.ts

@@ -0,0 +1,15 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    percentage: NumberConstructor;
+    size: NumberConstructor;
+    strokeWidth: NumberConstructor;
+    basecolor: StringConstructor;
+    slicecolor: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    percentage: NumberConstructor;
+    size: NumberConstructor;
+    strokeWidth: NumberConstructor;
+    basecolor: StringConstructor;
+    slicecolor: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/navbar/CircleProgress.vue

@@ -0,0 +1,26 @@
+<script setup>
+const _props = defineProps({
+  percentage: Number,
+  size: Number,
+  strokeWidth: Number,
+  basecolor: String,
+  slicecolor: String
+});
+</script>
+
+<template>
+  <!-- SVG pie chart for progress display -->
+  <div class="pie-chart">
+    <svg viewBox="0 0 32 32">
+      <circle
+        r="16"
+        cx="16"
+        cy="16"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.pie-chart{display:inline-block}svg{border-radius:50%;height:v-bind(size + "px");transform:rotate(-90deg);width:v-bind(size + "px")}circle{fill:v-bind(basecolor);stroke:v-bind(slicecolor);stroke-dasharray:v-bind(percentage) 100;stroke-width:32}
+</style>

package/dist/runtime/components/dev/navbar/CircleProgress.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    percentage: NumberConstructor;
+    size: NumberConstructor;
+    strokeWidth: NumberConstructor;
+    basecolor: StringConstructor;
+    slicecolor: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    percentage: NumberConstructor;
+    size: NumberConstructor;
+    strokeWidth: NumberConstructor;
+    basecolor: StringConstructor;
+    slicecolor: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/navbar/ColorModeButton.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>;