kmcom-nuxt-layers 2.7.4 → 3.0.0

package/layers/{typography/app/components/Typography/HeadlineScreen.vue → design-system/typography/app/components/Typography/QuoteBlock.vue}

@@ -1,10 +1,12 @@
-<script lang="ts" setup>
+<script setup lang="ts">
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
     FluidFontSize,
+    FontFamily,
     FontLeading,
+    FontSize,
     FontSlant,
     FontTracking,
     FontWeight,
@@ -13,23 +15,19 @@
     TextTransform,
   } from '../../types/typography'
 
-  defineOptions({ inheritAttrs: false })
-
   const {
-    level = 1,
-    fluidSize = '2xl',
-    weight = 'font-bold',
+    weight = 'font-normal',
     width = 'font-stretch-normal',
-    slant = 'normal',
-    leading = 'leading-tight',
-    tracking = 'tracking-tight',
+    slant = 'italic',
+    leading = 'leading-normal',
+    tracking = 'tracking-normal',
     align = 'left',
     transform = 'none',
     color = undefined,
-    class: classProp = '',
+    size = undefined,
+    fluidSize = undefined,
+    font = undefined,
   } = defineProps<{
-    level?: 1 | 2 | 3 | 4 | 5 | 6
-    fluidSize?: FluidFontSize
     weight?: FontWeight
     width?: FontWidth
     slant?: FontSlant
@@ -38,27 +36,27 @@
     align?: TextAlign
     transform?: TextTransform
     color?: UiColors
-    class?: string
+    size?: FontSize
+    fluidSize?: FluidFontSize
+    font?: FontFamily
   }>()
