baseline-kit 3.0.2 → 5.0.0

package/dist/src-QHaSfgVe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-QHaSfgVe.js","names":[],"sources":["../packages/core/src/config/defaults.ts","../packages/core/src/config/merge.ts","../packages/core/src/types.ts","../packages/core/src/utils/parse.ts","../packages/core/src/utils/convert.ts","../packages/core/src/utils/math.ts","../packages/core/src/utils/normalize.ts","../packages/core/src/utils/padding.ts","../packages/core/src/utils/snapping.ts","../packages/core/src/utils/merge.ts","../packages/core/src/validation/guide.ts","../packages/core/src/utils/grid.ts","../packages/core/src/descriptors/guide.ts","../packages/core/src/descriptors/baseline.ts","../packages/core/src/descriptors/box.ts","../packages/core/src/descriptors/spacer.ts","../packages/core/src/descriptors/padder.ts"],"sourcesContent":["import type { ConfigSchema } from './schema'\n\nexport const DEFAULT_CONFIG: ConfigSchema = {\n  base: 8,\n  baseline: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-baseline-color-line-theme)',\n      flat: 'var(--bk-baseline-color-flat-theme)',\n    },\n  },\n  guide: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-guide-color-line-theme)',\n      pattern: 'var(--bk-guide-color-pattern-theme)',\n      auto: 'var(--bk-guide-color-auto-theme)',\n      fixed: 'var(--bk-guide-color-fixed-theme)',\n    },\n  },\n  spacer: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-spacer-color-line-theme)',\n      flat: 'var(--bk-spacer-color-flat-theme)',\n      text: 'var(--bk-spacer-color-text-theme)',\n    },\n  },\n  box: {\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-box-color-line-theme)',\n      flat: 'var(--bk-box-color-flat-theme)',\n      text: 'var(--bk-box-color-text-theme)',\n    },\n  },\n  padder: {\n    debugging: 'hidden',\n    color: 'var(--bk-padder-color-theme)',\n  },\n} as const\n","import type { ConfigSchema } from './schema'\n\ntype MergeConfigParams = {\n  parentConfig: ConfigSchema\n  base?: number\n  baseline?: Partial<ConfigSchema['baseline']>\n  guide?: Partial<ConfigSchema['guide']>\n  spacer?: Partial<ConfigSchema['spacer']>\n  box?: Partial<ConfigSchema['box']>\n  padder?: Partial<ConfigSchema['padder']>\n}\n\nconst COMPONENT_KEYS = ['baseline', 'guide', 'spacer', 'box', 'padder'] as const\n\nexport const mergeConfig = (params: MergeConfigParams): ConfigSchema => {\n  const { parentConfig, base } = params\n  const merged = {} as Record<string, unknown>\n\n  for (const key of COMPONENT_KEYS) {\n    merged[key] = { ...parentConfig[key], ...params[key] }\n  }\n\n  return { base: base ?? parentConfig.base, ...merged } as ConfigSchema\n}\n\ntype CSSVariablesParams = {\n  base: number\n  baseline: ConfigSchema['baseline']\n  guide: ConfigSchema['guide']\n  spacer: ConfigSchema['spacer']\n  box: ConfigSchema['box']\n  padder: ConfigSchema['padder']\n}\n\nexport const createCSSVariables = (\n  params: CSSVariablesParams\n): Record<string, string> => {\n  const { base, baseline, guide, spacer, box, padder } = params\n  return {\n    '--bk-base': `${base}px`,\n    '--bkbl-cl': baseline.colors.line,\n    '--bkbl-cf': baseline.colors.flat,\n    '--bkgd-cl': guide.colors.line,\n    '--bkgd-cp': guide.colors.pattern,\n    '--bkgd-ca': guide.colors.auto,\n    '--bkgd-cf': guide.colors.fixed,\n    '--bksp-cl': spacer.colors.line,\n    '--bksp-cf': spacer.colors.flat,\n    '--bksp-ct': spacer.colors.text,\n    '--bkbx-cl': box.colors.line,\n    '--bkbx-cf': box.colors.flat,\n    '--bkbx-ct': box.colors.text,\n    '--bkpd-c': padder.color,\n  }\n}\n","/**\n * @baseline-kit/core - Pure type definitions\n * Framework-agnostic types for the baseline-kit system\n */\n\n// Spacing Types\nexport type Spacing =\n  | number\n  | [number, number]\n  | { start?: number; end?: number }\n\nexport type PaddingValue =\n  | number\n  | [number, number]\n  | [number, number, number]\n  | [number, number, number, number]\n  | { top?: number; bottom?: number; left?: number; right?: number }\n\nexport type Padding = {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\nexport type SpacingProps = {\n  padding?: PaddingValue\n  block?: Spacing\n  inline?: Spacing\n}\n\n// Grid Types\nexport type GuideVariant = 'line' | 'pattern' | 'fixed' | 'auto'\nexport type GuideColumnValue = string | number | undefined | 'auto'\nexport type GuideColumnsPattern = readonly GuideColumnValue[]\n\nexport const GRID_ALIGNMENTS = ['start', 'center', 'end'] as const\nexport type GridAlignment = (typeof GRID_ALIGNMENTS)[number]\n\nexport const PADD_VARIANTS = ['line', 'flat'] as const\nexport type PaddedVariant = (typeof PADD_VARIANTS)[number]\n\n// Component Types\nexport type Variant = 'line' | 'flat' | 'pattern'\nexport type BaselineVariant = Exclude<Variant, 'pattern'>\nexport type SnappingMode = 'none' | 'height' | 'clamp'\nexport type DebuggingMode = 'none' | 'hidden' | 'visible'\n\n// Guide Config Types (framework-agnostic)\ntype BaseGuideConfig = {\n  gap?: number | string\n  base?: number\n}\n\nexport type PatternConfig = BaseGuideConfig & {\n  variant: 'pattern'\n  columns: GuideColumnsPattern\n  columnWidth?: never\n}\n\nexport type FixedConfig = BaseGuideConfig & {\n  variant: 'fixed'\n  columns: number\n  columnWidth?: number | string\n}\n\nexport type AutoConfig = BaseGuideConfig & {\n  variant: 'auto'\n  columnWidth: number | string\n  columns?: never\n}\n\nexport type LineConfig = BaseGuideConfig & {\n  variant?: 'line'\n  columns?: never\n  columnWidth?: never\n}\n\nexport type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig\n","export function parseUnit(\n  value: string\n): { value: number; unit: string } | null {\n  const match = value.trim().match(/^([+-]?[\\d.]+)([a-zA-Z%]+)$/)\n  if (!match) return null\n  const num = parseFloat(match[1])\n  const unit = match[2]\n  return { value: num, unit }\n}\n\nexport function formatValue(\n  value: string | number | undefined,\n  defaultValue?: number\n): string {\n  if (value === undefined && defaultValue !== undefined)\n    return `${defaultValue}px`\n  if (\n    value === 'auto' ||\n    (typeof value === 'string' &&\n      /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(value))\n  ) {\n    return String(value)\n  }\n  if (typeof value === 'number') return `${value}px`\n  return value ?? ''\n}\n","import { parseUnit } from './parse'\n\nexport interface ConversionContext {\n  parentSize?: number\n  viewportWidth?: number\n  viewportHeight?: number\n  rootFontSize?: number\n  parentFontSize?: number\n}\n\nconst DEFAULT_CONTEXT: Required<ConversionContext> = {\n  parentSize: 0,\n  viewportWidth: 1920,\n  viewportHeight: 1080,\n  rootFontSize: 16,\n  parentFontSize: 16,\n}\n\nexport const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number> = {\n  px: 1,\n  in: 96,\n  cm: 37.8,\n  mm: 3.78,\n  pt: 1.33,\n  pc: 16,\n}\n\nexport const RELATIVE_UNITS: string[] = [\n  'em',\n  'rem',\n  'vh',\n  'vw',\n  'vmin',\n  'vmax',\n  '%',\n]\n\nconst RELATIVE_UNIT_RESOLVERS: Record<\n  string,\n  (ctx: Required<ConversionContext>) => number\n> = {\n  em: (ctx) => ctx.parentFontSize,\n  rem: (ctx) => ctx.rootFontSize,\n  vh: (ctx) => ctx.viewportHeight / 100,\n  vw: (ctx) => ctx.viewportWidth / 100,\n  vmin: (ctx) => Math.min(ctx.viewportWidth, ctx.viewportHeight) / 100,\n  vmax: (ctx) => Math.max(ctx.viewportWidth, ctx.viewportHeight) / 100,\n  '%': (ctx) => ctx.parentSize / 100,\n}\n\nexport function convertValue(\n  value: number | string | undefined,\n  context?: ConversionContext\n): number | null {\n  if (typeof value === 'number') return value\n  if (typeof value !== 'string') return null\n\n  const parsed = parseUnit(value)\n  if (!parsed) return null\n\n  const { value: num, unit } = parsed\n\n  if (unit in ABSOLUTE_UNIT_CONVERSIONS) {\n    return num * ABSOLUTE_UNIT_CONVERSIONS[unit]\n  }\n\n  if (unit === 'auto') return null\n\n  const resolver = RELATIVE_UNIT_RESOLVERS[unit]\n  if (resolver) {\n    const ctx = { ...DEFAULT_CONTEXT, ...context }\n    return num * resolver(ctx)\n  }\n\n  return null\n}\n","export function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\ntype RowCountParams = {\n  height?: number\n  top: number\n  bottom: number\n  base: number\n}\n\nexport function calculateRowCount(params: RowCountParams): number {\n  const { height, top, bottom, base } = params\n  const totalHeight = (height ?? 0) - (top + bottom)\n  return Math.max(1, Math.floor(totalHeight / base))\n}\n","import { convertValue, type ConversionContext } from './convert'\nimport { clamp } from './math'\n\nexport interface NormalizationOptions {\n  base?: number\n  round?: boolean\n  clamp?: { min?: number; max?: number }\n  suppressWarnings?: boolean\n  context?: ConversionContext\n}\n\nexport function normalizeValue(\n  value: string | number | undefined,\n  options: NormalizationOptions = {}\n): number {\n  const {\n    base = 8,\n    round: doRound = true,\n    clamp: clampOptions,\n    context,\n  } = options\n\n  if (value === 'auto') return base\n\n  let num: number | null = null\n  if (typeof value === 'number') {\n    num = value\n  } else if (typeof value === 'string') {\n    num = convertValue(value, context) ?? base\n  }\n  if (num === null) num = base\n\n  if (base <= 0) return num\n\n  const normalized = doRound ? Math.round(num / base) * base : num\n\n  return clampOptions !== undefined\n    ? clamp(\n        normalized,\n        clampOptions.min ?? -Infinity,\n        clampOptions.max ?? Infinity\n      )\n    : normalized\n}\n\nexport function normalizeValuePair(\n  values:\n    | [string | number | undefined, string | number | undefined]\n    | undefined,\n  defaults: [number, number],\n  options?: NormalizationOptions\n): [number, number] {\n  if (!values) return defaults\n\n  if (values[0] === undefined && values[1] === undefined) {\n    return defaults\n  }\n\n  const first =\n    values[0] !== undefined ? normalizeValue(values[0], options) : defaults[0]\n  const second =\n    values[1] !== undefined ? normalizeValue(values[1], options) : defaults[1]\n  return [first, second]\n}\n","import type { Padding, PaddingValue, Spacing, SpacingProps } from '../types'\n\nexport function parsePadding(spacing: SpacingProps): Padding {\n  if ('padding' in spacing && spacing.padding != null) {\n    return parsePaddingValue(spacing.padding)\n  }\n\n  const blockEdges =\n    'block' in spacing && spacing.block != null\n      ? parseBlock(spacing.block)\n      : { top: 0, bottom: 0 }\n  const inlineEdges =\n    'inline' in spacing && spacing.inline != null\n      ? parseInline(spacing.inline)\n      : { left: 0, right: 0 }\n\n  return {\n    top: blockEdges.top,\n    right: inlineEdges.right,\n    bottom: blockEdges.bottom,\n    left: inlineEdges.left,\n  }\n}\n\nfunction parsePaddingValue(padding: PaddingValue): Padding {\n  if (typeof padding === 'number') {\n    return { top: padding, right: padding, bottom: padding, left: padding }\n  }\n\n  if (Array.isArray(padding)) {\n    const [a = 0, b = 0, c, d] = padding\n    return { top: a, right: b, bottom: c ?? a, left: d ?? b }\n  }\n\n  if (typeof padding === 'object') {\n    return {\n      top: padding.top ?? 0,\n      right: padding.right ?? 0,\n      bottom: padding.bottom ?? 0,\n      left: padding.left ?? 0,\n    }\n  }\n\n  return { top: 0, right: 0, bottom: 0, left: 0 }\n}\n\nfunction parseBlock(block: Spacing): Pick<Padding, 'top' | 'bottom'> {\n  if (typeof block === 'number') {\n    return { top: block, bottom: block }\n  }\n  if (Array.isArray(block)) {\n    const [top, bottom] = block\n    return { top: top ?? 0, bottom: bottom ?? 0 }\n  }\n  if (typeof block === 'object') {\n    return { top: block.start ?? 0, bottom: block.end ?? 0 }\n  }\n  return { top: 0, bottom: 0 }\n}\n\nfunction parseInline(inline: Spacing): Pick<Padding, 'left' | 'right'> {\n  if (typeof inline === 'number') {\n    return { left: inline, right: inline }\n  }\n  if (Array.isArray(inline)) {\n    const [left, right] = inline\n    return { left: left ?? 0, right: right ?? 0 }\n  }\n  if (typeof inline === 'object') {\n    return { left: inline.start ?? 0, right: inline.end ?? 0 }\n  }\n  return { left: 0, right: 0 }\n}\n","import type { SnappingMode, Padding, PaddingValue } from '../types'\nimport { parsePadding } from './padding'\n\nexport function calculateSnappedSpacing(\n  height: number,\n  base: number,\n  initial: PaddingValue,\n  snapping: SnappingMode\n): Padding {\n  const pad: Padding = parsePadding({ padding: initial })\n\n  if (snapping === 'none') {\n    return pad\n  }\n\n  if (snapping === 'height') {\n    const remainder = height % base\n    if (remainder !== 0) {\n      pad.bottom += base - remainder\n    }\n  }\n\n  if (snapping === 'clamp') {\n    pad.top = pad.top % base\n    const remainder = height % base\n    if (remainder !== 0) {\n      pad.bottom += base - remainder\n    }\n    pad.bottom = pad.bottom % base\n  }\n\n  return pad\n}\n","import type { DebuggingMode } from '../types'\n\n/**\n * Combines class names, filtering out falsy values.\n * Lightweight alternative to clsx/classnames.\n */\nexport const cx = (\n  ...classes: Array<string | boolean | undefined | null>\n): string => classes.filter(Boolean).join(' ').trim()\n\n/**\n * Resolves component debug/visibility state from prop and config.\n * Pure function — framework-agnostic.\n */\nexport interface DebugState {\n  isShown: boolean\n  isHidden: boolean\n  isNone: boolean\n  debugging: DebuggingMode | undefined\n}\n\nexport function resolveDebugState(\n  debuggingProp?: DebuggingMode,\n  debuggingConfig?: DebuggingMode\n): DebugState {\n  const effective = debuggingProp ?? debuggingConfig\n  return {\n    isShown: effective === 'visible',\n    isHidden: effective === 'hidden',\n    isNone: effective === 'none',\n    debugging: effective,\n  }\n}\n\nexport type StyleOverrideParams = {\n  key: string\n  value: string\n  defaultStyles: Record<string, string>\n  skipDimensions?: {\n    fitContent?: string[]\n    auto?: string[]\n    fullSize?: string[]\n  }\n}\n\nexport function createStyleOverride(\n  params: StyleOverrideParams | string,\n  value?: string,\n  defaultStyles?: Record<string, string>\n): Record<string, string> {\n  const key = typeof params === 'string' ? params : params.key\n  const val = typeof params === 'string' ? value! : params.value\n  const defaults =\n    typeof params === 'string' ? defaultStyles! : params.defaultStyles\n  const skipDimensions =\n    typeof params === 'object' ? params.skipDimensions : undefined\n\n  if (skipDimensions) {\n    if (skipDimensions.fitContent?.includes(key) && val === 'fit-content') {\n      return {}\n    }\n    if (skipDimensions.auto?.includes(key) && val === 'auto') {\n      return {}\n    }\n    if (\n      skipDimensions.fullSize?.includes(key) &&\n      (val === '100%' || val === '100vh' || val === '100vw')\n    ) {\n      return {}\n    }\n  }\n\n  return val !== defaults[key] ? { [key]: val } : {}\n}\n","import type { GuideColumnsPattern, GuideColumnValue } from '../types'\n\nconst UNIT_PATTERN =\n  /^\\d*\\.?\\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/\n\nexport const isValidGuideColumnValue = (\n  value: unknown\n): value is GuideColumnValue => {\n  if (typeof value === 'number') return Number.isFinite(value) && value >= 0\n  if (typeof value !== 'string') return false\n  return value === 'auto' || value === '100%' || UNIT_PATTERN.test(value)\n}\n\nexport const isValidGuidePattern = (\n  pattern: unknown\n): pattern is GuideColumnsPattern =>\n  Array.isArray(pattern) &&\n  pattern.length > 0 &&\n  pattern.every(isValidGuideColumnValue)\n","import type { GuideConfig, GuideColumnsPattern } from '../types'\nimport { isValidGuidePattern } from '../validation/guide'\nimport { normalizeValue } from './normalize'\nimport { formatValue } from './parse'\nimport { convertValue, type ConversionContext } from './convert'\n\nexport interface GuideResult {\n  template: string\n  columnsCount: number\n  calculatedGap: number\n  isValid: boolean\n}\n\nconst INVALID_RESULT: GuideResult = {\n  template: 'none',\n  columnsCount: 0,\n  calculatedGap: 0,\n  isValid: false,\n}\n\n/**\n * Pure calculation of grid template from container width and guide config.\n * Framework-agnostic — can be used outside React.\n *\n * Sizing note: the `line` variant still reports the number of pixel tracks as\n * metadata, but React renders line guides with a CSS gradient so dense grids do\n * not allocate one DOM node per line.\n */\nexport function calculateGuideTemplate(\n  width: number,\n  config: GuideConfig,\n  context?: ConversionContext\n): GuideResult {\n  const variant = config.variant ?? 'line'\n  const base = config.base ?? 8\n  const gap = normalizeValue(config.gap ?? 0, { base, context })\n\n  if (!width) return INVALID_RESULT\n\n  switch (variant) {\n    case 'line': {\n      const finalGap = gap === 0 ? 0 : gap - 1\n      const actualGapWithLine = finalGap + 1\n\n      const columns =\n        finalGap === 0\n          ? Math.max(1, Math.floor(width) + 1)\n          : Math.max(1, Math.floor((width + 1) / actualGapWithLine) + 1)\n\n      return {\n        template: `repeat(${columns}, 1px)`,\n        columnsCount: columns,\n        calculatedGap: gap > 0 ? gap - 1 : gap,\n        isValid: true,\n      }\n    }\n\n    case 'pattern': {\n      if (!config.columns || !Array.isArray(config.columns)) {\n        return INVALID_RESULT\n      }\n\n      if (!isValidGuidePattern(config.columns)) {\n        return INVALID_RESULT\n      }\n\n      const columnsArr = (config.columns as GuideColumnsPattern).map((col) =>\n        typeof col === 'number' ? `${col}px` : col\n      )\n\n      if (columnsArr.some((c) => c === '0' || c === '0px')) {\n        return INVALID_RESULT\n      }\n\n      return {\n        template: columnsArr.join(' '),\n        columnsCount: columnsArr.length,\n        calculatedGap: gap,\n        isValid: true,\n      }\n    }\n\n    case 'fixed': {\n      const colCount = typeof config.columns === 'number' ? config.columns : 0\n      if (colCount < 1) return INVALID_RESULT\n\n      const colWidth = config.columnWidth\n        ? formatValue(config.columnWidth)\n        : '1fr'\n\n      return {\n        template: `repeat(${colCount}, ${colWidth})`,\n        columnsCount: colCount,\n        calculatedGap: gap,\n        isValid: true,\n      }\n    }\n\n    case 'auto': {\n      const colWidth = config.columnWidth ?? 'auto'\n      if (colWidth === 'auto') {\n        return {\n          template: 'repeat(auto-fill, minmax(0, 1fr))',\n          columnsCount: 1,\n          calculatedGap: gap,\n          isValid: true,\n        }\n      }\n\n      const colWidthStr =\n        typeof colWidth === 'number' ? `${colWidth}px` : colWidth.toString()\n      const pxVal = convertValue(colWidthStr, context) ?? 0\n      const columns =\n        pxVal > 0 ? Math.max(1, Math.floor((width + gap) / (pxVal + gap))) : 1\n\n      return {\n        template: `repeat(auto-fill, ${colWidthStr})`,\n        columnsCount: columns,\n        calculatedGap: gap,\n        isValid: true,\n      }\n    }\n\n    default: {\n      const columns = Math.max(1, Math.floor(width / (gap + 1)) + 1)\n      return {\n        template: `repeat(${columns}, 1px)`,\n        columnsCount: columns,\n        calculatedGap: gap,\n        isValid: true,\n      }\n    }\n  }\n}\n\nexport const createGridSpanStyles = (\n  span?: number,\n  colSpan?: number,\n  rowSpan?: number\n): Record<string, string> => {\n  const gridStyles: Record<string, string> = {}\n\n  if (span !== undefined) {\n    gridStyles.gridColumn = `span ${span}`\n    gridStyles.gridRow = `span ${span}`\n  } else {\n    if (colSpan !== undefined) {\n      gridStyles.gridColumn = `span ${colSpan}`\n    }\n    if (rowSpan !== undefined) {\n      gridStyles.gridRow = `span ${rowSpan}`\n    }\n  }\n\n  return gridStyles\n}\n","import type { GuideVariant, GuideConfig } from '../types'\nimport { formatValue, createStyleOverride } from '../utils'\n\nexport interface GuideDescriptorParams {\n  base: number\n  colors: Record<GuideVariant, string>\n  variant: GuideVariant\n  align: string\n  width?: number | string\n  height?: number | string\n  columnWidth?: number | string\n  maxWidth?: number | string\n  color?: string\n  /** Pre-computed guide template result (from useGuide or calculateGuideTemplate) */\n  template: string\n  columnsCount: number\n  calculatedGap: number\n  isVisible: boolean\n}\n\nexport interface GuideDescriptor {\n  containerStyle: Record<string, string>\n  columnColor: string\n  columnsCount: number\n  calculatedGap: number\n  template: string\n  isVisible: boolean\n  isLineVariant: boolean\n  classTokens: string[]\n}\n\nexport interface GuideConfigParams {\n  variant: GuideVariant\n  base: number\n  gap: number\n  columns?: number | readonly (string | number | undefined | 'auto')[]\n  columnWidth?: number | string\n}\n\n/**\n * Creates a GuideConfig from component props.\n * Pure function — no React or DOM dependency.\n */\nexport function createGuideConfig({\n  variant,\n  base,\n  gap,\n  columns,\n  columnWidth,\n}: GuideConfigParams): GuideConfig {\n  switch (variant) {\n    case 'line':\n      return { variant: 'line', gap, base }\n    case 'pattern':\n      if (columns && Array.isArray(columns)) {\n        return {\n          variant: 'pattern',\n          columns: columns as readonly (string | number)[],\n          gap,\n          base,\n        }\n      }\n      break\n    case 'fixed':\n      if (columns !== undefined) {\n        const parsed =\n          typeof columns === 'number' ? columns : parseInt(String(columns), 10)\n        return {\n          variant: 'fixed',\n          columns: !isNaN(parsed) ? parsed : 12,\n          columnWidth: columnWidth || '60px',\n          gap,\n          base,\n        }\n      }\n      break\n  }\n  return { variant: 'auto', columnWidth: columnWidth || '1fr', gap, base }\n}\n\nconst GUIDE_DEFAULTS = (\n  base: number,\n  lineColor: string\n): Record<string, string> => ({\n  '--bkgd-w': '100%',\n  '--bkgd-h': '100%',\n  '--bkgd-mw': 'none',\n  '--bkgd-cw': '60px',\n  '--bkgd-gw': '24px',\n  '--bkgd-n': '12',\n  '--bkgd-b': `${base}px`,\n  '--bkgd-cl': lineColor,\n  '--bkgd-g': '0',\n})\n\n/**\n * Computes all styles and data needed to render a Guide component.\n * Pure function — framework-agnostic.\n */\nexport function createGuideDescriptor(\n  params: GuideDescriptorParams\n): GuideDescriptor {\n  const {\n    base,\n    colors,\n    variant,\n    align,\n    width,\n    height,\n    columnWidth,\n    maxWidth,\n    color,\n    template,\n    columnsCount,\n    calculatedGap,\n    isVisible,\n  } = params\n\n  const defaultStyles = GUIDE_DEFAULTS(base, colors.line)\n  const fullDimensions = ['--bkgd-w', '--bkgd-h']\n\n  const widthValue = formatValue(width ?? '100%')\n  const heightValue = formatValue(height ?? '100%')\n\n  const containerStyle: Record<string, string> = {\n    ...createStyleOverride({\n      key: '--bkgd-w',\n      value: widthValue,\n      defaultStyles,\n      skipDimensions: { fullSize: fullDimensions },\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-h',\n      value: heightValue,\n      defaultStyles,\n      skipDimensions: { fullSize: fullDimensions },\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-mw',\n      value: formatValue(maxWidth || 'none'),\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-cw',\n      value: formatValue(columnWidth || '60px'),\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-n',\n      value: `${columnsCount}`,\n      defaultStyles,\n    }),\n    ...createStyleOverride({ key: '--bkgd-b', value: '0', defaultStyles }),\n    ...createStyleOverride({\n      key: '--bkgd-cl',\n      value: color ?? colors.line,\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-g',\n      value: `${calculatedGap}px`,\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bkgd-j',\n      value: align || 'center',\n      defaultStyles,\n    }),\n    // CSS module resolves grid-template-columns from --bkgd-t, so the inline\n    // gridTemplateColumns property would be redundant.\n    ...(template && template !== 'none' ? { '--bkgd-t': template } : {}),\n  }\n\n  const columnColor =\n    (variant && variant in colors\n      ? colors[variant as keyof typeof colors]\n      : undefined) ?? colors.line\n\n  const isLineVariant = variant === 'line'\n  const classTokens = ['gde', isVisible ? 'v' : 'h']\n  if (isLineVariant) classTokens.push('line')\n\n  if (isLineVariant) {\n    containerStyle['--bkgd-line-color'] = color ?? colors.line\n    containerStyle['--bkgd-line-period'] = `${calculatedGap + 1}px`\n  }\n\n  return {\n    containerStyle,\n    columnColor,\n    columnsCount,\n    calculatedGap,\n    template,\n    isVisible,\n    isLineVariant,\n    classTokens,\n  }\n}\n","import type { BaselineVariant } from '../types'\nimport {\n  formatValue,\n  createStyleOverride,\n  normalizeValuePair,\n  parsePadding,\n  calculateRowCount,\n} from '../utils'\n\nexport interface BaselineDescriptorParams {\n  base: number\n  colors: Record<BaselineVariant, string>\n  variant: BaselineVariant\n  width?: number | string\n  height?: number | string\n  color?: string\n  containerWidth: number\n  containerHeight: number\n  spacing: Record<string, unknown>\n  isVisible: boolean\n}\n\nexport interface BaselineDescriptor {\n  containerStyle: Record<string, string>\n  rowCount: number\n  getRowStyle: (index: number) => Record<string, string>\n  padding: string | undefined\n  isVisible: boolean\n  classTokens: string[]\n}\n\nconst BASELINE_DEFAULTS = (\n  base: number,\n  lineColor: string,\n  flatColor: string\n): Record<string, string> => ({\n  '--bkbl-w': '100%',\n  '--bkbl-h': '100%',\n  '--bkbl-b': `${base}px`,\n  '--bkbl-cl': lineColor,\n  '--bkbl-cf': flatColor,\n})\n\n/**\n * Computes all styles and data needed to render a Baseline component.\n * Pure function — framework-agnostic.\n */\nexport function createBaselineDescriptor(\n  params: BaselineDescriptorParams\n): BaselineDescriptor {\n  const {\n    base,\n    colors,\n    variant,\n    width,\n    height,\n    color,\n    containerWidth,\n    containerHeight,\n    spacing,\n    isVisible,\n  } = params\n\n  const [, normHeight] = normalizeValuePair(\n    [width, height],\n    [containerWidth, containerHeight]\n  )\n  const { top, right, bottom, left } = parsePadding(spacing)\n\n  const paddingValues = [top, right, bottom, left]\n    .map((v) => (v ? `${v}px` : '0'))\n    .join(' ')\n  const padding = paddingValues !== '0 0 0 0' ? paddingValues : undefined\n\n  const rowCount = calculateRowCount({ height: normHeight, top, bottom, base })\n\n  const chosenColor = color || (variant === 'line' ? colors.line : colors.flat)\n\n  const defaultStyles = BASELINE_DEFAULTS(base, colors.line, colors.flat)\n  const dimensionVars = ['--bkbl-w', '--bkbl-h']\n\n  const containerStyle: Record<string, string> = {\n    ...createStyleOverride({\n      key: '--bkbl-w',\n      value: formatValue(width || '100%'),\n      defaultStyles,\n      skipDimensions: { fullSize: dimensionVars },\n    }),\n    ...createStyleOverride({\n      key: '--bkbl-h',\n      value: formatValue(height || '100%'),\n      defaultStyles,\n      skipDimensions: { fullSize: dimensionVars },\n    }),\n    // --bkbl-b omitted: value `${base}px` always equals the BASELINE_DEFAULTS\n    // entry, so the override would never emit. CSS layer carries the default.\n    ...createStyleOverride({\n      key: '--bkbl-cl',\n      value: color || colors.line,\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bkbl-cf',\n      value: color || colors.flat,\n      defaultStyles,\n    }),\n    ...(padding ? { padding } : {}),\n  }\n\n  const getRowStyle = (index: number): Record<string, string> => ({\n    '--bkbl-rt': index === 0 ? '0px' : `${index * base}px`,\n    '--bkbl-rh': variant === 'line' ? '1px' : `${base}px`,\n    '--bkbl-c': chosenColor,\n  })\n\n  const classTokens = ['bas', isVisible ? 'v' : 'h']\n\n  return {\n    containerStyle,\n    rowCount,\n    getRowStyle,\n    padding,\n    isVisible,\n    classTokens,\n  }\n}\n","import {\n  formatValue,\n  createStyleOverride,\n  createGridSpanStyles,\n} from '../utils'\n\nexport interface BoxDescriptorParams {\n  base: number\n  lineColor: string\n  width?: number | string\n  height?: number | string\n  span?: number\n  colSpan?: number\n  rowSpan?: number\n  isVisible: boolean\n}\n\nexport interface BoxDescriptor {\n  boxStyle: Record<string, string>\n  gridSpanStyle: Record<string, string>\n  classTokens: string[]\n}\n\nconst BOX_DEFAULTS = (\n  base: number,\n  lineColor: string\n): Record<string, string> => ({\n  '--bkbx-w': 'auto',\n  '--bkbx-h': 'auto',\n  '--bkbx-cl': lineColor,\n  '--bkbx-b': `${base}px`,\n})\n\n/**\n * Computes styles needed to render a Box component.\n * Pure function — framework-agnostic.\n */\nexport function createBoxDescriptor(\n  params: BoxDescriptorParams\n): BoxDescriptor {\n  const { base, lineColor, width, height, span, colSpan, rowSpan, isVisible } =\n    params\n\n  const defaultStyles = BOX_DEFAULTS(base, lineColor)\n  const dimensionVars = ['--bkbx-w', '--bkbx-h']\n\n  // --bkbx-b and --bkbx-cl intentionally omitted: their runtime value\n  // always equals the default (both are derived from the same base/lineColor\n  // inputs that seed BOX_DEFAULTS), so inline overrides would never emit.\n  // Styling happens at the CSS layer via the module's declared defaults.\n  const boxStyle: Record<string, string> = {\n    ...createStyleOverride({\n      key: '--bkbx-w',\n      value: formatValue(width || 'fit-content'),\n      defaultStyles,\n      skipDimensions: { fitContent: dimensionVars },\n    }),\n    ...createStyleOverride({\n      key: '--bkbx-h',\n      value: formatValue(height || 'fit-content'),\n      defaultStyles,\n      skipDimensions: { fitContent: dimensionVars },\n    }),\n  }\n\n  const gridSpanStyle = createGridSpanStyles(span, colSpan, rowSpan)\n\n  const classTokens = ['box']\n  if (isVisible) classTokens.push('v')\n\n  return { boxStyle, gridSpanStyle, classTokens }\n}\n","import { formatValue, createStyleOverride, normalizeValuePair } from '../utils'\n\nexport interface SpacerDescriptorParams {\n  base: number\n  colors: { line: string; flat: string; text: string }\n  width?: number | string\n  height?: number | string\n  color?: string\n  variant: string\n  isVisible: boolean\n}\n\nexport interface SpacerDescriptor {\n  style: Record<string, string>\n  normWidth: number\n  normHeight: number\n  classTokens: string[]\n}\n\nconst SPACER_DEFAULTS = (\n  base: number,\n  textColor: string,\n  flatColor: string,\n  lineColor: string\n): Record<string, string> => ({\n  '--bksp-w': '100%',\n  '--bksp-h': '100%',\n  '--bksp-b': `${base}px`,\n  '--bksp-ct': textColor,\n  '--bksp-cf': flatColor,\n  '--bksp-cl': lineColor,\n})\n\n/**\n * Computes styles needed to render a Spacer component.\n * Pure function — framework-agnostic.\n */\nexport function createSpacerDescriptor(\n  params: SpacerDescriptorParams\n): SpacerDescriptor {\n  const { base, colors, width, height, color, variant, isVisible } = params\n\n  const [normWidth, normHeight] = normalizeValuePair([width, height], [0, 0], {\n    base,\n    suppressWarnings: true,\n  })\n\n  const defaultStyles = SPACER_DEFAULTS(\n    base,\n    colors.text,\n    colors.flat,\n    colors.line\n  )\n  const dimensionVars = ['--bksp-w', '--bksp-h']\n\n  const style: Record<string, string> = {\n    ...createStyleOverride({\n      key: '--bksp-h',\n      value: formatValue(normHeight || '100%'),\n      defaultStyles,\n      skipDimensions: { fullSize: dimensionVars },\n    }),\n    ...createStyleOverride({\n      key: '--bksp-w',\n      value: formatValue(normWidth || '100%'),\n      defaultStyles,\n      skipDimensions: { fullSize: dimensionVars },\n    }),\n    '--bksp-b': `${base}px`,\n    ...createStyleOverride({\n      key: '--bksp-ct',\n      value: color ?? colors.text,\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bksp-cl',\n      value: color ?? colors.line,\n      defaultStyles,\n    }),\n    ...createStyleOverride({\n      key: '--bksp-cf',\n      value: color ?? colors.flat,\n      defaultStyles,\n    }),\n  }\n\n  const classTokens = ['spr']\n  if (isVisible) classTokens.push(variant)\n\n  return { style, normWidth, normHeight, classTokens }\n}\n","import { formatValue } from '../utils'\nimport type { Padding } from '../types'\n\nexport interface PadderDescriptorParams {\n  base: number\n  color: string\n  width?: number | string\n  height?: number | string\n  padding: Padding\n  enableSpacers: boolean\n  isVisible: boolean\n}\n\nexport interface PadderDescriptor {\n  containerStyle: Record<string, string>\n  classTokens: string[]\n}\n\n/**\n * Computes styles needed to render a Padder component.\n * Pure function — framework-agnostic.\n */\nexport function createPadderDescriptor(\n  params: PadderDescriptorParams\n): PadderDescriptor {\n  const { base, color, width, height, padding, enableSpacers, isVisible } =\n    params\n\n  const containerStyle: Record<string, string> = {}\n\n  if (width !== undefined && width !== 'fit-content') {\n    containerStyle['--bkpd-w'] = formatValue(width)\n  }\n  if (height !== undefined && height !== 'fit-content') {\n    containerStyle['--bkpd-h'] = formatValue(height)\n  }\n\n  containerStyle['--bkpd-b'] = `${base}px`\n  containerStyle['--bkpd-c'] = color\n\n  if (!enableSpacers) {\n    const { top, right, bottom, left } = padding\n    if (top > 0 || bottom > 0) {\n      containerStyle.paddingBlock = `${top}px ${bottom}px`\n    }\n    if (left > 0 || right > 0) {\n      containerStyle.paddingInline = `${left}px ${right}px`\n    }\n  }\n\n  const classTokens = ['pad']\n  if (isVisible && enableSpacers) classTokens.push('v')\n\n  return { containerStyle, classTokens }\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--bkb: 8px;--bkzi: 1;--bkzio: 2;--bk-transition-base: .18s ease;--bk-width-default: fit-content;--bk-height-default: fit-content;--bkwf: 100%;--bkhf: 100%;--bkxb: var(--bkb);--bkxw: var(--bk-width-default);--bkxh: var(--bk-height-default);--bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, .6));--bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, .2));--bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, .9));--bkkw: var(--bkwf);--bkkh: var(--bk-height-default);--bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, .6));--bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, .2));--bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, .9));--bkbw: 100%;--bkbh: 100%;--bkrt: 0;--bkrh: 1px;--bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, .15));--bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, .2));--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%, .15));--bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, .2));--bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, .15));--bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, .15));--bklw: var(--bk-width-default);--bklh: var(--bk-height-default);--bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6));--bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, .2));--bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, .9));--bklgtc: repeat(auto-fill, minmax(100px, 1fr));--bklgtr: auto;--bklg: 0;--bklcg: 0;--bklrg: 0;--bklji: stretch;--bklai: stretch;--bkljc: start;--bklac: start;--bkpw: var(--bk-width-default);--bkph: var(--bk-height-default);--bkpc: var(--bk-padder-color-theme, hsla(270, 60%, 40%, .6));--bksw: var(--bkwf);--bksh: var(--bkhf);--bkscl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, .6));--bkscf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, .2));--bksct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))}.guide{--bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, .15));--bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, .2));--bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, .15));--bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, .15))}.baseline{--bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, .15));--bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, .2))}.box{--bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, .6));--bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, .2));--bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, .9))}.stack{--bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, .6));--bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, .2));--bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, .9))}.layout{--bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6));--bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, .2));--bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, .9))}.box{position:relative;width:var(--bkxw);height:var(--bkxh)}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkxcl);pointer-events:none;z-index:var(--bkzi)}.gde{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line{left:-.5px}.cols{position:absolute;top:0;right:0;bottom:0;left: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)}.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)}.ssr{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none;min-height:100px}.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)}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkpc, var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bkzi)}.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;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl, hsla(270, 60%, 40%, .6));z-index:calc(var(--bkzi, 1))}.flat{background-color:var(--bkscf, hsla(230, 100%, 70%, .2))}.stk{display:flex;position:relative;width:var(--bkkw);height:var(--bkkh)}.stk .line:after{border:none}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl, hsla(330, 60%, 40%, .6));pointer-events:none;z-index:var(--bkzio, 2)}.flat{background-color:var(--bkkcf, hsla(0, 100%, 70%, .2))}.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;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6)));pointer-events:none;z-index:var(--bkzio, 2)}.bas{position:absolute;top:0;right:0;bottom:0;left: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)}.ssr{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none}.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 .18s}:root{--bk-color-black-primary: 0, 0%, 10%;--bk-color-black-secondary: 0, 10%, 30%;--bk-color-white-primary: 0, 100%, 90%;--bk-color-white-secondary: 0, 0%, 90%;--bk-color-pink-primary: 300, 60%, 40%;--bk-color-pink-secondary: 260, 100%, 70%;--bk-color-purple-primary: 270, 60%, 40%;--bk-color-purple-secondary: 230, 100%, 70%;--bk-color-blue-primary: 240, 60%, 40%;--bk-color-blue-secondary: 200, 100%, 70%;--bk-color-cyan-primary: 200, 60%, 40%;--bk-color-cyan-secondary: 160, 100%, 70%;--bk-color-green-primary: 160, 60%, 40%;--bk-color-green-secondary: 110, 100%, 70%;--bk-color-yellow-primary: 30, 60%, 40%;--bk-color-yellow-secondary: 70, 100%, 70%;--bk-color-orange-primary: 10, 60%, 40%;--bk-color-orange-secondary: 30, 100%, 70%;--bk-color-red-primary: 330, 60%, 40%;--bk-color-red-secondary: 0, 100%, 70%;--bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), .15);--bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), .15);--bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), .15);--bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), .15);--bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), .6);--bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);--bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), .6);--bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), .2);--bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), .9);--bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), .2);--bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), .2);--bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-padder-color-theme: hsla(var(--bk-color-purple-primary), .6)}@media (prefers-color-scheme: dark){:root{--bk-color-black-primary: 0, 10%, 30%;--bk-color-black-secondary: 0, 0%, 10%;--bk-color-white-primary: 0, 0%, 90%;--bk-color-white-secondary: 0, 100%, 90%;--bk-color-pink-primary: 260, 100%, 70%;--bk-color-pink-secondary: 300, 60%, 40%;--bk-color-purple-primary: 230, 100%, 70%;--bk-color-purple-secondary: 270, 60%, 40%;--bk-color-blue-primary: 200, 100%, 70%;--bk-color-blue-secondary: 240, 60%, 40%;--bk-color-cyan-primary: 160, 100%, 70%;--bk-color-cyan-secondary: 200, 60%, 40%;--bk-color-green-primary: 110, 100%, 70%;--bk-color-green-secondary: 160, 60%, 40%;--bk-color-yellow-primary: 70, 100%, 70%;--bk-color-yellow-secondary: 30, 60%, 40%;--bk-color-orange-primary: 30, 100%, 70%;--bk-color-orange-secondary: 10, 60%, 40%;--bk-color-red-primary: 0, 100%, 70%;--bk-color-red-secondary: 330, 60%, 40%;--bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), .1);--bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), .2);--bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), .6);--bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), .3);--bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), .9);--bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), .1);--bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), .25);--bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), .2);--bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), .2);--bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), .3);--bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), .3);--bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), .7);--bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), .3);--bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1)}}.spr_zbcF6{position:relative;box-sizing:border-box;width:var(--bksw, 100%);height:var(--bksh, auto);flex-shrink:0;display:block;margin:0;padding:0}.line_qHW69:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl, hsla(270, 60%, 40%, .6));z-index:calc(var(--bkzi, 1))}.flat_gqixr{background-color:var(--bkscf, hsla(230, 100%, 70%, .2))}.pad_w2-sL{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_Ew8za .line_ESlzk:after,.stk_7SJoE .line_ESlzk:after{border:none}.v_lhGBy:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkpc, var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bkzi)}.lay_5cMu5{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_5cMu5 .line_j2f8-:after,.stk_3Spwo .line_j2f8-:after{border:none}.v_dprVE:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6)));pointer-events:none;z-index:var(--bkzio, 2)}.box_rDCRX{position:relative;width:var(--bkxw);height:var(--bkxh)}.v_0MMHD:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkxcl);pointer-events:none;z-index:var(--bkzi)}.stk_l-58l{display:flex;position:relative;width:var(--bkkw);height:var(--bkkh)}.stk_l-58l .line_THMgb:after{border:none}.v_-k3qw:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl, hsla(330, 60%, 40%, .6));pointer-events:none;z-index:var(--bkzio, 2)}.flat_j15hF{background-color:var(--bkkcf, hsla(0, 100%, 70%, .2))}.gde_-Naxo{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line_-VS-e{left:-.5px}.cols_8lD6D{position:absolute;top:0;right:0;bottom:0;left: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_rlbsL{min-width:0;width:var(--bkwf);height:var(--bkhf)}.col_rlbsL[data-variant=line]{width:1px;background-color:var(--bkgcl)}.col_rlbsL[data-variant=pattern]{background-color:var(--bkgcp)}.col_rlbsL[data-variant=auto]{background-color:var(--bkgca);overflow:hidden}.col_rlbsL[data-variant=fixed]{background-color:var(--bkgcf)}.ssr_VGvpO{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none;min-height:100px}.bas_e-SXr{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:var(--bkbw);height:var(--bkbh);overflow:hidden}.row_q-FZb{left:0;right:0;position:absolute;top:var(--bkrt);height:var(--bkrh);background-color:var(--bkbc)}.ssr_W1N5g{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none}
+:root{--bk-base:8px;--bk-zi:1;--bk-zio:2;--bk-transition-base:.18s ease;--bk-width-default:fit-content;--bk-height-default:fit-content;--bk-wf:100%;--bk-hf:100%;--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,#a329a399);--bkbx-cf:var(--bk-box-color-flat-theme,#96f3);--bkbx-ct:var(--bk-box-color-text-theme,#a329a3e6);--bkbl-w:100%;--bkbl-h:100%;--bkbl-rt:0;--bkbl-rh:1px;--bkbl-cl:var(--bk-baseline-color-line-theme,#2929a326);--bkbl-cf:var(--bk-baseline-color-flat-theme,#667fff33);--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,#2929a326);--bkgd-cp:var(--bk-guide-color-pattern-theme,#667fff33);--bkgd-ca:var(--bk-guide-color-auto-theme,#66ccff26);--bkgd-cf:var(--bk-guide-color-fixed-theme,#66ccff26);--bkpd-w:var(--bk-width-default);--bkpd-h:var(--bk-height-default);--bkpd-c:var(--bk-padder-color-theme,#6629a399);--bksp-w:var(--bk-wf);--bksp-h:var(--bk-hf);--bksp-cl:var(--bk-spacer-color-line-theme,#6629a399);--bksp-cf:var(--bk-spacer-color-flat-theme,#667fff33);--bksp-ct:var(--bk-spacer-color-text-theme,#6629a3)}.bas_4Emvv{pointer-events:none;width:var(--bkbl-w);height:var(--bkbl-h);contain:layout style paint;position:absolute;inset:0;overflow:hidden}.v_lNfeX{opacity:1;visibility:visible;transition:opacity var(--bk-transition-base), visibility 0s linear}.h_PbNDU{opacity:0;visibility:hidden;transition:opacity var(--bk-transition-base), visibility 0s linear .18s}.row_J1Wva{left:0;right:0;top:var(--bkbl-rt);height:var(--bkbl-rh);background-color:var(--bkbl-c);position:absolute}.ssr_PQAP-{box-sizing:border-box;z-index:1;pointer-events:none;display:grid;position:relative}.gde_4PKz3{box-sizing:border-box;width:var(--bkgd-w,100%);height:var(--bkgd-h,100%);max-width:var(--bkgd-mw,none);pointer-events:none;padding:var(--bkgd-pb,0) var(--bkgd-pi,0);margin-inline:auto;position:absolute;inset:0}.v_yAvN0{opacity:1;visibility:visible;transition:opacity var(--bk-transition-base), visibility 0s linear}.h_XcWcy{opacity:0;visibility:hidden;transition:opacity var(--bk-transition-base), visibility 0s linear .18s}.line_UaLjW{left:-.5px}.cols_ibtT4{column-gap:var(--bkgd-g);grid-template-rows:1fr;grid-template-columns:var(--bkgd-t);justify-content:var(--bkgd-j);width:var(--bk-wf);height:var(--bk-hf);contain:layout style paint;display:grid;position:absolute;inset:0;overflow:hidden}.col_QPSDI{min-width:0;width:var(--bk-wf);height:var(--bk-hf)}.col_QPSDI[data-variant=line]{background-color:var(--bkgd-cl);width:1px}.cols_ibtT4[data-variant=line]{background-image:repeating-linear-gradient(to right, var(--bkgd-line-color,var(--bkgd-cl)) 0 1px, transparent 1px var(--bkgd-line-period,1px));display:block}.col_QPSDI[data-variant=pattern]{background-color:var(--bkgd-cp)}.col_QPSDI[data-variant=auto]{background-color:var(--bkgd-ca);overflow:hidden}.col_QPSDI[data-variant=fixed]{background-color:var(--bkgd-cf)}.ssr_4UN4k{box-sizing:border-box;z-index:1;pointer-events:none;min-height:100px;display:grid;position:relative}.spr_syfhf{box-sizing:border-box;width:var(--bksp-w,100%);height:var(--bksp-h,auto);flex-shrink:0;margin:0;padding:0;display:block;position:relative}.line_nzGsp:after{content:"";border:1px solid var(--bksp-cl,#6629a399);z-index:calc(var(--bk-zi,1));position:absolute;inset:0}.flat_XJWHt{background-color:var(--bksp-cf,#667fff33)}.pad_NizuS{width:var(--bkpd-w,auto);height:var(--bkpd-h,auto);grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.lay_ZdQLz .line_7S7iI:after,.stk_X79YA .line_7S7iI:after{border:none}.v_dowAz:after{content:"";border:1px solid var(--bkpd-c,var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}.box_sPqFs{width:var(--bkbx-w);height:var(--bkbx-h);position:relative}.v_ZrZ5j:after{content:"";border:1px solid var(--bkbx-cl);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}

package/dist/theme/dark.css

@@ -56,12 +56,4 @@
   --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);
 }

