@nyuccl/smile 0.2.0-beta.0

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

@@ -0,0 +1,248 @@
+<script setup>
+import StepInfoButtonGroup from "./StepInfoButtonGroup.vue";
+import ViewInfoButtonGroup from "./ViewInfoButtonGroup.vue";
+import ResetButton from "./ResetButton.vue";
+import ReloadButton from "./ReloadButton.vue";
+import ColorModeButton from "./ColorModeButton.vue";
+import DatabaseButtonGroup from "./DatabaseButtonGroup.vue";
+import FullScreenButton from "./FullScreenButton.vue";
+import ViewButton from "./ViewButton.vue";
+import KeyCommandNotification from "./KeyCommandNotification.vue";
+import LogoutButton from "../presentation/LogoutButton.vue";
+import { ref } from "vue";
+import { onKeyDown } from "@vueuse/core";
+const api = useAPI();
+const showNotification = ref(false);
+const notificationCommand = ref("");
+const notificationAction = ref("");
+const notificationType = ref("default");
+const showTemporaryNotification = (command, action, type = "default") => {
+  notificationCommand.value = command;
+  notificationAction.value = action;
+  notificationType.value = type;
+  showNotification.value = true;
+  setTimeout(() => {
+    showNotification.value = false;
+  }, 1500);
+};
+onKeyDown((e) => {
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    api.goToView(api.prevView()?.name, true);
+  }
+});
+onKeyDown((e) => {
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    api.goToView(api.nextView()?.name, true);
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "1") {
+    e.preventDefault();
+    const sideBar = api.store.dev.showSideBar;
+    const consoleBar = api.store.dev.showConsoleBar;
+    if (!sideBar && !consoleBar) {
+      api.store.dev.showSideBar = true;
+      api.store.dev.showConsoleBar = false;
+      showTemporaryNotification("Ctrl + 1", "Showing Sidebar");
+    } else if (sideBar && !consoleBar) {
+      api.store.dev.showSideBar = false;
+      api.store.dev.showConsoleBar = true;
+      showTemporaryNotification("Ctrl + 1", "Showing Console");
+    } else if (!sideBar && consoleBar) {
+      api.store.dev.showSideBar = true;
+      api.store.dev.showConsoleBar = true;
+      showTemporaryNotification("Ctrl + 1", "Showing Both Panels");
+    } else {
+      api.store.dev.showSideBar = false;
+      api.store.dev.showConsoleBar = false;
+      showTemporaryNotification("Ctrl + 1", "Hiding All Panels");
+    }
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "2") {
+    e.preventDefault();
+    if (!api.store.dev.showSideBar) {
+      showTemporaryNotification("Ctrl + 2", "Sidebar is hidden", "error");
+      return;
+    }
+    const currentTab = api.store.dev.sideBarTab;
+    if (currentTab === "steps") {
+      api.store.dev.sideBarTab = "randomization";
+      showTemporaryNotification("Ctrl + 2", "Switched to Random Tab");
+    } else if (currentTab === "randomization") {
+      api.store.dev.sideBarTab = "db";
+      showTemporaryNotification("Ctrl + 2", "Switched to DB Info Tab");
+    } else {
+      api.store.dev.sideBarTab = "steps";
+      showTemporaryNotification("Ctrl + 2", "Switched to Steps Tab");
+    }
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "3") {
+    e.preventDefault();
+    if (!api.store.dev.showConsoleBar) {
+      showTemporaryNotification("Ctrl + 3", "Console is hidden", "error");
+      return;
+    }
+    const currentTab = api.store.dev.consoleBarTab;
+    if (currentTab === "browse") {
+      api.store.dev.consoleBarTab = "log";
+      showTemporaryNotification("Ctrl + 3", "Switched to Log Tab");
+    } else if (currentTab === "log") {
+      api.store.dev.consoleBarTab = "config";
+      showTemporaryNotification("Ctrl + 3", "Switched to Config Tab");
+    } else {
+      api.store.dev.consoleBarTab = "browse";
+      showTemporaryNotification("Ctrl + 3", "Switched to Browse Tab");
+    }
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "r") {
+    e.preventDefault();
+    showTemporaryNotification("Ctrl + R", "Resetting Local State");
+    setTimeout(() => {
+      api.resetLocalState();
+    }, 200);
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "d") {
+    e.preventDefault();
+    if (!api.store.cookieState.knownUser) {
+      api.setKnown();
+      api.setConsented();
+      showTemporaryNotification("Ctrl + D", "Connected to Database");
+    }
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "a") {
+    e.preventDefault();
+    if (api.hasAutofill()) {
+      api.autofill();
+      showTemporaryNotification("Ctrl + A", "Autofilled Current View");
+    } else {
+      showTemporaryNotification("Ctrl + A", "No Autofill Available", "error");
+    }
+  }
+});
+onKeyDown((e) => {
+  if (e.ctrlKey && e.key === "p") {
+    e.preventDefault();
+    const currentRoute = api.currentRouteName();
+    const isCurrentlyPinned = api.store.dev.pinnedRoute === currentRoute;
+    if (isCurrentlyPinned) {
+      api.store.dev.pinnedRoute = null;
+      showTemporaryNotification("Ctrl + P", "Unpinned Route");
+    } else {
+      api.store.dev.pinnedRoute = currentRoute;
+      showTemporaryNotification("Ctrl + P", "Pinned Current Route");
+    }
+  }
+});
+</script>
+
+<template>
+  <!-- Main navigation bar container -->
+  <nav class="flex items-center justify-between w-full border-b min-h-[36px] max-h-[36px] text-sm px-2">
+    <!-- Left section - Developer mode indicator -->
+    <div class="flex items-center flex-shrink-0 px-2 py-1 rounded">
+      <div class="flex items-center">
+        <!-- Desktop version -->
+        <div class="hidden sm:block">
+          <div class="flex items-center text-xs font-normal">
+            <i-lucide-bug-play class="size-4 mr-1" />
+            <b>DEVELOPER MODE</b> &nbsp;({{ api.config.smileVersion }})
+          </div>
+        </div>
+        <!-- Mobile version -->
+        <div class="block sm:hidden">
+          <div class="flex items-center text-xs font-normal">
+            <i-lucide-bug-play class="size-4 mr-1" />
+            <b>DEV</b> &nbsp;({{ api.config.smileVersion }})
+          </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">
+        <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>
+
+        <!-- Reload button -->
+        <div class="flex items-center">
+          <ReloadButton />
+        </div>
+
+        <!-- Reset button -->
+        <div class="flex items-center">
+          <ResetButton />
+        </div>
+
+        <!-- Color mode button (only in fullscreen mode and not on recruit page) -->
+        <div
+          v-if="api.store.dev.isFullscreen && api.currentRouteName() !== 'recruit'"
+          class="flex items-center"
+        >
+          <ColorModeButton />
+        </div>
+
+        <!-- Fullscreen button (not on recruit page) -->
+        <div
+          v-if="api.currentRouteName() !== 'recruit'"
+          class="flex items-center"
+        >
+          <FullScreenButton />
+        </div>
+
+        <!-- Database info button group -->
+        <DatabaseButtonGroup />
+
+        <!-- Step info buttons (responsive - hidden on small screens) -->
+        <div class="items-center">
+          <StepInfoButtonGroup />
+        </div>
+
+        <!-- View info buttons (hidden on medium screens and below) -->
+        <div class="hidden md:flex items-center">
+          <ViewInfoButtonGroup />
+        </div>
+
+        <!-- View button -->
+        <div class="flex items-center">
+          <ViewButton />
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Keyboard command notification overlay -->
+  <KeyCommandNotification
+    :show="showNotification"
+    :command="notificationCommand"
+    :action="notificationAction"
+    :type="notificationType"
+  />
+</template>
+
+<style scoped>
+/* No custom styles needed - all styling handled by Tailwind classes */
+</style>

