@rdna/radiants 0.1.1 → 0.1.3

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@rdna/radiants",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Radiants theme package for DNA - retro pixel aesthetic",
-  "main": "./index.css",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+  "publishConfig": {
+    "access": "public"
   },
+  "main": "./index.css",
   "exports": {
     ".": "./index.css",
     "./tokens": "./tokens.css",
@@ -15,38 +14,52 @@
     "./base": "./base.css",
     "./typography": "./typography.css",
     "./fonts": "./fonts.css",
-    "./components/core": {
-      "types": "./dist/components/core/index.d.mts",
-      "import": "./dist/components/core/index.mjs",
-      "default": "./dist/components/core/index.mjs"
+    "./components/core": "./components/core/index.ts",
+    "./icons": {
+      "types": "./icons/index.ts",
+      "import": "./icons/index.ts"
+    },
+    "./icons/runtime": {
+      "types": "./icons/runtime.ts",
+      "import": "./icons/runtime.ts"
     },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.mts",
-      "import": "./dist/hooks/index.mjs",
-      "default": "./dist/hooks/index.mjs"
+    "./schemas": {
+      "types": "./schemas/index.ts",
+      "import": "./schemas/index.ts"
     },
-    "./remotion": {
-      "types": "./dist/remotion/index.d.mts",
-      "import": "./dist/remotion/index.mjs",
-      "default": "./dist/remotion/index.mjs"
+    "./eslint": {
+      "import": "./eslint/index.mjs"
     },
-    "./components/core/*/schema": "./components/core/*/*.schema.json",
-    "./components/core/*/dna": "./components/core/*/*.dna.json"
+    "./registry": {
+      "types": "./registry/index.ts",
+      "import": "./registry/index.ts"
+    },
+    "./meta": {
+      "types": "./meta/index.ts",
+      "import": "./meta/index.ts"
+    },
+    "./patterns": {
+      "types": "./patterns/index.ts",
+      "import": "./patterns/index.ts"
+    }
   },
   "files": [
-    "dist",
     "*.css",
-    "components/**/*.schema.json",
-    "components/**/*.dna.json",
+    "components/",
+    "icons/",
+    "schemas/",
     "fonts/Joystix.woff2",
     "fonts/PixelCode*.woff2",
     "assets/",
     "dna.config.json",
     "LICENSE",
-    "README.md"
-  ],
-  "sideEffects": [
-    "*.css"
+    "README.md",
+    "eslint/",
+    "generated/",
+    "contract/",
+    "registry/",
+    "patterns/",
+    "meta/"
   ],
   "repository": {
     "type": "git",
@@ -60,13 +73,9 @@
   "peerDependencies": {
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "remotion": "^4.0.0",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
-    "remotion": {
-      "optional": true
-    },
     "next": {
       "optional": true
     }
@@ -82,11 +91,36 @@
     "components"
   ],
   "license": "GPL-3.0",
+  "scripts": {
+    "generate:icons": "node --experimental-strip-types scripts/generate-icons.ts",
+    "generate:schemas": "node --experimental-strip-types ../preview/src/generate-schemas.ts ./components/core ./meta/index.ts ./schemas/index.ts",
+    "generate:figma-contracts": "node --experimental-strip-types scripts/generate-figma-contracts.ts",
+    "generate:pixel-corners": "node scripts/generate-pixel-corners.mjs",
+    "test": "vitest run",
+    "test:ci": "vitest run",
+    "test:components": "vitest run",
+    "test:components:watch": "vitest"
+  },
   "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "next": "16.0.10",
-    "remotion": "^4.0.409",
-    "tsup": "^8.5.1"
+    "@rdna/preview": "workspace:*",
+    "culori": "^4.0.2",
+    "eslint": "^9",
+    "jsdom": "^28.1.0",
+    "next": "16.1.6",
+    "svgo": "^4.0.1",
+    "vitest": "^2.1.9"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "dialkit": "^1.1.0",
+    "motion": "^12.38.0"
   }
 }

package/pattern-shadows.css

@@ -0,0 +1,137 @@
+/* =============================================================================
+   @rdna/radiants — Pattern-Based Shadow Elevation
+   Replaces box-shadow with dither-pattern ::after pseudo-elements in light mode.
+   Dark mode suppresses these entirely (glow system takes over in dark.css).
+   All patterns rendered at 2x (16px) — 1x is too fine for shadows.
+
+   Elevation scale mirrors tokens.css shadow-* tokens:
+     surface  — 1px straight down   (sparse: spray-grid ~12%)
+     resting  — 2px straight down   (medium: checkerboard 50%)
+     raised   — 2px diagonal         (dense: fill-75 75%)
+     floating — 4px diagonal         (very dense: fill-88 88%)
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   Surface — subtle bottom edge, sparse stipple
+   -------------------------------------------------------------------------- */
+
+.pat-shadow-surface {
+  position: relative;
+}
+
+.pat-shadow-surface::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: -1px;
+  left: 0;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-mask-image: var(--pat-spray-grid);
+  mask-image: var(--pat-spray-grid);
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  background-color: var(--color-shadow-pat);
+}
+
+/* -----------------------------------------------------------------------------
+   Resting — 2px bottom edge, medium density checkerboard
+   -------------------------------------------------------------------------- */
+
+.pat-shadow-resting {
+  position: relative;
+}
+
+.pat-shadow-resting::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-mask-image: var(--pat-checkerboard);
+  mask-image: var(--pat-checkerboard);
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  background-color: var(--color-shadow-pat);
+}
+
+/* -----------------------------------------------------------------------------
+   Raised — 2px diagonal offset (classic retro drop shadow)
+   The ::after is a full copy shifted 2px right / 2px down.
+   The element itself (z-index above) covers the overlapping area,
+   leaving only the bottom-right L-shaped shadow visible.
+   -------------------------------------------------------------------------- */
+
+.pat-shadow-raised {
+  position: relative;
+}
+
+.pat-shadow-raised::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-mask-image: var(--pat-fill-75);
+  mask-image: var(--pat-fill-75);
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  background-color: var(--color-shadow-pat);
+}
+
+/* -----------------------------------------------------------------------------
+   Floating — 4px diagonal offset (large retro drop shadow)
+   Same shifted-copy technique as raised, with greater offset.
+   -------------------------------------------------------------------------- */
+
+.pat-shadow-floating {
+  position: relative;
+}
+
+.pat-shadow-floating::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-mask-image: var(--pat-fill-88);
+  mask-image: var(--pat-fill-88);
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  background-color: var(--color-shadow-pat);
+}
+
+/* =============================================================================
+   Dark mode suppression
+   Pattern shadows are a light-mode-only effect. In dark mode the glow system
+   defined in dark.css handles elevation instead.
+   ============================================================================= */
+
+.dark .pat-shadow-surface::after,
+.dark .pat-shadow-resting::after,
+.dark .pat-shadow-raised::after,
+.dark .pat-shadow-floating::after {
+  display: none;
+}

