storybook-vrhythm 0.2.0 → 0.4.0

package/README.md

@@ -1,149 +1,176 @@
-# 📐 storybook-vrhythm
+# storybook-vrhythm
 
-[![npm package][npm-badge]][npm]
+[![npm version][npm-badge]][npm]
 [![License: MIT][license-badge]][license]
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/storybook-vrhythm)](https://bundlephobia.com/package/storybook-vrhythm)
+[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](https://www.npmjs.org/package/storybook-vrhythm)
 
-**A Storybook decorator that overlays vertical rhythm guide lines on your stories.**
-Verify that your components align to a baseline grid — with zero effort.
+> Baseline grid overlay for Storybook. See your vertical rhythm while you build.
 
-![Vertical rhythm overlay example](storybook-vrhythm.jpg)
+Stop guessing if your spacing is consistent. `storybook-vrhythm` draws a customizable baseline grid on top of your stories so you can **see** alignment issues as you develop — not after you ship.
 
-## ✨ Features
+## Features
 
-- 🎯 **Framework agnostic** — Works with React, Vue, Angular, Svelte, and any Storybook-supported framework
-- 🎨 **Fully customizable** — Color, line height, offset, and visibility per story
-- 🪶 **Lightweight** — Pure CSS overlay using `linear-gradient` (no images, no canvas)
-- 🖱️ **Non-intrusive** — Overlay doesn't interfere with pointer events
-- ⚡ **Zero config** — Works out of the box with sensible defaults
+- **Framework agnostic** — React, Vue, Angular, Svelte, Web Components, HTML
+- **Toolbar toggle** — Show/hide the grid from Storybook's toolbar, no reload needed
+- **Built-in presets** — Material, Tailwind, Bootstrap, and pixel-based grids ready to use
+- **Column grids** — Optional vertical column overlay with configurable gutter width
+- **Fully customizable** — Color, line height, line width, offset, opacity, z-index, max width
+- **Lightweight** — Pure CSS overlay via `linear-gradient`. Zero runtime dependencies
+- **Non-intrusive** — `pointer-events: none` keeps your stories fully interactive
+- **TypeScript first** — Full type safety with Storybook parameter augmentation
 
-## 📦 Installation
+## Requirements
 
-<details open>
-<summary><strong>pnpm</strong></summary>
+- Node.js 20+
+- Storybook 10+
 
-```bash
-pnpm add -D storybook-vrhythm
-```
-
-</details>
-
-<details>
-<summary><strong>npm</strong></summary>
-
-```bash
-npm install --save-dev storybook-vrhythm
-```
-
-</details>
-
-<details>
-<summary><strong>yarn</strong></summary>
+## Quick start
 
 ```bash
-yarn add -D storybook-vrhythm
+pnpm add -D storybook-vrhythm
+# or: npm install --save-dev storybook-vrhythm
+# or: yarn add -D storybook-vrhythm
 ```
 
-</details>
-
-## 🚀 Usage
-
-This package is a **Storybook preset addon**: you can register it in `main` (recommended) or add the decorator manually in `preview`.
-
-**Requirements:** Node.js 18+ and Storybook 8 or newer (see `peerDependencies` in `package.json`).
-
-### Register as an addon (recommended)
-
-Add the package to `addons` in `.storybook/main.ts` (or `main.js`). Storybook loads the preset and applies the vertical rhythm decorator in the preview iframe.
+Add to `.storybook/main.ts`:
 
 ```typescript
-import type { StorybookConfig } from '@storybook/react-vite'; // or your framework package
-
 const config = {
   addons: ['storybook-vrhythm'],
-} satisfies StorybookConfig;
+};
 
 export default config;
 ```
 
-Optional defaults and overrides still use `parameters.vrhythm` in `.storybook/preview.ts`:
+Done. A baseline grid overlay is now visible on every story, toggleable from the toolbar.
+
+## Configuration
+
+### Global defaults
+
+Set defaults for all stories in `.storybook/preview.ts`:
 
 ```typescript
 export const parameters = {
   vrhythm: {
-    color: 'rgba(178, 86, 18, 0.5)',
-    lineHeight: '16px',
-    offset: 0,
+    color: 'rgba(99, 102, 241, 0.2)',
+    lineHeight: '8px',
   },
 };
 ```
 
-### Manual decorator
-
-If you prefer not to use the preset, import the decorator in `.storybook/preview.ts`:
+### Per-story overrides
 
 ```typescript
-import { withVRhythm } from 'storybook-vrhythm';
+export const Compact = {
+  parameters: {
+    vrhythm: { lineHeight: '4px', color: 'rgba(244, 67, 54, 0.15)' },
+  },
+};
 
-export const decorators = [withVRhythm];
+export const NoGrid = {
+  parameters: {
+    vrhythm: { hide: true },
+  },
+};
+```
 
-export const parameters = {
-  vrhythm: {
-    color: 'rgba(178, 86, 18, 0.5)',
-    lineHeight: '16px',
-    offset: 0,
+### Using presets
+
+Skip manual configuration with built-in presets that match popular design systems:
+
+```typescript
+export const MaterialGrid = {
+  parameters: {
+    vrhythm: { preset: 'material' },
   },
 };
 ```
 
-### Per-story configuration
+| Preset      | Line height | Color                      | Best for                  |
+| ----------- | ----------- | -------------------------- | ------------------------- |
+| `4px`       | 4px         | `rgba(0, 150, 255, 0.15)`  | Dense UIs, compact grids  |
+| `8px`       | 8px         | `rgba(0, 150, 255, 0.2)`   | Standard 8pt grid systems |
+| `16px`      | 16px        | `rgba(204, 204, 204, 0.5)` | Body text baseline        |
+| `24px`      | 24px        | `rgba(204, 204, 204, 0.5)` | Heading alignment         |
+| `material`  | 4px         | `rgba(244, 67, 54, 0.15)`  | Material Design           |
+| `tailwind`  | 4px         | `rgba(99, 102, 241, 0.15)` | Tailwind CSS              |
+| `bootstrap` | 8px         | `rgba(13, 110, 253, 0.2)`  | Bootstrap                 |
 
-Override or hide the overlay on individual stories:
+### Column grid
+
+Add vertical column lines on top of the horizontal baseline:
 
 ```typescript
-export const MyStory = {
+export const ColumnGrid = {
   parameters: {
     vrhythm: {
-      hide: true,
+      lineHeight: '8px',
+      columnWidth: '80px',
+      gutterWidth: '16px',
+      columnColor: 'rgba(99, 102, 241, 0.1)',
     },
   },
 };
 ```
 
-## ⚙️ Options
+### Manual decorator
 
-| Option       | Type               | Default                | Description                                |
-| ------------ | ------------------ | ---------------------- | ------------------------------------------ |
-| `color`      | `string`           | `'rgb(204, 204, 204)'` | Any valid CSS color for the guide lines    |
-| `lineHeight` | `string \| number` | `'16px'`               | Baseline grid height (e.g. `16px`, `1rem`) |
-| `offset`     | `string \| number` | `0`                    | Vertical offset from the top               |
-| `hide`       | `boolean`          | `false`                | Hide the overlay for specific stories      |
+If you prefer to opt out of the addon preset:
 
-## 💡 Why vertical rhythm?
+```typescript
+import { withVRhythm } from 'storybook-vrhythm';
 
-Vertical rhythm is the practice of spacing elements on a page based on a consistent baseline grid. It improves readability and creates a sense of visual harmony. This decorator lets you **see** the grid while developing, so you can catch alignment issues before they reach production.
+export const decorators = [withVRhythm];
+```
 
-## 🛠️ Development
+## Options
 
-```bash
-pnpm install    # Install dependencies
-pnpm build      # Build the package
-pnpm test       # Run tests
-pnpm lint       # Lint source code
-pnpm format     # Format with Prettier
+### Style options
+
+| Option        | Type               | Default                | Description                                        |
+| ------------- | ------------------ | ---------------------- | -------------------------------------------------- |
+| `color`       | `string`           | `'rgb(204, 204, 204)'` | CSS color for horizontal guide lines               |
+| `lineHeight`  | `string \| number` | `'16px'`               | Baseline grid height (`'8px'`, `'1rem'`, etc.)     |
+| `lineWidth`   | `string \| number` | `'1px'`                | Thickness of each horizontal guide line            |
+| `offset`      | `string \| number` | `0`                    | Vertical offset from the top of the container      |
+| `opacity`     | `number`           | `1`                    | Overlay opacity (0–1)                              |
+| `zIndex`      | `number`           | `9999`                 | Stack order of the overlay                         |
+| `maxWidth`    | `string \| number` | —                      | Centers the overlay with this max width            |
+| `columnWidth` | `string \| number` | —                      | Repeating column width for a vertical column grid  |
+| `columnColor` | `string`           | —                      | CSS color for column lines (falls back to `color`) |
+| `gutterWidth` | `string \| number` | —                      | Gutter between columns (requires `columnWidth`)    |
+
+### Config options
+
+| Option      | Type      | Default | Description                                                        |
+| ----------- | --------- | ------- | ------------------------------------------------------------------ |
+| `hide`      | `boolean` | `false` | Hide the overlay for this story (overrides toolbar toggle)         |
+| `preset`    | `string`  | —       | Built-in preset name (see table above)                             |
+| `container` | `string`  | —       | CSS selector for the overlay's parent element (defaults to `body`) |
+
+### Parameter resolution order
+
+```text
+DEFAULT_PARAMS → preset styles → story-level parameters
 ```
 
-## 🤝 Contributing
+Later sources override earlier ones. The story-level `hide` param takes precedence over the toolbar toggle.
 
-Contributions are welcome! Feel free to open an [issue](https://github.com/jmlweb/storybook-vrhythm/issues) or submit a pull request.
+## Why vertical rhythm?
 
-## 🙏 Inspiration
+Vertical rhythm is the practice of aligning elements to a consistent baseline grid. When text, images, and components share the same vertical cadence, layouts feel cohesive and polished — even if users can't articulate why.
 
-[Baseliner](https://jpedroribeiro.com/2015/08/baseliner-my-first-chrome-extension/) — a Chrome extension by JP Ribeiro for overlaying baseline grids.
+This addon makes the invisible grid visible during development, so spacing inconsistencies get caught in Storybook instead of production.
+
+## Contributing
+
+Contributions are welcome! Feel free to open an [issue](https://github.com/jmlweb/storybook-vrhythm/issues) or submit a pull request.
 
-## 📄 License
+## License
 
-[MIT](LICENSE)
+[MIT](https://github.com/jmlweb/storybook-vrhythm/blob/master/LICENSE)
 
 [npm-badge]: https://img.shields.io/npm/v/storybook-vrhythm.svg
 [npm]: https://www.npmjs.org/package/storybook-vrhythm

package/dist/index.d.ts

@@ -1,15 +1,107 @@
-import { DecoratorFunction } from '@storybook/types';
+import { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
 interface StyleProps {
+    /** CSS color for the horizontal guide lines. Default: `'rgb(204, 204, 204)'` */
     color?: string;
+    /** Baseline grid height (e.g. `'8px'`, `'1rem'`). Default: `'16px'` */
     lineHeight?: string | number;
+    /** Thickness of each horizontal guide line. Default: `'1px'` */
+    lineWidth?: string | number;
+    /** Vertical offset from the top of the container. Default: `0` */
     offset?: string | number;
+    /** Overlay opacity (0–1). Default: `1` */
+    opacity?: number;
+    /** Stack order of the overlay. Default: `9999` */
+    zIndex?: number;
+    /** When set, centers the overlay horizontally with this max width. */
+    maxWidth?: string | number;
+    /** Repeating column width for a vertical column grid (e.g. `'80px'`). */
+    columnWidth?: string | number;
+    /** CSS color for vertical column lines. Falls back to `color` when omitted. */
+    columnColor?: string;
+    /** Gutter width between columns. Requires `columnWidth` to be set. */
+    gutterWidth?: string | number;
 }
 interface ConfigProps {
+    /** When `true`, hides the overlay for this story regardless of the toolbar toggle. */
     hide?: boolean;
+    /**
+     * Name of a built-in preset to apply. Story-level params override preset values.
+     * Available: `'4px'`, `'8px'`, `'16px'`, `'24px'`, `'material'`, `'tailwind'`, `'bootstrap'`
+     */
+    preset?: string;
+    /** CSS selector for the overlay's parent element. Defaults to `body`. */
+    container?: string;
 }
 
+declare module 'storybook/internal/types' {
+    interface StorybookParameters {
+        /** Vertical rhythm overlay options (storybook-vrhythm). */
+        vrhythm?: StyleProps & ConfigProps;
+    }
+}
+declare module 'storybook/internal/csf' {
+    interface Globals {
+        /** Toolbar toggle/preset selector for the vertical rhythm overlay.
+         * Values: `'true'` (show with story params) | `'false'` (hide) | preset name (e.g. `'material'`, `'tailwind'`) | boolean. */
+        vrhythm?: string | boolean;
+    }
+}
+
+declare const presets: {
+    readonly '4px': {
+        readonly lineHeight: "4px";
+        readonly color: "rgba(0, 150, 255, 0.15)";
+    };
+    readonly '8px': {
+        readonly lineHeight: "8px";
+        readonly color: "rgba(0, 150, 255, 0.2)";
+    };
+    readonly '16px': {
+        readonly lineHeight: "16px";
+        readonly color: "rgba(204, 204, 204, 0.5)";
+    };
+    readonly '24px': {
+        readonly lineHeight: "24px";
+        readonly color: "rgba(204, 204, 204, 0.5)";
+    };
+    readonly material: {
+        readonly lineHeight: "4px";
+        readonly color: "rgba(244, 67, 54, 0.15)";
+    };
+    readonly tailwind: {
+        readonly lineHeight: "4px";
+        readonly color: "rgba(99, 102, 241, 0.15)";
+    };
+    readonly bootstrap: {
+        readonly lineHeight: "8px";
+        readonly color: "rgba(13, 110, 253, 0.2)";
+    };
+};
+type PresetName = keyof typeof presets;
+
 type VRhythmParams = StyleProps & ConfigProps;
-declare const withVRhythm: DecoratorFunction;
+/**
+ * Storybook decorator that injects a vertical rhythm baseline grid overlay into stories.
+ *
+ * Register globally via the addon preset in `.storybook/main.ts` (recommended):
+ * ```ts
+ * export default { addons: ['storybook-vrhythm'] };
+ * ```
+ *
+ * Or manually in `.storybook/preview.ts`:
+ * ```ts
+ * import { withVRhythm } from 'storybook-vrhythm';
+ * export const decorators = [withVRhythm];
+ * ```
+ *
+ * Control per story via `parameters.vrhythm`:
+ * ```ts
+ * export const MyStory = {
+ *   parameters: { vrhythm: { preset: 'material' } },
+ * };
+ * ```
+ */
+declare const withVRhythm: DecoratorFunction<Renderer>;
 
-export { type ConfigProps, type StyleProps, type VRhythmParams, withVRhythm };
+export { type ConfigProps, type PresetName, type StyleProps, type VRhythmParams, presets, withVRhythm };

package/dist/index.js

@@ -1,7 +1,10 @@
 // src/constants.ts
 var DEFAULT_COLOR = "rgb(204, 204, 204)";
 var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_LINE_WIDTH = "1px";
 var DEFAULT_OFFSET = 0;
+var DEFAULT_OPACITY = 1;
+var DEFAULT_Z_INDEX = 9999;
 var PARENT_SELECTOR = "body";
 var DIV_ID = "storybook-rhythm";
 
@@ -9,16 +12,41 @@ var DIV_ID = "storybook-rhythm";
 var getStyle = ({
   color = DEFAULT_COLOR,
   lineHeight = DEFAULT_LINE_HEIGHT,
-  offset = DEFAULT_OFFSET
-}) => ({
-  position: "absolute",
-  top: offset,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,
-  pointerEvents: "none"
-});
+  lineWidth = DEFAULT_LINE_WIDTH,
+  offset = DEFAULT_OFFSET,
+  opacity = DEFAULT_OPACITY,
+  zIndex = DEFAULT_Z_INDEX,
+  maxWidth,
+  columnWidth,
+  columnColor,
+  gutterWidth
+}) => {
+  const horizontal = `linear-gradient(${color} ${lineWidth}, transparent ${lineWidth}) left top / ${lineWidth} ${lineHeight}`;
+  const columnGradient = columnWidth != null ? gutterWidth != null ? `linear-gradient(90deg, transparent calc(${columnWidth} - ${gutterWidth}), ${columnColor ?? color} calc(${columnWidth} - ${gutterWidth})) left top / ${columnWidth} 100%` : `linear-gradient(90deg, ${columnColor ?? color} ${lineWidth}, transparent ${lineWidth}) left top / ${columnWidth} 100%` : null;
+  const background = columnGradient != null ? `${horizontal}, ${columnGradient}` : horizontal;
+  const positioning = maxWidth != null ? { left: "50%", width: maxWidth, transform: "translateX(-50%)" } : { left: 0, right: 0 };
+  return {
+    position: "absolute",
+    top: offset,
+    ...positioning,
+    bottom: 0,
+    background,
+    pointerEvents: "none",
+    opacity,
+    zIndex
+  };
+};
+
+// src/presets.ts
+var presets = {
+  "4px": { lineHeight: "4px", color: "rgba(0, 150, 255, 0.15)" },
+  "8px": { lineHeight: "8px", color: "rgba(0, 150, 255, 0.2)" },
+  "16px": { lineHeight: "16px", color: "rgba(204, 204, 204, 0.5)" },
+  "24px": { lineHeight: "24px", color: "rgba(204, 204, 204, 0.5)" },
+  material: { lineHeight: "4px", color: "rgba(244, 67, 54, 0.15)" },
+  tailwind: { lineHeight: "4px", color: "rgba(99, 102, 241, 0.15)" },
+  bootstrap: { lineHeight: "8px", color: "rgba(13, 110, 253, 0.2)" }
+};
 
 // src/utils.ts
 function createElement() {
@@ -39,38 +67,55 @@ function removeElement() {
     element.remove();
   }
 }
-function injectStyle(style) {
+function injectStyle(style, container) {
   const element = getOrCreateElement();
   Object.assign(element.style, style);
-  if (!element.parentNode) {
-    const parent = document.querySelector(PARENT_SELECTOR);
-    if (parent) {
-      parent.append(element);
-    }
+  let parent = null;
+  try {
+    parent = document.querySelector(container ?? PARENT_SELECTOR);
+  } catch {
+  }
+  if (!parent) {
+    parent = document.querySelector(PARENT_SELECTOR);
+  }
+  if (parent && element.parentNode !== parent) {
+    parent.append(element);
   }
 }
 
 // src/index.ts
 var DEFAULT_PARAMS = {
   hide: false,
+  preset: "",
+  container: "",
   color: DEFAULT_COLOR,
   lineHeight: DEFAULT_LINE_HEIGHT,
-  offset: DEFAULT_OFFSET
+  offset: DEFAULT_OFFSET,
+  opacity: DEFAULT_OPACITY,
+  zIndex: DEFAULT_Z_INDEX
 };
 var withVRhythm = (storyFn, context) => {
+  const raw = context.parameters?.vrhythm;
+  const presetStyles = raw?.preset && raw.preset in presets ? presets[raw.preset] : {};
   const params = {
     ...DEFAULT_PARAMS,
-    ...context.parameters?.vrhythm
+    ...presetStyles,
+    ...raw
   };
-  if (params.hide) {
+  const globalsVrhythm = context.globals?.vrhythm;
+  const globalPresetName = typeof globalsVrhythm === "string" && globalsVrhythm !== "true" && globalsVrhythm !== "false" && globalsVrhythm in presets ? globalsVrhythm : null;
+  const globalPresetStyles = globalPresetName ? presets[globalPresetName] : {};
+  const isHidden = !!params.hide || globalsVrhythm === false || globalsVrhythm === "false";
+  if (isHidden) {
     removeElement();
   } else {
-    const style = getStyle(params);
-    injectStyle(style);
+    const finalParams = { ...params, ...globalPresetStyles };
+    const style = getStyle(finalParams);
+    injectStyle(style, params.container || void 0);
   }
   return storyFn(context);
 };
 
-export { withVRhythm };
+export { presets, withVRhythm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB,oBAAA;AACtB,IAAM,mBAAA,GAAsB,MAAA;AAC5B,IAAM,cAAA,GAAiB,CAAA;AACvB,IAAM,eAAA,GAAkB,MAAA;AACxB,IAAM,MAAA,GAAS,kBAAA;;;ACGf,IAAM,WAAW,CAAC;AAAA,EACvB,KAAA,GAAQ,aAAA;AAAA,EACR,UAAA,GAAa,mBAAA;AAAA,EACb,MAAA,GAAS;AACX,CAAA,MAA6B;AAAA,EAC3B,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,MAAA,EAAQ,CAAA;AAAA,EACR,UAAA,EAAY,CAAA,gBAAA,EAAmB,KAAK,CAAA,sCAAA,EAAyC,UAAU,CAAA,CAAA;AAAA,EACvF,aAAA,EAAe;AACjB,CAAA,CAAA;;;AChBA,SAAS,aAAA,GAAgC;AACvC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,OAAA,CAAQ,YAAA,CAAa,MAAM,MAAM,CAAA;AACjC,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,kBAAA,GAAqC;AAC5C,EAAA,MAAM,QAAA,GAAW,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC/C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,aAAA,EAAc;AACvB;AAEO,SAAS,aAAA,GAAsB;AACpC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC9C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,MAAA,EAAO;AAAA,EACjB;AACF;AAEO,SAAS,YAAY,KAAA,EAAuB;AACjD,EAAA,MAAM,UAAU,kBAAA,EAAmB;AACnC,EAAA,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,KAAK,CAAA;AAElC,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,eAAe,CAAA;AACrD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AAAA,IACvB;AAAA,EACF;AACF;;;ACrBA,IAAM,cAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,aAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,MAAA,EAAQ;AACV,CAAA;AAEO,IAAM,WAAA,GAAiC,CAAC,OAAA,EAAS,OAAA,KAAY;AAClE,EAAA,MAAM,MAAA,GAAkC;AAAA,IACtC,GAAG,cAAA;AAAA,IACH,GAAI,QAAQ,UAAA,EAAwD;AAAA,GACtE;AAEA,EAAA,IAAI,OAAO,IAAA,EAAM;AACf,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,MAAO;AACL,IAAA,MAAM,KAAA,GAAQ,SAAS,MAAM,CAAA;AAC7B,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,QAAQ,OAAO,CAAA;AACxB","file":"index.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  if (!element.parentNode) {\n    const parent = document.querySelector(PARENT_SELECTOR);\n    if (parent) {\n      parent.append(element);\n    }\n  }\n}\n","import type { DecoratorFunction } from '@storybook/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: Required<VRhythmParams> = {\n  hide: false,\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n};\n\nexport const withVRhythm: DecoratorFunction = (storyFn, context) => {\n  const params: Required<VRhythmParams> = {\n    ...DEFAULT_PARAMS,\n    ...(context.parameters as { vrhythm?: VRhythmParams } | undefined)?.vrhythm,\n  };\n\n  if (params.hide) {\n    removeElement();\n  } else {\n    const style = getStyle(params);\n    injectStyle(style);\n  }\n\n  return storyFn(context);\n};\n\nexport type { StyleProps, ConfigProps } from './types';\n"]}
+{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/presets.ts","../src/utils.ts","../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_LINE_WIDTH = '1px';\nexport const DEFAULT_OFFSET = 0;\nexport const DEFAULT_OPACITY = 1;\nexport const DEFAULT_Z_INDEX = 9999;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_OFFSET,\n  DEFAULT_OPACITY,\n  DEFAULT_Z_INDEX,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  lineWidth = DEFAULT_LINE_WIDTH,\n  offset = DEFAULT_OFFSET,\n  opacity = DEFAULT_OPACITY,\n  zIndex = DEFAULT_Z_INDEX,\n  maxWidth,\n  columnWidth,\n  columnColor,\n  gutterWidth,\n}: StyleProps): StyleObj => {\n  const horizontal = `linear-gradient(${color} ${lineWidth}, transparent ${lineWidth}) left top / ${lineWidth} ${lineHeight}`;\n\n  const columnGradient =\n    columnWidth != null\n      ? gutterWidth != null\n        ? `linear-gradient(90deg, transparent calc(${columnWidth} - ${gutterWidth}), ${columnColor ?? color} calc(${columnWidth} - ${gutterWidth})) left top / ${columnWidth} 100%`\n        : `linear-gradient(90deg, ${columnColor ?? color} ${lineWidth}, transparent ${lineWidth}) left top / ${columnWidth} 100%`\n      : null;\n\n  const background =\n    columnGradient != null ? `${horizontal}, ${columnGradient}` : horizontal;\n\n  const positioning: StyleObj =\n    maxWidth != null\n      ? { left: '50%', width: maxWidth, transform: 'translateX(-50%)' }\n      : { left: 0, right: 0 };\n\n  return {\n    position: 'absolute',\n    top: offset,\n    ...positioning,\n    bottom: 0,\n    background,\n    pointerEvents: 'none',\n    opacity,\n    zIndex,\n  };\n};\n","import type { StyleProps } from './types';\n\nexport const presets = {\n  '4px': { lineHeight: '4px', color: 'rgba(0, 150, 255, 0.15)' },\n  '8px': { lineHeight: '8px', color: 'rgba(0, 150, 255, 0.2)' },\n  '16px': { lineHeight: '16px', color: 'rgba(204, 204, 204, 0.5)' },\n  '24px': { lineHeight: '24px', color: 'rgba(204, 204, 204, 0.5)' },\n  material: { lineHeight: '4px', color: 'rgba(244, 67, 54, 0.15)' },\n  tailwind: { lineHeight: '4px', color: 'rgba(99, 102, 241, 0.15)' },\n  bootstrap: { lineHeight: '8px', color: 'rgba(13, 110, 253, 0.2)' },\n} as const satisfies Record<string, StyleProps>;\n\nexport type PresetName = keyof typeof presets;\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj, container?: string): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  let parent: Element | null = null;\n  try {\n    parent = document.querySelector(container ?? PARENT_SELECTOR);\n  } catch {\n    // invalid selector string — fall through to body fallback\n  }\n\n  if (!parent) {\n    parent = document.querySelector(PARENT_SELECTOR);\n  }\n\n  if (parent && element.parentNode !== parent) {\n    parent.append(element);\n  }\n}\n","import './storybook-parameter-augmentation';\n\nimport type { DecoratorFunction, Renderer } from 'storybook/internal/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { presets, PresetName } from './presets';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n  DEFAULT_OPACITY,\n  DEFAULT_Z_INDEX,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: VRhythmParams = {\n  hide: false,\n  preset: '',\n  container: '',\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n  opacity: DEFAULT_OPACITY,\n  zIndex: DEFAULT_Z_INDEX,\n};\n\n/**\n * Storybook decorator that injects a vertical rhythm baseline grid overlay into stories.\n *\n * Register globally via the addon preset in `.storybook/main.ts` (recommended):\n * ```ts\n * export default { addons: ['storybook-vrhythm'] };\n * ```\n *\n * Or manually in `.storybook/preview.ts`:\n * ```ts\n * import { withVRhythm } from 'storybook-vrhythm';\n * export const decorators = [withVRhythm];\n * ```\n *\n * Control per story via `parameters.vrhythm`:\n * ```ts\n * export const MyStory = {\n *   parameters: { vrhythm: { preset: 'material' } },\n * };\n * ```\n */\nexport const withVRhythm: DecoratorFunction<Renderer> = (storyFn, context) => {\n  const raw = (context.parameters as { vrhythm?: VRhythmParams } | undefined)\n    ?.vrhythm;\n  const presetStyles =\n    raw?.preset && raw.preset in presets\n      ? presets[raw.preset as PresetName]\n      : {};\n  const params: VRhythmParams = {\n    ...DEFAULT_PARAMS,\n    ...presetStyles,\n    ...raw,\n  };\n\n  const globalsVrhythm = (\n    context.globals as { vrhythm?: string | boolean } | undefined\n  )?.vrhythm;\n\n  const globalPresetName =\n    typeof globalsVrhythm === 'string' &&\n    globalsVrhythm !== 'true' &&\n    globalsVrhythm !== 'false' &&\n    globalsVrhythm in presets\n      ? (globalsVrhythm as PresetName)\n      : null;\n\n  const globalPresetStyles = globalPresetName ? presets[globalPresetName] : {};\n\n  const isHidden =\n    !!params.hide || globalsVrhythm === false || globalsVrhythm === 'false';\n\n  if (isHidden) {\n    removeElement();\n  } else {\n    const finalParams: VRhythmParams = { ...params, ...globalPresetStyles };\n    const style = getStyle(finalParams);\n    injectStyle(style, params.container || undefined);\n  }\n\n  return storyFn(context);\n};\n\nexport { presets } from './presets';\nexport type { PresetName } from './presets';\nexport type { StyleProps, ConfigProps } from './types';\n"]}

package/dist/preset.js

@@ -1,11 +1 @@
-// src/preset.ts
-import { dirname, join } from "path";
-import { fileURLToPath } from "url";
-var dir = dirname(fileURLToPath(import.meta.url));
-function previewAnnotations(entry = []) {
-  return [...entry, join(dir, "preview.js")];
-}
-export {
-  previewAnnotations
-};
 //# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset.ts"],"sourcesContent":["import { dirname, join } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst dir = dirname(fileURLToPath(import.meta.url));\n\nexport function previewAnnotations(entry: string[] = []) {\n  return [...entry, join(dir, 'preview.js')];\n}\n"],"mappings":";AAAA,SAAS,SAAS,YAAY;AAC9B,SAAS,qBAAqB;AAE9B,IAAM,MAAM,QAAQ,cAAc,YAAY,GAAG,CAAC;AAE3C,SAAS,mBAAmB,QAAkB,CAAC,GAAG;AACvD,SAAO,CAAC,GAAG,OAAO,KAAK,KAAK,YAAY,CAAC;AAC3C;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/preview.d.ts

@@ -1,5 +1,14 @@
-import { ProjectAnnotations, Renderer } from '@storybook/types';
+import * as storybook_internal_csf from 'storybook/internal/csf';
+import { VRhythmParams } from './index.js';
+import 'storybook/internal/types';
 
-declare const preview: ProjectAnnotations<Renderer>;
+declare const _default: storybook_internal_csf.PreviewAddon<{
+    parameters: {
+        vrhythm?: VRhythmParams;
+    };
+    globals: {
+        vrhythm?: string | boolean;
+    };
+}>;
 
-export { preview as default };
+export { _default as default };

package/dist/preview.js

@@ -1,7 +1,14 @@
+import { definePreviewAddon } from 'storybook/internal/csf';
+
+// src/preview.ts
+
 // src/constants.ts
 var DEFAULT_COLOR = "rgb(204, 204, 204)";
 var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_LINE_WIDTH = "1px";
 var DEFAULT_OFFSET = 0;
+var DEFAULT_OPACITY = 1;
+var DEFAULT_Z_INDEX = 9999;
 var PARENT_SELECTOR = "body";
 var DIV_ID = "storybook-rhythm";
 
@@ -9,16 +16,41 @@ var DIV_ID = "storybook-rhythm";
 var getStyle = ({
   color = DEFAULT_COLOR,
   lineHeight = DEFAULT_LINE_HEIGHT,
-  offset = DEFAULT_OFFSET
-}) => ({
-  position: "absolute",
-  top: offset,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,
-  pointerEvents: "none"
-});
+  lineWidth = DEFAULT_LINE_WIDTH,
+  offset = DEFAULT_OFFSET,
+  opacity = DEFAULT_OPACITY,
+  zIndex = DEFAULT_Z_INDEX,
+  maxWidth,
+  columnWidth,
+  columnColor,
+  gutterWidth
+}) => {
+  const horizontal = `linear-gradient(${color} ${lineWidth}, transparent ${lineWidth}) left top / ${lineWidth} ${lineHeight}`;
+  const columnGradient = columnWidth != null ? gutterWidth != null ? `linear-gradient(90deg, transparent calc(${columnWidth} - ${gutterWidth}), ${columnColor ?? color} calc(${columnWidth} - ${gutterWidth})) left top / ${columnWidth} 100%` : `linear-gradient(90deg, ${columnColor ?? color} ${lineWidth}, transparent ${lineWidth}) left top / ${columnWidth} 100%` : null;
+  const background = columnGradient != null ? `${horizontal}, ${columnGradient}` : horizontal;
+  const positioning = maxWidth != null ? { left: "50%", width: maxWidth, transform: "translateX(-50%)" } : { left: 0, right: 0 };
+  return {
+    position: "absolute",
+    top: offset,
+    ...positioning,
+    bottom: 0,
+    background,
+    pointerEvents: "none",
+    opacity,
+    zIndex
+  };
+};
+
+// src/presets.ts
+var presets = {
+  "4px": { lineHeight: "4px", color: "rgba(0, 150, 255, 0.15)" },
+  "8px": { lineHeight: "8px", color: "rgba(0, 150, 255, 0.2)" },
+  "16px": { lineHeight: "16px", color: "rgba(204, 204, 204, 0.5)" },
+  "24px": { lineHeight: "24px", color: "rgba(204, 204, 204, 0.5)" },
+  material: { lineHeight: "4px", color: "rgba(244, 67, 54, 0.15)" },
+  tailwind: { lineHeight: "4px", color: "rgba(99, 102, 241, 0.15)" },
+  bootstrap: { lineHeight: "8px", color: "rgba(13, 110, 253, 0.2)" }
+};
 
 // src/utils.ts
 function createElement() {
@@ -39,43 +71,83 @@ function removeElement() {
     element.remove();
   }
 }
-function injectStyle(style) {
+function injectStyle(style, container) {
   const element = getOrCreateElement();
   Object.assign(element.style, style);
-  if (!element.parentNode) {
-    const parent = document.querySelector(PARENT_SELECTOR);
-    if (parent) {
-      parent.append(element);
-    }
+  let parent = null;
+  try {
+    parent = document.querySelector(container ?? PARENT_SELECTOR);
+  } catch {
+  }
+  if (!parent) {
+    parent = document.querySelector(PARENT_SELECTOR);
+  }
+  if (parent && element.parentNode !== parent) {
+    parent.append(element);
   }
 }
 
 // src/index.ts
 var DEFAULT_PARAMS = {
   hide: false,
+  preset: "",
+  container: "",
   color: DEFAULT_COLOR,
   lineHeight: DEFAULT_LINE_HEIGHT,
-  offset: DEFAULT_OFFSET
+  offset: DEFAULT_OFFSET,
+  opacity: DEFAULT_OPACITY,
+  zIndex: DEFAULT_Z_INDEX
 };
 var withVRhythm = (storyFn, context) => {
+  const raw = context.parameters?.vrhythm;
+  const presetStyles = raw?.preset && raw.preset in presets ? presets[raw.preset] : {};
   const params = {
     ...DEFAULT_PARAMS,
-    ...context.parameters?.vrhythm
+    ...presetStyles,
+    ...raw
   };
-  if (params.hide) {
+  const globalsVrhythm = context.globals?.vrhythm;
+  const globalPresetName = typeof globalsVrhythm === "string" && globalsVrhythm !== "true" && globalsVrhythm !== "false" && globalsVrhythm in presets ? globalsVrhythm : null;
+  const globalPresetStyles = globalPresetName ? presets[globalPresetName] : {};
+  const isHidden = !!params.hide || globalsVrhythm === false || globalsVrhythm === "false";
+  if (isHidden) {
     removeElement();
   } else {
-    const style = getStyle(params);
-    injectStyle(style);
+    const finalParams = { ...params, ...globalPresetStyles };
+    const style = getStyle(finalParams);
+    injectStyle(style, params.container || void 0);
   }
   return storyFn(context);
 };
 
 // src/preview.ts
-var preview = {
-  decorators: [withVRhythm]
-};
-var preview_default = preview;
+var preview_default = definePreviewAddon({
+  decorators: [withVRhythm],
+  globalTypes: {
+    vrhythm: {
+      description: "Toggle vertical rhythm grid overlay",
+      toolbar: {
+        title: "Show vertical rhythm",
+        icon: "grid",
+        items: [
+          { value: "true", title: "Default (story params)", icon: "eye" },
+          { value: "false", title: "Hide", icon: "eyeclose" },
+          { value: "4px", title: "4px baseline", icon: "grid" },
+          { value: "8px", title: "8px baseline", icon: "grid" },
+          { value: "16px", title: "16px baseline", icon: "grid" },
+          { value: "24px", title: "24px baseline", icon: "grid" },
+          { value: "material", title: "Material Design", icon: "grid" },
+          { value: "tailwind", title: "Tailwind CSS", icon: "grid" },
+          { value: "bootstrap", title: "Bootstrap", icon: "grid" }
+        ],
+        dynamicTitle: true
+      }
+    }
+  },
+  initialGlobals: {
+    vrhythm: "true"
+  }
+});
 
 export { preview_default as default };
 //# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.ts","../src/preview.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB,oBAAA;AACtB,IAAM,mBAAA,GAAsB,MAAA;AAC5B,IAAM,cAAA,GAAiB,CAAA;AACvB,IAAM,eAAA,GAAkB,MAAA;AACxB,IAAM,MAAA,GAAS,kBAAA;;;ACGf,IAAM,WAAW,CAAC;AAAA,EACvB,KAAA,GAAQ,aAAA;AAAA,EACR,UAAA,GAAa,mBAAA;AAAA,EACb,MAAA,GAAS;AACX,CAAA,MAA6B;AAAA,EAC3B,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,MAAA,EAAQ,CAAA;AAAA,EACR,UAAA,EAAY,CAAA,gBAAA,EAAmB,KAAK,CAAA,sCAAA,EAAyC,UAAU,CAAA,CAAA;AAAA,EACvF,aAAA,EAAe;AACjB,CAAA,CAAA;;;AChBA,SAAS,aAAA,GAAgC;AACvC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,OAAA,CAAQ,YAAA,CAAa,MAAM,MAAM,CAAA;AACjC,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,kBAAA,GAAqC;AAC5C,EAAA,MAAM,QAAA,GAAW,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC/C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,aAAA,EAAc;AACvB;AAEO,SAAS,aAAA,GAAsB;AACpC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC9C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,MAAA,EAAO;AAAA,EACjB;AACF;AAEO,SAAS,YAAY,KAAA,EAAuB;AACjD,EAAA,MAAM,UAAU,kBAAA,EAAmB;AACnC,EAAA,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,KAAK,CAAA;AAElC,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,eAAe,CAAA;AACrD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AAAA,IACvB;AAAA,EACF;AACF;;;ACrBA,IAAM,cAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,aAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,MAAA,EAAQ;AACV,CAAA;AAEO,IAAM,WAAA,GAAiC,CAAC,OAAA,EAAS,OAAA,KAAY;AAClE,EAAA,MAAM,MAAA,GAAkC;AAAA,IACtC,GAAG,cAAA;AAAA,IACH,GAAI,QAAQ,UAAA,EAAwD;AAAA,GACtE;AAEA,EAAA,IAAI,OAAO,IAAA,EAAM;AACf,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,MAAO;AACL,IAAA,MAAM,KAAA,GAAQ,SAAS,MAAM,CAAA;AAC7B,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,QAAQ,OAAO,CAAA;AACxB,CAAA;;;AC9BA,IAAM,OAAA,GAAwC;AAAA,EAC5C,UAAA,EAAY,CAAC,WAAW;AAC1B,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"preview.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  if (!element.parentNode) {\n    const parent = document.querySelector(PARENT_SELECTOR);\n    if (parent) {\n      parent.append(element);\n    }\n  }\n}\n","import type { DecoratorFunction } from '@storybook/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: Required<VRhythmParams> = {\n  hide: false,\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n};\n\nexport const withVRhythm: DecoratorFunction = (storyFn, context) => {\n  const params: Required<VRhythmParams> = {\n    ...DEFAULT_PARAMS,\n    ...(context.parameters as { vrhythm?: VRhythmParams } | undefined)?.vrhythm,\n  };\n\n  if (params.hide) {\n    removeElement();\n  } else {\n    const style = getStyle(params);\n    injectStyle(style);\n  }\n\n  return storyFn(context);\n};\n\nexport type { StyleProps, ConfigProps } from './types';\n","import type { ProjectAnnotations, Renderer } from '@storybook/types';\n\nimport { withVRhythm } from './index';\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withVRhythm],\n};\n\nexport default preview;\n"]}
+{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/presets.ts","../src/utils.ts","../src/index.ts","../src/preview.ts"],"names":[],"mappings":"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","file":"preview.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_LINE_WIDTH = '1px';\nexport const DEFAULT_OFFSET = 0;\nexport const DEFAULT_OPACITY = 1;\nexport const DEFAULT_Z_INDEX = 9999;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_OFFSET,\n  DEFAULT_OPACITY,\n  DEFAULT_Z_INDEX,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  lineWidth = DEFAULT_LINE_WIDTH,\n  offset = DEFAULT_OFFSET,\n  opacity = DEFAULT_OPACITY,\n  zIndex = DEFAULT_Z_INDEX,\n  maxWidth,\n  columnWidth,\n  columnColor,\n  gutterWidth,\n}: StyleProps): StyleObj => {\n  const horizontal = `linear-gradient(${color} ${lineWidth}, transparent ${lineWidth}) left top / ${lineWidth} ${lineHeight}`;\n\n  const columnGradient =\n    columnWidth != null\n      ? gutterWidth != null\n        ? `linear-gradient(90deg, transparent calc(${columnWidth} - ${gutterWidth}), ${columnColor ?? color} calc(${columnWidth} - ${gutterWidth})) left top / ${columnWidth} 100%`\n        : `linear-gradient(90deg, ${columnColor ?? color} ${lineWidth}, transparent ${lineWidth}) left top / ${columnWidth} 100%`\n      : null;\n\n  const background =\n    columnGradient != null ? `${horizontal}, ${columnGradient}` : horizontal;\n\n  const positioning: StyleObj =\n    maxWidth != null\n      ? { left: '50%', width: maxWidth, transform: 'translateX(-50%)' }\n      : { left: 0, right: 0 };\n\n  return {\n    position: 'absolute',\n    top: offset,\n    ...positioning,\n    bottom: 0,\n    background,\n    pointerEvents: 'none',\n    opacity,\n    zIndex,\n  };\n};\n","import type { StyleProps } from './types';\n\nexport const presets = {\n  '4px': { lineHeight: '4px', color: 'rgba(0, 150, 255, 0.15)' },\n  '8px': { lineHeight: '8px', color: 'rgba(0, 150, 255, 0.2)' },\n  '16px': { lineHeight: '16px', color: 'rgba(204, 204, 204, 0.5)' },\n  '24px': { lineHeight: '24px', color: 'rgba(204, 204, 204, 0.5)' },\n  material: { lineHeight: '4px', color: 'rgba(244, 67, 54, 0.15)' },\n  tailwind: { lineHeight: '4px', color: 'rgba(99, 102, 241, 0.15)' },\n  bootstrap: { lineHeight: '8px', color: 'rgba(13, 110, 253, 0.2)' },\n} as const satisfies Record<string, StyleProps>;\n\nexport type PresetName = keyof typeof presets;\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj, container?: string): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  let parent: Element | null = null;\n  try {\n    parent = document.querySelector(container ?? PARENT_SELECTOR);\n  } catch {\n    // invalid selector string — fall through to body fallback\n  }\n\n  if (!parent) {\n    parent = document.querySelector(PARENT_SELECTOR);\n  }\n\n  if (parent && element.parentNode !== parent) {\n    parent.append(element);\n  }\n}\n","import './storybook-parameter-augmentation';\n\nimport type { DecoratorFunction, Renderer } from 'storybook/internal/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { presets, PresetName } from './presets';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n  DEFAULT_OPACITY,\n  DEFAULT_Z_INDEX,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: VRhythmParams = {\n  hide: false,\n  preset: '',\n  container: '',\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n  opacity: DEFAULT_OPACITY,\n  zIndex: DEFAULT_Z_INDEX,\n};\n\n/**\n * Storybook decorator that injects a vertical rhythm baseline grid overlay into stories.\n *\n * Register globally via the addon preset in `.storybook/main.ts` (recommended):\n * ```ts\n * export default { addons: ['storybook-vrhythm'] };\n * ```\n *\n * Or manually in `.storybook/preview.ts`:\n * ```ts\n * import { withVRhythm } from 'storybook-vrhythm';\n * export const decorators = [withVRhythm];\n * ```\n *\n * Control per story via `parameters.vrhythm`:\n * ```ts\n * export const MyStory = {\n *   parameters: { vrhythm: { preset: 'material' } },\n * };\n * ```\n */\nexport const withVRhythm: DecoratorFunction<Renderer> = (storyFn, context) => {\n  const raw = (context.parameters as { vrhythm?: VRhythmParams } | undefined)\n    ?.vrhythm;\n  const presetStyles =\n    raw?.preset && raw.preset in presets\n      ? presets[raw.preset as PresetName]\n      : {};\n  const params: VRhythmParams = {\n    ...DEFAULT_PARAMS,\n    ...presetStyles,\n    ...raw,\n  };\n\n  const globalsVrhythm = (\n    context.globals as { vrhythm?: string | boolean } | undefined\n  )?.vrhythm;\n\n  const globalPresetName =\n    typeof globalsVrhythm === 'string' &&\n    globalsVrhythm !== 'true' &&\n    globalsVrhythm !== 'false' &&\n    globalsVrhythm in presets\n      ? (globalsVrhythm as PresetName)\n      : null;\n\n  const globalPresetStyles = globalPresetName ? presets[globalPresetName] : {};\n\n  const isHidden =\n    !!params.hide || globalsVrhythm === false || globalsVrhythm === 'false';\n\n  if (isHidden) {\n    removeElement();\n  } else {\n    const finalParams: VRhythmParams = { ...params, ...globalPresetStyles };\n    const style = getStyle(finalParams);\n    injectStyle(style, params.container || undefined);\n  }\n\n  return storyFn(context);\n};\n\nexport { presets } from './presets';\nexport type { PresetName } from './presets';\nexport type { StyleProps, ConfigProps } from './types';\n","import { definePreviewAddon } from 'storybook/internal/csf';\n\nimport { withVRhythm, type VRhythmParams } from './index';\n\nexport default definePreviewAddon<{\n  parameters: { vrhythm?: VRhythmParams };\n  globals: { vrhythm?: string | boolean };\n}>({\n  decorators: [withVRhythm],\n  globalTypes: {\n    vrhythm: {\n      description: 'Toggle vertical rhythm grid overlay',\n      toolbar: {\n        title: 'Show vertical rhythm',\n        icon: 'grid',\n        items: [\n          { value: 'true', title: 'Default (story params)', icon: 'eye' },\n          { value: 'false', title: 'Hide', icon: 'eyeclose' },\n          { value: '4px', title: '4px baseline', icon: 'grid' },\n          { value: '8px', title: '8px baseline', icon: 'grid' },\n          { value: '16px', title: '16px baseline', icon: 'grid' },\n          { value: '24px', title: '24px baseline', icon: 'grid' },\n          { value: 'material', title: 'Material Design', icon: 'grid' },\n          { value: 'tailwind', title: 'Tailwind CSS', icon: 'grid' },\n          { value: 'bootstrap', title: 'Bootstrap', icon: 'grid' },\n        ],\n        dynamicTitle: true,\n      },\n    },\n  },\n  initialGlobals: {\n    vrhythm: 'true',\n  },\n});\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "storybook-vrhythm",
-  "version": "0.2.0",
-  "description": "Storybook decorator and preset addon for vertical rhythm baseline guides",
+  "version": "0.4.0",
+  "description": "Baseline grid overlay for Storybook — see your vertical rhythm while you build",
   "license": "MIT",
   "author": "jmlweb",
   "homepage": "https://github.com/jmlweb/storybook-vrhythm",
@@ -11,13 +11,18 @@
   },
   "keywords": [
     "storybook-addon",
-    "style",
-    "debug",
-    "layout",
-    "baseline",
-    "vertical-rhythm",
     "storybook",
-    "decorator"
+    "vertical-rhythm",
+    "baseline-grid",
+    "typography",
+    "layout",
+    "design-system",
+    "css-grid",
+    "decorator",
+    "debug",
+    "spacing",
+    "material-design",
+    "tailwind"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +39,10 @@
       "import": "./dist/preview.js",
       "default": "./dist/preview.js"
     },
-    "./preset": "./dist/preset.js",
+    "./preset": {
+      "import": "./dist/preset.js",
+      "default": "./dist/preset.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -45,22 +53,30 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "storybook": "^8.0.0 || ^9.0.0 || ^10.0.0"
+    "storybook": "^10.0.0"
   },
   "storybook": {
-    "displayName": "Vertical rhythm",
+    "displayName": "Vertical Rhythm Grid",
+    "icon": "https://raw.githubusercontent.com/jmlweb/storybook-vrhythm/master/packages/storybook-vrhythm/icon.png",
     "supportedFrameworks": [
       "react",
       "vue",
       "angular",
       "web-components",
-      "ember",
       "html",
-      "svelte",
-      "preact",
-      "react-native"
+      "svelte"
     ]
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write 'src/**/*.ts' 'test/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.ts' 'test/**/*.ts'"
+  },
   "prettier": {
     "printWidth": 80,
     "semi": true,
@@ -68,24 +84,13 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
-    "@storybook/types": "^8.6.14",
     "@types/node": "^25.5.0",
     "@vitest/coverage-v8": "^4.1.2",
     "jsdom": "^29.0.1",
     "prettier": "^3.5.3",
-    "storybook": "^8.6.18",
+    "storybook": "^10.0.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.2"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "lint": "tsc --noEmit",
-    "format": "prettier --write 'src/**/*.ts' 'test/**/*.ts'",
-    "format:check": "prettier --check 'src/**/*.ts' 'test/**/*.ts'"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 José Manuel Lucas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.