@sorb/seed 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sorb/seed",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Storybook → Figma capture for Sorb: headless capture + the resolved bindable token map. Heavy deps (esbuild, later Playwright) live here so the bridge stays lean.",
   "license": "MIT",
   "keywords": [

package/src/annotateTokens.js

@@ -1,5 +1,15 @@
 import { TIER_RANK } from '@sorb/core'
 
+// Dev-gated warn(): no-op in production / unless SORB_DEBUG is set, so serve-time
+// isn't noisy but local capture/dev surfaces drops loudly. (Diagnostics contract §4.)
+const warn = (...args) => {
+  const env = (typeof process !== 'undefined' && process.env) || {}
+  if (env.SORB_DEBUG || env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn('[sorb-seed]', ...args)
+  }
+}
+
 // Token annotation for captured layer values.
 //
 // Exact, normalized matching against the resolved bindable token map
@@ -20,23 +30,87 @@ const toHex2 = (n) =>
   Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0')
 const alphaHex = (a) => toHex2(Math.max(0, Math.min(1, a)) * 255)
 
-/** Normalize any CSS color to canonical `#rrggbbaa`, or null if not a color. */
-export const normalizeColor = (value) => {
-  if (value == null) return null
-  const s = String(value).trim().toLowerCase()
-  if (s === 'transparent') return '#00000000'
-  let m = s.match(/^#([0-9a-f]{3,8})$/)
-  if (m) return expandHex(m[1])
-  m = s.match(/^rgba?\(\s*([^)]+)\)$/)
+// A minimal CSS named-color table (the common names). Keeps `normalizeColor`
+// dependency-free while covering values that show up in captured design tokens.
+// (REC-6 — class-5 exotic/unicode-color improvement.)
+export const CSS_NAMED_COLORS = {
+  black: '#000000ff',
+  white: '#ffffffff',
+  red: '#ff0000ff',
+  green: '#008000ff',
+  blue: '#0000ffff',
+  yellow: '#ffff00ff',
+  cyan: '#00ffffff',
+  aqua: '#00ffffff',
+  magenta: '#ff00ffff',
+  fuchsia: '#ff00ffff',
+  gray: '#808080ff',
+  grey: '#808080ff',
+  silver: '#c0c0c0ff',
+  maroon: '#800000ff',
+  olive: '#808000ff',
+  lime: '#00ff00ff',
+  teal: '#008080ff',
+  navy: '#000080ff',
+  purple: '#800080ff',
+  orange: '#ffa500ff',
+  pink: '#ffc0cbff',
+  brown: '#a52a2aff',
+  gold: '#ffd700ff',
+  indigo: '#4b0082ff',
+  violet: '#ee82eeff',
+  coral: '#ff7f50ff',
+  salmon: '#fa8072ff',
+  khaki: '#f0e68cff',
+  crimson: '#dc143cff',
+  turquoise: '#40e0d0ff',
+}
+
+// Sentinel marker (REC-6): distinguishes a value we *recognized as a color* but
+// couldn't parse ('unparseable') from a value that simply isn't a color
+// ('no-match'). `normalizeColor` still returns a hex string or null for callers;
+// `classifyColor` exposes the richer outcome so REC-1's `dropped[]` can record
+// *why* a value vanished.
+const NBSP = /[   ]/g
+
+/**
+ * Classify a value as a color.
+ * @returns {{ hex: string|null, status: 'ok'|'no-match'|'unparseable' }}
+ *   - ok: parsed → canonical hex
+ *   - no-match: a clean value that just isn't a color (e.g. '4px', a dimension)
+ *   - unparseable: looks color-ish (a `#…` / `rgb(…)` / named shape) but is malformed
+ */
+export const classifyColor = (value) => {
+  if (value == null) return { hex: null, status: 'no-match' }
+  // Normalize exotic whitespace (NBSP etc.) that silently breaks matches.
+  const s = String(value).replace(NBSP, ' ').trim().toLowerCase()
+  if (s === '') return { hex: null, status: 'no-match' }
+  if (s === 'transparent') return { hex: '#00000000', status: 'ok' }
+  if (Object.prototype.hasOwnProperty.call(CSS_NAMED_COLORS, s)) {
+    return { hex: CSS_NAMED_COLORS[s], status: 'ok' }
+  }
+  // `#…` shape: a clean hex parses; a `#`-prefixed-but-bad value is unparseable.
+  if (s[0] === '#') {
+    const m = s.match(/^#([0-9a-f]{3,8})$/)
+    if (m && [3, 4, 6, 8].includes(m[1].length)) return { hex: expandHex(m[1]), status: 'ok' }
+    return { hex: null, status: 'unparseable' }
+  }
+  // `rgb(…)` / `rgba(…)` shape.
+  const m = s.match(/^rgba?\(\s*([^)]+)\)$/)
   if (m) {
     const p = m[1].split(',').map((x) => x.trim())
-    if (p.length < 3) return null
+    if (p.length < 3) return { hex: null, status: 'unparseable' }
+    const nums = p.map((x) => parseFloat(x))
+    if (nums.slice(0, 3).some((n) => Number.isNaN(n))) return { hex: null, status: 'unparseable' }
     const a = p[3] !== undefined ? parseFloat(p[3]) : 1
-    return '#' + toHex2(+p[0]) + toHex2(+p[1]) + toHex2(+p[2]) + alphaHex(a)
+    return { hex: '#' + toHex2(nums[0]) + toHex2(nums[1]) + toHex2(nums[2]) + alphaHex(a), status: 'ok' }
   }
-  return null
+  return { hex: null, status: 'no-match' }
 }
 
+/** Normalize any CSS color to canonical `#rrggbbaa`, or null if not a color. */
+export const normalizeColor = (value) => classifyColor(value).hex
+
 /** Normalize a CSS length to a px number, or null. */
 export const normalizeDimension = (value) => {
   if (value == null) return null
@@ -44,21 +118,70 @@ export const normalizeDimension = (value) => {
   return m ? parseFloat(m[1]) : null
 }
 
-/** Build value→[token] indexes (colors, dims) from the resolved bindable map. */
+// REC-2: a value that's still wrapped in `{…}` is an unresolved alias — Style
+// Dictionary didn't follow the ref (a typo, a missing target, or a reference
+// cycle). Observable, not fatal.
+const ALIAS_RE = /^\{.+\}$/
+const isAlias = (value) => typeof value === 'string' && ALIAS_RE.test(value.trim())
+/** The bare ref path inside `{…}` (e.g. `{color.a}` → `color.a`), or null. */
+const aliasTarget = (value) =>
+  isAlias(value) ? String(value).trim().slice(1, -1).trim() : null
+
+// Walk the alias graph from `id` and return the set of ids on an A↔B (or longer)
+// cycle reachable from it, using the resolved map's own alias edges.
+const findAliasCycles = (resolved) => {
+  const byId = new Map(resolved.map((t) => [t.id, t]))
+  const onCycle = new Set()
+  for (const start of resolved) {
+    if (!isAlias(start.value)) continue
+    const seen = new Set()
+    let cur = start
+    while (cur && isAlias(cur.value)) {
+      if (seen.has(cur.id)) { for (const id of seen) onCycle.add(id); break }
+      seen.add(cur.id)
+      cur = byId.get(aliasTarget(cur.value))
+    }
+  }
+  return onCycle
+}
+
+/**
+ * Build value→[token] indexes (colors, dims) from the resolved bindable map.
+ * @returns {{ colors: Map, dims: Map, dropped: {id, value, reason}[] }}
+ *   `dropped` (REC-1/2/6) records every token whose value normalized to null —
+ *   unresolved-alias / cycle / unparseable-color / no-match — so a silent vanish
+ *   becomes observable. Backward-compatible: `{colors, dims}` destructure still works.
+ */
 export const buildTokenIndex = (resolved) => {
   const colors = new Map()
   const dims = new Map()
+  const dropped = []
+  const cycles = findAliasCycles(resolved)
   const add = (map, key, t) => {
     if (key == null) return
     if (!map.has(key)) map.set(key, [])
     map.get(key).push(t)
   }
+  const drop = (t, reason) => dropped.push({ id: t.id, value: t.value, reason })
   for (const t of resolved) {
-    const c = normalizeColor(t.value)
-    if (c) add(colors, c, t)
-    else add(dims, normalizeDimension(t.value), t)
+    // REC-2: unresolved aliases / cycles never index — surface them.
+    if (isAlias(t.value)) {
+      drop(t, cycles.has(t.id) ? 'alias-cycle' : 'unresolved-alias')
+      continue
+    }
+    const col = classifyColor(t.value)
+    if (col.hex) { add(colors, col.hex, t); continue }
+    const d = normalizeDimension(t.value)
+    if (d != null) { add(dims, d, t); continue }
+    // Neither a color nor a dimension → record *why* (REC-6 marker distinguishes
+    // a malformed color from a value that's simply no color).
+    drop(t, col.status === 'unparseable' ? 'unparseable-color' : 'no-match')
+  }
+  if (dropped.length) {
+    warn(`buildTokenIndex dropped ${dropped.length} token(s):`,
+      dropped.map((d) => `${d.id} (${d.reason})`).join(', '))
   }
-  return { colors, dims }
+  return { colors, dims, dropped }
 }
 
 // Binding = property affinity first, then tier precedence.
@@ -81,7 +204,11 @@ const pick = (cands, role) => {
   const roled = role ? cands.filter((c) => c.id.includes('.' + role)) : []
   const pool = roled.length ? roled : cands
   const best = [...pool].sort(byTier)[0]
-  return { token: best.id, candidates: cands.map((c) => c.id) }
+  // REC-1/REC-3 fold-in: a role-miss that fell back to the tier-only pool can bind
+  // the WRONG token silently. Flag it as a low-confidence pick so the bind is
+  // observable. `offRole` is additive; existing callers ignore it.
+  const offRole = !!(role && !roled.length)
+  return { token: best.id, candidates: cands.map((c) => c.id), offRole, role }
 }
 
 export const matchColor = (index, value, role) => {
@@ -100,8 +227,16 @@ export const matchDimension = (index, value, role) => {
 export const annotateTree = (node, index) => {
   const tokens = {}
   const candidates = {}
+  const diagnostics = []
   const set = (key, res) => {
-    if (res.token) { tokens[key] = res.token; candidates[key] = res.candidates }
+    if (res.token) {
+      tokens[key] = res.token
+      candidates[key] = res.candidates
+      // REC-1 fold-in: a token bound off-role is low-confidence — surface it.
+      if (res.offRole) {
+        diagnostics.push({ kind: 'off-role-bind', detail: { key, role: res.role, token: res.token } })
+      }
+    }
   }
   // A fill on a TEXT node is foreground (`text`); on a frame it's `bg`.
   const fillRole = node.type === 'TEXT' ? 'text' : 'bg'
@@ -112,7 +247,14 @@ export const annotateTree = (node, index) => {
     // No shadow tokens yet → no role, falls back to tier-only.
     node.effects.forEach((e, i) => { if (e.color) set(`effect${i}`, matchColor(index, e.color.raw)) })
   }
-  if (Object.keys(tokens).length) node.sorb = { tokens, candidates }
+  if (Object.keys(tokens).length) {
+    node.sorb = { tokens, candidates }
+    // `diagnostics` is additive — only attached when there's something to report.
+    if (diagnostics.length) node.sorb.diagnostics = diagnostics
+  }
+  if (diagnostics.length) {
+    warn(`annotateTree: ${diagnostics.length} low-confidence bind(s) on ${node.name || node.type}`)
+  }
   if (Array.isArray(node.children)) node.children.forEach((c) => annotateTree(c, index))
   return node
 }

package/src/annotateTokens.test.js

@@ -0,0 +1,208 @@
+// Tests for the capture token-annotator (auto-bind: property affinity + tier
+// precedence). Run: node --test  (zero-dep; resolves @sorb/core via the workspace link).
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  normalizeColor,
+  classifyColor,
+  normalizeDimension,
+  buildTokenIndex,
+  matchColor,
+  matchDimension,
+  annotateTree,
+} from './annotateTokens.js'
+
+// A resolved map where one color value (#0f65ef) is shared across a component
+// bg, a component border, a semantic bg, and a semantic border — so the tests
+// exercise BOTH role affinity (which property) and tier precedence (the tiebreak).
+const RESOLVED = [
+  { id: 'button.primary.bg.default', cssVar: '--button-primary-bg-default', value: '#0f65ef', tier: 'component', type: 'color' },
+  { id: 'button.primary.border.default', cssVar: '--button-primary-border-default', value: '#0F65EF', tier: 'component', type: 'color' },
+  { id: 'color.action.primary', cssVar: '--color-action-primary', value: '#0f65ef', tier: 'semantic', type: 'color' },
+  { id: 'color.border.default', cssVar: '--color-border-default', value: '#0f65ef', tier: 'semantic', type: 'color' },
+  { id: 'button.primary.text.default', cssVar: '--button-primary-text-default', value: '#ffffff', tier: 'component', type: 'color' },
+  { id: 'button.radius', cssVar: '--button-radius', value: '4px', tier: 'component', type: 'dimension' },
+]
+
+test('normalizeColor handles hex (3/4/6/8), rgb(a), transparent, and rejects junk', () => {
+  assert.equal(normalizeColor('#fff'), '#ffffffff')
+  assert.equal(normalizeColor('#FFFF'), '#ffffffff')
+  assert.equal(normalizeColor('#0f65ef'), '#0f65efff')
+  assert.equal(normalizeColor('#0F65EF80'), '#0f65ef80')
+  assert.equal(normalizeColor('rgb(15, 101, 239)'), '#0f65efff')
+  assert.equal(normalizeColor('rgba(0,0,0,0)'), '#00000000')
+  assert.equal(normalizeColor('transparent'), '#00000000')
+  assert.equal(normalizeColor('not-a-color'), null)
+  assert.equal(normalizeColor(null), null)
+})
+
+test('normalizeDimension parses px / unitless / decimals, rejects non-lengths', () => {
+  assert.equal(normalizeDimension('4px'), 4)
+  assert.equal(normalizeDimension('4'), 4)
+  assert.equal(normalizeDimension(8), 8)
+  assert.equal(normalizeDimension('2.5px'), 2.5)
+  assert.equal(normalizeDimension('-1px'), -1)
+  assert.equal(normalizeDimension('1rem'), null)
+  assert.equal(normalizeDimension(null), null)
+})
+
+test('buildTokenIndex groups tokens by normalized value into colors/dims', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  assert.equal(idx.colors.get('#0f65efff').length, 4) // four tokens share this color
+  assert.equal(idx.colors.get('#ffffffff').length, 1)
+  assert.equal(idx.dims.get(4).length, 1)
+})
+
+test('matchColor: role affinity picks the right property family', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  // bg role → only the component bg carries `.bg`
+  assert.equal(matchColor(idx, '#0f65ef', 'bg').token, 'button.primary.bg.default')
+  // border role → two `.border` cands; tier tiebreak picks component over semantic
+  assert.equal(matchColor(idx, '#0f65ef', 'border').token, 'button.primary.border.default')
+})
+
+test('matchColor: all matches are kept as candidates regardless of the pick', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  const res = matchColor(idx, '#0f65ef', 'bg')
+  assert.equal(res.candidates.length, 4)
+  assert.ok(res.candidates.includes('color.action.primary'))
+})
+
+test('matchColor: with no role, tier precedence wins (component beats semantic)', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  const res = matchColor(idx, '#0f65ef')
+  assert.ok(['button.primary.bg.default', 'button.primary.border.default'].includes(res.token))
+})
+
+test('matchColor / matchDimension return null token for a value with no match', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  assert.equal(matchColor(idx, '#123456', 'bg').token, null)
+  assert.equal(matchDimension(idx, 99, 'radius').token, null)
+})
+
+test('matchDimension binds a radius value to the component radius token', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  assert.equal(matchDimension(idx, 4, 'radius').token, 'button.radius')
+})
+
+test('annotateTree binds a button: fill→bg, stroke→border, radius, TEXT child→text', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  const node = {
+    type: 'FRAME',
+    fills: [{ raw: '#0f65ef' }],
+    strokes: [{ raw: '#0f65ef' }],
+    cornerRadius: 4,
+    children: [{ type: 'TEXT', fills: [{ raw: '#ffffff' }] }],
+  }
+  const out = annotateTree(node, idx)
+  assert.equal(out.sorb.tokens.fill, 'button.primary.bg.default')
+  assert.equal(out.sorb.tokens.stroke, 'button.primary.border.default')
+  assert.equal(out.sorb.tokens.cornerRadius, 'button.radius')
+  // a fill on a TEXT node is foreground → the `text` role
+  assert.equal(out.children[0].sorb.tokens.fill, 'button.primary.text.default')
+})
+
+test('annotateTree leaves unmatched nodes without a `sorb` key', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  const node = { type: 'FRAME', fills: [{ raw: '#abcdef' }] }
+  const out = annotateTree(node, idx)
+  assert.equal(out.sorb, undefined)
+})
+
+// ── REC-6: CSS named-color support + unparseable/no-match marker ──────────────
+
+test('REC-6: normalizeColor resolves common CSS named colors', () => {
+  assert.equal(normalizeColor('red'), '#ff0000ff')
+  assert.equal(normalizeColor('WHITE'), '#ffffffff') // case-insensitive
+  assert.equal(normalizeColor('rebeccapurple'), null) // not in the minimal table → no-match
+  assert.equal(normalizeColor('purple'), '#800080ff')
+})
+
+test('REC-6: classifyColor distinguishes ok / no-match / unparseable', () => {
+  assert.deepEqual(classifyColor('#0f65ef'), { hex: '#0f65efff', status: 'ok' })
+  assert.deepEqual(classifyColor('blue'), { hex: '#0000ffff', status: 'ok' })
+  // a `#`-prefixed but malformed value is recognized-but-unparseable, not just no-match
+  assert.equal(classifyColor('#ggg').status, 'unparseable')
+  assert.equal(classifyColor('#12').status, 'unparseable')
+  assert.equal(classifyColor('rgb(1,2)').status, 'unparseable')
+  assert.equal(classifyColor('rgb(x,y,z)').status, 'unparseable')
+  // a clean non-color (e.g. a dimension) is no-match, not unparseable
+  assert.equal(classifyColor('4px').status, 'no-match')
+  assert.equal(classifyColor('not-a-color').status, 'no-match')
+  assert.equal(classifyColor(null).status, 'no-match')
+})
+
+test('REC-6: normalizeColor tolerates exotic whitespace (NBSP) around a hex', () => {
+  assert.equal(normalizeColor(' #0f65ef '), '#0f65efff')
+})
+
+// ── REC-1: buildTokenIndex.dropped[] for vanished tokens ─────────────────────
+
+test('REC-1: buildTokenIndex still destructures to {colors, dims} (backward-compat)', () => {
+  const { colors, dims, dropped } = buildTokenIndex(RESOLVED)
+  assert.ok(colors.get('#0f65efff'))
+  assert.ok(dims.get(4))
+  assert.deepEqual(dropped, []) // a clean map drops nothing
+})
+
+test('REC-1: an unparseable-color token is dropped with a marker reason', () => {
+  const { dropped } = buildTokenIndex([
+    { id: 'color.bad', cssVar: '--bad', value: '#ggg', tier: 'semantic', type: 'color' },
+  ])
+  assert.equal(dropped.length, 1)
+  assert.equal(dropped[0].id, 'color.bad')
+  assert.equal(dropped[0].reason, 'unparseable-color')
+})
+
+test('REC-1: a no-match token (NBSP-only / junk) is dropped as no-match', () => {
+  const { dropped } = buildTokenIndex([
+    { id: 'space.weird', cssVar: '--w', value: ' ', tier: 'primitive', type: 'dimension' },
+  ])
+  assert.equal(dropped.length, 1)
+  assert.equal(dropped[0].reason, 'no-match')
+})
+
+// ── REC-2: unresolved-alias / cycle detection ────────────────────────────────
+
+test('REC-2: a still-wrapped {…} value is dropped as unresolved-alias (not thrown)', () => {
+  const { dropped, colors } = buildTokenIndex([
+    { id: 'color.action', cssVar: '--a', value: '{color.brand.primary}', tier: 'semantic', type: 'color' },
+    { id: 'color.brand.primary', cssVar: '--p', value: '#0f65ef', tier: 'primitive', type: 'color' },
+  ])
+  const alias = dropped.find((d) => d.id === 'color.action')
+  assert.ok(alias)
+  assert.equal(alias.reason, 'unresolved-alias')
+  // the real token still indexed normally
+  assert.ok(colors.get('#0f65efff'))
+})
+
+test('REC-2: an A↔B alias cycle is detected and dropped as alias-cycle', () => {
+  const { dropped } = buildTokenIndex([
+    { id: 'a', cssVar: '--a', value: '{b}', tier: 'semantic', type: 'color' },
+    { id: 'b', cssVar: '--b', value: '{a}', tier: 'semantic', type: 'color' },
+  ])
+  const reasons = dropped.map((d) => d.reason)
+  assert.equal(dropped.length, 2)
+  assert.ok(reasons.every((r) => r === 'alias-cycle'))
+})
+
+// ── pick() off-role fallback → low-confidence diagnostic ─────────────────────
+
+test('off-role fallback bind is surfaced as a low-confidence diagnostic', () => {
+  // #ffffff only carries a `.text` token; binding it as a frame `bg` fill is off-role.
+  const idx = buildTokenIndex(RESOLVED)
+  const node = { type: 'FRAME', fills: [{ raw: '#ffffff' }] }
+  const out = annotateTree(node, idx)
+  assert.equal(out.sorb.tokens.fill, 'button.primary.text.default') // still binds
+  assert.ok(Array.isArray(out.sorb.diagnostics))
+  assert.equal(out.sorb.diagnostics[0].kind, 'off-role-bind')
+  assert.equal(out.sorb.diagnostics[0].detail.role, 'bg')
+})
+
+test('an on-role bind attaches no diagnostics (additive, only when needed)', () => {
+  const idx = buildTokenIndex(RESOLVED)
+  const node = { type: 'FRAME', fills: [{ raw: '#0f65ef' }] }
+  const out = annotateTree(node, idx)
+  assert.equal(out.sorb.tokens.fill, 'button.primary.bg.default')
+  assert.equal(out.sorb.diagnostics, undefined)
+})