-
-  const tag = computed(() => `h${level}` as const)
-
-  const { classes } = useTypography({
-    weight: weight,
-    width: width,
-    slant: slant,
-    leading: leading,
-    tracking: tracking,
-    align: align,
-    transform: transform,
-    fluidSize: fluidSize,
-  })
-
+  const { classes } = useTypography(() => ({
+    weight,
+    width,
+    slant,
+    leading,
+    tracking,
+    align,
+    transform,
+    ...(font !== undefined && { font }),
+    ...(size !== undefined && { size }),
+    ...(fluidSize !== undefined && { fluidSize }),
+  }))
   const colorClass = useColor(color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[classes, colorClass, classProp]" v-bind="$attrs">
+  <blockquote :class="[classes, colorClass]">
     <slot />
-  </component>
+  </blockquote>
 </template>

package/layers/design-system/typography/app/components/Typography/RepeatText.vue

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import { useRepeatFill } from '../../composables/repeatFill'
+  import { useTypography } from '../../composables/typography'
+  import type { UiColors } from '../../types/colors'
+  import type { FluidFontSize, FontWeight, TypographyTag } from '../../types/typography'
+
+  const {
+    rows = 1,
+    direction = 'vertical',
+    text = '',
+    repeat = 'auto',
+    separator = '',
+    weight = undefined,
+    size = '4xl',
+    color = undefined,
+    offset = [],
+    letterSpacing = undefined,
+    wordSpacing = undefined,
+    rowGap = '0',
+    tag = 'div',
+    stroke = false,
+    strokeWidth = 1.5,
+  } = defineProps<{
+    rows?: number
+    direction?: 'horizontal' | 'vertical'
+    text?: string | string[]
+    repeat?: number | 'auto'
+    separator?: string
+    weight?: FontWeight | FontWeight[]
+    size?: FluidFontSize | FluidFontSize[]
+    color?: UiColors | UiColors[]
+    offset?: string[]
+    letterSpacing?: string | string[]
+    wordSpacing?: string | string[]
+    rowGap?: string
+    tag?: TypographyTag
+    // Renders copies as outline-only (no fill) — the classic poster trick of
+    // mixing solid/hollow repeats down a column. 'even'/'odd' alternate;
+    // 'center' fills only the middle copy and strokes the rest.
+    stroke?: 'even' | 'odd' | 'center' | false
+    strokeWidth?: number
+  }>()
+
+  function pick<T>(value: T | T[] | undefined, index: number): T | undefined {
+    if (value === undefined) return undefined
+    return Array.isArray(value) ? value[index % value.length] : value
+  }
+
+  const rowText = (i: number) => pick(text, i) ?? ''
+  const rowWeight = (i: number) => pick(weight, i)
+  const rowSize = (i: number) => pick(size, i)
+  const rowColor = (i: number) => pick(color, i)
+  const rowOffset = (i: number) => offset[i] ?? '0'
+  const rowLetterSpacing = (i: number) => pick(letterSpacing, i)
+  const rowWordSpacing = (i: number) => pick(wordSpacing, i)
+
+  const rowClasses = computed(() =>
+    Array.from({ length: rows }, (_, i) => {
+      const weight = rowWeight(i)
+      const fluidSize = rowSize(i)
+      return useTypography({
+        ...(weight !== undefined && { weight }),
+        ...(fluidSize !== undefined && { fluidSize }),
+      }).classes.value
+    })
+  )
+
+  const rowColorClasses = computed(() =>
+    Array.from({ length: rows }, (_, i) => useColor(rowColor(i), 'text').value)
+  )
+
+  const rowStyle = (i: number) => ({
+    transform:
+      direction === 'vertical' ? `translateY(${rowOffset(i)})` : `translateX(${rowOffset(i)})`,
+    ...(rowLetterSpacing(i) !== undefined && { letterSpacing: rowLetterSpacing(i) }),
+    ...(rowWordSpacing(i) !== undefined && { wordSpacing: rowWordSpacing(i) }),
+  })
+
+  const containerRefs = useTemplateRef<HTMLElement[]>('containerRefs')
+  const itemRefs = ref<HTMLElement[]>([])
+
+  const { calculatedCopies } = useRepeatFill({
+    containerRefs,
+    itemRefs,
+    rowCount: computed(() => (repeat === 'auto' ? rows : 0)),
+    axis: computed(() => (direction === 'vertical' ? 'height' : 'width')),
+  })
+
+  const rowCopies = (i: number) => {
+    const n = repeat === 'auto' ? (calculatedCopies.value[i] ?? 1) : repeat
+    // 'center' needs a true middle copy, so always round up to an odd count.
+    return stroke === 'center' && n % 2 === 0 ? n + 1 : n
+  }
+
+  const isStrokeCopy = (copy: number, total: number) => {
+    if (!stroke) return false
+    if (stroke === 'center') return copy !== (total + 1) / 2
+    return stroke === 'even' ? copy % 2 === 0 : copy % 2 === 1
+  }
+
+  const setItemRef = (el: Element | ComponentPublicInstance | null, rowIndex: number) => {
+    const node = el && '$el' in el ? (el.$el as HTMLElement) : el
+    if (node instanceof HTMLElement) itemRefs.value[rowIndex] = node
+  }
+</script>
+
+<template>
+  <ElementTw
+    :as="tag"
+    :component-props="{
+      class: ['flex', direction === 'vertical' ? 'flex-row h-full' : 'flex-col'],
+      style: { gap: rowGap },
+    }"
+  >
+    <div
+      v-for="i in rows"
+      :key="i - 1"
+      ref="containerRefs"
+      class="overflow-hidden"
+      :class="direction === 'vertical' ? 'h-full' : 'w-full'"
+    >
+      <div
+        class="flex whitespace-nowrap"
+        :class="direction === 'vertical' ? 'flex-col' : 'flex-nowrap'"
+        :style="rowStyle(i - 1)"
+      >
+        <template v-for="copy in rowCopies(i - 1)" :key="copy">
+          <TypographyTextStroke
+            v-if="isStrokeCopy(copy, rowCopies(i - 1))"
+            :ref="(el) => copy === 1 && setItemRef(el, i - 1)"
+            :text="rowText(i - 1)"
+            :stroke-width
+            :class="[rowClasses[i - 1], rowColorClasses[i - 1]]"
+          />
+          <span
+            v-else
+            :ref="(el) => copy === 1 && setItemRef(el, i - 1)"
+            :class="[rowClasses[i - 1], rowColorClasses[i - 1]]"
+          >
+            {{ rowText(i - 1) }}{{ copy < rowCopies(i - 1) ? separator : '' }}
+          </span>
+        </template>
+      </div>
+    </div>
+  </ElementTw>
+</template>

