kmcom-nuxt-layers 1.0.1

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

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

package/layers/ui/app/composables/color.ts

@@ -0,0 +1,36 @@
+import type { ColorUsage, UiColors } from '#layers/ui/app/types/colors'
+
+const colorMap: Record<UiColors, string> = {
+  // Semantic
+  dimmed: 'dimmed',
+  muted: 'muted',
+  toned: 'toned',
+  highlighted: 'highlighted',
+  inverted: 'inverted',
+  default: 'default',
+
+  // Status
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+
+  // Nuxt UI core
+  primary: 'primary',
+  neutral: 'neutral',
+
+  // Custom
+  secondary: 'secondary',
+  accent: 'accent',
+
+  // Base
+  black: 'black',
+  white: 'white',
+}
+
+export function useColor(color?: UiColors, type: ColorUsage = 'text') {
+  return computed(() => {
+    const colorName = color ? colorMap[color] : 'default'
+    return `${type}-${colorName}`
+  })
+}

package/layers/ui/app/composables/picture.ts

@@ -0,0 +1,145 @@
+import {
+  BREAKPOINT_VALUES,
+  DEVICE_BREAKPOINT_VALUES,
+  PHONE_BREAKPOINT_VALUES,
+  TABLET_BREAKPOINT_VALUES,
+} from '#layers/ui/app/types/breakpoints'
+import type { PictureProps, ResponsiveSizes, UsePictureReturn } from '#layers/ui/app/types/media'
+
+/**
+ * Convert ResponsiveSizes object to CSS sizes attribute string
+ * Supports Tailwind, device, phone, tablet, and orientation breakpoints
+ *
+ * @example
+ * ```ts
+ * // Tailwind breakpoints
+ * { default: '100vw', md: '50vw', lg: '33vw' }
+ * // Returns: '(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw'
+ *
+ * // Device breakpoints
+ * { default: '100vw', tablet: '768px', desktop: '1024px' }
+ * // Returns: '(min-width: 1024px) 1024px, (min-width: 640px) 768px, 100vw'
+ *
+ * // Phone breakpoints
+ * { default: '100vw', 'phone-md': '375px', 'phone-lg': '428px' }
+ * // Returns: '(min-width: 428px) 428px, (min-width: 375px) 375px, 100vw'
+ *
+ * // Orientation breakpoints
+ * { default: '100vw', portrait: '100vw', landscape: '50vw' }
+ * // Returns: '(orientation: landscape) 50vw, (orientation: portrait) 100vw, 100vw'
+ * ```
+ */
+function responsiveSizesToString(sizes: ResponsiveSizes): string {
+  // Combine all min-width breakpoints with their values
+  const breakpointEntries: Array<{ key: keyof ResponsiveSizes; value: number }> = []
+
+  // Add Tailwind breakpoints
+  const tailwindBreakpoints: Array<keyof typeof BREAKPOINT_VALUES> = ['2xl', 'xl', 'lg', 'md', 'sm']
+  for (const bp of tailwindBreakpoints) {
+    if (sizes[bp]) {
+      breakpointEntries.push({ key: bp, value: BREAKPOINT_VALUES[bp] })
+    }
+  }
+
+  // Add device breakpoints (skip mobile as it's 0px - handled by default)
+  const deviceBreakpoints: Array<keyof typeof DEVICE_BREAKPOINT_VALUES> = [
+    'wide',
+    'desktop',
+    'tablet',
+  ]
+  for (const bp of deviceBreakpoints) {
+    if (sizes[bp]) {
+      breakpointEntries.push({ key: bp, value: DEVICE_BREAKPOINT_VALUES[bp] })
+    }
+  }
+
+  // Add phone breakpoints
+  const phoneBreakpoints: Array<keyof typeof PHONE_BREAKPOINT_VALUES> = [
+    'phone-lg',
+    'phone-md',
+    'phone-sm',
+  ]
+  for (const bp of phoneBreakpoints) {
+    if (sizes[bp]) {
+      breakpointEntries.push({ key: bp, value: PHONE_BREAKPOINT_VALUES[bp] })
+    }
+  }
+
+  // Add tablet breakpoints
+  const tabletBreakpoints: Array<keyof typeof TABLET_BREAKPOINT_VALUES> = [
+    'tablet-lg',
+    'tablet-md',
+    'tablet-sm',
+  ]
+  for (const bp of tabletBreakpoints) {
+    if (sizes[bp]) {
+      breakpointEntries.push({ key: bp, value: TABLET_BREAKPOINT_VALUES[bp] })
+    }
+  }
+
+  // Sort by value descending (largest to smallest)
+  breakpointEntries.sort((a, b) => b.value - a.value)
+
+  // Build media queries
+  const mediaQueries: string[] = []
+
+  // Add orientation breakpoints first (these are feature queries, not min-width)
+  if (sizes.landscape) {
+    mediaQueries.push(`(orientation: landscape) ${sizes.landscape}`)
+  }
+  if (sizes.portrait) {
+    mediaQueries.push(`(orientation: portrait) ${sizes.portrait}`)
+  }
+
+  // Add min-width breakpoints
+  for (const entry of breakpointEntries) {
+    const size = sizes[entry.key]
+    if (size) {
+      mediaQueries.push(`(min-width: ${entry.value}px) ${size}`)
+    }
+  }
+
+  // Add default size at the end (no media query)
+  mediaQueries.push(sizes.default)
+
+  return mediaQueries.join(', ')
+}
+
+/**
+ * Composable for Picture component
+ * Computes responsive sizes, formats, and attributes for NuxtPicture
+ *
+ * @example
+ * ```ts
+ * const { sizesString, computedFormat, imgAttrs } = usePicture(props)
+ * ```
+ */
+export function usePicture(props: Partial<PictureProps>): UsePictureReturn {
+  /**
+   * Compute sizes attribute string
+   * Handles both string and ResponsiveSizes object formats
+   */
+  const sizesString = computed(() => {
+    if (!props.sizes) {
+      return '100vw' // Default to full viewport width
+    }
+
+    if (typeof props.sizes === 'string') {
+      return props.sizes
+    }
+
+    return responsiveSizesToString(props.sizes)
+  })
+
+  /**
+   * Compute format string with fallback
+   */
+  const computedFormat = computed(() => {
+    return props.format ?? 'webp'
+  })
+
+  return {
+    sizesString,
+    computedFormat,
+  }
+}

