From bdab0ee7ebdd5f755f273d306145b9de73e06f9e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:12:34 +0000
Subject: [PATCH 01/18] =?UTF-8?q?fix:=20audit=20fixes=20=E2=80=94=20deps,?=
 =?UTF-8?q?=20CI,=20types,=20a11y,=20dead=20code,=20and=20edge=20cases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move esbuild/postcss-preset-env from dependencies to devDependencies
  (saves ~9MB for consumers)
- Fix CI lint step that was running typecheck twice instead of lint
- Fix useVirtual declaration ordering (updateRange/updateRangeThrottled
  declared before use) and remove brittle .block magic selector
- Add aria-hidden="true" to Baseline and Guide overlay components
- Guard normalizeValue against base=0 (prevents NaN)
- Gate console.warn/error behind NODE_ENV === 'development'
- Export missing public types: SnappingMode, BaselineVariant,
  PaddingValue, Variant
- Remove dead handleGapCalculations code in Guide; use columnsCount
  from useGuide directly
- Support 3-element padding arrays (CSS shorthand: top, inline, bottom)
- Update tests to match corrected column counts and NODE_ENV gating

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 .github/workflows/test.yml           |  2 +-
 package.json                         |  9 ++---
 src/components/Baseline/Baseline.tsx |  3 ++
 src/components/Guide/Guide.tsx       | 55 ++++------------------------
 src/components/types.ts              |  1 +
 src/hooks/useVirtual.ts              | 13 ++-----
 src/index.ts                         | 12 ++++--
 src/utils/normalize.ts               | 11 +++++-
 src/utils/padding.ts                 | 18 +++++++--
 tests/components/Guide.test.tsx      |  6 +--
 tests/utils/normalize.test.ts        |  3 ++
 11 files changed, 57 insertions(+), 76 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3e8cc6a1..857e6b44 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -31,7 +31,7 @@ jobs:
         run: bun run typecheck
 
       - name: Lint Check
-        run: bun run typecheck
+        run: bun run lint
 
       - name: Run Tests with Coverage
         run: bun run test
diff --git a/package.json b/package.json
index adfc11f7..83bf9d3b 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,9 @@
     "rollup-plugin-visualizer": "^5.14.0",
     "vite": "6.2.1",
     "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "3.0.8"
+    "vitest": "3.0.8",
+    "esbuild": "^0.25.0",
+    "postcss-preset-env": "^10.1.5"
   },
   "name": "baseline-kit",
   "version": "3.0.2",
@@ -148,8 +150,5 @@
   },
   "author": "Francois Denavaut",
   "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
-  "dependencies": {
-    "esbuild": "^0.25.0",
-    "postcss-preset-env": "^10.1.5"
-  }
+  "dependencies": {}
 }
diff --git a/src/components/Baseline/Baseline.tsx b/src/components/Baseline/Baseline.tsx
index 2f1a4496..10677b83 100644
--- a/src/components/Baseline/Baseline.tsx
+++ b/src/components/Baseline/Baseline.tsx
@@ -248,6 +248,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
     <div
       ref={containerRef}
       data-testid="baseline"
+      aria-hidden="true"
       className={mergeClasses(
         styles.bas,
         isShown ? styles.v : styles.h,
@@ -326,6 +327,7 @@ export const Baseline = React.memo(function Baseline({
         className={mergeClasses(styles.b, styles.h, className)}
         style={style}
         data-testid="baseline"
+        aria-hidden="true"
         {...spacingProps}
       />
     )
@@ -341,6 +343,7 @@ export const Baseline = React.memo(function Baseline({
         ...style,
       }}
       data-testid="baseline"
+      aria-hidden="true"
     />
   )
 
diff --git a/src/components/Guide/Guide.tsx b/src/components/Guide/Guide.tsx
index 3301a251..1475077c 100644
--- a/src/components/Guide/Guide.tsx
+++ b/src/components/Guide/Guide.tsx
@@ -188,6 +188,7 @@ export const Guide = React.memo(function Guide({
         style={style}
         data-testid="guide"
         data-variant={variant}
+        aria-hidden="true"
         {...props}
       >
         {children}
@@ -207,6 +208,7 @@ export const Guide = React.memo(function Guide({
       }}
       data-testid="guide"
       data-variant={variant}
+      aria-hidden="true"
     >
       {children}
     </div>
@@ -388,55 +390,11 @@ const GuideImpl = React.memo(function GuideImpl({
     align,
   ])
 
-  // In the component where gap is used:
-  const handleGapCalculations = () => {
-    // Ensure gap is a number
-    const safeGap = typeof gap === 'number' ? gap : 0
-
-    // When gap is 0, we need width + 1 columns to fill the space
-    // When gap > 0, we need to account for the -1px reduction in each gap
-    const finalGap = safeGap === 0 ? 0 : safeGap - 1
-    const actualGapWithLine = finalGap + 1
-
-    // Rest of the gap calculations...
-    return { finalGap, actualGapWithLine }
-  }
-
-  // Use the gap calculations where needed
-  const { finalGap, actualGapWithLine } = handleGapCalculations()
-
-  // Ensure width is a number
-  const containerWidthValue =
-    typeof width === 'number' ? width : containerWidth || 1024
-
-  // For line variants, account for the -1px reduction in each gap
-  // If we have N columns, we have (N-1) gaps, each reduced by 1px
-  // So the total width lost is (N-1) pixels
-  let columnCount: number
-
-  if (finalGap === 0) {
-    // When gap is 0, we need a column per pixel + 1
-    columnCount = Math.floor(containerWidthValue) + 1
-  } else if (variant === 'line') {
-    // For line variant with gap > 0:
-    // We need to solve for N in: N * actualGapWithLine - (N-1) = containerWidthValue
-    // Which simplifies to: N = (containerWidthValue + 1) / (actualGapWithLine - 1 + 1)
-    columnCount = Math.max(
-      1,
-      Math.floor((containerWidthValue + 1) / actualGapWithLine) + 1
-    )
-  } else {
-    // For other variants, use the standard formula
-    columnCount = Math.max(
-      1,
-      Math.floor(containerWidthValue / actualGapWithLine) + 1
-    )
-  }
-
   return (
     <div
       ref={containerRef}
       data-testid="guide"
+      aria-hidden="true"
       className={mergeClasses(
         styles.gde,
         className,
@@ -449,10 +407,11 @@ const GuideImpl = React.memo(function GuideImpl({
     >
       {isShown && (
         <div className={styles.cols} data-variant={variant}>
-          {Array.from({ length: columnCount }, (_, i) => {
+          {Array.from({ length: columnsCount }, (_, i) => {
             const colColor =
-              config.colors[variant as keyof typeof config.colors] ??
-              config.colors.line
+              (variant && variant in config.colors
+                ? config.colors[variant as keyof typeof config.colors]
+                : undefined) ?? config.colors.line
             return (
               <div
                 key={i}
diff --git a/src/components/types.ts b/src/components/types.ts
index 95f96395..2e045112 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -45,6 +45,7 @@ export type Spacing =
 export type PaddingValue =
   | number
   | [number, number] // [block, inline]
+  | [number, number, number] // [top, inline, bottom] (CSS shorthand)
   | [number, number, number, number] // [top, right, bottom, left]
   | {
       top?: number
diff --git a/src/hooks/useVirtual.ts b/src/hooks/useVirtual.ts
index 7d739106..27629cd1 100644
--- a/src/hooks/useVirtual.ts
+++ b/src/hooks/useVirtual.ts
@@ -82,11 +82,6 @@ export function useVirtual({
     const element = containerRef.current
     if (!element) return { start: 0, end: totalLines }
 
-    // Show all lines if container is inside .content-block
-    if (element.closest('.block')) {
-      return { start: 0, end: totalLines }
-    }
-
     // Calculate visible range
     const rect = element.getBoundingClientRect()
     const offsetTop = rect.top + window.scrollY
@@ -101,11 +96,6 @@ export function useVirtual({
 
   const [visibleRange, setVisibleRange] = useState(calculateRange)
 
-  // Subscribe to window events using our helper
-  useWindowEvents(['scroll', 'resize'], () => {
-    updateRangeThrottled()
-  })
-
   // Throttle updates for performance
   const updateRange = useCallback(() => {
     setVisibleRange((prev) => {
@@ -119,6 +109,9 @@ export function useVirtual({
     [updateRange]
   )
 
+  // Subscribe to window events using our helper
+  useWindowEvents(['scroll', 'resize'], updateRangeThrottled)
+
   useLayoutEffect(() => {
     const element = containerRef.current
     if (!element) return
diff --git a/src/index.ts b/src/index.ts
index 1f857bd1..f9b293ca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,9 +25,15 @@ export { Padder } from './components/Padder'
 
 // Public API Types
 export type { DebuggingMode, ConfigSchema } from './components/Config/Config'
-export type { GuideVariant, Spacing, SpacingProps } from './components/types'
-export type { BaselineProps } from './components/Baseline'
-export type { BoxProps } from './components/Box'
+export type {
+  GuideVariant,
+  Spacing,
+  SpacingProps,
+  PaddingValue,
+  Variant,
+} from './components/types'
+export type { BaselineProps, BaselineVariant } from './components/Baseline'
+export type { BoxProps, SnappingMode } from './components/Box'
 export type { GuideProps } from './components/Guide'
 export type { LayoutProps } from './components/Layout'
 export type { StackProps } from './components/Stack'
diff --git a/src/utils/normalize.ts b/src/utils/normalize.ts
index 3cf95b9d..60cd9928 100644
--- a/src/utils/normalize.ts
+++ b/src/utils/normalize.ts
@@ -40,7 +40,7 @@ export function normalizeValue(
   } else if (typeof value === 'string') {
     const conv = convertValue(value)
     if (conv === null) {
-      if (!suppressWarnings) {
+      if (!suppressWarnings && process.env.NODE_ENV === 'development') {
         console.error(
           `Failed to convert "${value}" to pixels. Falling back to base ${base}.`
         )
@@ -52,6 +52,9 @@ export function normalizeValue(
   }
   if (num === null) num = base
 
+  // Guard against division by zero
+  if (base <= 0) return num
+
   // Apply normalization
   const normalized = doRound ? Math.round(num / base) * base : num
 
@@ -66,7 +69,11 @@ export function normalizeValue(
       : normalized
 
   // Warn about adjustments
-  if (!suppressWarnings && clamped !== num) {
+  if (
+    !suppressWarnings &&
+    clamped !== num &&
+    process.env.NODE_ENV === 'development'
+  ) {
     console.warn(`Normalized ${num} to ${clamped} to match base ${base}px.`)
   }
 
diff --git a/src/utils/padding.ts b/src/utils/padding.ts
index 0cec62c2..2e1be8f8 100644
--- a/src/utils/padding.ts
+++ b/src/utils/padding.ts
@@ -44,12 +44,22 @@ function parsePaddingValue(padding: PaddingValue): Padding {
   }
 
   if (Array.isArray(padding)) {
-    if (padding.length === 2) {
-      const [block, inline] = padding
+    const len = padding.length
+    if (len === 2) {
+      const [block, inline] = padding as [number, number]
       return { top: block, right: inline, bottom: block, left: inline }
     }
-    if (padding.length >= 4) {
-      const [top, right, bottom, left] = padding
+    if (len === 3) {
+      const [top, inline, bottom] = padding as [number, number, number]
+      return {
+        top: top ?? 0,
+        right: inline ?? 0,
+        bottom: bottom ?? 0,
+        left: inline ?? 0,
+      }
+    }
+    if (len >= 4) {
+      const [top, right, bottom, left] = padding as [number, number, number, number]
       return {
         top: top ?? 0,
         right: right ?? 0,
diff --git a/tests/components/Guide.test.tsx b/tests/components/Guide.test.tsx
index 00077d7a..6419b348 100644
--- a/tests/components/Guide.test.tsx
+++ b/tests/components/Guide.test.tsx
@@ -99,7 +99,7 @@ describe('Guide component', () => {
     const guideEl = screen.getByTestId('guide')
     expect(guideEl.dataset.variant).toBe('auto')
     const columns = guideEl.querySelectorAll('[data-column-index]')
-    expect(columns.length).toBe(65)
+    expect(columns.length).toBe(10)
     expect(guideEl.getAttribute('style')).toContain('--bkgg: 16px')
   })
 
@@ -116,7 +116,7 @@ describe('Guide component', () => {
     const guideEl = screen.getByTestId('guide')
     expect(guideEl.dataset.variant).toBe('pattern')
     const cols = guideEl.querySelectorAll('[data-column-index]')
-    expect(cols.length).toBe(103)
+    expect(cols.length).toBe(3)
     expect(guideEl.getAttribute('style')).toContain('--bkgt: 1fr 2fr 3fr')
     expect(guideEl.getAttribute('style')).toContain('--bkgg: 10px')
   })
@@ -135,7 +135,7 @@ describe('Guide component', () => {
     const guideEl = screen.getByTestId('guide')
     expect(guideEl.dataset.variant).toBe('fixed')
     const cols = guideEl.querySelectorAll('[data-column-index]')
-    expect(cols.length).toBe(86)
+    expect(cols.length).toBe(5)
     expect(guideEl.getAttribute('style')).toContain('--bkgg: 12px')
     expect(guideEl.getAttribute('style')).toContain('--bkgt: repeat(5, 120px)')
   })
diff --git a/tests/utils/normalize.test.ts b/tests/utils/normalize.test.ts
index 2c085dd0..374ab126 100644
--- a/tests/utils/normalize.test.ts
+++ b/tests/utils/normalize.test.ts
@@ -36,11 +36,14 @@ describe('Normalization Utils', () => {
     })
 
     it('logs a warning when the normalized value is clamped and warnings are not suppressed', () => {
+      const originalEnv = process.env.NODE_ENV
+      process.env.NODE_ENV = 'development'
       const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {
       })
       normalizeValue(14, { base: 8, clamp: { max: 12 }, suppressWarnings: false })
       expect(warnSpy).toHaveBeenCalled()
       warnSpy.mockRestore()
+      process.env.NODE_ENV = originalEnv
     })
   })
 

From 4bd176ca567720d0dabbe40ffe5c3b3aec8ecf7f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:13:08 +0000
Subject: [PATCH 02/18] chore: update bun.lock after dependency reorganization

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 bun.lock | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index 7ebc8501..b911dd0b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,12 +1,9 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "baseline-kit",
-      "dependencies": {
-        "esbuild": "^0.25.0",
-        "postcss-preset-env": "^10.1.5",
-      },
       "devDependencies": {
         "@changesets/cli": "^2.28.1",
         "@eslint/js": "^9.21.0",
@@ -21,12 +18,14 @@
         "@vitest/coverage-v8": "^3.0.8",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
+        "esbuild": "^0.25.0",
         "eslint": "^9.0.0",
         "eslint-config-prettier": "^10.1.1",
         "eslint-plugin-prettier": "^5.2.3",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^5.2.0",
         "jsdom": "^26.0.0",
+        "postcss-preset-env": "^10.1.5",
         "prettier": "^3.5.3",
         "rollup": "^4.34.9",
         "rollup-plugin-dts": "^6.1.1",

From 64c22fcd5c61cfd0c7c092b28ece49e1dcd1f828 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:37:23 +0000
Subject: [PATCH 03/18] chore: update all dependencies to latest compatible
 versions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dependency updates (all latest within compatible major versions):
- @changesets/cli: 2.28 → 2.30
- @eslint/js: 9.21 → 9.39
- @testing-library/jest-dom: 6.6 → 6.9
- @testing-library/react: 16.2 → 16.3
- @types/node: 22.13 → 22.19
- @types/react: 19.0 → 19.2
- @types/react-dom: 19.0 → 19.2
- @typescript-eslint/*: 8.26 → 8.57
- @vitejs/plugin-react-swc: 3.8 → 4.3
- @vitest/coverage-v8: 3.0 → 3.2
- autoprefixer: 10.4.20 → 10.4.27
- cssnano: 7.0 → 7.1
- esbuild: 0.25.0 → 0.25.12
- eslint: 9.0 → 9.39
- eslint-config-prettier: 10.1.1 → 10.1.8
- eslint-plugin-prettier: 5.2 → 5.5
- eslint-plugin-react: 7.37.4 → 7.37.5
- jsdom: 26.0 → 26.1
- postcss-preset-env: 10.1 → 10.6
- prettier: 3.5 → 3.8
- rollup: 4.34 → 4.41
- rollup-plugin-dts: 6.1 → 6.4
- vite: 6.2 → 6.4
- vite-plugin-static-copy: 2.3.0 → 2.3.2
- vitest: 3.0 → 3.2

Also adds react/react-dom as explicit devDependencies for testing,
adds @testing-library/dom as explicit dependency, and widens
typescript peer dep range to include ^5.9.0.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 package.json | 60 +++++++++++++++++++++++++++-------------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 83bf9d3b..8fd3d948 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2 || ^5.9.0"
   },
   "main": "dist/index.cjs",
   "engines": {
@@ -47,34 +47,37 @@
     "url": "git+https://github.com/dnvt/baseline-kit.git"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.28.1",
-    "@eslint/js": "^9.21.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.9",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.26.0",
-    "@typescript-eslint/parser": "^8.26.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-v8": "^3.0.8",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
+    "@changesets/cli": "^2.30.0",
+    "@eslint/js": "^9.39.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22.19.15",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.2",
+    "@typescript-eslint/parser": "^8.57.2",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.27",
+    "cssnano": "^7.1.3",
+    "esbuild": "^0.25.12",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.5.3",
-    "rollup": "^4.34.9",
-    "rollup-plugin-dts": "^6.1.1",
+    "jsdom": "^26.1.0",
+    "postcss-preset-env": "^10.6.1",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rollup": "^4.41.1",
+    "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-visualizer": "^5.14.0",
-    "vite": "6.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "3.0.8",
-    "esbuild": "^0.25.0",
-    "postcss-preset-env": "^10.1.5"
+    "vite": "^6.4.1",
+    "vite-plugin-static-copy": "^2.3.2",
+    "vitest": "^3.2.4"
   },
   "name": "baseline-kit",
   "version": "3.0.2",
@@ -149,6 +152,5 @@
     "access": "public"
   },
   "author": "Francois Denavaut",
-  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
-  "dependencies": {}
+  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript."
 }

From 7caf9022c2cd75037df5d884141c862fd0f00ba9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:38:13 +0000
Subject: [PATCH 04/18] chore: remove bun.lock after switching to npm for
 dependency resolution

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 bun.lock | 1437 ------------------------------------------------------
 1 file changed, 1437 deletions(-)
 delete mode 100644 bun.lock

diff --git a/bun.lock b/bun.lock
deleted file mode 100644
index b911dd0b..00000000
--- a/bun.lock
+++ /dev/null
@@ -1,1437 +0,0 @@
-{
-  "lockfileVersion": 1,
-  "configVersion": 0,
-  "workspaces": {
-    "": {
-      "name": "baseline-kit",
-      "devDependencies": {
-        "@changesets/cli": "^2.28.1",
-        "@eslint/js": "^9.21.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.2.0",
-        "@types/node": "^22.13.9",
-        "@types/react": "^19.0.10",
-        "@types/react-dom": "^19.0.4",
-        "@typescript-eslint/eslint-plugin": "^8.26.0",
-        "@typescript-eslint/parser": "^8.26.0",
-        "@vitejs/plugin-react-swc": "^3.8.0",
-        "@vitest/coverage-v8": "^3.0.8",
-        "autoprefixer": "^10.4.20",
-        "cssnano": "^7.0.6",
-        "esbuild": "^0.25.0",
-        "eslint": "^9.0.0",
-        "eslint-config-prettier": "^10.1.1",
-        "eslint-plugin-prettier": "^5.2.3",
-        "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "jsdom": "^26.0.0",
-        "postcss-preset-env": "^10.1.5",
-        "prettier": "^3.5.3",
-        "rollup": "^4.34.9",
-        "rollup-plugin-dts": "^6.1.1",
-        "rollup-plugin-visualizer": "^5.14.0",
-        "vite": "6.2.1",
-        "vite-plugin-static-copy": "^2.3.0",
-        "vitest": "3.0.8",
-      },
-      "peerDependencies": {
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "typescript": "^5.8.2",
-      },
-    },
-  },
-  "packages": {
-    "@adobe/css-tools": ["@adobe/css-tools@4.4.2", "", {}, "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A=="],
-
-    "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
-
-    "@asamuzakjp/css-color": ["@asamuzakjp/css-color@3.1.1", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "lru-cache": "^10.4.3" } }, "sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA=="],
-
-    "@babel/code-frame": ["@babel/code-frame@7.26.2", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.25.9", "js-tokens": "^4.0.0", "picocolors": "^1.0.0" } }, "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ=="],
-
-    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.25.9", "", {}, "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="],
-
-    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.25.9", "", {}, "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="],
-
-    "@babel/parser": ["@babel/parser@7.26.9", "", { "dependencies": { "@babel/types": "^7.26.9" }, "bin": "./bin/babel-parser.js" }, "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A=="],
-
-    "@babel/runtime": ["@babel/runtime@7.26.9", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg=="],
-
-    "@babel/types": ["@babel/types@7.26.9", "", { "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" } }, "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw=="],
-
-    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@1.0.2", "", {}, "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA=="],
-
-    "@changesets/apply-release-plan": ["@changesets/apply-release-plan@7.0.10", "", { "dependencies": { "@changesets/config": "^3.1.1", "@changesets/get-version-range-type": "^0.4.0", "@changesets/git": "^3.0.2", "@changesets/should-skip-package": "^0.1.2", "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3", "detect-indent": "^6.0.0", "fs-extra": "^7.0.1", "lodash.startcase": "^4.4.0", "outdent": "^0.5.0", "prettier": "^2.7.1", "resolve-from": "^5.0.0", "semver": "^7.5.3" } }, "sha512-wNyeIJ3yDsVspYvHnEz1xQDq18D9ifed3lI+wxRQRK4pArUcuHgCTrHv0QRnnwjhVCQACxZ+CBih3wgOct6UXw=="],
-
-    "@changesets/assemble-release-plan": ["@changesets/assemble-release-plan@6.0.6", "", { "dependencies": { "@changesets/errors": "^0.2.0", "@changesets/get-dependents-graph": "^2.1.3", "@changesets/should-skip-package": "^0.1.2", "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3", "semver": "^7.5.3" } }, "sha512-Frkj8hWJ1FRZiY3kzVCKzS0N5mMwWKwmv9vpam7vt8rZjLL1JMthdh6pSDVSPumHPshTTkKZ0VtNbE0cJHZZUg=="],
-
-    "@changesets/changelog-git": ["@changesets/changelog-git@0.2.1", "", { "dependencies": { "@changesets/types": "^6.1.0" } }, "sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q=="],
-
-    "@changesets/cli": ["@changesets/cli@2.28.1", "", { "dependencies": { "@changesets/apply-release-plan": "^7.0.10", "@changesets/assemble-release-plan": "^6.0.6", "@changesets/changelog-git": "^0.2.1", "@changesets/config": "^3.1.1", "@changesets/errors": "^0.2.0", "@changesets/get-dependents-graph": "^2.1.3", "@changesets/get-release-plan": "^4.0.8", "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/pre": "^2.0.2", "@changesets/read": "^0.6.3", "@changesets/should-skip-package": "^0.1.2", "@changesets/types": "^6.1.0", "@changesets/write": "^0.4.0", "@manypkg/get-packages": "^1.1.3", "ansi-colors": "^4.1.3", "ci-info": "^3.7.0", "enquirer": "^2.4.1", "external-editor": "^3.1.0", "fs-extra": "^7.0.1", "mri": "^1.2.0", "p-limit": "^2.2.0", "package-manager-detector": "^0.2.0", "picocolors": "^1.1.0", "resolve-from": "^5.0.0", "semver": "^7.5.3", "spawndamnit": "^3.0.1", "term-size": "^2.1.0" }, "bin": { "changeset": "bin.js" } }, "sha512-PiIyGRmSc6JddQJe/W1hRPjiN4VrMvb2VfQ6Uydy2punBioQrsxppyG5WafinKcW1mT0jOe/wU4k9Zy5ff21AA=="],
-
-    "@changesets/config": ["@changesets/config@3.1.1", "", { "dependencies": { "@changesets/errors": "^0.2.0", "@changesets/get-dependents-graph": "^2.1.3", "@changesets/logger": "^0.1.1", "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3", "fs-extra": "^7.0.1", "micromatch": "^4.0.8" } }, "sha512-bd+3Ap2TKXxljCggI0mKPfzCQKeV/TU4yO2h2C6vAihIo8tzseAn2e7klSuiyYYXvgu53zMN1OeYMIQkaQoWnA=="],
-
-    "@changesets/errors": ["@changesets/errors@0.2.0", "", { "dependencies": { "extendable-error": "^0.1.5" } }, "sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow=="],
-
-    "@changesets/get-dependents-graph": ["@changesets/get-dependents-graph@2.1.3", "", { "dependencies": { "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3", "picocolors": "^1.1.0", "semver": "^7.5.3" } }, "sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ=="],
-
-    "@changesets/get-release-plan": ["@changesets/get-release-plan@4.0.8", "", { "dependencies": { "@changesets/assemble-release-plan": "^6.0.6", "@changesets/config": "^3.1.1", "@changesets/pre": "^2.0.2", "@changesets/read": "^0.6.3", "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3" } }, "sha512-MM4mq2+DQU1ZT7nqxnpveDMTkMBLnwNX44cX7NSxlXmr7f8hO6/S2MXNiXG54uf/0nYnefv0cfy4Czf/ZL/EKQ=="],
-
-    "@changesets/get-version-range-type": ["@changesets/get-version-range-type@0.4.0", "", {}, "sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ=="],
-
-    "@changesets/git": ["@changesets/git@3.0.2", "", { "dependencies": { "@changesets/errors": "^0.2.0", "@manypkg/get-packages": "^1.1.3", "is-subdir": "^1.1.1", "micromatch": "^4.0.8", "spawndamnit": "^3.0.1" } }, "sha512-r1/Kju9Y8OxRRdvna+nxpQIsMsRQn9dhhAZt94FLDeu0Hij2hnOozW8iqnHBgvu+KdnJppCveQwK4odwfw/aWQ=="],
-
-    "@changesets/logger": ["@changesets/logger@0.1.1", "", { "dependencies": { "picocolors": "^1.1.0" } }, "sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg=="],
-
-    "@changesets/parse": ["@changesets/parse@0.4.1", "", { "dependencies": { "@changesets/types": "^6.1.0", "js-yaml": "^3.13.1" } }, "sha512-iwksMs5Bf/wUItfcg+OXrEpravm5rEd9Bf4oyIPL4kVTmJQ7PNDSd6MDYkpSJR1pn7tz/k8Zf2DhTCqX08Ou+Q=="],
-
-    "@changesets/pre": ["@changesets/pre@2.0.2", "", { "dependencies": { "@changesets/errors": "^0.2.0", "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3", "fs-extra": "^7.0.1" } }, "sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug=="],
-
-    "@changesets/read": ["@changesets/read@0.6.3", "", { "dependencies": { "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/parse": "^0.4.1", "@changesets/types": "^6.1.0", "fs-extra": "^7.0.1", "p-filter": "^2.1.0", "picocolors": "^1.1.0" } }, "sha512-9H4p/OuJ3jXEUTjaVGdQEhBdqoT2cO5Ts95JTFsQyawmKzpL8FnIeJSyhTDPW1MBRDnwZlHFEM9SpPwJDY5wIg=="],
-
-    "@changesets/should-skip-package": ["@changesets/should-skip-package@0.1.2", "", { "dependencies": { "@changesets/types": "^6.1.0", "@manypkg/get-packages": "^1.1.3" } }, "sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw=="],
-
-    "@changesets/types": ["@changesets/types@6.1.0", "", {}, "sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA=="],
-
-    "@changesets/write": ["@changesets/write@0.4.0", "", { "dependencies": { "@changesets/types": "^6.1.0", "fs-extra": "^7.0.1", "human-id": "^4.1.1", "prettier": "^2.7.1" } }, "sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q=="],
-
-    "@csstools/cascade-layer-name-parser": ["@csstools/cascade-layer-name-parser@2.0.4", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" } }, "sha512-7DFHlPuIxviKYZrOiwVU/PiHLm3lLUR23OMuEEtfEOQTOp9hzQ2JjdY6X5H18RVuUPJqSCI+qNnD5iOLMVE0bA=="],
-
-    "@csstools/color-helpers": ["@csstools/color-helpers@5.0.2", "", {}, "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA=="],
-
-    "@csstools/css-calc": ["@csstools/css-calc@2.1.2", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" } }, "sha512-TklMyb3uBB28b5uQdxjReG4L80NxAqgrECqLZFQbyLekwwlcDDS8r3f07DKqeo8C4926Br0gf/ZDe17Zv4wIuw=="],
-
-    "@csstools/css-color-parser": ["@csstools/css-color-parser@3.0.8", "", { "dependencies": { "@csstools/color-helpers": "^5.0.2", "@csstools/css-calc": "^2.1.2" }, "peerDependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" } }, "sha512-pdwotQjCCnRPuNi06jFuP68cykU1f3ZWExLe/8MQ1LOs8Xq+fTkYgd+2V8mWUWMrOn9iS2HftPVaMZDaXzGbhQ=="],
-
-    "@csstools/css-parser-algorithms": ["@csstools/css-parser-algorithms@3.0.4", "", { "peerDependencies": { "@csstools/css-tokenizer": "^3.0.3" } }, "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A=="],
-
-    "@csstools/css-tokenizer": ["@csstools/css-tokenizer@3.0.3", "", {}, "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw=="],
-
-    "@csstools/media-query-list-parser": ["@csstools/media-query-list-parser@4.0.2", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" } }, "sha512-EUos465uvVvMJehckATTlNqGj4UJWkTmdWuDMjqvSUkjGpmOyFZBVwb4knxCm/k2GMTXY+c/5RkdndzFYWeX5A=="],
-
-    "@csstools/postcss-cascade-layers": ["@csstools/postcss-cascade-layers@5.0.1", "", { "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-XOfhI7GShVcKiKwmPAnWSqd2tBR0uxt+runAxttbSp/LY2U16yAVPmAf7e9q4JJ0d+xMNmpwNDLBXnmRCl3HMQ=="],
-
-    "@csstools/postcss-color-function": ["@csstools/postcss-color-function@4.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-9dUvP2qpZI6PlGQ/sob+95B3u5u7nkYt9yhZFCC7G9HBRHBxj+QxS/wUlwaMGYW0waf+NIierI8aoDTssEdRYw=="],
-
-    "@csstools/postcss-color-mix-function": ["@csstools/postcss-color-mix-function@3.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-yuZpgWUzqZWQhEqfvtJufhl28DgO9sBwSbXbf/59gejNuvZcoUTRGQZhzhwF4ccqb53YAGB+u92z9+eSKoB4YA=="],
-
-    "@csstools/postcss-content-alt-text": ["@csstools/postcss-content-alt-text@2.0.4", "", { "dependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-YItlZUOuZJCBlRaCf8Aucc1lgN41qYGALMly0qQllrxYJhiyzlI6RxOTMUvtWk+KhS8GphMDsDhKQ7KTPfEMSw=="],
-
-    "@csstools/postcss-exponential-functions": ["@csstools/postcss-exponential-functions@2.0.7", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-XTb6Mw0v2qXtQYRW9d9duAjDnoTbBpsngD7sRNLmYDjvwU2ebpIHplyxgOeo6jp/Kr52gkLi5VaK5RDCqzMzZQ=="],
-
-    "@csstools/postcss-font-format-keywords": ["@csstools/postcss-font-format-keywords@4.0.0", "", { "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-usBzw9aCRDvchpok6C+4TXC57btc4bJtmKQWOHQxOVKen1ZfVqBUuCZ/wuqdX5GHsD0NRSr9XTP+5ID1ZZQBXw=="],
-
-    "@csstools/postcss-gamut-mapping": ["@csstools/postcss-gamut-mapping@2.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-/K8u9ZyGMGPjmwCSIjgaOLKfic2RIGdFHHes84XW5LnmrvdhOTVxo255NppHi3ROEvoHPW7MplMJgjZK5Q+TxA=="],
-
-    "@csstools/postcss-gradients-interpolation-method": ["@csstools/postcss-gradients-interpolation-method@5.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-CoHQ/0UXrvxLovu0ZeW6c3/20hjJ/QRg6lyXm3dZLY/JgvRU6bdbQZF/Du30A4TvowfcgvIHQmP1bNXUxgDrAw=="],
-
-    "@csstools/postcss-hwb-function": ["@csstools/postcss-hwb-function@4.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-LpFKjX6hblpeqyych1cKmk+3FJZ19QmaJtqincySoMkbkG/w2tfbnO5oE6mlnCTXcGUJ0rCEuRHvTqKK0nHYUQ=="],
-
-    "@csstools/postcss-ic-unit": ["@csstools/postcss-ic-unit@4.0.0", "", { "dependencies": { "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-9QT5TDGgx7wD3EEMN3BSUG6ckb6Eh5gSPT5kZoVtUuAonfPmLDJyPhqR4ntPpMYhUKAMVKAg3I/AgzqHMSeLhA=="],
-
-    "@csstools/postcss-initial": ["@csstools/postcss-initial@2.0.1", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-L1wLVMSAZ4wovznquK0xmC7QSctzO4D0Is590bxpGqhqjboLXYA16dWZpfwImkdOgACdQ9PqXsuRroW6qPlEsg=="],
-
-    "@csstools/postcss-is-pseudo-class": ["@csstools/postcss-is-pseudo-class@5.0.1", "", { "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-JLp3POui4S1auhDR0n8wHd/zTOWmMsmK3nQd3hhL6FhWPaox5W7j1se6zXOG/aP07wV2ww0lxbKYGwbBszOtfQ=="],
-
-    "@csstools/postcss-light-dark-function": ["@csstools/postcss-light-dark-function@2.0.7", "", { "dependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-ZZ0rwlanYKOHekyIPaU+sVm3BEHCe+Ha0/px+bmHe62n0Uc1lL34vbwrLYn6ote8PHlsqzKeTQdIejQCJ05tfw=="],
-
-    "@csstools/postcss-logical-float-and-clear": ["@csstools/postcss-logical-float-and-clear@3.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-SEmaHMszwakI2rqKRJgE+8rpotFfne1ZS6bZqBoQIicFyV+xT1UF42eORPxJkVJVrH9C0ctUgwMSn3BLOIZldQ=="],
-
-    "@csstools/postcss-logical-overflow": ["@csstools/postcss-logical-overflow@2.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-spzR1MInxPuXKEX2csMamshR4LRaSZ3UXVaRGjeQxl70ySxOhMpP2252RAFsg8QyyBXBzuVOOdx1+bVO5bPIzA=="],
-
-    "@csstools/postcss-logical-overscroll-behavior": ["@csstools/postcss-logical-overscroll-behavior@2.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-e/webMjoGOSYfqLunyzByZj5KKe5oyVg/YSbie99VEaSDE2kimFm0q1f6t/6Jo+VVCQ/jbe2Xy+uX+C4xzWs4w=="],
-
-    "@csstools/postcss-logical-resize": ["@csstools/postcss-logical-resize@3.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-DFbHQOFW/+I+MY4Ycd/QN6Dg4Hcbb50elIJCfnwkRTCX05G11SwViI5BbBlg9iHRl4ytB7pmY5ieAFk3ws7yyg=="],
-
-    "@csstools/postcss-logical-viewport-units": ["@csstools/postcss-logical-viewport-units@3.0.3", "", { "dependencies": { "@csstools/css-tokenizer": "^3.0.3", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-OC1IlG/yoGJdi0Y+7duz/kU/beCwO+Gua01sD6GtOtLi7ByQUpcIqs7UE/xuRPay4cHgOMatWdnDdsIDjnWpPw=="],
-
-    "@csstools/postcss-media-minmax": ["@csstools/postcss-media-minmax@2.0.7", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/media-query-list-parser": "^4.0.2" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-LB6tIP7iBZb5CYv8iRenfBZmbaG3DWNEziOnPjGoQX5P94FBPvvTBy68b/d9NnS5PELKwFmmOYsAEIgEhDPCHA=="],
-
-    "@csstools/postcss-media-queries-aspect-ratio-number-values": ["@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.4", "", { "dependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/media-query-list-parser": "^4.0.2" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-AnGjVslHMm5xw9keusQYvjVWvuS7KWK+OJagaG0+m9QnIjZsrysD2kJP/tr/UJIyYtMCtu8OkUd+Rajb4DqtIQ=="],
-
-    "@csstools/postcss-nested-calc": ["@csstools/postcss-nested-calc@4.0.0", "", { "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-jMYDdqrQQxE7k9+KjstC3NbsmC063n1FTPLCgCRS2/qHUbHM0mNy9pIn4QIiQGs9I/Bg98vMqw7mJXBxa0N88A=="],
-
-    "@csstools/postcss-normalize-display-values": ["@csstools/postcss-normalize-display-values@4.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q=="],
-
-    "@csstools/postcss-oklab-function": ["@csstools/postcss-oklab-function@4.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-+5aPsNWgxohXoYNS1f+Ys0x3Qnfehgygv3qrPyv+Y25G0yX54/WlVB+IXprqBLOXHM1gsVF+QQSjlArhygna0Q=="],
-
-    "@csstools/postcss-progressive-custom-properties": ["@csstools/postcss-progressive-custom-properties@4.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q=="],
-
-    "@csstools/postcss-random-function": ["@csstools/postcss-random-function@1.0.3", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-dbNeEEPHxAwfQJ3duRL5IPpuD77QAHtRl4bAHRs0vOVhVbHrsL7mHnwe0irYjbs9kYwhAHZBQTLBgmvufPuRkA=="],
-
-    "@csstools/postcss-relative-color-syntax": ["@csstools/postcss-relative-color-syntax@3.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-eGE31oLnJDoUysDdjS9MLxNZdtqqSxjDXMdISpLh80QMaYrKs7VINpid34tWQ+iU23Wg5x76qAzf1Q/SLLbZVg=="],
-
-    "@csstools/postcss-scope-pseudo-class": ["@csstools/postcss-scope-pseudo-class@4.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-IMi9FwtH6LMNuLea1bjVMQAsUhFxJnyLSgOp/cpv5hrzWmrUYU5fm0EguNDIIOHUqzXode8F/1qkC/tEo/qN8Q=="],
-
-    "@csstools/postcss-sign-functions": ["@csstools/postcss-sign-functions@1.1.2", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-4EcAvXTUPh7n6UoZZkCzgtCf/wPzMlTNuddcKg7HG8ozfQkUcHsJ2faQKeLmjyKdYPyOUn4YA7yDPf8K/jfIxw=="],
-
-    "@csstools/postcss-stepped-value-functions": ["@csstools/postcss-stepped-value-functions@4.0.7", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-rdrRCKRnWtj5FyRin0u/gLla7CIvZRw/zMGI1fVJP0Sg/m1WGicjPVHRANL++3HQtsiXKAbPrcPr+VkyGck0IA=="],
-
-    "@csstools/postcss-text-decoration-shorthand": ["@csstools/postcss-text-decoration-shorthand@4.0.2", "", { "dependencies": { "@csstools/color-helpers": "^5.0.2", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-8XvCRrFNseBSAGxeaVTaNijAu+FzUvjwFXtcrynmazGb/9WUdsPCpBX+mHEHShVRq47Gy4peYAoxYs8ltUnmzA=="],
-
-    "@csstools/postcss-trigonometric-functions": ["@csstools/postcss-trigonometric-functions@4.0.7", "", { "dependencies": { "@csstools/css-calc": "^2.1.2", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-qTrZgLju3AV7Djhzuh2Bq/wjFqbcypnk0FhHjxW8DWJQcZLS1HecIus4X2/RLch1ukX7b+YYCdqbEnpIQO5ccg=="],
-
-    "@csstools/postcss-unset-value": ["@csstools/postcss-unset-value@4.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-cBz3tOCI5Fw6NIFEwU3RiwK6mn3nKegjpJuzCndoGq3BZPkUjnsq7uQmIeMNeMbMk7YD2MfKcgCpZwX5jyXqCA=="],
-
-    "@csstools/selector-resolve-nested": ["@csstools/selector-resolve-nested@3.0.0", "", { "peerDependencies": { "postcss-selector-parser": "^7.0.0" } }, "sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ=="],
-
-    "@csstools/selector-specificity": ["@csstools/selector-specificity@5.0.0", "", { "peerDependencies": { "postcss-selector-parser": "^7.0.0" } }, "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw=="],
-
-    "@csstools/utilities": ["@csstools/utilities@2.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ=="],
-
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.0", "", { "os": "aix", "cpu": "ppc64" }, "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ=="],
-
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.0", "", { "os": "android", "cpu": "arm" }, "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g=="],
-
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.0", "", { "os": "android", "cpu": "arm64" }, "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g=="],
-
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.0", "", { "os": "android", "cpu": "x64" }, "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg=="],
-
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw=="],
-
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg=="],
-
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w=="],
-
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A=="],
-
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.0", "", { "os": "linux", "cpu": "arm" }, "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg=="],
-
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg=="],
-
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.0", "", { "os": "linux", "cpu": "ia32" }, "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg=="],
-
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.0", "", { "os": "linux", "cpu": "none" }, "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw=="],
-
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.0", "", { "os": "linux", "cpu": "none" }, "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ=="],
-
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw=="],
-
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.0", "", { "os": "linux", "cpu": "none" }, "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA=="],
-
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA=="],
-
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.0", "", { "os": "linux", "cpu": "x64" }, "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw=="],
-
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.0", "", { "os": "none", "cpu": "arm64" }, "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw=="],
-
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.0", "", { "os": "none", "cpu": "x64" }, "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA=="],
-
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.0", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw=="],
-
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.0", "", { "os": "openbsd", "cpu": "x64" }, "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg=="],
-
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.0", "", { "os": "sunos", "cpu": "x64" }, "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg=="],
-
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw=="],
-
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA=="],
-
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.0", "", { "os": "win32", "cpu": "x64" }, "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ=="],
-
-    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.4.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA=="],
-
-    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
-
-    "@eslint/config-array": ["@eslint/config-array@0.19.2", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w=="],
-
-    "@eslint/config-helpers": ["@eslint/config-helpers@0.1.0", "", {}, "sha512-kLrdPDJE1ckPo94kmPPf9Hfd0DU0Jw6oKYrhe+pwSC0iTUInmTa+w6fw8sGgcfkFJGNdWOUeOaDM4quW4a7OkA=="],
-
-    "@eslint/core": ["@eslint/core@0.12.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg=="],
-
-    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.0", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ=="],
-
-    "@eslint/js": ["@eslint/js@9.22.0", "", {}, "sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ=="],
-
-    "@eslint/object-schema": ["@eslint/object-schema@2.1.6", "", {}, "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA=="],
-
-    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.7", "", { "dependencies": { "@eslint/core": "^0.12.0", "levn": "^0.4.1" } }, "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g=="],
-
-    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
-
-    "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
-
-    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
-
-    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.2", "", {}, "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ=="],
-
-    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
-
-    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.3", "", {}, "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="],
-
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
-
-    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
-
-    "@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
-
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
-
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
-
-    "@manypkg/find-root": ["@manypkg/find-root@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@types/node": "^12.7.1", "find-up": "^4.1.0", "fs-extra": "^8.1.0" } }, "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA=="],
-
-    "@manypkg/get-packages": ["@manypkg/get-packages@1.1.3", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@changesets/types": "^4.0.1", "@manypkg/find-root": "^1.1.0", "fs-extra": "^8.1.0", "globby": "^11.0.0", "read-yaml-file": "^1.1.0" } }, "sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A=="],
-
-    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
-
-    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
-
-    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
-
-    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
-
-    "@pkgr/core": ["@pkgr/core@0.1.1", "", {}, "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA=="],
-
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.35.0", "", { "os": "android", "cpu": "arm" }, "sha512-uYQ2WfPaqz5QtVgMxfN6NpLD+no0MYHDBywl7itPYd3K5TjjSghNKmX8ic9S8NU8w81NVhJv/XojcHptRly7qQ=="],
-
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.35.0", "", { "os": "android", "cpu": "arm64" }, "sha512-FtKddj9XZudurLhdJnBl9fl6BwCJ3ky8riCXjEw3/UIbjmIY58ppWwPEvU3fNu+W7FUsAsB1CdH+7EQE6CXAPA=="],
-
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.35.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Uk+GjOJR6CY844/q6r5DR/6lkPFOw0hjfOIzVx22THJXMxktXG6CbejseJFznU8vHcEBLpiXKY3/6xc+cBm65Q=="],
-
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.35.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-3IrHjfAS6Vkp+5bISNQnPogRAW5GAV1n+bNCrDwXmfMHbPl5EhTmWtfmwlJxFRUCBZ+tZ/OxDyU08aF6NI/N5Q=="],
-
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.35.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-sxjoD/6F9cDLSELuLNnY0fOrM9WA0KrM0vWm57XhrIMf5FGiN8D0l7fn+bpUeBSU7dCgPV2oX4zHAsAXyHFGcQ=="],
-
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.35.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-2mpHCeRuD1u/2kruUiHSsnjWtHjqVbzhBkNVQ1aVD63CcexKVcQGwJ2g5VphOd84GvxfSvnnlEyBtQCE5hxVVw=="],
-
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.35.0", "", { "os": "linux", "cpu": "arm" }, "sha512-mrA0v3QMy6ZSvEuLs0dMxcO2LnaCONs1Z73GUDBHWbY8tFFocM6yl7YyMu7rz4zS81NDSqhrUuolyZXGi8TEqg=="],
-
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.35.0", "", { "os": "linux", "cpu": "arm" }, "sha512-DnYhhzcvTAKNexIql8pFajr0PiDGrIsBYPRvCKlA5ixSS3uwo/CWNZxB09jhIapEIg945KOzcYEAGGSmTSpk7A=="],
-
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.35.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-uagpnH2M2g2b5iLsCTZ35CL1FgyuzzJQ8L9VtlJ+FckBXroTwNOaD0z0/UF+k5K3aNQjbm8LIVpxykUOQt1m/A=="],
-
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.35.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-XQxVOCd6VJeHQA/7YcqyV0/88N6ysSVzRjJ9I9UA/xXpEsjvAgDTgH3wQYz5bmr7SPtVK2TsP2fQ2N9L4ukoUg=="],
-
-    "@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.35.0", "", { "os": "linux", "cpu": "none" }, "sha512-5pMT5PzfgwcXEwOaSrqVsz/LvjDZt+vQ8RT/70yhPU06PTuq8WaHhfT1LW+cdD7mW6i/J5/XIkX/1tCAkh1W6g=="],
-
-    "@rollup/rollup-linux-powerpc64le-gnu": ["@rollup/rollup-linux-powerpc64le-gnu@4.35.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-c+zkcvbhbXF98f4CtEIP1EBA/lCic5xB0lToneZYvMeKu5Kamq3O8gqrxiYYLzlZH6E3Aq+TSW86E4ay8iD8EA=="],
-
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.35.0", "", { "os": "linux", "cpu": "none" }, "sha512-s91fuAHdOwH/Tad2tzTtPX7UZyytHIRR6V4+2IGlV0Cej5rkG0R61SX4l4y9sh0JBibMiploZx3oHKPnQBKe4g=="],
-
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.35.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-hQRkPQPLYJZYGP+Hj4fR9dDBMIM7zrzJDWFEMPdTnTy95Ljnv0/4w/ixFw3pTBMEuuEuoqtBINYND4M7ujcuQw=="],
-
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.35.0", "", { "os": "linux", "cpu": "x64" }, "sha512-Pim1T8rXOri+0HmV4CdKSGrqcBWX0d1HoPnQ0uw0bdp1aP5SdQVNBy8LjYncvnLgu3fnnCt17xjWGd4cqh8/hA=="],
-
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.35.0", "", { "os": "linux", "cpu": "x64" }, "sha512-QysqXzYiDvQWfUiTm8XmJNO2zm9yC9P/2Gkrwg2dH9cxotQzunBHYr6jk4SujCTqnfGxduOmQcI7c2ryuW8XVg=="],
-
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.35.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-OUOlGqPkVJCdJETKOCEf1mw848ZyJ5w50/rZ/3IBQVdLfR5jk/6Sr5m3iO2tdPgwo0x7VcncYuOvMhBWZq8ayg=="],
-
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.35.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-2/lsgejMrtwQe44glq7AFFHLfJBPafpsTa6JvP2NGef/ifOa4KBoglVf7AKN7EV9o32evBPRqfg96fEHzWo5kw=="],
-
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.35.0", "", { "os": "win32", "cpu": "x64" }, "sha512-PIQeY5XDkrOysbQblSW7v3l1MDZzkTEzAfTPkj5VAu3FW8fS4ynyLg2sINp0fp3SjZ8xkRYpLqoKcYqAkhU1dw=="],
-
-    "@swc/core": ["@swc/core@1.11.8", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.19" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.11.8", "@swc/core-darwin-x64": "1.11.8", "@swc/core-linux-arm-gnueabihf": "1.11.8", "@swc/core-linux-arm64-gnu": "1.11.8", "@swc/core-linux-arm64-musl": "1.11.8", "@swc/core-linux-x64-gnu": "1.11.8", "@swc/core-linux-x64-musl": "1.11.8", "@swc/core-win32-arm64-msvc": "1.11.8", "@swc/core-win32-ia32-msvc": "1.11.8", "@swc/core-win32-x64-msvc": "1.11.8" }, "peerDependencies": { "@swc/helpers": "*" }, "optionalPeers": ["@swc/helpers"] }, "sha512-UAL+EULxrc0J73flwYHfu29mO8CONpDJiQv1QPDXsyCvDUcEhqAqUROVTgC+wtJCFFqMQdyr4stAA5/s0KSOmA=="],
-
-    "@swc/core-darwin-arm64": ["@swc/core-darwin-arm64@1.11.8", "", { "os": "darwin", "cpu": "arm64" }, "sha512-rrSsunyJWpHN+5V1zumndwSSifmIeFQBK9i2RMQQp15PgbgUNxHK5qoET1n20pcUrmZeT6jmJaEWlQchkV//Og=="],
-
-    "@swc/core-darwin-x64": ["@swc/core-darwin-x64@1.11.8", "", { "os": "darwin", "cpu": "x64" }, "sha512-44goLqQuuo0HgWnG8qC+ZFw/qnjCVVeqffhzFr9WAXXotogVaxM8ze6egE58VWrfEc8me8yCcxOYL9RbtjhS/Q=="],
-
-    "@swc/core-linux-arm-gnueabihf": ["@swc/core-linux-arm-gnueabihf@1.11.8", "", { "os": "linux", "cpu": "arm" }, "sha512-Mzo8umKlhTWwF1v8SLuTM1z2A+P43UVhf4R8RZDhzIRBuB2NkeyE+c0gexIOJBuGSIATryuAF4O4luDu727D1w=="],
-
-    "@swc/core-linux-arm64-gnu": ["@swc/core-linux-arm64-gnu@1.11.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-EyhO6U+QdoGYC1MeHOR0pyaaSaKYyNuT4FQNZ1eZIbnuueXpuICC7iNmLIOfr3LE5bVWcZ7NKGVPlM2StJEcgA=="],
-
-    "@swc/core-linux-arm64-musl": ["@swc/core-linux-arm64-musl@1.11.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-QU6wOkZnS6/QuBN1MHD6G2BgFxB0AclvTVGbqYkRA7MsVkcC29PffESqzTXnypzB252/XkhQjoB2JIt9rPYf6A=="],
-
-    "@swc/core-linux-x64-gnu": ["@swc/core-linux-x64-gnu@1.11.8", "", { "os": "linux", "cpu": "x64" }, "sha512-r72onUEIU1iJi9EUws3R28pztQ/eM3EshNpsPRBfuLwKy+qn3et55vXOyDhIjGCUph5Eg2Yn8H3h6MTxDdLd+w=="],
-
-    "@swc/core-linux-x64-musl": ["@swc/core-linux-x64-musl@1.11.8", "", { "os": "linux", "cpu": "x64" }, "sha512-294k8cLpO103++f4ZUEDr3vnBeUfPitW6G0a3qeVZuoXFhFgaW7ANZIWknUc14WiLOMfMecphJAEiy9C8OeYSw=="],
-
-    "@swc/core-win32-arm64-msvc": ["@swc/core-win32-arm64-msvc@1.11.8", "", { "os": "win32", "cpu": "arm64" }, "sha512-EbjOzQ+B85rumHyeesBYxZ+hq3ZQn+YAAT1ZNE9xW1/8SuLoBmHy/K9YniRGVDq/2NRmp5kI5+5h5TX0asIS9A=="],
-
-    "@swc/core-win32-ia32-msvc": ["@swc/core-win32-ia32-msvc@1.11.8", "", { "os": "win32", "cpu": "ia32" }, "sha512-Z+FF5kgLHfQWIZ1KPdeInToXLzbY0sMAashjd/igKeP1Lz0qKXVAK+rpn6ASJi85Fn8wTftCGCyQUkRVn0bTDg=="],
-
-    "@swc/core-win32-x64-msvc": ["@swc/core-win32-x64-msvc@1.11.8", "", { "os": "win32", "cpu": "x64" }, "sha512-j6B6N0hChCeAISS6xp/hh6zR5CSCr037BAjCxNLsT8TGe5D+gYZ57heswUWXRH8eMKiRDGiLCYpPB2pkTqxCSw=="],
-
-    "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
-
-    "@swc/types": ["@swc/types@0.1.19", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-WkAZaAfj44kh/UFdAQcrMP1I0nwRqpt27u+08LMBYMqmQfwwMofYoMh/48NGkMMRfC4ynpfwRbJuu8ErfNloeA=="],
-
-    "@testing-library/dom": ["@testing-library/dom@10.4.0", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "pretty-format": "^27.0.2" } }, "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ=="],
-
-    "@testing-library/jest-dom": ["@testing-library/jest-dom@6.6.3", "", { "dependencies": { "@adobe/css-tools": "^4.4.0", "aria-query": "^5.0.0", "chalk": "^3.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.6.3", "lodash": "^4.17.21", "redent": "^3.0.0" } }, "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA=="],
-
-    "@testing-library/react": ["@testing-library/react@16.2.0", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "@testing-library/dom": "^10.0.0", "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ=="],
-
-    "@trysound/sax": ["@trysound/sax@0.2.0", "", {}, "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="],
-
-    "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
-
-    "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
-
-    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
-
-    "@types/node": ["@types/node@22.13.10", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw=="],
-
-    "@types/react": ["@types/react@19.0.10", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g=="],
-
-    "@types/react-dom": ["@types/react-dom@19.0.4", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg=="],
-
-    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.26.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.26.0", "@typescript-eslint/type-utils": "8.26.0", "@typescript-eslint/utils": "8.26.0", "@typescript-eslint/visitor-keys": "8.26.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q=="],
-
-    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.26.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.26.0", "@typescript-eslint/types": "8.26.0", "@typescript-eslint/typescript-estree": "8.26.0", "@typescript-eslint/visitor-keys": "8.26.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA=="],
-
-    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.26.0", "", { "dependencies": { "@typescript-eslint/types": "8.26.0", "@typescript-eslint/visitor-keys": "8.26.0" } }, "sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA=="],
-
-    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.26.0", "", { "dependencies": { "@typescript-eslint/typescript-estree": "8.26.0", "@typescript-eslint/utils": "8.26.0", "debug": "^4.3.4", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-ruk0RNChLKz3zKGn2LwXuVoeBcUMh+jaqzN461uMMdxy5H9epZqIBtYj7UiPXRuOpaALXGbmRuZQhmwHhaS04Q=="],
-
-    "@typescript-eslint/types": ["@typescript-eslint/types@8.26.0", "", {}, "sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA=="],
-
-    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.26.0", "", { "dependencies": { "@typescript-eslint/types": "8.26.0", "@typescript-eslint/visitor-keys": "8.26.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ=="],
-
-    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.26.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.26.0", "@typescript-eslint/types": "8.26.0", "@typescript-eslint/typescript-estree": "8.26.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-2L2tU3FVwhvU14LndnQCA2frYC8JnPDVKyQtWFPf8IYFMt/ykEN1bPolNhNbCVgOmdzTlWdusCTKA/9nKrf8Ig=="],
-
-    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.26.0", "", { "dependencies": { "@typescript-eslint/types": "8.26.0", "eslint-visitor-keys": "^4.2.0" } }, "sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg=="],
-
-    "@vitejs/plugin-react-swc": ["@vitejs/plugin-react-swc@3.8.0", "", { "dependencies": { "@swc/core": "^1.10.15" }, "peerDependencies": { "vite": "^4 || ^5 || ^6" } }, "sha512-T4sHPvS+DIqDP51ifPqa9XIRAz/kIvIi8oXcnOZZgHmMotgmmdxe/DD5tMFlt5nuIRzT0/QuiwmKlH0503Aapw=="],
-
-    "@vitest/coverage-v8": ["@vitest/coverage-v8@3.0.8", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@bcoe/v8-coverage": "^1.0.2", "debug": "^4.4.0", "istanbul-lib-coverage": "^3.2.2", "istanbul-lib-report": "^3.0.1", "istanbul-lib-source-maps": "^5.0.6", "istanbul-reports": "^3.1.7", "magic-string": "^0.30.17", "magicast": "^0.3.5", "std-env": "^3.8.0", "test-exclude": "^7.0.1", "tinyrainbow": "^2.0.0" }, "peerDependencies": { "@vitest/browser": "3.0.8", "vitest": "3.0.8" }, "optionalPeers": ["@vitest/browser"] }, "sha512-y7SAKsQirsEJ2F8bulBck4DoluhI2EEgTimHd6EEUgJBGKy9tC25cpywh1MH4FvDGoG2Unt7+asVd1kj4qOSAw=="],
-
-    "@vitest/expect": ["@vitest/expect@3.0.8", "", { "dependencies": { "@vitest/spy": "3.0.8", "@vitest/utils": "3.0.8", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-Xu6TTIavTvSSS6LZaA3EebWFr6tsoXPetOWNMOlc7LO88QVVBwq2oQWBoDiLCN6YTvNYsGSjqOO8CAdjom5DCQ=="],
-
-    "@vitest/mocker": ["@vitest/mocker@3.0.8", "", { "dependencies": { "@vitest/spy": "3.0.8", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["msw", "vite"] }, "sha512-n3LjS7fcW1BCoF+zWZxG7/5XvuYH+lsFg+BDwwAz0arIwHQJFUEsKBQ0BLU49fCxuM/2HSeBPHQD8WjgrxMfow=="],
-
-    "@vitest/pretty-format": ["@vitest/pretty-format@3.0.8", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-BNqwbEyitFhzYMYHUVbIvepOyeQOSFA/NeJMIP9enMntkkxLgOcgABH6fjyXG85ipTgvero6noreavGIqfJcIg=="],
-
-    "@vitest/runner": ["@vitest/runner@3.0.8", "", { "dependencies": { "@vitest/utils": "3.0.8", "pathe": "^2.0.3" } }, "sha512-c7UUw6gEcOzI8fih+uaAXS5DwjlBaCJUo7KJ4VvJcjL95+DSR1kova2hFuRt3w41KZEFcOEiq098KkyrjXeM5w=="],
-
-    "@vitest/snapshot": ["@vitest/snapshot@3.0.8", "", { "dependencies": { "@vitest/pretty-format": "3.0.8", "magic-string": "^0.30.17", "pathe": "^2.0.3" } }, "sha512-x8IlMGSEMugakInj44nUrLSILh/zy1f2/BgH0UeHpNyOocG18M9CWVIFBaXPt8TrqVZWmcPjwfG/ht5tnpba8A=="],
-
-    "@vitest/spy": ["@vitest/spy@3.0.8", "", { "dependencies": { "tinyspy": "^3.0.2" } }, "sha512-MR+PzJa+22vFKYb934CejhR4BeRpMSoxkvNoDit68GQxRLSf11aT6CTj3XaqUU9rxgWJFnqicN/wxw6yBRkI1Q=="],
-
-    "@vitest/utils": ["@vitest/utils@3.0.8", "", { "dependencies": { "@vitest/pretty-format": "3.0.8", "loupe": "^3.1.3", "tinyrainbow": "^2.0.0" } }, "sha512-nkBC3aEhfX2PdtQI/QwAWp8qZWwzASsU4Npbcd5RdMPBSSLCpkZp52P3xku3s3uA0HIEhGvEcF8rNkBsz9dQ4Q=="],
-
-    "acorn": ["acorn@8.14.1", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="],
-
-    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
-
-    "agent-base": ["agent-base@7.1.3", "", {}, "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw=="],
-
-    "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
-
-    "ansi-colors": ["ansi-colors@4.1.3", "", {}, "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="],
-
-    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
-
-    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
-
-    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
-
-    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
-
-    "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
-
-    "array-buffer-byte-length": ["array-buffer-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "is-array-buffer": "^3.0.5" } }, "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw=="],
-
-    "array-includes": ["array-includes@3.1.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.2", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.4", "is-string": "^1.0.7" } }, "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ=="],
-
-    "array-union": ["array-union@2.1.0", "", {}, "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="],
-
-    "array.prototype.findlast": ["array.prototype.findlast@1.2.5", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.2", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "es-shim-unscopables": "^1.0.2" } }, "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ=="],
-
-    "array.prototype.flat": ["array.prototype.flat@1.3.3", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.5", "es-shim-unscopables": "^1.0.2" } }, "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg=="],
-
-    "array.prototype.flatmap": ["array.prototype.flatmap@1.3.3", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.5", "es-shim-unscopables": "^1.0.2" } }, "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg=="],
-
-    "array.prototype.tosorted": ["array.prototype.tosorted@1.1.4", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.3", "es-errors": "^1.3.0", "es-shim-unscopables": "^1.0.2" } }, "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA=="],
-
-    "arraybuffer.prototype.slice": ["arraybuffer.prototype.slice@1.0.4", "", { "dependencies": { "array-buffer-byte-length": "^1.0.1", "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.5", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "is-array-buffer": "^3.0.4" } }, "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ=="],
-
-    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
-
-    "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
-
-    "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
-
-    "autoprefixer": ["autoprefixer@10.4.21", "", { "dependencies": { "browserslist": "^4.24.4", "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ=="],
-
-    "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
-
-    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "better-path-resolve": ["better-path-resolve@1.0.0", "", { "dependencies": { "is-windows": "^1.0.0" } }, "sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g=="],
-
-    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
-
-    "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
-
-    "brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
-
-    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
-
-    "browserslist": ["browserslist@4.24.4", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A=="],
-
-    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
-
-    "call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
-
-    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
-
-    "call-bound": ["call-bound@1.0.4", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
-
-    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
-
-    "caniuse-api": ["caniuse-api@3.0.0", "", { "dependencies": { "browserslist": "^4.0.0", "caniuse-lite": "^1.0.0", "lodash.memoize": "^4.1.2", "lodash.uniq": "^4.5.0" } }, "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw=="],
-
-    "caniuse-lite": ["caniuse-lite@1.0.30001703", "", {}, "sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ=="],
-
-    "chai": ["chai@5.2.0", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw=="],
-
-    "chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="],
-
-    "chardet": ["chardet@0.7.0", "", {}, "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="],
-
-    "check-error": ["check-error@2.1.1", "", {}, "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw=="],
-
-    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
-
-    "ci-info": ["ci-info@3.9.0", "", {}, "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ=="],
-
-    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
-
-    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
-
-    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
-
-    "colord": ["colord@2.9.3", "", {}, "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="],
-
-    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
-
-    "commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
-
-    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
-
-    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
-
-    "css-blank-pseudo": ["css-blank-pseudo@7.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-jf+twWGDf6LDoXDUode+nc7ZlrqfaNphrBIBrcmeP3D8yw1uPaix1gCC8LUQUGQ6CycuK2opkbFFWFuq/a94ag=="],
-
-    "css-declaration-sorter": ["css-declaration-sorter@7.2.0", "", { "peerDependencies": { "postcss": "^8.0.9" } }, "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow=="],
-
-    "css-has-pseudo": ["css-has-pseudo@7.0.2", "", { "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-nzol/h+E0bId46Kn2dQH5VElaknX2Sr0hFuB/1EomdC7j+OISt2ZzK7EHX9DZDY53WbIVAR7FYKSO2XnSf07MQ=="],
-
-    "css-prefers-color-scheme": ["css-prefers-color-scheme@10.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-VCtXZAWivRglTZditUfB4StnsWr6YVZ2PRtuxQLKTNRdtAf8tpzaVPE9zXIF3VaSc7O70iK/j1+NXxyQCqdPjQ=="],
-
-    "css-select": ["css-select@5.1.0", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg=="],
-
-    "css-tree": ["css-tree@2.3.1", "", { "dependencies": { "mdn-data": "2.0.30", "source-map-js": "^1.0.1" } }, "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw=="],
-
-    "css-what": ["css-what@6.1.0", "", {}, "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="],
-
-    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
-
-    "cssdb": ["cssdb@8.2.3", "", {}, "sha512-9BDG5XmJrJQQnJ51VFxXCAtpZ5ebDlAREmO8sxMOVU0aSxN/gocbctjIG5LMh3WBUq+xTlb/jw2LoljBEqraTA=="],
-
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
-    "cssnano": ["cssnano@7.0.6", "", { "dependencies": { "cssnano-preset-default": "^7.0.6", "lilconfig": "^3.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-54woqx8SCbp8HwvNZYn68ZFAepuouZW4lTwiMVnBErM3VkO7/Sd4oTOt3Zz3bPx3kxQ36aISppyXj2Md4lg8bw=="],
-
-    "cssnano-preset-default": ["cssnano-preset-default@7.0.6", "", { "dependencies": { "browserslist": "^4.23.3", "css-declaration-sorter": "^7.2.0", "cssnano-utils": "^5.0.0", "postcss-calc": "^10.0.2", "postcss-colormin": "^7.0.2", "postcss-convert-values": "^7.0.4", "postcss-discard-comments": "^7.0.3", "postcss-discard-duplicates": "^7.0.1", "postcss-discard-empty": "^7.0.0", "postcss-discard-overridden": "^7.0.0", "postcss-merge-longhand": "^7.0.4", "postcss-merge-rules": "^7.0.4", "postcss-minify-font-values": "^7.0.0", "postcss-minify-gradients": "^7.0.0", "postcss-minify-params": "^7.0.2", "postcss-minify-selectors": "^7.0.4", "postcss-normalize-charset": "^7.0.0", "postcss-normalize-display-values": "^7.0.0", "postcss-normalize-positions": "^7.0.0", "postcss-normalize-repeat-style": "^7.0.0", "postcss-normalize-string": "^7.0.0", "postcss-normalize-timing-functions": "^7.0.0", "postcss-normalize-unicode": "^7.0.2", "postcss-normalize-url": "^7.0.0", "postcss-normalize-whitespace": "^7.0.0", "postcss-ordered-values": "^7.0.1", "postcss-reduce-initial": "^7.0.2", "postcss-reduce-transforms": "^7.0.0", "postcss-svgo": "^7.0.1", "postcss-unique-selectors": "^7.0.3" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-ZzrgYupYxEvdGGuqL+JKOY70s7+saoNlHSCK/OGn1vB2pQK8KSET8jvenzItcY+kA7NoWvfbb/YhlzuzNKjOhQ=="],
-
-    "cssnano-utils": ["cssnano-utils@5.0.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ=="],
-
-    "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="],
-
-    "cssstyle": ["cssstyle@4.3.0", "", { "dependencies": { "@asamuzakjp/css-color": "^3.1.1", "rrweb-cssom": "^0.8.0" } }, "sha512-6r0NiY0xizYqfBvWp1G7WXJ06/bZyrk7Dc6PHql82C/pKGUTKu4yAX4Y8JPamb1ob9nBKuxWzCGTRuGwU3yxJQ=="],
-
-    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
-
-    "data-urls": ["data-urls@5.0.0", "", { "dependencies": { "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.0.0" } }, "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg=="],
-
-    "data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
-
-    "data-view-byte-length": ["data-view-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ=="],
-
-    "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
-
-    "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
-
-    "decimal.js": ["decimal.js@10.5.0", "", {}, "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw=="],
-
-    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
-
-    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
-
-    "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
-
-    "define-lazy-prop": ["define-lazy-prop@2.0.0", "", {}, "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og=="],
-
-    "define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
-
-    "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
-
-    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
-
-    "detect-indent": ["detect-indent@6.1.0", "", {}, "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA=="],
-
-    "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],
-
-    "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
-
-    "dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
-
-    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
-
-    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
-
-    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
-
-    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
-
-    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
-
-    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
-
-    "electron-to-chromium": ["electron-to-chromium@1.5.113", "", {}, "sha512-wjT2O4hX+wdWPJ76gWSkMhcHAV2PTMX+QetUCPYEdCIe+cxmgzzSSiGRCKW8nuh4mwKZlpv0xvoW7OF2X+wmHg=="],
-
-    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "enquirer": ["enquirer@2.4.1", "", { "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" } }, "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ=="],
-
-    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
-
-    "es-abstract": ["es-abstract@1.23.9", "", { "dependencies": { "array-buffer-byte-length": "^1.0.2", "arraybuffer.prototype.slice": "^1.0.4", "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "call-bound": "^1.0.3", "data-view-buffer": "^1.0.2", "data-view-byte-length": "^1.0.2", "data-view-byte-offset": "^1.0.1", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "es-set-tostringtag": "^2.1.0", "es-to-primitive": "^1.3.0", "function.prototype.name": "^1.1.8", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.0", "get-symbol-description": "^1.1.0", "globalthis": "^1.0.4", "gopd": "^1.2.0", "has-property-descriptors": "^1.0.2", "has-proto": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "internal-slot": "^1.1.0", "is-array-buffer": "^3.0.5", "is-callable": "^1.2.7", "is-data-view": "^1.0.2", "is-regex": "^1.2.1", "is-shared-array-buffer": "^1.0.4", "is-string": "^1.1.1", "is-typed-array": "^1.1.15", "is-weakref": "^1.1.0", "math-intrinsics": "^1.1.0", "object-inspect": "^1.13.3", "object-keys": "^1.1.1", "object.assign": "^4.1.7", "own-keys": "^1.0.1", "regexp.prototype.flags": "^1.5.3", "safe-array-concat": "^1.1.3", "safe-push-apply": "^1.0.0", "safe-regex-test": "^1.1.0", "set-proto": "^1.0.0", "string.prototype.trim": "^1.2.10", "string.prototype.trimend": "^1.0.9", "string.prototype.trimstart": "^1.0.8", "typed-array-buffer": "^1.0.3", "typed-array-byte-length": "^1.0.3", "typed-array-byte-offset": "^1.0.4", "typed-array-length": "^1.0.7", "unbox-primitive": "^1.1.0", "which-typed-array": "^1.1.18" } }, "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA=="],
-
-    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
-
-    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
-
-    "es-iterator-helpers": ["es-iterator-helpers@1.2.1", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-abstract": "^1.23.6", "es-errors": "^1.3.0", "es-set-tostringtag": "^2.0.3", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.6", "globalthis": "^1.0.4", "gopd": "^1.2.0", "has-property-descriptors": "^1.0.2", "has-proto": "^1.2.0", "has-symbols": "^1.1.0", "internal-slot": "^1.1.0", "iterator.prototype": "^1.1.4", "safe-array-concat": "^1.1.3" } }, "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w=="],
-
-    "es-module-lexer": ["es-module-lexer@1.6.0", "", {}, "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ=="],
-
-    "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
-
-    "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
-
-    "es-shim-unscopables": ["es-shim-unscopables@1.1.0", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw=="],
-
-    "es-to-primitive": ["es-to-primitive@1.3.0", "", { "dependencies": { "is-callable": "^1.2.7", "is-date-object": "^1.0.5", "is-symbol": "^1.0.4" } }, "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g=="],
-
-    "esbuild": ["esbuild@0.25.0", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.0", "@esbuild/android-arm": "0.25.0", "@esbuild/android-arm64": "0.25.0", "@esbuild/android-x64": "0.25.0", "@esbuild/darwin-arm64": "0.25.0", "@esbuild/darwin-x64": "0.25.0", "@esbuild/freebsd-arm64": "0.25.0", "@esbuild/freebsd-x64": "0.25.0", "@esbuild/linux-arm": "0.25.0", "@esbuild/linux-arm64": "0.25.0", "@esbuild/linux-ia32": "0.25.0", "@esbuild/linux-loong64": "0.25.0", "@esbuild/linux-mips64el": "0.25.0", "@esbuild/linux-ppc64": "0.25.0", "@esbuild/linux-riscv64": "0.25.0", "@esbuild/linux-s390x": "0.25.0", "@esbuild/linux-x64": "0.25.0", "@esbuild/netbsd-arm64": "0.25.0", "@esbuild/netbsd-x64": "0.25.0", "@esbuild/openbsd-arm64": "0.25.0", "@esbuild/openbsd-x64": "0.25.0", "@esbuild/sunos-x64": "0.25.0", "@esbuild/win32-arm64": "0.25.0", "@esbuild/win32-ia32": "0.25.0", "@esbuild/win32-x64": "0.25.0" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw=="],
-
-    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
-
-    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
-
-    "eslint": ["eslint@9.22.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.2", "@eslint/config-helpers": "^0.1.0", "@eslint/core": "^0.12.0", "@eslint/eslintrc": "^3.3.0", "@eslint/js": "9.22.0", "@eslint/plugin-kit": "^0.2.7", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.3.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-9V/QURhsRN40xuHXWjV64yvrzMjcz7ZyNoF2jJFmy9j/SLk0u1OLSZgXi28MrXjymnjEGSR80WCdab3RGMDveQ=="],
-
-    "eslint-config-prettier": ["eslint-config-prettier@10.1.1", "", { "peerDependencies": { "eslint": ">=7.0.0" }, "bin": { "eslint-config-prettier": "bin/cli.js" } }, "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw=="],
-
-    "eslint-plugin-prettier": ["eslint-plugin-prettier@5.2.3", "", { "dependencies": { "prettier-linter-helpers": "^1.0.0", "synckit": "^0.9.1" }, "peerDependencies": { "@types/eslint": ">=8.0.0", "eslint": ">=8.0.0", "eslint-config-prettier": "*", "prettier": ">=3.0.0" }, "optionalPeers": ["@types/eslint", "eslint-config-prettier"] }, "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw=="],
-
-    "eslint-plugin-react": ["eslint-plugin-react@7.37.4", "", { "dependencies": { "array-includes": "^3.1.8", "array.prototype.findlast": "^1.2.5", "array.prototype.flatmap": "^1.3.3", "array.prototype.tosorted": "^1.1.4", "doctrine": "^2.1.0", "es-iterator-helpers": "^1.2.1", "estraverse": "^5.3.0", "hasown": "^2.0.2", "jsx-ast-utils": "^2.4.1 || ^3.0.0", "minimatch": "^3.1.2", "object.entries": "^1.1.8", "object.fromentries": "^2.0.8", "object.values": "^1.2.1", "prop-types": "^15.8.1", "resolve": "^2.0.0-next.5", "semver": "^6.3.1", "string.prototype.matchall": "^4.0.12", "string.prototype.repeat": "^1.0.0" }, "peerDependencies": { "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" } }, "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ=="],
-
-    "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@5.2.0", "", { "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" } }, "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg=="],
-
-    "eslint-scope": ["eslint-scope@8.3.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ=="],
-
-    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.0", "", {}, "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw=="],
-
-    "espree": ["espree@10.3.0", "", { "dependencies": { "acorn": "^8.14.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.0" } }, "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg=="],
-
-    "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
-
-    "esquery": ["esquery@1.6.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg=="],
-
-    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
-
-    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
-
-    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
-    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
-
-    "expect-type": ["expect-type@1.2.0", "", {}, "sha512-80F22aiJ3GLyVnS/B3HzgR6RelZVumzj9jkL0Rhz4h0xYbNW9PjlQz5h3J/SShErbXBc295vseR4/MIbVmUbeA=="],
-
-    "extendable-error": ["extendable-error@0.1.7", "", {}, "sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg=="],
-
-    "external-editor": ["external-editor@3.1.0", "", { "dependencies": { "chardet": "^0.7.0", "iconv-lite": "^0.4.24", "tmp": "^0.0.33" } }, "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew=="],
-
-    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
-
-    "fast-diff": ["fast-diff@1.3.0", "", {}, "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="],
-
-    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
-
-    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
-
-    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
-
-    "fastq": ["fastq@1.19.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ=="],
-
-    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
-
-    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
-
-    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
-
-    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
-
-    "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
-
-    "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
-
-    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
-
-    "form-data": ["form-data@4.0.2", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "mime-types": "^2.1.12" } }, "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w=="],
-
-    "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
-
-    "fs-extra": ["fs-extra@7.0.1", "", { "dependencies": { "graceful-fs": "^4.1.2", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw=="],
-
-    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
-
-    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
-
-    "function.prototype.name": ["function.prototype.name@1.1.8", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "functions-have-names": "^1.2.3", "hasown": "^2.0.2", "is-callable": "^1.2.7" } }, "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q=="],
-
-    "functions-have-names": ["functions-have-names@1.2.3", "", {}, "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="],
-
-    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
-
-    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
-
-    "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
-
-    "get-symbol-description": ["get-symbol-description@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6" } }, "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg=="],
-
-    "glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
-
-    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
-
-    "globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
-
-    "globalthis": ["globalthis@1.0.4", "", { "dependencies": { "define-properties": "^1.2.1", "gopd": "^1.0.1" } }, "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ=="],
-
-    "globby": ["globby@11.1.0", "", { "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", "fast-glob": "^3.2.9", "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" } }, "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="],
-
-    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
-
-    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
-
-    "graphemer": ["graphemer@1.4.0", "", {}, "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="],
-
-    "has-bigints": ["has-bigints@1.1.0", "", {}, "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg=="],
-
-    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
-
-    "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],
-
-    "has-proto": ["has-proto@1.2.0", "", { "dependencies": { "dunder-proto": "^1.0.0" } }, "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ=="],
-
-    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
-
-    "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
-
-    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
-
-    "html-encoding-sniffer": ["html-encoding-sniffer@4.0.0", "", { "dependencies": { "whatwg-encoding": "^3.1.1" } }, "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ=="],
-
-    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
-
-    "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
-
-    "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
-
-    "human-id": ["human-id@4.1.1", "", { "bin": { "human-id": "dist/cli.js" } }, "sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg=="],
-
-    "iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
-
-    "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
-
-    "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
-
-    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
-
-    "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
-
-    "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
-
-    "is-array-buffer": ["is-array-buffer@3.0.5", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A=="],
-
-    "is-async-function": ["is-async-function@2.1.1", "", { "dependencies": { "async-function": "^1.0.0", "call-bound": "^1.0.3", "get-proto": "^1.0.1", "has-tostringtag": "^1.0.2", "safe-regex-test": "^1.1.0" } }, "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ=="],
-
-    "is-bigint": ["is-bigint@1.1.0", "", { "dependencies": { "has-bigints": "^1.0.2" } }, "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ=="],
-
-    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
-
-    "is-boolean-object": ["is-boolean-object@1.2.2", "", { "dependencies": { "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" } }, "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A=="],
-
-    "is-callable": ["is-callable@1.2.7", "", {}, "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="],
-
-    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
-
-    "is-data-view": ["is-data-view@1.0.2", "", { "dependencies": { "call-bound": "^1.0.2", "get-intrinsic": "^1.2.6", "is-typed-array": "^1.1.13" } }, "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw=="],
-
-    "is-date-object": ["is-date-object@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "has-tostringtag": "^1.0.2" } }, "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg=="],
-
-    "is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
-
-    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
-
-    "is-finalizationregistry": ["is-finalizationregistry@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg=="],
-
-    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
-
-    "is-generator-function": ["is-generator-function@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "get-proto": "^1.0.0", "has-tostringtag": "^1.0.2", "safe-regex-test": "^1.1.0" } }, "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ=="],
-
-    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
-
-    "is-map": ["is-map@2.0.3", "", {}, "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw=="],
-
-    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
-
-    "is-number-object": ["is-number-object@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" } }, "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw=="],
-
-    "is-potential-custom-element-name": ["is-potential-custom-element-name@1.0.1", "", {}, "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="],
-
-    "is-regex": ["is-regex@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g=="],
-
-    "is-set": ["is-set@2.0.3", "", {}, "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg=="],
-
-    "is-shared-array-buffer": ["is-shared-array-buffer@1.0.4", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A=="],
-
-    "is-string": ["is-string@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" } }, "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA=="],
-
-    "is-subdir": ["is-subdir@1.2.0", "", { "dependencies": { "better-path-resolve": "1.0.0" } }, "sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw=="],
-
-    "is-symbol": ["is-symbol@1.1.1", "", { "dependencies": { "call-bound": "^1.0.2", "has-symbols": "^1.1.0", "safe-regex-test": "^1.1.0" } }, "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w=="],
-
-    "is-typed-array": ["is-typed-array@1.1.15", "", { "dependencies": { "which-typed-array": "^1.1.16" } }, "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ=="],
-
-    "is-weakmap": ["is-weakmap@2.0.2", "", {}, "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w=="],
-
-    "is-weakref": ["is-weakref@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew=="],
-
-    "is-weakset": ["is-weakset@2.0.4", "", { "dependencies": { "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ=="],
-
-    "is-windows": ["is-windows@1.0.2", "", {}, "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="],
-
-    "is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
-
-    "isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
-
-    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
-
-    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
-
-    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
-
-    "istanbul-lib-source-maps": ["istanbul-lib-source-maps@5.0.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.23", "debug": "^4.1.1", "istanbul-lib-coverage": "^3.0.0" } }, "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A=="],
-
-    "istanbul-reports": ["istanbul-reports@3.1.7", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g=="],
-
-    "iterator.prototype": ["iterator.prototype@1.1.5", "", { "dependencies": { "define-data-property": "^1.1.4", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.6", "get-proto": "^1.0.0", "has-symbols": "^1.1.0", "set-function-name": "^2.0.2" } }, "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g=="],
-
-    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
-
-    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
-
-    "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
-
-    "jsdom": ["jsdom@26.0.0", "", { "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", "form-data": "^4.0.1", "html-encoding-sniffer": "^4.0.0", "http-proxy-agent": "^7.0.2", "https-proxy-agent": "^7.0.6", "is-potential-custom-element-name": "^1.0.1", "nwsapi": "^2.2.16", "parse5": "^7.2.1", "rrweb-cssom": "^0.8.0", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^5.0.0", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^7.0.0", "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.1.0", "ws": "^8.18.0", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.0.0" }, "optionalPeers": ["canvas"] }, "sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw=="],
-
-    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
-
-    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
-
-    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
-
-    "jsonfile": ["jsonfile@4.0.0", "", { "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg=="],
-
-    "jsx-ast-utils": ["jsx-ast-utils@3.3.5", "", { "dependencies": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", "object.assign": "^4.1.4", "object.values": "^1.1.6" } }, "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ=="],
-
-    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
-
-    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
-
-    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
-
-    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
-
-    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
-
-    "lodash.memoize": ["lodash.memoize@4.1.2", "", {}, "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="],
-
-    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
-
-    "lodash.startcase": ["lodash.startcase@4.4.0", "", {}, "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg=="],
-
-    "lodash.uniq": ["lodash.uniq@4.5.0", "", {}, "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="],
-
-    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
-
-    "loupe": ["loupe@3.1.3", "", {}, "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug=="],
-
-    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
-
-    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
-
-    "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
-
-    "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],
-
-    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
-
-    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
-
-    "mdn-data": ["mdn-data@2.0.30", "", {}, "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="],
-
-    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
-
-    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
-
-    "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
-
-    "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
-
-    "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
-
-    "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
-
-    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
-
-    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
-
-    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
-
-    "nanoid": ["nanoid@3.3.9", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg=="],
-
-    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
-
-    "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
-
-    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
-
-    "normalize-range": ["normalize-range@0.1.2", "", {}, "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="],
-
-    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
-
-    "nwsapi": ["nwsapi@2.2.18", "", {}, "sha512-p1TRH/edngVEHVbwqWnxUViEmq5znDvyB+Sik5cmuLpGOIfDf/39zLiq3swPF8Vakqn+gvNiOQAZu8djYlQILA=="],
-
-    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
-
-    "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
-
-    "object-keys": ["object-keys@1.1.1", "", {}, "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="],
-
-    "object.assign": ["object.assign@4.1.7", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0", "has-symbols": "^1.1.0", "object-keys": "^1.1.1" } }, "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw=="],
-
-    "object.entries": ["object.entries@1.1.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ=="],
-
-    "object.fromentries": ["object.fromentries@2.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.2", "es-object-atoms": "^1.0.0" } }, "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ=="],
-
-    "object.values": ["object.values@1.2.1", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA=="],
-
-    "open": ["open@8.4.2", "", { "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" } }, "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ=="],
-
-    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
-
-    "os-tmpdir": ["os-tmpdir@1.0.2", "", {}, "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="],
-
-    "outdent": ["outdent@0.5.0", "", {}, "sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q=="],
-
-    "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
-
-    "p-filter": ["p-filter@2.1.0", "", { "dependencies": { "p-map": "^2.0.0" } }, "sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw=="],
-
-    "p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
-
-    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
-
-    "p-map": ["p-map@7.0.3", "", {}, "sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA=="],
-
-    "p-try": ["p-try@2.2.0", "", {}, "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="],
-
-    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
-
-    "package-manager-detector": ["package-manager-detector@0.2.11", "", { "dependencies": { "quansync": "^0.2.7" } }, "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ=="],
-
-    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
-
-    "parse5": ["parse5@7.2.1", "", { "dependencies": { "entities": "^4.5.0" } }, "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ=="],
-
-    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
-
-    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
-
-    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
-
-    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
-
-    "path-type": ["path-type@4.0.0", "", {}, "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="],
-
-    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
-
-    "pathval": ["pathval@2.0.0", "", {}, "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA=="],
-
-    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
-
-    "picomatch": ["picomatch@4.0.2", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
-
-    "pify": ["pify@4.0.1", "", {}, "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="],
-
-    "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
-
-    "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
-
-    "postcss-attribute-case-insensitive": ["postcss-attribute-case-insensitive@7.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-Uai+SupNSqzlschRyNx3kbCTWgY/2hcwtHEI/ej2LJWc9JJ77qKgGptd8DHwY1mXtZ7Aoh4z4yxfwMBue9eNgw=="],
-
-    "postcss-calc": ["postcss-calc@10.1.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.38" } }, "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw=="],
-
-    "postcss-clamp": ["postcss-clamp@4.1.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.6" } }, "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow=="],
-
-    "postcss-color-functional-notation": ["postcss-color-functional-notation@7.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-S/TpMKVKofNvsxfau/+bw+IA6cSfB6/kmzFj5szUofHOVnFFMB2WwK+Zu07BeMD8T0n+ZnTO5uXiMvAKe2dPkA=="],
-
-    "postcss-color-hex-alpha": ["postcss-color-hex-alpha@10.0.0", "", { "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-1kervM2cnlgPs2a8Vt/Qbe5cQ++N7rkYo/2rz2BkqJZIHQwaVuJgQH38REHrAi4uM0b1fqxMkWYmese94iMp3w=="],
-
-    "postcss-color-rebeccapurple": ["postcss-color-rebeccapurple@10.0.0", "", { "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-JFta737jSP+hdAIEhk1Vs0q0YF5P8fFcj+09pweS8ktuGuZ8pPlykHsk6mPxZ8awDl4TrcxUqJo9l1IhVr/OjQ=="],
-
-    "postcss-colormin": ["postcss-colormin@7.0.2", "", { "dependencies": { "browserslist": "^4.23.3", "caniuse-api": "^3.0.0", "colord": "^2.9.3", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-YntRXNngcvEvDbEjTdRWGU606eZvB5prmHG4BF0yLmVpamXbpsRJzevyy6MZVyuecgzI2AWAlvFi8DAeCqwpvA=="],
-
-    "postcss-convert-values": ["postcss-convert-values@7.0.4", "", { "dependencies": { "browserslist": "^4.23.3", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-e2LSXPqEHVW6aoGbjV9RsSSNDO3A0rZLCBxN24zvxF25WknMPpX8Dm9UxxThyEbaytzggRuZxaGXqaOhxQ514Q=="],
-
-    "postcss-custom-media": ["postcss-custom-media@11.0.5", "", { "dependencies": { "@csstools/cascade-layer-name-parser": "^2.0.4", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/media-query-list-parser": "^4.0.2" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-SQHhayVNgDvSAdX9NQ/ygcDQGEY+aSF4b/96z7QUX6mqL5yl/JgG/DywcF6fW9XbnCRE+aVYk+9/nqGuzOPWeQ=="],
-
-    "postcss-custom-properties": ["postcss-custom-properties@14.0.4", "", { "dependencies": { "@csstools/cascade-layer-name-parser": "^2.0.4", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-QnW8FCCK6q+4ierwjnmXF9Y9KF8q0JkbgVfvQEMa93x1GT8FvOiUevWCN2YLaOWyByeDX8S6VFbZEeWoAoXs2A=="],
-
-    "postcss-custom-selectors": ["postcss-custom-selectors@8.0.4", "", { "dependencies": { "@csstools/cascade-layer-name-parser": "^2.0.4", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-ASOXqNvDCE0dAJ/5qixxPeL1aOVGHGW2JwSy7HyjWNbnWTQCl+fDc968HY1jCmZI0+BaYT5CxsOiUhavpG/7eg=="],
-
-    "postcss-dir-pseudo-class": ["postcss-dir-pseudo-class@9.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-tRBEK0MHYvcMUrAuYMEOa0zg9APqirBcgzi6P21OhxtJyJADo/SWBwY1CAwEohQ/6HDaa9jCjLRG7K3PVQYHEA=="],
-
-    "postcss-discard-comments": ["postcss-discard-comments@7.0.3", "", { "dependencies": { "postcss-selector-parser": "^6.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-q6fjd4WU4afNhWOA2WltHgCbkRhZPgQe7cXF74fuVB/ge4QbM9HEaOIzGSiMvM+g/cOsNAUGdf2JDzqA2F8iLA=="],
-
-    "postcss-discard-duplicates": ["postcss-discard-duplicates@7.0.1", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-oZA+v8Jkpu1ct/xbbrntHRsfLGuzoP+cpt0nJe5ED2FQF8n8bJtn7Bo28jSmBYwqgqnqkuSXJfSUEE7if4nClQ=="],
-
-    "postcss-discard-empty": ["postcss-discard-empty@7.0.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA=="],
-
-    "postcss-discard-overridden": ["postcss-discard-overridden@7.0.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-GmNAzx88u3k2+sBTZrJSDauR0ccpE24omTQCVmaTTZFz1du6AasspjaUPMJ2ud4RslZpoFKyf+6MSPETLojc6w=="],
-
-    "postcss-double-position-gradients": ["postcss-double-position-gradients@6.0.0", "", { "dependencies": { "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-JkIGah3RVbdSEIrcobqj4Gzq0h53GG4uqDPsho88SgY84WnpkTpI0k50MFK/sX7XqVisZ6OqUfFnoUO6m1WWdg=="],
-
-    "postcss-focus-visible": ["postcss-focus-visible@10.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-U58wyjS/I1GZgjRok33aE8juW9qQgQUNwTSdxQGuShHzwuYdcklnvK/+qOWX1Q9kr7ysbraQ6ht6r+udansalA=="],
-
-    "postcss-focus-within": ["postcss-focus-within@9.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-fzNUyS1yOYa7mOjpci/bR+u+ESvdar6hk8XNK/TRR0fiGTp2QT5N+ducP0n3rfH/m9I7H/EQU6lsa2BrgxkEjw=="],
-
-    "postcss-font-variant": ["postcss-font-variant@5.0.0", "", { "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="],
-
-    "postcss-gap-properties": ["postcss-gap-properties@6.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-Om0WPjEwiM9Ru+VhfEDPZJAKWUd0mV1HmNXqp2C29z80aQ2uP9UVhLc7e3aYMIor/S5cVhoPgYQ7RtfeZpYTRw=="],
-
-    "postcss-image-set-function": ["postcss-image-set-function@7.0.0", "", { "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-QL7W7QNlZuzOwBTeXEmbVckNt1FSmhQtbMRvGGqqU4Nf4xk6KUEQhAoWuMzwbSv5jxiRiSZ5Tv7eiDB9U87znA=="],
-
-    "postcss-lab-function": ["postcss-lab-function@7.0.8", "", { "dependencies": { "@csstools/css-color-parser": "^3.0.8", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-plV21I86Hg9q8omNz13G9fhPtLopIWH06bt/Cb5cs1XnaGU2kUtEitvVd4vtQb/VqCdNUHK5swKn3QFmMRbpDg=="],
-
-    "postcss-logical": ["postcss-logical@8.1.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-pL1hXFQ2fEXNKiNiAgtfA005T9FBxky5zkX6s4GZM2D8RkVgRqz3f4g1JUoq925zXv495qk8UNldDwh8uGEDoA=="],
-
-    "postcss-merge-longhand": ["postcss-merge-longhand@7.0.4", "", { "dependencies": { "postcss-value-parser": "^4.2.0", "stylehacks": "^7.0.4" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-zer1KoZA54Q8RVHKOY5vMke0cCdNxMP3KBfDerjH/BYHh4nCIh+1Yy0t1pAEQF18ac/4z3OFclO+ZVH8azjR4A=="],
-
-    "postcss-merge-rules": ["postcss-merge-rules@7.0.4", "", { "dependencies": { "browserslist": "^4.23.3", "caniuse-api": "^3.0.0", "cssnano-utils": "^5.0.0", "postcss-selector-parser": "^6.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-ZsaamiMVu7uBYsIdGtKJ64PkcQt6Pcpep/uO90EpLS3dxJi6OXamIobTYcImyXGoW0Wpugh7DSD3XzxZS9JCPg=="],
-
-    "postcss-minify-font-values": ["postcss-minify-font-values@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-2ckkZtgT0zG8SMc5aoNwtm5234eUx1GGFJKf2b1bSp8UflqaeFzR50lid4PfqVI9NtGqJ2J4Y7fwvnP/u1cQog=="],
-
-    "postcss-minify-gradients": ["postcss-minify-gradients@7.0.0", "", { "dependencies": { "colord": "^2.9.3", "cssnano-utils": "^5.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-pdUIIdj/C93ryCHew0UgBnL2DtUS3hfFa5XtERrs4x+hmpMYGhbzo6l/Ir5de41O0GaKVpK1ZbDNXSY6GkXvtg=="],
-
-    "postcss-minify-params": ["postcss-minify-params@7.0.2", "", { "dependencies": { "browserslist": "^4.23.3", "cssnano-utils": "^5.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-nyqVLu4MFl9df32zTsdcLqCFfE/z2+f8GE1KHPxWOAmegSo6lpV2GNy5XQvrzwbLmiU7d+fYay4cwto1oNdAaQ=="],
-
-    "postcss-minify-selectors": ["postcss-minify-selectors@7.0.4", "", { "dependencies": { "cssesc": "^3.0.0", "postcss-selector-parser": "^6.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-JG55VADcNb4xFCf75hXkzc1rNeURhlo7ugf6JjiiKRfMsKlDzN9CXHZDyiG6x/zGchpjQS+UAgb1d4nqXqOpmA=="],
-
-    "postcss-nesting": ["postcss-nesting@13.0.1", "", { "dependencies": { "@csstools/selector-resolve-nested": "^3.0.0", "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ=="],
-
-    "postcss-normalize-charset": ["postcss-normalize-charset@7.0.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ=="],
-
-    "postcss-normalize-display-values": ["postcss-normalize-display-values@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-lnFZzNPeDf5uGMPYgGOw7v0BfB45+irSRz9gHQStdkkhiM0gTfvWkWB5BMxpn0OqgOQuZG/mRlZyJxp0EImr2Q=="],
-
-    "postcss-normalize-positions": ["postcss-normalize-positions@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-I0yt8wX529UKIGs2y/9Ybs2CelSvItfmvg/DBIjTnoUSrPxSV7Z0yZ8ShSVtKNaV/wAY+m7bgtyVQLhB00A1NQ=="],
-
-    "postcss-normalize-repeat-style": ["postcss-normalize-repeat-style@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-o3uSGYH+2q30ieM3ppu9GTjSXIzOrRdCUn8UOMGNw7Af61bmurHTWI87hRybrP6xDHvOe5WlAj3XzN6vEO8jLw=="],
-
-    "postcss-normalize-string": ["postcss-normalize-string@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-w/qzL212DFVOpMy3UGyxrND+Kb0fvCiBBujiaONIihq7VvtC7bswjWgKQU/w4VcRyDD8gpfqUiBQ4DUOwEJ6Qg=="],
-
-    "postcss-normalize-timing-functions": ["postcss-normalize-timing-functions@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-tNgw3YV0LYoRwg43N3lTe3AEWZ66W7Dh7lVEpJbHoKOuHc1sLrzMLMFjP8SNULHaykzsonUEDbKedv8C+7ej6g=="],
-
-    "postcss-normalize-unicode": ["postcss-normalize-unicode@7.0.2", "", { "dependencies": { "browserslist": "^4.23.3", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-ztisabK5C/+ZWBdYC+Y9JCkp3M9qBv/XFvDtSw0d/XwfT3UaKeW/YTm/MD/QrPNxuecia46vkfEhewjwcYFjkg=="],
-
-    "postcss-normalize-url": ["postcss-normalize-url@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-+d7+PpE+jyPX1hDQZYG+NaFD+Nd2ris6r8fPTBAjE8z/U41n/bib3vze8x7rKs5H1uEw5ppe9IojewouHk0klQ=="],
-
-    "postcss-normalize-whitespace": ["postcss-normalize-whitespace@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ=="],
-
-    "postcss-opacity-percentage": ["postcss-opacity-percentage@3.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-K6HGVzyxUxd/VgZdX04DCtdwWJ4NGLG212US4/LA1TLAbHgmAsTWVR86o+gGIbFtnTkfOpb9sCRBx8K7HO66qQ=="],
-
-    "postcss-ordered-values": ["postcss-ordered-values@7.0.1", "", { "dependencies": { "cssnano-utils": "^5.0.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-irWScWRL6nRzYmBOXReIKch75RRhNS86UPUAxXdmW/l0FcAsg0lvAXQCby/1lymxn/o0gVa6Rv/0f03eJOwHxw=="],
-
-    "postcss-overflow-shorthand": ["postcss-overflow-shorthand@6.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-BdDl/AbVkDjoTofzDQnwDdm/Ym6oS9KgmO7Gr+LHYjNWJ6ExORe4+3pcLQsLA9gIROMkiGVjjwZNoL/mpXHd5Q=="],
-
-    "postcss-page-break": ["postcss-page-break@3.0.4", "", { "peerDependencies": { "postcss": "^8" } }, "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="],
-
-    "postcss-place": ["postcss-place@10.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-5EBrMzat2pPAxQNWYavwAfoKfYcTADJ8AXGVPcUZ2UkNloUTWzJQExgrzrDkh3EKzmAx1evfTAzF9I8NGcc+qw=="],
-
-    "postcss-preset-env": ["postcss-preset-env@10.1.5", "", { "dependencies": { "@csstools/postcss-cascade-layers": "^5.0.1", "@csstools/postcss-color-function": "^4.0.8", "@csstools/postcss-color-mix-function": "^3.0.8", "@csstools/postcss-content-alt-text": "^2.0.4", "@csstools/postcss-exponential-functions": "^2.0.7", "@csstools/postcss-font-format-keywords": "^4.0.0", "@csstools/postcss-gamut-mapping": "^2.0.8", "@csstools/postcss-gradients-interpolation-method": "^5.0.8", "@csstools/postcss-hwb-function": "^4.0.8", "@csstools/postcss-ic-unit": "^4.0.0", "@csstools/postcss-initial": "^2.0.1", "@csstools/postcss-is-pseudo-class": "^5.0.1", "@csstools/postcss-light-dark-function": "^2.0.7", "@csstools/postcss-logical-float-and-clear": "^3.0.0", "@csstools/postcss-logical-overflow": "^2.0.0", "@csstools/postcss-logical-overscroll-behavior": "^2.0.0", "@csstools/postcss-logical-resize": "^3.0.0", "@csstools/postcss-logical-viewport-units": "^3.0.3", "@csstools/postcss-media-minmax": "^2.0.7", "@csstools/postcss-media-queries-aspect-ratio-number-values": "^3.0.4", "@csstools/postcss-nested-calc": "^4.0.0", "@csstools/postcss-normalize-display-values": "^4.0.0", "@csstools/postcss-oklab-function": "^4.0.8", "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/postcss-random-function": "^1.0.3", "@csstools/postcss-relative-color-syntax": "^3.0.8", "@csstools/postcss-scope-pseudo-class": "^4.0.1", "@csstools/postcss-sign-functions": "^1.1.2", "@csstools/postcss-stepped-value-functions": "^4.0.7", "@csstools/postcss-text-decoration-shorthand": "^4.0.2", "@csstools/postcss-trigonometric-functions": "^4.0.7", "@csstools/postcss-unset-value": "^4.0.0", "autoprefixer": "^10.4.19", "browserslist": "^4.24.4", "css-blank-pseudo": "^7.0.1", "css-has-pseudo": "^7.0.2", "css-prefers-color-scheme": "^10.0.0", "cssdb": "^8.2.3", "postcss-attribute-case-insensitive": "^7.0.1", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^7.0.8", "postcss-color-hex-alpha": "^10.0.0", "postcss-color-rebeccapurple": "^10.0.0", "postcss-custom-media": "^11.0.5", "postcss-custom-properties": "^14.0.4", "postcss-custom-selectors": "^8.0.4", "postcss-dir-pseudo-class": "^9.0.1", "postcss-double-position-gradients": "^6.0.0", "postcss-focus-visible": "^10.0.1", "postcss-focus-within": "^9.0.1", "postcss-font-variant": "^5.0.0", "postcss-gap-properties": "^6.0.0", "postcss-image-set-function": "^7.0.0", "postcss-lab-function": "^7.0.8", "postcss-logical": "^8.1.0", "postcss-nesting": "^13.0.1", "postcss-opacity-percentage": "^3.0.0", "postcss-overflow-shorthand": "^6.0.0", "postcss-page-break": "^3.0.4", "postcss-place": "^10.0.0", "postcss-pseudo-class-any-link": "^10.0.1", "postcss-replace-overflow-wrap": "^4.0.0", "postcss-selector-not": "^8.0.1" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-LQybafF/K7H+6fAs4SIkgzkSCixJy0/h0gubDIAP3Ihz+IQBRwsjyvBnAZ3JUHD+A/ITaxVRPDxn//a3Qy4pDw=="],
-
-    "postcss-pseudo-class-any-link": ["postcss-pseudo-class-any-link@10.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-3el9rXlBOqTFaMFkWDOkHUTQekFIYnaQY55Rsp8As8QQkpiSgIYEcF/6Ond93oHiDsGb4kad8zjt+NPlOC1H0Q=="],
-
-    "postcss-reduce-initial": ["postcss-reduce-initial@7.0.2", "", { "dependencies": { "browserslist": "^4.23.3", "caniuse-api": "^3.0.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-pOnu9zqQww7dEKf62Nuju6JgsW2V0KRNBHxeKohU+JkHd/GAH5uvoObqFLqkeB2n20mr6yrlWDvo5UBU5GnkfA=="],
-
-    "postcss-reduce-transforms": ["postcss-reduce-transforms@7.0.0", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-pnt1HKKZ07/idH8cpATX/ujMbtOGhUfE+m8gbqwJE05aTaNw8gbo34a2e3if0xc0dlu75sUOiqvwCGY3fzOHew=="],
-
-    "postcss-replace-overflow-wrap": ["postcss-replace-overflow-wrap@4.0.0", "", { "peerDependencies": { "postcss": "^8.0.3" } }, "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="],
-
-    "postcss-selector-not": ["postcss-selector-not@8.0.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-kmVy/5PYVb2UOhy0+LqUYAhKj7DUGDpSWa5LZqlkWJaaAV+dxxsOG3+St0yNLu6vsKD7Dmqx+nWQt0iil89+WA=="],
-
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
-
-    "postcss-svgo": ["postcss-svgo@7.0.1", "", { "dependencies": { "postcss-value-parser": "^4.2.0", "svgo": "^3.3.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA=="],
-
-    "postcss-unique-selectors": ["postcss-unique-selectors@7.0.3", "", { "dependencies": { "postcss-selector-parser": "^6.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-J+58u5Ic5T1QjP/LDV9g3Cx4CNOgB5vz+kM6+OxHHhFACdcDeKhBXjQmB7fnIZM12YSTvsL0Opwco83DmacW2g=="],
-
-    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
-
-    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
-
-    "prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="],
-
-    "prettier-linter-helpers": ["prettier-linter-helpers@1.0.0", "", { "dependencies": { "fast-diff": "^1.1.2" } }, "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w=="],
-
-    "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
-
-    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
-
-    "quansync": ["quansync@0.2.8", "", {}, "sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA=="],
-
-    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
-
-    "react": ["react@19.0.0", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="],
-
-    "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
-
-    "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "read-yaml-file": ["read-yaml-file@1.1.0", "", { "dependencies": { "graceful-fs": "^4.1.5", "js-yaml": "^3.6.1", "pify": "^4.0.1", "strip-bom": "^3.0.0" } }, "sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA=="],
-
-    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
-
-    "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
-
-    "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
-
-    "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
-
-    "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
-
-    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
-
-    "resolve": ["resolve@2.0.0-next.5", "", { "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA=="],
-
-    "resolve-from": ["resolve-from@5.0.0", "", {}, "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="],
-
-    "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
-
-    "rollup": ["rollup@4.35.0", "", { "dependencies": { "@types/estree": "1.0.6" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.35.0", "@rollup/rollup-android-arm64": "4.35.0", "@rollup/rollup-darwin-arm64": "4.35.0", "@rollup/rollup-darwin-x64": "4.35.0", "@rollup/rollup-freebsd-arm64": "4.35.0", "@rollup/rollup-freebsd-x64": "4.35.0", "@rollup/rollup-linux-arm-gnueabihf": "4.35.0", "@rollup/rollup-linux-arm-musleabihf": "4.35.0", "@rollup/rollup-linux-arm64-gnu": "4.35.0", "@rollup/rollup-linux-arm64-musl": "4.35.0", "@rollup/rollup-linux-loongarch64-gnu": "4.35.0", "@rollup/rollup-linux-powerpc64le-gnu": "4.35.0", "@rollup/rollup-linux-riscv64-gnu": "4.35.0", "@rollup/rollup-linux-s390x-gnu": "4.35.0", "@rollup/rollup-linux-x64-gnu": "4.35.0", "@rollup/rollup-linux-x64-musl": "4.35.0", "@rollup/rollup-win32-arm64-msvc": "4.35.0", "@rollup/rollup-win32-ia32-msvc": "4.35.0", "@rollup/rollup-win32-x64-msvc": "4.35.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-kg6oI4g+vc41vePJyO6dHt/yl0Rz3Thv0kJeVQ3D1kS3E5XSuKbPc29G4IpT/Kv1KQwgHVcN+HtyS+HYLNSvQg=="],
-
-    "rollup-plugin-dts": ["rollup-plugin-dts@6.1.1", "", { "dependencies": { "magic-string": "^0.30.10" }, "optionalDependencies": { "@babel/code-frame": "^7.24.2" }, "peerDependencies": { "rollup": "^3.29.4 || ^4", "typescript": "^4.5 || ^5.0" } }, "sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA=="],
-
-    "rollup-plugin-visualizer": ["rollup-plugin-visualizer@5.14.0", "", { "dependencies": { "open": "^8.4.0", "picomatch": "^4.0.2", "source-map": "^0.7.4", "yargs": "^17.5.1" }, "peerDependencies": { "rolldown": "1.x", "rollup": "2.x || 3.x || 4.x" }, "optionalPeers": ["rolldown", "rollup"], "bin": { "rollup-plugin-visualizer": "dist/bin/cli.js" } }, "sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA=="],
-
-    "rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
-
-    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
-
-    "safe-array-concat": ["safe-array-concat@1.1.3", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "get-intrinsic": "^1.2.6", "has-symbols": "^1.1.0", "isarray": "^2.0.5" } }, "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q=="],
-
-    "safe-push-apply": ["safe-push-apply@1.0.0", "", { "dependencies": { "es-errors": "^1.3.0", "isarray": "^2.0.5" } }, "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA=="],
-
-    "safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="],
-
-    "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
-
-    "saxes": ["saxes@6.0.0", "", { "dependencies": { "xmlchars": "^2.2.0" } }, "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA=="],
-
-    "scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="],
-
-    "semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
-
-    "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
-
-    "set-function-name": ["set-function-name@2.0.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "functions-have-names": "^1.2.3", "has-property-descriptors": "^1.0.2" } }, "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ=="],
-
-    "set-proto": ["set-proto@1.0.0", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0" } }, "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw=="],
-
-    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
-
-    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
-
-    "side-channel": ["side-channel@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3", "side-channel-list": "^1.0.0", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" } }, "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw=="],
-
-    "side-channel-list": ["side-channel-list@1.0.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3" } }, "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA=="],
-
-    "side-channel-map": ["side-channel-map@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3" } }, "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA=="],
-
-    "side-channel-weakmap": ["side-channel-weakmap@1.0.2", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3", "side-channel-map": "^1.0.1" } }, "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A=="],
-
-    "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
-
-    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
-
-    "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
-    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
-
-    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
-
-    "spawndamnit": ["spawndamnit@3.0.1", "", { "dependencies": { "cross-spawn": "^7.0.5", "signal-exit": "^4.0.1" } }, "sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg=="],
-
-    "sprintf-js": ["sprintf-js@1.0.3", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
-
-    "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
-
-    "std-env": ["std-env@3.8.1", "", {}, "sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA=="],
-
-    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
-    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
-    "string.prototype.matchall": ["string.prototype.matchall@4.0.12", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-abstract": "^1.23.6", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.6", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "internal-slot": "^1.1.0", "regexp.prototype.flags": "^1.5.3", "set-function-name": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA=="],
-
-    "string.prototype.repeat": ["string.prototype.repeat@1.0.0", "", { "dependencies": { "define-properties": "^1.1.3", "es-abstract": "^1.17.5" } }, "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w=="],
-
-    "string.prototype.trim": ["string.prototype.trim@1.2.10", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "define-data-property": "^1.1.4", "define-properties": "^1.2.1", "es-abstract": "^1.23.5", "es-object-atoms": "^1.0.0", "has-property-descriptors": "^1.0.2" } }, "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA=="],
-
-    "string.prototype.trimend": ["string.prototype.trimend@1.0.9", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ=="],
-
-    "string.prototype.trimstart": ["string.prototype.trimstart@1.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg=="],
-
-    "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
-
-    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
-
-    "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
-
-    "strip-indent": ["strip-indent@3.0.0", "", { "dependencies": { "min-indent": "^1.0.0" } }, "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="],
-
-    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
-
-    "stylehacks": ["stylehacks@7.0.4", "", { "dependencies": { "browserslist": "^4.23.3", "postcss-selector-parser": "^6.1.2" }, "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-i4zfNrGMt9SB4xRK9L83rlsFCgdGANfeDAYacO1pkqcE7cRHPdWHwnKZVz7WY17Veq/FvyYsRAU++Ga+qDFIww=="],
-
-    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
-
-    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
-
-    "svgo": ["svgo@3.3.2", "", { "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", "css-tree": "^2.3.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.0.0" }, "bin": "./bin/svgo" }, "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw=="],
-
-    "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
-
-    "synckit": ["synckit@0.9.2", "", { "dependencies": { "@pkgr/core": "^0.1.0", "tslib": "^2.6.2" } }, "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw=="],
-
-    "term-size": ["term-size@2.2.1", "", {}, "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="],
-
-    "test-exclude": ["test-exclude@7.0.1", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^10.4.1", "minimatch": "^9.0.4" } }, "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg=="],
-
-    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
-
-    "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
-
-    "tinypool": ["tinypool@1.0.2", "", {}, "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA=="],
-
-    "tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
-
-    "tinyspy": ["tinyspy@3.0.2", "", {}, "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q=="],
-
-    "tldts": ["tldts@6.1.83", "", { "dependencies": { "tldts-core": "^6.1.83" }, "bin": { "tldts": "bin/cli.js" } }, "sha512-FHxxNJJ0WNsEBPHyC1oesQb3rRoxpuho/z2g3zIIAhw1WHJeQsUzK1jYK8TI1/iClaa4fS3Z2TCA9mtxXsENSg=="],
-
-    "tldts-core": ["tldts-core@6.1.83", "", {}, "sha512-I2wb9OJc6rXyh9d4aInhSNWChNI+ra6qDnFEGEwe9OoA68lE4Temw29bOkf1Uvwt8VZS079t1BFZdXVBmmB4dw=="],
-
-    "tmp": ["tmp@0.0.33", "", { "dependencies": { "os-tmpdir": "~1.0.2" } }, "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw=="],
-
-    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
-
-    "tough-cookie": ["tough-cookie@5.1.2", "", { "dependencies": { "tldts": "^6.1.32" } }, "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A=="],
-
-    "tr46": ["tr46@5.0.0", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g=="],
-
-    "ts-api-utils": ["ts-api-utils@2.0.1", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w=="],
-
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
-
-    "typed-array-buffer": ["typed-array-buffer@1.0.3", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-typed-array": "^1.1.14" } }, "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw=="],
-
-    "typed-array-byte-length": ["typed-array-byte-length@1.0.3", "", { "dependencies": { "call-bind": "^1.0.8", "for-each": "^0.3.3", "gopd": "^1.2.0", "has-proto": "^1.2.0", "is-typed-array": "^1.1.14" } }, "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg=="],
-
-    "typed-array-byte-offset": ["typed-array-byte-offset@1.0.4", "", { "dependencies": { "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "for-each": "^0.3.3", "gopd": "^1.2.0", "has-proto": "^1.2.0", "is-typed-array": "^1.1.15", "reflect.getprototypeof": "^1.0.9" } }, "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ=="],
-
-    "typed-array-length": ["typed-array-length@1.0.7", "", { "dependencies": { "call-bind": "^1.0.7", "for-each": "^0.3.3", "gopd": "^1.0.1", "is-typed-array": "^1.1.13", "possible-typed-array-names": "^1.0.0", "reflect.getprototypeof": "^1.0.6" } }, "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg=="],
-
-    "typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
-
-    "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
-
-    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
-
-    "universalify": ["universalify@0.1.2", "", {}, "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="],
-
-    "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="],
-
-    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
-
-    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
-
-    "vite": ["vite@6.2.1", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-n2GnqDb6XPhlt9B8olZPrgMD/es/Nd1RdChF6CBD/fHW6pUyUTt2sQW2fPRX5GiD9XEa6+8A6A4f2vT6pSsE7Q=="],
-
-    "vite-node": ["vite-node@3.0.8", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.0", "es-module-lexer": "^1.6.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-6PhR4H9VGlcwXZ+KWCdMqbtG649xCPZqfI9j2PsK1FcXgEzro5bGHcVKFCTqPLaNKZES8Evqv4LwvZARsq5qlg=="],
-
-    "vite-plugin-static-copy": ["vite-plugin-static-copy@2.3.0", "", { "dependencies": { "chokidar": "^3.5.3", "fast-glob": "^3.2.11", "fs-extra": "^11.1.0", "p-map": "^7.0.3", "picocolors": "^1.0.0" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0" } }, "sha512-LLKwhhHetGaCnWz4mas4qqjjguDka6/6b4+SeIohRroj8aCE7QTfiZECfPecslFQkWZ3HdQuq5kOPmWZjNYlKA=="],
-
-    "vitest": ["vitest@3.0.8", "", { "dependencies": { "@vitest/expect": "3.0.8", "@vitest/mocker": "3.0.8", "@vitest/pretty-format": "^3.0.8", "@vitest/runner": "3.0.8", "@vitest/snapshot": "3.0.8", "@vitest/spy": "3.0.8", "@vitest/utils": "3.0.8", "chai": "^5.2.0", "debug": "^4.4.0", "expect-type": "^1.1.0", "magic-string": "^0.30.17", "pathe": "^2.0.3", "std-env": "^3.8.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinypool": "^1.0.2", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0", "vite-node": "3.0.8", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.0.8", "@vitest/ui": "3.0.8", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-dfqAsNqRGUc8hB9OVR2P0w8PZPEckti2+5rdZip0WIz9WW0MnImJ8XiR61QhqLa92EQzKP2uPkzenKOAHyEIbA=="],
-
-    "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "^5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],
-
-    "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
-
-    "whatwg-encoding": ["whatwg-encoding@3.1.1", "", { "dependencies": { "iconv-lite": "0.6.3" } }, "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ=="],
-
-    "whatwg-mimetype": ["whatwg-mimetype@4.0.0", "", {}, "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg=="],
-
-    "whatwg-url": ["whatwg-url@14.1.1", "", { "dependencies": { "tr46": "^5.0.0", "webidl-conversions": "^7.0.0" } }, "sha512-mDGf9diDad/giZ/Sm9Xi2YcyzaFpbdLpJPr+E9fSkyQ7KpQD4SdFcugkRQYzhmfI4KeV4Qpnn2sKPdo+kmsgRQ=="],
-
-    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
-
-    "which-boxed-primitive": ["which-boxed-primitive@1.1.1", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],
-
-    "which-builtin-type": ["which-builtin-type@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "function.prototype.name": "^1.1.6", "has-tostringtag": "^1.0.2", "is-async-function": "^2.0.0", "is-date-object": "^1.1.0", "is-finalizationregistry": "^1.1.0", "is-generator-function": "^1.0.10", "is-regex": "^1.2.1", "is-weakref": "^1.0.2", "isarray": "^2.0.5", "which-boxed-primitive": "^1.1.0", "which-collection": "^1.0.2", "which-typed-array": "^1.1.16" } }, "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q=="],
-
-    "which-collection": ["which-collection@1.0.2", "", { "dependencies": { "is-map": "^2.0.3", "is-set": "^2.0.3", "is-weakmap": "^2.0.2", "is-weakset": "^2.0.3" } }, "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw=="],
-
-    "which-typed-array": ["which-typed-array@1.1.19", "", { "dependencies": { "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "call-bound": "^1.0.4", "for-each": "^0.3.5", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2" } }, "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw=="],
-
-    "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
-
-    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
-
-    "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
-
-    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
-
-    "ws": ["ws@8.18.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w=="],
-
-    "xml-name-validator": ["xml-name-validator@5.0.0", "", {}, "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg=="],
-
-    "xmlchars": ["xmlchars@2.2.0", "", {}, "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="],
-
-    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
-
-    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
-
-    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
-
-    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
-
-    "@changesets/apply-release-plan/prettier": ["prettier@2.8.8", "", { "bin": { "prettier": "bin-prettier.js" } }, "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="],
-
-    "@changesets/parse/js-yaml": ["js-yaml@3.14.1", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g=="],
-
-    "@changesets/write/prettier": ["prettier@2.8.8", "", { "bin": { "prettier": "bin-prettier.js" } }, "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="],
-
-    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
-
-    "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
-
-    "@isaacs/cliui/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
-
-    "@isaacs/cliui/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
-
-    "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
-
-    "@manypkg/find-root/@types/node": ["@types/node@12.20.55", "", {}, "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ=="],
-
-    "@manypkg/find-root/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
-
-    "@manypkg/find-root/fs-extra": ["fs-extra@8.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g=="],
-
-    "@manypkg/get-packages/@changesets/types": ["@changesets/types@4.1.0", "", {}, "sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw=="],
-
-    "@manypkg/get-packages/fs-extra": ["fs-extra@8.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g=="],
-
-    "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
-
-    "@testing-library/dom/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
-
-    "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
-
-    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
-    "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
-    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
-    "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="],
-
-    "eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
-
-    "eslint-plugin-react/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
-    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
-    "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
-    "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
-
-    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
-    "p-filter/p-map": ["p-map@2.1.0", "", {}, "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="],
-
-    "p-locate/p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
-
-    "postcss-discard-comments/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
-    "postcss-merge-rules/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
-    "postcss-minify-selectors/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
-    "postcss-unique-selectors/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
-    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
-
-    "pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
-
-    "read-yaml-file/js-yaml": ["js-yaml@3.14.1", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g=="],
-
-    "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
-    "stylehacks/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
-    "test-exclude/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
-    "vite-plugin-static-copy/fs-extra": ["fs-extra@11.3.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew=="],
-
-    "whatwg-encoding/iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
-
-    "@changesets/parse/js-yaml/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],
-
-    "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
-
-    "@isaacs/cliui/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
-
-    "@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
-
-    "@manypkg/find-root/find-up/locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
-
-    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
-
-    "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="],
-
-    "glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
-
-    "read-yaml-file/js-yaml/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],
-
-    "test-exclude/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
-
-    "vite-plugin-static-copy/fs-extra/jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
-
-    "vite-plugin-static-copy/fs-extra/universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
-
-    "@manypkg/find-root/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
-  }
-}

From ac9a8790cb2a6b9d86261c6d3e6357885c38c809 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:58:27 +0000
Subject: [PATCH 05/18] =?UTF-8?q?chore:=20major=20dependency=20upgrades=20?=
 =?UTF-8?q?=E2=80=94=20Vite=208,=20Vitest=204,=20postcss-preset-env=2011?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Major version bumps:
- vite: 6.4 → 8.0 (rolldown-based bundler)
- vitest: 3.2 → 4.1
- @vitest/coverage-v8: 3.2 → 4.1
- postcss-preset-env: 10.6 → 11.2
- vite-plugin-static-copy: 2.3 → 4.0

Breaking changes fixed:
- Vite 8/rolldown: CSS from non-module files (base.css, reset.css) no longer
  auto-bundled — added explicit core.css import to src/index.ts
- vite-plugin-static-copy v4: dest path handling changed — use
  rename.stripBase for flat copy
- Vitest 4: vi.fn() arrow functions no longer usable as constructors —
  converted IntersectionObserver/ResizeObserver mocks to class syntax
- Removed esbuild from devDependencies (bundled with Vite 8 via rolldown)

ESLint stays at v9 because eslint-plugin-react and
eslint-plugin-react-hooks don't yet support ESLint 10.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 package.json                       | 11 +++----
 src/index.ts                       |  3 ++
 tests/components/Baseline.test.tsx | 53 +++++++++++++++++-------------
 tests/hooks/useVirtual.test.ts     | 21 +++++++-----
 vite.config.ts                     | 47 ++++++++++----------------
 5 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 8fd3d948..3d695eb5 100644
--- a/package.json
+++ b/package.json
@@ -58,26 +58,25 @@
     "@typescript-eslint/eslint-plugin": "^8.57.2",
     "@typescript-eslint/parser": "^8.57.2",
     "@vitejs/plugin-react-swc": "^4.3.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.1.2",
     "autoprefixer": "^10.4.27",
     "cssnano": "^7.1.3",
-    "esbuild": "^0.25.12",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^26.1.0",
-    "postcss-preset-env": "^10.6.1",
+    "postcss-preset-env": "^11.2.0",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rollup": "^4.41.1",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-visualizer": "^5.14.0",
-    "vite": "^6.4.1",
-    "vite-plugin-static-copy": "^2.3.2",
-    "vitest": "^3.2.4"
+    "vite": "^8.0.3",
+    "vite-plugin-static-copy": "^4.0.0",
+    "vitest": "^4.1.2"
   },
   "name": "baseline-kit",
   "version": "3.0.2",
diff --git a/src/index.ts b/src/index.ts
index f9b293ca..e0d3d360 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,6 +13,9 @@
  * @module baseline-kit
  */
 
+// Core styles (base variables, reset, component CSS)
+import './components/styles/core.css'
+
 // Public API Components
 export { Config } from './components/Config'
 export { Baseline } from './components/Baseline'
diff --git a/tests/components/Baseline.test.tsx b/tests/components/Baseline.test.tsx
index 0d633f46..e45762cb 100644
--- a/tests/components/Baseline.test.tsx
+++ b/tests/components/Baseline.test.tsx
@@ -5,25 +5,32 @@ import { Baseline } from '@/components/Baseline'
 // We'll store IntersectionObserver callbacks in a map, keyed by element.
 const observerMap = new Map<Element, IntersectionObserverCallback>()
 
-// Mock IntersectionObserver
-const mockIntersectionObserver = vi.fn((callback: IntersectionObserverCallback) => ({
-  observe: (element: Element) => {
-    observerMap.set(element, callback)
-  },
-  unobserve: (element: Element) => {
+// Mock IntersectionObserver (must use class for Vitest 4 constructor support)
+class MockIntersectionObserver {
+  callback: IntersectionObserverCallback
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback
+  }
+  observe(element: Element) {
+    observerMap.set(element, this.callback)
+  }
+  unobserve(element: Element) {
     observerMap.delete(element)
-  },
-  disconnect: () => {
+  }
+  disconnect() {
     observerMap.clear()
-  },
-}))
-
-// For ResizeObserver
-type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void
-const mockResizeObserver = vi.fn((callback: ResizeObserverCallback) => ({
-  observe: vi.fn((target: Element) => {
-    // Immediately trigger the callback with an initial size (1024x768)
-    callback(
+  }
+}
+
+// Mock ResizeObserver (must use class for Vitest 4 constructor support)
+class MockResizeObserver {
+  constructor(callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void) {
+    // Store for potential use, but immediately trigger on observe
+    this._callback = callback
+  }
+  _callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void
+  observe(target: Element) {
+    this._callback(
       [
         {
           contentRect: { width: 1024, height: 768 },
@@ -35,16 +42,16 @@ const mockResizeObserver = vi.fn((callback: ResizeObserverCallback) => ({
       ],
       {} as ResizeObserver,
     )
-  }),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
+  }
+  unobserve() {}
+  disconnect() {}
+}
 
 describe('Baseline', () => {
   beforeAll(() => {
     vi.useFakeTimers()
-    vi.stubGlobal('IntersectionObserver', mockIntersectionObserver)
-    vi.stubGlobal('ResizeObserver', mockResizeObserver)
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+    vi.stubGlobal('ResizeObserver', MockResizeObserver)
 
     // Set up window dimensions (these are optional if your tests rely on them).
     Object.defineProperty(window, 'innerHeight', { value: 768, configurable: true })
diff --git a/tests/hooks/useVirtual.test.ts b/tests/hooks/useVirtual.test.ts
index acf72b6e..a8d8f88c 100644
--- a/tests/hooks/useVirtual.test.ts
+++ b/tests/hooks/useVirtual.test.ts
@@ -4,15 +4,20 @@ import { testUtils } from '../setup'
 
 // Create a map to simulate IntersectionObserver callbacks.
 const observerMap = new Map<HTMLElement, IntersectionObserverCallback>()
-const mockIntersectionObserver = vi.fn((callback: IntersectionObserverCallback) => ({
-  observe: vi.fn((element: HTMLElement) => {
-    observerMap.set(element, callback)
-  }),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
 
-vi.stubGlobal('IntersectionObserver', mockIntersectionObserver)
+class MockIntersectionObserver {
+  callback: IntersectionObserverCallback
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback
+  }
+  observe(element: HTMLElement) {
+    observerMap.set(element, this.callback)
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
 
 describe('useVirtual', () => {
   beforeEach(() => {
diff --git a/vite.config.ts b/vite.config.ts
index 6616e6e9..9eaf48a1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,34 +4,18 @@ import { alias } from './alias.config'
 import { resolve } from 'path'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
 import { visualizer } from 'rollup-plugin-visualizer'
-import fs from 'fs'
-
-// Create the combined CSS file
-const createCombinedCSS = () => {
-  try {
-    const corePath = resolve(__dirname, 'src/components/styles/core.css')
-    const themePath = resolve(__dirname, 'src/components/styles/theme.css')
-    
-    const core = fs.readFileSync(corePath, 'utf8')
-    const theme = fs.readFileSync(themePath, 'utf8')
-    const combined = `${core}\n\n${theme}`
-    
-    const tempFile = resolve(__dirname, '.temp-combined.css')
-    fs.writeFileSync(tempFile, combined)
-    return tempFile
-  } catch (error) {
-    console.error('Error creating combined CSS:', error)
-    return null
-  }
-}
 
 export default defineConfig(({ command }) => ({
   plugins: [
     react(),
     viteStaticCopy({
       targets: [
-        { src: resolve(__dirname, 'README.md'), dest: '.' },
-        { src: resolve(__dirname, 'src/components/styles/theme.css'), dest: '.' }
+        { src: 'README.md', dest: '.' },
+        {
+          src: 'src/components/styles/theme.css',
+          dest: '.',
+          rename: { stripBase: true },
+        },
       ],
     }),
     visualizer({
@@ -45,9 +29,12 @@ export default defineConfig(({ command }) => ({
       localsConvention: 'camelCase',
       generateScopedName: '[local]_[hash:base64:5]',
     },
+    // Disable lightningcss to preserve CSS @import handling for non-module CSS
+    transformer: 'postcss' as const,
   },
   build: {
     cssCodeSplit: false,
+    cssMinify: true,
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'BaselineKit',
@@ -56,17 +43,17 @@ export default defineConfig(({ command }) => ({
     },
     rollupOptions: {
       external: [
-        'react', 
-        'react-dom', 
-        'react/jsx-runtime', 
-        'react/jsx-dev-runtime'
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
       ],
       output: {
-        globals: { 
-          react: 'React', 
+        globals: {
+          react: 'React',
           'react-dom': 'ReactDOM',
           'react/jsx-runtime': 'jsxRuntime',
-          'react/jsx-dev-runtime': 'jsxDevRuntime'
+          'react/jsx-dev-runtime': 'jsxDevRuntime',
         },
         assetFileNames: (assetInfo) => {
           if (!assetInfo.name) return '[name]-[hash][extname]'
@@ -87,5 +74,5 @@ export default defineConfig(({ command }) => ({
     },
     sourcemap: true,
   },
-  ...(command === 'serve' && { root: 'demo', base: '/' }), // @todo remove soon
+  ...(command === 'serve' && { root: 'demo', base: '/' }),
 }))

From e3740f89f2607713c47589352dc89950a6d27aa1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:59:42 +0000
Subject: [PATCH 06/18] chore: rename rollupOptions to rolldownOptions for Vite
 8

The old name is deprecated in Vite 8 and will be removed in a future
version.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 9eaf48a1..5951f2c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -41,7 +41,7 @@ export default defineConfig(({ command }) => ({
       formats: ['es', 'cjs'],
       fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
     },
-    rollupOptions: {
+    rolldownOptions: {
       external: [
         'react',
         'react-dom',

From a5ee04dc341f576b1db3cd3d8b9bc006d2c0e1d8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 20:43:38 +0000
Subject: [PATCH 07/18] refactor: split into monorepo with @baseline-kit/core,
 dom, and react packages

Restructure the codebase into three layered packages:
- @baseline-kit/core: Pure TypeScript types, utilities, config, and validation (zero deps)
- @baseline-kit/dom: DOM utilities for timing, SSR detection (depends on core)
- @baseline-kit/react: React adapter with hooks, components, and React-specific utils

All 178 tests pass, typecheck clean, build succeeds. Root src/index.ts
re-exports from @baseline-kit/react for backwards compatibility.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 alias.config.ts                               |  20 +-
 package.json                                  |   9 +-
 packages/core/package.json                    |  13 +
 packages/core/src/config/defaults.ts          |  50 ++
 packages/core/src/config/index.ts             |   3 +
 packages/core/src/config/merge.ts             |  64 +++
 packages/core/src/config/schema.ts            |  26 ++
 packages/core/src/index.ts                    |  17 +
 packages/core/src/types.ts                    |  79 ++++
 packages/core/src/utils/convert.ts            |  62 +++
 packages/core/src/utils/grid.ts               |  21 +
 packages/core/src/utils/index.ts              |   8 +
 packages/core/src/utils/math.ts               |  46 ++
 packages/core/src/utils/merge.ts              |  44 ++
 packages/core/src/utils/normalize.ts          |  84 ++++
 packages/core/src/utils/padding.ts            |  93 ++++
 packages/core/src/utils/parse.ts              |  20 +
 packages/core/src/utils/snapping.ts           |  33 ++
 packages/core/src/validation/guide.ts         |  50 ++
 packages/core/src/validation/index.ts         |   1 +
 packages/dom/package.json                     |  16 +
 packages/dom/src/index.ts                     |   8 +
 packages/dom/src/ssr.ts                       |  39 ++
 packages/dom/src/timing.ts                    |  41 ++
 packages/react/package.json                   |  21 +
 .../src/components/Baseline/Baseline.tsx      | 367 +++++++++++++++
 .../react/src/components/Baseline/index.ts    |   1 +
 .../src/components/Baseline/styles.module.css |  26 ++
 packages/react/src/components/Box/Box.tsx     | 247 ++++++++++
 packages/react/src/components/Box/index.ts    |   1 +
 .../src/components/Box/styles.module.css      |  14 +
 .../react/src/components/Config/Config.tsx    |  61 +++
 packages/react/src/components/Config/index.ts |   2 +
 packages/react/src/components/Guide/Guide.tsx | 430 ++++++++++++++++++
 packages/react/src/components/Guide/index.ts  |   1 +
 .../src/components/Guide/styles.module.css    |  58 +++
 packages/react/src/components/Guide/types.ts  | 150 ++++++
 .../react/src/components/Guide/validation.ts  |   9 +
 .../react/src/components/Layout/Layout.tsx    | 318 +++++++++++++
 packages/react/src/components/Layout/index.ts |   1 +
 .../src/components/Layout/styles.module.css   |  34 ++
 .../react/src/components/Padder/Padder.tsx    | 317 +++++++++++++
 packages/react/src/components/Padder/index.ts |   1 +
 .../src/components/Padder/styles.module.css   |  22 +
 .../react/src/components/Spacer/Spacer.tsx    | 238 ++++++++++
 packages/react/src/components/Spacer/index.ts |   1 +
 .../src/components/Spacer/styles.module.css   |  22 +
 packages/react/src/components/Stack/Stack.tsx | 299 ++++++++++++
 packages/react/src/components/Stack/index.ts  |   1 +
 .../src/components/Stack/styles.module.css    |  26 ++
 packages/react/src/components/index.ts        |  24 +
 packages/react/src/components/styles/base.css | 122 +++++
 packages/react/src/components/styles/core.css |  40 ++
 packages/react/src/components/styles/index.ts |  15 +
 .../react/src/components/styles/reset.css     |  43 ++
 .../react/src/components/styles/theme.css     | 142 ++++++
 .../src/components/styles/theme/dark.css      |  67 +++
 .../src/components/styles/theme/default.css   |  82 ++++
 .../src/components/styles/theme/tokens.css    |  82 ++++
 packages/react/src/components/types.ts        |  55 +++
 packages/react/src/hooks/index.ts             |  15 +
 packages/react/src/hooks/useBaseline.ts       |  74 +++
 packages/react/src/hooks/useConfig.ts         |  23 +
 packages/react/src/hooks/useDebug.ts          |  27 ++
 packages/react/src/hooks/useGuide.ts          | 166 +++++++
 packages/react/src/hooks/useIsClient.ts       |  14 +
 packages/react/src/hooks/useMeasure.ts        |  53 +++
 packages/react/src/hooks/useVirtual.ts        |  90 ++++
 packages/react/src/index.ts                   |  39 ++
 packages/react/src/style.d.ts                 |   4 +
 packages/react/src/styles.ts                  |   5 +
 packages/react/src/theme.ts                   |   5 +
 packages/react/src/utils/index.ts             |  15 +
 packages/react/src/utils/merge.ts             |  44 ++
 packages/react/src/utils/ssr.tsx              |  24 +
 scripts/combine-css.js                        |   2 +-
 src/index.ts                                  |  44 +-
 tests/hooks/useConfig.test.ts                 |   2 +-
 tsconfig.build.json                           |   4 +-
 tsconfig.json                                 |  33 +-
 vite.config.ts                                |   4 +-
 81 files changed, 4798 insertions(+), 76 deletions(-)
 create mode 100644 packages/core/package.json
 create mode 100644 packages/core/src/config/defaults.ts
 create mode 100644 packages/core/src/config/index.ts
 create mode 100644 packages/core/src/config/merge.ts
 create mode 100644 packages/core/src/config/schema.ts
 create mode 100644 packages/core/src/index.ts
 create mode 100644 packages/core/src/types.ts
 create mode 100644 packages/core/src/utils/convert.ts
 create mode 100644 packages/core/src/utils/grid.ts
 create mode 100644 packages/core/src/utils/index.ts
 create mode 100644 packages/core/src/utils/math.ts
 create mode 100644 packages/core/src/utils/merge.ts
 create mode 100644 packages/core/src/utils/normalize.ts
 create mode 100644 packages/core/src/utils/padding.ts
 create mode 100644 packages/core/src/utils/parse.ts
 create mode 100644 packages/core/src/utils/snapping.ts
 create mode 100644 packages/core/src/validation/guide.ts
 create mode 100644 packages/core/src/validation/index.ts
 create mode 100644 packages/dom/package.json
 create mode 100644 packages/dom/src/index.ts
 create mode 100644 packages/dom/src/ssr.ts
 create mode 100644 packages/dom/src/timing.ts
 create mode 100644 packages/react/package.json
 create mode 100644 packages/react/src/components/Baseline/Baseline.tsx
 create mode 100644 packages/react/src/components/Baseline/index.ts
 create mode 100644 packages/react/src/components/Baseline/styles.module.css
 create mode 100644 packages/react/src/components/Box/Box.tsx
 create mode 100644 packages/react/src/components/Box/index.ts
 create mode 100644 packages/react/src/components/Box/styles.module.css
 create mode 100644 packages/react/src/components/Config/Config.tsx
 create mode 100644 packages/react/src/components/Config/index.ts
 create mode 100644 packages/react/src/components/Guide/Guide.tsx
 create mode 100644 packages/react/src/components/Guide/index.ts
 create mode 100644 packages/react/src/components/Guide/styles.module.css
 create mode 100644 packages/react/src/components/Guide/types.ts
 create mode 100644 packages/react/src/components/Guide/validation.ts
 create mode 100644 packages/react/src/components/Layout/Layout.tsx
 create mode 100644 packages/react/src/components/Layout/index.ts
 create mode 100644 packages/react/src/components/Layout/styles.module.css
 create mode 100644 packages/react/src/components/Padder/Padder.tsx
 create mode 100644 packages/react/src/components/Padder/index.ts
 create mode 100644 packages/react/src/components/Padder/styles.module.css
 create mode 100644 packages/react/src/components/Spacer/Spacer.tsx
 create mode 100644 packages/react/src/components/Spacer/index.ts
 create mode 100644 packages/react/src/components/Spacer/styles.module.css
 create mode 100644 packages/react/src/components/Stack/Stack.tsx
 create mode 100644 packages/react/src/components/Stack/index.ts
 create mode 100644 packages/react/src/components/Stack/styles.module.css
 create mode 100644 packages/react/src/components/index.ts
 create mode 100644 packages/react/src/components/styles/base.css
 create mode 100644 packages/react/src/components/styles/core.css
 create mode 100644 packages/react/src/components/styles/index.ts
 create mode 100644 packages/react/src/components/styles/reset.css
 create mode 100644 packages/react/src/components/styles/theme.css
 create mode 100644 packages/react/src/components/styles/theme/dark.css
 create mode 100644 packages/react/src/components/styles/theme/default.css
 create mode 100644 packages/react/src/components/styles/theme/tokens.css
 create mode 100644 packages/react/src/components/types.ts
 create mode 100644 packages/react/src/hooks/index.ts
 create mode 100644 packages/react/src/hooks/useBaseline.ts
 create mode 100644 packages/react/src/hooks/useConfig.ts
 create mode 100644 packages/react/src/hooks/useDebug.ts
 create mode 100644 packages/react/src/hooks/useGuide.ts
 create mode 100644 packages/react/src/hooks/useIsClient.ts
 create mode 100644 packages/react/src/hooks/useMeasure.ts
 create mode 100644 packages/react/src/hooks/useVirtual.ts
 create mode 100644 packages/react/src/index.ts
 create mode 100644 packages/react/src/style.d.ts
 create mode 100644 packages/react/src/styles.ts
 create mode 100644 packages/react/src/theme.ts
 create mode 100644 packages/react/src/utils/index.ts
 create mode 100644 packages/react/src/utils/merge.ts
 create mode 100644 packages/react/src/utils/ssr.tsx

diff --git a/alias.config.ts b/alias.config.ts
index 112fcfdc..e452bf1a 100644
--- a/alias.config.ts
+++ b/alias.config.ts
@@ -1,11 +1,17 @@
 import { resolve } from 'path'
 
 export const alias = {
-  '@': resolve(__dirname, 'src'),
+  // Package aliases (new monorepo structure)
+  '@baseline-kit/core': resolve(__dirname, 'packages/core/src'),
+  '@baseline-kit/dom': resolve(__dirname, 'packages/dom/src'),
+  '@baseline-kit/react': resolve(__dirname, 'packages/react/src'),
+
+  // Backwards-compatible aliases (map to new locations)
+  '@': resolve(__dirname, 'packages/react/src'),
   '@kit': resolve(__dirname, '.'),
-  '@components': resolve(__dirname, 'src/components'),
-  '@context': resolve(__dirname, 'src/context'),
-  '@hooks': resolve(__dirname, 'src/hooks'),
-  '@types': resolve(__dirname, 'src/types'),
-  '@utils': resolve(__dirname, 'src/utils'),
-}
\ No newline at end of file
+  '@components': resolve(__dirname, 'packages/react/src/components'),
+  '@context': resolve(__dirname, 'packages/react/src/context'),
+  '@hooks': resolve(__dirname, 'packages/react/src/hooks'),
+  '@types': resolve(__dirname, 'packages/react/src/types'),
+  '@utils': resolve(__dirname, 'packages/react/src/utils'),
+}
diff --git a/package.json b/package.json
index 3d695eb5..f2b22d1a 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
     "build:combine-css": "node scripts/combine-css.js",
     "changeset": "changeset",
     "dev": "vite",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "lint": "eslint src --fix",
+    "format": "prettier --write \"packages/**/*.{ts,tsx,css}\"",
+    "lint": "eslint packages --fix",
     "prepare": "bun run build && bun run build:type",
     "prepublishOnly": "bun run build && bun run build:type",
     "release": "changeset publish",
@@ -79,8 +79,11 @@
     "vitest": "^4.1.2"
   },
   "name": "baseline-kit",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "homepage": "https://github.com/dnvt/baseline-kit#readme",
   "types": "dist/index.d.ts",
   "exports": {
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 00000000..f907f078
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@baseline-kit/core",
+  "version": "1.0.0",
+  "description": "Pure TypeScript core: types, utilities, config, and validation for baseline-kit",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "license": "MIT",
+  "author": "Francois Denavaut"
+}
diff --git a/packages/core/src/config/defaults.ts b/packages/core/src/config/defaults.ts
new file mode 100644
index 00000000..de3a7d30
--- /dev/null
+++ b/packages/core/src/config/defaults.ts
@@ -0,0 +1,50 @@
+import type { ConfigSchema } from './schema'
+
+const GUIDE_COLORS = {
+  line: 'var(--bk-guide-color-line-theme)',
+  pattern: 'var(--bk-guide-color-pattern-theme)',
+  auto: 'var(--bk-guide-color-auto-theme)',
+  fixed: 'var(--bk-guide-color-fixed-theme)',
+} as const
+
+const BASELINE_COLORS = {
+  line: 'var(--bk-baseline-color-line-theme)',
+  flat: 'var(--bk-baseline-color-flat-theme)',
+} as const
+
+const SPACER_COLORS = {
+  line: 'var(--bk-spacer-color-line-theme)',
+  flat: 'var(--bk-spacer-color-flat-theme)',
+  text: 'var(--bk-spacer-color-text-theme)',
+} as const
+
+const BOX_COLORS = {
+  line: 'var(--bk-box-color-line-theme)',
+  flat: 'var(--bk-box-color-flat-theme)',
+  text: 'var(--bk-box-color-text-theme)',
+} as const
+
+const STACK_COLORS = {
+  line: 'var(--bk-stack-color-line-theme)',
+  flat: 'var(--bk-stack-color-flat-theme)',
+  text: 'var(--bk-stack-color-text-theme)',
+} as const
+
+const LAYOUT_COLORS = {
+  line: 'var(--bk-layout-color-line-theme)',
+  flat: 'var(--bk-layout-color-flat-theme)',
+  text: 'var(--bk-layout-color-text-theme)',
+} as const
+
+const PADDER_COLOR = 'var(--bk-padder-color-theme)'
+
+export const DEFAULT_CONFIG: ConfigSchema = {
+  base: 8,
+  baseline: { variant: 'line', debugging: 'hidden', colors: BASELINE_COLORS },
+  guide: { variant: 'line', debugging: 'hidden', colors: GUIDE_COLORS },
+  spacer: { variant: 'line', debugging: 'hidden', colors: SPACER_COLORS },
+  box: { debugging: 'hidden', colors: BOX_COLORS },
+  stack: { debugging: 'hidden', colors: STACK_COLORS },
+  layout: { debugging: 'hidden', colors: LAYOUT_COLORS },
+  padder: { debugging: 'hidden', color: PADDER_COLOR },
+} as const
diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
new file mode 100644
index 00000000..4bc4a9fb
--- /dev/null
+++ b/packages/core/src/config/index.ts
@@ -0,0 +1,3 @@
+export type { ConfigSchema } from './schema'
+export { DEFAULT_CONFIG } from './defaults'
+export { mergeConfig, createCSSVariables } from './merge'
diff --git a/packages/core/src/config/merge.ts b/packages/core/src/config/merge.ts
new file mode 100644
index 00000000..15b43eec
--- /dev/null
+++ b/packages/core/src/config/merge.ts
@@ -0,0 +1,64 @@
+import type { ConfigSchema } from './schema'
+
+type MergeConfigParams = {
+  parentConfig: ConfigSchema
+  base?: number
+  baseline?: Partial<ConfigSchema['baseline']>
+  guide?: Partial<ConfigSchema['guide']>
+  spacer?: Partial<ConfigSchema['spacer']>
+  box?: Partial<ConfigSchema['box']>
+  stack?: Partial<ConfigSchema['stack']>
+  layout?: Partial<ConfigSchema['layout']>
+  padder?: Partial<ConfigSchema['padder']>
+}
+
+export const mergeConfig = (params: MergeConfigParams): ConfigSchema => {
+  const { parentConfig, base, baseline, guide, spacer, box, stack, layout, padder } = params
+  return {
+    base: base ?? parentConfig.base,
+    baseline: { ...parentConfig.baseline, ...baseline },
+    guide: { ...parentConfig.guide, ...guide },
+    spacer: { ...parentConfig.spacer, ...spacer },
+    box: { ...parentConfig.box, ...box },
+    stack: { ...parentConfig.stack, ...stack },
+    layout: { ...parentConfig.layout, ...layout },
+    padder: { ...parentConfig.padder, ...padder },
+  }
+}
+
+type CSSVariablesParams = {
+  base: number
+  baseline: ConfigSchema['baseline']
+  guide: ConfigSchema['guide']
+  stack: ConfigSchema['stack']
+  spacer: ConfigSchema['spacer']
+  layout: ConfigSchema['layout']
+  box: ConfigSchema['box']
+  padder: ConfigSchema['padder']
+}
+
+export const createCSSVariables = (params: CSSVariablesParams): Record<string, string> => {
+  const { base, baseline, guide, stack, spacer, layout, box, padder } = params
+  return {
+    '--bkb': `${base}px`,
+    '--bkbcl': baseline.colors.line,
+    '--bkbcf': baseline.colors.flat,
+    '--bkgcl': guide.colors.line,
+    '--bkgcp': guide.colors.pattern,
+    '--bkgca': guide.colors.auto,
+    '--bkgcf': guide.colors.fixed,
+    '--bkscl': spacer.colors.line,
+    '--bkscf': spacer.colors.flat,
+    '--bksci': spacer.colors.text,
+    '--bkxcl': box.colors.line,
+    '--bkxcf': box.colors.flat,
+    '--bkxci': box.colors.text,
+    '--bkkcl': stack.colors.line,
+    '--bkkcf': stack.colors.flat,
+    '--bkkci': stack.colors.text,
+    '--bklcl': layout.colors.line,
+    '--bklcf': layout.colors.flat,
+    '--bklci': layout.colors.text,
+    '--bkpc': padder.color,
+  }
+}
diff --git a/packages/core/src/config/schema.ts b/packages/core/src/config/schema.ts
new file mode 100644
index 00000000..0cfb9417
--- /dev/null
+++ b/packages/core/src/config/schema.ts
@@ -0,0 +1,26 @@
+import type { GuideVariant, BaselineVariant, Variant, DebuggingMode } from '../types'
+
+type Colors = {
+  line: string
+  flat: string
+  text: string
+}
+
+export type ConfigSchema = {
+  base: number
+  guide: {
+    variant: GuideVariant
+    debugging: DebuggingMode
+    colors: Record<GuideVariant, string>
+  }
+  baseline: {
+    variant: BaselineVariant
+    debugging: DebuggingMode
+    colors: Record<BaselineVariant, string>
+  }
+  stack: { colors: Colors; debugging: DebuggingMode }
+  layout: { colors: Colors; debugging: DebuggingMode }
+  spacer: { variant: Variant; debugging: DebuggingMode; colors: Colors }
+  box: { colors: Colors; debugging: DebuggingMode }
+  padder: { color: string; debugging: DebuggingMode }
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
new file mode 100644
index 00000000..c98543a8
--- /dev/null
+++ b/packages/core/src/index.ts
@@ -0,0 +1,17 @@
+/**
+ * @baseline-kit/core
+ * Pure TypeScript core: types, utilities, config, and validation
+ * Zero dependencies — works in any JavaScript runtime
+ */
+
+// Types
+export * from './types'
+
+// Config
+export * from './config'
+
+// Utilities
+export * from './utils'
+
+// Validation
+export * from './validation'
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
new file mode 100644
index 00000000..033bdd84
--- /dev/null
+++ b/packages/core/src/types.ts
@@ -0,0 +1,79 @@
+/**
+ * @baseline-kit/core - Pure type definitions
+ * Framework-agnostic types for the baseline-kit system
+ */
+
+// Spacing Types
+export type Spacing =
+  | number
+  | [number, number]
+  | { start?: number; end?: number }
+
+export type PaddingValue =
+  | number
+  | [number, number]
+  | [number, number, number]
+  | [number, number, number, number]
+  | { top?: number; bottom?: number; left?: number; right?: number }
+
+export type Padding = {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export type SpacingProps = {
+  padding?: PaddingValue
+  block?: Spacing
+  inline?: Spacing
+}
+
+// Grid Types
+export type GuideVariant = 'line' | 'pattern' | 'fixed' | 'auto'
+export type GuideColumnValue = string | number | undefined | 'auto'
+export type GuideColumnsPattern = readonly GuideColumnValue[]
+
+export const GRID_ALIGNMENTS = ['start', 'center', 'end'] as const
+export type GridAlignment = (typeof GRID_ALIGNMENTS)[number]
+
+export const PADD_VARIANTS = ['line', 'flat'] as const
+export type PaddedVariant = (typeof PADD_VARIANTS)[number]
+
+// Component Types
+export type Variant = 'line' | 'flat' | 'pattern'
+export type BaselineVariant = Exclude<Variant, 'pattern'>
+export type SnappingMode = 'none' | 'height' | 'clamp'
+export type DebuggingMode = 'none' | 'hidden' | 'visible'
+
+// Guide Config Types (framework-agnostic)
+type BaseGuideConfig = {
+  gap?: number | string
+  base?: number
+}
+
+export type PatternConfig = BaseGuideConfig & {
+  variant: 'pattern'
+  columns: GuideColumnsPattern
+  columnWidth?: never
+}
+
+export type FixedConfig = BaseGuideConfig & {
+  variant: 'fixed'
+  columns: number
+  columnWidth?: number | string
+}
+
+export type AutoConfig = BaseGuideConfig & {
+  variant: 'auto'
+  columnWidth: number | string
+  columns?: never
+}
+
+export type LineConfig = BaseGuideConfig & {
+  variant?: 'line'
+  columns?: never
+  columnWidth?: never
+}
+
+export type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig
diff --git a/packages/core/src/utils/convert.ts b/packages/core/src/utils/convert.ts
new file mode 100644
index 00000000..c9139d85
--- /dev/null
+++ b/packages/core/src/utils/convert.ts
@@ -0,0 +1,62 @@
+import { parseUnit } from './parse'
+
+export interface ConversionContext {
+  parentSize?: number
+  viewportWidth?: number
+  viewportHeight?: number
+  rootFontSize?: number
+  parentFontSize?: number
+}
+
+const DEFAULT_CONTEXT: Required<ConversionContext> = {
+  parentSize: 0,
+  viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1920,
+  viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 1080,
+  rootFontSize: 16,
+  parentFontSize: 16,
+}
+
+export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
+  px: 1,
+  in: 96,
+  cm: 37.8,
+  mm: 3.78,
+  pt: 1.33,
+  pc: 16,
+}
+
+export const RELATIVE_UNITS: string[] = ['em', 'rem', 'vh', 'vw', 'vmin', 'vmax', '%']
+
+export function convertValue(
+  value: number | string | undefined,
+  context?: ConversionContext
+): number | null {
+  if (typeof value === 'number') return value
+  if (typeof value !== 'string') return null
+
+  const parsed = parseUnit(value)
+  if (!parsed) return null
+
+  const { value: num, unit } = parsed
+
+  if (unit in ABSOLUTE_UNIT_CONVERSIONS) {
+    return num * ABSOLUTE_UNIT_CONVERSIONS[unit]
+  }
+
+  if (unit === 'auto') return null
+
+  if (RELATIVE_UNITS.includes(unit)) {
+    const ctx = { ...DEFAULT_CONTEXT, ...context }
+    switch (unit) {
+      case 'em': return num * ctx.parentFontSize
+      case 'rem': return num * ctx.rootFontSize
+      case 'vh': return (num / 100) * ctx.viewportHeight
+      case 'vw': return (num / 100) * ctx.viewportWidth
+      case 'vmin': return (num / 100) * Math.min(ctx.viewportWidth, ctx.viewportHeight)
+      case 'vmax': return (num / 100) * Math.max(ctx.viewportWidth, ctx.viewportHeight)
+      case '%': return (num / 100) * ctx.parentSize
+      default: return null
+    }
+  }
+  return null
+}
diff --git a/packages/core/src/utils/grid.ts b/packages/core/src/utils/grid.ts
new file mode 100644
index 00000000..61aad426
--- /dev/null
+++ b/packages/core/src/utils/grid.ts
@@ -0,0 +1,21 @@
+export const createGridSpanStyles = (
+  span?: number,
+  colSpan?: number,
+  rowSpan?: number
+): Record<string, string> => {
+  const gridStyles: Record<string, string> = {}
+
+  if (span !== undefined) {
+    gridStyles.gridColumn = `span ${span}`
+    gridStyles.gridRow = `span ${span}`
+  } else {
+    if (colSpan !== undefined) {
+      gridStyles.gridColumn = `span ${colSpan}`
+    }
+    if (rowSpan !== undefined) {
+      gridStyles.gridRow = `span ${rowSpan}`
+    }
+  }
+
+  return gridStyles
+}
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
new file mode 100644
index 00000000..2d6cb95d
--- /dev/null
+++ b/packages/core/src/utils/index.ts
@@ -0,0 +1,8 @@
+export * from './parse'
+export * from './convert'
+export * from './math'
+export * from './normalize'
+export * from './padding'
+export * from './snapping'
+export * from './merge'
+export * from './grid'
diff --git a/packages/core/src/utils/math.ts b/packages/core/src/utils/math.ts
new file mode 100644
index 00000000..42f5bdb4
--- /dev/null
+++ b/packages/core/src/utils/math.ts
@@ -0,0 +1,46 @@
+import { convertValue } from './convert'
+
+export function moduloize(
+  value: number | string | undefined,
+  base: number,
+  options?: { round?: boolean }
+): string {
+  const doRound = options?.round ?? true
+  const num =
+    value === undefined
+      ? 0
+      : typeof value === 'number'
+        ? value
+        : (convertValue(value) ?? 0)
+  const normalized = doRound ? Math.round(num) : num
+  const remainder = normalized % base
+  return `${remainder}px`
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function round(value: number, precision = 0): number {
+  if (precision >= 0) {
+    return Number(
+      (Math.round(value * 10 ** precision) / 10 ** precision).toFixed(precision)
+    )
+  } else {
+    const factor = 10 ** Math.abs(precision)
+    return Math.round(value / factor) * factor
+  }
+}
+
+type RowCountParams = {
+  height?: number
+  top: number
+  bottom: number
+  base: number
+}
+
+export function calculateRowCount(params: RowCountParams): number {
+  const { height, top, bottom, base } = params
+  const totalHeight = (height ?? 0) - (top + bottom)
+  return Math.max(1, Math.floor(totalHeight / base))
+}
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
new file mode 100644
index 00000000..dc4105a2
--- /dev/null
+++ b/packages/core/src/utils/merge.ts
@@ -0,0 +1,44 @@
+export const mergeClasses = (
+  ...classes: Array<string | boolean | undefined | null>
+): string => classes.filter(Boolean).join(' ').trim()
+
+export type StyleOverrideParams = {
+  key: string
+  value: string
+  defaultStyles: Record<string, string>
+  skipDimensions?: {
+    fitContent?: string[]
+    auto?: string[]
+    fullSize?: string[]
+  }
+}
+
+export function createStyleOverride(
+  params: StyleOverrideParams | string,
+  value?: string,
+  defaultStyles?: Record<string, string>
+): Record<string, string | number> {
+  const key = typeof params === 'string' ? params : params.key
+  const val = typeof params === 'string' ? value! : params.value
+  const defaults =
+    typeof params === 'string' ? defaultStyles! : params.defaultStyles
+  const skipDimensions =
+    typeof params === 'object' ? params.skipDimensions : undefined
+
+  if (skipDimensions) {
+    if (skipDimensions.fitContent?.includes(key) && val === 'fit-content') {
+      return {}
+    }
+    if (skipDimensions.auto?.includes(key) && val === 'auto') {
+      return {}
+    }
+    if (
+      skipDimensions.fullSize?.includes(key) &&
+      (val === '100%' || val === '100vh' || val === '100vw')
+    ) {
+      return {}
+    }
+  }
+
+  return val !== defaults[key] ? { [key]: val } : {}
+}
diff --git a/packages/core/src/utils/normalize.ts b/packages/core/src/utils/normalize.ts
new file mode 100644
index 00000000..5d5fbd3b
--- /dev/null
+++ b/packages/core/src/utils/normalize.ts
@@ -0,0 +1,84 @@
+import { convertValue } from './convert'
+import { clamp } from './math'
+
+export interface NormalizationOptions {
+  base?: number
+  round?: boolean
+  clamp?: { min?: number; max?: number }
+  suppressWarnings?: boolean
+}
+
+export function normalizeValue(
+  value: string | number | undefined,
+  options: NormalizationOptions = {}
+): number {
+  const {
+    base = 8,
+    round: doRound = true,
+    clamp: clampOptions,
+    suppressWarnings = false,
+  } = options
+
+  if (value === 'auto') return base
+
+  let num: number | null = null
+  if (typeof value === 'number') {
+    num = value
+  } else if (typeof value === 'string') {
+    const conv = convertValue(value)
+    if (conv === null) {
+      if (!suppressWarnings && process.env.NODE_ENV === 'development') {
+        console.error(
+          `Failed to convert "${value}" to pixels. Falling back to base ${base}.`
+        )
+      }
+      num = base
+    } else {
+      num = conv
+    }
+  }
+  if (num === null) num = base
+
+  if (base <= 0) return num
+
+  const normalized = doRound ? Math.round(num / base) * base : num
+
+  const clamped =
+    clampOptions !== undefined
+      ? clamp(
+          normalized,
+          clampOptions.min ?? -Infinity,
+          clampOptions.max ?? Infinity
+        )
+      : normalized
+
+  if (
+    !suppressWarnings &&
+    clamped !== num &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    console.warn(`Normalized ${num} to ${clamped} to match base ${base}px.`)
+  }
+
+  return clamped
+}
+
+export function normalizeValuePair(
+  values:
+    | [string | number | undefined, string | number | undefined]
+    | undefined,
+  defaults: [number, number],
+  options?: NormalizationOptions
+): [number, number] {
+  if (!values) return defaults
+
+  if (values[0] === undefined && values[1] === undefined) {
+    return defaults
+  }
+
+  const first =
+    values[0] !== undefined ? normalizeValue(values[0], options) : defaults[0]
+  const second =
+    values[1] !== undefined ? normalizeValue(values[1], options) : defaults[1]
+  return [first, second]
+}
diff --git a/packages/core/src/utils/padding.ts b/packages/core/src/utils/padding.ts
new file mode 100644
index 00000000..48c8cf46
--- /dev/null
+++ b/packages/core/src/utils/padding.ts
@@ -0,0 +1,93 @@
+import type { Padding, PaddingValue, Spacing, SpacingProps } from '../types'
+
+export function parsePadding(spacing: SpacingProps): Padding {
+  if ('padding' in spacing && spacing.padding != null) {
+    return parsePaddingValue(spacing.padding)
+  }
+
+  const blockEdges =
+    'block' in spacing && spacing.block != null
+      ? parseBlock(spacing.block)
+      : { top: 0, bottom: 0 }
+  const inlineEdges =
+    'inline' in spacing && spacing.inline != null
+      ? parseInline(spacing.inline)
+      : { left: 0, right: 0 }
+
+  return {
+    top: blockEdges.top,
+    right: inlineEdges.right,
+    bottom: blockEdges.bottom,
+    left: inlineEdges.left,
+  }
+}
+
+function parsePaddingValue(padding: PaddingValue): Padding {
+  if (typeof padding === 'number') {
+    return { top: padding, right: padding, bottom: padding, left: padding }
+  }
+
+  if (Array.isArray(padding)) {
+    const len = padding.length
+    if (len === 2) {
+      const [block, inline] = padding as [number, number]
+      return { top: block, right: inline, bottom: block, left: inline }
+    }
+    if (len === 3) {
+      const [top, inline, bottom] = padding as [number, number, number]
+      return {
+        top: top ?? 0,
+        right: inline ?? 0,
+        bottom: bottom ?? 0,
+        left: inline ?? 0,
+      }
+    }
+    if (len >= 4) {
+      const [top, right, bottom, left] = padding as [number, number, number, number]
+      return {
+        top: top ?? 0,
+        right: right ?? 0,
+        bottom: bottom ?? 0,
+        left: left ?? 0,
+      }
+    }
+  }
+
+  if (typeof padding === 'object' && !Array.isArray(padding)) {
+    const top = padding.top ?? 0
+    const bottom = padding.bottom ?? 0
+    const left = padding.left ?? 0
+    const right = padding.right ?? 0
+    return { top, right, bottom, left }
+  }
+
+  return { top: 0, right: 0, bottom: 0, left: 0 }
+}
+
+function parseBlock(block: Spacing): Pick<Padding, 'top' | 'bottom'> {
+  if (typeof block === 'number') {
+    return { top: block, bottom: block }
+  }
+  if (Array.isArray(block)) {
+    const [top, bottom] = block
+    return { top: top ?? 0, bottom: bottom ?? 0 }
+  }
+  if (typeof block === 'object') {
+    return { top: block.start ?? 0, bottom: block.end ?? 0 }
+  }
+  return { top: 0, bottom: 0 }
+}
+
+function parseInline(inline: Spacing): Pick<Padding, 'left' | 'right'> {
+  if (typeof inline === 'number') {
+    return { left: inline, right: inline }
+  }
+  if (Array.isArray(inline)) {
+    const [left, right] = inline
+    return { left: left ?? 0, right: right ?? 0 }
+  }
+  if (typeof inline === 'object') {
+    return { left: inline.start ?? 0, right: inline.end ?? 0 }
+  }
+  return { left: 0, right: 0 }
+}
diff --git a/packages/core/src/utils/parse.ts b/packages/core/src/utils/parse.ts
new file mode 100644
index 00000000..21137e8e
--- /dev/null
+++ b/packages/core/src/utils/parse.ts
@@ -0,0 +1,20 @@
+export function parseUnit(value: string): { value: number; unit: string } | null {
+  const match = value.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/)
+  if (!match) return null
+  const num = parseFloat(match[1])
+  const unit = match[2]
+  return { value: num, unit }
+}
+
+export function formatValue(value: string | number | undefined, defaultValue?: number): string {
+  if (value === undefined && defaultValue !== undefined) return `${defaultValue}px`
+  if (
+    value === 'auto' ||
+    (typeof value === 'string' &&
+      /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(value))
+  ) {
+    return String(value)
+  }
+  if (typeof value === 'number') return `${value}px`
+  return value ?? ''
+}
diff --git a/packages/core/src/utils/snapping.ts b/packages/core/src/utils/snapping.ts
new file mode 100644
index 00000000..2c7e075c
--- /dev/null
+++ b/packages/core/src/utils/snapping.ts
@@ -0,0 +1,33 @@
+import type { SnappingMode, Padding, PaddingValue } from '../types'
+import { parsePadding } from './padding'
+
+export function calculateSnappedSpacing(
+  height: number,
+  base: number,
+  initial: PaddingValue,
+  snapping: SnappingMode
+): Padding {
+  const pad: Padding = parsePadding({ padding: initial })
+
+  if (snapping === 'none') {
+    return pad
+  }
+
+  if (snapping === 'height') {
+    const remainder = height % base
+    if (remainder !== 0) {
+      pad.bottom += base - remainder
+    }
+  }
+
+  if (snapping === 'clamp') {
+    pad.top = pad.top % base
+    const remainder = height % base
+    if (remainder !== 0) {
+      pad.bottom += base - remainder
+    }
+    pad.bottom = pad.bottom % base
+  }
+
+  return pad
+}
diff --git a/packages/core/src/validation/guide.ts b/packages/core/src/validation/guide.ts
new file mode 100644
index 00000000..9ceb9ff5
--- /dev/null
+++ b/packages/core/src/validation/guide.ts
@@ -0,0 +1,50 @@
+import type { GuideColumnsPattern, GuideColumnValue, GridAlignment, GuideConfig } from '../types'
+import { GRID_ALIGNMENTS, ABSOLUTE_UNIT_CONVERSIONS, RELATIVE_UNITS } from '..'
+
+const UNIT_PATTERN =
+  /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/
+
+export const isValidGuideColumnValue = (
+  value: unknown
+): value is GuideColumnValue => {
+  if (typeof value === 'number') return Number.isFinite(value) && value >= 0
+  if (typeof value !== 'string') return false
+  return value === 'auto' || value === '100%' || UNIT_PATTERN.test(value)
+}
+
+export const isValidGuidePattern = (
+  pattern: unknown
+): pattern is GuideColumnsPattern =>
+  Array.isArray(pattern) &&
+  pattern.length > 0 &&
+  pattern.every(isValidGuideColumnValue)
+
+export const isGuideValue = (value: unknown) => {
+  const CSS_UNITS = [
+    ...Object.keys(ABSOLUTE_UNIT_CONVERSIONS),
+    ...RELATIVE_UNITS,
+  ]
+  return (
+    typeof value === 'number' ||
+    (typeof value === 'string' &&
+      CSS_UNITS.some((unit) => value.endsWith(unit)))
+  )
+}
+
+export const isGuideAlignment = (value: unknown): value is GridAlignment =>
+  typeof value === 'string' && GRID_ALIGNMENTS.includes(value as GridAlignment)
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null
+
+export const isGuideLineConfig = (config: unknown): config is GuideConfig =>
+  isObject(config) && config.variant === 'line'
+
+export const isGuideColumnConfig = (config: unknown): config is GuideConfig =>
+  isObject(config) && 'columns' in config && !('variant' in config)
+
+export const isAutoCalculatedGuide = (config: unknown): config is GuideConfig =>
+  isObject(config) &&
+  'columnWidth' in config &&
+  !('variant' in config) &&
+  !('columns' in config)
diff --git a/packages/core/src/validation/index.ts b/packages/core/src/validation/index.ts
new file mode 100644
index 00000000..b35fb21b
--- /dev/null
+++ b/packages/core/src/validation/index.ts
@@ -0,0 +1 @@
+export * from './guide'
diff --git a/packages/dom/package.json b/packages/dom/package.json
new file mode 100644
index 00000000..1a1db769
--- /dev/null
+++ b/packages/dom/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@baseline-kit/dom",
+  "version": "1.0.0",
+  "description": "DOM utilities for baseline-kit: timing, SSR detection, and browser APIs",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@baseline-kit/core": "workspace:*"
+  },
+  "license": "MIT",
+  "author": "Francois Denavaut"
+}
diff --git a/packages/dom/src/index.ts b/packages/dom/src/index.ts
new file mode 100644
index 00000000..25c7e5c5
--- /dev/null
+++ b/packages/dom/src/index.ts
@@ -0,0 +1,8 @@
+/**
+ * @baseline-kit/dom
+ * DOM utilities: timing, SSR detection, and browser APIs
+ * Depends on @baseline-kit/core
+ */
+
+export * from './timing'
+export * from './ssr'
diff --git a/packages/dom/src/ssr.ts b/packages/dom/src/ssr.ts
new file mode 100644
index 00000000..68315910
--- /dev/null
+++ b/packages/dom/src/ssr.ts
@@ -0,0 +1,39 @@
+/**
+ * Detects if code is running in a server-side environment
+ */
+export const isSSR = typeof window === 'undefined'
+
+/**
+ * Default dimensions to use during server-side rendering
+ */
+export const SSR_DIMENSIONS = {
+  width: 1024,
+  height: 768,
+}
+
+/**
+ * Safe window-using function that works in both server and client
+ */
+export function safeClientValue<T>(clientFn: () => T, fallback: T): T {
+  if (isSSR) {
+    return fallback
+  }
+
+  try {
+    return clientFn()
+  } catch {
+    return fallback
+  }
+}
+
+/**
+ * Returns a stable value during SSR and initial render, then switches to
+ * the dynamic value after hydration
+ */
+export function hydratedValue<T>(
+  isHydrated: boolean,
+  ssrValue: T,
+  dynamicValue: T
+): T {
+  return !isHydrated || isSSR ? ssrValue : dynamicValue
+}
diff --git a/packages/dom/src/timing.ts b/packages/dom/src/timing.ts
new file mode 100644
index 00000000..d4665c5b
--- /dev/null
+++ b/packages/dom/src/timing.ts
@@ -0,0 +1,41 @@
+export const debounce = <T extends (...args: unknown[]) => void>(
+  fn: T,
+  delay: number
+): [T, () => void] => {
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const cancel = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  const debounced = ((...args) => {
+    cancel()
+    timer = setTimeout(() => fn(...args), delay)
+  }) as T
+
+  return [debounced, cancel]
+}
+
+export const rafThrottle = <T extends (...args: never[]) => void>(fn: T): T => {
+  let rafId: number | null = null
+  let lastArgs: Parameters<T> | null = null
+
+  const throttled = (...args: Parameters<T>) => {
+    lastArgs = args
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+    }
+
+    rafId = requestAnimationFrame(() => {
+      fn(...lastArgs!)
+      rafId = null
+      lastArgs = null
+    })
+  }
+
+  return throttled as T
+}
diff --git a/packages/react/package.json b/packages/react/package.json
new file mode 100644
index 00000000..bf4ef085
--- /dev/null
+++ b/packages/react/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@baseline-kit/react",
+  "version": "1.0.0",
+  "description": "React adapter for baseline-kit: components, hooks, and React-specific utilities",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@baseline-kit/core": "workspace:*",
+    "@baseline-kit/dom": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "license": "MIT",
+  "author": "Francois Denavaut"
+}
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
new file mode 100644
index 00000000..bdaa9f10
--- /dev/null
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -0,0 +1,367 @@
+import * as React from 'react'
+import { ComponentsProps } from '../types'
+import { useConfig, useDebug, useVirtual, useMeasure } from '../../hooks'
+import {
+  parsePadding,
+  normalizeValuePair,
+  mergeClasses,
+  calculateRowCount,
+  formatValue,
+  createStyleOverride,
+} from '@baseline-kit/core'
+import { mergeStyles } from '../../utils/merge'
+import { ClientOnly } from '../../utils/ssr'
+import { Variant } from '../types'
+import styles from './styles.module.css'
+
+export type BaselineVariant = Exclude<Variant, 'pattern'>
+
+export type BaselineProps = {
+  /** Visual style variant for the baseline guides */
+  variant?: BaselineVariant
+  /** Explicit width for the overlay (e.g., "1200px" or 1200) */
+  width?: number | string
+  /** Explicit height for the overlay (e.g., "100vh" or 800) */
+  height?: number | string
+  /** Base unit for measurements (defaults to theme value) */
+  base?: number
+  /** Color override for grid lines */
+  color?: string
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+} & ComponentsProps
+
+/** Creates default baseline styles */
+const createDefaultBaselineStyles = (
+  base: number,
+  lineColor: string,
+  flatColor: string
+): Record<string, string> => ({
+  '--bkbw': '100%',
+  '--bkbh': '100%',
+  '--bkbb': `${base}px`,
+  '--bkbcl': lineColor,
+  '--bkbcf': flatColor,
+})
+
+/** Create row styles for baseline lines */
+type RowStyleParams = {
+  /** Row index */
+  index: number
+  /** Base unit for calculations */
+  base: number
+  /** Baseline visual variant */
+  variant: BaselineVariant
+  /** Selected color for the baseline */
+  chosenColor: string
+  /** Theme line color */
+  lineColor: string
+  /** Theme flat color */
+  flatColor: string
+}
+
+/**
+ * Creates styles for an individual baseline row.
+ * Applies positioning and visual styling based on variant.
+ */
+const createBaselineRowStyle = (
+  params: RowStyleParams
+): React.CSSProperties => {
+  const { index, base, variant, chosenColor, lineColor, flatColor } = params
+
+  // Directly set the CSS variables instead of using createStyleOverride
+  return {
+    '--bkrt': index === 0 ? '0px' : `${index * base}px`,
+    '--bkrh': variant === 'line' ? '1px' : `${base}px`,
+    '--bkbc': chosenColor || (variant === 'line' ? lineColor : flatColor),
+  } as React.CSSProperties
+}
+
+// Implementation component that only renders on the client side
+const BaselineImpl = React.memo(function BaselineImpl({
+  className,
+  debugging,
+  style,
+  variant,
+  height: heightProp,
+  width: widthProp,
+  base,
+  color: colorProp,
+  ssrMode: _ssrMode = false,
+  ...spacingProps
+}: BaselineProps) {
+  const config = useConfig('baseline')
+  const { isShown } = useDebug(debugging, config.debugging)
+
+  // Use a stable reference that won't cause hydration mismatches
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+
+  // Always call hooks, but conditionally use their results
+  const {
+    width: containerWidth,
+    height: containerHeight,
+    refresh,
+  } = useMeasure(containerRef)
+
+  // Effect for handling window resize events
+  React.useEffect(() => {
+    const handleResize = () => {
+      refresh()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [refresh])
+
+  const [_normWidth, normHeight] = React.useMemo(() => {
+    return normalizeValuePair(
+      [widthProp, heightProp],
+      [containerWidth, containerHeight]
+    )
+  }, [widthProp, heightProp, containerWidth, containerHeight])
+
+  const { top, right, bottom, left } = React.useMemo(
+    () => parsePadding(spacingProps),
+    [spacingProps]
+  )
+
+  const padding = React.useMemo(() => {
+    const paddingValues = [top, right, bottom, left]
+      .map((value) => (value ? `${value}px` : '0'))
+      .join(' ')
+
+    return paddingValues !== '0 0 0 0' ? paddingValues : undefined
+  }, [top, right, bottom, left])
+
+  const rowCount = React.useMemo(() => {
+    const baseValue = base || config.base
+    return calculateRowCount({
+      height: normHeight,
+      top,
+      bottom,
+      base: baseValue,
+    })
+  }, [normHeight, top, bottom, base, config.base])
+
+  // Use virtual rendering for performance
+  const { start, end } = useVirtual({
+    totalLines: rowCount,
+    lineHeight: base || config.base,
+    containerRef,
+    buffer: 160,
+  })
+
+  const chosenColor =
+    colorProp || (variant === 'line' ? config.colors.line : config.colors.flat)
+
+  // Create default baseline styles
+  const defaultBaselineStyles = React.useMemo(
+    () =>
+      createDefaultBaselineStyles(
+        base || config.base,
+        config.colors.line,
+        config.colors.flat
+      ),
+    [base, config.colors.line, config.colors.flat, config.base]
+  )
+
+  const containerStyles = React.useMemo(() => {
+    const widthValue = formatValue(widthProp || '100%')
+    const heightValue = formatValue(heightProp || '100%')
+
+    // Define dimensions that should be skipped when set to 100%
+    const dimensionVars = ['--bkbw', '--bkbh']
+
+    return mergeStyles(
+      {
+        ...createStyleOverride({
+          key: '--bkbw',
+          value: widthValue,
+          defaultStyles: defaultBaselineStyles,
+          skipDimensions: { fullSize: dimensionVars },
+        }),
+        ...createStyleOverride({
+          key: '--bkbh',
+          value: heightValue,
+          defaultStyles: defaultBaselineStyles,
+          skipDimensions: { fullSize: dimensionVars },
+        }),
+        ...createStyleOverride({
+          key: '--bkbb',
+          value: `${base}px`,
+          defaultStyles: defaultBaselineStyles,
+        }),
+        ...createStyleOverride({
+          key: '--bkbcl',
+          value: colorProp || config.colors.line,
+          defaultStyles: defaultBaselineStyles,
+        }),
+        ...createStyleOverride({
+          key: '--bkbcf',
+          value: colorProp || config.colors.flat,
+          defaultStyles: defaultBaselineStyles,
+        }),
+        ...(padding && { padding }),
+      } as React.CSSProperties,
+      style
+    )
+  }, [
+    widthProp,
+    heightProp,
+    base,
+    colorProp,
+    config.colors.line,
+    config.colors.flat,
+    padding,
+    defaultBaselineStyles,
+    style,
+  ])
+
+  const getRowStyle = React.useCallback(
+    (index: number) => {
+      // Ensure variant is a BaselineVariant
+      const safeVariant = variant as BaselineVariant
+      const safeBase = base || config.base
+
+      return createBaselineRowStyle({
+        index,
+        base: safeBase,
+        variant: safeVariant,
+        chosenColor,
+        lineColor: config.colors.line,
+        flatColor: config.colors.flat,
+      })
+    },
+    [
+      base,
+      variant,
+      chosenColor,
+      config.colors.line,
+      config.colors.flat,
+      config.base,
+    ]
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      data-testid="baseline"
+      aria-hidden="true"
+      className={mergeClasses(
+        styles.bas,
+        isShown ? styles.v : styles.h,
+        className
+      )}
+      style={containerStyles}
+      {...spacingProps}
+    >
+      {isShown &&
+        Array.from({ length: end - start }, (_, i) => {
+          const rowIndex = i + start
+          return (
+            <div
+              className={styles.row}
+              key={rowIndex}
+              data-row-index={rowIndex}
+              style={getRowStyle(rowIndex)}
+            />
+          )
+        })}
+    </div>
+  )
+})
+
+/**
+ * Renders horizontal guidelines for maintaining vertical rhythm and baseline alignment.
+ *
+ * @remarks
+ * Baseline provides horizontal guides that:
+ * - Help maintain consistent vertical spacing
+ * - Support visual verification of baseline alignment
+ * - Optimize performance through virtual rendering
+ * - Adapt to container dimensions
+ *
+ * @example
+ * ```tsx
+ * // Basic baseline overlay
+ * <Baseline
+ *   height="100vh"
+ *   base={8}
+ *   debugging="visible"
+ * />
+ *
+ * // Custom variant with padding
+ * <Baseline
+ *   variant="flat"
+ *   height="100vh"
+ *   base={4}
+ *   block={[16, 0]}
+ *   debugging="visible"
+ * />
+ * ```
+ */
+export const Baseline = React.memo(function Baseline({
+  className,
+  debugging,
+  style,
+  variant: variantProp,
+  height: heightProp,
+  width: widthProp,
+  base: baseProp,
+  color: colorProp,
+  ssrMode = false,
+  ...spacingProps
+}: BaselineProps) {
+  const config = useConfig('baseline')
+  const variant = variantProp ?? config.variant
+  const base = baseProp ?? config.base
+  const { isShown } = useDebug(debugging, config.debugging)
+
+  // If debugging isn't enabled, render a hidden element
+  // This ensures tests can find the element even when hidden
+  if (!isShown) {
+    return (
+      <div
+        className={mergeClasses(styles.b, styles.h, className)}
+        style={style}
+        data-testid="baseline"
+        aria-hidden="true"
+        {...spacingProps}
+      />
+    )
+  }
+
+  // Create a simple SSR fallback
+  const ssrFallback = (
+    <div
+      className={mergeClasses(styles.b, styles.h, styles.ssr, className)}
+      style={{
+        width: widthProp || '100%',
+        height: heightProp || '100%',
+        ...style,
+      }}
+      data-testid="baseline"
+      aria-hidden="true"
+    />
+  )
+
+  // Wrap the actual implementation in ClientOnly
+  return (
+    <ClientOnly fallback={ssrFallback}>
+      <BaselineImpl
+        className={className}
+        debugging={debugging}
+        style={style}
+        variant={variant}
+        height={heightProp}
+        width={widthProp}
+        base={base}
+        color={colorProp}
+        ssrMode={ssrMode}
+        {...spacingProps}
+      />
+    </ClientOnly>
+  )
+})
diff --git a/packages/react/src/components/Baseline/index.ts b/packages/react/src/components/Baseline/index.ts
new file mode 100644
index 00000000..a78e7c5f
--- /dev/null
+++ b/packages/react/src/components/Baseline/index.ts
@@ -0,0 +1 @@
+export * from './Baseline'
diff --git a/packages/react/src/components/Baseline/styles.module.css b/packages/react/src/components/Baseline/styles.module.css
new file mode 100644
index 00000000..e4c1563d
--- /dev/null
+++ b/packages/react/src/components/Baseline/styles.module.css
@@ -0,0 +1,26 @@
+.bas {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  width: var(--bkbw);
+  height: var(--bkbh);
+  overflow: hidden;
+}
+
+.row {
+  left: 0;
+  right: 0;
+  position: absolute;
+  top: var(--bkrt);
+  height: var(--bkrh);
+  background-color: var(--bkbc);
+}
+
+/* Style for SSR rendering */
+.ssr {
+  box-sizing: border-box;
+  display: grid;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+}
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
new file mode 100644
index 00000000..2a4d73d2
--- /dev/null
+++ b/packages/react/src/components/Box/Box.tsx
@@ -0,0 +1,247 @@
+import * as React from 'react'
+import { useConfig, useDebug, useBaseline } from '../../hooks'
+import {
+  mergeClasses,
+  parsePadding,
+  formatValue,
+  createGridSpanStyles,
+  createStyleOverride,
+} from '@baseline-kit/core'
+import { hydratedValue } from '@baseline-kit/dom'
+import { mergeStyles, mergeRefs } from '../../utils/merge'
+import { Config } from '../Config/Config'
+import { Padder } from '../Padder'
+import { ComponentsProps } from '../types'
+import styles from './styles.module.css'
+
+/**
+ * Determines how the Box component aligns to the baseline grid.
+ *
+ * @remarks
+ * - `none`: No snapping; uses raw spacing values as provided
+ * - `height`: Only container height snaps to base unit multiples
+ * - `clamp`: Both height and spacing values snap to base unit multiples
+ */
+export type SnappingMode = 'none' | 'height' | 'clamp'
+
+export type BoxProps = {
+  /** Number of columns to span in a grid layout */
+  colSpan?: number
+  /** Number of rows to span in a grid layout */
+  rowSpan?: number
+  /** Shorthand for equal column and row span. Takes precedence over individual spans */
+  span?: number
+  /** Controls baseline grid alignment behavior */
+  snapping?: SnappingMode
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+  children?: React.ReactNode
+} & ComponentsProps
+
+/**
+ * Creates default box styles with theme values.
+ * Sets CSS variables for width, height, base unit, and colors.
+ */
+const createDefaultBoxStyles = (
+  base: number,
+  lineColor: string
+): Record<string, string> => ({
+  '--bkboxw': 'auto',
+  '--bkboxh': 'auto',
+  '--bkboxc': lineColor,
+  '--bkboxb': `${base}px`,
+})
+
+type BoxCustomStylesParams = {
+  /** Width property for the box */
+  width?: React.CSSProperties['width']
+  /** Height property for the box */
+  height?: React.CSSProperties['height']
+  /** Base unit for measurements */
+  base: number
+  /** Line color from theme */
+  lineColor: string
+  /** Default styles for comparison */
+  defaultStyles: Record<string, string>
+}
+
+/**
+ * Creates custom styles for the Box component.
+ * Handles dimension overrides and other custom properties.
+ */
+const createBoxCustomStyles = ({
+  width,
+  height,
+  base,
+  lineColor,
+  defaultStyles,
+}: BoxCustomStylesParams): React.CSSProperties => {
+  const widthValue = formatValue(width || 'fit-content')
+  const heightValue = formatValue(height || 'fit-content')
+
+  // Define box dimensions that should be skipped when set to fit-content
+  const dimensionVars = ['--bkboxw', '--bkboxh']
+
+  return {
+    ...createStyleOverride({
+      key: '--bkboxw',
+      value: widthValue,
+      defaultStyles,
+      skipDimensions: { fitContent: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkboxh',
+      value: heightValue,
+      defaultStyles,
+      skipDimensions: { fitContent: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkboxb',
+      value: `${base}px`,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkboxc',
+      value: lineColor,
+      defaultStyles,
+    }),
+  } as React.CSSProperties
+}
+
+/**
+ * A foundational container component that ensures consistent spacing and baseline alignment.
+ *
+ * @remarks
+ * Box provides a layout container that:
+ * - Ensures consistent spacing aligned to the baseline grid
+ * - Supports grid layout integration through span props
+ * - Offers configurable snapping modes for fine-grained alignment control
+ * - Includes debug overlays for visual alignment verification
+ *
+ * By default, Box uses "auto" for both width and height unless explicitly specified.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with spacing
+ * <Box block={16} inline={8}>
+ *   <p>Content aligned to baseline</p>
+ * </Box>
+ *
+ * // With grid spanning and custom snapping
+ * <Box
+ *   colSpan={2}
+ *   rowSpan={1}
+ *   snapping="height"
+ *   debugging="visible"
+ * >
+ *   <p>Grid-integrated content</p>
+ * </Box>
+ * ```
+ */
+export const Box = React.memo(
+  React.forwardRef<HTMLDivElement, BoxProps>(function Box(
+    {
+      children,
+      snapping = 'clamp',
+      debugging: debuggingProp,
+      className,
+      colSpan,
+      rowSpan,
+      span,
+      width,
+      height,
+      style,
+      ssrMode = false,
+      ...spacingProps
+    },
+    ref
+  ) {
+    const config = useConfig('box')
+    const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
+
+    // Add hydration state tracking
+    const [isHydrated, setIsHydrated] = React.useState(false)
+
+    React.useEffect(() => {
+      setIsHydrated(true)
+    }, [])
+
+    const internalRef = React.useRef<HTMLDivElement | null>(null)
+    const { top, bottom, left, right } = parsePadding(spacingProps)
+
+    // Get padding calculation from useBaseline
+    const baselinePadding = useBaseline(internalRef, {
+      base: config.base,
+      snapping,
+      spacing: { top, bottom, left, right },
+      warnOnMisalignment: debugging !== 'none',
+    })
+
+    // Create stable initial padding for SSR
+    const stablePadding = {
+      padding: {
+        top: top || 0,
+        right: right || 0,
+        bottom: bottom || 0,
+        left: left || 0,
+      },
+    }
+
+    // Use stable padding during SSR and initial render, then switch to dynamic padding
+    const { padding } = hydratedValue(
+      isHydrated && !ssrMode,
+      stablePadding,
+      baselinePadding
+    )
+
+    const gridSpanStyles = React.useMemo(
+      () => createGridSpanStyles(span, colSpan, rowSpan),
+      [colSpan, rowSpan, span]
+    )
+
+    const defaultBoxStyles = React.useMemo(
+      () => createDefaultBoxStyles(config.base, config.colors.line),
+      [config.base, config.colors.line]
+    )
+
+    const boxStyles = React.useMemo(() => {
+      const customStyles = createBoxCustomStyles({
+        width,
+        height,
+        base: config.base,
+        lineColor: config.colors.line,
+        defaultStyles: defaultBoxStyles,
+      })
+      return mergeStyles(customStyles, style)
+    }, [
+      config.base,
+      config.colors.line,
+      width,
+      height,
+      defaultBoxStyles,
+      style,
+    ])
+
+    return (
+      <div
+        ref={mergeRefs(ref, internalRef)}
+        data-testid="box"
+        className={mergeClasses(styles.box, isShown && styles.v, className)}
+        style={mergeStyles(boxStyles, gridSpanStyles)}
+      >
+        <Config base={1} spacer={{ variant: 'flat' }}>
+          <Padder
+            block={[padding.top, padding.bottom]}
+            inline={[padding.left, padding.right]}
+            width="fit-content"
+            height={height}
+            debugging={debugging}
+            ssrMode={ssrMode}
+          >
+            {children}
+          </Padder>
+        </Config>
+      </div>
+    )
+  })
+)
diff --git a/packages/react/src/components/Box/index.ts b/packages/react/src/components/Box/index.ts
new file mode 100644
index 00000000..332601ef
--- /dev/null
+++ b/packages/react/src/components/Box/index.ts
@@ -0,0 +1 @@
+export * from './Box'
diff --git a/packages/react/src/components/Box/styles.module.css b/packages/react/src/components/Box/styles.module.css
new file mode 100644
index 00000000..d20895ac
--- /dev/null
+++ b/packages/react/src/components/Box/styles.module.css
@@ -0,0 +1,14 @@
+.box {
+  position: relative;
+  width: var(--bkxw);
+  height: var(--bkxh);
+}
+
+.v::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--bkxcl);
+  pointer-events: none;
+  z-index: var(--bkzi);
+}
diff --git a/packages/react/src/components/Config/Config.tsx b/packages/react/src/components/Config/Config.tsx
new file mode 100644
index 00000000..fd6b47c5
--- /dev/null
+++ b/packages/react/src/components/Config/Config.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react'
+import type { BaselineVariant, GuideVariant, Variant, ConfigSchema } from '@baseline-kit/core'
+import { DEFAULT_CONFIG, mergeConfig, createCSSVariables } from '@baseline-kit/core'
+
+// Re-export types that consumers need
+export type { DebuggingMode, ConfigSchema } from '@baseline-kit/core'
+
+// Create the context
+const ConfigContext = React.createContext<ConfigSchema>(DEFAULT_CONFIG)
+ConfigContext.displayName = 'ConfigContext'
+
+// Update to use React 19's use hook instead of useContext
+export const useDefaultConfig = () => React.use(ConfigContext)
+
+type ConfigProps = {
+  children: React.ReactNode
+  base?: number
+  baseline?: Partial<ConfigSchema['baseline']>
+  stack?: Partial<ConfigSchema['stack']>
+  layout?: Partial<ConfigSchema['layout']>
+  guide?: Partial<ConfigSchema['guide']>
+  spacer?: Partial<ConfigSchema['spacer']>
+  box?: Partial<ConfigSchema['box']>
+  padder?: Partial<ConfigSchema['padder']>
+}
+
+/**
+ * Configuration provider for baseline-kit components.
+ */
+export function Config({
+  children,
+  base,
+  stack,
+  baseline,
+  guide,
+  layout,
+  spacer,
+  box,
+  padder,
+}: ConfigProps) {
+  const parentConfig = useDefaultConfig()
+
+  const value = React.useMemo(() => {
+    return mergeConfig({
+      parentConfig,
+      base,
+      baseline,
+      guide,
+      spacer,
+      box,
+      stack,
+      layout,
+      padder,
+    })
+  }, [parentConfig, base, baseline, guide, spacer, box, stack, layout, padder])
+
+  return <ConfigContext value={value}>{children}</ConfigContext>
+}
+
+// Re-export createCSSVariables and mergeConfig for consumers
+export { createCSSVariables, mergeConfig }
diff --git a/packages/react/src/components/Config/index.ts b/packages/react/src/components/Config/index.ts
new file mode 100644
index 00000000..ae6b2975
--- /dev/null
+++ b/packages/react/src/components/Config/index.ts
@@ -0,0 +1,2 @@
+export * from './Config'
+export { DEFAULT_CONFIG } from '@baseline-kit/core'
diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
new file mode 100644
index 00000000..42efbed7
--- /dev/null
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -0,0 +1,430 @@
+import * as React from 'react'
+import { ComponentsProps } from '../types'
+import { useConfig, useDebug, useGuide, useMeasure } from '../../hooks'
+import {
+  formatValue,
+  mergeClasses,
+  createStyleOverride,
+} from '@baseline-kit/core'
+import { mergeStyles } from '../../utils/merge'
+import { ClientOnly } from '../../utils/ssr'
+import type { AutoConfig, FixedConfig, LineConfig, PatternConfig } from './types'
+import type { GuideVariant, GuideConfig as CoreGuideConfig } from '@baseline-kit/core'
+import styles from './styles.module.css'
+
+/** Merged configuration types that support various grid layout strategies */
+export type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig
+
+export type GuideProps = {
+  /** Controls horizontal alignment of columns within the container */
+  align?: React.CSSProperties['justifyContent']
+  /** Visual style of the guide */
+  variant?: GuideVariant
+  /** Number of columns (for fixed/auto variants) */
+  columns?: number | readonly (string | number | undefined | 'auto')[]
+  /** Column width (for fixed variant) */
+  columnWidth?: React.CSSProperties['width']
+  /** Maximum width of the guide */
+  maxWidth?: React.CSSProperties['maxWidth']
+  /** Color override for guide lines */
+  color?: React.CSSProperties['color']
+  /** Content to render inside the guide */
+  children?: React.ReactNode
+  /** Gap between columns */
+  gap?: number
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+} & ComponentsProps &
+  Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>
+
+/** Parameters for creating a grid configuration */
+type GridConfigParams = {
+  variant: GuideVariant
+  base: number
+  gap: number
+  columns?: number | readonly (string | number | undefined | 'auto')[]
+  columnWidth?: React.CSSProperties['width']
+}
+
+/**
+ * Creates a grid configuration based on the specified variant and parameters
+ * Internal helper function for Guide component
+ */
+const createGridConfig = (
+  params: GridConfigParams
+): PatternConfig | AutoConfig | FixedConfig | LineConfig => {
+  const { variant, base, gap, columns, columnWidth } = params
+
+  switch (variant) {
+    case 'line':
+      return {
+        variant: 'line',
+        gap,
+        base,
+      } as LineConfig
+
+    case 'pattern':
+      if (columns && Array.isArray(columns)) {
+        return {
+          variant: 'pattern',
+          columns: columns as readonly (string | number)[],
+          gap,
+          base,
+        } as PatternConfig
+      }
+      break
+
+    case 'fixed':
+      if (columns !== undefined) {
+        const parsedColumns =
+          typeof columns === 'number' ? columns : parseInt(String(columns), 10)
+        return {
+          variant: 'fixed',
+          columns: !isNaN(parsedColumns) ? parsedColumns : 12,
+          columnWidth: columnWidth || '60px',
+          gap,
+          base,
+        } as FixedConfig
+      }
+      break
+  }
+
+  // Default to auto columns if no valid configuration was created
+  return {
+    variant: 'auto',
+    columnWidth: columnWidth || '1fr',
+    gap,
+    base,
+  } as AutoConfig
+}
+
+/** Creates default guide styles */
+const createDefaultGuideStyles = (
+  base: number,
+  lineColor: string
+): Record<string, string> => ({
+  '--bkgw': 'auto',
+  '--bkgh': 'auto',
+  '--bkgmw': 'none',
+  '--bkgcw': '60px',
+  '--bkggw': '24px',
+  '--bkgc': '12',
+  '--bkgb': `${base}px`,
+  '--bkgcl': lineColor,
+  '--bkgg': '0',
+})
+
+/**
+ * A developer tool component that provides visual grid overlays for alignment.
+ *
+ * @remarks
+ * Guide renders a configurable grid overlay that helps visualize:
+ * - Column layouts and spacing
+ * - Content alignment
+ * - Layout patterns
+ *
+ * The component supports multiple variants:
+ * - "line": Simple evenly-spaced vertical lines
+ * - "pattern": Custom repeating column width patterns
+ * - "fixed": Fixed number of equal or custom-width columns
+ * - "auto": Dynamically calculated columns based on container width
+ *
+ * @example
+ * ```tsx
+ * // Basic column guide
+ * <Guide
+ *   variant="line"
+ *   gap={8}
+ *   debugging="visible"
+ * />
+ *
+ * // Custom column pattern
+ * <Guide
+ *   variant="pattern"
+ *   columns={['100px', '1fr', '2fr']}
+ *   gap={16}
+ *   align="center"
+ *   debugging="visible"
+ * />
+ *
+ * // Fixed columns with custom width
+ * <Guide
+ *   variant="fixed"
+ *   columns={12}
+ *   columnWidth="60px"
+ *   gap={8}
+ *   debugging="visible"
+ * />
+ * ```
+ */
+export const Guide = React.memo(function Guide({
+  className,
+  debugging,
+  style,
+  variant: variantProp,
+  align = 'center',
+  gap: gapProp,
+  height,
+  width,
+  columns,
+  columnWidth,
+  maxWidth,
+  color,
+  children,
+  ssrMode = false,
+  ...props
+}: GuideProps) {
+  const config = useConfig('guide')
+  const variant = variantProp ?? config.variant
+  const gap = typeof gapProp === 'number' ? gapProp : 0
+  const { isShown } = useDebug(debugging, config.debugging)
+
+  // If debugging isn't enabled, render a hidden element
+  // This ensures tests can find the element even when hidden
+  if (!isShown) {
+    return (
+      <div
+        className={mergeClasses(styles.g, styles.h, className)}
+        style={style}
+        data-testid="guide"
+        data-variant={variant}
+        aria-hidden="true"
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  // Create a simple SSR fallback with the expected dimensions
+  const ssrFallback = (
+    <div
+      className={mergeClasses(styles.g, styles.h, styles.ssr, className)}
+      style={{
+        width: width || '100%',
+        height: height || '100%',
+        maxWidth: maxWidth || 'none',
+        ...style,
+      }}
+      data-testid="guide"
+      data-variant={variant}
+      aria-hidden="true"
+    >
+      {children}
+    </div>
+  )
+
+  // Wrap the actual implementation in ClientOnly
+  return (
+    <ClientOnly fallback={ssrFallback}>
+      <GuideImpl
+        className={className}
+        debugging={debugging}
+        style={style}
+        variant={variant}
+        align={align}
+        gap={gap}
+        height={height}
+        width={width}
+        columns={columns}
+        columnWidth={columnWidth}
+        maxWidth={maxWidth}
+        color={color}
+        ssrMode={ssrMode}
+        {...props}
+      >
+        {children}
+      </GuideImpl>
+    </ClientOnly>
+  )
+})
+
+// Implementation component that only renders on the client side
+const GuideImpl = React.memo(function GuideImpl({
+  className,
+  debugging,
+  style,
+  variant,
+  align = 'center',
+  gap,
+  height,
+  width,
+  columns,
+  columnWidth,
+  maxWidth,
+  color,
+  children,
+  ssrMode: _ssrMode = false,
+  ...props
+}: GuideProps) {
+  const config = useConfig('guide')
+  const { isShown } = useDebug(debugging, config.debugging)
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+
+  // Measure the container dimensions
+  const {
+    width: containerWidth,
+    height: containerHeight,
+    refresh, // Keep the refresh function available for dynamic updates
+  } = useMeasure(containerRef)
+
+  // Effect for handling window resize events
+  React.useEffect(() => {
+    const handleResize = () => {
+      // Trigger a remeasurement when window size changes
+      refresh()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [refresh])
+
+  // Create guide configuration based on variant
+  const gridConfig = React.useMemo(() => {
+    // Ensure we have valid values for the grid configuration
+    const safeVariant = variant as GuideVariant
+    const safeGap = typeof gap === 'number' ? gap : 0
+
+    return createGridConfig({
+      variant: safeVariant,
+      base: config.base,
+      gap: safeGap,
+      columns,
+      columnWidth,
+    })
+  }, [variant, config.base, gap, columns, columnWidth])
+
+  const { template, columnsCount, calculatedGap } = useGuide(
+    containerRef,
+    gridConfig as CoreGuideConfig
+  )
+
+  const defaultStyles = React.useMemo(
+    () => createDefaultGuideStyles(config.base, config.colors.line),
+    [config.base, config.colors.line]
+  )
+
+  const containerStyles = React.useMemo(() => {
+    // Process dimension values
+    const widthValue = formatValue(width || containerWidth || 'auto')
+    const heightValue = formatValue(height || containerHeight || 'auto')
+    const maxWidthValue = formatValue(maxWidth || 'none')
+    const columnWidthValue = formatValue(columnWidth || '60px')
+
+    // Define dimensions that should be skipped when set to auto
+    const autoDimensions = ['--bkgw', '--bkgh']
+
+    // Create custom styles with conditional overrides
+    const customStyles = {
+      ...createStyleOverride({
+        key: '--bkgw',
+        value: widthValue,
+        defaultStyles,
+        skipDimensions: { auto: autoDimensions },
+      }),
+      ...createStyleOverride({
+        key: '--bkgh',
+        value: heightValue,
+        defaultStyles,
+        skipDimensions: { auto: autoDimensions },
+      }),
+      ...createStyleOverride({
+        key: '--bkgmw',
+        value: maxWidthValue,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgcw',
+        value: columnWidthValue,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgc',
+        value: `${columnsCount}`,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgb',
+        value: `0`,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgcl',
+        value: color ?? config.colors.line,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgg',
+        value: `${calculatedGap}px`,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkgj',
+        value: align || 'center',
+        defaultStyles,
+      }),
+      ...(template && template !== 'none' ? { '--bkgt': template } : {}),
+      // Add grid template if available
+      ...(template && template !== 'none'
+        ? { gridTemplateColumns: template }
+        : {}),
+    } as React.CSSProperties
+
+    return mergeStyles(customStyles, style)
+  }, [
+    width,
+    height,
+    maxWidth,
+    columnWidth,
+    columnsCount,
+    color,
+    template,
+    calculatedGap,
+    containerWidth,
+    containerHeight,
+    config.colors.line,
+    defaultStyles,
+    style,
+    align,
+  ])
+
+  return (
+    <div
+      ref={containerRef}
+      data-testid="guide"
+      aria-hidden="true"
+      className={mergeClasses(
+        styles.gde,
+        className,
+        isShown ? styles.v : styles.h,
+        variant === 'line' && styles.line
+      )}
+      data-variant={variant}
+      style={containerStyles}
+      {...props}
+    >
+      {isShown && (
+        <div className={styles.cols} data-variant={variant}>
+          {Array.from({ length: columnsCount }, (_, i) => {
+            const colColor =
+              (variant && variant in config.colors
+                ? config.colors[variant as keyof typeof config.colors]
+                : undefined) ?? config.colors.line
+            return (
+              <div
+                key={i}
+                className={styles.col}
+                data-column-index={i}
+                data-variant={variant}
+                style={{ backgroundColor: colColor }}
+              />
+            )
+          })}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+})
diff --git a/packages/react/src/components/Guide/index.ts b/packages/react/src/components/Guide/index.ts
new file mode 100644
index 00000000..7cce33ee
--- /dev/null
+++ b/packages/react/src/components/Guide/index.ts
@@ -0,0 +1 @@
+export * from './Guide'
diff --git a/packages/react/src/components/Guide/styles.module.css b/packages/react/src/components/Guide/styles.module.css
new file mode 100644
index 00000000..d0019214
--- /dev/null
+++ b/packages/react/src/components/Guide/styles.module.css
@@ -0,0 +1,58 @@
+.gde {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  padding: var(--bkgpb) var(--bkgpi);
+}
+
+.line {
+  left: -0.5px; /* Alignment correction for line variant */
+}
+
+.cols {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  column-gap: var(--bkgg);
+  grid-template-rows: 1fr;
+  grid-template-columns: var(--bkgt);
+  justify-content: var(--bkgj);
+  width: var(--bkwf);
+  height: var(--bkhf);
+  overflow: hidden;
+}
+
+.col {
+  min-width: 0;
+  width: var(--bkwf);
+  height: var(--bkhf);
+}
+
+/* Variant-specific styles */
+.col[data-variant='line'] {
+  width: 1px;
+  background-color: var(--bkgcl);
+}
+
+.col[data-variant='pattern'] {
+  background-color: var(--bkgcp);
+}
+
+.col[data-variant='auto'] {
+  background-color: var(--bkgca);
+  overflow: hidden;
+}
+
+.col[data-variant='fixed'] {
+  background-color: var(--bkgcf);
+}
+
+/* Style for SSR rendering */
+.ssr {
+  box-sizing: border-box;
+  display: grid;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+  min-height: 100px; /* Ensures a minimum height during SSR */
+}
diff --git a/packages/react/src/components/Guide/types.ts b/packages/react/src/components/Guide/types.ts
new file mode 100644
index 00000000..ca4db212
--- /dev/null
+++ b/packages/react/src/components/Guide/types.ts
@@ -0,0 +1,150 @@
+/**
+ * @file types.ts
+ * @description Type definitions for Guide component configurations
+ * @module baseline-kit/components/Guide/types
+ */
+
+import * as React from 'react'
+import type { GuideColumnsPattern } from '@baseline-kit/core'
+
+/**
+ * Base configuration shared by all guide variants.
+ *
+ * @example
+ * ```ts
+ * const baseConfig: BaseGuideConfig = {
+ *   gap: 2,     // 2px gap
+ *   base: 8     // 8px base unit
+ * }
+ * ```
+ */
+type BaseGuideConfig = {
+  /** Gap between columnms. */
+  gap?: React.CSSProperties['gap']
+
+  /**
+   * Base unit in pixels for spacing calculations.
+   * Typically inherited from theme configuration.
+   */
+  base?: number
+}
+
+/**
+ * Pattern-based grid configuration.
+ * Defines repeating column width patterns.
+ *
+ * @example
+ * ```ts
+ * // Three-column pattern: 100px | 200px | 100px
+ * const pattern: PatternConfig = {
+ *   variant: 'pattern',
+ *   columns: [100, '200px', '1fr'],
+ *   gap: 2
+ * }
+ *
+ * // Responsive pattern with mixed units
+ * const responsive: PatternConfig = {
+ *   variant: 'pattern',
+ *   columns: ['20%', '1fr', '200px'],
+ *   gap: 2
+ * }
+ * ```
+ */
+export type PatternConfig = BaseGuideConfig & {
+  /** Identifies this as a pattern-based configuration */
+  variant: 'pattern'
+  /** Array of column widths that repeat */
+  columns: GuideColumnsPattern
+  /** Not applicable in pattern mode */
+  columnWidth?: never
+}
+
+/**
+ * Fixed-column grid configuration.
+ * Specifies exact number of equal-width columns.
+ *
+ * @example
+ * ```ts
+ * // Basic 12-column grid
+ * const grid: FixedConfig = {
+ *   variant: 'fixed',
+ *   columns: 12,
+ *   gap: 2
+ * }
+ *
+ * // Fixed-width columns
+ * const fixed: FixedConfig = {
+ *   variant: 'fixed',
+ *   columns: 6,
+ *   columnWidth: '160px',
+ *   gap: 2
+ * }
+ * ```
+ */
+export type FixedConfig = BaseGuideConfig & {
+  /** Identifies this as a fixed-column configuration */
+  variant: 'fixed'
+  /** Number of columns to create */
+  columns: number
+  /** Optional fixed width for all columns */
+  columnWidth?: React.CSSProperties['width']
+}
+
+/**
+ * Auto-calculated grid configuration.
+ * Creates as many columns as will fit given a column width.
+ *
+ * @example
+ * ```ts
+ * // Auto-fill columns of 200px
+ * const auto: AutoConfig = {
+ *   variant: 'auto',
+ *   columnWidth: '200px',
+ *   gap: 2
+ * }
+ *
+ * // Responsive columns with minimum width
+ * const responsive: AutoConfig = {
+ *   variant: 'auto',
+ *   columnWidth: 'minmax(200px, 1fr)',
+ *   gap: 2
+ * }
+ * ```
+ */
+export type AutoConfig = BaseGuideConfig & {
+  /** Identifies this as an auto-calculated configuration */
+  variant: 'auto'
+  /** Desired width for each column */
+  columnWidth: React.CSSProperties['columnWidth']
+  /** Not applicable in auto mode */
+  columns?: never
+}
+
+/**
+ * Simple line-based guide configuration.
+ * Creates evenly-spaced vertical lines.
+ *
+ * @example
+ * ```ts
+ * // Basic line guide
+ * const lines: LineConfig = {
+ *   variant: 'line',
+ *   gap: 1
+ * }
+ *
+ * // Custom-spaced lines
+ * const wideLines: LineConfig = {
+ *   variant: 'line',
+ *   gap: 4,
+ *   base: 8
+ * }
+ * ```
+ */
+export type LineConfig = BaseGuideConfig & {
+  /** Optional variant identifier (defaults to 'line') */
+  variant?: 'line'
+  /** Not applicable in line mode */
+  columns?: never
+  /** Not applicable in line mode */
+  columnWidth?: never
+}
diff --git a/packages/react/src/components/Guide/validation.ts b/packages/react/src/components/Guide/validation.ts
new file mode 100644
index 00000000..223bc95c
--- /dev/null
+++ b/packages/react/src/components/Guide/validation.ts
@@ -0,0 +1,9 @@
+export {
+  isValidGuideColumnValue,
+  isValidGuidePattern,
+  isGuideValue,
+  isGuideAlignment,
+  isGuideLineConfig,
+  isGuideColumnConfig,
+  isAutoCalculatedGuide,
+} from '@baseline-kit/core'
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
new file mode 100644
index 00000000..c4491e7b
--- /dev/null
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -0,0 +1,318 @@
+import * as React from 'react'
+import type { Gaps } from '../types'
+import { useConfig, useDebug, useBaseline } from '../../hooks'
+import {
+  parsePadding,
+  formatValue,
+  createStyleOverride,
+  mergeClasses,
+} from '@baseline-kit/core'
+import { hydratedValue } from '@baseline-kit/dom'
+import { mergeStyles } from '../../utils/merge'
+import { Config } from '../Config'
+import { Padder } from '../Padder'
+import { Spacer } from '../Spacer'
+import { ComponentsProps, Variant } from '../types'
+import styles from './styles.module.css'
+
+// Import the IndicatorNode type from Spacer props
+type IndicatorNode = NonNullable<
+  React.ComponentProps<typeof Spacer>['indicatorNode']
+>
+
+export type LayoutProps = {
+  /**
+   * Grid column definition. Supports:
+   * - Number: Equal columns (3 → repeat(3, 1fr))
+   * - String: Raw template ("1fr auto 200px")
+   * - Array: Mixed values ([100, '1fr'] → "100px 1fr")
+   */
+  columns?: number | string | Array<number | string>
+  /** Grid row definition (same format as columns) */
+  rows?: number | string | Array<number | string>
+  /** Controls item alignment along column axis */
+  justifyItems?: React.CSSProperties['justifyItems']
+  /** Controls item alignment along row axis */
+  alignItems?: React.CSSProperties['alignItems']
+  /** Controls content distribution along row axis */
+  justifyContent?: React.CSSProperties['justifyContent']
+  /** Controls content distribution along column axis */
+  alignContent?: React.CSSProperties['alignContent']
+  /** Custom measurement indicator renderer */
+  indicatorNode?: IndicatorNode
+  /** Visual style in debug mode */
+  variant?: Variant
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+  /** Container width (defaults to "auto") */
+  width?: React.CSSProperties['width']
+  /** Container height (defaults to "auto") */
+  height?: React.CSSProperties['height']
+  children?: React.ReactNode
+} & ComponentsProps &
+  Gaps
+
+/** Creates default layout styles with theme colors */
+const createDefaultLayoutStyles = (colors: {
+  line: string
+  flat: string
+  text: string
+}): Record<string, string> => ({
+  '--bklw': 'auto',
+  '--bklh': 'auto',
+  '--bklcl': colors.line,
+  '--bklcf': colors.flat,
+  '--bklci': colors.text,
+})
+
+/** Parses grid template definitions into CSS grid-template values. */
+const getGridTemplate = (
+  prop?: number | string | Array<number | string>
+): string => {
+  if (typeof prop === 'number') return `repeat(${prop}, 1fr)`
+  if (typeof prop === 'string') return prop
+  if (Array.isArray(prop)) {
+    return prop.map((p) => (typeof p === 'number' ? `${p}px` : p)).join(' ')
+  }
+  return 'repeat(auto-fill, minmax(100px, 1fr))'
+}
+
+/** Creates grid gap styles */
+const createGridGapStyles = (
+  gap?: React.CSSProperties['gap'] | number,
+  rowGap?: React.CSSProperties['rowGap'] | number,
+  columnGap?: React.CSSProperties['columnGap'] | number
+): Record<string, string> => {
+  const styles: Record<string, string> = {}
+
+  if (gap !== undefined) {
+    styles.gap = formatValue(gap)
+  }
+  if (rowGap !== undefined) {
+    styles.rowGap = formatValue(rowGap)
+  }
+  if (columnGap !== undefined) {
+    styles.columnGap = formatValue(columnGap)
+  }
+
+  return styles
+}
+
+/**
+ * A grid-based layout component with baseline alignment and responsive columns.
+ *
+ * @remarks
+ * Layout provides a CSS Grid container that:
+ * - Supports flexible column definitions
+ * - Maintains baseline grid alignment
+ * - Includes gap management
+ * - Offers comprehensive alignment controls
+ * - Provides debug overlays for visual verification
+ *
+ * When no explicit dimensions are provided, Layout defaults to "auto"
+ * for both width and height.
+ *
+ * @example
+ * ```tsx
+ * // Basic equal columns
+ * <Layout columns={3} gap={16}>
+ *   <div>Column 1</div>
+ *   <div>Column 2</div>
+ *   <div>Column 3</div>
+ * </Layout>
+ *
+ * // Mixed column widths with alignment
+ * <Layout
+ *   columns={['200px', '1fr', '2fr']}
+ *   gap={24}
+ *   alignItems="center"
+ *   justifyContent="space-between"
+ * >
+ *   <div>Fixed</div>
+ *   <div>Flexible</div>
+ *   <div>Double width</div>
+ * </Layout>
+ * ```
+ */
+export const Layout = React.memo(function Layout({
+  alignContent,
+  alignItems,
+  children,
+  className,
+  columns = 'repeat(auto-fill, minmax(100px, 1fr))',
+  columnGap,
+  debugging: debuggingProp,
+  gap,
+  height,
+  indicatorNode,
+  justifyContent,
+  justifyItems,
+  rowGap,
+  rows,
+  style,
+  variant,
+  width,
+  ssrMode = false,
+  ...spacingProps
+}: LayoutProps) {
+  const config = useConfig('layout')
+  const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
+
+  // Add hydration state tracking
+  const [isHydrated, setIsHydrated] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  const layoutRef = React.useRef<HTMLDivElement>(null)
+
+  const initialPadding = React.useMemo(
+    () => parsePadding(spacingProps),
+    [spacingProps]
+  )
+
+  // Get padding calculation from useBaseline
+  const baselinePadding = useBaseline(layoutRef, {
+    base: config.base,
+    snapping: 'height',
+    spacing: initialPadding,
+    warnOnMisalignment: true,
+  })
+
+  // Create stable initial padding for SSR
+  const stablePadding = {
+    padding: {
+      top: initialPadding.top || 0,
+      right: initialPadding.right || 0,
+      bottom: initialPadding.bottom || 0,
+      left: initialPadding.left || 0,
+    },
+  }
+
+  // Use stable padding during SSR and initial render, then switch to dynamic padding
+  const { padding } = hydratedValue(
+    isHydrated && !ssrMode,
+    stablePadding,
+    baselinePadding
+  )
+
+  const gridTemplateColumns = React.useMemo(
+    () => getGridTemplate(columns),
+    [columns]
+  )
+
+  const gridTemplateRows = React.useMemo(
+    () => (rows ? getGridTemplate(rows) : 'auto'),
+    [rows]
+  )
+
+  const defaultLayoutStyles = React.useMemo(
+    () => createDefaultLayoutStyles(config.colors),
+    [config.colors]
+  )
+
+  const gridGapStyles = React.useMemo(
+    () => createGridGapStyles(gap, rowGap, columnGap),
+    [gap, rowGap, columnGap]
+  )
+
+  const containerStyles = React.useMemo(() => {
+    const widthValue = formatValue(width || 'auto')
+    const heightValue = formatValue(height || 'auto')
+
+    // Define dimensions that should be skipped when set to auto
+    const autoDimensions = ['--bklw', '--bklh']
+
+    return mergeStyles(
+      {
+        // Theme overrides
+        ...createStyleOverride({
+          key: '--bklw',
+          value: widthValue,
+          defaultStyles: defaultLayoutStyles,
+          skipDimensions: { auto: autoDimensions },
+        }),
+        ...createStyleOverride({
+          key: '--bklh',
+          value: heightValue,
+          defaultStyles: defaultLayoutStyles,
+          skipDimensions: { auto: autoDimensions },
+        }),
+        ...createStyleOverride({
+          key: '--bklcl',
+          value: config.colors.line,
+          defaultStyles: defaultLayoutStyles,
+        }),
+        ...createStyleOverride({
+          key: '--bklcf',
+          value: config.colors.flat,
+          defaultStyles: defaultLayoutStyles,
+        }),
+        ...createStyleOverride({
+          key: '--bklci',
+          value: config.colors.text,
+          defaultStyles: defaultLayoutStyles,
+        }),
+
+        // Grid properties - only inject if different from defaults
+        ...(gridTemplateColumns !== 'repeat(auto-fill, minmax(100px, 1fr))' && {
+          '--bklgtc': gridTemplateColumns,
+        }),
+        ...(gridTemplateRows !== 'auto' && { '--bklgtr': gridTemplateRows }),
+        ...(justifyItems && { '--bklji': justifyItems }),
+        ...(alignItems && { '--bklai': alignItems }),
+        ...(justifyContent && { '--bkljc': justifyContent }),
+        ...(alignContent && { '--bklac': alignContent }),
+
+        // Include gap styles
+        ...gridGapStyles,
+      } as React.CSSProperties,
+      style
+    )
+  }, [
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    width,
+    height,
+    config.colors,
+    defaultLayoutStyles,
+    style,
+    gridGapStyles,
+  ])
+
+  return (
+    <Config spacer={{ variant: variant ?? 'line' }}>
+      <Padder
+        ref={layoutRef}
+        className={isShown ? styles.v : ''}
+        block={[padding.top, padding.bottom]}
+        {...(indicatorNode ? { indicatorNode } : {})}
+        inline={[padding.left, padding.right]}
+        debugging={debugging}
+        width={width}
+        height={height}
+        ssrMode={ssrMode}
+      >
+        <div
+          data-testid="layout"
+          className={mergeClasses(className, styles.lay)}
+          style={containerStyles}
+          {...(spacingProps && Object.keys(spacingProps).length > 0
+            ? Object.fromEntries(
+                Object.entries(spacingProps).filter(
+                  ([key]) => key !== 'ssrMode'
+                )
+              )
+            : {})}
+        >
+          {children}
+        </div>
+      </Padder>
+    </Config>
+  )
+})
diff --git a/packages/react/src/components/Layout/index.ts b/packages/react/src/components/Layout/index.ts
new file mode 100644
index 00000000..19b84975
--- /dev/null
+++ b/packages/react/src/components/Layout/index.ts
@@ -0,0 +1 @@
+export * from './Layout'
diff --git a/packages/react/src/components/Layout/styles.module.css b/packages/react/src/components/Layout/styles.module.css
new file mode 100644
index 00000000..0e2ddefc
--- /dev/null
+++ b/packages/react/src/components/Layout/styles.module.css
@@ -0,0 +1,34 @@
+.lay {
+  display: grid;
+  position: relative;
+  box-sizing: border-box;
+  width: var(--bklw, var(--bk-width-default, auto));
+  height: var(--bklh, var(--bk-height-default, auto));
+  grid-template-columns: var(
+    --bklgtc,
+    repeat(auto-fill, minmax(100px, 1fr))
+  );
+  grid-template-rows: var(--bklgtr, auto);
+  gap: var(--bklg, 0);
+  column-gap: var(--bklcg, 0);
+  row-gap: var(--bklrg, 0);
+  justify-items: var(--bklji, stretch);
+  align-items: var(--bklai, stretch);
+  justify-content: var(--bkljc, start);
+  align-content: var(--bklac, start);
+}
+
+.lay .line::after,
+.stk .line::after {
+  border: none;
+}
+
+.v::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid
+    var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6)));
+  pointer-events: none;
+  z-index: var(--bkzio, 2);
+}
diff --git a/packages/react/src/components/Padder/Padder.tsx b/packages/react/src/components/Padder/Padder.tsx
new file mode 100644
index 00000000..25e77d01
--- /dev/null
+++ b/packages/react/src/components/Padder/Padder.tsx
@@ -0,0 +1,317 @@
+import * as React from 'react'
+import { useConfig, useDebug, useBaseline } from '../../hooks'
+import {
+  mergeClasses,
+  parsePadding,
+  formatValue,
+} from '@baseline-kit/core'
+import { hydratedValue } from '@baseline-kit/dom'
+import { mergeStyles, mergeRefs } from '../../utils/merge'
+import { ComponentsProps, Variant } from '../types'
+import { Spacer, IndicatorNode } from '../Spacer'
+import type { DebuggingMode } from '../types'
+import styles from './styles.module.css'
+
+type RenderSpacerFn = (
+  width: React.CSSProperties['width'],
+  height: React.CSSProperties['height']
+) => React.ReactNode
+
+type PaddingStyles = {
+  paddingBlock?: string
+  paddingInline?: string
+  [key: string]: string | undefined
+}
+
+export type PadderProps = {
+  /** Render function for custom measurement indicators */
+  indicatorNode?: IndicatorNode
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+  children?: React.ReactNode
+} & ComponentsProps
+
+/** Creates default container styles for Padder */
+const createPadderContainerStyles = (
+  width: React.CSSProperties['width'],
+  height: React.CSSProperties['height'],
+  base: number,
+  color: string
+): Record<string, string> => {
+  const stylesObj: Record<string, string> = {}
+
+  // Only inject width/height if they differ from defaults
+  if (width !== 'fit-content') {
+    stylesObj['--bkpw'] = formatValue(width || 'fit-content')
+  }
+  if (height !== 'fit-content') {
+    stylesObj['--bkph'] = formatValue(height || 'fit-content')
+  }
+
+  // Always set base and color
+  stylesObj['--bkpb'] = `${base}px`
+  stylesObj['--bkpc'] = color
+
+  return stylesObj
+}
+
+/** Creates direct padding styles when spacers are disabled */
+const createDirectPaddingStyles = (
+  enableSpacers: boolean,
+  padding: {
+    top: number
+    right: number
+    bottom: number
+    left: number
+  }
+): PaddingStyles => {
+  const { top, right, bottom, left } = padding
+  const stylesObj: PaddingStyles = {}
+
+  // When spacers are disabled (i.e. debugging === "none"), add direct padding styles
+  if (!enableSpacers) {
+    if (top > 0 || bottom > 0) {
+      stylesObj.paddingBlock = `${top}px ${bottom}px`
+    }
+    if (left > 0 || right > 0) {
+      stylesObj.paddingInline = `${left}px ${right}px`
+    }
+  }
+
+  return stylesObj
+}
+
+/** Creates a render function for spacers */
+const createRenderSpacerFn = (
+  variant: Variant | undefined,
+  debugging: DebuggingMode | undefined,
+  indicatorNode?: IndicatorNode
+): RenderSpacerFn => {
+  // Default to 'line' if variant is undefined
+  const safeVariant = variant || 'line'
+  // Default to 'none' if debugging is undefined
+  const safeDebugging = debugging || 'none'
+
+  const SpacerElement = (
+    widthVal: React.CSSProperties['width'],
+    heightVal: React.CSSProperties['height']
+  ) => (
+    <Spacer
+      variant={safeVariant}
+      debugging={heightVal === 0 || widthVal === 0 ? 'none' : safeDebugging}
+      indicatorNode={indicatorNode}
+      height={heightVal !== '100%' ? heightVal : undefined}
+      width={widthVal !== '100%' ? widthVal : undefined}
+    />
+  )
+
+  // Add display name to satisfy linter
+  SpacerElement.displayName = 'PadderSpacer'
+
+  return SpacerElement
+}
+
+/**
+ * A foundational component that manages consistent padding with visual debugging.
+ *
+ * @remarks
+ * Padder is a low-level utility that:
+ * - Applies consistent padding around content
+ * - Supports visual debugging of spacing
+ * - Maintains baseline grid alignment
+ * - Uses Spacer components for visual padding representation
+ *
+ * When debugging is enabled (`"visible"` or `"hidden"`), padding is represented
+ * using Spacer components. When debugging is `"none"`, direct CSS padding is
+ * applied for better performance.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Padder block={16} inline={8}>
+ *   <div>Content with consistent padding</div>
+ * </Padder>
+ *
+ * // With debug visuals and custom indicators
+ * <Padder
+ *   block={[8, 16]}
+ *   inline={[16, 24]}
+ *   debugging="visible"
+ *   indicatorNode={(value, dim) => (
+ *     <span className="text-sm">{dim}: {value}px</span>
+ *   )}
+ * >
+ *   <div>Content with visible padding guides</div>
+ * </Padder>
+ *
+ * // Direct padding mode
+ * <Padder
+ *   block={16}
+ *   inline={24}
+ *   debugging="none"
+ * >
+ *   <div>Content with direct CSS padding</div>
+ * </Padder>
+ * ```
+ */
+export const Padder = React.memo(
+  React.forwardRef<HTMLDivElement, PadderProps>(function Padder(
+    {
+      children,
+      className,
+      debugging: debuggingProp,
+      height,
+      indicatorNode,
+      style,
+      width,
+      ssrMode = false,
+      ...spacingProps
+    },
+    ref
+  ) {
+    const config = useConfig('padder')
+    const { variant } = useConfig('spacer')
+    const initialPadding = React.useMemo(
+      () => parsePadding(spacingProps),
+      [spacingProps]
+    )
+    const { isShown, isNone, debugging } = useDebug(
+      debuggingProp,
+      config.debugging
+    )
+    const enableSpacers = !isNone
+
+    // Add hydration state tracking
+    const [isHydrated, setIsHydrated] = React.useState(false)
+
+    React.useEffect(() => {
+      setIsHydrated(true)
+    }, [])
+
+    const internalRef = React.useRef<HTMLDivElement | null>(null)
+
+    // Get padding calculation from useBaseline
+    const baselinePadding = useBaseline(internalRef, {
+      base: config.base,
+      snapping: 'height',
+      spacing: initialPadding,
+      warnOnMisalignment: !isNone,
+    })
+
+    // Create stable initial padding for SSR
+    const stablePadding = {
+      padding: {
+        top: initialPadding.top || 0,
+        right: initialPadding.right || 0,
+        bottom: initialPadding.bottom || 0,
+        left: initialPadding.left || 0,
+      },
+    }
+
+    // Use stable padding during SSR and initial render, then switch to dynamic padding
+    const { padding } = hydratedValue(
+      isHydrated && !ssrMode,
+      stablePadding,
+      baselinePadding
+    )
+
+    const setRefs = mergeRefs(ref, internalRef)
+
+    const containerStyles = React.useMemo(() => {
+      const baseStyles = createPadderContainerStyles(
+        width,
+        height,
+        config.base,
+        config.color
+      )
+
+      const paddingStyles = createDirectPaddingStyles(enableSpacers, {
+        top: padding.top,
+        right: padding.right,
+        bottom: padding.bottom,
+        left: padding.left,
+      })
+
+      return mergeStyles(
+        { ...baseStyles, ...paddingStyles } as React.CSSProperties,
+        style
+      )
+    }, [
+      width,
+      height,
+      config.base,
+      config.color,
+      enableSpacers,
+      padding.top,
+      padding.right,
+      padding.bottom,
+      padding.left,
+      style,
+    ])
+
+    const renderSpacer = React.useMemo(
+      () => createRenderSpacerFn(variant, debugging, indicatorNode),
+      [variant, debugging, indicatorNode]
+    )
+
+    // When debugging is "none", simply return a container with direct CSS padding
+    // and no additional grid/Spacer elements.
+    if (!enableSpacers) {
+      return (
+        <div
+          ref={setRefs}
+          data-testid="padder"
+          className={mergeClasses(styles.pad, className)}
+          style={containerStyles}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    // When debugging is enabled, use a grid structure with wrapping spacer elements.
+    return (
+      <div
+        ref={setRefs}
+        data-testid="padder"
+        className={mergeClasses(styles.pad, isShown && styles.v, className)}
+        style={containerStyles}
+      >
+        <>
+          {/* Top spacer - spans full width */}
+          {padding.top >= 0 && (
+            <div style={{ gridColumn: '1 / -1' }}>
+              {renderSpacer('100%', padding.top)}
+            </div>
+          )}
+
+          {/* Left spacer */}
+          {padding.left >= 0 && (
+            <div style={{ gridRow: '2 / 3' }}>
+              {renderSpacer(padding.left, '100%')}
+            </div>
+          )}
+        </>
+
+        {/* Main content - centered in grid */}
+        <div style={{ gridRow: '2 / 3', gridColumn: '2 / 3' }}>{children}</div>
+
+        <>
+          {/* Right spacer */}
+          {padding.right >= 0 && (
+            <div style={{ gridRow: '2 / 3' }}>
+              {renderSpacer(padding.right, '100%')}
+            </div>
+          )}
+
+          {/* Bottom spacer - spans full width */}
+          {padding.bottom >= 0 && (
+            <div style={{ gridColumn: '1 / -1' }}>
+              {renderSpacer('100%', padding.bottom)}
+            </div>
+          )}
+        </>
+      </div>
+    )
+  })
+)
diff --git a/packages/react/src/components/Padder/index.ts b/packages/react/src/components/Padder/index.ts
new file mode 100644
index 00000000..a31cde28
--- /dev/null
+++ b/packages/react/src/components/Padder/index.ts
@@ -0,0 +1 @@
+export * from './Padder'
diff --git a/packages/react/src/components/Padder/styles.module.css b/packages/react/src/components/Padder/styles.module.css
new file mode 100644
index 00000000..0a347ae2
--- /dev/null
+++ b/packages/react/src/components/Padder/styles.module.css
@@ -0,0 +1,22 @@
+.pad {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+  width: var(--bkpw, auto);
+  height: var(--bkph, auto);
+}
+
+.lay .line::after,
+.stk .line::after {
+  border: none;
+}
+
+.v::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--bkpc, var(--bk-padder-color-theme));
+  pointer-events: none;
+  z-index: var(--bkzi);
+}
diff --git a/packages/react/src/components/Spacer/Spacer.tsx b/packages/react/src/components/Spacer/Spacer.tsx
new file mode 100644
index 00000000..40d583ca
--- /dev/null
+++ b/packages/react/src/components/Spacer/Spacer.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react'
+import { useConfig, useDebug } from '../../hooks'
+import {
+  formatValue,
+  normalizeValuePair,
+  createStyleOverride,
+  mergeClasses,
+} from '@baseline-kit/core'
+import { hydratedValue } from '@baseline-kit/dom'
+import { mergeStyles } from '../../utils/merge'
+import { ComponentsProps, Variant } from '../types'
+import styles from './styles.module.css'
+
+// Type Definitions ------------------------------------------------------------
+
+export type IndicatorNode = (
+  value: number,
+  type: 'width' | 'height'
+) => React.ReactNode
+
+export type SpacerProps = {
+  /** Explicit width (takes precedence over block) */
+  width?: React.CSSProperties['width']
+  /** Explicit height (takes precedence over block) */
+  height?: React.CSSProperties['height']
+  /** Visual style in debug mode */
+  variant?: Variant
+  /** Color to use for debug visuals (overrides theme) */
+  color?: string
+  /** Base unit for measurements (defaults to theme value) */
+  base?: number
+  /** Custom content to render (for debugging info) */
+  children?: React.ReactNode
+  /** Custom indicator node rendering function */
+  indicatorNode?: IndicatorNode
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+} & ComponentsProps
+
+// Utils -----------------------------------------------------------------------
+
+/** Creates default spacer styles */
+const createDefaultSpacerStyles = (
+  base: number,
+  textColor: string,
+  flatColor: string,
+  lineColor: string
+): Record<string, string> => ({
+  '--bksw': '100%',
+  '--bksh': '100%',
+  '--bksb': `${base}px`,
+  '--bksct': textColor,
+  '--bkscf': flatColor,
+  '--bkscl': lineColor,
+})
+
+/** Generates measurement indicators for debugging */
+const generateMeasurements = (
+  isShown: boolean,
+  indicatorNode: SpacerProps['indicatorNode'],
+  normWidth: number | string,
+  normHeight: number | string
+): React.ReactNode | null => {
+  if (!isShown || !indicatorNode) return null
+
+  const width = typeof normWidth === 'number' ? normWidth : 0
+  const height = typeof normHeight === 'number' ? normHeight : 0
+
+  return (
+    <>
+      {height !== 0 && (
+        <span key="height">{indicatorNode(height, 'height')}</span>
+      )}
+      {width !== 0 && <span key="width">{indicatorNode(width, 'width')}</span>}
+    </>
+  )
+}
+
+/**
+ * Creates empty space for implementing margins, gaps, and spacing.
+ *
+ * @remarks
+ * - Flexible sizing: Set width and height directly
+ * - Normalized values: All inputs convert to base unit multiples
+ * - Debug visuals: Shows spacing measurements with theming
+ * - Automatic: Empty in production, visible in debug mode
+ *
+ * @example
+ * ```tsx
+ * // Fixed size spacer
+ * <Spacer width={32} height={16} />
+ *
+ * // Percentage-based spacer with debug hints
+ * <Spacer
+ *   width="50%"
+ *   height={32}
+ *   debugging="visible"
+ *   variant="line"
+ * />
+ *
+ * // Full-width spacer
+ * <Spacer height={64} />
+ * ```
+ */
+export const Spacer = React.memo(function Spacer({
+  height: heightProp,
+  width: widthProp,
+  indicatorNode,
+  debugging: debuggingProp,
+  variant: variantProp,
+  base: baseProp,
+  color: colorProp,
+  className,
+  style,
+  children,
+  ssrMode = false,
+  ...props
+}: SpacerProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const config = useConfig('spacer')
+
+  const { isShown } = useDebug(debuggingProp, config.debugging)
+  const variant = variantProp ?? config.variant
+  const base = baseProp ?? config.base
+
+  // Add hydration state tracking
+  const [isHydrated, setIsHydrated] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  const [normWidth, normHeight] = React.useMemo(() => {
+    return normalizeValuePair([widthProp, heightProp], [0, 0], {
+      base,
+      suppressWarnings: true,
+    })
+  }, [widthProp, heightProp, base])
+
+  // Ensure stable rendering for measurements during SSR
+  const shouldShowMeasurements = hydratedValue(
+    isHydrated && !ssrMode,
+    false, // Don't show measurements during SSR
+    isShown && indicatorNode !== undefined
+  )
+
+  // Only generate measurements after hydration
+  const measurements = React.useMemo(() => {
+    if (!shouldShowMeasurements) {
+      return null
+    }
+
+    return generateMeasurements(isShown, indicatorNode, normWidth, normHeight)
+  }, [shouldShowMeasurements, isShown, indicatorNode, normWidth, normHeight])
+
+  const defaultStyles = React.useMemo(
+    () =>
+      createDefaultSpacerStyles(
+        base,
+        config.colors.text,
+        config.colors.flat,
+        config.colors.line
+      ),
+    [base, config.colors]
+  )
+
+  const baseStyles = React.useMemo(() => {
+    const heightValue = formatValue(normHeight || '100%')
+    const widthValue = formatValue(normWidth || '100%')
+    const baseValue = `${base}px`
+
+    // Define dimensions that should be skipped when set to 100%
+    const dimensionVars = ['--bksw', '--bksh']
+
+    const customStyles = {
+      ...createStyleOverride({
+        key: '--bksh',
+        value: heightValue,
+        defaultStyles,
+        skipDimensions: { fullSize: dimensionVars },
+      }),
+      ...createStyleOverride({
+        key: '--bksw',
+        value: widthValue,
+        defaultStyles,
+        skipDimensions: { fullSize: dimensionVars },
+      }),
+      // Explicitly set --bksb to ensure it is always applied
+      '--bksb': baseValue,
+      ...createStyleOverride({
+        key: '--bksct',
+        value: colorProp ?? config.colors.text,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkscl',
+        value: colorProp ?? config.colors.line,
+        defaultStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkscf',
+        value: colorProp ?? config.colors.flat,
+        defaultStyles,
+      }),
+    } as React.CSSProperties
+
+    return mergeStyles(customStyles, style)
+  }, [
+    normWidth,
+    normHeight,
+    colorProp,
+    base,
+    config.colors,
+    defaultStyles,
+    style,
+  ])
+
+  return (
+    <div
+      ref={ref}
+      data-testid="spacer"
+      className={mergeClasses(
+        styles.spr,
+        isShown && styles[variant],
+        className
+      )}
+      data-variant={variant}
+      data-height={
+        typeof normHeight === 'number' ? `${normHeight}px` : normHeight
+      }
+      style={baseStyles}
+      {...props}
+    >
+      {measurements}
+      {children}
+    </div>
+  )
+})
diff --git a/packages/react/src/components/Spacer/index.ts b/packages/react/src/components/Spacer/index.ts
new file mode 100644
index 00000000..3b61acf7
--- /dev/null
+++ b/packages/react/src/components/Spacer/index.ts
@@ -0,0 +1 @@
+export * from './Spacer'
diff --git a/packages/react/src/components/Spacer/styles.module.css b/packages/react/src/components/Spacer/styles.module.css
new file mode 100644
index 00000000..2b7bc6e6
--- /dev/null
+++ b/packages/react/src/components/Spacer/styles.module.css
@@ -0,0 +1,22 @@
+.spr {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--bksw, 100%);
+  height: var(--bksh, auto);
+  flex-shrink: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--bkscl, hsla(270, 60%, 40%, 0.6));
+  z-index: calc(var(--bkzi, 1));
+}
+
+.flat {
+  background-color: var(--bkscf, hsla(230, 100%, 70%, 0.2));
+}
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
new file mode 100644
index 00000000..d581bf9c
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -0,0 +1,299 @@
+import * as React from 'react'
+import type { Gaps } from '../types'
+import { useConfig, useDebug, useBaseline } from '../../hooks'
+import {
+  mergeClasses,
+  parsePadding,
+  formatValue,
+  createStyleOverride,
+} from '@baseline-kit/core'
+import { hydratedValue } from '@baseline-kit/dom'
+import { mergeStyles } from '../../utils/merge'
+import { Padder } from '../Padder'
+import { IndicatorNode } from '../Spacer'
+import { Config } from '../Config'
+import { ComponentsProps, Variant } from '../types'
+import styles from './styles.module.css'
+
+// Maps shorthand directions to Flexbox directions
+const DIRECTION_AXIS: Record<string, React.CSSProperties['flexDirection']> = {
+  x: 'row',
+  y: 'column',
+  '-x': 'row-reverse',
+  '-y': 'column-reverse',
+}
+
+export type CSSPropertiesDirectionalAxis = keyof typeof DIRECTION_AXIS
+
+export type StackProps = {
+  /** Main axis orientation */
+  direction?: React.CSSProperties['flexDirection'] &
+    CSSPropertiesDirectionalAxis
+  /** Distribution of space on main axis */
+  justify?: React.CSSProperties['justifyContent']
+  /** Alignment on cross axis */
+  align?: React.CSSProperties['alignItems']
+  /** Container width (defaults to "auto") */
+  width?: React.CSSProperties['width']
+  /** Container height (defaults to "auto") */
+  height?: React.CSSProperties['height']
+  /** Custom measurement indicator renderer */
+  indicatorNode?: IndicatorNode
+  /** Visual style in debug mode */
+  variant?: Variant
+  /** Gap between items in base units */
+  gap?: Gaps
+  /** Row gap when using different values for rows and columns */
+  rowGap?: Gaps
+  /** Column gap when using different values for rows and columns */
+  columnGap?: Gaps
+  /** Flag to enable SSR-compatible mode (simplified initial render) */
+  ssrMode?: boolean
+  children?: React.ReactNode
+} & ComponentsProps
+
+// Utils -----------------------------------------------------------------------
+
+/** Creates default stack styles with theme colors */
+const createDefaultStackStyles = (colors: Record<string, string>) => ({
+  '--bkkw': 'auto',
+  '--bkkh': 'auto',
+  '--bkkcl': colors.line,
+  '--bkkcf': colors.flat,
+  '--bkkci': colors.text,
+})
+
+/** Creates gap styles for the stack */
+const createStackGapStyles = (
+  rowGap?: number,
+  columnGap?: number,
+  gap?: number
+): Record<string, number | undefined> => ({
+  rowGap: gap !== undefined ? gap : rowGap,
+  columnGap: gap !== undefined ? gap : columnGap,
+})
+
+/**
+ * A flexible container component aligning children to the baseline grid.
+ *
+ * @remarks
+ * Stack provides a flex container that:
+ * - Maintains baseline grid alignment
+ * - Supports both row and column layouts
+ * - Handles consistent spacing between items
+ * - Includes visual debug overlays
+ *
+ * Key features:
+ * - Automatic dimension management (defaults to auto)
+ * - Direct padding application in non-debug mode
+ * - Comprehensive alignment controls
+ * - Theme-aware debug visuals
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal stack
+ * <Stack gap={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * // Vertical stack with alignment
+ * <Stack
+ *   direction="column"
+ *   gap={24}
+ *   align="center"
+ *   justify="space-between"
+ *   debugging="visible"
+ * >
+ *   <div>Top</div>
+ *   <div>Middle</div>
+ *   <div>Bottom</div>
+ * </Stack>
+ *
+ * // Complex layout with padding
+ * <Stack
+ *   direction="row"
+ *   gap={32}
+ *   align="stretch"
+ *   block={[16, 24]}
+ *   inline={16}
+ *   debugging="visible"
+ * >
+ *   <div>Panel 1</div>
+ *   <div>Panel 2</div>
+ * </Stack>
+ * ```
+ */
+export const Stack = React.memo(function Stack({
+  align = 'flex-start',
+  children,
+  className,
+  columnGap,
+  debugging: debuggingProp,
+  direction = 'row',
+  gap,
+  height,
+  indicatorNode,
+  justify = 'flex-start',
+  rowGap,
+  style,
+  variant,
+  width,
+  ssrMode = false,
+  ...spacingProps
+}: StackProps) {
+  // Read configuration from context or props
+  const config = useConfig('stack')
+  const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
+
+  // Add hydration state tracking
+  const [isHydrated, setIsHydrated] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  const stackRef = React.useRef<HTMLDivElement | null>(null)
+
+  // Process spacing props
+  const { top, right, bottom, left } = parsePadding({
+    ...spacingProps,
+  })
+
+  // Get padding calculation from useBaseline
+  const baselinePadding = useBaseline(stackRef, {
+    base: config.base,
+    snapping: 'height',
+    spacing: { top, right, bottom, left },
+    warnOnMisalignment: debugging !== 'none',
+  })
+
+  // Create stable initial padding for SSR
+  const stablePadding = {
+    padding: {
+      top: top || 0,
+      right: right || 0,
+      bottom: bottom || 0,
+      left: left || 0,
+    },
+  }
+
+  // Use stable padding during SSR and initial render, then switch to dynamic padding
+  const { padding } = hydratedValue(
+    isHydrated && !ssrMode,
+    stablePadding,
+    baselinePadding
+  )
+
+  const stackGapStyles = React.useMemo(() => {
+    const formattedRowGap = rowGap !== undefined ? Number(rowGap) : undefined
+    const formattedColumnGap =
+      columnGap !== undefined ? Number(columnGap) : undefined
+    const formattedGap = gap !== undefined ? Number(gap) : undefined
+
+    return createStackGapStyles(
+      formattedRowGap,
+      formattedColumnGap,
+      formattedGap
+    )
+  }, [rowGap, columnGap, gap])
+
+  const defaultStackStyles = React.useMemo(
+    () => createDefaultStackStyles(config.colors),
+    [config.colors]
+  )
+
+  const containerStyles = React.useMemo(() => {
+    const widthValue = formatValue(width || 'auto')
+    const heightValue = formatValue(height || 'auto')
+    const flexDirection = DIRECTION_AXIS[direction] || direction
+
+    // Define stack dimensions that should be skipped when set to auto
+    const dimensionVars = ['--bkkw', '--bkkh']
+
+    const customOverrides = {
+      ...createStyleOverride({
+        key: '--bkkw',
+        value: widthValue,
+        defaultStyles: defaultStackStyles,
+        skipDimensions: { auto: dimensionVars },
+      }),
+      ...createStyleOverride({
+        key: '--bkkh',
+        value: heightValue,
+        defaultStyles: defaultStackStyles,
+        skipDimensions: { auto: dimensionVars },
+      }),
+      ...createStyleOverride({
+        key: '--bkkcl',
+        value: config.colors.line,
+        defaultStyles: defaultStackStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkkcf',
+        value: config.colors.flat,
+        defaultStyles: defaultStackStyles,
+      }),
+      ...createStyleOverride({
+        key: '--bkkci',
+        value: config.colors.text,
+        defaultStyles: defaultStackStyles,
+      }),
+    } as React.CSSProperties
+
+    const baseStyles = {
+      flexDirection,
+      justifyContent: justify,
+      alignItems: align,
+      width,
+      height,
+    } as React.CSSProperties
+
+    return mergeStyles(baseStyles, stackGapStyles, customOverrides, style)
+  }, [
+    direction,
+    justify,
+    align,
+    width,
+    height,
+    config.colors.line,
+    config.colors.flat,
+    config.colors.text,
+    defaultStackStyles,
+    stackGapStyles,
+    style,
+  ])
+
+  const mergedContainerStyles =
+    debugging === 'none'
+      ? {
+          ...containerStyles,
+          paddingBlock: `${padding.top}px ${padding.bottom}px`,
+          paddingInline: `${padding.left}px ${padding.right}px`,
+        }
+      : containerStyles
+
+  return (
+    <Config spacer={{ variant: variant ?? 'line' }}>
+      <Padder
+        ref={stackRef}
+        block={[padding.top, padding.bottom]}
+        inline={[padding.left, padding.right]}
+        debugging={debugging}
+        indicatorNode={indicatorNode}
+        width={width}
+        height={height}
+        ssrMode={ssrMode}
+      >
+        <div
+          data-testid="stack"
+          className={mergeClasses(className, styles.stk, isShown && styles.v)}
+          style={mergedContainerStyles}
+          {...spacingProps}
+        >
+          {children}
+        </div>
+      </Padder>
+    </Config>
+  )
+})
diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts
new file mode 100644
index 00000000..484ede63
--- /dev/null
+++ b/packages/react/src/components/Stack/index.ts
@@ -0,0 +1 @@
+export * from './Stack'
diff --git a/packages/react/src/components/Stack/styles.module.css b/packages/react/src/components/Stack/styles.module.css
new file mode 100644
index 00000000..27892989
--- /dev/null
+++ b/packages/react/src/components/Stack/styles.module.css
@@ -0,0 +1,26 @@
+.stk {
+  display: flex;
+  position: relative;
+  width: var(--bkkw);
+  height: var(--bkkh);
+}
+
+/* Remove borders from children if they're lines */
+.stk .line::after {
+  border: none;
+}
+
+/* Style for debugging border */
+.v::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--bkkcl, hsla(330, 60%, 40%, 0.6));
+  pointer-events: none;
+  z-index: var(--bkzio, 2);
+}
+
+/* Style for flat debugging background */
+.flat {
+  background-color: var(--bkkcf, hsla(0, 100%, 70%, 0.2));
+}
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
new file mode 100644
index 00000000..4af93c3c
--- /dev/null
+++ b/packages/react/src/components/index.ts
@@ -0,0 +1,24 @@
+/**
+ * @baseline-kit/react components
+ */
+
+// Style imports - these generate CSS files in the dist folder
+import './styles/core.css'
+import './styles/theme.css'
+
+// Layout Components
+export * from './Layout'
+export * from './Box'
+export * from './Stack'
+export * from './Spacer'
+export * from './Padder'
+
+// Grid Components
+export * from './Guide'
+export * from './Baseline'
+
+// Configuration
+export * from './Config'
+
+// Types (includes re-exports from core)
+export * from './types'
diff --git a/packages/react/src/components/styles/base.css b/packages/react/src/components/styles/base.css
new file mode 100644
index 00000000..496f6aaf
--- /dev/null
+++ b/packages/react/src/components/styles/base.css
@@ -0,0 +1,122 @@
+/**
+ * Baseline Kit Base Styles
+ * 
+ * This file defines:
+ * 1. Core system variables used across components
+ * 2. Component-specific CSS variables with fallback values
+ * 3. Robust fallbacks for components to ensure cross-framework compatibility
+ */
+
+/* Core system variables */
+:root {
+  /* Core System Variables */
+  --bkb: 8px; /* Base unit for spacing */
+  --bkzi: 1; /* Base z-index */
+  --bkzio: 2; /* Overlay z-index */
+  --bk-transition-base: 180ms ease; /* Standard transition */
+
+  /* Default Dimensions */
+  --bk-width-default: fit-content;
+  --bk-height-default: fit-content;
+  --bkwf: 100%; /* Full width shorthand */
+  --bkhf: 100%; /* Full height shorthand */
+
+  /* Box Component Variables */
+  --bkxb: var(--bkb);
+  --bkxw: var(--bk-width-default);
+  --bkxh: var(--bk-height-default);
+  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
+  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
+  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
+
+  /* Stack Component Variables */
+  --bkkw: var(--bkwf);
+  --bkkh: var(--bk-height-default);
+  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
+
+  /* Baseline Component Variables */
+  --bkbw: 100%;
+  --bkbh: 100%;
+  --bkrt: 0;
+  --bkrh: 1px;
+  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+
+  /* Guide Component Variables */
+  --bkgw: 100vw;
+  --bkgh: 100vh;
+  --bkgg: var(--bkb);
+  --bkgj: center;
+  --bkgt: auto;
+  --bkgpb: 0;
+  --bkgpi: 0;
+  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
+  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
+
+  /* Layout Component Variables */
+  --bklw: var(--bk-width-default);
+  --bklh: var(--bk-height-default);
+  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
+  --bklgtc: repeat(auto-fill, minmax(100px, 1fr));
+  --bklgtr: auto;
+  --bklg: 0;
+  --bklcg: 0;
+  --bklrg: 0;
+  --bklji: stretch;
+  --bklai: stretch;
+  --bkljc: start;
+  --bklac: start;
+
+  /* Padder Component Variables */
+  --bkpw: var(--bk-width-default);
+  --bkph: var(--bk-height-default);
+  --bkpc: var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6));
+
+  /* Spacer Component Variables - with fallback values */
+  --bksw: var(--bkwf);
+  --bksh: var(--bkhf);
+  --bkscl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6));
+  --bkscf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+  --bksct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1));
+}
+
+/* Guide Component */
+.guide {
+  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
+  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
+}
+
+/* Baseline Component */
+.baseline {
+  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+}
+
+/* Box Component */
+.box {
+  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
+  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
+  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
+}
+
+/* Stack Component */
+.stack {
+  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
+}
+
+/* Layout Component */
+.layout {
+  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
+}
diff --git a/packages/react/src/components/styles/core.css b/packages/react/src/components/styles/core.css
new file mode 100644
index 00000000..7a6c1126
--- /dev/null
+++ b/packages/react/src/components/styles/core.css
@@ -0,0 +1,40 @@
+/**
+ * Baseline Kit Core Styles
+ *
+ * This file imports all fundamental styles in the correct order:
+ * 1. CSS reset for consistent defaults across browsers
+ * 2. Base variables and common styles
+ * 3. Component-specific styles
+ */
+
+/* CSS reset - Normalizes browser defaults */
+@import './reset.css';
+
+/* Base variables - Core system variables and defaults */
+@import './base.css';
+
+/* Component-specific styles - Each component's styling */
+@import '../Box/styles.module.css';
+@import '../Guide/styles.module.css';
+@import '../Padder/styles.module.css';
+@import '../Spacer/styles.module.css';
+@import '../Stack/styles.module.css';
+@import '../Layout/styles.module.css';
+@import '../Baseline/styles.module.css';
+
+/* Utility classes for visibility control */
+.v {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--bk-transition-base),
+    visibility 0ms linear;
+}
+
+.h {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--bk-transition-base),
+    visibility 0ms linear 180ms;
+}
diff --git a/packages/react/src/components/styles/index.ts b/packages/react/src/components/styles/index.ts
new file mode 100644
index 00000000..a458d5ec
--- /dev/null
+++ b/packages/react/src/components/styles/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Baseline Kit Styles System
+ *
+ * This file exports all core styles needed for the component library.
+ * The import order is important:
+ * 1. core.css - Contains reset.css, base.css, and component styles
+ * 2. theme.css - Contains color variables and theming
+ */
+
+// Core styles must be imported before theme
+import './core.css'
+import './theme.css'
+
+// Empty export to make this a proper module
+export {}
diff --git a/packages/react/src/components/styles/reset.css b/packages/react/src/components/styles/reset.css
new file mode 100644
index 00000000..438b5498
--- /dev/null
+++ b/packages/react/src/components/styles/reset.css
@@ -0,0 +1,43 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Remove list styles on ul, ol elements */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/packages/react/src/components/styles/theme.css b/packages/react/src/components/styles/theme.css
new file mode 100644
index 00000000..4bbbd68d
--- /dev/null
+++ b/packages/react/src/components/styles/theme.css
@@ -0,0 +1,142 @@
+/**
+ * Baseline Kit Theme System
+ * 
+ * This file contains all color variables for theming.
+ * For light and dark mode themes separately, see the theme directory.
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette - Light Theme
+      - Primary: More muted/dimmed colors
+      - Secondary: Brighter, more vibrant colors
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors */
+  --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
+  --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
+  --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
+  --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
+
+  /* Brand Colors */
+  --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
+  --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
+  --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
+  --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
+  --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
+  --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
+
+  /* Supporting Colors */
+  --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
+  --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
+  --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
+  --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
+  --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
+  --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
+  --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
+  --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
+  --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
+  --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors - Light
+      Using consistent alpha values:
+      - Line: 0.6 (borders)
+      - Flat: 0.2 (backgrounds)
+      - text: 0.9-1.0 (indicators)
+   ─────────────────────────────────────────────────────── */
+
+  /* Guide Component Theme */
+  --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+
+  /* Baseline Component Theme */
+  --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+
+  /* Spacer Component Theme */
+  --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
+  --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+
+  /* Box Component Theme */
+  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
+  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+  /* Stack Component Theme */
+  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Layout Component Theme */
+  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Padder Component Theme */
+  --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
+}
+
+/* ───────────────────────────────────────────────────────
+   Dark Theme
+   - Inverts Primary/Secondary relationships
+   - Adjusts alpha values for better contrast
+─────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Neutral Colors - Dark */
+    --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
+    --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
+    --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
+    --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
+
+    /* Brand Colors - Dark */
+    --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
+    --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
+    --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
+    --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
+    --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
+    --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
+
+    /* Supporting Colors - Dark */
+    --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
+    --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
+    --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
+    --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
+    --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
+    --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
+    --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
+    --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
+    --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
+    --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
+
+    /* Component Theme Overrides - Dark */
+    --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+    --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
+
+    --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+    --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
+    --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+    --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+    --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
+    --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+    --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+
+    --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+    --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+    --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+    --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+    --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+    --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+    
+    --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.7);
+    --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.3);
+    --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+  }
+}
diff --git a/packages/react/src/components/styles/theme/dark.css b/packages/react/src/components/styles/theme/dark.css
new file mode 100644
index 00000000..8408b08d
--- /dev/null
+++ b/packages/react/src/components/styles/theme/dark.css
@@ -0,0 +1,67 @@
+/**
+ * Baseline Kit Dark Theme
+ *
+ * Organization:
+ * 1. Color Palette (HSL values)
+ * 2. Component Theme Colors
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette - Dark Theme
+      - Inverts Primary/Secondary relationships
+      - Adjusts values for better contrast
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors - Dark */
+  --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
+  --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
+  --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
+  --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
+
+  /* Brand Colors - Dark */
+  --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
+  --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
+  --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
+  --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
+  --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
+  --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
+
+  /* Supporting Colors - Dark */
+  --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
+  --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
+  --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
+  --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
+  --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
+  --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
+  --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
+  --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
+  --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
+  --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors - Dark
+      - Adjusts alpha values for better contrast
+   ─────────────────────────────────────────────────────── */
+
+  /* Component Theme Overrides - Dark */
+  --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+  --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
+
+  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
+  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+  --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
+  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+
+  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+}
diff --git a/packages/react/src/components/styles/theme/default.css b/packages/react/src/components/styles/theme/default.css
new file mode 100644
index 00000000..ad358a0a
--- /dev/null
+++ b/packages/react/src/components/styles/theme/default.css
@@ -0,0 +1,82 @@
+/**
+ * Baseline Kit Default Theme (Light)
+ *
+ * Organization:
+ * 1. Color Palette (HSL values)
+ * 2. Component Theme Colors
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette - Light Theme
+      - Primary: More muted/dimmed colors
+      - Secondary: Brighter, more vibrant colors
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors */
+  --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
+  --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
+  --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
+  --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
+
+  /* Brand Colors */
+  --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
+  --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
+  --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
+  --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
+  --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
+  --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
+
+  /* Supporting Colors */
+  --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
+  --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
+  --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
+  --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
+  --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
+  --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
+  --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
+  --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
+  --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
+  --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors - Light
+      Using consistent alpha values:
+      - Line: 0.6 (borders)
+      - Flat: 0.2 (backgrounds)
+      - text: 0.9-1.0 (indicators)
+   ─────────────────────────────────────────────────────── */
+
+  /* Guide Component Theme */
+  --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+
+  /* Baseline Component Theme */
+  --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+
+  /* Spacer Component Theme */
+  --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
+  --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+
+  /* Box Component Theme */
+  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
+  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+  /* Stack Component Theme */
+  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Layout Component Theme */
+  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Padder Component Theme */
+  --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
+}
diff --git a/packages/react/src/components/styles/theme/tokens.css b/packages/react/src/components/styles/theme/tokens.css
new file mode 100644
index 00000000..43fc709c
--- /dev/null
+++ b/packages/react/src/components/styles/theme/tokens.css
@@ -0,0 +1,82 @@
+/**
+ * Baseline Kit Theme Tokens Template
+ * 
+ * Use this file as a starting point for creating your own custom theme.
+ * This file contains all theme variables but no values.
+ * 
+ * To create a custom theme:
+ * 1. Copy this file
+ * 2. Fill in your custom values
+ * 3. Import it in your application after the core styles
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette
+      Provide HSL values in the format: hue, saturation%, lightness%
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors */
+  --bk-color-black-primary: ;
+  --bk-color-black-secondary: ;
+  --bk-color-white-primary: ;
+  --bk-color-white-secondary: ;
+
+  /* Brand Colors */
+  --bk-color-pink-primary: ;
+  --bk-color-pink-secondary: ;
+  --bk-color-purple-primary: ;
+  --bk-color-purple-secondary: ;
+  --bk-color-blue-primary: ;
+  --bk-color-blue-secondary: ;
+
+  /* Supporting Colors */
+  --bk-color-cyan-primary: ;
+  --bk-color-cyan-secondary: ;
+  --bk-color-green-primary: ;
+  --bk-color-green-secondary: ;
+  --bk-color-yellow-primary: ;
+  --bk-color-yellow-secondary: ;
+  --bk-color-orange-primary: ;
+  --bk-color-orange-secondary: ;
+  --bk-color-red-primary: ;
+  --bk-color-red-secondary: ;
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors
+      Use hsla(var(--color-variable), alpha) format for transparency
+   ─────────────────────────────────────────────────────── */
+
+  /* Guide Component Theme */
+  --bk-guide-color-line-theme: ;
+  --bk-guide-color-pattern-theme: ;
+  --bk-guide-color-auto-theme: ;
+  --bk-guide-color-fixed-theme: ;
+
+  /* Baseline Component Theme */
+  --bk-baseline-color-line-theme: ;
+  --bk-baseline-color-flat-theme: ;
+
+  /* Spacer Component Theme */
+  --bk-spacer-color-line-theme: ;
+  --bk-spacer-color-flat-theme: ;
+  --bk-spacer-color-text-theme: ;
+
+  /* Box Component Theme */
+  --bk-box-color-line-theme: ;
+  --bk-box-color-flat-theme: ;
+  --bk-box-color-text-theme: ;
+
+  /* Stack Component Theme */
+  --bk-stack-color-line-theme: ;
+  --bk-stack-color-flat-theme: ;
+  --bk-stack-color-text-theme: ;
+
+  /* Layout Component Theme */
+  --bk-layout-color-line-theme: ;
+  --bk-layout-color-flat-theme: ;
+  --bk-layout-color-text-theme: ;
+
+  /* Padder Component Theme */
+  --bk-padder-color-theme: ;
+}
diff --git a/packages/react/src/components/types.ts b/packages/react/src/components/types.ts
new file mode 100644
index 00000000..c450053a
--- /dev/null
+++ b/packages/react/src/components/types.ts
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import type { DebuggingMode, SpacingProps } from '@baseline-kit/core'
+
+// Re-export pure types from core for backwards compatibility
+// Note: BaselineVariant, SnappingMode, and GuideConfig are exported
+// from their respective component modules (Baseline, Box, Guide)
+export type {
+  Spacing,
+  PaddingValue,
+  Padding,
+  SpacingProps,
+  GuideVariant,
+  GuideColumnValue,
+  GuideColumnsPattern,
+  GridAlignment,
+  PaddedVariant,
+  Variant,
+  DebuggingMode,
+  ConfigSchema,
+} from '@baseline-kit/core'
+
+export {
+  GRID_ALIGNMENTS,
+  PADD_VARIANTS,
+} from '@baseline-kit/core'
+
+/**
+ * Common props shared across library components.
+ */
+export type ComponentsProps = {
+  debugging?: DebuggingMode
+  className?: string
+  style?: React.CSSProperties
+  height?: React.CSSProperties['height']
+  width?: React.CSSProperties['width']
+} & SpacingProps
+
+/** Base configuration for components that support padding. */
+export type PaddedBaseConfig = {
+  base?: number
+  color?: React.CSSProperties['color'] | React.CSSProperties['backgroundColor']
+  zIndex?: React.CSSProperties['zIndex']
+}
+
+export type Gaps =
+  | {
+      gap?: React.CSSProperties['gap']
+      rowGap?: never
+      columnGap?: never
+    }
+  | {
+      gap?: never
+      rowGap?: React.CSSProperties['rowGap']
+      columnGap?: React.CSSProperties['columnGap']
+    }
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
new file mode 100644
index 00000000..fa31f934
--- /dev/null
+++ b/packages/react/src/hooks/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @baseline-kit/react hooks
+ */
+
+// Measurement & Layout
+export * from './useMeasure'
+export * from './useVirtual'
+export * from './useBaseline'
+
+// Grid & Guides
+export * from './useGuide'
+
+// Configuration
+export * from './useConfig'
+export * from './useDebug'
diff --git a/packages/react/src/hooks/useBaseline.ts b/packages/react/src/hooks/useBaseline.ts
new file mode 100644
index 00000000..f102ae6d
--- /dev/null
+++ b/packages/react/src/hooks/useBaseline.ts
@@ -0,0 +1,74 @@
+import * as React from 'react'
+import type { SnappingMode, Padding } from '@baseline-kit/core'
+import { parsePadding, calculateSnappedSpacing } from '@baseline-kit/core'
+import { useMeasure } from './useMeasure'
+
+export interface BaselineOptions {
+  base?: number
+  snapping?: SnappingMode
+  spacing?: Partial<Padding> | number
+  warnOnMisalignment?: boolean
+}
+
+export interface BaselineResult {
+  padding: Padding
+  isAligned: boolean
+  height: number
+}
+
+/**
+ * Hook for managing baseline grid alignment in components.
+ */
+export function useBaseline(
+  ref: React.RefObject<HTMLElement | null>,
+  {
+    base = 8,
+    snapping = 'none',
+    spacing = {},
+    warnOnMisalignment = false,
+  }: BaselineOptions = {}
+): BaselineResult {
+  if (base < 1) {
+    throw new Error('Base must be >= 1 for baseline alignment.')
+  }
+
+  const { height } = useMeasure(ref)
+  const didSnapRef = React.useRef<boolean>(false)
+  const hasWarnedRef = React.useRef<boolean>(false)
+
+  return React.useMemo(() => {
+    const initialPadding = parsePadding({ padding: spacing })
+    const isAligned = height % base === 0
+
+    if (
+      !isAligned &&
+      warnOnMisalignment &&
+      process.env.NODE_ENV === 'development'
+    ) {
+      if (!hasWarnedRef.current) {
+        console.warn(
+          `[useBaseline] Element height (${height}px) is not aligned with base (${base}px).`
+        )
+        hasWarnedRef.current = true
+      }
+    }
+
+    if (snapping === 'none') {
+      return { padding: initialPadding, isAligned, height }
+    }
+
+    if (didSnapRef.current) {
+      return { padding: initialPadding, isAligned, height }
+    }
+
+    const finalPadding = calculateSnappedSpacing(
+      height,
+      base,
+      initialPadding,
+      snapping
+    )
+    didSnapRef.current = true
+
+    return { padding: finalPadding, isAligned, height }
+  }, [base, snapping, spacing, warnOnMisalignment, height])
+}
diff --git a/packages/react/src/hooks/useConfig.ts b/packages/react/src/hooks/useConfig.ts
new file mode 100644
index 00000000..c1a4a208
--- /dev/null
+++ b/packages/react/src/hooks/useConfig.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import type { ConfigSchema } from '@baseline-kit/core'
+import { useDefaultConfig } from '@components'
+
+/** Type helper that merges base configuration with component-specific settings. */
+export type ComponentConfig<K extends keyof ConfigSchema> = ConfigSchema[K] & {
+  base: number
+}
+
+/**
+ * Hook for accessing component-specific theme configuration.
+ */
+export function useConfig<K extends keyof ConfigSchema>(
+  component: K
+): ComponentConfig<K> {
+  const defaultConfig = useDefaultConfig()
+  return useMemo(() => {
+    return Object.assign(
+      { base: defaultConfig.base },
+      defaultConfig[component]
+    ) as ComponentConfig<K>
+  }, [defaultConfig, component])
+}
diff --git a/packages/react/src/hooks/useDebug.ts b/packages/react/src/hooks/useDebug.ts
new file mode 100644
index 00000000..03c19aef
--- /dev/null
+++ b/packages/react/src/hooks/useDebug.ts
@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { DebuggingMode } from '@baseline-kit/core'
+
+interface DebugResult {
+  isShown: boolean
+  isHidden: boolean
+  isNone: boolean
+  debugging: DebuggingMode | undefined
+}
+
+/**
+ * Hook for managing component debug state and visibility.
+ */
+export function useDebug(
+  debuggingProp?: DebuggingMode,
+  debuggingConfig?: DebuggingMode
+): DebugResult {
+  return useMemo(() => {
+    const effective = debuggingProp ?? debuggingConfig
+    return {
+      isShown: effective === 'visible',
+      isHidden: effective === 'hidden',
+      isNone: effective === 'none',
+      debugging: effective,
+    }
+  }, [debuggingProp, debuggingConfig])
+}
diff --git a/packages/react/src/hooks/useGuide.ts b/packages/react/src/hooks/useGuide.ts
new file mode 100644
index 00000000..27b603f2
--- /dev/null
+++ b/packages/react/src/hooks/useGuide.ts
@@ -0,0 +1,166 @@
+import * as React from 'react'
+import type { GuideConfig, GuideColumnsPattern } from '@baseline-kit/core'
+import { isValidGuidePattern, normalizeValue, formatValue, convertValue } from '@baseline-kit/core'
+import { useMeasure } from './useMeasure'
+
+export interface GuideResult {
+  template: string
+  columnsCount: number
+  calculatedGap: number
+  isValid: boolean
+}
+
+/**
+ * Hook for calculating grid layout parameters based on container dimensions.
+ */
+export function useGuide(
+  ref: React.RefObject<HTMLElement | null>,
+  config: GuideConfig
+): GuideResult {
+  const { width } = useMeasure(ref)
+  const hasWarnedRef = React.useRef<boolean>(false)
+
+  return React.useMemo(() => {
+    const variant = config.variant ?? 'line'
+    const base = config.base ?? 8
+    const gap = normalizeValue(config.gap ?? 0, { base })
+
+    if (!width) {
+      return {
+        template: 'none',
+        columnsCount: 0,
+        calculatedGap: 0,
+        isValid: false,
+      }
+    }
+
+    try {
+      switch (variant) {
+        case 'line': {
+          const finalGap = gap === 0 ? 0 : gap - 1
+          const actualGapWithLine = finalGap + 1
+
+          let columns: number
+
+          if (finalGap === 0) {
+            columns = Math.max(1, Math.floor(width) + 1)
+          } else {
+            columns = Math.max(
+              1,
+              Math.floor((width + 1) / actualGapWithLine) + 1
+            )
+          }
+
+          return {
+            template: `repeat(${columns}, 1px)`,
+            columnsCount: columns,
+            calculatedGap: gap > 0 ? gap - 1 : gap,
+            isValid: true,
+          }
+        }
+
+        case 'pattern': {
+          if (!config.columns || !Array.isArray(config.columns)) {
+            throw new Error('Missing or invalid pattern columns')
+          }
+
+          if (!isValidGuidePattern(config.columns)) {
+            throw new Error('Invalid "pattern" columns array')
+          }
+
+          const columnsArr = (config.columns as GuideColumnsPattern).map(
+            (col) => {
+              if (typeof col === 'number') return `${col}px`
+              return col
+            }
+          )
+
+          if (columnsArr.some((c) => c === '0' || c === '0px')) {
+            return {
+              template: 'none',
+              columnsCount: 0,
+              calculatedGap: 0,
+              isValid: false,
+            }
+          }
+
+          return {
+            template: columnsArr.join(' '),
+            columnsCount: columnsArr.length,
+            calculatedGap: gap,
+            isValid: true,
+          }
+        }
+
+        case 'fixed': {
+          const colCount =
+            typeof config.columns === 'number' ? config.columns : 0
+          if (colCount < 1) {
+            throw new Error(`Invalid columns count: ${colCount}`)
+          }
+          const colWidth = config.columnWidth
+            ? formatValue(config.columnWidth)
+            : '1fr'
+
+          return {
+            template: `repeat(${colCount}, ${colWidth})`,
+            columnsCount: colCount,
+            calculatedGap: gap,
+            isValid: true,
+          }
+        }
+
+        case 'auto': {
+          const colWidth = config.columnWidth ?? 'auto'
+          if (colWidth === 'auto') {
+            return {
+              template: 'repeat(auto-fill, minmax(0, 1fr))',
+              columnsCount: 1,
+              calculatedGap: gap,
+              isValid: true,
+            }
+          }
+          const colWidthStr =
+            typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()
+
+          const pxVal = convertValue(colWidthStr) ?? 0
+          const columns =
+            pxVal > 0
+              ? Math.max(1, Math.floor((width + gap) / (pxVal + gap)))
+              : 1
+
+          return {
+            template: `repeat(auto-fill, ${colWidthStr})`,
+            columnsCount: columns,
+            calculatedGap: gap,
+            isValid: true,
+          }
+        }
+
+        default: {
+          if (!hasWarnedRef.current) {
+            console.warn(
+              `[useGuide] Unknown variant "${variant}". Falling back to "line".`
+            )
+            hasWarnedRef.current = true
+          }
+          const columns = Math.max(1, Math.floor(width / (gap + 1)) + 1)
+          return {
+            template: `repeat(${columns}, 1px)`,
+            columnsCount: columns,
+            calculatedGap: gap,
+            isValid: true,
+          }
+        }
+      }
+    } catch (error) {
+      console.warn('Error in useGuide:', error)
+      return {
+        template: 'none',
+        columnsCount: 0,
+        calculatedGap: 0,
+        isValid: false,
+      }
+    }
+  }, [config, width])
+}
diff --git a/packages/react/src/hooks/useIsClient.ts b/packages/react/src/hooks/useIsClient.ts
new file mode 100644
index 00000000..a4a5a216
--- /dev/null
+++ b/packages/react/src/hooks/useIsClient.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook to determine if the code is running on the client side.
+ */
+export function useIsClient() {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return isClient
+}
diff --git a/packages/react/src/hooks/useMeasure.ts b/packages/react/src/hooks/useMeasure.ts
new file mode 100644
index 00000000..cd189a2b
--- /dev/null
+++ b/packages/react/src/hooks/useMeasure.ts
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { rafThrottle } from '@baseline-kit/dom'
+
+export interface MeasureResult {
+  width: number
+  height: number
+  refresh: () => void
+}
+
+/**
+ * Hook for measuring and tracking DOM element dimensions.
+ */
+export function useMeasure(
+  ref: React.RefObject<HTMLElement | null>
+): MeasureResult {
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
+
+  const measure = React.useCallback(() => {
+    if (!ref.current) return
+    try {
+      const rect = ref.current.getBoundingClientRect()
+      const next = {
+        width: rect ? Math.round(rect.width) : 0,
+        height: rect ? Math.round(rect.height) : 0,
+      }
+      setDimensions((prev) =>
+        prev.width === next.width && prev.height === next.height ? prev : next
+      )
+    } catch {
+      setDimensions({ width: 0, height: 0 })
+    }
+  }, [ref])
+
+  const refresh = React.useMemo(() => rafThrottle(measure), [measure])
+
+  React.useLayoutEffect(() => {
+    if (typeof window === 'undefined') return
+    measure()
+  }, [measure])
+
+  React.useLayoutEffect(() => {
+    if (typeof window === 'undefined' || !ref.current) return
+    const observer = new ResizeObserver(() => {
+      refresh()
+    })
+    observer.observe(ref.current)
+    return () => {
+      observer.disconnect()
+    }
+  }, [ref, refresh])
+
+  return { ...dimensions, refresh }
+}
diff --git a/packages/react/src/hooks/useVirtual.ts b/packages/react/src/hooks/useVirtual.ts
new file mode 100644
index 00000000..51e3be94
--- /dev/null
+++ b/packages/react/src/hooks/useVirtual.ts
@@ -0,0 +1,90 @@
+import {
+  RefObject,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { rafThrottle } from '@baseline-kit/dom'
+
+type VirtualResult = {
+  totalLines: number
+  lineHeight: number
+  containerRef: RefObject<HTMLDivElement | null>
+  buffer?: number | string
+}
+
+/**
+ * Hook for optimizing large lists through virtual scrolling.
+ */
+export function useVirtual({
+  totalLines,
+  lineHeight,
+  containerRef,
+  buffer = 0,
+}: VirtualResult) {
+  const numericBuffer = useMemo(
+    () => (typeof buffer === 'number' ? buffer : parseInt(buffer, 10) || 0),
+    [buffer]
+  )
+
+  const calculateRange = useCallback(() => {
+    const element = containerRef.current
+    if (!element) return { start: 0, end: totalLines }
+
+    const rect = element.getBoundingClientRect()
+    const offsetTop = rect.top + window.scrollY
+    const viewportTop = Math.max(0, window.scrollY - offsetTop - numericBuffer)
+    const viewportBottom = viewportTop + window.innerHeight + numericBuffer * 2
+
+    const start = Math.max(0, Math.floor(viewportTop / lineHeight))
+    const end = Math.min(totalLines, Math.ceil(viewportBottom / lineHeight))
+
+    return { start, end }
+  }, [totalLines, lineHeight, containerRef, numericBuffer])
+
+  const [visibleRange, setVisibleRange] = useState(calculateRange)
+
+  const updateRange = useCallback(() => {
+    setVisibleRange((prev) => {
+      const next = calculateRange()
+      return prev.start !== next.start || prev.end !== next.end ? next : prev
+    })
+  }, [calculateRange])
+
+  const updateRangeThrottled = useMemo(
+    () => rafThrottle(updateRange),
+    [updateRange]
+  )
+
+  useWindowEvents(['scroll', 'resize'], updateRangeThrottled)
+
+  useLayoutEffect(() => {
+    const element = containerRef.current
+    if (!element) return
+
+    const observer = new IntersectionObserver(updateRangeThrottled, {
+      threshold: 0,
+    })
+    observer.observe(element)
+    updateRangeThrottled()
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [containerRef, calculateRange, updateRangeThrottled])
+
+  return visibleRange
+}
+
+/** Helper hook to manage multiple window event listeners. */
+function useWindowEvents(events: string[], handler: () => void) {
+  const stableHandler = useCallback(handler, [handler])
+
+  useLayoutEffect(() => {
+    const wrappedHandler = () => stableHandler()
+    events.forEach((evt) => window.addEventListener(evt, wrappedHandler))
+    return () =>
+      events.forEach((evt) => window.removeEventListener(evt, wrappedHandler))
+  }, [events, stableHandler])
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
new file mode 100644
index 00000000..a1d9a556
--- /dev/null
+++ b/packages/react/src/index.ts
@@ -0,0 +1,39 @@
+/**
+ * @baseline-kit/react
+ * React adapter for baseline-kit: components, hooks, and React-specific utilities
+ *
+ * Re-exports from @baseline-kit/core and @baseline-kit/dom for convenience.
+ */
+
+// Core styles (base variables, reset, component CSS)
+import './components/styles/core.css'
+
+// Public API Components
+export { Config } from './components/Config'
+export { Baseline } from './components/Baseline'
+export { Guide } from './components/Guide'
+export { Box } from './components/Box'
+export { Stack } from './components/Stack'
+export { Layout } from './components/Layout'
+export { Spacer } from './components/Spacer'
+export { Padder } from './components/Padder'
+
+// Public API Types
+export type { DebuggingMode, ConfigSchema } from './components/Config/Config'
+export type {
+  GuideVariant,
+  Spacing,
+  SpacingProps,
+  PaddingValue,
+  Variant,
+} from '@baseline-kit/core'
+export type { BaselineProps, BaselineVariant } from './components/Baseline'
+export type { BoxProps, SnappingMode } from './components/Box'
+export type { GuideProps } from './components/Guide'
+export type { LayoutProps } from './components/Layout'
+export type { StackProps } from './components/Stack'
+export type { IndicatorNode, SpacerProps } from './components/Spacer'
+export type { PadderProps } from './components/Padder'
+
+// Public API Utilities
+export { isSSR, safeClientValue } from '@baseline-kit/dom'
diff --git a/packages/react/src/style.d.ts b/packages/react/src/style.d.ts
new file mode 100644
index 00000000..2ed6d471
--- /dev/null
+++ b/packages/react/src/style.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const styles: { readonly [key: string]: string }
+  export default styles
+}
diff --git a/packages/react/src/styles.ts b/packages/react/src/styles.ts
new file mode 100644
index 00000000..ca97bbfb
--- /dev/null
+++ b/packages/react/src/styles.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Style Entry Point
+ * @description Clean import path for core CSS styles
+ */
+import './components/styles/core.css'
diff --git a/packages/react/src/theme.ts b/packages/react/src/theme.ts
new file mode 100644
index 00000000..52c76e09
--- /dev/null
+++ b/packages/react/src/theme.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Theme Entry Point
+ * @description Clean import path for theme CSS styles
+ */
+import './components/styles/theme.css'
diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts
new file mode 100644
index 00000000..9da318f1
--- /dev/null
+++ b/packages/react/src/utils/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @baseline-kit/react utilities
+ * Re-exports from core and dom for backwards compatibility,
+ * plus React-specific merge and SSR utilities.
+ */
+
+// Re-export everything from core (types, pure utils, config, validation)
+export * from '@baseline-kit/core'
+
+// Re-export everything from dom (timing, SSR detection)
+export * from '@baseline-kit/dom'
+
+// React-specific utilities
+export * from './merge'
+export * from './ssr'
diff --git a/packages/react/src/utils/merge.ts b/packages/react/src/utils/merge.ts
new file mode 100644
index 00000000..775d7891
--- /dev/null
+++ b/packages/react/src/utils/merge.ts
@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+/**
+ * Combines multiple style objects with type safety.
+ */
+export const mergeStyles = <T extends React.CSSProperties>(
+  ...styles: Array<T | undefined>
+): T =>
+  Object.assign(
+    {},
+    ...styles.filter((style): style is T => style !== undefined)
+  )
+
+/**
+ * Assigns a value to a React ref.
+ */
+function assignRef<T>(
+  ref: React.Ref<T> | null | undefined,
+  node: T | null
+): void {
+  if (!ref) return
+  if (typeof ref === 'function') {
+    ref(node)
+  } else {
+    try {
+      Object.assign(ref, { current: node })
+    } catch (error) {
+      console.error('Error assigning ref:', error)
+    }
+  }
+}
+
+/**
+ * Merges multiple React refs into a single callback ref.
+ */
+export function mergeRefs<T>(
+  ...refs: Array<React.Ref<T> | null | undefined>
+): React.RefCallback<T> {
+  return (node: T | null) => {
+    refs.forEach((ref) => {
+      assignRef(ref, node)
+    })
+  }
+}
diff --git a/packages/react/src/utils/ssr.tsx b/packages/react/src/utils/ssr.tsx
new file mode 100644
index 00000000..d4e8a963
--- /dev/null
+++ b/packages/react/src/utils/ssr.tsx
@@ -0,0 +1,24 @@
+/**
+ * React-specific SSR utilities (ClientOnly component)
+ */
+import * as React from 'react'
+import { useIsClient } from '../hooks/useIsClient'
+
+interface ClientOnlyProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+/**
+ * A utility component that only renders its children on the client side.
+ * @internal Not part of the public API
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const isClient = useIsClient()
+
+  if (!isClient) {
+    return <>{fallback}</>
+  }
+
+  return <>{children}</>
+}
diff --git a/scripts/combine-css.js b/scripts/combine-css.js
index 135d178d..5fb9a66f 100755
--- a/scripts/combine-css.js
+++ b/scripts/combine-css.js
@@ -17,7 +17,7 @@ const __dirname = path.dirname(__filename)
 
 // Paths
 const distDir = path.resolve(__dirname, '../dist')
-const themeSourceDir = path.resolve(__dirname, '../src/components/styles/theme')
+const themeSourceDir = path.resolve(__dirname, '../packages/react/src/components/styles/theme')
 const themeDestDir = path.resolve(distDir, 'theme')
 const coreCssPath = path.join(distDir, 'styles.css')
 const themeCssPath = path.join(distDir, 'theme.css')
diff --git a/src/index.ts b/src/index.ts
index e0d3d360..e39eb6fa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,47 +1,9 @@
 /**
  * Baseline Kit
- * Lightweight development tool for visualizing and debugging grid systems and spacing in React
- * applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components,
- * and theme-aware configuration—all optimized for performance and built with TypeScript.
- *
- * Export Strategy:
- * - Only components and types required by consumers are exported
- * - Components are directly imported from their respective directories rather than through the components/index.ts barrel
- * - SSR utilities (isSSR, safeClientValue) are exported for advanced consumer use cases
- * - Internal utilities, helper functions, and implementation details are kept private
+ * Backwards-compatible entry point that re-exports from the new package structure.
  *
  * @module baseline-kit
  */
 
-// Core styles (base variables, reset, component CSS)
-import './components/styles/core.css'
-
-// Public API Components
-export { Config } from './components/Config'
-export { Baseline } from './components/Baseline'
-export { Guide } from './components/Guide'
-export { Box } from './components/Box'
-export { Stack } from './components/Stack'
-export { Layout } from './components/Layout'
-export { Spacer } from './components/Spacer'
-export { Padder } from './components/Padder'
-
-// Public API Types
-export type { DebuggingMode, ConfigSchema } from './components/Config/Config'
-export type {
-  GuideVariant,
-  Spacing,
-  SpacingProps,
-  PaddingValue,
-  Variant,
-} from './components/types'
-export type { BaselineProps, BaselineVariant } from './components/Baseline'
-export type { BoxProps, SnappingMode } from './components/Box'
-export type { GuideProps } from './components/Guide'
-export type { LayoutProps } from './components/Layout'
-export type { StackProps } from './components/Stack'
-export type { IndicatorNode, SpacerProps } from './components/Spacer'
-export type { PadderProps } from './components/Padder'
-
-// Public API Utilities
-export { isSSR, safeClientValue } from './utils/ssr'
+// Re-export everything from @baseline-kit/react
+export * from '@baseline-kit/react'
diff --git a/tests/hooks/useConfig.test.ts b/tests/hooks/useConfig.test.ts
index 35fb0936..4129b6d9 100644
--- a/tests/hooks/useConfig.test.ts
+++ b/tests/hooks/useConfig.test.ts
@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react'
 import { useConfig } from '@hooks'
-import type { Config } from '@components'
+import type { ConfigSchema as Config } from '@components'
 import * as ComponentsModule from '@components'
 
 const minimalGuideStub: Config['guide'] = {
diff --git a/tsconfig.build.json b/tsconfig.build.json
index dc2ddfa6..f30508e3 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -11,7 +11,9 @@
     "noEmit": false
   },
   "include": [
-    "src"
+    "packages/core/src",
+    "packages/dom/src",
+    "packages/react/src"
   ],
   "exclude": [
     "node_modules",
diff --git a/tsconfig.json b/tsconfig.json
index 868a5b58..ac3c3ecc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,29 +17,22 @@
     ],
     "strict": true,
     "paths": {
-      "@/*": [
-        "src/*"
-      ],
-      "@components": [
-        "src/components/index.ts"
-      ],
-      "@hooks": [
-        "src/hooks/index.ts"
-      ],
-      "@types": [
-        "src/types/index.ts"
-      ],
-      "@context": [
-        "src/context/index.ts"
-      ],
-      "@utils": [
-        "src/utils/index.ts"
-      ]
+      "@baseline-kit/core": ["packages/core/src/index.ts"],
+      "@baseline-kit/core/*": ["packages/core/src/*"],
+      "@baseline-kit/dom": ["packages/dom/src/index.ts"],
+      "@baseline-kit/dom/*": ["packages/dom/src/*"],
+      "@baseline-kit/react": ["packages/react/src/index.ts"],
+      "@baseline-kit/react/*": ["packages/react/src/*"],
+      "@/*": ["packages/react/src/*"],
+      "@components": ["packages/react/src/components/index.ts"],
+      "@hooks": ["packages/react/src/hooks/index.ts"],
+      "@types": ["packages/react/src/types/index.ts"],
+      "@context": ["packages/react/src/context/index.ts"],
+      "@utils": ["packages/react/src/utils/index.ts"]
     }
   },
   "include": [
-    "demo/**/*",    
-    "src/**/*",
+    "packages/**/*",
     "vitest.d.ts"
   ],
   "exclude": [
diff --git a/vite.config.ts b/vite.config.ts
index 5951f2c8..b5a7cca0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig(({ command }) => ({
       targets: [
         { src: 'README.md', dest: '.' },
         {
-          src: 'src/components/styles/theme.css',
+          src: 'packages/react/src/components/styles/theme.css',
           dest: '.',
           rename: { stripBase: true },
         },
@@ -36,7 +36,7 @@ export default defineConfig(({ command }) => ({
     cssCodeSplit: false,
     cssMinify: true,
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, 'packages/react/src/index.ts'),
       name: 'BaselineKit',
       formats: ['es', 'cjs'],
       fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,

From 82bd26c87d41efb7e755e5815b9a19280819c525 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 21:41:41 +0000
Subject: [PATCH 08/18] cleanup: remove old src/ directory and dead code after
 monorepo migration

- Delete 57 old src/ files (all duplicated in packages/)
- Remove dead CSS import files (styles.ts, theme.ts, components/styles/index.ts)
- Remove dead validation re-export (Guide/validation.ts)
- Inline color constants in core/config/defaults.ts
- Hoist CSS_UNITS array out of isGuideValue function (core/validation/guide.ts)
- Import BaselineVariant and SnappingMode from core instead of redefining
- Remove unused testUtils import from useVirtual test
- Update vitest coverage exclude to reference packages/

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/config/defaults.ts          | 100 ++--
 packages/core/src/validation/guide.ts         |  20 +-
 .../src/components/Baseline/Baseline.tsx      |   4 +-
 packages/react/src/components/Box/Box.tsx     |  11 +-
 .../react/src/components/Guide/validation.ts  |   9 -
 packages/react/src/components/styles/index.ts |  15 -
 packages/react/src/styles.ts                  |   5 -
 packages/react/src/theme.ts                   |   5 -
 src/components/Baseline/Baseline.tsx          | 367 ---------------
 src/components/Baseline/index.ts              |   7 -
 src/components/Baseline/styles.module.css     |  26 --
 src/components/Box/Box.tsx                    | 248 ----------
 src/components/Box/index.ts                   |   7 -
 src/components/Box/styles.module.css          |  14 -
 src/components/Config/Config.tsx              | 288 ------------
 src/components/Config/defaults.ts             | 151 ------
 src/components/Config/index.ts                |  12 -
 src/components/Guide/Guide.tsx                | 430 ------------------
 src/components/Guide/index.ts                 |   7 -
 src/components/Guide/styles.module.css        |  58 ---
 src/components/Guide/types.ts                 | 150 ------
 src/components/Guide/validation.ts            | 138 ------
 src/components/Layout/Layout.tsx              | 318 -------------
 src/components/Layout/index.ts                |  11 -
 src/components/Layout/styles.module.css       |  34 --
 src/components/Padder/Padder.tsx              | 318 -------------
 src/components/Padder/index.ts                |  11 -
 src/components/Padder/styles.module.css       |  22 -
 src/components/Spacer/Spacer.tsx              | 238 ----------
 src/components/Spacer/index.ts                |  11 -
 src/components/Spacer/styles.module.css       |  22 -
 src/components/Stack/Stack.tsx                | 299 ------------
 src/components/Stack/index.ts                 |  11 -
 src/components/Stack/styles.module.css        |  26 --
 src/components/index.ts                       |  26 --
 src/components/styles/base.css                | 122 -----
 src/components/styles/core.css                |  40 --
 src/components/styles/index.ts                |  15 -
 src/components/styles/reset.css               |  43 --
 src/components/styles/theme.css               | 142 ------
 src/components/styles/theme/dark.css          |  67 ---
 src/components/styles/theme/default.css       |  82 ----
 src/components/styles/theme/tokens.css        |  82 ----
 src/components/types.ts                       | 130 ------
 src/hooks/index.ts                            |  20 -
 src/hooks/useBaseline.ts                      | 121 -----
 src/hooks/useConfig.ts                        |  54 ---
 src/hooks/useDebug.ts                         |  64 ---
 src/hooks/useGuide.ts                         | 230 ----------
 src/hooks/useIsClient.ts                      |  18 -
 src/hooks/useMeasure.ts                       |  82 ----
 src/hooks/useVirtual.ts                       | 144 ------
 src/style.d.ts                                |   4 -
 src/styles.ts                                 |   8 -
 src/theme.ts                                  |   8 -
 src/utils/convert.ts                          |  95 ----
 src/utils/grid.ts                             |  44 --
 src/utils/index.ts                            |  23 -
 src/utils/math.ts                             |  81 ----
 src/utils/merge.ts                            | 193 --------
 src/utils/normalize.ts                        | 109 -----
 src/utils/padding.ts                          | 140 ------
 src/utils/parse.ts                            |  39 --
 src/utils/snapping.ts                         |  59 ---
 src/utils/ssr.tsx                             |  80 ----
 src/utils/timing.ts                           |  84 ----
 tests/hooks/useVirtual.test.ts                |   1 -
 vitest.config.ts                              |   2 +-
 68 files changed, 69 insertions(+), 5776 deletions(-)
 delete mode 100644 packages/react/src/components/Guide/validation.ts
 delete mode 100644 packages/react/src/components/styles/index.ts
 delete mode 100644 packages/react/src/styles.ts
 delete mode 100644 packages/react/src/theme.ts
 delete mode 100644 src/components/Baseline/Baseline.tsx
 delete mode 100644 src/components/Baseline/index.ts
 delete mode 100644 src/components/Baseline/styles.module.css
 delete mode 100644 src/components/Box/Box.tsx
 delete mode 100644 src/components/Box/index.ts
 delete mode 100644 src/components/Box/styles.module.css
 delete mode 100644 src/components/Config/Config.tsx
 delete mode 100644 src/components/Config/defaults.ts
 delete mode 100644 src/components/Config/index.ts
 delete mode 100644 src/components/Guide/Guide.tsx
 delete mode 100644 src/components/Guide/index.ts
 delete mode 100644 src/components/Guide/styles.module.css
 delete mode 100644 src/components/Guide/types.ts
 delete mode 100644 src/components/Guide/validation.ts
 delete mode 100644 src/components/Layout/Layout.tsx
 delete mode 100644 src/components/Layout/index.ts
 delete mode 100644 src/components/Layout/styles.module.css
 delete mode 100644 src/components/Padder/Padder.tsx
 delete mode 100644 src/components/Padder/index.ts
 delete mode 100644 src/components/Padder/styles.module.css
 delete mode 100644 src/components/Spacer/Spacer.tsx
 delete mode 100644 src/components/Spacer/index.ts
 delete mode 100644 src/components/Spacer/styles.module.css
 delete mode 100644 src/components/Stack/Stack.tsx
 delete mode 100644 src/components/Stack/index.ts
 delete mode 100644 src/components/Stack/styles.module.css
 delete mode 100644 src/components/index.ts
 delete mode 100644 src/components/styles/base.css
 delete mode 100644 src/components/styles/core.css
 delete mode 100644 src/components/styles/index.ts
 delete mode 100644 src/components/styles/reset.css
 delete mode 100644 src/components/styles/theme.css
 delete mode 100644 src/components/styles/theme/dark.css
 delete mode 100644 src/components/styles/theme/default.css
 delete mode 100644 src/components/styles/theme/tokens.css
 delete mode 100644 src/components/types.ts
 delete mode 100644 src/hooks/index.ts
 delete mode 100644 src/hooks/useBaseline.ts
 delete mode 100644 src/hooks/useConfig.ts
 delete mode 100644 src/hooks/useDebug.ts
 delete mode 100644 src/hooks/useGuide.ts
 delete mode 100644 src/hooks/useIsClient.ts
 delete mode 100644 src/hooks/useMeasure.ts
 delete mode 100644 src/hooks/useVirtual.ts
 delete mode 100644 src/style.d.ts
 delete mode 100644 src/styles.ts
 delete mode 100644 src/theme.ts
 delete mode 100644 src/utils/convert.ts
 delete mode 100644 src/utils/grid.ts
 delete mode 100644 src/utils/index.ts
 delete mode 100644 src/utils/math.ts
 delete mode 100644 src/utils/merge.ts
 delete mode 100644 src/utils/normalize.ts
 delete mode 100644 src/utils/padding.ts
 delete mode 100644 src/utils/parse.ts
 delete mode 100644 src/utils/snapping.ts
 delete mode 100644 src/utils/ssr.tsx
 delete mode 100644 src/utils/timing.ts

diff --git a/packages/core/src/config/defaults.ts b/packages/core/src/config/defaults.ts
index de3a7d30..c38e5290 100644
--- a/packages/core/src/config/defaults.ts
+++ b/packages/core/src/config/defaults.ts
@@ -1,50 +1,60 @@
 import type { ConfigSchema } from './schema'
 
-const GUIDE_COLORS = {
-  line: 'var(--bk-guide-color-line-theme)',
-  pattern: 'var(--bk-guide-color-pattern-theme)',
-  auto: 'var(--bk-guide-color-auto-theme)',
-  fixed: 'var(--bk-guide-color-fixed-theme)',
-} as const
-
-const BASELINE_COLORS = {
-  line: 'var(--bk-baseline-color-line-theme)',
-  flat: 'var(--bk-baseline-color-flat-theme)',
-} as const
-
-const SPACER_COLORS = {
-  line: 'var(--bk-spacer-color-line-theme)',
-  flat: 'var(--bk-spacer-color-flat-theme)',
-  text: 'var(--bk-spacer-color-text-theme)',
-} as const
-
-const BOX_COLORS = {
-  line: 'var(--bk-box-color-line-theme)',
-  flat: 'var(--bk-box-color-flat-theme)',
-  text: 'var(--bk-box-color-text-theme)',
-} as const
-
-const STACK_COLORS = {
-  line: 'var(--bk-stack-color-line-theme)',
-  flat: 'var(--bk-stack-color-flat-theme)',
-  text: 'var(--bk-stack-color-text-theme)',
-} as const
-
-const LAYOUT_COLORS = {
-  line: 'var(--bk-layout-color-line-theme)',
-  flat: 'var(--bk-layout-color-flat-theme)',
-  text: 'var(--bk-layout-color-text-theme)',
-} as const
-
-const PADDER_COLOR = 'var(--bk-padder-color-theme)'
-
 export const DEFAULT_CONFIG: ConfigSchema = {
   base: 8,
-  baseline: { variant: 'line', debugging: 'hidden', colors: BASELINE_COLORS },
-  guide: { variant: 'line', debugging: 'hidden', colors: GUIDE_COLORS },
-  spacer: { variant: 'line', debugging: 'hidden', colors: SPACER_COLORS },
-  box: { debugging: 'hidden', colors: BOX_COLORS },
-  stack: { debugging: 'hidden', colors: STACK_COLORS },
-  layout: { debugging: 'hidden', colors: LAYOUT_COLORS },
-  padder: { debugging: 'hidden', color: PADDER_COLOR },
+  baseline: {
+    variant: 'line',
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-baseline-color-line-theme)',
+      flat: 'var(--bk-baseline-color-flat-theme)',
+    },
+  },
+  guide: {
+    variant: 'line',
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-guide-color-line-theme)',
+      pattern: 'var(--bk-guide-color-pattern-theme)',
+      auto: 'var(--bk-guide-color-auto-theme)',
+      fixed: 'var(--bk-guide-color-fixed-theme)',
+    },
+  },
+  spacer: {
+    variant: 'line',
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-spacer-color-line-theme)',
+      flat: 'var(--bk-spacer-color-flat-theme)',
+      text: 'var(--bk-spacer-color-text-theme)',
+    },
+  },
+  box: {
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-box-color-line-theme)',
+      flat: 'var(--bk-box-color-flat-theme)',
+      text: 'var(--bk-box-color-text-theme)',
+    },
+  },
+  stack: {
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-stack-color-line-theme)',
+      flat: 'var(--bk-stack-color-flat-theme)',
+      text: 'var(--bk-stack-color-text-theme)',
+    },
+  },
+  layout: {
+    debugging: 'hidden',
+    colors: {
+      line: 'var(--bk-layout-color-line-theme)',
+      flat: 'var(--bk-layout-color-flat-theme)',
+      text: 'var(--bk-layout-color-text-theme)',
+    },
+  },
+  padder: {
+    debugging: 'hidden',
+    color: 'var(--bk-padder-color-theme)',
+  },
 } as const
diff --git a/packages/core/src/validation/guide.ts b/packages/core/src/validation/guide.ts
index 9ceb9ff5..f0c7ff55 100644
--- a/packages/core/src/validation/guide.ts
+++ b/packages/core/src/validation/guide.ts
@@ -19,17 +19,15 @@ export const isValidGuidePattern = (
   pattern.length > 0 &&
   pattern.every(isValidGuideColumnValue)
 
-export const isGuideValue = (value: unknown) => {
-  const CSS_UNITS = [
-    ...Object.keys(ABSOLUTE_UNIT_CONVERSIONS),
-    ...RELATIVE_UNITS,
-  ]
-  return (
-    typeof value === 'number' ||
-    (typeof value === 'string' &&
-      CSS_UNITS.some((unit) => value.endsWith(unit)))
-  )
-}
+const CSS_UNITS = [
+  ...Object.keys(ABSOLUTE_UNIT_CONVERSIONS),
+  ...RELATIVE_UNITS,
+]
+
+export const isGuideValue = (value: unknown) =>
+  typeof value === 'number' ||
+  (typeof value === 'string' &&
+    CSS_UNITS.some((unit) => value.endsWith(unit)))
 
 export const isGuideAlignment = (value: unknown): value is GridAlignment =>
   typeof value === 'string' && GRID_ALIGNMENTS.includes(value as GridAlignment)
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
index bdaa9f10..4cbb06f6 100644
--- a/packages/react/src/components/Baseline/Baseline.tsx
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -11,10 +11,10 @@ import {
 } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
-import { Variant } from '../types'
+import type { BaselineVariant } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
-export type BaselineVariant = Exclude<Variant, 'pattern'>
+export type { BaselineVariant }
 
 export type BaselineProps = {
   /** Visual style variant for the baseline guides */
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 2a4d73d2..884ca07f 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -12,17 +12,10 @@ import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { Config } from '../Config/Config'
 import { Padder } from '../Padder'
 import { ComponentsProps } from '../types'
+import type { SnappingMode } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
-/**
- * Determines how the Box component aligns to the baseline grid.
- *
- * @remarks
- * - `none`: No snapping; uses raw spacing values as provided
- * - `height`: Only container height snaps to base unit multiples
- * - `clamp`: Both height and spacing values snap to base unit multiples
- */
-export type SnappingMode = 'none' | 'height' | 'clamp'
+export type { SnappingMode }
 
 export type BoxProps = {
   /** Number of columns to span in a grid layout */
diff --git a/packages/react/src/components/Guide/validation.ts b/packages/react/src/components/Guide/validation.ts
deleted file mode 100644
index 223bc95c..00000000
--- a/packages/react/src/components/Guide/validation.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export {
-  isValidGuideColumnValue,
-  isValidGuidePattern,
-  isGuideValue,
-  isGuideAlignment,
-  isGuideLineConfig,
-  isGuideColumnConfig,
-  isAutoCalculatedGuide,
-} from '@baseline-kit/core'
diff --git a/packages/react/src/components/styles/index.ts b/packages/react/src/components/styles/index.ts
deleted file mode 100644
index a458d5ec..00000000
--- a/packages/react/src/components/styles/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Baseline Kit Styles System
- *
- * This file exports all core styles needed for the component library.
- * The import order is important:
- * 1. core.css - Contains reset.css, base.css, and component styles
- * 2. theme.css - Contains color variables and theming
- */
-
-// Core styles must be imported before theme
-import './core.css'
-import './theme.css'
-
-// Empty export to make this a proper module
-export {}
diff --git a/packages/react/src/styles.ts b/packages/react/src/styles.ts
deleted file mode 100644
index ca97bbfb..00000000
--- a/packages/react/src/styles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * @file Style Entry Point
- * @description Clean import path for core CSS styles
- */
-import './components/styles/core.css'
diff --git a/packages/react/src/theme.ts b/packages/react/src/theme.ts
deleted file mode 100644
index 52c76e09..00000000
--- a/packages/react/src/theme.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * @file Theme Entry Point
- * @description Clean import path for theme CSS styles
- */
-import './components/styles/theme.css'
diff --git a/src/components/Baseline/Baseline.tsx b/src/components/Baseline/Baseline.tsx
deleted file mode 100644
index 10677b83..00000000
--- a/src/components/Baseline/Baseline.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-import * as React from 'react'
-import { ComponentsProps } from '@components'
-import { useConfig, useDebug, useVirtual, useMeasure } from '@hooks'
-import {
-  parsePadding,
-  normalizeValuePair,
-  mergeStyles,
-  mergeClasses,
-  calculateRowCount,
-  formatValue,
-  createStyleOverride,
-  ClientOnly,
-} from '@utils'
-import { Variant } from '../types'
-import styles from './styles.module.css'
-
-export type BaselineVariant = Exclude<Variant, 'pattern'>
-
-export type BaselineProps = {
-  /** Visual style variant for the baseline guides */
-  variant?: BaselineVariant
-  /** Explicit width for the overlay (e.g., "1200px" or 1200) */
-  width?: number | string
-  /** Explicit height for the overlay (e.g., "100vh" or 800) */
-  height?: number | string
-  /** Base unit for measurements (defaults to theme value) */
-  base?: number
-  /** Color override for grid lines */
-  color?: string
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-} & ComponentsProps
-
-/** Creates default baseline styles */
-const createDefaultBaselineStyles = (
-  base: number,
-  lineColor: string,
-  flatColor: string
-): Record<string, string> => ({
-  '--bkbw': '100%',
-  '--bkbh': '100%',
-  '--bkbb': `${base}px`,
-  '--bkbcl': lineColor,
-  '--bkbcf': flatColor,
-})
-
-/** Create row styles for baseline lines */
-type RowStyleParams = {
-  /** Row index */
-  index: number
-  /** Base unit for calculations */
-  base: number
-  /** Baseline visual variant */
-  variant: BaselineVariant
-  /** Selected color for the baseline */
-  chosenColor: string
-  /** Theme line color */
-  lineColor: string
-  /** Theme flat color */
-  flatColor: string
-}
-
-/**
- * Creates styles for an individual baseline row.
- * Applies positioning and visual styling based on variant.
- */
-const createBaselineRowStyle = (
-  params: RowStyleParams
-): React.CSSProperties => {
-  const { index, base, variant, chosenColor, lineColor, flatColor } = params
-
-  // Directly set the CSS variables instead of using createStyleOverride
-  return {
-    '--bkrt': index === 0 ? '0px' : `${index * base}px`,
-    '--bkrh': variant === 'line' ? '1px' : `${base}px`,
-    '--bkbc': chosenColor || (variant === 'line' ? lineColor : flatColor),
-  } as React.CSSProperties
-}
-
-// Implementation component that only renders on the client side
-const BaselineImpl = React.memo(function BaselineImpl({
-  className,
-  debugging,
-  style,
-  variant,
-  height: heightProp,
-  width: widthProp,
-  base,
-  color: colorProp,
-  ssrMode: _ssrMode = false,
-  ...spacingProps
-}: BaselineProps) {
-  const config = useConfig('baseline')
-  const { isShown } = useDebug(debugging, config.debugging)
-
-  // Use a stable reference that won't cause hydration mismatches
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-
-  // Always call hooks, but conditionally use their results
-  const {
-    width: containerWidth,
-    height: containerHeight,
-    refresh,
-  } = useMeasure(containerRef)
-
-  // Effect for handling window resize events
-  React.useEffect(() => {
-    const handleResize = () => {
-      refresh()
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [refresh])
-
-  const [_normWidth, normHeight] = React.useMemo(() => {
-    return normalizeValuePair(
-      [widthProp, heightProp],
-      [containerWidth, containerHeight]
-    )
-  }, [widthProp, heightProp, containerWidth, containerHeight])
-
-  const { top, right, bottom, left } = React.useMemo(
-    () => parsePadding(spacingProps),
-    [spacingProps]
-  )
-
-  const padding = React.useMemo(() => {
-    const paddingValues = [top, right, bottom, left]
-      .map((value) => (value ? `${value}px` : '0'))
-      .join(' ')
-
-    return paddingValues !== '0 0 0 0' ? paddingValues : undefined
-  }, [top, right, bottom, left])
-
-  const rowCount = React.useMemo(() => {
-    const baseValue = base || config.base
-    return calculateRowCount({
-      height: normHeight,
-      top,
-      bottom,
-      base: baseValue,
-    })
-  }, [normHeight, top, bottom, base, config.base])
-
-  // Use virtual rendering for performance
-  const { start, end } = useVirtual({
-    totalLines: rowCount,
-    lineHeight: base || config.base,
-    containerRef,
-    buffer: 160,
-  })
-
-  const chosenColor =
-    colorProp || (variant === 'line' ? config.colors.line : config.colors.flat)
-
-  // Create default baseline styles
-  const defaultBaselineStyles = React.useMemo(
-    () =>
-      createDefaultBaselineStyles(
-        base || config.base,
-        config.colors.line,
-        config.colors.flat
-      ),
-    [base, config.colors.line, config.colors.flat, config.base]
-  )
-
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(widthProp || '100%')
-    const heightValue = formatValue(heightProp || '100%')
-
-    // Define dimensions that should be skipped when set to 100%
-    const dimensionVars = ['--bkbw', '--bkbh']
-
-    return mergeStyles(
-      {
-        ...createStyleOverride({
-          key: '--bkbw',
-          value: widthValue,
-          defaultStyles: defaultBaselineStyles,
-          skipDimensions: { fullSize: dimensionVars },
-        }),
-        ...createStyleOverride({
-          key: '--bkbh',
-          value: heightValue,
-          defaultStyles: defaultBaselineStyles,
-          skipDimensions: { fullSize: dimensionVars },
-        }),
-        ...createStyleOverride({
-          key: '--bkbb',
-          value: `${base}px`,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bkbcl',
-          value: colorProp || config.colors.line,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bkbcf',
-          value: colorProp || config.colors.flat,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...(padding && { padding }),
-      } as React.CSSProperties,
-      style
-    )
-  }, [
-    widthProp,
-    heightProp,
-    base,
-    colorProp,
-    config.colors.line,
-    config.colors.flat,
-    padding,
-    defaultBaselineStyles,
-    style,
-  ])
-
-  const getRowStyle = React.useCallback(
-    (index: number) => {
-      // Ensure variant is a BaselineVariant
-      const safeVariant = variant as BaselineVariant
-      const safeBase = base || config.base
-
-      return createBaselineRowStyle({
-        index,
-        base: safeBase,
-        variant: safeVariant,
-        chosenColor,
-        lineColor: config.colors.line,
-        flatColor: config.colors.flat,
-      })
-    },
-    [
-      base,
-      variant,
-      chosenColor,
-      config.colors.line,
-      config.colors.flat,
-      config.base,
-    ]
-  )
-
-  return (
-    <div
-      ref={containerRef}
-      data-testid="baseline"
-      aria-hidden="true"
-      className={mergeClasses(
-        styles.bas,
-        isShown ? styles.v : styles.h,
-        className
-      )}
-      style={containerStyles}
-      {...spacingProps}
-    >
-      {isShown &&
-        Array.from({ length: end - start }, (_, i) => {
-          const rowIndex = i + start
-          return (
-            <div
-              className={styles.row}
-              key={rowIndex}
-              data-row-index={rowIndex}
-              style={getRowStyle(rowIndex)}
-            />
-          )
-        })}
-    </div>
-  )
-})
-
-/**
- * Renders horizontal guidelines for maintaining vertical rhythm and baseline alignment.
- *
- * @remarks
- * Baseline provides horizontal guides that:
- * - Help maintain consistent vertical spacing
- * - Support visual verification of baseline alignment
- * - Optimize performance through virtual rendering
- * - Adapt to container dimensions
- *
- * @example
- * ```tsx
- * // Basic baseline overlay
- * <Baseline
- *   height="100vh"
- *   base={8}
- *   debugging="visible"
- * />
- *
- * // Custom variant with padding
- * <Baseline
- *   variant="flat"
- *   height="100vh"
- *   base={4}
- *   block={[16, 0]}
- *   debugging="visible"
- * />
- * ```
- */
-export const Baseline = React.memo(function Baseline({
-  className,
-  debugging,
-  style,
-  variant: variantProp,
-  height: heightProp,
-  width: widthProp,
-  base: baseProp,
-  color: colorProp,
-  ssrMode = false,
-  ...spacingProps
-}: BaselineProps) {
-  const config = useConfig('baseline')
-  const variant = variantProp ?? config.variant
-  const base = baseProp ?? config.base
-  const { isShown } = useDebug(debugging, config.debugging)
-
-  // If debugging isn't enabled, render a hidden element
-  // This ensures tests can find the element even when hidden
-  if (!isShown) {
-    return (
-      <div
-        className={mergeClasses(styles.b, styles.h, className)}
-        style={style}
-        data-testid="baseline"
-        aria-hidden="true"
-        {...spacingProps}
-      />
-    )
-  }
-
-  // Create a simple SSR fallback
-  const ssrFallback = (
-    <div
-      className={mergeClasses(styles.b, styles.h, styles.ssr, className)}
-      style={{
-        width: widthProp || '100%',
-        height: heightProp || '100%',
-        ...style,
-      }}
-      data-testid="baseline"
-      aria-hidden="true"
-    />
-  )
-
-  // Wrap the actual implementation in ClientOnly
-  return (
-    <ClientOnly fallback={ssrFallback}>
-      <BaselineImpl
-        className={className}
-        debugging={debugging}
-        style={style}
-        variant={variant}
-        height={heightProp}
-        width={widthProp}
-        base={base}
-        color={colorProp}
-        ssrMode={ssrMode}
-        {...spacingProps}
-      />
-    </ClientOnly>
-  )
-})
diff --git a/src/components/Baseline/index.ts b/src/components/Baseline/index.ts
deleted file mode 100644
index 6fb4b8ca..00000000
--- a/src/components/Baseline/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file Baseline Component Exports (components/Baseline/index.ts)
- * @description Baseline component entry point
- * @module baseline-kit/components/Baseline
- */
-
-export * from './Baseline'
diff --git a/src/components/Baseline/styles.module.css b/src/components/Baseline/styles.module.css
deleted file mode 100644
index e4c1563d..00000000
--- a/src/components/Baseline/styles.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.bas {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  width: var(--bkbw);
-  height: var(--bkbh);
-  overflow: hidden;
-}
-
-.row {
-  left: 0;
-  right: 0;
-  position: absolute;
-  top: var(--bkrt);
-  height: var(--bkrh);
-  background-color: var(--bkbc);
-}
-
-/* Style for SSR rendering */
-.ssr {
-  box-sizing: border-box;
-  display: grid;
-  position: relative;
-  z-index: 1;
-  pointer-events: none;
-}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
deleted file mode 100644
index 2e825289..00000000
--- a/src/components/Box/Box.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import * as React from 'react'
-import { useConfig, useDebug, useBaseline } from '@hooks'
-import {
-  mergeClasses,
-  mergeStyles,
-  parsePadding,
-  mergeRefs,
-  formatValue,
-  createGridSpanStyles,
-  createStyleOverride,
-  hydratedValue,
-} from '@utils'
-import { Config } from '../Config/Config'
-import { Padder } from '../Padder'
-import { ComponentsProps } from '../types'
-import styles from './styles.module.css'
-
-/**
- * Determines how the Box component aligns to the baseline grid.
- *
- * @remarks
- * - `none`: No snapping; uses raw spacing values as provided
- * - `height`: Only container height snaps to base unit multiples
- * - `clamp`: Both height and spacing values snap to base unit multiples
- */
-export type SnappingMode = 'none' | 'height' | 'clamp'
-
-export type BoxProps = {
-  /** Number of columns to span in a grid layout */
-  colSpan?: number
-  /** Number of rows to span in a grid layout */
-  rowSpan?: number
-  /** Shorthand for equal column and row span. Takes precedence over individual spans */
-  span?: number
-  /** Controls baseline grid alignment behavior */
-  snapping?: SnappingMode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-  children?: React.ReactNode
-} & ComponentsProps
-
-/**
- * Creates default box styles with theme values.
- * Sets CSS variables for width, height, base unit, and colors.
- */
-const createDefaultBoxStyles = (
-  base: number,
-  lineColor: string
-): Record<string, string> => ({
-  '--bkboxw': 'auto',
-  '--bkboxh': 'auto',
-  '--bkboxc': lineColor,
-  '--bkboxb': `${base}px`,
-})
-
-type BoxCustomStylesParams = {
-  /** Width property for the box */
-  width?: React.CSSProperties['width']
-  /** Height property for the box */
-  height?: React.CSSProperties['height']
-  /** Base unit for measurements */
-  base: number
-  /** Line color from theme */
-  lineColor: string
-  /** Default styles for comparison */
-  defaultStyles: Record<string, string>
-}
-
-/**
- * Creates custom styles for the Box component.
- * Handles dimension overrides and other custom properties.
- */
-const createBoxCustomStyles = ({
-  width,
-  height,
-  base,
-  lineColor,
-  defaultStyles,
-}: BoxCustomStylesParams): React.CSSProperties => {
-  const widthValue = formatValue(width || 'fit-content')
-  const heightValue = formatValue(height || 'fit-content')
-
-  // Define box dimensions that should be skipped when set to fit-content
-  const dimensionVars = ['--bkboxw', '--bkboxh']
-
-  return {
-    ...createStyleOverride({
-      key: '--bkboxw',
-      value: widthValue,
-      defaultStyles,
-      skipDimensions: { fitContent: dimensionVars },
-    }),
-    ...createStyleOverride({
-      key: '--bkboxh',
-      value: heightValue,
-      defaultStyles,
-      skipDimensions: { fitContent: dimensionVars },
-    }),
-    ...createStyleOverride({
-      key: '--bkboxb',
-      value: `${base}px`,
-      defaultStyles,
-    }),
-    ...createStyleOverride({
-      key: '--bkboxc',
-      value: lineColor,
-      defaultStyles,
-    }),
-  } as React.CSSProperties
-}
-
-/**
- * A foundational container component that ensures consistent spacing and baseline alignment.
- *
- * @remarks
- * Box provides a layout container that:
- * - Ensures consistent spacing aligned to the baseline grid
- * - Supports grid layout integration through span props
- * - Offers configurable snapping modes for fine-grained alignment control
- * - Includes debug overlays for visual alignment verification
- *
- * By default, Box uses "auto" for both width and height unless explicitly specified.
- *
- * @example
- * ```tsx
- * // Basic usage with spacing
- * <Box block={16} inline={8}>
- *   <p>Content aligned to baseline</p>
- * </Box>
- *
- * // With grid spanning and custom snapping
- * <Box
- *   colSpan={2}
- *   rowSpan={1}
- *   snapping="height"
- *   debugging="visible"
- * >
- *   <p>Grid-integrated content</p>
- * </Box>
- * ```
- */
-export const Box = React.memo(
-  React.forwardRef<HTMLDivElement, BoxProps>(function Box(
-    {
-      children,
-      snapping = 'clamp',
-      debugging: debuggingProp,
-      className,
-      colSpan,
-      rowSpan,
-      span,
-      width,
-      height,
-      style,
-      ssrMode = false,
-      ...spacingProps
-    },
-    ref
-  ) {
-    const config = useConfig('box')
-    const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
-
-    // Add hydration state tracking
-    const [isHydrated, setIsHydrated] = React.useState(false)
-
-    React.useEffect(() => {
-      setIsHydrated(true)
-    }, [])
-
-    const internalRef = React.useRef<HTMLDivElement | null>(null)
-    const { top, bottom, left, right } = parsePadding(spacingProps)
-
-    // Get padding calculation from useBaseline
-    const baselinePadding = useBaseline(internalRef, {
-      base: config.base,
-      snapping,
-      spacing: { top, bottom, left, right },
-      warnOnMisalignment: debugging !== 'none',
-    })
-
-    // Create stable initial padding for SSR
-    const stablePadding = {
-      padding: {
-        top: top || 0,
-        right: right || 0,
-        bottom: bottom || 0,
-        left: left || 0,
-      },
-    }
-
-    // Use stable padding during SSR and initial render, then switch to dynamic padding
-    const { padding } = hydratedValue(
-      isHydrated && !ssrMode,
-      stablePadding,
-      baselinePadding
-    )
-
-    const gridSpanStyles = React.useMemo(
-      () => createGridSpanStyles(span, colSpan, rowSpan),
-      [colSpan, rowSpan, span]
-    )
-
-    const defaultBoxStyles = React.useMemo(
-      () => createDefaultBoxStyles(config.base, config.colors.line),
-      [config.base, config.colors.line]
-    )
-
-    const boxStyles = React.useMemo(() => {
-      const customStyles = createBoxCustomStyles({
-        width,
-        height,
-        base: config.base,
-        lineColor: config.colors.line,
-        defaultStyles: defaultBoxStyles,
-      })
-      return mergeStyles(customStyles, style)
-    }, [
-      config.base,
-      config.colors.line,
-      width,
-      height,
-      defaultBoxStyles,
-      style,
-    ])
-
-    return (
-      <div
-        ref={mergeRefs(ref, internalRef)}
-        data-testid="box"
-        className={mergeClasses(styles.box, isShown && styles.v, className)}
-        style={mergeStyles(boxStyles, gridSpanStyles)}
-      >
-        <Config base={1} spacer={{ variant: 'flat' }}>
-          <Padder
-            block={[padding.top, padding.bottom]}
-            inline={[padding.left, padding.right]}
-            width="fit-content"
-            height={height}
-            debugging={debugging}
-            ssrMode={ssrMode}
-          >
-            {children}
-          </Padder>
-        </Config>
-      </div>
-    )
-  })
-)
diff --git a/src/components/Box/index.ts b/src/components/Box/index.ts
deleted file mode 100644
index c3129f96..00000000
--- a/src/components/Box/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file Box Component Exports (components/Box/index.ts)
- * @description Box component entry point
- * @module baseline-kit/components/Box
- */
-
-export * from './Box'
diff --git a/src/components/Box/styles.module.css b/src/components/Box/styles.module.css
deleted file mode 100644
index d20895ac..00000000
--- a/src/components/Box/styles.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.box {
-  position: relative;
-  width: var(--bkxw);
-  height: var(--bkxh);
-}
-
-.v::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border: 1px solid var(--bkxcl);
-  pointer-events: none;
-  z-index: var(--bkzi);
-}
diff --git a/src/components/Config/Config.tsx b/src/components/Config/Config.tsx
deleted file mode 100644
index abf74128..00000000
--- a/src/components/Config/Config.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import * as React from 'react'
-import { BaselineVariant } from '@/components'
-import { DEFAULT_CONFIG } from './defaults'
-import type { GuideVariant, Variant } from '../types'
-
-/**
- * Controls component debugging visibility and behavior.
- *
- * @remarks
- * - `none`: Debug features are fully disabled
- * - `hidden`: Debug elements exist in DOM but are not visible
- * - `visible`: Debug elements are fully rendered and visible
- */
-export type DebuggingMode = 'none' | 'hidden' | 'visible'
-
-/** Color configuration for component themes. */
-type Colors = {
-  /** Color for line-based visuals */
-  line: string
-  /** Color for flat surface visuals */
-  flat: string
-  /** Color for measurement indicators */
-  text: string
-}
-
-/** Complete configuration schema for baseline-kit. */
-export type ConfigSchema = {
-  /** Base unit for spacing calculations */
-  base: number
-  /** Guide component configuration */
-  guide: {
-    variant: GuideVariant
-    debugging: DebuggingMode
-    colors: Record<GuideVariant, string>
-  }
-  /** Baseline component configuration */
-  baseline: {
-    variant: BaselineVariant
-    debugging: DebuggingMode
-    colors: Record<BaselineVariant, string>
-  }
-  /** Stack component configuration */
-  stack: {
-    colors: Colors
-    debugging: DebuggingMode
-  }
-  /** Layout component configuration */
-  layout: {
-    colors: Colors
-    debugging: DebuggingMode
-  }
-  /** Spacer component configuration */
-  spacer: {
-    variant: Variant
-    debugging: DebuggingMode
-    colors: Colors
-  }
-  /** Box component configuration */
-  box: {
-    colors: Colors
-    debugging: DebuggingMode
-  }
-  /** Padder component configuration */
-  padder: {
-    color: string
-    debugging: DebuggingMode
-  }
-}
-
-// Create the context
-const ConfigContext = React.createContext<ConfigSchema>(DEFAULT_CONFIG)
-ConfigContext.displayName = 'ConfigContext'
-
-// Update to use React 19's use hook instead of useContext
-export const useDefaultConfig = () => React.use(ConfigContext)
-
-type ConfigProps = {
-  children: React.ReactNode
-  /** Base unit for spacing calculations */
-  base?: number
-  /** Baseline component overrides */
-  baseline?: Partial<ConfigSchema['baseline']>
-  /** Flex component overrides */
-  stack?: Partial<ConfigSchema['stack']>
-  /** Layout component overrides */
-  layout?: Partial<ConfigSchema['layout']>
-  /** Guide component overrides */
-  guide?: Partial<ConfigSchema['guide']>
-  /** Spacer component overrides */
-  spacer?: Partial<ConfigSchema['spacer']>
-  /** Box component overrides */
-  box?: Partial<ConfigSchema['box']>
-  /** Padder component overrides */
-  padder?: Partial<ConfigSchema['padder']>
-}
-
-// Utils -----------------------------------------------------------------------
-
-/** Parameters for creating CSS variables */
-type CSSVariablesParams = {
-  /** Base unit for spacing calculations */
-  base: number
-  /** Baseline component configuration */
-  baseline: ConfigSchema['baseline']
-  /** Guide component configuration */
-  guide: ConfigSchema['guide']
-  /** Stack component configuration */
-  stack: ConfigSchema['stack']
-  /** Spacer component configuration */
-  spacer: ConfigSchema['spacer']
-  /** Layout component configuration */
-  layout: ConfigSchema['layout']
-  /** Box component configuration */
-  box: ConfigSchema['box']
-  /** Padder component configuration */
-  padder: ConfigSchema['padder']
-}
-
-/**
- * Creates CSS variables from the configuration object.
- * These variables are used throughout the component library.
- */
-export const createCSSVariables = (
-  params: CSSVariablesParams
-): Record<string, string> => {
-  const { base, baseline, guide, stack, spacer, layout, box, padder } = params
-
-  return {
-    '--bkb': `${base}px`,
-
-    // Baseline Colors
-    '--bkbcl': baseline.colors.line,
-    '--bkbcf': baseline.colors.flat,
-
-    // Guide Colors
-    '--bkgcl': guide.colors.line,
-    '--bkgcp': guide.colors.pattern,
-    '--bkgca': guide.colors.auto,
-    '--bkgcf': guide.colors.fixed,
-
-    // Spacer Colors
-    '--bkscl': spacer.colors.line,
-    '--bkscf': spacer.colors.flat,
-    '--bksci': spacer.colors.text,
-
-    // Box Colors
-    '--bkxcl': box.colors.line,
-    '--bkxcf': box.colors.flat,
-    '--bkxci': box.colors.text,
-
-    // Flex Colors
-    '--bkkcl': stack.colors.line,
-    '--bkkcf': stack.colors.flat,
-    '--bkkci': stack.colors.text,
-
-    // Layout Colors
-    '--bklcl': layout.colors.line,
-    '--bklcf': layout.colors.flat,
-    '--bklci': layout.colors.text,
-
-    // Padder Color
-    '--bkpc': padder.color,
-  }
-}
-
-/** Parameters for merging configuration */
-type MergeConfigParams = {
-  /** Parent configuration to extend */
-  parentConfig: ConfigSchema
-  /** Base unit override */
-  base?: number
-  /** Baseline component overrides */
-  baseline?: Partial<ConfigSchema['baseline']>
-  /** Guide component overrides */
-  guide?: Partial<ConfigSchema['guide']>
-  /** Spacer component overrides */
-  spacer?: Partial<ConfigSchema['spacer']>
-  /** Box component overrides */
-  box?: Partial<ConfigSchema['box']>
-  /** Stack component overrides */
-  stack?: Partial<ConfigSchema['stack']>
-  /** Layout component overrides */
-  layout?: Partial<ConfigSchema['layout']>
-  /** Padder component overrides */
-  padder?: Partial<ConfigSchema['padder']>
-}
-
-/**
- * Merges parent config with overrides.
- * Creates a new config object without mutating the parent.
- */
-export const mergeConfig = (params: MergeConfigParams): ConfigSchema => {
-  const {
-    parentConfig,
-    base,
-    baseline,
-    guide,
-    spacer,
-    box,
-    stack,
-    layout,
-    padder,
-  } = params
-
-  return {
-    base: base ?? parentConfig.base,
-    baseline: { ...parentConfig.baseline, ...baseline },
-    guide: { ...parentConfig.guide, ...guide },
-    spacer: { ...parentConfig.spacer, ...spacer },
-    box: { ...parentConfig.box, ...box },
-    stack: { ...parentConfig.stack, ...stack },
-    layout: { ...parentConfig.layout, ...layout },
-    padder: { ...parentConfig.padder, ...padder },
-  }
-}
-
-/**
- * Configuration provider for baseline-kit components.
- *
- * @remarks
- * Config provides theme and debugging settings to all nested components.
- * It allows for:
- * - Global base unit configuration
- * - Component-specific color themes
- * - Debug mode control
- * - Visual style customization
- *
- * Configs can be nested to override settings for specific sections.
- *
- * @example
- * ```tsx
- * // Basic global configuration
- * <Config base={8}>
- *   <App />
- * </Config>
- *
- * // Component-specific overrides
- * <Config
- *   base={8}
- *   guide={{
- *     debugging: "visible",
- *     colors: {
- *       line: "rgba(255,0,0,0.2)",
- *       pattern: "rgba(0,0,255,0.2)"
- *     }
- *   }}
- * >
- *   <Layout>...</Layout>
- * </Config>
- *
- * // Nested configurations
- * <Config base={8}>
- *   <div>Uses 8px base</div>
- *   <Config base={4}>
- *     <div>Uses 4px base</div>
- *   </Config>
- * </Config>
- * ```
- */
-export function Config({
-  children,
-  base,
-  stack,
-  baseline,
-  guide,
-  layout,
-  spacer,
-  box,
-  padder,
-}: ConfigProps) {
-  const parentConfig = useDefaultConfig()
-
-  const value = React.useMemo(() => {
-    return mergeConfig({
-      parentConfig,
-      base,
-      baseline,
-      guide,
-      spacer,
-      box,
-      stack,
-      layout,
-      padder,
-    })
-  }, [parentConfig, base, baseline, guide, spacer, box, stack, layout, padder])
-
-  return <ConfigContext value={value}>{children}</ConfigContext>
-}
diff --git a/src/components/Config/defaults.ts b/src/components/Config/defaults.ts
deleted file mode 100644
index 1cc34b4d..00000000
--- a/src/components/Config/defaults.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * @file defaults.ts
- * @description Default theme and configuration values for baseline-kit
- * @module baseline-kit/components/Config
- */
-
-import type { ConfigSchema } from './Config'
-
-/**
- * CSS variable-based color configuration for Guide component.
- * Maps each guide variant to its theme color.
- */
-const GUIDE_COLORS = {
-  /** Color for single-line guides */
-  line: 'var(--bk-guide-color-line-theme)',
-  /** Color for pattern-based guides */
-  pattern: 'var(--bk-guide-color-pattern-theme)',
-  /** Color for auto-calculated guides */
-  auto: 'var(--bk-guide-color-auto-theme)',
-  /** Color for fixed-column guides */
-  fixed: 'var(--bk-guide-color-fixed-theme)',
-} as const
-
-/**
- * CSS variable-based color configuration for Baseline component.
- */
-const BASELINE_COLORS = {
-  /** Color for line variant */
-  line: 'var(--bk-baseline-color-line-theme)',
-  /** Color for flat/block variant */
-  flat: 'var(--bk-baseline-color-flat-theme)',
-} as const
-
-/**
- * CSS variable-based color configuration for Spacer component.
- */
-const SPACER_COLORS = {
-  /** Color for line-style spacers */
-  line: 'var(--bk-spacer-color-line-theme)',
-  /** Color for flat/block spacers */
-  flat: 'var(--bk-spacer-color-flat-theme)',
-  /** Color for measurement indicators */
-  text: 'var(--bk-spacer-color-text-theme)',
-} as const
-
-/**
- * CSS variable-based color configuration for Box component.
- */
-const BOX_COLORS = {
-  /** Border color for debug outline */
-  line: 'var(--bk-box-color-line-theme)',
-  /** Background color for debug mode */
-  flat: 'var(--bk-box-color-flat-theme)',
-  /** Color for measurement indicators */
-  text: 'var(--bk-box-color-text-theme)',
-} as const
-
-/**
- * CSS variable-based color configuration for Stack/Flex component.
- */
-const STACK_COLORS = {
-  /** Border color for debug outline */
-  line: 'var(--bk-stack-color-line-theme)',
-  /** Background color for debug mode */
-  flat: 'var(--bk-stack-color-flat-theme)',
-  /** Color for measurement indicators */
-  text: 'var(--bk-stack-color-text-theme)',
-} as const
-
-/**
- * CSS variable-based color configuration for Layout component.
- */
-const LAYOUT_COLORS = {
-  /** Border color for debug outline */
-  line: 'var(--bk-layout-color-line-theme)',
-  /** Background color for debug mode */
-  flat: 'var(--bk-layout-color-flat-theme)',
-  /** Color for measurement indicators */
-  text: 'var(--bk-layout-color-text-theme)',
-} as const
-
-/** CSS variable for Padder component color */
-const PADDER_COLOR = 'var(--bk-padder-color-theme)'
-
-/**
- * Default configuration for baseline-kit.
- *
- * @remarks
- * Provides the base configuration for all components including:
- * - Base unit for spacing calculations (8px default)
- * - Default component variants
- * - Initial debugging modes
- * - Theme color assignments
- *
- * Each component section includes:
- * - Visual variant selection (where applicable)
- * - Debugging mode setting
- * - Color theme assignments
- *
- * The configuration is marked as const to ensure type safety
- * and prevent accidental modifications.
- */
-export const DEFAULT_CONFIG: ConfigSchema = {
-  /** Base unit for spacing calculations (in pixels) */
-  base: 8,
-
-  /** Baseline grid configuration */
-  baseline: {
-    variant: 'line',
-    debugging: 'hidden',
-    colors: BASELINE_COLORS,
-  },
-
-  /** Guide overlay configuration */
-  guide: {
-    variant: 'line',
-    debugging: 'hidden',
-    colors: GUIDE_COLORS,
-  },
-
-  /** Spacer component configuration */
-  spacer: {
-    variant: 'line',
-    debugging: 'hidden',
-    colors: SPACER_COLORS,
-  },
-
-  /** Box component configuration */
-  box: {
-    debugging: 'hidden',
-    colors: BOX_COLORS,
-  },
-
-  /** Stack/Flex component configuration */
-  stack: {
-    debugging: 'hidden',
-    colors: STACK_COLORS,
-  },
-
-  /** Layout component configuration */
-  layout: {
-    debugging: 'hidden',
-    colors: LAYOUT_COLORS,
-  },
-
-  /** Padder component configuration */
-  padder: {
-    debugging: 'hidden',
-    color: PADDER_COLOR,
-  },
-} as const
diff --git a/src/components/Config/index.ts b/src/components/Config/index.ts
deleted file mode 100644
index e752c620..00000000
--- a/src/components/Config/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @file Config Component Entry (components/Config/index.ts)
- * @description Theme and configuration provider
- * @module baseline-kit/components/Config
- *
- * @remarks
- * Central configuration system for baseline-kit, managing
- * theme values and default settings.
- */
-
-export * from './Config'
-export { DEFAULT_CONFIG } from './defaults'
diff --git a/src/components/Guide/Guide.tsx b/src/components/Guide/Guide.tsx
deleted file mode 100644
index 1475077c..00000000
--- a/src/components/Guide/Guide.tsx
+++ /dev/null
@@ -1,430 +0,0 @@
-import * as React from 'react'
-import { ComponentsProps } from '@components'
-import { useConfig, useDebug, useGuide, useMeasure } from '@hooks'
-import {
-  formatValue,
-  mergeClasses,
-  mergeStyles,
-  createStyleOverride,
-  ClientOnly,
-} from '@utils'
-import { AutoConfig, FixedConfig, LineConfig, PatternConfig } from './types'
-import type { GuideVariant } from '../types'
-import styles from './styles.module.css'
-
-/** Merged configuration types that support various grid layout strategies */
-export type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig
-
-export type GuideProps = {
-  /** Controls horizontal alignment of columns within the container */
-  align?: React.CSSProperties['justifyContent']
-  /** Visual style of the guide */
-  variant?: GuideVariant
-  /** Number of columns (for fixed/auto variants) */
-  columns?: number | readonly (string | number | undefined | 'auto')[]
-  /** Column width (for fixed variant) */
-  columnWidth?: React.CSSProperties['width']
-  /** Maximum width of the guide */
-  maxWidth?: React.CSSProperties['maxWidth']
-  /** Color override for guide lines */
-  color?: React.CSSProperties['color']
-  /** Content to render inside the guide */
-  children?: React.ReactNode
-  /** Gap between columns */
-  gap?: number
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-} & ComponentsProps &
-  Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>
-
-/** Parameters for creating a grid configuration */
-type GridConfigParams = {
-  variant: GuideVariant
-  base: number
-  gap: number
-  columns?: number | readonly (string | number | undefined | 'auto')[]
-  columnWidth?: React.CSSProperties['width']
-}
-
-/**
- * Creates a grid configuration based on the specified variant and parameters
- * Internal helper function for Guide component
- */
-const createGridConfig = (
-  params: GridConfigParams
-): PatternConfig | AutoConfig | FixedConfig | LineConfig => {
-  const { variant, base, gap, columns, columnWidth } = params
-
-  switch (variant) {
-    case 'line':
-      return {
-        variant: 'line',
-        gap,
-        base,
-      } as LineConfig
-
-    case 'pattern':
-      if (columns && Array.isArray(columns)) {
-        return {
-          variant: 'pattern',
-          columns: columns as readonly (string | number)[],
-          gap,
-          base,
-        } as PatternConfig
-      }
-      break
-
-    case 'fixed':
-      if (columns !== undefined) {
-        const parsedColumns =
-          typeof columns === 'number' ? columns : parseInt(String(columns), 10)
-        return {
-          variant: 'fixed',
-          columns: !isNaN(parsedColumns) ? parsedColumns : 12,
-          columnWidth: columnWidth || '60px',
-          gap,
-          base,
-        } as FixedConfig
-      }
-      break
-  }
-
-  // Default to auto columns if no valid configuration was created
-  return {
-    variant: 'auto',
-    columnWidth: columnWidth || '1fr',
-    gap,
-    base,
-  } as AutoConfig
-}
-
-/** Creates default guide styles */
-const createDefaultGuideStyles = (
-  base: number,
-  lineColor: string
-): Record<string, string> => ({
-  '--bkgw': 'auto',
-  '--bkgh': 'auto',
-  '--bkgmw': 'none',
-  '--bkgcw': '60px',
-  '--bkggw': '24px',
-  '--bkgc': '12',
-  '--bkgb': `${base}px`,
-  '--bkgcl': lineColor,
-  '--bkgg': '0',
-})
-
-/**
- * A developer tool component that provides visual grid overlays for alignment.
- *
- * @remarks
- * Guide renders a configurable grid overlay that helps visualize:
- * - Column layouts and spacing
- * - Content alignment
- * - Layout patterns
- *
- * The component supports multiple variants:
- * - "line": Simple evenly-spaced vertical lines
- * - "pattern": Custom repeating column width patterns
- * - "fixed": Fixed number of equal or custom-width columns
- * - "auto": Dynamically calculated columns based on container width
- *
- * @example
- * ```tsx
- * // Basic column guide
- * <Guide
- *   variant="line"
- *   gap={8}
- *   debugging="visible"
- * />
- *
- * // Custom column pattern
- * <Guide
- *   variant="pattern"
- *   columns={['100px', '1fr', '2fr']}
- *   gap={16}
- *   align="center"
- *   debugging="visible"
- * />
- *
- * // Fixed columns with custom width
- * <Guide
- *   variant="fixed"
- *   columns={12}
- *   columnWidth="60px"
- *   gap={8}
- *   debugging="visible"
- * />
- * ```
- */
-export const Guide = React.memo(function Guide({
-  className,
-  debugging,
-  style,
-  variant: variantProp,
-  align = 'center',
-  gap: gapProp,
-  height,
-  width,
-  columns,
-  columnWidth,
-  maxWidth,
-  color,
-  children,
-  ssrMode = false,
-  ...props
-}: GuideProps) {
-  const config = useConfig('guide')
-  const variant = variantProp ?? config.variant
-  const gap = typeof gapProp === 'number' ? gapProp : 0
-  const { isShown } = useDebug(debugging, config.debugging)
-
-  // If debugging isn't enabled, render a hidden element
-  // This ensures tests can find the element even when hidden
-  if (!isShown) {
-    return (
-      <div
-        className={mergeClasses(styles.g, styles.h, className)}
-        style={style}
-        data-testid="guide"
-        data-variant={variant}
-        aria-hidden="true"
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  // Create a simple SSR fallback with the expected dimensions
-  const ssrFallback = (
-    <div
-      className={mergeClasses(styles.g, styles.h, styles.ssr, className)}
-      style={{
-        width: width || '100%',
-        height: height || '100%',
-        maxWidth: maxWidth || 'none',
-        ...style,
-      }}
-      data-testid="guide"
-      data-variant={variant}
-      aria-hidden="true"
-    >
-      {children}
-    </div>
-  )
-
-  // Wrap the actual implementation in ClientOnly
-  return (
-    <ClientOnly fallback={ssrFallback}>
-      <GuideImpl
-        className={className}
-        debugging={debugging}
-        style={style}
-        variant={variant}
-        align={align}
-        gap={gap}
-        height={height}
-        width={width}
-        columns={columns}
-        columnWidth={columnWidth}
-        maxWidth={maxWidth}
-        color={color}
-        ssrMode={ssrMode}
-        {...props}
-      >
-        {children}
-      </GuideImpl>
-    </ClientOnly>
-  )
-})
-
-// Implementation component that only renders on the client side
-const GuideImpl = React.memo(function GuideImpl({
-  className,
-  debugging,
-  style,
-  variant,
-  align = 'center',
-  gap,
-  height,
-  width,
-  columns,
-  columnWidth,
-  maxWidth,
-  color,
-  children,
-  ssrMode: _ssrMode = false,
-  ...props
-}: GuideProps) {
-  const config = useConfig('guide')
-  const { isShown } = useDebug(debugging, config.debugging)
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-
-  // Measure the container dimensions
-  const {
-    width: containerWidth,
-    height: containerHeight,
-    refresh, // Keep the refresh function available for dynamic updates
-  } = useMeasure(containerRef)
-
-  // Effect for handling window resize events
-  React.useEffect(() => {
-    const handleResize = () => {
-      // Trigger a remeasurement when window size changes
-      refresh()
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [refresh])
-
-  // Create guide configuration based on variant
-  const gridConfig = React.useMemo(() => {
-    // Ensure we have valid values for the grid configuration
-    const safeVariant = variant as GuideVariant
-    const safeGap = typeof gap === 'number' ? gap : 0
-
-    return createGridConfig({
-      variant: safeVariant,
-      base: config.base,
-      gap: safeGap,
-      columns,
-      columnWidth,
-    })
-  }, [variant, config.base, gap, columns, columnWidth])
-
-  const { template, columnsCount, calculatedGap } = useGuide(
-    containerRef,
-    gridConfig
-  )
-
-  const defaultStyles = React.useMemo(
-    () => createDefaultGuideStyles(config.base, config.colors.line),
-    [config.base, config.colors.line]
-  )
-
-  const containerStyles = React.useMemo(() => {
-    // Process dimension values
-    const widthValue = formatValue(width || containerWidth || 'auto')
-    const heightValue = formatValue(height || containerHeight || 'auto')
-    const maxWidthValue = formatValue(maxWidth || 'none')
-    const columnWidthValue = formatValue(columnWidth || '60px')
-
-    // Define dimensions that should be skipped when set to auto
-    const autoDimensions = ['--bkgw', '--bkgh']
-
-    // Create custom styles with conditional overrides
-    const customStyles = {
-      ...createStyleOverride({
-        key: '--bkgw',
-        value: widthValue,
-        defaultStyles,
-        skipDimensions: { auto: autoDimensions },
-      }),
-      ...createStyleOverride({
-        key: '--bkgh',
-        value: heightValue,
-        defaultStyles,
-        skipDimensions: { auto: autoDimensions },
-      }),
-      ...createStyleOverride({
-        key: '--bkgmw',
-        value: maxWidthValue,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgcw',
-        value: columnWidthValue,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgc',
-        value: `${columnsCount}`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgb',
-        value: `0`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgcl',
-        value: color ?? config.colors.line,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgg',
-        value: `${calculatedGap}px`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgj',
-        value: align || 'center',
-        defaultStyles,
-      }),
-      ...(template && template !== 'none' ? { '--bkgt': template } : {}),
-      // Add grid template if available
-      ...(template && template !== 'none'
-        ? { gridTemplateColumns: template }
-        : {}),
-    } as React.CSSProperties
-
-    return mergeStyles(customStyles, style)
-  }, [
-    width,
-    height,
-    maxWidth,
-    columnWidth,
-    columnsCount,
-    color,
-    template,
-    calculatedGap,
-    containerWidth,
-    containerHeight,
-    config.colors.line,
-    defaultStyles,
-    style,
-    align,
-  ])
-
-  return (
-    <div
-      ref={containerRef}
-      data-testid="guide"
-      aria-hidden="true"
-      className={mergeClasses(
-        styles.gde,
-        className,
-        isShown ? styles.v : styles.h,
-        variant === 'line' && styles.line
-      )}
-      data-variant={variant}
-      style={containerStyles}
-      {...props}
-    >
-      {isShown && (
-        <div className={styles.cols} data-variant={variant}>
-          {Array.from({ length: columnsCount }, (_, i) => {
-            const colColor =
-              (variant && variant in config.colors
-                ? config.colors[variant as keyof typeof config.colors]
-                : undefined) ?? config.colors.line
-            return (
-              <div
-                key={i}
-                className={styles.col}
-                data-column-index={i}
-                data-variant={variant}
-                style={{ backgroundColor: colColor }}
-              />
-            )
-          })}
-        </div>
-      )}
-      {children}
-    </div>
-  )
-})
diff --git a/src/components/Guide/index.ts b/src/components/Guide/index.ts
deleted file mode 100644
index 68c8da5b..00000000
--- a/src/components/Guide/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file Guide Component Entry (components/Guide/index.ts)
- * @description Visual grid overlay system for alignment
- * @module baseline-kit/components/Guide
- */
-
-export * from './Guide'
diff --git a/src/components/Guide/styles.module.css b/src/components/Guide/styles.module.css
deleted file mode 100644
index d0019214..00000000
--- a/src/components/Guide/styles.module.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.gde {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  padding: var(--bkgpb) var(--bkgpi);
-}
-
-.line {
-  left: -0.5px; /* Alignment correction for line variant */
-}
-
-.cols {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  column-gap: var(--bkgg);
-  grid-template-rows: 1fr;
-  grid-template-columns: var(--bkgt);
-  justify-content: var(--bkgj);
-  width: var(--bkwf);
-  height: var(--bkhf);
-  overflow: hidden;
-}
-
-.col {
-  min-width: 0;
-  width: var(--bkwf);
-  height: var(--bkhf);
-}
-
-/* Variant-specific styles */
-.col[data-variant='line'] {
-  width: 1px;
-  background-color: var(--bkgcl);
-}
-
-.col[data-variant='pattern'] {
-  background-color: var(--bkgcp);
-}
-
-.col[data-variant='auto'] {
-  background-color: var(--bkgca);
-  overflow: hidden;
-}
-
-.col[data-variant='fixed'] {
-  background-color: var(--bkgcf);
-}
-
-/* Style for SSR rendering */
-.ssr {
-  box-sizing: border-box;
-  display: grid;
-  position: relative;
-  z-index: 1;
-  pointer-events: none;
-  min-height: 100px; /* Ensures a minimum height during SSR */
-}
diff --git a/src/components/Guide/types.ts b/src/components/Guide/types.ts
deleted file mode 100644
index 3442f0d1..00000000
--- a/src/components/Guide/types.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * @file types.ts
- * @description Type definitions for Guide component configurations
- * @module baseline-kit/components/Guide/types
- */
-
-import * as React from 'react'
-import { GuideColumnsPattern } from '../types'
-
-/**
- * Base configuration shared by all guide variants.
- *
- * @example
- * ```ts
- * const baseConfig: BaseGuideConfig = {
- *   gap: 2,     // 2px gap
- *   base: 8     // 8px base unit
- * }
- * ```
- */
-type BaseGuideConfig = {
-  /** Gap between columnms. */
-  gap?: React.CSSProperties['gap']
-
-  /**
-   * Base unit in pixels for spacing calculations.
-   * Typically inherited from theme configuration.
-   */
-  base?: number
-}
-
-/**
- * Pattern-based grid configuration.
- * Defines repeating column width patterns.
- *
- * @example
- * ```ts
- * // Three-column pattern: 100px | 200px | 100px
- * const pattern: PatternConfig = {
- *   variant: 'pattern',
- *   columns: [100, '200px', '1fr'],
- *   gap: 2
- * }
- *
- * // Responsive pattern with mixed units
- * const responsive: PatternConfig = {
- *   variant: 'pattern',
- *   columns: ['20%', '1fr', '200px'],
- *   gap: 2
- * }
- * ```
- */
-export type PatternConfig = BaseGuideConfig & {
-  /** Identifies this as a pattern-based configuration */
-  variant: 'pattern'
-  /** Array of column widths that repeat */
-  columns: GuideColumnsPattern
-  /** Not applicable in pattern mode */
-  columnWidth?: never
-}
-
-/**
- * Fixed-column grid configuration.
- * Specifies exact number of equal-width columns.
- *
- * @example
- * ```ts
- * // Basic 12-column grid
- * const grid: FixedConfig = {
- *   variant: 'fixed',
- *   columns: 12,
- *   gap: 2
- * }
- *
- * // Fixed-width columns
- * const fixed: FixedConfig = {
- *   variant: 'fixed',
- *   columns: 6,
- *   columnWidth: '160px',
- *   gap: 2
- * }
- * ```
- */
-export type FixedConfig = BaseGuideConfig & {
-  /** Identifies this as a fixed-column configuration */
-  variant: 'fixed'
-  /** Number of columns to create */
-  columns: number
-  /** Optional fixed width for all columns */
-  columnWidth?: React.CSSProperties['width']
-}
-
-/**
- * Auto-calculated grid configuration.
- * Creates as many columns as will fit given a column width.
- *
- * @example
- * ```ts
- * // Auto-fill columns of 200px
- * const auto: AutoConfig = {
- *   variant: 'auto',
- *   columnWidth: '200px',
- *   gap: 2
- * }
- *
- * // Responsive columns with minimum width
- * const responsive: AutoConfig = {
- *   variant: 'auto',
- *   columnWidth: 'minmax(200px, 1fr)',
- *   gap: 2
- * }
- * ```
- */
-export type AutoConfig = BaseGuideConfig & {
-  /** Identifies this as an auto-calculated configuration */
-  variant: 'auto'
-  /** Desired width for each column */
-  columnWidth: React.CSSProperties['columnWidth']
-  /** Not applicable in auto mode */
-  columns?: never
-}
-
-/**
- * Simple line-based guide configuration.
- * Creates evenly-spaced vertical lines.
- *
- * @example
- * ```ts
- * // Basic line guide
- * const lines: LineConfig = {
- *   variant: 'line',
- *   gap: 1
- * }
- *
- * // Custom-spaced lines
- * const wideLines: LineConfig = {
- *   variant: 'line',
- *   gap: 4,
- *   base: 8
- * }
- * ```
- */
-export type LineConfig = BaseGuideConfig & {
-  /** Optional variant identifier (defaults to 'line') */
-  variant?: 'line'
-  /** Not applicable in line mode */
-  columns?: never
-  /** Not applicable in line mode */
-  columnWidth?: never
-}
diff --git a/src/components/Guide/validation.ts b/src/components/Guide/validation.ts
deleted file mode 100644
index 2236feba..00000000
--- a/src/components/Guide/validation.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * @file validation.ts
- * @description Validation utilities for Guide component configurations
- * @module baseline-kit/components/Guide/validation
- */
-
-import {
-  GRID_ALIGNMENTS,
-  GridAlignment,
-  GuideColumnsPattern,
-  GuideColumnValue,
-  GuideConfig,
-} from '@components'
-import { ABSOLUTE_UNIT_CONVERSIONS, RELATIVE_UNITS } from '@utils'
-
-/**
- * Regular expression for valid CSS unit values.
- * Matches numeric values with supported CSS units.
- */
-const UNIT_PATTERN =
-  /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/
-
-/**
- * Validates individual grid column values.
- *
- * @example
- * ```ts
- * isValidGuideColumnValue(100)     // true
- * isValidGuideColumnValue('100px') // true
- * isValidGuideColumnValue('auto')  // true
- * isValidGuideColumnValue('foo')   // false
- * ```
- */
-export const isValidGuideColumnValue = (
-  value: unknown
-): value is GuideColumnValue => {
-  if (typeof value === 'number') return Number.isFinite(value) && value >= 0
-  if (typeof value !== 'string') return false
-  return value === 'auto' || value === '100%' || UNIT_PATTERN.test(value)
-}
-
-/**
- * Validates an array of column values as a grid pattern.
- *
- * @example
- * ```ts
- * isValidGuidePattern(['100px', '1fr'])     // true
- * isValidGuidePattern([100, 200])           // true
- * isValidGuidePattern(['invalid'])          // false
- * isValidGuidePattern([])                   // false
- * ```
- */
-export const isValidGuidePattern = (
-  pattern: unknown
-): pattern is GuideColumnsPattern =>
-  Array.isArray(pattern) &&
-  pattern.length > 0 &&
-  pattern.every(isValidGuideColumnValue)
-
-/**
- * Validates CSS grid values against supported units.
- *
- * @example
- * ```ts
- * isGuideValue('100px')   // true
- * isGuideValue('2rem')    // true
- * isGuideValue('foo')     // false
- * ```
- */
-export const isGuideValue = (value: unknown) => {
-  const CSS_UNITS = [
-    ...Object.keys(ABSOLUTE_UNIT_CONVERSIONS),
-    ...RELATIVE_UNITS,
-  ]
-  return (
-    typeof value === 'number' ||
-    (typeof value === 'string' &&
-      CSS_UNITS.some((unit) => value.endsWith(unit)))
-  )
-}
-
-/**
- * Validates grid alignment values.
- *
- * @example
- * ```ts
- * isGuideAlignment('start')   // true
- * isGuideAlignment('center')  // true
- * isGuideAlignment('foo')     // false
- * ```
- */
-export const isGuideAlignment = (value: unknown): value is GridAlignment =>
-  typeof value === 'string' && GRID_ALIGNMENTS.includes(value as GridAlignment)
-
-/**
- * Type guard for object values.
- */
-const isObject = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null
-
-/**
- * Validates line-based guide configurations.
- *
- * @example
- * ```ts
- * isGuideLineConfig({ variant: 'line' })           // true
- * isGuideLineConfig({ variant: 'pattern' })        // false
- * ```
- */
-export const isGuideLineConfig = (config: unknown): config is GuideConfig =>
-  isObject(config) && config.variant === 'line'
-
-/**
- * Validates column-based guide configurations.
- *
- * @example
- * ```ts
- * isGuideColumnConfig({ columns: 12 })             // true
- * isGuideColumnConfig({ variant: 'line' })         // false
- * ```
- */
-export const isGuideColumnConfig = (config: unknown): config is GuideConfig =>
-  isObject(config) && 'columns' in config && !('variant' in config)
-
-/**
- * Validates auto-calculated guide configurations.
- *
- * @example
- * ```ts
- * isAutoCalculatedGuide({ columnWidth: '200px' })  // true
- * isAutoCalculatedGuide({ columns: 12 })           // false
- * ```
- */
-export const isAutoCalculatedGuide = (config: unknown): config is GuideConfig =>
-  isObject(config) &&
-  'columnWidth' in config &&
-  !('variant' in config) &&
-  !('columns' in config)
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
deleted file mode 100644
index 23927fd0..00000000
--- a/src/components/Layout/Layout.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import * as React from 'react'
-import type { Gaps } from '@components'
-import { useConfig, useDebug, useBaseline } from '@hooks'
-import {
-  mergeStyles,
-  mergeClasses,
-  parsePadding,
-  formatValue,
-  createStyleOverride,
-  hydratedValue,
-} from '@utils'
-import { Config } from '../Config'
-import { Padder } from '../Padder'
-import { Spacer } from '../Spacer'
-import { ComponentsProps, Variant } from '../types'
-import styles from './styles.module.css'
-
-// Import the IndicatorNode type from Spacer props
-type IndicatorNode = NonNullable<
-  React.ComponentProps<typeof Spacer>['indicatorNode']
->
-
-export type LayoutProps = {
-  /**
-   * Grid column definition. Supports:
-   * - Number: Equal columns (3 → repeat(3, 1fr))
-   * - String: Raw template ("1fr auto 200px")
-   * - Array: Mixed values ([100, '1fr'] → "100px 1fr")
-   */
-  columns?: number | string | Array<number | string>
-  /** Grid row definition (same format as columns) */
-  rows?: number | string | Array<number | string>
-  /** Controls item alignment along column axis */
-  justifyItems?: React.CSSProperties['justifyItems']
-  /** Controls item alignment along row axis */
-  alignItems?: React.CSSProperties['alignItems']
-  /** Controls content distribution along row axis */
-  justifyContent?: React.CSSProperties['justifyContent']
-  /** Controls content distribution along column axis */
-  alignContent?: React.CSSProperties['alignContent']
-  /** Custom measurement indicator renderer */
-  indicatorNode?: IndicatorNode
-  /** Visual style in debug mode */
-  variant?: Variant
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-  /** Container width (defaults to "auto") */
-  width?: React.CSSProperties['width']
-  /** Container height (defaults to "auto") */
-  height?: React.CSSProperties['height']
-  children?: React.ReactNode
-} & ComponentsProps &
-  Gaps
-
-/** Creates default layout styles with theme colors */
-const createDefaultLayoutStyles = (colors: {
-  line: string
-  flat: string
-  text: string
-}): Record<string, string> => ({
-  '--bklw': 'auto',
-  '--bklh': 'auto',
-  '--bklcl': colors.line,
-  '--bklcf': colors.flat,
-  '--bklci': colors.text,
-})
-
-/** Parses grid template definitions into CSS grid-template values. */
-const getGridTemplate = (
-  prop?: number | string | Array<number | string>
-): string => {
-  if (typeof prop === 'number') return `repeat(${prop}, 1fr)`
-  if (typeof prop === 'string') return prop
-  if (Array.isArray(prop)) {
-    return prop.map((p) => (typeof p === 'number' ? `${p}px` : p)).join(' ')
-  }
-  return 'repeat(auto-fill, minmax(100px, 1fr))'
-}
-
-/** Creates grid gap styles */
-const createGridGapStyles = (
-  gap?: React.CSSProperties['gap'] | number,
-  rowGap?: React.CSSProperties['rowGap'] | number,
-  columnGap?: React.CSSProperties['columnGap'] | number
-): Record<string, string> => {
-  const styles: Record<string, string> = {}
-
-  if (gap !== undefined) {
-    styles.gap = formatValue(gap)
-  }
-  if (rowGap !== undefined) {
-    styles.rowGap = formatValue(rowGap)
-  }
-  if (columnGap !== undefined) {
-    styles.columnGap = formatValue(columnGap)
-  }
-
-  return styles
-}
-
-/**
- * A grid-based layout component with baseline alignment and responsive columns.
- *
- * @remarks
- * Layout provides a CSS Grid container that:
- * - Supports flexible column definitions
- * - Maintains baseline grid alignment
- * - Includes gap management
- * - Offers comprehensive alignment controls
- * - Provides debug overlays for visual verification
- *
- * When no explicit dimensions are provided, Layout defaults to "auto"
- * for both width and height.
- *
- * @example
- * ```tsx
- * // Basic equal columns
- * <Layout columns={3} gap={16}>
- *   <div>Column 1</div>
- *   <div>Column 2</div>
- *   <div>Column 3</div>
- * </Layout>
- *
- * // Mixed column widths with alignment
- * <Layout
- *   columns={['200px', '1fr', '2fr']}
- *   gap={24}
- *   alignItems="center"
- *   justifyContent="space-between"
- * >
- *   <div>Fixed</div>
- *   <div>Flexible</div>
- *   <div>Double width</div>
- * </Layout>
- * ```
- */
-export const Layout = React.memo(function Layout({
-  alignContent,
-  alignItems,
-  children,
-  className,
-  columns = 'repeat(auto-fill, minmax(100px, 1fr))',
-  columnGap,
-  debugging: debuggingProp,
-  gap,
-  height,
-  indicatorNode,
-  justifyContent,
-  justifyItems,
-  rowGap,
-  rows,
-  style,
-  variant,
-  width,
-  ssrMode = false,
-  ...spacingProps
-}: LayoutProps) {
-  const config = useConfig('layout')
-  const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
-
-  // Add hydration state tracking
-  const [isHydrated, setIsHydrated] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
-
-  const layoutRef = React.useRef<HTMLDivElement>(null)
-
-  const initialPadding = React.useMemo(
-    () => parsePadding(spacingProps),
-    [spacingProps]
-  )
-
-  // Get padding calculation from useBaseline
-  const baselinePadding = useBaseline(layoutRef, {
-    base: config.base,
-    snapping: 'height',
-    spacing: initialPadding,
-    warnOnMisalignment: true,
-  })
-
-  // Create stable initial padding for SSR
-  const stablePadding = {
-    padding: {
-      top: initialPadding.top || 0,
-      right: initialPadding.right || 0,
-      bottom: initialPadding.bottom || 0,
-      left: initialPadding.left || 0,
-    },
-  }
-
-  // Use stable padding during SSR and initial render, then switch to dynamic padding
-  const { padding } = hydratedValue(
-    isHydrated && !ssrMode,
-    stablePadding,
-    baselinePadding
-  )
-
-  const gridTemplateColumns = React.useMemo(
-    () => getGridTemplate(columns),
-    [columns]
-  )
-
-  const gridTemplateRows = React.useMemo(
-    () => (rows ? getGridTemplate(rows) : 'auto'),
-    [rows]
-  )
-
-  const defaultLayoutStyles = React.useMemo(
-    () => createDefaultLayoutStyles(config.colors),
-    [config.colors]
-  )
-
-  const gridGapStyles = React.useMemo(
-    () => createGridGapStyles(gap, rowGap, columnGap),
-    [gap, rowGap, columnGap]
-  )
-
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(width || 'auto')
-    const heightValue = formatValue(height || 'auto')
-
-    // Define dimensions that should be skipped when set to auto
-    const autoDimensions = ['--bklw', '--bklh']
-
-    return mergeStyles(
-      {
-        // Theme overrides
-        ...createStyleOverride({
-          key: '--bklw',
-          value: widthValue,
-          defaultStyles: defaultLayoutStyles,
-          skipDimensions: { auto: autoDimensions },
-        }),
-        ...createStyleOverride({
-          key: '--bklh',
-          value: heightValue,
-          defaultStyles: defaultLayoutStyles,
-          skipDimensions: { auto: autoDimensions },
-        }),
-        ...createStyleOverride({
-          key: '--bklcl',
-          value: config.colors.line,
-          defaultStyles: defaultLayoutStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bklcf',
-          value: config.colors.flat,
-          defaultStyles: defaultLayoutStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bklci',
-          value: config.colors.text,
-          defaultStyles: defaultLayoutStyles,
-        }),
-
-        // Grid properties - only inject if different from defaults
-        ...(gridTemplateColumns !== 'repeat(auto-fill, minmax(100px, 1fr))' && {
-          '--bklgtc': gridTemplateColumns,
-        }),
-        ...(gridTemplateRows !== 'auto' && { '--bklgtr': gridTemplateRows }),
-        ...(justifyItems && { '--bklji': justifyItems }),
-        ...(alignItems && { '--bklai': alignItems }),
-        ...(justifyContent && { '--bkljc': justifyContent }),
-        ...(alignContent && { '--bklac': alignContent }),
-
-        // Include gap styles
-        ...gridGapStyles,
-      } as React.CSSProperties,
-      style
-    )
-  }, [
-    gridTemplateColumns,
-    gridTemplateRows,
-    justifyItems,
-    alignItems,
-    justifyContent,
-    alignContent,
-    width,
-    height,
-    config.colors,
-    defaultLayoutStyles,
-    style,
-    gridGapStyles,
-  ])
-
-  return (
-    <Config spacer={{ variant: variant ?? 'line' }}>
-      <Padder
-        ref={layoutRef}
-        className={isShown ? styles.v : ''}
-        block={[padding.top, padding.bottom]}
-        {...(indicatorNode ? { indicatorNode } : {})}
-        inline={[padding.left, padding.right]}
-        debugging={debugging}
-        width={width}
-        height={height}
-        ssrMode={ssrMode}
-      >
-        <div
-          data-testid="layout"
-          className={mergeClasses(className, styles.lay)}
-          style={containerStyles}
-          {...(spacingProps && Object.keys(spacingProps).length > 0
-            ? Object.fromEntries(
-                Object.entries(spacingProps).filter(
-                  ([key]) => key !== 'ssrMode'
-                )
-              )
-            : {})}
-        >
-          {children}
-        </div>
-      </Padder>
-    </Config>
-  )
-})
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
deleted file mode 100644
index 941eff95..00000000
--- a/src/components/Layout/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file Layout Component Entry (components/Layout/index.ts)
- * @description Grid-based layout component with baseline alignment
- * @module baseline-kit/components/Layout
- *
- * @remarks
- * Provides CSS Grid functionality with built-in baseline grid
- * alignment and debugging features.
- */
-
-export * from './Layout'
diff --git a/src/components/Layout/styles.module.css b/src/components/Layout/styles.module.css
deleted file mode 100644
index 0e2ddefc..00000000
--- a/src/components/Layout/styles.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.lay {
-  display: grid;
-  position: relative;
-  box-sizing: border-box;
-  width: var(--bklw, var(--bk-width-default, auto));
-  height: var(--bklh, var(--bk-height-default, auto));
-  grid-template-columns: var(
-    --bklgtc,
-    repeat(auto-fill, minmax(100px, 1fr))
-  );
-  grid-template-rows: var(--bklgtr, auto);
-  gap: var(--bklg, 0);
-  column-gap: var(--bklcg, 0);
-  row-gap: var(--bklrg, 0);
-  justify-items: var(--bklji, stretch);
-  align-items: var(--bklai, stretch);
-  justify-content: var(--bkljc, start);
-  align-content: var(--bklac, start);
-}
-
-.lay .line::after,
-.stk .line::after {
-  border: none;
-}
-
-.v::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border: 1px solid
-    var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6)));
-  pointer-events: none;
-  z-index: var(--bkzio, 2);
-}
diff --git a/src/components/Padder/Padder.tsx b/src/components/Padder/Padder.tsx
deleted file mode 100644
index 136d07f0..00000000
--- a/src/components/Padder/Padder.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import * as React from 'react'
-import { useConfig, useDebug, useBaseline } from '@hooks'
-import {
-  mergeClasses,
-  mergeStyles,
-  parsePadding,
-  mergeRefs,
-  formatValue,
-  hydratedValue,
-} from '@utils'
-import { ComponentsProps, Variant } from '../types'
-import { Spacer, IndicatorNode } from '../Spacer'
-import { DebuggingMode } from '@/components'
-import styles from './styles.module.css'
-
-type RenderSpacerFn = (
-  width: React.CSSProperties['width'],
-  height: React.CSSProperties['height']
-) => React.ReactNode
-
-type PaddingStyles = {
-  paddingBlock?: string
-  paddingInline?: string
-  [key: string]: string | undefined
-}
-
-export type PadderProps = {
-  /** Render function for custom measurement indicators */
-  indicatorNode?: IndicatorNode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-  children?: React.ReactNode
-} & ComponentsProps
-
-/** Creates default container styles for Padder */
-const createPadderContainerStyles = (
-  width: React.CSSProperties['width'],
-  height: React.CSSProperties['height'],
-  base: number,
-  color: string
-): Record<string, string> => {
-  const stylesObj: Record<string, string> = {}
-
-  // Only inject width/height if they differ from defaults
-  if (width !== 'fit-content') {
-    stylesObj['--bkpw'] = formatValue(width || 'fit-content')
-  }
-  if (height !== 'fit-content') {
-    stylesObj['--bkph'] = formatValue(height || 'fit-content')
-  }
-
-  // Always set base and color
-  stylesObj['--bkpb'] = `${base}px`
-  stylesObj['--bkpc'] = color
-
-  return stylesObj
-}
-
-/** Creates direct padding styles when spacers are disabled */
-const createDirectPaddingStyles = (
-  enableSpacers: boolean,
-  padding: {
-    top: number
-    right: number
-    bottom: number
-    left: number
-  }
-): PaddingStyles => {
-  const { top, right, bottom, left } = padding
-  const stylesObj: PaddingStyles = {}
-
-  // When spacers are disabled (i.e. debugging === "none"), add direct padding styles
-  if (!enableSpacers) {
-    if (top > 0 || bottom > 0) {
-      stylesObj.paddingBlock = `${top}px ${bottom}px`
-    }
-    if (left > 0 || right > 0) {
-      stylesObj.paddingInline = `${left}px ${right}px`
-    }
-  }
-
-  return stylesObj
-}
-
-/** Creates a render function for spacers */
-const createRenderSpacerFn = (
-  variant: Variant | undefined,
-  debugging: DebuggingMode | undefined,
-  indicatorNode?: IndicatorNode
-): RenderSpacerFn => {
-  // Default to 'line' if variant is undefined
-  const safeVariant = variant || 'line'
-  // Default to 'none' if debugging is undefined
-  const safeDebugging = debugging || 'none'
-
-  const SpacerElement = (
-    widthVal: React.CSSProperties['width'],
-    heightVal: React.CSSProperties['height']
-  ) => (
-    <Spacer
-      variant={safeVariant}
-      debugging={heightVal === 0 || widthVal === 0 ? 'none' : safeDebugging}
-      indicatorNode={indicatorNode}
-      height={heightVal !== '100%' ? heightVal : undefined}
-      width={widthVal !== '100%' ? widthVal : undefined}
-    />
-  )
-
-  // Add display name to satisfy linter
-  SpacerElement.displayName = 'PadderSpacer'
-
-  return SpacerElement
-}
-
-/**
- * A foundational component that manages consistent padding with visual debugging.
- *
- * @remarks
- * Padder is a low-level utility that:
- * - Applies consistent padding around content
- * - Supports visual debugging of spacing
- * - Maintains baseline grid alignment
- * - Uses Spacer components for visual padding representation
- *
- * When debugging is enabled (`"visible"` or `"hidden"`), padding is represented
- * using Spacer components. When debugging is `"none"`, direct CSS padding is
- * applied for better performance.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Padder block={16} inline={8}>
- *   <div>Content with consistent padding</div>
- * </Padder>
- *
- * // With debug visuals and custom indicators
- * <Padder
- *   block={[8, 16]}
- *   inline={[16, 24]}
- *   debugging="visible"
- *   indicatorNode={(value, dim) => (
- *     <span className="text-sm">{dim}: {value}px</span>
- *   )}
- * >
- *   <div>Content with visible padding guides</div>
- * </Padder>
- *
- * // Direct padding mode
- * <Padder
- *   block={16}
- *   inline={24}
- *   debugging="none"
- * >
- *   <div>Content with direct CSS padding</div>
- * </Padder>
- * ```
- */
-export const Padder = React.memo(
-  React.forwardRef<HTMLDivElement, PadderProps>(function Padder(
-    {
-      children,
-      className,
-      debugging: debuggingProp,
-      height,
-      indicatorNode,
-      style,
-      width,
-      ssrMode = false,
-      ...spacingProps
-    },
-    ref
-  ) {
-    const config = useConfig('padder')
-    const { variant } = useConfig('spacer')
-    const initialPadding = React.useMemo(
-      () => parsePadding(spacingProps),
-      [spacingProps]
-    )
-    const { isShown, isNone, debugging } = useDebug(
-      debuggingProp,
-      config.debugging
-    )
-    const enableSpacers = !isNone
-
-    // Add hydration state tracking
-    const [isHydrated, setIsHydrated] = React.useState(false)
-
-    React.useEffect(() => {
-      setIsHydrated(true)
-    }, [])
-
-    const internalRef = React.useRef<HTMLDivElement | null>(null)
-
-    // Get padding calculation from useBaseline
-    const baselinePadding = useBaseline(internalRef, {
-      base: config.base,
-      snapping: 'height',
-      spacing: initialPadding,
-      warnOnMisalignment: !isNone,
-    })
-
-    // Create stable initial padding for SSR
-    const stablePadding = {
-      padding: {
-        top: initialPadding.top || 0,
-        right: initialPadding.right || 0,
-        bottom: initialPadding.bottom || 0,
-        left: initialPadding.left || 0,
-      },
-    }
-
-    // Use stable padding during SSR and initial render, then switch to dynamic padding
-    const { padding } = hydratedValue(
-      isHydrated && !ssrMode,
-      stablePadding,
-      baselinePadding
-    )
-
-    const setRefs = mergeRefs(ref, internalRef)
-
-    const containerStyles = React.useMemo(() => {
-      const baseStyles = createPadderContainerStyles(
-        width,
-        height,
-        config.base,
-        config.color
-      )
-
-      const paddingStyles = createDirectPaddingStyles(enableSpacers, {
-        top: padding.top,
-        right: padding.right,
-        bottom: padding.bottom,
-        left: padding.left,
-      })
-
-      return mergeStyles(
-        { ...baseStyles, ...paddingStyles } as React.CSSProperties,
-        style
-      )
-    }, [
-      width,
-      height,
-      config.base,
-      config.color,
-      enableSpacers,
-      padding.top,
-      padding.right,
-      padding.bottom,
-      padding.left,
-      style,
-    ])
-
-    const renderSpacer = React.useMemo(
-      () => createRenderSpacerFn(variant, debugging, indicatorNode),
-      [variant, debugging, indicatorNode]
-    )
-
-    // When debugging is "none", simply return a container with direct CSS padding
-    // and no additional grid/Spacer elements.
-    if (!enableSpacers) {
-      return (
-        <div
-          ref={setRefs}
-          data-testid="padder"
-          className={mergeClasses(styles.pad, className)}
-          style={containerStyles}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    // When debugging is enabled, use a grid structure with wrapping spacer elements.
-    return (
-      <div
-        ref={setRefs}
-        data-testid="padder"
-        className={mergeClasses(styles.pad, isShown && styles.v, className)}
-        style={containerStyles}
-      >
-        <>
-          {/* Top spacer - spans full width */}
-          {padding.top >= 0 && (
-            <div style={{ gridColumn: '1 / -1' }}>
-              {renderSpacer('100%', padding.top)}
-            </div>
-          )}
-
-          {/* Left spacer */}
-          {padding.left >= 0 && (
-            <div style={{ gridRow: '2 / 3' }}>
-              {renderSpacer(padding.left, '100%')}
-            </div>
-          )}
-        </>
-
-        {/* Main content - centered in grid */}
-        <div style={{ gridRow: '2 / 3', gridColumn: '2 / 3' }}>{children}</div>
-
-        <>
-          {/* Right spacer */}
-          {padding.right >= 0 && (
-            <div style={{ gridRow: '2 / 3' }}>
-              {renderSpacer(padding.right, '100%')}
-            </div>
-          )}
-
-          {/* Bottom spacer - spans full width */}
-          {padding.bottom >= 0 && (
-            <div style={{ gridColumn: '1 / -1' }}>
-              {renderSpacer('100%', padding.bottom)}
-            </div>
-          )}
-        </>
-      </div>
-    )
-  })
-)
diff --git a/src/components/Padder/index.ts b/src/components/Padder/index.ts
deleted file mode 100644
index 490f58b9..00000000
--- a/src/components/Padder/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file Padder Component Entry (components/Padder/index.ts)
- * @description Low-level padding management with debugging support
- * @module baseline-kit/components/Padder
- *
- * @remarks
- * Core component for managing padding and spacing visualization
- * in the baseline grid system.
- */
-
-export * from './Padder'
diff --git a/src/components/Padder/styles.module.css b/src/components/Padder/styles.module.css
deleted file mode 100644
index 0a347ae2..00000000
--- a/src/components/Padder/styles.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.pad {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto 1fr auto;
-  width: var(--bkpw, auto);
-  height: var(--bkph, auto);
-}
-
-.lay .line::after,
-.stk .line::after {
-  border: none;
-}
-
-.v::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border: 1px solid var(--bkpc, var(--bk-padder-color-theme));
-  pointer-events: none;
-  z-index: var(--bkzi);
-}
diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx
deleted file mode 100644
index 316ba71f..00000000
--- a/src/components/Spacer/Spacer.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import * as React from 'react'
-import { useConfig, useDebug } from '@hooks'
-import {
-  mergeStyles,
-  mergeClasses,
-  formatValue,
-  normalizeValuePair,
-  createStyleOverride,
-  hydratedValue,
-} from '@utils'
-import { ComponentsProps, Variant } from '../types'
-import styles from './styles.module.css'
-
-// Type Definitions ------------------------------------------------------------
-
-export type IndicatorNode = (
-  value: number,
-  type: 'width' | 'height'
-) => React.ReactNode
-
-export type SpacerProps = {
-  /** Explicit width (takes precedence over block) */
-  width?: React.CSSProperties['width']
-  /** Explicit height (takes precedence over block) */
-  height?: React.CSSProperties['height']
-  /** Visual style in debug mode */
-  variant?: Variant
-  /** Color to use for debug visuals (overrides theme) */
-  color?: string
-  /** Base unit for measurements (defaults to theme value) */
-  base?: number
-  /** Custom content to render (for debugging info) */
-  children?: React.ReactNode
-  /** Custom indicator node rendering function */
-  indicatorNode?: IndicatorNode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-} & ComponentsProps
-
-// Utils -----------------------------------------------------------------------
-
-/** Creates default spacer styles */
-const createDefaultSpacerStyles = (
-  base: number,
-  textColor: string,
-  flatColor: string,
-  lineColor: string
-): Record<string, string> => ({
-  '--bksw': '100%',
-  '--bksh': '100%',
-  '--bksb': `${base}px`,
-  '--bksct': textColor,
-  '--bkscf': flatColor,
-  '--bkscl': lineColor,
-})
-
-/** Generates measurement indicators for debugging */
-const generateMeasurements = (
-  isShown: boolean,
-  indicatorNode: SpacerProps['indicatorNode'],
-  normWidth: number | string,
-  normHeight: number | string
-): React.ReactNode | null => {
-  if (!isShown || !indicatorNode) return null
-
-  const width = typeof normWidth === 'number' ? normWidth : 0
-  const height = typeof normHeight === 'number' ? normHeight : 0
-
-  return (
-    <>
-      {height !== 0 && (
-        <span key="height">{indicatorNode(height, 'height')}</span>
-      )}
-      {width !== 0 && <span key="width">{indicatorNode(width, 'width')}</span>}
-    </>
-  )
-}
-
-/**
- * Creates empty space for implementing margins, gaps, and spacing.
- *
- * @remarks
- * - Flexible sizing: Set width and height directly
- * - Normalized values: All inputs convert to base unit multiples
- * - Debug visuals: Shows spacing measurements with theming
- * - Automatic: Empty in production, visible in debug mode
- *
- * @example
- * ```tsx
- * // Fixed size spacer
- * <Spacer width={32} height={16} />
- *
- * // Percentage-based spacer with debug hints
- * <Spacer
- *   width="50%"
- *   height={32}
- *   debugging="visible"
- *   variant="line"
- * />
- *
- * // Full-width spacer
- * <Spacer height={64} />
- * ```
- */
-export const Spacer = React.memo(function Spacer({
-  height: heightProp,
-  width: widthProp,
-  indicatorNode,
-  debugging: debuggingProp,
-  variant: variantProp,
-  base: baseProp,
-  color: colorProp,
-  className,
-  style,
-  children,
-  ssrMode = false,
-  ...props
-}: SpacerProps) {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const config = useConfig('spacer')
-
-  const { isShown } = useDebug(debuggingProp, config.debugging)
-  const variant = variantProp ?? config.variant
-  const base = baseProp ?? config.base
-
-  // Add hydration state tracking
-  const [isHydrated, setIsHydrated] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
-
-  const [normWidth, normHeight] = React.useMemo(() => {
-    return normalizeValuePair([widthProp, heightProp], [0, 0], {
-      base,
-      suppressWarnings: true,
-    })
-  }, [widthProp, heightProp, base])
-
-  // Ensure stable rendering for measurements during SSR
-  const shouldShowMeasurements = hydratedValue(
-    isHydrated && !ssrMode,
-    false, // Don't show measurements during SSR
-    isShown && indicatorNode !== undefined
-  )
-
-  // Only generate measurements after hydration
-  const measurements = React.useMemo(() => {
-    if (!shouldShowMeasurements) {
-      return null
-    }
-
-    return generateMeasurements(isShown, indicatorNode, normWidth, normHeight)
-  }, [shouldShowMeasurements, isShown, indicatorNode, normWidth, normHeight])
-
-  const defaultStyles = React.useMemo(
-    () =>
-      createDefaultSpacerStyles(
-        base,
-        config.colors.text,
-        config.colors.flat,
-        config.colors.line
-      ),
-    [base, config.colors]
-  )
-
-  const baseStyles = React.useMemo(() => {
-    const heightValue = formatValue(normHeight || '100%')
-    const widthValue = formatValue(normWidth || '100%')
-    const baseValue = `${base}px`
-
-    // Define dimensions that should be skipped when set to 100%
-    const dimensionVars = ['--bksw', '--bksh']
-
-    const customStyles = {
-      ...createStyleOverride({
-        key: '--bksh',
-        value: heightValue,
-        defaultStyles,
-        skipDimensions: { fullSize: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bksw',
-        value: widthValue,
-        defaultStyles,
-        skipDimensions: { fullSize: dimensionVars },
-      }),
-      // Explicitly set --bksb to ensure it is always applied
-      '--bksb': baseValue,
-      ...createStyleOverride({
-        key: '--bksct',
-        value: colorProp ?? config.colors.text,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkscl',
-        value: colorProp ?? config.colors.line,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkscf',
-        value: colorProp ?? config.colors.flat,
-        defaultStyles,
-      }),
-    } as React.CSSProperties
-
-    return mergeStyles(customStyles, style)
-  }, [
-    normWidth,
-    normHeight,
-    colorProp,
-    base,
-    config.colors,
-    defaultStyles,
-    style,
-  ])
-
-  return (
-    <div
-      ref={ref}
-      data-testid="spacer"
-      className={mergeClasses(
-        styles.spr,
-        isShown && styles[variant],
-        className
-      )}
-      data-variant={variant}
-      data-height={
-        typeof normHeight === 'number' ? `${normHeight}px` : normHeight
-      }
-      style={baseStyles}
-      {...props}
-    >
-      {measurements}
-      {children}
-    </div>
-  )
-})
diff --git a/src/components/Spacer/index.ts b/src/components/Spacer/index.ts
deleted file mode 100644
index 4865776e..00000000
--- a/src/components/Spacer/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file Spacer Component Entry (components/Spacer/index.ts)
- * @description Spacing management component with measurement indicators
- * @module baseline-kit/components/Spacer
- *
- * @remarks
- * Provides both horizontal and vertical spacing with optional
- * visual debugging features.
- */
-
-export * from './Spacer'
diff --git a/src/components/Spacer/styles.module.css b/src/components/Spacer/styles.module.css
deleted file mode 100644
index 2b7bc6e6..00000000
--- a/src/components/Spacer/styles.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.spr {
-  position: relative;
-  box-sizing: border-box;
-  width: var(--bksw, 100%);
-  height: var(--bksh, auto);
-  flex-shrink: 0;
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-.line::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border: 1px solid var(--bkscl, hsla(270, 60%, 40%, 0.6));
-  z-index: calc(var(--bkzi, 1));
-}
-
-.flat {
-  background-color: var(--bkscf, hsla(230, 100%, 70%, 0.2));
-}
diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx
deleted file mode 100644
index e160ac50..00000000
--- a/src/components/Stack/Stack.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import * as React from 'react'
-import type { Gaps } from '@components'
-import { useConfig, useDebug, useBaseline } from '@hooks'
-import {
-  mergeClasses,
-  mergeStyles,
-  parsePadding,
-  formatValue,
-  createStyleOverride,
-  hydratedValue,
-} from '@utils'
-import { Padder } from '../Padder'
-import { IndicatorNode } from '../Spacer'
-import { Config } from '../Config'
-import { ComponentsProps, Variant } from '../types'
-import styles from './styles.module.css'
-
-// Maps shorthand directions to Flexbox directions
-const DIRECTION_AXIS: Record<string, React.CSSProperties['flexDirection']> = {
-  x: 'row',
-  y: 'column',
-  '-x': 'row-reverse',
-  '-y': 'column-reverse',
-}
-
-export type CSSPropertiesDirectionalAxis = keyof typeof DIRECTION_AXIS
-
-export type StackProps = {
-  /** Main axis orientation */
-  direction?: React.CSSProperties['flexDirection'] &
-    CSSPropertiesDirectionalAxis
-  /** Distribution of space on main axis */
-  justify?: React.CSSProperties['justifyContent']
-  /** Alignment on cross axis */
-  align?: React.CSSProperties['alignItems']
-  /** Container width (defaults to "auto") */
-  width?: React.CSSProperties['width']
-  /** Container height (defaults to "auto") */
-  height?: React.CSSProperties['height']
-  /** Custom measurement indicator renderer */
-  indicatorNode?: IndicatorNode
-  /** Visual style in debug mode */
-  variant?: Variant
-  /** Gap between items in base units */
-  gap?: Gaps
-  /** Row gap when using different values for rows and columns */
-  rowGap?: Gaps
-  /** Column gap when using different values for rows and columns */
-  columnGap?: Gaps
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
-  ssrMode?: boolean
-  children?: React.ReactNode
-} & ComponentsProps
-
-// Utils -----------------------------------------------------------------------
-
-/** Creates default stack styles with theme colors */
-const createDefaultStackStyles = (colors: Record<string, string>) => ({
-  '--bkkw': 'auto',
-  '--bkkh': 'auto',
-  '--bkkcl': colors.line,
-  '--bkkcf': colors.flat,
-  '--bkkci': colors.text,
-})
-
-/** Creates gap styles for the stack */
-const createStackGapStyles = (
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number
-): Record<string, number | undefined> => ({
-  rowGap: gap !== undefined ? gap : rowGap,
-  columnGap: gap !== undefined ? gap : columnGap,
-})
-
-/**
- * A flexible container component aligning children to the baseline grid.
- *
- * @remarks
- * Stack provides a flex container that:
- * - Maintains baseline grid alignment
- * - Supports both row and column layouts
- * - Handles consistent spacing between items
- * - Includes visual debug overlays
- *
- * Key features:
- * - Automatic dimension management (defaults to auto)
- * - Direct padding application in non-debug mode
- * - Comprehensive alignment controls
- * - Theme-aware debug visuals
- *
- * @example
- * ```tsx
- * // Basic horizontal stack
- * <Stack gap={16}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Stack>
- *
- * // Vertical stack with alignment
- * <Stack
- *   direction="column"
- *   gap={24}
- *   align="center"
- *   justify="space-between"
- *   debugging="visible"
- * >
- *   <div>Top</div>
- *   <div>Middle</div>
- *   <div>Bottom</div>
- * </Stack>
- *
- * // Complex layout with padding
- * <Stack
- *   direction="row"
- *   gap={32}
- *   align="stretch"
- *   block={[16, 24]}
- *   inline={16}
- *   debugging="visible"
- * >
- *   <div>Panel 1</div>
- *   <div>Panel 2</div>
- * </Stack>
- * ```
- */
-export const Stack = React.memo(function Stack({
-  align = 'flex-start',
-  children,
-  className,
-  columnGap,
-  debugging: debuggingProp,
-  direction = 'row',
-  gap,
-  height,
-  indicatorNode,
-  justify = 'flex-start',
-  rowGap,
-  style,
-  variant,
-  width,
-  ssrMode = false,
-  ...spacingProps
-}: StackProps) {
-  // Read configuration from context or props
-  const config = useConfig('stack')
-  const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
-
-  // Add hydration state tracking
-  const [isHydrated, setIsHydrated] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
-
-  const stackRef = React.useRef<HTMLDivElement | null>(null)
-
-  // Process spacing props
-  const { top, right, bottom, left } = parsePadding({
-    ...spacingProps,
-  })
-
-  // Get padding calculation from useBaseline
-  const baselinePadding = useBaseline(stackRef, {
-    base: config.base,
-    snapping: 'height',
-    spacing: { top, right, bottom, left },
-    warnOnMisalignment: debugging !== 'none',
-  })
-
-  // Create stable initial padding for SSR
-  const stablePadding = {
-    padding: {
-      top: top || 0,
-      right: right || 0,
-      bottom: bottom || 0,
-      left: left || 0,
-    },
-  }
-
-  // Use stable padding during SSR and initial render, then switch to dynamic padding
-  const { padding } = hydratedValue(
-    isHydrated && !ssrMode,
-    stablePadding,
-    baselinePadding
-  )
-
-  const stackGapStyles = React.useMemo(() => {
-    const formattedRowGap = rowGap !== undefined ? Number(rowGap) : undefined
-    const formattedColumnGap =
-      columnGap !== undefined ? Number(columnGap) : undefined
-    const formattedGap = gap !== undefined ? Number(gap) : undefined
-
-    return createStackGapStyles(
-      formattedRowGap,
-      formattedColumnGap,
-      formattedGap
-    )
-  }, [rowGap, columnGap, gap])
-
-  const defaultStackStyles = React.useMemo(
-    () => createDefaultStackStyles(config.colors),
-    [config.colors]
-  )
-
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(width || 'auto')
-    const heightValue = formatValue(height || 'auto')
-    const flexDirection = DIRECTION_AXIS[direction] || direction
-
-    // Define stack dimensions that should be skipped when set to auto
-    const dimensionVars = ['--bkkw', '--bkkh']
-
-    const customOverrides = {
-      ...createStyleOverride({
-        key: '--bkkw',
-        value: widthValue,
-        defaultStyles: defaultStackStyles,
-        skipDimensions: { auto: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bkkh',
-        value: heightValue,
-        defaultStyles: defaultStackStyles,
-        skipDimensions: { auto: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bkkcl',
-        value: config.colors.line,
-        defaultStyles: defaultStackStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkkcf',
-        value: config.colors.flat,
-        defaultStyles: defaultStackStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkkci',
-        value: config.colors.text,
-        defaultStyles: defaultStackStyles,
-      }),
-    } as React.CSSProperties
-
-    const baseStyles = {
-      flexDirection,
-      justifyContent: justify,
-      alignItems: align,
-      width,
-      height,
-    } as React.CSSProperties
-
-    return mergeStyles(baseStyles, stackGapStyles, customOverrides, style)
-  }, [
-    direction,
-    justify,
-    align,
-    width,
-    height,
-    config.colors.line,
-    config.colors.flat,
-    config.colors.text,
-    defaultStackStyles,
-    stackGapStyles,
-    style,
-  ])
-
-  const mergedContainerStyles =
-    debugging === 'none'
-      ? {
-          ...containerStyles,
-          paddingBlock: `${padding.top}px ${padding.bottom}px`,
-          paddingInline: `${padding.left}px ${padding.right}px`,
-        }
-      : containerStyles
-
-  return (
-    <Config spacer={{ variant: variant ?? 'line' }}>
-      <Padder
-        ref={stackRef}
-        block={[padding.top, padding.bottom]}
-        inline={[padding.left, padding.right]}
-        debugging={debugging}
-        indicatorNode={indicatorNode}
-        width={width}
-        height={height}
-        ssrMode={ssrMode}
-      >
-        <div
-          data-testid="stack"
-          className={mergeClasses(className, styles.stk, isShown && styles.v)}
-          style={mergedContainerStyles}
-          {...spacingProps}
-        >
-          {children}
-        </div>
-      </Padder>
-    </Config>
-  )
-})
diff --git a/src/components/Stack/index.ts b/src/components/Stack/index.ts
deleted file mode 100644
index d76ff988..00000000
--- a/src/components/Stack/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file Stack/Flex Component Entry (components/Stack/index.ts)
- * @description Flexible container with baseline grid alignment
- * @module baseline-kit/components/Stack
- *
- * @remarks
- * While the component is called Stack internally, it's exported as Flex
- * for API consistency.
- */
-
-export * from './Stack'
diff --git a/src/components/Stack/styles.module.css b/src/components/Stack/styles.module.css
deleted file mode 100644
index 27892989..00000000
--- a/src/components/Stack/styles.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.stk {
-  display: flex;
-  position: relative;
-  width: var(--bkkw);
-  height: var(--bkkh);
-}
-
-/* Remove borders from children if they're lines */
-.stk .line::after {
-  border: none;
-}
-
-/* Style for debugging border */
-.v::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border: 1px solid var(--bkkcl, hsla(330, 60%, 40%, 0.6));
-  pointer-events: none;
-  z-index: var(--bkzio, 2);
-}
-
-/* Style for flat debugging background */
-.flat {
-  background-color: var(--bkkcf, hsla(0, 100%, 70%, 0.2));
-}
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index fdc311e0..00000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * @file Component Exports (components/index.ts)
- * @description Main entry point for baseline-kit components
- * @module baseline-kit/components
- */
-
-// Style imports - these generate CSS files in the dist folder
-import './styles/core.css'
-import './styles/theme.css'
-
-// Layout Components
-export * from './Layout'
-export * from './Box'
-export * from './Stack'
-export * from './Spacer'
-export * from './Padder'
-
-// Grid Components
-export * from './Guide'
-export * from './Baseline'
-
-// Configuration
-export * from './Config'
-
-// Types
-export * from './types'
diff --git a/src/components/styles/base.css b/src/components/styles/base.css
deleted file mode 100644
index 496f6aaf..00000000
--- a/src/components/styles/base.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Baseline Kit Base Styles
- * 
- * This file defines:
- * 1. Core system variables used across components
- * 2. Component-specific CSS variables with fallback values
- * 3. Robust fallbacks for components to ensure cross-framework compatibility
- */
-
-/* Core system variables */
-:root {
-  /* Core System Variables */
-  --bkb: 8px; /* Base unit for spacing */
-  --bkzi: 1; /* Base z-index */
-  --bkzio: 2; /* Overlay z-index */
-  --bk-transition-base: 180ms ease; /* Standard transition */
-
-  /* Default Dimensions */
-  --bk-width-default: fit-content;
-  --bk-height-default: fit-content;
-  --bkwf: 100%; /* Full width shorthand */
-  --bkhf: 100%; /* Full height shorthand */
-
-  /* Box Component Variables */
-  --bkxb: var(--bkb);
-  --bkxw: var(--bk-width-default);
-  --bkxh: var(--bk-height-default);
-  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
-  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
-  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
-
-  /* Stack Component Variables */
-  --bkkw: var(--bkwf);
-  --bkkh: var(--bk-height-default);
-  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
-
-  /* Baseline Component Variables */
-  --bkbw: 100%;
-  --bkbh: 100%;
-  --bkrt: 0;
-  --bkrh: 1px;
-  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
-
-  /* Guide Component Variables */
-  --bkgw: 100vw;
-  --bkgh: 100vh;
-  --bkgg: var(--bkb);
-  --bkgj: center;
-  --bkgt: auto;
-  --bkgpb: 0;
-  --bkgpi: 0;
-  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
-  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
-  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
-
-  /* Layout Component Variables */
-  --bklw: var(--bk-width-default);
-  --bklh: var(--bk-height-default);
-  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
-  --bklgtc: repeat(auto-fill, minmax(100px, 1fr));
-  --bklgtr: auto;
-  --bklg: 0;
-  --bklcg: 0;
-  --bklrg: 0;
-  --bklji: stretch;
-  --bklai: stretch;
-  --bkljc: start;
-  --bklac: start;
-
-  /* Padder Component Variables */
-  --bkpw: var(--bk-width-default);
-  --bkph: var(--bk-height-default);
-  --bkpc: var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6));
-
-  /* Spacer Component Variables - with fallback values */
-  --bksw: var(--bkwf);
-  --bksh: var(--bkhf);
-  --bkscl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6));
-  --bkscf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2));
-  --bksct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1));
-}
-
-/* Guide Component */
-.guide {
-  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
-  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
-  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
-}
-
-/* Baseline Component */
-.baseline {
-  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
-}
-
-/* Box Component */
-.box {
-  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
-  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
-  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
-}
-
-/* Stack Component */
-.stack {
-  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
-}
-
-/* Layout Component */
-.layout {
-  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
-}
diff --git a/src/components/styles/core.css b/src/components/styles/core.css
deleted file mode 100644
index 7a6c1126..00000000
--- a/src/components/styles/core.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Baseline Kit Core Styles
- *
- * This file imports all fundamental styles in the correct order:
- * 1. CSS reset for consistent defaults across browsers
- * 2. Base variables and common styles
- * 3. Component-specific styles
- */
-
-/* CSS reset - Normalizes browser defaults */
-@import './reset.css';
-
-/* Base variables - Core system variables and defaults */
-@import './base.css';
-
-/* Component-specific styles - Each component's styling */
-@import '../Box/styles.module.css';
-@import '../Guide/styles.module.css';
-@import '../Padder/styles.module.css';
-@import '../Spacer/styles.module.css';
-@import '../Stack/styles.module.css';
-@import '../Layout/styles.module.css';
-@import '../Baseline/styles.module.css';
-
-/* Utility classes for visibility control */
-.v {
-  opacity: 1;
-  visibility: visible;
-  transition:
-    opacity var(--bk-transition-base),
-    visibility 0ms linear;
-}
-
-.h {
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity var(--bk-transition-base),
-    visibility 0ms linear 180ms;
-}
diff --git a/src/components/styles/index.ts b/src/components/styles/index.ts
deleted file mode 100644
index a458d5ec..00000000
--- a/src/components/styles/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Baseline Kit Styles System
- *
- * This file exports all core styles needed for the component library.
- * The import order is important:
- * 1. core.css - Contains reset.css, base.css, and component styles
- * 2. theme.css - Contains color variables and theming
- */
-
-// Core styles must be imported before theme
-import './core.css'
-import './theme.css'
-
-// Empty export to make this a proper module
-export {}
diff --git a/src/components/styles/reset.css b/src/components/styles/reset.css
deleted file mode 100644
index 438b5498..00000000
--- a/src/components/styles/reset.css
+++ /dev/null
@@ -1,43 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Remove list styles on ul, ol elements */
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
diff --git a/src/components/styles/theme.css b/src/components/styles/theme.css
deleted file mode 100644
index 4bbbd68d..00000000
--- a/src/components/styles/theme.css
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * Baseline Kit Theme System
- * 
- * This file contains all color variables for theming.
- * For light and dark mode themes separately, see the theme directory.
- */
-
-:root {
-  /* ───────────────────────────────────────────────────────
-      Color Palette - Light Theme
-      - Primary: More muted/dimmed colors
-      - Secondary: Brighter, more vibrant colors
-   ─────────────────────────────────────────────────────── */
-
-  /* Neutral Colors */
-  --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
-  --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
-  --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
-  --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
-
-  /* Brand Colors */
-  --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
-  --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
-  --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
-  --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
-  --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
-  --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
-
-  /* Supporting Colors */
-  --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
-  --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
-  --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
-  --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
-  --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
-  --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
-  --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
-  --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
-  --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
-  --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
-
-  /* ───────────────────────────────────────────────────────
-      Component Theme Colors - Light
-      Using consistent alpha values:
-      - Line: 0.6 (borders)
-      - Flat: 0.2 (backgrounds)
-      - text: 0.9-1.0 (indicators)
-   ─────────────────────────────────────────────────────── */
-
-  /* Guide Component Theme */
-  --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
-  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
-  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
-
-  /* Baseline Component Theme */
-  --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
-  --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-
-  /* Spacer Component Theme */
-  --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
-  --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-  --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
-
-  /* Box Component Theme */
-  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
-  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
-  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
-
-  /* Stack Component Theme */
-  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
-  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-  /* Layout Component Theme */
-  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
-  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-  /* Padder Component Theme */
-  --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
-}
-
-/* ───────────────────────────────────────────────────────
-   Dark Theme
-   - Inverts Primary/Secondary relationships
-   - Adjusts alpha values for better contrast
-─────────────────────────────────────────────────────── */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Neutral Colors - Dark */
-    --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
-    --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
-    --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
-    --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
-
-    /* Brand Colors - Dark */
-    --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
-    --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
-    --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
-    --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
-    --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
-    --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
-
-    /* Supporting Colors - Dark */
-    --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
-    --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
-    --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
-    --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
-    --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
-    --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
-    --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
-    --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
-    --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
-    --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
-
-    /* Component Theme Overrides - Dark */
-    --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
-    --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
-
-    --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
-    --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
-    --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
-
-    --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
-    --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
-    --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
-    --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
-
-    --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-    --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
-    --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-    --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-    --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
-    --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-    
-    --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.7);
-    --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.3);
-    --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
-  }
-}
diff --git a/src/components/styles/theme/dark.css b/src/components/styles/theme/dark.css
deleted file mode 100644
index 8408b08d..00000000
--- a/src/components/styles/theme/dark.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Baseline Kit Dark Theme
- *
- * Organization:
- * 1. Color Palette (HSL values)
- * 2. Component Theme Colors
- */
-
-:root {
-  /* ───────────────────────────────────────────────────────
-      Color Palette - Dark Theme
-      - Inverts Primary/Secondary relationships
-      - Adjusts values for better contrast
-   ─────────────────────────────────────────────────────── */
-
-  /* Neutral Colors - Dark */
-  --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
-  --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
-  --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
-  --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
-
-  /* Brand Colors - Dark */
-  --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
-  --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
-  --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
-  --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
-  --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
-  --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
-
-  /* Supporting Colors - Dark */
-  --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
-  --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
-  --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
-  --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
-  --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
-  --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
-  --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
-  --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
-  --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
-  --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
-
-  /* ───────────────────────────────────────────────────────
-      Component Theme Colors - Dark
-      - Adjusts alpha values for better contrast
-   ─────────────────────────────────────────────────────── */
-
-  /* Component Theme Overrides - Dark */
-  --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
-  --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
-
-  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
-  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
-  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
-
-  --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
-  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
-  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
-  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
-
-  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
-  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
-  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-}
diff --git a/src/components/styles/theme/default.css b/src/components/styles/theme/default.css
deleted file mode 100644
index ad358a0a..00000000
--- a/src/components/styles/theme/default.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Baseline Kit Default Theme (Light)
- *
- * Organization:
- * 1. Color Palette (HSL values)
- * 2. Component Theme Colors
- */
-
-:root {
-  /* ───────────────────────────────────────────────────────
-      Color Palette - Light Theme
-      - Primary: More muted/dimmed colors
-      - Secondary: Brighter, more vibrant colors
-   ─────────────────────────────────────────────────────── */
-
-  /* Neutral Colors */
-  --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
-  --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
-  --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
-  --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
-
-  /* Brand Colors */
-  --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
-  --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
-  --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
-  --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
-  --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
-  --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
-
-  /* Supporting Colors */
-  --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
-  --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
-  --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
-  --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
-  --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
-  --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
-  --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
-  --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
-  --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
-  --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
-
-  /* ───────────────────────────────────────────────────────
-      Component Theme Colors - Light
-      Using consistent alpha values:
-      - Line: 0.6 (borders)
-      - Flat: 0.2 (backgrounds)
-      - text: 0.9-1.0 (indicators)
-   ─────────────────────────────────────────────────────── */
-
-  /* Guide Component Theme */
-  --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
-  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
-  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
-
-  /* Baseline Component Theme */
-  --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
-  --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-
-  /* Spacer Component Theme */
-  --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
-  --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
-  --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
-
-  /* Box Component Theme */
-  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
-  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
-  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
-
-  /* Stack Component Theme */
-  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
-  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-  /* Layout Component Theme */
-  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
-  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
-  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
-
-  /* Padder Component Theme */
-  --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
-}
diff --git a/src/components/styles/theme/tokens.css b/src/components/styles/theme/tokens.css
deleted file mode 100644
index 43fc709c..00000000
--- a/src/components/styles/theme/tokens.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Baseline Kit Theme Tokens Template
- * 
- * Use this file as a starting point for creating your own custom theme.
- * This file contains all theme variables but no values.
- * 
- * To create a custom theme:
- * 1. Copy this file
- * 2. Fill in your custom values
- * 3. Import it in your application after the core styles
- */
-
-:root {
-  /* ───────────────────────────────────────────────────────
-      Color Palette
-      Provide HSL values in the format: hue, saturation%, lightness%
-   ─────────────────────────────────────────────────────── */
-
-  /* Neutral Colors */
-  --bk-color-black-primary: ;
-  --bk-color-black-secondary: ;
-  --bk-color-white-primary: ;
-  --bk-color-white-secondary: ;
-
-  /* Brand Colors */
-  --bk-color-pink-primary: ;
-  --bk-color-pink-secondary: ;
-  --bk-color-purple-primary: ;
-  --bk-color-purple-secondary: ;
-  --bk-color-blue-primary: ;
-  --bk-color-blue-secondary: ;
-
-  /* Supporting Colors */
-  --bk-color-cyan-primary: ;
-  --bk-color-cyan-secondary: ;
-  --bk-color-green-primary: ;
-  --bk-color-green-secondary: ;
-  --bk-color-yellow-primary: ;
-  --bk-color-yellow-secondary: ;
-  --bk-color-orange-primary: ;
-  --bk-color-orange-secondary: ;
-  --bk-color-red-primary: ;
-  --bk-color-red-secondary: ;
-
-  /* ───────────────────────────────────────────────────────
-      Component Theme Colors
-      Use hsla(var(--color-variable), alpha) format for transparency
-   ─────────────────────────────────────────────────────── */
-
-  /* Guide Component Theme */
-  --bk-guide-color-line-theme: ;
-  --bk-guide-color-pattern-theme: ;
-  --bk-guide-color-auto-theme: ;
-  --bk-guide-color-fixed-theme: ;
-
-  /* Baseline Component Theme */
-  --bk-baseline-color-line-theme: ;
-  --bk-baseline-color-flat-theme: ;
-
-  /* Spacer Component Theme */
-  --bk-spacer-color-line-theme: ;
-  --bk-spacer-color-flat-theme: ;
-  --bk-spacer-color-text-theme: ;
-
-  /* Box Component Theme */
-  --bk-box-color-line-theme: ;
-  --bk-box-color-flat-theme: ;
-  --bk-box-color-text-theme: ;
-
-  /* Stack Component Theme */
-  --bk-stack-color-line-theme: ;
-  --bk-stack-color-flat-theme: ;
-  --bk-stack-color-text-theme: ;
-
-  /* Layout Component Theme */
-  --bk-layout-color-line-theme: ;
-  --bk-layout-color-flat-theme: ;
-  --bk-layout-color-text-theme: ;
-
-  /* Padder Component Theme */
-  --bk-padder-color-theme: ;
-}
diff --git a/src/components/types.ts b/src/components/types.ts
deleted file mode 100644
index 2e045112..00000000
--- a/src/components/types.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react'
-import { DebuggingMode } from './Config/Config'
-
-// Spacing Types  --------------------------------------------------------------
-
-/**
- * Defines spacing as either a single value, start/end pair, or object with explicit edges.
- * Used for block and inline spacing across components.
- *
- * @example
- * ```tsx
- * // Single value
- * <Box block={8} />
- *
- * // Start/end pair
- * <Box block={[8, 16]} />
- *
- * // Object with explicit values
- * <Box block={{ start: 8, end: 16 }} />
- * ```
- */
-export type Spacing =
-  | number
-  | [number, number]
-  | { start?: number; end?: number }
-
-/**
- * Flexible padding definition that supports multiple formats for setting padding on all sides.
- *
- * @example
- * ```tsx
- * // Single value for all sides
- * padding={8}
- *
- * // Block and inline pairs
- * padding={[8, 16]}
- *
- * // Explicit values for each side
- * padding={[8, 16, 8, 16]}
- *
- * // Object with named sides
- * padding={{ top: 8, right: 16, bottom: 8, left: 16 }}
- * ```
- */
-export type PaddingValue =
-  | number
-  | [number, number] // [block, inline]
-  | [number, number, number] // [top, inline, bottom] (CSS shorthand)
-  | [number, number, number, number] // [top, right, bottom, left]
-  | {
-      top?: number
-      bottom?: number
-      left?: number
-      right?: number
-    }
-
-/** Resolved padding values for all edges after normalization. */
-export type Padding = {
-  top: number
-  right: number
-  bottom: number
-  left: number
-}
-
-/** Props interface for components that support spacing configuration. */
-export type SpacingProps = {
-  padding?: PaddingValue
-  block?: Spacing
-  inline?: Spacing
-}
-
-// Grid Types ------------------------------------------------------------------
-
-/** Controls how columns are laid out in grid components. */
-export type GuideVariant = 'line' | 'pattern' | 'fixed' | 'auto'
-
-/**
- * Valid value types for grid columns. Can be a CSS length, fractional unit,
- * or 'auto' for automatic sizing.
- */
-export type GuideColumnValue = string | number | undefined | 'auto'
-
-/** Array of column definitions for pattern-based grid layouts. */
-export type GuideColumnsPattern = readonly GuideColumnValue[]
-
-// === Grid Constants ===
-
-/** Valid grid alignment values. */
-export const GRID_ALIGNMENTS = ['start', 'center', 'end'] as const
-export type GridAlignment = (typeof GRID_ALIGNMENTS)[number]
-
-/** Valid component variants affecting visual style. */
-export const PADD_VARIANTS = ['line', 'flat'] as const
-export type PaddedVariant = (typeof PADD_VARIANTS)[number]
-
-// Component Base Types --------------------------------------------------------
-
-/**
- * Common props shared across library components.
- * Provides consistent sizing, spacing, styling, and debugging options.
- */
-export type ComponentsProps = {
-  debugging?: DebuggingMode
-  className?: string
-  style?: React.CSSProperties
-  height?: React.CSSProperties['height']
-  width?: React.CSSProperties['width']
-} & SpacingProps
-
-/** Base configuration for components that support padding. */
-export type PaddedBaseConfig = {
-  base?: number
-  color?: React.CSSProperties['color'] | React.CSSProperties['backgroundColor']
-  zIndex?: React.CSSProperties['zIndex']
-}
-
-export type Variant = 'line' | 'flat' | 'pattern'
-
-export type Gaps =
-  | {
-      gap?: React.CSSProperties['gap']
-      rowGap?: never
-      columnGap?: never
-    }
-  | {
-      /** When using separate gaps, omit unified gap */
-      gap?: never
-      rowGap?: React.CSSProperties['rowGap']
-      columnGap?: React.CSSProperties['columnGap']
-    }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index e3b4e1aa..00000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @file Hook Exports (hooks/index.ts)
- * @description React hooks for baseline-kit functionality
- * @module baseline-kit/hooks
- */
-
-// Measurement & Layout
-export * from './useMeasure'
-export * from './useVirtual'
-export * from './useBaseline'
-
-// Grid & Guides
-export * from './useGuide'
-
-// Configuration
-export * from './useConfig'
-export * from './useDebug'
-
-// Don't export useIsClient as it's only used internally
-// export * from './useIsClient'
diff --git a/src/hooks/useBaseline.ts b/src/hooks/useBaseline.ts
deleted file mode 100644
index 9eaf0f61..00000000
--- a/src/hooks/useBaseline.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react'
-import { useMeasure } from './useMeasure'
-import { calculateSnappedSpacing } from '@utils'
-import type { SnappingMode, Padding } from '@components'
-import { parsePadding } from '@utils'
-
-export interface BaselineOptions {
-  /* Base unit for alignment (default 8). */
-  base?: number
-  /** Snapping strategy: 'none' | 'height' | 'clamp'. */
-  snapping?: SnappingMode
-  /** Initial padding config.  e.g. { top: 10, bottom: 20 } or just 8, etc. */
-  spacing?: Partial<Padding> | number
-  /** Whether to warn in the console if the measured height is not a multiple of base. */
-  warnOnMisalignment?: boolean
-}
-
-export interface BaselineResult {
-  padding: Padding
-  isAligned: boolean
-  height: number
-}
-
-/**
- *  Hook for managing baseline grid alignment in components.
- *
- *  @remarks
- *  This hook handles the complex calculations needed to maintain baseline grid
- *  alignment, including:
- *    ▪	Measuring element dimensions
- *    ▪	Calculating padding adjustments
- *    ▪	Potentially snapping values to ensure multiples of the base
- *    ▪	Warning about misalignments in development
- *
- *  Different snapping modes affect how spacing is adjusted:
- *    ▪	'none': Uses raw spacing values without adjustment
- *    ▪	'height': Adjusts only the final (bottom) padding to align
- *    ▪	'clamp': Adjusts top and bottom to align
- *
- *  @param ref Reference to the DOM element
- *  @param options Configuration options for alignment behavior
- *  @returns Object with adjusted padding, alignment status, and height
- *
- * @example
- * ```tsx
- * export function MyComponent() {
- *   const ref = useRef<HTMLDivElement>(null)
- *   const { padding } = useBaseline(ref, {
- *     base: 8,
- *     snapping: 'height',
- *     spacing: {
- *       top: 16,
- *       bottom: 16
- *     }
- *    }}
- *  >
- *    Content
- *  </div>
- *  )
- *  }
- */
-export function useBaseline(
-  ref: React.RefObject<HTMLElement | null>,
-  {
-    base = 8,
-    snapping = 'none',
-    spacing = {},
-    warnOnMisalignment = false,
-  }: BaselineOptions = {}
-): BaselineResult {
-  if (base < 1) {
-    throw new Error('Base must be >= 1 for baseline alignment.')
-  }
-
-  const { height } = useMeasure(ref)
-  // Track whether we've already snapped once for this component.
-  const didSnapRef = React.useRef<boolean>(false)
-  const hasWarnedRef = React.useRef<boolean>(false)
-
-  return React.useMemo(() => {
-    // Convert the spacing prop into { top, right, bottom, left } numeric values.
-    const initialPadding = parsePadding({ padding: spacing })
-    const isAligned = height % base === 0
-
-    // Log the warning only once
-    if (
-      !isAligned &&
-      warnOnMisalignment &&
-      process.env.NODE_ENV === 'development'
-    ) {
-      if (!hasWarnedRef.current) {
-        console.warn(
-          `[useBaseline] Element height (${height}px) is not aligned with base (${base}px).`
-        )
-        hasWarnedRef.current = true // Mark warning as logged
-      }
-    }
-
-    // If snapping is disabled, just return the original padding.
-    if (snapping === 'none') {
-      return { padding: initialPadding, isAligned, height }
-    }
-
-    // If we've already snapped once, just reuse the original (or store the
-    // snapped result in a ref if you prefer).
-    if (didSnapRef.current) {
-      return { padding: initialPadding, isAligned, height }
-    }
-
-    // Snap exactly once.
-    const finalPadding = calculateSnappedSpacing(
-      height,
-      base,
-      initialPadding,
-      snapping
-    )
-    didSnapRef.current = true
-
-    return { padding: finalPadding, isAligned, height }
-  }, [base, snapping, spacing, warnOnMisalignment, height])
-}
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
deleted file mode 100644
index 07b279a0..00000000
--- a/src/hooks/useConfig.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useMemo } from 'react'
-import { ConfigSchema, useDefaultConfig } from '@components'
-
-/** Type helper that merges base configuration with component-specific settings. */
-export type ComponentConfig<K extends keyof ConfigSchema> = ConfigSchema[K] & {
-  /** Base unit for spacing calculations */
-  base: number
-}
-
-/**
- * Hook for accessing component-specific theme configuration.
- *
- * @remarks
- * This hook provides:
- * - Access to component-specific theme settings
- * - Automatic base unit inheritance
- * - Memoized configuration to prevent unnecessary updates
- * - Type-safe configuration access
- *
- * It merges:
- * - Global base unit settings
- * - Component-specific configurations
- * - Theme-based color schemes
- *
- * @param component - Name of the component requesting configuration
- * @returns Merged configuration for the specific component
- *
- * @example
- * ```tsx
- * function Box() {
- *   const config = useConfig('box');
- *
- *   return (
- *     <div style={{
- *       '--box-base': `${config.base}px`,
- *       '--box-color': config.colors.line
- *     }}>
- *       {children}
- *     </div>
- *   );
- * }
- * ```
- */
-export function useConfig<K extends keyof ConfigSchema>(
-  component: K
-): ComponentConfig<K> {
-  const defaultConfig = useDefaultConfig()
-  return useMemo(() => {
-    return Object.assign(
-      { base: defaultConfig.base },
-      defaultConfig[component]
-    ) as ComponentConfig<K>
-  }, [defaultConfig, component])
-}
diff --git a/src/hooks/useDebug.ts b/src/hooks/useDebug.ts
deleted file mode 100644
index 15c1d148..00000000
--- a/src/hooks/useDebug.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useMemo } from 'react'
-import { DebuggingMode } from '../components/Config/Config'
-
-interface DebugResult {
-  /** Whether debug visuals should be shown */
-  isShown: boolean
-  /** Whether debug features exist but are hidden */
-  isHidden: boolean
-  /** Whether debug features are disabled */
-  isNone: boolean
-  /** Current debugging mode */
-  debugging: DebuggingMode | undefined
-}
-
-/**
- * Hook for managing component debug state and visibility.
- *
- * @remarks
- * Determines the active debugging mode by:
- * - Using prop value if provided
- * - Falling back to config value if prop is undefined
- * - Computing visibility states based on active mode
- *
- * This hook helps components:
- * - Control debug visual rendering
- * - Manage debug feature states
- * - Handle prop/config inheritance
- *
- * @param debuggingProp - Optional debugging mode from props
- * @param debuggingConfig - Debugging mode from theme/config
- * @returns Debug state information
- *
- * @example
- * ```tsx
- * function DebugComponent({ debugging: debugProp }) {
- *   const { isShown, isHidden, isNone } = useDebug(
- *     debugProp,
- *     'hidden' // Default from config
- *   );
- *
- *   return (
- *     <div>
- *       {isShown && <DebugOverlay />}
- *       {!isNone && <DebugFeatures />}
- *       <Content />
- *     </div>
- *   );
- * }
- * ```
- */
-export function useDebug(
-  debuggingProp?: DebuggingMode,
-  debuggingConfig?: DebuggingMode
-): DebugResult {
-  return useMemo(() => {
-    const effective = debuggingProp ?? debuggingConfig
-    return {
-      isShown: effective === 'visible',
-      isHidden: effective === 'hidden',
-      isNone: effective === 'none',
-      debugging: effective,
-    }
-  }, [debuggingProp, debuggingConfig])
-}
diff --git a/src/hooks/useGuide.ts b/src/hooks/useGuide.ts
deleted file mode 100644
index 23a49e75..00000000
--- a/src/hooks/useGuide.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import * as React from 'react'
-import { GuideConfig, GuideColumnsPattern } from '@components'
-import { isValidGuidePattern } from '@/components/Guide/validation'
-import { formatValue, convertValue, normalizeValue } from '@utils'
-import { useMeasure } from './useMeasure'
-
-export interface GuideResult {
-  /** CSS grid template string */
-  template: string
-  /** Total number of columns */
-  columnsCount: number
-  /** Final gap size in pixels */
-  calculatedGap: number
-  /** Whether the configuration is valid */
-  isValid: boolean
-}
-
-/**
- * Hook for calculating grid layout parameters based on container dimensions.
- *
- * @remarks
- * This hook handles complex grid calculations for different layout variants:
- * - 'line': Evenly spaced vertical lines
- * - 'pattern': Custom repeating column patterns
- * - 'fixed': Set number of columns with optional width
- * - 'auto': Dynamic columns based on available space
- *
- * Key features:
- * - Responsive grid calculations
- * - Pattern validation
- * - Gap management
- * - Error handling
- *
- * @param ref - Reference to container element
- * @param config - Grid configuration object
- * @returns Grid calculation results
- *
- * @example
- * ```tsx
- * function GridOverlay() {
- *   const ref = useRef<HTMLDivElement>(null);
- *   const { template, columnsCount } = useGuide(ref, {
- *     variant: 'fixed',
- *     columns: 12,
- *     gap: 16,
- *     base: 8
- *   });
- *
- *   return (
- *     <div
- *       ref={ref}
- *       style={{
- *         display: 'grid',
- *         gridTemplateColumns: template,
- *         gap: calculatedGap
- *       }}
- *     >
- *       {Array(columnsCount).fill(null).map((_, i) => (
- *         <div key={i} className="grid-line" />
- *       ))}
- *     </div>
- *   );
- * }
- * ```
- */
-export function useGuide(
-  ref: React.RefObject<HTMLElement | null>,
-  config: GuideConfig
-): GuideResult {
-  const { width } = useMeasure(ref)
-  const hasWarnedRef = React.useRef<boolean>(false) // Track if warning has been logged
-
-  return React.useMemo(() => {
-    // Default values
-    const variant = config.variant ?? 'line'
-    const base = config.base ?? 8
-
-    // The gap is already adjusted in createGridConfig for line variants
-    // So we should use config.gap directly without further adjustment
-    const gap = normalizeValue(config.gap ?? 0, { base })
-
-    // Return invalid result if no width
-    if (!width) {
-      return {
-        template: 'none',
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: false,
-      }
-    }
-
-    try {
-      switch (variant) {
-        case 'line': {
-          // Simple vertical lines
-          // Account for -1px reduction in each gap when gap > 0
-          const finalGap = gap === 0 ? 0 : gap - 1
-          const actualGapWithLine = finalGap + 1
-
-          let columns: number
-
-          if (finalGap === 0) {
-            // When gap is 0, need a column per pixel + 1
-            columns = Math.max(1, Math.floor(width) + 1)
-          } else {
-            // For line variant with gap > 0:
-            // Account for the -1px reduction in each gap
-            columns = Math.max(
-              1,
-              Math.floor((width + 1) / actualGapWithLine) + 1
-            )
-          }
-
-          return {
-            template: `repeat(${columns}, 1px)`,
-            columnsCount: columns,
-            calculatedGap: gap > 0 ? gap - 1 : gap,
-            isValid: true,
-          }
-        }
-
-        case 'pattern': {
-          // Custom column pattern
-          if (!config.columns || !Array.isArray(config.columns)) {
-            throw new Error('Missing or invalid pattern columns')
-          }
-
-          if (!isValidGuidePattern(config.columns)) {
-            throw new Error('Invalid "pattern" columns array')
-          }
-
-          const columnsArr = (config.columns as GuideColumnsPattern).map(
-            (col) => {
-              if (typeof col === 'number') return `${col}px`
-              return col
-            }
-          )
-
-          // Validate no zero widths
-          if (columnsArr.some((c) => c === '0' || c === '0px')) {
-            return {
-              template: 'none',
-              columnsCount: 0,
-              calculatedGap: 0,
-              isValid: false,
-            }
-          }
-
-          return {
-            template: columnsArr.join(' '),
-            columnsCount: columnsArr.length,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        case 'fixed': {
-          // Fixed number of columns
-          const colCount =
-            typeof config.columns === 'number' ? config.columns : 0
-          if (colCount < 1) {
-            throw new Error(`Invalid columns count: ${colCount}`)
-          }
-          const colWidth = config.columnWidth
-            ? formatValue(config.columnWidth)
-            : '1fr'
-
-          return {
-            template: `repeat(${colCount}, ${colWidth})`,
-            columnsCount: colCount,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        case 'auto': {
-          // Auto-filling columns
-          const colWidth = config.columnWidth ?? 'auto'
-          if (colWidth === 'auto') {
-            return {
-              template: 'repeat(auto-fill, minmax(0, 1fr))',
-              columnsCount: 1,
-              calculatedGap: gap,
-              isValid: true,
-            }
-          }
-          const colWidthStr =
-            typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()
-
-          const pxVal = convertValue(colWidthStr) ?? 0
-          const columns =
-            pxVal > 0
-              ? Math.max(1, Math.floor((width + gap) / (pxVal + gap)))
-              : 1
-
-          return {
-            template: `repeat(auto-fill, ${colWidthStr})`,
-            columnsCount: columns,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        default: {
-          if (!hasWarnedRef.current) {
-            console.warn(
-              `[useGuide] Unknown variant "${variant}". Falling back to "line".`
-            )
-            hasWarnedRef.current = true // Mark warning as logged
-          }
-          const columns = Math.max(1, Math.floor(width / (gap + 1)) + 1)
-          return {
-            template: `repeat(${columns}, 1px)`,
-            columnsCount: columns,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-      }
-    } catch (error) {
-      console.warn('Error in useGuide:', error)
-      return {
-        template: 'none',
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: false,
-      }
-    }
-  }, [config, width])
-}
diff --git a/src/hooks/useIsClient.ts b/src/hooks/useIsClient.ts
deleted file mode 100644
index 99e5472d..00000000
--- a/src/hooks/useIsClient.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react'
-
-/**
- * Hook to determine if the code is running on the client side.
- *
- * @returns Boolean indicating if the code is running in a browser environment
- */
-export function useIsClient() {
-  // Start with false for SSR
-  const [isClient, setIsClient] = useState(false)
-
-  // Only run once on mount
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
-  return isClient
-}
diff --git a/src/hooks/useMeasure.ts b/src/hooks/useMeasure.ts
deleted file mode 100644
index 6d6f8c2f..00000000
--- a/src/hooks/useMeasure.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react'
-import { rafThrottle } from '@utils'
-
-export interface MeasureResult {
-  /** Measured width in pixels */
-  width: number
-  /** Measured height in pixels */
-  height: number
-  /** Function to force a remeasurement */
-  refresh: () => void
-}
-
-/**
- * Hook for measuring and tracking DOM element dimensions.
- *
- * Provides responsive element measurements using ResizeObserver,
- * with performance optimization (via RAF throttling), error handling,
- * and a manual refresh method.
- *
- * @param ref - Reference to the DOM element to measure
- * @returns Current dimensions and refresh function
- *
- * @example
- * ```tsx
- * function ResponsiveBox() {
- *   const ref = React.useRef<HTMLDivElement>(null);
- *   const { width, height, refresh } = useMeasure(ref);
- *
- *   return (
- *     <div ref={ref} className="responsive-box">
- *       Width: {width}px, Height: {height}px
- *       <button onClick={refresh}>Remeasure</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useMeasure(
-  ref: React.RefObject<HTMLElement | null>
-): MeasureResult {
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
-
-  // measure() reads getBoundingClientRect() from ref.current
-  const measure = React.useCallback(() => {
-    if (!ref.current) return
-    try {
-      const rect = ref.current.getBoundingClientRect()
-      const next = {
-        width: rect ? Math.round(rect.width) : 0,
-        height: rect ? Math.round(rect.height) : 0,
-      }
-      setDimensions((prev) =>
-        prev.width === next.width && prev.height === next.height ? prev : next
-      )
-    } catch {
-      setDimensions({ width: 0, height: 0 })
-    }
-  }, [ref])
-
-  // Create a throttled version of measure using RAF.
-  const refresh = React.useMemo(() => rafThrottle(measure), [measure])
-
-  // On mount (or when ref changes) perform an immediate measurement.
-  React.useLayoutEffect(() => {
-    if (typeof window === 'undefined') return
-    measure()
-  }, [measure])
-
-  // Set up a ResizeObserver on mount.
-  React.useLayoutEffect(() => {
-    if (typeof window === 'undefined' || !ref.current) return
-    const observer = new ResizeObserver(() => {
-      refresh()
-    })
-    observer.observe(ref.current)
-    return () => {
-      observer.disconnect()
-    }
-  }, [ref, refresh])
-
-  return { ...dimensions, refresh }
-}
diff --git a/src/hooks/useVirtual.ts b/src/hooks/useVirtual.ts
deleted file mode 100644
index 27629cd1..00000000
--- a/src/hooks/useVirtual.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  RefObject,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react'
-import { rafThrottle } from '@utils'
-
-type VirtualResult = {
-  /** Total number of items/lines to virtualize */
-  totalLines: number
-  /** Height of each item in pixels */
-  lineHeight: number
-  /** Reference to the scrollable container */
-  containerRef: RefObject<HTMLDivElement | null>
-  /** Additional items to render above/below viewport */
-  buffer?: number | string
-}
-
-/**
- * Hook for optimizing large lists through virtual scrolling.
- *
- * @remarks
- * This hook helps manage virtual scrolling by:
- * - Calculating visible item ranges
- * - Handling scroll events efficiently
- * - Managing buffer zones for smooth scrolling
- * - Supporting dynamic container sizes
- *
- * Performance optimizations:
- * - RAF-based scroll handling
- * - Intersection Observer for visibility
- * - Buffer zones to prevent flicker
- * - Efficient range calculations
- *
- * @param options - Virtual scrolling configuration
- * @returns Object containing start and end indices of visible items
- *
- * @example
- * ```tsx
- * function VirtualList() {
- *   const containerRef = useRef<HTMLDivElement>(null);
- *   const { start, end } = useVirtual({
- *     totalLines: 1000,
- *     lineHeight: 30,
- *     containerRef,
- *     buffer: 5
- *   });
- *
- *   return (
- *     <div ref={containerRef} className="scroll-container">
- *       <div style={{ height: 1000 * 30 }}>
- *         {items.slice(start, end).map(item => (
- *           <div key={item.id} style={{ height: 30 }}>
- *             {item.content}
- *           </div>
- *         ))}
- *       </div>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useVirtual({
-  totalLines,
-  lineHeight,
-  containerRef,
-  buffer = 0,
-}: VirtualResult) {
-  // Convert buffer to numeric value
-  const numericBuffer = useMemo(
-    () => (typeof buffer === 'number' ? buffer : parseInt(buffer, 10) || 0),
-    [buffer]
-  )
-
-  /**
-   * Calculates the visible range of items based on scroll position
-   * and viewport dimensions.
-   */
-  const calculateRange = useCallback(() => {
-    const element = containerRef.current
-    if (!element) return { start: 0, end: totalLines }
-
-    // Calculate visible range
-    const rect = element.getBoundingClientRect()
-    const offsetTop = rect.top + window.scrollY
-    const viewportTop = Math.max(0, window.scrollY - offsetTop - numericBuffer)
-    const viewportBottom = viewportTop + window.innerHeight + numericBuffer * 2
-
-    const start = Math.max(0, Math.floor(viewportTop / lineHeight))
-    const end = Math.min(totalLines, Math.ceil(viewportBottom / lineHeight))
-
-    return { start, end }
-  }, [totalLines, lineHeight, containerRef, numericBuffer])
-
-  const [visibleRange, setVisibleRange] = useState(calculateRange)
-
-  // Throttle updates for performance
-  const updateRange = useCallback(() => {
-    setVisibleRange((prev) => {
-      const next = calculateRange()
-      return prev.start !== next.start || prev.end !== next.end ? next : prev
-    })
-  }, [calculateRange])
-
-  const updateRangeThrottled = useMemo(
-    () => rafThrottle(updateRange),
-    [updateRange]
-  )
-
-  // Subscribe to window events using our helper
-  useWindowEvents(['scroll', 'resize'], updateRangeThrottled)
-
-  useLayoutEffect(() => {
-    const element = containerRef.current
-    if (!element) return
-
-    // Use IntersectionObserver for visibility tracking
-    const observer = new IntersectionObserver(updateRangeThrottled, {
-      threshold: 0,
-    })
-    observer.observe(element)
-    updateRangeThrottled()
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [containerRef, calculateRange, updateRangeThrottled])
-
-  return visibleRange
-}
-
-/** Helper hook to manage multiple window event listeners. */
-function useWindowEvents(events: string[], handler: () => void) {
-  const stableHandler = useCallback(handler, [handler])
-
-  useLayoutEffect(() => {
-    const wrappedHandler = () => stableHandler()
-    events.forEach((evt) => window.addEventListener(evt, wrappedHandler))
-    return () =>
-      events.forEach((evt) => window.removeEventListener(evt, wrappedHandler))
-  }, [events, stableHandler])
-}
diff --git a/src/style.d.ts b/src/style.d.ts
deleted file mode 100644
index 2ad7b345..00000000
--- a/src/style.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.module.css' {
-  const styles: { readonly [key: string]: string }
-  export default styles
-}
\ No newline at end of file
diff --git a/src/styles.ts b/src/styles.ts
deleted file mode 100644
index 0b48ec89..00000000
--- a/src/styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @file Style Entry Point
- * @description Clean import path for core CSS styles
- * @module baseline-kit/styles
- */
-
-// This file exists only to provide a clean import path
-import './components/styles/core.css'
diff --git a/src/theme.ts b/src/theme.ts
deleted file mode 100644
index 68c76590..00000000
--- a/src/theme.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @file Theme Entry Point
- * @description Clean import path for theme CSS styles
- * @module baseline-kit/theme
- */
-
-// This file exists only to provide a clean import path
-import './components/styles/theme.css'
diff --git a/src/utils/convert.ts b/src/utils/convert.ts
deleted file mode 100644
index 078d4d1a..00000000
--- a/src/utils/convert.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { parseUnit } from './parse'
-
-export interface ConversionContext {
-  /** Parent element dimension for relative units */
-  parentSize?: number
-  /** Viewport width for vw units */
-  viewportWidth?: number
-  /** Viewport height for vh units */
-  viewportHeight?: number
-  /** Root font size for rem units */
-  rootFontSize?: number
-  /** Parent font size for em units */
-  parentFontSize?: number
-}
-
-const DEFAULT_CONTEXT: Required<ConversionContext> = {
-  parentSize: 0,
-  viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1920,
-  viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 1080,
-  rootFontSize: 16,
-  parentFontSize: 16,
-}
-
-/** Conversion factors for absolute units to pixels */
-export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
-  px: 1,
-  in: 96, // 1in = 96px
-  cm: 37.8, // 1cm = 37.8px
-  mm: 3.78, // 1mm = 3.78px
-  pt: 1.33, // 1pt = 1.33px
-  pc: 16, // 1pc = 16px
-}
-
-/** Supported relative CSS units */
-export const RELATIVE_UNITS: string[] = [
-  'em',
-  'rem',
-  'vh',
-  'vw',
-  'vmin',
-  'vmax',
-  '%',
-]
-
-/**
- * Converts CSS values to pixels.
- *
- * @param value - CSS value to convert
- * @param context - Optional context for relative unit conversion
- * @returns Value in pixels or null if conversion fails
- */
-export function convertValue(
-  value: number | string | undefined,
-  context?: ConversionContext
-): number | null {
-  if (typeof value === 'number') return value
-  if (typeof value !== 'string') return null
-
-  const parsed = parseUnit(value)
-  if (!parsed) return null
-
-  const { value: num, unit } = parsed
-
-  // Handle absolute units
-  if (unit in ABSOLUTE_UNIT_CONVERSIONS) {
-    return num * ABSOLUTE_UNIT_CONVERSIONS[unit]
-  }
-
-  // Special case for auto
-  if (unit === 'auto') return null
-
-  // Handle relative units
-  if (RELATIVE_UNITS.includes(unit)) {
-    const ctx = { ...DEFAULT_CONTEXT, ...context }
-    switch (unit) {
-      case 'em':
-        return num * ctx.parentFontSize
-      case 'rem':
-        return num * ctx.rootFontSize
-      case 'vh':
-        return (num / 100) * ctx.viewportHeight
-      case 'vw':
-        return (num / 100) * ctx.viewportWidth
-      case 'vmin':
-        return (num / 100) * Math.min(ctx.viewportWidth, ctx.viewportHeight)
-      case 'vmax':
-        return (num / 100) * Math.max(ctx.viewportWidth, ctx.viewportHeight)
-      case '%':
-        return (num / 100) * ctx.parentSize
-      default:
-        return null
-    }
-  }
-  return null
-}
diff --git a/src/utils/grid.ts b/src/utils/grid.ts
deleted file mode 100644
index 49d94667..00000000
--- a/src/utils/grid.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @file grid.ts
- * @description Grid layout utilities
- * @module utils
- */
-
-import * as React from 'react'
-
-/**
- * Creates grid span styles based on span props.
- * Handles both combined span and individual col/row span values.
- *
- * @param span - Optional equal span for both rows and columns
- * @param colSpan - Optional column span value
- * @param rowSpan - Optional row span value
- * @returns CSS properties object with grid span values
- *
- * @example
- * ```ts
- * createGridSpanStyles(2) // => { gridColumn: "span 2", gridRow: "span 2" }
- * createGridSpanStyles(undefined, 3, 2) // => { gridColumn: "span 3", gridRow: "span 2" }
- * ```
- */
-export const createGridSpanStyles = (
-  span?: number,
-  colSpan?: number,
-  rowSpan?: number
-): React.CSSProperties => {
-  const gridStyles: React.CSSProperties = {}
-
-  if (span !== undefined) {
-    gridStyles.gridColumn = `span ${span}`
-    gridStyles.gridRow = `span ${span}`
-  } else {
-    if (colSpan !== undefined) {
-      gridStyles.gridColumn = `span ${colSpan}`
-    }
-    if (rowSpan !== undefined) {
-      gridStyles.gridRow = `span ${rowSpan}`
-    }
-  }
-
-  return gridStyles
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
deleted file mode 100644
index 6ae245d3..00000000
--- a/src/utils/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @file Utility Exports (utils/index.ts)
- * @description Utility functions for baseline-kit operations
- * @module baseline-kit/utils
- */
-
-// Unit Conversion & Math
-export * from './convert'
-export * from './math'
-
-// Layout Utilities
-export * from './normalize'
-export * from './padding'
-export * from './snapping'
-export * from './grid'
-
-// DOM & Style Utilities
-export * from './merge'
-export * from './parse'
-export * from './timing'
-
-// SSR Compatibility Utilities
-export * from './ssr'
diff --git a/src/utils/math.ts b/src/utils/math.ts
deleted file mode 100644
index e1c981f0..00000000
--- a/src/utils/math.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { convertValue } from './convert'
-
-/**
- * Calculates the modulo (remainder) of a CSS value when divided by a base unit.
- *
- * @param value - Input value (number or CSS string)
- * @param base - Base unit to calculate remainder against
- * @param options - Optional calculation controls
- * @returns Remainder in pixel units (e.g., "6px")
- */
-export function moduloize(
-  value: number | string | undefined,
-  base: number,
-  options?: { round?: boolean }
-): string {
-  const doRound = options?.round ?? true
-  const num =
-    value === undefined
-      ? 0
-      : typeof value === 'number'
-        ? value
-        : (convertValue(value) ?? 0)
-  const normalized = doRound ? Math.round(num) : num
-  const remainder = normalized % base
-  return `${remainder}px`
-}
-
-/**
- * Constrains a number within a specified range.
- *
- * @param value - Number to clamp
- * @param min - Minimum allowed value
- * @param max - Maximum allowed value
- * @returns Clamped value
- */
-export function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max)
-}
-
-/**
- * Rounds a number to specified precision.
- *
- * @param value - Number to round
- * @param precision - Decimal places (default: 0)
- * @returns Rounded number
- */
-export function round(value: number, precision = 0): number {
-  if (precision >= 0) {
-    return Number(
-      (Math.round(value * 10 ** precision) / 10 ** precision).toFixed(precision)
-    )
-  } else {
-    const factor = 10 ** Math.abs(precision)
-    return Math.round(value / factor) * factor
-  }
-}
-
-/** Parameters for row count calculation */
-type RowCountParams = {
-  /** Available height for the container */
-  height?: number
-  /** Top padding/offset value */
-  top: number
-  /** Bottom padding/offset value */
-  bottom: number
-  /** Base unit for calculations */
-  base: number
-}
-
-/**
- * Calculates the number of rows that fit in the available space.
- * Ensures at least one row is always returned.
- *
- * @param params - Parameters for calculation
- * @returns Number of rows that fit in the space
- */
-export function calculateRowCount(params: RowCountParams): number {
-  const { height, top, bottom, base } = params
-  const totalHeight = (height ?? 0) - (top + bottom)
-  return Math.max(1, Math.floor(totalHeight / base))
-}
diff --git a/src/utils/merge.ts b/src/utils/merge.ts
deleted file mode 100644
index 08bca715..00000000
--- a/src/utils/merge.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import * as React from 'react'
-
-/**
- * Combines class names, filtering out falsy values.
- *
- * @remarks
- * - Filters out false, null, undefined
- * - Trims whitespace
- * - Preserves order of classes
- *
- * @param classes - Array of potential class names
- * @returns Combined class string
- *
- * @example
- * ```ts
- * mergeClasses('btn', isActive && 'active', undefined)
- * // => "btn active"
- * ```
- */
-export const mergeClasses = (
-  ...classes: Array<string | boolean | undefined | null>
-): string => classes.filter(Boolean).join(' ').trim()
-
-/**
- * Combines multiple style objects with type safety.
- *
- * @remarks
- * - Preserves type information
- * - Handles undefined values
- * - Merges deeply nested styles
- *
- * @param styles - Array of style objects
- * @returns Combined style object
- *
- * @example
- * ```ts
- * mergeStyles(
- *   { color: 'red' },
- *   isLarge && { fontSize: '2em' },
- *   customStyles
- * )
- * ```
- */
-export const mergeStyles = <T extends React.CSSProperties>(
-  ...styles: Array<T | undefined>
-): T =>
-  Object.assign(
-    {},
-    ...styles.filter((style): style is T => style !== undefined)
-  )
-
-/**
- * Assigns a value to a React ref.
- */
-function assignRef<T>(
-  ref: React.Ref<T> | null | undefined,
-  node: T | null
-): void {
-  if (!ref) return
-  if (typeof ref === 'function') {
-    ref(node)
-  } else {
-    try {
-      Object.assign(ref, { current: node })
-    } catch (error) {
-      console.error('Error assigning ref:', error)
-    }
-  }
-}
-
-/**
- * Merges multiple React refs into a single callback ref.
- *
- * @remarks
- * Handles:
- * - Function refs
- * - Object refs
- * - Undefined/null refs
- *
- * @param refs - Array of refs to merge
- * @returns Combined ref callback
- *
- * @example
- * ```tsx
- * const Component = React.forwardRef((props, ref) => {
- *   const localRef = useRef(null);
- *   const combinedRef = mergeRefs(ref, localRef);
- *
- *   return <div ref={combinedRef} />;
- * });
- * ```
- */
-export function mergeRefs<T>(
-  ...refs: Array<React.Ref<T> | null | undefined>
-): React.RefCallback<T> {
-  return (node: T | null) => {
-    refs.forEach((ref) => {
-      assignRef(ref, node)
-    })
-  }
-}
-
-/**
- * Parameters for creating a style override
- */
-export type StyleOverrideParams = {
-  /** CSS variable key to potentially override */
-  key: string
-  /** Value to use if override is needed */
-  value: string
-  /** Default styles to compare against */
-  defaultStyles: Record<string, string>
-  /** Special case dimensions that should be skipped for specific values */
-  skipDimensions?: {
-    /** Dimensions that should be skipped when they're set to "fit-content" */
-    fitContent?: string[]
-    /** Dimensions that should be skipped when they're set to "auto" */
-    auto?: string[]
-    /** Dimensions that should be skipped when they're set to % values (like "100%") */
-    fullSize?: string[]
-  }
-}
-
-/**
- * Creates style overrides for CSS variables, conditionally based on comparison to defaults.
- * Only applies overrides when the value differs from the default, optimizing style objects.
- *
- * @param params - Style override parameters or individual arguments
- * @param value
- * @param defaultStyles
- * @returns Style object with override (if needed)
- *
- * @example
- * ```ts
- * // Object parameter style:
- * createStyleOverride({
- *   key: '--color',
- *   value: 'red',
- *   defaultStyles: { '--color': 'blue' }
- * })
- * // => { '--color': 'red' }
- *
- * // With dimension skipping:
- * createStyleOverride({
- *   key: '--width',
- *   value: 'fit-content',
- *   defaultStyles: { '--width': 'auto' },
- *   skipDimensions: { fitContent: ['--width', '--height'] }
- * })
- * // => {}
- *
- * // Legacy style with separate arguments:
- * createStyleOverride('--color', 'red', { '--color': 'blue' })
- * // => { '--color': 'red' }
- * ```
- */
-export function createStyleOverride(
-  params: StyleOverrideParams | string,
-  value?: string,
-  defaultStyles?: Record<string, string>
-): Record<string, string | number> {
-  // Handle both object parameter and individual arguments for backward compatibility
-  const key = typeof params === 'string' ? params : params.key
-  const val = typeof params === 'string' ? value! : params.value
-  const defaults =
-    typeof params === 'string' ? defaultStyles! : params.defaultStyles
-  const skipDimensions =
-    typeof params === 'object' ? params.skipDimensions : undefined
-
-  // Skip dimensions based on specific values
-  if (skipDimensions) {
-    // Skip 'fit-content' dimensions (Box, Spacer patterns)
-    if (skipDimensions.fitContent?.includes(key) && val === 'fit-content') {
-      return {}
-    }
-
-    // Skip 'auto' dimensions (Stack, Layout patterns)
-    if (skipDimensions.auto?.includes(key) && val === 'auto') {
-      return {}
-    }
-
-    // Skip '100%' or '100vh/vw' dimensions (Guide, some Spacer patterns)
-    if (
-      skipDimensions.fullSize?.includes(key) &&
-      (val === '100%' || val === '100vh' || val === '100vw')
-    ) {
-      return {}
-    }
-  }
-
-  // Only apply override if value differs from default
-  return val !== defaults[key] ? { [key]: val } : {}
-}
diff --git a/src/utils/normalize.ts b/src/utils/normalize.ts
deleted file mode 100644
index 60cd9928..00000000
--- a/src/utils/normalize.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { convertValue } from './convert'
-import { clamp } from './math'
-
-export interface NormalizationOptions {
-  /** Base unit for normalization */
-  base?: number
-  /** Whether to round to nearest base multiple */
-  round?: boolean
-  /** Optional value clamping */
-  clamp?: { min?: number; max?: number }
-  /** Suppress warning messages */
-  suppressWarnings?: boolean
-}
-
-/**
- * Normalizes CSS values to a consistent format based on base unit.
- *
- * @param value - Value to normalize
- * @param options - Normalization configuration
- * @returns Normalized numeric value
- */
-export function normalizeValue(
-  value: string | number | undefined,
-  options: NormalizationOptions = {}
-): number {
-  const {
-    base = 8,
-    round: doRound = true,
-    clamp: clampOptions,
-    suppressWarnings = false,
-  } = options
-
-  // Handle special cases
-  if (value === 'auto') return base
-
-  // Convert to number
-  let num: number | null = null
-  if (typeof value === 'number') {
-    num = value
-  } else if (typeof value === 'string') {
-    const conv = convertValue(value)
-    if (conv === null) {
-      if (!suppressWarnings && process.env.NODE_ENV === 'development') {
-        console.error(
-          `Failed to convert "${value}" to pixels. Falling back to base ${base}.`
-        )
-      }
-      num = base
-    } else {
-      num = conv
-    }
-  }
-  if (num === null) num = base
-
-  // Guard against division by zero
-  if (base <= 0) return num
-
-  // Apply normalization
-  const normalized = doRound ? Math.round(num / base) * base : num
-
-  // Apply clamping if needed
-  const clamped =
-    clampOptions !== undefined
-      ? clamp(
-          normalized,
-          clampOptions.min ?? -Infinity,
-          clampOptions.max ?? Infinity
-        )
-      : normalized
-
-  // Warn about adjustments
-  if (
-    !suppressWarnings &&
-    clamped !== num &&
-    process.env.NODE_ENV === 'development'
-  ) {
-    console.warn(`Normalized ${num} to ${clamped} to match base ${base}px.`)
-  }
-
-  return clamped
-}
-
-/**
- * Normalizes a pair of CSS values.
- *
- * @param values - Tuple of values to normalize
- * @param defaults - Default values if input is undefined
- * @param options - Normalization options
- * @returns Tuple of normalized values
- */
-export function normalizeValuePair(
-  values:
-    | [string | number | undefined, string | number | undefined]
-    | undefined,
-  defaults: [number, number],
-  options?: NormalizationOptions
-): [number, number] {
-  if (!values) return defaults
-
-  if (values[0] === undefined && values[1] === undefined) {
-    return defaults
-  }
-
-  const first =
-    values[0] !== undefined ? normalizeValue(values[0], options) : defaults[0]
-  const second =
-    values[1] !== undefined ? normalizeValue(values[1], options) : defaults[1]
-  return [first, second]
-}
diff --git a/src/utils/padding.ts b/src/utils/padding.ts
deleted file mode 100644
index 2e1be8f8..00000000
--- a/src/utils/padding.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Padding, PaddingValue, Spacing, SpacingProps } from '@components'
-
-/**
- * Extract numeric top, right, bottom, left (in px) from `padding` or `block/inline`.
- * @param spacing - The props which may include padding, block, inline
- * @returns { top, right, bottom, left } with 0 defaults
- *
- * Priority (if padding is defined, it overrides block/inline):
- * - If `padding` is present, parse it fully (4 edges).
- * - Otherwise, parse `block` for top/bottom and `inline` for left/right.
- */
-export function parsePadding(spacing: SpacingProps): Padding {
-  if ('padding' in spacing && spacing.padding != null) {
-    return parsePaddingValue(spacing.padding)
-  }
-
-  // Otherwise, parse block/inline separately
-  const blockEdges =
-    'block' in spacing && spacing.block != null
-      ? parseBlock(spacing.block)
-      : { top: 0, bottom: 0 }
-  const inlineEdges =
-    'inline' in spacing && spacing.inline != null
-      ? parseInline(spacing.inline)
-      : { left: 0, right: 0 }
-
-  // Merge partial edges
-  return {
-    top: blockEdges.top,
-    right: inlineEdges.right,
-    bottom: blockEdges.bottom,
-    left: inlineEdges.left,
-  }
-}
-
-/**
- * Parses `padding` of various shapes to { top, right, bottom, left } in px.
- *
- * @param padding - number | [block, inline] | [top, right, bottom, left] | { start?: number; end?: number; left?: number; right?: number }
- */
-function parsePaddingValue(padding: PaddingValue): Padding {
-  if (typeof padding === 'number') {
-    return { top: padding, right: padding, bottom: padding, left: padding }
-  }
-
-  if (Array.isArray(padding)) {
-    const len = padding.length
-    if (len === 2) {
-      const [block, inline] = padding as [number, number]
-      return { top: block, right: inline, bottom: block, left: inline }
-    }
-    if (len === 3) {
-      const [top, inline, bottom] = padding as [number, number, number]
-      return {
-        top: top ?? 0,
-        right: inline ?? 0,
-        bottom: bottom ?? 0,
-        left: inline ?? 0,
-      }
-    }
-    if (len >= 4) {
-      const [top, right, bottom, left] = padding as [number, number, number, number]
-      return {
-        top: top ?? 0,
-        right: right ?? 0,
-        bottom: bottom ?? 0,
-        left: left ?? 0,
-      }
-    }
-  }
-
-  if (typeof padding === 'object' && !Array.isArray(padding)) {
-    // possible keys: top, bottom, left, right, start, end
-    // interpret start => top, end => bottom if you prefer
-    const top = padding.top ?? 0
-    const bottom = padding.bottom ?? 0
-    const left = padding.left ?? 0
-    const right = padding.right ?? 0
-    return { top, right, bottom, left }
-  }
-
-  // fallback
-  return { top: 0, right: 0, bottom: 0, left: 0 }
-}
-
-/**
- * Parses `block` of various shapes to { top, bottom } in px.
- * @param block - number | [top, bottom] | { start?: number; end?: number }
- */
-function parseBlock(block: Spacing): Pick<Padding, 'top' | 'bottom'> {
-  if (typeof block === 'number') {
-    return { top: block, bottom: block }
-  }
-
-  // [top, bottom]
-  if (Array.isArray(block)) {
-    const [top, bottom] = block
-    return {
-      top: top ?? 0,
-      bottom: bottom ?? 0,
-    }
-  }
-
-  // object { start, end }
-  if (typeof block === 'object') {
-    return {
-      top: block.start ?? 0,
-      bottom: block.end ?? 0,
-    }
-  }
-
-  return { top: 0, bottom: 0 }
-}
-
-/**
- * Parses `inline` of various shapes to { left, right } in px.
- * @param inline - number | [left, right] | { start?: number; end?: number }
- */
-function parseInline(inline: Spacing): Pick<Padding, 'left' | 'right'> {
-  if (typeof inline === 'number') {
-    return { left: inline, right: inline }
-  }
-
-  if (Array.isArray(inline)) {
-    const [left, right] = inline
-    return {
-      left: left ?? 0,
-      right: right ?? 0,
-    }
-  }
-
-  if (typeof inline === 'object') {
-    return {
-      left: inline.start ?? 0,
-      right: inline.end ?? 0,
-    }
-  }
-
-  return { left: 0, right: 0 }
-}
diff --git a/src/utils/parse.ts b/src/utils/parse.ts
deleted file mode 100644
index 2e85eb79..00000000
--- a/src/utils/parse.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Parses a CSS unit string into its numeric value and unit.
- *
- * @param value - CSS value string to parse
- * @returns Object with value and unit, or null if parsing fails
- */
-export function parseUnit(
-  value: string
-): { value: number; unit: string } | null {
-  const match = value.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/)
-  if (!match) return null
-  const num = parseFloat(match[1])
-  const unit = match[2]
-  return { value: num, unit }
-}
-
-/**
- * Formats a value as a valid CSS string.
- *
- * @param value - Value to format
- * @param defaultValue - Optional default if value is undefined
- * @returns Formatted CSS string
- */
-export function formatValue(
-  value: string | number | undefined,
-  defaultValue?: number
-): string {
-  if (value === undefined && defaultValue !== undefined)
-    return `${defaultValue}px`
-  if (
-    value === 'auto' ||
-    (typeof value === 'string' &&
-      /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(value))
-  ) {
-    return String(value)
-  }
-  if (typeof value === 'number') return `${value}px`
-  return value ?? ''
-}
diff --git a/src/utils/snapping.ts b/src/utils/snapping.ts
deleted file mode 100644
index be914552..00000000
--- a/src/utils/snapping.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { SnappingMode, Padding, PaddingValue } from '@components'
-import { parsePadding } from '@/utils/padding'
-
-/**
- * Calculates spacing adjustments to maintain baseline grid alignment.
- *
- * @remarks
- * Provides different snapping behaviors:
- * - none: No adjustments
- * - height: Adjusts bottom padding only
- * - clamp: Adjusts both top and bottom padding
- *
- * @param height - Measured element height
- * @param base - Grid base unit
- * @param initial - Initial spacing values
- * @param snapping - Snapping mode to apply
- * @returns Adjusted spacing values
- *
- * @example
- * ```ts
- * // Height snapping mode
- * calculateSnappedSpacing(46, 8, { top: 10, bottom: 10 }, 'height')
- * // => { top: 10, right: 0, bottom: 12, left: 0 }
- *
- * // Clamp mode
- * calculateSnappedSpacing(45, 8, { top: 10, bottom: 6 }, 'clamp')
- * // => { top: 2, right: 0, bottom: 1, left: 0 }
- * ```
- */
-export function calculateSnappedSpacing(
-  height: number,
-  base: number,
-  initial: PaddingValue,
-  snapping: SnappingMode
-): Padding {
-  const pad: Padding = parsePadding({ padding: initial })
-
-  if (snapping === 'none') {
-    return pad
-  }
-
-  if (snapping === 'height') {
-    const remainder = height % base
-    if (remainder !== 0) {
-      pad.bottom += base - remainder
-    }
-  }
-
-  if (snapping === 'clamp') {
-    pad.top = pad.top % base
-    const remainder = height % base
-    if (remainder !== 0) {
-      pad.bottom += base - remainder
-    }
-    pad.bottom = pad.bottom % base
-  }
-
-  return pad
-}
diff --git a/src/utils/ssr.tsx b/src/utils/ssr.tsx
deleted file mode 100644
index 84a76e26..00000000
--- a/src/utils/ssr.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * SSR (Server-Side Rendering) utility functions for baseline-kit.
- */
-import * as React from 'react'
-import { useIsClient } from '../hooks/useIsClient'
-
-/**
- * Detects if code is running in a server-side environment
- */
-export const isSSR = typeof window === 'undefined'
-
-/**
- * Default dimensions to use during server-side rendering
- */
-export const SSR_DIMENSIONS = {
-  width: 1024,
-  height: 768,
-}
-
-/**
- * Safe window-using function that works in both server and client
- * @param clientFn Function that uses window/browser APIs
- * @param fallback Fallback value to use in SSR environment
- * @returns Result of clientFn in browser, fallback in SSR
- */
-export function safeClientValue<T>(clientFn: () => T, fallback: T): T {
-  if (isSSR) {
-    return fallback
-  }
-
-  try {
-    return clientFn()
-  } catch {
-    return fallback
-  }
-}
-
-/**
- * Returns a stable value during SSR and initial render, then switches to
- * the dynamic value after hydration
- * @param isHydrated Boolean indicating if component is hydrated
- * @param ssrValue Value to use during SSR/initial render
- * @param dynamicValue Value to use after hydration
- */
-export function hydratedValue<T>(
-  isHydrated: boolean,
-  ssrValue: T,
-  dynamicValue: T
-): T {
-  return !isHydrated || isSSR ? ssrValue : dynamicValue
-}
-
-/**
- * ClientOnly component props
- * @internal
- */
-interface ClientOnlyProps {
-  /**
-   * Content to render when on the client-side
-   */
-  children: React.ReactNode
-  /**
-   * Optional fallback to show during SSR
-   */
-  fallback?: React.ReactNode
-}
-
-/**
- * A utility component that only renders its children on the client side.
- * @internal Not part of the public API
- */
-export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
-  const isClient = useIsClient()
-
-  if (!isClient) {
-    return <>{fallback}</>
-  }
-
-  return <>{children}</>
-}
diff --git a/src/utils/timing.ts b/src/utils/timing.ts
deleted file mode 100644
index 951a4d14..00000000
--- a/src/utils/timing.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Creates a debounced version of a function.
- *
- * @remarks
- * Useful for:
- * - Handling rapid event sequences
- * - Limiting API calls
- * - Performance optimization
- *
- * @param fn - Function to debounce
- * @param delay - Delay in milliseconds
- * @returns Debounced function
- *
- * @example
- * ```ts
- * const handleResize = debounce(() => {
- *   // Expensive calculation
- * }, 100);
- *
- * window.addEventListener('resize', handleResize);
- * ```
- */
-export const debounce = <T extends (...args: unknown[]) => void>(
-  fn: T,
-  delay: number
-): [T, () => void] => {
-  let timer: ReturnType<typeof setTimeout> | null = null
-
-  const cancel = () => {
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
-  }
-
-  const debounced = ((...args) => {
-    cancel()
-    timer = setTimeout(() => fn(...args), delay)
-  }) as T
-
-  return [debounced, cancel]
-}
-
-/**
- * Creates a requestAnimationFrame-based throttled function.
- *
- * @remarks
- * Optimizes performance by:
- * - Limiting execution to animation frames
- * - Preventing rapid-fire calls
- * - Maintaining visual smoothness
- *
- * @param fn - Function to throttle
- * @returns RAF-throttled function
- *
- * @example
- * ```ts
- * const updateScroll = rafThrottle(() => {
- *   // Update scroll position
- * });
- *
- * document.addEventListener('scroll', updateScroll);
- * ```
- */
-export const rafThrottle = <T extends (...args: never[]) => void>(fn: T): T => {
-  let rafId: number | null = null
-  let lastArgs: Parameters<T> | null = null
-
-  const throttled = (...args: Parameters<T>) => {
-    lastArgs = args
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-    }
-
-    rafId = requestAnimationFrame(() => {
-      fn(...lastArgs!)
-      rafId = null
-      lastArgs = null
-    })
-  }
-
-  return throttled as T
-}
diff --git a/tests/hooks/useVirtual.test.ts b/tests/hooks/useVirtual.test.ts
index a8d8f88c..93542913 100644
--- a/tests/hooks/useVirtual.test.ts
+++ b/tests/hooks/useVirtual.test.ts
@@ -1,6 +1,5 @@
 import { renderHook, act } from '@testing-library/react'
 import { useVirtual } from '@hooks'
-import { testUtils } from '../setup'
 
 // Create a map to simulate IntersectionObserver callbacks.
 const observerMap = new Map<HTMLElement, IntersectionObserverCallback>()
diff --git a/vitest.config.ts b/vitest.config.ts
index 64807182..eed3cf46 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -13,7 +13,7 @@ export default defineConfig({
       exclude: [
         'demo/**/*',
         'tests/**/*',
-        'src/**/index.ts',
+        'packages/**/index.ts',
         'node_modules/**/*',
         '**/*.d.ts',
         '**/*.js',

From 1f56ce4b943946d15b63f7a3e34908f43f735043 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 22:03:14 +0000
Subject: [PATCH 09/18] refactor: improve core purity and extract
 framework-agnostic logic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Core purity improvements:
- convert.ts: lazy viewport resolution instead of module-load-time window access
- convert.ts: use mapping object for relative unit resolution (replaces switch)
- normalize.ts: remove console.warn/error and process.env.NODE_ENV coupling
- padding.ts: simplify parsePaddingValue with CSS-like shorthand logic
- config/merge.ts: use loop for repetitive shallow merges
- config/schema.ts: rename Colors → DebugColors for clarity
- validation/guide.ts: use direct imports to avoid circular dependency

Extract pure logic from React hooks to core:
- Move 130-line grid calculation from useGuide hook → core calculateGuideTemplate()
- useGuide hook reduced to 5 lines (useMemo wrapping the core function)
- useBaseline: remove console.warn/process.env, deprecate warnOnMisalignment
- GuideResult type now lives in core (re-exported from react)

Bundle size reduced ~5% (ESM: 36.09→34.28 kB, CJS: 26.49→25.23 kB)

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/config/merge.ts       |  19 ++-
 packages/core/src/config/schema.ts      |  28 ++---
 packages/core/src/utils/convert.ts      |  42 ++++---
 packages/core/src/utils/grid.ts         | 130 +++++++++++++++++++
 packages/core/src/utils/normalize.ts    |  34 +----
 packages/core/src/utils/padding.ts      |  38 ++----
 packages/core/src/validation/guide.ts   |   3 +-
 packages/react/src/hooks/useBaseline.ts |  18 +--
 packages/react/src/hooks/useGuide.ts    | 159 +-----------------------
 tests/hooks/useBaseline.test.ts         |  13 +-
 tests/utils/normalize.test.ts           |  18 +--
 11 files changed, 202 insertions(+), 300 deletions(-)

diff --git a/packages/core/src/config/merge.ts b/packages/core/src/config/merge.ts
index 15b43eec..4f7bc6a1 100644
--- a/packages/core/src/config/merge.ts
+++ b/packages/core/src/config/merge.ts
@@ -12,18 +12,17 @@ type MergeConfigParams = {
   padder?: Partial<ConfigSchema['padder']>
 }
 
+const COMPONENT_KEYS = ['baseline', 'guide', 'spacer', 'box', 'stack', 'layout', 'padder'] as const
+
 export const mergeConfig = (params: MergeConfigParams): ConfigSchema => {
-  const { parentConfig, base, baseline, guide, spacer, box, stack, layout, padder } = params
-  return {
-    base: base ?? parentConfig.base,
-    baseline: { ...parentConfig.baseline, ...baseline },
-    guide: { ...parentConfig.guide, ...guide },
-    spacer: { ...parentConfig.spacer, ...spacer },
-    box: { ...parentConfig.box, ...box },
-    stack: { ...parentConfig.stack, ...stack },
-    layout: { ...parentConfig.layout, ...layout },
-    padder: { ...parentConfig.padder, ...padder },
+  const { parentConfig, base } = params
+  const merged = {} as Record<string, unknown>
+
+  for (const key of COMPONENT_KEYS) {
+    merged[key] = { ...parentConfig[key], ...params[key] }
   }
+
+  return { base: base ?? parentConfig.base, ...merged } as ConfigSchema
 }
 
 type CSSVariablesParams = {
diff --git a/packages/core/src/config/schema.ts b/packages/core/src/config/schema.ts
index 0cfb9417..9bffe5e1 100644
--- a/packages/core/src/config/schema.ts
+++ b/packages/core/src/config/schema.ts
@@ -1,26 +1,14 @@
 import type { GuideVariant, BaselineVariant, Variant, DebuggingMode } from '../types'
 
-type Colors = {
-  line: string
-  flat: string
-  text: string
-}
+type DebugColors = { line: string; flat: string; text: string }
 
 export type ConfigSchema = {
   base: number
-  guide: {
-    variant: GuideVariant
-    debugging: DebuggingMode
-    colors: Record<GuideVariant, string>
-  }
-  baseline: {
-    variant: BaselineVariant
-    debugging: DebuggingMode
-    colors: Record<BaselineVariant, string>
-  }
-  stack: { colors: Colors; debugging: DebuggingMode }
-  layout: { colors: Colors; debugging: DebuggingMode }
-  spacer: { variant: Variant; debugging: DebuggingMode; colors: Colors }
-  box: { colors: Colors; debugging: DebuggingMode }
-  padder: { color: string; debugging: DebuggingMode }
+  baseline: { variant: BaselineVariant; debugging: DebuggingMode; colors: Record<BaselineVariant, string> }
+  guide: { variant: GuideVariant; debugging: DebuggingMode; colors: Record<GuideVariant, string> }
+  spacer: { variant: Variant; debugging: DebuggingMode; colors: DebugColors }
+  box: { debugging: DebuggingMode; colors: DebugColors }
+  stack: { debugging: DebuggingMode; colors: DebugColors }
+  layout: { debugging: DebuggingMode; colors: DebugColors }
+  padder: { debugging: DebuggingMode; color: string }
 }
diff --git a/packages/core/src/utils/convert.ts b/packages/core/src/utils/convert.ts
index c9139d85..edaef14d 100644
--- a/packages/core/src/utils/convert.ts
+++ b/packages/core/src/utils/convert.ts
@@ -8,14 +8,23 @@ export interface ConversionContext {
   parentFontSize?: number
 }
 
-const DEFAULT_CONTEXT: Required<ConversionContext> = {
+const STATIC_DEFAULTS: Required<ConversionContext> = {
   parentSize: 0,
-  viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1920,
-  viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 1080,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
   rootFontSize: 16,
   parentFontSize: 16,
 }
 
+function getDefaultContext(): Required<ConversionContext> {
+  if (typeof window === 'undefined') return STATIC_DEFAULTS
+  return {
+    ...STATIC_DEFAULTS,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+  }
+}
+
 export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
   px: 1,
   in: 96,
@@ -27,6 +36,16 @@ export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
 
 export const RELATIVE_UNITS: string[] = ['em', 'rem', 'vh', 'vw', 'vmin', 'vmax', '%']
 
+const RELATIVE_UNIT_RESOLVERS: Record<string, (ctx: Required<ConversionContext>) => number> = {
+  em: (ctx) => ctx.parentFontSize,
+  rem: (ctx) => ctx.rootFontSize,
+  vh: (ctx) => ctx.viewportHeight / 100,
+  vw: (ctx) => ctx.viewportWidth / 100,
+  vmin: (ctx) => Math.min(ctx.viewportWidth, ctx.viewportHeight) / 100,
+  vmax: (ctx) => Math.max(ctx.viewportWidth, ctx.viewportHeight) / 100,
+  '%': (ctx) => ctx.parentSize / 100,
+}
+
 export function convertValue(
   value: number | string | undefined,
   context?: ConversionContext
@@ -45,18 +64,11 @@ export function convertValue(
 
   if (unit === 'auto') return null
 
-  if (RELATIVE_UNITS.includes(unit)) {
-    const ctx = { ...DEFAULT_CONTEXT, ...context }
-    switch (unit) {
-      case 'em': return num * ctx.parentFontSize
-      case 'rem': return num * ctx.rootFontSize
-      case 'vh': return (num / 100) * ctx.viewportHeight
-      case 'vw': return (num / 100) * ctx.viewportWidth
-      case 'vmin': return (num / 100) * Math.min(ctx.viewportWidth, ctx.viewportHeight)
-      case 'vmax': return (num / 100) * Math.max(ctx.viewportWidth, ctx.viewportHeight)
-      case '%': return (num / 100) * ctx.parentSize
-      default: return null
-    }
+  const resolver = RELATIVE_UNIT_RESOLVERS[unit]
+  if (resolver) {
+    const ctx = { ...getDefaultContext(), ...context }
+    return num * resolver(ctx)
   }
+
   return null
 }
diff --git a/packages/core/src/utils/grid.ts b/packages/core/src/utils/grid.ts
index 61aad426..fe0e0695 100644
--- a/packages/core/src/utils/grid.ts
+++ b/packages/core/src/utils/grid.ts
@@ -1,3 +1,133 @@
+import type { GuideConfig, GuideColumnsPattern } from '../types'
+import { isValidGuidePattern } from '../validation/guide'
+import { normalizeValue } from './normalize'
+import { formatValue } from './parse'
+import { convertValue } from './convert'
+
+export interface GuideResult {
+  template: string
+  columnsCount: number
+  calculatedGap: number
+  isValid: boolean
+}
+
+const INVALID_RESULT: GuideResult = {
+  template: 'none',
+  columnsCount: 0,
+  calculatedGap: 0,
+  isValid: false,
+}
+
+/**
+ * Pure calculation of grid template from container width and guide config.
+ * Framework-agnostic — can be used outside React.
+ */
+export function calculateGuideTemplate(
+  width: number,
+  config: GuideConfig
+): GuideResult {
+  const variant = config.variant ?? 'line'
+  const base = config.base ?? 8
+  const gap = normalizeValue(config.gap ?? 0, { base })
+
+  if (!width) return INVALID_RESULT
+
+  switch (variant) {
+    case 'line': {
+      const finalGap = gap === 0 ? 0 : gap - 1
+      const actualGapWithLine = finalGap + 1
+
+      const columns = finalGap === 0
+        ? Math.max(1, Math.floor(width) + 1)
+        : Math.max(1, Math.floor((width + 1) / actualGapWithLine) + 1)
+
+      return {
+        template: `repeat(${columns}, 1px)`,
+        columnsCount: columns,
+        calculatedGap: gap > 0 ? gap - 1 : gap,
+        isValid: true,
+      }
+    }
+
+    case 'pattern': {
+      if (!config.columns || !Array.isArray(config.columns)) {
+        return INVALID_RESULT
+      }
+
+      if (!isValidGuidePattern(config.columns)) {
+        return INVALID_RESULT
+      }
+
+      const columnsArr = (config.columns as GuideColumnsPattern).map(
+        (col) => typeof col === 'number' ? `${col}px` : col
+      )
+
+      if (columnsArr.some((c) => c === '0' || c === '0px')) {
+        return INVALID_RESULT
+      }
+
+      return {
+        template: columnsArr.join(' '),
+        columnsCount: columnsArr.length,
+        calculatedGap: gap,
+        isValid: true,
+      }
+    }
+
+    case 'fixed': {
+      const colCount = typeof config.columns === 'number' ? config.columns : 0
+      if (colCount < 1) return INVALID_RESULT
+
+      const colWidth = config.columnWidth
+        ? formatValue(config.columnWidth)
+        : '1fr'
+
+      return {
+        template: `repeat(${colCount}, ${colWidth})`,
+        columnsCount: colCount,
+        calculatedGap: gap,
+        isValid: true,
+      }
+    }
+
+    case 'auto': {
+      const colWidth = config.columnWidth ?? 'auto'
+      if (colWidth === 'auto') {
+        return {
+          template: 'repeat(auto-fill, minmax(0, 1fr))',
+          columnsCount: 1,
+          calculatedGap: gap,
+          isValid: true,
+        }
+      }
+
+      const colWidthStr =
+        typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()
+      const pxVal = convertValue(colWidthStr) ?? 0
+      const columns = pxVal > 0
+        ? Math.max(1, Math.floor((width + gap) / (pxVal + gap)))
+        : 1
+
+      return {
+        template: `repeat(auto-fill, ${colWidthStr})`,
+        columnsCount: columns,
+        calculatedGap: gap,
+        isValid: true,
+      }
+    }
+
+    default: {
+      const columns = Math.max(1, Math.floor(width / (gap + 1)) + 1)
+      return {
+        template: `repeat(${columns}, 1px)`,
+        columnsCount: columns,
+        calculatedGap: gap,
+        isValid: true,
+      }
+    }
+  }
+}
+
 export const createGridSpanStyles = (
   span?: number,
   colSpan?: number,
diff --git a/packages/core/src/utils/normalize.ts b/packages/core/src/utils/normalize.ts
index 5d5fbd3b..6609a2ba 100644
--- a/packages/core/src/utils/normalize.ts
+++ b/packages/core/src/utils/normalize.ts
@@ -16,7 +16,6 @@ export function normalizeValue(
     base = 8,
     round: doRound = true,
     clamp: clampOptions,
-    suppressWarnings = false,
   } = options
 
   if (value === 'auto') return base
@@ -25,17 +24,7 @@ export function normalizeValue(
   if (typeof value === 'number') {
     num = value
   } else if (typeof value === 'string') {
-    const conv = convertValue(value)
-    if (conv === null) {
-      if (!suppressWarnings && process.env.NODE_ENV === 'development') {
-        console.error(
-          `Failed to convert "${value}" to pixels. Falling back to base ${base}.`
-        )
-      }
-      num = base
-    } else {
-      num = conv
-    }
+    num = convertValue(value) ?? base
   }
   if (num === null) num = base
 
@@ -43,24 +32,9 @@ export function normalizeValue(
 
   const normalized = doRound ? Math.round(num / base) * base : num
 
-  const clamped =
-    clampOptions !== undefined
-      ? clamp(
-          normalized,
-          clampOptions.min ?? -Infinity,
-          clampOptions.max ?? Infinity
-        )
-      : normalized
-
-  if (
-    !suppressWarnings &&
-    clamped !== num &&
-    process.env.NODE_ENV === 'development'
-  ) {
-    console.warn(`Normalized ${num} to ${clamped} to match base ${base}px.`)
-  }
-
-  return clamped
+  return clampOptions !== undefined
+    ? clamp(normalized, clampOptions.min ?? -Infinity, clampOptions.max ?? Infinity)
+    : normalized
 }
 
 export function normalizeValuePair(
diff --git a/packages/core/src/utils/padding.ts b/packages/core/src/utils/padding.ts
index 48c8cf46..03090a2d 100644
--- a/packages/core/src/utils/padding.ts
+++ b/packages/core/src/utils/padding.ts
@@ -28,37 +28,17 @@ function parsePaddingValue(padding: PaddingValue): Padding {
   }
 
   if (Array.isArray(padding)) {
-    const len = padding.length
-    if (len === 2) {
-      const [block, inline] = padding as [number, number]
-      return { top: block, right: inline, bottom: block, left: inline }
-    }
-    if (len === 3) {
-      const [top, inline, bottom] = padding as [number, number, number]
-      return {
-        top: top ?? 0,
-        right: inline ?? 0,
-        bottom: bottom ?? 0,
-        left: inline ?? 0,
-      }
-    }
-    if (len >= 4) {
-      const [top, right, bottom, left] = padding as [number, number, number, number]
-      return {
-        top: top ?? 0,
-        right: right ?? 0,
-        bottom: bottom ?? 0,
-        left: left ?? 0,
-      }
-    }
+    const [a = 0, b = 0, c, d] = padding
+    return { top: a, right: b, bottom: c ?? a, left: d ?? b }
   }
 
-  if (typeof padding === 'object' && !Array.isArray(padding)) {
-    const top = padding.top ?? 0
-    const bottom = padding.bottom ?? 0
-    const left = padding.left ?? 0
-    const right = padding.right ?? 0
-    return { top, right, bottom, left }
+  if (typeof padding === 'object') {
+    return {
+      top: padding.top ?? 0,
+      right: padding.right ?? 0,
+      bottom: padding.bottom ?? 0,
+      left: padding.left ?? 0,
+    }
   }
 
   return { top: 0, right: 0, bottom: 0, left: 0 }
diff --git a/packages/core/src/validation/guide.ts b/packages/core/src/validation/guide.ts
index f0c7ff55..6c2a2e84 100644
--- a/packages/core/src/validation/guide.ts
+++ b/packages/core/src/validation/guide.ts
@@ -1,5 +1,6 @@
 import type { GuideColumnsPattern, GuideColumnValue, GridAlignment, GuideConfig } from '../types'
-import { GRID_ALIGNMENTS, ABSOLUTE_UNIT_CONVERSIONS, RELATIVE_UNITS } from '..'
+import { GRID_ALIGNMENTS } from '../types'
+import { ABSOLUTE_UNIT_CONVERSIONS, RELATIVE_UNITS } from '../utils/convert'
 
 const UNIT_PATTERN =
   /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/
diff --git a/packages/react/src/hooks/useBaseline.ts b/packages/react/src/hooks/useBaseline.ts
index f102ae6d..f6491e5c 100644
--- a/packages/react/src/hooks/useBaseline.ts
+++ b/packages/react/src/hooks/useBaseline.ts
@@ -7,6 +7,7 @@ export interface BaselineOptions {
   base?: number
   snapping?: SnappingMode
   spacing?: Partial<Padding> | number
+  /** @deprecated No longer emits warnings. Check `isAligned` in the result instead. */
   warnOnMisalignment?: boolean
 }
 
@@ -25,7 +26,6 @@ export function useBaseline(
     base = 8,
     snapping = 'none',
     spacing = {},
-    warnOnMisalignment = false,
   }: BaselineOptions = {}
 ): BaselineResult {
   if (base < 1) {
@@ -34,25 +34,11 @@ export function useBaseline(
 
   const { height } = useMeasure(ref)
   const didSnapRef = React.useRef<boolean>(false)
-  const hasWarnedRef = React.useRef<boolean>(false)
 
   return React.useMemo(() => {
     const initialPadding = parsePadding({ padding: spacing })
     const isAligned = height % base === 0
 
-    if (
-      !isAligned &&
-      warnOnMisalignment &&
-      process.env.NODE_ENV === 'development'
-    ) {
-      if (!hasWarnedRef.current) {
-        console.warn(
-          `[useBaseline] Element height (${height}px) is not aligned with base (${base}px).`
-        )
-        hasWarnedRef.current = true
-      }
-    }
-
     if (snapping === 'none') {
       return { padding: initialPadding, isAligned, height }
     }
@@ -70,5 +56,5 @@ export function useBaseline(
     didSnapRef.current = true
 
     return { padding: finalPadding, isAligned, height }
-  }, [base, snapping, spacing, warnOnMisalignment, height])
+  }, [base, snapping, spacing, height])
 }
diff --git a/packages/react/src/hooks/useGuide.ts b/packages/react/src/hooks/useGuide.ts
index 27b603f2..b0fd3813 100644
--- a/packages/react/src/hooks/useGuide.ts
+++ b/packages/react/src/hooks/useGuide.ts
@@ -1,14 +1,9 @@
 import * as React from 'react'
-import type { GuideConfig, GuideColumnsPattern } from '@baseline-kit/core'
-import { isValidGuidePattern, normalizeValue, formatValue, convertValue } from '@baseline-kit/core'
+import type { GuideConfig } from '@baseline-kit/core'
+import { calculateGuideTemplate } from '@baseline-kit/core'
 import { useMeasure } from './useMeasure'
 
-export interface GuideResult {
-  template: string
-  columnsCount: number
-  calculatedGap: number
-  isValid: boolean
-}
+export type { GuideResult } from '@baseline-kit/core'
 
 /**
  * Hook for calculating grid layout parameters based on container dimensions.
@@ -16,151 +11,7 @@ export interface GuideResult {
 export function useGuide(
   ref: React.RefObject<HTMLElement | null>,
   config: GuideConfig
-): GuideResult {
+) {
   const { width } = useMeasure(ref)
-  const hasWarnedRef = React.useRef<boolean>(false)
-
-  return React.useMemo(() => {
-    const variant = config.variant ?? 'line'
-    const base = config.base ?? 8
-    const gap = normalizeValue(config.gap ?? 0, { base })
-
-    if (!width) {
-      return {
-        template: 'none',
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: false,
-      }
-    }
-
-    try {
-      switch (variant) {
-        case 'line': {
-          const finalGap = gap === 0 ? 0 : gap - 1
-          const actualGapWithLine = finalGap + 1
-
-          let columns: number
-
-          if (finalGap === 0) {
-            columns = Math.max(1, Math.floor(width) + 1)
-          } else {
-            columns = Math.max(
-              1,
-              Math.floor((width + 1) / actualGapWithLine) + 1
-            )
-          }
-
-          return {
-            template: `repeat(${columns}, 1px)`,
-            columnsCount: columns,
-            calculatedGap: gap > 0 ? gap - 1 : gap,
-            isValid: true,
-          }
-        }
-
-        case 'pattern': {
-          if (!config.columns || !Array.isArray(config.columns)) {
-            throw new Error('Missing or invalid pattern columns')
-          }
-
-          if (!isValidGuidePattern(config.columns)) {
-            throw new Error('Invalid "pattern" columns array')
-          }
-
-          const columnsArr = (config.columns as GuideColumnsPattern).map(
-            (col) => {
-              if (typeof col === 'number') return `${col}px`
-              return col
-            }
-          )
-
-          if (columnsArr.some((c) => c === '0' || c === '0px')) {
-            return {
-              template: 'none',
-              columnsCount: 0,
-              calculatedGap: 0,
-              isValid: false,
-            }
-          }
-
-          return {
-            template: columnsArr.join(' '),
-            columnsCount: columnsArr.length,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        case 'fixed': {
-          const colCount =
-            typeof config.columns === 'number' ? config.columns : 0
-          if (colCount < 1) {
-            throw new Error(`Invalid columns count: ${colCount}`)
-          }
-          const colWidth = config.columnWidth
-            ? formatValue(config.columnWidth)
-            : '1fr'
-
-          return {
-            template: `repeat(${colCount}, ${colWidth})`,
-            columnsCount: colCount,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        case 'auto': {
-          const colWidth = config.columnWidth ?? 'auto'
-          if (colWidth === 'auto') {
-            return {
-              template: 'repeat(auto-fill, minmax(0, 1fr))',
-              columnsCount: 1,
-              calculatedGap: gap,
-              isValid: true,
-            }
-          }
-          const colWidthStr =
-            typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()
-
-          const pxVal = convertValue(colWidthStr) ?? 0
-          const columns =
-            pxVal > 0
-              ? Math.max(1, Math.floor((width + gap) / (pxVal + gap)))
-              : 1
-
-          return {
-            template: `repeat(auto-fill, ${colWidthStr})`,
-            columnsCount: columns,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-
-        default: {
-          if (!hasWarnedRef.current) {
-            console.warn(
-              `[useGuide] Unknown variant "${variant}". Falling back to "line".`
-            )
-            hasWarnedRef.current = true
-          }
-          const columns = Math.max(1, Math.floor(width / (gap + 1)) + 1)
-          return {
-            template: `repeat(${columns}, 1px)`,
-            columnsCount: columns,
-            calculatedGap: gap,
-            isValid: true,
-          }
-        }
-      }
-    } catch (error) {
-      console.warn('Error in useGuide:', error)
-      return {
-        template: 'none',
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: false,
-      }
-    }
-  }, [config, width])
+  return React.useMemo(() => calculateGuideTemplate(width, config), [config, width])
 }
diff --git a/tests/hooks/useBaseline.test.ts b/tests/hooks/useBaseline.test.ts
index 15f0f061..b78b8437 100644
--- a/tests/hooks/useBaseline.test.ts
+++ b/tests/hooks/useBaseline.test.ts
@@ -124,23 +124,16 @@ describe('useBaseline', () => {
     ).toThrow()
   })
 
-  it('logs a warning when not aligned and warnOnMisalignment is true in development', () => {
-    const originalEnv = process.env.NODE_ENV
-    process.env.NODE_ENV = 'development'
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {
-    })
+  it('reports misalignment via isAligned when height does not match base', () => {
     useMeasureSpy.mockReturnValue({ width: 100, height: 42 }) // 42 % 8 = 2, not aligned.
     const ref = { current: document.createElement('div') }
-    renderHook(() =>
+    const { result } = renderHook(() =>
       useBaseline(ref, {
         base: 8,
         snapping: 'none',
         spacing: { top: 1, bottom: 1, left: 1, right: 1 },
-        warnOnMisalignment: true,
       }),
     )
-    expect(warnSpy).toHaveBeenCalled()
-    warnSpy.mockRestore()
-    process.env.NODE_ENV = originalEnv
+    expect(result.current.isAligned).toBe(false)
   })
 })
\ No newline at end of file
diff --git a/tests/utils/normalize.test.ts b/tests/utils/normalize.test.ts
index 374ab126..c705765b 100644
--- a/tests/utils/normalize.test.ts
+++ b/tests/utils/normalize.test.ts
@@ -27,24 +27,12 @@ describe('Normalization Utils', () => {
       expect(normalizeValue(6, { base: 8, clamp: { min: 8 } })).toBe(8)
     })
 
-    it('suppresses warnings when suppressWarnings is true', () => {
-      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {
-      })
-      normalizeValue(14, { base: 8, clamp: { max: 12 }, suppressWarnings: true })
+    it('does not emit console warnings during normalization', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      normalizeValue(14, { base: 8, clamp: { max: 12 } })
       expect(warnSpy).not.toHaveBeenCalled()
       warnSpy.mockRestore()
     })
-
-    it('logs a warning when the normalized value is clamped and warnings are not suppressed', () => {
-      const originalEnv = process.env.NODE_ENV
-      process.env.NODE_ENV = 'development'
-      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {
-      })
-      normalizeValue(14, { base: 8, clamp: { max: 12 }, suppressWarnings: false })
-      expect(warnSpy).toHaveBeenCalled()
-      warnSpy.mockRestore()
-      process.env.NODE_ENV = originalEnv
-    })
   })
 
   describe('normalizeValuePair', () => {

From 0f41d8361c2eb0be1b9b3c6265c5e048796b46a2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 22:05:33 +0000
Subject: [PATCH 10/18] refactor: eliminate Guide type duplication, use core
 GuideConfig directly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Delete packages/react/src/components/Guide/types.ts (150 lines)
- Guide.tsx now imports GuideConfig from @baseline-kit/core directly
- Remove type cast (as CoreGuideConfig) — no longer needed
- Simplify createGridConfig: flatten params, remove intermediate type wrapper

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/react/src/components/Guide/Guide.tsx |  83 +++-------
 packages/react/src/components/Guide/types.ts  | 150 ------------------
 2 files changed, 19 insertions(+), 214 deletions(-)
 delete mode 100644 packages/react/src/components/Guide/types.ts

diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
index 42efbed7..4f008204 100644
--- a/packages/react/src/components/Guide/Guide.tsx
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -8,12 +8,10 @@ import {
 } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
-import type { AutoConfig, FixedConfig, LineConfig, PatternConfig } from './types'
-import type { GuideVariant, GuideConfig as CoreGuideConfig } from '@baseline-kit/core'
+import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
-/** Merged configuration types that support various grid layout strategies */
-export type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig
+export type { GuideConfig }
 
 export type GuideProps = {
   /** Controls horizontal alignment of columns within the container */
@@ -37,65 +35,35 @@ export type GuideProps = {
 } & ComponentsProps &
   Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>
 
-/** Parameters for creating a grid configuration */
-type GridConfigParams = {
-  variant: GuideVariant
-  base: number
-  gap: number
-  columns?: number | readonly (string | number | undefined | 'auto')[]
-  columnWidth?: React.CSSProperties['width']
-}
-
 /**
- * Creates a grid configuration based on the specified variant and parameters
- * Internal helper function for Guide component
+ * Creates a grid configuration based on the specified variant and parameters.
  */
 const createGridConfig = (
-  params: GridConfigParams
-): PatternConfig | AutoConfig | FixedConfig | LineConfig => {
-  const { variant, base, gap, columns, columnWidth } = params
-
+  variant: GuideVariant,
+  base: number,
+  gap: number,
+  columns?: number | readonly (string | number | undefined | 'auto')[],
+  columnWidth?: React.CSSProperties['width'],
+): GuideConfig => {
   switch (variant) {
     case 'line':
-      return {
-        variant: 'line',
-        gap,
-        base,
-      } as LineConfig
+      return { variant: 'line', gap, base }
 
     case 'pattern':
       if (columns && Array.isArray(columns)) {
-        return {
-          variant: 'pattern',
-          columns: columns as readonly (string | number)[],
-          gap,
-          base,
-        } as PatternConfig
+        return { variant: 'pattern', columns: columns as readonly (string | number)[], gap, base }
       }
       break
 
     case 'fixed':
       if (columns !== undefined) {
-        const parsedColumns =
-          typeof columns === 'number' ? columns : parseInt(String(columns), 10)
-        return {
-          variant: 'fixed',
-          columns: !isNaN(parsedColumns) ? parsedColumns : 12,
-          columnWidth: columnWidth || '60px',
-          gap,
-          base,
-        } as FixedConfig
+        const parsedColumns = typeof columns === 'number' ? columns : parseInt(String(columns), 10)
+        return { variant: 'fixed', columns: !isNaN(parsedColumns) ? parsedColumns : 12, columnWidth: columnWidth || '60px', gap, base }
       }
       break
   }
 
-  // Default to auto columns if no valid configuration was created
-  return {
-    variant: 'auto',
-    columnWidth: columnWidth || '1fr',
-    gap,
-    base,
-  } as AutoConfig
+  return { variant: 'auto', columnWidth: columnWidth || '1fr', gap, base }
 }
 
 /** Creates default guide styles */
@@ -281,26 +249,13 @@ const GuideImpl = React.memo(function GuideImpl({
     }
   }, [refresh])
 
-  // Create guide configuration based on variant
-  const gridConfig = React.useMemo(() => {
-    // Ensure we have valid values for the grid configuration
-    const safeVariant = variant as GuideVariant
-    const safeGap = typeof gap === 'number' ? gap : 0
-
-    return createGridConfig({
-      variant: safeVariant,
-      base: config.base,
-      gap: safeGap,
-      columns,
-      columnWidth,
-    })
-  }, [variant, config.base, gap, columns, columnWidth])
-
-  const { template, columnsCount, calculatedGap } = useGuide(
-    containerRef,
-    gridConfig as CoreGuideConfig
+  const gridConfig = React.useMemo(
+    () => createGridConfig(variant as GuideVariant, config.base, typeof gap === 'number' ? gap : 0, columns, columnWidth),
+    [variant, config.base, gap, columns, columnWidth]
   )
 
+  const { template, columnsCount, calculatedGap } = useGuide(containerRef, gridConfig)
+
   const defaultStyles = React.useMemo(
     () => createDefaultGuideStyles(config.base, config.colors.line),
     [config.base, config.colors.line]
diff --git a/packages/react/src/components/Guide/types.ts b/packages/react/src/components/Guide/types.ts
deleted file mode 100644
index ca4db212..00000000
--- a/packages/react/src/components/Guide/types.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * @file types.ts
- * @description Type definitions for Guide component configurations
- * @module baseline-kit/components/Guide/types
- */
-
-import * as React from 'react'
-import type { GuideColumnsPattern } from '@baseline-kit/core'
-
-/**
- * Base configuration shared by all guide variants.
- *
- * @example
- * ```ts
- * const baseConfig: BaseGuideConfig = {
- *   gap: 2,     // 2px gap
- *   base: 8     // 8px base unit
- * }
- * ```
- */
-type BaseGuideConfig = {
-  /** Gap between columnms. */
-  gap?: React.CSSProperties['gap']
-
-  /**
-   * Base unit in pixels for spacing calculations.
-   * Typically inherited from theme configuration.
-   */
-  base?: number
-}
-
-/**
- * Pattern-based grid configuration.
- * Defines repeating column width patterns.
- *
- * @example
- * ```ts
- * // Three-column pattern: 100px | 200px | 100px
- * const pattern: PatternConfig = {
- *   variant: 'pattern',
- *   columns: [100, '200px', '1fr'],
- *   gap: 2
- * }
- *
- * // Responsive pattern with mixed units
- * const responsive: PatternConfig = {
- *   variant: 'pattern',
- *   columns: ['20%', '1fr', '200px'],
- *   gap: 2
- * }
- * ```
- */
-export type PatternConfig = BaseGuideConfig & {
-  /** Identifies this as a pattern-based configuration */
-  variant: 'pattern'
-  /** Array of column widths that repeat */
-  columns: GuideColumnsPattern
-  /** Not applicable in pattern mode */
-  columnWidth?: never
-}
-
-/**
- * Fixed-column grid configuration.
- * Specifies exact number of equal-width columns.
- *
- * @example
- * ```ts
- * // Basic 12-column grid
- * const grid: FixedConfig = {
- *   variant: 'fixed',
- *   columns: 12,
- *   gap: 2
- * }
- *
- * // Fixed-width columns
- * const fixed: FixedConfig = {
- *   variant: 'fixed',
- *   columns: 6,
- *   columnWidth: '160px',
- *   gap: 2
- * }
- * ```
- */
-export type FixedConfig = BaseGuideConfig & {
-  /** Identifies this as a fixed-column configuration */
-  variant: 'fixed'
-  /** Number of columns to create */
-  columns: number
-  /** Optional fixed width for all columns */
-  columnWidth?: React.CSSProperties['width']
-}
-
-/**
- * Auto-calculated grid configuration.
- * Creates as many columns as will fit given a column width.
- *
- * @example
- * ```ts
- * // Auto-fill columns of 200px
- * const auto: AutoConfig = {
- *   variant: 'auto',
- *   columnWidth: '200px',
- *   gap: 2
- * }
- *
- * // Responsive columns with minimum width
- * const responsive: AutoConfig = {
- *   variant: 'auto',
- *   columnWidth: 'minmax(200px, 1fr)',
- *   gap: 2
- * }
- * ```
- */
-export type AutoConfig = BaseGuideConfig & {
-  /** Identifies this as an auto-calculated configuration */
-  variant: 'auto'
-  /** Desired width for each column */
-  columnWidth: React.CSSProperties['columnWidth']
-  /** Not applicable in auto mode */
-  columns?: never
-}
-
-/**
- * Simple line-based guide configuration.
- * Creates evenly-spaced vertical lines.
- *
- * @example
- * ```ts
- * // Basic line guide
- * const lines: LineConfig = {
- *   variant: 'line',
- *   gap: 1
- * }
- *
- * // Custom-spaced lines
- * const wideLines: LineConfig = {
- *   variant: 'line',
- *   gap: 4,
- *   base: 8
- * }
- * ```
- */
-export type LineConfig = BaseGuideConfig & {
-  /** Optional variant identifier (defaults to 'line') */
-  variant?: 'line'
-  /** Not applicable in line mode */
-  columns?: never
-  /** Not applicable in line mode */
-  columnWidth?: never
-}

From 3603b5f56c3cffbec283a304e653d5023cdf84e0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 01:47:20 +0000
Subject: [PATCH 11/18] feat: implement headless descriptor pattern for
 framework-agnostic core

Extract all render computation into pure descriptor functions in
@baseline-kit/core. React components become thin wiring layers that
call hooks and pass results to descriptors. This enables future
framework adapters (Vue, Svelte, Web Components) to reuse all
layout/style logic without React dependency.

- Add 7 descriptor functions: createBaselineDescriptor, createBoxDescriptor,
  createGuideDescriptor, createLayoutDescriptor, createPadderDescriptor,
  createSpacerDescriptor, createStackDescriptor
- Refactor all React components to use descriptors instead of inline computation
- Fix createStyleOverride return type to Record<string, string>
- All 177 tests pass, typecheck clean, bundle: 35.61 kB ESM

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/descriptors/baseline.ts     |  69 +++++
 packages/core/src/descriptors/box.ts          |  45 +++
 packages/core/src/descriptors/guide.ts        | 117 ++++++++
 packages/core/src/descriptors/index.ts        |   7 +
 packages/core/src/descriptors/layout.ts       |  77 +++++
 packages/core/src/descriptors/padder.ts       |  47 +++
 packages/core/src/descriptors/spacer.ts       |  48 +++
 packages/core/src/descriptors/stack.ts        |  65 ++++
 packages/core/src/index.ts                    |   5 +-
 packages/core/src/utils/merge.ts              |   2 +-
 .../src/components/Baseline/Baseline.tsx      | 273 ++---------------
 packages/react/src/components/Box/Box.tsx     | 187 +-----------
 packages/react/src/components/Guide/Guide.tsx | 281 +++---------------
 .../react/src/components/Layout/Layout.tsx    | 253 ++--------------
 .../react/src/components/Padder/Padder.tsx    | 260 ++--------------
 .../react/src/components/Spacer/Spacer.tsx    | 207 ++-----------
 packages/react/src/components/Stack/Stack.tsx | 239 ++-------------
 17 files changed, 673 insertions(+), 1509 deletions(-)
 create mode 100644 packages/core/src/descriptors/baseline.ts
 create mode 100644 packages/core/src/descriptors/box.ts
 create mode 100644 packages/core/src/descriptors/guide.ts
 create mode 100644 packages/core/src/descriptors/index.ts
 create mode 100644 packages/core/src/descriptors/layout.ts
 create mode 100644 packages/core/src/descriptors/padder.ts
 create mode 100644 packages/core/src/descriptors/spacer.ts
 create mode 100644 packages/core/src/descriptors/stack.ts

diff --git a/packages/core/src/descriptors/baseline.ts b/packages/core/src/descriptors/baseline.ts
new file mode 100644
index 00000000..ac40c17d
--- /dev/null
+++ b/packages/core/src/descriptors/baseline.ts
@@ -0,0 +1,69 @@
+import type { BaselineVariant } from '../types'
+import { formatValue, createStyleOverride, normalizeValuePair, parsePadding, calculateRowCount } from '../utils'
+
+export interface BaselineDescriptorParams {
+  base: number
+  colors: Record<BaselineVariant, string>
+  variant: BaselineVariant
+  width?: number | string
+  height?: number | string
+  color?: string
+  containerWidth: number
+  containerHeight: number
+  spacing: Record<string, unknown>
+  isVisible: boolean
+}
+
+export interface BaselineDescriptor {
+  containerStyle: Record<string, string>
+  rowCount: number
+  getRowStyle: (index: number) => Record<string, string>
+  padding: string | undefined
+  isVisible: boolean
+}
+
+const BASELINE_DEFAULTS = (base: number, lineColor: string, flatColor: string): Record<string, string> => ({
+  '--bkbw': '100%',
+  '--bkbh': '100%',
+  '--bkbb': `${base}px`,
+  '--bkbcl': lineColor,
+  '--bkbcf': flatColor,
+})
+
+/**
+ * Computes all styles and data needed to render a Baseline component.
+ * Pure function — framework-agnostic.
+ */
+export function createBaselineDescriptor(params: BaselineDescriptorParams): BaselineDescriptor {
+  const { base, colors, variant, width, height, color, containerWidth, containerHeight, spacing, isVisible } = params
+
+  const [, normHeight] = normalizeValuePair([width, height], [containerWidth, containerHeight])
+  const { top, right, bottom, left } = parsePadding(spacing)
+
+  const paddingValues = [top, right, bottom, left].map((v) => (v ? `${v}px` : '0')).join(' ')
+  const padding = paddingValues !== '0 0 0 0' ? paddingValues : undefined
+
+  const rowCount = calculateRowCount({ height: normHeight, top, bottom, base })
+
+  const chosenColor = color || (variant === 'line' ? colors.line : colors.flat)
+
+  const defaultStyles = BASELINE_DEFAULTS(base, colors.line, colors.flat)
+  const dimensionVars = ['--bkbw', '--bkbh']
+
+  const containerStyle: Record<string, string> = {
+    ...createStyleOverride({ key: '--bkbw', value: formatValue(width || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbh', value: formatValue(height || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbb', value: `${base}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbcl', value: color || colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbcf', value: color || colors.flat, defaultStyles }),
+    ...(padding ? { padding } : {}),
+  }
+
+  const getRowStyle = (index: number): Record<string, string> => ({
+    '--bkrt': index === 0 ? '0px' : `${index * base}px`,
+    '--bkrh': variant === 'line' ? '1px' : `${base}px`,
+    '--bkbc': chosenColor || (variant === 'line' ? colors.line : colors.flat),
+  })
+
+  return { containerStyle, rowCount, getRowStyle, padding, isVisible }
+}
diff --git a/packages/core/src/descriptors/box.ts b/packages/core/src/descriptors/box.ts
new file mode 100644
index 00000000..ea67e8e1
--- /dev/null
+++ b/packages/core/src/descriptors/box.ts
@@ -0,0 +1,45 @@
+import { formatValue, createStyleOverride, createGridSpanStyles } from '../utils'
+
+export interface BoxDescriptorParams {
+  base: number
+  lineColor: string
+  width?: number | string
+  height?: number | string
+  span?: number
+  colSpan?: number
+  rowSpan?: number
+}
+
+export interface BoxDescriptor {
+  boxStyle: Record<string, string>
+  gridSpanStyle: Record<string, string>
+}
+
+const BOX_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
+  '--bkboxw': 'auto',
+  '--bkboxh': 'auto',
+  '--bkboxc': lineColor,
+  '--bkboxb': `${base}px`,
+})
+
+/**
+ * Computes styles needed to render a Box component.
+ * Pure function — framework-agnostic.
+ */
+export function createBoxDescriptor(params: BoxDescriptorParams): BoxDescriptor {
+  const { base, lineColor, width, height, span, colSpan, rowSpan } = params
+
+  const defaultStyles = BOX_DEFAULTS(base, lineColor)
+  const dimensionVars = ['--bkboxw', '--bkboxh']
+
+  const boxStyle: Record<string, string> = {
+    ...createStyleOverride({ key: '--bkboxw', value: formatValue(width || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkboxh', value: formatValue(height || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkboxb', value: `${base}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkboxc', value: lineColor, defaultStyles }),
+  }
+
+  const gridSpanStyle = createGridSpanStyles(span, colSpan, rowSpan)
+
+  return { boxStyle, gridSpanStyle }
+}
diff --git a/packages/core/src/descriptors/guide.ts b/packages/core/src/descriptors/guide.ts
new file mode 100644
index 00000000..212e5aa0
--- /dev/null
+++ b/packages/core/src/descriptors/guide.ts
@@ -0,0 +1,117 @@
+import type { GuideVariant, GuideConfig } from '../types'
+import { formatValue, createStyleOverride } from '../utils'
+
+export interface GuideDescriptorParams {
+  base: number
+  colors: Record<GuideVariant, string>
+  variant: GuideVariant
+  align: string
+  width?: number | string
+  height?: number | string
+  columnWidth?: number | string
+  maxWidth?: number | string
+  color?: string
+  containerWidth: number
+  containerHeight: number
+  /** Pre-computed guide template result (from useGuide or calculateGuideTemplate) */
+  template: string
+  columnsCount: number
+  calculatedGap: number
+  isVisible: boolean
+}
+
+export interface GuideDescriptor {
+  containerStyle: Record<string, string>
+  columnColor: string
+  columnsCount: number
+  calculatedGap: number
+  template: string
+  isVisible: boolean
+  isLineVariant: boolean
+}
+
+/**
+ * Creates a GuideConfig from component props.
+ * Pure function — no React or DOM dependency.
+ */
+export function createGuideConfig(
+  variant: GuideVariant,
+  base: number,
+  gap: number,
+  columns?: number | readonly (string | number | undefined | 'auto')[],
+  columnWidth?: number | string,
+): GuideConfig {
+  switch (variant) {
+    case 'line':
+      return { variant: 'line', gap, base }
+    case 'pattern':
+      if (columns && Array.isArray(columns)) {
+        return { variant: 'pattern', columns: columns as readonly (string | number)[], gap, base }
+      }
+      break
+    case 'fixed':
+      if (columns !== undefined) {
+        const parsed = typeof columns === 'number' ? columns : parseInt(String(columns), 10)
+        return { variant: 'fixed', columns: !isNaN(parsed) ? parsed : 12, columnWidth: columnWidth || '60px', gap, base }
+      }
+      break
+  }
+  return { variant: 'auto', columnWidth: columnWidth || '1fr', gap, base }
+}
+
+const GUIDE_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
+  '--bkgw': 'auto',
+  '--bkgh': 'auto',
+  '--bkgmw': 'none',
+  '--bkgcw': '60px',
+  '--bkggw': '24px',
+  '--bkgc': '12',
+  '--bkgb': `${base}px`,
+  '--bkgcl': lineColor,
+  '--bkgg': '0',
+})
+
+/**
+ * Computes all styles and data needed to render a Guide component.
+ * Pure function — framework-agnostic.
+ */
+export function createGuideDescriptor(params: GuideDescriptorParams): GuideDescriptor {
+  const {
+    base, colors, variant, align, width, height, columnWidth,
+    maxWidth, color, containerWidth, containerHeight,
+    template, columnsCount, calculatedGap, isVisible,
+  } = params
+
+  const defaultStyles = GUIDE_DEFAULTS(base, colors.line)
+  const autoDimensions = ['--bkgw', '--bkgh']
+
+  const widthValue = formatValue(width || containerWidth || 'auto')
+  const heightValue = formatValue(height || containerHeight || 'auto')
+
+  const containerStyle: Record<string, string> = {
+    ...createStyleOverride({ key: '--bkgw', value: widthValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkgh', value: heightValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkgmw', value: formatValue(maxWidth || 'none'), defaultStyles }),
+    ...createStyleOverride({ key: '--bkgcw', value: formatValue(columnWidth || '60px'), defaultStyles }),
+    ...createStyleOverride({ key: '--bkgc', value: `${columnsCount}`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgb', value: '0', defaultStyles }),
+    ...createStyleOverride({ key: '--bkgcl', value: color ?? colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgg', value: `${calculatedGap}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgj', value: align || 'center', defaultStyles }),
+    ...(template && template !== 'none' ? { '--bkgt': template, gridTemplateColumns: template } : {}),
+  }
+
+  const columnColor = (variant && variant in colors
+    ? colors[variant as keyof typeof colors]
+    : undefined) ?? colors.line
+
+  return {
+    containerStyle,
+    columnColor,
+    columnsCount,
+    calculatedGap,
+    template,
+    isVisible,
+    isLineVariant: variant === 'line',
+  }
+}
diff --git a/packages/core/src/descriptors/index.ts b/packages/core/src/descriptors/index.ts
new file mode 100644
index 00000000..025a1f37
--- /dev/null
+++ b/packages/core/src/descriptors/index.ts
@@ -0,0 +1,7 @@
+export * from './guide'
+export * from './baseline'
+export * from './box'
+export * from './stack'
+export * from './layout'
+export * from './spacer'
+export * from './padder'
diff --git a/packages/core/src/descriptors/layout.ts b/packages/core/src/descriptors/layout.ts
new file mode 100644
index 00000000..28b65d7e
--- /dev/null
+++ b/packages/core/src/descriptors/layout.ts
@@ -0,0 +1,77 @@
+import { formatValue, createStyleOverride } from '../utils'
+
+export interface LayoutDescriptorParams {
+  colors: { line: string; flat: string; text: string }
+  columns?: number | string | Array<number | string>
+  rows?: number | string | Array<number | string>
+  width?: number | string
+  height?: number | string
+  gap?: number | string
+  rowGap?: number | string
+  columnGap?: number | string
+  justifyItems?: string
+  alignItems?: string
+  justifyContent?: string
+  alignContent?: string
+}
+
+export interface LayoutDescriptor {
+  containerStyle: Record<string, string>
+}
+
+const LAYOUT_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
+  '--bklw': 'auto',
+  '--bklh': 'auto',
+  '--bklcl': colors.line,
+  '--bklcf': colors.flat,
+  '--bklci': colors.text,
+})
+
+/**
+ * Parses grid template definitions into CSS grid-template values.
+ * Pure function — framework-agnostic.
+ */
+export function getGridTemplate(prop?: number | string | Array<number | string>): string {
+  if (typeof prop === 'number') return `repeat(${prop}, 1fr)`
+  if (typeof prop === 'string') return prop
+  if (Array.isArray(prop)) {
+    return prop.map((p) => (typeof p === 'number' ? `${p}px` : p)).join(' ')
+  }
+  return 'repeat(auto-fill, minmax(100px, 1fr))'
+}
+
+/**
+ * Computes styles needed to render a Layout component.
+ * Pure function — framework-agnostic.
+ */
+export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDescriptor {
+  const { colors, columns, rows, width, height, gap, rowGap, columnGap, justifyItems, alignItems, justifyContent, alignContent } = params
+
+  const defaultStyles = LAYOUT_DEFAULTS(colors)
+  const autoDimensions = ['--bklw', '--bklh']
+
+  const gridTemplateColumns = getGridTemplate(columns)
+  const gridTemplateRows = rows ? getGridTemplate(rows) : 'auto'
+
+  const gapStyles: Record<string, string> = {}
+  if (gap !== undefined) gapStyles.gap = formatValue(gap)
+  if (rowGap !== undefined) gapStyles.rowGap = formatValue(rowGap)
+  if (columnGap !== undefined) gapStyles.columnGap = formatValue(columnGap)
+
+  const containerStyle: Record<string, string> = {
+    ...createStyleOverride({ key: '--bklw', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bklh', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bklcl', value: colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bklcf', value: colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bklci', value: colors.text, defaultStyles }),
+    ...(gridTemplateColumns !== 'repeat(auto-fill, minmax(100px, 1fr))' ? { '--bklgtc': gridTemplateColumns } : {}),
+    ...(gridTemplateRows !== 'auto' ? { '--bklgtr': gridTemplateRows } : {}),
+    ...(justifyItems ? { '--bklji': justifyItems } : {}),
+    ...(alignItems ? { '--bklai': alignItems } : {}),
+    ...(justifyContent ? { '--bkljc': justifyContent } : {}),
+    ...(alignContent ? { '--bklac': alignContent } : {}),
+    ...gapStyles,
+  }
+
+  return { containerStyle }
+}
diff --git a/packages/core/src/descriptors/padder.ts b/packages/core/src/descriptors/padder.ts
new file mode 100644
index 00000000..2c105a0a
--- /dev/null
+++ b/packages/core/src/descriptors/padder.ts
@@ -0,0 +1,47 @@
+import { formatValue } from '../utils'
+import type { Padding } from '../types'
+
+export interface PadderDescriptorParams {
+  base: number
+  color: string
+  width?: number | string
+  height?: number | string
+  padding: Padding
+  enableSpacers: boolean
+}
+
+export interface PadderDescriptor {
+  containerStyle: Record<string, string>
+}
+
+/**
+ * Computes styles needed to render a Padder component.
+ * Pure function — framework-agnostic.
+ */
+export function createPadderDescriptor(params: PadderDescriptorParams): PadderDescriptor {
+  const { base, color, width, height, padding, enableSpacers } = params
+
+  const containerStyle: Record<string, string> = {}
+
+  if (width !== undefined && width !== 'fit-content') {
+    containerStyle['--bkpw'] = formatValue(width || 'fit-content')
+  }
+  if (height !== undefined && height !== 'fit-content') {
+    containerStyle['--bkph'] = formatValue(height || 'fit-content')
+  }
+
+  containerStyle['--bkpb'] = `${base}px`
+  containerStyle['--bkpc'] = color
+
+  if (!enableSpacers) {
+    const { top, right, bottom, left } = padding
+    if (top > 0 || bottom > 0) {
+      containerStyle.paddingBlock = `${top}px ${bottom}px`
+    }
+    if (left > 0 || right > 0) {
+      containerStyle.paddingInline = `${left}px ${right}px`
+    }
+  }
+
+  return { containerStyle }
+}
diff --git a/packages/core/src/descriptors/spacer.ts b/packages/core/src/descriptors/spacer.ts
new file mode 100644
index 00000000..e2f0089b
--- /dev/null
+++ b/packages/core/src/descriptors/spacer.ts
@@ -0,0 +1,48 @@
+import { formatValue, createStyleOverride, normalizeValuePair } from '../utils'
+
+export interface SpacerDescriptorParams {
+  base: number
+  colors: { line: string; flat: string; text: string }
+  width?: number | string
+  height?: number | string
+  color?: string
+}
+
+export interface SpacerDescriptor {
+  style: Record<string, string>
+  normWidth: number
+  normHeight: number
+}
+
+const SPACER_DEFAULTS = (base: number, textColor: string, flatColor: string, lineColor: string): Record<string, string> => ({
+  '--bksw': '100%',
+  '--bksh': '100%',
+  '--bksb': `${base}px`,
+  '--bksct': textColor,
+  '--bkscf': flatColor,
+  '--bkscl': lineColor,
+})
+
+/**
+ * Computes styles needed to render a Spacer component.
+ * Pure function — framework-agnostic.
+ */
+export function createSpacerDescriptor(params: SpacerDescriptorParams): SpacerDescriptor {
+  const { base, colors, width, height, color } = params
+
+  const [normWidth, normHeight] = normalizeValuePair([width, height], [0, 0], { base, suppressWarnings: true })
+
+  const defaultStyles = SPACER_DEFAULTS(base, colors.text, colors.flat, colors.line)
+  const dimensionVars = ['--bksw', '--bksh']
+
+  const style: Record<string, string> = {
+    ...createStyleOverride({ key: '--bksh', value: formatValue(normHeight || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bksw', value: formatValue(normWidth || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    '--bksb': `${base}px`,
+    ...createStyleOverride({ key: '--bksct', value: color ?? colors.text, defaultStyles }),
+    ...createStyleOverride({ key: '--bkscl', value: color ?? colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkscf', value: color ?? colors.flat, defaultStyles }),
+  }
+
+  return { style, normWidth, normHeight }
+}
diff --git a/packages/core/src/descriptors/stack.ts b/packages/core/src/descriptors/stack.ts
new file mode 100644
index 00000000..486ab970
--- /dev/null
+++ b/packages/core/src/descriptors/stack.ts
@@ -0,0 +1,65 @@
+import { formatValue, createStyleOverride } from '../utils'
+
+const DIRECTION_AXIS: Record<string, string> = {
+  x: 'row',
+  y: 'column',
+  '-x': 'row-reverse',
+  '-y': 'column-reverse',
+}
+
+export interface StackDescriptorParams {
+  colors: { line: string; flat: string; text: string }
+  direction: string
+  justify: string
+  align: string
+  width?: number | string
+  height?: number | string
+  gap?: number
+  rowGap?: number
+  columnGap?: number
+}
+
+export interface StackDescriptor {
+  containerStyle: Record<string, string>
+}
+
+const STACK_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
+  '--bkkw': 'auto',
+  '--bkkh': 'auto',
+  '--bkkcl': colors.line,
+  '--bkkcf': colors.flat,
+  '--bkkci': colors.text,
+})
+
+/**
+ * Computes styles needed to render a Stack component.
+ * Pure function — framework-agnostic.
+ */
+export function createStackDescriptor(params: StackDescriptorParams): StackDescriptor {
+  const { colors, direction, justify, align, width, height, gap, rowGap, columnGap } = params
+
+  const defaultStyles = STACK_DEFAULTS(colors)
+  const dimensionVars = ['--bkkw', '--bkkh']
+  const flexDirection = DIRECTION_AXIS[direction] || direction
+
+  const containerStyle: Record<string, string> = {
+    flexDirection,
+    justifyContent: justify,
+    alignItems: align,
+    ...(width ? { width: formatValue(width) } : {}),
+    ...(height ? { height: formatValue(height) } : {}),
+    ...createStyleOverride({ key: '--bkkw', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkkh', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkkcl', value: colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkkcf', value: colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bkkci', value: colors.text, defaultStyles }),
+    ...(gap !== undefined ? { rowGap: `${gap}`, columnGap: `${gap}` } : {
+      ...(rowGap !== undefined ? { rowGap: `${rowGap}` } : {}),
+      ...(columnGap !== undefined ? { columnGap: `${columnGap}` } : {}),
+    }),
+  }
+
+  return { containerStyle }
+}
+
+export { DIRECTION_AXIS }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c98543a8..f87699d9 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
 /**
  * @baseline-kit/core
- * Pure TypeScript core: types, utilities, config, and validation
+ * Pure TypeScript core: types, utilities, config, validation, and descriptors
  * Zero dependencies — works in any JavaScript runtime
  */
 
@@ -15,3 +15,6 @@ export * from './utils'
 
 // Validation
 export * from './validation'
+
+// Descriptors (headless render logic)
+export * from './descriptors'
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
index dc4105a2..172e0074 100644
--- a/packages/core/src/utils/merge.ts
+++ b/packages/core/src/utils/merge.ts
@@ -17,7 +17,7 @@ export function createStyleOverride(
   params: StyleOverrideParams | string,
   value?: string,
   defaultStyles?: Record<string, string>
-): Record<string, string | number> {
+): Record<string, string> {
   const key = typeof params === 'string' ? params : params.key
   const val = typeof params === 'string' ? value! : params.value
   const defaults =
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
index 4cbb06f6..b50a3f96 100644
--- a/packages/react/src/components/Baseline/Baseline.tsx
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -1,83 +1,23 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useVirtual, useMeasure } from '../../hooks'
-import {
-  parsePadding,
-  normalizeValuePair,
-  mergeClasses,
-  calculateRowCount,
-  formatValue,
-  createStyleOverride,
-} from '@baseline-kit/core'
+import { mergeClasses, createBaselineDescriptor } from '@baseline-kit/core'
+import type { BaselineVariant } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
-import type { BaselineVariant } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
 export type { BaselineVariant }
 
 export type BaselineProps = {
-  /** Visual style variant for the baseline guides */
   variant?: BaselineVariant
-  /** Explicit width for the overlay (e.g., "1200px" or 1200) */
   width?: number | string
-  /** Explicit height for the overlay (e.g., "100vh" or 800) */
   height?: number | string
-  /** Base unit for measurements (defaults to theme value) */
   base?: number
-  /** Color override for grid lines */
   color?: string
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
 } & ComponentsProps
 
-/** Creates default baseline styles */
-const createDefaultBaselineStyles = (
-  base: number,
-  lineColor: string,
-  flatColor: string
-): Record<string, string> => ({
-  '--bkbw': '100%',
-  '--bkbh': '100%',
-  '--bkbb': `${base}px`,
-  '--bkbcl': lineColor,
-  '--bkbcf': flatColor,
-})
-
-/** Create row styles for baseline lines */
-type RowStyleParams = {
-  /** Row index */
-  index: number
-  /** Base unit for calculations */
-  base: number
-  /** Baseline visual variant */
-  variant: BaselineVariant
-  /** Selected color for the baseline */
-  chosenColor: string
-  /** Theme line color */
-  lineColor: string
-  /** Theme flat color */
-  flatColor: string
-}
-
-/**
- * Creates styles for an individual baseline row.
- * Applies positioning and visual styling based on variant.
- */
-const createBaselineRowStyle = (
-  params: RowStyleParams
-): React.CSSProperties => {
-  const { index, base, variant, chosenColor, lineColor, flatColor } = params
-
-  // Directly set the CSS variables instead of using createStyleOverride
-  return {
-    '--bkrt': index === 0 ? '0px' : `${index * base}px`,
-    '--bkrh': variant === 'line' ? '1px' : `${base}px`,
-    '--bkbc': chosenColor || (variant === 'line' ? lineColor : flatColor),
-  } as React.CSSProperties
-}
-
-// Implementation component that only renders on the client side
 const BaselineImpl = React.memo(function BaselineImpl({
   className,
   debugging,
@@ -87,161 +27,47 @@ const BaselineImpl = React.memo(function BaselineImpl({
   width: widthProp,
   base,
   color: colorProp,
-  ssrMode: _ssrMode = false,
   ...spacingProps
 }: BaselineProps) {
   const config = useConfig('baseline')
   const { isShown } = useDebug(debugging, config.debugging)
-
-  // Use a stable reference that won't cause hydration mismatches
   const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const { width: containerWidth, height: containerHeight, refresh } = useMeasure(containerRef)
 
-  // Always call hooks, but conditionally use their results
-  const {
-    width: containerWidth,
-    height: containerHeight,
-    refresh,
-  } = useMeasure(containerRef)
-
-  // Effect for handling window resize events
   React.useEffect(() => {
-    const handleResize = () => {
-      refresh()
-    }
-
+    const handleResize = () => refresh()
     window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
+    return () => window.removeEventListener('resize', handleResize)
   }, [refresh])
 
-  const [_normWidth, normHeight] = React.useMemo(() => {
-    return normalizeValuePair(
-      [widthProp, heightProp],
-      [containerWidth, containerHeight]
-    )
-  }, [widthProp, heightProp, containerWidth, containerHeight])
-
-  const { top, right, bottom, left } = React.useMemo(
-    () => parsePadding(spacingProps),
-    [spacingProps]
+  const resolvedBase = base || config.base
+
+  const descriptor = React.useMemo(
+    () => createBaselineDescriptor({
+      base: resolvedBase,
+      colors: config.colors,
+      variant: (variant as BaselineVariant) ?? config.variant,
+      width: widthProp,
+      height: heightProp,
+      color: colorProp,
+      containerWidth,
+      containerHeight,
+      spacing: spacingProps,
+      isVisible: isShown,
+    }),
+    [resolvedBase, config.colors, config.variant, variant, widthProp, heightProp, colorProp, containerWidth, containerHeight, spacingProps, isShown]
   )
 
-  const padding = React.useMemo(() => {
-    const paddingValues = [top, right, bottom, left]
-      .map((value) => (value ? `${value}px` : '0'))
-      .join(' ')
-
-    return paddingValues !== '0 0 0 0' ? paddingValues : undefined
-  }, [top, right, bottom, left])
-
-  const rowCount = React.useMemo(() => {
-    const baseValue = base || config.base
-    return calculateRowCount({
-      height: normHeight,
-      top,
-      bottom,
-      base: baseValue,
-    })
-  }, [normHeight, top, bottom, base, config.base])
-
-  // Use virtual rendering for performance
   const { start, end } = useVirtual({
-    totalLines: rowCount,
-    lineHeight: base || config.base,
+    totalLines: descriptor.rowCount,
+    lineHeight: resolvedBase,
     containerRef,
     buffer: 160,
   })
 
-  const chosenColor =
-    colorProp || (variant === 'line' ? config.colors.line : config.colors.flat)
-
-  // Create default baseline styles
-  const defaultBaselineStyles = React.useMemo(
-    () =>
-      createDefaultBaselineStyles(
-        base || config.base,
-        config.colors.line,
-        config.colors.flat
-      ),
-    [base, config.colors.line, config.colors.flat, config.base]
-  )
-
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(widthProp || '100%')
-    const heightValue = formatValue(heightProp || '100%')
-
-    // Define dimensions that should be skipped when set to 100%
-    const dimensionVars = ['--bkbw', '--bkbh']
-
-    return mergeStyles(
-      {
-        ...createStyleOverride({
-          key: '--bkbw',
-          value: widthValue,
-          defaultStyles: defaultBaselineStyles,
-          skipDimensions: { fullSize: dimensionVars },
-        }),
-        ...createStyleOverride({
-          key: '--bkbh',
-          value: heightValue,
-          defaultStyles: defaultBaselineStyles,
-          skipDimensions: { fullSize: dimensionVars },
-        }),
-        ...createStyleOverride({
-          key: '--bkbb',
-          value: `${base}px`,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bkbcl',
-          value: colorProp || config.colors.line,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bkbcf',
-          value: colorProp || config.colors.flat,
-          defaultStyles: defaultBaselineStyles,
-        }),
-        ...(padding && { padding }),
-      } as React.CSSProperties,
-      style
-    )
-  }, [
-    widthProp,
-    heightProp,
-    base,
-    colorProp,
-    config.colors.line,
-    config.colors.flat,
-    padding,
-    defaultBaselineStyles,
-    style,
-  ])
-
-  const getRowStyle = React.useCallback(
-    (index: number) => {
-      // Ensure variant is a BaselineVariant
-      const safeVariant = variant as BaselineVariant
-      const safeBase = base || config.base
-
-      return createBaselineRowStyle({
-        index,
-        base: safeBase,
-        variant: safeVariant,
-        chosenColor,
-        lineColor: config.colors.line,
-        flatColor: config.colors.flat,
-      })
-    },
-    [
-      base,
-      variant,
-      chosenColor,
-      config.colors.line,
-      config.colors.flat,
-      config.base,
-    ]
+  const containerStyles = React.useMemo(
+    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    [descriptor.containerStyle, style]
   )
 
   return (
@@ -249,11 +75,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
       ref={containerRef}
       data-testid="baseline"
       aria-hidden="true"
-      className={mergeClasses(
-        styles.bas,
-        isShown ? styles.v : styles.h,
-        className
-      )}
+      className={mergeClasses(styles.bas, isShown ? styles.v : styles.h, className)}
       style={containerStyles}
       {...spacingProps}
     >
@@ -265,7 +87,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
               className={styles.row}
               key={rowIndex}
               data-row-index={rowIndex}
-              style={getRowStyle(rowIndex)}
+              style={descriptor.getRowStyle(rowIndex) as React.CSSProperties}
             />
           )
         })}
@@ -273,35 +95,6 @@ const BaselineImpl = React.memo(function BaselineImpl({
   )
 })
 
-/**
- * Renders horizontal guidelines for maintaining vertical rhythm and baseline alignment.
- *
- * @remarks
- * Baseline provides horizontal guides that:
- * - Help maintain consistent vertical spacing
- * - Support visual verification of baseline alignment
- * - Optimize performance through virtual rendering
- * - Adapt to container dimensions
- *
- * @example
- * ```tsx
- * // Basic baseline overlay
- * <Baseline
- *   height="100vh"
- *   base={8}
- *   debugging="visible"
- * />
- *
- * // Custom variant with padding
- * <Baseline
- *   variant="flat"
- *   height="100vh"
- *   base={4}
- *   block={[16, 0]}
- *   debugging="visible"
- * />
- * ```
- */
 export const Baseline = React.memo(function Baseline({
   className,
   debugging,
@@ -319,8 +112,6 @@ export const Baseline = React.memo(function Baseline({
   const base = baseProp ?? config.base
   const { isShown } = useDebug(debugging, config.debugging)
 
-  // If debugging isn't enabled, render a hidden element
-  // This ensures tests can find the element even when hidden
   if (!isShown) {
     return (
       <div
@@ -333,21 +124,15 @@ export const Baseline = React.memo(function Baseline({
     )
   }
 
-  // Create a simple SSR fallback
   const ssrFallback = (
     <div
       className={mergeClasses(styles.b, styles.h, styles.ssr, className)}
-      style={{
-        width: widthProp || '100%',
-        height: heightProp || '100%',
-        ...style,
-      }}
+      style={{ width: widthProp || '100%', height: heightProp || '100%', ...style }}
       data-testid="baseline"
       aria-hidden="true"
     />
   )
 
-  // Wrap the actual implementation in ClientOnly
   return (
     <ClientOnly fallback={ssrFallback}>
       <BaselineImpl
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 884ca07f..0ed75b6f 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,168 +1,39 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import {
-  mergeClasses,
-  parsePadding,
-  formatValue,
-  createGridSpanStyles,
-  createStyleOverride,
-} from '@baseline-kit/core'
+import { mergeClasses, parsePadding, createBoxDescriptor } from '@baseline-kit/core'
+import type { SnappingMode } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { Config } from '../Config/Config'
 import { Padder } from '../Padder'
 import { ComponentsProps } from '../types'
-import type { SnappingMode } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
 export type { SnappingMode }
 
 export type BoxProps = {
-  /** Number of columns to span in a grid layout */
   colSpan?: number
-  /** Number of rows to span in a grid layout */
   rowSpan?: number
-  /** Shorthand for equal column and row span. Takes precedence over individual spans */
   span?: number
-  /** Controls baseline grid alignment behavior */
   snapping?: SnappingMode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
   children?: React.ReactNode
 } & ComponentsProps
 
-/**
- * Creates default box styles with theme values.
- * Sets CSS variables for width, height, base unit, and colors.
- */
-const createDefaultBoxStyles = (
-  base: number,
-  lineColor: string
-): Record<string, string> => ({
-  '--bkboxw': 'auto',
-  '--bkboxh': 'auto',
-  '--bkboxc': lineColor,
-  '--bkboxb': `${base}px`,
-})
-
-type BoxCustomStylesParams = {
-  /** Width property for the box */
-  width?: React.CSSProperties['width']
-  /** Height property for the box */
-  height?: React.CSSProperties['height']
-  /** Base unit for measurements */
-  base: number
-  /** Line color from theme */
-  lineColor: string
-  /** Default styles for comparison */
-  defaultStyles: Record<string, string>
-}
-
-/**
- * Creates custom styles for the Box component.
- * Handles dimension overrides and other custom properties.
- */
-const createBoxCustomStyles = ({
-  width,
-  height,
-  base,
-  lineColor,
-  defaultStyles,
-}: BoxCustomStylesParams): React.CSSProperties => {
-  const widthValue = formatValue(width || 'fit-content')
-  const heightValue = formatValue(height || 'fit-content')
-
-  // Define box dimensions that should be skipped when set to fit-content
-  const dimensionVars = ['--bkboxw', '--bkboxh']
-
-  return {
-    ...createStyleOverride({
-      key: '--bkboxw',
-      value: widthValue,
-      defaultStyles,
-      skipDimensions: { fitContent: dimensionVars },
-    }),
-    ...createStyleOverride({
-      key: '--bkboxh',
-      value: heightValue,
-      defaultStyles,
-      skipDimensions: { fitContent: dimensionVars },
-    }),
-    ...createStyleOverride({
-      key: '--bkboxb',
-      value: `${base}px`,
-      defaultStyles,
-    }),
-    ...createStyleOverride({
-      key: '--bkboxc',
-      value: lineColor,
-      defaultStyles,
-    }),
-  } as React.CSSProperties
-}
-
-/**
- * A foundational container component that ensures consistent spacing and baseline alignment.
- *
- * @remarks
- * Box provides a layout container that:
- * - Ensures consistent spacing aligned to the baseline grid
- * - Supports grid layout integration through span props
- * - Offers configurable snapping modes for fine-grained alignment control
- * - Includes debug overlays for visual alignment verification
- *
- * By default, Box uses "auto" for both width and height unless explicitly specified.
- *
- * @example
- * ```tsx
- * // Basic usage with spacing
- * <Box block={16} inline={8}>
- *   <p>Content aligned to baseline</p>
- * </Box>
- *
- * // With grid spanning and custom snapping
- * <Box
- *   colSpan={2}
- *   rowSpan={1}
- *   snapping="height"
- *   debugging="visible"
- * >
- *   <p>Grid-integrated content</p>
- * </Box>
- * ```
- */
 export const Box = React.memo(
   React.forwardRef<HTMLDivElement, BoxProps>(function Box(
-    {
-      children,
-      snapping = 'clamp',
-      debugging: debuggingProp,
-      className,
-      colSpan,
-      rowSpan,
-      span,
-      width,
-      height,
-      style,
-      ssrMode = false,
-      ...spacingProps
-    },
+    { children, snapping = 'clamp', debugging: debuggingProp, className, colSpan, rowSpan, span, width, height, style, ssrMode = false, ...spacingProps },
     ref
   ) {
     const config = useConfig('box')
     const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
-    // Add hydration state tracking
     const [isHydrated, setIsHydrated] = React.useState(false)
-
-    React.useEffect(() => {
-      setIsHydrated(true)
-    }, [])
+    React.useEffect(() => { setIsHydrated(true) }, [])
 
     const internalRef = React.useRef<HTMLDivElement | null>(null)
     const { top, bottom, left, right } = parsePadding(spacingProps)
 
-    // Get padding calculation from useBaseline
     const baselinePadding = useBaseline(internalRef, {
       base: config.base,
       snapping,
@@ -170,57 +41,25 @@ export const Box = React.memo(
       warnOnMisalignment: debugging !== 'none',
     })
 
-    // Create stable initial padding for SSR
-    const stablePadding = {
-      padding: {
-        top: top || 0,
-        right: right || 0,
-        bottom: bottom || 0,
-        left: left || 0,
-      },
-    }
+    const stablePadding = { padding: { top: top || 0, right: right || 0, bottom: bottom || 0, left: left || 0 } }
+    const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
 
-    // Use stable padding during SSR and initial render, then switch to dynamic padding
-    const { padding } = hydratedValue(
-      isHydrated && !ssrMode,
-      stablePadding,
-      baselinePadding
+    const descriptor = React.useMemo(
+      () => createBoxDescriptor({ base: config.base, lineColor: config.colors.line, width, height, span, colSpan, rowSpan }),
+      [config.base, config.colors.line, width, height, span, colSpan, rowSpan]
     )
 
-    const gridSpanStyles = React.useMemo(
-      () => createGridSpanStyles(span, colSpan, rowSpan),
-      [colSpan, rowSpan, span]
+    const boxStyles = React.useMemo(
+      () => mergeStyles(descriptor.boxStyle as React.CSSProperties, style),
+      [descriptor.boxStyle, style]
     )
 
-    const defaultBoxStyles = React.useMemo(
-      () => createDefaultBoxStyles(config.base, config.colors.line),
-      [config.base, config.colors.line]
-    )
-
-    const boxStyles = React.useMemo(() => {
-      const customStyles = createBoxCustomStyles({
-        width,
-        height,
-        base: config.base,
-        lineColor: config.colors.line,
-        defaultStyles: defaultBoxStyles,
-      })
-      return mergeStyles(customStyles, style)
-    }, [
-      config.base,
-      config.colors.line,
-      width,
-      height,
-      defaultBoxStyles,
-      style,
-    ])
-
     return (
       <div
         ref={mergeRefs(ref, internalRef)}
         data-testid="box"
         className={mergeClasses(styles.box, isShown && styles.v, className)}
-        style={mergeStyles(boxStyles, gridSpanStyles)}
+        style={mergeStyles(boxStyles, descriptor.gridSpanStyle)}
       >
         <Config base={1} spacer={{ variant: 'flat' }}>
           <Padder
diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
index 4f008204..965bb1f4 100644
--- a/packages/react/src/components/Guide/Guide.tsx
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -1,130 +1,27 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
-import { useConfig, useDebug, useGuide, useMeasure } from '../../hooks'
-import {
-  formatValue,
-  mergeClasses,
-  createStyleOverride,
-} from '@baseline-kit/core'
+import { useConfig, useDebug, useMeasure, useGuide } from '../../hooks'
+import { mergeClasses, createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
+import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
-import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
 import styles from './styles.module.css'
 
 export type { GuideConfig }
 
 export type GuideProps = {
-  /** Controls horizontal alignment of columns within the container */
   align?: React.CSSProperties['justifyContent']
-  /** Visual style of the guide */
   variant?: GuideVariant
-  /** Number of columns (for fixed/auto variants) */
   columns?: number | readonly (string | number | undefined | 'auto')[]
-  /** Column width (for fixed variant) */
   columnWidth?: React.CSSProperties['width']
-  /** Maximum width of the guide */
   maxWidth?: React.CSSProperties['maxWidth']
-  /** Color override for guide lines */
   color?: React.CSSProperties['color']
-  /** Content to render inside the guide */
   children?: React.ReactNode
-  /** Gap between columns */
   gap?: number
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
 } & ComponentsProps &
   Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>
 
-/**
- * Creates a grid configuration based on the specified variant and parameters.
- */
-const createGridConfig = (
-  variant: GuideVariant,
-  base: number,
-  gap: number,
-  columns?: number | readonly (string | number | undefined | 'auto')[],
-  columnWidth?: React.CSSProperties['width'],
-): GuideConfig => {
-  switch (variant) {
-    case 'line':
-      return { variant: 'line', gap, base }
-
-    case 'pattern':
-      if (columns && Array.isArray(columns)) {
-        return { variant: 'pattern', columns: columns as readonly (string | number)[], gap, base }
-      }
-      break
-
-    case 'fixed':
-      if (columns !== undefined) {
-        const parsedColumns = typeof columns === 'number' ? columns : parseInt(String(columns), 10)
-        return { variant: 'fixed', columns: !isNaN(parsedColumns) ? parsedColumns : 12, columnWidth: columnWidth || '60px', gap, base }
-      }
-      break
-  }
-
-  return { variant: 'auto', columnWidth: columnWidth || '1fr', gap, base }
-}
-
-/** Creates default guide styles */
-const createDefaultGuideStyles = (
-  base: number,
-  lineColor: string
-): Record<string, string> => ({
-  '--bkgw': 'auto',
-  '--bkgh': 'auto',
-  '--bkgmw': 'none',
-  '--bkgcw': '60px',
-  '--bkggw': '24px',
-  '--bkgc': '12',
-  '--bkgb': `${base}px`,
-  '--bkgcl': lineColor,
-  '--bkgg': '0',
-})
-
-/**
- * A developer tool component that provides visual grid overlays for alignment.
- *
- * @remarks
- * Guide renders a configurable grid overlay that helps visualize:
- * - Column layouts and spacing
- * - Content alignment
- * - Layout patterns
- *
- * The component supports multiple variants:
- * - "line": Simple evenly-spaced vertical lines
- * - "pattern": Custom repeating column width patterns
- * - "fixed": Fixed number of equal or custom-width columns
- * - "auto": Dynamically calculated columns based on container width
- *
- * @example
- * ```tsx
- * // Basic column guide
- * <Guide
- *   variant="line"
- *   gap={8}
- *   debugging="visible"
- * />
- *
- * // Custom column pattern
- * <Guide
- *   variant="pattern"
- *   columns={['100px', '1fr', '2fr']}
- *   gap={16}
- *   align="center"
- *   debugging="visible"
- * />
- *
- * // Fixed columns with custom width
- * <Guide
- *   variant="fixed"
- *   columns={12}
- *   columnWidth="60px"
- *   gap={8}
- *   debugging="visible"
- * />
- * ```
- */
 export const Guide = React.memo(function Guide({
   className,
   debugging,
@@ -147,8 +44,6 @@ export const Guide = React.memo(function Guide({
   const gap = typeof gapProp === 'number' ? gapProp : 0
   const { isShown } = useDebug(debugging, config.debugging)
 
-  // If debugging isn't enabled, render a hidden element
-  // This ensures tests can find the element even when hidden
   if (!isShown) {
     return (
       <div
@@ -164,16 +59,10 @@ export const Guide = React.memo(function Guide({
     )
   }
 
-  // Create a simple SSR fallback with the expected dimensions
   const ssrFallback = (
     <div
       className={mergeClasses(styles.g, styles.h, styles.ssr, className)}
-      style={{
-        width: width || '100%',
-        height: height || '100%',
-        maxWidth: maxWidth || 'none',
-        ...style,
-      }}
+      style={{ width: width || '100%', height: height || '100%', maxWidth: maxWidth || 'none', ...style }}
       data-testid="guide"
       data-variant={variant}
       aria-hidden="true"
@@ -182,7 +71,6 @@ export const Guide = React.memo(function Guide({
     </div>
   )
 
-  // Wrap the actual implementation in ClientOnly
   return (
     <ClientOnly fallback={ssrFallback}>
       <GuideImpl
@@ -207,7 +95,6 @@ export const Guide = React.memo(function Guide({
   )
 })
 
-// Implementation component that only renders on the client side
 const GuideImpl = React.memo(function GuideImpl({
   className,
   debugging,
@@ -222,161 +109,69 @@ const GuideImpl = React.memo(function GuideImpl({
   maxWidth,
   color,
   children,
-  ssrMode: _ssrMode = false,
   ...props
 }: GuideProps) {
   const config = useConfig('guide')
   const { isShown } = useDebug(debugging, config.debugging)
   const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const { height: containerHeight, refresh } = useMeasure(containerRef)
 
-  // Measure the container dimensions
-  const {
-    width: containerWidth,
-    height: containerHeight,
-    refresh, // Keep the refresh function available for dynamic updates
-  } = useMeasure(containerRef)
-
-  // Effect for handling window resize events
   React.useEffect(() => {
-    const handleResize = () => {
-      // Trigger a remeasurement when window size changes
-      refresh()
-    }
-
+    const handleResize = () => refresh()
     window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
+    return () => window.removeEventListener('resize', handleResize)
   }, [refresh])
 
+  const resolvedVariant = (variant ?? config.variant) as GuideVariant
+  const resolvedGap = typeof gap === 'number' ? gap : 0
+
   const gridConfig = React.useMemo(
-    () => createGridConfig(variant as GuideVariant, config.base, typeof gap === 'number' ? gap : 0, columns, columnWidth),
-    [variant, config.base, gap, columns, columnWidth]
+    () => createGuideConfig(resolvedVariant, config.base, resolvedGap, columns, columnWidth as number | string | undefined),
+    [resolvedVariant, config.base, resolvedGap, columns, columnWidth]
   )
 
   const { template, columnsCount, calculatedGap } = useGuide(containerRef, gridConfig)
 
-  const defaultStyles = React.useMemo(
-    () => createDefaultGuideStyles(config.base, config.colors.line),
-    [config.base, config.colors.line]
+  const descriptor = React.useMemo(
+    () => createGuideDescriptor({
+      base: config.base,
+      colors: config.colors,
+      variant: resolvedVariant,
+      align: align || 'center',
+      width, height, columnWidth, maxWidth, color,
+      containerWidth: 0, containerHeight,
+      template, columnsCount, calculatedGap,
+      isVisible: isShown,
+    }),
+    [config, resolvedVariant, align, width, height, columnWidth, maxWidth, color, containerHeight, template, columnsCount, calculatedGap, isShown]
   )
 
-  const containerStyles = React.useMemo(() => {
-    // Process dimension values
-    const widthValue = formatValue(width || containerWidth || 'auto')
-    const heightValue = formatValue(height || containerHeight || 'auto')
-    const maxWidthValue = formatValue(maxWidth || 'none')
-    const columnWidthValue = formatValue(columnWidth || '60px')
-
-    // Define dimensions that should be skipped when set to auto
-    const autoDimensions = ['--bkgw', '--bkgh']
-
-    // Create custom styles with conditional overrides
-    const customStyles = {
-      ...createStyleOverride({
-        key: '--bkgw',
-        value: widthValue,
-        defaultStyles,
-        skipDimensions: { auto: autoDimensions },
-      }),
-      ...createStyleOverride({
-        key: '--bkgh',
-        value: heightValue,
-        defaultStyles,
-        skipDimensions: { auto: autoDimensions },
-      }),
-      ...createStyleOverride({
-        key: '--bkgmw',
-        value: maxWidthValue,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgcw',
-        value: columnWidthValue,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgc',
-        value: `${columnsCount}`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgb',
-        value: `0`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgcl',
-        value: color ?? config.colors.line,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgg',
-        value: `${calculatedGap}px`,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkgj',
-        value: align || 'center',
-        defaultStyles,
-      }),
-      ...(template && template !== 'none' ? { '--bkgt': template } : {}),
-      // Add grid template if available
-      ...(template && template !== 'none'
-        ? { gridTemplateColumns: template }
-        : {}),
-    } as React.CSSProperties
-
-    return mergeStyles(customStyles, style)
-  }, [
-    width,
-    height,
-    maxWidth,
-    columnWidth,
-    columnsCount,
-    color,
-    template,
-    calculatedGap,
-    containerWidth,
-    containerHeight,
-    config.colors.line,
-    defaultStyles,
-    style,
-    align,
-  ])
+  const containerStyles = React.useMemo(
+    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    [descriptor.containerStyle, style]
+  )
 
   return (
     <div
       ref={containerRef}
       data-testid="guide"
       aria-hidden="true"
-      className={mergeClasses(
-        styles.gde,
-        className,
-        isShown ? styles.v : styles.h,
-        variant === 'line' && styles.line
-      )}
+      className={mergeClasses(styles.gde, className, isShown ? styles.v : styles.h, descriptor.isLineVariant && styles.line)}
       data-variant={variant}
       style={containerStyles}
       {...props}
     >
       {isShown && (
         <div className={styles.cols} data-variant={variant}>
-          {Array.from({ length: columnsCount }, (_, i) => {
-            const colColor =
-              (variant && variant in config.colors
-                ? config.colors[variant as keyof typeof config.colors]
-                : undefined) ?? config.colors.line
-            return (
-              <div
-                key={i}
-                className={styles.col}
-                data-column-index={i}
-                data-variant={variant}
-                style={{ backgroundColor: colColor }}
-              />
-            )
-          })}
+          {Array.from({ length: descriptor.columnsCount }, (_, i) => (
+            <div
+              key={i}
+              className={styles.col}
+              data-column-index={i}
+              data-variant={variant}
+              style={{ backgroundColor: descriptor.columnColor }}
+            />
+          ))}
         </div>
       )}
       {children}
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
index c4491e7b..26737ca2 100644
--- a/packages/react/src/components/Layout/Layout.tsx
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import {
-  parsePadding,
-  formatValue,
-  createStyleOverride,
-  mergeClasses,
-} from '@baseline-kit/core'
+import { parsePadding, mergeClasses, createLayoutDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { Config } from '../Config'
@@ -15,125 +10,23 @@ import { Spacer } from '../Spacer'
 import { ComponentsProps, Variant } from '../types'
 import styles from './styles.module.css'
 
-// Import the IndicatorNode type from Spacer props
-type IndicatorNode = NonNullable<
-  React.ComponentProps<typeof Spacer>['indicatorNode']
->
+type IndicatorNode = NonNullable<React.ComponentProps<typeof Spacer>['indicatorNode']>
 
 export type LayoutProps = {
-  /**
-   * Grid column definition. Supports:
-   * - Number: Equal columns (3 → repeat(3, 1fr))
-   * - String: Raw template ("1fr auto 200px")
-   * - Array: Mixed values ([100, '1fr'] → "100px 1fr")
-   */
   columns?: number | string | Array<number | string>
-  /** Grid row definition (same format as columns) */
   rows?: number | string | Array<number | string>
-  /** Controls item alignment along column axis */
   justifyItems?: React.CSSProperties['justifyItems']
-  /** Controls item alignment along row axis */
   alignItems?: React.CSSProperties['alignItems']
-  /** Controls content distribution along row axis */
   justifyContent?: React.CSSProperties['justifyContent']
-  /** Controls content distribution along column axis */
   alignContent?: React.CSSProperties['alignContent']
-  /** Custom measurement indicator renderer */
   indicatorNode?: IndicatorNode
-  /** Visual style in debug mode */
   variant?: Variant
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
-  /** Container width (defaults to "auto") */
   width?: React.CSSProperties['width']
-  /** Container height (defaults to "auto") */
   height?: React.CSSProperties['height']
   children?: React.ReactNode
-} & ComponentsProps &
-  Gaps
+} & ComponentsProps & Gaps
 
-/** Creates default layout styles with theme colors */
-const createDefaultLayoutStyles = (colors: {
-  line: string
-  flat: string
-  text: string
-}): Record<string, string> => ({
-  '--bklw': 'auto',
-  '--bklh': 'auto',
-  '--bklcl': colors.line,
-  '--bklcf': colors.flat,
-  '--bklci': colors.text,
-})
-
-/** Parses grid template definitions into CSS grid-template values. */
-const getGridTemplate = (
-  prop?: number | string | Array<number | string>
-): string => {
-  if (typeof prop === 'number') return `repeat(${prop}, 1fr)`
-  if (typeof prop === 'string') return prop
-  if (Array.isArray(prop)) {
-    return prop.map((p) => (typeof p === 'number' ? `${p}px` : p)).join(' ')
-  }
-  return 'repeat(auto-fill, minmax(100px, 1fr))'
-}
-
-/** Creates grid gap styles */
-const createGridGapStyles = (
-  gap?: React.CSSProperties['gap'] | number,
-  rowGap?: React.CSSProperties['rowGap'] | number,
-  columnGap?: React.CSSProperties['columnGap'] | number
-): Record<string, string> => {
-  const styles: Record<string, string> = {}
-
-  if (gap !== undefined) {
-    styles.gap = formatValue(gap)
-  }
-  if (rowGap !== undefined) {
-    styles.rowGap = formatValue(rowGap)
-  }
-  if (columnGap !== undefined) {
-    styles.columnGap = formatValue(columnGap)
-  }
-
-  return styles
-}
-
-/**
- * A grid-based layout component with baseline alignment and responsive columns.
- *
- * @remarks
- * Layout provides a CSS Grid container that:
- * - Supports flexible column definitions
- * - Maintains baseline grid alignment
- * - Includes gap management
- * - Offers comprehensive alignment controls
- * - Provides debug overlays for visual verification
- *
- * When no explicit dimensions are provided, Layout defaults to "auto"
- * for both width and height.
- *
- * @example
- * ```tsx
- * // Basic equal columns
- * <Layout columns={3} gap={16}>
- *   <div>Column 1</div>
- *   <div>Column 2</div>
- *   <div>Column 3</div>
- * </Layout>
- *
- * // Mixed column widths with alignment
- * <Layout
- *   columns={['200px', '1fr', '2fr']}
- *   gap={24}
- *   alignItems="center"
- *   justifyContent="space-between"
- * >
- *   <div>Fixed</div>
- *   <div>Flexible</div>
- *   <div>Double width</div>
- * </Layout>
- * ```
- */
 export const Layout = React.memo(function Layout({
   alignContent,
   alignItems,
@@ -158,21 +51,12 @@ export const Layout = React.memo(function Layout({
   const config = useConfig('layout')
   const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
-  // Add hydration state tracking
   const [isHydrated, setIsHydrated] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
+  React.useEffect(() => { setIsHydrated(true) }, [])
 
   const layoutRef = React.useRef<HTMLDivElement>(null)
+  const initialPadding = React.useMemo(() => parsePadding(spacingProps), [spacingProps])
 
-  const initialPadding = React.useMemo(
-    () => parsePadding(spacingProps),
-    [spacingProps]
-  )
-
-  // Get padding calculation from useBaseline
   const baselinePadding = useBaseline(layoutRef, {
     base: config.base,
     snapping: 'height',
@@ -180,111 +64,34 @@ export const Layout = React.memo(function Layout({
     warnOnMisalignment: true,
   })
 
-  // Create stable initial padding for SSR
   const stablePadding = {
-    padding: {
-      top: initialPadding.top || 0,
-      right: initialPadding.right || 0,
-      bottom: initialPadding.bottom || 0,
-      left: initialPadding.left || 0,
-    },
+    padding: { top: initialPadding.top || 0, right: initialPadding.right || 0, bottom: initialPadding.bottom || 0, left: initialPadding.left || 0 },
   }
-
-  // Use stable padding during SSR and initial render, then switch to dynamic padding
-  const { padding } = hydratedValue(
-    isHydrated && !ssrMode,
-    stablePadding,
-    baselinePadding
-  )
-
-  const gridTemplateColumns = React.useMemo(
-    () => getGridTemplate(columns),
-    [columns]
-  )
-
-  const gridTemplateRows = React.useMemo(
-    () => (rows ? getGridTemplate(rows) : 'auto'),
-    [rows]
-  )
-
-  const defaultLayoutStyles = React.useMemo(
-    () => createDefaultLayoutStyles(config.colors),
-    [config.colors]
+  const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+
+  const descriptor = React.useMemo(
+    () => createLayoutDescriptor({
+      colors: config.colors,
+      columns,
+      rows,
+      width: width as number | string | undefined,
+      height: height as number | string | undefined,
+      gap: gap as number | string | undefined,
+      rowGap: rowGap as number | string | undefined,
+      columnGap: columnGap as number | string | undefined,
+      justifyItems: justifyItems as string | undefined,
+      alignItems: alignItems as string | undefined,
+      justifyContent: justifyContent as string | undefined,
+      alignContent: alignContent as string | undefined,
+    }),
+    [config.colors, columns, rows, width, height, gap, rowGap, columnGap, justifyItems, alignItems, justifyContent, alignContent]
   )
 
-  const gridGapStyles = React.useMemo(
-    () => createGridGapStyles(gap, rowGap, columnGap),
-    [gap, rowGap, columnGap]
+  const containerStyles = React.useMemo(
+    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    [descriptor.containerStyle, style]
   )
 
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(width || 'auto')
-    const heightValue = formatValue(height || 'auto')
-
-    // Define dimensions that should be skipped when set to auto
-    const autoDimensions = ['--bklw', '--bklh']
-
-    return mergeStyles(
-      {
-        // Theme overrides
-        ...createStyleOverride({
-          key: '--bklw',
-          value: widthValue,
-          defaultStyles: defaultLayoutStyles,
-          skipDimensions: { auto: autoDimensions },
-        }),
-        ...createStyleOverride({
-          key: '--bklh',
-          value: heightValue,
-          defaultStyles: defaultLayoutStyles,
-          skipDimensions: { auto: autoDimensions },
-        }),
-        ...createStyleOverride({
-          key: '--bklcl',
-          value: config.colors.line,
-          defaultStyles: defaultLayoutStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bklcf',
-          value: config.colors.flat,
-          defaultStyles: defaultLayoutStyles,
-        }),
-        ...createStyleOverride({
-          key: '--bklci',
-          value: config.colors.text,
-          defaultStyles: defaultLayoutStyles,
-        }),
-
-        // Grid properties - only inject if different from defaults
-        ...(gridTemplateColumns !== 'repeat(auto-fill, minmax(100px, 1fr))' && {
-          '--bklgtc': gridTemplateColumns,
-        }),
-        ...(gridTemplateRows !== 'auto' && { '--bklgtr': gridTemplateRows }),
-        ...(justifyItems && { '--bklji': justifyItems }),
-        ...(alignItems && { '--bklai': alignItems }),
-        ...(justifyContent && { '--bkljc': justifyContent }),
-        ...(alignContent && { '--bklac': alignContent }),
-
-        // Include gap styles
-        ...gridGapStyles,
-      } as React.CSSProperties,
-      style
-    )
-  }, [
-    gridTemplateColumns,
-    gridTemplateRows,
-    justifyItems,
-    alignItems,
-    justifyContent,
-    alignContent,
-    width,
-    height,
-    config.colors,
-    defaultLayoutStyles,
-    style,
-    gridGapStyles,
-  ])
-
   return (
     <Config spacer={{ variant: variant ?? 'line' }}>
       <Padder
@@ -303,11 +110,7 @@ export const Layout = React.memo(function Layout({
           className={mergeClasses(className, styles.lay)}
           style={containerStyles}
           {...(spacingProps && Object.keys(spacingProps).length > 0
-            ? Object.fromEntries(
-                Object.entries(spacingProps).filter(
-                  ([key]) => key !== 'ssrMode'
-                )
-              )
+            ? Object.fromEntries(Object.entries(spacingProps).filter(([key]) => key !== 'ssrMode'))
             : {})}
         >
           {children}
diff --git a/packages/react/src/components/Padder/Padder.tsx b/packages/react/src/components/Padder/Padder.tsx
index 25e77d01..07c986ac 100644
--- a/packages/react/src/components/Padder/Padder.tsx
+++ b/packages/react/src/components/Padder/Padder.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import {
-  mergeClasses,
-  parsePadding,
-  formatValue,
-} from '@baseline-kit/core'
+import { mergeClasses, parsePadding, createPadderDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
@@ -12,84 +8,18 @@ import { Spacer, IndicatorNode } from '../Spacer'
 import type { DebuggingMode } from '../types'
 import styles from './styles.module.css'
 
-type RenderSpacerFn = (
-  width: React.CSSProperties['width'],
-  height: React.CSSProperties['height']
-) => React.ReactNode
-
-type PaddingStyles = {
-  paddingBlock?: string
-  paddingInline?: string
-  [key: string]: string | undefined
-}
-
 export type PadderProps = {
-  /** Render function for custom measurement indicators */
   indicatorNode?: IndicatorNode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
   children?: React.ReactNode
 } & ComponentsProps
 
-/** Creates default container styles for Padder */
-const createPadderContainerStyles = (
-  width: React.CSSProperties['width'],
-  height: React.CSSProperties['height'],
-  base: number,
-  color: string
-): Record<string, string> => {
-  const stylesObj: Record<string, string> = {}
-
-  // Only inject width/height if they differ from defaults
-  if (width !== 'fit-content') {
-    stylesObj['--bkpw'] = formatValue(width || 'fit-content')
-  }
-  if (height !== 'fit-content') {
-    stylesObj['--bkph'] = formatValue(height || 'fit-content')
-  }
-
-  // Always set base and color
-  stylesObj['--bkpb'] = `${base}px`
-  stylesObj['--bkpc'] = color
-
-  return stylesObj
-}
-
-/** Creates direct padding styles when spacers are disabled */
-const createDirectPaddingStyles = (
-  enableSpacers: boolean,
-  padding: {
-    top: number
-    right: number
-    bottom: number
-    left: number
-  }
-): PaddingStyles => {
-  const { top, right, bottom, left } = padding
-  const stylesObj: PaddingStyles = {}
-
-  // When spacers are disabled (i.e. debugging === "none"), add direct padding styles
-  if (!enableSpacers) {
-    if (top > 0 || bottom > 0) {
-      stylesObj.paddingBlock = `${top}px ${bottom}px`
-    }
-    if (left > 0 || right > 0) {
-      stylesObj.paddingInline = `${left}px ${right}px`
-    }
-  }
-
-  return stylesObj
-}
-
-/** Creates a render function for spacers */
 const createRenderSpacerFn = (
   variant: Variant | undefined,
   debugging: DebuggingMode | undefined,
   indicatorNode?: IndicatorNode
-): RenderSpacerFn => {
-  // Default to 'line' if variant is undefined
+) => {
   const safeVariant = variant || 'line'
-  // Default to 'none' if debugging is undefined
   const safeDebugging = debugging || 'none'
 
   const SpacerElement = (
@@ -104,93 +34,26 @@ const createRenderSpacerFn = (
       width={widthVal !== '100%' ? widthVal : undefined}
     />
   )
-
-  // Add display name to satisfy linter
   SpacerElement.displayName = 'PadderSpacer'
-
   return SpacerElement
 }
 
-/**
- * A foundational component that manages consistent padding with visual debugging.
- *
- * @remarks
- * Padder is a low-level utility that:
- * - Applies consistent padding around content
- * - Supports visual debugging of spacing
- * - Maintains baseline grid alignment
- * - Uses Spacer components for visual padding representation
- *
- * When debugging is enabled (`"visible"` or `"hidden"`), padding is represented
- * using Spacer components. When debugging is `"none"`, direct CSS padding is
- * applied for better performance.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Padder block={16} inline={8}>
- *   <div>Content with consistent padding</div>
- * </Padder>
- *
- * // With debug visuals and custom indicators
- * <Padder
- *   block={[8, 16]}
- *   inline={[16, 24]}
- *   debugging="visible"
- *   indicatorNode={(value, dim) => (
- *     <span className="text-sm">{dim}: {value}px</span>
- *   )}
- * >
- *   <div>Content with visible padding guides</div>
- * </Padder>
- *
- * // Direct padding mode
- * <Padder
- *   block={16}
- *   inline={24}
- *   debugging="none"
- * >
- *   <div>Content with direct CSS padding</div>
- * </Padder>
- * ```
- */
 export const Padder = React.memo(
   React.forwardRef<HTMLDivElement, PadderProps>(function Padder(
-    {
-      children,
-      className,
-      debugging: debuggingProp,
-      height,
-      indicatorNode,
-      style,
-      width,
-      ssrMode = false,
-      ...spacingProps
-    },
+    { children, className, debugging: debuggingProp, height, indicatorNode, style, width, ssrMode = false, ...spacingProps },
     ref
   ) {
     const config = useConfig('padder')
     const { variant } = useConfig('spacer')
-    const initialPadding = React.useMemo(
-      () => parsePadding(spacingProps),
-      [spacingProps]
-    )
-    const { isShown, isNone, debugging } = useDebug(
-      debuggingProp,
-      config.debugging
-    )
+    const initialPadding = React.useMemo(() => parsePadding(spacingProps), [spacingProps])
+    const { isShown, isNone, debugging } = useDebug(debuggingProp, config.debugging)
     const enableSpacers = !isNone
 
-    // Add hydration state tracking
     const [isHydrated, setIsHydrated] = React.useState(false)
-
-    React.useEffect(() => {
-      setIsHydrated(true)
-    }, [])
+    React.useEffect(() => { setIsHydrated(true) }, [])
 
     const internalRef = React.useRef<HTMLDivElement | null>(null)
 
-    // Get padding calculation from useBaseline
     const baselinePadding = useBaseline(internalRef, {
       base: config.base,
       snapping: 'height',
@@ -198,118 +61,53 @@ export const Padder = React.memo(
       warnOnMisalignment: !isNone,
     })
 
-    // Create stable initial padding for SSR
     const stablePadding = {
-      padding: {
-        top: initialPadding.top || 0,
-        right: initialPadding.right || 0,
-        bottom: initialPadding.bottom || 0,
-        left: initialPadding.left || 0,
-      },
+      padding: { top: initialPadding.top || 0, right: initialPadding.right || 0, bottom: initialPadding.bottom || 0, left: initialPadding.left || 0 },
     }
-
-    // Use stable padding during SSR and initial render, then switch to dynamic padding
-    const { padding } = hydratedValue(
-      isHydrated && !ssrMode,
-      stablePadding,
-      baselinePadding
-    )
+    const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
 
     const setRefs = mergeRefs(ref, internalRef)
 
-    const containerStyles = React.useMemo(() => {
-      const baseStyles = createPadderContainerStyles(
-        width,
-        height,
-        config.base,
-        config.color
-      )
-
-      const paddingStyles = createDirectPaddingStyles(enableSpacers, {
-        top: padding.top,
-        right: padding.right,
-        bottom: padding.bottom,
-        left: padding.left,
-      })
+    const descriptor = React.useMemo(
+      () => createPadderDescriptor({
+        base: config.base,
+        color: config.color,
+        width: width as number | string | undefined,
+        height: height as number | string | undefined,
+        padding,
+        enableSpacers,
+      }),
+      [config.base, config.color, width, height, padding, enableSpacers]
+    )
 
-      return mergeStyles(
-        { ...baseStyles, ...paddingStyles } as React.CSSProperties,
-        style
-      )
-    }, [
-      width,
-      height,
-      config.base,
-      config.color,
-      enableSpacers,
-      padding.top,
-      padding.right,
-      padding.bottom,
-      padding.left,
-      style,
-    ])
+    const containerStyles = React.useMemo(
+      () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+      [descriptor.containerStyle, style]
+    )
 
     const renderSpacer = React.useMemo(
       () => createRenderSpacerFn(variant, debugging, indicatorNode),
       [variant, debugging, indicatorNode]
     )
 
-    // When debugging is "none", simply return a container with direct CSS padding
-    // and no additional grid/Spacer elements.
     if (!enableSpacers) {
       return (
-        <div
-          ref={setRefs}
-          data-testid="padder"
-          className={mergeClasses(styles.pad, className)}
-          style={containerStyles}
-        >
+        <div ref={setRefs} data-testid="padder" className={mergeClasses(styles.pad, className)} style={containerStyles}>
           {children}
         </div>
       )
     }
 
-    // When debugging is enabled, use a grid structure with wrapping spacer elements.
     return (
-      <div
-        ref={setRefs}
-        data-testid="padder"
-        className={mergeClasses(styles.pad, isShown && styles.v, className)}
-        style={containerStyles}
-      >
+      <div ref={setRefs} data-testid="padder" className={mergeClasses(styles.pad, isShown && styles.v, className)} style={containerStyles}>
         <>
-          {/* Top spacer - spans full width */}
-          {padding.top >= 0 && (
-            <div style={{ gridColumn: '1 / -1' }}>
-              {renderSpacer('100%', padding.top)}
-            </div>
-          )}
-
-          {/* Left spacer */}
-          {padding.left >= 0 && (
-            <div style={{ gridRow: '2 / 3' }}>
-              {renderSpacer(padding.left, '100%')}
-            </div>
-          )}
+          {padding.top >= 0 && <div style={{ gridColumn: '1 / -1' }}>{renderSpacer('100%', padding.top)}</div>}
+          {padding.left >= 0 && <div style={{ gridRow: '2 / 3' }}>{renderSpacer(padding.left, '100%')}</div>}
         </>
-
-        {/* Main content - centered in grid */}
         <div style={{ gridRow: '2 / 3', gridColumn: '2 / 3' }}>{children}</div>
-
         <>
-          {/* Right spacer */}
-          {padding.right >= 0 && (
-            <div style={{ gridRow: '2 / 3' }}>
-              {renderSpacer(padding.right, '100%')}
-            </div>
-          )}
-
-          {/* Bottom spacer - spans full width */}
-          {padding.bottom >= 0 && (
-            <div style={{ gridColumn: '1 / -1' }}>
-              {renderSpacer('100%', padding.bottom)}
-            </div>
-          )}
+          {padding.right >= 0 && <div style={{ gridRow: '2 / 3' }}>{renderSpacer(padding.right, '100%')}</div>}
+          {padding.bottom >= 0 && <div style={{ gridColumn: '1 / -1' }}>{renderSpacer('100%', padding.bottom)}</div>}
         </>
       </div>
     )
diff --git a/packages/react/src/components/Spacer/Spacer.tsx b/packages/react/src/components/Spacer/Spacer.tsx
index 40d583ca..43721d13 100644
--- a/packages/react/src/components/Spacer/Spacer.tsx
+++ b/packages/react/src/components/Spacer/Spacer.tsx
@@ -1,107 +1,24 @@
 import * as React from 'react'
 import { useConfig, useDebug } from '../../hooks'
-import {
-  formatValue,
-  normalizeValuePair,
-  createStyleOverride,
-  mergeClasses,
-} from '@baseline-kit/core'
+import { mergeClasses, createSpacerDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
 import styles from './styles.module.css'
 
-// Type Definitions ------------------------------------------------------------
-
-export type IndicatorNode = (
-  value: number,
-  type: 'width' | 'height'
-) => React.ReactNode
+export type IndicatorNode = (value: number, type: 'width' | 'height') => React.ReactNode
 
 export type SpacerProps = {
-  /** Explicit width (takes precedence over block) */
   width?: React.CSSProperties['width']
-  /** Explicit height (takes precedence over block) */
   height?: React.CSSProperties['height']
-  /** Visual style in debug mode */
   variant?: Variant
-  /** Color to use for debug visuals (overrides theme) */
   color?: string
-  /** Base unit for measurements (defaults to theme value) */
   base?: number
-  /** Custom content to render (for debugging info) */
   children?: React.ReactNode
-  /** Custom indicator node rendering function */
   indicatorNode?: IndicatorNode
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
 } & ComponentsProps
 
-// Utils -----------------------------------------------------------------------
-
-/** Creates default spacer styles */
-const createDefaultSpacerStyles = (
-  base: number,
-  textColor: string,
-  flatColor: string,
-  lineColor: string
-): Record<string, string> => ({
-  '--bksw': '100%',
-  '--bksh': '100%',
-  '--bksb': `${base}px`,
-  '--bksct': textColor,
-  '--bkscf': flatColor,
-  '--bkscl': lineColor,
-})
-
-/** Generates measurement indicators for debugging */
-const generateMeasurements = (
-  isShown: boolean,
-  indicatorNode: SpacerProps['indicatorNode'],
-  normWidth: number | string,
-  normHeight: number | string
-): React.ReactNode | null => {
-  if (!isShown || !indicatorNode) return null
-
-  const width = typeof normWidth === 'number' ? normWidth : 0
-  const height = typeof normHeight === 'number' ? normHeight : 0
-
-  return (
-    <>
-      {height !== 0 && (
-        <span key="height">{indicatorNode(height, 'height')}</span>
-      )}
-      {width !== 0 && <span key="width">{indicatorNode(width, 'width')}</span>}
-    </>
-  )
-}
-
-/**
- * Creates empty space for implementing margins, gaps, and spacing.
- *
- * @remarks
- * - Flexible sizing: Set width and height directly
- * - Normalized values: All inputs convert to base unit multiples
- * - Debug visuals: Shows spacing measurements with theming
- * - Automatic: Empty in production, visible in debug mode
- *
- * @example
- * ```tsx
- * // Fixed size spacer
- * <Spacer width={32} height={16} />
- *
- * // Percentage-based spacer with debug hints
- * <Spacer
- *   width="50%"
- *   height={32}
- *   debugging="visible"
- *   variant="line"
- * />
- *
- * // Full-width spacer
- * <Spacer height={64} />
- * ```
- */
 export const Spacer = React.memo(function Spacer({
   height: heightProp,
   width: widthProp,
@@ -118,116 +35,50 @@ export const Spacer = React.memo(function Spacer({
 }: SpacerProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfig('spacer')
-
   const { isShown } = useDebug(debuggingProp, config.debugging)
   const variant = variantProp ?? config.variant
   const base = baseProp ?? config.base
 
-  // Add hydration state tracking
   const [isHydrated, setIsHydrated] = React.useState(false)
+  React.useEffect(() => { setIsHydrated(true) }, [])
 
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
-
-  const [normWidth, normHeight] = React.useMemo(() => {
-    return normalizeValuePair([widthProp, heightProp], [0, 0], {
+  const descriptor = React.useMemo(
+    () => createSpacerDescriptor({
       base,
-      suppressWarnings: true,
-    })
-  }, [widthProp, heightProp, base])
-
-  // Ensure stable rendering for measurements during SSR
-  const shouldShowMeasurements = hydratedValue(
-    isHydrated && !ssrMode,
-    false, // Don't show measurements during SSR
-    isShown && indicatorNode !== undefined
+      colors: config.colors,
+      width: widthProp as number | string | undefined,
+      height: heightProp as number | string | undefined,
+      color: colorProp,
+    }),
+    [base, config.colors, widthProp, heightProp, colorProp]
   )
 
-  // Only generate measurements after hydration
-  const measurements = React.useMemo(() => {
-    if (!shouldShowMeasurements) {
-      return null
-    }
+  const shouldShowMeasurements = hydratedValue(isHydrated && !ssrMode, false, isShown && indicatorNode !== undefined)
 
-    return generateMeasurements(isShown, indicatorNode, normWidth, normHeight)
-  }, [shouldShowMeasurements, isShown, indicatorNode, normWidth, normHeight])
-
-  const defaultStyles = React.useMemo(
-    () =>
-      createDefaultSpacerStyles(
-        base,
-        config.colors.text,
-        config.colors.flat,
-        config.colors.line
-      ),
-    [base, config.colors]
+  const measurements = React.useMemo(() => {
+    if (!shouldShowMeasurements) return null
+    const w = descriptor.normWidth
+    const h = descriptor.normHeight
+    return (
+      <>
+        {h !== 0 && <span key="height">{indicatorNode!(h, 'height')}</span>}
+        {w !== 0 && <span key="width">{indicatorNode!(w, 'width')}</span>}
+      </>
+    )
+  }, [shouldShowMeasurements, indicatorNode, descriptor.normWidth, descriptor.normHeight])
+
+  const baseStyles = React.useMemo(
+    () => mergeStyles(descriptor.style as React.CSSProperties, style),
+    [descriptor.style, style]
   )
 
-  const baseStyles = React.useMemo(() => {
-    const heightValue = formatValue(normHeight || '100%')
-    const widthValue = formatValue(normWidth || '100%')
-    const baseValue = `${base}px`
-
-    // Define dimensions that should be skipped when set to 100%
-    const dimensionVars = ['--bksw', '--bksh']
-
-    const customStyles = {
-      ...createStyleOverride({
-        key: '--bksh',
-        value: heightValue,
-        defaultStyles,
-        skipDimensions: { fullSize: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bksw',
-        value: widthValue,
-        defaultStyles,
-        skipDimensions: { fullSize: dimensionVars },
-      }),
-      // Explicitly set --bksb to ensure it is always applied
-      '--bksb': baseValue,
-      ...createStyleOverride({
-        key: '--bksct',
-        value: colorProp ?? config.colors.text,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkscl',
-        value: colorProp ?? config.colors.line,
-        defaultStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkscf',
-        value: colorProp ?? config.colors.flat,
-        defaultStyles,
-      }),
-    } as React.CSSProperties
-
-    return mergeStyles(customStyles, style)
-  }, [
-    normWidth,
-    normHeight,
-    colorProp,
-    base,
-    config.colors,
-    defaultStyles,
-    style,
-  ])
-
   return (
     <div
       ref={ref}
       data-testid="spacer"
-      className={mergeClasses(
-        styles.spr,
-        isShown && styles[variant],
-        className
-      )}
+      className={mergeClasses(styles.spr, isShown && styles[variant], className)}
       data-variant={variant}
-      data-height={
-        typeof normHeight === 'number' ? `${normHeight}px` : normHeight
-      }
+      data-height={typeof descriptor.normHeight === 'number' ? `${descriptor.normHeight}px` : descriptor.normHeight}
       style={baseStyles}
       {...props}
     >
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index d581bf9c..7653735d 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import {
-  mergeClasses,
-  parsePadding,
-  formatValue,
-  createStyleOverride,
-} from '@baseline-kit/core'
+import { mergeClasses, parsePadding, createStackDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { Padder } from '../Padder'
@@ -15,115 +10,23 @@ import { Config } from '../Config'
 import { ComponentsProps, Variant } from '../types'
 import styles from './styles.module.css'
 
-// Maps shorthand directions to Flexbox directions
-const DIRECTION_AXIS: Record<string, React.CSSProperties['flexDirection']> = {
-  x: 'row',
-  y: 'column',
-  '-x': 'row-reverse',
-  '-y': 'column-reverse',
-}
-
-export type CSSPropertiesDirectionalAxis = keyof typeof DIRECTION_AXIS
+export type CSSPropertiesDirectionalAxis = 'x' | 'y' | '-x' | '-y'
 
 export type StackProps = {
-  /** Main axis orientation */
-  direction?: React.CSSProperties['flexDirection'] &
-    CSSPropertiesDirectionalAxis
-  /** Distribution of space on main axis */
+  direction?: React.CSSProperties['flexDirection'] | CSSPropertiesDirectionalAxis
   justify?: React.CSSProperties['justifyContent']
-  /** Alignment on cross axis */
   align?: React.CSSProperties['alignItems']
-  /** Container width (defaults to "auto") */
   width?: React.CSSProperties['width']
-  /** Container height (defaults to "auto") */
   height?: React.CSSProperties['height']
-  /** Custom measurement indicator renderer */
   indicatorNode?: IndicatorNode
-  /** Visual style in debug mode */
   variant?: Variant
-  /** Gap between items in base units */
   gap?: Gaps
-  /** Row gap when using different values for rows and columns */
   rowGap?: Gaps
-  /** Column gap when using different values for rows and columns */
   columnGap?: Gaps
-  /** Flag to enable SSR-compatible mode (simplified initial render) */
   ssrMode?: boolean
   children?: React.ReactNode
 } & ComponentsProps
 
-// Utils -----------------------------------------------------------------------
-
-/** Creates default stack styles with theme colors */
-const createDefaultStackStyles = (colors: Record<string, string>) => ({
-  '--bkkw': 'auto',
-  '--bkkh': 'auto',
-  '--bkkcl': colors.line,
-  '--bkkcf': colors.flat,
-  '--bkkci': colors.text,
-})
-
-/** Creates gap styles for the stack */
-const createStackGapStyles = (
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number
-): Record<string, number | undefined> => ({
-  rowGap: gap !== undefined ? gap : rowGap,
-  columnGap: gap !== undefined ? gap : columnGap,
-})
-
-/**
- * A flexible container component aligning children to the baseline grid.
- *
- * @remarks
- * Stack provides a flex container that:
- * - Maintains baseline grid alignment
- * - Supports both row and column layouts
- * - Handles consistent spacing between items
- * - Includes visual debug overlays
- *
- * Key features:
- * - Automatic dimension management (defaults to auto)
- * - Direct padding application in non-debug mode
- * - Comprehensive alignment controls
- * - Theme-aware debug visuals
- *
- * @example
- * ```tsx
- * // Basic horizontal stack
- * <Stack gap={16}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Stack>
- *
- * // Vertical stack with alignment
- * <Stack
- *   direction="column"
- *   gap={24}
- *   align="center"
- *   justify="space-between"
- *   debugging="visible"
- * >
- *   <div>Top</div>
- *   <div>Middle</div>
- *   <div>Bottom</div>
- * </Stack>
- *
- * // Complex layout with padding
- * <Stack
- *   direction="row"
- *   gap={32}
- *   align="stretch"
- *   block={[16, 24]}
- *   inline={16}
- *   debugging="visible"
- * >
- *   <div>Panel 1</div>
- *   <div>Panel 2</div>
- * </Stack>
- * ```
- */
 export const Stack = React.memo(function Stack({
   align = 'flex-start',
   children,
@@ -142,25 +45,15 @@ export const Stack = React.memo(function Stack({
   ssrMode = false,
   ...spacingProps
 }: StackProps) {
-  // Read configuration from context or props
   const config = useConfig('stack')
   const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
-  // Add hydration state tracking
   const [isHydrated, setIsHydrated] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsHydrated(true)
-  }, [])
+  React.useEffect(() => { setIsHydrated(true) }, [])
 
   const stackRef = React.useRef<HTMLDivElement | null>(null)
+  const { top, right, bottom, left } = parsePadding({ ...spacingProps })
 
-  // Process spacing props
-  const { top, right, bottom, left } = parsePadding({
-    ...spacingProps,
-  })
-
-  // Get padding calculation from useBaseline
   const baselinePadding = useBaseline(stackRef, {
     base: config.base,
     snapping: 'height',
@@ -168,110 +61,32 @@ export const Stack = React.memo(function Stack({
     warnOnMisalignment: debugging !== 'none',
   })
 
-  // Create stable initial padding for SSR
-  const stablePadding = {
-    padding: {
-      top: top || 0,
-      right: right || 0,
-      bottom: bottom || 0,
-      left: left || 0,
-    },
-  }
-
-  // Use stable padding during SSR and initial render, then switch to dynamic padding
-  const { padding } = hydratedValue(
-    isHydrated && !ssrMode,
-    stablePadding,
-    baselinePadding
+  const stablePadding = { padding: { top: top || 0, right: right || 0, bottom: bottom || 0, left: left || 0 } }
+  const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+
+  const descriptor = React.useMemo(
+    () => createStackDescriptor({
+      colors: config.colors,
+      direction,
+      justify,
+      align,
+      width: width as number | string | undefined,
+      height: height as number | string | undefined,
+      gap: gap !== undefined ? Number(gap) : undefined,
+      rowGap: rowGap !== undefined ? Number(rowGap) : undefined,
+      columnGap: columnGap !== undefined ? Number(columnGap) : undefined,
+    }),
+    [config.colors, direction, justify, align, width, height, gap, rowGap, columnGap]
   )
 
-  const stackGapStyles = React.useMemo(() => {
-    const formattedRowGap = rowGap !== undefined ? Number(rowGap) : undefined
-    const formattedColumnGap =
-      columnGap !== undefined ? Number(columnGap) : undefined
-    const formattedGap = gap !== undefined ? Number(gap) : undefined
-
-    return createStackGapStyles(
-      formattedRowGap,
-      formattedColumnGap,
-      formattedGap
-    )
-  }, [rowGap, columnGap, gap])
-
-  const defaultStackStyles = React.useMemo(
-    () => createDefaultStackStyles(config.colors),
-    [config.colors]
+  const containerStyles = React.useMemo(
+    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    [descriptor.containerStyle, style]
   )
 
-  const containerStyles = React.useMemo(() => {
-    const widthValue = formatValue(width || 'auto')
-    const heightValue = formatValue(height || 'auto')
-    const flexDirection = DIRECTION_AXIS[direction] || direction
-
-    // Define stack dimensions that should be skipped when set to auto
-    const dimensionVars = ['--bkkw', '--bkkh']
-
-    const customOverrides = {
-      ...createStyleOverride({
-        key: '--bkkw',
-        value: widthValue,
-        defaultStyles: defaultStackStyles,
-        skipDimensions: { auto: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bkkh',
-        value: heightValue,
-        defaultStyles: defaultStackStyles,
-        skipDimensions: { auto: dimensionVars },
-      }),
-      ...createStyleOverride({
-        key: '--bkkcl',
-        value: config.colors.line,
-        defaultStyles: defaultStackStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkkcf',
-        value: config.colors.flat,
-        defaultStyles: defaultStackStyles,
-      }),
-      ...createStyleOverride({
-        key: '--bkkci',
-        value: config.colors.text,
-        defaultStyles: defaultStackStyles,
-      }),
-    } as React.CSSProperties
-
-    const baseStyles = {
-      flexDirection,
-      justifyContent: justify,
-      alignItems: align,
-      width,
-      height,
-    } as React.CSSProperties
-
-    return mergeStyles(baseStyles, stackGapStyles, customOverrides, style)
-  }, [
-    direction,
-    justify,
-    align,
-    width,
-    height,
-    config.colors.line,
-    config.colors.flat,
-    config.colors.text,
-    defaultStackStyles,
-    stackGapStyles,
-    style,
-  ])
-
-  const mergedContainerStyles =
-    debugging === 'none'
-      ? {
-          ...containerStyles,
-          paddingBlock: `${padding.top}px ${padding.bottom}px`,
-          paddingInline: `${padding.left}px ${padding.right}px`,
-        }
-      : containerStyles
+  const mergedContainerStyles = debugging === 'none'
+    ? { ...containerStyles, paddingBlock: `${padding.top}px ${padding.bottom}px`, paddingInline: `${padding.left}px ${padding.right}px` }
+    : containerStyles
 
   return (
     <Config spacer={{ variant: variant ?? 'line' }}>

From 48f6507c350bbfd5ad966272b1fbfe4638eb5341 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 02:10:23 +0000
Subject: [PATCH 12/18] fix: clean up descriptor inconsistencies from review
 pass

- baseline: remove redundant color fallback in getRowStyle
- layout: extract duplicate grid template default to constant
- stack: remove redundant direct width/height properties (CSS vars suffice)
- padder: remove unreachable || fallback in conditional assignments

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/descriptors/baseline.ts | 2 +-
 packages/core/src/descriptors/layout.ts   | 6 ++++--
 packages/core/src/descriptors/padder.ts   | 4 ++--
 packages/core/src/descriptors/stack.ts    | 2 --
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/descriptors/baseline.ts b/packages/core/src/descriptors/baseline.ts
index ac40c17d..5ccc572c 100644
--- a/packages/core/src/descriptors/baseline.ts
+++ b/packages/core/src/descriptors/baseline.ts
@@ -62,7 +62,7 @@ export function createBaselineDescriptor(params: BaselineDescriptorParams): Base
   const getRowStyle = (index: number): Record<string, string> => ({
     '--bkrt': index === 0 ? '0px' : `${index * base}px`,
     '--bkrh': variant === 'line' ? '1px' : `${base}px`,
-    '--bkbc': chosenColor || (variant === 'line' ? colors.line : colors.flat),
+    '--bkbc': chosenColor,
   })
 
   return { containerStyle, rowCount, getRowStyle, padding, isVisible }
diff --git a/packages/core/src/descriptors/layout.ts b/packages/core/src/descriptors/layout.ts
index 28b65d7e..0e3ead0c 100644
--- a/packages/core/src/descriptors/layout.ts
+++ b/packages/core/src/descriptors/layout.ts
@@ -37,9 +37,11 @@ export function getGridTemplate(prop?: number | string | Array<number | string>)
   if (Array.isArray(prop)) {
     return prop.map((p) => (typeof p === 'number' ? `${p}px` : p)).join(' ')
   }
-  return 'repeat(auto-fill, minmax(100px, 1fr))'
+  return DEFAULT_GRID_TEMPLATE
 }
 
+const DEFAULT_GRID_TEMPLATE = 'repeat(auto-fill, minmax(100px, 1fr))'
+
 /**
  * Computes styles needed to render a Layout component.
  * Pure function — framework-agnostic.
@@ -64,7 +66,7 @@ export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDe
     ...createStyleOverride({ key: '--bklcl', value: colors.line, defaultStyles }),
     ...createStyleOverride({ key: '--bklcf', value: colors.flat, defaultStyles }),
     ...createStyleOverride({ key: '--bklci', value: colors.text, defaultStyles }),
-    ...(gridTemplateColumns !== 'repeat(auto-fill, minmax(100px, 1fr))' ? { '--bklgtc': gridTemplateColumns } : {}),
+    ...(gridTemplateColumns !== DEFAULT_GRID_TEMPLATE ? { '--bklgtc': gridTemplateColumns } : {}),
     ...(gridTemplateRows !== 'auto' ? { '--bklgtr': gridTemplateRows } : {}),
     ...(justifyItems ? { '--bklji': justifyItems } : {}),
     ...(alignItems ? { '--bklai': alignItems } : {}),
diff --git a/packages/core/src/descriptors/padder.ts b/packages/core/src/descriptors/padder.ts
index 2c105a0a..0ba5440a 100644
--- a/packages/core/src/descriptors/padder.ts
+++ b/packages/core/src/descriptors/padder.ts
@@ -24,10 +24,10 @@ export function createPadderDescriptor(params: PadderDescriptorParams): PadderDe
   const containerStyle: Record<string, string> = {}
 
   if (width !== undefined && width !== 'fit-content') {
-    containerStyle['--bkpw'] = formatValue(width || 'fit-content')
+    containerStyle['--bkpw'] = formatValue(width)
   }
   if (height !== undefined && height !== 'fit-content') {
-    containerStyle['--bkph'] = formatValue(height || 'fit-content')
+    containerStyle['--bkph'] = formatValue(height)
   }
 
   containerStyle['--bkpb'] = `${base}px`
diff --git a/packages/core/src/descriptors/stack.ts b/packages/core/src/descriptors/stack.ts
index 486ab970..3d607f6c 100644
--- a/packages/core/src/descriptors/stack.ts
+++ b/packages/core/src/descriptors/stack.ts
@@ -46,8 +46,6 @@ export function createStackDescriptor(params: StackDescriptorParams): StackDescr
     flexDirection,
     justifyContent: justify,
     alignItems: align,
-    ...(width ? { width: formatValue(width) } : {}),
-    ...(height ? { height: formatValue(height) } : {}),
     ...createStyleOverride({ key: '--bkkw', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
     ...createStyleOverride({ key: '--bkkh', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
     ...createStyleOverride({ key: '--bkkcl', value: colors.line, defaultStyles }),

From 55446297b0b1544fb922914b348c06cc9872b5d5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 02:21:13 +0000
Subject: [PATCH 13/18] refactor: standardize CSS variable naming, introduce
 cx, add class tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS Variable Convention:
- Consistent --bk{CC}-{prop} pattern across all components
  (bl=baseline, bx=box, gd=guide, ly=layout, pd=padder, sp=spacer, sk=stack)
- Fix Box descriptor/CSS mismatch (--bkbox* vs --bkx* → unified --bkbx-*)
- System vars: --bk-base, --bk-zi, --bk-zio, --bk-wf, --bk-hf

Class Name Utility:
- Rename mergeClasses → cx (standard convention, lighter API)

Framework-Agnostic Class Tokens:
- All 7 descriptors now return classTokens: string[] arrays
- React components map tokens to CSS module classes via
  cx(...descriptor.classTokens.map(t => styles[t]), className)
- Class logic decisions (visibility, variant) moved from React to core

All 177 tests pass, typecheck clean, build: 36.25 kB ESM

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/config/merge.ts             |  40 ++---
 packages/core/src/descriptors/baseline.ts     |  33 +++--
 packages/core/src/descriptors/box.ts          |  27 ++--
 packages/core/src/descriptors/guide.ts        |  48 +++---
 packages/core/src/descriptors/layout.ts       |  37 ++---
 packages/core/src/descriptors/padder.ts       |  17 ++-
 packages/core/src/descriptors/spacer.ts       |  36 +++--
 packages/core/src/descriptors/stack.ts        |  31 ++--
 packages/core/src/utils/merge.ts              |   6 +-
 .../src/components/Baseline/Baseline.tsx      |   8 +-
 .../src/components/Baseline/styles.module.css |  10 +-
 packages/react/src/components/Box/Box.tsx     |   8 +-
 .../src/components/Box/styles.module.css      |   8 +-
 packages/react/src/components/Guide/Guide.tsx |   8 +-
 .../src/components/Guide/styles.module.css    |  24 +--
 .../react/src/components/Layout/Layout.tsx    |   4 +-
 .../src/components/Layout/styles.module.css   |  26 ++--
 .../react/src/components/Padder/Padder.tsx    |   9 +-
 .../src/components/Padder/styles.module.css   |   8 +-
 .../react/src/components/Spacer/Spacer.tsx    |   8 +-
 .../src/components/Spacer/styles.module.css   |  10 +-
 packages/react/src/components/Stack/Stack.tsx |   7 +-
 .../src/components/Stack/styles.module.css    |  10 +-
 packages/react/src/components/styles/base.css | 140 +++++++++---------
 tests/components/Baseline.test.tsx            |   4 +-
 tests/components/Config.test.tsx              |  30 ++--
 tests/components/Guide.test.tsx               |  12 +-
 tests/components/Layout.test.tsx              |  14 +-
 tests/components/Padder.test.tsx              |   6 +-
 tests/components/Spacer.test.tsx              |  12 +-
 tests/utils/merge.test.ts                     |  10 +-
 31 files changed, 345 insertions(+), 306 deletions(-)

diff --git a/packages/core/src/config/merge.ts b/packages/core/src/config/merge.ts
index 4f7bc6a1..1480f1f6 100644
--- a/packages/core/src/config/merge.ts
+++ b/packages/core/src/config/merge.ts
@@ -39,25 +39,25 @@ type CSSVariablesParams = {
 export const createCSSVariables = (params: CSSVariablesParams): Record<string, string> => {
   const { base, baseline, guide, stack, spacer, layout, box, padder } = params
   return {
-    '--bkb': `${base}px`,
-    '--bkbcl': baseline.colors.line,
-    '--bkbcf': baseline.colors.flat,
-    '--bkgcl': guide.colors.line,
-    '--bkgcp': guide.colors.pattern,
-    '--bkgca': guide.colors.auto,
-    '--bkgcf': guide.colors.fixed,
-    '--bkscl': spacer.colors.line,
-    '--bkscf': spacer.colors.flat,
-    '--bksci': spacer.colors.text,
-    '--bkxcl': box.colors.line,
-    '--bkxcf': box.colors.flat,
-    '--bkxci': box.colors.text,
-    '--bkkcl': stack.colors.line,
-    '--bkkcf': stack.colors.flat,
-    '--bkkci': stack.colors.text,
-    '--bklcl': layout.colors.line,
-    '--bklcf': layout.colors.flat,
-    '--bklci': layout.colors.text,
-    '--bkpc': padder.color,
+    '--bk-base': `${base}px`,
+    '--bkbl-cl': baseline.colors.line,
+    '--bkbl-cf': baseline.colors.flat,
+    '--bkgd-cl': guide.colors.line,
+    '--bkgd-cp': guide.colors.pattern,
+    '--bkgd-ca': guide.colors.auto,
+    '--bkgd-cf': guide.colors.fixed,
+    '--bksp-cl': spacer.colors.line,
+    '--bksp-cf': spacer.colors.flat,
+    '--bksp-ct': spacer.colors.text,
+    '--bkbx-cl': box.colors.line,
+    '--bkbx-cf': box.colors.flat,
+    '--bkbx-ct': box.colors.text,
+    '--bksk-cl': stack.colors.line,
+    '--bksk-cf': stack.colors.flat,
+    '--bksk-ct': stack.colors.text,
+    '--bkly-cl': layout.colors.line,
+    '--bkly-cf': layout.colors.flat,
+    '--bkly-ct': layout.colors.text,
+    '--bkpd-c': padder.color,
   }
 }
diff --git a/packages/core/src/descriptors/baseline.ts b/packages/core/src/descriptors/baseline.ts
index 5ccc572c..235d7071 100644
--- a/packages/core/src/descriptors/baseline.ts
+++ b/packages/core/src/descriptors/baseline.ts
@@ -20,14 +20,15 @@ export interface BaselineDescriptor {
   getRowStyle: (index: number) => Record<string, string>
   padding: string | undefined
   isVisible: boolean
+  classTokens: string[]
 }
 
 const BASELINE_DEFAULTS = (base: number, lineColor: string, flatColor: string): Record<string, string> => ({
-  '--bkbw': '100%',
-  '--bkbh': '100%',
-  '--bkbb': `${base}px`,
-  '--bkbcl': lineColor,
-  '--bkbcf': flatColor,
+  '--bkbl-w': '100%',
+  '--bkbl-h': '100%',
+  '--bkbl-b': `${base}px`,
+  '--bkbl-cl': lineColor,
+  '--bkbl-cf': flatColor,
 })
 
 /**
@@ -48,22 +49,24 @@ export function createBaselineDescriptor(params: BaselineDescriptorParams): Base
   const chosenColor = color || (variant === 'line' ? colors.line : colors.flat)
 
   const defaultStyles = BASELINE_DEFAULTS(base, colors.line, colors.flat)
-  const dimensionVars = ['--bkbw', '--bkbh']
+  const dimensionVars = ['--bkbl-w', '--bkbl-h']
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkbw', value: formatValue(width || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbh', value: formatValue(height || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbb', value: `${base}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkbcl', value: color || colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkbcf', value: color || colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbl-w', value: formatValue(width || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbl-h', value: formatValue(height || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbl-b', value: `${base}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbl-cl', value: color || colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbl-cf', value: color || colors.flat, defaultStyles }),
     ...(padding ? { padding } : {}),
   }
 
   const getRowStyle = (index: number): Record<string, string> => ({
-    '--bkrt': index === 0 ? '0px' : `${index * base}px`,
-    '--bkrh': variant === 'line' ? '1px' : `${base}px`,
-    '--bkbc': chosenColor,
+    '--bkbl-rt': index === 0 ? '0px' : `${index * base}px`,
+    '--bkbl-rh': variant === 'line' ? '1px' : `${base}px`,
+    '--bkbl-c': chosenColor,
   })
 
-  return { containerStyle, rowCount, getRowStyle, padding, isVisible }
+  const classTokens = ['bas', isVisible ? 'v' : 'h']
+
+  return { containerStyle, rowCount, getRowStyle, padding, isVisible, classTokens }
 }
diff --git a/packages/core/src/descriptors/box.ts b/packages/core/src/descriptors/box.ts
index ea67e8e1..d0af7e97 100644
--- a/packages/core/src/descriptors/box.ts
+++ b/packages/core/src/descriptors/box.ts
@@ -8,18 +8,20 @@ export interface BoxDescriptorParams {
   span?: number
   colSpan?: number
   rowSpan?: number
+  isVisible: boolean
 }
 
 export interface BoxDescriptor {
   boxStyle: Record<string, string>
   gridSpanStyle: Record<string, string>
+  classTokens: string[]
 }
 
 const BOX_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
-  '--bkboxw': 'auto',
-  '--bkboxh': 'auto',
-  '--bkboxc': lineColor,
-  '--bkboxb': `${base}px`,
+  '--bkbx-w': 'auto',
+  '--bkbx-h': 'auto',
+  '--bkbx-cl': lineColor,
+  '--bkbx-b': `${base}px`,
 })
 
 /**
@@ -27,19 +29,22 @@ const BOX_DEFAULTS = (base: number, lineColor: string): Record<string, string> =
  * Pure function — framework-agnostic.
  */
 export function createBoxDescriptor(params: BoxDescriptorParams): BoxDescriptor {
-  const { base, lineColor, width, height, span, colSpan, rowSpan } = params
+  const { base, lineColor, width, height, span, colSpan, rowSpan, isVisible } = params
 
   const defaultStyles = BOX_DEFAULTS(base, lineColor)
-  const dimensionVars = ['--bkboxw', '--bkboxh']
+  const dimensionVars = ['--bkbx-w', '--bkbx-h']
 
   const boxStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkboxw', value: formatValue(width || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkboxh', value: formatValue(height || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkboxb', value: `${base}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkboxc', value: lineColor, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbx-w', value: formatValue(width || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbx-h', value: formatValue(height || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
+    ...createStyleOverride({ key: '--bkbx-b', value: `${base}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkbx-cl', value: lineColor, defaultStyles }),
   }
 
   const gridSpanStyle = createGridSpanStyles(span, colSpan, rowSpan)
 
-  return { boxStyle, gridSpanStyle }
+  const classTokens = ['box']
+  if (isVisible) classTokens.push('v')
+
+  return { boxStyle, gridSpanStyle, classTokens }
 }
diff --git a/packages/core/src/descriptors/guide.ts b/packages/core/src/descriptors/guide.ts
index 212e5aa0..69f979de 100644
--- a/packages/core/src/descriptors/guide.ts
+++ b/packages/core/src/descriptors/guide.ts
@@ -28,6 +28,7 @@ export interface GuideDescriptor {
   template: string
   isVisible: boolean
   isLineVariant: boolean
+  classTokens: string[]
 }
 
 /**
@@ -60,15 +61,15 @@ export function createGuideConfig(
 }
 
 const GUIDE_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
-  '--bkgw': 'auto',
-  '--bkgh': 'auto',
-  '--bkgmw': 'none',
-  '--bkgcw': '60px',
-  '--bkggw': '24px',
-  '--bkgc': '12',
-  '--bkgb': `${base}px`,
-  '--bkgcl': lineColor,
-  '--bkgg': '0',
+  '--bkgd-w': 'auto',
+  '--bkgd-h': 'auto',
+  '--bkgd-mw': 'none',
+  '--bkgd-cw': '60px',
+  '--bkgd-gw': '24px',
+  '--bkgd-n': '12',
+  '--bkgd-b': `${base}px`,
+  '--bkgd-cl': lineColor,
+  '--bkgd-g': '0',
 })
 
 /**
@@ -83,28 +84,32 @@ export function createGuideDescriptor(params: GuideDescriptorParams): GuideDescr
   } = params
 
   const defaultStyles = GUIDE_DEFAULTS(base, colors.line)
-  const autoDimensions = ['--bkgw', '--bkgh']
+  const autoDimensions = ['--bkgd-w', '--bkgd-h']
 
   const widthValue = formatValue(width || containerWidth || 'auto')
   const heightValue = formatValue(height || containerHeight || 'auto')
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkgw', value: widthValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkgh', value: heightValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkgmw', value: formatValue(maxWidth || 'none'), defaultStyles }),
-    ...createStyleOverride({ key: '--bkgcw', value: formatValue(columnWidth || '60px'), defaultStyles }),
-    ...createStyleOverride({ key: '--bkgc', value: `${columnsCount}`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkgb', value: '0', defaultStyles }),
-    ...createStyleOverride({ key: '--bkgcl', value: color ?? colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkgg', value: `${calculatedGap}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkgj', value: align || 'center', defaultStyles }),
-    ...(template && template !== 'none' ? { '--bkgt': template, gridTemplateColumns: template } : {}),
+    ...createStyleOverride({ key: '--bkgd-w', value: widthValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkgd-h', value: heightValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkgd-mw', value: formatValue(maxWidth || 'none'), defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-cw', value: formatValue(columnWidth || '60px'), defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-n', value: `${columnsCount}`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-b', value: '0', defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-cl', value: color ?? colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-g', value: `${calculatedGap}px`, defaultStyles }),
+    ...createStyleOverride({ key: '--bkgd-j', value: align || 'center', defaultStyles }),
+    ...(template && template !== 'none' ? { '--bkgd-t': template, gridTemplateColumns: template } : {}),
   }
 
   const columnColor = (variant && variant in colors
     ? colors[variant as keyof typeof colors]
     : undefined) ?? colors.line
 
+  const isLineVariant = variant === 'line'
+  const classTokens = ['gde', isVisible ? 'v' : 'h']
+  if (isLineVariant) classTokens.push('line')
+
   return {
     containerStyle,
     columnColor,
@@ -112,6 +117,7 @@ export function createGuideDescriptor(params: GuideDescriptorParams): GuideDescr
     calculatedGap,
     template,
     isVisible,
-    isLineVariant: variant === 'line',
+    isLineVariant,
+    classTokens,
   }
 }
diff --git a/packages/core/src/descriptors/layout.ts b/packages/core/src/descriptors/layout.ts
index 0e3ead0c..bbb91a16 100644
--- a/packages/core/src/descriptors/layout.ts
+++ b/packages/core/src/descriptors/layout.ts
@@ -17,14 +17,15 @@ export interface LayoutDescriptorParams {
 
 export interface LayoutDescriptor {
   containerStyle: Record<string, string>
+  classTokens: string[]
 }
 
 const LAYOUT_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
-  '--bklw': 'auto',
-  '--bklh': 'auto',
-  '--bklcl': colors.line,
-  '--bklcf': colors.flat,
-  '--bklci': colors.text,
+  '--bkly-w': 'auto',
+  '--bkly-h': 'auto',
+  '--bkly-cl': colors.line,
+  '--bkly-cf': colors.flat,
+  '--bkly-ct': colors.text,
 })
 
 /**
@@ -50,7 +51,7 @@ export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDe
   const { colors, columns, rows, width, height, gap, rowGap, columnGap, justifyItems, alignItems, justifyContent, alignContent } = params
 
   const defaultStyles = LAYOUT_DEFAULTS(colors)
-  const autoDimensions = ['--bklw', '--bklh']
+  const autoDimensions = ['--bkly-w', '--bkly-h']
 
   const gridTemplateColumns = getGridTemplate(columns)
   const gridTemplateRows = rows ? getGridTemplate(rows) : 'auto'
@@ -61,19 +62,19 @@ export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDe
   if (columnGap !== undefined) gapStyles.columnGap = formatValue(columnGap)
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bklw', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bklh', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bklcl', value: colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bklcf', value: colors.flat, defaultStyles }),
-    ...createStyleOverride({ key: '--bklci', value: colors.text, defaultStyles }),
-    ...(gridTemplateColumns !== DEFAULT_GRID_TEMPLATE ? { '--bklgtc': gridTemplateColumns } : {}),
-    ...(gridTemplateRows !== 'auto' ? { '--bklgtr': gridTemplateRows } : {}),
-    ...(justifyItems ? { '--bklji': justifyItems } : {}),
-    ...(alignItems ? { '--bklai': alignItems } : {}),
-    ...(justifyContent ? { '--bkljc': justifyContent } : {}),
-    ...(alignContent ? { '--bklac': alignContent } : {}),
+    ...createStyleOverride({ key: '--bkly-w', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkly-h', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
+    ...createStyleOverride({ key: '--bkly-cl', value: colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bkly-cf', value: colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bkly-ct', value: colors.text, defaultStyles }),
+    ...(gridTemplateColumns !== DEFAULT_GRID_TEMPLATE ? { '--bkly-gtc': gridTemplateColumns } : {}),
+    ...(gridTemplateRows !== 'auto' ? { '--bkly-gtr': gridTemplateRows } : {}),
+    ...(justifyItems ? { '--bkly-ji': justifyItems } : {}),
+    ...(alignItems ? { '--bkly-ai': alignItems } : {}),
+    ...(justifyContent ? { '--bkly-jc': justifyContent } : {}),
+    ...(alignContent ? { '--bkly-ac': alignContent } : {}),
     ...gapStyles,
   }
 
-  return { containerStyle }
+  return { containerStyle, classTokens: ['lay'] }
 }
diff --git a/packages/core/src/descriptors/padder.ts b/packages/core/src/descriptors/padder.ts
index 0ba5440a..af1f577f 100644
--- a/packages/core/src/descriptors/padder.ts
+++ b/packages/core/src/descriptors/padder.ts
@@ -8,10 +8,12 @@ export interface PadderDescriptorParams {
   height?: number | string
   padding: Padding
   enableSpacers: boolean
+  isVisible: boolean
 }
 
 export interface PadderDescriptor {
   containerStyle: Record<string, string>
+  classTokens: string[]
 }
 
 /**
@@ -19,19 +21,19 @@ export interface PadderDescriptor {
  * Pure function — framework-agnostic.
  */
 export function createPadderDescriptor(params: PadderDescriptorParams): PadderDescriptor {
-  const { base, color, width, height, padding, enableSpacers } = params
+  const { base, color, width, height, padding, enableSpacers, isVisible } = params
 
   const containerStyle: Record<string, string> = {}
 
   if (width !== undefined && width !== 'fit-content') {
-    containerStyle['--bkpw'] = formatValue(width)
+    containerStyle['--bkpd-w'] = formatValue(width)
   }
   if (height !== undefined && height !== 'fit-content') {
-    containerStyle['--bkph'] = formatValue(height)
+    containerStyle['--bkpd-h'] = formatValue(height)
   }
 
-  containerStyle['--bkpb'] = `${base}px`
-  containerStyle['--bkpc'] = color
+  containerStyle['--bkpd-b'] = `${base}px`
+  containerStyle['--bkpd-c'] = color
 
   if (!enableSpacers) {
     const { top, right, bottom, left } = padding
@@ -43,5 +45,8 @@ export function createPadderDescriptor(params: PadderDescriptorParams): PadderDe
     }
   }
 
-  return { containerStyle }
+  const classTokens = ['pad']
+  if (isVisible && enableSpacers) classTokens.push('v')
+
+  return { containerStyle, classTokens }
 }
diff --git a/packages/core/src/descriptors/spacer.ts b/packages/core/src/descriptors/spacer.ts
index e2f0089b..1def07a8 100644
--- a/packages/core/src/descriptors/spacer.ts
+++ b/packages/core/src/descriptors/spacer.ts
@@ -6,21 +6,24 @@ export interface SpacerDescriptorParams {
   width?: number | string
   height?: number | string
   color?: string
+  variant: string
+  isVisible: boolean
 }
 
 export interface SpacerDescriptor {
   style: Record<string, string>
   normWidth: number
   normHeight: number
+  classTokens: string[]
 }
 
 const SPACER_DEFAULTS = (base: number, textColor: string, flatColor: string, lineColor: string): Record<string, string> => ({
-  '--bksw': '100%',
-  '--bksh': '100%',
-  '--bksb': `${base}px`,
-  '--bksct': textColor,
-  '--bkscf': flatColor,
-  '--bkscl': lineColor,
+  '--bksp-w': '100%',
+  '--bksp-h': '100%',
+  '--bksp-b': `${base}px`,
+  '--bksp-ct': textColor,
+  '--bksp-cf': flatColor,
+  '--bksp-cl': lineColor,
 })
 
 /**
@@ -28,21 +31,24 @@ const SPACER_DEFAULTS = (base: number, textColor: string, flatColor: string, lin
  * Pure function — framework-agnostic.
  */
 export function createSpacerDescriptor(params: SpacerDescriptorParams): SpacerDescriptor {
-  const { base, colors, width, height, color } = params
+  const { base, colors, width, height, color, variant, isVisible } = params
 
   const [normWidth, normHeight] = normalizeValuePair([width, height], [0, 0], { base, suppressWarnings: true })
 
   const defaultStyles = SPACER_DEFAULTS(base, colors.text, colors.flat, colors.line)
-  const dimensionVars = ['--bksw', '--bksh']
+  const dimensionVars = ['--bksp-w', '--bksp-h']
 
   const style: Record<string, string> = {
-    ...createStyleOverride({ key: '--bksh', value: formatValue(normHeight || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bksw', value: formatValue(normWidth || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    '--bksb': `${base}px`,
-    ...createStyleOverride({ key: '--bksct', value: color ?? colors.text, defaultStyles }),
-    ...createStyleOverride({ key: '--bkscl', value: color ?? colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkscf', value: color ?? colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bksp-h', value: formatValue(normHeight || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({ key: '--bksp-w', value: formatValue(normWidth || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    '--bksp-b': `${base}px`,
+    ...createStyleOverride({ key: '--bksp-ct', value: color ?? colors.text, defaultStyles }),
+    ...createStyleOverride({ key: '--bksp-cl', value: color ?? colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bksp-cf', value: color ?? colors.flat, defaultStyles }),
   }
 
-  return { style, normWidth, normHeight }
+  const classTokens = ['spr']
+  if (isVisible) classTokens.push(variant)
+
+  return { style, normWidth, normHeight, classTokens }
 }
diff --git a/packages/core/src/descriptors/stack.ts b/packages/core/src/descriptors/stack.ts
index 3d607f6c..f79d7e42 100644
--- a/packages/core/src/descriptors/stack.ts
+++ b/packages/core/src/descriptors/stack.ts
@@ -17,18 +17,20 @@ export interface StackDescriptorParams {
   gap?: number
   rowGap?: number
   columnGap?: number
+  isVisible: boolean
 }
 
 export interface StackDescriptor {
   containerStyle: Record<string, string>
+  classTokens: string[]
 }
 
 const STACK_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
-  '--bkkw': 'auto',
-  '--bkkh': 'auto',
-  '--bkkcl': colors.line,
-  '--bkkcf': colors.flat,
-  '--bkkci': colors.text,
+  '--bksk-w': 'auto',
+  '--bksk-h': 'auto',
+  '--bksk-cl': colors.line,
+  '--bksk-cf': colors.flat,
+  '--bksk-ct': colors.text,
 })
 
 /**
@@ -36,28 +38,31 @@ const STACK_DEFAULTS = (colors: { line: string; flat: string; text: string }) =>
  * Pure function — framework-agnostic.
  */
 export function createStackDescriptor(params: StackDescriptorParams): StackDescriptor {
-  const { colors, direction, justify, align, width, height, gap, rowGap, columnGap } = params
+  const { colors, direction, justify, align, width, height, gap, rowGap, columnGap, isVisible } = params
 
   const defaultStyles = STACK_DEFAULTS(colors)
-  const dimensionVars = ['--bkkw', '--bkkh']
+  const dimensionVars = ['--bksk-w', '--bksk-h']
   const flexDirection = DIRECTION_AXIS[direction] || direction
 
   const containerStyle: Record<string, string> = {
     flexDirection,
     justifyContent: justify,
     alignItems: align,
-    ...createStyleOverride({ key: '--bkkw', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkkh', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkkcl', value: colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkkcf', value: colors.flat, defaultStyles }),
-    ...createStyleOverride({ key: '--bkkci', value: colors.text, defaultStyles }),
+    ...createStyleOverride({ key: '--bksk-w', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
+    ...createStyleOverride({ key: '--bksk-h', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
+    ...createStyleOverride({ key: '--bksk-cl', value: colors.line, defaultStyles }),
+    ...createStyleOverride({ key: '--bksk-cf', value: colors.flat, defaultStyles }),
+    ...createStyleOverride({ key: '--bksk-ct', value: colors.text, defaultStyles }),
     ...(gap !== undefined ? { rowGap: `${gap}`, columnGap: `${gap}` } : {
       ...(rowGap !== undefined ? { rowGap: `${rowGap}` } : {}),
       ...(columnGap !== undefined ? { columnGap: `${columnGap}` } : {}),
     }),
   }
 
-  return { containerStyle }
+  const classTokens = ['stk']
+  if (isVisible) classTokens.push('v')
+
+  return { containerStyle, classTokens }
 }
 
 export { DIRECTION_AXIS }
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
index 172e0074..ad2101d5 100644
--- a/packages/core/src/utils/merge.ts
+++ b/packages/core/src/utils/merge.ts
@@ -1,4 +1,8 @@
-export const mergeClasses = (
+/**
+ * Combines class names, filtering out falsy values.
+ * Lightweight alternative to clsx/classnames.
+ */
+export const cx = (
   ...classes: Array<string | boolean | undefined | null>
 ): string => classes.filter(Boolean).join(' ').trim()
 
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
index b50a3f96..dc4f1732 100644
--- a/packages/react/src/components/Baseline/Baseline.tsx
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useVirtual, useMeasure } from '../../hooks'
-import { mergeClasses, createBaselineDescriptor } from '@baseline-kit/core'
+import { cx, createBaselineDescriptor } from '@baseline-kit/core'
 import type { BaselineVariant } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
@@ -75,7 +75,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
       ref={containerRef}
       data-testid="baseline"
       aria-hidden="true"
-      className={mergeClasses(styles.bas, isShown ? styles.v : styles.h, className)}
+      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
       style={containerStyles}
       {...spacingProps}
     >
@@ -115,7 +115,7 @@ export const Baseline = React.memo(function Baseline({
   if (!isShown) {
     return (
       <div
-        className={mergeClasses(styles.b, styles.h, className)}
+        className={cx(styles.b, styles.h, className)}
         style={style}
         data-testid="baseline"
         aria-hidden="true"
@@ -126,7 +126,7 @@ export const Baseline = React.memo(function Baseline({
 
   const ssrFallback = (
     <div
-      className={mergeClasses(styles.b, styles.h, styles.ssr, className)}
+      className={cx(styles.b, styles.h, styles.ssr, className)}
       style={{ width: widthProp || '100%', height: heightProp || '100%', ...style }}
       data-testid="baseline"
       aria-hidden="true"
diff --git a/packages/react/src/components/Baseline/styles.module.css b/packages/react/src/components/Baseline/styles.module.css
index e4c1563d..ba0b3e25 100644
--- a/packages/react/src/components/Baseline/styles.module.css
+++ b/packages/react/src/components/Baseline/styles.module.css
@@ -2,8 +2,8 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  width: var(--bkbw);
-  height: var(--bkbh);
+  width: var(--bkbl-w);
+  height: var(--bkbl-h);
   overflow: hidden;
 }
 
@@ -11,9 +11,9 @@
   left: 0;
   right: 0;
   position: absolute;
-  top: var(--bkrt);
-  height: var(--bkrh);
-  background-color: var(--bkbc);
+  top: var(--bkbl-rt);
+  height: var(--bkbl-rh);
+  background-color: var(--bkbl-c);
 }
 
 /* Style for SSR rendering */
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 0ed75b6f..d6ba41cc 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { mergeClasses, parsePadding, createBoxDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createBoxDescriptor } from '@baseline-kit/core'
 import type { SnappingMode } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
@@ -45,8 +45,8 @@ export const Box = React.memo(
     const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
 
     const descriptor = React.useMemo(
-      () => createBoxDescriptor({ base: config.base, lineColor: config.colors.line, width, height, span, colSpan, rowSpan }),
-      [config.base, config.colors.line, width, height, span, colSpan, rowSpan]
+      () => createBoxDescriptor({ base: config.base, lineColor: config.colors.line, width, height, span, colSpan, rowSpan, isVisible: isShown }),
+      [config.base, config.colors.line, width, height, span, colSpan, rowSpan, isShown]
     )
 
     const boxStyles = React.useMemo(
@@ -58,7 +58,7 @@ export const Box = React.memo(
       <div
         ref={mergeRefs(ref, internalRef)}
         data-testid="box"
-        className={mergeClasses(styles.box, isShown && styles.v, className)}
+        className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
         style={mergeStyles(boxStyles, descriptor.gridSpanStyle)}
       >
         <Config base={1} spacer={{ variant: 'flat' }}>
diff --git a/packages/react/src/components/Box/styles.module.css b/packages/react/src/components/Box/styles.module.css
index d20895ac..7cf94b86 100644
--- a/packages/react/src/components/Box/styles.module.css
+++ b/packages/react/src/components/Box/styles.module.css
@@ -1,14 +1,14 @@
 .box {
   position: relative;
-  width: var(--bkxw);
-  height: var(--bkxh);
+  width: var(--bkbx-w);
+  height: var(--bkbx-h);
 }
 
 .v::after {
   content: '';
   position: absolute;
   inset: 0;
-  border: 1px solid var(--bkxcl);
+  border: 1px solid var(--bkbx-cl);
   pointer-events: none;
-  z-index: var(--bkzi);
+  z-index: var(--bk-zi);
 }
diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
index 965bb1f4..2b028160 100644
--- a/packages/react/src/components/Guide/Guide.tsx
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useMeasure, useGuide } from '../../hooks'
-import { mergeClasses, createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
+import { cx, createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
 import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
 import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
@@ -47,7 +47,7 @@ export const Guide = React.memo(function Guide({
   if (!isShown) {
     return (
       <div
-        className={mergeClasses(styles.g, styles.h, className)}
+        className={cx(styles.g, styles.h, className)}
         style={style}
         data-testid="guide"
         data-variant={variant}
@@ -61,7 +61,7 @@ export const Guide = React.memo(function Guide({
 
   const ssrFallback = (
     <div
-      className={mergeClasses(styles.g, styles.h, styles.ssr, className)}
+      className={cx(styles.g, styles.h, styles.ssr, className)}
       style={{ width: width || '100%', height: height || '100%', maxWidth: maxWidth || 'none', ...style }}
       data-testid="guide"
       data-variant={variant}
@@ -156,7 +156,7 @@ const GuideImpl = React.memo(function GuideImpl({
       ref={containerRef}
       data-testid="guide"
       aria-hidden="true"
-      className={mergeClasses(styles.gde, className, isShown ? styles.v : styles.h, descriptor.isLineVariant && styles.line)}
+      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
       data-variant={variant}
       style={containerStyles}
       {...props}
diff --git a/packages/react/src/components/Guide/styles.module.css b/packages/react/src/components/Guide/styles.module.css
index d0019214..68ac77b7 100644
--- a/packages/react/src/components/Guide/styles.module.css
+++ b/packages/react/src/components/Guide/styles.module.css
@@ -2,7 +2,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  padding: var(--bkgpb) var(--bkgpi);
+  padding: var(--bkgd-pb) var(--bkgd-pi);
 }
 
 .line {
@@ -13,38 +13,38 @@
   position: absolute;
   inset: 0;
   display: grid;
-  column-gap: var(--bkgg);
+  column-gap: var(--bkgd-g);
   grid-template-rows: 1fr;
-  grid-template-columns: var(--bkgt);
-  justify-content: var(--bkgj);
-  width: var(--bkwf);
-  height: var(--bkhf);
+  grid-template-columns: var(--bkgd-t);
+  justify-content: var(--bkgd-j);
+  width: var(--bk-wf);
+  height: var(--bk-hf);
   overflow: hidden;
 }
 
 .col {
   min-width: 0;
-  width: var(--bkwf);
-  height: var(--bkhf);
+  width: var(--bk-wf);
+  height: var(--bk-hf);
 }
 
 /* Variant-specific styles */
 .col[data-variant='line'] {
   width: 1px;
-  background-color: var(--bkgcl);
+  background-color: var(--bkgd-cl);
 }
 
 .col[data-variant='pattern'] {
-  background-color: var(--bkgcp);
+  background-color: var(--bkgd-cp);
 }
 
 .col[data-variant='auto'] {
-  background-color: var(--bkgca);
+  background-color: var(--bkgd-ca);
   overflow: hidden;
 }
 
 .col[data-variant='fixed'] {
-  background-color: var(--bkgcf);
+  background-color: var(--bkgd-cf);
 }
 
 /* Style for SSR rendering */
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
index 26737ca2..da40786b 100644
--- a/packages/react/src/components/Layout/Layout.tsx
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { parsePadding, mergeClasses, createLayoutDescriptor } from '@baseline-kit/core'
+import { parsePadding, cx, createLayoutDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { Config } from '../Config'
@@ -107,7 +107,7 @@ export const Layout = React.memo(function Layout({
       >
         <div
           data-testid="layout"
-          className={mergeClasses(className, styles.lay)}
+          className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
           style={containerStyles}
           {...(spacingProps && Object.keys(spacingProps).length > 0
             ? Object.fromEntries(Object.entries(spacingProps).filter(([key]) => key !== 'ssrMode'))
diff --git a/packages/react/src/components/Layout/styles.module.css b/packages/react/src/components/Layout/styles.module.css
index 0e2ddefc..55335c34 100644
--- a/packages/react/src/components/Layout/styles.module.css
+++ b/packages/react/src/components/Layout/styles.module.css
@@ -2,20 +2,20 @@
   display: grid;
   position: relative;
   box-sizing: border-box;
-  width: var(--bklw, var(--bk-width-default, auto));
-  height: var(--bklh, var(--bk-height-default, auto));
+  width: var(--bkly-w, var(--bk-width-default, auto));
+  height: var(--bkly-h, var(--bk-height-default, auto));
   grid-template-columns: var(
-    --bklgtc,
+    --bkly-gtc,
     repeat(auto-fill, minmax(100px, 1fr))
   );
-  grid-template-rows: var(--bklgtr, auto);
-  gap: var(--bklg, 0);
-  column-gap: var(--bklcg, 0);
-  row-gap: var(--bklrg, 0);
-  justify-items: var(--bklji, stretch);
-  align-items: var(--bklai, stretch);
-  justify-content: var(--bkljc, start);
-  align-content: var(--bklac, start);
+  grid-template-rows: var(--bkly-gtr, auto);
+  gap: var(--bkly-g, 0);
+  column-gap: var(--bkly-cg, 0);
+  row-gap: var(--bkly-rg, 0);
+  justify-items: var(--bkly-ji, stretch);
+  align-items: var(--bkly-ai, stretch);
+  justify-content: var(--bkly-jc, start);
+  align-content: var(--bkly-ac, start);
 }
 
 .lay .line::after,
@@ -28,7 +28,7 @@
   position: absolute;
   inset: 0;
   border: 1px solid
-    var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6)));
+    var(--bkly-cl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6)));
   pointer-events: none;
-  z-index: var(--bkzio, 2);
+  z-index: var(--bk-zio, 2);
 }
diff --git a/packages/react/src/components/Padder/Padder.tsx b/packages/react/src/components/Padder/Padder.tsx
index 07c986ac..b9018c99 100644
--- a/packages/react/src/components/Padder/Padder.tsx
+++ b/packages/react/src/components/Padder/Padder.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { mergeClasses, parsePadding, createPadderDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createPadderDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
@@ -76,8 +76,9 @@ export const Padder = React.memo(
         height: height as number | string | undefined,
         padding,
         enableSpacers,
+        isVisible: isShown,
       }),
-      [config.base, config.color, width, height, padding, enableSpacers]
+      [config.base, config.color, width, height, padding, enableSpacers, isShown]
     )
 
     const containerStyles = React.useMemo(
@@ -92,14 +93,14 @@ export const Padder = React.memo(
 
     if (!enableSpacers) {
       return (
-        <div ref={setRefs} data-testid="padder" className={mergeClasses(styles.pad, className)} style={containerStyles}>
+        <div ref={setRefs} data-testid="padder" className={cx(...descriptor.classTokens.map(t => styles[t]), className)} style={containerStyles}>
           {children}
         </div>
       )
     }
 
     return (
-      <div ref={setRefs} data-testid="padder" className={mergeClasses(styles.pad, isShown && styles.v, className)} style={containerStyles}>
+      <div ref={setRefs} data-testid="padder" className={cx(...descriptor.classTokens.map(t => styles[t]), className)} style={containerStyles}>
         <>
           {padding.top >= 0 && <div style={{ gridColumn: '1 / -1' }}>{renderSpacer('100%', padding.top)}</div>}
           {padding.left >= 0 && <div style={{ gridRow: '2 / 3' }}>{renderSpacer(padding.left, '100%')}</div>}
diff --git a/packages/react/src/components/Padder/styles.module.css b/packages/react/src/components/Padder/styles.module.css
index 0a347ae2..eee8120f 100644
--- a/packages/react/src/components/Padder/styles.module.css
+++ b/packages/react/src/components/Padder/styles.module.css
@@ -3,8 +3,8 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto 1fr auto;
-  width: var(--bkpw, auto);
-  height: var(--bkph, auto);
+  width: var(--bkpd-w, auto);
+  height: var(--bkpd-h, auto);
 }
 
 .lay .line::after,
@@ -16,7 +16,7 @@
   content: '';
   position: absolute;
   inset: 0;
-  border: 1px solid var(--bkpc, var(--bk-padder-color-theme));
+  border: 1px solid var(--bkpd-c, var(--bk-padder-color-theme));
   pointer-events: none;
-  z-index: var(--bkzi);
+  z-index: var(--bk-zi);
 }
diff --git a/packages/react/src/components/Spacer/Spacer.tsx b/packages/react/src/components/Spacer/Spacer.tsx
index 43721d13..fde4f759 100644
--- a/packages/react/src/components/Spacer/Spacer.tsx
+++ b/packages/react/src/components/Spacer/Spacer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug } from '../../hooks'
-import { mergeClasses, createSpacerDescriptor } from '@baseline-kit/core'
+import { cx, createSpacerDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
@@ -49,8 +49,10 @@ export const Spacer = React.memo(function Spacer({
       width: widthProp as number | string | undefined,
       height: heightProp as number | string | undefined,
       color: colorProp,
+      variant,
+      isVisible: isShown,
     }),
-    [base, config.colors, widthProp, heightProp, colorProp]
+    [base, config.colors, widthProp, heightProp, colorProp, variant, isShown]
   )
 
   const shouldShowMeasurements = hydratedValue(isHydrated && !ssrMode, false, isShown && indicatorNode !== undefined)
@@ -76,7 +78,7 @@ export const Spacer = React.memo(function Spacer({
     <div
       ref={ref}
       data-testid="spacer"
-      className={mergeClasses(styles.spr, isShown && styles[variant], className)}
+      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
       data-variant={variant}
       data-height={typeof descriptor.normHeight === 'number' ? `${descriptor.normHeight}px` : descriptor.normHeight}
       style={baseStyles}
diff --git a/packages/react/src/components/Spacer/styles.module.css b/packages/react/src/components/Spacer/styles.module.css
index 2b7bc6e6..26c6babc 100644
--- a/packages/react/src/components/Spacer/styles.module.css
+++ b/packages/react/src/components/Spacer/styles.module.css
@@ -1,8 +1,8 @@
 .spr {
   position: relative;
   box-sizing: border-box;
-  width: var(--bksw, 100%);
-  height: var(--bksh, auto);
+  width: var(--bksp-w, 100%);
+  height: var(--bksp-h, auto);
   flex-shrink: 0;
   display: block;
   margin: 0;
@@ -13,10 +13,10 @@
   content: '';
   position: absolute;
   inset: 0;
-  border: 1px solid var(--bkscl, hsla(270, 60%, 40%, 0.6));
-  z-index: calc(var(--bkzi, 1));
+  border: 1px solid var(--bksp-cl, hsla(270, 60%, 40%, 0.6));
+  z-index: calc(var(--bk-zi, 1));
 }
 
 .flat {
-  background-color: var(--bkscf, hsla(230, 100%, 70%, 0.2));
+  background-color: var(--bksp-cf, hsla(230, 100%, 70%, 0.2));
 }
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 7653735d..0eab6cdd 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { mergeClasses, parsePadding, createStackDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createStackDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles } from '../../utils/merge'
 import { Padder } from '../Padder'
@@ -75,8 +75,9 @@ export const Stack = React.memo(function Stack({
       gap: gap !== undefined ? Number(gap) : undefined,
       rowGap: rowGap !== undefined ? Number(rowGap) : undefined,
       columnGap: columnGap !== undefined ? Number(columnGap) : undefined,
+      isVisible: isShown,
     }),
-    [config.colors, direction, justify, align, width, height, gap, rowGap, columnGap]
+    [config.colors, direction, justify, align, width, height, gap, rowGap, columnGap, isShown]
   )
 
   const containerStyles = React.useMemo(
@@ -102,7 +103,7 @@ export const Stack = React.memo(function Stack({
       >
         <div
           data-testid="stack"
-          className={mergeClasses(className, styles.stk, isShown && styles.v)}
+          className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
           style={mergedContainerStyles}
           {...spacingProps}
         >
diff --git a/packages/react/src/components/Stack/styles.module.css b/packages/react/src/components/Stack/styles.module.css
index 27892989..6fcca73e 100644
--- a/packages/react/src/components/Stack/styles.module.css
+++ b/packages/react/src/components/Stack/styles.module.css
@@ -1,8 +1,8 @@
 .stk {
   display: flex;
   position: relative;
-  width: var(--bkkw);
-  height: var(--bkkh);
+  width: var(--bksk-w);
+  height: var(--bksk-h);
 }
 
 /* Remove borders from children if they're lines */
@@ -15,12 +15,12 @@
   content: '';
   position: absolute;
   inset: 0;
-  border: 1px solid var(--bkkcl, hsla(330, 60%, 40%, 0.6));
+  border: 1px solid var(--bksk-cl, hsla(330, 60%, 40%, 0.6));
   pointer-events: none;
-  z-index: var(--bkzio, 2);
+  z-index: var(--bk-zio, 2);
 }
 
 /* Style for flat debugging background */
 .flat {
-  background-color: var(--bkkcf, hsla(0, 100%, 70%, 0.2));
+  background-color: var(--bksk-cf, hsla(0, 100%, 70%, 0.2));
 }
diff --git a/packages/react/src/components/styles/base.css b/packages/react/src/components/styles/base.css
index 496f6aaf..64415f6e 100644
--- a/packages/react/src/components/styles/base.css
+++ b/packages/react/src/components/styles/base.css
@@ -10,113 +10,113 @@
 /* Core system variables */
 :root {
   /* Core System Variables */
-  --bkb: 8px; /* Base unit for spacing */
-  --bkzi: 1; /* Base z-index */
-  --bkzio: 2; /* Overlay z-index */
+  --bk-base: 8px; /* Base unit for spacing */
+  --bk-zi: 1; /* Base z-index */
+  --bk-zio: 2; /* Overlay z-index */
   --bk-transition-base: 180ms ease; /* Standard transition */
 
   /* Default Dimensions */
   --bk-width-default: fit-content;
   --bk-height-default: fit-content;
-  --bkwf: 100%; /* Full width shorthand */
-  --bkhf: 100%; /* Full height shorthand */
+  --bk-wf: 100%; /* Full width shorthand */
+  --bk-hf: 100%; /* Full height shorthand */
 
   /* Box Component Variables */
-  --bkxb: var(--bkb);
-  --bkxw: var(--bk-width-default);
-  --bkxh: var(--bk-height-default);
-  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
-  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
-  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
+  --bkbx-b: var(--bk-base);
+  --bkbx-w: var(--bk-width-default);
+  --bkbx-h: var(--bk-height-default);
+  --bkbx-cl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
+  --bkbx-cf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
+  --bkbx-ct: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
 
   /* Stack Component Variables */
-  --bkkw: var(--bkwf);
-  --bkkh: var(--bk-height-default);
-  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
+  --bksk-w: var(--bk-wf);
+  --bksk-h: var(--bk-height-default);
+  --bksk-cl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bksk-cf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bksk-ct: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
 
   /* Baseline Component Variables */
-  --bkbw: 100%;
-  --bkbh: 100%;
-  --bkrt: 0;
-  --bkrh: 1px;
-  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+  --bkbl-w: 100%;
+  --bkbl-h: 100%;
+  --bkbl-rt: 0;
+  --bkbl-rh: 1px;
+  --bkbl-cl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkbl-cf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
 
   /* Guide Component Variables */
-  --bkgw: 100vw;
-  --bkgh: 100vh;
-  --bkgg: var(--bkb);
-  --bkgj: center;
-  --bkgt: auto;
-  --bkgpb: 0;
-  --bkgpi: 0;
-  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
-  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
-  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgd-w: 100vw;
+  --bkgd-h: 100vh;
+  --bkgd-g: var(--bk-base);
+  --bkgd-j: center;
+  --bkgd-t: auto;
+  --bkgd-pb: 0;
+  --bkgd-pi: 0;
+  --bkgd-cl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkgd-cp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
+  --bkgd-ca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgd-cf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
 
   /* Layout Component Variables */
-  --bklw: var(--bk-width-default);
-  --bklh: var(--bk-height-default);
-  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
-  --bklgtc: repeat(auto-fill, minmax(100px, 1fr));
-  --bklgtr: auto;
-  --bklg: 0;
-  --bklcg: 0;
-  --bklrg: 0;
-  --bklji: stretch;
-  --bklai: stretch;
-  --bkljc: start;
-  --bklac: start;
+  --bkly-w: var(--bk-width-default);
+  --bkly-h: var(--bk-height-default);
+  --bkly-cl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bkly-cf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bkly-ct: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
+  --bkly-gtc: repeat(auto-fill, minmax(100px, 1fr));
+  --bkly-gtr: auto;
+  --bkly-g: 0;
+  --bkly-cg: 0;
+  --bkly-rg: 0;
+  --bkly-ji: stretch;
+  --bkly-ai: stretch;
+  --bkly-jc: start;
+  --bkly-ac: start;
 
   /* Padder Component Variables */
-  --bkpw: var(--bk-width-default);
-  --bkph: var(--bk-height-default);
-  --bkpc: var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6));
+  --bkpd-w: var(--bk-width-default);
+  --bkpd-h: var(--bk-height-default);
+  --bkpd-c: var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6));
 
   /* Spacer Component Variables - with fallback values */
-  --bksw: var(--bkwf);
-  --bksh: var(--bkhf);
-  --bkscl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6));
-  --bkscf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2));
-  --bksct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1));
+  --bksp-w: var(--bk-wf);
+  --bksp-h: var(--bk-hf);
+  --bksp-cl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6));
+  --bksp-cf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+  --bksp-ct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1));
 }
 
 /* Guide Component */
 .guide {
-  --bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
-  --bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
-  --bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgd-cl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkgd-cp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));
+  --bkgd-ca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));
+  --bkgd-cf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));
 }
 
 /* Baseline Component */
 .baseline {
-  --bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
-  --bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
+  --bkbl-cl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15));
+  --bkbl-cf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2));
 }
 
 /* Box Component */
 .box {
-  --bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
-  --bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
-  --bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
+  --bkbx-cl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6));
+  --bkbx-cf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2));
+  --bkbx-ct: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9));
 }
 
 /* Stack Component */
 .stack {
-  --bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
+  --bksk-cl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bksk-cf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bksk-ct: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, 0.9));
 }
 
 /* Layout Component */
 .layout {
-  --bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
-  --bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
-  --bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
+  --bkly-cl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, 0.6));
+  --bkly-cf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, 0.2));
+  --bkly-ct: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, 0.9));
 }
diff --git a/tests/components/Baseline.test.tsx b/tests/components/Baseline.test.tsx
index e45762cb..ee34c6be 100644
--- a/tests/components/Baseline.test.tsx
+++ b/tests/components/Baseline.test.tsx
@@ -129,8 +129,8 @@ describe('Baseline', () => {
 
     // Use getComputedStyle to check the computed styles
     const computedStyle = window.getComputedStyle(firstLine)
-    expect(firstLine.style.getPropertyValue('--bkrt')).toBe('0px')
-    expect(computedStyle.getPropertyValue('--bkrh')).toBe('8px')
+    expect(firstLine.style.getPropertyValue('--bkbl-rt')).toBe('0px')
+    expect(computedStyle.getPropertyValue('--bkbl-rh')).toBe('8px')
   })
 
   it('respects custom numeric height', () => {
diff --git a/tests/components/Config.test.tsx b/tests/components/Config.test.tsx
index 9efd1e0d..5a0634cb 100644
--- a/tests/components/Config.test.tsx
+++ b/tests/components/Config.test.tsx
@@ -27,9 +27,9 @@ describe('Config component', () => {
 
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain(`--bkb: ${DEFAULT_CONFIG.base}px`)
-      expect(style).toContain(`--bkbcl: ${DEFAULT_CONFIG.baseline.colors.line}`)
-      expect(style).toContain(`--bkbcf: ${DEFAULT_CONFIG.baseline.colors.flat}`)
+      expect(style).toContain(`--bk-base: ${DEFAULT_CONFIG.base}px`)
+      expect(style).toContain(`--bkbl-cl: ${DEFAULT_CONFIG.baseline.colors.line}`)
+      expect(style).toContain(`--bkbl-cf: ${DEFAULT_CONFIG.baseline.colors.flat}`)
       expect(screen.getByText('Test Content')).toBeInTheDocument()
     })
   })
@@ -43,7 +43,7 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain('--bkb: 16px')
+      expect(style).toContain('--bk-base: 16px')
     })
 
     it('allows overriding the baseline config', () => {
@@ -63,8 +63,8 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain('--bkbcl: #FF0000')
-      expect(style).toContain('--bkbcf: #00FF00')
+      expect(style).toContain('--bkbl-cl: #FF0000')
+      expect(style).toContain('--bkbl-cf: #00FF00')
     })
 
     it('allows overriding the guide config', () => {
@@ -86,10 +86,10 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain('--bkgcl: #FF0000')
-      expect(style).toContain('--bkgcp: #00FF00')
-      expect(style).toContain('--bkgca: #0000FF')
-      expect(style).toContain('--bkgcf: #FFFF00')
+      expect(style).toContain('--bkgd-cl: #FF0000')
+      expect(style).toContain('--bkgd-cp: #00FF00')
+      expect(style).toContain('--bkgd-ca: #0000FF')
+      expect(style).toContain('--bkgd-cf: #FFFF00')
     })
   })
 
@@ -104,7 +104,7 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('nested-child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain('--bkb: 24px')
+      expect(style).toContain('--bk-base: 24px')
     })
   })
 
@@ -117,8 +117,8 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain(`--bkgcl: ${DEFAULT_CONFIG.guide.colors.line}`)
-      expect(style).toContain(`--bkgcp: ${DEFAULT_CONFIG.guide.colors.pattern}`)
+      expect(style).toContain(`--bkgd-cl: ${DEFAULT_CONFIG.guide.colors.line}`)
+      expect(style).toContain(`--bkgd-cp: ${DEFAULT_CONFIG.guide.colors.pattern}`)
     })
 
     it('handles partial color overrides correctly', () => {
@@ -136,8 +136,8 @@ describe('Config component', () => {
       )
       const child = screen.getByTestId('child')
       const style = child.getAttribute('style') || ''
-      expect(style).toContain('--bkgcl: #FF0000')
-      expect(style).toContain(`--bkgcp: ${DEFAULT_CONFIG.guide.colors.pattern}`)
+      expect(style).toContain('--bkgd-cl: #FF0000')
+      expect(style).toContain(`--bkgd-cp: ${DEFAULT_CONFIG.guide.colors.pattern}`)
     })
   })
 })
diff --git a/tests/components/Guide.test.tsx b/tests/components/Guide.test.tsx
index 6419b348..badf48fe 100644
--- a/tests/components/Guide.test.tsx
+++ b/tests/components/Guide.test.tsx
@@ -83,7 +83,7 @@ describe('Guide component', () => {
       <Guide variant="line" gap={10} debugging="visible" data-testid="guide" />
     )
     const guideEl = screen.getByTestId('guide')
-    expect(guideEl.getAttribute('style')).toContain('--bkgg: 10px')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-g: 10px')
   })
 
   it('handles "auto" variant with numeric columnWidth', () => {
@@ -100,7 +100,7 @@ describe('Guide component', () => {
     expect(guideEl.dataset.variant).toBe('auto')
     const columns = guideEl.querySelectorAll('[data-column-index]')
     expect(columns.length).toBe(10)
-    expect(guideEl.getAttribute('style')).toContain('--bkgg: 16px')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-g: 16px')
   })
 
   it('handles "pattern" variant array columns', () => {
@@ -117,8 +117,8 @@ describe('Guide component', () => {
     expect(guideEl.dataset.variant).toBe('pattern')
     const cols = guideEl.querySelectorAll('[data-column-index]')
     expect(cols.length).toBe(3)
-    expect(guideEl.getAttribute('style')).toContain('--bkgt: 1fr 2fr 3fr')
-    expect(guideEl.getAttribute('style')).toContain('--bkgg: 10px')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-t: 1fr 2fr 3fr')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-g: 10px')
   })
 
   it('handles "fixed" variant with 5 columns', () => {
@@ -136,8 +136,8 @@ describe('Guide component', () => {
     expect(guideEl.dataset.variant).toBe('fixed')
     const cols = guideEl.querySelectorAll('[data-column-index]')
     expect(cols.length).toBe(5)
-    expect(guideEl.getAttribute('style')).toContain('--bkgg: 12px')
-    expect(guideEl.getAttribute('style')).toContain('--bkgt: repeat(5, 120px)')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-g: 12px')
+    expect(guideEl.getAttribute('style')).toContain('--bkgd-t: repeat(5, 120px)')
   })
 
   it('renders hidden when debugging="hidden"', () => {
diff --git a/tests/components/Layout.test.tsx b/tests/components/Layout.test.tsx
index bb322d45..6edd3667 100644
--- a/tests/components/Layout.test.tsx
+++ b/tests/components/Layout.test.tsx
@@ -9,7 +9,7 @@ vi.mock('@utils', async () => {
   return {
     ...actual,
     mergeStyles: (...args: any[]) => Object.assign({}, ...args),
-    mergeClasses: (...classes: any[]) => classes.filter(Boolean).join(' '),
+    cx: (...classes: any[]) => classes.filter(Boolean).join(' '),
     formatValue: (value: any, defaultValue?: number) => {
       if (value === undefined && defaultValue !== undefined) return `${defaultValue}px`
       if (typeof value === 'number') return `${value}px`
@@ -89,27 +89,27 @@ describe('Layout Component', () => {
     render(<Layout>Content</Layout>)
     const grid = getGrid()
     // When using default values, the CSS variables should not be present
-    expect(grid.style.getPropertyValue('--bklgtc')).toBe('')  // Default values shouldn't be injected
-    expect(grid.style.getPropertyValue('--bklgtr')).toBe('')  // Default values shouldn't be injected
+    expect(grid.style.getPropertyValue('--bkly-gtc')).toBe('')  // Default values shouldn't be injected
+    expect(grid.style.getPropertyValue('--bkly-gtr')).toBe('')  // Default values shouldn't be injected
   })
 
   it('applies column template from number prop', () => {
     render(<Layout columns={3}>Test</Layout>)
     const grid = getGrid()
-    expect(grid.style.getPropertyValue('--bklgtc')).toBe('repeat(3, 1fr)')
+    expect(grid.style.getPropertyValue('--bkly-gtc')).toBe('repeat(3, 1fr)')
   })
 
   it('handles array column definition', () => {
     render(<Layout columns={['100px', 2, '1fr']}>Test</Layout>)
     const grid = getGrid()
-    expect(grid.style.getPropertyValue('--bklgtc')).toBe('100px 2px 1fr')
+    expect(grid.style.getPropertyValue('--bkly-gtc')).toBe('100px 2px 1fr')
   })
 
   it('applies gap and alignment props', () => {
     render(<Layout gap="1rem" justifyContent="center" alignItems="stretch">Test</Layout>)
     const grid = getGrid()
-    expect(grid.style.getPropertyValue('--bkljc')).toBe('center')
-    expect(grid.style.getPropertyValue('--bklai')).toBe('stretch')
+    expect(grid.style.getPropertyValue('--bkly-jc')).toBe('center')
+    expect(grid.style.getPropertyValue('--bkly-ai')).toBe('stretch')
   })
 
   it('integrates with Padder component', () => {
diff --git a/tests/components/Padder.test.tsx b/tests/components/Padder.test.tsx
index 8bb334a5..dace5691 100644
--- a/tests/components/Padder.test.tsx
+++ b/tests/components/Padder.test.tsx
@@ -48,7 +48,7 @@ describe('Padder', () => {
     // We won't see "visible" class if "isShown" = false
     expect(padder.className).not.toMatch(/v/i)
     // And the style might have --bk-padder-color: #AA00AA
-    expect(padder.style.getPropertyValue('--bkpc')).toBe('#AA00AA')
+    expect(padder.style.getPropertyValue('--bkpd-c')).toBe('#AA00AA')
   })
 
   it('renders as visible if prop=visible', () => {
@@ -64,8 +64,8 @@ describe('Padder', () => {
       </Padder>,
     )
     const padder = screen.getByTestId('padder')
-    expect(padder.style.getPropertyValue('--bkpw')).toBe('200px')
-    expect(padder.style.getPropertyValue('--bkph')).toBe('auto')
+    expect(padder.style.getPropertyValue('--bkpd-w')).toBe('200px')
+    expect(padder.style.getPropertyValue('--bkpd-h')).toBe('auto')
   })
 
   it('renders children', () => {
diff --git a/tests/components/Spacer.test.tsx b/tests/components/Spacer.test.tsx
index 74e50406..4d130ae6 100644
--- a/tests/components/Spacer.test.tsx
+++ b/tests/components/Spacer.test.tsx
@@ -50,17 +50,17 @@ describe('Spacer Component', () => {
       const spacer = screen.getByTestId('spacer')
       // Check the actual style attribute string instead of computed style
       const styleAttr = spacer.getAttribute('style') || ''
-      expect(styleAttr).toContain('--bksw: 200px')
+      expect(styleAttr).toContain('--bksp-w: 200px')
       // The height is being normalized to 104px by the component, so we should expect that
-      expect(styleAttr).toContain('--bksh: 104px')
+      expect(styleAttr).toContain('--bksp-h: 104px')
     })
 
     it('normalizes numeric dimensions with base unit', () => {
       render(<Spacer width={16} height={24} />)
       const spacer = screen.getByTestId('spacer')
       expect(spacer).toHaveStyle({
-        '--bksw': '16px',
-        '--bksh': '24px',
+        '--bksp-w': '16px',
+        '--bksp-h': '24px',
       })
     })
   })
@@ -92,7 +92,7 @@ describe('Spacer Component', () => {
       render(<Spacer base={4} />)
       const spacer = screen.getByTestId('spacer')
       const styleAttr = spacer.getAttribute('style') || ''
-      expect(styleAttr).toContain('--bksb: 4px')
+      expect(styleAttr).toContain('--bksp-b: 4px')
     })
 
     it('uses config base unit when not provided', () => {
@@ -167,7 +167,7 @@ describe('Spacer Component', () => {
       render(<Spacer base={4} />)
       const spacer = screen.getByTestId('spacer')
       const styleAttr = spacer.getAttribute('style') || ''
-      expect(styleAttr).toContain('--bksb: 4px')
+      expect(styleAttr).toContain('--bksp-b: 4px')
     })
 
     it('uses config base unit when not provided', () => {
diff --git a/tests/utils/merge.test.ts b/tests/utils/merge.test.ts
index f6659fa8..1717cb7d 100644
--- a/tests/utils/merge.test.ts
+++ b/tests/utils/merge.test.ts
@@ -1,20 +1,20 @@
-import { mergeClasses, mergeStyles } from '@utils'
+import { cx, mergeStyles } from '@utils'
 import type { CSSProperties } from 'react'
 
 describe('Merge Utilities', () => {
   describe('merge classes', () => {
     it('combines class names and filters out falsy values', () => {
-      expect(mergeClasses('foo', 'bar')).toBe('foo bar')
-      expect(mergeClasses('foo', false, 'bar', undefined, null, 'baz')).toBe('foo bar baz')
+      expect(cx('foo', 'bar')).toBe('foo bar')
+      expect(cx('foo', false, 'bar', undefined, null, 'baz')).toBe('foo bar baz')
     })
 
     it('returns an empty string when all values are falsy', () => {
-      expect(mergeClasses(false, undefined, null, '')).toBe('')
+      expect(cx(false, undefined, null, '')).toBe('')
     })
 
     it('trims the resulting string (removing leading and trailing spaces) while preserving inner spaces', () => {
       // Given that inner spaces are preserved, '  foo  ' and 'bar' yield "foo   bar"
-      expect(mergeClasses('  foo  ', 'bar')).toBe('foo   bar')
+      expect(cx('  foo  ', 'bar')).toBe('foo   bar')
     })
   })
 

From 4b3114dbfece4b2fa3e1ce7b7858338973f559de Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 02:35:03 +0000
Subject: [PATCH 14/18] refactor: remove React traces from core, extract pure
 logic, remove dead code

- Remove window access from core convert.ts (static 1920x1080 defaults)
- Extract resolveDebugState to core, simplify useDebug hook
- Remove unused functions: moduloize, round, 5 guide validators
- Remove console.error from mergeRefs, simplify assignRef
- Remove redundant resize listeners from Baseline and Guide
- Eliminate all `as React.CSSProperties` casts from components
- Hoist Padder static grid styles as constants
- Update test expectations for static viewport defaults

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/utils/convert.ts            | 13 +------
 packages/core/src/utils/math.ts               | 30 --------------
 packages/core/src/utils/merge.ts              | 27 +++++++++++++
 packages/core/src/validation/guide.ts         | 32 +--------------
 .../src/components/Baseline/Baseline.tsx      | 16 +++-----
 packages/react/src/components/Box/Box.tsx     |  4 +-
 packages/react/src/components/Guide/Guide.tsx | 14 ++-----
 .../react/src/components/Layout/Layout.tsx    |  6 +--
 .../react/src/components/Padder/Padder.tsx    | 19 +++++----
 .../react/src/components/Spacer/Spacer.tsx    |  6 +--
 packages/react/src/components/Stack/Stack.tsx |  6 +--
 packages/react/src/hooks/useDebug.ts          | 24 ++++--------
 packages/react/src/utils/merge.ts             | 39 ++++++-------------
 tests/components/Baseline.test.tsx            |  3 +-
 tests/utils/math.test.ts                      | 36 ++++-------------
 15 files changed, 91 insertions(+), 184 deletions(-)

diff --git a/packages/core/src/utils/convert.ts b/packages/core/src/utils/convert.ts
index edaef14d..8b8760e1 100644
--- a/packages/core/src/utils/convert.ts
+++ b/packages/core/src/utils/convert.ts
@@ -8,7 +8,7 @@ export interface ConversionContext {
   parentFontSize?: number
 }
 
-const STATIC_DEFAULTS: Required<ConversionContext> = {
+const DEFAULT_CONTEXT: Required<ConversionContext> = {
   parentSize: 0,
   viewportWidth: 1920,
   viewportHeight: 1080,
@@ -16,15 +16,6 @@ const STATIC_DEFAULTS: Required<ConversionContext> = {
   parentFontSize: 16,
 }
 
-function getDefaultContext(): Required<ConversionContext> {
-  if (typeof window === 'undefined') return STATIC_DEFAULTS
-  return {
-    ...STATIC_DEFAULTS,
-    viewportWidth: window.innerWidth,
-    viewportHeight: window.innerHeight,
-  }
-}
-
 export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
   px: 1,
   in: 96,
@@ -66,7 +57,7 @@ export function convertValue(
 
   const resolver = RELATIVE_UNIT_RESOLVERS[unit]
   if (resolver) {
-    const ctx = { ...getDefaultContext(), ...context }
+    const ctx = { ...DEFAULT_CONTEXT, ...context }
     return num * resolver(ctx)
   }
 
diff --git a/packages/core/src/utils/math.ts b/packages/core/src/utils/math.ts
index 42f5bdb4..75311570 100644
--- a/packages/core/src/utils/math.ts
+++ b/packages/core/src/utils/math.ts
@@ -1,37 +1,7 @@
-import { convertValue } from './convert'
-
-export function moduloize(
-  value: number | string | undefined,
-  base: number,
-  options?: { round?: boolean }
-): string {
-  const doRound = options?.round ?? true
-  const num =
-    value === undefined
-      ? 0
-      : typeof value === 'number'
-        ? value
-        : (convertValue(value) ?? 0)
-  const normalized = doRound ? Math.round(num) : num
-  const remainder = normalized % base
-  return `${remainder}px`
-}
-
 export function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max)
 }
 
-export function round(value: number, precision = 0): number {
-  if (precision >= 0) {
-    return Number(
-      (Math.round(value * 10 ** precision) / 10 ** precision).toFixed(precision)
-    )
-  } else {
-    const factor = 10 ** Math.abs(precision)
-    return Math.round(value / factor) * factor
-  }
-}
-
 type RowCountParams = {
   height?: number
   top: number
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
index ad2101d5..edd873f0 100644
--- a/packages/core/src/utils/merge.ts
+++ b/packages/core/src/utils/merge.ts
@@ -1,3 +1,5 @@
+import type { DebuggingMode } from '../types'
+
 /**
  * Combines class names, filtering out falsy values.
  * Lightweight alternative to clsx/classnames.
@@ -6,6 +8,31 @@ export const cx = (
   ...classes: Array<string | boolean | undefined | null>
 ): string => classes.filter(Boolean).join(' ').trim()
 
+/**
+ * Resolves component debug/visibility state from prop and config.
+ * Pure function — framework-agnostic.
+ */
+export interface DebugState {
+  isShown: boolean
+  isHidden: boolean
+  isNone: boolean
+  debugging: DebuggingMode | undefined
+}
+
+export function resolveDebugState(
+  debuggingProp?: DebuggingMode,
+  debuggingConfig?: DebuggingMode
+): DebugState {
+  const effective = debuggingProp ?? debuggingConfig
+  return {
+    isShown: effective === 'visible',
+    isHidden: effective === 'hidden',
+    isNone: effective === 'none',
+    debugging: effective,
+  }
+}
+
+
 export type StyleOverrideParams = {
   key: string
   value: string
diff --git a/packages/core/src/validation/guide.ts b/packages/core/src/validation/guide.ts
index 6c2a2e84..b8d6634e 100644
--- a/packages/core/src/validation/guide.ts
+++ b/packages/core/src/validation/guide.ts
@@ -1,6 +1,4 @@
-import type { GuideColumnsPattern, GuideColumnValue, GridAlignment, GuideConfig } from '../types'
-import { GRID_ALIGNMENTS } from '../types'
-import { ABSOLUTE_UNIT_CONVERSIONS, RELATIVE_UNITS } from '../utils/convert'
+import type { GuideColumnsPattern, GuideColumnValue } from '../types'
 
 const UNIT_PATTERN =
   /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/
@@ -19,31 +17,3 @@ export const isValidGuidePattern = (
   Array.isArray(pattern) &&
   pattern.length > 0 &&
   pattern.every(isValidGuideColumnValue)
-
-const CSS_UNITS = [
-  ...Object.keys(ABSOLUTE_UNIT_CONVERSIONS),
-  ...RELATIVE_UNITS,
-]
-
-export const isGuideValue = (value: unknown) =>
-  typeof value === 'number' ||
-  (typeof value === 'string' &&
-    CSS_UNITS.some((unit) => value.endsWith(unit)))
-
-export const isGuideAlignment = (value: unknown): value is GridAlignment =>
-  typeof value === 'string' && GRID_ALIGNMENTS.includes(value as GridAlignment)
-
-const isObject = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null
-
-export const isGuideLineConfig = (config: unknown): config is GuideConfig =>
-  isObject(config) && config.variant === 'line'
-
-export const isGuideColumnConfig = (config: unknown): config is GuideConfig =>
-  isObject(config) && 'columns' in config && !('variant' in config)
-
-export const isAutoCalculatedGuide = (config: unknown): config is GuideConfig =>
-  isObject(config) &&
-  'columnWidth' in config &&
-  !('variant' in config) &&
-  !('columns' in config)
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
index dc4f1732..cadbdad6 100644
--- a/packages/react/src/components/Baseline/Baseline.tsx
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useVirtual, useMeasure } from '../../hooks'
-import { cx, createBaselineDescriptor } from '@baseline-kit/core'
+import { cx,  createBaselineDescriptor } from '@baseline-kit/core'
 import type { BaselineVariant } from '@baseline-kit/core'
-import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
+import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
 export type { BaselineVariant }
@@ -32,13 +32,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
   const config = useConfig('baseline')
   const { isShown } = useDebug(debugging, config.debugging)
   const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const { width: containerWidth, height: containerHeight, refresh } = useMeasure(containerRef)
-
-  React.useEffect(() => {
-    const handleResize = () => refresh()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [refresh])
+  const { width: containerWidth, height: containerHeight } = useMeasure(containerRef)
 
   const resolvedBase = base || config.base
 
@@ -66,7 +60,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
   })
 
   const containerStyles = React.useMemo(
-    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    () => mergeStyles(descriptor.containerStyle, style),
     [descriptor.containerStyle, style]
   )
 
@@ -87,7 +81,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
               className={styles.row}
               key={rowIndex}
               data-row-index={rowIndex}
-              style={descriptor.getRowStyle(rowIndex) as React.CSSProperties}
+              style={descriptor.getRowStyle(rowIndex)}
             />
           )
         })}
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index d6ba41cc..d0c10e25 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx, parsePadding, createBoxDescriptor } from '@baseline-kit/core'
+import { cx,  parsePadding, createBoxDescriptor } from '@baseline-kit/core'
 import type { SnappingMode } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
@@ -50,7 +50,7 @@ export const Box = React.memo(
     )
 
     const boxStyles = React.useMemo(
-      () => mergeStyles(descriptor.boxStyle as React.CSSProperties, style),
+      () => mergeStyles(descriptor.boxStyle, style),
       [descriptor.boxStyle, style]
     )
 
diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
index 2b028160..ebff7733 100644
--- a/packages/react/src/components/Guide/Guide.tsx
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useMeasure, useGuide } from '../../hooks'
-import { cx, createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
+import { cx,  createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
 import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
-import { mergeStyles } from '../../utils/merge'
 import { ClientOnly } from '../../utils/ssr'
+import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
 export type { GuideConfig }
@@ -114,13 +114,7 @@ const GuideImpl = React.memo(function GuideImpl({
   const config = useConfig('guide')
   const { isShown } = useDebug(debugging, config.debugging)
   const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const { height: containerHeight, refresh } = useMeasure(containerRef)
-
-  React.useEffect(() => {
-    const handleResize = () => refresh()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [refresh])
+  const { height: containerHeight } = useMeasure(containerRef)
 
   const resolvedVariant = (variant ?? config.variant) as GuideVariant
   const resolvedGap = typeof gap === 'number' ? gap : 0
@@ -147,7 +141,7 @@ const GuideImpl = React.memo(function GuideImpl({
   )
 
   const containerStyles = React.useMemo(
-    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    () => mergeStyles(descriptor.containerStyle, style),
     [descriptor.containerStyle, style]
   )
 
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
index da40786b..30f93f41 100644
--- a/packages/react/src/components/Layout/Layout.tsx
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { parsePadding, cx, createLayoutDescriptor } from '@baseline-kit/core'
+import { cx,  parsePadding, createLayoutDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
-import { mergeStyles } from '../../utils/merge'
 import { Config } from '../Config'
 import { Padder } from '../Padder'
 import { Spacer } from '../Spacer'
 import { ComponentsProps, Variant } from '../types'
+import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
 type IndicatorNode = NonNullable<React.ComponentProps<typeof Spacer>['indicatorNode']>
@@ -88,7 +88,7 @@ export const Layout = React.memo(function Layout({
   )
 
   const containerStyles = React.useMemo(
-    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    () => mergeStyles(descriptor.containerStyle, style),
     [descriptor.containerStyle, style]
   )
 
diff --git a/packages/react/src/components/Padder/Padder.tsx b/packages/react/src/components/Padder/Padder.tsx
index b9018c99..9071cbae 100644
--- a/packages/react/src/components/Padder/Padder.tsx
+++ b/packages/react/src/components/Padder/Padder.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx, parsePadding, createPadderDescriptor } from '@baseline-kit/core'
+import { cx,  parsePadding, createPadderDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
@@ -38,6 +38,11 @@ const createRenderSpacerFn = (
   return SpacerElement
 }
 
+// Static grid position styles — hoisted to avoid re-creation on render
+const GRID_FULL_ROW: React.CSSProperties = { gridColumn: '1 / -1' }
+const GRID_MID_COL: React.CSSProperties = { gridRow: '2 / 3' }
+const GRID_CENTER: React.CSSProperties = { gridRow: '2 / 3', gridColumn: '2 / 3' }
+
 export const Padder = React.memo(
   React.forwardRef<HTMLDivElement, PadderProps>(function Padder(
     { children, className, debugging: debuggingProp, height, indicatorNode, style, width, ssrMode = false, ...spacingProps },
@@ -82,7 +87,7 @@ export const Padder = React.memo(
     )
 
     const containerStyles = React.useMemo(
-      () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+      () => mergeStyles(descriptor.containerStyle, style),
       [descriptor.containerStyle, style]
     )
 
@@ -102,13 +107,13 @@ export const Padder = React.memo(
     return (
       <div ref={setRefs} data-testid="padder" className={cx(...descriptor.classTokens.map(t => styles[t]), className)} style={containerStyles}>
         <>
-          {padding.top >= 0 && <div style={{ gridColumn: '1 / -1' }}>{renderSpacer('100%', padding.top)}</div>}
-          {padding.left >= 0 && <div style={{ gridRow: '2 / 3' }}>{renderSpacer(padding.left, '100%')}</div>}
+          {padding.top >= 0 && <div style={GRID_FULL_ROW}>{renderSpacer('100%', padding.top)}</div>}
+          {padding.left >= 0 && <div style={GRID_MID_COL}>{renderSpacer(padding.left, '100%')}</div>}
         </>
-        <div style={{ gridRow: '2 / 3', gridColumn: '2 / 3' }}>{children}</div>
+        <div style={GRID_CENTER}>{children}</div>
         <>
-          {padding.right >= 0 && <div style={{ gridRow: '2 / 3' }}>{renderSpacer(padding.right, '100%')}</div>}
-          {padding.bottom >= 0 && <div style={{ gridColumn: '1 / -1' }}>{renderSpacer('100%', padding.bottom)}</div>}
+          {padding.right >= 0 && <div style={GRID_MID_COL}>{renderSpacer(padding.right, '100%')}</div>}
+          {padding.bottom >= 0 && <div style={GRID_FULL_ROW}>{renderSpacer('100%', padding.bottom)}</div>}
         </>
       </div>
     )
diff --git a/packages/react/src/components/Spacer/Spacer.tsx b/packages/react/src/components/Spacer/Spacer.tsx
index fde4f759..447c1bd9 100644
--- a/packages/react/src/components/Spacer/Spacer.tsx
+++ b/packages/react/src/components/Spacer/Spacer.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useConfig, useDebug } from '../../hooks'
-import { cx, createSpacerDescriptor } from '@baseline-kit/core'
+import { cx,  createSpacerDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
-import { mergeStyles } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
+import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
 export type IndicatorNode = (value: number, type: 'width' | 'height') => React.ReactNode
@@ -70,7 +70,7 @@ export const Spacer = React.memo(function Spacer({
   }, [shouldShowMeasurements, indicatorNode, descriptor.normWidth, descriptor.normHeight])
 
   const baseStyles = React.useMemo(
-    () => mergeStyles(descriptor.style as React.CSSProperties, style),
+    () => mergeStyles(descriptor.style, style),
     [descriptor.style, style]
   )
 
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 0eab6cdd..2f88acce 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx, parsePadding, createStackDescriptor } from '@baseline-kit/core'
+import { cx,  parsePadding, createStackDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
-import { mergeStyles } from '../../utils/merge'
 import { Padder } from '../Padder'
 import { IndicatorNode } from '../Spacer'
 import { Config } from '../Config'
 import { ComponentsProps, Variant } from '../types'
+import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
 export type CSSPropertiesDirectionalAxis = 'x' | 'y' | '-x' | '-y'
@@ -81,7 +81,7 @@ export const Stack = React.memo(function Stack({
   )
 
   const containerStyles = React.useMemo(
-    () => mergeStyles(descriptor.containerStyle as React.CSSProperties, style),
+    () => mergeStyles(descriptor.containerStyle, style),
     [descriptor.containerStyle, style]
   )
 
diff --git a/packages/react/src/hooks/useDebug.ts b/packages/react/src/hooks/useDebug.ts
index 03c19aef..3f8db709 100644
--- a/packages/react/src/hooks/useDebug.ts
+++ b/packages/react/src/hooks/useDebug.ts
@@ -1,27 +1,17 @@
 import { useMemo } from 'react'
+import { resolveDebugState } from '@baseline-kit/core'
 import type { DebuggingMode } from '@baseline-kit/core'
 
-interface DebugResult {
-  isShown: boolean
-  isHidden: boolean
-  isNone: boolean
-  debugging: DebuggingMode | undefined
-}
-
 /**
  * Hook for managing component debug state and visibility.
+ * Delegates to pure resolveDebugState in core.
  */
 export function useDebug(
   debuggingProp?: DebuggingMode,
   debuggingConfig?: DebuggingMode
-): DebugResult {
-  return useMemo(() => {
-    const effective = debuggingProp ?? debuggingConfig
-    return {
-      isShown: effective === 'visible',
-      isHidden: effective === 'hidden',
-      isNone: effective === 'none',
-      debugging: effective,
-    }
-  }, [debuggingProp, debuggingConfig])
+) {
+  return useMemo(
+    () => resolveDebugState(debuggingProp, debuggingConfig),
+    [debuggingProp, debuggingConfig]
+  )
 }
diff --git a/packages/react/src/utils/merge.ts b/packages/react/src/utils/merge.ts
index 775d7891..90a0c0c5 100644
--- a/packages/react/src/utils/merge.ts
+++ b/packages/react/src/utils/merge.ts
@@ -1,33 +1,13 @@
 import * as React from 'react'
 
 /**
- * Combines multiple style objects with type safety.
+ * Combines descriptor style records and React style objects.
+ * Accepts Record<string, string> from descriptors and React.CSSProperties.
  */
-export const mergeStyles = <T extends React.CSSProperties>(
-  ...styles: Array<T | undefined>
-): T =>
-  Object.assign(
-    {},
-    ...styles.filter((style): style is T => style !== undefined)
-  )
-
-/**
- * Assigns a value to a React ref.
- */
-function assignRef<T>(
-  ref: React.Ref<T> | null | undefined,
-  node: T | null
-): void {
-  if (!ref) return
-  if (typeof ref === 'function') {
-    ref(node)
-  } else {
-    try {
-      Object.assign(ref, { current: node })
-    } catch (error) {
-      console.error('Error assigning ref:', error)
-    }
-  }
+export function mergeStyles(
+  ...styles: Array<Record<string, string> | React.CSSProperties | undefined>
+): React.CSSProperties {
+  return Object.assign({}, ...styles.filter(Boolean))
 }
 
 /**
@@ -38,7 +18,12 @@ export function mergeRefs<T>(
 ): React.RefCallback<T> {
   return (node: T | null) => {
     refs.forEach((ref) => {
-      assignRef(ref, node)
+      if (!ref) return
+      if (typeof ref === 'function') {
+        ref(node)
+      } else {
+        Object.assign(ref, { current: node })
+      }
     })
   }
 }
diff --git a/tests/components/Baseline.test.tsx b/tests/components/Baseline.test.tsx
index ee34c6be..b85a6745 100644
--- a/tests/components/Baseline.test.tsx
+++ b/tests/components/Baseline.test.tsx
@@ -141,10 +141,11 @@ describe('Baseline', () => {
   })
 
   it('respects custom string height e.g. "50vh"', () => {
+    // Core uses static viewport defaults (1080px height) — 50vh = 540px → 540/8 = 67 rows
     render(<Baseline debugging="visible" height="50vh" />)
     const baseline = screen.getByTestId('baseline')
     const lines = baseline.querySelectorAll('[data-row-index]')
-    expect(lines.length).toBe(48)
+    expect(lines.length).toBe(68)
   })
 
   it('applies top/bottom spacing if provided', () => {
diff --git a/tests/utils/math.test.ts b/tests/utils/math.test.ts
index 8cdd0721..f3b9b3fb 100644
--- a/tests/utils/math.test.ts
+++ b/tests/utils/math.test.ts
@@ -1,4 +1,4 @@
-import { clamp, round, moduloize } from '@utils'
+import { clamp, calculateRowCount } from '@utils'
 
 describe('Math Utils', () => {
   describe('clamp', () => {
@@ -9,34 +9,14 @@ describe('Math Utils', () => {
     })
   })
 
-  describe('round', () => {
-    it('rounds decimal values to the specified precision', () => {
-      expect(round(1.234, 2)).toBeCloseTo(1.23, 2)
-      expect(round(1.235, 2)).toBeCloseTo(1.24, 2)
+  describe('calculateRowCount', () => {
+    it('calculates row count based on height and base', () => {
+      expect(calculateRowCount({ height: 80, top: 0, bottom: 0, base: 8 })).toBe(10)
+      expect(calculateRowCount({ height: 100, top: 10, bottom: 10, base: 8 })).toBe(10)
     })
 
-    it('rounds numbers to the nearest multiple for negative precision', () => {
-      expect(round(123.456, -1)).toBe(120)
+    it('returns at least 1 row', () => {
+      expect(calculateRowCount({ height: 0, top: 0, bottom: 0, base: 8 })).toBe(1)
     })
   })
-
-  describe('moduloize', () => {
-    it('calculates the remainder (in pixels) for numeric and string values', () => {
-      expect(moduloize(14, 8)).toBe('6px')
-      expect(moduloize('14px', 8)).toBe('6px')
-      expect(moduloize(-2, 8)).toBe('-2px')
-      expect(moduloize(undefined, 8)).toBe('0px')
-    })
-
-    it('does not round the input when round option is false', () => {
-      const result = moduloize(14.3, 8, { round: false })
-      // Extract the numeric portion from the returned string.
-      const numericValue = parseFloat(result)
-      expect(numericValue).toBeCloseTo(6.3, 5)
-    })
-
-    it('returns "0px" when the value is a non-convertible string', () => {
-      expect(moduloize('non-number', 8)).toBe('0px')
-    })
-  })
-})
\ No newline at end of file
+})

From 24e7cf0c3c53c8f23eb6db21809c941605684e62 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 03:40:02 +0000
Subject: [PATCH 15/18] feat: add @baseline-kit/dom observers and
 @baseline-kit/lit web components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. @baseline-kit/dom — imperative DOM observers:
   - createMeasureObserver: ResizeObserver wrapper with disconnect handle
   - createVirtualTracker: virtual scroll range tracker with IntersectionObserver

2. React hooks refactored to use dom observers:
   - useMeasure now wraps createMeasureObserver (~40 lines → thin wrapper)
   - useVirtual now wraps createVirtualTracker (~90 lines → thin wrapper)

3. @baseline-kit/lit — Lit web components (decorator-free):
   - <bk-config>: context provider (ContextProvider from @lit/context)
   - <bk-baseline>: baseline grid overlay with virtual scrolling
   - <bk-guide>: column guide overlay with responsive measurement
   - <bk-box>: debug-bordered container
   - <bk-stack>: flex layout with directional stacking
   - <bk-layout>: CSS grid layout container
   - <bk-padder>: padding container with spacer visualization
   - <bk-spacer>: visual spacing indicator
   - BkBase: shared base class with config context consumption

All components use core descriptors and dom observers — zero logic duplication.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 alias.config.ts                               |   1 +
 package.json                                  |   6 +-
 packages/dom/src/index.ts                     |   3 +-
 packages/dom/src/observers.ts                 | 139 +++++++++++++++
 packages/lit/package.json                     |  18 ++
 packages/lit/src/components/bk-base.ts        |  22 +++
 packages/lit/src/components/bk-baseline.ts    | 167 ++++++++++++++++++
 packages/lit/src/components/bk-box.ts         |  78 ++++++++
 packages/lit/src/components/bk-config.ts      |  48 +++++
 packages/lit/src/components/bk-guide.ts       | 165 +++++++++++++++++
 packages/lit/src/components/bk-layout.ts      | 103 +++++++++++
 packages/lit/src/components/bk-padder.ts      | 114 ++++++++++++
 packages/lit/src/components/bk-spacer.ts      |  88 +++++++++
 packages/lit/src/components/bk-stack.ts       |  88 +++++++++
 .../lit/src/controllers/config-context.ts     |   8 +
 packages/lit/src/index.ts                     |  20 +++
 packages/react/src/hooks/useMeasure.ts        |  55 +++---
 packages/react/src/hooks/useVirtual.ts        |  96 +++-------
 tsconfig.json                                 |   2 +
 19 files changed, 1119 insertions(+), 102 deletions(-)
 create mode 100644 packages/dom/src/observers.ts
 create mode 100644 packages/lit/package.json
 create mode 100644 packages/lit/src/components/bk-base.ts
 create mode 100644 packages/lit/src/components/bk-baseline.ts
 create mode 100644 packages/lit/src/components/bk-box.ts
 create mode 100644 packages/lit/src/components/bk-config.ts
 create mode 100644 packages/lit/src/components/bk-guide.ts
 create mode 100644 packages/lit/src/components/bk-layout.ts
 create mode 100644 packages/lit/src/components/bk-padder.ts
 create mode 100644 packages/lit/src/components/bk-spacer.ts
 create mode 100644 packages/lit/src/components/bk-stack.ts
 create mode 100644 packages/lit/src/controllers/config-context.ts
 create mode 100644 packages/lit/src/index.ts

diff --git a/alias.config.ts b/alias.config.ts
index e452bf1a..0bb85496 100644
--- a/alias.config.ts
+++ b/alias.config.ts
@@ -5,6 +5,7 @@ export const alias = {
   '@baseline-kit/core': resolve(__dirname, 'packages/core/src'),
   '@baseline-kit/dom': resolve(__dirname, 'packages/dom/src'),
   '@baseline-kit/react': resolve(__dirname, 'packages/react/src'),
+  '@baseline-kit/lit': resolve(__dirname, 'packages/lit/src'),
 
   // Backwards-compatible aliases (map to new locations)
   '@': resolve(__dirname, 'packages/react/src'),
diff --git a/package.json b/package.json
index f2b22d1a..c9504426 100644
--- a/package.json
+++ b/package.json
@@ -154,5 +154,9 @@
     "access": "public"
   },
   "author": "Francois Denavaut",
-  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript."
+  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
+  "dependencies": {
+    "@lit/context": "^1.1.6",
+    "lit": "^3.3.2"
+  }
 }
diff --git a/packages/dom/src/index.ts b/packages/dom/src/index.ts
index 25c7e5c5..945e63eb 100644
--- a/packages/dom/src/index.ts
+++ b/packages/dom/src/index.ts
@@ -1,8 +1,9 @@
 /**
  * @baseline-kit/dom
- * DOM utilities: timing, SSR detection, and browser APIs
+ * DOM utilities: timing, SSR detection, observers, and browser APIs
  * Depends on @baseline-kit/core
  */
 
 export * from './timing'
 export * from './ssr'
+export * from './observers'
diff --git a/packages/dom/src/observers.ts b/packages/dom/src/observers.ts
new file mode 100644
index 00000000..eca2331a
--- /dev/null
+++ b/packages/dom/src/observers.ts
@@ -0,0 +1,139 @@
+/**
+ * Imperative DOM observers — framework-agnostic.
+ * Each factory returns a disposable handle with `disconnect()`.
+ */
+
+import { rafThrottle } from './timing'
+
+// ── Measure Observer ────────────────────────────────────────────────
+
+export interface MeasureRect {
+  width: number
+  height: number
+}
+
+export interface MeasureObserverHandle {
+  /** Force an immediate re-measure */
+  refresh(): void
+  /** Stop observing */
+  disconnect(): void
+}
+
+/**
+ * Observes an element's dimensions via ResizeObserver.
+ * Calls `onChange` with rounded width/height whenever the size changes.
+ */
+export function createMeasureObserver(
+  el: Element,
+  onChange: (rect: MeasureRect) => void
+): MeasureObserverHandle {
+  let prev: MeasureRect = { width: 0, height: 0 }
+
+  const measure = () => {
+    try {
+      const rect = el.getBoundingClientRect()
+      const next: MeasureRect = {
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+      }
+      if (next.width !== prev.width || next.height !== prev.height) {
+        prev = next
+        onChange(next)
+      }
+    } catch {
+      // element may have been removed
+    }
+  }
+
+  const throttledMeasure = rafThrottle(measure)
+
+  // Initial measurement
+  measure()
+
+  const observer = new ResizeObserver(throttledMeasure)
+  observer.observe(el)
+
+  return {
+    refresh: throttledMeasure,
+    disconnect() {
+      observer.disconnect()
+    },
+  }
+}
+
+// ── Virtual Scroll Tracker ──────────────────────────────────────────
+
+export interface VirtualRange {
+  start: number
+  end: number
+}
+
+export interface VirtualTrackerOptions {
+  totalItems: number
+  itemHeight: number
+  buffer?: number
+}
+
+export interface VirtualTrackerHandle {
+  /** Force recalculation */
+  refresh(): void
+  /** Stop tracking */
+  disconnect(): void
+}
+
+/**
+ * Tracks which slice of a virtual list is visible in the viewport.
+ * Uses IntersectionObserver + window scroll/resize events.
+ */
+export function createVirtualTracker(
+  el: Element,
+  options: VirtualTrackerOptions,
+  onChange: (range: VirtualRange) => void
+): VirtualTrackerHandle {
+  const { totalItems, itemHeight, buffer = 0 } = options
+
+  const calculateRange = (): VirtualRange => {
+    const rect = el.getBoundingClientRect()
+    const offsetTop = rect.top + window.scrollY
+    const viewportTop = Math.max(0, window.scrollY - offsetTop - buffer)
+    const viewportBottom = viewportTop + window.innerHeight + buffer * 2
+
+    const start = Math.max(0, Math.floor(viewportTop / itemHeight))
+    const end = Math.min(totalItems, Math.ceil(viewportBottom / itemHeight))
+    return { start, end }
+  }
+
+  let prev: VirtualRange = { start: 0, end: totalItems }
+
+  const update = () => {
+    const next = calculateRange()
+    if (next.start !== prev.start || next.end !== prev.end) {
+      prev = next
+      onChange(next)
+    }
+  }
+
+  const throttledUpdate = rafThrottle(update)
+
+  // Window events
+  window.addEventListener('scroll', throttledUpdate)
+  window.addEventListener('resize', throttledUpdate)
+
+  // Intersection observer for element visibility
+  const intersectionObserver = new IntersectionObserver(throttledUpdate, {
+    threshold: 0,
+  })
+  intersectionObserver.observe(el)
+
+  // Initial calculation
+  throttledUpdate()
+
+  return {
+    refresh: throttledUpdate,
+    disconnect() {
+      window.removeEventListener('scroll', throttledUpdate)
+      window.removeEventListener('resize', throttledUpdate)
+      intersectionObserver.disconnect()
+    },
+  }
+}
diff --git a/packages/lit/package.json b/packages/lit/package.json
new file mode 100644
index 00000000..0cfae65a
--- /dev/null
+++ b/packages/lit/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@baseline-kit/lit",
+  "version": "1.0.0",
+  "description": "Lit web components for baseline-kit: grid overlays, spacing, and layout",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@baseline-kit/core": "workspace:*",
+    "@baseline-kit/dom": "workspace:*",
+    "lit": "^3.3.0"
+  },
+  "license": "MIT",
+  "author": "Francois Denavaut"
+}
diff --git a/packages/lit/src/components/bk-base.ts b/packages/lit/src/components/bk-base.ts
new file mode 100644
index 00000000..c4259d8b
--- /dev/null
+++ b/packages/lit/src/components/bk-base.ts
@@ -0,0 +1,22 @@
+import { LitElement } from 'lit'
+import { ContextConsumer } from '@lit/context'
+import type { ConfigSchema } from '@baseline-kit/core'
+import { DEFAULT_CONFIG } from '@baseline-kit/core'
+import { configContext } from '../controllers/config-context.js'
+
+/**
+ * Base class for all baseline-kit Lit components.
+ * Automatically consumes the bk-config context.
+ */
+export class BkBase extends LitElement {
+  protected _config: ConfigSchema = DEFAULT_CONFIG
+
+  private _consumer = new ContextConsumer(this, {
+    context: configContext,
+    subscribe: true,
+    callback: (value) => {
+      this._config = value
+      this.requestUpdate()
+    },
+  })
+}
diff --git a/packages/lit/src/components/bk-baseline.ts b/packages/lit/src/components/bk-baseline.ts
new file mode 100644
index 00000000..4ae5311b
--- /dev/null
+++ b/packages/lit/src/components/bk-baseline.ts
@@ -0,0 +1,167 @@
+import { html, css, nothing } from 'lit'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import type { BaselineVariant } from '@baseline-kit/core'
+import {
+  cx,
+  resolveDebugState,
+  createBaselineDescriptor,
+} from '@baseline-kit/core'
+import {
+  createMeasureObserver,
+  createVirtualTracker,
+} from '@baseline-kit/dom'
+import type { MeasureObserverHandle, VirtualTrackerHandle } from '@baseline-kit/dom'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-baseline> — Baseline grid overlay.
+ */
+export class BkBaseline extends BkBase {
+  static override properties = {
+    variant: {},
+    debugging: {},
+    color: {},
+    width: {},
+    height: {},
+    base: { type: Number },
+    _containerWidth: { state: true },
+    _containerHeight: { state: true },
+    _virtualStart: { state: true },
+    _virtualEnd: { state: true },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .bas {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      width: var(--bkbl-w);
+      height: var(--bkbl-h);
+      overflow: hidden;
+    }
+    .row {
+      left: 0;
+      right: 0;
+      position: absolute;
+      top: var(--bkbl-rt);
+      height: var(--bkbl-rh);
+      background-color: var(--bkbl-c);
+    }
+  `
+
+  declare variant: BaselineVariant | undefined
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare color: string | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare base: number | undefined
+
+  private _containerWidth = 0
+  private _containerHeight = 0
+  private _virtualStart = 0
+  private _virtualEnd = 0
+
+  private _containerRef = createRef<HTMLDivElement>()
+  private _measureHandle?: MeasureObserverHandle
+  private _virtualHandle?: VirtualTrackerHandle
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    this._measureHandle?.disconnect()
+    this._virtualHandle?.disconnect()
+  }
+
+  override updated() {
+    const el = this._containerRef.value
+    if (!el) return
+
+    if (!this._measureHandle) {
+      this._measureHandle = createMeasureObserver(el, (rect) => {
+        this._containerWidth = rect.width
+        this._containerHeight = rect.height
+        this.requestUpdate()
+      })
+    }
+
+    const cfg = this._config.baseline
+    const resolvedBase = this.base ?? this._config.base
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+    if (!isShown) return
+
+    const descriptor = createBaselineDescriptor({
+      base: resolvedBase,
+      colors: cfg.colors,
+      variant: this.variant ?? cfg.variant,
+      width: this.width,
+      height: this.height,
+      color: this.color,
+      containerWidth: this._containerWidth,
+      containerHeight: this._containerHeight,
+      spacing: {},
+      isVisible: isShown,
+    })
+
+    this._virtualHandle?.disconnect()
+    this._virtualHandle = createVirtualTracker(
+      el,
+      { totalItems: descriptor.rowCount, itemHeight: resolvedBase, buffer: 160 },
+      (range) => {
+        this._virtualStart = range.start
+        this._virtualEnd = range.end
+        this.requestUpdate()
+      }
+    )
+  }
+
+  override render() {
+    const cfg = this._config.baseline
+    const resolvedBase = this.base ?? this._config.base
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    if (!isShown) {
+      return html`<div class="bas" aria-hidden="true"></div>`
+    }
+
+    const descriptor = createBaselineDescriptor({
+      base: resolvedBase,
+      colors: cfg.colors,
+      variant: this.variant ?? cfg.variant,
+      width: this.width,
+      height: this.height,
+      color: this.color,
+      containerWidth: this._containerWidth,
+      containerHeight: this._containerHeight,
+      spacing: {},
+      isVisible: isShown,
+    })
+
+    const count = this._virtualEnd - this._virtualStart
+    const rows = count > 0
+      ? Array.from({ length: count }, (_, i) => {
+          const rowIndex = i + this._virtualStart
+          return html`<div class="row" style=${styleMap(descriptor.getRowStyle(rowIndex))}></div>`
+        })
+      : nothing
+
+    return html`
+      <div
+        ${ref(this._containerRef)}
+        class=${cx('bas')}
+        aria-hidden="true"
+        style=${styleMap(descriptor.containerStyle)}
+      >
+        ${rows}
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-baseline', BkBaseline)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-baseline': BkBaseline
+  }
+}
diff --git a/packages/lit/src/components/bk-box.ts b/packages/lit/src/components/bk-box.ts
new file mode 100644
index 00000000..53449672
--- /dev/null
+++ b/packages/lit/src/components/bk-box.ts
@@ -0,0 +1,78 @@
+import { html, css } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import {
+  cx,
+  resolveDebugState,
+  createBoxDescriptor,
+} from '@baseline-kit/core'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-box> — Box container with optional debug border.
+ */
+export class BkBox extends BkBase {
+  static override properties = {
+    debugging: {},
+    width: {},
+    height: {},
+    colSpan: { type: Number, attribute: 'col-span' },
+    rowSpan: { type: Number, attribute: 'row-span' },
+    span: { type: Number },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .box {
+      position: relative;
+      width: var(--bkbx-w);
+      height: var(--bkbx-h);
+    }
+    .v::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--bkbx-cl);
+      pointer-events: none;
+      z-index: var(--bk-zi, 1);
+    }
+  `
+
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare colSpan: number | undefined
+  declare rowSpan: number | undefined
+  declare span: number | undefined
+
+  override render() {
+    const cfg = this._config.box
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    const descriptor = createBoxDescriptor({
+      base: this._config.base,
+      lineColor: cfg.colors.line,
+      width: this.width as number | string | undefined,
+      height: this.height as number | string | undefined,
+      span: this.span,
+      colSpan: this.colSpan,
+      rowSpan: this.rowSpan,
+      isVisible: isShown,
+    })
+
+    const mergedStyle = { ...descriptor.boxStyle, ...descriptor.gridSpanStyle }
+
+    return html`
+      <div class=${cx(...descriptor.classTokens)} style=${styleMap(mergedStyle)}>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-box', BkBox)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-box': BkBox
+  }
+}
diff --git a/packages/lit/src/components/bk-config.ts b/packages/lit/src/components/bk-config.ts
new file mode 100644
index 00000000..b8241ff4
--- /dev/null
+++ b/packages/lit/src/components/bk-config.ts
@@ -0,0 +1,48 @@
+import { LitElement, html } from 'lit'
+import { ContextProvider } from '@lit/context'
+import type { ConfigSchema } from '@baseline-kit/core'
+import { DEFAULT_CONFIG, mergeConfig } from '@baseline-kit/core'
+import { configContext } from '../controllers/config-context.js'
+
+/**
+ * <bk-config> — Configuration provider for baseline-kit Lit components.
+ *
+ * @example
+ * ```html
+ * <bk-config base="4">
+ *   <bk-baseline></bk-baseline>
+ * </bk-config>
+ * ```
+ */
+export class BkConfig extends LitElement {
+  static override properties = {
+    base: { type: Number },
+  }
+
+  declare base: number | undefined
+
+  private _provider = new ContextProvider(this, {
+    context: configContext,
+    initialValue: DEFAULT_CONFIG,
+  })
+
+  override willUpdate() {
+    const config = mergeConfig({
+      parentConfig: DEFAULT_CONFIG,
+      base: this.base,
+    })
+    this._provider.setValue(config)
+  }
+
+  override render() {
+    return html`<slot></slot>`
+  }
+}
+
+customElements.define('bk-config', BkConfig)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-config': BkConfig
+  }
+}
diff --git a/packages/lit/src/components/bk-guide.ts b/packages/lit/src/components/bk-guide.ts
new file mode 100644
index 00000000..e86a4235
--- /dev/null
+++ b/packages/lit/src/components/bk-guide.ts
@@ -0,0 +1,165 @@
+import { html, css, nothing } from 'lit'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import type { GuideVariant } from '@baseline-kit/core'
+import {
+  cx,
+  resolveDebugState,
+  createGuideDescriptor,
+  createGuideConfig,
+  calculateGuideTemplate,
+} from '@baseline-kit/core'
+import { createMeasureObserver } from '@baseline-kit/dom'
+import type { MeasureObserverHandle } from '@baseline-kit/dom'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-guide> — Column guide overlay.
+ */
+export class BkGuide extends BkBase {
+  static override properties = {
+    variant: {},
+    debugging: {},
+    color: {},
+    width: {},
+    height: {},
+    maxWidth: { attribute: 'max-width' },
+    columnWidth: { attribute: 'column-width' },
+    align: {},
+    gap: { type: Number },
+    columns: { type: Number },
+    _containerWidth: { state: true },
+    _containerHeight: { state: true },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .gde {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      padding: var(--bkgd-pb) var(--bkgd-pi);
+    }
+    .line { left: -0.5px; }
+    .cols {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      column-gap: var(--bkgd-g);
+      grid-template-rows: 1fr;
+      grid-template-columns: var(--bkgd-t);
+      justify-content: var(--bkgd-j);
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .col {
+      min-width: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .col[data-variant='line'] { width: 1px; background-color: var(--bkgd-cl); }
+    .col[data-variant='pattern'] { background-color: var(--bkgd-cp); }
+    .col[data-variant='auto'] { background-color: var(--bkgd-ca); overflow: hidden; }
+    .col[data-variant='fixed'] { background-color: var(--bkgd-cf); }
+  `
+
+  declare variant: GuideVariant | undefined
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare color: string | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare maxWidth: string | number | undefined
+  declare columnWidth: string | number | undefined
+  declare align: string | undefined
+  declare gap: number | undefined
+  declare columns: number | undefined
+
+  private _containerWidth = 0
+  private _containerHeight = 0
+
+  private _containerRef = createRef<HTMLDivElement>()
+  private _measureHandle?: MeasureObserverHandle
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    this._measureHandle?.disconnect()
+  }
+
+  override updated() {
+    const el = this._containerRef.value
+    if (!el || this._measureHandle) return
+
+    this._measureHandle = createMeasureObserver(el, (rect) => {
+      this._containerWidth = rect.width
+      this._containerHeight = rect.height
+      this.requestUpdate()
+    })
+  }
+
+  override render() {
+    const cfg = this._config.guide
+    const resolvedVariant = (this.variant ?? cfg.variant) as GuideVariant
+    const resolvedGap = this.gap ?? 0
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    if (!isShown) {
+      return html`<div class="gde" aria-hidden="true"><slot></slot></div>`
+    }
+
+    const gridConfig = createGuideConfig(
+      resolvedVariant,
+      this._config.base,
+      resolvedGap,
+      this.columns,
+      this.columnWidth as number | string | undefined
+    )
+
+    const { template, columnsCount, calculatedGap } = calculateGuideTemplate(
+      this._containerWidth,
+      gridConfig
+    )
+
+    const descriptor = createGuideDescriptor({
+      base: this._config.base,
+      colors: cfg.colors,
+      variant: resolvedVariant,
+      align: this.align ?? 'center',
+      width: this.width,
+      height: this.height,
+      columnWidth: this.columnWidth,
+      maxWidth: this.maxWidth,
+      color: this.color,
+      containerWidth: this._containerWidth,
+      containerHeight: this._containerHeight,
+      template,
+      columnsCount,
+      calculatedGap,
+      isVisible: isShown,
+    })
+
+    const columnEls = Array.from({ length: descriptor.columnsCount }, (_, i) =>
+      html`<div class="col" data-variant=${resolvedVariant} style="background-color: ${descriptor.columnColor}"></div>`
+    )
+
+    return html`
+      <div
+        ${ref(this._containerRef)}
+        class=${cx('gde', resolvedVariant === 'line' ? 'line' : undefined)}
+        aria-hidden="true"
+        style=${styleMap(descriptor.containerStyle)}
+      >
+        <div class="cols" data-variant=${resolvedVariant}>${columnEls}</div>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-guide', BkGuide)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-guide': BkGuide
+  }
+}
diff --git a/packages/lit/src/components/bk-layout.ts b/packages/lit/src/components/bk-layout.ts
new file mode 100644
index 00000000..cb90d481
--- /dev/null
+++ b/packages/lit/src/components/bk-layout.ts
@@ -0,0 +1,103 @@
+import { html, css } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import {
+  cx,
+  resolveDebugState,
+  createLayoutDescriptor,
+} from '@baseline-kit/core'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-layout> — CSS Grid layout container.
+ */
+export class BkLayout extends BkBase {
+  static override properties = {
+    debugging: {},
+    columns: {},
+    rows: {},
+    width: {},
+    height: {},
+    gap: { type: Number },
+    rowGap: { type: Number, attribute: 'row-gap' },
+    columnGap: { type: Number, attribute: 'column-gap' },
+    justifyItems: { attribute: 'justify-items' },
+    alignItems: { attribute: 'align-items' },
+    justifyContent: { attribute: 'justify-content' },
+    alignContent: { attribute: 'align-content' },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .lay {
+      display: grid;
+      position: relative;
+      box-sizing: border-box;
+      width: var(--bkly-w, auto);
+      height: var(--bkly-h, auto);
+      grid-template-columns: var(--bkly-gtc, repeat(auto-fill, minmax(100px, 1fr)));
+      grid-template-rows: var(--bkly-gtr, auto);
+      gap: var(--bkly-g, 0);
+      column-gap: var(--bkly-cg, 0);
+      row-gap: var(--bkly-rg, 0);
+      justify-items: var(--bkly-ji, stretch);
+      align-items: var(--bkly-ai, stretch);
+      justify-content: var(--bkly-jc, start);
+      align-content: var(--bkly-ac, start);
+    }
+    .v::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--bkly-cl, hsla(330, 60%, 40%, 0.6));
+      pointer-events: none;
+      z-index: var(--bk-zio, 2);
+    }
+  `
+
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare columns: string | number | undefined
+  declare rows: string | number | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare gap: number | undefined
+  declare rowGap: number | undefined
+  declare columnGap: number | undefined
+  declare justifyItems: string | undefined
+  declare alignItems: string | undefined
+  declare justifyContent: string | undefined
+  declare alignContent: string | undefined
+
+  override render() {
+    const cfg = this._config.layout
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    const descriptor = createLayoutDescriptor({
+      colors: cfg.colors,
+      columns: this.columns,
+      rows: this.rows,
+      width: this.width as number | string | undefined,
+      height: this.height as number | string | undefined,
+      gap: this.gap as number | string | undefined,
+      rowGap: this.rowGap as number | string | undefined,
+      columnGap: this.columnGap as number | string | undefined,
+      justifyItems: this.justifyItems,
+      alignItems: this.alignItems,
+      justifyContent: this.justifyContent,
+      alignContent: this.alignContent,
+    })
+
+    return html`
+      <div class=${cx(...descriptor.classTokens, isShown ? 'v' : undefined)} style=${styleMap(descriptor.containerStyle)}>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-layout', BkLayout)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-layout': BkLayout
+  }
+}
diff --git a/packages/lit/src/components/bk-padder.ts b/packages/lit/src/components/bk-padder.ts
new file mode 100644
index 00000000..4656c7f5
--- /dev/null
+++ b/packages/lit/src/components/bk-padder.ts
@@ -0,0 +1,114 @@
+import { html, css } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import {
+  cx,
+  resolveDebugState,
+  createPadderDescriptor,
+  parsePadding,
+} from '@baseline-kit/core'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-padder> — Padding container with spacer visualization.
+ */
+export class BkPadder extends BkBase {
+  static override properties = {
+    debugging: {},
+    width: {},
+    height: {},
+    block: { type: Number },
+    inline: { type: Number },
+    top: { type: Number },
+    right: { type: Number },
+    bottom: { type: Number },
+    left: { type: Number },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .pad {
+      position: relative;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      grid-template-rows: auto 1fr auto;
+      width: var(--bkpd-w, auto);
+      height: var(--bkpd-h, auto);
+    }
+    .v::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--bkpd-c, var(--bk-padder-color-theme));
+      pointer-events: none;
+      z-index: var(--bk-zi, 1);
+    }
+    .full-row { grid-column: 1 / -1; }
+    .mid-col { grid-row: 2 / 3; }
+    .center { grid-row: 2 / 3; grid-column: 2 / 3; }
+  `
+
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare block: number | undefined
+  declare inline: number | undefined
+  declare top: number | undefined
+  declare right: number | undefined
+  declare bottom: number | undefined
+  declare left: number | undefined
+
+  override render() {
+    const cfg = this._config.padder
+    const { isShown, isNone } = resolveDebugState(this.debugging, cfg.debugging)
+    const enableSpacers = !isNone
+
+    const padding = parsePadding({
+      block: this.block != null ? [this.top ?? this.block, this.bottom ?? this.block] : undefined,
+      inline: this.inline != null ? [this.left ?? this.inline, this.right ?? this.inline] : undefined,
+    })
+
+    const descriptor = createPadderDescriptor({
+      base: this._config.base,
+      color: cfg.color,
+      width: this.width as number | string | undefined,
+      height: this.height as number | string | undefined,
+      padding,
+      enableSpacers,
+      isVisible: isShown,
+    })
+
+    if (!enableSpacers) {
+      return html`
+        <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
+          <slot></slot>
+        </div>
+      `
+    }
+
+    return html`
+      <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
+        ${padding.top >= 0 ? html`<div class="full-row">
+          <bk-spacer width="100%" height=${padding.top} debugging=${this.debugging ?? 'none'}></bk-spacer>
+        </div>` : ''}
+        ${padding.left >= 0 ? html`<div class="mid-col">
+          <bk-spacer width=${padding.left} height="100%" debugging=${this.debugging ?? 'none'}></bk-spacer>
+        </div>` : ''}
+        <div class="center"><slot></slot></div>
+        ${padding.right >= 0 ? html`<div class="mid-col">
+          <bk-spacer width=${padding.right} height="100%" debugging=${this.debugging ?? 'none'}></bk-spacer>
+        </div>` : ''}
+        ${padding.bottom >= 0 ? html`<div class="full-row">
+          <bk-spacer width="100%" height=${padding.bottom} debugging=${this.debugging ?? 'none'}></bk-spacer>
+        </div>` : ''}
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-padder', BkPadder)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-padder': BkPadder
+  }
+}
diff --git a/packages/lit/src/components/bk-spacer.ts b/packages/lit/src/components/bk-spacer.ts
new file mode 100644
index 00000000..6fbaa29e
--- /dev/null
+++ b/packages/lit/src/components/bk-spacer.ts
@@ -0,0 +1,88 @@
+import { html, css } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import {
+  cx,
+  resolveDebugState,
+  createSpacerDescriptor,
+} from '@baseline-kit/core'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-spacer> — Visual spacing indicator.
+ */
+export class BkSpacer extends BkBase {
+  static override properties = {
+    variant: {},
+    debugging: {},
+    color: {},
+    width: {},
+    height: {},
+    base: { type: Number },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .spr {
+      position: relative;
+      box-sizing: border-box;
+      width: var(--bksp-w, 100%);
+      height: var(--bksp-h, auto);
+      flex-shrink: 0;
+      display: block;
+      margin: 0;
+      padding: 0;
+    }
+    .line::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--bksp-cl, hsla(270, 60%, 40%, 0.6));
+      z-index: var(--bk-zi, 1);
+    }
+    .flat {
+      background-color: var(--bksp-cf, hsla(230, 100%, 70%, 0.2));
+    }
+  `
+
+  declare variant: string | undefined
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare color: string | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare base: number | undefined
+
+  override render() {
+    const cfg = this._config.spacer
+    const variant = this.variant ?? cfg.variant
+    const base = this.base ?? this._config.base
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    const descriptor = createSpacerDescriptor({
+      base,
+      colors: cfg.colors,
+      width: this.width as number | string | undefined,
+      height: this.height as number | string | undefined,
+      color: this.color,
+      variant,
+      isVisible: isShown,
+    })
+
+    return html`
+      <div
+        class=${cx('spr', ...descriptor.classTokens.slice(1))}
+        data-variant=${variant}
+        style=${styleMap(descriptor.style)}
+      >
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-spacer', BkSpacer)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-spacer': BkSpacer
+  }
+}
diff --git a/packages/lit/src/components/bk-stack.ts b/packages/lit/src/components/bk-stack.ts
new file mode 100644
index 00000000..722ffb78
--- /dev/null
+++ b/packages/lit/src/components/bk-stack.ts
@@ -0,0 +1,88 @@
+import { html, css } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import {
+  cx,
+  resolveDebugState,
+  createStackDescriptor,
+} from '@baseline-kit/core'
+import { BkBase } from './bk-base.js'
+
+/**
+ * <bk-stack> — Flex container with directional stacking.
+ */
+export class BkStack extends BkBase {
+  static override properties = {
+    debugging: {},
+    direction: {},
+    justify: {},
+    align: {},
+    width: {},
+    height: {},
+    gap: { type: Number },
+    rowGap: { type: Number, attribute: 'row-gap' },
+    columnGap: { type: Number, attribute: 'column-gap' },
+  }
+
+  static override styles = css`
+    :host { display: block; }
+    .stk {
+      display: flex;
+      position: relative;
+      width: var(--bksk-w);
+      height: var(--bksk-h);
+    }
+    .v::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--bksk-cl, hsla(330, 60%, 40%, 0.6));
+      pointer-events: none;
+      z-index: var(--bk-zio, 2);
+    }
+    .flat {
+      background-color: var(--bksk-cf, hsla(0, 100%, 70%, 0.2));
+    }
+  `
+
+  declare debugging: 'visible' | 'hidden' | 'none' | undefined
+  declare direction: string | undefined
+  declare justify: string | undefined
+  declare align: string | undefined
+  declare width: string | number | undefined
+  declare height: string | number | undefined
+  declare gap: number | undefined
+  declare rowGap: number | undefined
+  declare columnGap: number | undefined
+
+  override render() {
+    const cfg = this._config.stack
+    const { isShown } = resolveDebugState(this.debugging, cfg.debugging)
+
+    const descriptor = createStackDescriptor({
+      colors: cfg.colors,
+      direction: this.direction ?? 'row',
+      justify: this.justify ?? 'flex-start',
+      align: this.align ?? 'flex-start',
+      width: this.width as number | string | undefined,
+      height: this.height as number | string | undefined,
+      gap: this.gap,
+      rowGap: this.rowGap,
+      columnGap: this.columnGap,
+      isVisible: isShown,
+    })
+
+    return html`
+      <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('bk-stack', BkStack)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bk-stack': BkStack
+  }
+}
diff --git a/packages/lit/src/controllers/config-context.ts b/packages/lit/src/controllers/config-context.ts
new file mode 100644
index 00000000..c7e400c8
--- /dev/null
+++ b/packages/lit/src/controllers/config-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from '@lit/context'
+import type { ConfigSchema } from '@baseline-kit/core'
+
+/**
+ * Lit context key for baseline-kit configuration.
+ * Consumed via ContextConsumer, provided by <bk-config> via ContextProvider.
+ */
+export const configContext = createContext<ConfigSchema>('bk-config')
diff --git a/packages/lit/src/index.ts b/packages/lit/src/index.ts
new file mode 100644
index 00000000..b2afb5e3
--- /dev/null
+++ b/packages/lit/src/index.ts
@@ -0,0 +1,20 @@
+/**
+ * @baseline-kit/lit
+ * Lit web components for baseline-kit.
+ * Uses @baseline-kit/core descriptors and @baseline-kit/dom observers.
+ */
+
+// Config provider
+export { BkConfig } from './components/bk-config.js'
+
+// Components
+export { BkBaseline } from './components/bk-baseline.js'
+export { BkGuide } from './components/bk-guide.js'
+export { BkBox } from './components/bk-box.js'
+export { BkStack } from './components/bk-stack.js'
+export { BkLayout } from './components/bk-layout.js'
+export { BkPadder } from './components/bk-padder.js'
+export { BkSpacer } from './components/bk-spacer.js'
+
+// Context (for custom components that need config)
+export { configContext } from './controllers/config-context.js'
diff --git a/packages/react/src/hooks/useMeasure.ts b/packages/react/src/hooks/useMeasure.ts
index cd189a2b..4d9dc249 100644
--- a/packages/react/src/hooks/useMeasure.ts
+++ b/packages/react/src/hooks/useMeasure.ts
@@ -1,53 +1,42 @@
 import * as React from 'react'
-import { rafThrottle } from '@baseline-kit/dom'
+import { createMeasureObserver } from '@baseline-kit/dom'
+import type { MeasureRect } from '@baseline-kit/dom'
 
-export interface MeasureResult {
-  width: number
-  height: number
+export interface MeasureResult extends MeasureRect {
   refresh: () => void
 }
 
+const ZERO: MeasureRect = { width: 0, height: 0 }
+
 /**
  * Hook for measuring and tracking DOM element dimensions.
+ * Thin wrapper around the imperative createMeasureObserver from @baseline-kit/dom.
  */
 export function useMeasure(
   ref: React.RefObject<HTMLElement | null>
 ): MeasureResult {
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
-
-  const measure = React.useCallback(() => {
-    if (!ref.current) return
-    try {
-      const rect = ref.current.getBoundingClientRect()
-      const next = {
-        width: rect ? Math.round(rect.width) : 0,
-        height: rect ? Math.round(rect.height) : 0,
-      }
-      setDimensions((prev) =>
-        prev.width === next.width && prev.height === next.height ? prev : next
-      )
-    } catch {
-      setDimensions({ width: 0, height: 0 })
-    }
-  }, [ref])
-
-  const refresh = React.useMemo(() => rafThrottle(measure), [measure])
-
-  React.useLayoutEffect(() => {
-    if (typeof window === 'undefined') return
-    measure()
-  }, [measure])
+  const [dimensions, setDimensions] = React.useState<MeasureRect>(ZERO)
+  const handleRef = React.useRef<ReturnType<typeof createMeasureObserver> | null>(null)
 
   React.useLayoutEffect(() => {
     if (typeof window === 'undefined' || !ref.current) return
-    const observer = new ResizeObserver(() => {
-      refresh()
+
+    const handle = createMeasureObserver(ref.current, (rect) => {
+      setDimensions((prev) =>
+        prev.width === rect.width && prev.height === rect.height ? prev : rect
+      )
     })
-    observer.observe(ref.current)
+    handleRef.current = handle
+
     return () => {
-      observer.disconnect()
+      handle.disconnect()
+      handleRef.current = null
     }
-  }, [ref, refresh])
+  }, [ref])
+
+  const refresh = React.useCallback(() => {
+    handleRef.current?.refresh()
+  }, [])
 
   return { ...dimensions, refresh }
 }
diff --git a/packages/react/src/hooks/useVirtual.ts b/packages/react/src/hooks/useVirtual.ts
index 51e3be94..7bd688a6 100644
--- a/packages/react/src/hooks/useVirtual.ts
+++ b/packages/react/src/hooks/useVirtual.ts
@@ -1,13 +1,8 @@
-import {
-  RefObject,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react'
-import { rafThrottle } from '@baseline-kit/dom'
+import { RefObject, useCallback, useLayoutEffect, useState } from 'react'
+import { createVirtualTracker } from '@baseline-kit/dom'
+import type { VirtualRange } from '@baseline-kit/dom'
 
-type VirtualResult = {
+type VirtualOptions = {
   totalLines: number
   lineHeight: number
   containerRef: RefObject<HTMLDivElement | null>
@@ -16,75 +11,42 @@ type VirtualResult = {
 
 /**
  * Hook for optimizing large lists through virtual scrolling.
+ * Thin wrapper around the imperative createVirtualTracker from @baseline-kit/dom.
  */
 export function useVirtual({
   totalLines,
   lineHeight,
   containerRef,
   buffer = 0,
-}: VirtualResult) {
-  const numericBuffer = useMemo(
-    () => (typeof buffer === 'number' ? buffer : parseInt(buffer, 10) || 0),
-    [buffer]
+}: VirtualOptions) {
+  const numericBuffer =
+    typeof buffer === 'number' ? buffer : parseInt(buffer, 10) || 0
+
+  const [visibleRange, setVisibleRange] = useState<VirtualRange>({
+    start: 0,
+    end: totalLines,
+  })
+
+  const updateRange = useCallback(
+    (range: VirtualRange) => {
+      setVisibleRange((prev) =>
+        prev.start === range.start && prev.end === range.end ? prev : range
+      )
+    },
+    []
   )
 
-  const calculateRange = useCallback(() => {
-    const element = containerRef.current
-    if (!element) return { start: 0, end: totalLines }
-
-    const rect = element.getBoundingClientRect()
-    const offsetTop = rect.top + window.scrollY
-    const viewportTop = Math.max(0, window.scrollY - offsetTop - numericBuffer)
-    const viewportBottom = viewportTop + window.innerHeight + numericBuffer * 2
-
-    const start = Math.max(0, Math.floor(viewportTop / lineHeight))
-    const end = Math.min(totalLines, Math.ceil(viewportBottom / lineHeight))
-
-    return { start, end }
-  }, [totalLines, lineHeight, containerRef, numericBuffer])
-
-  const [visibleRange, setVisibleRange] = useState(calculateRange)
-
-  const updateRange = useCallback(() => {
-    setVisibleRange((prev) => {
-      const next = calculateRange()
-      return prev.start !== next.start || prev.end !== next.end ? next : prev
-    })
-  }, [calculateRange])
-
-  const updateRangeThrottled = useMemo(
-    () => rafThrottle(updateRange),
-    [updateRange]
-  )
-
-  useWindowEvents(['scroll', 'resize'], updateRangeThrottled)
-
   useLayoutEffect(() => {
-    const element = containerRef.current
-    if (!element) return
+    if (!containerRef.current) return
 
-    const observer = new IntersectionObserver(updateRangeThrottled, {
-      threshold: 0,
-    })
-    observer.observe(element)
-    updateRangeThrottled()
+    const handle = createVirtualTracker(
+      containerRef.current,
+      { totalItems: totalLines, itemHeight: lineHeight, buffer: numericBuffer },
+      updateRange
+    )
 
-    return () => {
-      observer.disconnect()
-    }
-  }, [containerRef, calculateRange, updateRangeThrottled])
+    return () => handle.disconnect()
+  }, [containerRef, totalLines, lineHeight, numericBuffer, updateRange])
 
   return visibleRange
 }
-
-/** Helper hook to manage multiple window event listeners. */
-function useWindowEvents(events: string[], handler: () => void) {
-  const stableHandler = useCallback(handler, [handler])
-
-  useLayoutEffect(() => {
-    const wrappedHandler = () => stableHandler()
-    events.forEach((evt) => window.addEventListener(evt, wrappedHandler))
-    return () =>
-      events.forEach((evt) => window.removeEventListener(evt, wrappedHandler))
-  }, [events, stableHandler])
-}
diff --git a/tsconfig.json b/tsconfig.json
index ac3c3ecc..ce06bcea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,8 @@
       "@baseline-kit/core/*": ["packages/core/src/*"],
       "@baseline-kit/dom": ["packages/dom/src/index.ts"],
       "@baseline-kit/dom/*": ["packages/dom/src/*"],
+      "@baseline-kit/lit": ["packages/lit/src/index.ts"],
+      "@baseline-kit/lit/*": ["packages/lit/src/*"],
       "@baseline-kit/react": ["packages/react/src/index.ts"],
       "@baseline-kit/react/*": ["packages/react/src/*"],
       "@/*": ["packages/react/src/*"],

From d243d5a53f80ccf44c077e3662c9ece8415fc3fa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 11:26:54 +0000
Subject: [PATCH 16/18] fix: resolve lint errors and remove misplaced root
 dependencies

- Refactor createGuideConfig to take options object (eslint max-params)
- Remove unused imports: nothing, ConfigSchema, BaselineVariant, GuideVariant, Variant, i
- Remove lit/@lit/context from root package.json (belongs in packages/lit only)

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 package.json                                  |   6 +-
 packages/core/src/descriptors/guide.ts        | 128 ++++++++++++++----
 packages/lit/src/components/bk-config.ts      |   1 -
 packages/lit/src/components/bk-guide.ts       |  52 ++++---
 .../react/src/components/Config/Config.tsx    |   8 +-
 packages/react/src/components/Guide/Guide.tsx |  73 +++++++---
 6 files changed, 201 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index c9504426..f2b22d1a 100644
--- a/package.json
+++ b/package.json
@@ -154,9 +154,5 @@
     "access": "public"
   },
   "author": "Francois Denavaut",
-  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
-  "dependencies": {
-    "@lit/context": "^1.1.6",
-    "lit": "^3.3.2"
-  }
+  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript."
 }
diff --git a/packages/core/src/descriptors/guide.ts b/packages/core/src/descriptors/guide.ts
index 69f979de..8998cc40 100644
--- a/packages/core/src/descriptors/guide.ts
+++ b/packages/core/src/descriptors/guide.ts
@@ -31,36 +31,59 @@ export interface GuideDescriptor {
   classTokens: string[]
 }
 
+export interface GuideConfigParams {
+  variant: GuideVariant
+  base: number
+  gap: number
+  columns?: number | readonly (string | number | undefined | 'auto')[]
+  columnWidth?: number | string
+}
+
 /**
  * Creates a GuideConfig from component props.
  * Pure function — no React or DOM dependency.
  */
-export function createGuideConfig(
-  variant: GuideVariant,
-  base: number,
-  gap: number,
-  columns?: number | readonly (string | number | undefined | 'auto')[],
-  columnWidth?: number | string,
-): GuideConfig {
+export function createGuideConfig({
+  variant,
+  base,
+  gap,
+  columns,
+  columnWidth,
+}: GuideConfigParams): GuideConfig {
   switch (variant) {
     case 'line':
       return { variant: 'line', gap, base }
     case 'pattern':
       if (columns && Array.isArray(columns)) {
-        return { variant: 'pattern', columns: columns as readonly (string | number)[], gap, base }
+        return {
+          variant: 'pattern',
+          columns: columns as readonly (string | number)[],
+          gap,
+          base,
+        }
       }
       break
     case 'fixed':
       if (columns !== undefined) {
-        const parsed = typeof columns === 'number' ? columns : parseInt(String(columns), 10)
-        return { variant: 'fixed', columns: !isNaN(parsed) ? parsed : 12, columnWidth: columnWidth || '60px', gap, base }
+        const parsed =
+          typeof columns === 'number' ? columns : parseInt(String(columns), 10)
+        return {
+          variant: 'fixed',
+          columns: !isNaN(parsed) ? parsed : 12,
+          columnWidth: columnWidth || '60px',
+          gap,
+          base,
+        }
       }
       break
   }
   return { variant: 'auto', columnWidth: columnWidth || '1fr', gap, base }
 }
 
-const GUIDE_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
+const GUIDE_DEFAULTS = (
+  base: number,
+  lineColor: string
+): Record<string, string> => ({
   '--bkgd-w': 'auto',
   '--bkgd-h': 'auto',
   '--bkgd-mw': 'none',
@@ -76,11 +99,25 @@ const GUIDE_DEFAULTS = (base: number, lineColor: string): Record<string, string>
  * Computes all styles and data needed to render a Guide component.
  * Pure function — framework-agnostic.
  */
-export function createGuideDescriptor(params: GuideDescriptorParams): GuideDescriptor {
+export function createGuideDescriptor(
+  params: GuideDescriptorParams
+): GuideDescriptor {
   const {
-    base, colors, variant, align, width, height, columnWidth,
-    maxWidth, color, containerWidth, containerHeight,
-    template, columnsCount, calculatedGap, isVisible,
+    base,
+    colors,
+    variant,
+    align,
+    width,
+    height,
+    columnWidth,
+    maxWidth,
+    color,
+    containerWidth,
+    containerHeight,
+    template,
+    columnsCount,
+    calculatedGap,
+    isVisible,
   } = params
 
   const defaultStyles = GUIDE_DEFAULTS(base, colors.line)
@@ -90,21 +127,58 @@ export function createGuideDescriptor(params: GuideDescriptorParams): GuideDescr
   const heightValue = formatValue(height || containerHeight || 'auto')
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkgd-w', value: widthValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkgd-h', value: heightValue, defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkgd-mw', value: formatValue(maxWidth || 'none'), defaultStyles }),
-    ...createStyleOverride({ key: '--bkgd-cw', value: formatValue(columnWidth || '60px'), defaultStyles }),
-    ...createStyleOverride({ key: '--bkgd-n', value: `${columnsCount}`, defaultStyles }),
+    ...createStyleOverride({
+      key: '--bkgd-w',
+      value: widthValue,
+      defaultStyles,
+      skipDimensions: { auto: autoDimensions },
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-h',
+      value: heightValue,
+      defaultStyles,
+      skipDimensions: { auto: autoDimensions },
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-mw',
+      value: formatValue(maxWidth || 'none'),
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-cw',
+      value: formatValue(columnWidth || '60px'),
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-n',
+      value: `${columnsCount}`,
+      defaultStyles,
+    }),
     ...createStyleOverride({ key: '--bkgd-b', value: '0', defaultStyles }),
-    ...createStyleOverride({ key: '--bkgd-cl', value: color ?? colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkgd-g', value: `${calculatedGap}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkgd-j', value: align || 'center', defaultStyles }),
-    ...(template && template !== 'none' ? { '--bkgd-t': template, gridTemplateColumns: template } : {}),
+    ...createStyleOverride({
+      key: '--bkgd-cl',
+      value: color ?? colors.line,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-g',
+      value: `${calculatedGap}px`,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkgd-j',
+      value: align || 'center',
+      defaultStyles,
+    }),
+    ...(template && template !== 'none'
+      ? { '--bkgd-t': template, gridTemplateColumns: template }
+      : {}),
   }
 
-  const columnColor = (variant && variant in colors
-    ? colors[variant as keyof typeof colors]
-    : undefined) ?? colors.line
+  const columnColor =
+    (variant && variant in colors
+      ? colors[variant as keyof typeof colors]
+      : undefined) ?? colors.line
 
   const isLineVariant = variant === 'line'
   const classTokens = ['gde', isVisible ? 'v' : 'h']
diff --git a/packages/lit/src/components/bk-config.ts b/packages/lit/src/components/bk-config.ts
index b8241ff4..d85f1552 100644
--- a/packages/lit/src/components/bk-config.ts
+++ b/packages/lit/src/components/bk-config.ts
@@ -1,6 +1,5 @@
 import { LitElement, html } from 'lit'
 import { ContextProvider } from '@lit/context'
-import type { ConfigSchema } from '@baseline-kit/core'
 import { DEFAULT_CONFIG, mergeConfig } from '@baseline-kit/core'
 import { configContext } from '../controllers/config-context.js'
 
diff --git a/packages/lit/src/components/bk-guide.ts b/packages/lit/src/components/bk-guide.ts
index e86a4235..f7d83a43 100644
--- a/packages/lit/src/components/bk-guide.ts
+++ b/packages/lit/src/components/bk-guide.ts
@@ -1,4 +1,4 @@
-import { html, css, nothing } from 'lit'
+import { html, css } from 'lit'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import type { GuideVariant } from '@baseline-kit/core'
@@ -33,14 +33,18 @@ export class BkGuide extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .gde {
       position: absolute;
       inset: 0;
       pointer-events: none;
       padding: var(--bkgd-pb) var(--bkgd-pi);
     }
-    .line { left: -0.5px; }
+    .line {
+      left: -0.5px;
+    }
     .cols {
       position: absolute;
       inset: 0;
@@ -58,10 +62,20 @@ export class BkGuide extends BkBase {
       width: 100%;
       height: 100%;
     }
-    .col[data-variant='line'] { width: 1px; background-color: var(--bkgd-cl); }
-    .col[data-variant='pattern'] { background-color: var(--bkgd-cp); }
-    .col[data-variant='auto'] { background-color: var(--bkgd-ca); overflow: hidden; }
-    .col[data-variant='fixed'] { background-color: var(--bkgd-cf); }
+    .col[data-variant='line'] {
+      width: 1px;
+      background-color: var(--bkgd-cl);
+    }
+    .col[data-variant='pattern'] {
+      background-color: var(--bkgd-cp);
+    }
+    .col[data-variant='auto'] {
+      background-color: var(--bkgd-ca);
+      overflow: hidden;
+    }
+    .col[data-variant='fixed'] {
+      background-color: var(--bkgd-cf);
+    }
   `
 
   declare variant: GuideVariant | undefined
@@ -107,13 +121,13 @@ export class BkGuide extends BkBase {
       return html`<div class="gde" aria-hidden="true"><slot></slot></div>`
     }
 
-    const gridConfig = createGuideConfig(
-      resolvedVariant,
-      this._config.base,
-      resolvedGap,
-      this.columns,
-      this.columnWidth as number | string | undefined
-    )
+    const gridConfig = createGuideConfig({
+      variant: resolvedVariant,
+      base: this._config.base,
+      gap: resolvedGap,
+      columns: this.columns,
+      columnWidth: this.columnWidth as number | string | undefined,
+    })
 
     const { template, columnsCount, calculatedGap } = calculateGuideTemplate(
       this._containerWidth,
@@ -138,8 +152,14 @@ export class BkGuide extends BkBase {
       isVisible: isShown,
     })
 
-    const columnEls = Array.from({ length: descriptor.columnsCount }, (_, i) =>
-      html`<div class="col" data-variant=${resolvedVariant} style="background-color: ${descriptor.columnColor}"></div>`
+    const columnEls = Array.from(
+      { length: descriptor.columnsCount },
+      () =>
+        html`<div
+          class="col"
+          data-variant=${resolvedVariant}
+          style="background-color: ${descriptor.columnColor}"
+        ></div>`
     )
 
     return html`
diff --git a/packages/react/src/components/Config/Config.tsx b/packages/react/src/components/Config/Config.tsx
index fd6b47c5..66c6a76d 100644
--- a/packages/react/src/components/Config/Config.tsx
+++ b/packages/react/src/components/Config/Config.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
-import type { BaselineVariant, GuideVariant, Variant, ConfigSchema } from '@baseline-kit/core'
-import { DEFAULT_CONFIG, mergeConfig, createCSSVariables } from '@baseline-kit/core'
+import type { ConfigSchema } from '@baseline-kit/core'
+import {
+  DEFAULT_CONFIG,
+  mergeConfig,
+  createCSSVariables,
+} from '@baseline-kit/core'
 
 // Re-export types that consumers need
 export type { DebuggingMode, ConfigSchema } from '@baseline-kit/core'
diff --git a/packages/react/src/components/Guide/Guide.tsx b/packages/react/src/components/Guide/Guide.tsx
index ebff7733..5fd9106f 100644
--- a/packages/react/src/components/Guide/Guide.tsx
+++ b/packages/react/src/components/Guide/Guide.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useMeasure, useGuide } from '../../hooks'
-import { cx,  createGuideDescriptor, createGuideConfig } from '@baseline-kit/core'
+import {
+  cx,
+  createGuideDescriptor,
+  createGuideConfig,
+} from '@baseline-kit/core'
 import type { GuideVariant, GuideConfig } from '@baseline-kit/core'
 import { ClientOnly } from '../../utils/ssr'
 import { mergeStyles } from '../../utils/merge'
@@ -62,7 +66,12 @@ export const Guide = React.memo(function Guide({
   const ssrFallback = (
     <div
       className={cx(styles.g, styles.h, styles.ssr, className)}
-      style={{ width: width || '100%', height: height || '100%', maxWidth: maxWidth || 'none', ...style }}
+      style={{
+        width: width || '100%',
+        height: height || '100%',
+        maxWidth: maxWidth || 'none',
+        ...style,
+      }}
       data-testid="guide"
       data-variant={variant}
       aria-hidden="true"
@@ -120,24 +129,56 @@ const GuideImpl = React.memo(function GuideImpl({
   const resolvedGap = typeof gap === 'number' ? gap : 0
 
   const gridConfig = React.useMemo(
-    () => createGuideConfig(resolvedVariant, config.base, resolvedGap, columns, columnWidth as number | string | undefined),
+    () =>
+      createGuideConfig({
+        variant: resolvedVariant,
+        base: config.base,
+        gap: resolvedGap,
+        columns,
+        columnWidth: columnWidth as number | string | undefined,
+      }),
     [resolvedVariant, config.base, resolvedGap, columns, columnWidth]
   )
 
-  const { template, columnsCount, calculatedGap } = useGuide(containerRef, gridConfig)
+  const { template, columnsCount, calculatedGap } = useGuide(
+    containerRef,
+    gridConfig
+  )
 
   const descriptor = React.useMemo(
-    () => createGuideDescriptor({
-      base: config.base,
-      colors: config.colors,
-      variant: resolvedVariant,
-      align: align || 'center',
-      width, height, columnWidth, maxWidth, color,
-      containerWidth: 0, containerHeight,
-      template, columnsCount, calculatedGap,
-      isVisible: isShown,
-    }),
-    [config, resolvedVariant, align, width, height, columnWidth, maxWidth, color, containerHeight, template, columnsCount, calculatedGap, isShown]
+    () =>
+      createGuideDescriptor({
+        base: config.base,
+        colors: config.colors,
+        variant: resolvedVariant,
+        align: align || 'center',
+        width,
+        height,
+        columnWidth,
+        maxWidth,
+        color,
+        containerWidth: 0,
+        containerHeight,
+        template,
+        columnsCount,
+        calculatedGap,
+        isVisible: isShown,
+      }),
+    [
+      config,
+      resolvedVariant,
+      align,
+      width,
+      height,
+      columnWidth,
+      maxWidth,
+      color,
+      containerHeight,
+      template,
+      columnsCount,
+      calculatedGap,
+      isShown,
+    ]
   )
 
   const containerStyles = React.useMemo(
@@ -150,7 +191,7 @@ const GuideImpl = React.memo(function GuideImpl({
       ref={containerRef}
       data-testid="guide"
       aria-hidden="true"
-      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+      className={cx(...descriptor.classTokens.map((t) => styles[t]), className)}
       data-variant={variant}
       style={containerStyles}
       {...props}

From c3e1876e6e7bbeab0aaf3f7f361c6869f351b4c7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 11:27:29 +0000
Subject: [PATCH 17/18] style: apply eslint auto-formatting across packages

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 packages/core/src/config/merge.ts             |  14 ++-
 packages/core/src/config/schema.ts            |  19 ++-
 packages/core/src/descriptors/baseline.ts     |  81 +++++++++++--
 packages/core/src/descriptors/box.ts          |  44 +++++--
 packages/core/src/descriptors/layout.ts       |  65 ++++++++--
 packages/core/src/descriptors/padder.ts       |   7 +-
 packages/core/src/descriptors/spacer.ts       |  55 +++++++--
 packages/core/src/descriptors/stack.ts        |  63 ++++++++--
 packages/core/src/utils/convert.ts            |  15 ++-
 packages/core/src/utils/grid.ts               |  16 +--
 packages/core/src/utils/merge.ts              |   1 -
 packages/core/src/utils/normalize.ts          |  12 +-
 packages/core/src/utils/parse.ts              |  12 +-
 packages/lit/src/components/bk-baseline.ts    |  34 ++++--
 packages/lit/src/components/bk-box.ts         |  15 +--
 packages/lit/src/components/bk-layout.ts      |  14 ++-
 packages/lit/src/components/bk-padder.ts      |  85 ++++++++++----
 packages/lit/src/components/bk-spacer.ts      |   4 +-
 packages/lit/src/components/bk-stack.ts       |   9 +-
 .../src/components/Baseline/Baseline.tsx      |  48 +++++---
 packages/react/src/components/Box/Box.tsx     |  64 ++++++++--
 .../react/src/components/Layout/Layout.tsx    |  82 +++++++++----
 .../react/src/components/Padder/Padder.tsx    | 111 ++++++++++++++----
 .../react/src/components/Spacer/Spacer.tsx    |  51 +++++---
 packages/react/src/components/Stack/Stack.tsx |  73 +++++++++---
 packages/react/src/components/types.ts        |   5 +-
 packages/react/src/hooks/useBaseline.ts       |   6 +-
 packages/react/src/hooks/useGuide.ts          |   5 +-
 packages/react/src/hooks/useMeasure.ts        |   4 +-
 packages/react/src/hooks/useVirtual.ts        |  13 +-
 30 files changed, 784 insertions(+), 243 deletions(-)

diff --git a/packages/core/src/config/merge.ts b/packages/core/src/config/merge.ts
index 1480f1f6..4cf1e597 100644
--- a/packages/core/src/config/merge.ts
+++ b/packages/core/src/config/merge.ts
@@ -12,7 +12,15 @@ type MergeConfigParams = {
   padder?: Partial<ConfigSchema['padder']>
 }
 
-const COMPONENT_KEYS = ['baseline', 'guide', 'spacer', 'box', 'stack', 'layout', 'padder'] as const
+const COMPONENT_KEYS = [
+  'baseline',
+  'guide',
+  'spacer',
+  'box',
+  'stack',
+  'layout',
+  'padder',
+] as const
 
 export const mergeConfig = (params: MergeConfigParams): ConfigSchema => {
   const { parentConfig, base } = params
@@ -36,7 +44,9 @@ type CSSVariablesParams = {
   padder: ConfigSchema['padder']
 }
 
-export const createCSSVariables = (params: CSSVariablesParams): Record<string, string> => {
+export const createCSSVariables = (
+  params: CSSVariablesParams
+): Record<string, string> => {
   const { base, baseline, guide, stack, spacer, layout, box, padder } = params
   return {
     '--bk-base': `${base}px`,
diff --git a/packages/core/src/config/schema.ts b/packages/core/src/config/schema.ts
index 9bffe5e1..529e396b 100644
--- a/packages/core/src/config/schema.ts
+++ b/packages/core/src/config/schema.ts
@@ -1,11 +1,24 @@
-import type { GuideVariant, BaselineVariant, Variant, DebuggingMode } from '../types'
+import type {
+  GuideVariant,
+  BaselineVariant,
+  Variant,
+  DebuggingMode,
+} from '../types'
 
 type DebugColors = { line: string; flat: string; text: string }
 
 export type ConfigSchema = {
   base: number
-  baseline: { variant: BaselineVariant; debugging: DebuggingMode; colors: Record<BaselineVariant, string> }
-  guide: { variant: GuideVariant; debugging: DebuggingMode; colors: Record<GuideVariant, string> }
+  baseline: {
+    variant: BaselineVariant
+    debugging: DebuggingMode
+    colors: Record<BaselineVariant, string>
+  }
+  guide: {
+    variant: GuideVariant
+    debugging: DebuggingMode
+    colors: Record<GuideVariant, string>
+  }
   spacer: { variant: Variant; debugging: DebuggingMode; colors: DebugColors }
   box: { debugging: DebuggingMode; colors: DebugColors }
   stack: { debugging: DebuggingMode; colors: DebugColors }
diff --git a/packages/core/src/descriptors/baseline.ts b/packages/core/src/descriptors/baseline.ts
index 235d7071..bf41de7d 100644
--- a/packages/core/src/descriptors/baseline.ts
+++ b/packages/core/src/descriptors/baseline.ts
@@ -1,5 +1,11 @@
 import type { BaselineVariant } from '../types'
-import { formatValue, createStyleOverride, normalizeValuePair, parsePadding, calculateRowCount } from '../utils'
+import {
+  formatValue,
+  createStyleOverride,
+  normalizeValuePair,
+  parsePadding,
+  calculateRowCount,
+} from '../utils'
 
 export interface BaselineDescriptorParams {
   base: number
@@ -23,7 +29,11 @@ export interface BaselineDescriptor {
   classTokens: string[]
 }
 
-const BASELINE_DEFAULTS = (base: number, lineColor: string, flatColor: string): Record<string, string> => ({
+const BASELINE_DEFAULTS = (
+  base: number,
+  lineColor: string,
+  flatColor: string
+): Record<string, string> => ({
   '--bkbl-w': '100%',
   '--bkbl-h': '100%',
   '--bkbl-b': `${base}px`,
@@ -35,13 +45,31 @@ const BASELINE_DEFAULTS = (base: number, lineColor: string, flatColor: string):
  * Computes all styles and data needed to render a Baseline component.
  * Pure function — framework-agnostic.
  */
-export function createBaselineDescriptor(params: BaselineDescriptorParams): BaselineDescriptor {
-  const { base, colors, variant, width, height, color, containerWidth, containerHeight, spacing, isVisible } = params
+export function createBaselineDescriptor(
+  params: BaselineDescriptorParams
+): BaselineDescriptor {
+  const {
+    base,
+    colors,
+    variant,
+    width,
+    height,
+    color,
+    containerWidth,
+    containerHeight,
+    spacing,
+    isVisible,
+  } = params
 
-  const [, normHeight] = normalizeValuePair([width, height], [containerWidth, containerHeight])
+  const [, normHeight] = normalizeValuePair(
+    [width, height],
+    [containerWidth, containerHeight]
+  )
   const { top, right, bottom, left } = parsePadding(spacing)
 
-  const paddingValues = [top, right, bottom, left].map((v) => (v ? `${v}px` : '0')).join(' ')
+  const paddingValues = [top, right, bottom, left]
+    .map((v) => (v ? `${v}px` : '0'))
+    .join(' ')
   const padding = paddingValues !== '0 0 0 0' ? paddingValues : undefined
 
   const rowCount = calculateRowCount({ height: normHeight, top, bottom, base })
@@ -52,11 +80,33 @@ export function createBaselineDescriptor(params: BaselineDescriptorParams): Base
   const dimensionVars = ['--bkbl-w', '--bkbl-h']
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkbl-w', value: formatValue(width || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbl-h', value: formatValue(height || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbl-b', value: `${base}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkbl-cl', value: color || colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkbl-cf', value: color || colors.flat, defaultStyles }),
+    ...createStyleOverride({
+      key: '--bkbl-w',
+      value: formatValue(width || '100%'),
+      defaultStyles,
+      skipDimensions: { fullSize: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkbl-h',
+      value: formatValue(height || '100%'),
+      defaultStyles,
+      skipDimensions: { fullSize: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkbl-b',
+      value: `${base}px`,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkbl-cl',
+      value: color || colors.line,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkbl-cf',
+      value: color || colors.flat,
+      defaultStyles,
+    }),
     ...(padding ? { padding } : {}),
   }
 
@@ -68,5 +118,12 @@ export function createBaselineDescriptor(params: BaselineDescriptorParams): Base
 
   const classTokens = ['bas', isVisible ? 'v' : 'h']
 
-  return { containerStyle, rowCount, getRowStyle, padding, isVisible, classTokens }
+  return {
+    containerStyle,
+    rowCount,
+    getRowStyle,
+    padding,
+    isVisible,
+    classTokens,
+  }
 }
diff --git a/packages/core/src/descriptors/box.ts b/packages/core/src/descriptors/box.ts
index d0af7e97..52be019b 100644
--- a/packages/core/src/descriptors/box.ts
+++ b/packages/core/src/descriptors/box.ts
@@ -1,4 +1,8 @@
-import { formatValue, createStyleOverride, createGridSpanStyles } from '../utils'
+import {
+  formatValue,
+  createStyleOverride,
+  createGridSpanStyles,
+} from '../utils'
 
 export interface BoxDescriptorParams {
   base: number
@@ -17,7 +21,10 @@ export interface BoxDescriptor {
   classTokens: string[]
 }
 
-const BOX_DEFAULTS = (base: number, lineColor: string): Record<string, string> => ({
+const BOX_DEFAULTS = (
+  base: number,
+  lineColor: string
+): Record<string, string> => ({
   '--bkbx-w': 'auto',
   '--bkbx-h': 'auto',
   '--bkbx-cl': lineColor,
@@ -28,17 +35,38 @@ const BOX_DEFAULTS = (base: number, lineColor: string): Record<string, string> =
  * Computes styles needed to render a Box component.
  * Pure function — framework-agnostic.
  */
-export function createBoxDescriptor(params: BoxDescriptorParams): BoxDescriptor {
-  const { base, lineColor, width, height, span, colSpan, rowSpan, isVisible } = params
+export function createBoxDescriptor(
+  params: BoxDescriptorParams
+): BoxDescriptor {
+  const { base, lineColor, width, height, span, colSpan, rowSpan, isVisible } =
+    params
 
   const defaultStyles = BOX_DEFAULTS(base, lineColor)
   const dimensionVars = ['--bkbx-w', '--bkbx-h']
 
   const boxStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkbx-w', value: formatValue(width || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbx-h', value: formatValue(height || 'fit-content'), defaultStyles, skipDimensions: { fitContent: dimensionVars } }),
-    ...createStyleOverride({ key: '--bkbx-b', value: `${base}px`, defaultStyles }),
-    ...createStyleOverride({ key: '--bkbx-cl', value: lineColor, defaultStyles }),
+    ...createStyleOverride({
+      key: '--bkbx-w',
+      value: formatValue(width || 'fit-content'),
+      defaultStyles,
+      skipDimensions: { fitContent: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkbx-h',
+      value: formatValue(height || 'fit-content'),
+      defaultStyles,
+      skipDimensions: { fitContent: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bkbx-b',
+      value: `${base}px`,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkbx-cl',
+      value: lineColor,
+      defaultStyles,
+    }),
   }
 
   const gridSpanStyle = createGridSpanStyles(span, colSpan, rowSpan)
diff --git a/packages/core/src/descriptors/layout.ts b/packages/core/src/descriptors/layout.ts
index bbb91a16..99016fda 100644
--- a/packages/core/src/descriptors/layout.ts
+++ b/packages/core/src/descriptors/layout.ts
@@ -20,7 +20,11 @@ export interface LayoutDescriptor {
   classTokens: string[]
 }
 
-const LAYOUT_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
+const LAYOUT_DEFAULTS = (colors: {
+  line: string
+  flat: string
+  text: string
+}) => ({
   '--bkly-w': 'auto',
   '--bkly-h': 'auto',
   '--bkly-cl': colors.line,
@@ -32,7 +36,9 @@ const LAYOUT_DEFAULTS = (colors: { line: string; flat: string; text: string }) =
  * Parses grid template definitions into CSS grid-template values.
  * Pure function — framework-agnostic.
  */
-export function getGridTemplate(prop?: number | string | Array<number | string>): string {
+export function getGridTemplate(
+  prop?: number | string | Array<number | string>
+): string {
   if (typeof prop === 'number') return `repeat(${prop}, 1fr)`
   if (typeof prop === 'string') return prop
   if (Array.isArray(prop)) {
@@ -47,8 +53,23 @@ const DEFAULT_GRID_TEMPLATE = 'repeat(auto-fill, minmax(100px, 1fr))'
  * Computes styles needed to render a Layout component.
  * Pure function — framework-agnostic.
  */
-export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDescriptor {
-  const { colors, columns, rows, width, height, gap, rowGap, columnGap, justifyItems, alignItems, justifyContent, alignContent } = params
+export function createLayoutDescriptor(
+  params: LayoutDescriptorParams
+): LayoutDescriptor {
+  const {
+    colors,
+    columns,
+    rows,
+    width,
+    height,
+    gap,
+    rowGap,
+    columnGap,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+  } = params
 
   const defaultStyles = LAYOUT_DEFAULTS(colors)
   const autoDimensions = ['--bkly-w', '--bkly-h']
@@ -62,12 +83,36 @@ export function createLayoutDescriptor(params: LayoutDescriptorParams): LayoutDe
   if (columnGap !== undefined) gapStyles.columnGap = formatValue(columnGap)
 
   const containerStyle: Record<string, string> = {
-    ...createStyleOverride({ key: '--bkly-w', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkly-h', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: autoDimensions } }),
-    ...createStyleOverride({ key: '--bkly-cl', value: colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bkly-cf', value: colors.flat, defaultStyles }),
-    ...createStyleOverride({ key: '--bkly-ct', value: colors.text, defaultStyles }),
-    ...(gridTemplateColumns !== DEFAULT_GRID_TEMPLATE ? { '--bkly-gtc': gridTemplateColumns } : {}),
+    ...createStyleOverride({
+      key: '--bkly-w',
+      value: formatValue(width || 'auto'),
+      defaultStyles,
+      skipDimensions: { auto: autoDimensions },
+    }),
+    ...createStyleOverride({
+      key: '--bkly-h',
+      value: formatValue(height || 'auto'),
+      defaultStyles,
+      skipDimensions: { auto: autoDimensions },
+    }),
+    ...createStyleOverride({
+      key: '--bkly-cl',
+      value: colors.line,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkly-cf',
+      value: colors.flat,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bkly-ct',
+      value: colors.text,
+      defaultStyles,
+    }),
+    ...(gridTemplateColumns !== DEFAULT_GRID_TEMPLATE
+      ? { '--bkly-gtc': gridTemplateColumns }
+      : {}),
     ...(gridTemplateRows !== 'auto' ? { '--bkly-gtr': gridTemplateRows } : {}),
     ...(justifyItems ? { '--bkly-ji': justifyItems } : {}),
     ...(alignItems ? { '--bkly-ai': alignItems } : {}),
diff --git a/packages/core/src/descriptors/padder.ts b/packages/core/src/descriptors/padder.ts
index af1f577f..1ca3353e 100644
--- a/packages/core/src/descriptors/padder.ts
+++ b/packages/core/src/descriptors/padder.ts
@@ -20,8 +20,11 @@ export interface PadderDescriptor {
  * Computes styles needed to render a Padder component.
  * Pure function — framework-agnostic.
  */
-export function createPadderDescriptor(params: PadderDescriptorParams): PadderDescriptor {
-  const { base, color, width, height, padding, enableSpacers, isVisible } = params
+export function createPadderDescriptor(
+  params: PadderDescriptorParams
+): PadderDescriptor {
+  const { base, color, width, height, padding, enableSpacers, isVisible } =
+    params
 
   const containerStyle: Record<string, string> = {}
 
diff --git a/packages/core/src/descriptors/spacer.ts b/packages/core/src/descriptors/spacer.ts
index 1def07a8..0c83b2e5 100644
--- a/packages/core/src/descriptors/spacer.ts
+++ b/packages/core/src/descriptors/spacer.ts
@@ -17,7 +17,12 @@ export interface SpacerDescriptor {
   classTokens: string[]
 }
 
-const SPACER_DEFAULTS = (base: number, textColor: string, flatColor: string, lineColor: string): Record<string, string> => ({
+const SPACER_DEFAULTS = (
+  base: number,
+  textColor: string,
+  flatColor: string,
+  lineColor: string
+): Record<string, string> => ({
   '--bksp-w': '100%',
   '--bksp-h': '100%',
   '--bksp-b': `${base}px`,
@@ -30,21 +35,53 @@ const SPACER_DEFAULTS = (base: number, textColor: string, flatColor: string, lin
  * Computes styles needed to render a Spacer component.
  * Pure function — framework-agnostic.
  */
-export function createSpacerDescriptor(params: SpacerDescriptorParams): SpacerDescriptor {
+export function createSpacerDescriptor(
+  params: SpacerDescriptorParams
+): SpacerDescriptor {
   const { base, colors, width, height, color, variant, isVisible } = params
 
-  const [normWidth, normHeight] = normalizeValuePair([width, height], [0, 0], { base, suppressWarnings: true })
+  const [normWidth, normHeight] = normalizeValuePair([width, height], [0, 0], {
+    base,
+    suppressWarnings: true,
+  })
 
-  const defaultStyles = SPACER_DEFAULTS(base, colors.text, colors.flat, colors.line)
+  const defaultStyles = SPACER_DEFAULTS(
+    base,
+    colors.text,
+    colors.flat,
+    colors.line
+  )
   const dimensionVars = ['--bksp-w', '--bksp-h']
 
   const style: Record<string, string> = {
-    ...createStyleOverride({ key: '--bksp-h', value: formatValue(normHeight || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
-    ...createStyleOverride({ key: '--bksp-w', value: formatValue(normWidth || '100%'), defaultStyles, skipDimensions: { fullSize: dimensionVars } }),
+    ...createStyleOverride({
+      key: '--bksp-h',
+      value: formatValue(normHeight || '100%'),
+      defaultStyles,
+      skipDimensions: { fullSize: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bksp-w',
+      value: formatValue(normWidth || '100%'),
+      defaultStyles,
+      skipDimensions: { fullSize: dimensionVars },
+    }),
     '--bksp-b': `${base}px`,
-    ...createStyleOverride({ key: '--bksp-ct', value: color ?? colors.text, defaultStyles }),
-    ...createStyleOverride({ key: '--bksp-cl', value: color ?? colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bksp-cf', value: color ?? colors.flat, defaultStyles }),
+    ...createStyleOverride({
+      key: '--bksp-ct',
+      value: color ?? colors.text,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bksp-cl',
+      value: color ?? colors.line,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bksp-cf',
+      value: color ?? colors.flat,
+      defaultStyles,
+    }),
   }
 
   const classTokens = ['spr']
diff --git a/packages/core/src/descriptors/stack.ts b/packages/core/src/descriptors/stack.ts
index f79d7e42..2db14480 100644
--- a/packages/core/src/descriptors/stack.ts
+++ b/packages/core/src/descriptors/stack.ts
@@ -25,7 +25,11 @@ export interface StackDescriptor {
   classTokens: string[]
 }
 
-const STACK_DEFAULTS = (colors: { line: string; flat: string; text: string }) => ({
+const STACK_DEFAULTS = (colors: {
+  line: string
+  flat: string
+  text: string
+}) => ({
   '--bksk-w': 'auto',
   '--bksk-h': 'auto',
   '--bksk-cl': colors.line,
@@ -37,8 +41,21 @@ const STACK_DEFAULTS = (colors: { line: string; flat: string; text: string }) =>
  * Computes styles needed to render a Stack component.
  * Pure function — framework-agnostic.
  */
-export function createStackDescriptor(params: StackDescriptorParams): StackDescriptor {
-  const { colors, direction, justify, align, width, height, gap, rowGap, columnGap, isVisible } = params
+export function createStackDescriptor(
+  params: StackDescriptorParams
+): StackDescriptor {
+  const {
+    colors,
+    direction,
+    justify,
+    align,
+    width,
+    height,
+    gap,
+    rowGap,
+    columnGap,
+    isVisible,
+  } = params
 
   const defaultStyles = STACK_DEFAULTS(colors)
   const dimensionVars = ['--bksk-w', '--bksk-h']
@@ -48,15 +65,39 @@ export function createStackDescriptor(params: StackDescriptorParams): StackDescr
     flexDirection,
     justifyContent: justify,
     alignItems: align,
-    ...createStyleOverride({ key: '--bksk-w', value: formatValue(width || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
-    ...createStyleOverride({ key: '--bksk-h', value: formatValue(height || 'auto'), defaultStyles, skipDimensions: { auto: dimensionVars } }),
-    ...createStyleOverride({ key: '--bksk-cl', value: colors.line, defaultStyles }),
-    ...createStyleOverride({ key: '--bksk-cf', value: colors.flat, defaultStyles }),
-    ...createStyleOverride({ key: '--bksk-ct', value: colors.text, defaultStyles }),
-    ...(gap !== undefined ? { rowGap: `${gap}`, columnGap: `${gap}` } : {
-      ...(rowGap !== undefined ? { rowGap: `${rowGap}` } : {}),
-      ...(columnGap !== undefined ? { columnGap: `${columnGap}` } : {}),
+    ...createStyleOverride({
+      key: '--bksk-w',
+      value: formatValue(width || 'auto'),
+      defaultStyles,
+      skipDimensions: { auto: dimensionVars },
     }),
+    ...createStyleOverride({
+      key: '--bksk-h',
+      value: formatValue(height || 'auto'),
+      defaultStyles,
+      skipDimensions: { auto: dimensionVars },
+    }),
+    ...createStyleOverride({
+      key: '--bksk-cl',
+      value: colors.line,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bksk-cf',
+      value: colors.flat,
+      defaultStyles,
+    }),
+    ...createStyleOverride({
+      key: '--bksk-ct',
+      value: colors.text,
+      defaultStyles,
+    }),
+    ...(gap !== undefined
+      ? { rowGap: `${gap}`, columnGap: `${gap}` }
+      : {
+          ...(rowGap !== undefined ? { rowGap: `${rowGap}` } : {}),
+          ...(columnGap !== undefined ? { columnGap: `${columnGap}` } : {}),
+        }),
   }
 
   const classTokens = ['stk']
diff --git a/packages/core/src/utils/convert.ts b/packages/core/src/utils/convert.ts
index 8b8760e1..42964f4b 100644
--- a/packages/core/src/utils/convert.ts
+++ b/packages/core/src/utils/convert.ts
@@ -25,9 +25,20 @@ export const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {
   pc: 16,
 }
 
-export const RELATIVE_UNITS: string[] = ['em', 'rem', 'vh', 'vw', 'vmin', 'vmax', '%']
+export const RELATIVE_UNITS: string[] = [
+  'em',
+  'rem',
+  'vh',
+  'vw',
+  'vmin',
+  'vmax',
+  '%',
+]
 
-const RELATIVE_UNIT_RESOLVERS: Record<string, (ctx: Required<ConversionContext>) => number> = {
+const RELATIVE_UNIT_RESOLVERS: Record<
+  string,
+  (ctx: Required<ConversionContext>) => number
+> = {
   em: (ctx) => ctx.parentFontSize,
   rem: (ctx) => ctx.rootFontSize,
   vh: (ctx) => ctx.viewportHeight / 100,
diff --git a/packages/core/src/utils/grid.ts b/packages/core/src/utils/grid.ts
index fe0e0695..928a58f2 100644
--- a/packages/core/src/utils/grid.ts
+++ b/packages/core/src/utils/grid.ts
@@ -37,9 +37,10 @@ export function calculateGuideTemplate(
       const finalGap = gap === 0 ? 0 : gap - 1
       const actualGapWithLine = finalGap + 1
 
-      const columns = finalGap === 0
-        ? Math.max(1, Math.floor(width) + 1)
-        : Math.max(1, Math.floor((width + 1) / actualGapWithLine) + 1)
+      const columns =
+        finalGap === 0
+          ? Math.max(1, Math.floor(width) + 1)
+          : Math.max(1, Math.floor((width + 1) / actualGapWithLine) + 1)
 
       return {
         template: `repeat(${columns}, 1px)`,
@@ -58,8 +59,8 @@ export function calculateGuideTemplate(
         return INVALID_RESULT
       }
 
-      const columnsArr = (config.columns as GuideColumnsPattern).map(
-        (col) => typeof col === 'number' ? `${col}px` : col
+      const columnsArr = (config.columns as GuideColumnsPattern).map((col) =>
+        typeof col === 'number' ? `${col}px` : col
       )
 
       if (columnsArr.some((c) => c === '0' || c === '0px')) {
@@ -104,9 +105,8 @@ export function calculateGuideTemplate(
       const colWidthStr =
         typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()
       const pxVal = convertValue(colWidthStr) ?? 0
-      const columns = pxVal > 0
-        ? Math.max(1, Math.floor((width + gap) / (pxVal + gap)))
-        : 1
+      const columns =
+        pxVal > 0 ? Math.max(1, Math.floor((width + gap) / (pxVal + gap))) : 1
 
       return {
         template: `repeat(auto-fill, ${colWidthStr})`,
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
index edd873f0..bb3a9aec 100644
--- a/packages/core/src/utils/merge.ts
+++ b/packages/core/src/utils/merge.ts
@@ -32,7 +32,6 @@ export function resolveDebugState(
   }
 }
 
-
 export type StyleOverrideParams = {
   key: string
   value: string
diff --git a/packages/core/src/utils/normalize.ts b/packages/core/src/utils/normalize.ts
index 6609a2ba..fc4b6509 100644
--- a/packages/core/src/utils/normalize.ts
+++ b/packages/core/src/utils/normalize.ts
@@ -12,11 +12,7 @@ export function normalizeValue(
   value: string | number | undefined,
   options: NormalizationOptions = {}
 ): number {
-  const {
-    base = 8,
-    round: doRound = true,
-    clamp: clampOptions,
-  } = options
+  const { base = 8, round: doRound = true, clamp: clampOptions } = options
 
   if (value === 'auto') return base
 
@@ -33,7 +29,11 @@ export function normalizeValue(
   const normalized = doRound ? Math.round(num / base) * base : num
 
   return clampOptions !== undefined
-    ? clamp(normalized, clampOptions.min ?? -Infinity, clampOptions.max ?? Infinity)
+    ? clamp(
+        normalized,
+        clampOptions.min ?? -Infinity,
+        clampOptions.max ?? Infinity
+      )
     : normalized
 }
 
diff --git a/packages/core/src/utils/parse.ts b/packages/core/src/utils/parse.ts
index 21137e8e..6e225227 100644
--- a/packages/core/src/utils/parse.ts
+++ b/packages/core/src/utils/parse.ts
@@ -1,4 +1,6 @@
-export function parseUnit(value: string): { value: number; unit: string } | null {
+export function parseUnit(
+  value: string
+): { value: number; unit: string } | null {
   const match = value.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/)
   if (!match) return null
   const num = parseFloat(match[1])
@@ -6,8 +8,12 @@ export function parseUnit(value: string): { value: number; unit: string } | null
   return { value: num, unit }
 }
 
-export function formatValue(value: string | number | undefined, defaultValue?: number): string {
-  if (value === undefined && defaultValue !== undefined) return `${defaultValue}px`
+export function formatValue(
+  value: string | number | undefined,
+  defaultValue?: number
+): string {
+  if (value === undefined && defaultValue !== undefined)
+    return `${defaultValue}px`
   if (
     value === 'auto' ||
     (typeof value === 'string' &&
diff --git a/packages/lit/src/components/bk-baseline.ts b/packages/lit/src/components/bk-baseline.ts
index 4ae5311b..00d9a14e 100644
--- a/packages/lit/src/components/bk-baseline.ts
+++ b/packages/lit/src/components/bk-baseline.ts
@@ -7,11 +7,11 @@ import {
   resolveDebugState,
   createBaselineDescriptor,
 } from '@baseline-kit/core'
-import {
-  createMeasureObserver,
-  createVirtualTracker,
+import { createMeasureObserver, createVirtualTracker } from '@baseline-kit/dom'
+import type {
+  MeasureObserverHandle,
+  VirtualTrackerHandle,
 } from '@baseline-kit/dom'
-import type { MeasureObserverHandle, VirtualTrackerHandle } from '@baseline-kit/dom'
 import { BkBase } from './bk-base.js'
 
 /**
@@ -32,7 +32,9 @@ export class BkBaseline extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .bas {
       position: absolute;
       inset: 0;
@@ -106,7 +108,11 @@ export class BkBaseline extends BkBase {
     this._virtualHandle?.disconnect()
     this._virtualHandle = createVirtualTracker(
       el,
-      { totalItems: descriptor.rowCount, itemHeight: resolvedBase, buffer: 160 },
+      {
+        totalItems: descriptor.rowCount,
+        itemHeight: resolvedBase,
+        buffer: 160,
+      },
       (range) => {
         this._virtualStart = range.start
         this._virtualEnd = range.end
@@ -138,12 +144,16 @@ export class BkBaseline extends BkBase {
     })
 
     const count = this._virtualEnd - this._virtualStart
-    const rows = count > 0
-      ? Array.from({ length: count }, (_, i) => {
-          const rowIndex = i + this._virtualStart
-          return html`<div class="row" style=${styleMap(descriptor.getRowStyle(rowIndex))}></div>`
-        })
-      : nothing
+    const rows =
+      count > 0
+        ? Array.from({ length: count }, (_, i) => {
+            const rowIndex = i + this._virtualStart
+            return html`<div
+              class="row"
+              style=${styleMap(descriptor.getRowStyle(rowIndex))}
+            ></div>`
+          })
+        : nothing
 
     return html`
       <div
diff --git a/packages/lit/src/components/bk-box.ts b/packages/lit/src/components/bk-box.ts
index 53449672..5384d4eb 100644
--- a/packages/lit/src/components/bk-box.ts
+++ b/packages/lit/src/components/bk-box.ts
@@ -1,10 +1,6 @@
 import { html, css } from 'lit'
 import { styleMap } from 'lit/directives/style-map.js'
-import {
-  cx,
-  resolveDebugState,
-  createBoxDescriptor,
-} from '@baseline-kit/core'
+import { cx, resolveDebugState, createBoxDescriptor } from '@baseline-kit/core'
 import { BkBase } from './bk-base.js'
 
 /**
@@ -21,7 +17,9 @@ export class BkBox extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .box {
       position: relative;
       width: var(--bkbx-w);
@@ -62,7 +60,10 @@ export class BkBox extends BkBase {
     const mergedStyle = { ...descriptor.boxStyle, ...descriptor.gridSpanStyle }
 
     return html`
-      <div class=${cx(...descriptor.classTokens)} style=${styleMap(mergedStyle)}>
+      <div
+        class=${cx(...descriptor.classTokens)}
+        style=${styleMap(mergedStyle)}
+      >
         <slot></slot>
       </div>
     `
diff --git a/packages/lit/src/components/bk-layout.ts b/packages/lit/src/components/bk-layout.ts
index cb90d481..1f09f322 100644
--- a/packages/lit/src/components/bk-layout.ts
+++ b/packages/lit/src/components/bk-layout.ts
@@ -27,14 +27,19 @@ export class BkLayout extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .lay {
       display: grid;
       position: relative;
       box-sizing: border-box;
       width: var(--bkly-w, auto);
       height: var(--bkly-h, auto);
-      grid-template-columns: var(--bkly-gtc, repeat(auto-fill, minmax(100px, 1fr)));
+      grid-template-columns: var(
+        --bkly-gtc,
+        repeat(auto-fill, minmax(100px, 1fr))
+      );
       grid-template-rows: var(--bkly-gtr, auto);
       gap: var(--bkly-g, 0);
       column-gap: var(--bkly-cg, 0);
@@ -87,7 +92,10 @@ export class BkLayout extends BkBase {
     })
 
     return html`
-      <div class=${cx(...descriptor.classTokens, isShown ? 'v' : undefined)} style=${styleMap(descriptor.containerStyle)}>
+      <div
+        class=${cx(...descriptor.classTokens, isShown ? 'v' : undefined)}
+        style=${styleMap(descriptor.containerStyle)}
+      >
         <slot></slot>
       </div>
     `
diff --git a/packages/lit/src/components/bk-padder.ts b/packages/lit/src/components/bk-padder.ts
index 4656c7f5..0dcc5a51 100644
--- a/packages/lit/src/components/bk-padder.ts
+++ b/packages/lit/src/components/bk-padder.ts
@@ -25,7 +25,9 @@ export class BkPadder extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .pad {
       position: relative;
       display: grid;
@@ -42,9 +44,16 @@ export class BkPadder extends BkBase {
       pointer-events: none;
       z-index: var(--bk-zi, 1);
     }
-    .full-row { grid-column: 1 / -1; }
-    .mid-col { grid-row: 2 / 3; }
-    .center { grid-row: 2 / 3; grid-column: 2 / 3; }
+    .full-row {
+      grid-column: 1 / -1;
+    }
+    .mid-col {
+      grid-row: 2 / 3;
+    }
+    .center {
+      grid-row: 2 / 3;
+      grid-column: 2 / 3;
+    }
   `
 
   declare debugging: 'visible' | 'hidden' | 'none' | undefined
@@ -63,8 +72,14 @@ export class BkPadder extends BkBase {
     const enableSpacers = !isNone
 
     const padding = parsePadding({
-      block: this.block != null ? [this.top ?? this.block, this.bottom ?? this.block] : undefined,
-      inline: this.inline != null ? [this.left ?? this.inline, this.right ?? this.inline] : undefined,
+      block:
+        this.block != null
+          ? [this.top ?? this.block, this.bottom ?? this.block]
+          : undefined,
+      inline:
+        this.inline != null
+          ? [this.left ?? this.inline, this.right ?? this.inline]
+          : undefined,
     })
 
     const descriptor = createPadderDescriptor({
@@ -79,27 +94,57 @@ export class BkPadder extends BkBase {
 
     if (!enableSpacers) {
       return html`
-        <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
+        <div
+          class=${cx(...descriptor.classTokens)}
+          style=${styleMap(descriptor.containerStyle)}
+        >
           <slot></slot>
         </div>
       `
     }
 
     return html`
-      <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
-        ${padding.top >= 0 ? html`<div class="full-row">
-          <bk-spacer width="100%" height=${padding.top} debugging=${this.debugging ?? 'none'}></bk-spacer>
-        </div>` : ''}
-        ${padding.left >= 0 ? html`<div class="mid-col">
-          <bk-spacer width=${padding.left} height="100%" debugging=${this.debugging ?? 'none'}></bk-spacer>
-        </div>` : ''}
+      <div
+        class=${cx(...descriptor.classTokens)}
+        style=${styleMap(descriptor.containerStyle)}
+      >
+        ${padding.top >= 0
+          ? html`<div class="full-row">
+              <bk-spacer
+                width="100%"
+                height=${padding.top}
+                debugging=${this.debugging ?? 'none'}
+              ></bk-spacer>
+            </div>`
+          : ''}
+        ${padding.left >= 0
+          ? html`<div class="mid-col">
+              <bk-spacer
+                width=${padding.left}
+                height="100%"
+                debugging=${this.debugging ?? 'none'}
+              ></bk-spacer>
+            </div>`
+          : ''}
         <div class="center"><slot></slot></div>
-        ${padding.right >= 0 ? html`<div class="mid-col">
-          <bk-spacer width=${padding.right} height="100%" debugging=${this.debugging ?? 'none'}></bk-spacer>
-        </div>` : ''}
-        ${padding.bottom >= 0 ? html`<div class="full-row">
-          <bk-spacer width="100%" height=${padding.bottom} debugging=${this.debugging ?? 'none'}></bk-spacer>
-        </div>` : ''}
+        ${padding.right >= 0
+          ? html`<div class="mid-col">
+              <bk-spacer
+                width=${padding.right}
+                height="100%"
+                debugging=${this.debugging ?? 'none'}
+              ></bk-spacer>
+            </div>`
+          : ''}
+        ${padding.bottom >= 0
+          ? html`<div class="full-row">
+              <bk-spacer
+                width="100%"
+                height=${padding.bottom}
+                debugging=${this.debugging ?? 'none'}
+              ></bk-spacer>
+            </div>`
+          : ''}
       </div>
     `
   }
diff --git a/packages/lit/src/components/bk-spacer.ts b/packages/lit/src/components/bk-spacer.ts
index 6fbaa29e..9235261a 100644
--- a/packages/lit/src/components/bk-spacer.ts
+++ b/packages/lit/src/components/bk-spacer.ts
@@ -21,7 +21,9 @@ export class BkSpacer extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .spr {
       position: relative;
       box-sizing: border-box;
diff --git a/packages/lit/src/components/bk-stack.ts b/packages/lit/src/components/bk-stack.ts
index 722ffb78..093d84ef 100644
--- a/packages/lit/src/components/bk-stack.ts
+++ b/packages/lit/src/components/bk-stack.ts
@@ -24,7 +24,9 @@ export class BkStack extends BkBase {
   }
 
   static override styles = css`
-    :host { display: block; }
+    :host {
+      display: block;
+    }
     .stk {
       display: flex;
       position: relative;
@@ -72,7 +74,10 @@ export class BkStack extends BkBase {
     })
 
     return html`
-      <div class=${cx(...descriptor.classTokens)} style=${styleMap(descriptor.containerStyle)}>
+      <div
+        class=${cx(...descriptor.classTokens)}
+        style=${styleMap(descriptor.containerStyle)}
+      >
         <slot></slot>
       </div>
     `
diff --git a/packages/react/src/components/Baseline/Baseline.tsx b/packages/react/src/components/Baseline/Baseline.tsx
index cadbdad6..f90da023 100644
--- a/packages/react/src/components/Baseline/Baseline.tsx
+++ b/packages/react/src/components/Baseline/Baseline.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ComponentsProps } from '../types'
 import { useConfig, useDebug, useVirtual, useMeasure } from '../../hooks'
-import { cx,  createBaselineDescriptor } from '@baseline-kit/core'
+import { cx, createBaselineDescriptor } from '@baseline-kit/core'
 import type { BaselineVariant } from '@baseline-kit/core'
 import { ClientOnly } from '../../utils/ssr'
 import { mergeStyles } from '../../utils/merge'
@@ -32,24 +32,38 @@ const BaselineImpl = React.memo(function BaselineImpl({
   const config = useConfig('baseline')
   const { isShown } = useDebug(debugging, config.debugging)
   const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const { width: containerWidth, height: containerHeight } = useMeasure(containerRef)
+  const { width: containerWidth, height: containerHeight } =
+    useMeasure(containerRef)
 
   const resolvedBase = base || config.base
 
   const descriptor = React.useMemo(
-    () => createBaselineDescriptor({
-      base: resolvedBase,
-      colors: config.colors,
-      variant: (variant as BaselineVariant) ?? config.variant,
-      width: widthProp,
-      height: heightProp,
-      color: colorProp,
+    () =>
+      createBaselineDescriptor({
+        base: resolvedBase,
+        colors: config.colors,
+        variant: (variant as BaselineVariant) ?? config.variant,
+        width: widthProp,
+        height: heightProp,
+        color: colorProp,
+        containerWidth,
+        containerHeight,
+        spacing: spacingProps,
+        isVisible: isShown,
+      }),
+    [
+      resolvedBase,
+      config.colors,
+      config.variant,
+      variant,
+      widthProp,
+      heightProp,
+      colorProp,
       containerWidth,
       containerHeight,
-      spacing: spacingProps,
-      isVisible: isShown,
-    }),
-    [resolvedBase, config.colors, config.variant, variant, widthProp, heightProp, colorProp, containerWidth, containerHeight, spacingProps, isShown]
+      spacingProps,
+      isShown,
+    ]
   )
 
   const { start, end } = useVirtual({
@@ -69,7 +83,7 @@ const BaselineImpl = React.memo(function BaselineImpl({
       ref={containerRef}
       data-testid="baseline"
       aria-hidden="true"
-      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+      className={cx(...descriptor.classTokens.map((t) => styles[t]), className)}
       style={containerStyles}
       {...spacingProps}
     >
@@ -121,7 +135,11 @@ export const Baseline = React.memo(function Baseline({
   const ssrFallback = (
     <div
       className={cx(styles.b, styles.h, styles.ssr, className)}
-      style={{ width: widthProp || '100%', height: heightProp || '100%', ...style }}
+      style={{
+        width: widthProp || '100%',
+        height: heightProp || '100%',
+        ...style,
+      }}
       data-testid="baseline"
       aria-hidden="true"
     />
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index d0c10e25..33ab8e58 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx,  parsePadding, createBoxDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createBoxDescriptor } from '@baseline-kit/core'
 import type { SnappingMode } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
@@ -22,14 +22,29 @@ export type BoxProps = {
 
 export const Box = React.memo(
   React.forwardRef<HTMLDivElement, BoxProps>(function Box(
-    { children, snapping = 'clamp', debugging: debuggingProp, className, colSpan, rowSpan, span, width, height, style, ssrMode = false, ...spacingProps },
+    {
+      children,
+      snapping = 'clamp',
+      debugging: debuggingProp,
+      className,
+      colSpan,
+      rowSpan,
+      span,
+      width,
+      height,
+      style,
+      ssrMode = false,
+      ...spacingProps
+    },
     ref
   ) {
     const config = useConfig('box')
     const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
     const [isHydrated, setIsHydrated] = React.useState(false)
-    React.useEffect(() => { setIsHydrated(true) }, [])
+    React.useEffect(() => {
+      setIsHydrated(true)
+    }, [])
 
     const internalRef = React.useRef<HTMLDivElement | null>(null)
     const { top, bottom, left, right } = parsePadding(spacingProps)
@@ -41,12 +56,42 @@ export const Box = React.memo(
       warnOnMisalignment: debugging !== 'none',
     })
 
-    const stablePadding = { padding: { top: top || 0, right: right || 0, bottom: bottom || 0, left: left || 0 } }
-    const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+    const stablePadding = {
+      padding: {
+        top: top || 0,
+        right: right || 0,
+        bottom: bottom || 0,
+        left: left || 0,
+      },
+    }
+    const { padding } = hydratedValue(
+      isHydrated && !ssrMode,
+      stablePadding,
+      baselinePadding
+    )
 
     const descriptor = React.useMemo(
-      () => createBoxDescriptor({ base: config.base, lineColor: config.colors.line, width, height, span, colSpan, rowSpan, isVisible: isShown }),
-      [config.base, config.colors.line, width, height, span, colSpan, rowSpan, isShown]
+      () =>
+        createBoxDescriptor({
+          base: config.base,
+          lineColor: config.colors.line,
+          width,
+          height,
+          span,
+          colSpan,
+          rowSpan,
+          isVisible: isShown,
+        }),
+      [
+        config.base,
+        config.colors.line,
+        width,
+        height,
+        span,
+        colSpan,
+        rowSpan,
+        isShown,
+      ]
     )
 
     const boxStyles = React.useMemo(
@@ -58,7 +103,10 @@ export const Box = React.memo(
       <div
         ref={mergeRefs(ref, internalRef)}
         data-testid="box"
-        className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+        className={cx(
+          ...descriptor.classTokens.map((t) => styles[t]),
+          className
+        )}
         style={mergeStyles(boxStyles, descriptor.gridSpanStyle)}
       >
         <Config base={1} spacer={{ variant: 'flat' }}>
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
index 30f93f41..25e6510b 100644
--- a/packages/react/src/components/Layout/Layout.tsx
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx,  parsePadding, createLayoutDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createLayoutDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { Config } from '../Config'
 import { Padder } from '../Padder'
@@ -10,7 +10,9 @@ import { ComponentsProps, Variant } from '../types'
 import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
-type IndicatorNode = NonNullable<React.ComponentProps<typeof Spacer>['indicatorNode']>
+type IndicatorNode = NonNullable<
+  React.ComponentProps<typeof Spacer>['indicatorNode']
+>
 
 export type LayoutProps = {
   columns?: number | string | Array<number | string>
@@ -25,7 +27,8 @@ export type LayoutProps = {
   width?: React.CSSProperties['width']
   height?: React.CSSProperties['height']
   children?: React.ReactNode
-} & ComponentsProps & Gaps
+} & ComponentsProps &
+  Gaps
 
 export const Layout = React.memo(function Layout({
   alignContent,
@@ -52,10 +55,15 @@ export const Layout = React.memo(function Layout({
   const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
   const [isHydrated, setIsHydrated] = React.useState(false)
-  React.useEffect(() => { setIsHydrated(true) }, [])
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   const layoutRef = React.useRef<HTMLDivElement>(null)
-  const initialPadding = React.useMemo(() => parsePadding(spacingProps), [spacingProps])
+  const initialPadding = React.useMemo(
+    () => parsePadding(spacingProps),
+    [spacingProps]
+  )
 
   const baselinePadding = useBaseline(layoutRef, {
     base: config.base,
@@ -65,26 +73,49 @@ export const Layout = React.memo(function Layout({
   })
 
   const stablePadding = {
-    padding: { top: initialPadding.top || 0, right: initialPadding.right || 0, bottom: initialPadding.bottom || 0, left: initialPadding.left || 0 },
+    padding: {
+      top: initialPadding.top || 0,
+      right: initialPadding.right || 0,
+      bottom: initialPadding.bottom || 0,
+      left: initialPadding.left || 0,
+    },
   }
-  const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+  const { padding } = hydratedValue(
+    isHydrated && !ssrMode,
+    stablePadding,
+    baselinePadding
+  )
 
   const descriptor = React.useMemo(
-    () => createLayoutDescriptor({
-      colors: config.colors,
+    () =>
+      createLayoutDescriptor({
+        colors: config.colors,
+        columns,
+        rows,
+        width: width as number | string | undefined,
+        height: height as number | string | undefined,
+        gap: gap as number | string | undefined,
+        rowGap: rowGap as number | string | undefined,
+        columnGap: columnGap as number | string | undefined,
+        justifyItems: justifyItems as string | undefined,
+        alignItems: alignItems as string | undefined,
+        justifyContent: justifyContent as string | undefined,
+        alignContent: alignContent as string | undefined,
+      }),
+    [
+      config.colors,
       columns,
       rows,
-      width: width as number | string | undefined,
-      height: height as number | string | undefined,
-      gap: gap as number | string | undefined,
-      rowGap: rowGap as number | string | undefined,
-      columnGap: columnGap as number | string | undefined,
-      justifyItems: justifyItems as string | undefined,
-      alignItems: alignItems as string | undefined,
-      justifyContent: justifyContent as string | undefined,
-      alignContent: alignContent as string | undefined,
-    }),
-    [config.colors, columns, rows, width, height, gap, rowGap, columnGap, justifyItems, alignItems, justifyContent, alignContent]
+      width,
+      height,
+      gap,
+      rowGap,
+      columnGap,
+      justifyItems,
+      alignItems,
+      justifyContent,
+      alignContent,
+    ]
   )
 
   const containerStyles = React.useMemo(
@@ -107,10 +138,17 @@ export const Layout = React.memo(function Layout({
       >
         <div
           data-testid="layout"
-          className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+          className={cx(
+            ...descriptor.classTokens.map((t) => styles[t]),
+            className
+          )}
           style={containerStyles}
           {...(spacingProps && Object.keys(spacingProps).length > 0
-            ? Object.fromEntries(Object.entries(spacingProps).filter(([key]) => key !== 'ssrMode'))
+            ? Object.fromEntries(
+                Object.entries(spacingProps).filter(
+                  ([key]) => key !== 'ssrMode'
+                )
+              )
             : {})}
         >
           {children}
diff --git a/packages/react/src/components/Padder/Padder.tsx b/packages/react/src/components/Padder/Padder.tsx
index 9071cbae..844fe62e 100644
--- a/packages/react/src/components/Padder/Padder.tsx
+++ b/packages/react/src/components/Padder/Padder.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx,  parsePadding, createPadderDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createPadderDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { mergeStyles, mergeRefs } from '../../utils/merge'
 import { ComponentsProps, Variant } from '../types'
@@ -41,21 +41,42 @@ const createRenderSpacerFn = (
 // Static grid position styles — hoisted to avoid re-creation on render
 const GRID_FULL_ROW: React.CSSProperties = { gridColumn: '1 / -1' }
 const GRID_MID_COL: React.CSSProperties = { gridRow: '2 / 3' }
-const GRID_CENTER: React.CSSProperties = { gridRow: '2 / 3', gridColumn: '2 / 3' }
+const GRID_CENTER: React.CSSProperties = {
+  gridRow: '2 / 3',
+  gridColumn: '2 / 3',
+}
 
 export const Padder = React.memo(
   React.forwardRef<HTMLDivElement, PadderProps>(function Padder(
-    { children, className, debugging: debuggingProp, height, indicatorNode, style, width, ssrMode = false, ...spacingProps },
+    {
+      children,
+      className,
+      debugging: debuggingProp,
+      height,
+      indicatorNode,
+      style,
+      width,
+      ssrMode = false,
+      ...spacingProps
+    },
     ref
   ) {
     const config = useConfig('padder')
     const { variant } = useConfig('spacer')
-    const initialPadding = React.useMemo(() => parsePadding(spacingProps), [spacingProps])
-    const { isShown, isNone, debugging } = useDebug(debuggingProp, config.debugging)
+    const initialPadding = React.useMemo(
+      () => parsePadding(spacingProps),
+      [spacingProps]
+    )
+    const { isShown, isNone, debugging } = useDebug(
+      debuggingProp,
+      config.debugging
+    )
     const enableSpacers = !isNone
 
     const [isHydrated, setIsHydrated] = React.useState(false)
-    React.useEffect(() => { setIsHydrated(true) }, [])
+    React.useEffect(() => {
+      setIsHydrated(true)
+    }, [])
 
     const internalRef = React.useRef<HTMLDivElement | null>(null)
 
@@ -67,23 +88,41 @@ export const Padder = React.memo(
     })
 
     const stablePadding = {
-      padding: { top: initialPadding.top || 0, right: initialPadding.right || 0, bottom: initialPadding.bottom || 0, left: initialPadding.left || 0 },
+      padding: {
+        top: initialPadding.top || 0,
+        right: initialPadding.right || 0,
+        bottom: initialPadding.bottom || 0,
+        left: initialPadding.left || 0,
+      },
     }
-    const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+    const { padding } = hydratedValue(
+      isHydrated && !ssrMode,
+      stablePadding,
+      baselinePadding
+    )
 
     const setRefs = mergeRefs(ref, internalRef)
 
     const descriptor = React.useMemo(
-      () => createPadderDescriptor({
-        base: config.base,
-        color: config.color,
-        width: width as number | string | undefined,
-        height: height as number | string | undefined,
+      () =>
+        createPadderDescriptor({
+          base: config.base,
+          color: config.color,
+          width: width as number | string | undefined,
+          height: height as number | string | undefined,
+          padding,
+          enableSpacers,
+          isVisible: isShown,
+        }),
+      [
+        config.base,
+        config.color,
+        width,
+        height,
         padding,
         enableSpacers,
-        isVisible: isShown,
-      }),
-      [config.base, config.color, width, height, padding, enableSpacers, isShown]
+        isShown,
+      ]
     )
 
     const containerStyles = React.useMemo(
@@ -98,22 +137,50 @@ export const Padder = React.memo(
 
     if (!enableSpacers) {
       return (
-        <div ref={setRefs} data-testid="padder" className={cx(...descriptor.classTokens.map(t => styles[t]), className)} style={containerStyles}>
+        <div
+          ref={setRefs}
+          data-testid="padder"
+          className={cx(
+            ...descriptor.classTokens.map((t) => styles[t]),
+            className
+          )}
+          style={containerStyles}
+        >
           {children}
         </div>
       )
     }
 
     return (
-      <div ref={setRefs} data-testid="padder" className={cx(...descriptor.classTokens.map(t => styles[t]), className)} style={containerStyles}>
+      <div
+        ref={setRefs}
+        data-testid="padder"
+        className={cx(
+          ...descriptor.classTokens.map((t) => styles[t]),
+          className
+        )}
+        style={containerStyles}
+      >
         <>
-          {padding.top >= 0 && <div style={GRID_FULL_ROW}>{renderSpacer('100%', padding.top)}</div>}
-          {padding.left >= 0 && <div style={GRID_MID_COL}>{renderSpacer(padding.left, '100%')}</div>}
+          {padding.top >= 0 && (
+            <div style={GRID_FULL_ROW}>{renderSpacer('100%', padding.top)}</div>
+          )}
+          {padding.left >= 0 && (
+            <div style={GRID_MID_COL}>{renderSpacer(padding.left, '100%')}</div>
+          )}
         </>
         <div style={GRID_CENTER}>{children}</div>
         <>
-          {padding.right >= 0 && <div style={GRID_MID_COL}>{renderSpacer(padding.right, '100%')}</div>}
-          {padding.bottom >= 0 && <div style={GRID_FULL_ROW}>{renderSpacer('100%', padding.bottom)}</div>}
+          {padding.right >= 0 && (
+            <div style={GRID_MID_COL}>
+              {renderSpacer(padding.right, '100%')}
+            </div>
+          )}
+          {padding.bottom >= 0 && (
+            <div style={GRID_FULL_ROW}>
+              {renderSpacer('100%', padding.bottom)}
+            </div>
+          )}
         </>
       </div>
     )
diff --git a/packages/react/src/components/Spacer/Spacer.tsx b/packages/react/src/components/Spacer/Spacer.tsx
index 447c1bd9..3ff3c78e 100644
--- a/packages/react/src/components/Spacer/Spacer.tsx
+++ b/packages/react/src/components/Spacer/Spacer.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react'
 import { useConfig, useDebug } from '../../hooks'
-import { cx,  createSpacerDescriptor } from '@baseline-kit/core'
+import { cx, createSpacerDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { ComponentsProps, Variant } from '../types'
 import { mergeStyles } from '../../utils/merge'
 import styles from './styles.module.css'
 
-export type IndicatorNode = (value: number, type: 'width' | 'height') => React.ReactNode
+export type IndicatorNode = (
+  value: number,
+  type: 'width' | 'height'
+) => React.ReactNode
 
 export type SpacerProps = {
   width?: React.CSSProperties['width']
@@ -40,22 +43,29 @@ export const Spacer = React.memo(function Spacer({
   const base = baseProp ?? config.base
 
   const [isHydrated, setIsHydrated] = React.useState(false)
-  React.useEffect(() => { setIsHydrated(true) }, [])
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   const descriptor = React.useMemo(
-    () => createSpacerDescriptor({
-      base,
-      colors: config.colors,
-      width: widthProp as number | string | undefined,
-      height: heightProp as number | string | undefined,
-      color: colorProp,
-      variant,
-      isVisible: isShown,
-    }),
+    () =>
+      createSpacerDescriptor({
+        base,
+        colors: config.colors,
+        width: widthProp as number | string | undefined,
+        height: heightProp as number | string | undefined,
+        color: colorProp,
+        variant,
+        isVisible: isShown,
+      }),
     [base, config.colors, widthProp, heightProp, colorProp, variant, isShown]
   )
 
-  const shouldShowMeasurements = hydratedValue(isHydrated && !ssrMode, false, isShown && indicatorNode !== undefined)
+  const shouldShowMeasurements = hydratedValue(
+    isHydrated && !ssrMode,
+    false,
+    isShown && indicatorNode !== undefined
+  )
 
   const measurements = React.useMemo(() => {
     if (!shouldShowMeasurements) return null
@@ -67,7 +77,12 @@ export const Spacer = React.memo(function Spacer({
         {w !== 0 && <span key="width">{indicatorNode!(w, 'width')}</span>}
       </>
     )
-  }, [shouldShowMeasurements, indicatorNode, descriptor.normWidth, descriptor.normHeight])
+  }, [
+    shouldShowMeasurements,
+    indicatorNode,
+    descriptor.normWidth,
+    descriptor.normHeight,
+  ])
 
   const baseStyles = React.useMemo(
     () => mergeStyles(descriptor.style, style),
@@ -78,9 +93,13 @@ export const Spacer = React.memo(function Spacer({
     <div
       ref={ref}
       data-testid="spacer"
-      className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+      className={cx(...descriptor.classTokens.map((t) => styles[t]), className)}
       data-variant={variant}
-      data-height={typeof descriptor.normHeight === 'number' ? `${descriptor.normHeight}px` : descriptor.normHeight}
+      data-height={
+        typeof descriptor.normHeight === 'number'
+          ? `${descriptor.normHeight}px`
+          : descriptor.normHeight
+      }
       style={baseStyles}
       {...props}
     >
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 2f88acce..9540708d 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Gaps } from '../types'
 import { useConfig, useDebug, useBaseline } from '../../hooks'
-import { cx,  parsePadding, createStackDescriptor } from '@baseline-kit/core'
+import { cx, parsePadding, createStackDescriptor } from '@baseline-kit/core'
 import { hydratedValue } from '@baseline-kit/dom'
 import { Padder } from '../Padder'
 import { IndicatorNode } from '../Spacer'
@@ -13,7 +13,9 @@ import styles from './styles.module.css'
 export type CSSPropertiesDirectionalAxis = 'x' | 'y' | '-x' | '-y'
 
 export type StackProps = {
-  direction?: React.CSSProperties['flexDirection'] | CSSPropertiesDirectionalAxis
+  direction?:
+    | React.CSSProperties['flexDirection']
+    | CSSPropertiesDirectionalAxis
   justify?: React.CSSProperties['justifyContent']
   align?: React.CSSProperties['alignItems']
   width?: React.CSSProperties['width']
@@ -49,7 +51,9 @@ export const Stack = React.memo(function Stack({
   const { isShown, debugging } = useDebug(debuggingProp, config.debugging)
 
   const [isHydrated, setIsHydrated] = React.useState(false)
-  React.useEffect(() => { setIsHydrated(true) }, [])
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   const stackRef = React.useRef<HTMLDivElement | null>(null)
   const { top, right, bottom, left } = parsePadding({ ...spacingProps })
@@ -61,23 +65,46 @@ export const Stack = React.memo(function Stack({
     warnOnMisalignment: debugging !== 'none',
   })
 
-  const stablePadding = { padding: { top: top || 0, right: right || 0, bottom: bottom || 0, left: left || 0 } }
-  const { padding } = hydratedValue(isHydrated && !ssrMode, stablePadding, baselinePadding)
+  const stablePadding = {
+    padding: {
+      top: top || 0,
+      right: right || 0,
+      bottom: bottom || 0,
+      left: left || 0,
+    },
+  }
+  const { padding } = hydratedValue(
+    isHydrated && !ssrMode,
+    stablePadding,
+    baselinePadding
+  )
 
   const descriptor = React.useMemo(
-    () => createStackDescriptor({
-      colors: config.colors,
+    () =>
+      createStackDescriptor({
+        colors: config.colors,
+        direction,
+        justify,
+        align,
+        width: width as number | string | undefined,
+        height: height as number | string | undefined,
+        gap: gap !== undefined ? Number(gap) : undefined,
+        rowGap: rowGap !== undefined ? Number(rowGap) : undefined,
+        columnGap: columnGap !== undefined ? Number(columnGap) : undefined,
+        isVisible: isShown,
+      }),
+    [
+      config.colors,
       direction,
       justify,
       align,
-      width: width as number | string | undefined,
-      height: height as number | string | undefined,
-      gap: gap !== undefined ? Number(gap) : undefined,
-      rowGap: rowGap !== undefined ? Number(rowGap) : undefined,
-      columnGap: columnGap !== undefined ? Number(columnGap) : undefined,
-      isVisible: isShown,
-    }),
-    [config.colors, direction, justify, align, width, height, gap, rowGap, columnGap, isShown]
+      width,
+      height,
+      gap,
+      rowGap,
+      columnGap,
+      isShown,
+    ]
   )
 
   const containerStyles = React.useMemo(
@@ -85,9 +112,14 @@ export const Stack = React.memo(function Stack({
     [descriptor.containerStyle, style]
   )
 
-  const mergedContainerStyles = debugging === 'none'
-    ? { ...containerStyles, paddingBlock: `${padding.top}px ${padding.bottom}px`, paddingInline: `${padding.left}px ${padding.right}px` }
-    : containerStyles
+  const mergedContainerStyles =
+    debugging === 'none'
+      ? {
+          ...containerStyles,
+          paddingBlock: `${padding.top}px ${padding.bottom}px`,
+          paddingInline: `${padding.left}px ${padding.right}px`,
+        }
+      : containerStyles
 
   return (
     <Config spacer={{ variant: variant ?? 'line' }}>
@@ -103,7 +135,10 @@ export const Stack = React.memo(function Stack({
       >
         <div
           data-testid="stack"
-          className={cx(...descriptor.classTokens.map(t => styles[t]), className)}
+          className={cx(
+            ...descriptor.classTokens.map((t) => styles[t]),
+            className
+          )}
           style={mergedContainerStyles}
           {...spacingProps}
         >
diff --git a/packages/react/src/components/types.ts b/packages/react/src/components/types.ts
index c450053a..1a0fa99a 100644
--- a/packages/react/src/components/types.ts
+++ b/packages/react/src/components/types.ts
@@ -19,10 +19,7 @@ export type {
   ConfigSchema,
 } from '@baseline-kit/core'
 
-export {
-  GRID_ALIGNMENTS,
-  PADD_VARIANTS,
-} from '@baseline-kit/core'
+export { GRID_ALIGNMENTS, PADD_VARIANTS } from '@baseline-kit/core'
 
 /**
  * Common props shared across library components.
diff --git a/packages/react/src/hooks/useBaseline.ts b/packages/react/src/hooks/useBaseline.ts
index f6491e5c..b7cf1b9f 100644
--- a/packages/react/src/hooks/useBaseline.ts
+++ b/packages/react/src/hooks/useBaseline.ts
@@ -22,11 +22,7 @@ export interface BaselineResult {
  */
 export function useBaseline(
   ref: React.RefObject<HTMLElement | null>,
-  {
-    base = 8,
-    snapping = 'none',
-    spacing = {},
-  }: BaselineOptions = {}
+  { base = 8, snapping = 'none', spacing = {} }: BaselineOptions = {}
 ): BaselineResult {
   if (base < 1) {
     throw new Error('Base must be >= 1 for baseline alignment.')
diff --git a/packages/react/src/hooks/useGuide.ts b/packages/react/src/hooks/useGuide.ts
index b0fd3813..fb234282 100644
--- a/packages/react/src/hooks/useGuide.ts
+++ b/packages/react/src/hooks/useGuide.ts
@@ -13,5 +13,8 @@ export function useGuide(
   config: GuideConfig
 ) {
   const { width } = useMeasure(ref)
-  return React.useMemo(() => calculateGuideTemplate(width, config), [config, width])
+  return React.useMemo(
+    () => calculateGuideTemplate(width, config),
+    [config, width]
+  )
 }
diff --git a/packages/react/src/hooks/useMeasure.ts b/packages/react/src/hooks/useMeasure.ts
index 4d9dc249..a416c0ad 100644
--- a/packages/react/src/hooks/useMeasure.ts
+++ b/packages/react/src/hooks/useMeasure.ts
@@ -16,7 +16,9 @@ export function useMeasure(
   ref: React.RefObject<HTMLElement | null>
 ): MeasureResult {
   const [dimensions, setDimensions] = React.useState<MeasureRect>(ZERO)
-  const handleRef = React.useRef<ReturnType<typeof createMeasureObserver> | null>(null)
+  const handleRef = React.useRef<ReturnType<
+    typeof createMeasureObserver
+  > | null>(null)
 
   React.useLayoutEffect(() => {
     if (typeof window === 'undefined' || !ref.current) return
diff --git a/packages/react/src/hooks/useVirtual.ts b/packages/react/src/hooks/useVirtual.ts
index 7bd688a6..7ffc6aff 100644
--- a/packages/react/src/hooks/useVirtual.ts
+++ b/packages/react/src/hooks/useVirtual.ts
@@ -27,14 +27,11 @@ export function useVirtual({
     end: totalLines,
   })
 
-  const updateRange = useCallback(
-    (range: VirtualRange) => {
-      setVisibleRange((prev) =>
-        prev.start === range.start && prev.end === range.end ? prev : range
-      )
-    },
-    []
-  )
+  const updateRange = useCallback((range: VirtualRange) => {
+    setVisibleRange((prev) =>
+      prev.start === range.start && prev.end === range.end ? prev : range
+    )
+  }, [])
 
   useLayoutEffect(() => {
     if (!containerRef.current) return

From e3e3e194aa394ce02501e30af0ff711dedc38e48 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 31 Mar 2026 11:46:06 +0000
Subject: [PATCH 18/18] fix: add lit and @lit/context to devDependencies for CI
 resolution

Bun workspaces need these hoisted at root for typecheck to find
the lit type declarations in CI. Also adds missing @lit/context
to packages/lit/package.json.

https://claude.ai/code/session_01AVnTtoUi9mcd1d7vtWG915
---
 package.json              | 2 ++
 packages/lit/package.json | 1 +
 2 files changed, 3 insertions(+)

diff --git a/package.json b/package.json
index f2b22d1a..c6f39a46 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@eslint/js": "^9.39.4",
+    "@lit/context": "^1.1.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -67,6 +68,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^26.1.0",
+    "lit": "^3.3.0",
     "postcss-preset-env": "^11.2.0",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
diff --git a/packages/lit/package.json b/packages/lit/package.json
index 0cfae65a..72f7a9fb 100644
--- a/packages/lit/package.json
+++ b/packages/lit/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@baseline-kit/core": "workspace:*",
     "@baseline-kit/dom": "workspace:*",
+    "@lit/context": "^1.1.6",
     "lit": "^3.3.0"
   },
   "license": "MIT",