@spectrabrain/eds 0.3.0 → 0.4.0

package/consumer/cli.mjs

@@ -8,13 +8,13 @@ const usage = [
   "Usage: eds <command> [options]",
   "",
   "Commands:",
-  "  init      Register sync:eds and eds:doctor, plus pretypecheck/prebuild (eds doctor) when typecheck/build exist,",
-  "            write allowScripts on npm 12+, then run sync. Run it in the package that declares @spectrabrain/eds",
+  "  init      Add sync:eds and eds:doctor when missing; add pretypecheck/prebuild when target scripts exist",
+  "            and hooks are missing; write allowScripts on npm 12+, then sync in the package declaring @spectrabrain/eds",
   "  sync      Generate src/styles/eds-tokens.css, wire the Tailwind root CSS and update AGENTS.md",
   "            and the @AGENTS.md import in CLAUDE.md (or .claude/CLAUDE.md) and GEMINI.md when they exist",
   "            (without a Tailwind root only those change); notes say when an agent may not load the block",
-  "  doctor    Check whether sync is up to date, the EDS font is imported and every eds-* class in the sources",
-  "            is a public token (exit 1 when something is off)",
+  "  doctor    Check sync status and the EDS font import; with a Tailwind CSS v4 root, also check that each eds-*",
+  "            class in the sources is a public token (exit 1 when something is off)",
   "  align     One-time reorganization of a Vite + React frontend into the EVA conventions (FRONTEND_CONVENTIONS.md):",
   "            write .eds/align/PLAN.md, the steps an AI agent follows, plus templates; source files are not changed",
   "",
@@ -25,9 +25,9 @@ const usage = [
   "  --no-allow-scripts         init: do not write allowScripts to package.json on npm 12+",
   "  --print-ci github|gitlab   init: print a CI job that runs eds doctor with this repository's package manager",
   "  --warn                     doctor: report findings but exit 0 (same as EDS_DOCTOR=warn)",
-  "  --scan                     doctor: also list Tailwind palette and arbitrary color classes that bypass the EDS tokens",
-  "  --check                    align: check the conventions and that no backend or out-of-package file changed since",
-  "                             the plan's base commit (exit 1 when something is off)",
+  "  --scan                     doctor: with a Tailwind CSS v4 root, also list palette and arbitrary color classes that bypass EDS tokens",
+  "  --check                    align: check conventions and protected, preserved and out-of-package files",
+  "                             since the plan's base commit; repository root lockfiles are excluded (exit 1 on error)",
   "  --frontend <dir>           align: the frontend package when the current directory is not it",
   "  --help                     Show this message",
   "",

package/consumer/generate-tailwind.mjs

@@ -11,10 +11,6 @@ const propertyNames = [
 
 export const fontSansStyleName = "body1";
 
-function safeTailwindAlias(name) {
-  return "eds-" + name.replace(/\./g, "-");
-}
-
 function cssVariableForToken(manifest, name) {
   const cssVariable = manifest.tokens?.[name]?.$extensions?.eds?.cssVariable;
   if (typeof cssVariable === "string") {
@@ -24,27 +20,9 @@ function cssVariableForToken(manifest, name) {
   return "--eds-" + name.replace(/\./g, "\\.");
 }
 
-function collectDimensionAliases(manifest, prefix) {
-  const aliases = new Map();
-
-  for (const name of Object.keys(manifest.tokens ?? {}).filter((entry) => entry.startsWith(prefix))) {
-    const alias = safeTailwindAlias(name);
-    const existing = aliases.get(alias);
-    if (existing !== undefined && existing !== name) {
-      throw new Error(`Tailwind alias collision: ${existing} and ${name} both map to ${alias}.`);
-    }
-
-    aliases.set(alias, name);
-  }
-
-  return [...aliases.entries()].sort(([left], [right]) => left.localeCompare(right));
-}
-
 export function renderTailwindCss(manifest, version) {
   const tokens = Object.keys(manifest.tokens ?? {});
   const colorNames = tokens.filter((name) => name.startsWith("color-"));
-  const spacingAliases = collectDimensionAliases(manifest, "spacing-");
-  const radiusAliases = collectDimensionAliases(manifest, "radius-");
   const typography = new Map();
 
   for (const name of tokens.filter((entry) => entry.startsWith("typography-"))) {
@@ -74,12 +52,6 @@ export function renderTailwindCss(manifest, version) {
   const colorAliases = colorNames
     .map((name) => `  --color-eds-${name.slice("color-".length)}: var(${cssVariableForToken(manifest, name)});`)
     .join("\n");
-  const spacingThemeAliases = spacingAliases
-    .map(([alias, name]) => `  --spacing-${alias}: var(${cssVariableForToken(manifest, name)});`)
-    .join("\n");
-  const radiusThemeAliases = radiusAliases
-    .map(([alias, name]) => `  --radius-${alias}: var(${cssVariableForToken(manifest, name)});`)
-    .join("\n");
   // Last line of the @theme block: Tailwind's default font family becomes the EDS body font.
   const fontSans = `  --font-sans: var(--eds-typography-${fontSansStyleName}-fontFamily);`;
   const typographyUtilities = [...typography.keys()].sort().map((styleName) => [
@@ -96,8 +68,6 @@ export function renderTailwindCss(manifest, version) {
     `/* Generated from @spectrabrain/eds@${version}. Do not edit manually. */`,
     "@theme inline {",
     colorAliases,
-    spacingThemeAliases,
-    radiusThemeAliases,
     fontSans,
     "}",
     "",

package/consumer/scan-classes.mjs

@@ -10,9 +10,10 @@ const opacity = "(?:/[0-9]{1,3})?";
 
 const edsColorClass = new RegExp(boundaryBefore + variantPrefix + colorUtility + "-eds-([A-Za-z0-9-]+)" + opacity + boundaryAfter, "g");
 const edsTypographyClass = new RegExp(boundaryBefore + variantPrefix + "eds-typography-([A-Za-z0-9-]+)" + boundaryAfter, "g");
-const dimensionUtility = "(?:p|px|py|ps|pe|pt|pr|pb|pl|m|mx|my|ms|me|mt|mr|mb|ml|gap|gap-x|gap-y|space-x|space-y|inset|inset-x|inset-y|start|end|top|right|bottom|left|w|min-w|max-w|h|min-h|max-h|size|basis|scroll-m|scroll-p)";
-const edsSpacingClass = new RegExp(boundaryBefore + variantPrefix + dimensionUtility + "-eds-(spacing-[A-Za-z0-9-]+)" + boundaryAfter, "g");
-const edsRadiusClass = new RegExp(boundaryBefore + variantPrefix + "rounded(?:-(?:s|e|t|r|b|l|ss|se|ee|es|tl|tr|br|bl))?-eds-(radius-[A-Za-z0-9-]+)" + boundaryAfter, "g");
+const retiredDimensionClass = new RegExp(
+  boundaryBefore + variantPrefix + "-?[A-Za-z0-9-]+-eds-(?:spacing|radius)-[A-Za-z0-9-]+" + boundaryAfter,
+  "g",
+);
 const rawColorClass = new RegExp(
   boundaryBefore + variantPrefix + colorUtility +
     "-(?:(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[0-9]{2,3}|white|black|\\[(?:#|rgba?\\(|hsla?\\(|oklch\\(|oklab\\(|color\\()[^\\]]*\\])" +
@@ -20,11 +21,10 @@ const rawColorClass = new RegExp(
   "g",
 );
 
-// The public class names are derived exactly like eds sync derives the Tailwind aliases from tokens.json.
+// EDS publishes color and typography utilities. Spacing and radius use Tailwind CSS v4 defaults.
 export function publicClassNames(manifest) {
   const colors = new Set();
   const typography = new Set();
-  const dimensions = new Set();
   for (const name of Object.keys(manifest.tokens ?? {})) {
     if (name.startsWith("color-")) {
       colors.add("eds-" + name.slice("color-".length));
@@ -35,18 +35,15 @@ export function publicClassNames(manifest) {
       typography.add(match[1]);
       continue;
     }
-    if (name.startsWith("spacing-") || name.startsWith("radius-")) {
-      dimensions.add("eds-" + name.replace(/\./g, "-"));
-    }
   }
-  return { colors, typography, dimensions };
+  return { colors, typography };
 }
 
 // files: [{ path, contents }] as readSources() lists them (the generated eds-tokens.css is not among them).
 // unknown: eds-* classes that no public token backs (always a mistake, Tailwind silently drops them).
 // raw: Tailwind palette, white/black and arbitrary color classes that bypass the EDS tokens (informational).
 export function scanClassNames({ consumerRoot, manifest, files }) {
-  const { colors, typography, dimensions } = publicClassNames(manifest);
+  const { colors, typography } = publicClassNames(manifest);
   const unknown = [];
   const raw = [];
   for (const file of files) {
@@ -70,15 +67,8 @@ export function scanClassNames({ consumerRoot, manifest, files }) {
           unknown.push({ location, className: match[0] });
         }
       }
-      for (const match of line.matchAll(edsSpacingClass)) {
-        if (match[1] !== undefined && !dimensions.has("eds-" + match[1])) {
-          unknown.push({ location, className: match[0] });
-        }
-      }
-      for (const match of line.matchAll(edsRadiusClass)) {
-        if (match[1] !== undefined && !dimensions.has("eds-" + match[1])) {
-          unknown.push({ location, className: match[0] });
-        }
+      for (const match of line.matchAll(retiredDimensionClass)) {
+        unknown.push({ location, className: match[0] });
       }
       for (const match of line.matchAll(rawColorClass)) {
         raw.push({ location, className: match[0] });

package/dist/components/Button/README.md

@@ -65,10 +65,8 @@ Layout은 prop으로 지정하지 않고 슬롯 조합에서 추론합니다.
 | `iconBoth` | `children`과 앞·뒤 아이콘을 모두 지정합니다. | 양쪽 아이콘이 모두 의미를 더하는 명확한 경우에만 사용합니다. |
 | `iconOnly` | `children` 없이 `icon` 또는 `iconName`과 `aria-label`을 지정합니다. | |
 
-- 이름 슬롯(`iconName`·`startIconName`·`endIconName`)은 승인된 아이콘 목록의 lucide PascalCase 전체 이름만 받습니다. `ButtonIconName`이 이 목록과 같은 union이라 목록에 없는 이름은 TypeScript 오류이고, 런타임에 전달되면 render 오류입니다. 전체 목록은 설치된 패키지 `spec.json`의 `api.iconNames`에 있습니다.
-- 목록은 `lucide-react`의 canonical 이름만 포함하며 `AlertCircle`처럼 deprecated된 alias는 허용하지 않습니다.
-- 목록 밖 아이콘은 `icon`, `startIcon`, `endIcon`에 `ReactElement`로 전달하며, 같은 슬롯에 이름과 custom element를 함께 지정하지 않습니다. `lucide-react`에서 직접 import할 때는 EDS package root `package.json`의 `dependencies["lucide-react"]`와 같은 exact 버전을 소비처 `package.json`에 선언합니다. pnpm처럼 엄격한 node_modules에서는 선언 없이 resolve되지 않고, 버전이 다르면 아이콘 코드가 두 벌 번들됩니다. custom lucide 아이콘은 lucide 기본 stroke를 그대로 써서 이름으로 지정한 아이콘과 맞춥니다.
-- 목록 밖 아이콘을 `ReactElement`로 썼다면 완료 보고에 아이콘 이름과 사용 파일을 allowlist 추가 후보로 적습니다.
+- 이름 슬롯(`iconName`·`startIconName`·`endIconName`)은 설치된 `lucide-react`의 실제 아이콘 component 이름과 alias를 모두 받습니다. `ButtonIconName`이 이 목록을 자동완성하며, 전체 이름은 `spec.json`의 `api.iconNames`에 있습니다. 잘못된 이름은 TypeScript 오류이고 런타임에도 render 오류입니다.
+- custom 아이콘은 `icon`·`startIcon`·`endIcon`에 `ReactElement`로 전달합니다. 같은 슬롯에 이름과 custom element를 함께 지정하지 않습니다. `lucide-react`에서 직접 import할 때는 EDS package root `package.json`의 `dependencies["lucide-react"]`와 같은 exact 버전을 소비처 `package.json`에 선언합니다. pnpm처럼 엄격한 node_modules에서는 선언 없이 resolve되지 않고, 버전이 다르면 아이콘 코드가 두 벌 번들됩니다. 이름 슬롯은 설치된 아이콘 크기와 stroke를 사용합니다.
 
 ### State
 
@@ -109,7 +107,7 @@ Layout은 prop으로 지정하지 않고 슬롯 조합에서 추론합니다.
 | `aria-label` | 선택적인 `string`이며, 지정하면 비어 있지 않아야 합니다. icon-only에서는 항상 지정합니다. |
 | `disabled` | `boolean`입니다. native button은 `disabled`, link는 href 제거·`aria-disabled="true"`·`tabIndex={-1}`를 적용합니다. |
 | `loading` | `boolean`입니다. label·아이콘 공간을 유지한 progress circle을 표시하고 상호작용을 차단하며 `aria-busy="true"`를 적용합니다. |
-| `className` | `string`입니다. 허용 범위는 `QUICKSTART.md` 규칙 5를 따릅니다. |
+| `className` | `string`입니다. 허용 범위는 `QUICKSTART.md`의 `className` 규칙을 따릅니다. |
 | `style` | 지원하지 않습니다(`never`). 스타일 override는 공개 API가 아닙니다. |
 | `aria-*` / `data-*` | 각 branch의 native HTML 속성으로 전달할 수 있습니다. |
 | `ref` | branch에 따라 `HTMLButtonElement` 또는 `HTMLAnchorElement`를 전달합니다. |