@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/primitives/button/Button.styles.js

@@ -0,0 +1,64 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { css } from "../../../r-html/dist/template/css.js";
+import { fontSize1, fontSize2, fontSize3 } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/button/Button.styles.ts
+var Button_styles_exports = /* @__PURE__ */ __exportAll({
+	button: () => button,
+	size1: () => size1,
+	size2: () => size2,
+	size3: () => size3,
+	soft: () => soft,
+	solid: () => solid
+});
+var button = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 6px;
+  cursor: pointer;
+`;
+var soft = css`
+  background-color: var(--accent-color-3);
+  color: var(--accent-color-11);
+
+  &:hover {
+    background-color: var(--accent-color-4);
+  }
+
+  &:active {
+    background-color: var(--accent-color-5);
+  }
+`;
+var solid = css`
+  background-color: var(--accent-color-9);
+  color: #fff;
+
+  &:hover {
+    background-color: var(--accent-color-10);
+  }
+
+  &:active {
+    background-color: var(--accent-color-10);
+  }
+`;
+var size1 = css`
+  font-weight: var(--font-weight-medium);
+  padding: 0 8px;
+  height: 24px;
+  ${fontSize1};
+`;
+var size2 = css`
+  font-weight: var(--font-weight-medium);
+  padding: 0 12px;
+  height: 32px;
+  ${fontSize2};
+`;
+var size3 = css`
+  font-weight: var(--font-weight-medium);
+  padding: 0 16px;
+  height: 40px;
+  ${fontSize3};
+`;
+//#endregion
+export { Button_styles_exports, button, size1, size2, size3, soft, solid };

package/dist/components/primitives/code-block/CodeBlock.js

@@ -0,0 +1,94 @@
+import { arrayHas } from "../../../utils/arrayHas.js";
+import { onBeforeMount } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { innerHTML } from "../../../r-html/dist/render/directives/node/innerHTML.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../icon/Icon.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { getShikiService } from "../../../services/shiki/index.js";
+import { clipboard, layers, preview, root, scroller, textarea, tools } from "./CodeBlock.styles.js";
+//#region src/components/primitives/code-block/CodeBlock.tsx
+var hasPropName = arrayHas([
+	"value",
+	"lang",
+	"theme"
+]);
+var CodeBlock = (props, ctx) => {
+	const preview$1 = createRef();
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({
+		highlight: "",
+		backgroundColor: ""
+	});
+	let highlightSource = null;
+	let highlightRequestId = 0;
+	const getValue = () => props.value.replace(/\n+$/, "");
+	const handleCopy = () => {
+		props.onCopy?.(getValue());
+	};
+	const handleBeforeinput = (event) => {
+		event.preventDefault();
+	};
+	const handleInput = (event) => {
+		const $textarea = event.target;
+		const value = getValue();
+		if ($textarea.value !== value) $textarea.value = value;
+	};
+	const handlePaste = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const getPre = () => {
+		const $preview = preview$1.value;
+		if (!$preview) return null;
+		return $preview.querySelector("pre.shiki");
+	};
+	const getBackgroundColor = () => {
+		const pre = getPre();
+		if (!pre) return null;
+		const backgroundColor = pre.style.backgroundColor;
+		if (!backgroundColor) return null;
+		return backgroundColor;
+	};
+	const setBackgroundColor = () => {
+		nextTick(() => {
+			state.backgroundColor = getBackgroundColor() || "";
+			getPre()?.removeAttribute("tabindex");
+		});
+	};
+	const setHighlight = () => {
+		const value = getValue();
+		const requestId = ++highlightRequestId;
+		if (highlightSource !== value) {
+			highlightSource = value;
+			state.highlight = "";
+		}
+		getShikiService()?.codeToHtml(value, {
+			lang: props.lang,
+			theme: props.theme
+		}).then((highlight) => {
+			if (requestId !== highlightRequestId) return;
+			state.highlight = highlight;
+			setBackgroundColor();
+		});
+	};
+	onBeforeMount(() => {
+		setHighlight();
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			hasPropName(propName) && setHighlight();
+		}), () => {
+			state.highlight = "";
+		});
+	});
+	return () => {
+		const value = getValue();
+		const { t } = i18n.value;
+		return html`<div class=${root} .dir="ltr"><div class=${["scrollbar", scroller]} style=${{ "background-color": state.backgroundColor }}><div class=${layers}><div class=${preview} aria-hidden="true" ${ref(preview$1)}>${state.highlight ? innerHTML(state.highlight) : value}</div><textarea class=${textarea} aria-label=${t("code.label")} aria-readonly="true" inputmode="none" tabindex="0" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" .value=${value} @beforeinput=${handleBeforeinput} @input=${handleInput} @paste=${handlePaste}></textarea></div></div><div class=${tools} style=${{ "--code-block-background": state.backgroundColor || "var(--canvas-background)" }}><div class=${clipboard} title=${t("code.copy")} @click=${handleCopy}><${Icon} .name="copy" .useTransition=${true} /></div>${props.tools ?? null}</div></div>`;
+	};
+};
+//#endregion
+export { CodeBlock as default };

