@plumile/ui-devtools 0.1.99 → 0.1.101

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;AAErB,QAAO,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};\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"}

package/lib/esm/empty_state/DevtoolsEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsEmptyState.js","names":[],"sources":["../../../src/empty_state/DevtoolsEmptyState.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { actions, description, root, title } from './devtoolsEmptyState.css.js';\n\nexport type DevtoolsEmptyStateProps = {\n  title: ReactNode;\n  description: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n};\n\n/** Render a standardized empty state with optional actions. */\nexport function DevtoolsEmptyState(\n  props: DevtoolsEmptyStateProps,\n): JSX.Element {\n  const {\n    description: body,\n    primaryAction,\n    secondaryAction,\n    title: heading,\n  } = props;\n  const hasActions = primaryAction != null || secondaryAction != null;\n\n  return (\n    <div className={root} role=\"status\">\n      <h2 className={title}>{heading}</h2>\n      <p className={description}>{body}</p>\n      {hasActions && (\n        <div className={actions}>\n          {primaryAction ?? null}\n          {secondaryAction ?? null}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AAWA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,aAAa,GACb,kBACA,oBACA,OAAO,MACL;AAGJ,QACE,kBAAC,OAAD;EAAK,WAAW;EAAM,MAAK;YAA3B;GACE,kBAAC,MAAD;IAAI,WAAW;cAAQ;IAAa,CAAA;GACpC,kBAAC,KAAD;IAAG,WAAW;cAAc;IAAS,CAAA;IALtB,KAAiB,QAAQ,KAAmB,SAOzD,kBAAC,OAAD;IAAK,WAAA;cAAL,CACG,KAAiB,MACjB,KAAmB,KAChB;;GAEJ"}
+{"version":3,"file":"DevtoolsEmptyState.js","names":[],"sources":["../../../src/empty_state/DevtoolsEmptyState.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { actions, description, root, title } from './devtoolsEmptyState.css.js';\n\nexport type DevtoolsEmptyStateProps = {\n  title: ReactNode;\n  description: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n};\n\n/** Render a standardized empty state with optional actions. */\nexport function DevtoolsEmptyState(\n  props: DevtoolsEmptyStateProps,\n): JSX.Element {\n  const {\n    description: body,\n    primaryAction,\n    secondaryAction,\n    title: heading,\n  } = props;\n  const hasActions = primaryAction != null || secondaryAction != null;\n\n  return (\n    <div className={root} role=\"status\">\n      <h2 className={title}>{heading}</h2>\n      <p className={description}>{body}</p>\n      {hasActions && (\n        <div className={actions}>\n          {primaryAction ?? null}\n          {secondaryAction ?? null}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AAWA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,aAAa,GACb,kBACA,oBACA,OAAO,MACL;CAGJ,OACE,kBAAC,OAAD;EAAK,WAAW;EAAM,MAAK;YAA3B;GACE,kBAAC,MAAD;IAAI,WAAW;cAAQ;IAAa,CAAA;GACpC,kBAAC,KAAD;IAAG,WAAW;cAAc;IAAS,CAAA;IALtB,KAAiB,QAAQ,KAAmB,SAOzD,kBAAC,OAAD;IAAK,WAAA;cAAL,CACG,KAAiB,MACjB,KAAmB,KAChB;;GAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsBadge.js","names":[],"sources":["../../../src/feedback/DevtoolsBadge.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport {\n  badge,\n  badgeDanger,\n  badgeInfo,\n  badgeNeutral,\n  badgeSuccess,\n  badgeWarning,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsBadgeProps = PropsWithChildren<{\n  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n}>;\n\n/** Render a compact badge with tone-specific styling. */\nexport function DevtoolsBadge(props: DevtoolsBadgeProps): JSX.Element {\n  const { children, tone = 'neutral' } = props;\n\n  let toneClass = badgeNeutral;\n  switch (tone) {\n    case 'info':\n      toneClass = badgeInfo;\n      break;\n    case 'success':\n      toneClass = badgeSuccess;\n      break;\n    case 'warning':\n      toneClass = badgeWarning;\n      break;\n    case 'danger':\n      toneClass = badgeDanger;\n      break;\n    case 'neutral':\n    default:\n      toneClass = badgeNeutral;\n      break;\n  }\n\n  return <span className={`${badge} ${toneClass}`}>{children}</span>;\n}\n"],"mappings":";;;AAeA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,aAAU,UAAO,cAAc,GAEnC,IAAY;AAChB,SAAQ,GAAR;EACE,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EAEF;AACE,OAAY;AACZ;;AAGJ,QAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAM,GAAG;EAAc;EAAgB,CAAA"}
+{"version":3,"file":"DevtoolsBadge.js","names":[],"sources":["../../../src/feedback/DevtoolsBadge.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport {\n  badge,\n  badgeDanger,\n  badgeInfo,\n  badgeNeutral,\n  badgeSuccess,\n  badgeWarning,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsBadgeProps = PropsWithChildren<{\n  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n}>;\n\n/** Render a compact badge with tone-specific styling. */\nexport function DevtoolsBadge(props: DevtoolsBadgeProps): JSX.Element {\n  const { children, tone = 'neutral' } = props;\n\n  let toneClass = badgeNeutral;\n  switch (tone) {\n    case 'info':\n      toneClass = badgeInfo;\n      break;\n    case 'success':\n      toneClass = badgeSuccess;\n      break;\n    case 'warning':\n      toneClass = badgeWarning;\n      break;\n    case 'danger':\n      toneClass = badgeDanger;\n      break;\n    case 'neutral':\n    default:\n      toneClass = badgeNeutral;\n      break;\n  }\n\n  return <span className={`${badge} ${toneClass}`}>{children}</span>;\n}\n"],"mappings":";;;AAeA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,aAAU,UAAO,cAAc,GAEnC,IAAY;CAChB,QAAQ,GAAR;EACE,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EAEF;GACE,IAAY;GACZ;;CAGJ,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAM,GAAG;EAAc;EAAgB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsPill.js","names":[],"sources":["../../../src/feedback/DevtoolsPill.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport {\n  pill,\n  pillHistory,\n  pillNavigation,\n  pillNeutral,\n  pillPopstate,\n  pillPrepare,\n  pillPreload,\n  pillSnapshot,\n  pillUpdate,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsPillProps = PropsWithChildren<{\n  tone?:\n    | 'neutral'\n    | 'navigation'\n    | 'update'\n    | 'snapshot'\n    | 'preload'\n    | 'history'\n    | 'popstate'\n    | 'prepare';\n}>;\n\n/** Render a small labeled pill for router/devtools events. */\nexport function DevtoolsPill(props: DevtoolsPillProps): JSX.Element {\n  const { children, tone = 'neutral' } = props;\n\n  let toneClass = pillNeutral;\n  switch (tone) {\n    case 'navigation':\n      toneClass = pillNavigation;\n      break;\n    case 'update':\n      toneClass = pillUpdate;\n      break;\n    case 'snapshot':\n      toneClass = pillSnapshot;\n      break;\n    case 'preload':\n      toneClass = pillPreload;\n      break;\n    case 'history':\n      toneClass = pillHistory;\n      break;\n    case 'popstate':\n      toneClass = pillPopstate;\n      break;\n    case 'prepare':\n      toneClass = pillPrepare;\n      break;\n    case 'neutral':\n    default:\n      toneClass = pillNeutral;\n      break;\n  }\n\n  return <span className={`${pill} ${toneClass}`}>{children}</span>;\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,aAAU,UAAO,cAAc,GAEnC,IAAY;AAChB,SAAQ,GAAR;EACE,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY;AACZ;EAEF;AACE,OAAY;AACZ;;AAGJ,QAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAK,GAAG;EAAc;EAAgB,CAAA"}
+{"version":3,"file":"DevtoolsPill.js","names":[],"sources":["../../../src/feedback/DevtoolsPill.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport {\n  pill,\n  pillHistory,\n  pillNavigation,\n  pillNeutral,\n  pillPopstate,\n  pillPrepare,\n  pillPreload,\n  pillSnapshot,\n  pillUpdate,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsPillProps = PropsWithChildren<{\n  tone?:\n    | 'neutral'\n    | 'navigation'\n    | 'update'\n    | 'snapshot'\n    | 'preload'\n    | 'history'\n    | 'popstate'\n    | 'prepare';\n}>;\n\n/** Render a small labeled pill for router/devtools events. */\nexport function DevtoolsPill(props: DevtoolsPillProps): JSX.Element {\n  const { children, tone = 'neutral' } = props;\n\n  let toneClass = pillNeutral;\n  switch (tone) {\n    case 'navigation':\n      toneClass = pillNavigation;\n      break;\n    case 'update':\n      toneClass = pillUpdate;\n      break;\n    case 'snapshot':\n      toneClass = pillSnapshot;\n      break;\n    case 'preload':\n      toneClass = pillPreload;\n      break;\n    case 'history':\n      toneClass = pillHistory;\n      break;\n    case 'popstate':\n      toneClass = pillPopstate;\n      break;\n    case 'prepare':\n      toneClass = pillPrepare;\n      break;\n    case 'neutral':\n    default:\n      toneClass = pillNeutral;\n      break;\n  }\n\n  return <span className={`${pill} ${toneClass}`}>{children}</span>;\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,aAAU,UAAO,cAAc,GAEnC,IAAY;CAChB,QAAQ,GAAR;EACE,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EAEF;GACE,IAAY;GACZ;;CAGJ,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAK,GAAG;EAAc;EAAgB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsStatusLight.js","names":[],"sources":["../../../src/feedback/DevtoolsStatusLight.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport {\n  statusDot,\n  statusIdle,\n  statusLight,\n  statusReady,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsStatusLightProps = {\n  state: 'ready' | 'idle';\n  label?: ReactNode;\n  title?: string;\n};\n\n/** Render a status indicator dot with an optional text label. */\nexport function DevtoolsStatusLight(\n  props: DevtoolsStatusLightProps,\n): JSX.Element {\n  const { state, label, title } = props;\n  let dotClass = statusIdle;\n  if (state === 'ready') {\n    dotClass = statusReady;\n  }\n\n  return (\n    <span className={statusLight} title={title}>\n      <span className={`${statusDot} ${dotClass}`} aria-hidden=\"true\" />\n      {label ?? null}\n    </span>\n  );\n}\n"],"mappings":";;;AAeA,SAAgB,EACd,GACa;CACb,IAAM,EAAE,UAAO,UAAO,aAAU,GAC5B,IAAW;AAKf,QAJI,MAAU,YACZ,IAAW,IAIX,kBAAC,QAAD;EAAM,WAAW;EAAoB;YAArC,CACE,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAU,GAAG;GAAY,eAAY;GAAS,CAAA,EACjE,KAAS,KACL"}
+{"version":3,"file":"DevtoolsStatusLight.js","names":[],"sources":["../../../src/feedback/DevtoolsStatusLight.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport {\n  statusDot,\n  statusIdle,\n  statusLight,\n  statusReady,\n} from './devtoolsFeedback.css.js';\n\nexport type DevtoolsStatusLightProps = {\n  state: 'ready' | 'idle';\n  label?: ReactNode;\n  title?: string;\n};\n\n/** Render a status indicator dot with an optional text label. */\nexport function DevtoolsStatusLight(\n  props: DevtoolsStatusLightProps,\n): JSX.Element {\n  const { state, label, title } = props;\n  let dotClass = statusIdle;\n  if (state === 'ready') {\n    dotClass = statusReady;\n  }\n\n  return (\n    <span className={statusLight} title={title}>\n      <span className={`${statusDot} ${dotClass}`} aria-hidden=\"true\" />\n      {label ?? null}\n    </span>\n  );\n}\n"],"mappings":";;;AAeA,SAAgB,EACd,GACa;CACb,IAAM,EAAE,UAAO,UAAO,aAAU,GAC5B,IAAW;CAKf,OAJI,MAAU,YACZ,IAAW,IAIX,kBAAC,QAAD;EAAM,WAAW;EAAoB;YAArC,CACE,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAU,GAAG;GAAY,eAAY;GAAS,CAAA,EACjE,KAAS,KACL"}

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;AAO7E,QANI,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;AACtB,MAAI,CAAC,EAAM,OACT;EAEF,IAAM,IAAQ,EAAM,UAAU,EAAM;AACpC,IACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,EAAgB,CAClE;IAEH;EAAC;EAAiB;EAAiB;EAAqB,CACzD,EAEK,IAAkB,QAAkB;AACnC,IAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB;IACvD,CAAC,EAAkB,CAAC;AAEvB,eACe;AAEX,EADA,OAAO,oBAAoB,eAAe,EAAkB,EAC5D,OAAO,oBAAoB,aAAa,EAAgB;IAEzD,CAAC,GAAmB,EAAgB,CAAC;CAExC,IAAM,IAAoB,GACvB,MAA6C;AACxC,OAAkB,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;AAC7C,MAAI,KAAkB,KACpB;EAEF,IAAI,IAAO;AAIX,MAHI,EAAM,aACR,IAAO,KAEL,EAAM,QAAQ,aAAa;AAE7B,GADA,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;AACD;;AAEF,EAAI,EAAM,QAAQ,iBAChB,EAAM,gBAAgB,EACtB,EACE,EAAW,IAAe,GAAM,GAAiB,EAAgB,CAClE;IAGL;EACE;EACA;EACA;EACA;EACA;EACD,CACF,EAEG,IAAgB;AAKpB,QAJI,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  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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTabs.js","names":[],"sources":["../../../src/navigation/DevtoolsTabs.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { container, tab, tabSelected } from './devtoolsTabs.css.js';\n\nexport type DevtoolsTabItem = {\n  id: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsTabsProps = {\n  items: readonly DevtoolsTabItem[];\n  selectedId: string;\n  onSelect: (id: string) => void;\n  ariaLabel?: string;\n};\n\n/** Render a simple tab list with controlled selection. */\nexport function DevtoolsTabs(props: DevtoolsTabsProps): JSX.Element {\n  const { ariaLabel, items, onSelect, selectedId } = props;\n\n  return (\n    <div className={container} role=\"tablist\" aria-label={ariaLabel}>\n      {items.map((item) => {\n        const isSelected = item.id === selectedId;\n        let className = tab;\n        if (isSelected) {\n          className = `${tab} ${tabSelected}`;\n        }\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            className={className}\n            onClick={() => {\n              onSelect(item.id);\n            }}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,cAAW,UAAO,aAAU,kBAAe;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAW;EAAW,MAAK;EAAU,cAAY;YACnD,EAAM,KAAK,MAAS;GACnB,IAAM,IAAa,EAAK,OAAO,GAC3B,IAAY;AAKhB,UAJI,MACF,IAAY,GAAG,EAAI,GAAG,MAItB,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe;IACJ;IACX,eAAe;AACb,OAAS,EAAK,GAAG;;cAGlB,EAAK;IACC,EAVF,EAAK,GAUH;IAEX;EACE,CAAA"}
+{"version":3,"file":"DevtoolsTabs.js","names":[],"sources":["../../../src/navigation/DevtoolsTabs.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { container, tab, tabSelected } from './devtoolsTabs.css.js';\n\nexport type DevtoolsTabItem = {\n  id: string;\n  label: ReactNode;\n};\n\nexport type DevtoolsTabsProps = {\n  items: readonly DevtoolsTabItem[];\n  selectedId: string;\n  onSelect: (id: string) => void;\n  ariaLabel?: string;\n};\n\n/** Render a simple tab list with controlled selection. */\nexport function DevtoolsTabs(props: DevtoolsTabsProps): JSX.Element {\n  const { ariaLabel, items, onSelect, selectedId } = props;\n\n  return (\n    <div className={container} role=\"tablist\" aria-label={ariaLabel}>\n      {items.map((item) => {\n        const isSelected = item.id === selectedId;\n        let className = tab;\n        if (isSelected) {\n          className = `${tab} ${tabSelected}`;\n        }\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            className={className}\n            onClick={() => {\n              onSelect(item.id);\n            }}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,cAAW,UAAO,aAAU,kBAAe;CAEnD,OACE,kBAAC,OAAD;EAAK,WAAW;EAAW,MAAK;EAAU,cAAY;YACnD,EAAM,KAAK,MAAS;GACnB,IAAM,IAAa,EAAK,OAAO,GAC3B,IAAY;GAKhB,OAJI,MACF,IAAY,GAAG,EAAI,GAAG,MAItB,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe;IACJ;IACX,eAAe;KACb,EAAS,EAAK,GAAG;;cAGlB,EAAK;IACC,EAVF,EAAK,GAUH;IAEX;EACE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsCard.js","names":[],"sources":["../../../src/surfaces/DevtoolsCard.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren, ReactNode } from 'react';\nimport { card, cardHeader, cardTitle } from './devtoolsSurfaces.css.js';\n\nexport type DevtoolsCardProps = PropsWithChildren<{\n  title?: ReactNode;\n  actions?: ReactNode;\n}>;\n\n/** Render a card surface with an optional header area. */\nexport function DevtoolsCard(props: DevtoolsCardProps): JSX.Element {\n  const { actions, children, title } = props;\n  const hasHeader = title != null || actions != null;\n\n  let titleNode: ReactNode = <span />;\n  if (title != null) {\n    titleNode = <h2 className={cardTitle}>{title}</h2>;\n  }\n\n  return (\n    <section className={card}>\n      {hasHeader && (\n        <header className={cardHeader}>\n          {titleNode}\n          {actions ?? null}\n        </header>\n      )}\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;;AASA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,YAAS,aAAU,aAAU,GAC/B,IAAY,KAAS,QAAQ,KAAW,MAE1C,IAAuB,kBAAC,QAAD,EAAQ,CAAA;AAKnC,QAJI,KAAS,SACX,IAAY,kBAAC,MAAD;EAAI,WAAW;YAAY;EAAW,CAAA,GAIlD,kBAAC,WAAD;EAAS,WAAW;YAApB,CACG,KACC,kBAAC,UAAD;GAAQ,WAAA;aAAR,CACG,GACA,KAAW,KACL;MAEV,EACO"}
+{"version":3,"file":"DevtoolsCard.js","names":[],"sources":["../../../src/surfaces/DevtoolsCard.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren, ReactNode } from 'react';\nimport { card, cardHeader, cardTitle } from './devtoolsSurfaces.css.js';\n\nexport type DevtoolsCardProps = PropsWithChildren<{\n  title?: ReactNode;\n  actions?: ReactNode;\n}>;\n\n/** Render a card surface with an optional header area. */\nexport function DevtoolsCard(props: DevtoolsCardProps): JSX.Element {\n  const { actions, children, title } = props;\n  const hasHeader = title != null || actions != null;\n\n  let titleNode: ReactNode = <span />;\n  if (title != null) {\n    titleNode = <h2 className={cardTitle}>{title}</h2>;\n  }\n\n  return (\n    <section className={card}>\n      {hasHeader && (\n        <header className={cardHeader}>\n          {titleNode}\n          {actions ?? null}\n        </header>\n      )}\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;;AASA,SAAgB,EAAa,GAAuC;CAClE,IAAM,EAAE,YAAS,aAAU,aAAU,GAC/B,IAAY,KAAS,QAAQ,KAAW,MAE1C,IAAuB,kBAAC,QAAD,EAAQ,CAAA;CAKnC,OAJI,KAAS,SACX,IAAY,kBAAC,MAAD;EAAI,WAAW;YAAY;EAAW,CAAA,GAIlD,kBAAC,WAAD;EAAS,WAAW;YAApB,CACG,KACC,kBAAC,UAAD;GAAQ,WAAA;aAAR,CACG,GACA,KAAW,KACL;MAEV,EACO"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsSection.js","names":[],"sources":["../../../src/surfaces/DevtoolsSection.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren, ReactNode } from 'react';\nimport {\n  section,\n  sectionHeader,\n  sectionTitle,\n} from './devtoolsSurfaces.css.js';\n\nexport type DevtoolsSectionProps = PropsWithChildren<{\n  title: ReactNode;\n  actions?: ReactNode;\n}>;\n\n/** Render a titled section with optional header actions. */\nexport function DevtoolsSection(props: DevtoolsSectionProps): JSX.Element {\n  const { actions, children, title } = props;\n\n  return (\n    <section className={section}>\n      <header className={sectionHeader}>\n        <h2 className={sectionTitle}>{title}</h2>\n        {actions ?? null}\n      </header>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;;AAaA,SAAgB,EAAgB,GAA0C;CACxE,IAAM,EAAE,YAAS,aAAU,aAAU;AAErC,QACE,kBAAC,WAAD;EAAS,WAAW;YAApB,CACE,kBAAC,UAAD;GAAQ,WAAW;aAAnB,CACE,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EACxC,KAAW,KACL;MACR,EACO"}
+{"version":3,"file":"DevtoolsSection.js","names":[],"sources":["../../../src/surfaces/DevtoolsSection.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren, ReactNode } from 'react';\nimport {\n  section,\n  sectionHeader,\n  sectionTitle,\n} from './devtoolsSurfaces.css.js';\n\nexport type DevtoolsSectionProps = PropsWithChildren<{\n  title: ReactNode;\n  actions?: ReactNode;\n}>;\n\n/** Render a titled section with optional header actions. */\nexport function DevtoolsSection(props: DevtoolsSectionProps): JSX.Element {\n  const { actions, children, title } = props;\n\n  return (\n    <section className={section}>\n      <header className={sectionHeader}>\n        <h2 className={sectionTitle}>{title}</h2>\n        {actions ?? null}\n      </header>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;;AAaA,SAAgB,EAAgB,GAA0C;CACxE,IAAM,EAAE,YAAS,aAAU,aAAU;CAErC,OACE,kBAAC,WAAD;EAAS,WAAW;YAApB,CACE,kBAAC,UAAD;GAAQ,WAAW;aAAnB,CACE,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EACxC,KAAW,KACL;MACR,EACO"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsTheme.js","names":[],"sources":["../../../src/theme/DevtoolsTheme.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { root } from './devtoolsTheme.css.js';\n\nexport type DevtoolsThemeProps = PropsWithChildren;\n\n/** Provide the root devtools theme wrapper. */\nexport function DevtoolsTheme(props: DevtoolsThemeProps): JSX.Element {\n  const { children } = props;\n\n  return <div className={root}>{children}</div>;\n}\n"],"mappings":";;;AAMA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,gBAAa;AAErB,QAAO,kBAAC,OAAD;EAAK,WAAW;EAAO;EAAe,CAAA"}
+{"version":3,"file":"DevtoolsTheme.js","names":[],"sources":["../../../src/theme/DevtoolsTheme.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { root } from './devtoolsTheme.css.js';\n\nexport type DevtoolsThemeProps = PropsWithChildren;\n\n/** Provide the root devtools theme wrapper. */\nexport function DevtoolsTheme(props: DevtoolsThemeProps): JSX.Element {\n  const { children } = props;\n\n  return <div className={root}>{children}</div>;\n}\n"],"mappings":";;;AAMA,SAAgB,EAAc,GAAwC;CACpE,IAAM,EAAE,gBAAa;CAErB,OAAO,kBAAC,OAAD;EAAK,WAAW;EAAO;EAAe,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsToolbar.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbar.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { grow, toolbar } from './devtoolsToolbar.css.js';\n\nexport type DevtoolsToolbarProps = PropsWithChildren<{\n  ariaLabel?: string;\n}>;\n\n/** Render a toolbar container with the devtools visual treatment. */\nexport function DevtoolsToolbar(props: DevtoolsToolbarProps): JSX.Element {\n  const { ariaLabel, children } = props;\n\n  return (\n    <div className={toolbar} role=\"toolbar\" aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n\n/** Reserve flexible space between toolbar items. */\nexport function DevtoolsToolbarGrow(): JSX.Element {\n  return <span className={grow} aria-hidden=\"true\" />;\n}\n"],"mappings":";;;AAQA,SAAgB,EAAgB,GAA0C;CACxE,IAAM,EAAE,cAAW,gBAAa;AAEhC,QACE,kBAAC,OAAD;EAAK,WAAW;EAAS,MAAK;EAAU,cAAY;EACjD;EACG,CAAA;;AAKV,SAAgB,IAAmC;AACjD,QAAO,kBAAC,QAAD;EAAM,WAAW;EAAM,eAAY;EAAS,CAAA"}
+{"version":3,"file":"DevtoolsToolbar.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbar.tsx"],"sourcesContent":["import type { JSX, PropsWithChildren } from 'react';\nimport { grow, toolbar } from './devtoolsToolbar.css.js';\n\nexport type DevtoolsToolbarProps = PropsWithChildren<{\n  ariaLabel?: string;\n}>;\n\n/** Render a toolbar container with the devtools visual treatment. */\nexport function DevtoolsToolbar(props: DevtoolsToolbarProps): JSX.Element {\n  const { ariaLabel, children } = props;\n\n  return (\n    <div className={toolbar} role=\"toolbar\" aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n\n/** Reserve flexible space between toolbar items. */\nexport function DevtoolsToolbarGrow(): JSX.Element {\n  return <span className={grow} aria-hidden=\"true\" />;\n}\n"],"mappings":";;;AAQA,SAAgB,EAAgB,GAA0C;CACxE,IAAM,EAAE,cAAW,gBAAa;CAEhC,OACE,kBAAC,OAAD;EAAK,WAAW;EAAS,MAAK;EAAU,cAAY;EACjD;EACG,CAAA;;AAKV,SAAgB,IAAmC;CACjD,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAM,eAAY;EAAS,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsToolbarButton.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { button, buttonActive } from './devtoolsToolbar.css.js';\n\nexport type DevtoolsToolbarButtonProps = {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  active?: boolean;\n  title?: string;\n  icon?: ReactNode;\n  pressed?: boolean;\n};\n\n/** Render a toolbar button with optional active and pressed states. */\nexport function DevtoolsToolbarButton(\n  props: DevtoolsToolbarButtonProps,\n): JSX.Element {\n  const {\n    active = false,\n    disabled,\n    icon,\n    label,\n    onClick,\n    pressed,\n    title,\n  } = props;\n\n  let className = button;\n  if (active) {\n    className = `${button} ${buttonActive}`;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      disabled={disabled}\n      title={title}\n      aria-pressed={pressed}\n      onClick={onClick}\n    >\n      {icon ?? null}\n      <span>{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;AAcA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,YAAS,IACT,aACA,SACA,UACA,YACA,YACA,aACE,GAEA,IAAY;AAKhB,QAJI,MACF,IAAY,GAAG,EAAO,GAAG,MAIzB,kBAAC,UAAD;EACE,MAAK;EACM;EACD;EACH;EACP,gBAAc;EACL;YANX,CAQG,KAAQ,MACT,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,CACb"}
+{"version":3,"file":"DevtoolsToolbarButton.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarButton.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\nimport { button, buttonActive } from './devtoolsToolbar.css.js';\n\nexport type DevtoolsToolbarButtonProps = {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  active?: boolean;\n  title?: string;\n  icon?: ReactNode;\n  pressed?: boolean;\n};\n\n/** Render a toolbar button with optional active and pressed states. */\nexport function DevtoolsToolbarButton(\n  props: DevtoolsToolbarButtonProps,\n): JSX.Element {\n  const {\n    active = false,\n    disabled,\n    icon,\n    label,\n    onClick,\n    pressed,\n    title,\n  } = props;\n\n  let className = button;\n  if (active) {\n    className = `${button} ${buttonActive}`;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      disabled={disabled}\n      title={title}\n      aria-pressed={pressed}\n      onClick={onClick}\n    >\n      {icon ?? null}\n      <span>{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;AAcA,SAAgB,EACd,GACa;CACb,IAAM,EACJ,YAAS,IACT,aACA,SACA,UACA,YACA,YACA,aACE,GAEA,IAAY;CAKhB,OAJI,MACF,IAAY,GAAG,EAAO,GAAG,MAIzB,kBAAC,UAAD;EACE,MAAK;EACM;EACD;EACH;EACP,gBAAc;EACL;YANX,CAQG,KAAQ,MACT,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,CACb"}

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

@@ -1 +1 @@
-{"version":3,"file":"DevtoolsToolbarSeparator.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarSeparator.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { separator } from './devtoolsToolbar.css.js';\n\n/** Render a visual separator between toolbar groups. */\nexport function DevtoolsToolbarSeparator(): JSX.Element {\n  return <span className={separator} aria-hidden=\"true\" />;\n}\n"],"mappings":";;;AAIA,SAAgB,IAAwC;AACtD,QAAO,kBAAC,QAAD;EAAM,WAAW;EAAW,eAAY;EAAS,CAAA"}
+{"version":3,"file":"DevtoolsToolbarSeparator.js","names":[],"sources":["../../../src/toolbar/DevtoolsToolbarSeparator.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { separator } from './devtoolsToolbar.css.js';\n\n/** Render a visual separator between toolbar groups. */\nexport function DevtoolsToolbarSeparator(): JSX.Element {\n  return <span className={separator} aria-hidden=\"true\" />;\n}\n"],"mappings":";;;AAIA,SAAgB,IAAwC;CACtD,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAW,eAAY;EAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumile/ui-devtools",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "description": "Shared DevTools UI primitives for Kronex extensions",
   "type": "module",
   "license": "MIT",
@@ -38,14 +38,14 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "rimraf": "6.1.3",
     "typescript": "6.0.3"
   },
   "peerDependencies": {
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "files": [
     "lib",