srcdev-nuxt-components 9.1.39 → 9.1.41

package/app/composables/tests/useCancellableTimer.spec.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { useCancellableTimer } from "../useCancellableTimer";
+
+describe("useCancellableTimer", () => {
+  describe("wait", () => {
+    it("resolves after the specified duration", async () => {
+      const { wait, start } = useCancellableTimer();
+      start();
+
+      let resolved = false;
+      wait(200).then(() => {
+        resolved = true;
+      });
+
+      expect(resolved).toBe(false);
+      await vi.advanceTimersByTimeAsync(200);
+      expect(resolved).toBe(true);
+    });
+
+    it("does not resolve before the duration elapses", async () => {
+      const { wait, start } = useCancellableTimer();
+      start();
+
+      let resolved = false;
+      wait(200).then(() => {
+        resolved = true;
+      });
+
+      await vi.advanceTimersByTimeAsync(199);
+      expect(resolved).toBe(false);
+    });
+
+    it("rejects immediately when not started", async () => {
+      const { wait } = useCancellableTimer();
+
+      let rejected = false;
+      wait(200).catch(() => {
+        rejected = true;
+      });
+
+      await Promise.resolve();
+      expect(rejected).toBe(true);
+    });
+
+    it("rejects when stop is called before the timer fires", async () => {
+      const { wait, start, stop } = useCancellableTimer();
+      start();
+
+      let rejected = false;
+      wait(200).catch(() => {
+        rejected = true;
+      });
+
+      stop();
+      await Promise.resolve();
+      expect(rejected).toBe(true);
+    });
+  });
+
+  describe("schedule", () => {
+    it("calls fn after the specified delay", async () => {
+      const { schedule, start } = useCancellableTimer();
+      start();
+
+      const fn = vi.fn();
+      schedule(fn, 100);
+
+      expect(fn).not.toHaveBeenCalled();
+      await vi.advanceTimersByTimeAsync(100);
+      expect(fn).toHaveBeenCalledOnce();
+    });
+
+    it("does not call fn when not started", async () => {
+      const { schedule } = useCancellableTimer();
+
+      const fn = vi.fn();
+      schedule(fn, 100);
+
+      await vi.advanceTimersByTimeAsync(100);
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    it("does not call fn when stop is called before the delay fires", async () => {
+      const { schedule, start, stop } = useCancellableTimer();
+      start();
+
+      const fn = vi.fn();
+      schedule(fn, 100);
+
+      stop();
+      await vi.advanceTimersByTimeAsync(100);
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("stop", () => {
+    it("cancels a pending wait", async () => {
+      const { wait, start, stop } = useCancellableTimer();
+      start();
+
+      let settled = false;
+      wait(100).then(
+        () => { settled = true; },
+        () => { settled = true; },
+      );
+
+      stop();
+      await Promise.resolve();
+      expect(settled).toBe(true);
+    });
+  });
+
+  describe("start / stop cycle", () => {
+    it("can restart after stop", async () => {
+      const { wait, start, stop } = useCancellableTimer();
+      start();
+
+      let firstRejected = false;
+      wait(100).catch(() => {
+        firstRejected = true;
+      });
+      stop();
+      await Promise.resolve();
+      expect(firstRejected).toBe(true);
+
+      start();
+      let secondResolved = false;
+      wait(100).then(() => {
+        secondResolved = true;
+      });
+      await vi.advanceTimersByTimeAsync(100);
+      expect(secondResolved).toBe(true);
+    });
+  });
+});

package/app/composables/useCancellableTimer.ts

@@ -0,0 +1,42 @@
+export function useCancellableTimer() {
+  let _isActive = false;
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let rejectCurrent: (() => void) | null = null;
+
+  const wait = (ms: number): Promise<void> =>
+    new Promise((resolve, reject) => {
+      if (!_isActive) {
+        reject();
+        return;
+      }
+      rejectCurrent = reject;
+      timeoutId = setTimeout(() => {
+        rejectCurrent = null;
+        if (_isActive) resolve();
+        else reject();
+      }, ms);
+    });
+
+  const schedule = (fn: () => void, ms: number) => {
+    if (!_isActive) return;
+    timeoutId = setTimeout(() => {
+      if (_isActive) fn();
+    }, ms);
+  };
+
+  const stop = () => {
+    _isActive = false;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    rejectCurrent?.();
+    rejectCurrent = null;
+  };
+
+  const start = () => {
+    _isActive = true;
+  };
+
+  return { wait, schedule, stop, start };
+}

package/app/pages/samaritan.vue

@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div v-if="isDev" class="qa-panel">
+          <details class="qa-panel__details">
+            <summary class="qa-panel__summary">
+              <span class="qa-panel__title">QA — SamaritanPrompt</span>
+              <code v-if="qaEffect === 'typewriter'" class="qa-panel__status">
+                effect:typewriter · type:{{ qaTypeSpeed }}ms · hold:{{ qaHoldDuration }}ms · del:{{ qaDeleteSpeed }}ms ·
+                pause:{{ qaPauseDuration }}ms
+              </code>
+              <code v-else class="qa-panel__status">
+                effect:word-pulse · fade:{{ qaFadeDuration }}ms · visible:{{ qaWordDuration }}ms · pause:{{
+                  qaPauseDuration
+                }}ms
+              </code>
+            </summary>
+            <div class="qa-panel__body">
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Effect</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in effectOptions"
+                    :key="opt"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaEffect === opt }"
+                    @click="qaEffect = opt"
+                  >
+                    {{ opt }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- Typewriter controls -->
+              <template v-if="qaEffect === 'typewriter'">
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Type speed (ms/char)</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="n in [40, 80, 120, 200]"
+                      :key="n"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaTypeSpeed === n }"
+                      @click="qaTypeSpeed = n"
+                    >
+                      {{ n }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Hold duration (ms)</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="n in [500, 1000, 2000, 4000]"
+                      :key="n"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaHoldDuration === n }"
+                      @click="qaHoldDuration = n"
+                    >
+                      {{ n }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Delete speed (ms/char)</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="n in [20, 40, 80]"
+                      :key="n"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaDeleteSpeed === n }"
+                      @click="qaDeleteSpeed = n"
+                    >
+                      {{ n }}
+                    </button>
+                  </div>
+                </div>
+              </template>
+
+              <!-- Word-pulse controls -->
+              <template v-else>
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Fade duration (ms)</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="n in [200, 400, 600, 1000]"
+                      :key="n"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaFadeDuration === n }"
+                      @click="qaFadeDuration = n"
+                    >
+                      {{ n }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Visible duration (ms)</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="n in [800, 1200, 2000, 3000]"
+                      :key="n"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaWordDuration === n }"
+                      @click="qaWordDuration = n"
+                    >
+                      {{ n }}
+                    </button>
+                  </div>
+                </div>
+              </template>
+
+              <!-- Shared: pause before restart -->
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Pause before restart (ms)</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="n in [300, 500, 1000, 2000, 5000, 10000]"
+                    :key="n"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaPauseDuration === n }"
+                    @click="qaPauseDuration = n"
+                  >
+                    {{ n }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- Shared: hide cursor in cycle -->
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Hide cursor in cycle</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaHideCursorInCycle === opt }"
+                    @click="qaHideCursorInCycle = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <LayoutRow tag="div" variant="full-width">
+          <div class="samaritan-stage samaritan-stage--mixed">
+            <SamaritanPromptMixed :message-configs="mixedMessages" :hide-cursor-in-cycle="false" />
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width">
+          <div class="samaritan-stage">
+            <SamaritanPrompt
+              :messages="messages"
+              :effect="qaEffect"
+              :type-speed="qaTypeSpeed"
+              :delete-speed="qaDeleteSpeed"
+              :hold-duration="qaHoldDuration"
+              :pause-duration="qaPauseDuration"
+              :word-duration="qaWordDuration"
+              :fade-duration="qaFadeDuration"
+              :hide-cursor-in-cycle="qaHideCursorInCycle"
+            />
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Samaritan",
+  meta: [{ name: "description", content: "Samaritan prompt effect" }],
+  bodyAttrs: { class: "samaritan-page" },
+});
+
+const messages = [
+  "What do I do?",
+  "Bring your imaginaton to life",
+  "Craft beautiful interfaces",
+  "Keep it simple",
+  "My work is?",
+  "Performance tested",
+  "Penetration tested",
+  "Accessible",
+];
+
+const mixedMessages = [
+  { text: "What do I do?", effect: "typewriter" as const, holdDuration: 7000, pauseDuration: 3000 },
+  { text: "Bring your imaginaton to life", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+  { text: "Craft beautiful interfaces", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+  { text: "Keep it simple", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+  { text: "My work is?", effect: "typewriter" as const, holdDuration: 7000, pauseDuration: 3000 },
+  { text: "Performance tested", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+  { text: "Penetration tested", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+  { text: "Accessible", effect: "word-pulse" as const, wordDuration: 7000, pauseDuration: 3000 },
+];
+
+// ── QA controls (dev only) ────────────────────────────────────────
+const isDev = import.meta.dev;
+
+const effectOptions = ["typewriter", "word-pulse"] as const;
+const qaEffect = ref<"typewriter" | "word-pulse">("typewriter");
+
+const qaTypeSpeed = ref(80);
+const qaDeleteSpeed = ref(40);
+const qaHoldDuration = ref(2000);
+const qaPauseDuration = ref(5000);
+const qaWordDuration = ref(1200);
+const qaFadeDuration = ref(400);
+const qaHideCursorInCycle = ref(true);
+</script>
+
+<style lang="css">
+.samaritan-page {
+  --samaritan-color-text: light-dark(black, white);
+  --samaritan-color-underline: light-dark(black, white);
+  --samaritan-font-size: clamp(1.4rem, 2.5vw, 2.8rem);
+  --samaritan-letter-spacing: 0.14em;
+
+  .samaritan-stage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 100dvh;
+
+    .samaritan-stage--mixed {
+      border-top: 1px solid oklch(100% 0 0 / 0.08);
+    }
+  }
+
+  /* ── QA Panel ──────────────────────────────────────────────────── */
+
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.39",
+  "version": "9.1.41",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",