@plumile/ui-devtools 0.1.134 → 0.1.142

package/README.md

@@ -13,6 +13,8 @@ specialized DevTools interfaces, not as a general-purpose component library.
 Kronex developer tooling, including:
 
 - badges and pills
+- diff pills for compact before/after summaries
+- compact buttons, selects, and list items
 - status lights
 - cards and sections
 - tabs and toolbar components
@@ -37,10 +39,16 @@ npm install react react-dom
 - `DevtoolsTheme`
 - `DevtoolsBadge`
 - `DevtoolsPill`
+- `DevtoolsDiffPills`
 - `DevtoolsStatusLight`
+- `DevtoolsButton`
+- `DevtoolsSelect`
 - `DevtoolsCard`
 - `DevtoolsSection`
+- `DevtoolsList`
+- `DevtoolsListItem`
 - `DevtoolsCodeBlock`
+- `DevtoolsJsonBlock`
 - `DevtoolsEmptyState`
 - `DevtoolsTabs`
 - `DevtoolsToolbar`
@@ -48,6 +56,23 @@ npm install react react-dom
 - `DevtoolsToolbarSeparator`
 - `DevtoolsSplitView`
 
+`DevtoolsTabs` intentionally stays separate from `@plumile/ui` `Tabs` so this
+package can remain independent from the app UI package.
+`DevtoolsToolbar*` follows the same package boundary: DevTools panels keep their
+compact theme and do not depend on the app `@plumile/ui` toolbar primitives.
+Use `DevtoolsButton` and `DevtoolsSelect` for compact non-toolbar controls that
+still need the DevTools chrome, and `DevtoolsList` / `DevtoolsListItem` for
+dense card-like lists in diagnostics, live activity, or prepared resources.
+`DevtoolsDiffPills` renders added, changed, and removed key summaries with
+optional per-category overflow limits and block or inline layout variants.
+`DevtoolsSplitView` is likewise DevTools-specific; its pointer, keyboard, and
+separator accessibility behavior is aligned with `@plumile/ui`
+`ResizableSplitView`, but it keeps the compact `--pdt-*` styling and no runtime
+dependency on `@plumile/ui`.
+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.
+
 For the complete entry point, see [`src/index.ts`](./src/index.ts).
 
 ## Quick Start

package/lib/esm/content/DevtoolsCodeBlock.js

