fix: audit fixes — deps, CI, types, a11y, dead code, and edge cases

.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

alias.config.ts

@@ -1,11 +1,18 @@
 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'),
+  '@baseline-kit/lit': resolve(__dirname, 'packages/lit/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'),
-}
+  '@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'),
+}

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",
@@ -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,36 +47,45 @@
     "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",
+    "@lit/context": "^1.1.6",
+    "@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": "^4.1.2",
+    "autoprefixer": "^10.4.27",
+    "cssnano": "^7.1.3",
+    "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",
+    "lit": "^3.3.0",
+    "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.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "3.0.8"
+    "vite": "^8.0.3",
+    "vite-plugin-static-copy": "^4.0.0",
+    "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": {
@@ -147,9 +156,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": {
-    "esbuild": "^0.25.0",
-    "postcss-preset-env": "^10.1.5"
-  }
+  "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."
 }

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"
+}

packages/core/src/config/defaults.ts

@@ -0,0 +1,60 @@
+import type { ConfigSchema } from './schema'
+
+export const DEFAULT_CONFIG: ConfigSchema = {
+  base: 8,
+  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

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'

packages/core/src/config/merge.ts

@@ -0,0 +1,73 @@
+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']>
+}
+
+const COMPONENT_KEYS = [
+  'baseline',
+  'guide',
+  'spacer',
+  'box',
+  'stack',
+  'layout',
+  'padder',
+] as const
+
+export const mergeConfig = (params: MergeConfigParams): ConfigSchema => {
+  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 = {
+  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 {
+    '--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,
+  }
+}

packages/core/src/config/schema.ts

@@ -0,0 +1,27 @@
+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>
+  }
+  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 }
+}