kmcom-nuxt-layers 1.7.9 → 2.1.6

package/layers/typography/app/components/Typography/Headline.vue

@@ -0,0 +1,90 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import { useTypography } from '../../composables/typography'
+  import type { UiColors } from '../../types/colors'
+  import type {
+    FontLeading,
+    FontSize,
+    FontSlant,
+    FontTracking,
+    FontWeight,
+    FontWidth,
+    TextAlign,
+    TextTransform,
+  } from '../../types/typography'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      level?: 1 | 2 | 3 | 4 | 5 | 6
+      weight?: FontWeight
+      width?: FontWidth
+      slant?: FontSlant
+      leading?: FontLeading
+      tracking?: FontTracking
+      align?: TextAlign
+      transform?: TextTransform
+      color?: UiColors
+      size?: FontSize
+      class?: string
+    }>(),
+    {
+      level: 1,
+      weight: 'font-bold',
+      width: 'font-stretch-normal',
+      slant: 'normal',
+      leading: 'leading-tight',
+      tracking: 'tracking-tight',
+      align: 'left',
+      transform: 'none',
+      class: '',
+    }
+  )
+  const tag = computed(() => `h${props.level}` as const)
+
+  const sizeClass = computed(() => {
+    if (props.size) return null
+
+    const sizes: Record<number, string> = {
+      1: 'text-4xl sm:text-5xl',
+      2: 'text-3xl sm:text-4xl',
+      3: 'text-2xl sm:text-3xl',
+      4: 'text-xl sm:text-2xl',
+      5: 'text-lg sm:text-xl',
+      6: 'text-base sm:text-lg',
+    }
+    return sizes[props.level]
+  })
+
+  const { classes } = useTypography({
+    weight: props.weight,
+    width: props.width,
+    slant: props.slant,
+    leading: props.leading,
+    tracking: props.tracking,
+    align: props.align,
+    transform: props.transform,
+    ...(props.size !== undefined && { size: props.size }),
+  })
+  const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <Typography
+    :tag
+    :weight="props.weight"
+    :width="props.width"
+    :slant="props.slant"
+    :leading="props.leading"
+    :tracking="props.tracking"
+    :align="props.align"
+    :transform="props.transform"
+    :class="[sizeClass, classes, colorClass, props.class]"
+    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
+  >
+    <slot />
+  </Typography>
+</template>

package/layers/typography/app/components/Typography/HeadlineScreen.vue

@@ -0,0 +1,75 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import { useTypography } from '../../composables/typography'
+  import type { UiColors } from '../../types/colors'
+  import type {
+    FontLeading,
+    FontScreenSize,
+    FontSlant,
+    FontTracking,
+    FontWeight,
+    FontWidth,
+    TextAlign,
+    TextTransform,
+  } from '../../types/typography'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      level?: 1 | 2 | 3 | 4 | 5 | 6
+      size?: FontScreenSize
+      weight?: FontWeight
+      width?: FontWidth
+      slant?: FontSlant
+      leading?: FontLeading
+      tracking?: FontTracking
+      align?: TextAlign
+      transform?: TextTransform
+      color?: UiColors
+      class?: string
+    }>(),
+    {
+      level: 1,
+      size: 'screen-xxl',
+      weight: 'font-bold',
+      width: 'font-stretch-normal',
+      slant: 'normal',
+      leading: 'leading-tight',
+      tracking: 'tracking-tight',
+      align: 'left',
+      transform: 'none',
+      class: '',
+    }
+  )
+
+  const tag = computed(() => `h${props.level}` as const)
+
+  const sizeMap: Record<string, string> = {
+    screen: 'text-screen',
+    'screen-xl': 'text-screen-xl',
+    'screen-xxl': 'text-screen-xxl',
+    'screen-xxxl': 'text-screen-xxxl',
+  }
+  const sizeClass = computed(() => sizeMap[props.size] ?? 'text-screen-xxl')
+
+  const { classes } = useTypography({
+    weight: props.weight,
+    width: props.width,
+    slant: props.slant,
+    leading: props.leading,
+    tracking: props.tracking,
+    align: props.align,
+    transform: props.transform,
+  })
+
+  const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <component :is="tag" :class="[sizeClass, classes, colorClass, props.class]" v-bind="$attrs">
+    <slot />
+  </component>
+</template>

