storybook-vrhythm 0.1.0 → 0.2.0

package/README.md

@@ -48,9 +48,39 @@ yarn add -D storybook-vrhythm
 
 ## 🚀 Usage
 
-### Global decorator
+This package is a **Storybook preset addon**: you can register it in `main` (recommended) or add the decorator manually in `preview`.
 
-Add it to your `.storybook/preview.ts` to enable it across all stories:
+**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.
+
+```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`:
+
+```typescript
+export const parameters = {
+  vrhythm: {
+    color: 'rgba(178, 86, 18, 0.5)',
+    lineHeight: '16px',
+    offset: 0,
+  },
+};
+```
+
+### Manual decorator
+
+If you prefer not to use the preset, import the decorator in `.storybook/preview.ts`:
 
 ```typescript
 import { withVRhythm } from 'storybook-vrhythm';

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { DecoratorFunction } from '@storybook/types';
+
+interface StyleProps {
+    color?: string;
+    lineHeight?: string | number;
+    offset?: string | number;
+}
+interface ConfigProps {
+    hide?: boolean;
+}
+
+type VRhythmParams = StyleProps & ConfigProps;
+declare const withVRhythm: DecoratorFunction;
+
+export { type ConfigProps, type StyleProps, type VRhythmParams, withVRhythm };

package/dist/index.js

@@ -0,0 +1,76 @@
+// src/constants.ts
+var DEFAULT_COLOR = "rgb(204, 204, 204)";
+var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_OFFSET = 0;
+var PARENT_SELECTOR = "body";
+var DIV_ID = "storybook-rhythm";
+
+// src/getStyle.ts
+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"
+});
+
+// src/utils.ts
+function createElement() {
+  const element = document.createElement("div");
+  element.setAttribute("id", DIV_ID);
+  return element;
+}
+function getOrCreateElement() {
+  const existing = document.getElementById(DIV_ID);
+  if (existing) {
+    return existing;
+  }
+  return createElement();
+}
+function removeElement() {
+  const element = document.getElementById(DIV_ID);
+  if (element) {
+    element.remove();
+  }
+}
+function injectStyle(style) {
+  const element = getOrCreateElement();
+  Object.assign(element.style, style);
+  if (!element.parentNode) {
+    const parent = document.querySelector(PARENT_SELECTOR);
+    if (parent) {
+      parent.append(element);
+    }
+  }
+}
+
+// src/index.ts
+var DEFAULT_PARAMS = {
+  hide: false,
+  color: DEFAULT_COLOR,
+  lineHeight: DEFAULT_LINE_HEIGHT,
+  offset: DEFAULT_OFFSET
+};
+var withVRhythm = (storyFn, context) => {
+  const params = {
+    ...DEFAULT_PARAMS,
+    ...context.parameters?.vrhythm
+  };
+  if (params.hide) {
+    removeElement();
+  } else {
+    const style = getStyle(params);
+    injectStyle(style);
+  }
+  return storyFn(context);
+};
+
+export { withVRhythm };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/preset.js

@@ -0,0 +1,11 @@
+// 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

@@ -0,0 +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":[]}

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from '@storybook/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,82 @@
+// src/constants.ts
+var DEFAULT_COLOR = "rgb(204, 204, 204)";
+var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_OFFSET = 0;
+var PARENT_SELECTOR = "body";
+var DIV_ID = "storybook-rhythm";
+
+// src/getStyle.ts
+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"
+});
+
+// src/utils.ts
+function createElement() {
+  const element = document.createElement("div");
+  element.setAttribute("id", DIV_ID);
+  return element;
+}
+function getOrCreateElement() {
+  const existing = document.getElementById(DIV_ID);
+  if (existing) {
+    return existing;
+  }
+  return createElement();
+}
+function removeElement() {
+  const element = document.getElementById(DIV_ID);
+  if (element) {
+    element.remove();
+  }
+}
+function injectStyle(style) {
+  const element = getOrCreateElement();
+  Object.assign(element.style, style);
+  if (!element.parentNode) {
+    const parent = document.querySelector(PARENT_SELECTOR);
+    if (parent) {
+      parent.append(element);
+    }
+  }
+}
+
+// src/index.ts
+var DEFAULT_PARAMS = {
+  hide: false,
+  color: DEFAULT_COLOR,
+  lineHeight: DEFAULT_LINE_HEIGHT,
+  offset: DEFAULT_OFFSET
+};
+var withVRhythm = (storyFn, context) => {
+  const params = {
+    ...DEFAULT_PARAMS,
+    ...context.parameters?.vrhythm
+  };
+  if (params.hide) {
+    removeElement();
+  } else {
+    const style = getStyle(params);
+    injectStyle(style);
+  }
+  return storyFn(context);
+};
+
+// src/preview.ts
+var preview = {
+  decorators: [withVRhythm]
+};
+var preview_default = preview;
+
+export { preview_default as default };
+//# sourceMappingURL=preview.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +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"]}

package/package.json

@@ -1,27 +1,65 @@
 {
   "name": "storybook-vrhythm",
-  "version": "0.1.0",
-  "description": "Storybook Vertical Rhythm Decorator",
+  "version": "0.2.0",
+  "description": "Storybook decorator and preset addon for vertical rhythm baseline guides",
+  "license": "MIT",
+  "author": "jmlweb",
   "homepage": "https://github.com/jmlweb/storybook-vrhythm",
-  "main": "dist/index.js",
-  "umd:main": "dist/storybook-vrhythm.umd.production.js",
-  "module": "dist/storybook-vrhythm.es.production.js",
-  "typings": "dist/index.d.ts",
-  "engines": {
-    "node": ">=10"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmlweb/storybook-vrhythm.git"
+  },
+  "keywords": [
+    "storybook-addon",
+    "style",
+    "debug",
+    "layout",
+    "baseline",
+    "vertical-rhythm",
+    "storybook",
+    "decorator"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js",
+      "default": "./dist/preview.js"
+    },
+    "./preset": "./dist/preset.js",
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "preset.js"
   ],
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --env=jsdom"
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "storybook": "^8.0.0 || ^9.0.0 || ^10.0.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+  "storybook": {
+    "displayName": "Vertical rhythm",
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "web-components",
+      "ember",
+      "html",
+      "svelte",
+      "preact",
+      "react-native"
+    ]
   },
   "prettier": {
     "printWidth": 80,
@@ -30,14 +68,24 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.2",
-    "husky": "^4.2.3",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1",
-    "react": "^16.12.0",
-    "tsdx": "^0.12.3",
-    "tslib": "^1.10.0",
-    "typescript": "^3.7.5"
+    "@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",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2"
   },
-  "dependencies": {}
-}
+  "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/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js';