baseline-kit 5.2.0 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+### Breaking changes
+
+- Library-generated DOM diagnostic attributes are opt-in through
+  `<Config domDiagnostics />`. Applications that select components through
+  generated `data-testid`, variant, dimension, row, or column attributes should
+  enable diagnostics in those scopes. Caller-provided attributes remain.
+
 ### Improvements
 
 - Added the React-free Remix 3 entry point and its dedicated CSS entry.
@@ -13,6 +20,10 @@
   are released.
 - Simplified the public documentation around entry points, sizing, themes,
   text-box alignment, SSR, and release checks.
+- Moved default component values into host CSS classes, omitted redundant
+  instance styles and diagnostic attributes, painted Baseline with CSS, and
+  removed empty zero-padding spacer nodes while keeping nested Config and
+  React/Remix rendering behavior.
 - Removed unused CSS and linting dependencies, including `cssnano`.
 
 ### Bug fixes
@@ -22,6 +33,12 @@
 - Box and Padder now opt into `text-box: trim-both ex alphabetic` when the
   browser supports it, while retaining normal line boxes as a fallback.
 
+## 6.0.0
+
+### Major Changes
+
+- a3d22e6: Generated diagnostic DOM attributes are now opt-in through `Config domDiagnostics`. Default component styles come from CSS modules, and zero-padding containers omit unused spacer helpers while retaining a stable content host. Baseline grids use CSS paint while retaining the same rendered pixels. Migrate DOM inspection to the opt-in diagnostics setting.
+
 ## 5.2.0
 
 ### Minor Changes

package/README.md

@@ -131,6 +131,28 @@ Every visual component supports one of these modes:
 Baseline and Guide keep an empty host in both hidden modes. They are debug
 overlays marked `aria-hidden`; keep meaningful application content outside them.
 
+### DOM output and diagnostics
+
+React CSS Modules and the native Remix component styles supply host defaults,
+so ordinary renders can omit repeated default-valued inline styles. Baseline
+paints its rhythm through CSS, and zero-padding Box/Padder instances skip empty
+spacer elements. Library inspection attributes such as `data-testid`,
+`data-height`, variant markers, and row or column indexes are disabled by
+default in both React and Remix.
+
+Enable those diagnostic attributes for a scoped part of the tree when tests or
+debugging tools need them:
+
+```tsx
+<Config domDiagnostics>
+  <App />
+</Config>
+```
+
+Nested `Config` scopes can turn diagnostics on or off. Caller-provided
+`data-*`, `aria-*`, `id`, `title`, and role attributes continue to reach the
+component host, and caller `className` and `style` overrides remain effective.
+
 ## Components
 
 | Component  | Purpose                                                       |