package/layers/typography/app/components/Typography/QuoteBlock.vue

@@ -0,0 +1,21 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  import { useColor } from '../../composables/color'
+  import type { UiColors } from '../../types/colors'
+  import type { FontSize } from '../../types/typography'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = defineProps<{ color?: UiColors; size?: FontSize }>()
+  const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <Typography
+    tag="blockquote"
+    :class="colorClass"
+    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
+  >
+    <slot />
+  </Typography>
+</template>

package/layers/{ui → typography}/app/components/Typography/TextStroke.vue

@@ -1,31 +1,32 @@
+<!-- eslint-disable vue/define-props-destructuring -->
 <script lang="ts" setup>
-const id = useId()
-const contrast = usePreferredContrast()
+  const props = withDefaults(
+    defineProps<{
+      text: string
+      strokeWidth?: number
+      strokeColor?: string
+      fill?: string
+      linejoin?: 'round' | 'miter' | 'bevel'
+      tag?: string
+    }>(),
+    {
+      strokeWidth: 1.5,
+      strokeColor: 'currentColor',
+      fill: 'none',
+      linejoin: 'round',
+      tag: 'div',
+    }
+  )
+  const id = useId()
+  const contrast = usePreferredContrast()
 
-const props = withDefaults(
-  defineProps<{
-    text: string
-    strokeWidth?: number
-    strokeColor?: string
-    fill?: string
-    linejoin?: 'round' | 'miter' | 'bevel'
-    tag?: string
-  }>(),
-  {
-    strokeWidth: 1.5,
-    strokeColor: 'currentColor',
-    fill: 'none',
-    linejoin: 'round',
-    tag: 'div',
-  }
-)
-
-const effectiveStrokeWidth = computed(() =>
-  contrast.value === 'more' ? props.strokeWidth * 1.5 : props.strokeWidth
-)
+  const effectiveStrokeWidth = computed(() =>
+    contrast.value === 'more' ? props.strokeWidth * 1.5 : props.strokeWidth
+  )
 </script>
 
 <template>
+  <!-- eslint-disable vue/no-duplicate-attr-inheritance -->
   <component
     :is="tag"
     class="text-stroke inline-grid leading-none *:[grid-area:1/1]"
