kmcom-nuxt-layers 5.0.8 → 6.1.0

package/docs/adr/0001-grid-replaces-layout-swiss-grid.md

@@ -0,0 +1,30 @@
+# 0001 — `grid` replaces `layout`'s Swiss grid; don't merge them piecemeal
+
+Status: accepted (2026-10-20)
+
+## Context
+
+Tier 2 has two grid systems:
+
+- `layout` — fixed 6/12/18 columns by breakpoint (`LayoutGridItem`, `useGridConfig`,
+  `layoutLayer.ui.grid`). Seven `content` components and `Hero`/`Split`/`Gallery` assume 18
+  numbered columns.
+- `grid` — data-driven tracks (`useGridTracks`), named presets, rhythm derived from `--fs`,
+  named-line placement. No layer consumes it yet; only two playground pages do.
+
+`docs/superpowers/specs/2026-09-04-grid-layer-design.md` created `grid` as the replacement and
+put `layout`'s grid components out of scope, deferring their migration.
+
+## Decision
+
+Treat the overlap as an in-flight migration, not accidental duplication. Do not fold either
+system into the other, share a preset registry, or rename config namespaces in isolation.
+Migrating `layout` to consume `grid` is its own brainstormed pass, covering `LayoutGridItem`,
+the `content` components, and the 18-column assumptions.
+
+## Consequences
+
+- `layoutLayer.ui.grid` (including the z-index `layers` that `navigation` reads through
+  `useGridConfig().useZIndex`) is consumer-facing app config and stays as is until that pass.
+- Architecture reviews should not re-suggest merging `layout` and `grid` or picking a single
+  "owner" for the `swiss` preset.

package/docs/adr/0002-content-config-is-app-owned.md

@@ -0,0 +1,27 @@
+# 0002 — Each app owns its `content.config.ts`; don't hoist collections into the layer
+
+Status: accepted (2026-10-20)
+
+## Context
+
+`apps/playground/content.config.ts` redeclares the four collections that
+`layers/content/content.config.ts` also defines, which looks like duplication.
+
+`@nuxt/content` 3.15.2 (`loadContentConfig`) loads `content.config.ts` from every layer in
+`nuxt.options._layers` and merges collections by name, with the app last. Each collection is
+tagged `__rootDir` = the config's own layer directory, and source scanning is rooted there. A
+collection defined only in the layer therefore reads `layers/content/content/**`, never the
+app's `content/` folder.
+
+## Decision
+
+Each consumer app declares its own collections. The layer's `content.config.ts` serves standalone
+runs only, and it is not in the published package `files`. Do not try to remove the playground
+copy, wrap `defineCollection` in layer-exported factories, or point `source` at the app from the
+layer.
+
+## Consequences
+
+- Drift risk is limited to four glob strings per app; `layers/content/CLAUDE.md` holds the
+  copy-paste config.
+- Schemas must still never be passed to `defineCollection` (c12/jiti validator issue).

package/docs/adr/0003-modular-step-system-replaces-fluid-clamps.md

