@plumile/ui-devtools 0.2.3 → 0.2.5

package/README.md

@@ -69,6 +69,15 @@ optional per-category overflow limits and block or inline layout variants.
 separator accessibility behavior is aligned with `@plumile/ui`
 `ResizableSplitView`, but it keeps the compact `--pdt-*` styling and no runtime
 dependency on `@plumile/ui`.
+`DevtoolsTheme` accepts `colorScheme="light"` or `colorScheme="dark"` when a
+host such as Chrome DevTools exposes its effective theme. When omitted, it
+falls back to the operating-system preference for Storybook and standalone
+previews.
+`DevtoolsToolbarButton` supports a compact icon-only presentation with
+`presentation="icon"`; this form requires both an icon and a tooltip `title`,
+while `label` remains its accessible name. `DevtoolsSplitView` defaults to
+stacking its panes at 688 px and below and accepts `narrowMode="detail"` to show only
+the detail pane when a consumer provides its own return navigation.
 Use `DevtoolsJsonBlock` for visual JSON payloads; it renders nullish values as
 an empty fallback, pretty-prints serializable values through `DevtoolsCodeBlock`,
 and exposes a fallback for circular or otherwise unserializable input.
@@ -78,6 +87,7 @@ For the complete entry point, see [`src/index.ts`](./src/index.ts).
 ## Quick Start
 
 ```tsx
+import '@plumile/ui-devtools/style.css';
 import {
   DevtoolsCard,
   DevtoolsSection,

package/lib/esm/content/devtoolsCodeBlock.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsCodeBlock.css.js","names":[],"sources":["../../../src/content/devtoolsCodeBlock.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const codeBlock = style({\n  margin: 0,\n  padding: '12px',\n  borderRadius: '6px',\n  backgroundColor: 'var(--pdt-code-bg)',\n  fontSize: '12px',\n  lineHeight: 1.4,\n  overflowX: 'auto',\n  whiteSpace: 'pre-wrap',\n  wordBreak: 'break-word',\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsCodeBlock.css.js","names":[],"sources":["../../../src/content/devtoolsCodeBlock.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const codeBlock = style({\n  margin: 0,\n  padding: '8px',\n  borderRadius: '4px',\n  backgroundColor: 'var(--pdt-code-bg)',\n  fontSize: '12px',\n  lineHeight: '16px',\n  overflowX: 'auto',\n  whiteSpace: 'pre-wrap',\n  wordBreak: 'break-word',\n});\n"],"mappings":""}

package/lib/esm/controls/DevtoolsSelect.js

@@ -1,18 +1,22 @@
 import { select as e, selectField as t, selectLabel as n } from "./devtoolsControls.css.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
 //#region src/controls/DevtoolsSelect.tsx
-function a(a) {
-	let { label: o, onChange: s, options: c, value: l } = a;
+function o(o) {
+	let { label: s, onChange: c, options: l, value: u } = o, d = a();
 	return /* @__PURE__ */ i("label", {
 		className: t,
+		htmlFor: d,
 		children: [/* @__PURE__ */ r("span", {
 			className: n,
-			children: o
+			children: s
 		}), /* @__PURE__ */ r("select", {
 			className: e,
-			value: l,
-			onChange: s,
-			children: c.map((e) => /* @__PURE__ */ r("option", {
+			id: d,
+			name: d,
+			value: u,
+			onChange: c,
+			children: l.map((e) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				children: e.label
 			}, e.value))
@@ -20,6 +24,6 @@ function a(a) {
 	});
 }
 //#endregion
-export { a as DevtoolsSelect };
+export { o as DevtoolsSelect };
 
 //# sourceMappingURL=DevtoolsSelect.js.map

package/lib/esm/controls/DevtoolsSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsSelect.js","names":[],"sources":["../../../src/controls/DevtoolsSelect.tsx"],"sourcesContent":["import type { ChangeEventHandler, JSX, ReactNode } from 'react';\nimport { select, selectField, selectLabel } from './devtoolsControls.css.js';\n\nexport type DevtoolsSelectOption = {\n  value: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsSelectProps = {\n  label: ReactNode;\n  value: string;\n  onChange: ChangeEventHandler<HTMLSelectElement>;\n  options: readonly DevtoolsSelectOption[];\n};\n\n/** Render a compact labeled DevTools select control. */\nexport function DevtoolsSelect(props: DevtoolsSelectProps): JSX.Element {\n  const { label, onChange, options, value } = props;\n\n  return (\n    <label className={selectField}>\n      <span className={selectLabel}>{label}</span>\n      <select className={select} value={value} onChange={onChange}>\n        {options.map((option) => {\n          return (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          );\n        })}\n      </select>\n    </label>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAe,GAAyC;CACtE,IAAM,EAAE,UAAO,aAAU,YAAS,aAAU;CAE5C,OACE,kBAAC,SAAD;EAAO,WAAW;EAAlB,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW;GAAc,UAAA;EAAY,CAAA,GAC3C,kBAAC,UAAD;GAAQ,WAAW;GAAe;GAAiB;GAChD,UAAA,EAAQ,KAAK,MAEV,kBAAC,UAAD;IAA2B,OAAO,EAAO;IACtC,UAAA,EAAO;GACF,GAFK,EAAO,KAEZ,CAEX;EACK,CAAA,CACH;;AAEX"}
+{"version":3,"file":"DevtoolsSelect.js","names":[],"sources":["../../../src/controls/DevtoolsSelect.tsx"],"sourcesContent":["import {\n  useId,\n  type ChangeEventHandler,\n  type JSX,\n  type ReactNode,\n} from 'react';\nimport { select, selectField, selectLabel } from './devtoolsControls.css.js';\n\nexport type DevtoolsSelectOption = {\n  value: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsSelectProps = {\n  label: ReactNode;\n  value: string;\n  onChange: ChangeEventHandler<HTMLSelectElement>;\n  options: readonly DevtoolsSelectOption[];\n};\n\n/** Render a compact labeled DevTools select control. */\nexport function DevtoolsSelect(props: DevtoolsSelectProps): JSX.Element {\n  const { label, onChange, options, value } = props;\n  const selectId = useId();\n\n  return (\n    <label className={selectField} htmlFor={selectId}>\n      <span className={selectLabel}>{label}</span>\n      <select\n        className={select}\n        id={selectId}\n        name={selectId}\n        value={value}\n        onChange={onChange}\n      >\n        {options.map((option) => {\n          return (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          );\n        })}\n      </select>\n    </label>\n  );\n}\n"],"mappings":";;;;AAqBA,SAAgB,EAAe,GAAyC;CACtE,IAAM,EAAE,UAAO,aAAU,YAAS,aAAU,GACtC,IAAW,EAAM;CAEvB,OACE,kBAAC,SAAD;EAAO,WAAW;EAAa,SAAS;EAAxC,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW;GAAc,UAAA;EAAY,CAAA,GAC3C,kBAAC,UAAD;GACE,WAAW;GACX,IAAI;GACJ,MAAM;GACC;GACG;GAET,UAAA,EAAQ,KAAK,MAEV,kBAAC,UAAD;IAA2B,OAAO,EAAO;IACtC,UAAA,EAAO;GACF,GAFK,EAAO,KAEZ,CAEX;EACK,CAAA,CACH;;AAEX"}

package/lib/esm/controls/devtoolsControls.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsControls.css.js","names":[],"sources":["../../../src/controls/devtoolsControls.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const button = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '6px',\n  minHeight: '28px',\n  padding: '4px 10px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  lineHeight: 1.2,\n  cursor: 'pointer',\n  transition: 'background-color 150ms ease, border-color 150ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-accent) 8%, transparent)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    '&:disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  },\n});\n\nexport const buttonDanger = style({\n  color: 'var(--pdt-danger)',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-danger) 10%, transparent)',\n      borderColor: 'color-mix(in srgb, var(--pdt-danger) 34%, transparent)',\n    },\n  },\n});\n\nexport const selectField = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  minWidth: 0,\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n  '@media': {\n    'screen and (max-width: 520px)': {\n      flex: '1 1 100%',\n    },\n  },\n});\n\nexport const selectLabel = style({\n  fontSize: '12px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const select = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n  minHeight: '28px',\n  padding: '4px 8px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  selectors: {\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsControls.css.js","names":[],"sources":["../../../src/controls/devtoolsControls.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const button = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '6px',\n  minHeight: '26px',\n  padding: '3px 8px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  lineHeight: 1.2,\n  cursor: 'pointer',\n  transition: 'background-color 100ms ease, border-color 100ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-accent) 8%, transparent)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    '&:disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  },\n});\n\nexport const buttonDanger = style({\n  color: 'var(--pdt-danger)',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-danger) 10%, transparent)',\n      borderColor: 'color-mix(in srgb, var(--pdt-danger) 34%, transparent)',\n    },\n  },\n});\n\nexport const selectField = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  minWidth: 0,\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n  '@media': {\n    'screen and (max-width: 520px)': {\n      flex: '1 1 100%',\n    },\n  },\n});\n\nexport const selectLabel = style({\n  fontSize: '12px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const select = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n  minHeight: '26px',\n  padding: '3px 6px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  selectors: {\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n  },\n});\n\nglobalStyle(`${button}:focus-visible, ${select}:focus-visible`, {\n  '@media': {\n    '(forced-colors: active)': {\n      outline: '2px solid Highlight',\n      outlineOffset: '2px',\n      boxShadow: 'none',\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/devtoolsComponents.stories.css.js

@@ -0,0 +1,7 @@
+/* empty css                                          */
+//#region src/devtoolsComponents.stories.css.ts
+var e = "ifni760", t = "ifni761", n = "ifni762";
+//#endregion
+export { n as storyBodyText, e as storyPage, t as storyTitle };
+
+//# sourceMappingURL=devtoolsComponents.stories.css.js.map

package/lib/esm/devtoolsComponents.stories.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsComponents.stories.css.js","names":[],"sources":["../../src/devtoolsComponents.stories.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const storyPage = style({\n  display: 'flex',\n  minHeight: '100vh',\n  flexDirection: 'column',\n  gap: '16px',\n  padding: '16px',\n});\n\nexport const storyTitle = style({\n  margin: 0,\n  color: 'var(--pdt-text)',\n  fontSize: '18px',\n  fontWeight: 600,\n  lineHeight: 1.3,\n});\n\nexport const storyBodyText = style({\n  color: 'var(--pdt-text)',\n});\n"],"mappings":""}

package/lib/esm/empty_state/devtoolsEmptyState.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsEmptyState.css.js","names":[],"sources":["../../../src/empty_state/devtoolsEmptyState.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const root = style({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: '12px',\n  maxWidth: '420px',\n  padding: '24px',\n});\n\nexport const title = style({\n  margin: 0,\n  fontSize: '18px',\n  fontWeight: 600,\n});\n\nexport const description = style({\n  margin: 0,\n  fontSize: '13px',\n  lineHeight: 1.5,\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  flexWrap: 'wrap',\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsEmptyState.css.js","names":[],"sources":["../../../src/empty_state/devtoolsEmptyState.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const root = style({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: '8px',\n  maxWidth: '420px',\n  padding: '16px',\n});\n\nexport const title = style({\n  margin: 0,\n  fontSize: '13px',\n  fontWeight: 600,\n  color: 'var(--pdt-text)',\n});\n\nexport const description = style({\n  margin: 0,\n  fontSize: '12px',\n  lineHeight: '16px',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  flexWrap: 'wrap',\n});\n"],"mappings":""}

package/lib/esm/feedback/devtoolsFeedback.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsFeedback.css.js","names":[],"sources":["../../../src/feedback/devtoolsFeedback.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\n\nexport const badge = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '4px',\n  minHeight: '20px',\n  padding: '2px 8px',\n  borderRadius: '999px',\n  border: '1px solid transparent',\n  fontSize: '11px',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n  backgroundColor: 'var(--pdt-surface-muted)',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const badgeNeutral = style({\n  backgroundColor: 'var(--pdt-surface-muted)',\n  borderColor: 'var(--pdt-border)',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const badgeInfo = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-info) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-info) 24%, transparent)',\n  color: 'var(--pdt-info)',\n});\n\nexport const badgeSuccess = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-success) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-success) 24%, transparent)',\n  color: 'var(--pdt-success)',\n});\n\nexport const badgeWarning = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-warning) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-warning) 24%, transparent)',\n  color: 'var(--pdt-warning)',\n});\n\nexport const badgeDanger = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-danger) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-danger) 24%, transparent)',\n  color: 'var(--pdt-danger)',\n});\n\nexport const pill = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  minHeight: '20px',\n  padding: '2px 8px',\n  borderRadius: '999px',\n  border: '1px solid var(--pdt-border)',\n  fontSize: '11px',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text)',\n});\n\nexport const pillNeutral = style({\n  backgroundColor: 'var(--pdt-surface-muted)',\n  borderColor: 'var(--pdt-border)',\n});\n\nexport const pillNavigation = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-accent) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-accent) 24%, transparent)',\n});\n\nexport const pillUpdate = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-info) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-info) 24%, transparent)',\n});\n\nexport const pillSnapshot = style({\n  backgroundColor: 'var(--pdt-event-snapshot-bg)',\n  borderColor: 'var(--pdt-event-snapshot-border)',\n});\n\nexport const pillPreload = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-success) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-success) 24%, transparent)',\n});\n\nexport const pillHistory = style({\n  backgroundColor: 'var(--pdt-event-history-bg)',\n  borderColor: 'var(--pdt-event-history-border)',\n});\n\nexport const pillPopstate = style({\n  backgroundColor: 'var(--pdt-event-popstate-bg)',\n  borderColor: 'var(--pdt-event-popstate-border)',\n});\n\nexport const pillPrepare = style({\n  backgroundColor: 'var(--pdt-event-prepare-bg)',\n  borderColor: 'var(--pdt-event-prepare-border)',\n});\n\nexport const statusLight = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  minHeight: '20px',\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const statusDot = style({\n  width: '10px',\n  height: '10px',\n  borderRadius: '50%',\n  backgroundColor: 'var(--pdt-border)',\n});\n\nexport const statusReady = style({\n  backgroundColor: 'var(--pdt-success)',\n  boxShadow:\n    '0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)',\n});\n\nexport const statusIdle = style({\n  backgroundColor: 'var(--pdt-border)',\n  boxShadow: 'inset 0 0 0 1px var(--pdt-text-muted)',\n});\n\nconst diffFlash = keyframes({\n  from: {\n    boxShadow: 'var(--pdt-diff-flash-start)',\n  },\n  to: {\n    boxShadow: 'var(--pdt-diff-flash-end)',\n  },\n});\n\nexport const diffList = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '6px',\n  marginTop: '6px',\n  fontSize: '11px',\n});\n\nexport const diffInline = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '6px',\n  marginTop: 0,\n  fontSize: '11px',\n});\n\nexport const diffPill = style({\n  padding: '2px 8px',\n  border: '1px solid transparent',\n  borderRadius: '999px',\n  fontWeight: 600,\n});\n\nexport const diffPillAdded = style({\n  backgroundColor: 'var(--pdt-diff-added-bg)',\n  borderColor: 'var(--pdt-diff-added-border)',\n  color: 'var(--pdt-diff-added-text)',\n});\n\nexport const diffPillChanged = style({\n  backgroundColor: 'var(--pdt-diff-changed-bg)',\n  borderColor: 'var(--pdt-diff-changed-border)',\n  color: 'var(--pdt-diff-changed-text)',\n});\n\nexport const diffPillRemoved = style({\n  backgroundColor: 'var(--pdt-diff-removed-bg)',\n  borderColor: 'var(--pdt-diff-removed-border)',\n  color: 'var(--pdt-diff-removed-text)',\n});\n\nexport const diffPillFlash = style({\n  animation: `${diffFlash} 0.8s ease-in-out`,\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsFeedback.css.js","names":[],"sources":["../../../src/feedback/devtoolsFeedback.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\n\nexport const badge = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '4px',\n  minHeight: '18px',\n  padding: '1px 6px',\n  borderRadius: '4px',\n  border: '1px solid transparent',\n  fontSize: '11px',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n  backgroundColor: 'var(--pdt-surface-muted)',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const badgeNeutral = style({\n  backgroundColor: 'var(--pdt-surface-muted)',\n  borderColor: 'var(--pdt-border)',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const badgeInfo = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-info) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-info) 24%, transparent)',\n  color: 'var(--pdt-info)',\n});\n\nexport const badgeSuccess = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-success) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-success) 24%, transparent)',\n  color: 'var(--pdt-success)',\n});\n\nexport const badgeWarning = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-warning) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-warning) 24%, transparent)',\n  color: 'var(--pdt-warning)',\n});\n\nexport const badgeDanger = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-danger) 12%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-danger) 24%, transparent)',\n  color: 'var(--pdt-danger)',\n});\n\nexport const pill = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  minHeight: '18px',\n  padding: '1px 6px',\n  borderRadius: '4px',\n  border: '1px solid var(--pdt-border)',\n  fontSize: '11px',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text)',\n});\n\nexport const pillNeutral = style({\n  backgroundColor: 'var(--pdt-surface-muted)',\n  borderColor: 'var(--pdt-border)',\n});\n\nexport const pillNavigation = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-accent) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-accent) 24%, transparent)',\n});\n\nexport const pillUpdate = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-info) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-info) 24%, transparent)',\n});\n\nexport const pillSnapshot = style({\n  backgroundColor: 'var(--pdt-event-snapshot-bg)',\n  borderColor: 'var(--pdt-event-snapshot-border)',\n});\n\nexport const pillPreload = style({\n  backgroundColor: 'color-mix(in srgb, var(--pdt-success) 10%, transparent)',\n  borderColor: 'color-mix(in srgb, var(--pdt-success) 24%, transparent)',\n});\n\nexport const pillHistory = style({\n  backgroundColor: 'var(--pdt-event-history-bg)',\n  borderColor: 'var(--pdt-event-history-border)',\n});\n\nexport const pillPopstate = style({\n  backgroundColor: 'var(--pdt-event-popstate-bg)',\n  borderColor: 'var(--pdt-event-popstate-border)',\n});\n\nexport const pillPrepare = style({\n  backgroundColor: 'var(--pdt-event-prepare-bg)',\n  borderColor: 'var(--pdt-event-prepare-border)',\n});\n\nexport const statusLight = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  minHeight: '18px',\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const statusDot = style({\n  width: '10px',\n  height: '10px',\n  borderRadius: '50%',\n  backgroundColor: 'var(--pdt-border)',\n});\n\nexport const statusReady = style({\n  backgroundColor: 'var(--pdt-success)',\n  boxShadow:\n    '0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)',\n});\n\nexport const statusIdle = style({\n  backgroundColor: 'var(--pdt-border)',\n  boxShadow: 'inset 0 0 0 1px var(--pdt-text-muted)',\n});\n\nconst diffFlash = keyframes({\n  from: {\n    boxShadow: 'var(--pdt-diff-flash-start)',\n  },\n  to: {\n    boxShadow: 'var(--pdt-diff-flash-end)',\n  },\n});\n\nexport const diffList = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '4px',\n  marginTop: '4px',\n  fontSize: '11px',\n});\n\nexport const diffInline = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '4px',\n  marginTop: 0,\n  fontSize: '11px',\n});\n\nexport const diffPill = style({\n  padding: '1px 6px',\n  border: '1px solid transparent',\n  borderRadius: '4px',\n  fontWeight: 600,\n});\n\nexport const diffPillAdded = style({\n  backgroundColor: 'var(--pdt-diff-added-bg)',\n  borderColor: 'var(--pdt-diff-added-border)',\n  color: 'var(--pdt-diff-added-text)',\n});\n\nexport const diffPillChanged = style({\n  backgroundColor: 'var(--pdt-diff-changed-bg)',\n  borderColor: 'var(--pdt-diff-changed-border)',\n  color: 'var(--pdt-diff-changed-text)',\n});\n\nexport const diffPillRemoved = style({\n  backgroundColor: 'var(--pdt-diff-removed-bg)',\n  borderColor: 'var(--pdt-diff-removed-border)',\n  color: 'var(--pdt-diff-removed-text)',\n});\n\nexport const diffPillFlash = style({\n  animation: `${diffFlash} 0.8s ease-in-out`,\n  '@media': {\n    '(prefers-reduced-motion: reduce)': {\n      animation: 'none',\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/layout/DevtoolsSplitView.js

@@ -7,76 +7,77 @@ function f(e, t, n) {
 	return e < t ? t : e > n ? n : e;
 }
 function p(p) {
-	let { main: m, maxSidebarWidth: h, minSidebarWidth: g, onSidebarWidthChange: _, sidebar: v, sidebarLabel: y, sidebarWidth: b } = p, x = c({
+	let { main: m, maxSidebarWidth: h, minSidebarWidth: g, narrowMode: _ = "stack", onSidebarWidthChange: v, sidebar: y, sidebarLabel: b, sidebarWidth: x } = p, S = c({
 		active: !1,
 		pointerId: null,
 		startX: 0,
-		width: b
-	}), S = o((e) => {
-		let t = x.current;
+		width: x
+	}), C = o((e) => {
+		let t = S.current;
 		if (!t.active || t.pointerId != null && e.pointerId !== t.pointerId) return;
 		e.preventDefault();
 		let n = t.startX - e.clientX;
-		_(f(t.width + n, g, h));
+		v(f(t.width + n, g, h));
 	}, [
 		h,
 		g,
-		_
-	]), C = o(() => {
-		x.current.active && (x.current.active = !1, x.current.pointerId = null, window.removeEventListener("pointermove", S), window.removeEventListener("pointerup", C), window.removeEventListener("pointercancel", C));
-	}, [S]);
+		v
+	]), w = o(() => {
+		S.current.active && (S.current.active = !1, S.current.pointerId = null, window.removeEventListener("pointermove", C), window.removeEventListener("pointerup", w), window.removeEventListener("pointercancel", w));
+	}, [C]);
 	s(() => () => {
-		window.removeEventListener("pointermove", S), window.removeEventListener("pointerup", C), window.removeEventListener("pointercancel", C);
-	}, [S, C]);
-	let w = o((e) => {
-		v != null && (e.preventDefault(), "setPointerCapture" in e.currentTarget && e.currentTarget.setPointerCapture(e.pointerId), x.current = {
+		window.removeEventListener("pointermove", C), window.removeEventListener("pointerup", w), window.removeEventListener("pointercancel", w);
+	}, [C, w]);
+	let T = o((e) => {
+		y != null && (e.preventDefault(), "setPointerCapture" in e.currentTarget && e.currentTarget.setPointerCapture(e.pointerId), S.current = {
 			active: !0,
 			pointerId: e.pointerId,
 			startX: e.clientX,
-			width: b
-		}, window.addEventListener("pointermove", S), window.addEventListener("pointerup", C), window.addEventListener("pointercancel", C));
+			width: x
+		}, window.addEventListener("pointermove", C), window.addEventListener("pointerup", w), window.addEventListener("pointercancel", w));
 	}, [
-		S,
 		C,
-		v,
-		b
-	]), T = o((e) => {
-		if (v == null) return;
+		w,
+		y,
+		x
+	]), E = o((e) => {
+		if (y == null) return;
 		let t = l;
 		if (e.shiftKey && (t = u), e.key === "ArrowLeft") {
-			e.preventDefault(), _(f(b + t, g, h));
+			e.preventDefault(), v(f(x + t, g, h));
 			return;
 		}
-		e.key === "ArrowRight" && (e.preventDefault(), _(f(b - t, g, h)));
+		e.key === "ArrowRight" && (e.preventDefault(), v(f(x - t, g, h)));
 	}, [
 		h,
 		g,
-		_,
 		v,
-		b
-	]), E = e;
-	return v != null && (E = `${e} ${t}`), /* @__PURE__ */ a("div", {
+		y,
+		x
+	]), D = e;
+	return y != null && (D = `${e} ${t}`), /* @__PURE__ */ a("div", {
 		className: n,
+		"data-narrow-mode": y == null ? "stack" : _,
 		children: [/* @__PURE__ */ i("div", {
-			className: E,
+			className: D,
 			children: m
-		}), v != null && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+		}), y != null && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
 			className: "_1m64tse3",
 			role: "separator",
 			"aria-orientation": "vertical",
-			"aria-label": y ?? d,
+			"aria-label": b ?? d,
 			"aria-valuemin": Math.round(g),
 			"aria-valuemax": Math.round(h),
-			"aria-valuenow": Math.round(b),
+			"aria-valuenow": Math.round(x),
 			tabIndex: 0,
-			onPointerDown: w,
-			onKeyDown: T,
+			onPointerDown: T,
+			onKeyDown: E,
 			children: /* @__PURE__ */ i("span", { className: "_1m64tse4" })
 		}), /* @__PURE__ */ i("section", {
 			className: "_1m64tse5",
-			"aria-label": y ?? void 0,
-			style: { width: `${b}px` },
-			children: v
+			"aria-label": b ?? void 0,
+			style: { width: `${x}px` },
+			children: y
 		})] })]
 	});
 }

package/lib/esm/layout/DevtoolsSplitView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsSplitView.js","names":[],"sources":["../../../src/layout/DevtoolsSplitView.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  main,\n  mainBordered,\n  resizer,\n  resizerLine,\n  root,\n  sidebar,\n} from './devtoolsSplitView.css.js';\n\ntype DragState = {\n  active: boolean;\n  pointerId: number | null;\n  startX: number;\n  width: number;\n};\n\nconst RESIZE_STEP = 16;\nconst RESIZE_SHIFT_STEP = 64;\nconst DEFAULT_SIDEBAR_LABEL = 'Resize sidebar';\n\nexport type DevtoolsSplitViewProps = {\n  main: ReactNode;\n  sidebar: ReactNode | null;\n  sidebarWidth: number;\n  minSidebarWidth: number;\n  maxSidebarWidth: number;\n  onSidebarWidthChange: (width: number) => void;\n  sidebarLabel?: string;\n};\n\n/** Clamp a sidebar width within the configured resize bounds. */\nfunction clampWidth(value: number, minWidth: number, maxWidth: number): number {\n  if (value < minWidth) {\n    return minWidth;\n  }\n  if (value > maxWidth) {\n    return maxWidth;\n  }\n  return value;\n}\n\n/** Render a split view with a resizable optional sidebar. */\nexport function DevtoolsSplitView(props: DevtoolsSplitViewProps): JSX.Element {\n  const {\n    main: mainContent,\n    maxSidebarWidth,\n    minSidebarWidth,\n    onSidebarWidthChange,\n    sidebar: sidebarContent,\n    sidebarLabel,\n    sidebarWidth,\n  } = props;\n  const dragRef = useRef<DragState>({\n    active: false,\n    pointerId: null,\n    startX: 0,\n    width: sidebarWidth,\n  });\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      const state = dragRef.current;\n      if (!state.active) {\n        return;\n      }\n      if (state.pointerId != null && event.pointerId !== state.pointerId) {\n        return;\n      }\n      event.preventDefault();\n      const delta = state.startX - event.clientX;\n      onSidebarWidthChange(\n        clampWidth(state.width + delta, minSidebarWidth, maxSidebarWidth),\n      );\n    },\n    [maxSidebarWidth, minSidebarWidth, onSidebarWidthChange],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    if (!dragRef.current.active) {\n      return;\n    }\n    dragRef.current.active = false;\n    dragRef.current.pointerId = null;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n  }, [handlePointerMove]);\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', handlePointerUp);\n      window.removeEventListener('pointercancel', handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp]);\n\n  const handlePointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (sidebarContent == null) {\n        return;\n      }\n      event.preventDefault();\n      if ('setPointerCapture' in event.currentTarget) {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      }\n      dragRef.current = {\n        active: true,\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        width: sidebarWidth,\n      };\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n      window.addEventListener('pointercancel', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp, sidebarContent, sidebarWidth],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (sidebarContent == null) {\n        return;\n      }\n      let step = RESIZE_STEP;\n      if (event.shiftKey) {\n        step = RESIZE_SHIFT_STEP;\n      }\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        onSidebarWidthChange(\n          clampWidth(sidebarWidth + step, minSidebarWidth, maxSidebarWidth),\n        );\n        return;\n      }\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        onSidebarWidthChange(\n          clampWidth(sidebarWidth - step, minSidebarWidth, maxSidebarWidth),\n        );\n      }\n    },\n    [\n      maxSidebarWidth,\n      minSidebarWidth,\n      onSidebarWidthChange,\n      sidebarContent,\n      sidebarWidth,\n    ],\n  );\n\n  let mainClassName = main;\n  if (sidebarContent != null) {\n    mainClassName = `${main} ${mainBordered}`;\n  }\n\n  return (\n    <div className={root}>\n      <div className={mainClassName}>{mainContent}</div>\n      {sidebarContent != null && (\n        <>\n          <div\n            className={resizer}\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={sidebarLabel ?? DEFAULT_SIDEBAR_LABEL}\n            aria-valuemin={Math.round(minSidebarWidth)}\n            aria-valuemax={Math.round(maxSidebarWidth)}\n            aria-valuenow={Math.round(sidebarWidth)}\n            tabIndex={0}\n            onPointerDown={handlePointerDown}\n            onKeyDown={handleKeyDown}\n          >\n            <span className={resizerLine} />\n          </div>\n          <section\n            className={sidebar}\n            aria-label={sidebarLabel ?? undefined}\n            style={{ width: `${sidebarWidth}px` }}\n          >\n            {sidebarContent}\n          </section>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,IAAM,IAAc,IACd,IAAoB,IACpB,IAAwB;AAa9B,SAAS,EAAW,GAAe,GAAkB,GAA0B;CAO7E,OANI,IAAQ,IACH,IAEL,IAAQ,IACH,IAEF;AACT;AAGA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,MAAM,GACN,oBACA,oBACA,yBACA,SAAS,GACT,iBACA,oBACE,GACE,IAAU,EAAkB;EAChC,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,OAAO;CACT,CAAC,GAEK,IAAoB,GACvB,MAAwB;EACvB,IAAM,IAAQ,EAAQ;EAItB,IAHI,CAAC,EAAM,UAGP,EAAM,aAAa,QAAQ,EAAM,cAAc,EAAM,WACvD;EAEF,EAAM,eAAe;EACrB,IAAM,IAAQ,EAAM,SAAS,EAAM;EACnC,EACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,CAAe,CAClE;CACF,GACA;EAAC;EAAiB;EAAiB;CAAoB,CACzD,GAEM,IAAkB,QAAkB;EACnC,EAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,EAAQ,QAAQ,YAAY,MAC5B,OAAO,oBAAoB,eAAe,CAAiB,GAC3D,OAAO,oBAAoB,aAAa,CAAe,GACvD,OAAO,oBAAoB,iBAAiB,CAAe;CAC7D,GAAG,CAAC,CAAiB,CAAC;CAEtB,cACe;EAGX,AAFA,OAAO,oBAAoB,eAAe,CAAiB,GAC3D,OAAO,oBAAoB,aAAa,CAAe,GACvD,OAAO,oBAAoB,iBAAiB,CAAe;CAC7D,GACC,CAAC,GAAmB,CAAe,CAAC;CAEvC,IAAM,IAAoB,GACvB,MAA6C;EACxC,KAAkB,SAGtB,EAAM,eAAe,GACjB,uBAAuB,EAAM,iBAC/B,EAAM,cAAc,kBAAkB,EAAM,SAAS,GAEvD,EAAQ,UAAU;GAChB,QAAQ;GACR,WAAW,EAAM;GACjB,QAAQ,EAAM;GACd,OAAO;EACT,GACA,OAAO,iBAAiB,eAAe,CAAiB,GACxD,OAAO,iBAAiB,aAAa,CAAe,GACpD,OAAO,iBAAiB,iBAAiB,CAAe;CAC1D,GACA;EAAC;EAAmB;EAAiB;EAAgB;CAAY,CACnE,GAEM,IAAgB,GACnB,MAA8C;EAC7C,IAAI,KAAkB,MACpB;EAEF,IAAI,IAAO;EAIX,IAHI,EAAM,aACR,IAAO,IAEL,EAAM,QAAQ,aAAa;GAE7B,AADA,EAAM,eAAe,GACrB,EACE,EAAW,IAAe,GAAM,GAAiB,CAAe,CAClE;GACA;EACF;EACA,AAAI,EAAM,QAAQ,iBAChB,EAAM,eAAe,GACrB,EACE,EAAW,IAAe,GAAM,GAAiB,CAAe,CAClE;CAEJ,GACA;EACE;EACA;EACA;EACA;EACA;CACF,CACF,GAEI,IAAgB;CAKpB,OAJI,KAAkB,SACpB,IAAgB,GAAG,EAAK,GAAG,MAI3B,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW;GAAgB,UAAA;EAAiB,CAAA,GAChD,KAAkB,QACjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAA;GACA,MAAK;GACL,oBAAiB;GACjB,cAAY,KAAgB;GAC5B,iBAAe,KAAK,MAAM,CAAe;GACzC,iBAAe,KAAK,MAAM,CAAe;GACzC,iBAAe,KAAK,MAAM,CAAY;GACtC,UAAU;GACV,eAAe;GACf,WAAW;GAEX,UAAA,kBAAC,QAAD,EAAM,WAAA,YAAyB,CAAA;EAC5B,CAAA,GACL,kBAAC,WAAD;GACE,WAAA;GACA,cAAY,KAAgB,KAAA;GAC5B,OAAO,EAAE,OAAO,GAAG,EAAa,IAAI;GAEnC,UAAA;EACM,CAAA,CACT,EAAA,CAAA,CAED;;AAET"}
+{"version":3,"file":"DevtoolsSplitView.js","names":[],"sources":["../../../src/layout/DevtoolsSplitView.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  main,\n  mainBordered,\n  resizer,\n  resizerLine,\n  root,\n  sidebar,\n} from './devtoolsSplitView.css.js';\n\ntype DragState = {\n  active: boolean;\n  pointerId: number | null;\n  startX: number;\n  width: number;\n};\n\nconst RESIZE_STEP = 16;\nconst RESIZE_SHIFT_STEP = 64;\nconst DEFAULT_SIDEBAR_LABEL = 'Resize sidebar';\n\nexport type DevtoolsSplitViewNarrowMode = 'stack' | 'detail';\n\nexport type DevtoolsSplitViewProps = {\n  main: ReactNode;\n  sidebar: ReactNode | null;\n  sidebarWidth: number;\n  minSidebarWidth: number;\n  maxSidebarWidth: number;\n  onSidebarWidthChange: (width: number) => void;\n  sidebarLabel?: string;\n  /** Choose whether a narrow viewport stacks both panes or focuses the detail. */\n  narrowMode?: DevtoolsSplitViewNarrowMode;\n};\n\n/** Clamp a sidebar width within the configured resize bounds. */\nfunction clampWidth(value: number, minWidth: number, maxWidth: number): number {\n  if (value < minWidth) {\n    return minWidth;\n  }\n  if (value > maxWidth) {\n    return maxWidth;\n  }\n  return value;\n}\n\n/** Render a split view with a resizable optional sidebar. */\nexport function DevtoolsSplitView(props: DevtoolsSplitViewProps): JSX.Element {\n  const {\n    main: mainContent,\n    maxSidebarWidth,\n    minSidebarWidth,\n    narrowMode = 'stack',\n    onSidebarWidthChange,\n    sidebar: sidebarContent,\n    sidebarLabel,\n    sidebarWidth,\n  } = props;\n  const dragRef = useRef<DragState>({\n    active: false,\n    pointerId: null,\n    startX: 0,\n    width: sidebarWidth,\n  });\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      const state = dragRef.current;\n      if (!state.active) {\n        return;\n      }\n      if (state.pointerId != null && event.pointerId !== state.pointerId) {\n        return;\n      }\n      event.preventDefault();\n      const delta = state.startX - event.clientX;\n      onSidebarWidthChange(\n        clampWidth(state.width + delta, minSidebarWidth, maxSidebarWidth),\n      );\n    },\n    [maxSidebarWidth, minSidebarWidth, onSidebarWidthChange],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    if (!dragRef.current.active) {\n      return;\n    }\n    dragRef.current.active = false;\n    dragRef.current.pointerId = null;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n  }, [handlePointerMove]);\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', handlePointerUp);\n      window.removeEventListener('pointercancel', handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp]);\n\n  const handlePointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (sidebarContent == null) {\n        return;\n      }\n      event.preventDefault();\n      if ('setPointerCapture' in event.currentTarget) {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      }\n      dragRef.current = {\n        active: true,\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        width: sidebarWidth,\n      };\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n      window.addEventListener('pointercancel', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp, sidebarContent, sidebarWidth],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (sidebarContent == null) {\n        return;\n      }\n      let step = RESIZE_STEP;\n      if (event.shiftKey) {\n        step = RESIZE_SHIFT_STEP;\n      }\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        onSidebarWidthChange(\n          clampWidth(sidebarWidth + step, minSidebarWidth, maxSidebarWidth),\n        );\n        return;\n      }\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        onSidebarWidthChange(\n          clampWidth(sidebarWidth - step, minSidebarWidth, maxSidebarWidth),\n        );\n      }\n    },\n    [\n      maxSidebarWidth,\n      minSidebarWidth,\n      onSidebarWidthChange,\n      sidebarContent,\n      sidebarWidth,\n    ],\n  );\n\n  let mainClassName = main;\n  if (sidebarContent != null) {\n    mainClassName = `${main} ${mainBordered}`;\n  }\n\n  return (\n    <div\n      className={root}\n      data-narrow-mode={sidebarContent == null ? 'stack' : narrowMode}\n    >\n      <div className={mainClassName}>{mainContent}</div>\n      {sidebarContent != null && (\n        <>\n          <div\n            className={resizer}\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={sidebarLabel ?? DEFAULT_SIDEBAR_LABEL}\n            aria-valuemin={Math.round(minSidebarWidth)}\n            aria-valuemax={Math.round(maxSidebarWidth)}\n            aria-valuenow={Math.round(sidebarWidth)}\n            tabIndex={0}\n            onPointerDown={handlePointerDown}\n            onKeyDown={handleKeyDown}\n          >\n            <span className={resizerLine} />\n          </div>\n          <section\n            className={sidebar}\n            aria-label={sidebarLabel ?? undefined}\n            style={{ width: `${sidebarWidth}px` }}\n          >\n            {sidebarContent}\n          </section>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,IAAM,IAAc,IACd,IAAoB,IACpB,IAAwB;AAiB9B,SAAS,EAAW,GAAe,GAAkB,GAA0B;CAO7E,OANI,IAAQ,IACH,IAEL,IAAQ,IACH,IAEF;AACT;AAGA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,MAAM,GACN,oBACA,oBACA,gBAAa,SACb,yBACA,SAAS,GACT,iBACA,oBACE,GACE,IAAU,EAAkB;EAChC,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,OAAO;CACT,CAAC,GAEK,IAAoB,GACvB,MAAwB;EACvB,IAAM,IAAQ,EAAQ;EAItB,IAHI,CAAC,EAAM,UAGP,EAAM,aAAa,QAAQ,EAAM,cAAc,EAAM,WACvD;EAEF,EAAM,eAAe;EACrB,IAAM,IAAQ,EAAM,SAAS,EAAM;EACnC,EACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,CAAe,CAClE;CACF,GACA;EAAC;EAAiB;EAAiB;CAAoB,CACzD,GAEM,IAAkB,QAAkB;EACnC,EAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,EAAQ,QAAQ,YAAY,MAC5B,OAAO,oBAAoB,eAAe,CAAiB,GAC3D,OAAO,oBAAoB,aAAa,CAAe,GACvD,OAAO,oBAAoB,iBAAiB,CAAe;CAC7D,GAAG,CAAC,CAAiB,CAAC;CAEtB,cACe;EAGX,AAFA,OAAO,oBAAoB,eAAe,CAAiB,GAC3D,OAAO,oBAAoB,aAAa,CAAe,GACvD,OAAO,oBAAoB,iBAAiB,CAAe;CAC7D,GACC,CAAC,GAAmB,CAAe,CAAC;CAEvC,IAAM,IAAoB,GACvB,MAA6C;EACxC,KAAkB,SAGtB,EAAM,eAAe,GACjB,uBAAuB,EAAM,iBAC/B,EAAM,cAAc,kBAAkB,EAAM,SAAS,GAEvD,EAAQ,UAAU;GAChB,QAAQ;GACR,WAAW,EAAM;GACjB,QAAQ,EAAM;GACd,OAAO;EACT,GACA,OAAO,iBAAiB,eAAe,CAAiB,GACxD,OAAO,iBAAiB,aAAa,CAAe,GACpD,OAAO,iBAAiB,iBAAiB,CAAe;CAC1D,GACA;EAAC;EAAmB;EAAiB;EAAgB;CAAY,CACnE,GAEM,IAAgB,GACnB,MAA8C;EAC7C,IAAI,KAAkB,MACpB;EAEF,IAAI,IAAO;EAIX,IAHI,EAAM,aACR,IAAO,IAEL,EAAM,QAAQ,aAAa;GAE7B,AADA,EAAM,eAAe,GACrB,EACE,EAAW,IAAe,GAAM,GAAiB,CAAe,CAClE;GACA;EACF;EACA,AAAI,EAAM,QAAQ,iBAChB,EAAM,eAAe,GACrB,EACE,EAAW,IAAe,GAAM,GAAiB,CAAe,CAClE;CAEJ,GACA;EACE;EACA;EACA;EACA;EACA;CACF,CACF,GAEI,IAAgB;CAKpB,OAJI,KAAkB,SACpB,IAAgB,GAAG,EAAK,GAAG,MAI3B,kBAAC,OAAD;EACE,WAAW;EACX,oBAAkB,KAAkB,OAAO,UAAU;EAFvD,UAAA,CAIE,kBAAC,OAAD;GAAK,WAAW;GAAgB,UAAA;EAAiB,CAAA,GAChD,KAAkB,QACjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAA;GACA,MAAK;GACL,oBAAiB;GACjB,cAAY,KAAgB;GAC5B,iBAAe,KAAK,MAAM,CAAe;GACzC,iBAAe,KAAK,MAAM,CAAe;GACzC,iBAAe,KAAK,MAAM,CAAY;GACtC,UAAU;GACV,eAAe;GACf,WAAW;GAEX,UAAA,kBAAC,QAAD,EAAM,WAAA,YAAyB,CAAA;EAC5B,CAAA,GACL,kBAAC,WAAD;GACE,WAAA;GACA,cAAY,KAAgB,KAAA;GAC5B,OAAO,EAAE,OAAO,GAAG,EAAa,IAAI;GAEnC,UAAA;EACM,CAAA,CACT,EAAA,CAAA,CAED;;AAET"}

package/lib/esm/layout/devtoolsSplitView.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsSplitView.css.js","names":[],"sources":["../../../src/layout/devtoolsSplitView.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const root = style({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'stretch',\n  minHeight: 0,\n  minWidth: 0,\n  '@media': {\n    'screen and (max-width: 640px)': {\n      flexDirection: 'column',\n      overflow: 'auto',\n    },\n  },\n});\n\nexport const main = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'var(--pdt-surface)',\n  overflow: 'hidden',\n});\n\nexport const mainBordered = style({\n  borderRight: '1px solid var(--pdt-border)',\n  '@media': {\n    'screen and (max-width: 640px)': {\n      borderRight: 0,\n      borderBottom: '1px solid var(--pdt-border)',\n    },\n  },\n});\n\nexport const resizer = style({\n  flex: '0 0 8px',\n  position: 'relative',\n  cursor: 'col-resize',\n  backgroundColor: 'transparent',\n  selectors: {\n    '&:focus-visible': {\n      outline: 'none',\n    },\n  },\n  '@media': {\n    'screen and (max-width: 640px)': {\n      display: 'none',\n    },\n  },\n});\n\nexport const resizerLine = style({\n  position: 'absolute',\n  top: 0,\n  bottom: 0,\n  left: '50%',\n  width: '2px',\n  transform: 'translateX(-50%)',\n  borderRadius: '2px',\n  backgroundColor: 'var(--pdt-border)',\n  selectors: {\n    [`${resizer}:hover &`]: {\n      backgroundColor: 'var(--pdt-accent)',\n    },\n    [`${resizer}:focus-visible &`]: {\n      backgroundColor: 'var(--pdt-accent)',\n    },\n  },\n});\n\nexport const sidebar = style({\n  flex: '0 0 auto',\n  minWidth: '280px',\n  maxWidth: '90%',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  backgroundColor: 'var(--pdt-surface)',\n  '@media': {\n    'screen and (max-width: 640px)': {\n      flex: '0 0 auto',\n      minHeight: '12rem',\n      minWidth: 0,\n      width: '100% !important',\n      maxWidth: '100%',\n    },\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsSplitView.css.js","names":[],"sources":["../../../src/layout/devtoolsSplitView.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const root = style({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'stretch',\n  minHeight: 0,\n  minWidth: 0,\n  '@media': {\n    'screen and (max-width: 688px)': {\n      flexDirection: 'column',\n      overflow: 'auto',\n    },\n  },\n});\n\nexport const main = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'var(--pdt-surface)',\n  overflow: 'hidden',\n});\n\nexport const mainBordered = style({\n  borderInlineEnd: '1px solid var(--pdt-border)',\n  '@media': {\n    'screen and (max-width: 688px)': {\n      borderInlineEnd: 0,\n      borderBottom: '1px solid var(--pdt-border)',\n    },\n  },\n});\n\nexport const resizer = style({\n  flex: '0 0 8px',\n  position: 'relative',\n  cursor: 'col-resize',\n  backgroundColor: 'transparent',\n  selectors: {\n    '&:focus-visible': {\n      outline: 'none',\n    },\n  },\n  '@media': {\n    'screen and (max-width: 688px)': {\n      display: 'none',\n    },\n  },\n});\n\nexport const resizerLine = style({\n  position: 'absolute',\n  top: 0,\n  bottom: 0,\n  left: '50%',\n  width: '2px',\n  transform: 'translateX(-50%)',\n  borderRadius: '2px',\n  backgroundColor: 'var(--pdt-border)',\n  selectors: {\n    [`${resizer}:hover &`]: {\n      backgroundColor: 'var(--pdt-accent)',\n    },\n    [`${resizer}:focus-visible &`]: {\n      backgroundColor: 'var(--pdt-accent)',\n    },\n  },\n});\n\nexport const sidebar = style({\n  flex: '0 0 auto',\n  minWidth: '280px',\n  maxWidth: '90%',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  backgroundColor: 'var(--pdt-surface)',\n  '@media': {\n    'screen and (max-width: 688px)': {\n      flex: '0 0 auto',\n      minHeight: '12rem',\n      minWidth: 0,\n      width: '100% !important',\n      maxWidth: '100%',\n    },\n  },\n});\n\nglobalStyle(`${root}[data-narrow-mode='detail'] ${main}`, {\n  '@media': {\n    'screen and (max-width: 688px)': {\n      display: 'none',\n    },\n  },\n});\n\nglobalStyle(`${root}[data-narrow-mode='detail'] ${sidebar}`, {\n  '@media': {\n    'screen and (max-width: 688px)': {\n      flex: '1 1 auto',\n      minHeight: 0,\n    },\n  },\n});\n\nglobalStyle(`${resizer}:focus-visible`, {\n  '@media': {\n    '(forced-colors: active)': {\n      outline: '2px solid Highlight',\n      outlineOffset: '-2px',\n      boxShadow: 'none',\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/navigation/DevtoolsTabs.js

@@ -1,21 +1,42 @@
 import { container as e, tab as t, tabSelected as n } from "./devtoolsTabs.css.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/navigation/DevtoolsTabs.tsx
-function i(i) {
-	let { ariaLabel: a, items: o, onSelect: s, selectedId: c } = i;
-	return /* @__PURE__ */ r("div", {
+function i(e, t, n) {
+	switch (e) {
+		case "ArrowLeft": return (t - 1 + n) % n;
+		case "ArrowRight": return (t + 1) % n;
+		case "Home": return 0;
+		case "End": return n - 1;
+		default: return null;
+	}
+}
+function a(e, t, n, r) {
+	let a = i(e.key, t, n.length);
+	if (a === null) return;
+	let o = n[a], s = e.currentTarget.parentElement?.querySelectorAll("[role=\"tab\"]")[a];
+	o !== void 0 && s instanceof HTMLButtonElement && (e.preventDefault(), s.focus(), r(o.id));
+}
+function o(i) {
+	let { ariaLabel: o, items: s, onSelect: c, selectedId: l } = i, u = s.findIndex((e) => e.id === l);
+	return u < 0 && (u = 0), /* @__PURE__ */ r("div", {
 		className: e,
 		role: "tablist",
-		"aria-label": a,
-		children: o.map((e) => {
-			let i = e.id === c, a = t;
-			return i && (a = `${t} ${n}`), /* @__PURE__ */ r("button", {
+		"aria-label": o,
+		children: s.map((e, i) => {
+			let o = e.id === l, d = t;
+			o && (d = `${t} ${n}`);
+			let f = -1;
+			return i === u && (f = 0), /* @__PURE__ */ r("button", {
 				type: "button",
 				role: "tab",
-				"aria-selected": i,
-				className: a,
+				"aria-selected": o,
+				className: d,
+				tabIndex: f,
 				onClick: () => {
-					s(e.id);
+					c(e.id);
+				},
+				onKeyDown: (e) => {
+					a(e, i, s, c);
 				},
 				children: e.label
 			}, e.id);
@@ -23,6 +44,6 @@ function i(i) {
 	});
 }
 //#endregion
-export { i as DevtoolsTabs };
+export { o as DevtoolsTabs };
 
 //# sourceMappingURL=DevtoolsTabs.js.map

package/lib/esm/navigation/DevtoolsTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTabs.js","names":[],"sources":["../../../src/navigation/DevtoolsTabs.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { container, tab, tabSelected } from './devtoolsTabs.css.js';\n\nexport type DevtoolsTabItem = {\n  id: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsTabsProps = {\n  items: readonly DevtoolsTabItem[];\n  selectedId: string;\n  onSelect: (id: string) => void;\n  ariaLabel?: string;\n};\n\n/** Render a simple tab list with controlled selection. */\nexport function DevtoolsTabs(props: DevtoolsTabsProps): JSX.Element {\n  const { ariaLabel, items, onSelect, selectedId } = props;\n\n  return (\n    <div className={container} role=\"tablist\" aria-label={ariaLabel}>\n      {items.map((item) => {\n        const isSelected = item.id === selectedId;\n        let className = tab;\n        if (isSelected) className = `${tab} ${tabSelected}`;\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            className={className}\n            onClick={() => {\n              onSelect(item.id);\n            }}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,cAAW,UAAO,aAAU,kBAAe;CAEnD,OACE,kBAAC,OAAD;EAAK,WAAW;EAAW,MAAK;EAAU,cAAY;EACnD,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAa,EAAK,OAAO,GAC3B,IAAY;GAGhB,OAFI,MAAY,IAAY,GAAG,EAAI,GAAG,MAGpC,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe;IACJ;IACX,eAAe;KACb,EAAS,EAAK,EAAE;IAClB;IAEC,UAAA,EAAK;GACA,GAVD,EAAK,EAUJ;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"DevtoolsTabs.js","names":[],"sources":["../../../src/navigation/DevtoolsTabs.tsx"],"sourcesContent":["import type { JSX, KeyboardEvent, ReactNode } from 'react';\nimport { container, tab, tabSelected } from './devtoolsTabs.css.js';\n\nexport type DevtoolsTabItem = {\n  id: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsTabsProps = {\n  items: readonly DevtoolsTabItem[];\n  selectedId: string;\n  onSelect: (id: string) => void;\n  ariaLabel?: string;\n};\n\n/** Resolve horizontal tab-list navigation with wrapping boundaries. */\nfunction getKeyboardTargetIndex(\n  key: string,\n  currentIndex: number,\n  itemCount: number,\n): number | null {\n  switch (key) {\n    case 'ArrowLeft':\n      return (currentIndex - 1 + itemCount) % itemCount;\n    case 'ArrowRight':\n      return (currentIndex + 1) % itemCount;\n    case 'Home':\n      return 0;\n    case 'End':\n      return itemCount - 1;\n    default:\n      return null;\n  }\n}\n\n/** Move focus and selection together for automatic tab activation. */\nfunction handleTabKeyDown(\n  event: KeyboardEvent<HTMLButtonElement>,\n  currentIndex: number,\n  items: readonly DevtoolsTabItem[],\n  onSelect: (id: string) => void,\n): void {\n  const targetIndex = getKeyboardTargetIndex(\n    event.key,\n    currentIndex,\n    items.length,\n  );\n  if (targetIndex === null) return;\n\n  const targetItem = items[targetIndex];\n  const targetTab =\n    event.currentTarget.parentElement?.querySelectorAll('[role=\"tab\"]')[\n      targetIndex\n    ];\n  if (targetItem === undefined || !(targetTab instanceof HTMLButtonElement)) {\n    return;\n  }\n\n  event.preventDefault();\n  targetTab.focus();\n  onSelect(targetItem.id);\n}\n\n/** Render a simple tab list with controlled selection. */\nexport function DevtoolsTabs(props: DevtoolsTabsProps): JSX.Element {\n  const { ariaLabel, items, onSelect, selectedId } = props;\n  const selectedIndex = items.findIndex((item) => {\n    return item.id === selectedId;\n  });\n  let focusableIndex = selectedIndex;\n  if (focusableIndex < 0) focusableIndex = 0;\n\n  return (\n    <div className={container} role=\"tablist\" aria-label={ariaLabel}>\n      {items.map((item, index) => {\n        const isSelected = item.id === selectedId;\n        let className = tab;\n        if (isSelected) className = `${tab} ${tabSelected}`;\n        let tabIndex = -1;\n        if (index === focusableIndex) tabIndex = 0;\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            className={className}\n            tabIndex={tabIndex}\n            onClick={() => {\n              onSelect(item.id);\n            }}\n            onKeyDown={(event) => {\n              handleTabKeyDown(event, index, items, onSelect);\n            }}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAS,EACP,GACA,GACA,GACe;CACf,QAAQ,GAAR;EACE,KAAK,aACH,QAAQ,IAAe,IAAI,KAAa;EAC1C,KAAK,cACH,QAAQ,IAAe,KAAK;EAC9B,KAAK,QACH,OAAO;EACT,KAAK,OACH,OAAO,IAAY;EACrB,SACE,OAAO;CACX;AACF;AAGA,SAAS,EACP,GACA,GACA,GACA,GACM;CACN,IAAM,IAAc,EAClB,EAAM,KACN,GACA,EAAM,MACR;CACA,IAAI,MAAgB,MAAM;CAE1B,IAAM,IAAa,EAAM,IACnB,IACJ,EAAM,cAAc,eAAe,iBAAiB,gBAAc,CAAC,CACjE;CAEA,MAAe,KAAA,KAAe,aAAqB,sBAIvD,EAAM,eAAe,GACrB,EAAU,MAAM,GAChB,EAAS,EAAW,EAAE;AACxB;AAGA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,cAAW,UAAO,aAAU,kBAAe,GAI/C,IAHkB,EAAM,WAAW,MAC9B,EAAK,OAAO,CAEA;CAGrB,OAFI,IAAiB,MAAG,IAAiB,IAGvC,kBAAC,OAAD;EAAK,WAAW;EAAW,MAAK;EAAU,cAAY;EACnD,UAAA,EAAM,KAAK,GAAM,MAAU;GAC1B,IAAM,IAAa,EAAK,OAAO,GAC3B,IAAY;GAChB,AAAI,MAAY,IAAY,GAAG,EAAI,GAAG;GACtC,IAAI,IAAW;GAGf,OAFI,MAAU,MAAgB,IAAW,IAGvC,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe;IACJ;IACD;IACV,eAAe;KACb,EAAS,EAAK,EAAE;IAClB;IACA,YAAY,MAAU;KACpB,EAAiB,GAAO,GAAO,GAAO,CAAQ;IAChD;IAEC,UAAA,EAAK;GACA,GAdD,EAAK,EAcJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/esm/navigation/devtoolsTabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsTabs.css.js","names":[],"sources":["../../../src/navigation/devtoolsTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  padding: '12px 16px',\n  borderBottom: '1px solid var(--pdt-border)',\n  backgroundColor: 'var(--pdt-surface)',\n});\n\nexport const tab = style({\n  appearance: 'none',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '999px',\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  padding: '6px 16px',\n  fontSize: '12px',\n  cursor: 'pointer',\n  transition: 'background-color 150ms ease, border-color 150ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'var(--pdt-border)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    '&:disabled': {\n      opacity: 0.6,\n      cursor: 'default',\n    },\n  },\n});\n\nexport const tabSelected = style({\n  backgroundColor: 'var(--pdt-accent)',\n  borderColor: 'var(--pdt-accent)',\n  color: 'var(--pdt-on-accent)',\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsTabs.css.js","names":[],"sources":["../../../src/navigation/devtoolsTabs.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 0,\n  height: '28px',\n  padding: '0 4px',\n  borderBottom: '1px solid var(--pdt-border)',\n  backgroundColor: 'var(--pdt-surface)',\n});\n\nexport const tab = style({\n  appearance: 'none',\n  position: 'relative',\n  alignSelf: 'stretch',\n  border: 0,\n  borderRadius: 0,\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text-muted)',\n  padding: '0 10px',\n  fontSize: '12px',\n  lineHeight: '16px',\n  cursor: 'pointer',\n  transition: 'background-color 100ms ease, color 100ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-text) 8%, transparent)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    '&:disabled': {\n      opacity: 0.6,\n      cursor: 'default',\n    },\n  },\n});\n\nexport const tabSelected = style({\n  color: 'var(--pdt-accent)',\n  fontWeight: 600,\n  selectors: {\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      insetInline: '6px',\n      bottom: 0,\n      height: '2px',\n      backgroundColor: 'var(--pdt-accent)',\n    },\n  },\n});\n\nglobalStyle(`${tab}:focus-visible`, {\n  '@media': {\n    '(forced-colors: active)': {\n      outline: '2px solid Highlight',\n      outlineOffset: '-2px',\n      boxShadow: 'none',\n    },\n  },\n});\n\nglobalStyle(`${tabSelected}::after`, {\n  '@media': {\n    '(forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/style.css

@@ -1,2 +1,2 @@
-._1sbiiq0{background-color:var(--pdt-code-bg);white-space:pre-wrap;word-break:break-word;border-radius:6px;margin:0;padding:12px;font-size:12px;line-height:1.4;overflow-x:auto}._83ws9k0{border:1px solid var(--pdt-border);min-height:28px;color:var(--pdt-text);cursor:pointer;background-color:#0000;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:4px 10px;font-size:12px;line-height:1.2;transition:background-color .15s,border-color .15s;display:inline-flex}._83ws9k0:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-accent) 8%, transparent)}._83ws9k0:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._83ws9k0:disabled{opacity:.5;cursor:not-allowed}._83ws9k1{color:var(--pdt-danger)}._83ws9k1:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-danger) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 34%, transparent)}._83ws9k2{min-width:0;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}._83ws9k3{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}._83ws9k4{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-width:0;min-height:28px;color:var(--pdt-text);border-radius:4px;flex:auto;padding:4px 8px;font-size:12px}._83ws9k4:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}@media screen and (width<=520px){._83ws9k2{flex:100%}}.fmw3vj0{flex-direction:column;align-items:flex-start;gap:12px;max-width:420px;padding:24px;display:flex}.fmw3vj1{margin:0;font-size:18px;font-weight:600}.fmw3vj2{color:var(--pdt-text-muted);margin:0;font-size:13px;line-height:1.5}.fmw3vj3{flex-wrap:wrap;align-items:center;gap:12px;display:flex}@keyframes kewyeuj{0%{box-shadow:var(--pdt-diff-flash-start)}to{box-shadow:var(--pdt-diff-flash-end)}}.kewyeu0{white-space:nowrap;background-color:var(--pdt-surface-muted);min-height:20px;color:var(--pdt-text-muted);border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:4px;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu1{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border);color:var(--pdt-text-muted)}.kewyeu2{background-color:color-mix(in srgb, var(--pdt-info) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent);color:var(--pdt-info)}.kewyeu3{background-color:color-mix(in srgb, var(--pdt-success) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent);color:var(--pdt-success)}.kewyeu4{background-color:color-mix(in srgb, var(--pdt-warning) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-warning) 24%, transparent);color:var(--pdt-warning)}.kewyeu5{background-color:color-mix(in srgb, var(--pdt-danger) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 24%, transparent);color:var(--pdt-danger)}.kewyeu6{border:1px solid var(--pdt-border);white-space:nowrap;min-height:20px;color:var(--pdt-text);background-color:#0000;border-radius:999px;align-items:center;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu7{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border)}.kewyeu8{background-color:color-mix(in srgb, var(--pdt-accent) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-accent) 24%, transparent)}.kewyeu9{background-color:color-mix(in srgb, var(--pdt-info) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent)}.kewyeua{background-color:var(--pdt-event-snapshot-bg);border-color:var(--pdt-event-snapshot-border)}.kewyeub{background-color:color-mix(in srgb, var(--pdt-success) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent)}.kewyeuc{background-color:var(--pdt-event-history-bg);border-color:var(--pdt-event-history-border)}.kewyeud{background-color:var(--pdt-event-popstate-bg);border-color:var(--pdt-event-popstate-border)}.kewyeue{background-color:var(--pdt-event-prepare-bg);border-color:var(--pdt-event-prepare-border)}.kewyeuf{min-height:20px;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.kewyeug{background-color:var(--pdt-border);border-radius:50%;width:10px;height:10px}.kewyeuh{background-color:var(--pdt-success);box-shadow:0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)}.kewyeui{background-color:var(--pdt-border);box-shadow:inset 0 0 0 1px var(--pdt-text-muted)}.kewyeuk{flex-wrap:wrap;gap:6px;margin-top:6px;font-size:11px;display:flex}.kewyeul{flex-wrap:wrap;gap:6px;margin-top:0;font-size:11px;display:flex}.kewyeum{border:1px solid #0000;border-radius:999px;padding:2px 8px;font-weight:600}.kewyeun{background-color:var(--pdt-diff-added-bg);border-color:var(--pdt-diff-added-border);color:var(--pdt-diff-added-text)}.kewyeuo{background-color:var(--pdt-diff-changed-bg);border-color:var(--pdt-diff-changed-border);color:var(--pdt-diff-changed-text)}.kewyeup{background-color:var(--pdt-diff-removed-bg);border-color:var(--pdt-diff-removed-border);color:var(--pdt-diff-removed-text)}.kewyeuq{animation:.8s ease-in-out kewyeuj}._11l3mw40{--pdt-bg:#f3f4f6;--pdt-surface:#fff;--pdt-surface-muted:#f8fafc;--pdt-border:#d1d5db;--pdt-border-strong:#9ca3af;--pdt-text:#111827;--pdt-text-muted:#4b5563;--pdt-accent:#2563eb;--pdt-on-accent:#fff;--pdt-info:#0369a1;--pdt-success:#166534;--pdt-warning:#9a3412;--pdt-danger:#b91c1c;--pdt-code-bg:#0f172a0f;--pdt-shadow-focus:0 0 0 2px #2563eb59;--pdt-event-snapshot-bg:#6366f11f;--pdt-event-snapshot-border:#6366f147;--pdt-event-history-bg:#9333ea1f;--pdt-event-history-border:#9333ea47;--pdt-event-popstate-bg:#3b82f61f;--pdt-event-popstate-border:#3b82f647;--pdt-event-prepare-bg:#d977061f;--pdt-event-prepare-border:#d9770647;--pdt-diff-added-bg:#22863a1f;--pdt-diff-added-border:#22863a59;--pdt-diff-added-text:#166534;--pdt-diff-changed-bg:#735c0f1f;--pdt-diff-changed-border:#735c0f59;--pdt-diff-changed-text:#735c0f;--pdt-diff-removed-bg:#cb24311f;--pdt-diff-removed-border:#cb243159;--pdt-diff-removed-text:#b3212c;--pdt-diff-flash-start:0 0 0 0 #2563eb66;--pdt-diff-flash-end:0 0 0 12px #2563eb00;background-color:var(--pdt-bg);color:var(--pdt-text);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}@media (prefers-color-scheme:dark){._11l3mw40{--lightningcss-light: ;--lightningcss-dark:initial}}._11l3mw40,._11l3mw40 *{box-sizing:border-box}._11l3mw40 a{color:var(--pdt-accent)}._11l3mw40 button,._11l3mw40 input,._11l3mw40 select,._11l3mw40 textarea{font:inherit}._11l3mw40 pre,._11l3mw40 code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}@media (prefers-color-scheme:dark){._11l3mw40{--pdt-bg:#1f1f1f;--pdt-surface:#242424;--pdt-surface-muted:#2d2d2d;--pdt-border:#3f3f46;--pdt-border-strong:#52525b;--pdt-text:#f5f5f5;--pdt-text-muted:#a1a1aa;--pdt-accent:#60a5fa;--pdt-on-accent:#08111f;--pdt-info:#38bdf8;--pdt-success:#4ade80;--pdt-warning:#fb923c;--pdt-danger:#f87171;--pdt-code-bg:#94a3b81f;--pdt-shadow-focus:0 0 0 2px #60a5fa59;--pdt-event-snapshot-bg:#818cf82e;--pdt-event-snapshot-border:#818cf857;--pdt-event-history-bg:#c084fc29;--pdt-event-history-border:#c084fc52;--pdt-event-popstate-bg:#60a5fa29;--pdt-event-popstate-border:#60a5fa52;--pdt-event-prepare-bg:#fb923c29;--pdt-event-prepare-border:#fb923c52;--pdt-diff-added-bg:#4ade8029;--pdt-diff-added-border:#4ade8059;--pdt-diff-added-text:#86efac;--pdt-diff-changed-bg:#fbbf2429;--pdt-diff-changed-border:#fbbf2459;--pdt-diff-changed-text:#fde68a;--pdt-diff-removed-bg:#f8717129;--pdt-diff-removed-border:#f8717159;--pdt-diff-removed-text:#fca5a5;--pdt-diff-flash-start:0 0 0 0 #60a5fa73;--pdt-diff-flash-end:0 0 0 12px #60a5fa00}}.ca0gms0{border:1px solid var(--pdt-border);background-color:var(--pdt-surface);border-radius:8px;flex-direction:column;gap:12px;padding:16px;display:flex}.ca0gms1{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms2{margin:0;font-size:14px;font-weight:600}.ca0gms3{flex-direction:column;gap:8px;display:flex}.ca0gms4{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms5{text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:13px;font-weight:600}.ca0gms6{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.ca0gms7{border:1px solid var(--pdt-border);border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.ca0gms8:focus{box-shadow:var(--pdt-shadow-focus);outline:none}.ca0gms9{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ca0gmsa{color:var(--pdt-text-muted);flex-wrap:wrap;gap:12px;font-size:12px;display:flex}.vzai5r0{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:12px 16px;display:flex}.vzai5r1{appearance:none;border:1px solid var(--pdt-border);background-color:var(--pdt-bg);color:var(--pdt-text);cursor:pointer;border-radius:999px;padding:6px 16px;font-size:12px;transition:background-color .15s,border-color .15s}.vzai5r1:hover:not(:disabled){background-color:var(--pdt-border)}.vzai5r1:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.vzai5r1:disabled{opacity:.6;cursor:default}.vzai5r2{background-color:var(--pdt-accent);border-color:var(--pdt-accent);color:var(--pdt-on-accent)}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);flex-wrap:wrap;align-items:center;gap:8px;min-width:0;padding:6px 16px;display:flex;overflow:hidden}._1q96x231{flex:auto;min-width:0}._1q96x232{background-color:var(--pdt-border);width:1px;height:18px}._1q96x233{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-width:0;max-width:100%;min-height:28px;color:var(--pdt-text);cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;transition:background-color .15s,border-color .15s;display:inline-flex}._1q96x233:hover:not(:disabled){background-color:var(--pdt-border)}._1q96x233:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._1q96x233:disabled{opacity:.5;cursor:not-allowed}._1q96x234{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}._1q96x235{background-color:var(--pdt-warning);border-color:var(--pdt-warning);color:var(--pdt-on-accent)}@media screen and (width<=520px){._1q96x230{align-items:stretch;padding:6px 8px}._1q96x233{flex:auto;justify-content:center;padding:4px 8px}}._1m64tse0{flex:1;align-items:stretch;min-width:0;min-height:0;display:flex}._1m64tse1{background-color:var(--pdt-surface);flex-direction:column;flex:auto;min-width:0;display:flex;overflow:hidden}._1m64tse2{border-right:1px solid var(--pdt-border)}._1m64tse3{cursor:col-resize;background-color:#0000;flex:0 0 8px;position:relative}._1m64tse3:focus-visible{outline:none}._1m64tse4{background-color:var(--pdt-border);border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}._1m64tse3:hover ._1m64tse4,._1m64tse3:focus-visible ._1m64tse4{background-color:var(--pdt-accent)}._1m64tse5{background-color:var(--pdt-surface);flex-direction:column;flex:none;min-width:280px;max-width:90%;display:flex;overflow:hidden}@media screen and (width<=640px){._1m64tse0{flex-direction:column;overflow:auto}._1m64tse2{border-right:0;border-bottom:1px solid var(--pdt-border)}._1m64tse3{display:none}._1m64tse5{flex:none;min-width:0;max-width:100%;min-height:12rem;width:100%!important}}
+._1sbiiq0{background-color:var(--pdt-code-bg);white-space:pre-wrap;word-break:break-word;border-radius:4px;margin:0;padding:8px;font-size:12px;line-height:16px;overflow-x:auto}._83ws9k0{border:1px solid var(--pdt-border);min-height:26px;color:var(--pdt-text);cursor:pointer;background-color:#0000;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:3px 8px;font-size:12px;line-height:1.2;transition:background-color .1s,border-color .1s;display:inline-flex}._83ws9k0:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-accent) 8%, transparent)}._83ws9k0:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._83ws9k0:disabled{opacity:.5;cursor:not-allowed}._83ws9k1{color:var(--pdt-danger)}._83ws9k1:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-danger) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 34%, transparent)}._83ws9k2{min-width:0;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}._83ws9k3{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}._83ws9k4{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-width:0;min-height:26px;color:var(--pdt-text);border-radius:4px;flex:auto;padding:3px 6px;font-size:12px}._83ws9k4:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}@media screen and (width<=520px){._83ws9k2{flex:100%}}@media (forced-colors:active){._83ws9k0:focus-visible,._83ws9k4:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}.ifni760{flex-direction:column;gap:16px;min-height:100vh;padding:16px;display:flex}.ifni761{color:var(--pdt-text);margin:0;font-size:18px;font-weight:600;line-height:1.3}.ifni762{color:var(--pdt-text)}.fmw3vj0{flex-direction:column;align-items:flex-start;gap:8px;max-width:420px;padding:16px;display:flex}.fmw3vj1{color:var(--pdt-text);margin:0;font-size:13px;font-weight:600}.fmw3vj2{color:var(--pdt-text-muted);margin:0;font-size:12px;line-height:16px}.fmw3vj3{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@keyframes kewyeuj{0%{box-shadow:var(--pdt-diff-flash-start)}to{box-shadow:var(--pdt-diff-flash-end)}}.kewyeu0{white-space:nowrap;background-color:var(--pdt-surface-muted);min-height:18px;color:var(--pdt-text-muted);border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:4px;padding:1px 6px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu1{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border);color:var(--pdt-text-muted)}.kewyeu2{background-color:color-mix(in srgb, var(--pdt-info) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent);color:var(--pdt-info)}.kewyeu3{background-color:color-mix(in srgb, var(--pdt-success) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent);color:var(--pdt-success)}.kewyeu4{background-color:color-mix(in srgb, var(--pdt-warning) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-warning) 24%, transparent);color:var(--pdt-warning)}.kewyeu5{background-color:color-mix(in srgb, var(--pdt-danger) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 24%, transparent);color:var(--pdt-danger)}.kewyeu6{border:1px solid var(--pdt-border);white-space:nowrap;min-height:18px;color:var(--pdt-text);background-color:#0000;border-radius:4px;align-items:center;padding:1px 6px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu7{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border)}.kewyeu8{background-color:color-mix(in srgb, var(--pdt-accent) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-accent) 24%, transparent)}.kewyeu9{background-color:color-mix(in srgb, var(--pdt-info) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent)}.kewyeua{background-color:var(--pdt-event-snapshot-bg);border-color:var(--pdt-event-snapshot-border)}.kewyeub{background-color:color-mix(in srgb, var(--pdt-success) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent)}.kewyeuc{background-color:var(--pdt-event-history-bg);border-color:var(--pdt-event-history-border)}.kewyeud{background-color:var(--pdt-event-popstate-bg);border-color:var(--pdt-event-popstate-border)}.kewyeue{background-color:var(--pdt-event-prepare-bg);border-color:var(--pdt-event-prepare-border)}.kewyeuf{min-height:18px;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.kewyeug{background-color:var(--pdt-border);border-radius:50%;width:10px;height:10px}.kewyeuh{background-color:var(--pdt-success);box-shadow:0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)}.kewyeui{background-color:var(--pdt-border);box-shadow:inset 0 0 0 1px var(--pdt-text-muted)}.kewyeuk{flex-wrap:wrap;gap:4px;margin-top:4px;font-size:11px;display:flex}.kewyeul{flex-wrap:wrap;gap:4px;margin-top:0;font-size:11px;display:flex}.kewyeum{border:1px solid #0000;border-radius:4px;padding:1px 6px;font-weight:600}.kewyeun{background-color:var(--pdt-diff-added-bg);border-color:var(--pdt-diff-added-border);color:var(--pdt-diff-added-text)}.kewyeuo{background-color:var(--pdt-diff-changed-bg);border-color:var(--pdt-diff-changed-border);color:var(--pdt-diff-changed-text)}.kewyeup{background-color:var(--pdt-diff-removed-bg);border-color:var(--pdt-diff-removed-border);color:var(--pdt-diff-removed-text)}.kewyeuq{animation:.8s ease-in-out kewyeuj}@media (prefers-reduced-motion:reduce){.kewyeuq{animation:none}}._11l3mw40{--pdt-bg:#fff;--pdt-surface:#fff;--pdt-surface-muted:#f1f3f4;--pdt-border:#d3e3fd;--pdt-border-strong:#a8c7fa;--pdt-text:#1f1f1f;--pdt-text-muted:#474747;--pdt-accent:#0b57d0;--pdt-on-accent:#fff;--pdt-info:#00639b;--pdt-success:#137333;--pdt-warning:#b06000;--pdt-danger:#b3261e;--pdt-code-bg:#1f1f1f0f;--pdt-shadow-focus:0 0 0 2px #0b57d059;--pdt-event-snapshot-bg:#6366f11f;--pdt-event-snapshot-border:#6366f147;--pdt-event-history-bg:#9333ea1f;--pdt-event-history-border:#9333ea47;--pdt-event-popstate-bg:#3b82f61f;--pdt-event-popstate-border:#3b82f647;--pdt-event-prepare-bg:#d977061f;--pdt-event-prepare-border:#d9770647;--pdt-diff-added-bg:#22863a1f;--pdt-diff-added-border:#22863a59;--pdt-diff-added-text:#166534;--pdt-diff-changed-bg:#735c0f1f;--pdt-diff-changed-border:#735c0f59;--pdt-diff-changed-text:#735c0f;--pdt-diff-removed-bg:#cb24311f;--pdt-diff-removed-border:#cb243159;--pdt-diff-removed-text:#b3212c;--pdt-diff-flash-start:0 0 0 0 #0b57d066;--pdt-diff-flash-end:0 0 0 12px #0b57d000;background-color:var(--pdt-bg);color:var(--pdt-text);min-height:100%;font-size:12px;line-height:16px}._11l3mw40[data-color-scheme=light]{--pdt-bg:#fff;--pdt-surface:#fff;--pdt-surface-muted:#f1f3f4;--pdt-border:#d3e3fd;--pdt-border-strong:#a8c7fa;--pdt-text:#1f1f1f;--pdt-text-muted:#474747;--pdt-accent:#0b57d0;--pdt-on-accent:#fff;--pdt-info:#00639b;--pdt-success:#137333;--pdt-warning:#b06000;--pdt-danger:#b3261e;--pdt-code-bg:#1f1f1f0f;--pdt-shadow-focus:0 0 0 2px #0b57d059;--pdt-event-snapshot-bg:#6366f11f;--pdt-event-snapshot-border:#6366f147;--pdt-event-history-bg:#9333ea1f;--pdt-event-history-border:#9333ea47;--pdt-event-popstate-bg:#3b82f61f;--pdt-event-popstate-border:#3b82f647;--pdt-event-prepare-bg:#d977061f;--pdt-event-prepare-border:#d9770647;--pdt-diff-added-bg:#22863a1f;--pdt-diff-added-border:#22863a59;--pdt-diff-added-text:#166534;--pdt-diff-changed-bg:#735c0f1f;--pdt-diff-changed-border:#735c0f59;--pdt-diff-changed-text:#735c0f;--pdt-diff-removed-bg:#cb24311f;--pdt-diff-removed-border:#cb243159;--pdt-diff-removed-text:#b3212c;--pdt-diff-flash-start:0 0 0 0 #0b57d066;--pdt-diff-flash-end:0 0 0 12px #0b57d000;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}._11l3mw40[data-color-scheme=dark]{--pdt-bg:#1f1f1f;--pdt-surface:#1f1f1f;--pdt-surface-muted:#292a2d;--pdt-border:#3c4043;--pdt-border-strong:#5f6368;--pdt-text:#e3e3e3;--pdt-text-muted:#c4c7c5;--pdt-accent:#a8c7fa;--pdt-on-accent:#062e6f;--pdt-info:#78d9ec;--pdt-success:#81c995;--pdt-warning:#ffb95c;--pdt-danger:#f2b8b5;--pdt-code-bg:#e3e3e314;--pdt-shadow-focus:0 0 0 2px #a8c7fa66;--pdt-event-snapshot-bg:#818cf82e;--pdt-event-snapshot-border:#818cf857;--pdt-event-history-bg:#c084fc29;--pdt-event-history-border:#c084fc52;--pdt-event-popstate-bg:#60a5fa29;--pdt-event-popstate-border:#60a5fa52;--pdt-event-prepare-bg:#fb923c29;--pdt-event-prepare-border:#fb923c52;--pdt-diff-added-bg:#4ade8029;--pdt-diff-added-border:#4ade8059;--pdt-diff-added-text:#86efac;--pdt-diff-changed-bg:#fbbf2429;--pdt-diff-changed-border:#fbbf2459;--pdt-diff-changed-text:#fde68a;--pdt-diff-removed-bg:#f8717129;--pdt-diff-removed-border:#f8717159;--pdt-diff-removed-text:#fca5a5;--pdt-diff-flash-start:0 0 0 0 #a8c7fa73;--pdt-diff-flash-end:0 0 0 12px #a8c7fa00;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}._11l3mw40:not([data-color-scheme]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){._11l3mw40:not([data-color-scheme]){--lightningcss-light: ;--lightningcss-dark:initial}}._11l3mw40{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}._11l3mw40,._11l3mw40 *{box-sizing:border-box}._11l3mw40 a{color:var(--pdt-accent)}._11l3mw40 button,._11l3mw40 input,._11l3mw40 select,._11l3mw40 textarea{font:inherit}._11l3mw40 pre,._11l3mw40 code{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}@media (prefers-color-scheme:dark){._11l3mw40{--pdt-bg:#1f1f1f;--pdt-surface:#1f1f1f;--pdt-surface-muted:#292a2d;--pdt-border:#3c4043;--pdt-border-strong:#5f6368;--pdt-text:#e3e3e3;--pdt-text-muted:#c4c7c5;--pdt-accent:#a8c7fa;--pdt-on-accent:#062e6f;--pdt-info:#78d9ec;--pdt-success:#81c995;--pdt-warning:#ffb95c;--pdt-danger:#f2b8b5;--pdt-code-bg:#e3e3e314;--pdt-shadow-focus:0 0 0 2px #a8c7fa66;--pdt-event-snapshot-bg:#818cf82e;--pdt-event-snapshot-border:#818cf857;--pdt-event-history-bg:#c084fc29;--pdt-event-history-border:#c084fc52;--pdt-event-popstate-bg:#60a5fa29;--pdt-event-popstate-border:#60a5fa52;--pdt-event-prepare-bg:#fb923c29;--pdt-event-prepare-border:#fb923c52;--pdt-diff-added-bg:#4ade8029;--pdt-diff-added-border:#4ade8059;--pdt-diff-added-text:#86efac;--pdt-diff-changed-bg:#fbbf2429;--pdt-diff-changed-border:#fbbf2459;--pdt-diff-changed-text:#fde68a;--pdt-diff-removed-bg:#f8717129;--pdt-diff-removed-border:#f8717159;--pdt-diff-removed-text:#fca5a5;--pdt-diff-flash-start:0 0 0 0 #a8c7fa73;--pdt-diff-flash-end:0 0 0 12px #a8c7fa00}._11l3mw40[data-color-scheme=light]{--pdt-bg:#fff;--pdt-surface:#fff;--pdt-surface-muted:#f1f3f4;--pdt-border:#d3e3fd;--pdt-border-strong:#a8c7fa;--pdt-text:#1f1f1f;--pdt-text-muted:#474747;--pdt-accent:#0b57d0;--pdt-on-accent:#fff;--pdt-info:#00639b;--pdt-success:#137333;--pdt-warning:#b06000;--pdt-danger:#b3261e;--pdt-code-bg:#1f1f1f0f;--pdt-shadow-focus:0 0 0 2px #0b57d059;--pdt-event-snapshot-bg:#6366f11f;--pdt-event-snapshot-border:#6366f147;--pdt-event-history-bg:#9333ea1f;--pdt-event-history-border:#9333ea47;--pdt-event-popstate-bg:#3b82f61f;--pdt-event-popstate-border:#3b82f647;--pdt-event-prepare-bg:#d977061f;--pdt-event-prepare-border:#d9770647;--pdt-diff-added-bg:#22863a1f;--pdt-diff-added-border:#22863a59;--pdt-diff-added-text:#166534;--pdt-diff-changed-bg:#735c0f1f;--pdt-diff-changed-border:#735c0f59;--pdt-diff-changed-text:#735c0f;--pdt-diff-removed-bg:#cb24311f;--pdt-diff-removed-border:#cb243159;--pdt-diff-removed-text:#b3212c;--pdt-diff-flash-start:0 0 0 0 #0b57d066;--pdt-diff-flash-end:0 0 0 12px #0b57d000}}@media (prefers-color-scheme:light){._11l3mw40[data-color-scheme=dark]{--pdt-bg:#1f1f1f;--pdt-surface:#1f1f1f;--pdt-surface-muted:#292a2d;--pdt-border:#3c4043;--pdt-border-strong:#5f6368;--pdt-text:#e3e3e3;--pdt-text-muted:#c4c7c5;--pdt-accent:#a8c7fa;--pdt-on-accent:#062e6f;--pdt-info:#78d9ec;--pdt-success:#81c995;--pdt-warning:#ffb95c;--pdt-danger:#f2b8b5;--pdt-code-bg:#e3e3e314;--pdt-shadow-focus:0 0 0 2px #a8c7fa66;--pdt-event-snapshot-bg:#818cf82e;--pdt-event-snapshot-border:#818cf857;--pdt-event-history-bg:#c084fc29;--pdt-event-history-border:#c084fc52;--pdt-event-popstate-bg:#60a5fa29;--pdt-event-popstate-border:#60a5fa52;--pdt-event-prepare-bg:#fb923c29;--pdt-event-prepare-border:#fb923c52;--pdt-diff-added-bg:#4ade8029;--pdt-diff-added-border:#4ade8059;--pdt-diff-added-text:#86efac;--pdt-diff-changed-bg:#fbbf2429;--pdt-diff-changed-border:#fbbf2459;--pdt-diff-changed-text:#fde68a;--pdt-diff-removed-bg:#f8717129;--pdt-diff-removed-border:#f8717159;--pdt-diff-removed-text:#fca5a5;--pdt-diff-flash-start:0 0 0 0 #a8c7fa73;--pdt-diff-flash-end:0 0 0 12px #a8c7fa00}}@media (prefers-reduced-motion:reduce){._11l3mw40 *{scroll-behavior:auto;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.ca0gms0{border:1px solid var(--pdt-border);background-color:var(--pdt-surface);border-radius:4px;flex-direction:column;gap:8px;padding:12px;display:flex}.ca0gms1{justify-content:space-between;align-items:center;gap:8px;display:flex}.ca0gms2{color:var(--pdt-text);margin:0;font-size:12px;font-weight:600}.ca0gms3{flex-direction:column;gap:6px;display:flex}.ca0gms4{justify-content:space-between;align-items:center;gap:8px;display:flex}.ca0gms5{color:var(--pdt-text);margin:0;font-size:12px;font-weight:600}.ca0gms6{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.ca0gms7{border:1px solid var(--pdt-border);color:var(--pdt-text);border-radius:4px;flex-direction:column;gap:4px;padding:8px;display:flex}.ca0gms7>p{color:var(--pdt-text)}.ca0gms8:focus{box-shadow:var(--pdt-shadow-focus);outline:none}.ca0gms9{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ca0gmsa{color:var(--pdt-text-muted);flex-wrap:wrap;gap:8px;font-size:12px;display:flex}@media (forced-colors:active){.ca0gms8:focus{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}.vzai5r0{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:0;height:28px;padding:0 4px;display:flex}.vzai5r1{appearance:none;color:var(--pdt-text-muted);cursor:pointer;background-color:#0000;border:0;border-radius:0;align-self:stretch;padding:0 10px;font-size:12px;line-height:16px;transition:background-color .1s,color .1s;position:relative}.vzai5r1:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-text) 8%, transparent)}.vzai5r1:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.vzai5r1:disabled{opacity:.6;cursor:default}.vzai5r2{color:var(--pdt-accent);font-weight:600}.vzai5r2:after{content:"";inset-inline:6px;background-color:var(--pdt-accent);height:2px;position:absolute;bottom:0}@media (forced-colors:active){.vzai5r1:focus-visible{outline-offset:-2px;box-shadow:none;outline:2px solid highlight}.vzai5r2:after{background-color:highlight}}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);flex-wrap:nowrap;align-items:center;gap:2px;min-width:0;height:27px;padding:0 4px;display:flex;overflow:hidden}._1q96x231{flex:auto;min-width:0}._1q96x232{background-color:var(--pdt-border);flex:0 0 1px;width:1px;height:17px;margin:0 2px}._1q96x233{min-width:26px;max-width:100%;height:26px;color:var(--pdt-text);cursor:pointer;background-color:#0000;border:0;border-radius:2px;flex:none;justify-content:center;align-items:center;gap:4px;padding:0 6px;font-size:12px;line-height:16px;transition:background-color .1s;display:inline-flex}._1q96x233:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-text) 10%, transparent)}._1q96x233:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._1q96x233[data-active=true]{background-color:color-mix(in srgb, var(--pdt-accent) 18%, transparent);color:var(--pdt-accent)}._1q96x233[data-presentation=icon]{width:26px;padding:0}._1q96x233:disabled{opacity:.5;cursor:not-allowed}._1q96x233>svg{fill:currentColor;flex:none;width:16px;height:16px}._1q96x234{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}._1q96x233[data-presentation=icon] ._1q96x234{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (forced-colors:active){._1q96x233:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}._1m64tse0{flex:1;align-items:stretch;min-width:0;min-height:0;display:flex}._1m64tse1{background-color:var(--pdt-surface);flex-direction:column;flex:auto;min-width:0;display:flex;overflow:hidden}._1m64tse2{border-inline-end:1px solid var(--pdt-border)}._1m64tse3{cursor:col-resize;background-color:#0000;flex:0 0 8px;position:relative}._1m64tse3:focus-visible{outline:none}._1m64tse4{background-color:var(--pdt-border);border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}._1m64tse3:hover ._1m64tse4,._1m64tse3:focus-visible ._1m64tse4{background-color:var(--pdt-accent)}._1m64tse5{background-color:var(--pdt-surface);flex-direction:column;flex:none;min-width:280px;max-width:90%;display:flex;overflow:hidden}@media screen and (width<=688px){._1m64tse0{flex-direction:column;overflow:auto}._1m64tse2{border-inline-end:0;border-bottom:1px solid var(--pdt-border)}._1m64tse3{display:none}._1m64tse5{flex:none;min-width:0;max-width:100%;min-height:12rem;width:100%!important}._1m64tse0[data-narrow-mode=detail] ._1m64tse1{display:none}._1m64tse0[data-narrow-mode=detail] ._1m64tse5{flex:auto;min-height:0}}@media (forced-colors:active){._1m64tse3:focus-visible{outline-offset:-2px;box-shadow:none;outline:2px solid highlight}}
 /*$vite$:1*/

package/lib/esm/surfaces/devtoolsSurfaces.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsSurfaces.css.js","names":[],"sources":["../../../src/surfaces/devtoolsSurfaces.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '12px',\n  padding: '16px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '8px',\n  backgroundColor: 'var(--pdt-surface)',\n});\n\nexport const cardHeader = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '12px',\n});\n\nexport const cardTitle = style({\n  margin: 0,\n  fontSize: '14px',\n  fontWeight: 600,\n});\n\nexport const section = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px',\n});\n\nexport const sectionHeader = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '12px',\n});\n\nexport const sectionTitle = style({\n  margin: 0,\n  fontSize: '13px',\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  letterSpacing: '0.04em',\n});\n\nexport const list = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px',\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n});\n\nexport const listItem = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px',\n  padding: '12px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '8px',\n});\n\nexport const listItemInteractive = style({\n  selectors: {\n    '&:focus': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n  },\n});\n\nexport const listItemHeader = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: '8px',\n});\n\nexport const listItemMeta = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsSurfaces.css.js","names":[],"sources":["../../../src/surfaces/devtoolsSurfaces.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px',\n  padding: '12px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'var(--pdt-surface)',\n});\n\nexport const cardHeader = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '8px',\n});\n\nexport const cardTitle = style({\n  margin: 0,\n  fontSize: '12px',\n  fontWeight: 600,\n  color: 'var(--pdt-text)',\n});\n\nexport const section = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '6px',\n});\n\nexport const sectionHeader = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '8px',\n});\n\nexport const sectionTitle = style({\n  margin: 0,\n  fontSize: '12px',\n  fontWeight: 600,\n  color: 'var(--pdt-text)',\n});\n\nexport const list = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '4px',\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n});\n\nexport const listItem = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '4px',\n  padding: '8px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  color: 'var(--pdt-text)',\n});\n\nglobalStyle(`${listItem} > p`, {\n  color: 'var(--pdt-text)',\n});\n\nexport const listItemInteractive = style({\n  selectors: {\n    '&:focus': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n  },\n});\n\nglobalStyle(`${listItemInteractive}:focus`, {\n  '@media': {\n    '(forced-colors: active)': {\n      outline: '2px solid Highlight',\n      outlineOffset: '2px',\n      boxShadow: 'none',\n    },\n  },\n});\n\nexport const listItemHeader = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: '6px',\n});\n\nexport const listItemMeta = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '8px',\n  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n});\n"],"mappings":""}

package/lib/esm/theme/DevtoolsTheme.js

@@ -2,9 +2,10 @@ import { root as e } from "./devtoolsTheme.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/theme/DevtoolsTheme.tsx
 function n(n) {
-	let { children: r } = n;
+	let { children: r, colorScheme: i } = n;
 	return /* @__PURE__ */ t("div", {
 		className: e,
+		"data-color-scheme": i,
 		children: r
 	});
 }

package/lib/esm/theme/DevtoolsTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTheme.js","names":[],"sources":["../../../src/theme/DevtoolsTheme.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { root } from './devtoolsTheme.css.js';\n\nexport type DevtoolsThemeProps = PropsWithChildren;\n\n/** Provide the root devtools theme wrapper. */\nexport function DevtoolsTheme(props: DevtoolsThemeProps): JSX.Element {\n  const { children } = props;\n\n  return <div className={root}>{children}</div>;\n}\n"],"mappings":";;;AAMA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,gBAAa;CAErB,OAAO,kBAAC,OAAD;EAAK,WAAW;EAAO;CAAc,CAAA;AAC9C"}
+{"version":3,"file":"DevtoolsTheme.js","names":[],"sources":["../../../src/theme/DevtoolsTheme.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { root } from './devtoolsTheme.css.js';\n\nexport type DevtoolsColorScheme = 'light' | 'dark';\n\nexport type DevtoolsThemeProps = PropsWithChildren<{\n  /** Force the DevTools palette. Omit to follow the operating-system scheme. */\n  colorScheme?: DevtoolsColorScheme;\n}>;\n\n/** Provide the root devtools theme wrapper. */\nexport function DevtoolsTheme(props: DevtoolsThemeProps): JSX.Element {\n  const { children, colorScheme } = props;\n\n  return (\n    <div className={root} data-color-scheme={colorScheme}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAWA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,aAAU,mBAAgB;CAElC,OACE,kBAAC,OAAD;EAAK,WAAW;EAAM,qBAAmB;EACtC;CACE,CAAA;AAET"}

package/lib/esm/theme/devtoolsTheme.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsTheme.css.js","names":[],"sources":["../../../src/theme/devtoolsTheme.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const root = style({\n  vars: {\n    '--pdt-bg': '#f3f4f6',\n    '--pdt-surface': '#ffffff',\n    '--pdt-surface-muted': '#f8fafc',\n    '--pdt-border': '#d1d5db',\n    '--pdt-border-strong': '#9ca3af',\n    '--pdt-text': '#111827',\n    '--pdt-text-muted': '#4b5563',\n    '--pdt-accent': '#2563eb',\n    '--pdt-on-accent': '#ffffff',\n    '--pdt-info': '#0369a1',\n    '--pdt-success': '#166534',\n    '--pdt-warning': '#9a3412',\n    '--pdt-danger': '#b91c1c',\n    '--pdt-code-bg': 'rgba(15, 23, 42, 0.06)',\n    '--pdt-shadow-focus': '0 0 0 2px rgba(37, 99, 235, 0.35)',\n    '--pdt-event-snapshot-bg': 'rgba(99, 102, 241, 0.12)',\n    '--pdt-event-snapshot-border': 'rgba(99, 102, 241, 0.28)',\n    '--pdt-event-history-bg': 'rgba(147, 51, 234, 0.12)',\n    '--pdt-event-history-border': 'rgba(147, 51, 234, 0.28)',\n    '--pdt-event-popstate-bg': 'rgba(59, 130, 246, 0.12)',\n    '--pdt-event-popstate-border': 'rgba(59, 130, 246, 0.28)',\n    '--pdt-event-prepare-bg': 'rgba(217, 119, 6, 0.12)',\n    '--pdt-event-prepare-border': 'rgba(217, 119, 6, 0.28)',\n    '--pdt-diff-added-bg': 'rgba(34, 134, 58, 0.12)',\n    '--pdt-diff-added-border': 'rgba(34, 134, 58, 0.35)',\n    '--pdt-diff-added-text': '#166534',\n    '--pdt-diff-changed-bg': 'rgba(115, 92, 15, 0.12)',\n    '--pdt-diff-changed-border': 'rgba(115, 92, 15, 0.35)',\n    '--pdt-diff-changed-text': '#735c0f',\n    '--pdt-diff-removed-bg': 'rgba(203, 36, 49, 0.12)',\n    '--pdt-diff-removed-border': 'rgba(203, 36, 49, 0.35)',\n    '--pdt-diff-removed-text': '#b3212c',\n    '--pdt-diff-flash-start': '0 0 0 0 rgba(37, 99, 235, 0.4)',\n    '--pdt-diff-flash-end': '0 0 0 12px rgba(37, 99, 235, 0)',\n  },\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  minHeight: '100vh',\n});\n\nglobalStyle(`${root}`, {\n  colorScheme: 'light dark',\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n});\n\nglobalStyle(`${root}, ${root} *`, {\n  boxSizing: 'border-box',\n});\n\nglobalStyle(`${root} a`, {\n  color: 'var(--pdt-accent)',\n});\n\nglobalStyle(`${root} button, ${root} input, ${root} select, ${root} textarea`, {\n  font: 'inherit',\n});\n\nglobalStyle(`${root} pre, ${root} code`, {\n  fontFamily:\n    '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace',\n});\n\nglobalStyle(`${root}`, {\n  '@media': {\n    '(prefers-color-scheme: dark)': {\n      vars: {\n        '--pdt-bg': '#1f1f1f',\n        '--pdt-surface': '#242424',\n        '--pdt-surface-muted': '#2d2d2d',\n        '--pdt-border': '#3f3f46',\n        '--pdt-border-strong': '#52525b',\n        '--pdt-text': '#f5f5f5',\n        '--pdt-text-muted': '#a1a1aa',\n        '--pdt-accent': '#60a5fa',\n        '--pdt-on-accent': '#08111f',\n        '--pdt-info': '#38bdf8',\n        '--pdt-success': '#4ade80',\n        '--pdt-warning': '#fb923c',\n        '--pdt-danger': '#f87171',\n        '--pdt-code-bg': 'rgba(148, 163, 184, 0.12)',\n        '--pdt-shadow-focus': '0 0 0 2px rgba(96, 165, 250, 0.35)',\n        '--pdt-event-snapshot-bg': 'rgba(129, 140, 248, 0.18)',\n        '--pdt-event-snapshot-border': 'rgba(129, 140, 248, 0.34)',\n        '--pdt-event-history-bg': 'rgba(192, 132, 252, 0.16)',\n        '--pdt-event-history-border': 'rgba(192, 132, 252, 0.32)',\n        '--pdt-event-popstate-bg': 'rgba(96, 165, 250, 0.16)',\n        '--pdt-event-popstate-border': 'rgba(96, 165, 250, 0.32)',\n        '--pdt-event-prepare-bg': 'rgba(251, 146, 60, 0.16)',\n        '--pdt-event-prepare-border': 'rgba(251, 146, 60, 0.32)',\n        '--pdt-diff-added-bg': 'rgba(74, 222, 128, 0.16)',\n        '--pdt-diff-added-border': 'rgba(74, 222, 128, 0.35)',\n        '--pdt-diff-added-text': '#86efac',\n        '--pdt-diff-changed-bg': 'rgba(251, 191, 36, 0.16)',\n        '--pdt-diff-changed-border': 'rgba(251, 191, 36, 0.35)',\n        '--pdt-diff-changed-text': '#fde68a',\n        '--pdt-diff-removed-bg': 'rgba(248, 113, 113, 0.16)',\n        '--pdt-diff-removed-border': 'rgba(248, 113, 113, 0.35)',\n        '--pdt-diff-removed-text': '#fca5a5',\n        '--pdt-diff-flash-start': '0 0 0 0 rgba(96, 165, 250, 0.45)',\n        '--pdt-diff-flash-end': '0 0 0 12px rgba(96, 165, 250, 0)',\n      },\n    },\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsTheme.css.js","names":[],"sources":["../../../src/theme/devtoolsTheme.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nconst lightTheme = {\n  '--pdt-bg': '#ffffff',\n  '--pdt-surface': '#ffffff',\n  '--pdt-surface-muted': '#f1f3f4',\n  '--pdt-border': '#d3e3fd',\n  '--pdt-border-strong': '#a8c7fa',\n  '--pdt-text': '#1f1f1f',\n  '--pdt-text-muted': '#474747',\n  '--pdt-accent': '#0b57d0',\n  '--pdt-on-accent': '#ffffff',\n  '--pdt-info': '#00639b',\n  '--pdt-success': '#137333',\n  '--pdt-warning': '#b06000',\n  '--pdt-danger': '#b3261e',\n  '--pdt-code-bg': 'rgba(31, 31, 31, 0.06)',\n  '--pdt-shadow-focus': '0 0 0 2px rgba(11, 87, 208, 0.35)',\n  '--pdt-event-snapshot-bg': 'rgba(99, 102, 241, 0.12)',\n  '--pdt-event-snapshot-border': 'rgba(99, 102, 241, 0.28)',\n  '--pdt-event-history-bg': 'rgba(147, 51, 234, 0.12)',\n  '--pdt-event-history-border': 'rgba(147, 51, 234, 0.28)',\n  '--pdt-event-popstate-bg': 'rgba(59, 130, 246, 0.12)',\n  '--pdt-event-popstate-border': 'rgba(59, 130, 246, 0.28)',\n  '--pdt-event-prepare-bg': 'rgba(217, 119, 6, 0.12)',\n  '--pdt-event-prepare-border': 'rgba(217, 119, 6, 0.28)',\n  '--pdt-diff-added-bg': 'rgba(34, 134, 58, 0.12)',\n  '--pdt-diff-added-border': 'rgba(34, 134, 58, 0.35)',\n  '--pdt-diff-added-text': '#166534',\n  '--pdt-diff-changed-bg': 'rgba(115, 92, 15, 0.12)',\n  '--pdt-diff-changed-border': 'rgba(115, 92, 15, 0.35)',\n  '--pdt-diff-changed-text': '#735c0f',\n  '--pdt-diff-removed-bg': 'rgba(203, 36, 49, 0.12)',\n  '--pdt-diff-removed-border': 'rgba(203, 36, 49, 0.35)',\n  '--pdt-diff-removed-text': '#b3212c',\n  '--pdt-diff-flash-start': '0 0 0 0 rgba(11, 87, 208, 0.4)',\n  '--pdt-diff-flash-end': '0 0 0 12px rgba(11, 87, 208, 0)',\n};\n\nconst darkTheme = {\n  '--pdt-bg': '#1f1f1f',\n  '--pdt-surface': '#1f1f1f',\n  '--pdt-surface-muted': '#292a2d',\n  '--pdt-border': '#3c4043',\n  '--pdt-border-strong': '#5f6368',\n  '--pdt-text': '#e3e3e3',\n  '--pdt-text-muted': '#c4c7c5',\n  '--pdt-accent': '#a8c7fa',\n  '--pdt-on-accent': '#062e6f',\n  '--pdt-info': '#78d9ec',\n  '--pdt-success': '#81c995',\n  '--pdt-warning': '#ffb95c',\n  '--pdt-danger': '#f2b8b5',\n  '--pdt-code-bg': 'rgba(227, 227, 227, 0.08)',\n  '--pdt-shadow-focus': '0 0 0 2px rgba(168, 199, 250, 0.4)',\n  '--pdt-event-snapshot-bg': 'rgba(129, 140, 248, 0.18)',\n  '--pdt-event-snapshot-border': 'rgba(129, 140, 248, 0.34)',\n  '--pdt-event-history-bg': 'rgba(192, 132, 252, 0.16)',\n  '--pdt-event-history-border': 'rgba(192, 132, 252, 0.32)',\n  '--pdt-event-popstate-bg': 'rgba(96, 165, 250, 0.16)',\n  '--pdt-event-popstate-border': 'rgba(96, 165, 250, 0.32)',\n  '--pdt-event-prepare-bg': 'rgba(251, 146, 60, 0.16)',\n  '--pdt-event-prepare-border': 'rgba(251, 146, 60, 0.32)',\n  '--pdt-diff-added-bg': 'rgba(74, 222, 128, 0.16)',\n  '--pdt-diff-added-border': 'rgba(74, 222, 128, 0.35)',\n  '--pdt-diff-added-text': '#86efac',\n  '--pdt-diff-changed-bg': 'rgba(251, 191, 36, 0.16)',\n  '--pdt-diff-changed-border': 'rgba(251, 191, 36, 0.35)',\n  '--pdt-diff-changed-text': '#fde68a',\n  '--pdt-diff-removed-bg': 'rgba(248, 113, 113, 0.16)',\n  '--pdt-diff-removed-border': 'rgba(248, 113, 113, 0.35)',\n  '--pdt-diff-removed-text': '#fca5a5',\n  '--pdt-diff-flash-start': '0 0 0 0 rgba(168, 199, 250, 0.45)',\n  '--pdt-diff-flash-end': '0 0 0 12px rgba(168, 199, 250, 0)',\n};\n\nexport const root = style({\n  vars: lightTheme,\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  minHeight: '100%',\n  fontSize: '12px',\n  lineHeight: '16px',\n  '@media': {\n    '(prefers-color-scheme: dark)': {\n      vars: darkTheme,\n    },\n  },\n});\n\nglobalStyle(`${root}[data-color-scheme='light']`, {\n  vars: lightTheme,\n  colorScheme: 'light',\n  '@media': {\n    '(prefers-color-scheme: dark)': {\n      vars: lightTheme,\n    },\n  },\n});\n\nglobalStyle(`${root}[data-color-scheme='dark']`, {\n  vars: darkTheme,\n  colorScheme: 'dark',\n  '@media': {\n    '(prefers-color-scheme: light)': {\n      vars: darkTheme,\n    },\n  },\n});\n\nglobalStyle(`${root}:not([data-color-scheme])`, {\n  colorScheme: 'light dark',\n});\n\nglobalStyle(`${root}`, {\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n});\n\nglobalStyle(`${root}, ${root} *`, {\n  boxSizing: 'border-box',\n});\n\nglobalStyle(`${root} a`, {\n  color: 'var(--pdt-accent)',\n});\n\nglobalStyle(`${root} button, ${root} input, ${root} select, ${root} textarea`, {\n  font: 'inherit',\n});\n\nglobalStyle(`${root} pre, ${root} code`, {\n  fontFamily:\n    'ui-monospace, \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace',\n});\n\nglobalStyle(`${root} *`, {\n  '@media': {\n    '(prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms !important',\n      animationIterationCount: '1 !important',\n      scrollBehavior: 'auto',\n      transitionDuration: '0.01ms !important',\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/toolbar/DevtoolsToolbarButton.js

@@ -1,22 +1,24 @@
-import { button as e, buttonActive as t, buttonLabel as n } from "./devtoolsToolbar.css.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { button as e, buttonLabel as t } from "./devtoolsToolbar.css.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/toolbar/DevtoolsToolbarButton.tsx
-function a(a) {
-	let { active: o = !1, disabled: s, icon: c, label: l, onClick: u, pressed: d, title: f } = a, p = e;
-	return o && (p = `${e} ${t}`), /* @__PURE__ */ i("button", {
+function i(i) {
+	let { active: a = !1, disabled: o, icon: s, label: c, onClick: l, presentation: u = "label", pressed: d, title: f } = i;
+	return /* @__PURE__ */ r("button", {
 		type: "button",
-		className: p,
-		disabled: s,
+		className: e,
+		"data-active": a || void 0,
+		"data-presentation": u,
+		disabled: o,
 		title: f,
 		"aria-pressed": d,
-		onClick: u,
-		children: [c ?? null, /* @__PURE__ */ r("span", {
-			className: n,
-			children: l
+		onClick: l,
+		children: [s ?? null, /* @__PURE__ */ n("span", {
+			className: t,
+			children: c
 		})]
 	});
 }
 //#endregion
-export { a as DevtoolsToolbarButton };
+export { i as DevtoolsToolbarButton };
 
 //# sourceMappingURL=DevtoolsToolbarButton.js.map

package/lib/esm/toolbar/DevtoolsToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsToolbarButton.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { button, buttonActive, buttonLabel } from './devtoolsToolbar.css.js';\n\nexport type DevtoolsToolbarButtonProps = {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  active?: boolean;\n  title?: string;\n  icon?: ReactNode;\n  pressed?: boolean;\n};\n\n/** Render a toolbar button with optional active and pressed states. */\nexport function DevtoolsToolbarButton(\n  props: DevtoolsToolbarButtonProps,\n): JSX.Element {\n  const {\n    active = false,\n    disabled,\n    icon,\n    label,\n    onClick,\n    pressed,\n    title,\n  } = props;\n\n  let className = button;\n  if (active) {\n    className = `${button} ${buttonActive}`;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      disabled={disabled}\n      title={title}\n      aria-pressed={pressed}\n      onClick={onClick}\n    >\n      {icon ?? null}\n      <span className={buttonLabel}>{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;AAcA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,YAAS,IACT,aACA,SACA,UACA,YACA,YACA,aACE,GAEA,IAAY;CAKhB,OAJI,MACF,IAAY,GAAG,EAAO,GAAG,MAIzB,kBAAC,UAAD;EACE,MAAK;EACM;EACD;EACH;EACP,gBAAc;EACL;EANX,UAAA,CAQG,KAAQ,MACT,kBAAC,QAAD;GAAM,WAAW;GAAc,UAAA;EAAY,CAAA,CACrC;;AAEZ"}
+{"version":3,"file":"DevtoolsToolbarButton.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { button, buttonLabel } from './devtoolsToolbar.css.js';\n\ntype DevtoolsToolbarButtonCommonProps = {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  active?: boolean;\n  pressed?: boolean;\n};\n\nexport type DevtoolsToolbarButtonProps = DevtoolsToolbarButtonCommonProps &\n  (\n    | {\n        presentation?: 'label';\n        title?: string;\n        icon?: ReactNode;\n      }\n    | {\n        presentation: 'icon';\n        title: string;\n        icon: ReactNode;\n      }\n  );\n\n/** Render a toolbar button with optional active and pressed states. */\nexport function DevtoolsToolbarButton(\n  props: DevtoolsToolbarButtonProps,\n): JSX.Element {\n  const {\n    active = false,\n    disabled,\n    icon,\n    label,\n    onClick,\n    presentation = 'label',\n    pressed,\n    title,\n  } = props;\n\n  return (\n    <button\n      type=\"button\"\n      className={button}\n      data-active={active || undefined}\n      data-presentation={presentation}\n      disabled={disabled}\n      title={title}\n      aria-pressed={pressed}\n      onClick={onClick}\n    >\n      {icon ?? null}\n      <span className={buttonLabel}>{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;AA0BA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,YAAS,IACT,aACA,SACA,UACA,YACA,kBAAe,SACf,YACA,aACE;CAEJ,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,eAAa,KAAU,KAAA;EACvB,qBAAmB;EACT;EACH;EACP,gBAAc;EACL;EARX,UAAA,CAUG,KAAQ,MACT,kBAAC,QAAD;GAAM,WAAW;GAAc,UAAA;EAAY,CAAA,CACrC;;AAEZ"}

package/lib/esm/toolbar/devtoolsToolbar.css.js

@@ -1,7 +1,7 @@
 /* empty css                               */
 //#region src/toolbar/devtoolsToolbar.css.ts
-var e = "_1q96x230", t = "_1q96x231", n = "_1q96x232", r = "_1q96x233", i = "_1q96x234", a = "_1q96x235";
+var e = "_1q96x230", t = "_1q96x231", n = "_1q96x232", r = "_1q96x233", i = "_1q96x234";
 //#endregion
-export { r as button, a as buttonActive, i as buttonLabel, t as grow, n as separator, e as toolbar };
+export { r as button, i as buttonLabel, t as grow, n as separator, e as toolbar };
 
 //# sourceMappingURL=devtoolsToolbar.css.js.map

package/lib/esm/toolbar/devtoolsToolbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsToolbar.css.js","names":[],"sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const toolbar = style({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: '8px',\n  padding: '6px 16px',\n  borderBottom: '1px solid var(--pdt-border)',\n  backgroundColor: 'var(--pdt-surface)',\n  minWidth: 0,\n  overflow: 'hidden',\n  '@media': {\n    'screen and (max-width: 520px)': {\n      alignItems: 'stretch',\n      padding: '6px 8px',\n    },\n  },\n});\n\nexport const grow = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n});\n\nexport const separator = style({\n  width: '1px',\n  height: '18px',\n  backgroundColor: 'var(--pdt-border)',\n});\n\nexport const button = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  maxWidth: '100%',\n  minHeight: '28px',\n  minWidth: 0,\n  padding: '4px 12px',\n  border: '1px solid var(--pdt-border)',\n  borderRadius: '4px',\n  backgroundColor: 'var(--pdt-bg)',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  cursor: 'pointer',\n  transition: 'background-color 150ms ease, border-color 150ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'var(--pdt-border)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    '&:disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  },\n  '@media': {\n    'screen and (max-width: 520px)': {\n      flex: '1 1 auto',\n      justifyContent: 'center',\n      padding: '4px 8px',\n    },\n  },\n});\n\nexport const buttonLabel = style({\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const buttonActive = style({\n  backgroundColor: 'var(--pdt-warning)',\n  borderColor: 'var(--pdt-warning)',\n  color: 'var(--pdt-on-accent)',\n});\n"],"mappings":""}
+{"version":3,"file":"devtoolsToolbar.css.js","names":[],"sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const toolbar = style({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: '2px',\n  height: '27px',\n  padding: '0 4px',\n  borderBottom: '1px solid var(--pdt-border)',\n  backgroundColor: 'var(--pdt-surface)',\n  minWidth: 0,\n  overflow: 'hidden',\n});\n\nexport const grow = style({\n  flex: '1 1 auto',\n  minWidth: 0,\n});\n\nexport const separator = style({\n  flex: '0 0 1px',\n  width: '1px',\n  height: '17px',\n  margin: '0 2px',\n  backgroundColor: 'var(--pdt-border)',\n});\n\nexport const button = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '4px',\n  flex: '0 0 auto',\n  maxWidth: '100%',\n  height: '26px',\n  minWidth: '26px',\n  padding: '0 6px',\n  border: 0,\n  borderRadius: '2px',\n  backgroundColor: 'transparent',\n  color: 'var(--pdt-text)',\n  fontSize: '12px',\n  lineHeight: '16px',\n  cursor: 'pointer',\n  transition: 'background-color 100ms ease',\n  selectors: {\n    '&:hover:not(:disabled)': {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-text) 10%, transparent)',\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: 'var(--pdt-shadow-focus)',\n    },\n    \"&[data-active='true']\": {\n      backgroundColor: 'color-mix(in srgb, var(--pdt-accent) 18%, transparent)',\n      color: 'var(--pdt-accent)',\n    },\n    \"&[data-presentation='icon']\": {\n      width: '26px',\n      padding: 0,\n    },\n    '&:disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  },\n});\n\nglobalStyle(`${button} > svg`, {\n  flex: '0 0 auto',\n  width: '16px',\n  height: '16px',\n  fill: 'currentColor',\n});\n\nexport const buttonLabel = style({\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nglobalStyle(`${button}[data-presentation='icon'] ${buttonLabel}`, {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n});\n\nglobalStyle(`${button}:focus-visible`, {\n  '@media': {\n    '(forced-colors: active)': {\n      outline: '2px solid Highlight',\n      outlineOffset: '2px',\n      boxShadow: 'none',\n    },\n  },\n});\n"],"mappings":""}

package/lib/types/controls/DevtoolsSelect.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, JSX, ReactNode } from 'react';
+import { type ChangeEventHandler, type JSX, type ReactNode } from 'react';
 export type DevtoolsSelectOption = {
     value: string;
     label: ReactNode;

package/lib/types/controls/DevtoolsSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsSelect.d.ts","sourceRoot":"","sources":["../../../src/controls/DevtoolsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IAChD,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;CAC1C,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAiBtE"}
+{"version":3,"file":"DevtoolsSelect.d.ts","sourceRoot":"","sources":["../../../src/controls/DevtoolsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,GAAG,EACR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IAChD,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;CAC1C,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwBtE"}

package/lib/types/empty_state/devtoolsEmptyState.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsEmptyState.css.d.ts","sourceRoot":"","sources":["../../../src/empty_state/devtoolsEmptyState.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC"}
+{"version":3,"file":"devtoolsEmptyState.css.d.ts","sourceRoot":"","sources":["../../../src/empty_state/devtoolsEmptyState.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,QAKhB,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC"}

package/lib/types/feedback/devtoolsFeedback.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsFeedback.css.d.ts","sourceRoot":"","sources":["../../../src/feedback/devtoolsFeedback.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAchB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,IAAI,QAYf,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAWH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAMrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,aAAa,QAIxB,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC"}
+{"version":3,"file":"devtoolsFeedback.css.d.ts","sourceRoot":"","sources":["../../../src/feedback/devtoolsFeedback.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAchB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,IAAI,QAYf,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAWH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAMrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,aAAa,QAIxB,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC"}

package/lib/types/index.d.ts

@@ -1,4 +1,4 @@
-export { DevtoolsTheme, type DevtoolsThemeProps, } from './theme/DevtoolsTheme.js';
+export { DevtoolsTheme, type DevtoolsColorScheme, type DevtoolsThemeProps, } from './theme/DevtoolsTheme.js';
 export { DevtoolsBadge, type DevtoolsBadgeProps, } from './feedback/DevtoolsBadge.js';
 export { DevtoolsPill, type DevtoolsPillProps, } from './feedback/DevtoolsPill.js';
 export { DevtoolsStatusLight, type DevtoolsStatusLightProps, } from './feedback/DevtoolsStatusLight.js';
@@ -15,5 +15,5 @@ export { DevtoolsTabs, type DevtoolsTabItem, type DevtoolsTabsProps, } from './n
 export { DevtoolsToolbar, DevtoolsToolbarGrow, type DevtoolsToolbarProps, } from './toolbar/DevtoolsToolbar.js';
 export { DevtoolsToolbarButton, type DevtoolsToolbarButtonProps, } from './toolbar/DevtoolsToolbarButton.js';
 export { DevtoolsToolbarSeparator } from './toolbar/DevtoolsToolbarSeparator.js';
-export { DevtoolsSplitView, type DevtoolsSplitViewProps, } from './layout/DevtoolsSplitView.js';
+export { DevtoolsSplitView, type DevtoolsSplitViewNarrowMode, type DevtoolsSplitViewProps, } from './layout/DevtoolsSplitView.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EACL,iBAAiB,EACjB,KAAK,2BAA2B,EAChC,KAAK,sBAAsB,GAC5B,MAAM,+BAA+B,CAAC"}

package/lib/types/layout/DevtoolsSplitView.d.ts

@@ -1,4 +1,5 @@
 import { type JSX, type ReactNode } from 'react';
+export type DevtoolsSplitViewNarrowMode = 'stack' | 'detail';
 export type DevtoolsSplitViewProps = {
     main: ReactNode;
     sidebar: ReactNode | null;
@@ -7,6 +8,7 @@ export type DevtoolsSplitViewProps = {
     maxSidebarWidth: number;
     onSidebarWidthChange: (width: number) => void;
     sidebarLabel?: string;
+    narrowMode?: DevtoolsSplitViewNarrowMode;
 };
 export declare function DevtoolsSplitView(props: DevtoolsSplitViewProps): JSX.Element;
 //# sourceMappingURL=DevtoolsSplitView.d.ts.map

package/lib/types/layout/DevtoolsSplitView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsSplitView.d.ts","sourceRoot":"","sources":["../../../src/layout/DevtoolsSplitView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,GAAG,EAGR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAqBf,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAcF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA+I5E"}
+{"version":3,"file":"DevtoolsSplitView.d.ts","sourceRoot":"","sources":["../../../src/layout/DevtoolsSplitView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,GAAG,EAGR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAqBf,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE,2BAA2B,CAAC;CAC1C,CAAC;AAcF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAmJ5E"}

package/lib/types/navigation/DevtoolsTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTabs.d.ts","sourceRoot":"","sources":["../../../src/navigation/DevtoolsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAGF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA2BlE"}
+{"version":3,"file":"DevtoolsTabs.d.ts","sourceRoot":"","sources":["../../../src/navigation/DevtoolsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmDF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsClE"}

package/lib/types/navigation/devtoolsTabs.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsTabs.css.d.ts","sourceRoot":"","sources":["../../../src/navigation/devtoolsTabs.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,GAAG,QAuBd,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC"}
+{"version":3,"file":"devtoolsTabs.css.d.ts","sourceRoot":"","sources":["../../../src/navigation/devtoolsTabs.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,GAAG,QA0Bd,CAAC;AAEH,eAAO,MAAM,WAAW,QAatB,CAAC"}

package/lib/types/surfaces/devtoolsSurfaces.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsSurfaces.css.d.ts","sourceRoot":"","sources":["../../../src/surfaces/devtoolsSurfaces.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,UAAU,QAKrB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,aAAa,QAKxB,CAAC;AAEH,eAAO,MAAM,YAAY,QAMvB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAO9B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,YAAY,QAMvB,CAAC"}
+{"version":3,"file":"devtoolsSurfaces.css.d.ts","sourceRoot":"","sources":["../../../src/surfaces/devtoolsSurfaces.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,UAAU,QAKrB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,aAAa,QAKxB,CAAC;AAEH,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,QAAQ,QAQnB,CAAC;AAMH,eAAO,MAAM,mBAAmB,QAO9B,CAAC;AAYH,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,YAAY,QAMvB,CAAC"}

package/lib/types/theme/DevtoolsTheme.d.ts

@@ -1,4 +1,7 @@
 import type { JSX, PropsWithChildren } from 'react';
-export type DevtoolsThemeProps = PropsWithChildren;
+export type DevtoolsColorScheme = 'light' | 'dark';
+export type DevtoolsThemeProps = PropsWithChildren<{
+    colorScheme?: DevtoolsColorScheme;
+}>;
 export declare function DevtoolsTheme(props: DevtoolsThemeProps): JSX.Element;
 //# sourceMappingURL=DevtoolsTheme.d.ts.map

package/lib/types/theme/DevtoolsTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/DevtoolsTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;AAGnD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAIpE"}
+{"version":3,"file":"DevtoolsTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/DevtoolsTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IAEjD,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC,CAAC,CAAC;AAGH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAQpE"}

package/lib/types/theme/devtoolsTheme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsTheme.css.d.ts","sourceRoot":"","sources":["../../../src/theme/devtoolsTheme.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAwCf,CAAC"}
+{"version":3,"file":"devtoolsTheme.css.d.ts","sourceRoot":"","sources":["../../../src/theme/devtoolsTheme.css.ts"],"names":[],"mappings":"AA4EA,eAAO,MAAM,IAAI,QAYf,CAAC"}

package/lib/types/toolbar/DevtoolsToolbarButton.d.ts

@@ -1,12 +1,20 @@
 import type { JSX, ReactNode } from 'react';
-export type DevtoolsToolbarButtonProps = {
+type DevtoolsToolbarButtonCommonProps = {
     label: ReactNode;
     onClick: () => void;
     disabled?: boolean;
     active?: boolean;
-    title?: string;
-    icon?: ReactNode;
     pressed?: boolean;
 };
+export type DevtoolsToolbarButtonProps = DevtoolsToolbarButtonCommonProps & ({
+    presentation?: 'label';
+    title?: string;
+    icon?: ReactNode;
+} | {
+    presentation: 'icon';
+    title: string;
+    icon: ReactNode;
+});
 export declare function DevtoolsToolbarButton(props: DevtoolsToolbarButtonProps): JSX.Element;
+export {};
 //# sourceMappingURL=DevtoolsToolbarButton.d.ts.map

package/lib/types/toolbar/DevtoolsToolbarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAGF,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,GAAG,CAAC,OAAO,CA6Bb"}
+{"version":3,"file":"DevtoolsToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,gCAAgC,GAAG;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,gCAAgC,GACvE,CACI;IACE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GACD;IACE,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;CACjB,CACJ,CAAC;AAGJ,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,GAAG,CAAC,OAAO,CA2Bb"}

package/lib/types/toolbar/devtoolsToolbar.css.d.ts

@@ -3,5 +3,4 @@ export declare const grow: string;
 export declare const separator: string;
 export declare const button: string;
 export declare const buttonLabel: string;
-export declare const buttonActive: string;
 //# sourceMappingURL=devtoolsToolbar.css.d.ts.map

package/lib/types/toolbar/devtoolsToolbar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsToolbar.css.d.ts","sourceRoot":"","sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,QAgBlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,MAAM,QAmCjB,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC"}
+{"version":3,"file":"devtoolsToolbar.css.d.ts","sourceRoot":"","sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,QAWlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,MAAM,QAuCjB,CAAC;AASH,eAAO,MAAM,WAAW,QAKtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumile/ui-devtools",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Shared DevTools UI primitives for Kronex extensions",
   "type": "module",
   "license": "MIT",
@@ -127,7 +127,7 @@
   },
   "devDependencies": {
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
+    "@types/react-dom": "19.2.7",
     "@typescript/native": "npm:typescript@7.0.2",
     "react": "19.2.8",
     "react-dom": "19.2.8",