npm - @plumile/ui-devtools - Versions diffs - 0.1.194 → 0.1.195 - Mend

@plumile/ui-devtools 0.1.194 → 0.1.195

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

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

	@@ -1 +1 @@
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,CAAC;CACtC,QAAQ;EACN,OAAO;CACT;AACF,GAEa,IAA0B,EACrC,sBACF;AAGA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,UACA,mBAAgB,GAChB,2BAAwB,GACxB,iBACE;CAMJ,OAJI,KAAiC,OAC5B,kBAAC,QAAD;EAAiB;~~YAAY~~;CAAoB,CAAA,IAIxD,kBAAC,GAAD;EAA8B;~~YAC3B~~,EAAmB,GAAO,CAAqB;CAC/B,CAAA;AAEvB"}
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,CAAC;CACtC,QAAQ;EACN,OAAO;CACT;AACF,GAEa,IAA0B,EACrC,sBACF;AAGA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,UACA,mBAAgB,GAChB,2BAAwB,GACxB,iBACE;CAMJ,OAJI,KAAiC,OAC5B,kBAAC,QAAD;EAAiB;EAAY,UAAA;CAAoB,CAAA,IAIxD,kBAAC,GAAD;EAA8B;EAC3B,UAAA,EAAmB,GAAO,CAAqB;CAC/B,CAAA;AAEvB"}

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

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

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

	@@ -1 +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;CAGJ,OACE,kBAAC,OAAD;EAAK,WAAW;EAAM,MAAK;~~YAA3B~~;GACE,kBAAC,MAAD;IAAI,WAAW;~~cAAQ~~;GAAY,CAAA;GACnC,kBAAC,KAAD;IAAG,WAAW;~~cAAc~~;GAAQ,CAAA;IALrB,KAAiB,QAAQ,KAAmB,SAOzD,kBAAC,OAAD;IAAK,WAAA;~~cAAL~~,CACG,KAAiB,MACjB,KAAmB,IACjB;;EAEJ;;AAET"}
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;CAGJ,OACE,kBAAC,OAAD;EAAK,WAAW;EAAM,MAAK;EAA3B,UAAA;GACE,kBAAC,MAAD;IAAI,WAAW;IAAQ,UAAA;GAAY,CAAA;GACnC,kBAAC,KAAD;IAAG,WAAW;IAAc,UAAA;GAAQ,CAAA;IALrB,KAAiB,QAAQ,KAAmB,SAOzD,kBAAC,OAAD;IAAK,WAAA;IAAL,UAAA,CACG,KAAiB,MACjB,KAAmB,IACjB;;EAEJ;;AAET"}

package/lib/esm/feedback/DevtoolsBadge.js CHANGED Viewed

