chroma-panel 0.1.0

package/dist/color/types.d.cts

@@ -0,0 +1,43 @@
+//#region src/color/types.d.ts
+export interface Hsva {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+}
+export interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+export interface Rgba extends Rgb {
+  a: number;
+}
+export interface Hsl {
+  h: number;
+  s: number;
+  l: number;
+}
+export interface Hsla extends Hsl {
+  a: number;
+}
+export interface Hwb {
+  h: number;
+  w: number;
+  b: number;
+}
+export interface Hwba extends Hwb {
+  a: number;
+}
+export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla";
+export interface ColorChangeResult {
+  hex: string;
+  hexa: string;
+  rgb: Rgb;
+  rgba: Rgba;
+  hsl: Hsl;
+  hsla: Hsla;
+  hsva: Hsva;
+  css: string;
+}
+//#endregion

package/dist/color/types.d.ts

@@ -0,0 +1,43 @@
+//#region src/color/types.d.ts
+export interface Hsva {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+}
+export interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+export interface Rgba extends Rgb {
+  a: number;
+}
+export interface Hsl {
+  h: number;
+  s: number;
+  l: number;
+}
+export interface Hsla extends Hsl {
+  a: number;
+}
+export interface Hwb {
+  h: number;
+  w: number;
+  b: number;
+}
+export interface Hwba extends Hwb {
+  a: number;
+}
+export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla";
+export interface ColorChangeResult {
+  hex: string;
+  hexa: string;
+  rgb: Rgb;
+  rgba: Rgba;
+  hsl: Hsl;
+  hsla: Hsla;
+  hsva: Hsva;
+  css: string;
+}
+//#endregion

package/dist/components/ChromaPanel.cjs