package/patterns/index.ts

@@ -0,0 +1,28 @@
+export type { PatternEntry, PatternGroup } from './types';
+export { patternRegistry } from './registry';
+
+import type { PatternGroup } from './types';
+import { patternRegistry } from './registry';
+
+/** Lookup helpers */
+export const getPatternByName = (name: string) =>
+  patternRegistry.find(p => p.name === name);
+
+export const getPatternsByGroup = (group: PatternGroup) =>
+  patternRegistry.filter(p => p.group === group);
+
+export const getPatternsByDensity = (min: number, max: number) =>
+  patternRegistry.filter(p => p.fill >= min && p.fill <= max);
+
+/** All pattern names as a union type */
+export type PatternName = typeof patternRegistry[number]['name'];
+
+/** All group labels */
+export const PATTERN_GROUPS: { key: PatternGroup; label: string; desc: string }[] = [
+  { key: 'structural', label: 'Structural',       desc: 'Lines, stripes, checks' },
+  { key: 'diagonal',   label: 'Diagonal',         desc: 'Angled lines and dotted diagonals' },
+  { key: 'grid',       label: 'Grid & Lattice',   desc: 'Crosshatch, brick, columns' },
+  { key: 'figurative', label: 'Figurative',       desc: 'Shapes, waves, textures' },
+  { key: 'scatter',    label: 'Scatter / Stipple', desc: 'Sparse dot patterns (2%–12%)' },
+  { key: 'heavy',      label: 'Heavy Fill',       desc: 'Dense patterns (75%–97%)' },
+];

package/patterns/registry.ts