package/dist/runtime/components/dev/navbar/SmileDevNavBar.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/navbar/StepInfoButtonGroup.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/navbar/StepInfoButtonGroup.vue

@@ -0,0 +1,63 @@
+<script setup>
+const api = useViewAPI();
+</script>
+
+<template>
+  <!-- Step navigation button group with tooltips -->
+  <TooltipProvider>
+    <ButtonGroup
+      variant="outline"
+      size="menu"
+    >
+      <!-- Step back button -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem
+            :disabled="!api.store.dev.viewProvidesStepper || !api.hasPrevStep()"
+            @click="api.goPrevStep()"
+          >
+            <i-lucide-chevron-left />
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          Step back (Left Arrow)
+        </TooltipContent>
+      </Tooltip>
+
+      <!-- Current path display -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem :disabled="!api.store.dev.viewProvidesStepper || !api.hasSteps()">
+            <span
+              v-if="api.pathString"
+              class="counter"
+            >{{ api.pathString }}</span>
+            <i-iconoir-remove-empty v-else />
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          Current path
+        </TooltipContent>
+      </Tooltip>
+
+      <!-- Step forward button -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem
+            :disabled="!api.store.dev.viewProvidesStepper || !api.hasNextStep()"
+            @click="api.goNextStep()"
+          >
+            <i-lucide-chevron-right />
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          Step forward (Right Arrow)
+        </TooltipContent>
+      </Tooltip>
+    </ButtonGroup>
+  </TooltipProvider>
+</template>
+
+<style scoped>
+.counter{font-family:monospace;font-size:.95em;font-weight:500}
+</style>