@@ -78,7 +79,7 @@ const effectiveStrokeWidth = computed(() =>
         x="0"
         y="0"
         dominant-baseline="text-before-edge"
-        :fill="fill"
+        :fill
         :stroke="strokeColor"
         :stroke-width="effectiveStrokeWidth"
         :stroke-linejoin="linejoin"
@@ -96,14 +97,14 @@ const effectiveStrokeWidth = computed(() =>
 </template>
 
 <style scoped>
-@media (forced-colors: active) {
-  .text-stroke-sizer {
-    visibility: visible;
-    color: CanvasText;
-  }
+  @media (forced-colors: active) {
+    .text-stroke-sizer {
+      visibility: visible;
+      color: CanvasText;
+    }
 
-  .text-stroke-svg {
-    display: none;
+    .text-stroke-svg {
+      display: none;
+    }
   }
-}
 </style>

package/layers/typography/app/components/Typography/index.vue

@@ -0,0 +1,54 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/no-unused-properties -->
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import { useTypography } from '../../composables/typography'
+  import type { UiColors } from '../../types/colors'
+  import type {
+    FontLeading,
+    FontSize,
+    FontSlant,
+    FontTracking,
+    FontWeight,
+    FontWidth,
+    TextAlign,
+    TextTransform,
+    TypographyTag,
+  } from '../../types/typography'
+
+  const props = withDefaults(
+    defineProps<{
+      tag?: TypographyTag
+      weight?: FontWeight
+      width?: FontWidth
+      slant?: FontSlant
+      leading?: FontLeading
+      tracking?: FontTracking
+      align?: TextAlign
+      transform?: TextTransform
+      color?: UiColors
+      size?: FontSize
+    }>(),
+    {
+      tag: 'p',
+      weight: 'font-normal',
+      width: 'font-stretch-normal',
+      slant: 'normal',
+      leading: 'leading-normal',
+      tracking: 'tracking-normal',
+      align: 'left',
+      transform: 'none',
+      size: 'base',
+    }
+  )
+  const { classes } = useTypography(props)
+  const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
+  <component :is="tag" :class="[classes, colorClass]" v-bind="$attrs">
+    <slot />
+  </component>
+</template>

package/layers/{ui → typography}/app/composables/typography.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import type {
   FontLeading,
   FontSize,

package/layers/{ui → typography}/app/types/typography.ts

@@ -132,7 +132,7 @@ export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize'
    - Used by Text / Heading / Prose components
    ====================================================== */
 
-export interface TypographyProps {
+export type TypographyProps = {
   as?: keyof HTMLElementTagNameMap
   weight?: FontWeight
   size?: FontSize

package/layers/typography/nuxt.config.ts

@@ -0,0 +1,17 @@
+export default defineNuxtConfig({
+  $meta: { name: 'typography' },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/typography': import.meta.dirname,
+    '#layers/typography/types': `${import.meta.dirname}/app/types`,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/typography/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "kmcom-layer-typography",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/typography/tsconfig.json

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

package/layers/ui/app/assets/css/ui.css

@@ -2,23 +2,3 @@
   background-color: var(--ui-bg);
   color: var(--ui-text);
 }
-
-.gradient-text {
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.accent-blob {
-  transition:
-    background-color 400ms ease,
-    opacity 300ms ease;
-}
-
-[data-theme-transparency='reduced'] .accent-blob {
-  opacity: 0 !important;
-}
-
-.site-word {
-  display: block;
-}

package/layers/ui/nuxt.config.ts

@@ -1,38 +1,22 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+// UI orchestrator — composes typography, navigation, and visual
 export default defineNuxtConfig({
   $meta: {
     name: 'ui',
   },
 
-  // Only extend core when running standalone dev (via dev:ui script)
-  extends: process.env.UI_STANDALONE ? ['../core'] : [],
+  extends: ['../typography', '../navigation', '../visual'],
 
   alias: {
     '#layers/ui': import.meta.dirname,
+    '#layers/ui/types': `${import.meta.dirname}/app/types`,
   },
 
-  modules: [
-    ...(process.env.NODE_ENV !== 'production' ? ['@nuxt/eslint'] : []),
-    '@nuxt/ui',
-    // '@nuxt/image'
-  ],
-
   css: ['#layers/ui/app/assets/css/ui.css'],
 
-  // devtools: {
-  //   enabled: true,
-  // },
-
-  compatibilityDate: '2026-01-24',
+  compatibilityDate: '2026-06-06',
 
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
-
-  // vite: {
-  //   build: {
-  //     target: 'es2020',
-  //   },
-  // },
 })

package/layers/visual/app/app.config.ts

@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+export default defineAppConfig({
+  uiLayer: {
+    gradients: {
+      brand: {
+        shape: 'linear' as const,
+        direction: 'to-br' as const,
+        from: { color: 'primary' as const, shade: 500 as const },
+        to: { color: 'secondary' as const, shade: 600 as const },
+      },
+      subtle: {
+        shape: 'linear' as const,
+        direction: 'to-b' as const,
+        from: { color: 'primary' as const, shade: 100 as const, opacity: 50 },
+        to: { color: 'transparent' as const },
+      },
+      hero: {
+        shape: 'radial' as const,
+        from: { color: 'primary' as const, shade: 400 as const, opacity: 40 },
+        to: { color: 'transparent' as const },
+      },
+    },
+    accentScenes: {
+      hero: {
+        blobs: [
+          {
+            x: 20,
+            y: 30,
+            size: '50rem',
+            blur: '3xl' as const,
+            opacity: 25,
+            color: 'primary' as const,
+            shade: 400 as const,
+          },
+          {
+            x: 80,
+            y: 70,
+            size: '40rem',
+            blur: '3xl' as const,
+            opacity: 20,
+            color: 'secondary' as const,
+            shade: 500 as const,
+          },
+        ],
+      },
+      corner: {
+        blobs: [
+          {
+            x: 100,
+            y: 0,
+            size: '35rem',
+            blur: '2xl' as const,
+            opacity: 30,
+            color: 'primary' as const,
+            shade: 500 as const,
+          },
+        ],
+      },
+      scattered: {
+        blobs: [
+          {
+            x: 15,
+            y: 20,
+            size: '30rem',
+            blur: 'xl' as const,
+            opacity: 20,
+            color: 'primary' as const,
+            shade: 400 as const,
+          },
+          {
+            x: 85,
+            y: 30,
+            size: '25rem',
+            blur: 'xl' as const,
+            opacity: 15,
+            color: 'secondary' as const,
+            shade: 400 as const,
+          },
+          {
+            x: 50,
+            y: 80,
+            size: '35rem',
+            blur: '2xl' as const,
+            opacity: 18,
+            color: 'info' as const,
+            shade: 400 as const,
+          },
+        ],
+      },
+      minimal: {
+        blobs: [
+          {
+            x: 50,
+            y: 50,
+            size: '60rem',
+            blur: '3xl' as const,
+            opacity: 10,
+            color: 'primary' as const,
+            shade: 500 as const,
+          },
+        ],
+      },
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  type AppConfigInput = {
+    uiLayer?: {
+      name?: string
+      gradients?: Record<string, import('./types/gradient').GradientConfig>
+      accentScenes?: Record<string, import('./types/accent').AccentSceneConfig>
+    }
+  }
+}

package/layers/visual/app/assets/css/visual.css

@@ -0,0 +1,15 @@
+.gradient-text {
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.accent-blob {
+  transition:
+    background-color 400ms ease,
+    opacity 300ms ease;
+}
+
+[data-theme-transparency='reduced'] .accent-blob {
+  opacity: 0 !important;
+}

package/layers/visual/app/components/Accent/Blob.vue

@@ -0,0 +1,32 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  import type { AccentBlobColor, BlobBlur } from '../../types/accent'
+
+  const props = withDefaults(
+    defineProps<{
+      x: number
+      y: number
+      size?: string
+      blur?: BlobBlur
+      opacity?: number
+      color?: AccentBlobColor
+      shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+      customColor?: string
+    }>(),
+    {
+      size: '40rem',
+      blur: '3xl',
+      opacity: 25,
+      color: 'primary',
+      shade: 500,
+    }
+  )
+
+  const { style } = useAccentBlob(props)
+</script>
+
+<template>
+  <div class="accent-blob" :style aria-hidden="true" />
+</template>

package/layers/{ui → visual}/app/components/Accent/Scene.vue

@@ -1,30 +1,33 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
+  // @ts-nocheck
+  import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
 
-const props = withDefaults(
-  defineProps<{
-    preset?: string
-    blobs?: BlobConfig[]
-    tag?: string
-  }>(),
-  {
-    tag: 'div',
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      preset?: string
+      blobs?: BlobConfig[]
+      tag?: string
+    }>(),
+    {
+      tag: 'div',
+    }
+  )
 
-const appConfig = useAppConfig()
+  const appConfig = useAppConfig()
 
-const resolvedBlobs = computed((): BlobConfig[] => {
-  if (props.blobs) return props.blobs
-  if (props.preset) {
-    const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
-      | Record<string, AccentSceneConfig>
-      | undefined
-    return scenes?.[props.preset]?.blobs ?? []
-  }
-  return []
-})
+  const resolvedBlobs = computed((): BlobConfig[] => {
+    if (props.blobs) return props.blobs
+    if (props.preset) {
+      const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
+        | Record<string, AccentSceneConfig>
+        | undefined
+      return scenes?.[props.preset]?.blobs ?? []
+    }
+    return []
+  })
 </script>
 
 <template>