@@ -0,0 +1,254 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_dev = require("../core/dev.cjs");
+const require_registry = require("../modes/registry.cjs");
+const require_context = require("../core/context.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+const require_parse = require("../color/parse.cjs");
+const require_serialize = require("../color/serialize.cjs");
+const require_icons = require("../primitives/icons.cjs");
+const require_sticky = require("../color/sticky.cjs");
+const require_store = require("../core/store.cjs");
+const require_styleInjector = require("../core/styleInjector.cjs");
+const require_css = require("../styles/css.cjs");
+const require_useScrollFade = require("../core/useScrollFade.cjs");
+const require_ModeToolbar = require("./ModeToolbar.cjs");
+const require_PanelFooter = require("./PanelFooter.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/ChromaPanel.tsx
+const DEFAULT_COLOR = "#3366cc";
+const FALLBACK = {
+	h: 220,
+	s: 75,
+	v: 80,
+	a: 1
+};
+function ChromaPanel(props) {
+	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, modes = [
+		"wheel",
+		"sliders",
+		"palettes",
+		"image",
+		"pencils"
+	], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colours", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
+	const rootRef = react.useRef(null);
+	const panelHostRef = react.useRef(null);
+	const idPrefix = require_context.useStableId("cp");
+	const initial = react.useMemo(() => {
+		const seed = value ?? defaultValue;
+		const parsed = typeof seed === "string" ? require_parse.parse(seed) : seed;
+		if (parsed === null) require_dev.warnOnce(`could not parse "${seed}"; falling back to ${DEFAULT_COLOR}.`);
+		return parsed ?? FALLBACK;
+	}, []);
+	const ownStore = react.useMemo(() => require_store.createColorStore(initial), [initial]);
+	const store = externalStore ?? ownStore;
+	react.useEffect(() => {
+		if (shouldInject) require_styleInjector.injectStyles(require_css.css, "v2", rootRef.current);
+	}, [shouldInject]);
+	require_useColorStore.useTransientColor(store, (c) => {
+		const el = rootRef.current;
+		if (el === null) return;
+		el.style.setProperty("--cp-h", String(c.h));
+		el.style.setProperty("--cp-s", `${c.s}%`);
+		el.style.setProperty("--cp-v", `${c.v}%`);
+		el.style.setProperty("--cp-a", String(c.a));
+		el.style.setProperty("--cp-preview-color", require_serialize.toRgbaString(c));
+	});
+	react.useEffect(() => {
+		if (value === void 0) return;
+		const parsed = typeof value === "string" ? require_parse.parse(value) : value;
+		if (parsed === null || parsed === void 0) {
+			require_dev.warnOnce(`could not parse value "${value}".`);
+			return;
+		}
+		if (require_sticky.sameRendered(parsed, store.get())) return;
+		store.ingest(parsed);
+	}, [value, store]);
+	const [internalRecents, setInternalRecents] = react.useState(() => defaultRecentColors ?? []);
+	const activeRecents = recentColors ?? internalRecents;
+	const callbacks = react.useRef({
+		onChange,
+		onChangeComplete,
+		format,
+		activeRecents,
+		onRecentColorsChange,
+		controlled: recentColors !== void 0
+	});
+	react.useEffect(() => {
+		callbacks.current = {
+			onChange,
+			onChangeComplete,
+			format,
+			activeRecents,
+			onRecentColorsChange,
+			controlled: recentColors !== void 0
+		};
+	});
+	react.useEffect(() => store.subscribe((c) => callbacks.current.onChange?.(require_serialize.toResult(c, callbacks.current.format))), [store]);
+	react.useEffect(() => store.subscribeCommit((c) => {
+		const { onChangeComplete: done, format: fmt, activeRecents: recents, onRecentColorsChange: notify, controlled } = callbacks.current;
+		done?.(require_serialize.toResult(c, fmt));
+		const next = require_PanelFooter.pushRecent(recents, require_serialize.toHex(c));
+		if (!controlled) setInternalRecents(next);
+		notify?.(next);
+	}), [store]);
+	const resolved = react.useMemo(() => require_registry.resolveModes(modes), [modes]);
+	const first = resolved[0];
+	const [internalMode, setInternalMode] = react.useState(() => defaultMode ?? first?.id ?? "wheel");
+	const activeId = mode ?? internalMode;
+	const active = resolved.find((m) => m.id === activeId) ?? first;
+	require_useScrollFade.useScrollFade(panelHostRef, activeId);
+	const selectMode = (id) => {
+		if (mode === void 0) setInternalMode(id);
+		onModeChange?.(id);
+	};
+	const [internalCollapsed, setInternalCollapsed] = react.useState(defaultCollapsed);
+	const isCollapsed = collapsed ?? internalCollapsed;
+	const toggleCollapsed = () => {
+		const next = !isCollapsed;
+		if (collapsed === void 0) setInternalCollapsed(next);
+		onCollapsedChange?.(next);
+	};
+	const [internalSize, setInternalSize] = react.useState(defaultSize);
+	const activeSize = size ?? internalSize;
+	const toggleSize = () => {
+		const next = activeSize === "expanded" ? "default" : "expanded";
+		if (size === void 0) setInternalSize(next);
+		onSizeChange?.(next);
+	};
+	const bodyId = `${idPrefix}-body`;
+	const options = react.useMemo(() => ({
+		modeProps: {
+			...modeProps,
+			...imageOptions !== void 0 ? { image: {
+				extractOptions: imageOptions,
+				...modeProps?.image
+			} } : {}
+		},
+		palettes,
+		pencils,
+		showAlpha,
+		showEyedropper,
+		showRecentColors,
+		recentColors: activeRecents,
+		onRecentColorsChange
+	}), [
+		palettes,
+		pencils,
+		modeProps,
+		imageOptions,
+		showAlpha,
+		showEyedropper,
+		showRecentColors,
+		activeRecents,
+		onRecentColorsChange
+	]);
+	const context = react.useMemo(() => ({
+		store,
+		disabled,
+		classNames,
+		options,
+		idPrefix
+	}), [
+		store,
+		disabled,
+		classNames,
+		options,
+		idPrefix
+	]);
+	const seed = store.get();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.PanelProvider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: rootRef,
+			className: require_context.cx("cp-root", classNames.root, className),
+			"data-cp-theme": theme,
+			"data-cp-disabled": disabled ? "true" : void 0,
+			"data-cp-collapsed": isCollapsed ? "true" : void 0,
+			"data-cp-size": activeSize === "expanded" ? "expanded" : void 0,
+			"data-cp-modes": resolved.length,
+			style: {
+				["--cp-h"]: String(seed.h),
+				["--cp-s"]: `${seed.s}%`,
+				["--cp-v"]: `${seed.v}%`,
+				["--cp-a"]: String(seed.a),
+				["--cp-preview-color"]: require_serialize.toRgbaString(seed),
+				...style
+			},
+			children: [showTitleBar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_context.cx("cp-titlebar", classNames.titlebar),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cp-lights",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "close",
+								"aria-label": "Close",
+								disabled: disabled || onClose === void 0,
+								onClick: () => onClose?.(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.WindowGlyph, { name: "close" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "min",
+								"aria-label": isCollapsed ? "Expand panel" : "Collapse panel",
+								"aria-expanded": !isCollapsed,
+								"aria-controls": bodyId,
+								disabled,
+								onClick: toggleCollapsed,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.WindowGlyph, { name: "collapse" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "max",
+								"aria-label": activeSize === "expanded" ? "Restore panel width" : "Widen panel",
+								"aria-pressed": activeSize === "expanded",
+								disabled,
+								onClick: toggleSize,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.WindowGlyph, { name: "expand" })
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cp-title",
+						children: title
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cp-titlebar-spacer",
+						"aria-hidden": "true"
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cp-body",
+				id: bodyId,
+				children: [
+					resolved.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModeToolbar.ModeToolbar, {
+						modes: resolved,
+						activeId,
+						onSelect: selectMode
+					}),
+					active !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "tabpanel",
+						id: `${idPrefix}-panel-${active.id}`,
+						"aria-labelledby": `${idPrefix}-tab-${active.id}`,
+						ref: panelHostRef,
+						tabIndex: -1,
+						className: require_context.cx("cp-panel-host", classNames.panel),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(active.Panel, { ...options.modeProps[active.id] ?? {} })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelFooter.PanelFooter, {})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+exports.ChromaPanel = ChromaPanel;
+exports.DEFAULT_COLOR = DEFAULT_COLOR;
+exports.FALLBACK = FALLBACK;

package/dist/components/ChromaPanel.d.cts

@@ -0,0 +1,47 @@
+import { ColorChangeResult, ColorFormat, Hsva } from "../color/types.cjs";
+import { ColorStore } from "../core/store.cjs";
+import { ExtractOptions } from "../image/extract.cjs";
+import { ModeId, PickerMode } from "../modes/registry.cjs";
+import { ChromaClassNames, ColorPalette } from "../core/context.cjs";
+import * as React from "react";
+//#region src/components/ChromaPanel.d.ts
+export type PanelSize = "default" | "expanded";
+export interface ChromaPanelProps {
+  value?: string | Hsva;
+  defaultValue?: string | Hsva;
+  onChange?: (color: ColorChangeResult) => void;
+  onChangeComplete?: (color: ColorChangeResult) => void;
+  modes?: (ModeId | string | PickerMode)[];
+  mode?: string;
+  defaultMode?: string;
+  onModeChange?: (mode: string) => void;
+  format?: ColorFormat;
+  showAlpha?: boolean;
+  showEyedropper?: boolean;
+  showRecentColors?: boolean;
+  recentColors?: string[];
+  defaultRecentColors?: string[];
+  onRecentColorsChange?: (colors: string[]) => void;
+  palettes?: ColorPalette[];
+  pencils?: string[];
+  modeProps?: Record<string, Record<string, unknown>>;
+  imageOptions?: ExtractOptions;
+  disabled?: boolean;
+  theme?: "dark" | "light";
+  showTitleBar?: boolean;
+  title?: string;
+  onClose?: () => void;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  size?: PanelSize;
+  defaultSize?: PanelSize;
+  onSizeChange?: (size: PanelSize) => void;
+  injectStyles?: boolean;
+  className?: string;
+  classNames?: ChromaClassNames;
+  style?: React.CSSProperties;
+  store?: ColorStore;
+}
+export declare function ChromaPanel(props: ChromaPanelProps): React.ReactElement;
+//#endregion

package/dist/components/ChromaPanel.d.ts

@@ -0,0 +1,47 @@
+import { ColorChangeResult, ColorFormat, Hsva } from "../color/types.js";
+import { ColorStore } from "../core/store.js";
+import { ExtractOptions } from "../image/extract.js";
+import { ModeId, PickerMode } from "../modes/registry.js";
+import { ChromaClassNames, ColorPalette } from "../core/context.js";
+import * as React from "react";
+//#region src/components/ChromaPanel.d.ts
+export type PanelSize = "default" | "expanded";
+export interface ChromaPanelProps {
+  value?: string | Hsva;
+  defaultValue?: string | Hsva;
+  onChange?: (color: ColorChangeResult) => void;
+  onChangeComplete?: (color: ColorChangeResult) => void;
+  modes?: (ModeId | string | PickerMode)[];
+  mode?: string;
+  defaultMode?: string;
+  onModeChange?: (mode: string) => void;
+  format?: ColorFormat;
+  showAlpha?: boolean;
+  showEyedropper?: boolean;
+  showRecentColors?: boolean;
+  recentColors?: string[];
+  defaultRecentColors?: string[];
+  onRecentColorsChange?: (colors: string[]) => void;
+  palettes?: ColorPalette[];
+  pencils?: string[];
+  modeProps?: Record<string, Record<string, unknown>>;
+  imageOptions?: ExtractOptions;
+  disabled?: boolean;
+  theme?: "dark" | "light";
+  showTitleBar?: boolean;
+  title?: string;
+  onClose?: () => void;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  size?: PanelSize;
+  defaultSize?: PanelSize;
+  onSizeChange?: (size: PanelSize) => void;
+  injectStyles?: boolean;
+  className?: string;
+  classNames?: ChromaClassNames;
+  style?: React.CSSProperties;
+  store?: ColorStore;
+}
+export declare function ChromaPanel(props: ChromaPanelProps): React.ReactElement;
+//#endregion

package/dist/components/ChromaPanel.js

@@ -0,0 +1,251 @@
+"use client";
+import { warnOnce } from "../core/dev.js";
+import { resolveModes } from "../modes/registry.js";
+import { PanelProvider, cx, useStableId } from "../core/context.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { parse } from "../color/parse.js";
+import { toHex, toResult, toRgbaString } from "../color/serialize.js";
+import { WindowGlyph } from "../primitives/icons.js";
+import { sameRendered } from "../color/sticky.js";
+import { createColorStore } from "../core/store.js";
+import { injectStyles } from "../core/styleInjector.js";
+import { css } from "../styles/css.js";
+import { useScrollFade } from "../core/useScrollFade.js";
+import { ModeToolbar } from "./ModeToolbar.js";
+import { PanelFooter, pushRecent } from "./PanelFooter.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChromaPanel.tsx
+const DEFAULT_COLOR = "#3366cc";
+const FALLBACK = {
+	h: 220,
+	s: 75,
+	v: 80,
+	a: 1
+};
+function ChromaPanel(props) {
+	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, modes = [
+		"wheel",
+		"sliders",
+		"palettes",
+		"image",
+		"pencils"
+	], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colours", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
+	const rootRef = React.useRef(null);
+	const panelHostRef = React.useRef(null);
+	const idPrefix = useStableId("cp");
+	const initial = React.useMemo(() => {
+		const seed = value ?? defaultValue;
+		const parsed = typeof seed === "string" ? parse(seed) : seed;
+		if (parsed === null) warnOnce(`could not parse "${seed}"; falling back to ${DEFAULT_COLOR}.`);
+		return parsed ?? FALLBACK;
+	}, []);
+	const ownStore = React.useMemo(() => createColorStore(initial), [initial]);
+	const store = externalStore ?? ownStore;
+	React.useEffect(() => {
+		if (shouldInject) injectStyles(css, "v2", rootRef.current);
+	}, [shouldInject]);
+	useTransientColor(store, (c) => {
+		const el = rootRef.current;
+		if (el === null) return;
+		el.style.setProperty("--cp-h", String(c.h));
+		el.style.setProperty("--cp-s", `${c.s}%`);
+		el.style.setProperty("--cp-v", `${c.v}%`);
+		el.style.setProperty("--cp-a", String(c.a));
+		el.style.setProperty("--cp-preview-color", toRgbaString(c));
+	});
+	React.useEffect(() => {
+		if (value === void 0) return;
+		const parsed = typeof value === "string" ? parse(value) : value;
+		if (parsed === null || parsed === void 0) {
+			warnOnce(`could not parse value "${value}".`);
+			return;
+		}
+		if (sameRendered(parsed, store.get())) return;
+		store.ingest(parsed);
+	}, [value, store]);
+	const [internalRecents, setInternalRecents] = React.useState(() => defaultRecentColors ?? []);
+	const activeRecents = recentColors ?? internalRecents;
+	const callbacks = React.useRef({
+		onChange,
+		onChangeComplete,
+		format,
+		activeRecents,
+		onRecentColorsChange,
+		controlled: recentColors !== void 0
+	});
+	React.useEffect(() => {
+		callbacks.current = {
+			onChange,
+			onChangeComplete,
+			format,
+			activeRecents,
+			onRecentColorsChange,
+			controlled: recentColors !== void 0
+		};
+	});
+	React.useEffect(() => store.subscribe((c) => callbacks.current.onChange?.(toResult(c, callbacks.current.format))), [store]);
+	React.useEffect(() => store.subscribeCommit((c) => {
+		const { onChangeComplete: done, format: fmt, activeRecents: recents, onRecentColorsChange: notify, controlled } = callbacks.current;
+		done?.(toResult(c, fmt));
+		const next = pushRecent(recents, toHex(c));
+		if (!controlled) setInternalRecents(next);
+		notify?.(next);
+	}), [store]);
+	const resolved = React.useMemo(() => resolveModes(modes), [modes]);
+	const first = resolved[0];
+	const [internalMode, setInternalMode] = React.useState(() => defaultMode ?? first?.id ?? "wheel");
+	const activeId = mode ?? internalMode;
+	const active = resolved.find((m) => m.id === activeId) ?? first;
+	useScrollFade(panelHostRef, activeId);
+	const selectMode = (id) => {
+		if (mode === void 0) setInternalMode(id);
+		onModeChange?.(id);
+	};
+	const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+	const isCollapsed = collapsed ?? internalCollapsed;
+	const toggleCollapsed = () => {
+		const next = !isCollapsed;
+		if (collapsed === void 0) setInternalCollapsed(next);
+		onCollapsedChange?.(next);
+	};
+	const [internalSize, setInternalSize] = React.useState(defaultSize);
+	const activeSize = size ?? internalSize;
+	const toggleSize = () => {
+		const next = activeSize === "expanded" ? "default" : "expanded";
+		if (size === void 0) setInternalSize(next);
+		onSizeChange?.(next);
+	};
+	const bodyId = `${idPrefix}-body`;
+	const options = React.useMemo(() => ({
+		modeProps: {
+			...modeProps,
+			...imageOptions !== void 0 ? { image: {
+				extractOptions: imageOptions,
+				...modeProps?.image
+			} } : {}
+		},
+		palettes,
+		pencils,
+		showAlpha,
+		showEyedropper,
+		showRecentColors,
+		recentColors: activeRecents,
+		onRecentColorsChange
+	}), [
+		palettes,
+		pencils,
+		modeProps,
+		imageOptions,
+		showAlpha,
+		showEyedropper,
+		showRecentColors,
+		activeRecents,
+		onRecentColorsChange
+	]);
+	const context = React.useMemo(() => ({
+		store,
+		disabled,
+		classNames,
+		options,
+		idPrefix
+	}), [
+		store,
+		disabled,
+		classNames,
+		options,
+		idPrefix
+	]);
+	const seed = store.get();
+	return /* @__PURE__ */ jsx(PanelProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rootRef,
+			className: cx("cp-root", classNames.root, className),
+			"data-cp-theme": theme,
+			"data-cp-disabled": disabled ? "true" : void 0,
+			"data-cp-collapsed": isCollapsed ? "true" : void 0,
+			"data-cp-size": activeSize === "expanded" ? "expanded" : void 0,
+			"data-cp-modes": resolved.length,
+			style: {
+				["--cp-h"]: String(seed.h),
+				["--cp-s"]: `${seed.s}%`,
+				["--cp-v"]: `${seed.v}%`,
+				["--cp-a"]: String(seed.a),
+				["--cp-preview-color"]: toRgbaString(seed),
+				...style
+			},
+			children: [showTitleBar && /* @__PURE__ */ jsxs("div", {
+				className: cx("cp-titlebar", classNames.titlebar),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "cp-lights",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "close",
+								"aria-label": "Close",
+								disabled: disabled || onClose === void 0,
+								onClick: () => onClose?.(),
+								children: /* @__PURE__ */ jsx(WindowGlyph, { name: "close" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "min",
+								"aria-label": isCollapsed ? "Expand panel" : "Collapse panel",
+								"aria-expanded": !isCollapsed,
+								"aria-controls": bodyId,
+								disabled,
+								onClick: toggleCollapsed,
+								children: /* @__PURE__ */ jsx(WindowGlyph, { name: "collapse" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cp-light",
+								"data-cp-light": "max",
+								"aria-label": activeSize === "expanded" ? "Restore panel width" : "Widen panel",
+								"aria-pressed": activeSize === "expanded",
+								disabled,
+								onClick: toggleSize,
+								children: /* @__PURE__ */ jsx(WindowGlyph, { name: "expand" })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "cp-title",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "cp-titlebar-spacer",
+						"aria-hidden": "true"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "cp-body",
+				id: bodyId,
+				children: [
+					resolved.length > 1 && /* @__PURE__ */ jsx(ModeToolbar, {
+						modes: resolved,
+						activeId,
+						onSelect: selectMode
+					}),
+					active !== void 0 && /* @__PURE__ */ jsx("div", {
+						role: "tabpanel",
+						id: `${idPrefix}-panel-${active.id}`,
+						"aria-labelledby": `${idPrefix}-tab-${active.id}`,
+						ref: panelHostRef,
+						tabIndex: -1,
+						className: cx("cp-panel-host", classNames.panel),
+						children: /* @__PURE__ */ jsx(active.Panel, { ...options.modeProps[active.id] ?? {} })
+					}),
+					/* @__PURE__ */ jsx(PanelFooter, {})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { ChromaPanel, DEFAULT_COLOR, FALLBACK };
+