package/dist/theme/default.css

@@ -67,15 +67,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);

package/dist/theme/tokens.css

@@ -7,7 +7,7 @@
  * 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
+ * 3. Import it in your application after the component styles
  */
 
 :root {
@@ -67,15 +67,6 @@
   --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: ;

package/dist/theme.css

@@ -66,16 +66,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);
 }
@@ -127,14 +117,6 @@
     --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);

package/package.json

@@ -1,14 +1,17 @@
 {
   "scripts": {
-    "build": "vite build && bun run build:type && bun run build:combine-css",
-    "build:type": "tsc -p tsconfig.build.json",
-    "build:combine-css": "node scripts/combine-css.js",
+    "build": "vite build && bun run build:guide && bun run emit:declarations && bun run bundle:declarations && bun run build:css && bun run verify:artifacts",
+    "build:guide": "vite build --config vite.guide.config.ts",
+    "emit:declarations": "tsc -p tsconfig.build.json",
+    "bundle:declarations": "rollup -c rollup.declarations.config.mjs",
+    "build:css": "node scripts/combine-css.js",
+    "verify:artifacts": "node scripts/verify-artifacts.js",
     "changeset": "changeset",
     "dev": "vite",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "lint": "eslint src --fix",
-    "prepare": "bun run build && bun run build:type",
-    "prepublishOnly": "bun run build && bun run build:type",
+    "format": "prettier --write \"packages/**/*.{ts,tsx,css}\"",
+    "lint": "eslint packages --fix",
+    "prepack": "bun run build",
+    "prepublishOnly": "bun run build",
     "release": "changeset publish",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -18,7 +21,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2 || ^6.0.0"
   },
   "main": "dist/index.cjs",
   "engines": {
@@ -27,15 +30,12 @@
   "keywords": [
     "react",
     "grid",
-    "layout",
     "typescript",
     "baseline",
     "guide",
     "box",
-    "layout",
     "typography",
     "spacing",
-    "stack",
     "padding",
     "debug",
     "dev-tool",
@@ -47,36 +47,44 @@
     "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": "^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",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "vite": "6.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "3.0.8"
+    "jsdom": "^29.0.2",
+    "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": "^7.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3",
+    "vite-plugin-static-copy": "^4.0.0",
+    "vitest": "^4.1.2"
   },
   "name": "baseline-kit",
-  "version": "3.0.2",
+  "version": "5.0.0",
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "homepage": "https://github.com/dnvt/baseline-kit#readme",
   "types": "dist/index.d.ts",
   "exports": {
@@ -86,11 +94,43 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.mjs"
     },
+    "./guide": {
+      "types": "./dist/guide.d.ts",
+      "import": "./dist/guide.mjs",
+      "require": "./dist/guide.cjs",
+      "default": "./dist/guide.mjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.cjs",
+      "default": "./dist/core.mjs"
+    },
     "./styles": {
       "import": "./dist/styles.css",
       "require": "./dist/styles.css",
       "default": "./dist/styles.css"
     },
+    "./styles/guide": {
+      "import": "./dist/guide.css",
+      "require": "./dist/guide.css",
+      "default": "./dist/guide.css"
+    },
+    "./styles/full": {
+      "import": "./dist/baseline-kit.css",
+      "require": "./dist/baseline-kit.css",
+      "default": "./dist/baseline-kit.css"
+    },
+    "./styles/reset": {
+      "import": "./dist/reset.css",
+      "require": "./dist/reset.css",
+      "default": "./dist/reset.css"
+    },
+    "./reset": {
+      "import": "./dist/reset.css",
+      "require": "./dist/reset.css",
+      "default": "./dist/reset.css"
+    },
     "./theme": {
       "import": "./dist/theme.css",
       "require": "./dist/theme.css",
@@ -117,6 +157,8 @@
       "default": "./dist/baseline-kit.css"
     },
     "./dist/styles.css": "./dist/styles.css",
+    "./dist/guide.css": "./dist/guide.css",
+    "./dist/reset.css": "./dist/reset.css",
     "./dist/theme.css": "./dist/theme.css",
     "./dist/theme/default.css": "./dist/theme/default.css",
     "./dist/theme/dark.css": "./dist/theme/dark.css",
@@ -132,6 +174,8 @@
   "style": "dist/styles.css",
   "sideEffects": [
     "dist/styles.css",
+    "dist/guide.css",
+    "dist/reset.css",
     "dist/theme.css",
     "dist/theme/default.css",
     "dist/theme/dark.css",
@@ -147,9 +191,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."
 }

package/dist/components/Baseline/Baseline.d.ts

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { ComponentsProps } from '@components';
-import { Variant } from '../types';
-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;
-/**
- * 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 declare const Baseline: React.NamedExoticComponent<BaselineProps>;

package/dist/components/Baseline/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file Baseline Component Exports (components/Baseline/index.ts)
- * @description Baseline component entry point
- * @module baseline-kit/components/Baseline
- */
-export * from './Baseline';

package/dist/components/Box/Box.d.ts

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { ComponentsProps } from '../types';
-/**
- * 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;
-/**
- * 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 declare const Box: React.NamedExoticComponent<{
-    /** 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;
-} & {
-    debugging?: import("..").DebuggingMode;
-    className?: string;
-    style?: React.CSSProperties;
-    height?: React.CSSProperties["height"];
-    width?: React.CSSProperties["width"];
-} & import("..").SpacingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Box/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file Box Component Exports (components/Box/index.ts)
- * @description Box component entry point
- * @module baseline-kit/components/Box
- */
-export * from './Box';