@@ -0,0 +1,58 @@
+# 0003 — One modular step scale replaces the fluid type and spacing clamps
+
+Status: accepted (2026-10-20)
+
+## Context
+
+Type and spacing were two unrelated sets of hand-tuned `clamp()` ranges: 13 `text-fluid-*`
+utilities (plus 13 `-cq` copies) snapped by `round(down, …, 0.25rem)`, and 8 `--fluid-space-*`
+tokens (plus 7 `-cq` copies). No ratio linked one size to the next, so every new size was
+another clamp to tune, and the `-cq` sets had no consumers. The reference system (matuzo.at,
+analysed in `matuzo-typography-system-1.md`) gets better proportions from two ratios.
+
+## Decision
+
+Every size is a step on a scale:
+
+- **Type:** `font-size = round(--type-base × 1.26^--step, 0.0625rem)`. Base is `1rem` below
+  48rem and `1.2rem` from 48rem; body is step 1 (20 → 24px). `h1` uses a fluid display step,
+  5 → 7 across 360 → 1280px, cast from a length with `tan(atan2(…, 1rem))`. Utilities are
+  `text-step-sm`, `text-step-0` … `text-step-12`, `text-step-display`.
+- **Space:** `--space-* = --space-base × 1.414^n`, with `--space-base` running 11.3 → 16px
+  across 320 → 1280px — one step of growth, not the reference's two (8 → 16px), so phones keep
+  the old token sizes. The `Spacing` union is unchanged; only the values behind it moved.
+- **Grid:** the `grid` layer's `--fs` shares the type scale's endpoint tokens (`--type-min`,
+  `--type-max`) but stays continuous, so its rhythm unit does not inherit the 48rem jump.
+
+It is a parallel namespace: Tailwind's `--text-*`, Nuxt UI's `--ui-*` and the `html` font-size
+are untouched. Tokens are plain `:root` properties, not `@theme`, so `var(--step)` resolves on
+the element using it.
+
+## Consequences
+
+- The top end is coarser: `TypographyHeadline` levels step down from the fluid display step
+  (97/77/61/48/38/30px at 1280px, 51 → 16px at 320px) instead of the old 144/120/96/76/36/24px,
+  which also overflowed phone widths. Plain h1–h6 use the reading scale (display, 3, 2, 1, 0, 0).
+- Step line heights fall smoothly with size (sm 1.5 … body 1.7, h2/h3 1.2 … display 0.95) and
+  now reach components: `useTypography` only emits `leading-*` when asked.
+- Body text grows from 16px to 20/24px, and body line-height from 1.5 to 1.7. Nuxt UI
+  components with explicit `text-*` sizes are unaffected; anything that inherits body size
+  (card bodies, plain prose) grows. Heading defaults skip `[data-slot]` headings, so Nuxt UI's
+  own titles (UModal, USlideover) inherit instead of jumping to a heading step.
+- Every step jumps ×1.2 at 48rem because the base switches there (h1 ≈ 62 → 75px at 768px).
+- Spacing matches the old tokens on phones and stays close on desktop for xs–xl; 2xl/3xl top out
+  smaller than before (64/90px vs 80/112px).
+- `--space-*` steps are substituted at `:root`, so per-subtree spacing retuning is not
+  supported. Type retuning is: `--type-base` and `--type-scale` are read per element.
+- The display step is normalised by `1rem` and its `vw` term is scaled by root / 16px, so its
+  exponent depends only on viewport width and every size grows with a larger root font size.
+  (Unscaled, the exponent fell as the root grew: h1 was only 1.02× larger at a 24px root.)
+- The old `--heading-text-scale-damp` multiplier is gone. As written it enlarged steps ≥ 7
+  under OS text-scale > 100% instead of damping them; a true damp would break "visibly larger
+  at a larger root".
+- `--fs` stays unregistered: a registered `<length>` holding `rem` on `:root`, read by the
+  root's own line-height, is a dependency cycle in Gecko that freezes the grid unit.
+- Nuxt UI prose is retuned onto the scale (typography `app.config.ts`): prose headings take
+  steps (h1 4, h2 3, h3 2, h4 1) and `p`/`li` keep the body's 1.7 leading. Otherwise the
+  24px copy sat at or above Nuxt UI's fixed `text-2xl`/`text-xl` prose headings. This needs
+  `text-step-*` registered as a font-size group in tailwind-merge (`ui.tv.twMergeConfig`).

package/layers/core/app/assets/css/tokens/spacing-fluid.css

