@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/dev/presentation/DarkModeButton.vue

@@ -0,0 +1,43 @@
+<script setup>
+const {
+  state: _globalColorMode,
+  mode: globalColorModeRaw,
+  toggle: toggleColorMode,
+  system
+} = useSmileColorMode("global");
+</script>
+
+<template>
+  <!-- Tooltip provider wrapper -->
+  <TooltipProvider>
+    <Tooltip>
+      <!-- Tooltip trigger button -->
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="toggleColorMode"
+        >
+          <!-- Light mode icon -->
+          <i-lucide-moon v-if="globalColorModeRaw === 'light'" />
+          <!-- Dark mode icon -->
+          <i-lucide-sun-moon v-else-if="globalColorModeRaw === 'dark'" />
+          <!-- System mode icon -->
+          <i-lucide-sun v-else />
+        </Button>
+      </TooltipTrigger>
+      <!-- Tooltip content with dynamic text -->
+      <TooltipContent side="bottom">
+        <p v-if="globalColorModeRaw === 'light'">
+          Switch to Dark Mode
+        </p>
+        <p v-else-if="globalColorModeRaw === 'dark'">
+          Switch to System ({{ system }})
+        </p>
+        <p v-else>
+          Switch to Light Mode
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/presentation/DarkModeButton.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/presentation/LogoutButton.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/presentation/LogoutButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref, onMounted } from "vue";
+const isLoggedIn = ref(false);
+onMounted(async () => {
+  try {
+    const result = await $fetch("/api/auth/session");
+    isLoggedIn.value = result?.authenticated === true;
+  } catch {
+    isLoggedIn.value = false;
+  }
+});
+async function logout() {
+  try {
+    await $fetch("/api/auth/logout", { method: "POST" });
+  } catch {
+  }
+  window.location.href = "/dev-login";
+}
+</script>
+
+<template>
+  <TooltipProvider v-if="isLoggedIn">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="logout"
+        >
+          <i-lucide-log-out />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Logout</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/presentation/LogoutButton.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/presentation/PresentationModeResetButton.d.vue.ts

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    icon?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/presentation/PresentationModeResetButton.vue

@@ -0,0 +1,25 @@
+<script setup>
+const _props = defineProps(["icon"]);
+function goHome() {
+  navigateTo("/presentation/");
+}
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="goHome"
+        >
+          <i-lucide-home />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Return to presentation home</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/presentation/PresentationModeResetButton.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    icon?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/presentation/PresentationNavBar.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/presentation/PresentationNavBar.vue

@@ -0,0 +1,70 @@
+<script setup>
+import RouteInfoButton from "../navbar/ViewInfoButtonGroup.vue";
+import ResetButton from "./PresentationModeResetButton.vue";
+import QRCodeButton from "./QRCodeButton.vue";
+import DarkModeButton from "./DarkModeButton.vue";
+import LogoutButton from "./LogoutButton.vue";
+</script>
+
+<template>
+  <!-- Main navigation container -->
+  <nav class="flex items-center justify-between w-full border-b min-h-[36px] max-h-[36px] text-sm px-2">
+    <!-- Left section - Presentation mode branding -->
+    <div class="flex items-center flex-shrink-0 px-2 py-1 rounded">
+      <div class="flex items-center">
+        <!-- Desktop presentation mode label -->
+        <div class="hidden sm:block">
+          <div class="flex items-center text-xs font-normal">
+            <i-uil-presentation-line class="size-4 mr-1" /><b>PRESENTATION MODE</b>
+          </div>
+        </div>
+        <!-- Mobile presentation mode label -->
+        <div class="block sm:hidden">
+          <div class="flex items-center text-xs font-semibold">
+            <i-lucide-presentation class="size-4 mr-1" /><b>PRES</b>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Middle section - Centered content area -->
+    <div class="flex items-center justify-center flex-1 min-w-0 px-2 py-1 rounded">
+      <div class="flex items-center space-x-2">
+        <!-- Middle content placeholder -->
+        <div class="text-xs text-gray-600">
+          <!-- Middle content placeholder -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Right section - Control buttons -->
+    <div class="flex items-center flex-shrink-0 px-1 py-1 rounded">
+      <div class="flex items-center space-x-2.5 border-gray-300 pl-4 rounded-l">
+        <!-- Logout button (only when authenticated) -->
+        <div class="flex items-center">
+          <LogoutButton />
+        </div>
+
+        <!-- Dark mode toggle button -->
+        <div class="flex items-center">
+          <DarkModeButton />
+        </div>
+
+        <!-- QR code generation button -->
+        <div class="flex items-center">
+          <QRCodeButton />
+        </div>
+
+        <!-- Reset to main page button -->
+        <div class="flex items-center">
+          <ResetButton />
+        </div>
+
+        <!-- Route information buttons (desktop only) -->
+        <div class="hidden md:flex items-center">
+          <RouteInfoButton />
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>