@@ -328,6 +350,10 @@ For the release-equivalent browser gate, use three zero-retry passes:
 bun run test:browser:repeat
 ```
 
+On hosts without a local Firefox installation, set
+`BASELINE_BROWSER_PROJECTS=chromium,webkit` to run the available engines. The
+default remains Chromium, Firefox, and WebKit for CI and release verification.
+
 The release workflow runs that gate across Chromium, Firefox, and WebKit,
 builds the package, verifies the packed Remix fixture three times, and
 publishes through Changesets after all verification gates pass.

package/dist/baseline-kit.css

@@ -2,7 +2,7 @@
 /* This file contains component styles and theme variables */
 
 /* Component Styles */
-: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}.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}.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)}.indicator_inw1x{color:var(--bksp-ct,#6629a3)}.pad_NizuS{width:var(--bkpd-w,auto);height:var(--bkpd-h,auto);text-box-trim:trim-both;text-box-edge:ex alphabetic;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.content_xFX0U{text-box-trim:trim-both;text-box-edge:ex alphabetic}.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);text-box-trim:trim-both;text-box-edge:ex alphabetic;position:relative}.v_ZrZ5j:after{content:"";border:1px solid var(--bkbx-cl);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}
+: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{--bkbl-w:100%;--bkbl-h:100%;--bkbl-b:8px;--bkbl-cl:var(--bk-baseline-color-line-theme,#2929a326);--bkbl-cf:var(--bk-baseline-color-flat-theme,#667fff33);pointer-events:none;width:var(--bkbl-w);height:var(--bkbl-h);contain:layout style paint;position:absolute;inset:0;overflow:hidden}.bas_4Emvv.line_jXAw3{--bkbl-c:var(--bkbl-cl)}.bas_4Emvv.flat_DwUeJ{--bkbl-c:var(--bkbl-cf)}.bas_4Emvv.compact_CjR0G.line_jXAw3{background-image:repeating-linear-gradient(to bottom, var(--bkbl-c) 0 1px, transparent 1px var(--bkbl-b))}.bas_4Emvv.compact_CjR0G.flat_DwUeJ{background-color:var(--bkbl-c)}.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}.gde_4PKz3{--bkgd-w:100%;--bkgd-h:100%;--bkgd-mw:none;--bkgd-cw:60px;--bkgd-n:12;--bkgd-b: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);--bkgd-g:0;--bkgd-j:center;--bkgd-t:none;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.line_UaLjW{background-color:var(--bkgd-cl);width:1px}.cols_ibtT4.line_UaLjW{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.pattern_8ihi5{background-color:var(--bkgd-cp)}.col_QPSDI.auto_xzTBc{background-color:var(--bkgd-ca);overflow:hidden}.col_QPSDI.fixed_g2rOO{background-color:var(--bkgd-cf)}.cols_ibtT4.compactFixed_C3AMS{background-color:var(--bkgd-cf);width:240px;display:block;left:50%;right:auto;transform:translate(-50%)}.ssr_4UN4k{box-sizing:border-box;z-index:1;pointer-events:none}.spr_syfhf{--bksp-w:var(--bk-wf,100%);--bksp-h:var(--bk-hf,auto);--bksp-b:8px;--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);box-sizing:border-box;width:var(--bksp-w);height:var(--bksp-h);flex-shrink:0;margin:0;padding:0;display:block;position:relative}.line_nzGsp:after{content:"";border:1px solid var(--bksp-cl);z-index:calc(var(--bk-zi,1));position:absolute;inset:0}.flat_XJWHt{background-color:var(--bksp-cf)}.indicator_inw1x{color:var(--bksp-ct)}.pad_NizuS{--bkpd-w:fit-content;--bkpd-h:fit-content;--bkpd-b:8px;--bkpd-c:var(--bk-padder-color-theme,#6629a399);width:var(--bkpd-w);height:var(--bkpd-h);text-box-trim:trim-both;text-box-edge:ex alphabetic;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.content_xFX0U{text-box-trim:trim-both;text-box-edge:ex alphabetic;grid-area:2/2/3/3}.topEdge_7hMCE{grid-area:1/1/2/-1}.leftEdge_1Dc-j{grid-area:2/1/3/2}.rightEdge_P7r9Z{grid-area:2/3/3/4}.bottomEdge_PfOep{grid-area:3/1/4/-1}.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{--bkbx-w:fit-content;--bkbx-h:fit-content;--bkbx-cl:var(--bk-box-color-line-theme,#a329a399);--bkpd-b:1px;--bkpd-c:var(--bk-padder-color-theme,#6629a399);width:var(--bkbx-w);height:var(--bkbx-h);text-box-trim:trim-both;text-box-edge:ex alphabetic;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.v_ZrZ5j:after{content:"";border:1px solid var(--bkbx-cl);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}.padderVisible_zft5p:before{content:"";border:1px solid var(--bkpd-c);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}.separatePadder_BmOqc{display:block}
 
 
 /* Theme */

package/dist/core.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./src-R5usYJol.cjs");exports.ABSOLUTE_UNIT_CONVERSIONS=e.b,exports.DEFAULT_CONFIG=e.k,exports.GRID_ALIGNMENTS=e.T,exports.PADD_VARIANTS=e.E,exports.RELATIVE_UNITS=e.x,exports.calculateGuideTemplate=e.s,exports.calculateRowCount=e.v,exports.calculateSnappedSpacing=e.m,exports.clamp=e.y,exports.convertValue=e.S,exports.createBaselineDescriptor=e.i,exports.createBoxDescriptor=e.r,exports.createCSSVariables=e.D,exports.createGridSpanStyles=e.c,exports.createGuideConfig=e.a,exports.createGuideDescriptor=e.o,exports.createPadderDescriptor=e.t,exports.createSpacerDescriptor=e.n,exports.createStyleOverride=e.d,exports.cx=e.f,exports.formatValue=e.C,exports.isValidGuideColumnValue=e.l,exports.isValidGuidePattern=e.u,exports.mergeConfig=e.O,exports.normalizeValue=e.g,exports.normalizeValuePair=e._,exports.parsePadding=e.h,exports.parseUnit=e.w,exports.resolveDebugState=e.p;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./src-BczC1VWy.cjs");exports.ABSOLUTE_UNIT_CONVERSIONS=e.C,exports.DEFAULT_CONFIG=e.M,exports.GRID_ALIGNMENTS=e.O,exports.PADD_VARIANTS=e.k,exports.RELATIVE_UNITS=e.w,exports.calculateGuideTemplate=e.u,exports.calculateRowCount=e.x,exports.calculateSnappedSpacing=e._,exports.canCompactBaselinePaint=e.a,exports.canCompactFixedGuide=e.s,exports.clamp=e.S,exports.convertValue=e.T,exports.createBaselineDescriptor=e.o,exports.createBoxDescriptor=e.r,exports.createCSSVariables=e.A,exports.createGridSpanStyles=e.d,exports.createGuideConfig=e.c,exports.createGuideDescriptor=e.l,exports.createPadderDescriptor=e.t,exports.createSpacerDescriptor=e.n,exports.createStyleOverride=e.m,exports.cx=e.h,exports.formatValue=e.E,exports.isValidGuideColumnValue=e.f,exports.isValidGuidePattern=e.p,exports.mergeConfig=e.j,exports.normalizeValue=e.y,exports.normalizeValuePair=e.b,exports.parsePadding=e.v,exports.parseUnit=e.D,exports.requiresSeparatePadder=e.i,exports.resolveDebugState=e.g;

package/dist/core.d.ts

@@ -68,6 +68,7 @@ type DebugColors = {
 };
 type ConfigSchema = {
     base: number;
+    domDiagnostics: boolean;
     baseline: {
         variant: BaselineVariant;
         debugging: DebuggingMode;
@@ -102,6 +103,7 @@ type PartialColors<T> = T extends {
 } : Partial<T>;
 type ConfigOverrides = {
     base?: number;
+    domDiagnostics?: boolean;
     baseline?: PartialColors<ConfigSchema['baseline']>;
     guide?: PartialColors<ConfigSchema['guide']>;
     spacer?: PartialColors<ConfigSchema['spacer']>;
@@ -247,6 +249,16 @@ interface GuideDescriptor {
     isLineVariant: boolean;
     classTokens: string[];
 }
+declare function canCompactFixedGuide(params: {
+    variant: GuideVariant;
+    columns?: number | readonly unknown[];
+    columnWidth?: number | string;
+    gap: number;
+    align?: string;
+    domDiagnostics: boolean;
+    className?: string;
+    style?: object;
+}): boolean;
 interface GuideConfigParams {
     variant: GuideVariant;
     base: number;
@@ -265,6 +277,13 @@ declare function createGuideConfig({ variant, base, gap, columns, columnWidth, }
  */
 declare function createGuideDescriptor(params: GuideDescriptorParams): GuideDescriptor;
 
+declare function canCompactBaselinePaint(params: {
+    base: number;
+    contentHeight: number;
+    domDiagnostics: boolean;
+    className?: string;
+    style?: object;
+}): boolean;
 interface BaselineDescriptorParams {
     base: number;
     colors: Record<BaselineVariant, string>;
@@ -280,6 +299,7 @@ interface BaselineDescriptorParams {
 interface BaselineDescriptor {
     containerStyle: Record<string, string>;
     rowCount: number;
+    contentHeight: number;
     getRowStyle: (index: number) => Record<string, string>;
     padding: string | undefined;
     isVisible: boolean;
@@ -306,6 +326,11 @@ interface BoxDescriptor {
     gridSpanStyle: Record<string, string>;
     classTokens: string[];
 }
+declare function requiresSeparatePadder(params: {
+    className?: string;
+    style?: object;
+    width?: number | string;
+}): boolean;
 /**
  * Computes styles needed to render a Box component.
  * Pure function — framework-agnostic.
@@ -356,5 +381,5 @@ interface PadderDescriptor {
  */
 declare function createPadderDescriptor(params: PadderDescriptorParams): PadderDescriptor;
 
-export { ABSOLUTE_UNIT_CONVERSIONS, DEFAULT_CONFIG, GRID_ALIGNMENTS, PADD_VARIANTS, RELATIVE_UNITS, calculateGuideTemplate, calculateRowCount, calculateSnappedSpacing, clamp, convertValue, createBaselineDescriptor, createBoxDescriptor, createCSSVariables, createGridSpanStyles, createGuideConfig, createGuideDescriptor, createPadderDescriptor, createSpacerDescriptor, createStyleOverride, cx, formatValue, isValidGuideColumnValue, isValidGuidePattern, mergeConfig, normalizeValue, normalizeValuePair, parsePadding, parseUnit, resolveDebugState };
+export { ABSOLUTE_UNIT_CONVERSIONS, DEFAULT_CONFIG, GRID_ALIGNMENTS, PADD_VARIANTS, RELATIVE_UNITS, calculateGuideTemplate, calculateRowCount, calculateSnappedSpacing, canCompactBaselinePaint, canCompactFixedGuide, clamp, convertValue, createBaselineDescriptor, createBoxDescriptor, createCSSVariables, createGridSpanStyles, createGuideConfig, createGuideDescriptor, createPadderDescriptor, createSpacerDescriptor, createStyleOverride, cx, formatValue, isValidGuideColumnValue, isValidGuidePattern, mergeConfig, normalizeValue, normalizeValuePair, parsePadding, parseUnit, requiresSeparatePadder, resolveDebugState };
 export type { AutoConfig, BaselineDescriptor, BaselineDescriptorParams, BaselineVariant, BoxDescriptor, BoxDescriptorParams, ConfigOverrides, ConfigSchema, ConversionContext, DebugState, DebuggingMode, FixedConfig, GridAlignment, GuideColumnValue, GuideColumnsPattern, GuideConfig, GuideConfigParams, GuideDescriptor, GuideDescriptorParams, GuideResult, GuideVariant, LineConfig, NormalizationOptions, PaddedVariant, PadderDescriptor, PadderDescriptorParams, Padding, PaddingValue, PatternConfig, SnapEdge, SnappingMode, SnappingOptions, SpacerDescriptor, SpacerDescriptorParams, Spacing, SpacingProps, StyleOverrideParams, Variant };

package/dist/core.mjs

@@ -1,2 +1,2 @@
-import { C as e, D as t, E as n, O as r, S as i, T as a, _ as o, a as s, b as c, c as l, d as u, f as d, g as f, h as p, i as m, k as h, l as g, m as _, n as v, o as y, p as b, r as x, s as S, t as C, u as w, v as T, w as E, x as D, y as O } from "./src-D0nL1BwZ.js";
-export { c as ABSOLUTE_UNIT_CONVERSIONS, h as DEFAULT_CONFIG, a as GRID_ALIGNMENTS, n as PADD_VARIANTS, D as RELATIVE_UNITS, S as calculateGuideTemplate, T as calculateRowCount, _ as calculateSnappedSpacing, O as clamp, i as convertValue, m as createBaselineDescriptor, x as createBoxDescriptor, t as createCSSVariables, l as createGridSpanStyles, s as createGuideConfig, y as createGuideDescriptor, C as createPadderDescriptor, v as createSpacerDescriptor, u as createStyleOverride, d as cx, e as formatValue, g as isValidGuideColumnValue, w as isValidGuidePattern, r as mergeConfig, f as normalizeValue, o as normalizeValuePair, p as parsePadding, E as parseUnit, b as resolveDebugState };
+import { A as e, C as t, D as n, E as r, M as i, O as a, S as o, T as s, _ as c, a as l, b as u, c as d, d as f, f as p, g as m, h, i as g, j as _, k as v, l as y, m as b, n as x, o as S, p as C, r as w, s as T, t as E, u as D, v as O, w as k, x as A, y as j } from "./src-CPIpvN4R.js";
+export { t as ABSOLUTE_UNIT_CONVERSIONS, i as DEFAULT_CONFIG, a as GRID_ALIGNMENTS, v as PADD_VARIANTS, k as RELATIVE_UNITS, D as calculateGuideTemplate, A as calculateRowCount, c as calculateSnappedSpacing, l as canCompactBaselinePaint, T as canCompactFixedGuide, o as clamp, s as convertValue, S as createBaselineDescriptor, w as createBoxDescriptor, e as createCSSVariables, f as createGridSpanStyles, d as createGuideConfig, y as createGuideDescriptor, E as createPadderDescriptor, x as createSpacerDescriptor, b as createStyleOverride, h as cx, r as formatValue, p as isValidGuideColumnValue, C as isValidGuidePattern, _ as mergeConfig, j as normalizeValue, u as normalizeValuePair, O as parsePadding, n as parseUnit, g as requiresSeparatePadder, m as resolveDebugState };

package/dist/guide.cjs

@@ -1,2 +1,2 @@
-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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime");var u={base:8,baseline:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15))`,flat:`var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))`}},guide:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))`,pattern:`var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))`,auto:`var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))`,fixed:`var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))`}},spacer:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))`,flat:`var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))`,text:`var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))`}},box:{debugging:`hidden`,colors:{line:`var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))`,flat:`var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))`,text:`var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))`}},padder:{debugging:`hidden`,color:`var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))`}},d=[`baseline`,`guide`,`spacer`,`box`,`padder`],f=e=>{let{parentConfig:t,base:n}=e,r={};for(let n of d){let i=e[n],a=t[n],o={...a,...i};i&&`colors`in i&&i.colors&&`colors`in a&&(o.colors={...a.colors,...i.colors}),r[n]=o}return{base:n??t.base,...r}},p=e=>{let{base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}=e;return{"--bk-base":`${t}px`,"--bkbl-cl":n.colors.line,"--bkbl-cf":n.colors.flat,"--bkgd-cl":r.colors.line,"--bkgd-cp":r.colors.pattern,"--bkgd-ca":r.colors.auto,"--bkgd-cf":r.colors.fixed,"--bksp-cl":i.colors.line,"--bksp-cf":i.colors.flat,"--bksp-ct":i.colors.text,"--bkbx-cl":a.colors.line,"--bkbx-cf":a.colors.flat,"--bkbx-ct":a.colors.text,"--bkpd-c":o.color}},m=`__baseline_kit_config_context__`,h=globalThis,g=h[m]??(h[m]=c.createContext(u));g.displayName=`ConfigContext`;var _=()=>c.use(g);function v({children:e,base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}){let s=_(),u=c.useMemo(()=>f({parentConfig:s,base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}),[s,t,n,r,i,a,o]);return(0,l.jsx)(g,{value:u,children:e})}function y(e){let t=e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);return t?{value:parseFloat(t[1]),unit:t[2]}:null}function b(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??``}var x={parentSize:0,viewportWidth:1920,viewportHeight:1080,rootFontSize:16,parentFontSize:16},S={px:1,in:96,cm:37.8,mm:3.78,pt:1.33,pc:16},C={em:e=>e.parentFontSize,rem:e=>e.rootFontSize,vh:e=>e.viewportHeight/100,vw:e=>e.viewportWidth/100,vmin:e=>Math.min(e.viewportWidth,e.viewportHeight)/100,vmax:e=>Math.max(e.viewportWidth,e.viewportHeight)/100,"%":e=>e.parentSize/100};function w(e,t){if(typeof e==`number`)return e;if(typeof e!=`string`)return null;let n=y(e);if(!n)return null;let{value:r,unit:i}=n;if(i in S)return r*S[i];if(i===`auto`)return null;let a=C[i];return a?r*a({...x,...t}):null}function T(e,t,n){return Math.min(Math.max(e,t),n)}function E(e,t={}){let{base:n=8,round:r=!0,clamp:i,context:a}=t;if(e===`auto`)return n;let o=null;if(typeof e==`number`?o=e:typeof e==`string`&&(o=w(e,a)??n),o===null&&(o=n),n<=0)return o;let s=r?Math.round(o/n)*n:o;return i===void 0?s:T(s,i.min??-1/0,i.max??1/0)}var D=(...e)=>e.filter(Boolean).join(` `).trim();function O(e,t){let n=e??t;return{isShown:n===`visible`,isHidden:n===`hidden`,isNone:n===`none`,debugging:n}}function k(e,t,n){let r=typeof e==`string`?e:e.key,i=typeof e==`string`?t:e.value,a=typeof e==`string`?n:e.defaultStyles,o=typeof e==`object`?e.skipDimensions:void 0;return o&&(o.fitContent?.includes(r)&&i===`fit-content`||o.auto?.includes(r)&&i===`auto`||o.fullSize?.includes(r)&&(i===`100%`||i===`100vh`||i===`100vw`))||i===a[r]?{}:{[r]:i}}var A=/^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/,j=e=>typeof e==`number`?Number.isFinite(e)&&e>=0:typeof e==`string`?e===`auto`||e===`100%`||A.test(e):!1,M=e=>Array.isArray(e)&&e.length>0&&e.every(j),N={template:`none`,columnsCount:0,calculatedGap:0,isValid:!1};function P(e,t,n){let r=t.variant??`line`,i=t.base??8,a=E(t.gap??0,{base:i,context:n});if(!e)return N;switch(r){case`line`:{let t=a===0?0:a-1,n=t+1,r=t===0?Math.max(1,Math.floor(e)+1):Math.max(1,Math.floor((e+1)/n)+1);return{template:`repeat(${r}, 1px)`,columnsCount:r,calculatedGap:a>0?a-1:a,isValid:!0}}case`pattern`:{if(!t.columns||!Array.isArray(t.columns)||!M(t.columns))return N;let e=t.columns.map(e=>typeof e==`number`?`${e}px`:e);return e.some(e=>e===`0`||e===`0px`)?N:{template:e.join(` `),columnsCount:e.length,calculatedGap:a,isValid:!0}}case`fixed`:{let e=typeof t.columns==`number`?t.columns:0;return e<1?N:{template:`repeat(${e}, ${t.columnWidth?b(t.columnWidth):`1fr`})`,columnsCount:e,calculatedGap:a,isValid:!0}}case`auto`:{let r=t.columnWidth??`auto`;if(r===`auto`)return{template:`repeat(auto-fill, minmax(0, 1fr))`,columnsCount:1,calculatedGap:a,isValid:!0};let i=typeof r==`number`?`${r}px`:r.toString(),o=w(i,n)??0,s=o>0?Math.max(1,Math.floor((e+a)/(o+a))):1;return{template:`repeat(auto-fill, ${i})`,columnsCount:s,calculatedGap:a,isValid:!0}}default:{let t=Math.max(1,Math.floor(e/(a+1))+1);return{template:`repeat(${t}, 1px)`,columnsCount:t,calculatedGap:a,isValid:!0}}}}function F({variant:e,base:t,gap:n,columns:r,columnWidth:i}){switch(e){case`line`:return{variant:`line`,gap:n,base:t};case`pattern`:if(r&&Array.isArray(r))return{variant:`pattern`,columns:r,gap:n,base:t};break;case`fixed`:if(r!==void 0){let e=typeof r==`number`?r:parseInt(String(r),10);return{variant:`fixed`,columns:isNaN(e)?12:e,columnWidth:i||`60px`,gap:n,base:t}}}return{variant:`auto`,columnWidth:i||`1fr`,gap:n,base:t}}var I=(e,t)=>({"--bkgd-w":`100%`,"--bkgd-h":`100%`,"--bkgd-mw":`none`,"--bkgd-cw":`60px`,"--bkgd-gw":`24px`,"--bkgd-n":`12`,"--bkgd-b":`${e}px`,"--bkgd-cl":t,"--bkgd-g":`0`});function L(e){let{base:t,colors:n,variant:r,align:i,width:a,height:o,columnWidth:s,maxWidth:c,color:l,template:u,columnsCount:d,calculatedGap:f,isVisible:p}=e,m=I(t,n.line),h={"--bkgd-cl":l??n.line,"--bkgd-cp":l??n.pattern,"--bkgd-ca":l??n.auto,"--bkgd-cf":l??n.fixed,"--bkgd-w":b(a??`100%`),"--bkgd-h":b(o??`100%`),...k({key:`--bkgd-mw`,value:b(c||`none`),defaultStyles:m}),...k({key:`--bkgd-cw`,value:b(s||`60px`),defaultStyles:m}),...k({key:`--bkgd-n`,value:`${d}`,defaultStyles:m}),...k({key:`--bkgd-b`,value:`0`,defaultStyles:m}),...k({key:`--bkgd-cl`,value:l??n.line,defaultStyles:m}),...k({key:`--bkgd-g`,value:`${f}px`,defaultStyles:m}),...k({key:`--bkgd-j`,value:i||`center`,defaultStyles:m}),...u&&u!==`none`?{"--bkgd-t":u}:{}},g=l??(r&&r in n?n[r]:void 0)??n.line,_=r===`line`,v=[`gde`,p?`v`:`h`];return _&&v.push(`line`),_&&(h[`--bkgd-line-color`]=`var(--bkgd-cl)`,h[`--bkgd-line-period`]=`${f+1}px`),{containerStyle:h,columnColor:g,columnsCount:d,calculatedGap:f,template:u,isVisible:p,isLineVariant:_,classTokens:v}}function R(e){let t=_();return(0,c.useMemo)(()=>Object.assign({base:t.base},t[e]),[t,e])}function z(e,t){return(0,c.useMemo)(()=>O(e,t),[e,t])}var B=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 V(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]=B(r);r();let o=new ResizeObserver(i);return o.observe(e),{refresh:i,disconnect(){o.disconnect(),a()}}}var H={width:0,height:0};function U(e){let[t,n]=c.useState(H),r=c.useRef(null);c.useLayoutEffect(()=>{if(typeof window>`u`||!e.current)return;let t=V(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=c.useCallback(()=>{r.current?.refresh()},[]);return{...t,refresh:i}}function W(){return typeof window>`u`?{}:{viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function G(e,t){let{width:n}=U(e);return c.useMemo(()=>P(n,t,W()),[t,n])}function K(){let[e,t]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{t(!0)},[]),e}function q({children:e,fallback:t=null}){return K()?(0,l.jsx)(l.Fragment,{children:e}):(0,l.jsx)(l.Fragment,{children:t})}function J(...e){return Object.assign({},...e.filter(Boolean))}var Y={gde:`gde_4PKz3`,v:`v_yAvN0`,h:`h_XcWcy`,line:`line_UaLjW`,cols:`cols_ibtT4`,col:`col_QPSDI`,ssr:`ssr_4UN4k`},X=c.memo(function({className:e,debugging:t,style:n,variant:r,align:i=`center`,gap:a,height:o,width:s,columns:c,columnWidth:u,maxWidth:d,color:f,children:p,ssrMode:m=!1,...h}){let g=R(`guide`),_=r??g.variant,v=typeof a==`number`?a:0,{isShown:y}=z(t,g.debugging);if(!y)return(0,l.jsx)(`div`,{className:D(Y.gde,Y.h,e),style:n,"data-testid":`guide`,"data-variant":_,"aria-hidden":`true`,...h,children:p});let b=(0,l.jsx)(`div`,{className:D(Y.gde,Y.h,Y.ssr,e),style:{width:s??`100%`,height:o??`100%`,maxWidth:d??`none`,...n},"data-testid":`guide`,"data-variant":_,"aria-hidden":`true`,children:p});return m?b:(0,l.jsx)(q,{fallback:b,children:(0,l.jsx)(Z,{className:e,debugging:t,style:n,variant:_,align:i,gap:v,height:o,width:s,columns:c,columnWidth:u,maxWidth:d,color:f,...h,children:p})})}),Z=c.memo(function({className:e,debugging:t,style:n,variant:r,align:i=`center`,gap:a,height:o,width:s,columns:u,columnWidth:d,maxWidth:f,color:p,children:m,...h}){let g=R(`guide`),{isShown:_}=z(t,g.debugging),v=c.useRef(null);U(v);let y=r??g.variant,b=typeof a==`number`?a:0,{template:x,columnsCount:S,calculatedGap:C}=G(v,c.useMemo(()=>F({variant:y,base:g.base,gap:b,columns:u,columnWidth:d}),[y,g.base,b,u,d])),w=c.useMemo(()=>L({base:g.base,colors:g.colors,variant:y,align:i||`center`,width:s,height:o,columnWidth:d,maxWidth:f,color:p,template:x,columnsCount:S,calculatedGap:C,isVisible:_}),[g.base,g.colors,y,i,s,o,d,f,p,x,S,C,_]),T=c.useMemo(()=>J(w.containerStyle,n),[w.containerStyle,n]);return(0,l.jsxs)(`div`,{ref:v,"data-testid":`guide`,"aria-hidden":`true`,className:D(...w.classTokens.map(e=>Y[e]),e),"data-variant":r,style:T,...h,children:[_&&(0,l.jsx)(`div`,{className:Y.cols,"data-variant":r,children:!w.isLineVariant&&Array.from({length:w.columnsCount},(e,t)=>(0,l.jsx)(`div`,{className:Y.col,"data-column-index":t,"data-variant":r},t))}),m]})});exports.Config=v,exports.Guide=X,exports.createCSSVariables=p,exports.mergeConfig=f;
+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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime");var u={base:8,domDiagnostics:!1,baseline:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15))`,flat:`var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))`}},guide:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))`,pattern:`var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))`,auto:`var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))`,fixed:`var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))`}},spacer:{variant:`line`,debugging:`hidden`,colors:{line:`var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))`,flat:`var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))`,text:`var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))`}},box:{debugging:`hidden`,colors:{line:`var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))`,flat:`var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))`,text:`var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))`}},padder:{debugging:`hidden`,color:`var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))`}},d=[`baseline`,`guide`,`spacer`,`box`,`padder`],f=e=>{let{parentConfig:t,base:n,domDiagnostics:r}=e,i={};for(let n of d){let r=e[n],a=t[n],o={...a,...r};r&&`colors`in r&&r.colors&&`colors`in a&&(o.colors={...a.colors,...r.colors}),i[n]=o}return{base:n??t.base,domDiagnostics:r??t.domDiagnostics??!1,...i}},p=e=>{let{base:t,baseline:n,guide:r,spacer:i,box:a,padder:o}=e;return{"--bk-base":`${t}px`,"--bkbl-cl":n.colors.line,"--bkbl-cf":n.colors.flat,"--bkgd-cl":r.colors.line,"--bkgd-cp":r.colors.pattern,"--bkgd-ca":r.colors.auto,"--bkgd-cf":r.colors.fixed,"--bksp-cl":i.colors.line,"--bksp-cf":i.colors.flat,"--bksp-ct":i.colors.text,"--bkbx-cl":a.colors.line,"--bkbx-cf":a.colors.flat,"--bkbx-ct":a.colors.text,"--bkpd-c":o.color}},m=`__baseline_kit_config_context__`,h=globalThis,g=h[m]??(h[m]=c.createContext(u));g.displayName=`ConfigContext`;var _=()=>c.use(g);function v({children:e,base:t,domDiagnostics:n,baseline:r,guide:i,spacer:a,box:o,padder:s}){let u=_(),d=c.useMemo(()=>f({parentConfig:u,base:t,domDiagnostics:n,baseline:r,guide:i,spacer:a,box:o,padder:s}),[u,t,n,r,i,a,o,s]);return(0,l.jsx)(g,{value:d,children:e})}function y(e){let t=e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);return t?{value:parseFloat(t[1]),unit:t[2]}:null}function b(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??``}var x={parentSize:0,viewportWidth:1920,viewportHeight:1080,rootFontSize:16,parentFontSize:16},S={px:1,in:96,cm:37.8,mm:3.78,pt:1.33,pc:16},C={em:e=>e.parentFontSize,rem:e=>e.rootFontSize,vh:e=>e.viewportHeight/100,vw:e=>e.viewportWidth/100,vmin:e=>Math.min(e.viewportWidth,e.viewportHeight)/100,vmax:e=>Math.max(e.viewportWidth,e.viewportHeight)/100,"%":e=>e.parentSize/100};function w(e,t){if(typeof e==`number`)return e;if(typeof e!=`string`)return null;let n=y(e);if(!n)return null;let{value:r,unit:i}=n;if(i in S)return r*S[i];if(i===`auto`)return null;let a=C[i];return a?r*a({...x,...t}):null}function T(e,t,n){return Math.min(Math.max(e,t),n)}function E(e,t={}){let{base:n=8,round:r=!0,clamp:i,context:a}=t;if(e===`auto`)return n;let o=null;if(typeof e==`number`?o=e:typeof e==`string`&&(o=w(e,a)??n),o===null&&(o=n),n<=0)return o;let s=r?Math.round(o/n)*n:o;return i===void 0?s:T(s,i.min??-1/0,i.max??1/0)}var D=(...e)=>e.filter(Boolean).join(` `).trim();function O(e,t){let n=e??t;return{isShown:n===`visible`,isHidden:n===`hidden`,isNone:n===`none`,debugging:n}}function k(e,t,n){let r=typeof e==`string`?e:e.key,i=typeof e==`string`?t:e.value,a=typeof e==`string`?n:e.defaultStyles,o=typeof e==`object`?e.skipDimensions:void 0;return o&&(o.fitContent?.includes(r)&&i===`fit-content`||o.auto?.includes(r)&&i===`auto`||o.fullSize?.includes(r)&&(i===`100%`||i===`100vh`||i===`100vw`))||i===a[r]?{}:{[r]:i}}var A=/^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/,j=e=>typeof e==`number`?Number.isFinite(e)&&e>=0:typeof e==`string`?e===`auto`||e===`100%`||A.test(e):!1,M=e=>Array.isArray(e)&&e.length>0&&e.every(j),N={template:`none`,columnsCount:0,calculatedGap:0,isValid:!1};function P(e,t,n){let r=t.variant??`line`,i=t.base??8,a=E(t.gap??0,{base:i,context:n});if(!e)return N;switch(r){case`line`:{let t=a===0?0:a-1,n=t+1,r=t===0?Math.max(1,Math.floor(e)+1):Math.max(1,Math.floor((e+1)/n)+1);return{template:`repeat(${r}, 1px)`,columnsCount:r,calculatedGap:a>0?a-1:a,isValid:!0}}case`pattern`:{if(!t.columns||!Array.isArray(t.columns)||!M(t.columns))return N;let e=t.columns.map(e=>typeof e==`number`?`${e}px`:e);return e.some(e=>e===`0`||e===`0px`)?N:{template:e.join(` `),columnsCount:e.length,calculatedGap:a,isValid:!0}}case`fixed`:{let e=typeof t.columns==`number`?t.columns:0;return e<1?N:{template:`repeat(${e}, ${t.columnWidth?b(t.columnWidth):`1fr`})`,columnsCount:e,calculatedGap:a,isValid:!0}}case`auto`:{let r=t.columnWidth??`auto`;if(r===`auto`)return{template:`repeat(auto-fill, minmax(0, 1fr))`,columnsCount:1,calculatedGap:a,isValid:!0};let i=typeof r==`number`?`${r}px`:r.toString(),o=w(i,n)??0,s=o>0?Math.max(1,Math.floor((e+a)/(o+a))):1;return{template:`repeat(auto-fill, ${i})`,columnsCount:s,calculatedGap:a,isValid:!0}}default:{let t=Math.max(1,Math.floor(e/(a+1))+1);return{template:`repeat(${t}, 1px)`,columnsCount:t,calculatedGap:a,isValid:!0}}}}function F(e){let t=new Set([`--bkgd-cl`,`--bkgd-cp`,`--bkgd-ca`,`--bkgd-cf`,`--bkgd-line-color`]),n=e.style&&Object.keys(e.style).some(e=>!t.has(e));return!e.domDiagnostics&&!e.className&&!n&&e.variant===`fixed`&&e.columns===4&&(e.columnWidth===void 0||e.columnWidth===60||e.columnWidth===`60px`)&&e.gap===0&&(e.align||`center`)===`center`}function I({variant:e,base:t,gap:n,columns:r,columnWidth:i}){switch(e){case`line`:return{variant:`line`,gap:n,base:t};case`pattern`:if(r&&Array.isArray(r))return{variant:`pattern`,columns:r,gap:n,base:t};break;case`fixed`:if(r!==void 0){let e=typeof r==`number`?r:parseInt(String(r),10);return{variant:`fixed`,columns:isNaN(e)?12:e,columnWidth:i||`60px`,gap:n,base:t}}}return{variant:`auto`,columnWidth:i||`1fr`,gap:n,base:t}}var L=(e,t)=>({"--bkgd-w":`100%`,"--bkgd-h":`100%`,"--bkgd-mw":`none`,"--bkgd-cw":`60px`,"--bkgd-gw":`24px`,"--bkgd-n":`12`,"--bkgd-b":`${e}px`,"--bkgd-cl":t,"--bkgd-g":`0`});function R(e){let{base:t,colors:n,variant:r,align:i,width:a,height:o,columnWidth:s,maxWidth:c,color:l,template:u,columnsCount:d,calculatedGap:f,isVisible:p}=e,m=L(t,n.line),h={"--bkgd-cl":l??n.line,"--bkgd-cp":l??n.pattern,"--bkgd-ca":l??n.auto,"--bkgd-cf":l??n.fixed,"--bkgd-w":b(a??`100%`),"--bkgd-h":b(o??`100%`),...k({key:`--bkgd-mw`,value:b(c||`none`),defaultStyles:m}),...k({key:`--bkgd-cw`,value:b(s||`60px`),defaultStyles:m}),...k({key:`--bkgd-n`,value:`${d}`,defaultStyles:m}),...k({key:`--bkgd-b`,value:`0`,defaultStyles:m}),...k({key:`--bkgd-cl`,value:l??n.line,defaultStyles:m}),...k({key:`--bkgd-g`,value:`${f}px`,defaultStyles:m}),...k({key:`--bkgd-j`,value:i||`center`,defaultStyles:m}),...u&&u!==`none`?{"--bkgd-t":u}:{}},g=l??(r&&r in n?n[r]:void 0)??n.line,_=r===`line`,v=[`gde`,p?`v`:`h`];return _&&v.push(`line`),_&&(h[`--bkgd-line-color`]=`var(--bkgd-cl)`,h[`--bkgd-line-period`]=`${f+1}px`),{containerStyle:h,columnColor:g,columnsCount:d,calculatedGap:f,template:u,isVisible:p,isLineVariant:_,classTokens:v}}function z(e){let t=_();return(0,c.useMemo)(()=>Object.assign({base:t.base,domDiagnostics:t.domDiagnostics},t[e]),[t,e])}function B(e,t){return(0,c.useMemo)(()=>O(e,t),[e,t])}var V=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]=V(r);r();let o=new ResizeObserver(i);return o.observe(e),{refresh:i,disconnect(){o.disconnect(),a()}}}var U={width:0,height:0};function W(e){let[t,n]=c.useState(U),r=c.useRef(null);c.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=c.useCallback(()=>{r.current?.refresh()},[]);return{...t,refresh:i}}function G(){return typeof window>`u`?{}:{viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function K(e,t){let{width:n}=W(e);return c.useMemo(()=>P(n,t,G()),[t,n])}function q(){let[e,t]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{t(!0)},[]),e}function J({children:e,fallback:t=null}){return q()?(0,l.jsx)(l.Fragment,{children:e}):(0,l.jsx)(l.Fragment,{children:t})}function Y(...e){return Object.assign({},...e.filter(Boolean))}function X(e,t){return Object.fromEntries(Object.entries(e).filter(([e,n])=>t[e]!==n))}var Z={gde:`gde_4PKz3`,v:`v_yAvN0`,h:`h_XcWcy`,line:`line_UaLjW`,cols:`cols_ibtT4`,col:`col_QPSDI`,pattern:`pattern_8ihi5`,auto:`auto_xzTBc`,fixed:`fixed_g2rOO`,compactFixed:`compactFixed_C3AMS`,ssr:`ssr_4UN4k`},Q=c.memo(function({className:e,debugging:t,style:n,variant:r,align:i=`center`,gap:a,height:o,width:s,columns:c,columnWidth:u,maxWidth:d,color:f,children:p,ssrMode:m=!1,...h}){let g=z(`guide`),_=r??g.variant,v=typeof a==`number`?a:0,{isShown:y}=B(t,g.debugging);if(!y)return(0,l.jsx)(`div`,{className:D(Z.gde,Z.h,Z[_],e),style:n,"data-testid":g.domDiagnostics?`guide`:void 0,"data-variant":g.domDiagnostics?_:void 0,"aria-hidden":`true`,...h,children:p});let x=(0,l.jsx)(`div`,{className:D(Z.gde,Z.h,Z.ssr,Z[_],e),style:Y(X({width:b(s??`100%`),height:b(o??`100%`),maxWidth:b(d??`none`)},{width:`100%`,height:`100%`,maxWidth:`none`}),n),"data-testid":g.domDiagnostics?`guide`:void 0,"data-variant":g.domDiagnostics?_:void 0,"aria-hidden":`true`,...h,children:p});return m?x:(0,l.jsx)(J,{fallback:x,children:(0,l.jsx)($,{className:e,debugging:t,style:n,variant:_,align:i,gap:v,height:o,width:s,columns:c,columnWidth:u,maxWidth:d,color:f,...h,children:p})})}),$=c.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 _=z(`guide`),{isShown:v}=B(t,_.debugging),y=c.useRef(null);W(y);let b=r??_.variant,x=typeof a==`number`?a:0,{template:S,columnsCount:C,calculatedGap:w}=K(y,c.useMemo(()=>I({variant:b,base:_.base,gap:x,columns:d,columnWidth:f}),[b,_.base,x,d,f])),T=F({variant:b,columns:d,columnWidth:f,gap:x,align:i,domDiagnostics:_.domDiagnostics,className:e,style:n}),E=c.useMemo(()=>R({base:_.base,colors:_.colors,variant:b,align:i||`center`,width:s,height:o,columnWidth:f,maxWidth:p,color:m,template:S,columnsCount:C,calculatedGap:w,isVisible:v}),[_.base,_.colors,b,i,s,o,f,p,m,S,C,w,v]),O=c.useMemo(()=>Y(X(E.containerStyle,{"--bkgd-w":`100%`,"--bkgd-h":`100%`,"--bkgd-mw":`none`,"--bkgd-cw":`60px`,"--bkgd-n":`12`,"--bkgd-b":`0`,"--bkgd-cl":u.guide.colors.line,"--bkgd-cp":u.guide.colors.pattern,"--bkgd-ca":u.guide.colors.auto,"--bkgd-cf":u.guide.colors.fixed,"--bkgd-g":`0px`,"--bkgd-j":`center`,"--bkgd-t":`none`,"--bkgd-line-color":`var(--bkgd-cl)`}),n),[E.containerStyle,n]);return(0,l.jsxs)(`div`,{ref:y,"data-testid":_.domDiagnostics?`guide`:void 0,"aria-hidden":`true`,className:D(...E.classTokens.map(e=>Z[e]),!E.classTokens.includes(b)&&Z[b],e),"data-variant":_.domDiagnostics?b:void 0,style:O,...g,children:[v&&(0,l.jsx)(`div`,{className:D(Z.cols,Z[b],T&&Z.compactFixed),"data-variant":_.domDiagnostics?b:void 0,children:!E.isLineVariant&&!T&&Array.from({length:E.columnsCount},(e,t)=>(0,l.jsx)(`div`,{className:D(Z.col,Z[b]),"data-column-index":_.domDiagnostics?t:void 0,"data-variant":_.domDiagnostics?b:void 0},t))}),h]})});exports.Config=v,exports.Guide=Q,exports.createCSSVariables=p,exports.mergeConfig=f;
 //# sourceMappingURL=guide.cjs.map

package/dist/guide.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"guide.cjs","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, hsla(240, 60%, 40%, 0.15))',\n      flat: 'var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))',\n    },\n  },\n  guide: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))',\n      pattern: 'var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))',\n      auto: 'var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))',\n      fixed: 'var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))',\n    },\n  },\n  spacer: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))',\n      flat: 'var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))',\n      text: 'var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))',\n    },\n  },\n  box: {\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))',\n      flat: 'var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))',\n      text: 'var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))',\n    },\n  },\n  padder: {\n    debugging: 'hidden',\n    color: 'var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))',\n  },\n} as const\n","import type { ConfigSchema } from './schema'\n\ntype PartialColors<T> = T extends { colors: infer Colors }\n  ? Omit<Partial<T>, 'colors'> & { colors?: Partial<Colors> }\n  : Partial<T>\n\nexport type ConfigOverrides = {\n  base?: number\n  baseline?: PartialColors<ConfigSchema['baseline']>\n  guide?: PartialColors<ConfigSchema['guide']>\n  spacer?: PartialColors<ConfigSchema['spacer']>\n  box?: PartialColors<ConfigSchema['box']>\n  padder?: Partial<ConfigSchema['padder']>\n}\n\ntype MergeConfigParams = ConfigOverrides & {\n  parentConfig: ConfigSchema\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    const override = params[key]\n    const inherited = parentConfig[key]\n    const next = { ...inherited, ...override } as Record<string, unknown>\n\n    if (\n      override &&\n      'colors' in override &&\n      override.colors &&\n      'colors' in inherited\n    ) {\n      next.colors = {\n        ...(inherited.colors as Record<string, string>),\n        ...(override.colors as Record<string, string>),\n      }\n    }\n\n    merged[key] = next\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  type ConfigOverrides,\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// Root and guide are published as separate bundles. Keep their context\n// identity shared when an application imports both entry points.\nconst CONFIG_CONTEXT_KEY = '__baseline_kit_config_context__'\nconst contextStore = globalThis as typeof globalThis & {\n  [CONFIG_CONTEXT_KEY]?: React.Context<ConfigSchema>\n}\nconst ConfigContext =\n  contextStore[CONFIG_CONTEXT_KEY] ??\n  (contextStore[CONFIG_CONTEXT_KEY] = React.createContext(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 = ConfigOverrides & {\n  children: React.ReactNode\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] | 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 containerStyle: Record<string, string> = {\n    // Config is wrapperless, so every guide color channel must travel with\n    // the consuming guide rather than relying on root CSS variables.\n    '--bkgd-cl': color ?? colors.line,\n    '--bkgd-cp': color ?? colors.pattern,\n    '--bkgd-ca': color ?? colors.auto,\n    '--bkgd-cf': color ?? colors.fixed,\n    // Always declare the containing-block default and preserve explicit CSS\n    // dimensions. A viewport size is not equivalent to 100% of the parent.\n    '--bkgd-w': formatValue(width ?? '100%'),\n    '--bkgd-h': formatValue(height ?? '100%'),\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    color ??\n    (variant && variant in colors\n      ? colors[variant as keyof typeof colors]\n      : undefined) ??\n    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'] = 'var(--bkgd-cl)'\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  z-index: 1;\n  pointer-events: none;\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              />\n            ))}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"guide.cjs","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/utils/dom.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  domDiagnostics: false,\n  baseline: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15))',\n      flat: 'var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))',\n    },\n  },\n  guide: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))',\n      pattern: 'var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))',\n      auto: 'var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))',\n      fixed: 'var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))',\n    },\n  },\n  spacer: {\n    variant: 'line',\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))',\n      flat: 'var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))',\n      text: 'var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))',\n    },\n  },\n  box: {\n    debugging: 'hidden',\n    colors: {\n      line: 'var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))',\n      flat: 'var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))',\n      text: 'var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))',\n    },\n  },\n  padder: {\n    debugging: 'hidden',\n    color: 'var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))',\n  },\n} as const\n","import type { ConfigSchema } from './schema'\n\ntype PartialColors<T> = T extends { colors: infer Colors }\n  ? Omit<Partial<T>, 'colors'> & { colors?: Partial<Colors> }\n  : Partial<T>\n\nexport type ConfigOverrides = {\n  base?: number\n  domDiagnostics?: boolean\n  baseline?: PartialColors<ConfigSchema['baseline']>\n  guide?: PartialColors<ConfigSchema['guide']>\n  spacer?: PartialColors<ConfigSchema['spacer']>\n  box?: PartialColors<ConfigSchema['box']>\n  padder?: Partial<ConfigSchema['padder']>\n}\n\ntype MergeConfigParams = ConfigOverrides & {\n  parentConfig: ConfigSchema\n}\n\nconst COMPONENT_KEYS = ['baseline', 'guide', 'spacer', 'box', 'padder'] as const\n\nexport const mergeConfig = (params: MergeConfigParams): ConfigSchema => {\n  const { parentConfig, base, domDiagnostics } = params\n  const merged = {} as Record<string, unknown>\n\n  for (const key of COMPONENT_KEYS) {\n    const override = params[key]\n    const inherited = parentConfig[key]\n    const next = { ...inherited, ...override } as Record<string, unknown>\n\n    if (\n      override &&\n      'colors' in override &&\n      override.colors &&\n      'colors' in inherited\n    ) {\n      next.colors = {\n        ...(inherited.colors as Record<string, string>),\n        ...(override.colors as Record<string, string>),\n      }\n    }\n\n    merged[key] = next\n  }\n\n  return {\n    base: base ?? parentConfig.base,\n    domDiagnostics: domDiagnostics ?? parentConfig.domDiagnostics ?? false,\n    ...merged,\n  } 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  type ConfigOverrides,\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// Root and guide are published as separate bundles. Keep their context\n// identity shared when an application imports both entry points.\nconst CONFIG_CONTEXT_KEY = '__baseline_kit_config_context__'\nconst contextStore = globalThis as typeof globalThis & {\n  [CONFIG_CONTEXT_KEY]?: React.Context<ConfigSchema>\n}\nconst ConfigContext =\n  contextStore[CONFIG_CONTEXT_KEY] ??\n  (contextStore[CONFIG_CONTEXT_KEY] = React.createContext(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 = ConfigOverrides & {\n  children: React.ReactNode\n}\n\n/**\n * Configuration provider for baseline-kit components.\n */\nexport function Config({\n  children,\n  base,\n  domDiagnostics,\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      domDiagnostics,\n      baseline,\n      guide,\n      spacer,\n      box,\n      padder,\n    })\n  }, [parentConfig, base, domDiagnostics, 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] | 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 function canCompactFixedGuide(params: {\n  variant: GuideVariant\n  columns?: number | readonly unknown[]\n  columnWidth?: number | string\n  gap: number\n  align?: string\n  domDiagnostics: boolean\n  className?: string\n  style?: object\n}): boolean {\n  const colorOverrides = new Set([\n    '--bkgd-cl',\n    '--bkgd-cp',\n    '--bkgd-ca',\n    '--bkgd-cf',\n    '--bkgd-line-color',\n  ])\n  const hasLayoutStyle =\n    params.style &&\n    Object.keys(params.style).some((property) => !colorOverrides.has(property))\n\n  return (\n    !params.domDiagnostics &&\n    !params.className &&\n    !hasLayoutStyle &&\n    params.variant === 'fixed' &&\n    params.columns === 4 &&\n    (params.columnWidth === undefined ||\n      params.columnWidth === 60 ||\n      params.columnWidth === '60px') &&\n    params.gap === 0 &&\n    (params.align || 'center') === 'center'\n  )\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 containerStyle: Record<string, string> = {\n    // Config is wrapperless, so every guide color channel must travel with\n    // the consuming guide rather than relying on root CSS variables.\n    '--bkgd-cl': color ?? colors.line,\n    '--bkgd-cp': color ?? colors.pattern,\n    '--bkgd-ca': color ?? colors.auto,\n    '--bkgd-cf': color ?? colors.fixed,\n    // Always declare the containing-block default and preserve explicit CSS\n    // dimensions. A viewport size is not equivalent to 100% of the parent.\n    '--bkgd-w': formatValue(width ?? '100%'),\n    '--bkgd-h': formatValue(height ?? '100%'),\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    color ??\n    (variant && variant in colors\n      ? colors[variant as keyof typeof colors]\n      : undefined) ??\n    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'] = 'var(--bkgd-cl)'\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  domDiagnostics: boolean\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      {\n        base: defaultConfig.base,\n        domDiagnostics: defaultConfig.domDiagnostics,\n      },\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","export function compactStyle(\n  style: Record<string, string>,\n  defaults: Record<string, string>\n): Record<string, string> {\n  return Object.fromEntries(\n    Object.entries(style).filter(\n      ([property, value]) => defaults[property] !== value\n    )\n  )\n}\n\nconst DOM_ATTRIBUTE_NAMES = new Set([\n  'id',\n  'title',\n  'role',\n  'tabIndex',\n  'lang',\n  'dir',\n  'hidden',\n])\n\nexport function getDOMAttributes(\n  props: Record<string, unknown>\n): Record<string, unknown> {\n  return Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) =>\n        name.startsWith('data-') ||\n        name.startsWith('aria-') ||\n        DOM_ATTRIBUTE_NAMES.has(name)\n    )\n  )\n}\n",".gde {\n  --bkgd-w: 100%;\n  --bkgd-h: 100%;\n  --bkgd-mw: none;\n  --bkgd-cw: 60px;\n  --bkgd-n: 12;\n  --bkgd-b: 0;\n  --bkgd-cl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15));\n  --bkgd-cp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2));\n  --bkgd-ca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15));\n  --bkgd-cf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15));\n  --bkgd-g: 0;\n  --bkgd-j: center;\n  --bkgd-t: none;\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.line {\n  width: 1px;\n  background-color: var(--bkgd-cl);\n}\n\n.cols.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.pattern {\n  background-color: var(--bkgd-cp);\n}\n\n.col.auto {\n  background-color: var(--bkgd-ca);\n  overflow: hidden;\n}\n\n.col.fixed {\n  background-color: var(--bkgd-cf);\n}\n\n.cols.compactFixed {\n  display: block;\n  left: 50%;\n  right: auto;\n  width: 240px;\n  transform: translateX(-50%);\n  background-color: var(--bkgd-cf);\n}\n\n/* Style for SSR rendering */\n.ssr {\n  box-sizing: border-box;\n  z-index: 1;\n  pointer-events: none;\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  canCompactFixedGuide,\n  createGuideDescriptor,\n  createGuideConfig,\n} from '@baseline-kit/core/descriptors/guide'\nimport { DEFAULT_CONFIG, formatValue } from '@baseline-kit/core'\nimport type { GuideVariant, GuideConfig } from '@baseline-kit/core/types'\nimport { ClientOnly } from '../../utils/ssr'\nimport { mergeStyles } from '../../utils/merge'\nimport { compactStyle } from '../../utils/dom'\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, styles[variant], className)}\n        style={style}\n        data-testid={config.domDiagnostics ? 'guide' : undefined}\n        data-variant={config.domDiagnostics ? variant : undefined}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  const ssrFallback = (\n    <div\n      className={cx(\n        styles.gde,\n        styles.h,\n        styles.ssr,\n        styles[variant],\n        className\n      )}\n      style={mergeStyles(\n        compactStyle(\n          {\n            width: formatValue(width ?? '100%'),\n            height: formatValue(height ?? '100%'),\n            maxWidth: formatValue(maxWidth ?? 'none'),\n          },\n          { width: '100%', height: '100%', maxWidth: 'none' }\n        ),\n        style\n      )}\n      data-testid={config.domDiagnostics ? 'guide' : undefined}\n      data-variant={config.domDiagnostics ? variant : undefined}\n      aria-hidden=\"true\"\n      {...props}\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 compactFixedGuide = canCompactFixedGuide({\n    variant: resolvedVariant,\n    columns,\n    columnWidth,\n    gap: resolvedGap,\n    align,\n    domDiagnostics: config.domDiagnostics,\n    className,\n    style,\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    () =>\n      mergeStyles(\n        compactStyle(descriptor.containerStyle, {\n          '--bkgd-w': '100%',\n          '--bkgd-h': '100%',\n          '--bkgd-mw': 'none',\n          '--bkgd-cw': '60px',\n          '--bkgd-n': '12',\n          '--bkgd-b': '0',\n          '--bkgd-cl': DEFAULT_CONFIG.guide.colors.line,\n          '--bkgd-cp': DEFAULT_CONFIG.guide.colors.pattern,\n          '--bkgd-ca': DEFAULT_CONFIG.guide.colors.auto,\n          '--bkgd-cf': DEFAULT_CONFIG.guide.colors.fixed,\n          '--bkgd-g': '0px',\n          '--bkgd-j': 'center',\n          '--bkgd-t': 'none',\n          '--bkgd-line-color': 'var(--bkgd-cl)',\n        }),\n        style\n      ),\n    [descriptor.containerStyle, style]\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      data-testid={config.domDiagnostics ? 'guide' : undefined}\n      aria-hidden=\"true\"\n      className={cx(\n        ...descriptor.classTokens.map((t) => styles[t]),\n        !descriptor.classTokens.includes(resolvedVariant) &&\n          styles[resolvedVariant],\n        className\n      )}\n      data-variant={config.domDiagnostics ? resolvedVariant : undefined}\n      style={containerStyles}\n      {...props}\n    >\n      {isShown && (\n        <div\n          className={cx(\n            styles.cols,\n            styles[resolvedVariant],\n            compactFixedGuide && styles.compactFixed\n          )}\n          data-variant={config.domDiagnostics ? resolvedVariant : undefined}\n        >\n          {!descriptor.isLineVariant &&\n            !compactFixedGuide &&\n            Array.from({ length: descriptor.columnsCount }, (_, i) => (\n              <div\n                key={i}\n                className={cx(styles.col, styles[resolvedVariant])}\n                data-column-index={config.domDiagnostics ? i : undefined}\n                data-variant={\n                  config.domDiagnostics ? resolvedVariant : undefined\n                }\n              />\n            ))}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n"],"mappings":"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"}

