@moldable-ai/ui 0.2.29 → 0.2.32

package/src/tokens/platform-contract.test.ts

@@ -0,0 +1,294 @@
+import {
+  PLATFORM_PACKS,
+  SIDEBAR_STYLES,
+  resolvePlatformPack,
+} from './contracts'
+import { readFileSync, readdirSync } from 'node:fs'
+import { extname, join, resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+interface WebAdaptationManifest {
+  source: string
+  target: string
+  schemaVersion: number
+  idConvention: string
+  adaptations: Array<{
+    id: string
+    status: string
+    overrides: Array<{
+      appearance?: 'light' | 'dark'
+      token: string
+      sourceValue: string
+      adaptedValue: string
+    }>
+  }>
+}
+
+function collectSourceFiles(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name)
+    if (entry.isDirectory()) return collectSourceFiles(path)
+    return ['.ts', '.tsx'].includes(extname(path)) ? [path] : []
+  })
+}
+
+describe('platform token contract', () => {
+  it('resolves exact versioned packs and an explicit web fallback', () => {
+    expect(resolvePlatformPack('macos', '27')).toBe(PLATFORM_PACKS['macos-27'])
+    expect(resolvePlatformPack('windows', 'future')).toBe(
+      PLATFORM_PACKS['web-default'],
+    )
+  })
+
+  it('keeps immutable platform variables out of universal components', () => {
+    const componentRoot = resolve(process.cwd(), 'src/components')
+    const violations = collectSourceFiles(componentRoot).filter((path) =>
+      /--m\d+-source-/.test(readFileSync(path, 'utf8')),
+    )
+
+    expect(violations).toEqual([])
+  })
+
+  it('registers semantic sidebar anatomy separately from the base pack', () => {
+    expect(SIDEBAR_STYLES).toMatchObject({
+      floating: {
+        sourcePlatform: 'macos',
+        sourceVersion: '26',
+      },
+      'edge-to-edge': {
+        sourcePlatform: 'macos',
+        sourceVersion: '27',
+      },
+    })
+  })
+
+  it('keeps the macOS 27 edge-to-edge sidebar canvas-owned', () => {
+    const aliases = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-27/aliases.css'),
+      'utf8',
+    )
+    const compatibility = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-27/compatibility.css'),
+      'utf8',
+    )
+
+    expect(aliases).toContain('--m-ui-sidebar-material-fill: transparent;')
+    expect(aliases).toContain('--m-ui-sidebar-glass-effect-radius: 0px;')
+    expect(aliases).toContain('--m-ui-sidebar-divider-width: 0px;')
+    expect(compatibility).toContain(
+      '--sidebar: var(--m-ui-sidebar-material-fill);',
+    )
+    expect(compatibility).toContain(
+      "[data-ui-sidebar-style='edge-to-edge'][data-slot='sidebar']",
+    )
+    expect(compatibility).toContain('--sidebar: transparent;')
+    expect(compatibility).toContain('--sidebar-border: transparent;')
+  })
+
+  it('preserves the macOS 26 floating-sidebar source values exactly', () => {
+    const source = readFileSync(
+      resolve(
+        process.cwd(),
+        'src/tokens/macos-26/source/sidebar.generated.css',
+      ),
+      'utf8',
+    )
+    const requiredValues = [
+      '--m26-source-sidebar-width-reference: 240px;',
+      '--m26-source-sidebar-radius-shell: 18px;',
+      '--m26-source-sidebar-radius-item: 5px;',
+      '--m26-source-sidebar-radius-selection: 8px;',
+      '--m26-source-sidebar-corner-smoothing: 60%;',
+      '--m26-source-sidebar-shadow: 0 8px 40px rgb(0 0 0 / 12%);',
+      '--m26-source-sidebar-glass-effect-radius: 12px;',
+      '--m26-source-sidebar-padding-block: 10px;',
+      '--m26-source-sidebar-row-inset-inline: 10px;',
+      '--m26-source-sidebar-row-height-small: 24px;',
+      '--m26-source-sidebar-row-height-medium: 32px;',
+      '--m26-source-sidebar-row-height-large: 40px;',
+      '--m26-source-sidebar-section-height-small: 34px;',
+      '--m26-source-sidebar-section-height-medium: 39px;',
+      '--m26-source-sidebar-section-height-large: 43px;',
+      '--m26-source-sidebar-selection-light: rgb(0 0 0 / 11%);',
+    ]
+
+    expect(source).toContain("[data-ui-platform-version='26']")
+    expect(source).toContain("[data-ui-sidebar-style='floating']")
+    for (const value of requiredValues) expect(source).toContain(value)
+  })
+
+  it('keeps floating dark overrides on their own profile boundary', () => {
+    const floatingAliases = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-26/aliases.css'),
+      'utf8',
+    )
+    const moldableBrand = readFileSync(
+      resolve(process.cwd(), 'src/tokens/moldable/brand.css'),
+      'utf8',
+    )
+    const descendantDarkAppearance =
+      /\[data-ui-sidebar-style='floating'\]\s+\[data-ui-appearance='dark'\]/
+
+    expect(floatingAliases).toContain(
+      "[data-ui-sidebar-style='floating'][data-ui-appearance='dark']",
+    )
+    expect(floatingAliases).not.toMatch(descendantDarkAppearance)
+    expect(moldableBrand).not.toMatch(descendantDarkAppearance)
+  })
+
+  it('scopes every source stylesheet to its platform and version', () => {
+    const sourceRoot = resolve(process.cwd(), 'src/tokens/macos-27/source')
+    const stylesheets = readdirSync(sourceRoot)
+      .filter((name) => name.endsWith('.css'))
+      .map((name) => join(sourceRoot, name))
+    const violations = stylesheets.filter((path) => {
+      const source = readFileSync(path, 'utf8')
+      return (
+        source.includes(':root') ||
+        !source.includes("[data-ui-platform='macos']") ||
+        !source.includes("[data-ui-platform-version='27']")
+      )
+    })
+
+    expect(violations).toEqual([])
+  })
+
+  it('keeps web adaptations explicit, traceable, and outside the source export', () => {
+    const packRoot = resolve(process.cwd(), 'src/tokens/macos-27')
+    const index = readFileSync(join(packRoot, 'index.css'), 'utf8')
+    const sourceEntry = readFileSync(join(packRoot, 'source.css'), 'utf8')
+    const sourceStyles = readdirSync(join(packRoot, 'source'))
+      .filter((name) => name.endsWith('.css'))
+      .map((name) => readFileSync(join(packRoot, 'source', name), 'utf8'))
+      .join('\n')
+    const adaptationCss = readFileSync(
+      join(packRoot, 'web-adaptations.css'),
+      'utf8',
+    )
+    const manifest = JSON.parse(
+      readFileSync(join(packRoot, 'web-adaptations.json'), 'utf8'),
+    ) as WebAdaptationManifest
+    const normalizeCss = (value: string) => value.replace(/\s+/g, ' ').trim()
+    const normalizedSourceStyles = normalizeCss(sourceStyles)
+    const normalizedAdaptationCss = normalizeCss(adaptationCss)
+
+    expect(index).toContain("@import './web-adaptations.css';")
+    expect(sourceEntry).not.toContain('web-adaptations')
+    expect(manifest).toMatchObject({
+      source: 'macOS 27',
+      target: 'web',
+      schemaVersion: 1,
+      idConvention: 'M27-WEB-{AREA}-{NNN}',
+    })
+
+    const ids = manifest.adaptations.map(({ id }) => id)
+    expect(new Set(ids).size).toBe(ids.length)
+
+    for (const adaptation of manifest.adaptations) {
+      expect(adaptation.status).toBe('intentional-divergence')
+      expect(adaptationCss).toContain(`@m27-divergence ${adaptation.id}`)
+
+      for (const override of adaptation.overrides) {
+        expect(normalizedSourceStyles).toContain(
+          `${override.token}: ${override.sourceValue};`,
+        )
+        expect(normalizedAdaptationCss).toContain(
+          `${override.token}: ${override.adaptedValue};`,
+        )
+      }
+    }
+  })
+
+  it('fully shadows the legacy Tailwind semantic environment per pack', () => {
+    const compatibility = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-27/compatibility.css'),
+      'utf8',
+    )
+    const requiredVariables = [
+      '--font-family-ui',
+      '--type-display-size',
+      '--type-badge-size',
+      '--density-control-height-md',
+      '--density-badge-height',
+      '--shape-control',
+      '--background',
+      '--foreground',
+      '--card',
+      '--popover',
+      '--primary',
+      '--secondary',
+      '--muted',
+      '--accent',
+      '--destructive',
+      '--border',
+      '--input',
+      '--ring',
+      '--sidebar',
+      '--surface-canvas',
+      '--surface-toolbar',
+      '--control-hover',
+      '--toolbar-control-background',
+      '--material-medium-fill',
+      '--material-shadow-card',
+      '--material-shadow-window',
+      '--window-chrome-background',
+    ]
+
+    expect(compatibility).toContain("[data-ui-platform='macos']")
+    expect(compatibility).toContain("[data-ui-platform-version='27']")
+    for (const variable of requiredVariables) {
+      expect(compatibility).toContain(`${variable}:`)
+    }
+  })
+
+  it('maps the macOS unified toolbar to its full 52px platform metric', () => {
+    const chromeSource = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-27/source/chrome.generated.css'),
+      'utf8',
+    )
+    const compatibility = readFileSync(
+      resolve(process.cwd(), 'src/tokens/macos-27/compatibility.css'),
+      'utf8',
+    )
+
+    expect(chromeSource).toContain(
+      '--m27-source-chrome-toolbar-unified-height: 52px;',
+    )
+    expect(chromeSource).toContain(
+      '--m27-source-chrome-toolbar-unified-padding-block: 8px;',
+    )
+    expect(compatibility.replace(/\s+/g, ' ')).toContain(
+      '--density-toolbar-height: var(--m27-source-chrome-toolbar-unified-height);',
+    )
+  })
+
+  it('only applies Moldable deltas when the Moldable theme is selected', () => {
+    const brand = readFileSync(
+      resolve(process.cwd(), 'src/tokens/moldable/brand.css'),
+      'utf8',
+    )
+
+    expect(brand).toContain("[data-ui-theme='moldable']")
+    expect(brand).toContain(
+      "[data-ui-theme='moldable'][data-ui-sidebar-style='floating']",
+    )
+    expect(brand).toContain(
+      "[data-ui-theme='moldable'][data-ui-sidebar-style='floating'][data-ui-appearance='dark']",
+    )
+    expect(brand).not.toMatch(
+      /\[data-ui-sidebar-style='floating'\]\s+\[data-ui-appearance='dark'\]/,
+    )
+    expect(brand).toContain('--m-ui-surface-content: #181818;')
+    expect(brand).toContain("[data-slot='select-trigger']")
+    expect(brand).toContain("[data-slot='select-content']")
+    expect(brand).toContain("[data-slot='dropdown-menu-content']")
+    expect(brand).toContain('--material-shadow-overlay: var(--shadow-md);')
+    expect(brand).toContain('--m-ui-sidebar-material-fill: #1b1d1e;')
+    expect(brand).toContain('--m-ui-sidebar-border-color: #394043;')
+    expect(brand).toContain(
+      '--sidebar-accent-foreground: var(--m-ui-color-accent);',
+    )
+    expect(brand).toContain('0 4px 14px rgb(0 0 0 / 6%)')
+    expect(brand).not.toMatch(/(^|[,\s]):root(?=[\s,{])/)
+  })
+})