package/dist/runtime/components/dev/navbar/StepInfoButtonGroup.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/navbar/ViewButton.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/navbar/ViewButton.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+const currentState = computed(() => {
+  const sideBar = api.store.dev.showSideBar;
+  const consoleBar = api.store.dev.showConsoleBar;
+  if (sideBar && consoleBar) return "both";
+  if (!sideBar && !consoleBar) return "none";
+  if (sideBar) return "sidebar";
+  return "console";
+});
+const tooltipText = computed(() => {
+  switch (currentState.value) {
+    case "both":
+      return "Hide all panels";
+    case "none":
+      return "Show sidebar";
+    case "sidebar":
+      return "Show console";
+    case "console":
+      return "Show all panels";
+    default:
+      return "Toggle panels";
+  }
+});
+const cycleState = () => {
+  switch (currentState.value) {
+    case "both":
+      api.store.dev.showSideBar = false;
+      api.store.dev.showConsoleBar = false;
+      break;
+    case "none":
+      api.store.dev.showSideBar = true;
+      api.store.dev.showConsoleBar = false;
+      break;
+    case "sidebar":
+      api.store.dev.showSideBar = false;
+      api.store.dev.showConsoleBar = true;
+      break;
+    case "console":
+      api.store.dev.showSideBar = true;
+      api.store.dev.showConsoleBar = true;
+      break;
+  }
+};
+</script>
+
+<template>
+  <!-- Panel toggle button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="cycleState"
+        >
+          <!-- Both panels visible -->
+          <svg
+            v-if="currentState === 'both'"
+            xmlns="http://www.w3.org/2000/svg"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              width="18"
+              height="18"
+              x="3"
+              y="3"
+              rx="2"
+            />
+            <path d="M3 15h12" />
+            <path d="M15 3v18" />
+          </svg>
+
+          <!-- Both panels hidden -->
+          <svg
+            v-if="currentState === 'none'"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              width="18"
+              height="18"
+              x="3"
+              y="3"
+              rx="2"
+            />
+            <path d="M8 8h.01" />
+            <path d="M12 8h.01" />
+            <path d="M16 8h.01" />
+          </svg>
+
+          <!-- Only sidebar visible -->
+          <svg
+            v-if="currentState === 'sidebar'"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              width="18"
+              height="18"
+              x="3"
+              y="3"
+              rx="2"
+            />
+            <path d="M15 3v18" />
+          </svg>
+
+          <!-- Only console visible -->
+          <svg
+            v-if="currentState === 'console'"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              width="18"
+              height="18"
+              x="3"
+              y="3"
+              rx="2"
+            />
+            <path d="M3 15h18" />
+          </svg>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {{ tooltipText }} (Ctrl + 1)
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/navbar/ViewButton.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/navbar/ViewInfoButtonGroup.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/navbar/ViewInfoButtonGroup.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed } from "vue";
+import RouteJumper from "./RouteJumper.vue";
+const api = useAPI();
+const route = useRoute();
+const isDevMode = computed(() => route.path.startsWith("/dev/") || route.path === "/dev");
+const currentTimelineMeta = computed(() => {
+  const config = api._resolveTimelineRoute();
+  return config?.meta || {};
+});
+const buttonstyle = computed(() => {
+  const base = "";
+  if (api.store.dev.pinnedRoute !== null) {
+    return base + " pinned";
+  } else {
+    return base;
+  }
+});
+const handleDropdownOpenChange = (open) => {
+  if (api.store.dev.pinnedRoute == null) {
+    api.store.dev.routePanelVisible = open;
+  }
+};
+const togglePin = () => {
+  api.store.dev.pinnedRoute = api.store.dev.pinnedRoute === null ? api.currentRouteName() : null;
+  api.store.dev.routePanelVisible = false;
+};
+</script>
+
+<template>
+  <!-- View information button group with tooltips -->
+  <TooltipProvider>
+    <ButtonGroup
+      variant="outline"
+      size="menu"
+    >
+      <!-- Autofill button -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <ButtonGroupItem
+            :disabled="!api.hasAutofill()"
+            @click="api.autofill()"
+          >
+            <i-mdi-magic />
+          </ButtonGroupItem>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {{ api.hasAutofill() ? 'Autofill (Ctrl + A)' : 'No autofill available' }}
+        </TooltipContent>
+      </Tooltip>
+
+      <!-- Previous view button -->
+      <template v-if="api.hasPrevView()">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <ButtonGroupItem
+              :disabled="api.store.dev.pinnedRoute !== null"
+              @click="api.goToView(api.route?.meta?.prev)"
+            >
+              <i-meteor-icons-angles-left />
+            </ButtonGroupItem>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            Previous View (Up Arrow)
+          </TooltipContent>
+        </Tooltip>
+      </template>
+      <template v-else>
+        <ButtonGroupItem disabled>
+          <i-meteor-icons-angles-left />
+        </ButtonGroupItem>
+      </template>
+
+      <!-- Next view button -->
+      <template v-if="api.hasNextView()">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <ButtonGroupItem
+              :disabled="api.store.dev.pinnedRoute !== null"
+              @click="api.goNextView()"
+            >
+              <i-meteor-icons-angles-right />
+            </ButtonGroupItem>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            Next View (Down Arrow)
+          </TooltipContent>
+        </Tooltip>
+      </template>
+      <template v-else>
+        <ButtonGroupItem disabled>
+          <i-meteor-icons-angles-right />
+        </ButtonGroupItem>
+      </template>
+
+      <!-- Pin route button (dev mode only, not presentation) -->
+      <template v-if="isDevMode">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <ButtonGroupItem
+              :class="{ pinned: api.store.dev.pinnedRoute !== null }"
+              @click="togglePin()"
+            >
+              <i-ic-baseline-pin-off v-if="api.store.dev.pinnedRoute !== null" />
+              <i-ic-baseline-push-pin v-else />
+            </ButtonGroupItem>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            Pin current route (Ctrl + P)
+          </TooltipContent>
+        </Tooltip>
+      </template>
+
+      <!-- Route dropdown menu -->
+      <DropdownMenu
+        :open="api.store.dev.routePanelVisible"
+        @update:open="handleDropdownOpenChange"
+      >
+        <DropdownMenuTrigger as-child>
+          <ButtonGroupItem :class="buttonstyle">
+            <div class="font-mono text-[0.65rem] font-medium min-w-[100px]">
+              <!-- Route type icons -->
+              <i-lucide-arrow-down
+                v-if="currentTimelineMeta.sequential"
+                class="inline size-3 mr-1"
+              />
+              <i-lucide-presentation
+                v-else-if="api.currentRouteName() === 'presentation_home'"
+                class="inline size-3 mr-1"
+              />
+              <i-lucide-diamond
+                v-else
+                class="inline size-3 mr-1"
+              />
+              /{{ api.currentRouteName() }}
+            </div>
+          </ButtonGroupItem>
+        </DropdownMenuTrigger>
+        <RouteJumper />
+      </DropdownMenu>
+    </ButtonGroup>
+  </TooltipProvider>
+</template>
+
+<style scoped>
+.pinned{background-color:var(--pinned-route);color:var(--dev-contrast-text)}
+</style>

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