@nyuccl/smile 0.2.0-beta.0

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

@@ -0,0 +1,33 @@
+<script setup>
+const { mode: experimentColorMode, toggle: toggleColorMode, system } = useSmileColorMode("experiment");
+</script>
+
+<template>
+  <!-- Color mode toggle button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="toggleColorMode()"
+        >
+          <i-lucide-moon v-if="experimentColorMode === 'light'" />
+          <i-lucide-sun-moon v-else-if="experimentColorMode === 'dark'" />
+          <i-lucide-sun v-else />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p v-if="experimentColorMode === 'light'">
+          Switch to Dark Mode
+        </p>
+        <p v-else-if="experimentColorMode === 'dark'">
+          Switch to System ({{ system }})
+        </p>
+        <p v-else>
+          Switch to Light Mode
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from "vue";
+import CircleProgress from "./CircleProgress.vue";
+const api = useAPI();
+const database_tooltip = computed(() => {
+  let msg = "";
+  if (api.store.browserEphemeral.dataLoaded) {
+    msg += "Record created | ";
+  } else {
+    msg += "No record yet | ";
+  }
+  if (api.store.browserEphemeral.unsavedChanges) {
+    msg += "Unsaved changes ";
+  } else {
+    msg += "Saved ";
+  }
+  if (api.store.browserEphemeral.dataLoaded) {
+    msg += "| ";
+    msg += Math.round(api.store.localState.approxDataSize / 1048576 * 1e3) / 1e3 + "% data used";
+  }
+  return msg;
+});
+</script>
+
+<template>
+  <!-- Database status button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+        >
+          <!-- Database icon with status styling -->
+          <i-lucide-database
+            style="font-size: 2em"
+            class="disconnected"
+            :class="{ connected: api.store.browserEphemeral.dataLoaded }"
+          />
+
+          <!-- Sync icon with status styling -->
+          <template v-if="!api.store.browserEphemeral.dataLoaded">
+            <i-lucide-refresh-cw class="has-text-grey" />
+          </template>
+          <template v-else-if="api.store.browserEphemeral.unsavedChanges && api.store.browserEphemeral.dataLoaded">
+            <i-lucide-refresh-cw class="outofsync" />
+          </template>
+          <template v-else>
+            <i-lucide-refresh-cw class="insync" />
+          </template>
+
+          <!-- Progress circle for data usage -->
+          <template v-if="!api.store.browserEphemeral.dataLoaded">
+            <div class="mt-1">
+              <CircleProgress
+                :percentage="Math.round(api.store.localState.approxDataSize / 1048576) * 100"
+                :size="12"
+                :stroke-width="40"
+                slicecolor="#aaa"
+                basecolor="#aaa"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="mt-1">
+              <CircleProgress
+                :percentage="Math.round(api.store.localState.approxDataSize / 1048576) * 100"
+                :size="12"
+                :stroke-width="40"
+                slicecolor="var(--primary-button)"
+                basecolor="var(--status-green)"
+              />
+            </div>
+          </template>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {{ database_tooltip }}
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+
+<style scoped>
+.disconnected{color:var(--status-red)}.connected{color:var(--status-green)}.outofsync{color:var(--status-yellow)}.insync{color:var(--status-green)}
+</style>

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

@@ -0,0 +1,35 @@
+<script setup>
+const api = useAPI();
+</script>
+
+<template>
+  <!-- Fullscreen toggle button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="api.store.dev.isFullscreen = !api.store.dev.isFullscreen"
+        >
+          <i-ic-outline-fullscreen
+            v-if="!api.store.dev.isFullscreen"
+            :stroke-width="2.5"
+          />
+          <i-ic-outline-fullscreen-exit
+            v-else
+            :stroke-width="2.5"
+          />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p v-if="api.store.dev.isFullscreen">
+          Responsive Mode
+        </p>
+        <p v-else>
+          Fullscreen
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/navbar/FullScreenButton.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/KeyCommandNotification.d.vue.ts