@@ -2,9 +2,9 @@ import { codeBlock as e } from "./devtoolsCodeBlock.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/content/DevtoolsCodeBlock.tsx
 function n(n) {
-	let { children: r } = n;
-	return /* @__PURE__ */ t("pre", {
-		className: e,
+	let { children: r, className: i } = n, a = e;
+	return i != null && (a = [e, i].join(" ")), /* @__PURE__ */ t("pre", {
+		className: a,
 		children: r
 	});
 }

package/lib/esm/content/DevtoolsCodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsCodeBlock.js","names":[],"sources":["../../../src/content/DevtoolsCodeBlock.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { codeBlock } from './devtoolsCodeBlock.css.js';\n\nexport type DevtoolsCodeBlockProps = {\n  children: string;\n};\n\n/** Render preformatted code content in the devtools theme. */\nexport function DevtoolsCodeBlock(props: DevtoolsCodeBlockProps): JSX.Element {\n  const { children } = props;\n\n  return <pre className={codeBlock}>{children}</pre>;\n}\n"],"mappings":";;;AAQA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EAAE,gBAAa;CAErB,OAAO,kBAAC,OAAD;EAAK,WAAW;EAAY;EAAe,CAAA"}
+{"version":3,"file":"DevtoolsCodeBlock.js","names":[],"sources":["../../../src/content/DevtoolsCodeBlock.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { codeBlock } from './devtoolsCodeBlock.css.js';\n\nexport type DevtoolsCodeBlockProps = {\n  children: string;\n  className?: string;\n};\n\n/** Render preformatted code content in the devtools theme. */\nexport function DevtoolsCodeBlock(props: DevtoolsCodeBlockProps): JSX.Element {\n  const { children, className } = props;\n  let resolvedClassName = codeBlock;\n  if (className != null) {\n    resolvedClassName = [codeBlock, className].join(' ');\n  }\n\n  return <pre className={resolvedClassName}>{children}</pre>;\n}\n"],"mappings":";;;AASA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EAAE,aAAU,iBAAc,GAC5B,IAAoB;CAKxB,OAJI,KAAa,SACf,IAAoB,CAAC,GAAW,EAAU,CAAC,KAAK,IAAI,GAG/C,kBAAC,OAAD;EAAK,WAAW;EAAoB;EAAe,CAAA"}

package/lib/esm/content/DevtoolsJsonBlock.js

@@ -0,0 +1,24 @@
+import { DevtoolsCodeBlock as e } from "./DevtoolsCodeBlock.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/content/DevtoolsJsonBlock.tsx
+var n = "N/A", r = "[unserializable]", i = (e, t = r) => {
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch {
+		return t;
+	}
+}, a = { stringifyJsonValue: i };
+function o(a) {
+	let { value: o, emptyFallback: s = n, serializationFallback: c = r, className: l } = a;
+	return o == null ? /* @__PURE__ */ t("span", {
+		className: l,
+		children: s
+	}) : /* @__PURE__ */ t(e, {
+		className: l,
+		children: i(o, c)
+	});
+}
+//#endregion
+export { o as DevtoolsJsonBlock, a as __testDevtoolsJsonBlock };
+
+//# sourceMappingURL=DevtoolsJsonBlock.js.map

package/lib/esm/content/DevtoolsJsonBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsJsonBlock.js","names":[],"sources":["../../../src/content/DevtoolsJsonBlock.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport { DevtoolsCodeBlock } from './DevtoolsCodeBlock.js';\n\nexport type DevtoolsJsonBlockProps = {\n  value: unknown;\n  emptyFallback?: string;\n  serializationFallback?: string;\n  className?: string;\n};\n\nconst DEFAULT_EMPTY_FALLBACK = 'N/A';\nconst DEFAULT_SERIALIZATION_FALLBACK = '[unserializable]';\n\nconst stringifyJsonValue = (\n  value: unknown,\n  serializationFallback = DEFAULT_SERIALIZATION_FALLBACK,\n): string => {\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch {\n    return serializationFallback;\n  }\n};\n\nexport const __testDevtoolsJsonBlock = {\n  stringifyJsonValue,\n} as const;\n\n/** Render formatted JSON content in the devtools theme. */\nexport function DevtoolsJsonBlock(props: DevtoolsJsonBlockProps): JSX.Element {\n  const {\n    value,\n    emptyFallback = DEFAULT_EMPTY_FALLBACK,\n    serializationFallback = DEFAULT_SERIALIZATION_FALLBACK,\n    className,\n  } = props;\n\n  if (value === undefined || value === null) {\n    return <span className={className}>{emptyFallback}</span>;\n  }\n\n  return (\n    <DevtoolsCodeBlock className={className}>\n      {stringifyJsonValue(value, serializationFallback)}\n    </DevtoolsCodeBlock>\n  );\n}\n"],"mappings":";;;AAWA,IAAM,IAAyB,OACzB,IAAiC,oBAEjC,KACJ,GACA,IAAwB,MACb;CACX,IAAI;EACF,OAAO,KAAK,UAAU,GAAO,MAAM,EAAE;SAC/B;EACN,OAAO;;GAIE,IAA0B,EACrC,uBACD;AAGD,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,UACA,mBAAgB,GAChB,2BAAwB,GACxB,iBACE;CAMJ,OAJI,KAAiC,OAC5B,kBAAC,QAAD;EAAiB;YAAY;EAAqB,CAAA,GAIzD,kBAAC,GAAD;EAA8B;YAC3B,EAAmB,GAAO,EAAsB;EAC/B,CAAA"}

package/lib/esm/controls/DevtoolsButton.js

@@ -0,0 +1,19 @@
+import { button as e, buttonDanger as t } from "./devtoolsControls.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/controls/DevtoolsButton.tsx
+function r(r) {
+	let { children: i, disabled: a, onClick: o, title: s, type: c = "button", tone: l = "neutral" } = r, u = e;
+	return l === "danger" && (u = `${e} ${t}`), /* @__PURE__ */ n("button", {
+		type: c,
+		className: u,
+		disabled: a,
+		title: s,
+		"aria-label": r["aria-label"],
+		onClick: o,
+		children: i
+	});
+}
+//#endregion
+export { r as DevtoolsButton };
+
+//# sourceMappingURL=DevtoolsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsButton.js","names":[],"sources":["../../../src/controls/DevtoolsButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, JSX, ReactNode } from 'react';\nimport { button, buttonDanger } from './devtoolsControls.css.js';\n\nexport type DevtoolsButtonProps = {\n  children: ReactNode;\n  onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n  disabled?: boolean;\n  title?: string;\n  'aria-label'?: string;\n  type?: 'button' | 'submit' | 'reset';\n  tone?: 'neutral' | 'danger';\n};\n\n/** Render a compact DevTools button for non-toolbar actions. */\nexport function DevtoolsButton(props: DevtoolsButtonProps): JSX.Element {\n  const {\n    children,\n    disabled,\n    onClick,\n    title,\n    type = 'button',\n    tone = 'neutral',\n  } = props;\n  let className = button;\n  if (tone === 'danger') {\n    className = `${button} ${buttonDanger}`;\n  }\n\n  return (\n    <button\n      type={type}\n      className={className}\n      disabled={disabled}\n      title={title}\n      aria-label={props['aria-label']}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;AAcA,SAAgB,EAAe,GAAyC;CACtE,IAAM,EACJ,aACA,aACA,YACA,UACA,UAAO,UACP,UAAO,cACL,GACA,IAAY;CAKhB,OAJI,MAAS,aACX,IAAY,GAAG,EAAO,GAAG,MAIzB,kBAAC,UAAD;EACQ;EACK;EACD;EACH;EACP,cAAY,EAAM;EACT;EAER;EACM,CAAA"}

package/lib/esm/controls/DevtoolsSelect.js

@@ -0,0 +1,25 @@
+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";
+//#region src/controls/DevtoolsSelect.tsx
+function a(a) {
+	let { label: o, onChange: s, options: c, value: l } = a;
+	return /* @__PURE__ */ i("label", {
+		className: t,
+		children: [/* @__PURE__ */ r("span", {
+			className: n,
+			children: o
+		}), /* @__PURE__ */ r("select", {
+			className: e,
+			value: l,
+			onChange: s,
+			children: c.map((e) => /* @__PURE__ */ r("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		})]
+	});
+}
+//#endregion
+export { a as DevtoolsSelect };
+
+//# sourceMappingURL=DevtoolsSelect.js.map

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

@@ -0,0 +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;YAAlB,CACE,kBAAC,QAAD;GAAM,WAAW;aAAc;GAAa,CAAA,EAC5C,kBAAC,UAAD;GAAQ,WAAW;GAAe;GAAiB;aAChD,EAAQ,KAAK,MAEV,kBAAC,UAAD;IAA2B,OAAO,EAAO;cACtC,EAAO;IACD,EAFI,EAAO,MAEX,CAEX;GACK,CAAA,CACH"}

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

@@ -0,0 +1,7 @@
+/* empty css                                */
+//#region src/controls/devtoolsControls.css.ts
+var e = "_83ws9k0", t = "_83ws9k1", n = "_83ws9k2", r = "_83ws9k3", i = "_83ws9k4";
+//#endregion
+export { e as button, t as buttonDanger, i as select, n as selectField, r as selectLabel };
+
+//# sourceMappingURL=devtoolsControls.css.js.map

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

@@ -0,0 +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  fontSize: '12px',\n  color: 'var(--pdt-text-muted)',\n});\n\nexport const selectLabel = style({\n  fontSize: '12px',\n});\n\nexport const select = style({\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":""}

package/lib/esm/feedback/DevtoolsDiffPills.js

@@ -0,0 +1,57 @@
+import { diffInline as e, diffList as t, diffPill as n, diffPillAdded as r, diffPillChanged as i, diffPillFlash as a, diffPillRemoved as o } from "./devtoolsFeedback.css.js";
+import { Fragment as s, jsx as c } from "react/jsx-runtime";
+//#region src/feedback/DevtoolsDiffPills.tsx
+var l = 4, u = {
+	added: "+",
+	changed: "~",
+	removed: "−"
+}, d = {
+	added: r,
+	changed: i,
+	removed: o
+};
+function f(e, t) {
+	return `${e}${t}`;
+}
+function p(e, t) {
+	return `${e}…${t}`;
+}
+function m(e) {
+	return e == null ? null : /* @__PURE__ */ c(s, { children: e });
+}
+function h(e, t, r, i) {
+	if (e.length === 0 || r < 1) return [];
+	let o = u[t], s = [n, d[t]];
+	i && s.push(a);
+	let l = s.join(" "), m = e.slice(0, r), h = m.map((e, n) => /* @__PURE__ */ c("span", {
+		className: l,
+		children: f(o, e)
+	}, `${t}-${e}-${n}`));
+	if (e.length > m.length) {
+		let n = e.length - m.length;
+		h.push(/* @__PURE__ */ c("span", {
+			className: l,
+			children: p(o, n)
+		}, `${t}-more`));
+	}
+	return h;
+}
+function g(n) {
+	let { diff: r, emptyFallback: i = null, limit: a = l, variant: o = "block" } = n;
+	if (r == null) return m(i);
+	let s = o === "block", u = [
+		...h(r.added, "added", a, s),
+		...h(r.changed, "changed", a, s),
+		...h(r.removed, "removed", a, s)
+	];
+	if (u.length === 0) return m(i);
+	let d = "div", f = t;
+	return o === "inline" && (d = "span", f = e), /* @__PURE__ */ c(d, {
+		className: f,
+		children: u
+	});
+}
+//#endregion
+export { g as DevtoolsDiffPills };
+
+//# sourceMappingURL=DevtoolsDiffPills.js.map

package/lib/esm/feedback/DevtoolsDiffPills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsDiffPills.js","names":[],"sources":["../../../src/feedback/DevtoolsDiffPills.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport {\n  diffInline,\n  diffList,\n  diffPill,\n  diffPillAdded,\n  diffPillChanged,\n  diffPillFlash,\n  diffPillRemoved,\n} from './devtoolsFeedback.css.js';\n\nconst DEFAULT_LIMIT = 4;\n\nexport type DevtoolsDiffPillsDiff = {\n  added: readonly string[];\n  changed: readonly string[];\n  removed: readonly string[];\n};\n\nexport type DevtoolsDiffPillsProps = {\n  diff?: DevtoolsDiffPillsDiff | null;\n  limit?: number;\n  variant?: 'block' | 'inline';\n  emptyFallback?: ReactNode;\n};\n\ntype DiffKind = 'added' | 'changed' | 'removed';\n\nconst KIND_TO_PREFIX: Record<DiffKind, string> = {\n  added: '+',\n  changed: '~',\n  removed: '−',\n};\n\nconst KIND_TO_CLASS: Record<DiffKind, string> = {\n  added: diffPillAdded,\n  changed: diffPillChanged,\n  removed: diffPillRemoved,\n};\n\n/** Prefix a diff key with its display marker. */\nfunction makeLabel(prefix: string, value: string): string {\n  return `${prefix}${value}`;\n}\n\n/** Create the overflow label for hidden diff keys. */\nfunction createMoreLabel(prefix: string, remaining: number): string {\n  return `${prefix}…${remaining}`;\n}\n\n/** Render an optional fallback without adding DOM when it is absent. */\nfunction renderFallback(emptyFallback: ReactNode): JSX.Element | null {\n  if (emptyFallback == null) {\n    return null;\n  }\n  return <>{emptyFallback}</>;\n}\n\n/** Build the rendered pill elements for one diff category. */\nfunction makePills(\n  items: readonly string[],\n  kind: DiffKind,\n  limit: number,\n  flash: boolean,\n): JSX.Element[] {\n  if (items.length === 0 || limit < 1) {\n    return [];\n  }\n\n  const prefix = KIND_TO_PREFIX[kind];\n  const pillClasses = [diffPill, KIND_TO_CLASS[kind]];\n  if (flash) {\n    pillClasses.push(diffPillFlash);\n  }\n  const className = pillClasses.join(' ');\n  const slice = items.slice(0, limit);\n  const pills = slice.map((item, index) => {\n    return (\n      <span key={`${kind}-${item}-${index}`} className={className}>\n        {makeLabel(prefix, item)}\n      </span>\n    );\n  });\n\n  if (items.length > slice.length) {\n    const remaining = items.length - slice.length;\n    pills.push(\n      <span key={`${kind}-more`} className={className}>\n        {createMoreLabel(prefix, remaining)}\n      </span>,\n    );\n  }\n\n  return pills;\n}\n\n/** Render compact DevTools pills for added, changed, and removed keys. */\nexport function DevtoolsDiffPills(\n  props: DevtoolsDiffPillsProps,\n): JSX.Element | null {\n  const {\n    diff,\n    emptyFallback = null,\n    limit = DEFAULT_LIMIT,\n    variant = 'block',\n  } = props;\n\n  if (diff == null) {\n    return renderFallback(emptyFallback);\n  }\n\n  const flash = variant === 'block';\n  const pills = [\n    ...makePills(diff.added, 'added', limit, flash),\n    ...makePills(diff.changed, 'changed', limit, flash),\n    ...makePills(diff.removed, 'removed', limit, flash),\n  ];\n\n  if (pills.length === 0) {\n    return renderFallback(emptyFallback);\n  }\n\n  let Element: 'div' | 'span' = 'div';\n  let className = diffList;\n  if (variant === 'inline') {\n    Element = 'span';\n    className = diffInline;\n  }\n  return <Element className={className}>{pills}</Element>;\n}\n"],"mappings":";;;AAWA,IAAM,IAAgB,GAiBhB,IAA2C;CAC/C,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEK,IAA0C;CAC9C,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAGD,SAAS,EAAU,GAAgB,GAAuB;CACxD,OAAO,GAAG,IAAS;;AAIrB,SAAS,EAAgB,GAAgB,GAA2B;CAClE,OAAO,GAAG,EAAO,GAAG;;AAItB,SAAS,EAAe,GAA8C;CAIpE,OAHI,KAAiB,OACZ,OAEF,kBAAA,GAAA,EAAA,UAAG,GAAiB,CAAA;;AAI7B,SAAS,EACP,GACA,GACA,GACA,GACe;CACf,IAAI,EAAM,WAAW,KAAK,IAAQ,GAChC,OAAO,EAAE;CAGX,IAAM,IAAS,EAAe,IACxB,IAAc,CAAC,GAAU,EAAc,GAAM;CACnD,AAAI,KACF,EAAY,KAAK,EAAc;CAEjC,IAAM,IAAY,EAAY,KAAK,IAAI,EACjC,IAAQ,EAAM,MAAM,GAAG,EAAM,EAC7B,IAAQ,EAAM,KAAK,GAAM,MAE3B,kBAAC,QAAD;EAAkD;YAC/C,EAAU,GAAQ,EAAK;EACnB,EAFI,GAAG,EAAK,GAAG,EAAK,GAAG,IAEvB,CAET;CAEF,IAAI,EAAM,SAAS,EAAM,QAAQ;EAC/B,IAAM,IAAY,EAAM,SAAS,EAAM;EACvC,EAAM,KACJ,kBAAC,QAAD;GAAsC;aACnC,EAAgB,GAAQ,EAAU;GAC9B,EAFI,GAAG,EAAK,OAEZ,CACR;;CAGH,OAAO;;AAIT,SAAgB,EACd,GACoB;CACpB,IAAM,EACJ,SACA,mBAAgB,MAChB,WAAQ,GACR,aAAU,YACR;CAEJ,IAAI,KAAQ,MACV,OAAO,EAAe,EAAc;CAGtC,IAAM,IAAQ,MAAY,SACpB,IAAQ;EACZ,GAAG,EAAU,EAAK,OAAO,SAAS,GAAO,EAAM;EAC/C,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,EAAM;EACnD,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,EAAM;EACpD;CAED,IAAI,EAAM,WAAW,GACnB,OAAO,EAAe,EAAc;CAGtC,IAAI,IAA0B,OAC1B,IAAY;CAKhB,OAJI,MAAY,aACd,IAAU,QACV,IAAY,IAEP,kBAAC,GAAD;EAAoB;YAAY;EAAgB,CAAA"}

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

@@ -1,7 +1,7 @@
 /* empty css                                */
 //#region src/feedback/devtoolsFeedback.css.ts
-var e = "kewyeu0", t = "kewyeu1", n = "kewyeu2", r = "kewyeu3", i = "kewyeu4", a = "kewyeu5", o = "kewyeu6", s = "kewyeu7", c = "kewyeu8", l = "kewyeu9", u = "kewyeua", d = "kewyeub", f = "kewyeuc", p = "kewyeud", m = "kewyeue", h = "kewyeuf", g = "kewyeug", _ = "kewyeuh", v = "kewyeui";
+var e = "kewyeu0", t = "kewyeu1", n = "kewyeu2", r = "kewyeu3", i = "kewyeu4", a = "kewyeu5", o = "kewyeu6", s = "kewyeu7", c = "kewyeu8", l = "kewyeu9", u = "kewyeua", d = "kewyeub", f = "kewyeuc", p = "kewyeud", m = "kewyeue", h = "kewyeuf", g = "kewyeug", _ = "kewyeuh", v = "kewyeui", y = "kewyeuk", b = "kewyeul", x = "kewyeum", S = "kewyeun", C = "kewyeuo", w = "kewyeup", T = "kewyeuq";
 //#endregion
-export { e as badge, a as badgeDanger, n as badgeInfo, t as badgeNeutral, r as badgeSuccess, i as badgeWarning, o as pill, f as pillHistory, c as pillNavigation, s as pillNeutral, p as pillPopstate, d as pillPreload, m as pillPrepare, u as pillSnapshot, l as pillUpdate, g as statusDot, v as statusIdle, h as statusLight, _ as statusReady };
+export { e as badge, a as badgeDanger, n as badgeInfo, t as badgeNeutral, r as badgeSuccess, i as badgeWarning, b as diffInline, y as diffList, x as diffPill, S as diffPillAdded, C as diffPillChanged, T as diffPillFlash, w as diffPillRemoved, o as pill, f as pillHistory, c as pillNavigation, s as pillNeutral, p as pillPopstate, d as pillPreload, m as pillPrepare, u as pillSnapshot, l as pillUpdate, g as statusDot, v as statusIdle, h as statusLight, _ as statusReady };
 
 //# sourceMappingURL=devtoolsFeedback.css.js.map

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 { 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: 'rgba(99, 102, 241, 0.12)',\n  borderColor: 'rgba(99, 102, 241, 0.28)',\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: 'rgba(147, 51, 234, 0.12)',\n  borderColor: 'rgba(147, 51, 234, 0.28)',\n});\n\nexport const pillPopstate = style({\n  backgroundColor: 'rgba(59, 130, 246, 0.12)',\n  borderColor: 'rgba(59, 130, 246, 0.28)',\n});\n\nexport const pillPrepare = style({\n  backgroundColor: 'rgba(217, 119, 6, 0.12)',\n  borderColor: 'rgba(217, 119, 6, 0.28)',\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"],"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: '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: 'rgba(99, 102, 241, 0.12)',\n  borderColor: 'rgba(99, 102, 241, 0.28)',\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: 'rgba(147, 51, 234, 0.12)',\n  borderColor: 'rgba(147, 51, 234, 0.28)',\n});\n\nexport const pillPopstate = style({\n  backgroundColor: 'rgba(59, 130, 246, 0.12)',\n  borderColor: 'rgba(59, 130, 246, 0.28)',\n});\n\nexport const pillPrepare = style({\n  backgroundColor: 'rgba(217, 119, 6, 0.12)',\n  borderColor: 'rgba(217, 119, 6, 0.28)',\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: '0 0 0 0 rgba(37, 99, 235, 0.4)',\n  },\n  to: {\n    boxShadow: '0 0 0 12px rgba(37, 99, 235, 0)',\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: 'rgba(34, 134, 58, 0.12)',\n  borderColor: 'rgba(34, 134, 58, 0.35)',\n  color: '#166534',\n});\n\nexport const diffPillChanged = style({\n  backgroundColor: 'rgba(115, 92, 15, 0.12)',\n  borderColor: 'rgba(115, 92, 15, 0.35)',\n  color: '#735c0f',\n});\n\nexport const diffPillRemoved = style({\n  backgroundColor: 'rgba(203, 36, 49, 0.12)',\n  borderColor: 'rgba(203, 36, 49, 0.35)',\n  color: '#b3212c',\n});\n\nexport const diffPillFlash = style({\n  animation: `${diffFlash} 0.8s ease-in-out`,\n});\n"],"mappings":""}

package/lib/esm/index.js

@@ -1,14 +1,19 @@
 import { DevtoolsCodeBlock as e } from "./content/DevtoolsCodeBlock.js";
-import { DevtoolsEmptyState as t } from "./empty_state/DevtoolsEmptyState.js";
-import { DevtoolsBadge as n } from "./feedback/DevtoolsBadge.js";
-import { DevtoolsPill as r } from "./feedback/DevtoolsPill.js";
-import { DevtoolsStatusLight as i } from "./feedback/DevtoolsStatusLight.js";
-import { DevtoolsTheme as a } from "./theme/DevtoolsTheme.js";
-import { DevtoolsCard as o } from "./surfaces/DevtoolsCard.js";
-import { DevtoolsSection as s } from "./surfaces/DevtoolsSection.js";
-import { DevtoolsTabs as c } from "./navigation/DevtoolsTabs.js";
-import { DevtoolsToolbar as l, DevtoolsToolbarGrow as u } from "./toolbar/DevtoolsToolbar.js";
-import { DevtoolsToolbarButton as d } from "./toolbar/DevtoolsToolbarButton.js";
-import { DevtoolsToolbarSeparator as f } from "./toolbar/DevtoolsToolbarSeparator.js";
-import { DevtoolsSplitView as p } from "./layout/DevtoolsSplitView.js";
-export { n as DevtoolsBadge, o as DevtoolsCard, e as DevtoolsCodeBlock, t as DevtoolsEmptyState, r as DevtoolsPill, s as DevtoolsSection, p as DevtoolsSplitView, i as DevtoolsStatusLight, c as DevtoolsTabs, a as DevtoolsTheme, l as DevtoolsToolbar, d as DevtoolsToolbarButton, u as DevtoolsToolbarGrow, f as DevtoolsToolbarSeparator };
+import { DevtoolsJsonBlock as t } from "./content/DevtoolsJsonBlock.js";
+import { DevtoolsButton as n } from "./controls/DevtoolsButton.js";
+import { DevtoolsSelect as r } from "./controls/DevtoolsSelect.js";
+import { DevtoolsEmptyState as i } from "./empty_state/DevtoolsEmptyState.js";
+import { DevtoolsBadge as a } from "./feedback/DevtoolsBadge.js";
+import { DevtoolsDiffPills as o } from "./feedback/DevtoolsDiffPills.js";
+import { DevtoolsPill as s } from "./feedback/DevtoolsPill.js";
+import { DevtoolsStatusLight as c } from "./feedback/DevtoolsStatusLight.js";
+import { DevtoolsTheme as l } from "./theme/DevtoolsTheme.js";
+import { DevtoolsCard as u } from "./surfaces/DevtoolsCard.js";
+import { DevtoolsSection as d } from "./surfaces/DevtoolsSection.js";
+import { DevtoolsList as f, DevtoolsListItem as p } from "./surfaces/DevtoolsList.js";
+import { DevtoolsTabs as m } from "./navigation/DevtoolsTabs.js";
+import { DevtoolsToolbar as h, DevtoolsToolbarGrow as g } from "./toolbar/DevtoolsToolbar.js";
+import { DevtoolsToolbarButton as _ } from "./toolbar/DevtoolsToolbarButton.js";
+import { DevtoolsToolbarSeparator as v } from "./toolbar/DevtoolsToolbarSeparator.js";
+import { DevtoolsSplitView as y } from "./layout/DevtoolsSplitView.js";
+export { a as DevtoolsBadge, n as DevtoolsButton, u as DevtoolsCard, e as DevtoolsCodeBlock, o as DevtoolsDiffPills, i as DevtoolsEmptyState, t as DevtoolsJsonBlock, f as DevtoolsList, p as DevtoolsListItem, s as DevtoolsPill, d as DevtoolsSection, r as DevtoolsSelect, y as DevtoolsSplitView, c as DevtoolsStatusLight, m as DevtoolsTabs, l as DevtoolsTheme, h as DevtoolsToolbar, _ as DevtoolsToolbarButton, g as DevtoolsToolbarGrow, v as DevtoolsToolbarSeparator };

package/lib/esm/layout/DevtoolsSplitView.js

@@ -2,81 +2,85 @@ import { main as e, mainBordered as t, root as n } from "./devtoolsSplitView.css
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useCallback as o, useEffect as s, useRef as c } from "react";
 //#region src/layout/DevtoolsSplitView.tsx
-function l(e, t, n) {
+var l = 16, u = 64, d = "Resize sidebar";
+function f(e, t, n) {
 	return e < t ? t : e > n ? n : e;
 }
-function u(u) {
-	let { main: d, maxSidebarWidth: f, minSidebarWidth: p, onSidebarWidthChange: m, sidebar: h, sidebarLabel: g, sidebarWidth: _ } = u, v = c({
+function p(p) {
+	let { main: m, maxSidebarWidth: h, minSidebarWidth: g, onSidebarWidthChange: _, sidebar: v, sidebarLabel: y, sidebarWidth: b } = p, x = c({
 		active: !1,
+		pointerId: null,
 		startX: 0,
-		width: _
-	}), y = o((e) => {
-		let t = v.current;
-		if (!t.active) return;
-		let n = e.clientX - t.startX;
-		m(l(t.width - n, p, f));
+		width: b
+	}), S = o((e) => {
+		let t = x.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));
 	}, [
-		f,
-		p,
-		m
-	]), b = o(() => {
-		v.current.active && (v.current.active = !1, window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", b));
-	}, [y]);
+		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]);
 	s(() => () => {
-		window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", b);
-	}, [y, b]);
-	let x = o((e) => {
-		h != null && (e.preventDefault(), v.current = {
+		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 = {
 			active: !0,
+			pointerId: e.pointerId,
 			startX: e.clientX,
-			width: _
-		}, window.addEventListener("pointermove", y), window.addEventListener("pointerup", b));
+			width: b
+		}, window.addEventListener("pointermove", S), window.addEventListener("pointerup", C), window.addEventListener("pointercancel", C));
 	}, [
-		y,
-		b,
-		h,
-		_
-	]), S = o((e) => {
-		if (h == null) return;
-		let t = 20;
-		if (e.shiftKey && (t = 40), e.key === "ArrowLeft") {
-			e.preventDefault(), m(l(_ - t, p, f));
+		S,
+		C,
+		v,
+		b
+	]), T = o((e) => {
+		if (v == null) return;
+		let t = l;
+		if (e.shiftKey && (t = u), e.key === "ArrowLeft") {
+			e.preventDefault(), _(f(b + t, g, h));
 			return;
 		}
-		e.key === "ArrowRight" && (e.preventDefault(), m(l(_ + t, p, f)));
+		e.key === "ArrowRight" && (e.preventDefault(), _(f(b - t, g, h)));
 	}, [
-		f,
-		p,
-		m,
 		h,
-		_
-	]), C = e;
-	return h != null && (C = `${e} ${t}`), /* @__PURE__ */ a("div", {
+		g,
+		_,
+		v,
+		b
+	]), E = e;
+	return v != null && (E = `${e} ${t}`), /* @__PURE__ */ a("div", {
 		className: n,
 		children: [/* @__PURE__ */ i("div", {
-			className: C,
-			children: d
-		}), h != null && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+			className: E,
+			children: m
+		}), v != null && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
 			className: "_1m64tse3",
 			role: "separator",
 			"aria-orientation": "vertical",
-			"aria-label": g,
-			"aria-valuemin": p,
-			"aria-valuemax": f,
-			"aria-valuenow": Math.round(_),
+			"aria-label": y ?? d,
+			"aria-valuemin": Math.round(g),
+			"aria-valuemax": Math.round(h),
+			"aria-valuenow": Math.round(b),
 			tabIndex: 0,
-			onPointerDown: x,
-			onKeyDown: S,
+			onPointerDown: w,
+			onKeyDown: T,
 			children: /* @__PURE__ */ i("span", { className: "_1m64tse4" })
 		}), /* @__PURE__ */ i("section", {
 			className: "_1m64tse5",
-			"aria-label": g,
-			style: { width: `${_}px` },
-			children: h
+			"aria-label": y ?? void 0,
+			style: { width: `${b}px` },
+			children: v
 		})] })]
 	});
 }
 //#endregion
-export { u as DevtoolsSplitView };
+export { p as DevtoolsSplitView };
 
 //# sourceMappingURL=DevtoolsSplitView.js.map

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  startX: number;\n  width: number;\n};\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    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      const delta = event.clientX - state.startX;\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    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', 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      dragRef.current = {\n        active: true,\n        startX: event.clientX,\n        width: sidebarWidth,\n      };\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', 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 = 20;\n      if (event.shiftKey) {\n        step = 40;\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}\n            aria-valuemin={minSidebarWidth}\n            aria-valuemax={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}\n            style={{ width: `${sidebarWidth}px` }}\n          >\n            {sidebarContent}\n          </section>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAmCA,SAAS,EAAW,GAAe,GAAkB,GAA0B;CAO7E,OANI,IAAQ,IACH,IAEL,IAAQ,IACH,IAEF;;AAIT,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,MAAM,GACN,oBACA,oBACA,yBACA,SAAS,GACT,iBACA,oBACE,GACE,IAAU,EAAkB;EAChC,QAAQ;EACR,QAAQ;EACR,OAAO;EACR,CAAC,EAEI,IAAoB,GACvB,MAAwB;EACvB,IAAM,IAAQ,EAAQ;EACtB,IAAI,CAAC,EAAM,QACT;EAEF,IAAM,IAAQ,EAAM,UAAU,EAAM;EACpC,EACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,EAAgB,CAClE;IAEH;EAAC;EAAiB;EAAiB;EAAqB,CACzD,EAEK,IAAkB,QAAkB;EACnC,EAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB;IACvD,CAAC,EAAkB,CAAC;CAEvB,cACe;EAEX,AADA,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB;IAEzD,CAAC,GAAmB,EAAgB,CAAC;CAExC,IAAM,IAAoB,GACvB,MAA6C;EACxC,KAAkB,SAGtB,EAAM,gBAAgB,EACtB,EAAQ,UAAU;GAChB,QAAQ;GACR,QAAQ,EAAM;GACd,OAAO;GACR,EACD,OAAO,iBAAiB,eAAe,EAAkB,EACzD,OAAO,iBAAiB,aAAa,EAAgB;IAEvD;EAAC;EAAmB;EAAiB;EAAgB;EAAa,CACnE,EAEK,IAAgB,GACnB,MAA8C;EAC7C,IAAI,KAAkB,MACpB;EAEF,IAAI,IAAO;EAIX,IAHI,EAAM,aACR,IAAO,KAEL,EAAM,QAAQ,aAAa;GAE7B,AADA,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;GACD;;EAEF,AAAI,EAAM,QAAQ,iBAChB,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;IAGL;EACE;EACA;EACA;EACA;EACA;EACD,CACF,EAEG,IAAgB;CAKpB,OAJI,KAAkB,SACpB,IAAgB,GAAG,EAAK,GAAG,MAI3B,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAgB;GAAkB,CAAA,EACjD,KAAkB,QACjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAA;GACA,MAAK;GACL,oBAAiB;GACjB,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,MAAM,EAAa;GACvC,UAAU;GACV,eAAe;GACf,WAAW;aAEX,kBAAC,QAAD,EAAM,WAAA,aAA0B,CAAA;GAC5B,CAAA,EACN,kBAAC,WAAD;GACE,WAAA;GACA,cAAY;GACZ,OAAO,EAAE,OAAO,GAAG,EAAa,KAAK;aAEpC;GACO,CAAA,CACT,EAAA,CAAA,CAED"}
+{"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;;AAIT,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;EACR,CAAC,EAEI,IAAoB,GACvB,MAAwB;EACvB,IAAM,IAAQ,EAAQ;EAItB,IAHI,CAAC,EAAM,UAGP,EAAM,aAAa,QAAQ,EAAM,cAAc,EAAM,WACvD;EAEF,EAAM,gBAAgB;EACtB,IAAM,IAAQ,EAAM,SAAS,EAAM;EACnC,EACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,EAAgB,CAClE;IAEH;EAAC;EAAiB;EAAiB;EAAqB,CACzD,EAEK,IAAkB,QAAkB;EACnC,EAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,EAAQ,QAAQ,YAAY,MAC5B,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB,EACxD,OAAO,oBAAoB,iBAAiB,EAAgB;IAC3D,CAAC,EAAkB,CAAC;CAEvB,cACe;EAGX,AAFA,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB,EACxD,OAAO,oBAAoB,iBAAiB,EAAgB;IAE7D,CAAC,GAAmB,EAAgB,CAAC;CAExC,IAAM,IAAoB,GACvB,MAA6C;EACxC,KAAkB,SAGtB,EAAM,gBAAgB,EAClB,uBAAuB,EAAM,iBAC/B,EAAM,cAAc,kBAAkB,EAAM,UAAU,EAExD,EAAQ,UAAU;GAChB,QAAQ;GACR,WAAW,EAAM;GACjB,QAAQ,EAAM;GACd,OAAO;GACR,EACD,OAAO,iBAAiB,eAAe,EAAkB,EACzD,OAAO,iBAAiB,aAAa,EAAgB,EACrD,OAAO,iBAAiB,iBAAiB,EAAgB;IAE3D;EAAC;EAAmB;EAAiB;EAAgB;EAAa,CACnE,EAEK,IAAgB,GACnB,MAA8C;EAC7C,IAAI,KAAkB,MACpB;EAEF,IAAI,IAAO;EAIX,IAHI,EAAM,aACR,IAAO,IAEL,EAAM,QAAQ,aAAa;GAE7B,AADA,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;GACD;;EAEF,AAAI,EAAM,QAAQ,iBAChB,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;IAGL;EACE;EACA;EACA;EACA;EACA;EACD,CACF,EAEG,IAAgB;CAKpB,OAJI,KAAkB,SACpB,IAAgB,GAAG,EAAK,GAAG,MAI3B,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAgB;GAAkB,CAAA,EACjD,KAAkB,QACjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAA;GACA,MAAK;GACL,oBAAiB;GACjB,cAAY,KAAgB;GAC5B,iBAAe,KAAK,MAAM,EAAgB;GAC1C,iBAAe,KAAK,MAAM,EAAgB;GAC1C,iBAAe,KAAK,MAAM,EAAa;GACvC,UAAU;GACV,eAAe;GACf,WAAW;aAEX,kBAAC,QAAD,EAAM,WAAA,aAA0B,CAAA;GAC5B,CAAA,EACN,kBAAC,WAAD;GACE,WAAA;GACA,cAAY,KAAgB,KAAA;GAC5B,OAAO,EAAE,OAAO,GAAG,EAAa,KAAK;aAEpC;GACO,CAAA,CACT,EAAA,CAAA,CAED"}

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}.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}.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:#6366f11f;border-color:#6366f147}.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:#9333ea1f;border-color:#9333ea47}.kewyeud{background-color:#3b82f61f;border-color:#3b82f647}.kewyeue{background-color:#d977061f;border-color:#d9770647}.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)}._1m64tse0{flex:1;align-items:stretch;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}.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:#fff}.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}._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-info:#0369a1;--pdt-success:#166534;--pdt-warning:#9a3412;--pdt-danger:#b91c1c;--pdt-code-bg:#0f172a0f;--pdt-shadow-focus:0 0 0 2px #2563eb59;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-info:#38bdf8;--pdt-success:#4ade80;--pdt-warning:#fb923c;--pdt-danger:#f87171;--pdt-code-bg:#94a3b81f;--pdt-shadow-focus:0 0 0 2px #60a5fa59}}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:6px 16px;display:flex}._1q96x231{flex:1}._1q96x232{background-color:var(--pdt-border);width:1px;height:18px}._1q96x233{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);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{background-color:var(--pdt-warning);border-color:var(--pdt-warning);color:#fff}
+._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{color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}._83ws9k3{font-size:12px}._83ws9k4{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-height:28px;color:var(--pdt-text);border-radius:4px;padding:4px 8px;font-size:12px}._83ws9k4:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.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:0 0 #2563eb66}to{box-shadow:0 0 0 12px #2563eb00}}.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:#6366f11f;border-color:#6366f147}.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:#9333ea1f;border-color:#9333ea47}.kewyeud{background-color:#3b82f61f;border-color:#3b82f647}.kewyeue{background-color:#d977061f;border-color:#d9770647}.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{color:#166534;background-color:#22863a1f;border-color:#22863a59}.kewyeuo{color:#735c0f;background-color:#735c0f1f;border-color:#735c0f59}.kewyeup{color:#b3212c;background-color:#cb24311f;border-color:#cb243159}.kewyeuq{animation:.8s ease-in-out kewyeuj}._1m64tse0{flex:1;align-items:stretch;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}.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:#fff}.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}._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-info:#0369a1;--pdt-success:#166534;--pdt-warning:#9a3412;--pdt-danger:#b91c1c;--pdt-code-bg:#0f172a0f;--pdt-shadow-focus:0 0 0 2px #2563eb59;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-info:#38bdf8;--pdt-success:#4ade80;--pdt-warning:#fb923c;--pdt-danger:#f87171;--pdt-code-bg:#94a3b81f;--pdt-shadow-focus:0 0 0 2px #60a5fa59}}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:6px 16px;display:flex}._1q96x231{flex:1}._1q96x232{background-color:var(--pdt-border);width:1px;height:18px}._1q96x233{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);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{background-color:var(--pdt-warning);border-color:var(--pdt-warning);color:#fff}
 /*$vite$:1*/