package/dist/components/primitives/code-block/CodeBlock.styles.js

@@ -0,0 +1,108 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/code-block/CodeBlock.styles.ts
+var layer = css`
+  padding: 16px;
+  font-family: var(--code-font-family);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  font-weight: var(--font-weight-regular);
+  font-kerning: none;
+  font-synthesis: none;
+  font-variant-ligatures: none;
+  font-variant-caps: normal;
+  font-style: normal;
+  text-transform: none;
+  white-space: pre;
+  text-align: left;
+  text-indent: 0;
+  word-spacing: normal;
+  tab-size: 8;
+  -webkit-text-size-adjust: 100%;
+`;
+var tools = css`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+var clipboard = css`
+  display: inline-flex;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--foreground);
+  opacity: 0;
+  transition: opacity 0.15s;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:hover {
+    color: var(--active);
+  }
+`;
+var root = css`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 40px;
+  outline: none;
+
+  &:hover {
+    ${clipboard} {
+      opacity: 1;
+    }
+  }
+`;
+var scroller = css`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+var layers = css`
+  position: relative;
+  width: max-content;
+  min-width: 100%;
+  min-height: 100%;
+`;
+var preview = css`
+  ${layer};
+  color: var(--active);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* the UA matches pre and code directly, which beats anything this rule only inherits down */
+  & * {
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+`;
+var textarea = css`
+  ${layer};
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  resize: none;
+  appearance: none;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-color: transparent;
+  caret-color: var(--active);
+
+  /* painted above the code, so the band has to stay translucent — --placeholder is grayA-10 */
+  &::selection {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-color: var(--placeholder);
+  }
+`;
+//#endregion
+export { clipboard, layers, preview, root, scroller, textarea, tools };

package/dist/components/primitives/color-picker/ColorPicker.js