@@ -16,9 +16,7 @@ function s(s) {
 		case "danger":
 			u = t;
 			break;
-		default:
-			u = r;
-			break;
+		default: u = r;
 	}
 	return /* @__PURE__ */ o("span", {
 		className: `${e} ${u}`,

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

	@@ -1 +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;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~~;~~CACJ;~~CAEA,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAM,GAAG;EAAc;CAAe,CAAA;AACnE"}
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;CAChB,QAAQ,GAAR;EACE,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK;GACH,IAAY;GACZ;EAEF,SACE,IAAY;CAEhB;CAEA,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAM,GAAG;EAAc;CAAe,CAAA;AACnE"}

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

	@@ -1 +1 @@
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;AACX,GAEM,IAA0C;CAC9C,OAAO;CACP,SAAS;CACT,SAAS;AACX;AAGA,SAAS,EAAU,GAAgB,GAAuB;CACxD,OAAO,GAAG,IAAS;AACrB;AAGA,SAAS,EAAgB,GAAgB,GAA2B;CAClE,OAAO,GAAG,EAAO,GAAG;AACtB;AAGA,SAAS,EAAe,GAA8C;CAIpE,OAHI,KAAiB,OACZ,OAEF,kBAAA,GAAA,EAAA,UAAG,EAAgB,CAAA;AAC5B;AAGA,SAAS,EACP,GACA,GACA,GACA,GACe;CACf,IAAI,EAAM,WAAW,KAAK,IAAQ,GAChC,OAAO,CAAC;CAGV,IAAM,IAAS,EAAe,IACxB,IAAc,CAAC,GAAU,EAAc,EAAK;CAClD,AAAI,KACF,EAAY,KAAK,CAAa;CAEhC,IAAM,IAAY,EAAY,KAAK,GAAG,GAChC,IAAQ,EAAM,MAAM,GAAG,CAAK,GAC5B,IAAQ,EAAM,KAAK,GAAM,MAE3B,kBAAC,QAAD;EAAkD;~~YAC~~/C,EAAU,GAAQ,CAAI;CACnB,GAFK,GAAG,EAAK,GAAG,EAAK,GAAG,GAExB,CAET;CAED,IAAI,EAAM,SAAS,EAAM,QAAQ;EAC/B,IAAM,IAAY,EAAM,SAAS,EAAM;EACvC,EAAM,KACJ,kBAAC,QAAD;GAAsC;~~aACnC~~,EAAgB,GAAQ,CAAS;EAC9B,GAFK,GAAG,EAAK,MAEb,CACR;CACF;CAEA,OAAO;AACT;AAGA,SAAgB,EACd,GACoB;CACpB,IAAM,EACJ,SACA,mBAAgB,MAChB,WAAQ,GACR,aAAU,YACR;CAEJ,IAAI,KAAQ,MACV,OAAO,EAAe,CAAa;CAGrC,IAAM,IAAQ,MAAY,SACpB,IAAQ;EACZ,GAAG,EAAU,EAAK,OAAO,SAAS,GAAO,CAAK;EAC9C,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,CAAK;EAClD,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,CAAK;CACpD;CAEA,IAAI,EAAM,WAAW,GACnB,OAAO,EAAe,CAAa;CAGrC,IAAI,IAA0B,OAC1B,IAAY;CAKhB,OAJI,MAAY,aACd,IAAU,QACV,IAAY,IAEP,kBAAC,GAAD;EAAoB;~~YAAY~~;CAAe,CAAA;AACxD"}
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;AACX,GAEM,IAA0C;CAC9C,OAAO;CACP,SAAS;CACT,SAAS;AACX;AAGA,SAAS,EAAU,GAAgB,GAAuB;CACxD,OAAO,GAAG,IAAS;AACrB;AAGA,SAAS,EAAgB,GAAgB,GAA2B;CAClE,OAAO,GAAG,EAAO,GAAG;AACtB;AAGA,SAAS,EAAe,GAA8C;CAIpE,OAHI,KAAiB,OACZ,OAEF,kBAAA,GAAA,EAAA,UAAG,EAAgB,CAAA;AAC5B;AAGA,SAAS,EACP,GACA,GACA,GACA,GACe;CACf,IAAI,EAAM,WAAW,KAAK,IAAQ,GAChC,OAAO,CAAC;CAGV,IAAM,IAAS,EAAe,IACxB,IAAc,CAAC,GAAU,EAAc,EAAK;CAClD,AAAI,KACF,EAAY,KAAK,CAAa;CAEhC,IAAM,IAAY,EAAY,KAAK,GAAG,GAChC,IAAQ,EAAM,MAAM,GAAG,CAAK,GAC5B,IAAQ,EAAM,KAAK,GAAM,MAE3B,kBAAC,QAAD;EAAkD;EAC/C,UAAA,EAAU,GAAQ,CAAI;CACnB,GAFK,GAAG,EAAK,GAAG,EAAK,GAAG,GAExB,CAET;CAED,IAAI,EAAM,SAAS,EAAM,QAAQ;EAC/B,IAAM,IAAY,EAAM,SAAS,EAAM;EACvC,EAAM,KACJ,kBAAC,QAAD;GAAsC;GACnC,UAAA,EAAgB,GAAQ,CAAS;EAC9B,GAFK,GAAG,EAAK,MAEb,CACR;CACF;CAEA,OAAO;AACT;AAGA,SAAgB,EACd,GACoB;CACpB,IAAM,EACJ,SACA,mBAAgB,MAChB,WAAQ,GACR,aAAU,YACR;CAEJ,IAAI,KAAQ,MACV,OAAO,EAAe,CAAa;CAGrC,IAAM,IAAQ,MAAY,SACpB,IAAQ;EACZ,GAAG,EAAU,EAAK,OAAO,SAAS,GAAO,CAAK;EAC9C,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,CAAK;EAClD,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,CAAK;CACpD;CAEA,IAAI,EAAM,WAAW,GACnB,OAAO,EAAe,CAAa;CAGrC,IAAI,IAA0B,OAC1B,IAAY;CAKhB,OAJI,MAAY,aACd,IAAU,QACV,IAAY,IAEP,kBAAC,GAAD;EAAoB;EAAY,UAAA;CAAe,CAAA;AACxD"}

package/lib/esm/feedback/DevtoolsPill.js CHANGED Viewed

@@ -25,9 +25,7 @@ function u(u) {
 		case "prepare":
 			p = o;
 			break;
-		default:
-			p = r;
-			break;
+		default: p = r;
 	}
 	return /* @__PURE__ */ l("span", {
 		className: `${e} ${p}`,

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

	@@ -1 +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;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~~;~~CACJ;~~CAEA,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAK,GAAG;EAAc;CAAe,CAAA;AAClE"}
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;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,SACE,IAAY;CAEhB;CAEA,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAK,GAAG;EAAc;CAAe,CAAA;AAClE"}

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

	@@ -1 +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;CAKf,OAJI,MAAU,YACZ,IAAW,IAIX,kBAAC,QAAD;EAAM,WAAW;EAAoB;~~YAArC~~,CACE,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAU,GAAG;GAAY,eAAY;EAAQ,CAAA,GAChE,KAAS,IACN;;AAEV"}
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;CAKf,OAJI,MAAU,YACZ,IAAW,IAIX,kBAAC,QAAD;EAAM,WAAW;EAAoB;EAArC,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAU,GAAG;GAAY,eAAY;EAAQ,CAAA,GAChE,KAAS,IACN;;AAEV"}

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

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

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

	@@ -1 +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;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,EAAE;IAClB;~~cAEC~~,EAAK;GACA,GAVD,EAAK,EAUJ;EAEZ,CAAC;CACE,CAAA;AAET"}
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;CAEnD,OACE,kBAAC,OAAD;EAAK,WAAW;EAAW,MAAK;EAAU,cAAY;EACnD,UAAA,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,EAAE;IAClB;IAEC,UAAA,EAAK;GACA,GAVD,EAAK,EAUJ;EAEZ,CAAC;CACE,CAAA;AAET"}

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

	@@ -1 +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,CAAO,CAAA;CAKlC,OAJI,KAAS,SACX,IAAY,kBAAC,MAAD;EAAI,WAAW;~~YAAY~~;CAAU,CAAA,IAIjD,kBAAC,WAAD;EAAS,WAAW;~~YAApB~~,CACG,KACC,kBAAC,UAAD;GAAQ,WAAA;~~aAAR~~,CACG,GACA,KAAW,IACN;~~MAET~~,CACM;;AAEb"}
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,CAAO,CAAA;CAKlC,OAJI,KAAS,SACX,IAAY,kBAAC,MAAD;EAAI,WAAW;EAAY,UAAA;CAAU,CAAA,IAIjD,kBAAC,WAAD;EAAS,WAAW;EAApB,UAAA,CACG,KACC,kBAAC,UAAD;GAAQ,WAAA;GAAR,UAAA,CACG,GACA,KAAW,IACN;EAET,CAAA,GAAA,CACM;;AAEb"}

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

	@@ -1 +1 @@
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;CAAa,CAAA;AAClD;AAcA,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~~;CAAU,CAAA,IAIvD,kBAAC,MAAD;EACa;EACG;EACA;EACL;EACD;EACE;~~YANZ~~;GAQE,kBAAC,UAAD;IAAQ,WAAW;~~cAAiB~~;GAAe,CAAA;GAClD;GACA;EACC;;AAER"}
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;EAAO,UAAA,EAAM;CAAa,CAAA;AAClD;AAcA,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;EAAe,UAAA;CAAU,CAAA,IAIvD,kBAAC,MAAD;EACa;EACG;EACA;EACL;EACD;EACE;EANZ,UAAA;GAQE,kBAAC,UAAD;IAAQ,WAAW;IAAiB,UAAA;GAAe,CAAA;GAClD;GACA;EACC;;AAER"}

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

	@@ -1 +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;CAErC,OACE,kBAAC,WAAD;EAAS,WAAW;~~YAApB~~,CACE,kBAAC,UAAD;GAAQ,WAAW;~~aAAnB~~,CACE,kBAAC,MAAD;IAAI,WAAW;~~cAAe~~;GAAU,CAAA,GACvC,KAAW,IACN;~~MACP~~,CACM;;AAEb"}
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;CAErC,OACE,kBAAC,WAAD;EAAS,WAAW;EAApB,UAAA,CACE,kBAAC,UAAD;GAAQ,WAAW;GAAnB,UAAA,CACE,kBAAC,MAAD;IAAI,WAAW;IAAe,UAAA;GAAU,CAAA,GACvC,KAAW,IACN;EACP,CAAA,GAAA,CACM;;AAEb"}

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@plumile/ui-devtools",
-  "version": "0.1.194",
+  "version": "0.1.195",
   "description": "Shared DevTools UI primitives for Kronex extensions",
   "type": "module",
   "license": "MIT",
@@ -122,7 +122,7 @@
     "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.21.1",
+    "@vanilla-extract/css": "^1.21.2",
     "tslib": "^2.8.1"
   },
   "devDependencies": {