@@ -1,25 +1,30 @@
 /**
- * Fluid spacing scale — clamp() + cqi container-relative variant, same
- * pattern as layers/typography's fluid type scale (see typography.css).
+ * Fluid spacing scale — one ratio, same idea as typography.css's type scale:
+ *   space = --space-base × --space-scale ^ n
+ * 1.414 ≈ 2^(1/2), so two steps double a gap. --space-base runs 11.3px at ≤320px to 16px
+ * at ≥1280px — one step of growth (√2), not the reference's two (8 → 16px), so phones keep
+ * the old fluid tokens' sizes (xs 8 · md 16 · xl 32 · 3xl 64px at 320px). The rem term in the
+ * middle keeps it zoom-safe (WCAG 1.4.4).
  * Backs the `Spacing` token (layers/core/app/types/tokens.ts) consumed by
- * useLayoutAttrs(). --fluid-space-none is 0, not clamp() — no scaling needed.
+ * useLayoutAttrs(). --space-none is 0, not a step.
+ * Plain :root properties, not @theme: --space-* is not a Tailwind namespace, and
+ * xs/md/xl declared there would risk colliding with --container-* size names.
+ *
+ * Trap: each step substitutes --space-base here at :root, so overriding --space-base
+ * on a subtree does NOT change --space-md inside it. Per-subtree spacing retuning is
+ * not a supported extension point (type retuning is — see typography.css).
  */
 :root {
-  --fluid-space-none: 0px;
-  --fluid-space-xs: clamp(0.5rem, 0.46rem + 0.2vi, 0.625rem);
-  --fluid-space-sm: clamp(0.75rem, 0.7rem + 0.25vi, 1rem);
-  --fluid-space-md: clamp(1rem, 0.9rem + 0.5vi, 1.5rem);
-  --fluid-space-lg: clamp(1.5rem, 1.3rem + 1vi, 2.5rem);
-  --fluid-space-xl: clamp(2rem, 1.7rem + 1.5vi, 3.5rem);
-  --fluid-space-2xl: clamp(3rem, 2.4rem + 3vi, 5rem);
-  --fluid-space-3xl: clamp(4rem, 3rem + 5vi, 7rem);
+  --space-scale: 1.414;
+  --space-base: clamp(0.7071rem, 0.6095rem + 0.4882vw, 1rem);
 
-  /* Container-relative counterparts (cqi) — opt-in inside a `container-type` ancestor. */
-  --fluid-space-xs-cq: clamp(0.5rem, 0.46rem + 2cqi, 0.625rem);
-  --fluid-space-sm-cq: clamp(0.75rem, 0.65rem + 2.5cqi, 1rem);
-  --fluid-space-md-cq: clamp(1rem, 0.8rem + 5cqi, 1.5rem);
-  --fluid-space-lg-cq: clamp(1.5rem, 1.1rem + 10cqi, 2.5rem);
-  --fluid-space-xl-cq: clamp(2rem, 1.4rem + 15cqi, 3.5rem);
-  --fluid-space-2xl-cq: clamp(3rem, 2rem + 25cqi, 5rem);
-  --fluid-space-3xl-cq: clamp(4rem, 2.5rem + 37.5cqi, 7rem);
+  /* n = −1 … 5 */
+  --space-none: 0px;
+  --space-xs: calc(var(--space-base) * pow(var(--space-scale), -1));
+  --space-sm: calc(var(--space-base) * pow(var(--space-scale), 0));
+  --space-md: calc(var(--space-base) * pow(var(--space-scale), 1));
+  --space-lg: calc(var(--space-base) * pow(var(--space-scale), 2));
+  --space-xl: calc(var(--space-base) * pow(var(--space-scale), 3));
+  --space-2xl: calc(var(--space-base) * pow(var(--space-scale), 4));
+  --space-3xl: calc(var(--space-base) * pow(var(--space-scale), 5));
 }

package/layers/core/app/components/Element.test.ts

@@ -69,8 +69,8 @@ describe('Element', () => {
       props: { m: 'md', p: 'lg' },
     })
     const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('margin: var(--fluid-space-md)')