package/lib/esm/surfaces/DevtoolsList.js

@@ -0,0 +1,37 @@
+import { list as e, listItem as t, listItemHeader as n, listItemInteractive as r, listItemMeta as i } from "./devtoolsSurfaces.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/surfaces/DevtoolsList.tsx
+function s(t) {
+	return /* @__PURE__ */ a("ul", {
+		className: e,
+		children: t.children
+	});
+}
+function c(e) {
+	let { children: s, header: c, interactive: l = !1, meta: u, onBlur: d, onFocus: f, onMouseEnter: p, onMouseLeave: m, tabIndex: h } = e, g = t;
+	l && (g = `${t} ${r}`);
+	let _ = null;
+	return u != null && (_ = /* @__PURE__ */ a("div", {
+		className: i,
+		children: u
+	})), /* @__PURE__ */ o("li", {
+		className: g,
+		onMouseEnter: p,
+		onMouseLeave: m,
+		onFocus: f,
+		onBlur: d,
+		tabIndex: h,
+		children: [
+			/* @__PURE__ */ a("header", {
+				className: n,
+				children: c
+			}),
+			_,
+			s
+		]
+	});
+}
+//#endregion
+export { s as DevtoolsList, c as DevtoolsListItem };
+
+//# sourceMappingURL=DevtoolsList.js.map