package/layers/{typography → design-system/typography}/app/components/Typography/index.vue

@@ -4,6 +4,7 @@
   import type { UiColors } from '../../types/colors'
   import type {
     FluidFontSize,
+    FontFamily,
     FontLeading,
     FontSize,
     FontSlant,
@@ -15,8 +16,6 @@
     TypographyTag,
   } from '../../types/typography'
 
-  defineOptions({ inheritAttrs: false })
-
   const {
     tag = 'p',
     weight = 'font-normal',
@@ -29,6 +28,7 @@
     color = undefined,
     size = 'base',
     fluidSize = undefined,
+    font = undefined,
   } = defineProps<{
     tag?: TypographyTag
     weight?: FontWeight
@@ -41,6 +41,7 @@
     color?: UiColors
     size?: FontSize
     fluidSize?: FluidFontSize
+    font?: FontFamily
   }>()
   const { classes } = useTypography(() => ({
     weight,
@@ -51,13 +52,14 @@
     align,
     transform,
     size,
+    ...(font !== undefined && { font }),
     ...(fluidSize !== undefined && { fluidSize }),
   }))
   const colorClass = useColor(color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[classes, colorClass]" v-bind="$attrs">
+  <ElementTw :as="tag" :component-props="{ class: [classes, colorClass] }">
     <slot />
-  </component>
+  </ElementTw>
 </template>

package/layers/design-system/typography/app/composables/repeatFill.ts

@@ -0,0 +1,51 @@
+import type { MaybeRef, ShallowRef } from 'vue'
+
+// Static counterpart to animations layer's useMarqueeCopies — computes how many
+// copies of a row's text are needed to fill its container edge-to-edge, no motion.
+export function useRepeatFill(options: {
+  containerRefs: Readonly<ShallowRef<HTMLElement[] | null>>
+  itemRefs: Ref<HTMLElement[]>
+  rowCount: MaybeRef<number>
+  axis: MaybeRef<'width' | 'height'>
+}) {
+  const { containerRefs, itemRefs, rowCount, axis } = options
+  const calculatedCopies = ref<number[]>([])
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function calculate() {
+    const n = unref(rowCount)
+    const dimension = unref(axis) === 'height' ? 'offsetHeight' : 'offsetWidth'
+    for (let i = 0; i < n; i++) {
+      const item = itemRefs.value[i]
+      const container = containerRefs.value?.[i]
+      if (!item || !container) continue
+      const singleSize = item[dimension]
+      if (singleSize === 0) continue
+      calculatedCopies.value[i] = Math.max(1, Math.ceil(container[dimension] / singleSize))
+    }
+  }
+
+  function debouncedCalculate() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      calculate()
+      debounceTimer = null
+    }, 150)
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      calculate()
+      setTimeout(calculate, 100)
+    })
+    window.addEventListener('resize', debouncedCalculate, { passive: true })
+  })
+
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    window.removeEventListener('resize', debouncedCalculate)
+  })
+
+  return { calculatedCopies }
+}

package/layers/{typography → design-system/typography}/app/composables/typography.ts

