baseline-kit 3.0.1 → 5.0.0

package/dist/guide.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide.mjs","names":[],"sources":["../packages/core/src/config/defaults.ts","../packages/core/src/config/merge.ts","../packages/react/src/components/Config/Config.tsx","../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/merge.ts","../packages/core/src/validation/guide.ts","../packages/core/src/utils/grid.ts","../packages/core/src/descriptors/guide.ts","../packages/react/src/hooks/useConfig.ts","../packages/react/src/hooks/useDebug.ts","../packages/dom/src/timing.ts","../packages/dom/src/measure.ts","../packages/react/src/hooks/useMeasure.ts","../packages/dom/src/viewport.ts","../packages/react/src/hooks/useGuide.ts","../packages/react/src/hooks/useIsClient.ts","../packages/react/src/utils/ssr.tsx","../packages/react/src/utils/merge.ts","../packages/react/src/components/Guide/styles.module.css","../packages/react/src/components/Guide/Guide.tsx"],"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","import * as React from 'react'\nimport type { ConfigSchema } from '@baseline-kit/core/config/schema'\nimport { DEFAULT_CONFIG } from '@baseline-kit/core/config/defaults'\nimport {\n  mergeConfig,\n  createCSSVariables,\n} from '@baseline-kit/core/config/merge'\n\n// Re-export types that consumers need\nexport type { DebuggingMode } from '@baseline-kit/core/types'\nexport type { ConfigSchema } from '@baseline-kit/core/config/schema'\n\n// Create the context\nconst ConfigContext = React.createContext<ConfigSchema>(DEFAULT_CONFIG)\nConfigContext.displayName = 'ConfigContext'\n\n// Update to use React 19's use hook instead of useContext\nexport const useDefaultConfig = () => React.use(ConfigContext)\n\ntype ConfigProps = {\n  children: React.ReactNode\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\n/**\n * Configuration provider for baseline-kit components.\n */\nexport function Config({\n  children,\n  base,\n  baseline,\n  guide,\n  spacer,\n  box,\n  padder,\n}: ConfigProps) {\n  const parentConfig = useDefaultConfig()\n\n  const value = React.useMemo(() => {\n    return mergeConfig({\n      parentConfig,\n      base,\n      baseline,\n      guide,\n      spacer,\n      box,\n      padder,\n    })\n  }, [parentConfig, base, baseline, guide, spacer, box, padder])\n\n  return <ConfigContext value={value}>{children}</ConfigContext>\n}\n\n// Re-export createCSSVariables and mergeConfig for consumers\nexport { createCSSVariables, mergeConfig }\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 { 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 { useMemo } from 'react'\nimport type { ConfigSchema } from '@baseline-kit/core/config/schema'\nimport { useDefaultConfig } from '../components/Config/Config'\n\n/** Type helper that merges base configuration with component-specific settings. */\nexport type ComponentConfig<K extends keyof ConfigSchema> = ConfigSchema[K] & {\n  base: number\n}\n\n/**\n * Hook for accessing component-specific theme configuration.\n */\nexport function useConfig<K extends keyof ConfigSchema>(\n  component: K\n): ComponentConfig<K> {\n  const defaultConfig = useDefaultConfig()\n  return useMemo(() => {\n    return Object.assign(\n      { base: defaultConfig.base },\n      defaultConfig[component]\n    ) as ComponentConfig<K>\n  }, [defaultConfig, component])\n}\n","import { useMemo } from 'react'\nimport { resolveDebugState } from '@baseline-kit/core/utils/merge'\nimport type { DebuggingMode } from '@baseline-kit/core/types'\n\n/**\n * Hook for managing component debug state and visibility.\n * Delegates to pure resolveDebugState in core.\n */\nexport function useDebug(\n  debuggingProp?: DebuggingMode,\n  debuggingConfig?: DebuggingMode\n) {\n  return useMemo(\n    () => resolveDebugState(debuggingProp, debuggingConfig),\n    [debuggingProp, debuggingConfig]\n  )\n}\n","export const debounce = <T extends (...args: unknown[]) => void>(\n  fn: T,\n  delay: number\n): [T, () => void] => {\n  let timer: ReturnType<typeof setTimeout> | null = null\n\n  const cancel = () => {\n    if (timer) {\n      clearTimeout(timer)\n      timer = null\n    }\n  }\n\n  const debounced = ((...args) => {\n    cancel()\n    timer = setTimeout(() => fn(...args), delay)\n  }) as T\n\n  return [debounced, cancel]\n}\n\nexport const rafThrottle = <T extends (...args: never[]) => void>(\n  fn: T\n): [T, () => void] => {\n  let rafId: number | null = null\n  let lastArgs: Parameters<T> | null = null\n\n  const cancel = () => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId)\n      rafId = null\n      lastArgs = null\n    }\n  }\n\n  const throttled = (...args: Parameters<T>) => {\n    lastArgs = args\n\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId)\n    }\n\n    rafId = requestAnimationFrame(() => {\n      fn(...lastArgs!)\n      rafId = null\n      lastArgs = null\n    })\n  }\n\n  return [throttled as T, cancel]\n}\n","/**\n * Element measurement observer.\n */\n\nimport { rafThrottle } from './timing'\n\nexport interface MeasureRect {\n  width: number\n  height: number\n}\n\nexport interface MeasureObserverHandle {\n  /** Force an immediate re-measure */\n  refresh(): void\n  /** Stop observing */\n  disconnect(): void\n}\n\n/**\n * Observes an element's dimensions via ResizeObserver.\n * Calls `onChange` with rounded width/height whenever the size changes.\n */\nexport function createMeasureObserver(\n  el: Element,\n  onChange: (rect: MeasureRect) => void\n): MeasureObserverHandle {\n  let prev: MeasureRect = { width: 0, height: 0 }\n\n  const measure = () => {\n    try {\n      const rect = el.getBoundingClientRect()\n      const next: MeasureRect = {\n        width: Math.round(rect.width),\n        height: Math.round(rect.height),\n      }\n      if (next.width !== prev.width || next.height !== prev.height) {\n        prev = next\n        onChange(next)\n      }\n    } catch {\n      // element may have been removed\n    }\n  }\n\n  const [throttledMeasure, cancelMeasure] = rafThrottle(measure)\n\n  // Initial measurement\n  measure()\n\n  const observer = new ResizeObserver(throttledMeasure)\n  observer.observe(el)\n\n  return {\n    refresh: throttledMeasure,\n    disconnect() {\n      observer.disconnect()\n      cancelMeasure()\n    },\n  }\n}\n","import * as React from 'react'\nimport { createMeasureObserver } from '@baseline-kit/dom/measure'\nimport type { MeasureRect } from '@baseline-kit/dom/measure'\n\nexport interface MeasureResult extends MeasureRect {\n  refresh: () => void\n}\n\nconst ZERO: MeasureRect = { width: 0, height: 0 }\n\n/**\n * Hook for measuring and tracking DOM element dimensions.\n * Thin wrapper around the imperative createMeasureObserver from @baseline-kit/dom.\n */\nexport function useMeasure(\n  ref: React.RefObject<HTMLElement | null>\n): MeasureResult {\n  const [dimensions, setDimensions] = React.useState<MeasureRect>(ZERO)\n  const handleRef = React.useRef<ReturnType<\n    typeof createMeasureObserver\n  > | null>(null)\n\n  React.useLayoutEffect(() => {\n    if (typeof window === 'undefined' || !ref.current) return\n\n    const handle = createMeasureObserver(ref.current, (rect) => {\n      setDimensions((prev) =>\n        prev.width === rect.width && prev.height === rect.height ? prev : rect\n      )\n    })\n    handleRef.current = handle\n\n    return () => {\n      handle.disconnect()\n      handleRef.current = null\n    }\n  }, [ref])\n\n  const refresh = React.useCallback(() => {\n    handleRef.current?.refresh()\n  }, [])\n\n  return { ...dimensions, refresh }\n}\n","import type { ConversionContext } from '@baseline-kit/core'\n\n/**\n * Returns the current browser viewport for vw/vh/vmin/vmax conversion.\n * Returns an empty object on the server so callers fall back to the\n * core defaults without crashing.\n */\nexport function getViewportContext(): Partial<ConversionContext> {\n  if (typeof window === 'undefined') return {}\n  return {\n    viewportWidth: window.innerWidth,\n    viewportHeight: window.innerHeight,\n  }\n}\n","import * as React from 'react'\nimport type { GuideConfig } from '@baseline-kit/core/types'\nimport { calculateGuideTemplate } from '@baseline-kit/core/utils/grid'\nimport { getViewportContext } from '@baseline-kit/dom/viewport'\nimport { useMeasure } from './useMeasure'\n\nexport type { GuideResult } from '@baseline-kit/core/utils/grid'\n\n/**\n * Hook for calculating grid layout parameters based on container dimensions.\n */\nexport function useGuide(\n  ref: React.RefObject<HTMLElement | null>,\n  config: GuideConfig\n) {\n  const { width } = useMeasure(ref)\n  return React.useMemo(\n    () => calculateGuideTemplate(width, config, getViewportContext()),\n    [config, width]\n  )\n}\n","import { useEffect, useState } from 'react'\n\n/**\n * Hook to determine if the code is running on the client side.\n */\nexport function useIsClient() {\n  const [isClient, setIsClient] = useState(false)\n\n  useEffect(() => {\n    setIsClient(true)\n  }, [])\n\n  return isClient\n}\n","/**\n * React-specific SSR utilities (ClientOnly component)\n */\nimport * as React from 'react'\nimport { useIsClient } from '../hooks/useIsClient'\n\ninterface ClientOnlyProps {\n  children: React.ReactNode\n  fallback?: React.ReactNode\n}\n\n/**\n * A utility component that only renders its children on the client side.\n * @internal Not part of the public API\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n  const isClient = useIsClient()\n\n  if (!isClient) {\n    return <>{fallback}</>\n  }\n\n  return <>{children}</>\n}\n","import * as React from 'react'\n\n/**\n * Combines descriptor style records and React style objects.\n * Accepts Record<string, string> from descriptors and React.CSSProperties.\n */\nexport function mergeStyles(\n  ...styles: Array<Record<string, string> | React.CSSProperties | undefined>\n): React.CSSProperties {\n  return Object.assign({}, ...styles.filter(Boolean))\n}\n\n/**\n * Merges multiple React refs into a single callback ref.\n */\nexport function mergeRefs<T>(\n  ...refs: Array<React.Ref<T> | null | undefined>\n): React.RefCallback<T> {\n  return (node: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(node)\n      } else {\n        Object.assign(ref, { current: node })\n      }\n    })\n  }\n}\n",".gde {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  width: var(--bkgd-w, 100%);\n  height: var(--bkgd-h, 100%);\n  max-width: var(--bkgd-mw, none);\n  margin-inline: auto;\n  pointer-events: none;\n  padding: var(--bkgd-pb, 0) var(--bkgd-pi, 0);\n}\n\n.v {\n  opacity: 1;\n  visibility: visible;\n  transition:\n    opacity var(--bk-transition-base),\n    visibility 0ms linear;\n}\n\n.h {\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--bk-transition-base),\n    visibility 0ms linear 180ms;\n}\n\n.line {\n  left: -0.5px; /* Alignment correction for line variant */\n}\n\n.cols {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  column-gap: var(--bkgd-g);\n  grid-template-rows: 1fr;\n  grid-template-columns: var(--bkgd-t);\n  justify-content: var(--bkgd-j);\n  width: var(--bk-wf);\n  height: var(--bk-hf);\n  overflow: hidden;\n  contain: layout style paint;\n}\n\n.col {\n  min-width: 0;\n  width: var(--bk-wf);\n  height: var(--bk-hf);\n}\n\n/* Variant-specific styles */\n.col[data-variant='line'] {\n  width: 1px;\n  background-color: var(--bkgd-cl);\n}\n\n.cols[data-variant='line'] {\n  display: block;\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--bkgd-line-color, var(--bkgd-cl)) 0 1px,\n    transparent 1px var(--bkgd-line-period, 1px)\n  );\n}\n\n.col[data-variant='pattern'] {\n  background-color: var(--bkgd-cp);\n}\n\n.col[data-variant='auto'] {\n  background-color: var(--bkgd-ca);\n  overflow: hidden;\n}\n\n.col[data-variant='fixed'] {\n  background-color: var(--bkgd-cf);\n}\n\n/* Style for SSR rendering */\n.ssr {\n  box-sizing: border-box;\n  display: grid;\n  position: relative;\n  z-index: 1;\n  pointer-events: none;\n  min-height: 100px; /* Ensures a minimum height during SSR */\n}\n","import * as React from 'react'\nimport type { ComponentsProps } from '../types'\nimport { useConfig } from '../../hooks/useConfig'\nimport { useDebug } from '../../hooks/useDebug'\nimport { useMeasure } from '../../hooks/useMeasure'\nimport { useGuide } from '../../hooks/useGuide'\nimport { cx } from '@baseline-kit/core/utils/merge'\nimport {\n  createGuideDescriptor,\n  createGuideConfig,\n} from '@baseline-kit/core/descriptors/guide'\nimport type { GuideVariant, GuideConfig } from '@baseline-kit/core/types'\nimport { ClientOnly } from '../../utils/ssr'\nimport { mergeStyles } from '../../utils/merge'\nimport styles from './styles.module.css'\n\nexport type { GuideConfig }\n\nexport type GuideProps = {\n  align?: React.CSSProperties['justifyContent']\n  variant?: GuideVariant\n  columns?: number | readonly (string | number | undefined | 'auto')[]\n  columnWidth?: React.CSSProperties['width']\n  maxWidth?: React.CSSProperties['maxWidth']\n  color?: React.CSSProperties['color']\n  children?: React.ReactNode\n  gap?: number\n  ssrMode?: boolean\n} & ComponentsProps &\n  Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>\n\nexport const Guide = React.memo(function Guide({\n  className,\n  debugging,\n  style,\n  variant: variantProp,\n  align = 'center',\n  gap: gapProp,\n  height,\n  width,\n  columns,\n  columnWidth,\n  maxWidth,\n  color,\n  children,\n  ssrMode = false,\n  ...props\n}: GuideProps) {\n  const config = useConfig('guide')\n  const variant = variantProp ?? config.variant\n  const gap = typeof gapProp === 'number' ? gapProp : 0\n  const { isShown } = useDebug(debugging, config.debugging)\n\n  if (!isShown) {\n    return (\n      <div\n        className={cx(styles.gde, styles.h, className)}\n        style={style}\n        data-testid=\"guide\"\n        data-variant={variant}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  const ssrFallback = (\n    <div\n      className={cx(styles.gde, styles.h, styles.ssr, className)}\n      style={{\n        width: width ?? '100%',\n        height: height ?? '100%',\n        maxWidth: maxWidth ?? 'none',\n        ...style,\n      }}\n      data-testid=\"guide\"\n      data-variant={variant}\n      aria-hidden=\"true\"\n    >\n      {children}\n    </div>\n  )\n\n  if (ssrMode) {\n    return ssrFallback\n  }\n\n  return (\n    <ClientOnly fallback={ssrFallback}>\n      <GuideImpl\n        className={className}\n        debugging={debugging}\n        style={style}\n        variant={variant}\n        align={align}\n        gap={gap}\n        height={height}\n        width={width}\n        columns={columns}\n        columnWidth={columnWidth}\n        maxWidth={maxWidth}\n        color={color}\n        {...props}\n      >\n        {children}\n      </GuideImpl>\n    </ClientOnly>\n  )\n})\n\nconst GuideImpl = React.memo(function GuideImpl({\n  className,\n  debugging,\n  style,\n  variant,\n  align = 'center',\n  gap,\n  height,\n  width,\n  columns,\n  columnWidth,\n  maxWidth,\n  color,\n  children,\n  ...props\n}: GuideProps) {\n  const config = useConfig('guide')\n  const { isShown } = useDebug(debugging, config.debugging)\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n  useMeasure(containerRef)\n\n  const resolvedVariant = (variant ?? config.variant) as GuideVariant\n  const resolvedGap = typeof gap === 'number' ? gap : 0\n\n  const gridConfig = React.useMemo(\n    () =>\n      createGuideConfig({\n        variant: resolvedVariant,\n        base: config.base,\n        gap: resolvedGap,\n        columns,\n        columnWidth: columnWidth as number | string | undefined,\n      }),\n    [resolvedVariant, config.base, resolvedGap, columns, columnWidth]\n  )\n\n  const { template, columnsCount, calculatedGap } = useGuide(\n    containerRef,\n    gridConfig\n  )\n\n  const descriptor = React.useMemo(\n    () =>\n      createGuideDescriptor({\n        base: config.base,\n        colors: config.colors,\n        variant: resolvedVariant,\n        align: align || 'center',\n        width,\n        height,\n        columnWidth,\n        maxWidth,\n        color,\n        template,\n        columnsCount,\n        calculatedGap,\n        isVisible: isShown,\n      }),\n    [\n      config.base,\n      config.colors,\n      resolvedVariant,\n      align,\n      width,\n      height,\n      columnWidth,\n      maxWidth,\n      color,\n      template,\n      columnsCount,\n      calculatedGap,\n      isShown,\n    ]\n  )\n\n  const containerStyles = React.useMemo(\n    () => mergeStyles(descriptor.containerStyle, style),\n    [descriptor.containerStyle, style]\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      data-testid=\"guide\"\n      aria-hidden=\"true\"\n      className={cx(...descriptor.classTokens.map((t) => styles[t]), className)}\n      data-variant={variant}\n      style={containerStyles}\n      {...props}\n    >\n      {isShown && (\n        <div className={styles.cols} data-variant={variant}>\n          {!descriptor.isLineVariant &&\n            Array.from({ length: descriptor.columnsCount }, (_, i) => (\n              <div\n                key={i}\n                className={styles.col}\n                data-column-index={i}\n                data-variant={variant}\n                style={{ backgroundColor: descriptor.columnColor }}\n              />\n            ))}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n"],"mappings":"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"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),W=require("react");function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const l=ye(W),ve={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)"},xe={line:"var(--bk-baseline-color-line-theme)",flat:"var(--bk-baseline-color-flat-theme)"},we={line:"var(--bk-spacer-color-line-theme)",flat:"var(--bk-spacer-color-flat-theme)",text:"var(--bk-spacer-color-text-theme)"},Se={line:"var(--bk-box-color-line-theme)",flat:"var(--bk-box-color-flat-theme)",text:"var(--bk-box-color-text-theme)"},Ce={line:"var(--bk-stack-color-line-theme)",flat:"var(--bk-stack-color-flat-theme)",text:"var(--bk-stack-color-text-theme)"},Me={line:"var(--bk-layout-color-line-theme)",flat:"var(--bk-layout-color-flat-theme)",text:"var(--bk-layout-color-text-theme)"},Re="var(--bk-padder-color-theme)",je={base:8,baseline:{variant:"line",debugging:"hidden",colors:xe},guide:{variant:"line",debugging:"hidden",colors:ve},spacer:{variant:"line",debugging:"hidden",colors:we},box:{debugging:"hidden",colors:Se},stack:{debugging:"hidden",colors:Ce},layout:{debugging:"hidden",colors:Me},padder:{debugging:"hidden",color:Re}},se=l.createContext(je);se.displayName="ConfigContext";const fe=()=>l.use(se),$e=e=>{const{parentConfig:t,base:n,baseline:s,guide:o,spacer:r,box:i,stack:a,layout:c,padder:d}=e;return{base:n??t.base,baseline:{...t.baseline,...s},guide:{...t.guide,...o},spacer:{...t.spacer,...r},box:{...t.box,...i},stack:{...t.stack,...a},layout:{...t.layout,...c},padder:{...t.padder,...d}}};function P({children:e,base:t,stack:n,baseline:s,guide:o,layout:r,spacer:i,box:a,padder:c}){const d=fe(),b=l.useMemo(()=>$e({parentConfig:d,base:t,baseline:s,guide:o,spacer:i,box:a,stack:n,layout:r,padder:c}),[d,t,s,o,i,a,n,r,c]);return f.jsx(se,{value:b,children:e})}function Ee(e){const t=e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);if(!t)return null;const n=parseFloat(t[1]),s=t[2];return{value:n,unit:s}}function O(e,t){return e===void 0&&t!==void 0?`${t}px`:e==="auto"||typeof e=="string"&&/^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e)?String(e):typeof e=="number"?`${e}px`:e??""}const Ve={parentSize:0,viewportWidth:typeof window<"u"?window.innerWidth:1920,viewportHeight:typeof window<"u"?window.innerHeight:1080,rootFontSize:16,parentFontSize:16},ie={px:1,in:96,cm:37.8,mm:3.78,pt:1.33,pc:16},Oe=["em","rem","vh","vw","vmin","vmax","%"];function be(e,t){if(typeof e=="number")return e;if(typeof e!="string")return null;const n=Ee(e);if(!n)return null;const{value:s,unit:o}=n;if(o in ie)return s*ie[o];if(o==="auto")return null;if(Oe.includes(o)){const r={...Ve,...t};switch(o){case"em":return s*r.parentFontSize;case"rem":return s*r.rootFontSize;case"vh":return s/100*r.viewportHeight;case"vw":return s/100*r.viewportWidth;case"vmin":return s/100*Math.min(r.viewportWidth,r.viewportHeight);case"vmax":return s/100*Math.max(r.viewportWidth,r.viewportHeight);case"%":return s/100*r.parentSize;default:return null}}return null}function Ge(e,t,n){return Math.min(Math.max(e,t),n)}function _e(e){const{height:t,top:n,bottom:s,base:o}=e,r=(t??0)-(n+s);return Math.max(1,Math.floor(r/o))}function oe(e,t={}){const{base:n=8,round:s=!0,clamp:o,suppressWarnings:r=!1}=t;if(e==="auto")return n;let i=null;if(typeof e=="number")i=e;else if(typeof e=="string"){const d=be(e);d===null?(r||console.error(`Failed to convert "${e}" to pixels. Falling back to base ${n}.`),i=n):i=d}i===null&&(i=n);const a=s?Math.round(i/n)*n:i,c=o!==void 0?Ge(a,o.min??-1/0,o.max??1/0):a;return!r&&c!==i&&console.warn(`Normalized ${i} to ${c} to match base ${n}px.`),c}function me(e,t,n){if(!e||e[0]===void 0&&e[1]===void 0)return t;const s=e[0]!==void 0?oe(e[0],n):t[0],o=e[1]!==void 0?oe(e[1],n):t[1];return[s,o]}function Z(e){if("padding"in e&&e.padding!=null)return De(e.padding);const t="block"in e&&e.block!=null?Ae(e.block):{top:0,bottom:0},n="inline"in e&&e.inline!=null?Le(e.inline):{left:0,right:0};return{top:t.top,right:n.right,bottom:t.bottom,left:n.left}}function De(e){if(typeof e=="number")return{top:e,right:e,bottom:e,left:e};if(Array.isArray(e)){if(e.length===2){const[t,n]=e;return{top:t,right:n,bottom:t,left:n}}if(e.length>=4){const[t,n,s,o]=e;return{top:t??0,right:n??0,bottom:s??0,left:o??0}}}if(typeof e=="object"&&!Array.isArray(e)){const t=e.top??0,n=e.bottom??0,s=e.left??0,o=e.right??0;return{top:t,right:o,bottom:n,left:s}}return{top:0,right:0,bottom:0,left:0}}function Ae(e){if(typeof e=="number")return{top:e,bottom:e};if(Array.isArray(e)){const[t,n]=e;return{top:t??0,bottom:n??0}}return typeof e=="object"?{top:e.start??0,bottom:e.end??0}:{top:0,bottom:0}}function Le(e){if(typeof e=="number")return{left:e,right:e};if(Array.isArray(e)){const[t,n]=e;return{left:t??0,right:n??0}}return typeof e=="object"?{left:e.start??0,right:e.end??0}:{left:0,right:0}}function Ie(e,t,n,s){const o=Z({padding:n});if(s==="none")return o;if(s==="height"){const r=e%t;r!==0&&(o.bottom+=t-r)}if(s==="clamp"){o.top=o.top%t;const r=e%t;r!==0&&(o.bottom+=t-r),o.bottom=o.bottom%t}return o}const Ne=(e,t,n)=>{const s={};return e!==void 0?(s.gridColumn=`span ${e}`,s.gridRow=`span ${e}`):(t!==void 0&&(s.gridColumn=`span ${t}`),n!==void 0&&(s.gridRow=`span ${n}`)),s},z=(...e)=>e.filter(Boolean).join(" ").trim(),X=(...e)=>Object.assign({},...e.filter(t=>t!==void 0));function Be(e,t){if(e)if(typeof e=="function")e(t);else try{Object.assign(e,{current:t})}catch(n){console.error("Error assigning ref:",n)}}function ge(...e){return t=>{e.forEach(n=>{Be(n,t)})}}function y(e,t,n){var a,c,d;const s=typeof e=="string"?e:e.key,o=typeof e=="string"?t:e.value,r=typeof e=="string"?n:e.defaultStyles,i=typeof e=="object"?e.skipDimensions:void 0;if(i){if((a=i.fitContent)!=null&&a.includes(s)&&o==="fit-content")return{};if((c=i.auto)!=null&&c.includes(s)&&o==="auto")return{};if((d=i.fullSize)!=null&&d.includes(s)&&(o==="100%"||o==="100vh"||o==="100vw"))return{}}return o!==r[s]?{[s]:o}:{}}const he=e=>{let t=null,n=null;return(...o)=>{n=o,t!==null&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>{e(...n),t=null,n=null})}};function We(){const[e,t]=W.useState(!1);return W.useEffect(()=>{t(!0)},[]),e}const re=typeof window>"u";function ze(e,t){if(re)return t;try{return e()}catch{return t}}function K(e,t,n){return!e||re?t:n}function pe({children:e,fallback:t=null}){return We()?f.jsx(f.Fragment,{children:e}):f.jsx(f.Fragment,{children:t})}function J(e){const[t,n]=l.useState({width:0,height:0}),s=l.useCallback(()=>{if(e.current)try{const r=e.current.getBoundingClientRect(),i={width:r?Math.round(r.width):0,height:r?Math.round(r.height):0};n(a=>a.width===i.width&&a.height===i.height?a:i)}catch{n({width:0,height:0})}},[e]),o=l.useMemo(()=>he(s),[s]);return l.useLayoutEffect(()=>{typeof window>"u"||s()},[s]),l.useLayoutEffect(()=>{if(typeof window>"u"||!e.current)return;const r=new ResizeObserver(()=>{o()});return r.observe(e.current),()=>{r.disconnect()}},[e,o]),{...t,refresh:o}}function Fe({totalLines:e,lineHeight:t,containerRef:n,buffer:s=0}){const o=W.useMemo(()=>typeof s=="number"?s:parseInt(s,10)||0,[s]),r=W.useCallback(()=>{const b=n.current;if(!b)return{start:0,end:e};if(b.closest(".block"))return{start:0,end:e};const M=b.getBoundingClientRect().top+window.scrollY,v=Math.max(0,window.scrollY-M-o),m=v+window.innerHeight+o*2,w=Math.max(0,Math.floor(v/t)),p=Math.min(e,Math.ceil(m/t));return{start:w,end:p}},[e,t,n,o]),[i,a]=W.useState(r);He(["scroll","resize"],()=>{d()});const c=W.useCallback(()=>{a(b=>{const u=r();return b.start!==u.start||b.end!==u.end?u:b})},[r]),d=W.useMemo(()=>he(c),[c]);return W.useLayoutEffect(()=>{const b=n.current;if(!b)return;const u=new IntersectionObserver(d,{threshold:0});return u.observe(b),d(),()=>{u.disconnect()}},[n,r,d]),i}function He(e,t){const n=W.useCallback(t,[t]);W.useLayoutEffect(()=>{const s=()=>n();return e.forEach(o=>window.addEventListener(o,s)),()=>e.forEach(o=>window.removeEventListener(o,s))},[e,n])}function Q(e,{base:t=8,snapping:n="none",spacing:s={},warnOnMisalignment:o=!1}={}){if(t<1)throw new Error("Base must be >= 1 for baseline alignment.");const{height:r}=J(e),i=l.useRef(!1),a=l.useRef(!1);return l.useMemo(()=>{const c=Z({padding:s}),d=r%t===0;if(!d&&o&&process.env.NODE_ENV==="development"&&(a.current||(console.warn(`[useBaseline] Element height (${r}px) is not aligned with base (${t}px).`),a.current=!0)),n==="none")return{padding:c,isAligned:d,height:r};if(i.current)return{padding:c,isAligned:d,height:r};const b=Ie(r,t,c,n);return i.current=!0,{padding:b,isAligned:d,height:r}},[t,n,s,o,r])}const Te="spr_zbcF6",Ue="line_qHW69",qe="flat_gqixr",ae={spr:Te,line:Ue,flat:qe},Xe=(e,t,n,s)=>({"--bksw":"100%","--bksh":"100%","--bksb":`${e}px`,"--bksct":t,"--bkscf":n,"--bkscl":s}),Ye=(e,t,n,s)=>{if(!e||!t)return null;const o=typeof n=="number"?n:0,r=typeof s=="number"?s:0;return f.jsxs(f.Fragment,{children:[r!==0&&f.jsx("span",{children:t(r,"height")},"height"),o!==0&&f.jsx("span",{children:t(o,"width")},"width")]})},ke=l.memo(function({height:t,width:n,indicatorNode:s,debugging:o,variant:r,base:i,color:a,className:c,style:d,children:b,ssrMode:u=!1,...M}){const v=l.useRef(null),m=H("spacer"),{isShown:w}=U(o,m.debugging),p=r??m.variant,h=i??m.base,[G,S]=l.useState(!1);l.useEffect(()=>{S(!0)},[]);const[x,R]=l.useMemo(()=>me([n,t],[0,0],{base:h,suppressWarnings:!0}),[n,t,h]),A=K(G&&!u,!1,w&&s!==void 0),g=l.useMemo(()=>A?Ye(w,s,x,R):null,[A,w,s,x,R]),V=l.useMemo(()=>Xe(h,m.colors.text,m.colors.flat,m.colors.line),[h,m.colors]),D=l.useMemo(()=>{const k=O(R||"100%"),N=O(x||"100%"),_=`${h}px`,E=["--bksw","--bksh"],L={...y({key:"--bksh",value:k,defaultStyles:V,skipDimensions:{fullSize:E}}),...y({key:"--bksw",value:N,defaultStyles:V,skipDimensions:{fullSize:E}}),"--bksb":_,...y({key:"--bksct",value:a??m.colors.text,defaultStyles:V}),...y({key:"--bkscl",value:a??m.colors.line,defaultStyles:V}),...y({key:"--bkscf",value:a??m.colors.flat,defaultStyles:V})};return X(L,d)},[x,R,a,h,m.colors,V,d]);return f.jsxs("div",{ref:v,"data-testid":"spacer",className:z(ae.spr,w&&ae[p],c),"data-variant":p,"data-height":typeof R=="number"?`${R}px`:R,style:D,...M,children:[g,b]})}),Ze="pad_w2-sL",Ke="v_lhGBy",ne={pad:Ze,v:Ke},Pe=(e,t,n,s)=>{const o={};return e!=="fit-content"&&(o["--bkpw"]=O(e||"fit-content")),t!=="fit-content"&&(o["--bkph"]=O(t||"fit-content")),o["--bkpb"]=`${n}px`,o["--bkpc"]=s,o},Je=(e,t)=>{const{top:n,right:s,bottom:o,left:r}=t,i={};return e||((n>0||o>0)&&(i.paddingBlock=`${n}px ${o}px`),(r>0||s>0)&&(i.paddingInline=`${r}px ${s}px`)),i},Qe=(e,t,n)=>{const s=e||"line",o=t||"none",r=(i,a)=>f.jsx(ke,{variant:s,debugging:a===0||i===0?"none":o,indicatorNode:n,height:a!=="100%"?a:void 0,width:i!=="100%"?i:void 0});return r.displayName="PadderSpacer",r},ee=l.memo(l.forwardRef(function({children:t,className:n,debugging:s,height:o,indicatorNode:r,style:i,width:a,ssrMode:c=!1,...d},b){const u=H("padder"),{variant:M}=H("spacer"),v=l.useMemo(()=>Z(d),[d]),{isShown:m,isNone:w,debugging:p}=U(s,u.debugging),h=!w,[G,S]=l.useState(!1);l.useEffect(()=>{S(!0)},[]);const x=l.useRef(null),R=Q(x,{base:u.base,snapping:"height",spacing:v,warnOnMisalignment:!w}),A={padding:{top:v.top||0,right:v.right||0,bottom:v.bottom||0,left:v.left||0}},{padding:g}=K(G&&!c,A,R),V=ge(b,x),D=l.useMemo(()=>{const N=Pe(a,o,u.base,u.color),_=Je(h,{top:g.top,right:g.right,bottom:g.bottom,left:g.left});return X({...N,..._},i)},[a,o,u.base,u.color,h,g.top,g.right,g.bottom,g.left,i]),k=l.useMemo(()=>Qe(M,p,r),[M,p,r]);return h?f.jsxs("div",{ref:V,"data-testid":"padder",className:z(ne.pad,m&&ne.v,n),style:D,children:[f.jsxs(f.Fragment,{children:[g.top>=0&&f.jsx("div",{style:{gridColumn:"1 / -1"},children:k("100%",g.top)}),g.left>=0&&f.jsx("div",{style:{gridRow:"2 / 3"},children:k(g.left,"100%")})]}),f.jsx("div",{style:{gridRow:"2 / 3",gridColumn:"2 / 3"},children:t}),f.jsxs(f.Fragment,{children:[g.right>=0&&f.jsx("div",{style:{gridRow:"2 / 3"},children:k(g.right,"100%")}),g.bottom>=0&&f.jsx("div",{style:{gridColumn:"1 / -1"},children:k("100%",g.bottom)})]})]}):f.jsx("div",{ref:V,"data-testid":"padder",className:z(ne.pad,n),style:D,children:t})})),et="lay_5cMu5",tt="v_dprVE",le={lay:et,v:tt},nt=e=>({"--bklw":"auto","--bklh":"auto","--bklcl":e.line,"--bklcf":e.flat,"--bklci":e.text}),ce=e=>typeof e=="number"?`repeat(${e}, 1fr)`:typeof e=="string"?e:Array.isArray(e)?e.map(t=>typeof t=="number"?`${t}px`:t).join(" "):"repeat(auto-fill, minmax(100px, 1fr))",ot=(e,t,n)=>{const s={};return e!==void 0&&(s.gap=O(e)),t!==void 0&&(s.rowGap=O(t)),n!==void 0&&(s.columnGap=O(n)),s},st=l.memo(function({alignContent:t,alignItems:n,children:s,className:o,columns:r="repeat(auto-fill, minmax(100px, 1fr))",columnGap:i,debugging:a,gap:c,height:d,indicatorNode:b,justifyContent:u,justifyItems:M,rowGap:v,rows:m,style:w,variant:p,width:h,ssrMode:G=!1,...S}){const x=H("layout"),{isShown:R,debugging:A}=U(a,x.debugging),[g,V]=l.useState(!1);l.useEffect(()=>{V(!0)},[]);const D=l.useRef(null),k=l.useMemo(()=>Z(S),[S]),N=Q(D,{base:x.base,snapping:"height",spacing:k,warnOnMisalignment:!0}),_={padding:{top:k.top||0,right:k.right||0,bottom:k.bottom||0,left:k.left||0}},{padding:E}=K(g&&!G,_,N),L=l.useMemo(()=>ce(r),[r]),C=l.useMemo(()=>m?ce(m):"auto",[m]),$=l.useMemo(()=>nt(x.colors),[x.colors]),j=l.useMemo(()=>ot(c,v,i),[c,v,i]),I=l.useMemo(()=>{const B=O(h||"auto"),Y=O(d||"auto"),q=["--bklw","--bklh"];return X({...y({key:"--bklw",value:B,defaultStyles:$,skipDimensions:{auto:q}}),...y({key:"--bklh",value:Y,defaultStyles:$,skipDimensions:{auto:q}}),...y({key:"--bklcl",value:x.colors.line,defaultStyles:$}),...y({key:"--bklcf",value:x.colors.flat,defaultStyles:$}),...y({key:"--bklci",value:x.colors.text,defaultStyles:$}),...L!=="repeat(auto-fill, minmax(100px, 1fr))"&&{"--bklgtc":L},...C!=="auto"&&{"--bklgtr":C},...M&&{"--bklji":M},...n&&{"--bklai":n},...u&&{"--bkljc":u},...t&&{"--bklac":t},...j},w)},[L,C,M,n,u,t,h,d,x.colors,$,w,j]);return f.jsx(P,{spacer:{variant:p??"line"},children:f.jsx(ee,{ref:D,className:R?le.v:"",block:[E.top,E.bottom],...b?{indicatorNode:b}:{},inline:[E.left,E.right],debugging:A,width:h,height:d,ssrMode:G,children:f.jsx("div",{"data-testid":"layout",className:z(o,le.lay),style:I,...S&&Object.keys(S).length>0?Object.fromEntries(Object.entries(S).filter(([B])=>B!=="ssrMode")):{},children:s})})})}),rt="box_rDCRX",it="v_0MMHD",ue={box:rt,v:it},at=(e,t)=>({"--bkboxw":"auto","--bkboxh":"auto","--bkboxc":t,"--bkboxb":`${e}px`}),lt=({width:e,height:t,base:n,lineColor:s,defaultStyles:o})=>{const r=O(e||"fit-content"),i=O(t||"fit-content"),a=["--bkboxw","--bkboxh"];return{...y({key:"--bkboxw",value:r,defaultStyles:o,skipDimensions:{fitContent:a}}),...y({key:"--bkboxh",value:i,defaultStyles:o,skipDimensions:{fitContent:a}}),...y({key:"--bkboxb",value:`${n}px`,defaultStyles:o}),...y({key:"--bkboxc",value:s,defaultStyles:o})}},ct=l.memo(l.forwardRef(function({children:t,snapping:n="clamp",debugging:s,className:o,colSpan:r,rowSpan:i,span:a,width:c,height:d,style:b,ssrMode:u=!1,...M},v){const m=H("box"),{isShown:w,debugging:p}=U(s,m.debugging),[h,G]=l.useState(!1);l.useEffect(()=>{G(!0)},[]);const S=l.useRef(null),{top:x,bottom:R,left:A,right:g}=Z(M),V=Q(S,{base:m.base,snapping:n,spacing:{top:x,bottom:R,left:A,right:g},warnOnMisalignment:p!=="none"}),D={padding:{top:x||0,right:g||0,bottom:R||0,left:A||0}},{padding:k}=K(h&&!u,D,V),N=l.useMemo(()=>Ne(a,r,i),[r,i,a]),_=l.useMemo(()=>at(m.base,m.colors.line),[m.base,m.colors.line]),E=l.useMemo(()=>{const L=lt({width:c,height:d,base:m.base,lineColor:m.colors.line,defaultStyles:_});return X(L,b)},[m.base,m.colors.line,c,d,_,b]);return f.jsx("div",{ref:ge(v,S),"data-testid":"box",className:z(ue.box,w&&ue.v,o),style:X(E,N),children:f.jsx(P,{base:1,spacer:{variant:"flat"},children:f.jsx(ee,{block:[k.top,k.bottom],inline:[k.left,k.right],width:"fit-content",height:d,debugging:p,ssrMode:u,children:t})})})})),ut="stk_l-58l",dt="v_-k3qw",de={stk:ut,v:dt},ft={x:"row",y:"column","-x":"row-reverse","-y":"column-reverse"},bt=e=>({"--bkkw":"auto","--bkkh":"auto","--bkkcl":e.line,"--bkkcf":e.flat,"--bkkci":e.text}),mt=(e,t,n)=>({rowGap:n!==void 0?n:e,columnGap:n!==void 0?n:t}),gt=l.memo(function({align:t="flex-start",children:n,className:s,columnGap:o,debugging:r,direction:i="row",gap:a,height:c,indicatorNode:d,justify:b="flex-start",rowGap:u,style:M,variant:v,width:m,ssrMode:w=!1,...p}){const h=H("stack"),{isShown:G,debugging:S}=U(r,h.debugging),[x,R]=l.useState(!1);l.useEffect(()=>{R(!0)},[]);const A=l.useRef(null),{top:g,right:V,bottom:D,left:k}=Z({...p}),N=Q(A,{base:h.base,snapping:"height",spacing:{top:g,right:V,bottom:D,left:k},warnOnMisalignment:S!=="none"}),_={padding:{top:g||0,right:V||0,bottom:D||0,left:k||0}},{padding:E}=K(x&&!w,_,N),L=l.useMemo(()=>{const I=u!==void 0?Number(u):void 0,B=o!==void 0?Number(o):void 0,Y=a!==void 0?Number(a):void 0;return mt(I,B,Y)},[u,o,a]),C=l.useMemo(()=>bt(h.colors),[h.colors]),$=l.useMemo(()=>{const I=O(m||"auto"),B=O(c||"auto"),Y=ft[i]||i,q=["--bkkw","--bkkh"],te={...y({key:"--bkkw",value:I,defaultStyles:C,skipDimensions:{auto:q}}),...y({key:"--bkkh",value:B,defaultStyles:C,skipDimensions:{auto:q}}),...y({key:"--bkkcl",value:h.colors.line,defaultStyles:C}),...y({key:"--bkkcf",value:h.colors.flat,defaultStyles:C}),...y({key:"--bkkci",value:h.colors.text,defaultStyles:C})};return X({flexDirection:Y,justifyContent:b,alignItems:t,width:m,height:c},L,te,M)},[i,b,t,m,c,h.colors.line,h.colors.flat,h.colors.text,C,L,M]),j=S==="none"?{...$,paddingBlock:`${E.top}px ${E.bottom}px`,paddingInline:`${E.left}px ${E.right}px`}:$;return f.jsx(P,{spacer:{variant:v??"line"},children:f.jsx(ee,{ref:A,block:[E.top,E.bottom],inline:[E.left,E.right],debugging:S,indicatorNode:d,width:m,height:c,ssrMode:w,children:f.jsx("div",{"data-testid":"stack",className:z(s,de.stk,G&&de.v),style:j,...p,children:n})})})}),ht="gde_-Naxo",pt="line_-VS-e",kt="cols_8lD6D",yt="col_rlbsL",vt="ssr_VGvpO",F={gde:ht,line:pt,cols:kt,col:yt,ssr:vt},xt=e=>{const{variant:t,base:n,gap:s,columns:o,columnWidth:r}=e;switch(t){case"line":return{variant:"line",gap:s,base:n};case"pattern":if(o&&Array.isArray(o))return{variant:"pattern",columns:o,gap:s,base:n};break;case"fixed":if(o!==void 0){const i=typeof o=="number"?o:parseInt(String(o),10);return{variant:"fixed",columns:isNaN(i)?12:i,columnWidth:r||"60px",gap:s,base:n}}break}return{variant:"auto",columnWidth:r||"1fr",gap:s,base:n}},wt=(e,t)=>({"--bkgw":"auto","--bkgh":"auto","--bkgmw":"none","--bkgcw":"60px","--bkggw":"24px","--bkgc":"12","--bkgb":`${e}px`,"--bkgcl":t,"--bkgg":"0"}),St=l.memo(function({className:t,debugging:n,style:s,variant:o,align:r="center",gap:i,height:a,width:c,columns:d,columnWidth:b,maxWidth:u,color:M,children:v,ssrMode:m=!1,...w}){const p=H("guide"),h=o??p.variant,G=typeof i=="number"?i:0,{isShown:S}=U(n,p.debugging);if(!S)return f.jsx("div",{className:z(F.g,F.h,t),style:s,"data-testid":"guide","data-variant":h,...w,children:v});const x=f.jsx("div",{className:z(F.g,F.h,F.ssr,t),style:{width:c||"100%",height:a||"100%",maxWidth:u||"none",...s},"data-testid":"guide","data-variant":h,children:v});return f.jsx(pe,{fallback:x,children:f.jsx(Ct,{className:t,debugging:n,style:s,variant:h,align:r,gap:G,height:a,width:c,columns:d,columnWidth:b,maxWidth:u,color:M,ssrMode:m,...w,children:v})})}),Ct=l.memo(function({className:t,debugging:n,style:s,variant:o,align:r="center",gap:i,height:a,width:c,columns:d,columnWidth:b,maxWidth:u,color:M,children:v,ssrMode:m=!1,...w}){const p=H("guide"),{isShown:h}=U(n,p.debugging),G=l.useRef(null),{width:S,height:x,refresh:R}=J(G);l.useEffect(()=>{const j=()=>{R()};return window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}},[R]);const A=l.useMemo(()=>{const j=o,I=typeof i=="number"?i:0;return xt({variant:j,base:p.base,gap:I,columns:d,columnWidth:b})},[o,p.base,i,d,b]),{template:g,columnsCount:V,calculatedGap:D}=$t(G,A),k=l.useMemo(()=>wt(p.base,p.colors.line),[p.base,p.colors.line]),N=l.useMemo(()=>{const j=O(c||S||"auto"),I=O(a||x||"auto"),B=O(u||"none"),Y=O(b||"60px"),q=["--bkgw","--bkgh"],te={...y({key:"--bkgw",value:j,defaultStyles:k,skipDimensions:{auto:q}}),...y({key:"--bkgh",value:I,defaultStyles:k,skipDimensions:{auto:q}}),...y({key:"--bkgmw",value:B,defaultStyles:k}),...y({key:"--bkgcw",value:Y,defaultStyles:k}),...y({key:"--bkgc",value:`${V}`,defaultStyles:k}),...y({key:"--bkgb",value:"0",defaultStyles:k}),...y({key:"--bkgcl",value:M??p.colors.line,defaultStyles:k}),...y({key:"--bkgg",value:`${D}px`,defaultStyles:k}),...y({key:"--bkgj",value:r||"center",defaultStyles:k}),...g&&g!=="none"?{"--bkgt":g}:{},...g&&g!=="none"?{gridTemplateColumns:g}:{}};return X(te,s)},[c,a,u,b,V,M,g,D,S,x,p.colors.line,k,s,r]),_=()=>{const j=typeof i=="number"?i:0,I=j===0?0:j-1,B=I+1;return{finalGap:I,actualGapWithLine:B}},{finalGap:E,actualGapWithLine:L}=_(),C=typeof c=="number"?c:S||1024;let $;return E===0?$=Math.floor(C)+1:o==="line"?$=Math.max(1,Math.floor((C+1)/L)+1):$=Math.max(1,Math.floor(C/L)+1),f.jsxs("div",{ref:G,"data-testid":"guide",className:z(F.gde,t,h?F.v:F.h,o==="line"&&F.line),"data-variant":o,style:N,...w,children:[h&&f.jsx("div",{className:F.cols,"data-variant":o,children:Array.from({length:$},(j,I)=>{const B=p.colors[o]??p.colors.line;return f.jsx("div",{className:F.col,"data-column-index":I,"data-variant":o,style:{backgroundColor:B}},I)})}),v]})}),Mt=/^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/,Rt=e=>typeof e=="number"?Number.isFinite(e)&&e>=0:typeof e!="string"?!1:e==="auto"||e==="100%"||Mt.test(e),jt=e=>Array.isArray(e)&&e.length>0&&e.every(Rt);function $t(e,t){const{width:n}=J(e),s=l.useRef(!1);return l.useMemo(()=>{const o=t.variant??"line",r=t.base??8,i=oe(t.gap??0,{base:r});if(!n)return{template:"none",columnsCount:0,calculatedGap:0,isValid:!1};try{switch(o){case"line":{const a=i===0?0:i-1,c=a+1;let d;return a===0?d=Math.max(1,Math.floor(n)+1):d=Math.max(1,Math.floor((n+1)/c)+1),{template:`repeat(${d}, 1px)`,columnsCount:d,calculatedGap:i>0?i-1:i,isValid:!0}}case"pattern":{if(!t.columns||!Array.isArray(t.columns))throw new Error("Missing or invalid pattern columns");if(!jt(t.columns))throw new Error('Invalid "pattern" columns array');const a=t.columns.map(c=>typeof c=="number"?`${c}px`:c);return a.some(c=>c==="0"||c==="0px")?{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}:{template:a.join(" "),columnsCount:a.length,calculatedGap:i,isValid:!0}}case"fixed":{const a=typeof t.columns=="number"?t.columns:0;if(a<1)throw new Error(`Invalid columns count: ${a}`);const c=t.columnWidth?O(t.columnWidth):"1fr";return{template:`repeat(${a}, ${c})`,columnsCount:a,calculatedGap:i,isValid:!0}}case"auto":{const a=t.columnWidth??"auto";if(a==="auto")return{template:"repeat(auto-fill, minmax(0, 1fr))",columnsCount:1,calculatedGap:i,isValid:!0};const c=typeof a=="number"?`${a}px`:a.toString(),d=be(c)??0,b=d>0?Math.max(1,Math.floor((n+i)/(d+i))):1;return{template:`repeat(auto-fill, ${c})`,columnsCount:b,calculatedGap:i,isValid:!0}}default:{s.current||(console.warn(`[useGuide] Unknown variant "${o}". Falling back to "line".`),s.current=!0);const a=Math.max(1,Math.floor(n/(i+1))+1);return{template:`repeat(${a}, 1px)`,columnsCount:a,calculatedGap:i,isValid:!0}}}}catch(a){return console.warn("Error in useGuide:",a),{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}}},[t,n])}function H(e){const t=fe();return W.useMemo(()=>Object.assign({base:t.base},t[e]),[t,e])}function U(e,t){return W.useMemo(()=>{const n=e??t;return{isShown:n==="visible",isHidden:n==="hidden",isNone:n==="none",debugging:n}},[e,t])}const Et="bas_e-SXr",Vt="row_q-FZb",Ot="ssr_W1N5g",T={bas:Et,row:Vt,ssr:Ot},Gt=(e,t,n)=>({"--bkbw":"100%","--bkbh":"100%","--bkbb":`${e}px`,"--bkbcl":t,"--bkbcf":n}),_t=e=>{const{index:t,base:n,variant:s,chosenColor:o,lineColor:r,flatColor:i}=e;return{"--bkrt":t===0?"0px":`${t*n}px`,"--bkrh":s==="line"?"1px":`${n}px`,"--bkbc":o||(s==="line"?r:i)}},Dt=l.memo(function({className:t,debugging:n,style:s,variant:o,height:r,width:i,base:a,color:c,ssrMode:d=!1,...b}){const u=H("baseline"),{isShown:M}=U(n,u.debugging),v=l.useRef(null),{width:m,height:w,refresh:p}=J(v);l.useEffect(()=>{const C=()=>{p()};return window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)}},[p]);const[h,G]=l.useMemo(()=>me([i,r],[m,w]),[i,r,m,w]),{top:S,right:x,bottom:R,left:A}=l.useMemo(()=>Z(b),[b]),g=l.useMemo(()=>{const C=[S,x,R,A].map($=>$?`${$}px`:"0").join(" ");return C!=="0 0 0 0"?C:void 0},[S,x,R,A]),V=l.useMemo(()=>{const C=a||u.base;return _e({height:G,top:S,bottom:R,base:C})},[G,S,R,a,u.base]),{start:D,end:k}=Fe({totalLines:V,lineHeight:a||u.base,containerRef:v,buffer:160}),N=c||(o==="line"?u.colors.line:u.colors.flat),_=l.useMemo(()=>Gt(a||u.base,u.colors.line,u.colors.flat),[a,u.colors.line,u.colors.flat,u.base]),E=l.useMemo(()=>{const C=O(i||"100%"),$=O(r||"100%"),j=["--bkbw","--bkbh"];return X({...y({key:"--bkbw",value:C,defaultStyles:_,skipDimensions:{fullSize:j}}),...y({key:"--bkbh",value:$,defaultStyles:_,skipDimensions:{fullSize:j}}),...y({key:"--bkbb",value:`${a}px`,defaultStyles:_}),...y({key:"--bkbcl",value:c||u.colors.line,defaultStyles:_}),...y({key:"--bkbcf",value:c||u.colors.flat,defaultStyles:_}),...g&&{padding:g}},s)},[i,r,a,c,u.colors.line,u.colors.flat,g,_,s]),L=l.useCallback(C=>{const $=o,j=a||u.base;return _t({index:C,base:j,variant:$,chosenColor:N,lineColor:u.colors.line,flatColor:u.colors.flat})},[a,o,N,u.colors.line,u.colors.flat,u.base]);return f.jsx("div",{ref:v,"data-testid":"baseline",className:z(T.bas,M?T.v:T.h,t),style:E,...b,children:M&&Array.from({length:k-D},(C,$)=>{const j=$+D;return f.jsx("div",{className:T.row,"data-row-index":j,style:L(j)},j)})})}),At=l.memo(function({className:t,debugging:n,style:s,variant:o,height:r,width:i,base:a,color:c,ssrMode:d=!1,...b}){const u=H("baseline"),M=o??u.variant,v=a??u.base,{isShown:m}=U(n,u.debugging);if(!m)return f.jsx("div",{className:z(T.b,T.h,t),style:s,"data-testid":"baseline",...b});const w=f.jsx("div",{className:z(T.b,T.h,T.ssr,t),style:{width:i||"100%",height:r||"100%",...s},"data-testid":"baseline"});return f.jsx(pe,{fallback:w,children:f.jsx(Dt,{className:t,debugging:n,style:s,variant:M,height:r,width:i,base:v,color:c,ssrMode:d,...b})})});exports.Baseline=At;exports.Box=ct;exports.Config=P;exports.Guide=St;exports.Layout=st;exports.Padder=ee;exports.Spacer=ke;exports.Stack=gt;exports.isSSR=re;exports.safeClientValue=ze;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=require(`./src-CMjyHjX5.cjs`);let l=require(`react`);l=s(l,1);let u=require(`react/jsx-runtime`);var d=l.createContext(c.k);d.displayName=`ConfigContext`;var f=()=>l.use(d);function p({children:e,base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}){let s=f();return(0,u.jsx)(d,{value:l.useMemo(()=>c.O({parentConfig:s,base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}),[s,t,n,r,i,a,o]),children:e})}var m=e=>{let t=null,n=null;return[(...r)=>{n=r,t!==null&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>{e(...n),t=null,n=null})},()=>{t!==null&&(cancelAnimationFrame(t),t=null,n=null)}]};function h(e,t){let n={width:0,height:0},r=()=>{try{let r=e.getBoundingClientRect(),i={width:Math.round(r.width),height:Math.round(r.height)};(i.width!==n.width||i.height!==n.height)&&(n=i,t(i))}catch{}},[i,a]=m(r);r();let o=new ResizeObserver(i);return o.observe(e),{refresh:i,disconnect(){o.disconnect(),a()}}}var g={width:0,height:0};function _(e){let[t,n]=l.useState(g),r=l.useRef(null);l.useLayoutEffect(()=>{if(typeof window>`u`||!e.current)return;let t=h(e.current,e=>{n(t=>t.width===e.width&&t.height===e.height?t:e)});return r.current=t,()=>{t.disconnect(),r.current=null}},[e]);let i=l.useCallback(()=>{r.current?.refresh()},[]);return{...t,refresh:i}}function v(e,t,n){let{totalItems:r,itemHeight:i,buffer:a=0}=t;if(!Number.isFinite(i)||i<=0)throw Error(`createVirtualTracker requires itemHeight to be greater than 0`);if(!Number.isFinite(r)||r<0)throw Error(`createVirtualTracker requires totalItems to be 0 or greater`);let o=()=>{let t=e.getBoundingClientRect().top+window.scrollY,n=Math.max(0,window.scrollY-t-a),o=n+window.innerHeight+a*2;return{start:Math.max(0,Math.floor(n/i)),end:Math.min(r,Math.ceil(o/i))}},s={start:0,end:r},[c,l]=m(()=>{let e=o();(e.start!==s.start||e.end!==s.end)&&(s=e,n(e))}),u={passive:!0};window.addEventListener(`scroll`,c,u),window.addEventListener(`resize`,c,u);let d=new IntersectionObserver(c,{threshold:0});return d.observe(e),c(),{refresh:c,disconnect(){window.removeEventListener(`scroll`,c,u),window.removeEventListener(`resize`,c,u),d.disconnect(),l()}}}function y({totalLines:e,lineHeight:t,containerRef:n,buffer:r=0}){let i=typeof r==`number`?r:parseInt(r,10)||0,[a,o]=(0,l.useState)({start:0,end:e}),s=(0,l.useCallback)(e=>{o(t=>t.start===e.start&&t.end===e.end?t:e)},[]);return(0,l.useLayoutEffect)(()=>{if(!n.current)return;let r=v(n.current,{totalItems:e,itemHeight:t,buffer:i},s);return()=>r.disconnect()},[n,e,t,i,s]),a}function b(e,{base:t=8,snapping:n=`none`,spacing:r={}}={}){if(t<1)throw Error(`Base must be >= 1 for baseline alignment.`);let{height:i}=_(e),a=l.useRef(null);return l.useMemo(()=>{let e=c.h({padding:r}),o=i%t===0;if(n===`none`)return{padding:e,isAligned:o,height:i};if(a.current)return{padding:a.current,isAligned:o,height:i};if(i===0)return{padding:e,isAligned:o,height:i};let s=c.m(i,t,e,n);return a.current=s,{padding:s,isAligned:o,height:i}},[t,n,r,i])}function x(){return typeof window>`u`?{}:{viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function S(e,t){let{width:n}=_(e);return l.useMemo(()=>c.s(n,t,x()),[t,n])}function C(e){let t=f();return(0,l.useMemo)(()=>Object.assign({base:t.base},t[e]),[t,e])}function w(e,t){return(0,l.useMemo)(()=>c.p(e,t),[e,t])}function T(){let[e,t]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{t(!0)},[]),e}function E({children:e,fallback:t=null}){return T()?(0,u.jsx)(u.Fragment,{children:e}):(0,u.jsx)(u.Fragment,{children:t})}function D(...e){return Object.assign({},...e.filter(Boolean))}function O(...e){return t=>{e.forEach(e=>{e&&(typeof e==`function`?e(t):Object.assign(e,{current:t}))})}}var k={bas:`bas_4Emvv`,v:`v_lNfeX`,h:`h_PbNDU`,row:`row_J1Wva`,ssr:`ssr_PQAP-`},A=l.memo(function({className:e,debugging:t,style:n,variant:r,height:i,width:a,base:o,color:s,...d}){let f=C(`baseline`),{isShown:p}=w(t,f.debugging),m=l.useRef(null),{width:h,height:g}=_(m),v=o||f.base,b=l.useMemo(()=>c.i({base:v,colors:f.colors,variant:r??f.variant,width:a,height:i,color:s,containerWidth:h,containerHeight:g,spacing:d,isVisible:p}),[v,f.colors,f.variant,r,a,i,s,h,g,d,p]),{start:x,end:S}=y({totalLines:b.rowCount,lineHeight:v,containerRef:m,buffer:160}),T=l.useMemo(()=>D(b.containerStyle,n),[b.containerStyle,n]);return(0,u.jsx)(`div`,{ref:m,"data-testid":`baseline`,"aria-hidden":`true`,className:c.f(...b.classTokens.map(e=>k[e]),e),style:T,...d,children:p&&Array.from({length:S-x},(e,t)=>{let n=t+x;return(0,u.jsx)(`div`,{className:k.row,"data-row-index":n,style:b.getRowStyle(n)},n)})})}),j=l.memo(function({className:e,debugging:t,style:n,variant:r,height:i,width:a,base:o,color:s,ssrMode:l=!1,...d}){let f=C(`baseline`),p=r??f.variant,m=o??f.base,{isShown:h}=w(t,f.debugging);if(!h)return(0,u.jsx)(`div`,{className:c.f(k.bas,k.h,e),style:n,"data-testid":`baseline`,"aria-hidden":`true`,...d});let g=(0,u.jsx)(`div`,{className:c.f(k.bas,k.h,k.ssr,e),style:{width:a??`100%`,height:i??`100%`,...n},"data-testid":`baseline`,"aria-hidden":`true`});return l?g:(0,u.jsx)(E,{fallback:g,children:(0,u.jsx)(A,{className:e,debugging:t,style:n,variant:p,height:i,width:a,base:m,color:s,...d})})}),M={gde:`gde_4PKz3`,v:`v_yAvN0`,h:`h_XcWcy`,line:`line_UaLjW`,cols:`cols_ibtT4`,col:`col_QPSDI`,ssr:`ssr_4UN4k`},N=l.memo(function({className:e,debugging:t,style:n,variant:r,align:i=`center`,gap:a,height:o,width:s,columns:l,columnWidth:d,maxWidth:f,color:p,children:m,ssrMode:h=!1,...g}){let _=C(`guide`),v=r??_.variant,y=typeof a==`number`?a:0,{isShown:b}=w(t,_.debugging);if(!b)return(0,u.jsx)(`div`,{className:c.f(M.gde,M.h,e),style:n,"data-testid":`guide`,"data-variant":v,"aria-hidden":`true`,...g,children:m});let x=(0,u.jsx)(`div`,{className:c.f(M.gde,M.h,M.ssr,e),style:{width:s??`100%`,height:o??`100%`,maxWidth:f??`none`,...n},"data-testid":`guide`,"data-variant":v,"aria-hidden":`true`,children:m});return h?x:(0,u.jsx)(E,{fallback:x,children:(0,u.jsx)(P,{className:e,debugging:t,style:n,variant:v,align:i,gap:y,height:o,width:s,columns:l,columnWidth:d,maxWidth:f,color:p,...g,children:m})})}),P=l.memo(function({className:e,debugging:t,style:n,variant:r,align:i=`center`,gap:a,height:o,width:s,columns:d,columnWidth:f,maxWidth:p,color:m,children:h,...g}){let v=C(`guide`),{isShown:y}=w(t,v.debugging),b=l.useRef(null);_(b);let x=r??v.variant,T=typeof a==`number`?a:0,{template:E,columnsCount:O,calculatedGap:k}=S(b,l.useMemo(()=>c.a({variant:x,base:v.base,gap:T,columns:d,columnWidth:f}),[x,v.base,T,d,f])),A=l.useMemo(()=>c.o({base:v.base,colors:v.colors,variant:x,align:i||`center`,width:s,height:o,columnWidth:f,maxWidth:p,color:m,template:E,columnsCount:O,calculatedGap:k,isVisible:y}),[v.base,v.colors,x,i,s,o,f,p,m,E,O,k,y]),j=l.useMemo(()=>D(A.containerStyle,n),[A.containerStyle,n]);return(0,u.jsxs)(`div`,{ref:b,"data-testid":`guide`,"aria-hidden":`true`,className:c.f(...A.classTokens.map(e=>M[e]),e),"data-variant":r,style:j,...g,children:[y&&(0,u.jsx)(`div`,{className:M.cols,"data-variant":r,children:!A.isLineVariant&&Array.from({length:A.columnsCount},(e,t)=>(0,u.jsx)(`div`,{className:M.col,"data-column-index":t,"data-variant":r,style:{backgroundColor:A.columnColor}},t))}),h]})}),F=typeof window>`u`;function I(e,t){if(F)return t;try{return e()}catch{return t}}function L(e,t,n){return!e||F?t:n}var R={spr:`spr_syfhf`,line:`line_nzGsp`,flat:`flat_XJWHt`},z=l.memo(function({height:e,width:t,indicatorNode:n,debugging:r,variant:i,base:a,color:o,className:s,style:d,children:f,ssrMode:p=!1,...m}){let h=l.useRef(null),g=C(`spacer`),{isShown:_}=w(r,g.debugging),v=i??g.variant,y=a??g.base,b=T(),x=l.useMemo(()=>c.n({base:y,colors:g.colors,width:t,height:e,color:o,variant:v,isVisible:_}),[y,g.colors,t,e,o,v,_]),S=L(b&&!p,!1,_&&n!==void 0),E=l.useMemo(()=>{if(!S)return null;let e=x.normWidth,t=x.normHeight;return(0,u.jsxs)(u.Fragment,{children:[t!==0&&(0,u.jsx)(`span`,{"aria-hidden":`true`,children:n(t,`height`)},`height`),e!==0&&(0,u.jsx)(`span`,{"aria-hidden":`true`,children:n(e,`width`)},`width`)]})},[S,n,x.normWidth,x.normHeight]),O=l.useMemo(()=>D(x.style,d),[x.style,d]);return(0,u.jsxs)(`div`,{ref:h,"data-testid":`spacer`,className:c.f(...x.classTokens.map(e=>R[e]),s),"data-variant":v,"data-height":typeof x.normHeight==`number`?`${x.normHeight}px`:x.normHeight,style:O,...m,children:[E,f]})}),B={pad:`pad_NizuS`,lay:`lay_ZdQLz`,line:`line_7S7iI`,stk:`stk_X79YA`,v:`v_dowAz`},V=(e,t,n)=>{let r=e||`line`,i=t||`none`,a=(e,t)=>(0,u.jsx)(z,{variant:r,debugging:t===0||e===0?`none`:i,indicatorNode:n,height:t===`100%`?void 0:t,width:e===`100%`?void 0:e});return a.displayName=`PadderSpacer`,a},H={gridColumn:`1 / -1`},U={gridRow:`2 / 3`},W={gridRow:`2 / 3`,gridColumn:`2 / 3`},G=l.memo(l.forwardRef(function({children:e,className:t,debugging:n,height:r,indicatorNode:i,style:a,width:o,ssrMode:s=!1,...d},f){let p=C(`padder`),{variant:m}=C(`spacer`),h=l.useMemo(()=>c.h(d),[d]),{isShown:g,isNone:_,debugging:v}=w(n,p.debugging),y=!_,x=T(),S=l.useRef(null),E=b(S,{base:p.base,snapping:`height`,spacing:h}),k={padding:{top:h.top||0,right:h.right||0,bottom:h.bottom||0,left:h.left||0}},{padding:A}=L(x&&!s,k,E),j=O(f,S),M=l.useMemo(()=>c.t({base:p.base,color:p.color,width:o,height:r,padding:A,enableSpacers:y,isVisible:g}),[p.base,p.color,o,r,A,y,g]),N=l.useMemo(()=>D(M.containerStyle,a),[M.containerStyle,a]),P=l.useMemo(()=>V(m,v,i),[m,v,i]);return y?(0,u.jsxs)(`div`,{ref:j,"data-testid":`padder`,className:c.f(...M.classTokens.map(e=>B[e]),t),style:N,children:[(0,u.jsxs)(u.Fragment,{children:[A.top>=0&&(0,u.jsx)(`div`,{style:H,children:P(`100%`,A.top)}),A.left>=0&&(0,u.jsx)(`div`,{style:U,children:P(A.left,`100%`)})]}),(0,u.jsx)(`div`,{style:W,children:e}),(0,u.jsxs)(u.Fragment,{children:[A.right>=0&&(0,u.jsx)(`div`,{style:U,children:P(A.right,`100%`)}),A.bottom>=0&&(0,u.jsx)(`div`,{style:H,children:P(`100%`,A.bottom)})]})]}):(0,u.jsx)(`div`,{ref:j,"data-testid":`padder`,className:c.f(...M.classTokens.map(e=>B[e]),t),style:N,children:e})})),K={box:`box_sPqFs`,v:`v_ZrZ5j`},q=l.memo(l.forwardRef(function({children:e,snapping:t=`clamp`,debugging:n,className:r,colSpan:i,rowSpan:a,span:o,width:s,height:d,style:f,ssrMode:m=!1,...h},g){let _=C(`box`),{isShown:v,debugging:y}=w(n,_.debugging),x=T(),S=l.useRef(null),{top:E,bottom:k,left:A,right:j}=c.h(h),M=b(S,{base:_.base,snapping:t,spacing:{top:E,bottom:k,left:A,right:j}}),{padding:N}=L(x&&!m,{padding:{top:E||0,right:j||0,bottom:k||0,left:A||0}},M),P=l.useMemo(()=>c.r({base:_.base,lineColor:_.colors.line,width:s,height:d,span:o,colSpan:i,rowSpan:a,isVisible:v}),[_.base,_.colors.line,s,d,o,i,a,v]),F=l.useMemo(()=>D(P.boxStyle,f),[P.boxStyle,f]);return(0,u.jsx)(`div`,{ref:O(g,S),"data-testid":`box`,className:c.f(...P.classTokens.map(e=>K[e]),r),style:D(F,P.gridSpanStyle),children:(0,u.jsx)(p,{base:1,spacer:{variant:`flat`},children:(0,u.jsx)(G,{block:[N.top,N.bottom],inline:[N.left,N.right],width:`fit-content`,height:d,debugging:y,ssrMode:m,children:e})})})}));exports.Baseline=j,exports.Box=q,exports.Config=p,exports.Guide=N,exports.Padder=G,exports.Spacer=z,exports.isSSR=F,exports.safeClientValue=I;
+//# sourceMappingURL=index.cjs.map