@@ -0,0 +1,66 @@
+import type { PatternEntry } from './types';
+
+export const patternRegistry: PatternEntry[] = [
+  // ── Structural (8) ──────────────────────────────────────────────
+  { name: 'solid',             group: 'structural', fill: 100, hex: 'FF FF FF FF FF FF FF FF', token: '--pat-solid',             legacyName: 'solid' },
+  { name: 'empty',             group: 'structural', fill: 0,   hex: '00 00 00 00 00 00 00 00', token: '--pat-empty',             legacyName: 'empty' },
+  { name: 'checkerboard',      group: 'structural', fill: 50,  hex: 'AA 55 AA 55 AA 55 AA 55', token: '--pat-checkerboard',      legacyName: 'checker-32' },
+  { name: 'checkerboard-alt',  group: 'structural', fill: 50,  hex: '55 AA 55 AA 55 AA 55 AA', token: '--pat-checkerboard-alt',  legacyName: 'checker-32-2' },
+  { name: 'pinstripe-v',       group: 'structural', fill: 50,  hex: 'AA AA AA AA AA AA AA AA', token: '--pat-pinstripe-v',       legacyName: 'vlines-4' },
+  { name: 'pinstripe-v-wide',  group: 'structural', fill: 25,  hex: '88 88 88 88 88 88 88 88', token: '--pat-pinstripe-v-wide',  legacyName: 'vlines-2' },
+  { name: 'pinstripe-h',       group: 'structural', fill: 50,  hex: 'FF 00 FF 00 FF 00 FF 00', token: '--pat-pinstripe-h',       legacyName: 'hlines-4' },
+  { name: 'pinstripe-h-wide',  group: 'structural', fill: 25,  hex: 'FF 00 00 00 FF 00 00 00', token: '--pat-pinstripe-h-wide',  legacyName: 'hlines-2' },
+
+  // ── Diagonal (3) ────────────────────────────────────────────────
+  { name: 'diagonal',          group: 'diagonal',   fill: 12,  hex: '01 02 04 08 10 20 40 80', token: '--pat-diagonal',          legacyName: 'diagonal-left' },
+  { name: 'diagonal-dots',     group: 'diagonal',   fill: 25,  hex: '88 22 88 22 88 22 88 22', token: '--pat-diagonal-dots',     legacyName: 'light-16-2' },
+  { name: 'diagonal-right',    group: 'diagonal',   fill: 25,  hex: '11 22 44 88 11 22 44 88', token: '--pat-diagonal-right',    legacyName: 'light-16-4' },
+
+  // ── Grid & Lattice (5) ──────────────────────────────────────────
+  { name: 'grid',              group: 'grid',       fill: 44,  hex: 'FF 88 88 88 FF 88 88 88', token: '--pat-grid',              legacyName: 'medium-28' },
+  { name: 'brick',             group: 'grid',       fill: 34,  hex: 'FF 80 80 80 FF 08 08 08', token: '--pat-brick',             legacyName: 'light-22' },
+  { name: 'shelf',             group: 'grid',       fill: 23,  hex: 'FF 80 80 80 80 80 80 80', token: '--pat-shelf',             legacyName: 'light-15-2' },
+  { name: 'columns',           group: 'grid',       fill: 25,  hex: 'AA 00 AA 00 AA 00 AA 00', token: '--pat-columns',           legacyName: 'light-16-3' },
+  { name: 'stagger',           group: 'grid',       fill: 25,  hex: '44 11 44 11 44 11 44 11', token: '--pat-stagger',           legacyName: 'light-16-6' },
+
+  // ── Figurative (13) ─────────────────────────────────────────────
+  { name: 'diamond',           group: 'figurative', fill: 25,  hex: '00 08 14 2A 55 2A 14 08', token: '--pat-diamond',           legacyName: 'light-16-5' },
+  { name: 'confetti',          group: 'figurative', fill: 38,  hex: 'B1 30 03 1B D8 C0 0C 8D', token: '--pat-confetti',          legacyName: 'medium-24' },
+  { name: 'weave',             group: 'figurative', fill: 47,  hex: 'F8 74 22 47 8F 17 22 71', token: '--pat-weave',             legacyName: 'medium-30' },
+  { name: 'brick-diagonal',    group: 'figurative', fill: 20,  hex: '08 1C 22 C1 80 01 02 04', token: '--pat-brick-diagonal',    legacyName: 'light-13' },
+  { name: 'brick-diagonal-alt',group: 'figurative', fill: 20,  hex: '03 84 48 30 0C 02 01 01', token: '--pat-brick-diagonal-alt',legacyName: 'light-13-2' },
+  { name: 'caret',             group: 'figurative', fill: 23,  hex: '82 44 39 44 82 01 01 01', token: '--pat-caret',             legacyName: 'light-15' },
+  { name: 'trellis',           group: 'figurative', fill: 25,  hex: '55 A0 40 40 55 0A 04 04', token: '--pat-trellis',           legacyName: 'light-16' },
+  { name: 'arch',              group: 'figurative', fill: 22,  hex: '20 50 88 88 88 88 05 02', token: '--pat-arch',              legacyName: 'light-14' },
+  { name: 'cross',             group: 'figurative', fill: 22,  hex: '88 14 22 41 88 00 AA 00', token: '--pat-cross',             legacyName: 'light-14-2' },
+  { name: 'sawtooth',          group: 'figurative', fill: 28,  hex: '80 80 41 3E 08 08 14 E3', token: '--pat-sawtooth',          legacyName: 'light-18' },
+  { name: 'chevron',           group: 'figurative', fill: 31,  hex: '10 20 54 AA FF 02 04 08', token: '--pat-chevron',           legacyName: 'light-20' },
+  { name: 'basket',            group: 'figurative', fill: 52,  hex: 'BF 00 BF BF B0 B0 B0 B0', token: '--pat-basket',            legacyName: 'medium-33' },
+  { name: 'tweed',             group: 'figurative', fill: 59,  hex: '77 89 8F 8F 77 98 F8 F8', token: '--pat-tweed',             legacyName: 'dense-38' },
+
+  // ── Scatter / Stipple (10) ──────────────────────────────────────
+  { name: 'dust',              group: 'scatter',    fill: 2,   hex: '80 00 00 00 00 00 00 00', token: '--pat-dust',              legacyName: 'sparse-1' },
+  { name: 'mist',              group: 'scatter',    fill: 3,   hex: '80 00 00 00 08 00 00 00', token: '--pat-mist',              legacyName: 'sparse-2' },
+  { name: 'scatter',           group: 'scatter',    fill: 6,   hex: '40 00 04 00 40 00 04 00', token: '--pat-scatter',           legacyName: 'sparse-4' },
+  { name: 'scatter-alt',       group: 'scatter',    fill: 6,   hex: '80 00 08 00 80 00 08 00', token: '--pat-scatter-alt',       legacyName: 'sparse-4-2' },
+  { name: 'scatter-pair',      group: 'scatter',    fill: 6,   hex: '00 00 00 11 00 00 00 11', token: '--pat-scatter-pair',      legacyName: 'sparse-4-3' },
+  { name: 'rain',              group: 'scatter',    fill: 9,   hex: '80 40 20 00 02 04 08 00', token: '--pat-rain',              legacyName: 'sparse-6' },
+  { name: 'rain-cluster',      group: 'scatter',    fill: 9,   hex: '40 A0 00 00 04 0A 00 00', token: '--pat-rain-cluster',      legacyName: 'sparse-6-2' },
+  { name: 'spray',             group: 'scatter',    fill: 12,  hex: '80 10 02 20 01 08 40 04', token: '--pat-spray',             legacyName: 'sparse-8' },
+  { name: 'spray-grid',        group: 'scatter',    fill: 12,  hex: '88 00 22 00 88 00 22 00', token: '--pat-spray-grid',        legacyName: 'sparse-8-2' },
+  { name: 'spray-mixed',       group: 'scatter',    fill: 12,  hex: 'AA 00 80 00 88 00 80 00', token: '--pat-spray-mixed',       legacyName: 'sparse-8-3' },
+
+  // ── Heavy Fill (12) ─────────────────────────────────────────────
+  { name: 'fill-75',           group: 'heavy',      fill: 75,  hex: 'DD 77 DD 77 DD 77 DD 77', token: '--pat-fill-75',           legacyName: 'heavy-48' },
+  { name: 'fill-75-rows',      group: 'heavy',      fill: 75,  hex: '55 FF 55 FF 55 FF 55 FF', token: '--pat-fill-75-rows',      legacyName: 'heavy-48-2' },
+  { name: 'fill-75-sweep',     group: 'heavy',      fill: 75,  hex: 'EE DD BB 77 EE DD BB 77', token: '--pat-fill-75-sweep',     legacyName: 'heavy-48-3' },
+  { name: 'fill-75-offset',    group: 'heavy',      fill: 75,  hex: 'BB EE BB EE BB EE BB EE', token: '--pat-fill-75-offset',    legacyName: 'heavy-48-4' },
+  { name: 'fill-75-inv',       group: 'heavy',      fill: 75,  hex: '77 DD 77 DD 77 DD 77 DD', token: '--pat-fill-75-inv',       legacyName: 'heavy-48-5' },
+  { name: 'fill-75-bars',      group: 'heavy',      fill: 75,  hex: 'FF 55 FF 55 FF 55 FF 55', token: '--pat-fill-75-bars',      legacyName: 'heavy-48-6' },
+  { name: 'fill-81',           group: 'heavy',      fill: 81,  hex: 'FF 77 DD 77 FF 77 DD 77', token: '--pat-fill-81',           legacyName: 'heavy-52' },
+  { name: 'fill-88',           group: 'heavy',      fill: 88,  hex: 'DD FF 77 FF DD FF 77 FF', token: '--pat-fill-88',           legacyName: 'heavy-56' },
+  { name: 'fill-88-alt',       group: 'heavy',      fill: 88,  hex: '77 FF DD FF 77 FF DD FF', token: '--pat-fill-88-alt',       legacyName: 'heavy-56-2' },
+  { name: 'fill-94',           group: 'heavy',      fill: 94,  hex: 'FF F7 FF 7F FF F7 FF 7F', token: '--pat-fill-94',           legacyName: 'heavy-60' },
+  { name: 'fill-94-alt',       group: 'heavy',      fill: 94,  hex: '7F FF F7 FF 7F FF F7 FF', token: '--pat-fill-94-alt',       legacyName: 'heavy-60-2' },
+  { name: 'fill-97',           group: 'heavy',      fill: 97,  hex: '7F FF FF FF F7 FF FF FF', token: '--pat-fill-97',           legacyName: 'heavy-62' },
+];