-    expect(style).toContain('padding: var(--fluid-space-lg)')
+    expect(style).toContain('margin: var(--space-md)')
+    expect(style).toContain('padding: var(--space-lg)')
   })
 
   it('passes componentProps to the resolved component, past a colliding prop name', () => {

package/layers/core/app/components/Element.vue

@@ -2,73 +2,9 @@
   import { useElementStyle } from '../composables/useElementStyle'
   import type { ElementProps } from '../types/element'
 
-  const {
-    as = 'div',
-    componentProps,
-    block,
-    flex,
-    grid: gridMode,
-    hidden,
-    cols,
-    rows,
-    gap,
-    align,
-    justify,
-    p,
-    px,
-    py,
-    m,
-    mx,
-    my,
-    w,
-    h,
-    minW,
-    maxW,
-    minH,
-    maxH,
-    aspect,
-    bg,
-    color,
-    border,
-    radius,
-    shadow,
-    cursor,
-    select,
-    pointer,
-  } = defineProps<ElementProps>()
+  const { as = 'div', componentProps, ...styleProps } = defineProps<ElementProps>()
 
-  const style = useElementStyle(() => ({
-    block,
-    flex,
-    grid: gridMode,
-    hidden,
-    cols,
-    rows,
-    gap,
-    align,
-    justify,
-    p,
-    px,
-    py,
-    m,
-    mx,
-    my,
-    w,
-    h,
-    minW,
-    maxW,
-    minH,
-    maxH,
-    aspect,
-    bg,
-    color,
-    border,
-    radius,
-    shadow,
-    cursor,
-    select,
-    pointer,
-  }))
+  const style = useElementStyle(() => styleProps)
 </script>
 
 <template>

package/layers/core/app/components/ElementTw.vue

@@ -8,73 +8,9 @@
   import type { ElementProps } from '../types/element'
   import { styleToTailwindClasses } from '../utils/styleToTailwindClasses'
 
-  const {
-    as = 'div',
-    componentProps,
-    block,
-    flex,
-    grid: gridMode,
-    hidden,
-    cols,
-    rows,
-    gap,
-    align,
-    justify,
-    p,
-    px,
-    py,
-    m,
-    mx,
-    my,
-    w,
-    h,
-    minW,
-    maxW,
-    minH,
-    maxH,
-    aspect,
-    bg,
-    color,
-    border,
-    radius,
-    shadow,
-    cursor,
-    select,
-    pointer,
-  } = defineProps<ElementProps>()
+  const { as = 'div', componentProps, ...styleProps } = defineProps<ElementProps>()
 
-  const style = useElementStyle(() => ({
-    block,
-    flex,
-    grid: gridMode,
-    hidden,
-    cols,
-    rows,
-    gap,
-    align,
-    justify,
-    p,
-    px,
-    py,
-    m,
-    mx,
-    my,
-    w,
-    h,
-    minW,
-    maxW,
-    minH,
-    maxH,
-    aspect,
-    bg,
-    color,
-    border,
-    radius,
-    shadow,
-    cursor,
-    select,
-    pointer,
-  }))
+  const style = useElementStyle(() => styleProps)
 
   const twClasses = computed(() => styleToTailwindClasses(style.value))
 </script>

package/layers/core/app/composables/useElementStyle.ts

@@ -1,65 +1,11 @@
 import { computed, type ComputedRef, type CSSProperties } from 'vue'
 
-import type { ElementProps } from '../types/element'
-import { useElementGrid } from './useElementGrid'
-import { useElementInteraction } from './useElementInteraction'
-import { useElementLayout } from './useElementLayout'
-import { useElementSizing } from './useElementSizing'
-import { useElementSurface } from './useElementSurface'
-import { useLayoutAttrs } from './useLayoutAttrs'
+import { resolveElementStyle, type ElementStyleInput } from '../utils/resolveElementStyle'
 
 /**
- * Merges the 5 element composables + core's useLayoutAttrs into one style
- * object — the vocabulary shared by both Element (inline :style) and
- * ElementTw (Tailwind arbitrary-property classes). Takes a getter (not the
- * values directly) so callers can pass their own destructured defineProps
- * bindings and keep reactivity, same as useLayoutAttrs's own getter param.
+ * Reactive wrapper over resolveElementStyle. Takes a getter so callers can pass their
+ * `defineProps` result directly (`useElementStyle(() => props)`) and keep reactivity.
  */
-export function useElementStyle(
-  getProps: () => Omit<ElementProps, 'as' | 'componentProps'>
-): ComputedRef<CSSProperties> {
-  return computed(() => {
-    const props = getProps()
-    return {
-      ...useElementLayout({
-        block: props.block,
-        flex: props.flex,
-        grid: props.grid,
-        hidden: props.hidden,
-      }),
-      ...useLayoutAttrs(() => ({
-        gap: props.gap,
-        align: props.align,
-        justify: props.justify,
-        p: props.p,
-        px: props.px,
-        py: props.py,
-        m: props.m,
-        mx: props.mx,
-        my: props.my,
-      })).style.value,
-      ...useElementGrid({ grid: props.grid, cols: props.cols, rows: props.rows }),
-      ...useElementSizing({
-        w: props.w,
-        h: props.h,
-        minW: props.minW,
-        maxW: props.maxW,
-        minH: props.minH,
-        maxH: props.maxH,
-        aspect: props.aspect,
-      }),
-      ...useElementSurface({
-        bg: props.bg,
-        color: props.color,
-        border: props.border,
-        radius: props.radius,
-        shadow: props.shadow,
-      }),
-      ...useElementInteraction({
-        cursor: props.cursor,
-        select: props.select,
-        pointer: props.pointer,
-      }),
-    }
-  })
+export function useElementStyle(getProps: () => ElementStyleInput): ComputedRef<CSSProperties> {
+  return computed(() => resolveElementStyle(getProps()))
 }

package/layers/core/app/composables/useLayoutAttrs.test.ts

@@ -1,21 +1,51 @@
+import { readFileSync } from 'node:fs'
+
 import { describe, expect, it } from 'vite-plus/test'
 
+import type { Spacing } from '../types/tokens'
 import { useLayoutAttrs } from './useLayoutAttrs'
 
+// spacingVar() builds the custom-property name by string interpolation, so a token
+// with no matching declaration resolves to an undefined var() — silent in CSS.
+describe('useLayoutAttrs spacing tokens', () => {
+  const css = readFileSync(
+    new URL('../assets/css/tokens/spacing-fluid.css', import.meta.url),
+    'utf8'
+  )
+  // Record, not an array, so typecheck fails if the Spacing union gains a member.
+  const tokens: Record<Exclude<Spacing, 'none'>, true> = {
+    xs: true,
+    sm: true,
+    md: true,
+    lg: true,
+    xl: true,
+    '2xl': true,
+    '3xl': true,
+  }
+
+  it('resolves every token to a property spacing-fluid.css declares', () => {
+    for (const token of Object.keys(tokens) as Spacing[]) {
+      const { style } = useLayoutAttrs(() => ({ gap: token }))
+      const name = /^var\((--[\w-]+)\)$/.exec(String(style.value.gap))?.[1]
+      expect(css).toMatch(new RegExp(`^\\s*${name}:`, 'm'))
+    }
+  })
+})
+
 describe('useLayoutAttrs margin support', () => {
   it('sets margin from a static token', () => {
     const { style } = useLayoutAttrs(() => ({ m: 'md' }))
-    expect(style.value.margin).toBe('var(--fluid-space-md)')
+    expect(style.value.margin).toBe('var(--space-md)')
   })
 
   it('sets marginInline from px-equivalent mx', () => {
     const { style } = useLayoutAttrs(() => ({ mx: 'lg' }))
-    expect(style.value.marginInline).toBe('var(--fluid-space-lg)')
+    expect(style.value.marginInline).toBe('var(--space-lg)')
   })
 
   it('sets marginBlock from my', () => {
     const { style } = useLayoutAttrs(() => ({ my: 'sm' }))
-    expect(style.value.marginBlock).toBe('var(--fluid-space-sm)')
+    expect(style.value.marginBlock).toBe('var(--space-sm)')
   })
 
   it('resolves none to 0px for margin', () => {
@@ -38,8 +68,8 @@ describe('useLayoutAttrs margin support', () => {
       p: 'lg',
     }))
     expect(style.value).toEqual({
-      gap: 'var(--fluid-space-md)',
-      padding: 'var(--fluid-space-lg)',
+      gap: 'var(--space-md)',
+      padding: 'var(--space-lg)',
       alignItems: 'center',
       justifyContent: 'space-between',
     })

package/layers/core/app/composables/useLayoutAttrs.ts

@@ -47,7 +47,7 @@ function resolveDefault<T>(value: ResponsiveValue<T> | T | undefined): T | undef
 }
 
 function spacingVar(token: Spacing): string {
-  return token === 'none' ? '0px' : `var(--fluid-space-${token})`
+  return token === 'none' ? '0px' : `var(--space-${token})`
 }
 
 function applySpacing(
@@ -66,29 +66,29 @@ function applySpacing(
   if (resolved) result[cssProp] = spacingVar(resolved)
 }
 
-export function useLayoutAttrs(input: MaybeRefOrGetter<LayoutAttrsInput>): {
-  style: ComputedRef<CSSProperties>
-} {
-  const style = computed((): CSSProperties => {
-    const { gap, align, justify, p, px, py, m, mx, my } = toValue(input)
-    const result: CSSProperties = {}
+export function resolveLayoutAttrsStyle(input: LayoutAttrsInput): CSSProperties {
+  const { gap, align, justify, p, px, py, m, mx, my } = input
+  const result: CSSProperties = {}
 
-    applySpacing(result, 'gap', gap)
-    applySpacing(result, 'padding', p)
-    applySpacing(result, 'paddingInline', px)
-    applySpacing(result, 'paddingBlock', py)
-    applySpacing(result, 'margin', m)
-    applySpacing(result, 'marginInline', mx)
-    applySpacing(result, 'marginBlock', my)
+  applySpacing(result, 'gap', gap)
+  applySpacing(result, 'padding', p)
+  applySpacing(result, 'paddingInline', px)
+  applySpacing(result, 'paddingBlock', py)
+  applySpacing(result, 'margin', m)
+  applySpacing(result, 'marginInline', mx)
+  applySpacing(result, 'marginBlock', my)
 
-    const resolvedAlign = resolveDefault(align)
-    if (resolvedAlign) result.alignItems = ALIGN_MAP[resolvedAlign]
+  const resolvedAlign = resolveDefault(align)
+  if (resolvedAlign) result.alignItems = ALIGN_MAP[resolvedAlign]
 
-    const resolvedJustify = resolveDefault(justify)
-    if (resolvedJustify) result.justifyContent = JUSTIFY_MAP[resolvedJustify]
+  const resolvedJustify = resolveDefault(justify)
+  if (resolvedJustify) result.justifyContent = JUSTIFY_MAP[resolvedJustify]
 
-    return result
-  })
+  return result
+}
 
-  return { style }
+export function useLayoutAttrs(input: MaybeRefOrGetter<LayoutAttrsInput>): {
+  style: ComputedRef<CSSProperties>
+} {
+  return { style: computed(() => resolveLayoutAttrsStyle(toValue(input))) }
 }

package/layers/core/app/types/element.ts

@@ -1,25 +1,48 @@
-import type { Component } from 'vue'
+import type { Component, CSSProperties } from 'vue'
 
-import type { ElementGridProps } from '../composables/useElementGrid'
-import type { ElementInteractionProps } from '../composables/useElementInteraction'
-import type { ElementLayoutProps } from '../composables/useElementLayout'
-import type { ElementSizingProps } from '../composables/useElementSizing'
-import type { ElementSurfaceProps } from '../composables/useElementSurface'
 // Relative, not the '#layers/core' alias: the SFC compiler's macro type
 // resolution (defineProps<ElementProps>() in Element.vue) walks tsconfig
 // "paths" directly and doesn't see Nuxt's generated layer aliases outside
 // a running Nuxt instance — a plain relative import resolves everywhere.
 import type { LayoutAttrsInput } from '../composables/useLayoutAttrs'
 
-export type ElementProps = ElementLayoutProps &
-  ElementGridProps &
-  LayoutAttrsInput &
-  ElementSizingProps &
-  ElementSurfaceProps &
-  ElementInteractionProps & {
-    as?: string | Component
-    // Escape hatch for prop names that collide with Element's own (e.g. `color`
-    // is Element's raw-CSS text colour, but also UBadge's semantic colour prop).
-    // Non-colliding component props still reach `as` for free via attrs fallthrough.
-    componentProps?: Record<string, unknown>
-  }
+// `| undefined` on each is explicit (not just `?`) so component prop objects
+// — which have it too, under exactOptionalPropertyTypes — are assignable here.
+export type ElementProps = LayoutAttrsInput & {
+  as?: string | Component
+  // Escape hatch for prop names that collide with Element's own (e.g. `color`
+  // is Element's raw-CSS text colour, but also UBadge's semantic colour prop).
+  // Non-colliding component props still reach `as` for free via attrs fallthrough.
+  componentProps?: Record<string, unknown>
+
+  // Display mode — priority hidden > grid > flex > block
+  block?: boolean | undefined
+  flex?: boolean | undefined
+  grid?: boolean | undefined
+  hidden?: boolean | undefined
+
+  // Grid container tracks (numbers become `repeat(n, 1fr)`; only applied when `grid` is set)
+  cols?: number | string | undefined
+  rows?: number | string | undefined
+
+  // Sizing
+  w?: CSSProperties['width'] | undefined
+  h?: CSSProperties['height'] | undefined
+  minW?: CSSProperties['minWidth'] | undefined
+  maxW?: CSSProperties['maxWidth'] | undefined
+  minH?: CSSProperties['minHeight'] | undefined
+  maxH?: CSSProperties['maxHeight'] | undefined
+  aspect?: CSSProperties['aspectRatio'] | undefined
+
+  // Surface
+  bg?: CSSProperties['background'] | undefined
+  color?: CSSProperties['color'] | undefined
+  border?: CSSProperties['border'] | undefined
+  radius?: CSSProperties['borderRadius'] | undefined
+  shadow?: CSSProperties['boxShadow'] | undefined
+
+  // Interaction
+  cursor?: CSSProperties['cursor'] | undefined
+  select?: CSSProperties['userSelect'] | undefined
+  pointer?: CSSProperties['pointerEvents'] | undefined
+}