npm - @plumile/ui-devtools - Versions diffs - 0.1.143 → 0.1.144 - Mend

@plumile/ui-devtools 0.1.143 → 0.1.144

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 (29) hide show

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

	@@ -1 +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 className?: string;\n};\n\n/** Render preformatted code content in the devtools theme. */\nexport function DevtoolsCodeBlock(props: DevtoolsCodeBlockProps): JSX.Element {\n const { children, className } = props;\n let resolvedClassName = codeBlock;\n if (className != null) {\n resolvedClassName = [codeBlock, className].join(' ');\n }\n\n return <pre className={resolvedClassName}>{children}</pre>;\n}\n"],"mappings":";;;AASA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EAAE,aAAU,iBAAc,GAC5B,IAAoB;CAKxB,OAJI,KAAa,SACf,IAAoB,CAAC,GAAW,~~EAAU~~,~~CAAC~~,KAAK,~~IAAI~~,~~GAG/C~~,kBAAC,OAAD;EAAK,WAAW;EAAoB;~~EAAe~~,CAAA"}
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 className?: string;\n};\n\n/** Render preformatted code content in the devtools theme. */\nexport function DevtoolsCodeBlock(props: DevtoolsCodeBlockProps): JSX.Element {\n const { children, className } = props;\n let resolvedClassName = codeBlock;\n if (className != null) {\n resolvedClassName = [codeBlock, className].join(' ');\n }\n\n return <pre className={resolvedClassName}>{children}</pre>;\n}\n"],"mappings":";;;AASA,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EAAE,aAAU,iBAAc,GAC5B,IAAoB;CAKxB,OAJI,KAAa,SACf,IAAoB,CAAC,GAAW,CAAS,EAAE,KAAK,GAAG,IAG9C,kBAAC,OAAD;EAAK,WAAW;EAAoB;CAAc,CAAA;AAC3D"}

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,~~EAAE~~;~~SAC/B~~;EACN,OAAO~~;;GAIE~~,IAA0B,EACrC,~~uBACD~~;~~AAGD~~,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,UACA,mBAAgB,GAChB,2BAAwB,GACxB,iBACE;CAMJ,OAJI,KAAiC,OAC5B,kBAAC,QAAD;EAAiB;YAAY;~~EAAqB~~,CAAA,~~GAIzD~~,kBAAC,GAAD;EAA8B;YAC3B,EAAmB,GAAO,~~EAAsB~~;~~EAC~~/B,CAAA"}
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"}

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

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

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;~~GAAa~~,CAAA,~~EAC5C~~,kBAAC,UAAD;GAAQ,WAAW;GAAe;GAAiB;aAChD,EAAQ,KAAK,MAEV,kBAAC,UAAD;IAA2B,OAAO,EAAO;cACtC,EAAO;~~IACD~~,~~EAFI~~,EAAO,~~MAEX~~,CAEX;~~GACK~~,CAAA,CACH"}
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"}

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

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

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;~~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~~"}
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"}

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~~;;CAGJ~~,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAM,GAAG;EAAc;~~EAAgB~~,CAAA"}
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"}

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;~~CACV~~,~~EAEK~~,IAA0C;CAC9C,OAAO;CACP,SAAS;CACT,SAAS;~~CACV~~;~~AAGD~~,SAAS,EAAU,GAAgB,GAAuB;CACxD,OAAO,GAAG,IAAS~~;;AAIrB~~,SAAS,EAAgB,GAAgB,GAA2B;CAClE,OAAO,GAAG,EAAO,GAAG~~;;AAItB~~,SAAS,EAAe,GAA8C;CAIpE,OAHI,KAAiB,OACZ,OAEF,kBAAA,GAAA,EAAA,UAAG,~~GAAiB~~,CAAA~~;;AAI7B~~,SAAS,EACP,GACA,GACA,GACA,GACe;CACf,IAAI,EAAM,WAAW,KAAK,IAAQ,GAChC,OAAO,~~EAAE~~;~~CAGX~~,IAAM,IAAS,EAAe,IACxB,IAAc,CAAC,GAAU,EAAc,~~GAAM~~;~~CACnD~~,AAAI,KACF,EAAY,KAAK,~~EAAc~~;~~CAEjC~~,IAAM,IAAY,EAAY,KAAK,~~IAAI~~,~~EACjC~~,IAAQ,EAAM,MAAM,GAAG,~~EAAM~~,~~EAC7B~~,IAAQ,EAAM,KAAK,GAAM,MAE3B,kBAAC,QAAD;EAAkD;YAC/C,EAAU,GAAQ,~~EAAK~~;~~EACnB~~,~~EAFI~~,GAAG,EAAK,GAAG,EAAK,GAAG,~~IAEvB~~,CAET;~~CAEF~~,IAAI,EAAM,SAAS,EAAM,QAAQ;EAC/B,IAAM,IAAY,EAAM,SAAS,EAAM;EACvC,EAAM,KACJ,kBAAC,QAAD;GAAsC;aACnC,EAAgB,GAAQ,~~EAAU~~;~~GAC9B~~,~~EAFI~~,GAAG,EAAK,~~OAEZ~~,CACR~~;;CAGH~~,OAAO~~;;AAIT~~,SAAgB,EACd,GACoB;CACpB,IAAM,EACJ,SACA,mBAAgB,MAChB,WAAQ,GACR,aAAU,YACR;CAEJ,IAAI,KAAQ,MACV,OAAO,EAAe,~~EAAc~~;~~CAGtC~~,IAAM,IAAQ,MAAY,SACpB,IAAQ;EACZ,GAAG,EAAU,EAAK,OAAO,SAAS,GAAO,~~EAAM~~;~~EAC/C~~,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,~~EAAM~~;~~EACnD~~,GAAG,EAAU,EAAK,SAAS,WAAW,GAAO,~~EAAM~~;~~EACpD~~;~~CAED~~,IAAI,EAAM,WAAW,GACnB,OAAO,EAAe,~~EAAc~~;~~CAGtC~~,IAAI,IAA0B,OAC1B,IAAY;CAKhB,OAJI,MAAY,aACd,IAAU,QACV,IAAY,IAEP,kBAAC,GAAD;EAAoB;YAAY;~~EAAgB~~,CAAA"}
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"}

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~~;;CAGJ~~,OAAO,kBAAC,QAAD;EAAM,WAAW,GAAG,EAAK,GAAG;EAAc;~~EAAgB~~,CAAA"}
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"}

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;~~GAAS~~,CAAA,~~EACjE~~,KAAS,~~KACL~~"}
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"}

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~~;;AAIT~~,SAAgB,EAAkB,GAA4C;CAC5E,IAAM,EACJ,MAAM,GACN,oBACA,oBACA,yBACA,SAAS,GACT,iBACA,oBACE,GACE,IAAU,EAAkB;EAChC,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,OAAO;~~EACR~~,CAAC,~~EAEI~~,IAAoB,GACvB,MAAwB;EACvB,IAAM,IAAQ,EAAQ;EAItB,IAHI,CAAC,EAAM,UAGP,EAAM,aAAa,QAAQ,EAAM,cAAc,EAAM,WACvD;EAEF,EAAM,~~gBAAgB~~;~~EACtB~~,IAAM,IAAQ,EAAM,SAAS,EAAM;EACnC,EACE,EAAW,EAAM,QAAQ,GAAO,GAAiB,~~EAAgB~~,CAClE;~~IAEH~~;EAAC;EAAiB;EAAiB;~~EAAqB~~,CACzD,~~EAEK~~,IAAkB,QAAkB;EACnC,EAAQ,QAAQ,WAGrB,EAAQ,QAAQ,SAAS,IACzB,EAAQ,QAAQ,YAAY,MAC5B,OAAO,oBAAoB,eAAe,~~EAAkB~~,~~EAC5D~~,OAAO,oBAAoB,aAAa,~~EAAgB~~,~~EACxD~~,OAAO,oBAAoB,iBAAiB,~~EAAgB~~;~~IAC3D~~,CAAC,~~EAAkB~~,CAAC;~~CAEvB~~,cACe;EAGX,AAFA,OAAO,oBAAoB,eAAe,~~EAAkB~~,~~EAC5D~~,OAAO,oBAAoB,aAAa,~~EAAgB~~,~~EACxD~~,OAAO,oBAAoB,iBAAiB,~~EAAgB~~;~~IAE7D~~,CAAC,GAAmB,~~EAAgB~~,CAAC;~~CAExC~~,IAAM,IAAoB,GACvB,MAA6C;EACxC,KAAkB,SAGtB,EAAM,~~gBAAgB~~,~~EAClB~~,uBAAuB,EAAM,iBAC/B,EAAM,cAAc,kBAAkB,EAAM,~~UAAU~~,~~EAExD~~,EAAQ,UAAU;GAChB,QAAQ;GACR,WAAW,EAAM;GACjB,QAAQ,EAAM;GACd,OAAO;~~GACR~~,~~EACD~~,OAAO,iBAAiB,eAAe,~~EAAkB~~,~~EACzD~~,OAAO,iBAAiB,aAAa,~~EAAgB~~,~~EACrD~~,OAAO,iBAAiB,iBAAiB,~~EAAgB~~;~~IAE3D~~;EAAC;EAAmB;EAAiB;EAAgB;~~EAAa~~,CACnE,~~EAEK~~,IAAgB,GACnB,MAA8C;EAC7C,IAAI,KAAkB,MACpB;EAEF,IAAI,IAAO;EAIX,IAHI,EAAM,aACR,IAAO,IAEL,EAAM,QAAQ,aAAa;GAE7B,AADA,EAAM,~~gBAAgB~~,~~EACtB~~,EACE,EAAW,IAAe,GAAM,GAAiB,~~EAAgB~~,CAClE;~~GACD;;EAEF~~,AAAI,EAAM,QAAQ,iBAChB,EAAM,~~gBAAgB~~,~~EACtB~~,EACE,EAAW,IAAe,GAAM,GAAiB,~~EAAgB~~,CAClE;~~IAGL~~;EACE;EACA;EACA;EACA;EACA;~~EACD~~,CACF,~~EAEG~~,IAAgB;CAKpB,OAJI,KAAkB,SACpB,IAAgB,GAAG,EAAK,GAAG,MAI3B,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAgB;~~GAAkB~~,CAAA,~~EACjD~~,KAAkB,QACjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAA;GACA,MAAK;GACL,oBAAiB;GACjB,cAAY,KAAgB;GAC5B,iBAAe,KAAK,MAAM,~~EAAgB~~;~~GAC1C~~,iBAAe,KAAK,MAAM,~~EAAgB~~;~~GAC1C~~,iBAAe,KAAK,MAAM,~~EAAa~~;~~GACvC~~,UAAU;GACV,eAAe;GACf,WAAW;aAEX,kBAAC,QAAD,EAAM,WAAA,~~aAA0B~~,CAAA;~~GAC5B~~,CAAA,~~EACN~~,kBAAC,WAAD;GACE,WAAA;GACA,cAAY,KAAgB,KAAA;GAC5B,OAAO,EAAE,OAAO,GAAG,EAAa,~~KAAK~~;~~aAEpC~~;~~GACO~~,CAAA,CACT,EAAA,CAAA,CAED"}
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"}

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

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

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,~~GAAG;;cAGlB~~,EAAK;~~IACC~~,~~EAVF~~,EAAK,~~GAUH~~;~~IAEX~~;~~EACE~~,CAAA"}
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"}