package/dist/runtime/components/dev/presentation/PresentationNavBar.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/presentation/QRCodeButton.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/presentation/QRCodeButton.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+const qrUrl = computed(() => {
+  const deployUrl = api.config.deployURL || (import.meta.client ? window.location.origin : "");
+  return `/api/qr?url=${encodeURIComponent(deployUrl)}`;
+});
+</script>
+
+<template>
+  <!-- QR code dropdown menu -->
+  <DropdownMenu>
+    <!-- Dropdown trigger button -->
+    <DropdownMenuTrigger as-child>
+      <Button
+        size="menu"
+        variant="outline"
+      >
+        <i-lucide-qr-code />
+      </Button>
+    </DropdownMenuTrigger>
+    <!-- Dropdown content -->
+    <DropdownMenuContent
+      class="w-80 p-4"
+      align="end"
+    >
+      <div class="space-y-3">
+        <!-- Header section -->
+        <div>
+          <h3 class="text-sm font-semibold">
+            QR Code
+          </h3>
+          <p class="text-xs text-muted-foreground mt-1">
+            Use the QR code to quickly access the current page from a mobile device. Can be downloaded as a .svg to add
+            to posters and talks.
+          </p>
+        </div>
+        <!-- QR code image display -->
+        <div class="flex justify-center">
+          <img
+            :src="qrUrl"
+            alt="QR Code"
+            class="w-48 h-48"
+          >
+        </div>
+        <!-- Download button -->
+        <div class="flex justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            as-child
+          >
+            <a
+              :href="qrUrl"
+              download="qr.svg"
+              class="flex items-center gap-2"
+            >
+              <i-lucide-download class="size-3" />
+              <span>Download QR</span>
+            </a>
+          </Button>
+        </div>
+      </div>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/dist/runtime/components/dev/presentation/QRCodeButton.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/sidebar/AppProgressPanel.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/sidebar/AppProgressPanel.vue

