{"_id":"@01.works/layout-overlay","_rev":"5-4d97d0a0039023e12fe692e0895b3225","name":"@01.works/layout-overlay","dist-tags":{"latest":"0.3.2"},"versions":{"0.1.0":{"name":"@01.works/layout-overlay","version":"0.1.0","keywords":["layout","grid","overlay","react","design-system","developer-tools"],"license":"MIT","_id":"@01.works/layout-overlay@0.1.0","maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"homepage":"https://github.com/01-office/layout-overlay#readme","bugs":{"url":"https://github.com/01-office/layout-overlay/issues"},"dist":{"shasum":"4ae3b052559ec194462393b5aaf8ec22f8f2f25d","tarball":"https://registry.npmjs.org/@01.works/layout-overlay/-/layout-overlay-0.1.0.tgz","fileCount":17,"integrity":"sha512-IdZf92J8zIpgYKoJ2t1OJd10iymLt+h6VTO7NO/3SBQgNoa+gdekp67/FffA7rCLkm2G7IjvN7dUmR1fYJ13xA==","signatures":[{"sig":"MEUCIQDKOx8ym8Qb/Tqn3sim4Nt7UUiHQQJwk35m2svzvU56AAIgTHIAcr2PP+ByjVUxfMRaSfDiXPQtOkl4NtQuB6vV+F0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48709},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./tailwind.css":"./dist/tailwind.css"},"scripts":{"test":"pnpm run test:unit","build":"pnpm run clean && tsc && node scripts/copy-css.mjs","clean":"node scripts/clean.mjs","test:all":"pnpm run build && node --test --test-concurrency=1","test:unit":"pnpm run build && node --test --test-concurrency=1 test/layout-overlay.test.mjs","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint","test:package":"pnpm run build && node --test --test-concurrency=1 test/package-smoke.test.mjs"},"_npmUser":{"name":"kdnhyk","email":"kdnhyk@gmail.com"},"repository":{"url":"git+https://github.com/01-office/layout-overlay.git","type":"git"},"description":"A framework-agnostic layout grid overlay for React applications","directories":{},"sideEffects":["./dist/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","publint":"^0.3.23","happy-dom":"^20.11.2","react-dom":"^19.2.0","typescript":"^5.9.3","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout-overlay_0.1.0_1787202334465_0.33634654940690756","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@01.works/layout-overlay","version":"0.2.0","keywords":["layout","grid","overlay","layout-map","svg","react","design-system","developer-tools"],"license":"MIT","_id":"@01.works/layout-overlay@0.2.0","maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"homepage":"https://github.com/01-office/layout-overlay#readme","bugs":{"url":"https://github.com/01-office/layout-overlay/issues"},"dist":{"shasum":"91c1c387bbacf0a628fe299387c11224d866791a","tarball":"https://registry.npmjs.org/@01.works/layout-overlay/-/layout-overlay-0.2.0.tgz","fileCount":23,"integrity":"sha512-cgBRGw0g04N36qW0r/jPjZB82oBb9HZH9NoBHzMoawGNXXkgAsDdj4tIvq4Q9P1AxHni+FS4MAtJ05xaBvixQA==","signatures":[{"sig":"MEUCIHdwHiSn+Mcu6mxZvqMzO/bhC71gqfMCzY08rogsUAonAiEAn2BGIRKE+yWeudSdyyPaUmg0HSz0cfygYYbO+/0kr8A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82194},"main":"./dist/index.js","type":"module","_from":"file:01.works-layout-overlay-0.2.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./layout-map":{"types":"./dist/layout-map.d.ts","import":"./dist/layout-map.js","default":"./dist/layout-map.js"},"./tokens.css":"./dist/tokens.css","./tailwind.css":"./dist/tailwind.css"},"scripts":{"test":"pnpm run test:unit","build":"pnpm run clean && tsc && node scripts/copy-css.mjs","clean":"node scripts/clean.mjs","test:all":"pnpm run build && node --test --test-concurrency=1","test:unit":"pnpm run build && node --test --test-concurrency=1 test/layout-overlay.test.mjs test/layout-map.test.mjs","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint","test:package":"pnpm run build && node --test --test-concurrency=1 test/package-smoke.test.mjs"},"_npmUser":{"name":"kdnhyk","email":"kdnhyk@gmail.com"},"_resolved":"/private/var/folders/mr/1yy73dlx7rg_sb0x6j2hvfs80000gn/T/e7e8004c4c655d74b237e012ad6ce2fc/01.works-layout-overlay-0.2.0.tgz","_integrity":"sha512-cgBRGw0g04N36qW0r/jPjZB82oBb9HZH9NoBHzMoawGNXXkgAsDdj4tIvq4Q9P1AxHni+FS4MAtJ05xaBvixQA==","repository":{"url":"git+https://github.com/01-office/layout-overlay.git","type":"git"},"_npmVersion":"11.16.0","description":"Layout guide overlays and framework-independent captured layout-map SVG rendering","directories":{},"sideEffects":["./dist/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","publint":"^0.3.23","happy-dom":"^20.11.2","react-dom":"^19.2.0","typescript":"^5.9.3","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/layout-overlay_0.2.0_1787321812267_0.858523722763364","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@01.works/layout-overlay","version":"0.3.0","keywords":["layout","grid","overlay","layout-map","svg","react","design-system","developer-tools"],"license":"MIT","_id":"@01.works/layout-overlay@0.3.0","maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"homepage":"https://github.com/01-office/layout/tree/main/packages/layout-overlay#readme","bugs":{"url":"https://github.com/01-office/layout/issues"},"dist":{"shasum":"1cf09e628ec1d631b5a6168f11e2540f3f699b45","tarball":"https://registry.npmjs.org/@01.works/layout-overlay/-/layout-overlay-0.3.0.tgz","fileCount":28,"integrity":"sha512-pcX0VTGlJzbfPNM1wKSKWk8/V5VquiS654DOLCX+RQX8u2TYcaGCTgmgYLuoZ0IQ95+z4koTsSv5e3p4gxAcig==","signatures":[{"sig":"MEUCIEj/kSr8da5G9q8dpKcOuIHCr6Ih5VhpVSN8pYs7Xiy5AiEAvLPClECoVyMQ3D+ZVdIFNISj97aIL5ubQKxcDo2hiLs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":129588},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./dom":{"types":"./dist/dom.d.ts","import":"./dist/dom.js","default":"./dist/dom.js"},"./layout-map":{"types":"./dist/layout-map.d.ts","import":"./dist/layout-map.js","default":"./dist/layout-map.js"},"./tokens.css":"./dist/tokens.css","./tailwind.css":"./dist/tailwind.css"},"gitHead":"0d235d90ce9cfb4a686b4eec5bd9e69c86c7830d","scripts":{"test":"pnpm run test:unit","build":"pnpm run clean && tsc && node scripts/copy-css.mjs","clean":"node scripts/clean.mjs","prepare":"pnpm run build","test:all":"pnpm run build && node --test --test-concurrency=1","test:unit":"pnpm run build && node --test --test-concurrency=1 test/layout-overlay.test.mjs test/layout-overlay-dom.test.mjs test/layout-map.test.mjs","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint","test:package":"pnpm run build && node --test --test-concurrency=1 test/package-smoke.test.mjs","prepublishOnly":"pnpm run test:all && pnpm run typecheck && pnpm run lint:package"},"_npmUser":{"name":"kdnhyk","email":"kdnhyk@gmail.com"},"repository":{"url":"git+https://github.com/01-office/layout.git","type":"git","directory":"packages/layout-overlay"},"_npmVersion":"11.16.0","description":"React and framework-independent live layout guide overlays, plus captured layout-map SVG rendering","directories":{},"sideEffects":["./dist/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.0","devDependencies":{"react":"^19.2.0","publint":"^0.3.23","happy-dom":"^20.11.2","react-dom":"^19.2.0","typescript":"^5.9.3","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/layout-overlay_0.3.0_1787799750283_0.21578071209492533","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@01.works/layout-overlay","version":"0.3.1","keywords":["layout","grid","overlay","layout-map","svg","react","design-system","developer-tools"],"license":"MIT","_id":"@01.works/layout-overlay@0.3.1","maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"homepage":"https://github.com/01-office/design-context/tree/main/packages/layout-overlay#readme","bugs":{"url":"https://github.com/01-office/design-context/issues"},"dist":{"shasum":"5ff7d19dc9ba5c93ec420ce740b8a8c700eafae4","tarball":"https://registry.npmjs.org/@01.works/layout-overlay/-/layout-overlay-0.3.1.tgz","fileCount":38,"integrity":"sha512-xSQD6vdx0vbv1yAvDdxan03CVO9SNvByeo3kGtfAE6rBV1ewpDQiJjlmlAuezVUXU1l8QUZGBagdmHQ1Tf8TXA==","signatures":[{"sig":"MEYCIQCB4O44u2nxQWwWenh5YukEtxDWOHTh4stkJRNfFJOP8wIhANS8A/7Mc8oi3ZJL7xxB15D14z3Ic3rGPtTnOWRDtMCW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":137458},"main":"./dist/index.js","type":"module","_from":"file:01.works-layout-overlay-0.3.1.tgz","types":"./dist/index.d.ts","engines":{"node":">=22.12.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./dom":{"types":"./dist/dom.d.ts","import":"./dist/dom.js","default":"./dist/dom.js"},"./version":{"types":"./dist/version.d.ts","import":"./dist/version.js","default":"./dist/version.js"},"./layout-map":{"types":"./dist/layout-map.d.ts","import":"./dist/layout-map.js","default":"./dist/layout-map.js"},"./tokens.css":"./dist/tokens.css","./tailwind.css":"./dist/tailwind.css"},"scripts":{"test":"pnpm run test:unit","build":"pnpm run clean && tsc && node scripts/copy-css.mjs","clean":"node scripts/clean.mjs","test:all":"pnpm run build && node --test --test-concurrency=1","test:unit":"pnpm run build && node --test --test-concurrency=1 test/layout-overlay.test.mjs test/layout-overlay-dom.test.mjs test/layout-map.test.mjs","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint","test:package":"pnpm run build && node --test --test-concurrency=1 test/package-smoke.test.mjs"},"_npmUser":{"name":"kdnhyk","email":"kdnhyk@gmail.com"},"_resolved":"/private/var/folders/mr/1yy73dlx7rg_sb0x6j2hvfs80000gn/T/1785ad924f4b0745dc96fd5d483a7702/01.works-layout-overlay-0.3.1.tgz","_integrity":"sha512-xSQD6vdx0vbv1yAvDdxan03CVO9SNvByeo3kGtfAE6rBV1ewpDQiJjlmlAuezVUXU1l8QUZGBagdmHQ1Tf8TXA==","repository":{"url":"git+https://github.com/01-office/design-context.git","type":"git","directory":"packages/layout-overlay"},"_npmVersion":"11.16.0","description":"React and framework-independent live layout guide overlays, plus captured layout-map SVG rendering","directories":{},"sideEffects":["./dist/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","publint":"^0.3.23","happy-dom":"^20.11.2","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/layout-overlay_0.3.1_1787908398646_0.5847165840866182","host":"s3://npm-registry-packages-npm-production"}},"0.3.2":{"name":"@01.works/layout-overlay","version":"0.3.2","description":"React and framework-independent live layout guide overlays, plus captured layout-map SVG rendering","type":"module","engines":{"node":">=22.12.0"},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./layout-map":{"types":"./dist/layout-map.d.ts","import":"./dist/layout-map.js","default":"./dist/layout-map.js"},"./dom":{"types":"./dist/dom.d.ts","import":"./dist/dom.js","default":"./dist/dom.js"},"./version":{"types":"./dist/version.d.ts","import":"./dist/version.js","default":"./dist/version.js"},"./tokens.css":"./dist/tokens.css","./tailwind.css":"./dist/tailwind.css"},"sideEffects":["./dist/*.css"],"repository":{"type":"git","url":"git+https://github.com/01-office/design-context.git","directory":"packages/layout-overlay"},"bugs":{"url":"https://github.com/01-office/design-context/issues"},"homepage":"https://github.com/01-office/design-context/tree/main/packages/layout-overlay#readme","keywords":["layout","grid","overlay","layout-map","svg","react","design-system","developer-tools"],"publishConfig":{"access":"public"},"license":"SEE LICENSE IN LICENSE","peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","happy-dom":"^20.11.2","publint":"^0.3.23","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3"},"scripts":{"clean":"node scripts/clean.mjs","build":"pnpm run clean && tsc && node scripts/copy-css.mjs","test":"pnpm run test:unit","test:unit":"pnpm run build && node --test --test-concurrency=1 test/layout-overlay.test.mjs test/layout-overlay-dom.test.mjs test/layout-map.test.mjs test/public-api.test.mjs","test:package":"pnpm run build && node --test --test-concurrency=1 test/package-smoke.test.mjs","test:all":"pnpm run build && node --test --test-concurrency=1","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint"},"_id":"@01.works/layout-overlay@0.3.2","_integrity":"sha512-8Fd4VxYfzkIE9nQdnST8cgcMJVydz6bIFTSbYe5vOgWjeNL0RmQ00ldTHFOPRVVrYOntI1J4dKbuPYo2xRtYMg==","_resolved":"/home/runner/work/_temp/npm-release-33478587895-1.tgz","_from":"file:/home/runner/work/_temp/npm-release-33478587895-1.tgz","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-8Fd4VxYfzkIE9nQdnST8cgcMJVydz6bIFTSbYe5vOgWjeNL0RmQ00ldTHFOPRVVrYOntI1J4dKbuPYo2xRtYMg==","shasum":"0c9ad83b2204c008d8c09d8780ea775e92dae7d4","tarball":"https://registry.npmjs.org/@01.works/layout-overlay/-/layout-overlay-0.3.2.tgz","fileCount":38,"unpackedSize":139609,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBqkvUojePeKBaF1hRKjkpnk1xmMznBvXSw0pH6RL7b2AiABkA7ZcG7g2YqeA5fWxW/xVpFTVGcLnhSP76n3th2Hpw=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:dec0ac65-da25-42fc-8de7-978204c95f8d"}},"directories":{},"maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/layout-overlay_0.3.2_1788245160833_0.7406898027868354"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-20T05:05:34.357Z","modified":"2026-09-01T06:46:01.223Z","0.1.0":"2026-08-20T05:05:34.602Z","0.2.0":"2026-08-21T14:16:52.406Z","0.3.0":"2026-08-27T03:02:30.471Z","0.3.1":"2026-08-28T09:13:18.789Z","0.3.2":"2026-09-01T06:46:00.981Z"},"bugs":{"url":"https://github.com/01-office/design-context/issues"},"license":"SEE LICENSE IN LICENSE","homepage":"https://github.com/01-office/design-context/tree/main/packages/layout-overlay#readme","keywords":["layout","grid","overlay","layout-map","svg","react","design-system","developer-tools"],"repository":{"type":"git","url":"git+https://github.com/01-office/design-context.git","directory":"packages/layout-overlay"},"description":"React and framework-independent live layout guide overlays, plus captured layout-map SVG rendering","maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"readme":"# `@01.works/layout-overlay`\n\nA development overlay that draws live layout regions and guides over a browser\napplication. The root entry is an SSR-safe React component; the `dom` subpath\nis a React-free imperative API for any modern ESM browser application. Neither\nrequires Next.js, Tailwind CSS, or a specific design-token system.\n\n## Installation\n\n```sh\npnpm add @01.works/layout-overlay\n```\n\nReact 18 or newer is required only when importing the root React component.\nBoth `@01.works/layout-overlay/dom` and `./layout-map` are\nframework-independent and do not import React. The package is ESM-only and does\nnot provide a CommonJS `require()` entry.\n\nVersion `0.3.0` adds the `./dom` public subpath. It is a backward-compatible\nminor release: existing root React and `./layout-map` imports retain their\npublic API. Install `@01.works/layout-overlay@^0.3.0` (or a later compatible\nminor) when using `./dom`.\n\n## Quick start\n\n```tsx\nimport {\n  LayoutOverlay,\n  type LayoutOverlayRegion,\n} from \"@01.works/layout-overlay\";\n\nconst regions = [\n  { key: \"logo\", start: 0, end: \"var(--logo-end)\" },\n  {\n    key: \"navigation\",\n    start: \"var(--nav-start)\",\n    end: \"var(--nav-end)\",\n    minWidth: \"48rem\",\n  },\n] satisfies readonly LayoutOverlayRegion[];\n\nexport function DevelopmentTools() {\n  return (\n    <LayoutOverlay\n      enabled={process.env.NODE_ENV === \"development\"}\n      defaultVisible={process.env.NODE_ENV === \"development\"}\n      insetInline=\"var(--page-margin)\"\n      regions={regions}\n      horizontalGuides={[\n        { key: \"header\", at: \"var(--header-height)\" },\n      ]}\n    />\n  );\n}\n```\n\n## Framework-neutral browser usage\n\nImport the `dom` subpath in vanilla JS, Web Components, Svelte, Vue, or any\nother modern ESM browser application. It does not pull React into the runtime.\n\n```ts\nimport {\n  mountLayoutOverlay,\n  type LayoutOverlayRegion,\n} from \"@01.works/layout-overlay/dom\";\n\nconst regions = [\n  { key: \"content\", start: \"var(--page-margin)\", end: \"calc(100% - var(--page-margin))\" },\n  { key: \"navigation\", start: 320, end: 640, minWidth: \"48rem\" },\n] satisfies readonly LayoutOverlayRegion[];\n\nconst overlay = mountLayoutOverlay({\n  // Use the build tool's development flag. The overlay is inert in production.\n  enabled: import.meta.env.DEV,\n  insetInline: \"var(--page-margin)\",\n  regions,\n  horizontalGuides: [{ key: \"header\", at: \"var(--header-height)\" }],\n});\n\n// For a settings panel, live preview, or application teardown:\noverlay.setVisible(true);\noverlay.update({ verticalGuides: [{ key: \"center\", at: \"50%\" }] });\noverlay.unmount();\n```\n\n`mountLayoutOverlay()` is browser-only and performs no import-time DOM work.\nIt returns an idempotent handle. `update()` shallow-merges options (provided\narrays replace prior arrays), `setVisible()` sets current visibility, and\n`toggle()` flips it. `element` is the current root or `null` while hidden,\ndisabled, or after `unmount()`. In this imperative API, `visible` sets current\nvisibility on mount or `update()`; it is not a React-style controlled prop.\n\nKeep `enabled` false in production as a runtime exclusion mechanism. An\n`enabled: false` mount creates no overlay DOM, generated style element, or\nkeyboard listener. Bundlers may still retain the imported module; this package\ndoes not promise a zero-byte production bundle. For complete bundle exclusion,\nconditionally import `@01.works/layout-overlay/dom` from your own\ndevelopment-only integration point.\n\nThe package does nothing unless `enabled` is explicitly set to `true`. Press the\nphysical G key to toggle the overlay. The shortcut works across keyboard layouts\nand is ignored while typing, during IME composition, on repeated key events, or\nwhen Meta, Control, or Alt is held.\n\nThe component ships with a `\"use client\"` directive, so it can be imported from\nNext.js App Router Server Components without an extra client wrapper. It has no\nimport-time side effects and does not read from `window` during server rendering.\n\n## Captured layout maps\n\nUse the framework-independent subpath to turn a captured layout analysis map\ninto a transparent SVG. The output uses document CSS-pixel coordinates, so it\ncan be placed directly over a matching full-page screenshot without rasterizing\nthe guides or labels.\n\n```ts\nimport {\n  renderLayoutMapSvg,\n  type LayoutAnalysisMap,\n} from \"@01.works/layout-overlay/layout-map\";\n\nconst map: LayoutAnalysisMap = await fetch(\"/layout-map.json\").then(response =>\n  response.json(),\n);\n\nconst svg = renderLayoutMapSvg(map, {\n  labels: \"all\",\n  layers: { columns: true, rows: true, regions: true },\n  maxDepth: 3,\n});\n```\n\n`labels` accepts `\"all\"`, `\"guides\"`, or `\"none\"`. Layers can independently\nenable columns, rows, regions, layout containers, and floating regions. Invalid\ndocument dimensions throw; individual geometry is clamped to the document and\nidentity-bearing text is XML-escaped before rendering. `maxGuides`, `maxRegions`,\nand `maxDepth` bound work when rendering maps from an external archive.\nAll guide lines remain visible; labels that would collide are suppressed while\nthe first and last boundary labels are retained.\n\n`LAYOUT_MAP_RENDERER_VERSION` changes when serialized output changes. Include it\nin cache keys or asset URLs when SVG responses are cached by a browser or CDN.\nOnly layout-map schema version `1` is rendered. The public `version` field stays\nnumeric for `0.3.x` source compatibility, while unsupported values fail closed\nat runtime instead of being interpreted as version `1`.\n\n## Responsive guides\n\nEvery region and guide accepts `minWidth` and `maxWidth`:\n\n```tsx\n<LayoutOverlay\n  enabled\n  defaultVisible\n  verticalGuides={[\n    { key: \"mobile-center\", at: \"50%\", maxWidth: 767 },\n    { key: \"desktop-left\", at: 320, minWidth: 768 },\n    { key: \"wide-center\", at: \"50%\", minWidth: \"64rem\" },\n  ]}\n/>\n```\n\nNumeric coordinates and widths are converted to pixels. Strings are emitted as\nCSS values, so `rem`, `%`, `calc()`, and custom properties all work. CSS control\ntokens are rejected; arbitrary raw media queries are not part of the API.\n\nRegion and vertical-guide coordinates follow the logical inline axis; horizontal\nguides follow the logical block axis. In the usual horizontal writing mode these\nrender as vertical and horizontal guides respectively. Logical coordinates also\nkeep the overlay meaningful in RTL and vertical writing modes.\n\n## Controlled React visibility\n\nUse `visible` and `onVisibleChange` when another UI owns the state:\n\n```tsx\nconst [visible, setVisible] = useState(false);\n\n<LayoutOverlay\n  enabled\n  visible={visible}\n  onVisibleChange={(next) => setVisible(next)}\n/>\n```\n\nWhen `visible` is omitted, `defaultVisible` initializes internal state and the\nkeyboard shortcut updates it automatically.\n\n## CSS tokens\n\nNo stylesheet import is required because every visual value has an inline\nfallback. Import the optional token entry when the same values should be shared\nwith application CSS:\n\n```css\n@import \"@01.works/layout-overlay/tokens.css\";\n\n:root {\n  --layout-overlay-line-color: rgb(0 140 255 / 55%);\n  --layout-overlay-band-color: rgb(0 140 255 / 8%);\n  --layout-overlay-line-width: 1px;\n}\n```\n\nFor Tailwind CSS v4, import the Tailwind entry instead. Do not import both:\n\n```css\n@import \"tailwindcss\";\n@import \"@01.works/layout-overlay/tailwind.css\";\n```\n\nThis registers `bg-layout-overlay-line`, `bg-layout-overlay-band`,\n`w-layout-overlay-line`, and `h-layout-overlay-line` utilities.\n\n## API\n\n### `LayoutOverlay`\n\n```ts\ntype CssLength = number | string;\n\ntype LayoutOverlayResponsiveRule = {\n  minWidth?: CssLength;\n  maxWidth?: CssLength;\n};\n\ntype LayoutOverlayRegion = LayoutOverlayResponsiveRule & {\n  key: string;\n  start: CssLength;\n  end: CssLength;\n};\n\ntype LayoutOverlayGuide = LayoutOverlayResponsiveRule & {\n  key: string;\n  at: CssLength;\n};\n```\n\n| Prop | Type | Default | Purpose |\n| --- | --- | --- | --- |\n| `enabled` | `boolean` | `false` | Opt in to rendering and keyboard handling. |\n| `defaultVisible` | `boolean` | `false` | Initial visibility for uncontrolled usage. |\n| `visible` | `boolean` | — | Controlled visibility. |\n| `onVisibleChange` | `(visible, detail) => void` | — | Receives shortcut visibility requests. `detail.reason` is `\"shortcut\"`. |\n| `regions` | `readonly LayoutOverlayRegion[]` | `[]` | Filled inline-axis regions with automatic start/end guides. |\n| `verticalGuides` | `readonly LayoutOverlayGuide[]` | `[]` | Extra inline-axis guide coordinates. |\n| `horizontalGuides` | `readonly LayoutOverlayGuide[]` | `[]` | Extra block-axis guide coordinates. |\n| `insetInline` | `CssLength` | `0` | Insets the logical inline coordinate space. |\n| `insetBlock` | `CssLength` | `0` | Insets the logical block coordinate space. |\n| `drawEdges` | `boolean` | `true` | Draws inline-start and inline-end boundary guides. |\n| `lineColor` | `string` | CSS token | Overrides guide colors. |\n| `bandColor` | `string` | CSS token | Overrides region fill colors. |\n| `lineWidth` | `CssLength` | CSS token | Overrides guide thickness. |\n| `zIndex` | `number` | `100` | Sets the root stacking order; must be a safe integer whose `+1` is representable for View Transitions. |\n| `toggleCode` | `string \\| null` | `\"KeyG\"` | Matches a physical `KeyboardEvent.code`. |\n| `toggleKeys` | `readonly string[]` | `['g', 'G', 'ㅎ']` | Additional `KeyboardEvent.key` matches. |\n| `position` | `\"fixed\" \\| \"absolute\"` | `\"fixed\"` | Binds the overlay to the viewport or a positioned ancestor. |\n| `className` | `string` | — | Customizes the root class. |\n| `style` | `CSSProperties` | — | Adds or overrides root inline styles. |\n| `viewTransitionName` | `string \\| null` | `null` | Enables View Transition persistence; use a stable, unique name. |\n| `nonce` | `string` | — | Applies a CSP nonce to the generated `<style>` element. |\n\nSet `toggleCode={null}` and `toggleKeys={[]}` to disable keyboard toggling.\n\n### `mountLayoutOverlay`\n\nThe `@01.works/layout-overlay/dom` entry exports the same `CssLength`,\n`LayoutOverlayResponsiveRule`, `LayoutOverlayRegion`, and\n`LayoutOverlayGuide` geometry types as independent DOM types. Its options share\nthe visual and keyboard options above, except that `target?: HTMLElement`\nreplaces React placement and `style?: LayoutOverlayDomStyle` is a plain record\nof CSS property names to string values. Use explicit units such as `\"12px\"`;\nnumeric custom style values are rejected rather than assigned guessed units.\n\n```ts\nconst handle = mountLayoutOverlay(options);\n\nhandle.update({ enabled: true, visible: true });\nhandle.setVisible(false);\nhandle.toggle();\nhandle.unmount();\n```\n\n`enabled` defaults to `false`, and `defaultVisible` defaults to `false`.\n`target` defaults to `document.body`; use `position: \"absolute\"` with a\npositioned target when the overlay should follow an ancestor rather than the\nviewport. The default shortcut and editable-target guard are identical to the\nReact component. `onVisibleChange` is called only for keyboard shortcut\nchanges, with `detail.reason === \"shortcut\"`.\n\nThe rendered DOM is decorative (`aria-hidden`) and does not receive pointer\nevents. The following attribute names and documented values are public for\ndebugging and consumer styling:\n\n- `data-layout-overlay` identifies the root and `data-layout-overlay-canvas`\n  identifies its coordinate space.\n- `data-layout-overlay-key` contains the corresponding region or guide key.\n- `data-layout-overlay-kind` is one of `region`, `region-start`, `region-end`,\n  `vertical-guide`, `horizontal-guide`, `inline-start-edge`, or\n  `inline-end-edge`.\n- `data-layout-overlay-query` is an opaque implementation token. Its presence is\n  stable for responsive items, but consumers must not depend on its value.\n\n## Content Security Policy\n\nThe component renders geometry with inline styles. A nonce can authorize the\ngenerated responsive and View Transition rules, but it does not make the package\ncompatible with `style-src-attr 'none'`. Use the overlay in development or\npreview environments, or allow inline style attributes in the relevant policy.\n\n## Development\n\n```sh\npnpm install\npnpm test\npnpm run test:package\npnpm run test:all\npnpm run typecheck\npnpm run lint:package\npnpm pack --dry-run\n```\n\n`pnpm test` runs the fast, local server and DOM suite without downloading\npackages. `pnpm run test:package` installs the generated tarball and React 18\ninto an isolated consumer project, so it requires package-registry access.\n`pnpm run test:all` runs both suites and is used before publishing. The package\nsmoke test verifies JavaScript, declarations, source maps, the `\"use client\"`\ndirective, and CSS subpath exports. `pnpm run lint:package` checks the packed\nmetadata and exports with Publint.\n","readmeFilename":"README.md"}