package/dist/guide.css

@@ -1,2 +1,2 @@
-: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)}.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}
+: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)}.gde_4PKz3{--bkgd-w:100%;--bkgd-h:100%;--bkgd-mw:none;--bkgd-cw:60px;--bkgd-n:12;--bkgd-b: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);--bkgd-g:0;--bkgd-j:center;--bkgd-t:none;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.line_UaLjW{background-color:var(--bkgd-cl);width:1px}.cols_ibtT4.line_UaLjW{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.pattern_8ihi5{background-color:var(--bkgd-cp)}.col_QPSDI.auto_xzTBc{background-color:var(--bkgd-ca);overflow:hidden}.col_QPSDI.fixed_g2rOO{background-color:var(--bkgd-cf)}.cols_ibtT4.compactFixed_C3AMS{background-color:var(--bkgd-cf);width:240px;display:block;left:50%;right:auto;transform:translate(-50%)}.ssr_4UN4k{box-sizing:border-box;z-index:1;pointer-events:none}
 /*$vite$:1*/

package/dist/guide.d.ts

@@ -58,6 +58,7 @@ type DebugColors = {
 };
 type ConfigSchema = {
     base: number;
+    domDiagnostics: boolean;
     baseline: {
         variant: BaselineVariant;
         debugging: DebuggingMode;
@@ -90,6 +91,7 @@ type PartialColors<T> = T extends {
 } : Partial<T>;
 type ConfigOverrides = {
     base?: number;
+    domDiagnostics?: boolean;
     baseline?: PartialColors<ConfigSchema['baseline']>;
     guide?: PartialColors<ConfigSchema['guide']>;
     spacer?: PartialColors<ConfigSchema['spacer']>;
@@ -116,7 +118,7 @@ type ConfigProps = ConfigOverrides & {
 /**
  * Configuration provider for baseline-kit components.
  */
-declare function Config({ children, base, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
+declare function Config({ children, base, domDiagnostics, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
 
 /**
  * Common props shared across library components.
@@ -127,7 +129,16 @@ type ComponentsProps = {
     style?: React.CSSProperties;
     height?: React.CSSProperties['height'];
     width?: React.CSSProperties['width'];
-} & SpacingProps;
+} & SpacingProps & React.AriaAttributes & {
+    id?: string;
+    title?: string;
+    role?: React.AriaRole;
+    tabIndex?: number;
+    lang?: string;
+    dir?: string;
+    hidden?: boolean;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
 
 type GuideProps = {
     align?: React.CSSProperties['justifyContent'];