@mtdt/observeops-ds-spec 0.1.5 → 0.1.6

package/conformance/ds-conformance.mjs

@@ -124,9 +124,27 @@ const MEASURE = () => {
       const v = parseFloat(c[p]); if (v > 0) spaces.push({ prop: p, val: Math.round(v * 10) / 10 })
     }
   }
-  const ctrlSel = 'button,input,select,textarea,a[href],[role=button],[role=checkbox],[role=switch],[role=radio],[role=tab]'
-  const controls = [...document.querySelectorAll(ctrlSel)].map((el) => ({ tag: el.tagName.toLowerCase(), cls: (el.getAttribute('class') || ''), ce: el.tagName.includes('-') }))
-  return { colors, spaces, controls, bodyBg: getComputedStyle(document.body).backgroundColor }
+  // ── component fidelity ─────────────────────────────────────────────────────
+  // A DS component (obs-*) renders its real control in SHADOW DOM, so any RAW interactive element in the
+  // light DOM is a non-DS control that should be a DS component. And a styled <span>/<div> chip that isn't
+  // a DS component is a fabricated look-alike (should be obs-tag / obs-severity).
+  const DS = ['obs-button','obs-input','obs-select','obs-switch','obs-checkbox','obs-radio','obs-link','obs-tag','obs-severity','obs-tags','obs-tooltip','obs-date-time-picker','obs-filters','obs-selected-pills']
+  const SUGGEST = { button:'obs-button', input:'obs-input', textarea:'obs-input', select:'obs-select', a:'obs-link' }
+  const insideCE = (el) => { let n = el.parentElement; while (n) { if (n.tagName.includes('-')) return true; n = n.parentElement } return false }
+  const dsInteractive = document.querySelectorAll('obs-button,obs-input,obs-select,obs-switch,obs-checkbox,obs-radio,obs-link').length
+  const rawControls = [...document.querySelectorAll('button,input:not([type=hidden]),select,textarea,a[href],[role=button],[role=switch],[role=checkbox],[role=radio],[role=tab]')]
+    .filter((el) => !el.tagName.includes('-') && !insideCE(el))
+    .map((el) => { const t = el.tagName.toLowerCase(); const role = el.getAttribute('role'); return { tag: t, role, suggest: SUGGEST[t] || (role ? 'obs-' + role.replace('checkbox','checkbox').replace('button','button') : 'a DS component'), text: (el.textContent || el.getAttribute('placeholder') || '').trim().slice(0, 30) } })
+  // fabricated chips: light-DOM, non-custom element with a bg tint + radius + short text (a Tag/Badge look-alike)
+  const chips = [...document.querySelectorAll('span,div,i')].filter((el) => {
+    if (el.tagName.includes('-') || insideCE(el)) return false
+    const c = getComputedStyle(el); const r = el.getBoundingClientRect()
+    const bg = c.backgroundColor; const hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent'
+    const rad = parseFloat(c.borderTopLeftRadius) || 0
+    const txt = (el.textContent || '').trim()
+    return hasBg && rad >= 4 && r.width > 0 && r.width < 160 && r.height < 40 && txt.length >= 1 && txt.length <= 24 && el.children.length <= 1
+  }).map((el) => (el.textContent || '').trim().slice(0, 24))
+  return { colors, spaces, dsInteractive, rawControls, chips: [...new Set(chips)], bodyBg: getComputedStyle(document.body).backgroundColor }
 }
 
 ;(async () => {
@@ -200,26 +218,29 @@ const MEASURE = () => {
   if (brandMisuse.length) { philosophyScore -= 20; violations.philosophy.push({ rule: 'brand-navy', detail: `off-token saturated blue used (${brandMisuse.map((b) => b.value).join(', ')}) — brand must be --primary navy, not blue/cyan` }) }
   philosophyScore = Math.max(0, philosophyScore)
 
-  // 4. component adherence (advisory): interactive controls should carry a DS signature
-  const DS_SIG = /\b(ant-|obs-|m-|floto|tag-|squared-button|sel|trig)/i
-  let cOk = 0
-  for (const ctrl of m.controls) { if (ctrl.ce || DS_SIG.test(ctrl.cls) || ctrl.tag === 'a') cOk++ }
-  const componentScore = m.controls.length ? Math.round((cOk / m.controls.length) * 100) : 100
-  if (m.controls.length && cOk < m.controls.length) violations.component.push({ detail: `${m.controls.length - cOk} of ${m.controls.length} interactive controls have no DS component/class signature (raw element?)` })
+  // 4. COMPONENT FIDELITY — every interactive control must be a real DS component (not a raw element),
+  //    and no fabricated Tag/Badge look-alikes. A DS page renders controls via obs-* (shadow DOM), so any
+  //    raw light-DOM control is a non-DS element. This is the "use DS components, not look-alikes" check.
+  const rawN = m.rawControls.length
+  const denom = m.dsInteractive + rawN
+  const componentScore = denom === 0 ? 100 : Math.round((m.dsInteractive / denom) * 100)
+  for (const rc of m.rawControls) violations.component.push({ detail: `raw <${rc.tag}${rc.role ? ' role=' + rc.role : ''}>${rc.text ? ` "${rc.text}"` : ''} — use ${rc.suggest}, not a raw element` })
+  if (m.chips.length) violations.component.push({ advisory: true, detail: `possible fabricated chip(s) — use obs-tag / obs-severity: ${m.chips.slice(0, 6).join(', ')}` })
 
-  const overall = Math.round(tokenScore * 0.45 + layoutScore * 0.15 + philosophyScore * 0.25 + componentScore * 0.15)
-  const result = { target, theme, overall, dimensions: { token: tokenScore, layout: layoutScore, philosophy: philosophyScore, component: componentScore },
-    measured: { colors: tTot, spacings: lTot, controls: m.controls.length }, violations }
+  // Component fidelity is weighted heavily — the point of the check is DS components, not just DS colours.
+  const overall = Math.round(tokenScore * 0.35 + componentScore * 0.30 + philosophyScore * 0.20 + layoutScore * 0.15)
+  const result = { target, theme, overall, dimensions: { token: tokenScore, component: componentScore, philosophy: philosophyScore, layout: layoutScore },
+    measured: { colors: tTot, spacings: lTot, dsComponents: m.dsInteractive, rawControls: rawN, fabricatedChips: m.chips.length }, violations }
 
   if (jsonOut) fs.writeFileSync(jsonOut, JSON.stringify(result, null, 2))
   if (!QUIET) {
     console.log(`\n=== DS conformance — ${target} (theme=${theme}) ===`)
-    console.log(`  OVERALL: ${overall}/100   ·  token ${tokenScore}  layout ${layoutScore}  philosophy ${philosophyScore}  component ${componentScore}`)
-    console.log(`  measured: ${tTot} colours · ${lTot} spacings · ${m.controls.length} controls`)
+    console.log(`  OVERALL: ${overall}/100   ·  token ${tokenScore}  component ${componentScore}  philosophy ${philosophyScore}  layout ${layoutScore}`)
+    console.log(`  measured: ${tTot} colours · ${lTot} spacings · ${m.dsInteractive} DS components · ${rawN} raw controls · ${m.chips.length} fabricated chip(s)`)
+    if (violations.component.length) { console.log('\n  COMPONENT fidelity (use DS components, not raw/look-alikes):'); for (const v of violations.component.slice(0, 10)) console.log(`    ✗ ${v.detail}`) }
     if (violations.token.length) { console.log('\n  off-token colours (top):'); for (const v of violations.token.slice(0, 8)) console.log(`    ✗ ${v.value} (${v.prop}, ×${v.count}) → nearest DS token ${v.nearestToken} (${v.nearestVal}, Δ${v.delta})`) }
     if (violations.layout.length) { console.log('\n  off-scale spacing/radii:'); for (const v of violations.layout.slice(0, 6)) console.log(`    ~ ${v.value} (×${v.count})`) }
     if (violations.philosophy.length) { console.log('\n  philosophy:'); for (const v of violations.philosophy) console.log(`    ✗ [${v.rule}] ${v.detail}`) }
-    if (violations.component.length) { console.log('\n  component:'); for (const v of violations.component) console.log(`    ~ ${v.detail}`) }
     console.log('')
   }
   process.exit(overall >= 80 ? 0 : 1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtdt/observeops-ds-spec",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Machine-readable spec and AI operating contract for the Motadata ObserveOps design system \u2014 components, tokens, page recipes, layout structure, and the rules an AI tool follows to build ObserveOps UI faithfully.",
   "license": "UNLICENSED",
   "main": "index.js",

package/spec.manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtdt/observeops-ds-spec",
-  "version": "0.1.5",
-  "generated": "2026-07-05T05:55:32.800Z",
+  "version": "0.1.6",
+  "generated": "2026-07-05T06:45:18.241Z",
   "entry": "llms.txt",
   "contract": "AGENTS.md",
   "index": "components/index.json",
@@ -360,8 +360,8 @@
     },
     {
       "path": "conformance/ds-conformance.mjs",
-      "bytes": 14797,
-      "sha256": "6c0ab765d85ffbb63f37bbecb31f4c1d0dc53f95dbce01044d0e6fb9baf5fd03"
+      "bytes": 17517,
+      "sha256": "2ab84ecc68575abf122b85beb3f9a9d4eccde9ffd629f71ea1cae2af50cfd3ac"
     },
     {
       "path": "foundation/README.md",
@@ -411,7 +411,7 @@
     {
       "path": "package.json",
       "bytes": 1072,
-      "sha256": "a498b96846cd6731099d56e25658eedd15b1c3af8ee49bd969b5dcd2de9876f5"
+      "sha256": "3e5a5e13ada2e15ca887ec4d40f280a0fac033f4dbaba8ac601d6efd46011d2f"
     },
     {
       "path": "tokens/README.md",