@@ -2,6 +2,7 @@ import { toValue, type MaybeRefOrGetter } from 'vue'
 
 import type {
   FluidFontSize,
+  FontFamily,
   FontLeading,
   FontSize,
   FontSlant,
@@ -81,11 +82,14 @@ export function useTypography(
     transform?: TextTransform
     size?: FontSize
     fluidSize?: FluidFontSize
+    font?: FontFamily
   }>
 ) {
   const classes = computed(() => {
     const p = toValue(props)
     return [
+      p.font ? `font-${p.font}` : '',
+
       normalizeAxis(p.weight, {
         prefix: 'font',
         fallback: 'font-normal',

package/layers/{typography → design-system/typography}/app/types/typography.ts

@@ -156,6 +156,13 @@ export type TextAlign = 'left' | 'center' | 'right' | 'justify'
 
 export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize'
 
+/* ======================================================
+   Font Family
+   - Maps to Tailwind's --font-* theme tokens (typography.css)
+   ====================================================== */
+
+export type FontFamily = 'sans' | 'mono' | 'display'
+
 /* ======================================================
    Base Typography Props
    - Used by Text / Heading / Prose components
@@ -171,4 +178,5 @@ export type TypographyProps = {
   tracking?: FontTracking
   align?: TextAlign
   transform?: TextTransform
+  font?: FontFamily
 }

package/layers/{typography → design-system/typography}/nuxt.config.ts

@@ -1,15 +1,13 @@
 export default defineNuxtConfig({
   $meta: { name: 'typography' },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/typography': import.meta.dirname,
     '#layers/typography/types': `${import.meta.dirname}/app/types`,
   },
 
-  css: ['#layers/typography/app/assets/css/typography.css'],
-
   compatibilityDate: '2026-06-06',
 
   typescript: {

package/layers/design-system/typography/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/{visual → design-system/visual}/app/app.config.ts

@@ -2,7 +2,7 @@ import type { AccentSceneConfig } from './types/accent'
 import type { GradientConfig } from './types/gradient'
 
 export default defineAppConfig({
-  uiLayer: {
+  visualLayer: {
     gradients: {
       brand: {
         shape: 'linear' as const,
@@ -108,7 +108,7 @@ export default defineAppConfig({
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    uiLayer?: {
+    visualLayer?: {
       name?: string
       gradients?: Record<string, GradientConfig>
       accentScenes?: Record<string, AccentSceneConfig>

package/layers/{visual → design-system/visual}/app/components/Accent/Blob.vue

@@ -25,5 +25,5 @@
 </script>
 
 <template>
-  <div class="accent-blob" :style aria-hidden="true" />
+  <ElementTw :component-props="{ style, class: 'accent-blob', 'aria-hidden': true }" />
 </template>

package/layers/{visual → design-system/visual}/app/components/Accent/Scene.vue

@@ -16,9 +16,8 @@
   const resolvedBlobs = computed((): BlobConfig[] => {
     if (blobs) return blobs
     if (preset) {
-      const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
-        | Record<string, AccentSceneConfig>
-        | undefined
+      const scenes = (appConfig.visualLayer as Record<string, unknown> | undefined)
+        ?.accentScenes as Record<string, AccentSceneConfig> | undefined
       return scenes?.[preset]?.blobs ?? []
     }
     return []

package/layers/{visual → design-system/visual}/app/components/Gradient/Background.vue

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-  <component :is="tag" :style>
+  <ElementTw :as="tag" :component-props="{ style }">
     <slot />
-  </component>
+  </ElementTw>
 </template>

package/layers/{visual → design-system/visual}/app/components/Gradient/Text.vue

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-  <component :is="tag" :style class="gradient-text inline-block">
+  <ElementTw :as="tag" :component-props="{ style, class: 'gradient-text inline-block' }">
     <slot />
-  </component>
+  </ElementTw>
 </template>

package/layers/{visual → design-system/visual}/app/composables/gradient.ts

@@ -28,7 +28,7 @@ function resolveGradientPreset(
 }
 
 function getGradientPresetMap(appConfig: ReturnType<typeof useAppConfig>) {
-  return (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
+  return (appConfig.visualLayer as Record<string, unknown> | undefined)?.['gradients'] as
     | Record<string, GradientConfig>
     | undefined
 }

package/layers/design-system/visual/app/types/breakpoints.ts

@@ -0,0 +1,67 @@
+/**
+ * Breakpoint Types
+ *
+ * Centralized breakpoint definitions matching Tailwind defaults.
+ * Used for responsive sizing, layouts, and media queries across the design system.
+ */
+
+import { BREAKPOINT_PX } from '#layers/core/types/tokens'
+
+/**
+ * Breakpoint values in pixels
+ * Matches Tailwind's default breakpoint system
+ *
+ * sm/md/lg/xl repoint at layers/core's canonical BREAKPOINT_PX (same values,
+ * one source) — see nuxt-declarative-layout-system-spec.md §14/Phase 3.
+ * '2xl' has no core equivalent yet, so it stays hand-written here.
+ *
+ * @see https://tailwindcss.com/docs/responsive-design
+ */
+export const BREAKPOINT_VALUES = {
+  ...BREAKPOINT_PX,
+  '2xl': 1536,
+} as const
+
+/**
+ * Device breakpoint values in pixels
+ * Semantic breakpoints for mobile-first responsive design
+ *
+ * - mobile: 0-639px (default, no min-width)
+ * - tablet: 640px+ (tablets and small laptops)
+ * - desktop: 1024px+ (laptops and desktops)
+ * - wide: 1920px+ (large monitors and 4K displays)
+ */
+export const DEVICE_BREAKPOINT_VALUES = {
+  mobile: 0,
+  tablet: 640,
+  desktop: 1024,
+  wide: 1920,
+} as const
+
+/**
+ * Phone breakpoint values in pixels
+ * Covers the range of common smartphone screen sizes
+ *
+ * - phone-sm: 320px+ (iPhone SE, small Android phones)
+ * - phone-md: 375px+ (iPhone 12/13/14, standard phones)
+ * - phone-lg: 428px+ (iPhone Pro Max, large Android phones)
+ */
+export const PHONE_BREAKPOINT_VALUES = {
+  'phone-sm': 320,
+  'phone-md': 375,
+  'phone-lg': 428,
+} as const
+
+/**
+ * Tablet breakpoint values in pixels
+ * Covers the range of common tablet screen sizes
+ *
+ * - tablet-sm: 768px+ (iPad mini, small tablets)
+ * - tablet-md: 834px+ (iPad, standard tablets)
+ * - tablet-lg: 1024px+ (iPad Pro 11", large tablets)
+ */
+export const TABLET_BREAKPOINT_VALUES = {
+  'tablet-sm': 768,
+  'tablet-md': 834,
+  'tablet-lg': 1024,
+} as const

package/layers/{visual → design-system/visual}/app/types/media.ts

@@ -22,17 +22,6 @@ export type ImageLoading = 'lazy' | 'eager'
  */
 export type ImageFit = 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
 
-/**
- * Re-export breakpoint types for convenience
- */
-export type {
-  ResponsiveBreakpoint,
-  DeviceBreakpoint,
-  PhoneBreakpoint,
-  TabletBreakpoint,
-  DeviceOrientation,
-} from './breakpoints'
-
 /**
  * Responsive sizes configuration
  * Allows defining different image sizes per breakpoint

package/layers/{visual → design-system/visual}/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   $meta: { name: 'visual' },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/visual': import.meta.dirname,

package/layers/design-system/visual/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/{animations → motion/animations}/app/components/Motion/Marquee.vue

@@ -156,10 +156,3 @@
     </div>
   </div>
 </template>
-
-<!-- <style scoped>
-/* .motion-marquee { width: 100%; overflow: hidden; } */ /* stylelint-disable-next-line
-selector-class-pattern */ /* .motion-marquee__content { */ /* display: flex; */ /* will-change:
-transform; */ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ /* width:
-max-content; */ /* } */
-</style> -->

package/layers/{animations → motion/animations}/app/components/Motion/Staggered.vue

@@ -3,10 +3,13 @@
   const {
     staggerDelay = 100,
     initialDelay = 0,
-    animation = 'fadeIn',
+    animation = 'fade-in',
   } = defineProps<{
     staggerDelay?: number
     initialDelay?: number
+    /**
+     * Suffix of a `transitions` layer `animate-*` class (e.g. 'fade-in', 'slide-in-up').
+     */
     animation?: string
   }>()
 

package/layers/{animations → motion/animations}/nuxt.config.ts

@@ -1,11 +1,10 @@
 export default defineNuxtConfig({
   $meta: { name: 'animations' },
 
-  extends: ['../scroll'],
+  extends: ['../scroll', '../transitions'],
 
   alias: {
     '#layers/animations': import.meta.dirname,
-    '#layers/animations/types': `${import.meta.dirname}/app/types`,
   },
 
   compatibilityDate: '2026-06-06',

package/layers/motion/animations/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/motion/{package.json → motion/package.json}

@@ -4,7 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/motion/{tsconfig.json → motion/tsconfig.json}

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
 
   "compilerOptions": {
     "strict": true