@chuvenger/devdock 0.6.0 → 0.7.0

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@chuvenger/devdock.svg)](https://www.npmjs.com/package/@chuvenger/devdock)
 [![license](https://img.shields.io/npm/l/@chuvenger/devdock.svg)](./LICENSE)
 
-A tiny, dependency-free dev-only floating button. It sits in a corner of your
+A tiny dev-only floating button. It sits in a corner of your
 app, **only renders in development**, and opens a popup to jump between dev
 routes and run custom commands.
 
@@ -12,7 +12,7 @@ routes and run custom commands.
 - ⚡ **Custom commands** — register any action (reset DB, toggle a flag, copy a token…), with live labels and check marks for toggles.
 - 📊 **Custom views** — mount your own UI in the popup for anything a list can't say: a frame-rate meter, a sync status, a segmented control.
 - 🔎 Filter box + keyboard nav (↑/↓/Enter/Esc) and an optional global hotkey.
-- 🎨 Zero CSS to import — inline-styled, high z-index, no runtime dependencies.
+- 🎨 Zero CSS to import — it brings its own sheet and a high z-index. Theme it with `--devdock-*` custom properties (they cross the shadow boundary, so isolation stays), or merge your own classes into any part with `classNames`.
 - 🛡️ **Shadow DOM isolated** by default — the host page's CSS can't touch it (and vice versa), or `shadow: "inherit"` to let your design system in.
 - 🧩 **Framework-agnostic core** with thin **React** and **Svelte** adapters.
 
@@ -440,11 +440,11 @@ tree-shakes it: `{import.meta.env.DEV && <DevDock … />}`.
 
 ## Styling & isolation
 
-The dock is styled entirely with inline styles (no stylesheet to import) and,
-by default, renders inside an **open shadow root** attached to a host element in
-`document.body`. That means the host page's CSS can't leak in and the dock's
-styles can't leak out. The host element carries a `data-devdock` attribute in
-every mode.
+The dock ships its own stylesheet — one it injects itself, nothing to
+import, themeable with [custom properties](#theming-it-custom-properties) — and, by default, renders inside an **open shadow root** attached to a
+host element in `document.body`. The host page's CSS can't leak in and the
+dock's styles can't leak out. The host element carries a `data-devdock`
+attribute in every mode.
 
 | `shadow` | Where it renders | The page's CSS |
 | -------- | ---------------- | -------------- |
@@ -453,8 +453,152 @@ every mode.
 | `false` | light DOM | applies directly |
 
 Use `"inherit"` (or `false`) when a [custom view](#views-and-your-css) renders
-your app's own components and needs its stylesheet. Otherwise leave it alone —
-isolation is the reason the dock survives arbitrary host CSS.
+your app's own components and needs its stylesheet, or when you're restyling
+the dock with `classNames` below — passing `classNames` switches the default to
+`"inherit"` for you, since a class of yours is defined by a stylesheet that has
+to cross the boundary. Otherwise leave it alone: isolation is the reason the
+dock survives arbitrary host CSS.
+
+There are two ways to change how it looks, and they compose:
+
+| | Reach | Costs you |
+| --- | --- | --- |
+| [Custom properties](#theming-it-custom-properties) | colours, radii, font, size | nothing — they inherit **through** the shadow boundary, so the dock stays isolated |
+| [`classNames`](#restyling-it-classnames) | anything CSS can say | your stylesheet has to reach the dock, so `shadow` becomes `"inherit"` |
+
+Reach for the properties first; drop to `classNames` when you need something
+they don't cover.
+
+### Theming it: custom properties
+
+Set any of these on `:root`, or on the `[data-devdock]` host to theme one dock,
+and you're done — no `shadow` change, no classes, nothing to import:
+
+```css
+:root {
+  --devdock-bg: #ffffff;
+  --devdock-fg: #0f172a;
+  --devdock-accent: #a855f7;
+  --devdock-border: #e2e8f0;
+  --devdock-radius: 16px;
+  --devdock-width: 320px;
+}
+```
+
+| Property | Default | What it paints |
+| -------- | ------- | -------------- |
+| `--devdock-font`        | system UI stack | The dock's font family. |
+| `--devdock-bg`          | `#16181d` | Popup background. |
+| `--devdock-fg`          | `#e7e9ee` | Primary text — rows, the input. |
+| `--devdock-muted`       | `#8b909c` | The title, a view's label. |
+| `--devdock-subtle`      | `#6b7280` | Group headings, route paths, the empty state. |
+| `--devdock-border`      | `#2a2e37` | Every border. |
+| `--devdock-accent`      | `#2563eb` | Highlighted row, and the button while open. |
+| `--devdock-accent-fg`   | `#e7e9ee` | Text on the highlighted row. |
+| `--devdock-button-bg`   | `#111317` | The button, closed. |
+| `--devdock-button-fg`   | `#fff`    | The button's text. |
+| `--devdock-input-bg`    | `#0f1115` | The filter input. |
+| `--devdock-success`     | `#22c55e` | The status dot and toggle check marks. |
+| `--devdock-radius`      | `12px`    | Popup corners. |
+| `--devdock-radius-sm`   | `8px`     | Rows and the input. |
+| `--devdock-width`       | `280px`   | Popup width. |
+| `--devdock-max-height`  | `70vh`    | Popup height before it scrolls. |
+| `--devdock-shadow`      | `0 12px 40px rgba(0,0,0,.45)` | The popup's shadow. |
+
+They're read as `var(--devdock-x, default)` and never declared inside the
+dock, which is what lets a value you set outside win — a declaration of ours
+in the shadow tree would have beaten the one inheriting in.
+
+### Restyling it: `classNames`
+
+Every part of the dock takes a class of yours, **merged onto** the one it
+already carries rather than replacing it:
+
+```tsx
+<DevDock
+  classNames={{
+    panel: "w-96 max-h-[80vh] bg-white text-slate-900 border-slate-200",
+    button: "bg-emerald-600 rounded-md",
+    input: "bg-slate-50 border-slate-300",
+    row: "rounded-none",
+    rowActive: "bg-emerald-100 text-emerald-900",
+  }}
+/>
+```
+
+Each entry takes **anything [`cn`](https://www.npmjs.com/package/cn) takes** —
+a string, an array, a conditional, an object — so a wrapper of your own can
+forward its props straight through without a helper import:
+
+```tsx
+export function AppDock({ className }: { className?: string }) {
+  return (
+    <DevDock
+      classNames={{
+        panel: ["bg-red-100", className],
+        row: ["px-3", compact && "py-1", { "opacity-50": muted }],
+      }}
+    />
+  );
+}
+```
+
+Values are merged with [`cn`](https://www.npmjs.com/package/cn), so conflicts
+resolve the way you'd write them by hand: `rowActive: "text-emerald-900"` over
+`row: "text-slate-700"` keeps emerald and **drops** slate, instead of putting
+both in the attribute and letting Tailwind's own sheet order pick the winner.
+The dock's `devdock-*` classes aren't utilities, so they pass through untouched.
+
+No `!important`, no `[&_div]` reaching: a plain utility class wins on its own.
+Two things in the dock's sheet make that true, and they're worth knowing about
+because they also say when it *doesn't*:
+
+- **It lives in a cascade layer** (`devdock`), declared *after* Tailwind's
+  `base` and *before* its `utilities`. Layered rules lose to unlayered ones
+  whatever their specificity, so this is what lets a Tailwind v4 utility
+  through while keeping a reset in `base` from stripping the dock's chrome.
+- **Each rule is worth exactly one class** — one bare `.devdock-*`, with any
+  state selector tucked inside `:where()`. That's what settles ties when the
+  layer is off: the sheet goes in first, so a page-level reset
+  (`button { … }`, `*`) loses to it and your class beats it.
+
+If the page's own CSS is unlayered — Tailwind v3, a hand-written reset —
+turn the layer off with `cssLayer={false}`, or the page's reset will outrank
+the dock itself. (A page with no `@layer` anywhere is unaffected either way.)
+If you run your own layers, name the dock's with `cssLayer="chrome"`: it then
+ships no order statement at all, and you place it in your own `@layer` line,
+where you know the names around it.
+
+Not themeable this way: the corner placement, the z-index, and the popup's
+anchoring. Those are computed from `position`/`zIndex` and stay inline.
+
+### The parts
+
+Each one carries its `devdock-*` class in every mode, so you can also just
+write CSS against them and skip `classNames` entirely.
+
+| `classNames` key | Class | What it is |
+| ---------------- | ----- | ---------- |
+| `root`        | `.devdock-root`        | The fixed wrapper holding the button and the popup. |
+| `button`      | `.devdock-button`      | The floating button. `[aria-expanded="true"]` while open. |
+| `dot`         | `.devdock-dot`         | The status dot inside it. |
+| `buttonLabel` | `.devdock-button-label`| The button's text. |
+| `panel`       | `.devdock-panel`       | The popup. |
+| `title`       | `.devdock-title`       | Its heading. |
+| `inputWrap`   | `.devdock-input-wrap`  | The padding around the filter input. |
+| `input`       | `.devdock-input`       | The filter input. |
+| `body`        | `.devdock-body`        | The scroller holding the views and the list. |
+| `list`        | `.devdock-list`        | The routes/commands list. |
+| `section`     | `.devdock-section`     | One group's wrapper, in the list or around a view. |
+| `group`       | `.devdock-group`       | A group heading. |
+| `row`         | `.devdock-row`         | Every row. `[data-active]` on the highlighted one. |
+| `rowActive`   | —                      | Added to the highlighted row, on top of `row`. |
+| `rowLabel`    | `.devdock-row-label`   | A row's label. |
+| `rowPath`     | `.devdock-row-path`    | The monospace path on a route row. |
+| `check`       | `.devdock-check`       | A toggle command's check mark. |
+| `empty`       | `.devdock-empty`       | The "Nothing here." placeholder. |
+| `viewLabel`   | `.devdock-view-label`  | A view's own label under a shared heading. |
+| `view`        | `.devdock-view`        | Each view's host element. |
 
 ## API
 
@@ -474,12 +618,18 @@ isolation is the reason the dock survives arbitrary host CSS.
 | `hotkey`     | `string \| null`              | `null`                               | Toggle shortcut, e.g. `"mod+."`. |
 | `zIndex`     | `number`                      | `2147483000`                         | Base z-index. |
 | `container`  | `HTMLElement`                 | `document.body`                      | Where to mount. |
-| `shadow`     | `boolean \| "inherit"`        | `true`                               | Render in a shadow root (CSS-isolated). `"inherit"` copies the page's styles in; `false` renders in the light DOM. Read once, at creation. |
+| `shadow`     | `boolean \| "inherit"`        | `true`, or `"inherit"` with `classNames` | Render in a shadow root (CSS-isolated). `"inherit"` copies the page's styles in; `false` renders in the light DOM. Read once, at creation. |
+| `classNames` | `DevDockClassNames`           | `{}`                                 | [Classes merged onto the dock's parts](#restyling-it-classnames) with `cn`, e.g. `{ panel: ["w-96", className] }`. |
+| `cssLayer`   | `string \| false`            | `"devdock"`                          | The cascade layer the dock's stylesheet goes in. A name of your own ships no order statement — place it yourself. `false` for an unlayered page (Tailwind v3). Read once, at creation. |
 
 `DevRoute`: `{ path: string; label?: string; group?: string }`
 
 `DevCommand`: `{ label: string | (() => string); run: () => void | Promise<void>; checked?: () => boolean; id?: string; group?: string; keepOpen?: boolean }`
 
+`DevDockClassNames`: one optional `ClassValue` per part — see [the parts](#the-parts).
+
+`ClassValue`: whatever `cn` accepts — `string | number | bigint | boolean | null | undefined | ClassValue[] | Record<string, unknown>`. Falsy entries drop out, conflicting Tailwind classes collapse to the last one.
+
 `DevView`: `{ mount: (host: HTMLElement) => void | (() => void); id?: string; label?: string; group?: string; order?: "before" | "after" }` — on the React adapter, `render: () => ReactNode` replaces `mount`.
 
 ### `@chuvenger/devdock` (core)

package/dist/{chunk-3MVFATRN.js → chunk-2IQRWZ7T.js}

@@ -1,4 +1,4 @@
-import { keyViews, createDevDock } from './chunk-NXZNFF34.js';
+import { keyViews, createDevDock } from './chunk-2YX4DI2D.js';
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -56,5 +56,5 @@ function DevDock({ views = NO_VIEWS, ...options }) {
 }
 
 export { DevDock };
-//# sourceMappingURL=chunk-3MVFATRN.js.map
-//# sourceMappingURL=chunk-3MVFATRN.js.map
+//# sourceMappingURL=chunk-2IQRWZ7T.js.map
+//# sourceMappingURL=chunk-2IQRWZ7T.js.map

package/dist/{chunk-3MVFATRN.js.map → chunk-2IQRWZ7T.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/react/DevDock.tsx"],"names":[],"mappings":";;;;;AA6BA,IAAM,WAA0B,EAAC;AAQ1B,SAAS,QAAQ,EAAE,KAAA,GAAQ,QAAA,EAAU,GAAG,SAAQ,EAAiB;AACtE,EAAA,MAAM,QAAA,GAAW,OAA+B,IAAI,CAAA;AAIpD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA;AAAA,IACxB,0BAAU,GAAA;AAAI,GAChB;AAGA,EAAA,MAAM,KAAA,GAAQ,OAAO,IAAI,CAAA;AAIzB,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM,QAAA,CAAS,KAAK,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEpD,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,GAAA,EAAK,MAAK,MAAO;AAAA,MAC5B,EAAA,EAAI,GAAA;AAAA,MACJ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,KAAA,EAAO,CAAC,IAAA,KAAS;AACf,QAAA,QAAA,CAAS,CAAC,SAAS,IAAI,GAAA,CAAI,IAAI,CAAA,CAAE,GAAA,CAAI,GAAA,EAAK,IAAI,CAAC,CAAA;AAC/C,QAAA,OAAO,MAAM;AACX,UAAA,IAAI,CAAC,MAAM,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,CAAC,IAAA,KAAS;AACjB,YAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,YAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AACf,YAAA,OAAO,IAAA;AAAA,UACT,CAAC,CAAA;AAAA,QACH,CAAA;AAAA,MACF;AAAA,KACF,CAAE,CAAA;AAAA,IACJ,CAAC,KAAK;AAAA,GACR;AAKA,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,EAAE,OAAA,EAAS,WAAW,CAAA;AAC5C,EAAA,MAAA,CAAO,OAAA,GAAU,EAAE,OAAA,EAAS,SAAA,EAAU;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAA,CAAM,OAAA,GAAU,IAAA;AAChB,IAAA,MAAM,OAAO,aAAA,CAAc;AAAA,MACzB,GAAG,OAAO,OAAA,CAAQ,OAAA;AAAA,MAClB,KAAA,EAAO,OAAO,OAAA,CAAQ;AAAA,KACvB,CAAA;AACD,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAChB,MAAA,IAAA,CAAK,OAAA,EAAQ;AACb,MAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,IACrB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,SAAS,MAAA,CAAO,EAAE,GAAG,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAAA,EAC3D,CAAC,CAAA;AAED,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,GAAA,EAAK,MAAK,KAAM;AAC5B,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,GAAA,CAAI,GAAG,CAAA;AAC1B,IAAA,OAAO,OAAO,YAAA,CAAa,IAAA,CAAK,QAAO,EAAG,IAAA,EAAM,GAAG,CAAA,GAAI,IAAA;AAAA,EACzD,CAAC,CAAA,EACH,CAAA;AAEJ","file":"chunk-3MVFATRN.js","sourcesContent":["import { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { createDevDock, keyViews } from \"../core/dock\";\nimport type {\n  DevDockInstance,\n  DevDockOptions,\n  DevView,\n} from \"../core/types\";\n\n/**\n * A custom panel rendered by React inside the dock's popup. Same contract as\n * the core's {@link DevView}, with `render` in place of `mount`: the component\n * is portaled into the dock, mounted when the popup opens and unmounted when\n * it closes.\n *\n * A view renders inside the dock's shadow root, which the document's\n * stylesheets don't cross — pass `shadow=\"inherit\"` (or `shadow={false}`) if\n * it uses your app's CSS.\n */\nexport interface DevDockView extends Omit<DevView, \"mount\"> {\n  /** The view's content. Called on every render of the host `<DevDock>`. */\n  render: () => ReactNode;\n}\n\nexport type DevDockProps = Omit<DevDockOptions, \"views\"> & {\n  /** Custom panels rendered inside the popup. See {@link DevDockView}. */\n  views?: DevDockView[];\n};\n\nconst NO_VIEWS: DevDockView[] = [];\n\n/**\n * React wrapper around the framework-agnostic core. The dock itself mounts\n * into `document.body` (or `container`) and is torn down on unmount; this\n * component renders only the portals for any `views` you pass, so with none it\n * renders nothing. Safe to leave mounted; it renders nothing in production.\n */\nexport function DevDock({ views = NO_VIEWS, ...options }: DevDockProps) {\n  const instance = useRef<DevDockInstance | null>(null);\n  // The host elements the core created for our views, keyed the same way it\n  // keys them. React draws into these with a portal, which keeps the core free\n  // of any React import.\n  const [hosts, setHosts] = useState<ReadonlyMap<string, HTMLElement>>(\n    () => new Map(),\n  );\n  // `destroy()` tears views down, which would otherwise ask an unmounting\n  // component to set state.\n  const alive = useRef(true);\n\n  // Keyed exactly the way the core keys the host elements, so each portal\n  // finds its own.\n  const keyed = useMemo(() => keyViews(views), [views]);\n\n  const coreViews = useMemo<DevView[]>(\n    () =>\n      keyed.map(({ key, view }) => ({\n        id: key,\n        label: view.label,\n        group: view.group,\n        order: view.order,\n        mount: (host) => {\n          setHosts((prev) => new Map(prev).set(key, host));\n          return () => {\n            if (!alive.current) return;\n            setHosts((prev) => {\n              const next = new Map(prev);\n              next.delete(key);\n              return next;\n            });\n          };\n        },\n      })),\n    [keyed],\n  );\n\n  // The core reconciles views by id and no-ops when their shape is unchanged,\n  // so handing it a fresh array on every render costs nothing and never\n  // remounts a view.\n  const latest = useRef({ options, coreViews });\n  latest.current = { options, coreViews };\n\n  useEffect(() => {\n    alive.current = true;\n    const inst = createDevDock({\n      ...latest.current.options,\n      views: latest.current.coreViews,\n    });\n    instance.current = inst;\n    return () => {\n      alive.current = false;\n      inst.destroy();\n      instance.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    instance.current?.update({ ...options, views: coreViews });\n  });\n\n  return (\n    <>\n      {keyed.map(({ key, view }) => {\n        const host = hosts.get(key);\n        return host ? createPortal(view.render(), host, key) : null;\n      })}\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../src/react/DevDock.tsx"],"names":[],"mappings":";;;;;AA6BA,IAAM,WAA0B,EAAC;AAQ1B,SAAS,QAAQ,EAAE,KAAA,GAAQ,QAAA,EAAU,GAAG,SAAQ,EAAiB;AACtE,EAAA,MAAM,QAAA,GAAW,OAA+B,IAAI,CAAA;AAIpD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA;AAAA,IACxB,0BAAU,GAAA;AAAI,GAChB;AAGA,EAAA,MAAM,KAAA,GAAQ,OAAO,IAAI,CAAA;AAIzB,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM,QAAA,CAAS,KAAK,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEpD,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,GAAA,EAAK,MAAK,MAAO;AAAA,MAC5B,EAAA,EAAI,GAAA;AAAA,MACJ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,KAAA,EAAO,CAAC,IAAA,KAAS;AACf,QAAA,QAAA,CAAS,CAAC,SAAS,IAAI,GAAA,CAAI,IAAI,CAAA,CAAE,GAAA,CAAI,GAAA,EAAK,IAAI,CAAC,CAAA;AAC/C,QAAA,OAAO,MAAM;AACX,UAAA,IAAI,CAAC,MAAM,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,CAAC,IAAA,KAAS;AACjB,YAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,YAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AACf,YAAA,OAAO,IAAA;AAAA,UACT,CAAC,CAAA;AAAA,QACH,CAAA;AAAA,MACF;AAAA,KACF,CAAE,CAAA;AAAA,IACJ,CAAC,KAAK;AAAA,GACR;AAKA,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,EAAE,OAAA,EAAS,WAAW,CAAA;AAC5C,EAAA,MAAA,CAAO,OAAA,GAAU,EAAE,OAAA,EAAS,SAAA,EAAU;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAA,CAAM,OAAA,GAAU,IAAA;AAChB,IAAA,MAAM,OAAO,aAAA,CAAc;AAAA,MACzB,GAAG,OAAO,OAAA,CAAQ,OAAA;AAAA,MAClB,KAAA,EAAO,OAAO,OAAA,CAAQ;AAAA,KACvB,CAAA;AACD,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAChB,MAAA,IAAA,CAAK,OAAA,EAAQ;AACb,MAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,IACrB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,SAAS,MAAA,CAAO,EAAE,GAAG,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAAA,EAC3D,CAAC,CAAA;AAED,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,GAAA,EAAK,MAAK,KAAM;AAC5B,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,GAAA,CAAI,GAAG,CAAA;AAC1B,IAAA,OAAO,OAAO,YAAA,CAAa,IAAA,CAAK,QAAO,EAAG,IAAA,EAAM,GAAG,CAAA,GAAI,IAAA;AAAA,EACzD,CAAC,CAAA,EACH,CAAA;AAEJ","file":"chunk-2IQRWZ7T.js","sourcesContent":["import { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { createDevDock, keyViews } from \"../core/dock\";\nimport type {\n  DevDockInstance,\n  DevDockOptions,\n  DevView,\n} from \"../core/types\";\n\n/**\n * A custom panel rendered by React inside the dock's popup. Same contract as\n * the core's {@link DevView}, with `render` in place of `mount`: the component\n * is portaled into the dock, mounted when the popup opens and unmounted when\n * it closes.\n *\n * A view renders inside the dock's shadow root, which the document's\n * stylesheets don't cross — pass `shadow=\"inherit\"` (or `shadow={false}`) if\n * it uses your app's CSS.\n */\nexport interface DevDockView extends Omit<DevView, \"mount\"> {\n  /** The view's content. Called on every render of the host `<DevDock>`. */\n  render: () => ReactNode;\n}\n\nexport type DevDockProps = Omit<DevDockOptions, \"views\"> & {\n  /** Custom panels rendered inside the popup. See {@link DevDockView}. */\n  views?: DevDockView[];\n};\n\nconst NO_VIEWS: DevDockView[] = [];\n\n/**\n * React wrapper around the framework-agnostic core. The dock itself mounts\n * into `document.body` (or `container`) and is torn down on unmount; this\n * component renders only the portals for any `views` you pass, so with none it\n * renders nothing. Safe to leave mounted; it renders nothing in production.\n */\nexport function DevDock({ views = NO_VIEWS, ...options }: DevDockProps) {\n  const instance = useRef<DevDockInstance | null>(null);\n  // The host elements the core created for our views, keyed the same way it\n  // keys them. React draws into these with a portal, which keeps the core free\n  // of any React import.\n  const [hosts, setHosts] = useState<ReadonlyMap<string, HTMLElement>>(\n    () => new Map(),\n  );\n  // `destroy()` tears views down, which would otherwise ask an unmounting\n  // component to set state.\n  const alive = useRef(true);\n\n  // Keyed exactly the way the core keys the host elements, so each portal\n  // finds its own.\n  const keyed = useMemo(() => keyViews(views), [views]);\n\n  const coreViews = useMemo<DevView[]>(\n    () =>\n      keyed.map(({ key, view }) => ({\n        id: key,\n        label: view.label,\n        group: view.group,\n        order: view.order,\n        mount: (host) => {\n          setHosts((prev) => new Map(prev).set(key, host));\n          return () => {\n            if (!alive.current) return;\n            setHosts((prev) => {\n              const next = new Map(prev);\n              next.delete(key);\n              return next;\n            });\n          };\n        },\n      })),\n    [keyed],\n  );\n\n  // The core reconciles views by id and no-ops when their shape is unchanged,\n  // so handing it a fresh array on every render costs nothing and never\n  // remounts a view.\n  const latest = useRef({ options, coreViews });\n  latest.current = { options, coreViews };\n\n  useEffect(() => {\n    alive.current = true;\n    const inst = createDevDock({\n      ...latest.current.options,\n      views: latest.current.coreViews,\n    });\n    instance.current = inst;\n    return () => {\n      alive.current = false;\n      inst.destroy();\n      instance.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    instance.current?.update({ ...options, views: coreViews });\n  });\n\n  return (\n    <>\n      {keyed.map(({ key, view }) => {\n        const host = hosts.get(key);\n        return host ? createPortal(view.render(), host, key) : null;\n      })}\n    </>\n  );\n}\n"]}