srcdev-nuxt-components 9.1.38 → 9.1.40

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 {
+  background: #0a0a0a;
+
+  --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;
+
+    &--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/app/pages/ui/carousel-flip.vue

@@ -6,24 +6,127 @@
           <h1 class="page-heading-2">Carousel</h1>
         </LayoutRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <CarouselFlip
-            v-if="carouselStatus === 'success'"
-            :carousel-data-ids
-            :allow-carousel-overflow="true"
-            :transition-speed="1000"
-            :use-flip-animation="true"
-            :use-spring-effect="false"
-            :style-class-passthrough="['carousel-flip-demo', 'mbe-20']"
-          >
-            <template v-for="(item, index) in carouselData?.items" :key="index" #[item.id]>
-              <div class="custom-carousel-item">
-                <h3>{{ index + 1 }}</h3>
-                <p>{{ item.alt }}</p>
+        <!-- ── QA Panel (dev only) ───────────────────────────────── -->
+        <div v-if="isDev" class="qa-panel">
+          <details class="qa-panel__details">
+            <summary class="qa-panel__summary">
+              <span class="qa-panel__title">QA — CarouselFlip</span>
+              <code class="qa-panel__status">
+                overflow:{{ qaAllowOverflow ? "on" : "off" }} · speed:{{ qaTransitionSpeed }}ms · flip:{{
+                  qaUseFlipAnimation ? "on" : "off"
+                }}
+                · spring:{{ qaUseSpringEffect ? "on" : "off" }} · {{ qaButtonLayout }} · controls:{{
+                  qaShowControls ? "on" : "off"
+                }}
+              </code>
+            </summary>
+            <div class="qa-panel__body">
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Allow Overflow</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaAllowOverflow === opt }"
+                    @click="qaAllowOverflow = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
               </div>
-            </template>
-          </CarouselFlip>
-        </LayoutRow>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Transition Speed</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in transitionSpeedPresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaTransitionSpeed === preset }"
+                    @click="qaTransitionSpeed = preset"
+                  >
+                    {{ preset }}ms
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Flip Animation</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaUseFlipAnimation === opt }"
+                    @click="qaUseFlipAnimation = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Spring Effect</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaUseSpringEffect === opt }"
+                    @click="qaUseSpringEffect = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Button Layout</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="layout in buttonLayoutPresets"
+                    :key="layout"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaButtonLayout === layout }"
+                    @click="qaButtonLayout = layout"
+                  >
+                    {{ layout }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Show Controls</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaShowControls === opt }"
+                    @click="qaShowControls = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <CarouselFlip
+          v-if="carouselStatus === 'success'"
+          :carousel-data-ids
+          :allow-carousel-overflow="qaAllowOverflow"
+          :transition-speed="qaTransitionSpeed"
+          :use-flip-animation="qaUseFlipAnimation"
+          :use-spring-effect="qaUseSpringEffect"
+          :button-layout="qaButtonLayout"
+          :show-controls="qaShowControls"
+          :style-class-passthrough="['carousel-flip-demo', 'mbe-20']"
+        >
+          <template v-for="(item, index) in carouselData?.items" :key="index" #[item.id]>
+            <div class="custom-carousel-item">
+              <h3>{{ index + 1 }}</h3>
+              <p>{{ item.alt }}</p>
+            </div>
+          </template>
+        </CarouselFlip>
       </template>
     </NuxtLayout>
   </div>
@@ -32,6 +135,17 @@
 <script setup lang="ts">
 import type { ICarouselBasic } from "~/types/components";
 
+// ── QA controls (dev only) ────────────────────────────────────────
+const isDev = import.meta.dev;
+const qaAllowOverflow = ref(true);
+const qaTransitionSpeed = ref(1000);
+const qaUseFlipAnimation = ref(true);
+const qaUseSpringEffect = ref(false);
+const qaButtonLayout = ref<"sides" | "controls-flanking" | "controls-grouped-right" | "overlay">("sides");
+const qaShowControls = ref(true);
+const transitionSpeedPresets = [100, 200, 400, 600, 1000, 2000];
+const buttonLayoutPresets = ["sides", "controls-flanking", "controls-grouped-right", "overlay"] as const;
+
 definePageMeta({
   layout: false,
 });
@@ -54,6 +168,97 @@ const carouselDataIds = computed(() => {
 </script>
 
 <style lang="css">
+.carousel-flip-page {
+  /* ── 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);
+    }
+  }
+}
+
 @property --glow-deg {
   syntax: "<angle>";
   inherits: true;

package/package.json

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