package/src/capture.js

@@ -201,6 +201,106 @@ export const captureNode = (el, parentRect) => {
 /** Entry point: capture a root element with itself at the origin (0,0). */
 export const captureRoot = (el) => captureNode(el, el.getBoundingClientRect())
 
+// ─── Capture root trim (sorb-capture-trim-spec.md) ──────────────────────────
+// Storybook wraps each story in full-width padded divs, so a raw captured root
+// is the story container (e.g. 1248×86) with the real component (button 82×38)
+// nested at an offset inside empty wrappers. `tightenRoot` trims the tree to the
+// meaningful component AT CAPTURE TIME so every consumer (insert, preview, label
+// wrapper) gets a tight, token-bound node. Pure + annotation-safe: it runs in
+// captureCli BEFORE annotateTree, and only drops un-annotated, non-visual
+// wrappers, so token bindings on the kept subtree are untouched.
+
+/**
+ * "Content-bearing" = the node, or any descendant, paints (a non-transparent
+ * fill or a stroke) or is TEXT. Same notion as the preview SVG walker.
+ * @param {object} node LayerNode
+ * @returns {boolean}
+ */
+export const hasContent = (node) => {
+  if (!node) return false
+  if (node.type === 'TEXT') return true
+  if ((node.fills && node.fills[0]) || (node.strokes && node.strokes[0])) return true
+  return (node.children || []).some(hasContent)
+}
+
+/** A node that ITSELF paints (own fill/stroke) or is TEXT — vs a transparent wrapper. */
+const selfPaints = (node) =>
+  node.type === 'TEXT' || !!(node.fills && node.fills[0]) || !!(node.strokes && node.strokes[0])
+
+/**
+ * Union of the rects of all self-painting (or TEXT) nodes in `node`'s subtree,
+ * expressed in `node`'s LOCAL coordinate space (node's own origin = 0,0).
+ * Returns null when nothing in the subtree paints. Children carry offsets
+ * relative to their parent, so the walk accumulates them; negative/overflow
+ * offsets are included (the union never clips content).
+ * @param {object} node
+ * @returns {{minX:number,minY:number,maxX:number,maxY:number}|null}
+ */
+export const contentBBox = (node) => {
+  let box = null
+  const acc = (n, ox, oy) => {
+    if (!n) return
+    if (selfPaints(n)) {
+      const x1 = ox + (n.width || 0)
+      const y1 = oy + (n.height || 0)
+      if (box === null) box = { minX: ox, minY: oy, maxX: x1, maxY: y1 }
+      else {
+        if (ox < box.minX) box.minX = ox
+        if (oy < box.minY) box.minY = oy
+        if (x1 > box.maxX) box.maxX = x1
+        if (y1 > box.maxY) box.maxY = y1
+      }
+    }
+    for (const c of n.children || []) acc(c, ox + (c.x || 0), oy + (c.y || 0))
+  }
+  acc(node, 0, 0)
+  return box
+}
+
+/**
+ * Trim a captured root to its meaningful component:
+ *  1) descend through pure pass-through wrappers (a single content-bearing,
+ *     non-TEXT child, and no paint of their own),
+ *  2) crop the kept node to its content bounding box and normalize direct-child
+ *     offsets so content sits at the origin.
+ * Mutates the kept node's geometry in step 2 and returns it. See
+ * sorb-capture-trim-spec.md §3.
+ * @param {object} root LayerNode
+ * @returns {object} the tightened node
+ */
+export const tightenRoot = (root) => {
+  if (!root) return root
+  let node = root
+  // 1) descend through pure pass-through wrappers
+  while (true) {
+    const selfVisual = (node.fills && node.fills[0]) || (node.strokes && node.strokes[0])
+    if (selfVisual) break // node paints something → keep it
+    const kids = (node.children || []).filter(hasContent)
+    // unwrap a sole content-bearing child UNLESS it is TEXT (the wrapper carries
+    // the component's frame; don't descend into raw text). Multiple content kids
+    // (e.g. a variant row) → stop here.
+    if (kids.length === 1 && kids[0].type !== 'TEXT') {
+      node = kids[0]
+      continue
+    }
+    break
+  }
+  // 2) crop node to the bbox of its content (local coords)
+  const bbox = contentBBox(node)
+  if (bbox === null) return node // nothing drawn → leave as-is
+  const dx = bbox.minX
+  const dy = bbox.minY
+  for (const child of node.children || []) {
+    child.x = (child.x || 0) - dx
+    child.y = (child.y || 0) - dy
+  }
+  node.x = 0
+  node.y = 0
+  node.width = bbox.maxX - bbox.minX
+  node.height = bbox.maxY - bbox.minY
+  return node
+}
+
 // Install the walker on `window` so it can be called from a Playwright
 // page.evaluate(() => window.__sorbCapture(...)) after this module is
 // bundled and injected via addInitScript. No-op in Node tests.

package/src/capture.test.js

@@ -0,0 +1,142 @@
+// Unit tests for the capture root-trim helpers (sorb-capture-trim-spec.md §6).
+// Pure geometry — no Playwright/DOM needed. Run: `node --test src/capture.test.js`.
+
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { hasContent, contentBBox, tightenRoot } from './capture.js'
+
+// ─── tiny LayerNode factories ───────────────────────────────────────────────
+const SOLID = [{ type: 'SOLID', r: 0.1, g: 0.3, b: 0.9 }]
+
+/** A FRAME. Pass `{ fill: true }` to make it self-painting. */
+const frame = (x, y, w, h, opts = {}, children = []) => ({
+  type: 'FRAME',
+  name: opts.name || 'div',
+  x, y, width: w, height: h,
+  fills: opts.fill ? SOLID : [],
+  strokes: opts.stroke ? SOLID : [],
+  children,
+})
+
+const text = (x, y, w, h, value = 'Primary') => ({
+  type: 'TEXT', name: value, x, y, width: w, height: h, fills: SOLID, children: [],
+})
+
+// ─── hasContent ─────────────────────────────────────────────────────────────
+test('hasContent: TEXT, painted frame, and nested content are content-bearing', () => {
+  assert.equal(hasContent(text(0, 0, 10, 10)), true)
+  assert.equal(hasContent(frame(0, 0, 10, 10, { fill: true })), true)
+  assert.equal(hasContent(frame(0, 0, 10, 10, { stroke: true })), true)
+  // transparent wrapper around a painted child → content-bearing via descendant
+  assert.equal(hasContent(frame(0, 0, 10, 10, {}, [frame(0, 0, 5, 5, { fill: true })])), true)
+  // empty transparent wrapper → not content-bearing
+  assert.equal(hasContent(frame(0, 0, 10, 10, {}, [frame(0, 0, 5, 5)])), false)
+  assert.equal(hasContent(null), false)
+})
+
+// ─── contentBBox ────────────────────────────────────────────────────────────
+test('contentBBox: union of painted/text rects in local coords; null when nothing paints', () => {
+  // a painted button with an inset text label
+  const button = frame(0, 0, 82, 38, { fill: true }, [text(16, 10, 50, 18)])
+  assert.deepEqual(contentBBox(button), { minX: 0, minY: 0, maxX: 82, maxY: 38 })
+
+  // transparent wrapper: bbox bounds only the painted descendants (accumulated offset)
+  const wrapped = frame(0, 0, 200, 100, {}, [frame(20, 30, 40, 20, { fill: true })])
+  assert.deepEqual(contentBBox(wrapped), { minX: 20, minY: 30, maxX: 60, maxY: 50 })
+
+  // nothing drawn → null
+  assert.equal(contentBBox(frame(0, 0, 100, 100, {}, [frame(0, 0, 10, 10)])), null)
+})
+
+test('contentBBox: negative/overflow offsets are included (never clips content)', () => {
+  const n = frame(0, 0, 100, 100, {}, [
+    frame(-5, -8, 10, 10, { fill: true }),
+    frame(90, 95, 20, 20, { fill: true }),
+  ])
+  assert.deepEqual(contentBBox(n), { minX: -5, minY: -8, maxX: 110, maxY: 115 })
+})
+
+// ─── tightenRoot: the three canonical shapes (spec §6) ──────────────────────
+test('tightenRoot: single component — descends wrappers, crops to the button (82×38 at origin)', () => {
+  // story 1248×86 → wrapper → wrapper → button 82×38 @(24,24) → text
+  const tree = frame(0, 0, 1248, 86, {}, [
+    frame(0, 0, 1248, 86, {}, [
+      frame(0, 0, 1248, 86, {}, [
+        frame(24, 24, 82, 38, { fill: true, name: 'button' }, [text(16, 10, 50, 18)]),
+      ]),
+    ]),
+  ])
+  const out = tightenRoot(tree)
+  assert.equal(out.name, 'button')
+  assert.equal(out.x, 0)
+  assert.equal(out.y, 0)
+  assert.equal(out.width, 82)
+  assert.equal(out.height, 38)
+  // the text child is preserved (annotation-safe) and unshifted (dx=dy=0)
+  assert.equal(out.children.length, 1)
+  assert.equal(out.children[0].type, 'TEXT')
+})
+
+test('tightenRoot: multi-child row — stops at the row, crops to the variant group (tight, not 1248)', () => {
+  // a row of three buttons, left-padded by 10
+  const row = frame(0, 0, 1248, 40, { name: 'row' }, [
+    frame(10, 0, 80, 40, { fill: true }, [text(8, 10, 40, 18)]),
+    frame(110, 0, 90, 40, { fill: true }, [text(8, 10, 50, 18)]),
+    frame(210, 0, 70, 40, { fill: true }, [text(8, 10, 40, 18)]),
+  ])
+  const tree = frame(0, 0, 1248, 40, {}, [row])
+  const out = tightenRoot(tree)
+  assert.equal(out.name, 'row')
+  assert.equal(out.x, 0)
+  assert.equal(out.width, 270) // (210+70) - 10  → tight row, not 1248
+  assert.equal(out.height, 40)
+  assert.equal(out.children.length, 3)
+  assert.equal(out.children[0].x, 0) // first button shifted left by dx=10
+  assert.equal(out.children[1].x, 100)
+  assert.equal(out.children[2].x, 200)
+})
+
+test('tightenRoot: visual card — descent stops at the painted surface (kept, not skipped)', () => {
+  const card = frame(20, 10, 320, 180, { fill: true, name: 'card' }, [
+    frame(16, 16, 200, 24, {}, [text(0, 0, 180, 20, 'Title')]),
+  ])
+  const tree = frame(0, 0, 1248, 220, {}, [card])
+  const out = tightenRoot(tree)
+  assert.equal(out.name, 'card')
+  assert.equal(out.width, 320) // card surface preserved
+  assert.equal(out.height, 180)
+  assert.equal(out.x, 0)
+})
+
+// ─── tightenRoot: edge cases (spec §5) ──────────────────────────────────────
+test('tightenRoot: sole child is TEXT — does not descend into raw text; crops the wrapper to it', () => {
+  const tree = frame(0, 0, 200, 50, { name: 'label-wrap' }, [text(5, 5, 40, 16, 'Hi')])
+  const out = tightenRoot(tree)
+  assert.equal(out.name, 'label-wrap') // kept the wrapper, not the TEXT
+  assert.equal(out.width, 40)
+  assert.equal(out.height, 16)
+  assert.equal(out.children[0].x, 0) // text normalized to origin
+  assert.equal(out.children[0].y, 0)
+})
+
+test('tightenRoot: nothing drawn — returns the tree untouched, no crash', () => {
+  const tree = frame(0, 0, 100, 100, {}, [frame(0, 0, 50, 50)])
+  const out = tightenRoot(tree)
+  assert.equal(out, tree) // unchanged reference
+  assert.equal(out.width, 100)
+})
+
+test('tightenRoot: wrapper with its OWN bound fill stops descent (no lost token surface)', () => {
+  // an Alert/Card whose background is token-bound: selfVisual → keep it
+  const alert = frame(0, 0, 600, 60, { fill: true, name: 'alert' }, [
+    frame(0, 0, 600, 60, {}, [text(12, 20, 200, 18, 'Heads up')]),
+  ])
+  const tree = frame(0, 0, 1248, 60, {}, [alert])
+  const out = tightenRoot(tree)
+  assert.equal(out.name, 'alert')
+  assert.equal(out.width, 600)
+})
+
+test('tightenRoot: null/empty input is safe', () => {
+  assert.equal(tightenRoot(null), null)
+})

package/src/captureCli.js

@@ -7,6 +7,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs'
 import { createHash } from 'crypto'
 import { dirname, resolve, basename, extname } from 'path'
 import { build } from 'esbuild'
+import { tightenRoot } from './capture.js'
 import { buildTokenIndex, annotateTree } from './annotateTokens.js'
 
 // Playwright is an OPTIONAL peer dep — only `capture` needs it, and it pulls a
@@ -159,7 +160,12 @@ export const runCapture = async (opts) => {
         await page.close()
         continue
       }
-      const tree = annotateTree(rawTree, index)
+      // Trim the story container down to the meaningful component BEFORE
+      // annotation/storage so insert + preview get a tight, token-bound node
+      // (sorb-capture-trim-spec.md). Annotation runs on the kept subtree, so
+      // token bindings are unaffected.
+      const tightened = tightenRoot(rawTree)
+      const tree = annotateTree(tightened, index)
       const hash = 'sha256:' + sha256(JSON.stringify(tree))
 
       // --changed: reuse the previous artifact if hash matches