@@ -0,0 +1,125 @@
+<script setup>
+const api = useAPI();
+</script>
+
+<template>
+  <!-- App progress stepper panel -->
+  <Stepper class="flex w-full items-start gap-2 my-0 pt-4 pb-2 border-t border-border">
+    <!-- Step 1: User known/unknown -->
+    <StepperItem
+      class="relative flex w-full flex-col items-center justify-center"
+      :step="1"
+    >
+      <StepperSeparator
+        class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted"
+        :class="[api.store.cookieState.knownUser ? 'bg-green-500' : 'bg-gray-300']"
+      />
+
+      <StepperTrigger as-child>
+        <div
+          class="z-10 rounded-full shrink-0 p-3"
+          :class="[api.store.cookieState.knownUser ? 'bg-green-200' : 'bg-muted']"
+        >
+          <i-heroicons-user-minus-16-solid
+            :class="[api.store.cookieState.knownUser ? 'text-green-500' : 'text-gray-500']"
+          />
+        </div>
+      </StepperTrigger>
+
+      <div class="flex flex-col items-center text-center">
+        <StepperDescription
+          :class="[api.store.cookieState.knownUser ? 'text-green-500' : 'text-gray-500']"
+          class="text-[0.6rem] text-muted-foreground transition font-mono"
+        >
+          {{ api.store.cookieState.knownUser ? 'Known user' : 'Unknown user' }}
+        </StepperDescription>
+      </div>
+    </StepperItem>
+
+    <!-- Step 2: Record created -->
+    <StepperItem
+      class="relative flex w-full flex-col items-center justify-center"
+      :step="2"
+    >
+      <StepperSeparator
+        class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted"
+        :class="[
+          api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
+            ? 'bg-green-500'
+            : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
+              ? 'bg-yellow-500'
+              : 'bg-gray-300',
+        ]"
+      />
+
+      <StepperTrigger as-child>
+        <div
+          class="z-10 rounded-full shrink-0 p-3 cursor-pointer"
+          :class="[api.store.browserEphemeral.dataLoaded ? 'bg-green-200' : 'bg-muted']"
+          @click="api.connectDB()"
+        >
+          <i-lucide-database :class="[api.store.browserEphemeral.dataLoaded ? 'text-green-500' : 'text-gray-500']" />
+        </div>
+      </StepperTrigger>
+
+      <div class="flex flex-col items-center text-center">
+        <StepperDescription
+          :class="[api.store.browserEphemeral.dataLoaded ? 'text-green-500' : 'text-gray-500']"
+          class="text-[0.6rem] text-muted-foreground transition font-mono"
+        >
+          {{ api.store.browserEphemeral.dataLoaded ? 'Record created' : 'No record yet' }}
+        </StepperDescription>
+      </div>
+    </StepperItem>
+
+    <!-- Step 3: Sync status -->
+    <StepperItem
+      class="relative flex w-full flex-col items-center justify-center"
+      :step="3"
+    >
+      <StepperTrigger as-child>
+        <div
+          class="z-10 rounded-full shrink-0 p-3"
+          :class="[
+            api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
+              ? 'bg-green-200'
+              : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
+                ? 'bg-amber-100'
+                : 'bg-muted',
+          ]"
+        >
+          <i-fluent-cloud-sync-24-filled
+            :class="[
+              api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
+                ? 'text-green-500'
+                : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
+                  ? 'text-yellow-500'
+                  : 'text-gray-500',
+            ]"
+          />
+        </div>
+      </StepperTrigger>
+
+      <div class="flex flex-col items-center text-center">
+        <StepperDescription
+          :class="[
+            api.store.browserEphemeral.dataLoaded && !api.store.browserEphemeral.unsavedChanges
+              ? 'text-green-500'
+              : api.store.browserEphemeral.dataLoaded && api.store.browserEphemeral.unsavedChanges
+                ? 'text-red-500'
+                : 'text-gray-500',
+          ]"
+          class="text-[0.6rem] text-muted-foreground transition font-mono"
+        >
+          {{
+            !api.store.browserEphemeral.dataLoaded
+              ? 'Never saved'
+              : api.store.browserEphemeral.unsavedChanges
+                ? 'Unsaved changes'
+                : 'Saved'
+          }}
+        </StepperDescription>
+      </div>
+    </StepperItem>
+  </Stepper>
+</template>

package/dist/runtime/components/dev/sidebar/AppProgressPanel.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/sidebar/ConfigurationVariablesPanel.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/sidebar/ConfigurationVariablesPanel.vue

