srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/02.molecules/samaritan-prompt/SamaritanPrompt.vue

@@ -24,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import { usePreferredReducedMotion } from "@vueuse/core";
 import type { SamaritanPromptEffect } from "~/types/components/samaritan-prompt";
 
 interface Props {
@@ -66,6 +67,8 @@ const isPaused = ref(false);
 const fadeDurationCss = computed(() => `${props.fadeDuration}ms`);
 const cursorOpacity = computed(() => (props.hideCursorInCycle && !cursorVisible.value ? 0 : 1));
 
+const reducedMotion = usePreferredReducedMotion();
+
 const timer = useCancellableTimer();
 const { wait, schedule, stop, start } = timer;
 
@@ -87,6 +90,7 @@ const startEffect = () => {
   cursorVisible.value = true;
   phase.value = "typing";
   messageIndex.value = 0;
+  typedCount.value = 0;
   if (props.effect === "typewriter") {
     schedule(typeTick, props.typeSpeed);
   } else {
@@ -98,18 +102,21 @@ const startEffect = () => {
 type Phase = "typing" | "holding" | "deleting" | "pausing";
 const phase = ref<Phase>("typing");
 const messageIndex = ref(0);
+const typedCount = ref(0);
 
 const typeTick = () => {
   const message = props.messages[messageIndex.value];
-  if (!message) return;
+  if (message === undefined) return;
+  const characters = splitGraphemes(message);
 
   switch (phase.value) {
     case "typing":
-      if (displayText.value.length === 0 && props.hideCursorInCycle) {
+      if (typedCount.value === 0 && props.hideCursorInCycle) {
         cursorVisible.value = false;
       }
-      if (displayText.value.length < message.length) {
-        displayText.value = message.slice(0, displayText.value.length + 1);
+      if (typedCount.value < characters.length) {
+        typedCount.value = reducedMotion.value === "reduce" ? characters.length : typedCount.value + 1;
+        displayText.value = characters.slice(0, typedCount.value).join("");
         schedule(typeTick, props.typeSpeed);
       } else {
         phase.value = "holding";
@@ -125,8 +132,9 @@ const typeTick = () => {
       break;
 
     case "deleting":
-      if (displayText.value.length > 0) {
-        displayText.value = displayText.value.slice(0, -1);
+      if (typedCount.value > 0) {
+        typedCount.value = reducedMotion.value === "reduce" ? 0 : typedCount.value - 1;
+        displayText.value = characters.slice(0, typedCount.value).join("");
         schedule(typeTick, props.deleteSpeed);
       } else {
         phase.value = "pausing";
@@ -179,7 +187,7 @@ const runWordPulse = async () => {
 };
 
 watch(
-  () => props.effect,
+  () => `${props.effect}:${JSON.stringify(props.messages)}`,
   () => {
     stop();
     startEffect();
@@ -205,6 +213,7 @@ onUnmounted(stop);
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-inline-size: 100%;
     row-gap: var(--samaritan-prompt-cursor-gap, 0.6rem);
     font-family: var(--samaritan-prompt-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
     font-size: var(--samaritan-prompt-font-size, 2rem);
@@ -222,11 +231,20 @@ onUnmounted(stop);
         display: flex;
         justify-content: center;
         min-height: 1.2em;
+        max-inline-size: 100%;
+        min-inline-size: 0;
 
         .samaritan-prompt__text {
-          color: var(--samaritan-prompt-text-colour, #ffffff);
-          white-space: nowrap;
+          color: var(--samaritan-prompt-text-colour, var(--theme-text));
+          white-space: var(--samaritan-prompt-text-white-space, normal);
+          overflow-wrap: anywhere;
+          text-align: center;
           text-transform: var(--samaritan-prompt-text-transform, uppercase);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          -webkit-line-clamp: var(--samaritan-prompt-text-line-clamp, none);
+          line-clamp: var(--samaritan-prompt-text-line-clamp, none);
         }
       }
 
@@ -234,12 +252,12 @@ onUnmounted(stop);
         width: 100%;
         min-width: 4ch;
         height: var(--samaritan-prompt-underline-height, 0.15rem);
-        background: var(--samaritan-prompt-underline-colour, #ffffff);
+        background: var(--samaritan-prompt-underline-colour, var(--theme-text));
       }
     }
 
     .samaritan-prompt__cursor {
-      color: var(--samaritan-prompt-cursor-colour, #cc0000);
+      color: var(--samaritan-prompt-cursor-colour, var(--theme-accent));
       font-size: var(--samaritan-prompt-cursor-size, 2.4rem);
       line-height: 1;
       animation: samaritan-prompt-pulse var(--samaritan-prompt-cursor-pulse-duration, 2.5s) ease-in-out infinite;
@@ -279,7 +297,7 @@ onUnmounted(stop);
 @keyframes samaritan-prompt-pulse {
   0%,
   100% {
-    color: var(--samaritan-prompt-cursor-colour, #cc0000);
+    color: var(--samaritan-prompt-cursor-colour, var(--theme-accent));
   }
   50% {
     color: var(--samaritan-prompt-cursor-colour-off, transparent);

package/app/components/02.molecules/samaritan-prompt/SamaritanPromptMixed.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { usePreferredReducedMotion } from "@vueuse/core";
 import type { SamaritanPromptEffect, SamaritanPromptMessageConfig } from "~/types/components/samaritan-prompt";
 
 interface Props {
@@ -65,6 +66,10 @@ const activeFadeDuration = ref(props.fadeDuration);
 const fadeDurationCss = computed(() => `${activeFadeDuration.value}ms`);
 const cursorOpacity = computed(() => (cursorVisible.value ? 1 : 0));
 
+const EMPTY_POLL_MS = 500;
+
+const reducedMotion = usePreferredReducedMotion();
+
 const timer = useCancellableTimer();
 const { wait, stop, start } = timer;
 
@@ -97,8 +102,13 @@ const runTypewriter = async (config: ResolvedConfig) => {
 
   if (hideCursorInCycle) cursorVisible.value = false;
 
-  for (let i = 1; i <= text.length; i++) {
-    displayText.value = text.slice(0, i);
+  const characters = splitGraphemes(text);
+  const instant = reducedMotion.value === "reduce";
+  const typedLengths = instant ? [characters.length] : characters.map((_, i) => i + 1);
+  const deletedLengths = instant ? [0] : characters.map((_, i) => characters.length - 1 - i);
+
+  for (const length of typedLengths) {
+    displayText.value = characters.slice(0, length).join("");
     await wait(typeSpeed);
   }
 
@@ -106,8 +116,8 @@ const runTypewriter = async (config: ResolvedConfig) => {
   await wait(holdDuration);
   announcedText.value = "";
 
-  while (displayText.value.length > 0) {
-    displayText.value = displayText.value.slice(0, -1);
+  for (const length of deletedLengths) {
+    displayText.value = characters.slice(0, length).join("");
     await wait(deleteSpeed);
   }
 
@@ -149,6 +159,10 @@ const runWordPulse = async (config: ResolvedConfig) => {
 const runLoop = async () => {
   try {
     while (true) {
+      if (!props.messageConfigs.length) {
+        await wait(Math.max(props.introDelay, EMPTY_POLL_MS));
+        continue;
+      }
       if (props.introDelay > 0) await wait(props.introDelay);
 
       for (const msg of props.messageConfigs) {
@@ -183,7 +197,7 @@ onUnmounted(stop);
   src: url("/fonts/monoMMM_5.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
-  font-display: optional;
+  font-display: swap;
 }
 
 @layer components {
@@ -191,6 +205,7 @@ onUnmounted(stop);
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-inline-size: 100%;
     row-gap: var(--samaritan-prompt-cursor-gap, 0.6rem);
     font-family: var(--samaritan-prompt-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
     font-size: var(--samaritan-prompt-font-size, 2rem);
@@ -208,11 +223,20 @@ onUnmounted(stop);
         display: flex;
         justify-content: center;
         min-height: 1.2em;
+        max-inline-size: 100%;
+        min-inline-size: 0;
 
         .samaritan-prompt__text {
-          color: var(--samaritan-prompt-text-colour, #ffffff);
-          white-space: nowrap;
+          color: var(--samaritan-prompt-text-colour, var(--theme-text));
+          white-space: var(--samaritan-prompt-text-white-space, normal);
+          overflow-wrap: anywhere;
+          text-align: center;
           text-transform: var(--samaritan-prompt-text-transform, uppercase);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          -webkit-line-clamp: var(--samaritan-prompt-text-line-clamp, none);
+          line-clamp: var(--samaritan-prompt-text-line-clamp, none);
         }
       }
 
@@ -220,12 +244,12 @@ onUnmounted(stop);
         width: 100%;
         min-width: 4ch;
         height: var(--samaritan-prompt-underline-height, 0.15rem);
-        background: var(--samaritan-prompt-underline-colour, #ffffff);
+        background: var(--samaritan-prompt-underline-colour, var(--theme-text));
       }
     }
 
     .samaritan-prompt__cursor {
-      color: var(--samaritan-prompt-cursor-colour, #cc0000);
+      color: var(--samaritan-prompt-cursor-colour, var(--theme-accent));
       font-size: var(--samaritan-prompt-cursor-size, 2.4rem);
       line-height: 1;
       animation: samaritan-prompt-pulse var(--samaritan-prompt-cursor-pulse-duration, 2.5s) ease-in-out infinite;
@@ -265,7 +289,7 @@ onUnmounted(stop);
 @keyframes samaritan-prompt-pulse {
   0%,
   100% {
-    color: var(--samaritan-prompt-cursor-colour, #cc0000);
+    color: var(--samaritan-prompt-cursor-colour, var(--theme-accent));
   }
   50% {
     color: var(--samaritan-prompt-cursor-colour-off, transparent);

package/app/components/02.molecules/samaritan-prompt/stories/SamaritanPrompt.stories.ts

@@ -1,12 +1,15 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 import SamaritanPrompt from "../SamaritanPrompt.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
-// The default colours are white on the assumption of a dark page, so every story renders on a dark
-// stage. Keying on the serialised args restarts the loop when a timing control changes, so the
+// Stories render the classic white-on-black look by setting the colour tokens on a dark stage (the
+// defaults follow --theme-text and --theme-accent). Keying on the serialised args restarts the loop when a timing control changes, so the
 // new value is visible straight away instead of after the current cycle.
 const stageStyle =
-  "display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #000; color: #fff;";
+  "display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #000; color: #fff; " +
+  "--samaritan-prompt-text-colour: #fff; --samaritan-prompt-underline-colour: #fff; --samaritan-prompt-cursor-colour: #cc0000;";
 
 const timingArgTypes = {
   typeSpeed: {
@@ -127,3 +130,51 @@ export const CustomCursorAndTokens: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    messages: [
+      "Die Überwachungssysteme sind vollständig aktiviert und melden ungewöhnliche Aktivitäten",
+      "https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own",
+      "",
+      "👍🏽 👨‍👩‍👧 ok",
+      "<b>Not bold</b>",
+      "مرحبا بالعالم",
+      "x",
+    ],
+    typeSpeed: 40,
+    deleteSpeed: 20,
+    holdDuration: 1500,
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "Hostile messages at every `CanvasSwitcher` width, typed fast so the cycle comes round quickly. Check that: the long German message and the unbroken URL wrap inside the canvas and stay centred; " +
+          "the empty message is skipped over rather than stopping the loop (until 2026-10-21 it halted the cycle); emoji with a skin tone and a family emoji type as whole characters, never half a glyph; " +
+          "`<b>` types as text; the right-to-left message reads correctly; a single character still shows. Try `effect: word-pulse` too, and turn on reduced motion in your OS: each message then appears whole instead of typing.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/samaritan-prompt/stories/SamaritanPromptMixed.stories.ts

@@ -1,12 +1,14 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas, SamaritanPromptMessageConfig } from "~/types/components";
 import SamaritanPromptMixed from "../SamaritanPromptMixed.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { SamaritanPromptMessageConfig } from "~/types/components";
 
-// Dark stage because the default colours are white. Keying on the serialised args restarts the
+// Dark stage with the classic white-on-black tokens (the defaults follow --theme-text and --theme-accent). Keying on the serialised args restarts the
 // loop when a control changes, so the new value is visible straight away.
 const stageStyle =
-  "display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #000; color: #fff;";
+  "display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #000; color: #fff; " +
+  "--samaritan-prompt-text-colour: #fff; --samaritan-prompt-underline-colour: #fff; --samaritan-prompt-cursor-colour: #cc0000;";
 
 const messageConfigs: SamaritanPromptMessageConfig[] = [
   { text: "Good evening", effect: "typewriter", holdDuration: 2500 },
@@ -107,8 +109,8 @@ type Story = StoryObj<typeof SamaritanPromptMixed>;
 
 export const Default: Story = {};
 
-export const LightPage: Story = {
-  name: "Light Page (token override)",
+export const ThemeDefaults: Story = {
+  name: "Theme Defaults",
   render: (args) => ({
     components: { SamaritanPromptMixed },
     setup() {
@@ -116,9 +118,67 @@ export const LightPage: Story = {
       return { args, restartKey };
     },
     template: `
-      <div style="display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #fff; --samaritan-prompt-text-colour: #000; --samaritan-prompt-underline-colour: #000;">
+      <div style="display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem;">
         <SamaritanPromptMixed :key="restartKey" v-bind="args" />
       </div>
     `,
   }),
+  parameters: {
+    docs: {
+      description: {
+        story: "No colour tokens set: text and underline follow `--theme-text`, the cursor `--theme-accent`.",
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    introDelay: 0,
+    messageConfigs: [
+      {
+        text: "Die Überwachungssysteme sind vollständig aktiviert und melden ungewöhnliche Aktivitäten",
+        effect: "typewriter",
+        typeSpeed: 30,
+        holdDuration: 1500,
+      },
+      { text: "https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own", effect: "word-pulse" },
+      { text: "", effect: "typewriter", holdDuration: 300 },
+      { text: "👍🏽 👨‍👩‍👧 ok", effect: "typewriter", holdDuration: 1500 },
+      { text: "<b>Not bold</b>", effect: "word-pulse" },
+      { text: "مرحبا بالعالم", effect: "typewriter", holdDuration: 1500 },
+      { text: "x", effect: "typewriter", typeSpeed: 0, deleteSpeed: 0, holdDuration: 800, pauseDuration: 0 },
+    ],
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "Hostile message configs at every `CanvasSwitcher` width, with `introDelay: 0`. Check that: the long German message and the unbroken URL wrap inside the canvas and stay centred; " +
+          "the empty message passes without stopping the loop; emoji with a skin tone and a family emoji type as whole characters; `<b>` renders as text; the right-to-left message reads correctly; " +
+          "the zero-speed single character still shows. Set `messageConfigs` to `[]` in Controls: the component idles instead of freezing the tab (until 2026-10-21 an empty list with `introDelay: 0` locked up the page).",
+      },
+    },
+  },
 };