@@ -0,0 +1,333 @@
+import { KeyBindingName, KeyBindingNameList, PANEL_PASSING_BINDINGS, isComposing, matchesShortcut } from "../../../utils/keyboard-shortcut/index.js";
+import { isEditableTarget } from "../../../utils/validation.js";
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { hasMoveKeys } from "../../../engine/modules/editor/state.js";
+import { toOpaqueHex } from "../../../utils/tableColor.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../icon/Icon.js";
+import { onNumberOnly, onStop } from "../../../utils/domEvent.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { hexToHsv, hsvToHex, hsvToRgb, isCompleteHexInput, parseChannelInput, parseHexInput, rgbToHsv, stepArea, stepHue } from "./colorModel.js";
+import { area, areaThumb, body, caption, clear, container, controls, field, fieldLabel, fields, hexField, hue, hueThumb, iconButton, input, panel, preview, swatch, swatchArea, swatches } from "./ColorPicker.styles.js";
+import { PRESET_COLORS } from "./presetColors.js";
+import { resolveColor } from "./resolveColor.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/color-picker/ColorPicker.tsx
+var DOCUMENT_COLOR_LIMIT = 8;
+var SWATCH_COLUMNS = 8;
+var FALLBACK_HSV = {
+	h: 0,
+	s: 1,
+	v: 1
+};
+var EYEDROPPER_DEAD_MS = 150;
+var TABBABLE = "[tabindex=\"0\"], input, button:not([tabindex=\"-1\"])";
+var getEyeDropper = () => globalThis.EyeDropper;
+var CHANNELS = [
+	{
+		field: "r",
+		label: "R",
+		titleKey: "colorPicker.channel.red"
+	},
+	{
+		field: "g",
+		label: "G",
+		titleKey: "colorPicker.channel.green"
+	},
+	{
+		field: "b",
+		label: "B",
+		titleKey: "colorPicker.channel.blue"
+	}
+];
+var CHANNEL_INDEX = {
+	r: 0,
+	g: 1,
+	b: 2
+};
+var ratioOf = (event) => {
+	const rect = event.currentTarget.getBoundingClientRect();
+	if (!rect.width || !rect.height) return null;
+	return {
+		x: clamp((event.clientX - rect.left) / rect.width, 0, 1),
+		y: clamp((event.clientY - rect.top) / rect.height, 0, 1)
+	};
+};
+var stepSwatch = (index, count, key) => {
+	switch (key) {
+		case "ArrowLeft": return Math.max(index - 1, 0);
+		case "ArrowRight": return Math.min(index + 1, count - 1);
+		case "ArrowUp": return index < SWATCH_COLUMNS ? index : index - SWATCH_COLUMNS;
+		case "ArrowDown": return index + SWATCH_COLUMNS < count ? index + SWATCH_COLUMNS : index;
+		case "Home": return 0;
+		case "End": return count - 1;
+		default: return null;
+	}
+};
+var ColorPicker = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	const container$1 = createRef();
+	const panel$1 = createRef();
+	const hue$1 = createRef();
+	const eyeDropperButton = createRef();
+	const EyeDropperApi = getEyeDropper();
+	const initial = resolveColor(props.color ?? "");
+	const start = initial ? hexToHsv(initial, FALLBACK_HSV) : FALLBACK_HSV;
+	const state = observable({
+		x: props.x,
+		y: props.y,
+		h: start.h,
+		s: start.s,
+		v: start.v,
+		empty: initial === null,
+		draft: null,
+		eyeDropper: Boolean(EyeDropperApi),
+		presetActive: 0,
+		documentActive: 0
+	});
+	let eyeDropperAbort = null;
+	const hsv = () => ({
+		h: state.h,
+		s: state.s,
+		v: state.v
+	});
+	const currentHex = () => state.empty ? null : hsvToHex(hsv());
+	const update = (next, discrete) => {
+		const before = currentHex();
+		state.h = next.h;
+		state.s = next.s;
+		state.v = next.v;
+		state.empty = false;
+		const hex = hsvToHex(next);
+		if (discrete || hex !== before) props.onChange?.(hex);
+	};
+	const shown = (field) => {
+		if (state.empty) return "";
+		return field === "hex" ? hsvToHex(hsv()).slice(1).toUpperCase() : String(hsvToRgb(hsv())[CHANNEL_INDEX[field]]);
+	};
+	const valueOf = (field) => state.draft?.field === field ? state.draft.text : shown(field);
+	const press = (apply) => (event) => {
+		if (event.button !== 0 || !event.isPrimary) return;
+		const el = event.currentTarget;
+		el.focus({ preventScroll: true });
+		el.setPointerCapture(event.pointerId);
+		const ratio = ratioOf(event);
+		if (ratio) apply(ratio, true);
+	};
+	const drag = (apply) => (event) => {
+		if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+		const ratio = ratioOf(event);
+		if (ratio) apply(ratio, false);
+	};
+	const applyArea = ({ x, y }, discrete) => update({
+		...hsv(),
+		s: x,
+		v: 1 - y
+	}, discrete);
+	const applyHue = ({ x }, discrete) => update({
+		...hsv(),
+		h: x * 360
+	}, discrete);
+	const handleAreaPointerdown = press(applyArea);
+	const handleAreaPointermove = drag(applyArea);
+	const handleHuePointerdown = press(applyHue);
+	const handleHuePointermove = drag(applyHue);
+	const stepWith = (event, step) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		const next = step();
+		if (!next) return;
+		event.preventDefault();
+		event.stopPropagation();
+		update(next, false);
+	};
+	const handleAreaKeydown = (event) => stepWith(event, () => stepArea(hsv(), event.key, event.shiftKey));
+	const handleHueKeydown = (event) => stepWith(event, () => {
+		const h = stepHue(state.h, event.key, event.shiftKey);
+		return h === null ? null : {
+			...hsv(),
+			h
+		};
+	});
+	const commit = (field) => {
+		const { draft } = state;
+		if (draft?.field === field && draft.text !== shown(field)) {
+			if (field === "hex") {
+				const hex = parseHexInput(draft.text) ?? resolveColor(draft.text);
+				if (hex) update(hexToHsv(hex, hsv()), true);
+			} else {
+				const value = parseChannelInput(draft.text);
+				if (value !== null) {
+					const rgb = hsvToRgb(hsv());
+					rgb[CHANNEL_INDEX[field]] = value;
+					update(rgbToHsv(rgb, hsv()), true);
+				}
+			}
+		}
+		state.draft = null;
+	};
+	const createFieldHandlers = (field) => ({
+		input: (event) => {
+			if (field !== "hex") onNumberOnly(event);
+			const text = event.target.value;
+			state.draft = {
+				field,
+				text
+			};
+			if (field === "hex" && isCompleteHexInput(text)) update(hexToHsv(parseHexInput(text), hsv()), false);
+		},
+		change: () => commit(field),
+		keydown: (event) => {
+			if (event.key === "Enter" && !isComposing(event)) commit(field);
+		},
+		blur: () => {
+			state.draft = null;
+		}
+	});
+	const fieldHandlers = {
+		hex: createFieldHandlers("hex"),
+		r: createFieldHandlers("r"),
+		g: createFieldHandlers("g"),
+		b: createFieldHandlers("b")
+	};
+	const handleSwatchKeydown = (event) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const group = event.currentTarget;
+		const buttons = Array.from(group.querySelectorAll("button"));
+		const index = buttons.indexOf(event.target);
+		const next = stepSwatch(index, buttons.length, event.key);
+		if (next === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (next === index) return;
+		buttons[next].focus();
+		buttons[next].click();
+	};
+	const handleEyeDropper = () => {
+		eyeDropperAbort?.abort();
+		const controller = new AbortController();
+		const { signal } = controller;
+		eyeDropperAbort = controller;
+		const started = performance.now();
+		new EyeDropperApi().open({ signal }).then(({ sRGBHex }) => {
+			const hex = toOpaqueHex(sRGBHex);
+			if (!signal.aborted && hex) update(hexToHsv(hex, hsv()), true);
+		}, (error) => {
+			const name = error?.name;
+			if (!(name === "OperationError" || name === "AbortError" && !signal.aborted && performance.now() - started < EYEDROPPER_DEAD_MS)) return;
+			const button = eyeDropperButton.value;
+			if ((button?.getRootNode())?.activeElement === button) hue$1.value.focus({ preventScroll: true });
+			state.eyeDropper = false;
+		});
+	};
+	const keepTabInside = (event) => {
+		const $panel = panel$1.value;
+		const controls = $panel.querySelectorAll(TABBABLE);
+		const first = controls[0];
+		const last = controls[controls.length - 1];
+		const { activeElement } = $panel.getRootNode();
+		if (!(event.shiftKey ? activeElement === first || activeElement === $panel : activeElement === last || Boolean(last.closest("[role=\"radiogroup\"]")?.contains(activeElement)))) return;
+		event.preventDefault();
+		(event.shiftKey ? last : first).focus();
+	};
+	const handleKeydown = (event) => {
+		const matches = (name) => matchesShortcut(event, props.keyBindingMap[name]);
+		if (isComposing(event)) {
+			event.stopPropagation();
+			return;
+		}
+		if (matches(KeyBindingName.stop)) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onClose?.();
+			return;
+		}
+		if (event.key === "Tab") keepTabInside(event);
+		const bound = KeyBindingNameList.some(matches);
+		if (!PANEL_PASSING_BINDINGS.some(matches) && (hasMoveKeys(event.key) || bound)) {
+			event.stopPropagation();
+			const buttonPress = event.target instanceof HTMLButtonElement && (event.key === " " || event.key === "Enter");
+			if (bound && !isEditableTarget(event.target) && !buttonPress) event.preventDefault();
+		}
+	};
+	const handleWheel = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const handleContextmenu = (event) => {
+		event.stopPropagation();
+		if (event.target.tagName !== "INPUT") event.preventDefault();
+	};
+	onMounted(() => {
+		const $container = container$1.value;
+		if (props.viewport) {
+			const rect = $container.getBoundingClientRect();
+			const width = props.x + rect.width;
+			const height = props.y + rect.height;
+			if (props.viewport.width < width) {
+				const x = props.viewport.width - rect.width;
+				if (0 <= x) state.x = x;
+			}
+			if (props.viewport.height < height) {
+				const y = props.viewport.height - rect.height;
+				if (0 <= y) state.y = y;
+			}
+		}
+		panel$1.value.focus({ preventScroll: true });
+	});
+	onUnmounted(() => {
+		eyeDropperAbort?.abort();
+		const host = ctx.host;
+		nextTick(() => {
+			host.dispatchEvent(focusEvent());
+		});
+	});
+	const renderSwatches = (groupLabel, swatches$1, activeKey) => {
+		const current = currentHex();
+		const checked = swatches$1.findIndex(({ color }) => color === current);
+		const roving = checked === -1 ? state[activeKey] : checked;
+		return html`<div class=${swatches} role="radiogroup" aria-label=${groupLabel} @keydown=${handleSwatchKeydown}>${swatches$1.map(({ color, label }, index) => html`<button class=${swatch} type="button" role="radio" aria-label=${label} aria-checked=${String(color === current)} title=${color.toUpperCase()} tabindex=${index === roving ? 0 : -1} style=${{ "background-color": color }} @click=${() => update(hexToHsv(color, hsv()), true)} @focus=${() => {
+			state[activeKey] = index;
+		}}></button>`)}</div>`;
+	};
+	return () => {
+		const { t } = i18n.value;
+		const { empty } = state;
+		const saturation = Math.round(state.s * 100);
+		const brightness = Math.round(state.v * 100);
+		const degrees = Math.round(state.h);
+		const documentColors = (props.documentColors ?? []).slice(0, DOCUMENT_COLOR_LIMIT).map((color) => ({
+			color,
+			label: color.toUpperCase()
+		}));
+		const presets = PRESET_COLORS.map(({ color, labelKey }) => ({
+			color,
+			label: t(labelKey)
+		}));
+		const noColor = t("colorPicker.noColor");
+		return html`<div class=${["color-picker", container]} .dir="ltr" style=${{
+			top: `${state.y}px`,
+			left: `${state.x}px`
+		}} ${ref(container$1)}><div class=${panel} role="dialog" aria-label=${t("common.color")} tabindex="-1" ${ref(panel$1)} @keydown=${handleKeydown} @wheel=${handleWheel} @contextmenu=${handleContextmenu} @touchstart=${onStop} @copy=${onStop} @paste=${onStop}><div class=${body}><div class=${area} role="slider" tabindex="0" aria-label=${t("colorPicker.saturationAndBrightness")} aria-roledescription=${t("colorPicker.slider2d")} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${saturation} aria-valuetext=${empty ? noColor : t("colorPicker.areaValue", {
+			saturation,
+			brightness
+		})} style=${{ "background-color": hsvToHex({
+			h: state.h,
+			s: 1,
+			v: 1
+		}) }} @pointerdown=${handleAreaPointerdown} @pointermove=${handleAreaPointermove} @keydown=${handleAreaKeydown}><div class=${areaThumb} style=${{
+			left: `${state.s * 100}%`,
+			top: `${(1 - state.v) * 100}%`
+		}}></div></div><div class=${controls}>${state.eyeDropper ? html`<button class=${iconButton} type="button" aria-label=${t("colorPicker.eyeDropper")} title=${t("colorPicker.eyeDropper")} ${ref(eyeDropperButton)} @click=${handleEyeDropper}><${Icon} .name="pipette" .size=${16} /></button>` : null}<div class=${hue} role="slider" tabindex="0" aria-label=${t("colorPicker.hue")} aria-valuemin="0" aria-valuemax="360" aria-valuenow=${degrees} aria-valuetext=${empty ? noColor : t("colorPicker.degrees", { count: degrees })} ${ref(hue$1)} @pointerdown=${handleHuePointerdown} @pointermove=${handleHuePointermove} @keydown=${handleHueKeydown}><div class=${hueThumb} style=${{ left: `${state.h / 360 * 100}%` }}></div></div><div class=${preview} aria-hidden="true" style=${{ "background-color": currentHex() ?? "" }}></div></div></div><div class=${fields}><label class=${hexField}><input class=${input} type="text" aria-label="Hex" placeholder=${empty ? t("common.none") : ""} spellcheck="false" autocomplete="off" .value=${valueOf("hex")} @input=${fieldHandlers.hex.input} @change=${fieldHandlers.hex.change} @keydown=${fieldHandlers.hex.keydown} @blur=${fieldHandlers.hex.blur} /><span class=${fieldLabel} aria-hidden="true">Hex</span></label>${CHANNELS.map(({ field: field$1, label, titleKey }) => html`<label class=${field}><input class=${input} type="text" aria-label=${label} title=${t(titleKey)} inputmode="numeric" maxlength=${3} spellcheck="false" autocomplete="off" .value=${valueOf(field$1)} @input=${fieldHandlers[field$1].input} @change=${fieldHandlers[field$1].change} @keydown=${fieldHandlers[field$1].keydown} @blur=${fieldHandlers[field$1].blur} /><span class=${fieldLabel} aria-hidden="true">${label}</span></label>`)}</div><div class=${swatchArea}>${renderSwatches(t("colorPicker.presets"), presets, "presetActive")}${documentColors.length ? html`<div class=${caption} aria-hidden="true">${t("colorPicker.documentColors")}</div>${renderSwatches(t("colorPicker.documentColors"), documentColors, "documentActive")}` : null}</div>${props.onClear ? html`<button class=${clear} type="button" @click=${props.onClear}>${noColor}</button>` : null}</div></div>`;
+	};
+};
+//#endregion
+export { ColorPicker as default };