package/layers/ui/app/composables/typography.ts

@@ -0,0 +1,77 @@
+import type {
+  FontLeading,
+  FontSlant,
+  FontTracking,
+  FontWeight,
+  FontWidth,
+  TextAlign,
+  TextTransform,
+} from '#layers/ui/app/types/typography'
+
+type AxisValue = string | number | undefined
+
+function normalizeAxis(
+  value: AxisValue,
+  options: {
+    prefix?: string
+    fallback?: string
+    numericFormatter?: (value: number) => string
+  } = {}
+) {
+  const { prefix = '', fallback = '', numericFormatter } = options
+
+  if (typeof value === 'number') {
+    return numericFormatter
+      ? numericFormatter(value)
+      : prefix
+        ? `${prefix}-[${value}]`
+        : `[${value}]`
+  }
+
+  return value ?? fallback
+}
+
+export function useTypography(props: {
+  weight?: FontWeight
+  slant?: FontSlant
+  width?: FontWidth
+  leading?: FontLeading
+  tracking?: FontTracking
+  align?: TextAlign
+  transform?: TextTransform
+}) {
+  const classes = computed(() =>
+    [
+      normalizeAxis(props.weight, {
+        prefix: 'font',
+        fallback: 'font-normal',
+      }),
+
+      normalizeAxis(props.width, {
+        prefix: 'font',
+      }),
+
+      normalizeAxis(props.slant, {
+        fallback: 'not-italic',
+      }),
+
+      normalizeAxis(props.leading, {
+        prefix: 'leading',
+        fallback: 'leading-normal',
+      }),
+
+      normalizeAxis(props.tracking, {
+        prefix: 'tracking',
+        fallback: 'tracking-normal',
+      }),
+
+      props.align ? `text-${props.align}` : '',
+
+      props.transform && props.transform !== 'none' ? props.transform : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  )
+
+  return { classes }
+}

package/layers/ui/app/layouts/default.vue

@@ -0,0 +1,4 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <slot />
+</template>

package/layers/ui/app/pages/index.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+const umainRef = ref()
+</script>
+
+<template>
+  <MastMain :umain="umainRef">
+    <UContainer class="py-12 space-y-12">
+      <!-- Header Section -->
+      <div class="space-y-4">
+        <SiteTitle site-title="UI Layer" tag="h1" title-variant="default" />
+        <Typography
+          tag="p"
+          weight="font-normal"
+          leading="leading-relaxed"
+          color="muted"
+          class="text-lg"
+        >
+          A unified, typed design system for Nuxt applications. This layer provides typography,
+          colors, media handling, and reusable UI primitives.
+        </Typography>
+      </div>
+
+      <!-- Typography Section -->
+      <section class="space-y-6">
+        <TypographyHeadline :level="2" color="highlighted">
+          Typography Components
+        </TypographyHeadline>
+
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <TypographyHeadline :level="1"> Headline Level 1 </TypographyHeadline>
+            <TypographyHeadline :level="2"> Headline Level 2 </TypographyHeadline>
+            <TypographyHeadline :level="3"> Headline Level 3 </TypographyHeadline>
+            <TypographyHeadline :level="4"> Headline Level 4 </TypographyHeadline>
+          </div>
+
+          <Typography tag="p" leading="leading-relaxed">
+            The Typography component provides full control over font weight, width, slant, leading,
+            tracking, alignment, and text transformation through typed props.
+          </Typography>
+
+          <TypographyCodeBlock language="typescript" color="muted">
+            &lt;Typography weight="font-bold" leading="leading-tight" tracking="tracking-tight" &gt;
+            Fully typed typography &lt;/Typography&gt;</TypographyCodeBlock
+          >
+        </div>
+      </section>
+
+      <!-- Color System Section -->
+      <section class="space-y-6">
+        <TypographyHeadline :level="2" color="highlighted"> Color System </TypographyHeadline>
+
+        <div class="space-y-4">
+          <div>
+            <Typography tag="h3" weight="font-semibold" class="mb-2"> Semantic Colors </Typography>
+            <div class="flex flex-wrap gap-2">
+              <Typography
+                color="dimmed"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Dimmed
+              </Typography>
+              <Typography
+                color="muted"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Muted
+              </Typography>
+              <Typography
+                color="toned"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Toned
+              </Typography>
+              <Typography
+                color="highlighted"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Highlighted
+              </Typography>
+            </div>
+          </div>
+
+          <div>
+            <Typography tag="h3" weight="font-semibold" class="mb-2"> Status Colors </Typography>
+            <div class="flex flex-wrap gap-2">
+              <Typography color="info" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded">
+                Info
+              </Typography>
+              <Typography
+                color="success"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Success
+              </Typography>
+              <Typography
+                color="warning"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Warning
+              </Typography>
+              <Typography
+                color="error"
+                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
+              >
+                Error
+              </Typography>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Components Section -->
+      <section class="space-y-6">
+        <TypographyHeadline :level="2" color="highlighted">
+          Available Components
+        </TypographyHeadline>
+
+        <div class="grid md:grid-cols-2 gap-6">
+          <UCard>
+            <template #header>
+              <TypographyHeadline :level="3"> Typography </TypographyHeadline>
+            </template>
+            <div class="space-y-2">
+              <Typography tag="p" color="muted" leading="leading-relaxed">
+                Base component with full control over font properties
+              </Typography>
+              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
+                <li>Typography (base)</li>
+                <li>Headline (h1-h6)</li>
+                <li>CodeBlock</li>
+                <li>QuoteBlock</li>
+              </ul>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <TypographyHeadline :level="3"> Links </TypographyHeadline>
+            </template>
+            <div class="space-y-2">
+              <Typography tag="p" color="muted" leading="leading-relaxed">
+                Type-safe navigation with named routes
+              </Typography>
+              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
+                <li>Named route enforcement</li>
+                <li>Color support</li>
+                <li>ULink wrapper</li>
+              </ul>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <TypographyHeadline :level="3"> Media </TypographyHeadline>
+            </template>
+            <div class="space-y-2">
+              <Typography tag="p" color="muted" leading="leading-relaxed">
+                Responsive image handling with optimization
+              </Typography>
+              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
+                <li>Picture component</li>
+                <li>Multiple formats (avif, webp)</li>
+                <li>Responsive sizing</li>
+                <li>Lazy loading</li>
+              </ul>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <TypographyHeadline :level="3"> Branding </TypographyHeadline>
+            </template>
+            <div class="space-y-2">
+              <Typography tag="p" color="muted" leading="leading-relaxed">
+                Site branding and structure components
+              </Typography>
+              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
+                <li>Masthead/Main wrapper</li>
+                <li>Site Title with variants</li>
+                <li>Semantic HTML structure</li>
+              </ul>
+            </div>
+          </UCard>
+        </div>
+      </section>
+
+      <!-- Quote Example -->
+      <section class="space-y-6">
+        <TypographyHeadline :level="2" color="highlighted"> Quote Block </TypographyHeadline>
+
+        <TypographyQuoteBlock color="muted" class="border-l-4 border-primary pl-4 italic">
+          A unified, typed design system that provides consistency across projects while maintaining
+          flexibility for customization.
+        </TypographyQuoteBlock>
+      </section>
+
+      <!-- Features List -->
+      <section class="space-y-6">
+        <TypographyHeadline :level="2" color="highlighted"> Key Features </TypographyHeadline>
+
+        <div class="grid md:grid-cols-3 gap-4">
+          <div class="space-y-2">
+            <Typography weight="font-semibold" color="primary"> Fully Typed </Typography>
+            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
+              Complete TypeScript coverage with semantic types for typography, colors, and
+              breakpoints
+            </Typography>
+          </div>
+
+          <div class="space-y-2">
+            <Typography weight="font-semibold" color="primary"> Composable First </Typography>
+            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
+              Built on Vue composables (useTypography, useColor, usePicture) for maximum reusability
+            </Typography>
+          </div>
+
+          <div class="space-y-2">
+            <Typography weight="font-semibold" color="primary"> Responsive Ready </Typography>
+            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
+              Comprehensive breakpoint system supporting Tailwind, device, phone, and tablet
+              breakpoints
+            </Typography>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+        <Typography tag="p" color="dimmed" align="center" class="text-sm">
+          UI Layer - A reusable design system for Nuxt
+        </Typography>
+      </footer>
+    </UContainer>
+  </MastMain>
+</template>