package/lib/esm/surfaces/DevtoolsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsList.js","names":[],"sources":["../../../src/surfaces/DevtoolsList.tsx"],"sourcesContent":["import type {\n  FocusEventHandler,\n  JSX,\n  MouseEventHandler,\n  PropsWithChildren,\n  ReactNode,\n} from 'react';\nimport {\n  list,\n  listItem,\n  listItemHeader,\n  listItemInteractive,\n  listItemMeta,\n} from './devtoolsSurfaces.css.js';\n\nexport type DevtoolsListProps = PropsWithChildren;\n\n/** Render a compact unstyled DevTools list. */\nexport function DevtoolsList(props: DevtoolsListProps): JSX.Element {\n  return <ul className={list}>{props.children}</ul>;\n}\n\nexport type DevtoolsListItemProps = PropsWithChildren<{\n  header: ReactNode;\n  meta?: ReactNode;\n  interactive?: boolean;\n  onMouseEnter?: MouseEventHandler<HTMLLIElement>;\n  onMouseLeave?: MouseEventHandler<HTMLLIElement>;\n  onFocus?: FocusEventHandler<HTMLLIElement>;\n  onBlur?: FocusEventHandler<HTMLLIElement>;\n  tabIndex?: number;\n}>;\n\n/** Render a card-like DevTools list item with optional interaction handlers. */\nexport function DevtoolsListItem(props: DevtoolsListItemProps): JSX.Element {\n  const {\n    children,\n    header,\n    interactive = false,\n    meta,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    tabIndex,\n  } = props;\n  let className = listItem;\n  if (interactive) {\n    className = `${listItem} ${listItemInteractive}`;\n  }\n\n  let metaContent: JSX.Element | null = null;\n  if (meta != null) {\n    metaContent = <div className={listItemMeta}>{meta}</div>;\n  }\n\n  return (\n    <li\n      className={className}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      tabIndex={tabIndex}\n    >\n      <header className={listItemHeader}>{header}</header>\n      {metaContent}\n      {children}\n    </li>\n  );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAa,GAAuC;CAClE,OAAO,kBAAC,MAAD;EAAI,WAAW;YAAO,EAAM;EAAc,CAAA;;AAenD,SAAgB,EAAiB,GAA2C;CAC1E,IAAM,EACJ,aACA,WACA,iBAAc,IACd,SACA,WACA,YACA,iBACA,iBACA,gBACE,GACA,IAAY;CAChB,AAAI,MACF,IAAY,GAAG,EAAS,GAAG;CAG7B,IAAI,IAAkC;CAKtC,OAJI,KAAQ,SACV,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAe;EAAW,CAAA,GAIxD,kBAAC,MAAD;EACa;EACG;EACA;EACL;EACD;EACE;YANZ;GAQE,kBAAC,UAAD;IAAQ,WAAW;cAAiB;IAAgB,CAAA;GACnD;GACA;GACE"}

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

@@ -1,7 +1,7 @@
 /* empty css                                */
 //#region src/surfaces/devtoolsSurfaces.css.ts
-var e = "ca0gms0", t = "ca0gms1", n = "ca0gms2", r = "ca0gms3", i = "ca0gms4", a = "ca0gms5";
+var e = "ca0gms0", t = "ca0gms1", n = "ca0gms2", r = "ca0gms3", i = "ca0gms4", a = "ca0gms5", o = "ca0gms6", s = "ca0gms7", c = "ca0gms8", l = "ca0gms9", u = "ca0gmsa";
 //#endregion
-export { e as card, t as cardHeader, n as cardTitle, r as section, i as sectionHeader, a as sectionTitle };
+export { e as card, t as cardHeader, n as cardTitle, o as list, s as listItem, l as listItemHeader, c as listItemInteractive, u as listItemMeta, r as section, i as sectionHeader, a as sectionTitle };
 
 //# sourceMappingURL=devtoolsSurfaces.css.js.map

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"],"mappings":""}
+{"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":""}

package/lib/types/DevtoolsComponents.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsComponents.stories.d.ts","sourceRoot":"","sources":["../../src/DevtoolsComponents.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAuBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqDnC,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAkBrC,CAAC"}
+{"version":3,"file":"DevtoolsComponents.stories.d.ts","sourceRoot":"","sources":["../../src/DevtoolsComponents.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuBvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAuBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqDnC,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsDhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAkBrC,CAAC"}

package/lib/types/content/DevtoolsCodeBlock.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 export type DevtoolsCodeBlockProps = {
     children: string;
+    className?: string;
 };
 export declare function DevtoolsCodeBlock(props: DevtoolsCodeBlockProps): JSX.Element;
 //# sourceMappingURL=DevtoolsCodeBlock.d.ts.map

package/lib/types/content/DevtoolsCodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsCodeBlock.d.ts","sourceRoot":"","sources":["../../../src/content/DevtoolsCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAGF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAI5E"}
+{"version":3,"file":"DevtoolsCodeBlock.d.ts","sourceRoot":"","sources":["../../../src/content/DevtoolsCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAGF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAQ5E"}

package/lib/types/content/DevtoolsJsonBlock.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+export type DevtoolsJsonBlockProps = {
+    value: unknown;
+    emptyFallback?: string;
+    serializationFallback?: string;
+    className?: string;
+};
+export declare const __testDevtoolsJsonBlock: {
+    readonly stringifyJsonValue: (value: unknown, serializationFallback?: string) => string;
+};
+export declare function DevtoolsJsonBlock(props: DevtoolsJsonBlockProps): JSX.Element;
+//# sourceMappingURL=DevtoolsJsonBlock.d.ts.map

package/lib/types/content/DevtoolsJsonBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsJsonBlock.d.ts","sourceRoot":"","sources":["../../../src/content/DevtoolsJsonBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF,eAAO,MAAM,uBAAuB;yCAV3B,OAAO,qCAEb,MAAM;CAUC,CAAC;AAGX,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAiB5E"}

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

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, JSX, ReactNode } from 'react';
+export type DevtoolsButtonProps = {
+    children: ReactNode;
+    onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+    disabled?: boolean;
+    title?: string;
+    'aria-label'?: string;
+    type?: 'button' | 'submit' | 'reset';
+    tone?: 'neutral' | 'danger';
+};
+export declare function DevtoolsButton(props: DevtoolsButtonProps): JSX.Element;
+//# sourceMappingURL=DevtoolsButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsButton.d.ts","sourceRoot":"","sources":["../../../src/controls/DevtoolsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlE,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA0BtE"}

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

@@ -0,0 +1,13 @@
+import type { ChangeEventHandler, JSX, ReactNode } from 'react';
+export type DevtoolsSelectOption = {
+    value: string;
+    label: ReactNode;
+};
+export type DevtoolsSelectProps = {
+    label: ReactNode;
+    value: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+    options: readonly DevtoolsSelectOption[];
+};
+export declare function DevtoolsSelect(props: DevtoolsSelectProps): JSX.Element;
+//# sourceMappingURL=DevtoolsSelect.d.ts.map

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

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

package/lib/types/controls/devtoolsControls.css.d.ts

@@ -0,0 +1,6 @@
+export declare const button: string;
+export declare const buttonDanger: string;
+export declare const selectField: string;
+export declare const selectLabel: string;
+export declare const select: string;
+//# sourceMappingURL=devtoolsControls.css.d.ts.map

package/lib/types/controls/devtoolsControls.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsControls.css.d.ts","sourceRoot":"","sources":["../../../src/controls/devtoolsControls.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,QA4BjB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAMtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,MAAM,QAcjB,CAAC"}

package/lib/types/feedback/DevtoolsDiffPills.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactNode } from 'react';
+export type DevtoolsDiffPillsDiff = {
+    added: readonly string[];
+    changed: readonly string[];
+    removed: readonly string[];
+};
+export type DevtoolsDiffPillsProps = {
+    diff?: DevtoolsDiffPillsDiff | null;
+    limit?: number;
+    variant?: 'block' | 'inline';
+    emptyFallback?: ReactNode;
+};
+export declare function DevtoolsDiffPills(props: DevtoolsDiffPillsProps): JSX.Element | null;
+//# sourceMappingURL=DevtoolsDiffPills.d.ts.map

package/lib/types/feedback/DevtoolsDiffPills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsDiffPills.d.ts","sourceRoot":"","sources":["../../../src/feedback/DevtoolsDiffPills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAa5C,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAyEF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,sBAAsB,GAC5B,GAAG,CAAC,OAAO,GAAG,IAAI,CA8BpB"}

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

@@ -17,4 +17,11 @@ export declare const statusLight: string;
 export declare const statusDot: string;
 export declare const statusReady: string;
 export declare const statusIdle: string;
+export declare const diffList: string;
+export declare const diffInline: string;
+export declare const diffPill: string;
+export declare const diffPillAdded: string;
+export declare const diffPillChanged: string;
+export declare const diffPillRemoved: string;
+export declare const diffPillFlash: string;
 //# sourceMappingURL=devtoolsFeedback.css.d.ts.map

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"}
+{"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"}

package/lib/types/index.d.ts

@@ -2,9 +2,14 @@ export { DevtoolsTheme, type DevtoolsThemeProps, } from './theme/DevtoolsTheme.j
 export { DevtoolsBadge, type DevtoolsBadgeProps, } from './feedback/DevtoolsBadge.js';
 export { DevtoolsPill, type DevtoolsPillProps, } from './feedback/DevtoolsPill.js';
 export { DevtoolsStatusLight, type DevtoolsStatusLightProps, } from './feedback/DevtoolsStatusLight.js';
+export { DevtoolsDiffPills, type DevtoolsDiffPillsDiff, type DevtoolsDiffPillsProps, } from './feedback/DevtoolsDiffPills.js';
+export { DevtoolsButton, type DevtoolsButtonProps, } from './controls/DevtoolsButton.js';
+export { DevtoolsSelect, type DevtoolsSelectOption, type DevtoolsSelectProps, } from './controls/DevtoolsSelect.js';
 export { DevtoolsCard, type DevtoolsCardProps, } from './surfaces/DevtoolsCard.js';
 export { DevtoolsSection, type DevtoolsSectionProps, } from './surfaces/DevtoolsSection.js';
+export { DevtoolsList, DevtoolsListItem, type DevtoolsListItemProps, type DevtoolsListProps, } from './surfaces/DevtoolsList.js';
 export { DevtoolsCodeBlock, type DevtoolsCodeBlockProps, } from './content/DevtoolsCodeBlock.js';
+export { DevtoolsJsonBlock, type DevtoolsJsonBlockProps, } from './content/DevtoolsJsonBlock.js';
 export { DevtoolsEmptyState, type DevtoolsEmptyStateProps, } from './empty_state/DevtoolsEmptyState.js';
 export { DevtoolsTabs, type DevtoolsTabItem, type DevtoolsTabsProps, } from './navigation/DevtoolsTabs.js';
 export { DevtoolsToolbar, DevtoolsToolbarGrow, type DevtoolsToolbarProps, } from './toolbar/DevtoolsToolbar.js';

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,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,+BAA+B,CAAC;AACvC,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,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"}

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;AAgBf,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,CAkI5E"}
+{"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"}

package/lib/types/surfaces/DevtoolsList.d.ts

@@ -0,0 +1,15 @@
+import type { FocusEventHandler, JSX, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+export type DevtoolsListProps = PropsWithChildren;
+export declare function DevtoolsList(props: DevtoolsListProps): JSX.Element;
+export type DevtoolsListItemProps = PropsWithChildren<{
+    header: ReactNode;
+    meta?: ReactNode;
+    interactive?: boolean;
+    onMouseEnter?: MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: MouseEventHandler<HTMLLIElement>;
+    onFocus?: FocusEventHandler<HTMLLIElement>;
+    onBlur?: FocusEventHandler<HTMLLIElement>;
+    tabIndex?: number;
+}>;
+export declare function DevtoolsListItem(props: DevtoolsListItemProps): JSX.Element;
+//# sourceMappingURL=DevtoolsList.d.ts.map

package/lib/types/surfaces/DevtoolsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevtoolsList.d.ts","sourceRoot":"","sources":["../../../src/surfaces/DevtoolsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,GAAG,EACH,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAGlD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAElE;AAED,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAGH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAoC1E"}

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

@@ -4,4 +4,9 @@ export declare const cardTitle: string;
 export declare const section: string;
 export declare const sectionHeader: string;
 export declare const sectionTitle: string;
+export declare const list: string;
+export declare const listItem: string;
+export declare const listItemInteractive: string;
+export declare const listItemHeader: string;
+export declare const listItemMeta: string;
 //# sourceMappingURL=devtoolsSurfaces.css.d.ts.map

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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumile/ui-devtools",
-  "version": "0.1.134",
+  "version": "0.1.142",
   "description": "Shared DevTools UI primitives for Kronex extensions",
   "type": "module",
   "license": "MIT",
@@ -24,6 +24,16 @@
       "import": "./lib/esm/content/*.js",
       "default": "./lib/esm/content/*.js"
     },
+    "./controls/*.js": {
+      "types": "./lib/types/controls/*.d.ts",
+      "import": "./lib/esm/controls/*.js",
+      "default": "./lib/esm/controls/*.js"
+    },
+    "./controls/*": {
+      "types": "./lib/types/controls/*.d.ts",
+      "import": "./lib/esm/controls/*.js",
+      "default": "./lib/esm/controls/*.js"
+    },
     "./empty_state/*.js": {
       "types": "./lib/types/empty_state/*.d.ts",
       "import": "./lib/esm/empty_state/*.js",