@@ -0,0 +1,219 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+const { system, mode: experimentColorMode } = useSmileColorMode("experiment");
+const colorModeSelect = computed({
+  get: () => experimentColorMode.value,
+  set: (value) => {
+    experimentColorMode.value = value;
+    api.config.colorMode = value;
+  }
+});
+const colorModeDisplayText = computed(() => {
+  switch (colorModeSelect.value) {
+    case "light":
+      return "Light";
+    case "dark":
+      return "Dark";
+    case "auto":
+      return `System (${system.value})`;
+    default:
+      return colorModeSelect.value;
+  }
+});
+</script>
+
+<template>
+  <!-- Configuration variables panel -->
+  <div class="bg-muted">
+    <table class="w-full">
+      <tbody>
+        <!-- Consent, Known, Done, Withdrew, Viz toggles -->
+        <tr class="table-row-base">
+          <td
+            class="table-cell-base table-cell-left table-cell-small font-mono"
+            colspan="4"
+          >
+            <div class="flex flex-wrap gap-4">
+              <div class="flex flex-col items-center">
+                <span>Consent</span>
+                <div class="field">
+                  <Switch
+                    v-model="api.store.cookieState.consented"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-center">
+                <span>Known</span>
+                <div class="field">
+                  <Switch
+                    v-model="api.store.cookieState.knownUser"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-center">
+                <span>Done</span>
+                <div class="field">
+                  <Switch
+                    v-model="api.store.cookieState.done"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-center">
+                <span>Withdrew</span>
+                <div class="field">
+                  <Switch
+                    v-model="api.store.cookieState.withdrawn"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-center">
+                <span>Viz</span>
+                <div class="field">
+                  <Switch
+                    v-model="api.store.data.verifiedVisibility"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <!-- Window size and aggressive mode -->
+        <tr class="table-row-base table-row-base-bottom">
+          <td
+            class="table-cell-base table-cell-left table-cell-small font-mono"
+            :class="{
+              'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400': api.store.browserEphemeral.tooSmall,
+            }"
+            colspan="4"
+          >
+            <div class="flex flex-wrap gap-4 items-center">
+              <div class="flex flex-col items-left">
+                <span>Min Window Size Request (WxH):</span>
+                <div class="flex items-center gap-2 mt-1">
+                  <Input
+                    v-model="api.config.windowsizerRequest.width"
+                    type="number"
+                    class="h-5 w-20 text-[1.0em] font-mono"
+                    :placeholder="api.config.windowsizerRequest.width"
+                  />
+                  <span class="text-[1.2em] font-mono">x</span>
+                  <Input
+                    v-model="api.config.windowsizerRequest.height"
+                    type="number"
+                    class="h-5 w-20 text-[1.0em] font-mono"
+                    :placeholder="api.config.windowsizerRequest.height"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-center">
+                <span>Aggressive</span>
+                <div class="field">
+                  <Checkbox
+                    v-model="api.config.windowsizerAggressive"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <!-- Responsive UI and color mode -->
+        <tr class="table-row-base table-row-base-bottom">
+          <td
+            class="table-cell-base table-cell-left table-cell-small font-mono"
+            colspan="4"
+          >
+            <div class="flex flex-wrap gap-4 items-center">
+              <div class="flex flex-col items-center">
+                <span>Resp. UI</span>
+                <div class="field">
+                  <Checkbox
+                    v-model="api.config.responsiveUI"
+                    class="mt-1"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-left">
+                <span>Color Mode</span>
+                <Select
+                  v-model="colorModeSelect"
+                  class="mt-1 h-8"
+                >
+                  <SelectTrigger
+                    size="sm"
+                    class="h-6 text-[1.1em] font-mono"
+                  >
+                    <SelectValue>{{ colorModeDisplayText }}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem
+                      key="light"
+                      value="light"
+                    >
+                      Light
+                    </SelectItem>
+                    <SelectItem
+                      key="dark"
+                      value="dark"
+                    >
+                      Dark
+                    </SelectItem>
+                    <SelectItem
+                      key="auto"
+                      value="auto"
+                    >
+                      System ({{ system }})
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <!-- Recruitment service select -->
+        <tr class="table-row-base table-row-base-bottom">
+          <td
+            class="table-cell-base table-cell-left table-cell-small font-mono"
+            colspan="4"
+          >
+            <div class="flex flex-wrap gap-4 items-center">
+              <div class="flex flex-col items-left">
+                Service<br>
+                <Select
+                  v-model="api.store.data.recruitmentService"
+                  class="mt-1 h-8"
+                >
+                  <SelectTrigger
+                    size="sm"
+                    class="h-8 text-[1.2em] font-mono"
+                  >
+                    <SelectValue :placeholder="api.store.data.recruitmentService" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem
+                      v-for="(cond, key) in api.store.browserEphemeral.urls"
+                      :key="cond"
+                      :value="key"
+                    >
+                      {{ key }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-cell-small{font-size:.6em}table{border-collapse:collapse;border-spacing:0}td{border:none;padding:.5rem .85rem}
+</style>

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