@santi020k/lumen 0.1.0 → 0.2.0

package/README.md

@@ -26,8 +26,13 @@ lumen add Button --target elements
 lumen add scheduler
 lumen add scheduler --target react
 lumen add scheduler --target elements
+lumen audit-tokens ./src
 ```
 
 Use `lumen add <component>` for a local Astro wrapper, `--target react` for a React wrapper, or
 `--target elements` for a custom-elements starter. Bundled recipes support the same Astro, React,
 and Elements targets.
+
+Run `lumen audit-tokens [path]` before incremental adoption when an existing stylesheet may already
+declare names such as `--surface`, `--ink`, or `--line`. The audit reports complete CSS colors that
+are incompatible with Lumen's HSL-channel token format and exits non-zero when it finds conflicts.

package/dist/cli.js

@@ -1,4 +1,7 @@
+import { readdir, readFile, stat } from 'node:fs/promises';
+import { resolve } from 'node:path';
 import { addLumenRegistryItem, getLumenRegistryEntries, getLumenRegistryItem, loadLumenRegistry, lumenRegistry } from './registry.js';
+import { auditLumenTokenCss } from './token-audit.js';
 const args = process.argv.slice(2);
 const [command = 'help', name] = args;
 const dryRun = args.includes('--dry-run');
@@ -83,6 +86,34 @@ const formatAddResult = async (itemName, registry) => {
         ...result.skipped.map(file => `- skipped existing ${file}`)
     ].join('\n');
 };
+const getCssFiles = async (path) => {
+    const details = await stat(path);
+    if (details.isFile())
+        return path.endsWith('.css') ? [path] : [];
+    const entries = await readdir(path, { withFileTypes: true });
+    const nested = await Promise.all(entries
+        .filter(entry => entry.name !== 'node_modules' && !entry.name.startsWith('.'))
+        .map(entry => getCssFiles(resolve(path, entry.name))));
+    return nested.flat();
+};
+const formatTokenAudit = async (inputPath) => {
+    const target = resolve(inputPath);
+    const files = await getCssFiles(target);
+    const findings = [];
+    for (const file of files) {
+        findings.push(...auditLumenTokenCss(await readFile(file, 'utf8'), file));
+    }
+    if (!findings.length)
+        return `No incompatible Lumen semantic token declarations found in ${target}.`;
+    process.exitCode = 1;
+    return [
+        `Found ${findings.length} incompatible Lumen semantic token declaration${findings.length === 1 ? '' : 's'}:`,
+        ...findings.map(finding => (`${finding.file}:${finding.line}:${finding.column} --${finding.token}: ${finding.value}`)),
+        '',
+        'Lumen semantic colors must be HSL channels such as "220 13% 96%", not complete colors such as "#fff" or "hsl(...)".',
+        'Rename legacy variables during incremental migration or convert their values to channels before importing Lumen.'
+    ].join('\n');
+};
 const help = [
     'Lumen registry helper',
     '',
@@ -91,6 +122,7 @@ const help = [
     '  lumen show <name>      Show components and files for an item',
     '  lumen add <name>       Install a recipe or component into the current project',
     '  lumen install          Print install commands',
+    '  lumen audit-tokens     Report incompatible semantic color custom properties',
     '',
     'Options:',
     '  --cwd <path>           Target directory for lumen add',
@@ -103,12 +135,17 @@ const help = [
     '  --target <framework>   Generate wrappers or recipe starters for astro, react, or elements',
     ''
 ].join('\n');
+// eslint-disable-next-line complexity -- Command dispatch keeps CLI exit behavior and output in one place.
 const run = async () => {
     let output = help;
     const registry = registrySource
         ? await loadLumenRegistry(registrySource, registryToken ? { token: registryToken } : {})
         : lumenRegistry;
     switch (command) {
+        case 'audit-tokens': {
+            output = await formatTokenAudit(name ?? cwd ?? process.cwd());
+            break;
+        }
         case 'add': {
             if (name)
                 output = await formatAddResult(name, registry);

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export declare const lumen: {
     readonly packageName: "@santi020k/lumen";
     readonly scope: "@santi020k";
 };
+export { auditLumenTokenCss, type LumenTokenAuditFinding } from './token-audit.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,gBAAgB,EAChB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,cAAc,EACnB,wBAAwB,EACxB,KAAK,kBAAkB,EACvB,WAAW,EACX,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,UAAU,EACV,KAAK,wBAAwB,EAC7B,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,0BAA0B,EAC1B,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,eAAe,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EAChC,4BAA4B,EAC5B,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,gBAAgB,EACrB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAE9B,eAAO,MAAM,KAAK;;;;CAIR,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,gBAAgB,EAChB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,cAAc,EACnB,wBAAwB,EACxB,KAAK,kBAAkB,EACvB,WAAW,EACX,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,UAAU,EACV,KAAK,wBAAwB,EAC7B,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,0BAA0B,EAC1B,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,eAAe,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EAChC,4BAA4B,EAC5B,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,gBAAgB,EACrB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAE9B,eAAO,MAAM,KAAK;;;;CAIR,CAAA;AAEV,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -5,3 +5,4 @@ export const lumen = {
     packageName: '@santi020k/lumen',
     scope: '@santi020k'
 };
+export { auditLumenTokenCss } from './token-audit.js';

package/dist/registry-data.d.ts

@@ -39,7 +39,7 @@ export declare const lumenRegistry: {
     readonly components: readonly [{
         readonly name: "Accordion";
         readonly type: "component";
-        readonly description: "Stacks collapsible content sections.";
+        readonly description: "Stacks collapsible content sections as cards or a compact flush list.";
         readonly category: "Layout";
         readonly files: readonly ["packages/astro/components/Accordion.astro", "packages/astro/styles/lumen.css"];
         readonly dependencies: readonly ["styles"];
@@ -697,19 +697,22 @@ export declare const lumenRegistry: {
         readonly type: "component";
         readonly category: "Data display";
         readonly description: "Animates a formatted metric while keeping one stable accessible value.";
-        readonly files: readonly ["packages/astro/components/AnimatedNumber.astro", "packages/react/src/components.tsx"];
+        readonly files: readonly ["packages/astro/components/AnimatedNumber.astro", "packages/astro/runtime/UIPrimitives.astro", "packages/astro/styles/lumen.css", "packages/react/src/components.tsx"];
+        readonly dependencies: readonly ["styles", "runtime"];
     }, {
         readonly name: "RevealGroup";
         readonly type: "component";
         readonly category: "Layout";
         readonly description: "Reveals a group of direct children with tokenized, reduced-motion-aware staggering.";
-        readonly files: readonly ["packages/astro/components/RevealGroup.astro", "packages/react/src/components.tsx"];
+        readonly files: readonly ["packages/astro/components/RevealGroup.astro", "packages/astro/runtime/UIPrimitives.astro", "packages/astro/styles/lumen.css", "packages/react/src/components.tsx"];
+        readonly dependencies: readonly ["styles", "runtime"];
     }, {
         readonly name: "ScrollReveal";
         readonly type: "component";
         readonly category: "Layout";
-        readonly description: "A Scroll Reveal component.";
-        readonly files: readonly ["packages/astro/components/ScrollReveal.astro", "packages/react/src/components.tsx"];
+        readonly description: "Animates wrapped content as it first enters the viewport.";
+        readonly files: readonly ["packages/astro/components/ScrollReveal.astro", "packages/astro/runtime/UIPrimitives.astro", "packages/astro/styles/lumen.css", "packages/react/src/components.tsx"];
+        readonly dependencies: readonly ["styles", "runtime"];
     }, {
         readonly name: "Stat";
         readonly type: "component";

package/dist/registry-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry-data.d.ts","sourceRoot":"","sources":["../src/registry-data.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuqDQ,CAAA"}
+{"version":3,"file":"registry-data.d.ts","sourceRoot":"","sources":["../src/registry-data.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyrDQ,CAAA"}

package/dist/registry-data.js

@@ -98,7 +98,7 @@ export const lumenRegistry = {
         {
             "name": "Accordion",
             "type": "component",
-            "description": "Stacks collapsible content sections.",
+            "description": "Stacks collapsible content sections as cards or a compact flush list.",
             "category": "Layout",
             "files": [
                 "packages/astro/components/Accordion.astro",
@@ -1417,7 +1417,13 @@ export const lumenRegistry = {
             "description": "Animates a formatted metric while keeping one stable accessible value.",
             "files": [
                 "packages/astro/components/AnimatedNumber.astro",
+                "packages/astro/runtime/UIPrimitives.astro",
+                "packages/astro/styles/lumen.css",
                 "packages/react/src/components.tsx"
+            ],
+            "dependencies": [
+                "styles",
+                "runtime"
             ]
         },
         {
@@ -1427,17 +1433,29 @@ export const lumenRegistry = {
             "description": "Reveals a group of direct children with tokenized, reduced-motion-aware staggering.",
             "files": [
                 "packages/astro/components/RevealGroup.astro",
+                "packages/astro/runtime/UIPrimitives.astro",
+                "packages/astro/styles/lumen.css",
                 "packages/react/src/components.tsx"
+            ],
+            "dependencies": [
+                "styles",
+                "runtime"
             ]
         },
         {
             "name": "ScrollReveal",
             "type": "component",
             "category": "Layout",
-            "description": "A Scroll Reveal component.",
+            "description": "Animates wrapped content as it first enters the viewport.",
             "files": [
                 "packages/astro/components/ScrollReveal.astro",
+                "packages/astro/runtime/UIPrimitives.astro",
+                "packages/astro/styles/lumen.css",
                 "packages/react/src/components.tsx"
+            ],
+            "dependencies": [
+                "styles",
+                "runtime"
             ]
         },
         {

package/dist/token-audit.d.ts

@@ -0,0 +1,9 @@
+export interface LumenTokenAuditFinding {
+    column: number;
+    file: string;
+    line: number;
+    token: string;
+    value: string;
+}
+export declare const auditLumenTokenCss: (source: string, file?: string) => LumenTokenAuditFinding[];
+//# sourceMappingURL=token-audit.d.ts.map

package/dist/token-audit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-audit.d.ts","sourceRoot":"","sources":["../src/token-audit.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAMD,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,aAAgB,KAAG,sBAAsB,EAwB3F,CAAA"}

package/dist/token-audit.js

@@ -0,0 +1,25 @@
+import { lumenSemanticColorTokenNames } from '@santi020k/lumen-core';
+const declarationPattern = /--([a-z][\w-]*)\s*:\s*([^;}\n]+)/giu;
+const channelPattern = /^(?:var\(.+\)|-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|grad|rad|turn)?\s+-?(?:\d+(?:\.\d+)?|\.\d+)%\s+-?(?:\d+(?:\.\d+)?|\.\d+)%(?:\s*\/\s*(?:\d+(?:\.\d+)?|\.\d+)%?)?)$/iu;
+const semanticTokens = new Set(lumenSemanticColorTokenNames);
+export const auditLumenTokenCss = (source, file = '<input>') => {
+    const findings = [];
+    for (const match of source.matchAll(declarationPattern)) {
+        const token = match[1];
+        const value = match[2]?.trim();
+        if (!token || !value || !semanticTokens.has(token) || channelPattern.test(value))
+            continue;
+        const index = match.index;
+        const before = source.slice(0, index);
+        const line = before.split('\n').length;
+        const lineStart = before.lastIndexOf('\n') + 1;
+        findings.push({
+            column: index - lineStart + 1,
+            file,
+            line,
+            token,
+            value
+        });
+    }
+    return findings;
+};

package/layers.css

@@ -0,0 +1,5 @@
+/*
+ * Import before Tailwind and Lumen so Tailwind base styles run before Lumen components while
+ * Tailwind utilities remain able to override component presentation.
+ */
+@layer theme, base, lumen.tokens, lumen.base, components, lumen.components, lumen.glass, utilities;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@santi020k/lumen",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "Umbrella package for the Lumen multi-framework primitive UI system.",
   "type": "module",
   "sideEffects": [
+    "./layers.css",
     "./styles.css"
   ],
   "main": "./dist/index.js",
@@ -22,11 +23,13 @@
       "import": "./dist/registry.js"
     },
     "./styles.css": "./styles.css",
+    "./layers.css": "./layers.css",
     "./package.json": "./package.json"
   },
   "files": [
     "bin",
     "dist",
+    "layers.css",
     "styles.css",
     "README.md",
     "LICENSE"
@@ -35,16 +38,17 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen-core": "^0.1.0"
+    "@santi020k/lumen-core": "^0.2.0"
   },
   "devDependencies": {
     "@types/node": "^26.1.1",
     "@vitest/coverage-v8": "^4.1.10",
     "typescript": "^6.0.3",
+    "tailwindcss": "^4.3.3",
     "vitest": "^4.1.10"
   },
   "engines": {
-    "node": ">=22.18.0"
+    "node": ">=22.12.0"
   },
   "repository": {
     "type": "git",

package/styles.css

@@ -623,6 +623,11 @@
   background: hsl(var(--surface-muted) / 0.72);
 }
 
+.ui-card--unstyled,
+.ui-button-link--unstyled {
+  all: revert-layer;
+}
+
 .ui-card--glass.ui-card--interactive:hover,
 .ui-card--glass.card-interactive:hover {
   border-color: hsl(var(--glass-edge));
@@ -881,6 +886,15 @@
   color: hsl(var(--brand-solid));
 }
 
+.ui-link--inherit {
+  color: inherit;
+  font-weight: inherit;
+}
+
+.ui-link--inherit:hover {
+  color: inherit;
+}
+
 .ui-prose {
   max-width: 65ch;
   color: hsl(var(--ink-soft));
@@ -1714,13 +1728,64 @@
   padding: 0.85rem 1rem;
 }
 
+.ui-accordion--flush {
+  gap: 0;
+  border-top: 1px solid hsl(var(--line));
+}
+
+.ui-accordion--flush details {
+  border: 0;
+  border-bottom: 1px solid hsl(var(--line));
+  border-radius: 0;
+  background: transparent;
+  padding: 1.25rem 0;
+}
+
 .ui-accordion summary,
 .ui-collapsible summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
   cursor: pointer;
+  list-style: none;
   color: hsl(var(--ink));
   font-weight: 650;
 }
 
+.ui-accordion summary::-webkit-details-marker,
+.ui-collapsible summary::-webkit-details-marker {
+  display: none;
+}
+
+.ui-accordion summary::after,
+.ui-collapsible summary::after {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 1.5px solid hsl(var(--ink-muted));
+  border-bottom: 1.5px solid hsl(var(--ink-muted));
+  content: "";
+  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
+  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
+}
+
+.ui-accordion details[open] > summary::after,
+.ui-collapsible[open] > summary::after {
+  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
+}
+
+.ui-accordion summary:hover::after,
+.ui-collapsible summary:hover::after {
+  border-color: hsl(var(--brand));
+}
+
+.ui-accordion summary:focus-visible,
+.ui-collapsible summary:focus-visible {
+  border-radius: calc(var(--ui-radius) * 0.6);
+  outline: 2px solid hsl(var(--brand));
+  outline-offset: 0.35rem;
+}
+
 .ui-accordion p,
 .ui-collapsible p {
   margin-block-end: 0;
@@ -1944,6 +2009,19 @@
   color: hsl(var(--ink));
 }
 
+.ui-navigation-menu--unstyled {
+  all: revert-layer;
+}
+
+.ui-navigation-menu--unstyled :where(a, button) {
+  all: revert-layer;
+}
+
+.ui-navigation-menu--unstyled :where(a, button):hover,
+.ui-navigation-menu--unstyled :where(a, button)[aria-current="page"] {
+  all: revert-layer;
+}
+
 .ui-breadcrumb {
   color: hsl(var(--ink-muted));
   font-size: 0.875rem;
@@ -2314,6 +2392,16 @@
   color: hsl(var(--brand-solid));
 }
 
+.ui-sidebar--unstyled {
+  all: revert-layer;
+}
+
+.ui-sidebar--unstyled a,
+.ui-sidebar--unstyled a:hover,
+.ui-sidebar--unstyled a[aria-current="page"] {
+  all: revert-layer;
+}
+
 .ui-empty {
   display: grid;
   place-items: center;
@@ -2452,6 +2540,9 @@
 .ui-code--block {
   position: relative;
   overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   margin: 0;
   border: 1px solid var(--ui-code-border);
   border-radius: var(--ui-radius-lg);
@@ -2601,6 +2692,16 @@
   white-space: pre;
 }
 
+.ui-code--wrap :where(pre) {
+  overflow-x: hidden;
+}
+
+.ui-code--wrap :where(code) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
 .ui-code--block :where(code span) {
   color: var(--shiki-light, var(--ui-code-token, var(--ui-code-fg)));
   font-style: var(--shiki-light-font-style, var(--ui-code-token-font-style, normal));
@@ -4584,6 +4685,16 @@
   font-variant-numeric: tabular-nums;
 }
 
+a.ui-pill {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+a.ui-pill:hover {
+  border-color: hsl(var(--brand) / 0.42);
+  color: hsl(var(--brand-solid));
+}
+
 /* CoverImage hover lift + bottom gradient overlay */
 .ui-cover-image--hover {
   transition: transform 300ms ease;