srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/samaritan.vue

@@ -1,327 +0,0 @@
-<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>
-
-        <PageRow tag="div" variant="full">
-          <div class="samaritan-stage samaritan-stage--mixed">
-            <SamaritanPromptMixed :message-configs="mixedMessages" :hide-cursor-in-cycle="false" />
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="full">
-          <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>
-        </PageRow>
-      </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 {
-    .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/app/pages/typography/hero-text.vue

@@ -1,97 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Typography - Hero Text</h1>
-          <p class="page-body-normal">Hero text styles</p>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Change variants</h2>
-          <div class="demo-row">
-            <div>
-              <strong>Axis:</strong>
-              <select v-model="axisOptions">
-                <option value="horizontal">Horizontal</option>
-                <option value="vertical">Vertical</option>
-              </select>
-            </div>
-            <div>
-              <strong>Font Size:</strong>
-              <select v-model="fontSizeOptions">
-                <option value="display">Display</option>
-                <option value="title">Title</option>
-                <option value="heading">Heading</option>
-                <option value="subheading">Subheading</option>
-                <option value="label">Label</option>
-              </select>
-            </div>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">{{ axisOptions }}: {{ fontSizeOptions }} Variant</h2>
-          <HeroText
-            tag="h1"
-            :axis="axisOptions"
-            :font-size="fontSizeOptions"
-            :text-content="[
-              {
-                text: 'Designing',
-                styleClass: 'normal',
-              },
-              {
-                text: 'Artistry',
-                styleClass: 'accent',
-              },
-              {
-                text: 'at Home',
-                styleClass: 'normal',
-              },
-            ]"
-            :style-class-passthrough="['class-demo']"
-          />
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography - Hero Text",
-  meta: [{ name: "description", content: "Typography - Hero Text" }],
-  bodyAttrs: {
-    class: "page-typography-hero-text",
-  },
-});
-
-const axisOptions = ref<"horizontal" | "vertical">("horizontal");
-const fontSizeOptions = ref<"display" | "title" | "heading" | "subheading" | "label">("display");
-</script>
-
-<style lang="css">
-.page-typography-hero-text {
-  .demo-row {
-    display: flex;
-    gap: 2rem;
-    margin-block: 1.5rem;
-
-    & > div {
-      display: flex;
-      flex-direction: column;
-      gap: 1.6rem;
-
-      select {
-        padding: 0.25rem;
-        font-size: 1.6rem;
-      }
-    }
-  }
-}
-</style>

package/app/pages/typography/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Typography</h1>
-          <h2 class="page-heading-2">Example styles used within page content</h2>
-          <p class="page-body-normal">Use within main body content</p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography",
-  meta: [{ name: "description", content: "Typography" }],
-  bodyAttrs: {
-    class: "page-typography",
-  },
-});
-</script>
-
-<style lang="css">
-.page-typography {
-  .class-demo {
-    margin-block-end: 1rem;
-    pre {
-      display: block;
-      margin-block: 0;
-    }
-  }
-}
-</style>

package/app/pages/typography/page-body.vue

@@ -1,171 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Typography - Body Text</h1>
-          <p class="page-body-normal">Page body styles</p>
-          <p class="page-body-normal">Use within main body content</p>
-
-          <div class="demo-row">
-            <strong>page-body-large-light</strong>
-            <div class="class-demo page-body-large-light">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-large</strong>
-            <div class="class-demo page-body-large">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-large-semibold</strong>
-            <div class="class-demo page-body-large-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-large-bold</strong>
-            <div class="class-demo page-body-large-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium-light</strong>
-            <div class="class-demo page-body-medium-light">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium</strong>
-            <div class="class-demo page-body-medium">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium-semibold</strong>
-            <div class="class-demo page-body-medium-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium-bold</strong>
-            <div class="class-demo page-body-medium-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium-semibold</strong>
-            <div class="class-demo page-body-medium-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-medium-bold</strong>
-            <div class="class-demo page-body-medium-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-normal-light</strong>
-            <div class="class-demo page-body-normal-light">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-normal</strong>
-            <div class="class-demo page-body-normal">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-normal-semibold</strong>
-            <div class="class-demo page-body-normal-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-normal-bold</strong>
-            <div class="class-demo page-body-normal-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-small-light</strong>
-            <div class="class-demo page-body-small-light">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-small</strong>
-            <div class="class-demo page-body-small">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-small-semibold</strong>
-            <div class="class-demo page-body-small-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-small-bold</strong>
-            <div class="class-demo page-body-small-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-xsmall-light</strong>
-            <div class="class-demo page-body-xsmall-light">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-xsmall</strong>
-            <div class="class-demo page-body-xsmall">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-xsmall-semibold</strong>
-            <div class="class-demo page-body-xsmall-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-body-xsmall-bold</strong>
-            <div class="class-demo page-body-xsmall-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography",
-  meta: [{ name: "description", content: "Typography" }],
-  bodyAttrs: {
-    class: "page-typography-body",
-  },
-});
-</script>
-
-<style lang="css">
-.page-typography-body {
-  .demo-row {
-    margin-block-end: 1rem;
-    strong {
-      display: block;
-      margin-block: 0;
-    }
-    .class-demo {
-      display: block;
-      margin-block-end: 1rem;
-    }
-  }
-}
-</style>