package/lib/esm/style.css CHANGED Viewed

@@ -1,2 +1,2 @@
-._1sbiiq0{background-color:var(--pdt-code-bg);white-space:pre-wrap;word-break:break-word;border-radius:6px;margin:0;padding:12px;font-size:12px;line-height:1.4;overflow-x:auto}._83ws9k0{border:1px solid var(--pdt-border);min-height:28px;color:var(--pdt-text);cursor:pointer;background-color:#0000;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:4px 10px;font-size:12px;line-height:1.2;transition:background-color .15s,border-color .15s;display:inline-flex}._83ws9k0:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-accent) 8%, transparent)}._83ws9k0:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._83ws9k0:disabled{opacity:.5;cursor:not-allowed}._83ws9k1{color:var(--pdt-danger)}._83ws9k1:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-danger) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 34%, transparent)}._83ws9k2{color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}._83ws9k3{font-size:12px}._83ws9k4{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-height:28px;color:var(--pdt-text);border-radius:4px;padding:4px 8px;font-size:12px}._83ws9k4:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.fmw3vj0{flex-direction:column;align-items:flex-start;gap:12px;max-width:420px;padding:24px;display:flex}.fmw3vj1{margin:0;font-size:18px;font-weight:600}.fmw3vj2{color:var(--pdt-text-muted);margin:0;font-size:13px;line-height:1.5}.fmw3vj3{flex-wrap:wrap;align-items:center;gap:12px;display:flex}@keyframes kewyeuj{0%{box-shadow:0 0 #2563eb66}to{box-shadow:0 0 0 12px #2563eb00}}.kewyeu0{white-space:nowrap;background-color:var(--pdt-surface-muted);min-height:20px;color:var(--pdt-text-muted);border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:4px;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu1{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border);color:var(--pdt-text-muted)}.kewyeu2{background-color:color-mix(in srgb, var(--pdt-info) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent);color:var(--pdt-info)}.kewyeu3{background-color:color-mix(in srgb, var(--pdt-success) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent);color:var(--pdt-success)}.kewyeu4{background-color:color-mix(in srgb, var(--pdt-warning) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-warning) 24%, transparent);color:var(--pdt-warning)}.kewyeu5{background-color:color-mix(in srgb, var(--pdt-danger) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 24%, transparent);color:var(--pdt-danger)}.kewyeu6{border:1px solid var(--pdt-border);white-space:nowrap;min-height:20px;color:var(--pdt-text);background-color:#0000;border-radius:999px;align-items:center;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu7{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border)}.kewyeu8{background-color:color-mix(in srgb, var(--pdt-accent) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-accent) 24%, transparent)}.kewyeu9{background-color:color-mix(in srgb, var(--pdt-info) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent)}.kewyeua{background-color:#6366f11f;border-color:#6366f147}.kewyeub{background-color:color-mix(in srgb, var(--pdt-success) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent)}.kewyeuc{background-color:#9333ea1f;border-color:#9333ea47}.kewyeud{background-color:#3b82f61f;border-color:#3b82f647}.kewyeue{background-color:#d977061f;border-color:#d9770647}.kewyeuf{min-height:20px;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.kewyeug{background-color:var(--pdt-border);border-radius:50%;width:10px;height:10px}.kewyeuh{background-color:var(--pdt-success);box-shadow:0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)}.kewyeui{background-color:var(--pdt-border);box-shadow:inset 0 0 0 1px var(--pdt-text-muted)}.kewyeuk{flex-wrap:wrap;gap:6px;margin-top:6px;font-size:11px;display:flex}.kewyeul{flex-wrap:wrap;gap:6px;margin-top:0;font-size:11px;display:flex}.kewyeum{border:1px solid #0000;border-radius:999px;padding:2px 8px;font-weight:600}.kewyeun{color:#166534;background-color:#22863a1f;border-color:#22863a59}.kewyeuo{color:#735c0f;background-color:#735c0f1f;border-color:#735c0f59}.kewyeup{color:#b3212c;background-color:#cb24311f;border-color:#cb243159}.kewyeuq{animation:.8s ease-in-out kewyeuj}._1m64tse0{flex:1;align-items:stretch;min-height:0;display:flex}._1m64tse1{background-color:var(--pdt-surface);flex-direction:column;flex:auto;min-width:0;display:flex;overflow:hidden}._1m64tse2{border-right:1px solid var(--pdt-border)}._1m64tse3{cursor:col-resize;background-color:#0000;flex:0 0 8px;position:relative}._1m64tse3:focus-visible{outline:none}._1m64tse4{background-color:var(--pdt-border);border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}._1m64tse3:hover ._1m64tse4,._1m64tse3:focus-visible ._1m64tse4{background-color:var(--pdt-accent)}._1m64tse5{background-color:var(--pdt-surface);flex-direction:column;flex:none;min-width:280px;max-width:90%;display:flex;overflow:hidden}.vzai5r0{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:12px 16px;display:flex}.vzai5r1{appearance:none;border:1px solid var(--pdt-border);background-color:var(--pdt-bg);color:var(--pdt-text);cursor:pointer;border-radius:999px;padding:6px 16px;font-size:12px;transition:background-color .15s,border-color .15s}.vzai5r1:hover:not(:disabled){background-color:var(--pdt-border)}.vzai5r1:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.vzai5r1:disabled{opacity:.6;cursor:default}.vzai5r2{background-color:var(--pdt-accent);border-color:var(--pdt-accent);color:#fff}.ca0gms0{border:1px solid var(--pdt-border);background-color:var(--pdt-surface);border-radius:8px;flex-direction:column;gap:12px;padding:16px;display:flex}.ca0gms1{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms2{margin:0;font-size:14px;font-weight:600}.ca0gms3{flex-direction:column;gap:8px;display:flex}.ca0gms4{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms5{text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:13px;font-weight:600}.ca0gms6{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.ca0gms7{border:1px solid var(--pdt-border);border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.ca0gms8:focus{box-shadow:var(--pdt-shadow-focus);outline:none}.ca0gms9{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ca0gmsa{color:var(--pdt-text-muted);flex-wrap:wrap;gap:12px;font-size:12px;display:flex}._11l3mw40{--pdt-bg:#f3f4f6;--pdt-surface:#fff;--pdt-surface-muted:#f8fafc;--pdt-border:#d1d5db;--pdt-border-strong:#9ca3af;--pdt-text:#111827;--pdt-text-muted:#4b5563;--pdt-accent:#2563eb;--pdt-info:#0369a1;--pdt-success:#166534;--pdt-warning:#9a3412;--pdt-danger:#b91c1c;--pdt-code-bg:#0f172a0f;--pdt-shadow-focus:0 0 0 2px #2563eb59;background-color:var(--pdt-bg);color:var(--pdt-text);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}@media (prefers-color-scheme:dark){._11l3mw40{--lightningcss-light: ;--lightningcss-dark:initial}}._11l3mw40,._11l3mw40 *{box-sizing:border-box}._11l3mw40 a{color:var(--pdt-accent)}._11l3mw40 button,._11l3mw40 input,._11l3mw40 select,._11l3mw40 textarea{font:inherit}._11l3mw40 pre,._11l3mw40 code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}@media (prefers-color-scheme:dark){._11l3mw40{--pdt-bg:#1f1f1f;--pdt-surface:#242424;--pdt-surface-muted:#2d2d2d;--pdt-border:#3f3f46;--pdt-border-strong:#52525b;--pdt-text:#f5f5f5;--pdt-text-muted:#a1a1aa;--pdt-accent:#60a5fa;--pdt-info:#38bdf8;--pdt-success:#4ade80;--pdt-warning:#fb923c;--pdt-danger:#f87171;--pdt-code-bg:#94a3b81f;--pdt-shadow-focus:0 0 0 2px #60a5fa59}}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:6px 16px;display:flex}._1q96x231{flex:1}._1q96x232{background-color:var(--pdt-border);width:1px;height:18px}._1q96x233{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-height:28px;color:var(--pdt-text);cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;transition:background-color .15s,border-color .15s;display:inline-flex}._1q96x233:hover:not(:disabled){background-color:var(--pdt-border)}._1q96x233:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._1q96x233:disabled{opacity:.5;cursor:not-allowed}._1q96x234{background-color:var(--pdt-warning);border-color:var(--pdt-warning);color:#fff}
+._1sbiiq0{background-color:var(--pdt-code-bg);white-space:pre-wrap;word-break:break-word;border-radius:6px;margin:0;padding:12px;font-size:12px;line-height:1.4;overflow-x:auto}._83ws9k0{border:1px solid var(--pdt-border);min-height:28px;color:var(--pdt-text);cursor:pointer;background-color:#0000;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:4px 10px;font-size:12px;line-height:1.2;transition:background-color .15s,border-color .15s;display:inline-flex}._83ws9k0:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-accent) 8%, transparent)}._83ws9k0:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._83ws9k0:disabled{opacity:.5;cursor:not-allowed}._83ws9k1{color:var(--pdt-danger)}._83ws9k1:hover:not(:disabled){background-color:color-mix(in srgb, var(--pdt-danger) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 34%, transparent)}._83ws9k2{min-width:0;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}._83ws9k3{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}._83ws9k4{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-width:0;min-height:28px;color:var(--pdt-text);border-radius:4px;flex:auto;padding:4px 8px;font-size:12px}._83ws9k4:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}@media screen and (width<=520px){._83ws9k2{flex:100%}}.fmw3vj0{flex-direction:column;align-items:flex-start;gap:12px;max-width:420px;padding:24px;display:flex}.fmw3vj1{margin:0;font-size:18px;font-weight:600}.fmw3vj2{color:var(--pdt-text-muted);margin:0;font-size:13px;line-height:1.5}.fmw3vj3{flex-wrap:wrap;align-items:center;gap:12px;display:flex}@keyframes kewyeuj{0%{box-shadow:0 0 #2563eb66}to{box-shadow:0 0 0 12px #2563eb00}}.kewyeu0{white-space:nowrap;background-color:var(--pdt-surface-muted);min-height:20px;color:var(--pdt-text-muted);border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:4px;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu1{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border);color:var(--pdt-text-muted)}.kewyeu2{background-color:color-mix(in srgb, var(--pdt-info) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent);color:var(--pdt-info)}.kewyeu3{background-color:color-mix(in srgb, var(--pdt-success) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent);color:var(--pdt-success)}.kewyeu4{background-color:color-mix(in srgb, var(--pdt-warning) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-warning) 24%, transparent);color:var(--pdt-warning)}.kewyeu5{background-color:color-mix(in srgb, var(--pdt-danger) 12%, transparent);border-color:color-mix(in srgb, var(--pdt-danger) 24%, transparent);color:var(--pdt-danger)}.kewyeu6{border:1px solid var(--pdt-border);white-space:nowrap;min-height:20px;color:var(--pdt-text);background-color:#0000;border-radius:999px;align-items:center;padding:2px 8px;font-size:11px;line-height:1.2;display:inline-flex}.kewyeu7{background-color:var(--pdt-surface-muted);border-color:var(--pdt-border)}.kewyeu8{background-color:color-mix(in srgb, var(--pdt-accent) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-accent) 24%, transparent)}.kewyeu9{background-color:color-mix(in srgb, var(--pdt-info) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-info) 24%, transparent)}.kewyeua{background-color:#6366f11f;border-color:#6366f147}.kewyeub{background-color:color-mix(in srgb, var(--pdt-success) 10%, transparent);border-color:color-mix(in srgb, var(--pdt-success) 24%, transparent)}.kewyeuc{background-color:#9333ea1f;border-color:#9333ea47}.kewyeud{background-color:#3b82f61f;border-color:#3b82f647}.kewyeue{background-color:#d977061f;border-color:#d9770647}.kewyeuf{min-height:20px;color:var(--pdt-text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.kewyeug{background-color:var(--pdt-border);border-radius:50%;width:10px;height:10px}.kewyeuh{background-color:var(--pdt-success);box-shadow:0 0 0 2px color-mix(in srgb, var(--pdt-success) 30%, transparent)}.kewyeui{background-color:var(--pdt-border);box-shadow:inset 0 0 0 1px var(--pdt-text-muted)}.kewyeuk{flex-wrap:wrap;gap:6px;margin-top:6px;font-size:11px;display:flex}.kewyeul{flex-wrap:wrap;gap:6px;margin-top:0;font-size:11px;display:flex}.kewyeum{border:1px solid #0000;border-radius:999px;padding:2px 8px;font-weight:600}.kewyeun{color:#166534;background-color:#22863a1f;border-color:#22863a59}.kewyeuo{color:#735c0f;background-color:#735c0f1f;border-color:#735c0f59}.kewyeup{color:#b3212c;background-color:#cb24311f;border-color:#cb243159}.kewyeuq{animation:.8s ease-in-out kewyeuj}._1m64tse0{flex:1;align-items:stretch;min-width:0;min-height:0;display:flex}._1m64tse1{background-color:var(--pdt-surface);flex-direction:column;flex:auto;min-width:0;display:flex;overflow:hidden}._1m64tse2{border-right:1px solid var(--pdt-border)}._1m64tse3{cursor:col-resize;background-color:#0000;flex:0 0 8px;position:relative}._1m64tse3:focus-visible{outline:none}._1m64tse4{background-color:var(--pdt-border);border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}._1m64tse3:hover ._1m64tse4,._1m64tse3:focus-visible ._1m64tse4{background-color:var(--pdt-accent)}._1m64tse5{background-color:var(--pdt-surface);flex-direction:column;flex:none;min-width:280px;max-width:90%;display:flex;overflow:hidden}@media screen and (width<=640px){._1m64tse0{flex-direction:column;overflow:auto}._1m64tse2{border-right:0;border-bottom:1px solid var(--pdt-border)}._1m64tse3{display:none}._1m64tse5{flex:none;min-width:0;max-width:100%;min-height:12rem;width:100%!important}}.vzai5r0{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);align-items:center;gap:8px;padding:12px 16px;display:flex}.vzai5r1{appearance:none;border:1px solid var(--pdt-border);background-color:var(--pdt-bg);color:var(--pdt-text);cursor:pointer;border-radius:999px;padding:6px 16px;font-size:12px;transition:background-color .15s,border-color .15s}.vzai5r1:hover:not(:disabled){background-color:var(--pdt-border)}.vzai5r1:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}.vzai5r1:disabled{opacity:.6;cursor:default}.vzai5r2{background-color:var(--pdt-accent);border-color:var(--pdt-accent);color:#fff}.ca0gms0{border:1px solid var(--pdt-border);background-color:var(--pdt-surface);border-radius:8px;flex-direction:column;gap:12px;padding:16px;display:flex}.ca0gms1{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms2{margin:0;font-size:14px;font-weight:600}.ca0gms3{flex-direction:column;gap:8px;display:flex}.ca0gms4{justify-content:space-between;align-items:center;gap:12px;display:flex}.ca0gms5{text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:13px;font-weight:600}.ca0gms6{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.ca0gms7{border:1px solid var(--pdt-border);border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.ca0gms8:focus{box-shadow:var(--pdt-shadow-focus);outline:none}.ca0gms9{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ca0gmsa{color:var(--pdt-text-muted);flex-wrap:wrap;gap:12px;font-size:12px;display:flex}._11l3mw40{--pdt-bg:#f3f4f6;--pdt-surface:#fff;--pdt-surface-muted:#f8fafc;--pdt-border:#d1d5db;--pdt-border-strong:#9ca3af;--pdt-text:#111827;--pdt-text-muted:#4b5563;--pdt-accent:#2563eb;--pdt-info:#0369a1;--pdt-success:#166534;--pdt-warning:#9a3412;--pdt-danger:#b91c1c;--pdt-code-bg:#0f172a0f;--pdt-shadow-focus:0 0 0 2px #2563eb59;background-color:var(--pdt-bg);color:var(--pdt-text);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}@media (prefers-color-scheme:dark){._11l3mw40{--lightningcss-light: ;--lightningcss-dark:initial}}._11l3mw40,._11l3mw40 *{box-sizing:border-box}._11l3mw40 a{color:var(--pdt-accent)}._11l3mw40 button,._11l3mw40 input,._11l3mw40 select,._11l3mw40 textarea{font:inherit}._11l3mw40 pre,._11l3mw40 code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}@media (prefers-color-scheme:dark){._11l3mw40{--pdt-bg:#1f1f1f;--pdt-surface:#242424;--pdt-surface-muted:#2d2d2d;--pdt-border:#3f3f46;--pdt-border-strong:#52525b;--pdt-text:#f5f5f5;--pdt-text-muted:#a1a1aa;--pdt-accent:#60a5fa;--pdt-info:#38bdf8;--pdt-success:#4ade80;--pdt-warning:#fb923c;--pdt-danger:#f87171;--pdt-code-bg:#94a3b81f;--pdt-shadow-focus:0 0 0 2px #60a5fa59}}._1q96x230{border-bottom:1px solid var(--pdt-border);background-color:var(--pdt-surface);flex-wrap:wrap;align-items:center;gap:8px;min-width:0;padding:6px 16px;display:flex;overflow:hidden}._1q96x231{flex:auto;min-width:0}._1q96x232{background-color:var(--pdt-border);width:1px;height:18px}._1q96x233{border:1px solid var(--pdt-border);background-color:var(--pdt-bg);min-width:0;max-width:100%;min-height:28px;color:var(--pdt-text);cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;transition:background-color .15s,border-color .15s;display:inline-flex}._1q96x233:hover:not(:disabled){background-color:var(--pdt-border)}._1q96x233:focus-visible{box-shadow:var(--pdt-shadow-focus);outline:none}._1q96x233:disabled{opacity:.5;cursor:not-allowed}._1q96x234{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}._1q96x235{background-color:var(--pdt-warning);border-color:var(--pdt-warning);color:#fff}@media screen and (width<=520px){._1q96x230{align-items:stretch;padding:6px 8px}._1q96x233{flex:auto;justify-content:center;padding:4px 8px}}
 /*$vite$:1*/

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,~~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~~"}
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"}

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;~~EAAc~~,CAAA~~;;AAenD~~,SAAgB,EAAiB,GAA2C;CAC1E,IAAM,EACJ,aACA,WACA,iBAAc,IACd,SACA,WACA,YACA,iBACA,iBACA,gBACE,GACA,IAAY;CAChB,AAAI,MACF,IAAY,GAAG,EAAS,GAAG;CAG7B,IAAI,IAAkC;CAKtC,OAJI,KAAQ,SACV,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAe;~~EAAW~~,CAAA,~~GAIxD~~,kBAAC,MAAD;EACa;EACG;EACA;EACL;EACD;EACE;YANZ;GAQE,kBAAC,UAAD;IAAQ,WAAW;cAAiB;~~IAAgB~~,CAAA;~~GACnD~~;GACA;~~GACE~~"}
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"}

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;~~IAAW~~,CAAA,~~EACxC~~,KAAW,~~KACL~~;~~MACR~~,~~EACO~~"}
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"}

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

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

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

	@@ -1 +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;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"}
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;CAEhC,OACE,kBAAC,OAAD;EAAK,WAAW;EAAS,MAAK;EAAU,cAAY;EACjD;CACE,CAAA;AAET;AAGA,SAAgB,IAAmC;CACjD,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAM,eAAY;CAAQ,CAAA;AACpD"}

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

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

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 } 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~~"}
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"}

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

	@@ -1 +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;CACtD,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAW,eAAY;~~EAAS~~,CAAA"}
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;CACtD,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAW,eAAY;CAAQ,CAAA;AACzD"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"devtoolsToolbar.css.js","names":[],"sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const toolbar = style({\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n padding: '6px 16px',\n borderBottom: '1px solid var(--pdt-border)',\n backgroundColor: 'var(--pdt-surface)',\n});\n\nexport const grow = style({\n flex: 1,\n});\n\nexport const separator = style({\n width: '1px',\n height: '18px',\n backgroundColor: 'var(--pdt-border)',\n});\n\nexport const button = style({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '6px',\n minHeight: '28px',\n padding: '4px 12px',\n border: '1px solid var(--pdt-border)',\n borderRadius: '4px',\n backgroundColor: 'var(--pdt-bg)',\n color: 'var(--pdt-text)',\n fontSize: '12px',\n cursor: 'pointer',\n transition: 'background-color 150ms ease, border-color 150ms ease',\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: 'var(--pdt-border)',\n },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: 'var(--pdt-shadow-focus)',\n },\n '&:disabled': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n },\n});\n\nexport const buttonActive = style({\n backgroundColor: 'var(--pdt-warning)',\n borderColor: 'var(--pdt-warning)',\n color: '#ffffff',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"devtoolsToolbar.css.js","names":[],"sources":["../../../src/toolbar/devtoolsToolbar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const toolbar = style({\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n gap: '8px',\n padding: '6px 16px',\n borderBottom: '1px solid var(--pdt-border)',\n backgroundColor: 'var(--pdt-surface)',\n minWidth: 0,\n overflow: 'hidden',\n '@media': {\n 'screen and (max-width: 520px)': {\n alignItems: 'stretch',\n padding: '6px 8px',\n },\n },\n});\n\nexport const grow = style({\n flex: '1 1 auto',\n minWidth: 0,\n});\n\nexport const separator = style({\n width: '1px',\n height: '18px',\n backgroundColor: 'var(--pdt-border)',\n});\n\nexport const button = style({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '6px',\n maxWidth: '100%',\n minHeight: '28px',\n minWidth: 0,\n padding: '4px 12px',\n border: '1px solid var(--pdt-border)',\n borderRadius: '4px',\n backgroundColor: 'var(--pdt-bg)',\n color: 'var(--pdt-text)',\n fontSize: '12px',\n cursor: 'pointer',\n transition: 'background-color 150ms ease, border-color 150ms ease',\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: 'var(--pdt-border)',\n },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: 'var(--pdt-shadow-focus)',\n },\n '&:disabled': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n },\n '@media': {\n 'screen and (max-width: 520px)': {\n flex: '1 1 auto',\n justifyContent: 'center',\n padding: '4px 8px',\n },\n },\n});\n\nexport const buttonLabel = style({\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n});\n\nexport const buttonActive = style({\n backgroundColor: 'var(--pdt-warning)',\n borderColor: 'var(--pdt-warning)',\n color: '#ffffff',\n});\n"],"mappings":""}

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

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

package/lib/types/layout/devtoolsSplitView.css.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"devtoolsSplitView.css.d.ts","sourceRoot":"","sources":["../../../src/layout/devtoolsSplitView.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,~~QAKf~~,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,YAAY,~~QAEvB~~,CAAC;AAEH,eAAO,MAAM,OAAO,~~QAUlB~~,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,OAAO,~~QAQlB~~,CAAC"}
1	+ {"version":3,"file":"devtoolsSplitView.css.d.ts","sourceRoot":"","sources":["../../../src/layout/devtoolsSplitView.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAYf,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAelB,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAiBlB,CAAC"}

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

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

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@plumile/ui-devtools",
-  "version": "0.1.143",
+  "version": "0.1.144",
   "description": "Shared DevTools UI primitives for Kronex extensions",
   "type": "module",
   "license": "MIT",