package/patterns/types.ts

@@ -0,0 +1,22 @@
+export type PatternGroup =
+  | 'structural'
+  | 'diagonal'
+  | 'grid'
+  | 'figurative'
+  | 'scatter'
+  | 'heavy';
+
+export interface PatternEntry {
+  /** Display name and CSS class suffix: e.g. "checkerboard" → .rdna-pat--checkerboard */
+  name: string;
+  /** Visual grouping */
+  group: PatternGroup;
+  /** Fill density 0–100 (exact bit count / 64 pixels) */
+  fill: number;
+  /** Original 8-byte hex string: "AA 55 AA 55 AA 55 AA 55" */
+  hex: string;
+  /** CSS custom property name: "--pat-checkerboard" */
+  token: string;
+  /** Original System 6 name before renaming */
+  legacyName: string;
+}

package/patterns.css

@@ -0,0 +1,157 @@
+/* =============================================================================
+   @rdna/radiants — System 6 Dither Patterns (51 patterns)
+   Mask-image technique for full color control via --pat-color
+   ============================================================================= */
+
+@theme {
+  /* ─── Group 1: Structural ─── */
+  --pat-solid: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVR42mNkYGD4z4AHMDEQAMNDAQAMUwEPUQw8hQAAAABJRU5ErkJggg==);
+  --pat-empty: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVR42mNgGAUMDAwMAAEIAAEoUqMqAAAAAElFTkSuQmCC);
+  --pat-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR42mNgYGD4zwABuGi8kv8ZhoUJAEGoH+HiZxhOAAAAAElFTkSuQmCC);
+  --pat-checkerboard-alt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR42mNggID/+Oj/BBQNAxMAQagf4Tb3rGwAAAAASUVORK5CYII=);
+  --pat-pinstripe-v: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR42mNgYGD4zwABWGkmBgJgeCgAAOSNBAsgg3PSAAAAAElFTkSuQmCC);
+  --pat-pinstripe-v-wide: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR42mNgYGD4z4AKUPhMDATA8FAAAP5XAg3OgldtAAAAAElFTkSuQmCC);
+  --pat-pinstripe-h: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR42mNkYGD4z0AJYBwWJgAAhTYEAXHt+N4AAAAASUVORK5CYII=);
+  --pat-pinstripe-h-wide: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR42mNkYGD4zzCwgHEQuAEAhR8CATitXwQAAAAASUVORK5CYII=);
+
+  /* ─── Group 2: Diagonal ─── */
+  --pat-diagonal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVR42mNgwA/+jxBJABEwB/mW9TEDAAAAAElFTkSuQmCC);
+  --pat-diagonal-dots: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGklEQVR42mNgYGD4z4AK0Pk4Jf4TlBgyJgAAQTgP8evn9rwAAAAASUVORK5CYII=);
+  --pat-diagonal-right: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFUlEQVR42mNgQAX/8fFpJMkwCNwAACFYD/FXGo9YAAAAAElFTkSuQmCC);
+
+  /* ─── Group 3: Grid & Lattice ─── */
+  --pat-grid: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHElEQVR42mNkYGD4z0AA/MfHZyKkm6ACxkHgBgDqdQYFBnEb3gAAAABJRU5ErkJggg==);
+  --pat-brick: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVR42mNkYGD4z0AA4FXAREg3QQWMxLgBr5sodwMAuZgEB1fV0UgAAAAASUVORK5CYII=);
+  --pat-shelf: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR42mNkYGD4z0AA4FXAREj3kFAAAOyiAgycCb74AAAAAElFTkSuQmCC);
+  --pat-columns: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVR42mNgYGD4zwABuGjCYOibAABIPw/xnxzKCwAAAABJRU5ErkJggg==);
+  --pat-stagger: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR42mNggID/DKgAnY9T4j/DsDABAAF4D/G4l/ShAAAAAElFTkSuQmCC);
+
+  /* ─── Group 4: Figurative ─── */
+  --pat-diamond: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHklEQVR42mNgIAP8J0byPzGS/4mR/E+0CUS5AasvAPpiD/H/aeIyAAAAAElFTkSuQmCC);
+  --pat-confetti: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOElEQVR42pWOMQ4AMAgCT+P/v2yHLmjoUCa9EACguWq5ETaebSB4qwHSwJFSAsKl10elr0m3XM0HWEkOA9PRWlAAAAAASUVORK5CYII=);
+  --pat-weave: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAN0lEQVR42mNkYGD4z4AJGGEMJmQOkiQ2TRiC/5GN+o9m0n9kK3BKYnPDfyxuIt4NGF5kYGD4DwAfKA0F1XsFbAAAAABJRU5ErkJggg==);
+  --pat-brick-diagonal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVR42mNgwAT/kTlMOCT/MxDSicz/j0sHTByXJFHgP+WSAK99C/fRfFhaAAAAAElFTkSuQmCC);
+  --pat-brick-diagonal-alt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVR42mNkwA3+YzCwSWIT+I/PyP8MRACSFBJWxERIBQB9Kwr5BNbq7QAAAABJRU5ErkJggg==);
+  --pat-caret: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKElEQVR42mNgYGD4z4Ad/MfJQeYz4lDEiC72nxTjCYmjKmIipIKgAgBPWAr8Fy+cLQAAAABJRU5ErkJggg==);
+  --pat-trellis: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAI0lEQVR42mNggID/+Gh0QawApyQTAwHAhMMkvNaS5iaCbgAAS8QM+mGaqqkAAAAASUVORK5CYII=);
+  --pat-arch: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVR42mNgQID/DHjAf3yK/uPjMzEQAJQrIMvRKIoAduUH/8zwIOYAAAAASUVORK5CYII=);
+  --pat-cross: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVR42mNgYGD4z4AK0PlYJf/jk8TK/4/PRJLcQJTD/pNkEgDVlQ3zIUcSEAAAAABJRU5ErkJggg==);
+  --pat-sawtooth: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVR42o2OyQ0AMAjDTPff2XxRJY68EzsAMuRxTEcxllKstPOHf2112DgFSPA2CQAb4l9LAAAAAElFTkSuQmCC);
+  --pat-chevron: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVR42mNgQAX/GfAAoiT/Y1P8Hx/NSMhoit1EWBIAQa4M9YY33XcAAAAASUVORK5CYII=);
+  --pat-basket: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAI0lEQVR42mNkYGD4z8DAwAilSQeMhExgImQCCw5TiTeBcgUAgpsEDlPs4P4AAAAASUVORK5CYII=);
+  --pat-tweed: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVR42mNkgID/DAjAiMZH5aDx/7MwYAdwRUwMBAAjqW74jy7JgsOhDES7AQBAzwwFokuQKgAAAABJRU5ErkJggg==);
+
+  /* ─── Group 5: Scatter / Stipple ─── */
+  --pat-dust: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVR42mNgYGD4zzAKAAQTAQCUZZylAAAAAElFTkSuQmCC);
+  --pat-mist: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAE0lEQVR42mNgYGD4zzD4AL3dBABzowH/x1JpygAAAABJRU5ErkJggg==);
+  --pat-scatter: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVR42mNggID/DNQG/+mgg3omAgBS0gP9yeXaQQAAAABJRU5ErkJggg==);
+  --pat-scatter-alt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVR42mNgYGD4z0Bt8J8OOqhrIgBiwgP9iZM4jgAAAABJRU5ErkJggg==);
+  --pat-scatter-pair: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAEklEQVR42mNgoDv4T4A/IG4AACvrA/0l0V9SAAAAAElFTkSuQmCC);
+  --pat-rain: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGUlEQVR42mNgYGD4z0AEoJ4iksB/2khiAAB7twX7nV7SGAAAAABJRU5ErkJggg==);
+  --pat-rain-cluster: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVR42mNggID/DHjAf2IUUR/Q080AvXUF+3lEFOEAAAAASUVORK5CYII=);
+  --pat-spray: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHUlEQVR42mNgYGD4z0ACoEwxSbrxavpPseNQNAAAETAH+a271I0AAAAASUVORK5CYII=);
+  --pat-spray-grid: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGUlEQVR42mNgYGD4z4AK0PnEA/JNGmg3AACknAf59hefuwAAAABJRU5ErkJggg==);
+  --pat-spray-mixed: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHUlEQVR42mNgYGD4zwABuGjCgHiVxJrwn2ITSAMAy4MH+Yj5W54AAAAASUVORK5CYII=);
+
+  /* ─── Group 6: Heavy Fill ─── */
+  --pat-fill-75: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAI0lEQVR42mNkYGD4zwABjEhsOJ8RysGQgHGY0ExgQOcPCRMAWLMRB3VCvrIAAAAASUVORK5CYII=);
+  --pat-fill-75-rows: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVR42mNggID/uGhGJA5eMLRNAAAIrRPxMRRQ7AAAAABJRU5ErkJggg==);
+  --pat-fill-75-sweep: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJklEQVR42mNkYGD4z4AAjOh8JnySDAwM/5nwScIYDPisYRoEbgAAMDwQDFCSg0IAAAAASUVORK5CYII=);
+  --pat-fill-75-offset: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVR42mNkYGD4z8DAwAilYQDOZ4IK/EeSQOEz4ZKA8YeECQAcwxEPZwWSewAAAABJRU5ErkJggg==);
+  --pat-fill-75-inv: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHklEQVR42mNkgID/DAjAiMxnQuIwoilmxCY4NE0AAG2QEAnqYbX3AAAAAElFTkSuQmCC);
+  --pat-fill-75-bars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVR42mNkYGD4z0AE+I+LZhwWJgAAfp8T8dviMZgAAAAASUVORK5CYII=);
+  --pat-fill-81: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKUlEQVR42mNkYGD4z4AHMDEwMDCiiTGiK/iPJoHCRxeEif3HyhkgNwAAuEwKDYIjdBgAAAAASUVORK5CYII=);
+  --pat-fill-88: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKUlEQVR42mNkYGD4zwABjEhsOB9dEAMwQVUyoOlENYaQCVh1wvh0cAMA6zgHDcHAn/gAAAAASUVORK5CYII=);
+  --pat-fill-88-alt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVR42mNkgID/DAjAiMxnRJPEAExoOhnQ+USZgFUnHd0AAPcZBg1M396MAAAAAElFTkSuQmCC);
+  --pat-fill-94: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVR42mNkYGD4z4AHMGERYySk4D+6AkZCVgy0GwBs4gQQU2pyDQAAAABJRU5ErkJggg==);
+  --pat-fill-94-alt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVR42mNkgID/DDgAEz5JmAJ0wEhIwX90BYyErKCxGwDn5gUObBB64AAAAABJRU5ErkJggg==);
+  --pat-fill-97: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVR42mNkgID/DDgAEz5JmAIGqitgJKTgP3XdAAA5pAMO+u7iUgAAAABJRU5ErkJggg==);
+
+  /* ─── Shadow pattern color ─── */
+  --color-shadow-pat: var(--color-ink);
+}
+
+/* =============================================================================
+   Mask-image base class
+   ============================================================================= */
+
+.rdna-pat {
+  -webkit-mask-image: var(--_pat);
+  mask-image: var(--_pat);
+  -webkit-mask-size: 8px 8px;
+  mask-size: 8px 8px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  background-color: var(--pat-color, var(--color-main));
+}
+
+/* ─── Group 1: Structural ─── */
+.rdna-pat--solid              { --_pat: var(--pat-solid); }
+.rdna-pat--empty              { --_pat: var(--pat-empty); }
+.rdna-pat--checkerboard       { --_pat: var(--pat-checkerboard); }
+.rdna-pat--checkerboard-alt   { --_pat: var(--pat-checkerboard-alt); }
+.rdna-pat--pinstripe-v        { --_pat: var(--pat-pinstripe-v); }
+.rdna-pat--pinstripe-v-wide   { --_pat: var(--pat-pinstripe-v-wide); }
+.rdna-pat--pinstripe-h        { --_pat: var(--pat-pinstripe-h); }
+.rdna-pat--pinstripe-h-wide   { --_pat: var(--pat-pinstripe-h-wide); }
+
+/* ─── Group 2: Diagonal ─── */
+.rdna-pat--diagonal           { --_pat: var(--pat-diagonal); }
+.rdna-pat--diagonal-dots      { --_pat: var(--pat-diagonal-dots); }
+.rdna-pat--diagonal-right     { --_pat: var(--pat-diagonal-right); }
+
+/* ─── Group 3: Grid & Lattice ─── */
+.rdna-pat--grid               { --_pat: var(--pat-grid); }
+.rdna-pat--brick              { --_pat: var(--pat-brick); }
+.rdna-pat--shelf              { --_pat: var(--pat-shelf); }
+.rdna-pat--columns            { --_pat: var(--pat-columns); }
+.rdna-pat--stagger            { --_pat: var(--pat-stagger); }
+
+/* ─── Group 4: Figurative ─── */
+.rdna-pat--diamond            { --_pat: var(--pat-diamond); }
+.rdna-pat--confetti           { --_pat: var(--pat-confetti); }
+.rdna-pat--weave              { --_pat: var(--pat-weave); }
+.rdna-pat--brick-diagonal     { --_pat: var(--pat-brick-diagonal); }
+.rdna-pat--brick-diagonal-alt { --_pat: var(--pat-brick-diagonal-alt); }
+.rdna-pat--caret              { --_pat: var(--pat-caret); }
+.rdna-pat--trellis            { --_pat: var(--pat-trellis); }
+.rdna-pat--arch               { --_pat: var(--pat-arch); }
+.rdna-pat--cross              { --_pat: var(--pat-cross); }
+.rdna-pat--sawtooth           { --_pat: var(--pat-sawtooth); }
+.rdna-pat--chevron            { --_pat: var(--pat-chevron); }
+.rdna-pat--basket             { --_pat: var(--pat-basket); }
+.rdna-pat--tweed              { --_pat: var(--pat-tweed); }
+
+/* ─── Group 5: Scatter / Stipple ─── */
+.rdna-pat--dust               { --_pat: var(--pat-dust); }
+.rdna-pat--mist               { --_pat: var(--pat-mist); }
+.rdna-pat--scatter            { --_pat: var(--pat-scatter); }
+.rdna-pat--scatter-alt        { --_pat: var(--pat-scatter-alt); }
+.rdna-pat--scatter-pair       { --_pat: var(--pat-scatter-pair); }
+.rdna-pat--rain               { --_pat: var(--pat-rain); }
+.rdna-pat--rain-cluster       { --_pat: var(--pat-rain-cluster); }
+.rdna-pat--spray              { --_pat: var(--pat-spray); }
+.rdna-pat--spray-grid         { --_pat: var(--pat-spray-grid); }
+.rdna-pat--spray-mixed        { --_pat: var(--pat-spray-mixed); }
+
+/* ─── Group 6: Heavy Fill ─── */
+.rdna-pat--fill-75            { --_pat: var(--pat-fill-75); }
+.rdna-pat--fill-75-rows       { --_pat: var(--pat-fill-75-rows); }
+.rdna-pat--fill-75-sweep      { --_pat: var(--pat-fill-75-sweep); }
+.rdna-pat--fill-75-offset     { --_pat: var(--pat-fill-75-offset); }
+.rdna-pat--fill-75-inv        { --_pat: var(--pat-fill-75-inv); }
+.rdna-pat--fill-75-bars       { --_pat: var(--pat-fill-75-bars); }
+.rdna-pat--fill-81            { --_pat: var(--pat-fill-81); }
+.rdna-pat--fill-88            { --_pat: var(--pat-fill-88); }
+.rdna-pat--fill-88-alt        { --_pat: var(--pat-fill-88-alt); }
+.rdna-pat--fill-94            { --_pat: var(--pat-fill-94); }
+.rdna-pat--fill-94-alt        { --_pat: var(--pat-fill-94-alt); }
+.rdna-pat--fill-97            { --_pat: var(--pat-fill-97); }
+
+/* ─── Scale modifiers ─── */
+.rdna-pat--2x { -webkit-mask-size: 16px 16px; mask-size: 16px 16px; }
+.rdna-pat--3x { -webkit-mask-size: 24px 24px; mask-size: 24px 24px; }
+.rdna-pat--4x { -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }

package/pixel-corners.css

@@ -0,0 +1,46 @@
+/* ============================================================================
+   Pixel Corners — Shell file
+   Imports generated geometry and contains only manual utilities.
+
+   Generated geometry, shared base styles, and polygon definitions live in
+   pixel-corners.generated.css (do not edit by hand — run the generator).
+   ============================================================================ */
+
+@import './pixel-corners.generated.css';
+
+/* ============================================================================
+   Pixel Shadow Utilities
+   Drop-shadow equivalents for pixel-cornered elements.
+   box-shadow gets clipped by polygon masking — filter: drop-shadow() does not.
+   ============================================================================ */
+
+.pixel-shadow-surface {
+  filter: drop-shadow(0 1px 0 var(--color-ink));
+}
+.pixel-shadow-resting {
+  filter: drop-shadow(0 2px 0 var(--color-ink));
+}
+.pixel-shadow-lifted {
+  filter: drop-shadow(0 4px 0 var(--color-ink));
+}
+.pixel-shadow-raised {
+  filter: drop-shadow(2px 2px 0 var(--color-ink));
+}
+.pixel-shadow-floating {
+  filter: drop-shadow(4px 4px 0 var(--color-ink));
+}
+
+/* Border color overrides for pixel-cornered elements */
+.pixel-border-danger::after {
+  background: var(--color-danger) !important;
+}
+
+/* Focus ring for pixel-cornered elements — outline instead of box-shadow ring */
+.pixel-rounded-xs:focus-visible,
+.pixel-rounded-sm:focus-visible,
+.pixel-rounded-md:focus-visible,
+.pixel-rounded-lg:focus-visible,
+.pixel-rounded-xl:focus-visible {
+  outline: 2px solid var(--color-focus, var(--color-accent));
+  outline-offset: 2px;
+}