@@ -0,0 +1,41 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    command: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: StringConstructor;
+        required: true;
+    };
+    show: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    command: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: StringConstructor;
+        required: true;
+    };
+    show: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}>> & Readonly<{}>, {
+    type: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,58 @@
+<script setup>
+const _props = defineProps({
+  command: {
+    type: String,
+    required: true
+  },
+  action: {
+    type: String,
+    required: true
+  },
+  show: {
+    type: Boolean,
+    required: true
+  },
+  type: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "error"].includes(value)
+  }
+});
+</script>
+
+<template>
+  <!-- Slide-up transition for notification -->
+  <Transition name="slide-up">
+    <div
+      v-if="show"
+      class="notification"
+      :class="{ 'error-notification': type === 'error' }"
+    >
+      <div
+        class="notification-content"
+        :class="{ 'error-content': type === 'error' }"
+      >
+        <div class="command-badge">
+          <kbd
+            class="command-key"
+            :class="{ 'error-key': type === 'error' }"
+          >{{ command }}</kbd>
+        </div>
+        <div
+          class="action-text"
+          :class="{ 'error-text': type === 'error' }"
+        >
+          {{ action }}
+        </div>
+      </div>
+      <div
+        class="notification-arrow"
+        :class="{ 'error-arrow': type === 'error' }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.notification{background:var(--background);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);left:60px;max-width:300px;overflow:hidden;position:fixed;top:50px;z-index:9999}.error-notification{background:#fef2f2;border:1px solid #fecaca}.notification-content{background:linear-gradient(135deg,var(--background) 0,var(--muted) 100%);padding:12px 16px}.error-content{background:linear-gradient(135deg,#fef2f2,#fee2e2)}.command-badge{align-items:center;display:flex;margin-bottom:8px}.command-key{background:var(--primary);border:1px solid var(--primary);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--primary-foreground);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.875rem;font-weight:600;letter-spacing:.025em;padding:4px 8px}.error-key{background:#ef4444;border:1px solid #ef4444;color:#fef2f2}.action-text{color:var(--foreground);font-size:.875rem;font-weight:500;line-height:1.4}.error-text{color:#ef4444}.notification-arrow{background:var(--background);border-left:1px solid var(--border);border-top:1px solid var(--border);height:12px;left:20px;position:absolute;top:-6px;transform:rotate(45deg);width:12px}.error-arrow{background:#fef2f2;border-left:1px solid #fecaca;border-top:1px solid #fecaca}.slide-up-enter-active,.slide-up-leave-active{transition:all .3s cubic-bezier(.4,0,.2,1)}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateX(-100%) translateY(-10px)}@media (prefers-color-scheme:dark){.notification{box-shadow:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -1px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1)}}
+</style>

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

@@ -0,0 +1,41 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    command: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: StringConstructor;
+        required: true;
+    };
+    show: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    command: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: StringConstructor;
+        required: true;
+    };
+    show: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}>> & Readonly<{}>, {
+    type: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,23 @@
+<script setup>
+const api = useAPI();
+</script>
+
+<template>
+  <!-- Reload browser button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="api.reloadBrowser()"
+        >
+          <i-lucide-rotate-ccw :stroke-width="2.5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        Reload browser (Cmd + R)
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup>
+const api = useAPI();
+</script>
+
+<template>
+  <!-- Reset local state button with tooltip -->
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          size="menu"
+          variant="outline"
+          @click="api.resetLocalState()"
+        >
+          <i-f7-bolt-fill />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        Reset local state (Ctrl + R)
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/dev/navbar/ResetButton.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/RouteJumper.d.vue.ts

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

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

@@ -0,0 +1,90 @@
+<script setup>
+import { watch, ref, computed } from "vue";
+const api = useAPI();
+const _props = defineProps(["routeName"]);
+const log = useLog();
+const route = useRoute();
+const activeRouteName = computed(() => api.currentRouteName());
+const hoverRoute = ref("");
+const seqtimeline = api.store.localState.seqtimeline;
+const routes = api.store.localState.routes;
+const filteredRoutes = routes.filter((r) => {
+  return !seqtimeline.find((s) => s.name === r.name) && !r.redirect;
+});
+const allRoutes = seqtimeline.filter((r) => !r.redirect).concat(filteredRoutes);
+const currentQuery = ref(route.query);
+watch(route, async (newRoute, _oldRoute) => {
+  currentQuery.value = newRoute.query;
+});
+function _setHover(route2) {
+  hoverRoute.value = route2;
+}
+function navigate(route2) {
+  log.warn(`DEV MODE: user requested to FORCE navigate to ${route2}`);
+  api.goToView(route2, true);
+}
+const isPresentation = computed(() => route.path.startsWith("/presentation/") || route.path === "/presentation");
+function goHome() {
+  if (isPresentation.value) {
+    log.warn("PRESENTATION MODE: user requested to navigate to presentation home");
+    navigateTo("/presentation/");
+  } else {
+    log.warn("DEV MODE: user requested to navigate to dev home");
+    navigateTo("/dev/");
+  }
+}
+</script>
+
+<template>
+  <!-- Dropdown menu listing all routes for navigation -->
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem
+      class="cursor-pointer border-b border-border mb-1"
+      @click="goHome"
+    >
+      <span class="text-[0.65rem] font-mono">
+        <div class="routename font-medium">
+          <i-lucide-house class="inline mr-1" />
+          {{ isPresentation ? '/home' : '/recruit' }}
+        </div>
+      </span>
+    </DropdownMenuItem>
+    <DropdownMenuItem
+      v-for="r in allRoutes"
+      :key="r.name"
+      :class="{
+        'bg-accent text-accent-foreground': activeRouteName === r.name,
+        'bg-muted': hoverRoute === r.name,
+      }"
+      class="cursor-pointer"
+      @mouseover="hoverRoute = r.name"
+      @mouseout="hoverRoute = ''"
+      @click="navigate(r.name)"
+    >
+      <span class="text-[0.65rem] font-mono">
+        <div class="routename font-medium">
+          <template v-if="r.meta.level > 0">
+            <span
+              v-for="j in r.meta.level"
+              :key="j"
+              style="margin-left: 5px"
+            >&nbsp;</span>
+          </template>
+          <i-lucide-arrow-down
+            v-if="r.meta.sequential"
+            class="inline mr-1"
+          />
+          <i-lucide-presentation
+            v-else-if="r.name === 'presentation_home'"
+            class="inline mr-1"
+          />
+          <i-lucide-diamond
+            v-else
+            class="inline mr-1"
+          />
+          /{{ r.name }}
+        </div>
+      </span>
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</template>

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

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

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