@will-ui/vue 1.0.0

package/dist/util/calc.d.ts

@@ -0,0 +1,40 @@
+import { AdjustmentPosition, RectType, PlacementType } from '../config/types';
+/** 消除浮点累加误差 */
+export declare const resolveAccuracy: (v: number) => number;
+export declare const calculator: {
+    add: (...items: number[]) => number;
+};
+export interface PlacementOptions {
+    readonly triggerRect: RectType;
+    readonly layerSize: {
+        width: number;
+        height: number;
+    };
+    readonly adjustPosition: AdjustmentPosition;
+    readonly placement?: PlacementType;
+    readonly gap?: number;
+    readonly offset?: {
+        x: number;
+        y: number;
+    };
+    readonly arrowOffset?: {
+        x: number;
+        y: number;
+    };
+    readonly layer?: unknown;
+}
+export interface PlacementResult {
+    top: number;
+    left: number;
+    /** 相对弹出层的箭头 / transform-origin X */
+    x: number;
+    /** 相对弹出层的箭头 / transform-origin Y */
+    y: number;
+    /** 可能经自动调整后的最终方位 */
+    placement: PlacementType;
+}
+/**
+ * 双盒定位：按 placement 计算弹出层坐标与箭头位置，必要时自动调整方位。
+ * 返回值字段与历史用法兼容：{ top, left, x, y, placement }
+ */
+export declare function getPlacement({ triggerRect, layerSize, placement, adjustPosition, gap, offset, arrowOffset, layer, }: PlacementOptions): PlacementResult;

package/dist/util/calc.js

@@ -0,0 +1,239 @@
+import { getPageScroll, getWindowSize } from "./dom.js";
+//#region util/calc.ts
+/** 消除浮点累加误差 */
+var resolveAccuracy = (v) => Number(v.toFixed(8));
+var ARROW_FALLBACK = 4;
+/** 箭头贴边时相对 trigger 短边的比例偏移 */
+var ARROW_EDGE_RATIO = .25;
+/** 箭头距层边缘的最小距离（还会与 radius+arrow 取更大值） */
+var ARROW_EDGE_LIMIT_MIN = 18;
+function resolveLayerEl(layer) {
+	if (!layer) return null;
+	if (typeof HTMLElement !== "undefined" && layer instanceof HTMLElement) return layer;
+	if (typeof layer === "object" && layer !== null && "value" in layer) {
+		const v = layer.value;
+		if (typeof HTMLElement !== "undefined" && v instanceof HTMLElement) return v;
+	}
+	return null;
+}
+function resolveArrowMetrics(layer) {
+	let size = ARROW_FALLBACK;
+	let radius = 0;
+	const el = resolveLayerEl(layer);
+	if (el && typeof getComputedStyle === "function") {
+		const cs = getComputedStyle(el);
+		const parsedSize = parseFloat(cs.getPropertyValue("--_layer-arrow-size")) || parseFloat(cs.getPropertyValue("--w-layer-arrow-size"));
+		const parsedRadius = parseFloat(cs.getPropertyValue("--w-radius"));
+		if (Number.isFinite(parsedSize) && parsedSize > 0) size = parsedSize;
+		if (Number.isFinite(parsedRadius) && parsedRadius >= 0) radius = parsedRadius;
+	}
+	return {
+		size,
+		edgeLimit: Math.max(ARROW_EDGE_LIMIT_MIN, radius + size)
+	};
+}
+function clampCenter(value, min, max) {
+	if (max <= min) return (min + max) / 2;
+	return Math.min(Math.max(value, min), max);
+}
+function parsePlacement(p) {
+	if (p === "center" || p === "client-center") return null;
+	const [side, align = "center"] = p.split("-");
+	return {
+		side,
+		align: align || "center"
+	};
+}
+function pickAlignPlacement(side, crossStart, crossEnd, balanceThreshold = 100) {
+	if (Math.abs(crossStart - crossEnd) < balanceThreshold) return side;
+	const preferEnd = crossStart > crossEnd;
+	if (side === "left" || side === "right") return preferEnd ? `${side}-end` : `${side}-start`;
+	return preferEnd ? `${side}-end` : `${side}-start`;
+}
+/**
+* 取 trigger 四周空间最大的一侧，并在该侧选 start/center/end。
+*/
+function pickBestPlacement(rect) {
+	const { inner } = getWindowSize();
+	const left = rect.left;
+	const top = rect.top;
+	const right = inner.width - rect.right;
+	const bottom = inner.height - rect.bottom;
+	const max = Math.max(left, top, right, bottom);
+	if (max === left) return pickAlignPlacement("left", top, bottom);
+	if (max === right) return pickAlignPlacement("right", top, bottom);
+	if (max === top) return pickAlignPlacement("top", left, right);
+	return pickAlignPlacement("bottom", left, right);
+}
+/**
+* 当 adjustPosition 指定主方向时，仅在该方向上选 start/center/end。
+*/
+function pickAlignedPlacement(side, rect) {
+	const { inner } = getWindowSize();
+	if (side === "left" || side === "right") return pickAlignPlacement(side, rect.top, inner.height - rect.bottom);
+	return pickAlignPlacement(side, rect.left, inner.width - rect.right);
+}
+function isOutOfViewport(box) {
+	const { x: sx, y: sy } = getPageScroll();
+	const { inner } = getWindowSize();
+	return box.left - sx < 0 || box.top - sy < 0 || box.left + box.width - sx > inner.width || box.top + box.height - sy > inner.height;
+}
+function placeMainAxis(side, r, l, gap) {
+	switch (side) {
+		case "top": return {
+			top: r.top - l.height - gap,
+			left: 0
+		};
+		case "bottom": return {
+			top: r.bottom + gap,
+			left: 0
+		};
+		case "left": return {
+			top: 0,
+			left: r.left - l.width - gap
+		};
+		case "right": return {
+			top: 0,
+			left: r.right + gap
+		};
+	}
+}
+function placeCrossAxis(side, align, r, l) {
+	if (side === "left" || side === "right") {
+		if (align === "start") return {
+			top: r.top,
+			left: 0
+		};
+		if (align === "end") return {
+			top: r.bottom - l.height,
+			left: 0
+		};
+		return {
+			top: r.top + r.height / 2 - l.height / 2,
+			left: 0
+		};
+	}
+	if (align === "start") return {
+		top: 0,
+		left: r.left
+	};
+	if (align === "end") return {
+		top: 0,
+		left: r.right - l.width
+	};
+	return {
+		top: 0,
+		left: r.left + r.width / 2 - l.width / 2
+	};
+}
+function arrowFor(side, align, r, l, arrowSize, edgeLimit) {
+	const minW = Math.min(r.width, l.width);
+	const minH = Math.min(r.height, l.height);
+	const desiredX = align === "start" ? minW * ARROW_EDGE_RATIO : align === "end" ? l.width - minW * ARROW_EDGE_RATIO : l.width * .5;
+	const desiredY = align === "start" ? minH * ARROW_EDGE_RATIO : align === "end" ? l.height - minH * ARROW_EDGE_RATIO : l.height / 2;
+	const centerX = clampCenter(desiredX, edgeLimit, l.width - edgeLimit);
+	const centerY = clampCenter(desiredY, edgeLimit, l.height - edgeLimit);
+	const edgeX = centerX - arrowSize;
+	const edgeY = centerY - arrowSize;
+	switch (side) {
+		case "top": return {
+			x: edgeX,
+			y: l.height
+		};
+		case "bottom": return {
+			x: edgeX,
+			y: arrowSize * -2
+		};
+		case "left": return {
+			x: l.width,
+			y: edgeY
+		};
+		case "right": return {
+			x: arrowSize * -2,
+			y: edgeY
+		};
+	}
+}
+function calcSidePlacement(placement, r, l, gap, arrowSize, edgeLimit) {
+	const parsed = parsePlacement(placement);
+	if (!parsed) return {
+		top: 0,
+		left: 0,
+		x: 0,
+		y: 0
+	};
+	const { side, align } = parsed;
+	const main = placeMainAxis(side, r, l, gap);
+	const cross = placeCrossAxis(side, align, r, l);
+	const arrow = arrowFor(side, align, r, l, arrowSize, edgeLimit);
+	return {
+		top: main.top + cross.top,
+		left: main.left + cross.left,
+		x: arrow.x,
+		y: arrow.y
+	};
+}
+function calcCenter(r, l) {
+	return {
+		top: r.top + r.height / 2 - l.height / 2,
+		left: r.left + r.width / 2 - l.width / 2,
+		x: 0,
+		y: 0
+	};
+}
+function calcClientCenter(_r, layerSize) {
+	const { inner } = getWindowSize();
+	const width = layerSize.width;
+	const height = layerSize.height;
+	return {
+		top: Math.max(0, (inner.height - height) / 2),
+		left: Math.max(0, (inner.width - width) / 2),
+		x: width / 2,
+		y: height / 2
+	};
+}
+/**
+* 双盒定位：按 placement 计算弹出层坐标与箭头位置，必要时自动调整方位。
+* 返回值字段与历史用法兼容：{ top, left, x, y, placement }
+*/
+function getPlacement({ triggerRect, layerSize, placement = "bottom", adjustPosition = "auto", gap = 0, offset = {
+	x: 0,
+	y: 0
+}, arrowOffset = {
+	x: 0,
+	y: 0
+}, layer }) {
+	const size = {
+		width: layerSize.width,
+		height: layerSize.height
+	};
+	const { size: arrowSize, edgeLimit } = resolveArrowMetrics(layer);
+	const applyOffsets = (pos) => ({
+		top: pos.top + offset.y,
+		left: pos.left + offset.x,
+		x: pos.x + arrowOffset.x,
+		y: pos.y + arrowOffset.y
+	});
+	const resolve = (plc) => {
+		let raw;
+		if (plc === "center") raw = calcCenter(triggerRect, size);
+		else if (plc === "client-center") raw = calcClientCenter(triggerRect, size);
+		else raw = calcSidePlacement(plc, triggerRect, size, gap, arrowSize, edgeLimit);
+		return {
+			...applyOffsets(raw),
+			placement: plc
+		};
+	};
+	let result = resolve(placement);
+	if (!(adjustPosition === "none" || placement === "center" || placement === "client-center") && isOutOfViewport({
+		top: result.top,
+		left: result.left,
+		width: size.width,
+		height: size.height
+	})) result = resolve(adjustPosition === "auto" ? pickBestPlacement(triggerRect) : pickAlignedPlacement(adjustPosition, triggerRect));
+	return result;
+}
+//#endregion
+export { getPlacement, resolveAccuracy };
+
+//# sourceMappingURL=calc.js.map

package/dist/util/calc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc.js","names":[],"sources":["../../util/calc.ts"],"sourcesContent":["import type {\r\n  AdjustmentPosition,\r\n  RectType,\r\n  PlacementType,\r\n} from '../config/types'\r\nimport { getWindowSize, getPageScroll } from './dom'\r\n\r\n/** 消除浮点累加误差 */\r\nexport const resolveAccuracy = (v: number) => Number(v.toFixed(8))\r\n\r\nexport const calculator = {\r\n  add: (...items: number[]) =>\r\n    resolveAccuracy(items.reduce((sum, n) => sum + n, 0)),\r\n}\r\n\r\nexport interface PlacementOptions {\r\n  readonly triggerRect: RectType\r\n  readonly layerSize: { width: number; height: number }\r\n  readonly adjustPosition: AdjustmentPosition\r\n  readonly placement?: PlacementType\r\n  readonly gap?: number\r\n  readonly offset?: { x: number; y: number }\r\n  readonly arrowOffset?: { x: number; y: number }\r\n  readonly layer?: unknown\r\n}\r\n\r\nexport interface PlacementResult {\r\n  top: number\r\n  left: number\r\n  /** 相对弹出层的箭头 / transform-origin X */\r\n  x: number\r\n  /** 相对弹出层的箭头 / transform-origin Y */\r\n  y: number\r\n  /** 可能经自动调整后的最终方位 */\r\n  placement: PlacementType\r\n}\r\n\r\nconst ARROW_FALLBACK = 4\r\n/** 箭头贴边时相对 trigger 短边的比例偏移 */\r\nconst ARROW_EDGE_RATIO = 0.25\r\n/** 箭头距层边缘的最小距离（还会与 radius+arrow 取更大值） */\r\nconst ARROW_EDGE_LIMIT_MIN = 18\r\n\r\ntype Side = 'top' | 'bottom' | 'left' | 'right'\r\ntype Align = 'center' | 'start' | 'end'\r\n\r\nfunction resolveLayerEl(layer?: unknown): HTMLElement | null {\r\n  if (!layer) return null\r\n  if (typeof HTMLElement !== 'undefined' && layer instanceof HTMLElement) {\r\n    return layer\r\n  }\r\n  if (typeof layer === 'object' && layer !== null && 'value' in layer) {\r\n    const v = (layer as { value: unknown }).value\r\n    if (typeof HTMLElement !== 'undefined' && v instanceof HTMLElement) {\r\n      return v\r\n    }\r\n  }\r\n  return null\r\n}\r\n\r\nfunction resolveArrowMetrics(layer?: unknown): {\r\n  size: number\r\n  edgeLimit: number\r\n} {\r\n  let size = ARROW_FALLBACK\r\n  let radius = 0\r\n  const el = resolveLayerEl(layer)\r\n  if (el && typeof getComputedStyle === 'function') {\r\n    const cs = getComputedStyle(el)\r\n    const parsedSize =\r\n      parseFloat(cs.getPropertyValue('--_layer-arrow-size')) ||\r\n      parseFloat(cs.getPropertyValue('--w-layer-arrow-size'))\r\n    const parsedRadius = parseFloat(cs.getPropertyValue('--w-radius'))\r\n    if (Number.isFinite(parsedSize) && parsedSize > 0) size = parsedSize\r\n    if (Number.isFinite(parsedRadius) && parsedRadius >= 0) radius = parsedRadius\r\n  }\r\n  return {\r\n    size,\r\n    edgeLimit: Math.max(ARROW_EDGE_LIMIT_MIN, radius + size),\r\n  }\r\n}\r\n\r\nfunction clampCenter(value: number, min: number, max: number) {\r\n  if (max <= min) return (min + max) / 2\r\n  return Math.min(Math.max(value, min), max)\r\n}\r\n\r\nfunction parsePlacement(p: PlacementType): { side: Side; align: Align } | null {\r\n  if (p === 'center' || p === 'client-center') return null\r\n  const [side, align = 'center'] = p.split('-') as [Side, Align?]\r\n  return { side, align: align || 'center' }\r\n}\r\n\r\nfunction pickAlignPlacement(\r\n  side: Side,\r\n  crossStart: number,\r\n  crossEnd: number,\r\n  balanceThreshold = 100,\r\n): PlacementType {\r\n  if (Math.abs(crossStart - crossEnd) < balanceThreshold) return side\r\n  const preferEnd = crossStart > crossEnd\r\n  if (side === 'left' || side === 'right') {\r\n    return (preferEnd ? `${side}-end` : `${side}-start`) as PlacementType\r\n  }\r\n  // top / bottom：横向空间，左边更大用 end（贴右），右边更大用 start（贴左）\r\n  return (preferEnd ? `${side}-end` : `${side}-start`) as PlacementType\r\n}\r\n\r\n/**\r\n * 取 trigger 四周空间最大的一侧，并在该侧选 start/center/end。\r\n */\r\nfunction pickBestPlacement(rect: RectType): PlacementType {\r\n  const { inner } = getWindowSize()\r\n  const left = rect.left\r\n  const top = rect.top\r\n  const right = inner.width - rect.right\r\n  const bottom = inner.height - rect.bottom\r\n  const max = Math.max(left, top, right, bottom)\r\n\r\n  if (max === left) return pickAlignPlacement('left', top, bottom)\r\n  if (max === right) return pickAlignPlacement('right', top, bottom)\r\n  if (max === top) return pickAlignPlacement('top', left, right)\r\n  return pickAlignPlacement('bottom', left, right)\r\n}\r\n\r\n/**\r\n * 当 adjustPosition 指定主方向时，仅在该方向上选 start/center/end。\r\n */\r\nfunction pickAlignedPlacement(\r\n  side: 'left' | 'right' | 'top' | 'bottom',\r\n  rect: RectType,\r\n): PlacementType {\r\n  const { inner } = getWindowSize()\r\n  if (side === 'left' || side === 'right') {\r\n    return pickAlignPlacement(side, rect.top, inner.height - rect.bottom)\r\n  }\r\n  return pickAlignPlacement(side, rect.left, inner.width - rect.right)\r\n}\r\n\r\nfunction isOutOfViewport(box: {\r\n  top: number\r\n  left: number\r\n  width: number\r\n  height: number\r\n}) {\r\n  const { x: sx, y: sy } = getPageScroll()\r\n  const { inner } = getWindowSize()\r\n  return (\r\n    box.left - sx < 0 ||\r\n    box.top - sy < 0 ||\r\n    box.left + box.width - sx > inner.width ||\r\n    box.top + box.height - sy > inner.height\r\n  )\r\n}\r\n\r\nfunction placeMainAxis(\r\n  side: Side,\r\n  r: RectType,\r\n  l: { width: number; height: number },\r\n  gap: number,\r\n) {\r\n  switch (side) {\r\n    case 'top':\r\n      return { top: r.top - l.height - gap, left: 0 }\r\n    case 'bottom':\r\n      return { top: r.bottom + gap, left: 0 }\r\n    case 'left':\r\n      return { top: 0, left: r.left - l.width - gap }\r\n    case 'right':\r\n      return { top: 0, left: r.right + gap }\r\n  }\r\n}\r\n\r\nfunction placeCrossAxis(\r\n  side: Side,\r\n  align: Align,\r\n  r: RectType,\r\n  l: { width: number; height: number },\r\n) {\r\n  const vertical = side === 'left' || side === 'right'\r\n  if (vertical) {\r\n    if (align === 'start') return { top: r.top, left: 0 }\r\n    if (align === 'end') return { top: r.bottom - l.height, left: 0 }\r\n    return { top: r.top + r.height / 2 - l.height / 2, left: 0 }\r\n  }\r\n  if (align === 'start') return { top: 0, left: r.left }\r\n  if (align === 'end') return { top: 0, left: r.right - l.width }\r\n  return { top: 0, left: r.left + r.width / 2 - l.width / 2 }\r\n}\r\n\r\nfunction arrowFor(\r\n  side: Side,\r\n  align: Align,\r\n  r: RectType,\r\n  l: { width: number; height: number },\r\n  arrowSize: number,\r\n  edgeLimit: number,\r\n) {\r\n  const minW = Math.min(r.width, l.width)\r\n  const minH = Math.min(r.height, l.height)\r\n  const desiredX =\r\n    align === 'start'\r\n      ? minW * ARROW_EDGE_RATIO\r\n      : align === 'end'\r\n        ? l.width - minW * ARROW_EDGE_RATIO\r\n        : l.width * 0.5\r\n  const desiredY =\r\n    align === 'start'\r\n      ? minH * ARROW_EDGE_RATIO\r\n      : align === 'end'\r\n        ? l.height - minH * ARROW_EDGE_RATIO\r\n        : l.height / 2\r\n\r\n  // 视觉中心避开圆角弧段，大 radius 时箭头仍落在相对平直的边段\r\n  const centerX = clampCenter(desiredX, edgeLimit, l.width - edgeLimit)\r\n  const centerY = clampCenter(desiredY, edgeLimit, l.height - edgeLimit)\r\n  const edgeX = centerX - arrowSize\r\n  const edgeY = centerY - arrowSize\r\n\r\n  switch (side) {\r\n    case 'top':\r\n      return { x: edgeX, y: l.height }\r\n    case 'bottom':\r\n      return { x: edgeX, y: arrowSize * -2 }\r\n    case 'left':\r\n      return { x: l.width, y: edgeY }\r\n    case 'right':\r\n      return { x: arrowSize * -2, y: edgeY }\r\n  }\r\n}\r\n\r\nfunction calcSidePlacement(\r\n  placement: PlacementType,\r\n  r: RectType,\r\n  l: { width: number; height: number },\r\n  gap: number,\r\n  arrowSize: number,\r\n  edgeLimit: number,\r\n): Omit<PlacementResult, 'placement'> {\r\n  const parsed = parsePlacement(placement)\r\n  if (!parsed) {\r\n    return { top: 0, left: 0, x: 0, y: 0 }\r\n  }\r\n  const { side, align } = parsed\r\n  const main = placeMainAxis(side, r, l, gap)\r\n  const cross = placeCrossAxis(side, align, r, l)\r\n  const arrow = arrowFor(side, align, r, l, arrowSize, edgeLimit)\r\n  return {\r\n    top: main.top + cross.top,\r\n    left: main.left + cross.left,\r\n    x: arrow.x,\r\n    y: arrow.y,\r\n  }\r\n}\r\n\r\nfunction calcCenter(r: RectType, l: { width: number; height: number }) {\r\n  return {\r\n    top: r.top + r.height / 2 - l.height / 2,\r\n    left: r.left + r.width / 2 - l.width / 2,\r\n    x: 0,\r\n    y: 0,\r\n  }\r\n}\r\n\r\nfunction calcClientCenter(\r\n  _r: RectType,\r\n  layerSize: { width: number; height: number },\r\n) {\r\n  const { inner } = getWindowSize()\r\n  // 必须用布局尺寸（由调用方测好的 layerSize），禁止 getBoundingClientRect：\r\n  // enter 动画 scale 时视觉尺寸接近 0，会导致先偏再校正闪一下\r\n  const width = layerSize.width\r\n  const height = layerSize.height\r\n\r\n  const top = Math.max(0, (inner.height - height) / 2)\r\n  const left = Math.max(0, (inner.width - width) / 2)\r\n\r\n  // fixed 居中：transform-origin 放在层中心即可\r\n  return {\r\n    top,\r\n    left,\r\n    x: width / 2,\r\n    y: height / 2,\r\n  }\r\n}\r\n\r\n/**\r\n * 双盒定位：按 placement 计算弹出层坐标与箭头位置，必要时自动调整方位。\r\n * 返回值字段与历史用法兼容：{ top, left, x, y, placement }\r\n */\r\nexport function getPlacement({\r\n  triggerRect,\r\n  layerSize,\r\n  placement = 'bottom',\r\n  adjustPosition = 'auto',\r\n  gap = 0,\r\n  offset = { x: 0, y: 0 },\r\n  arrowOffset = { x: 0, y: 0 },\r\n  layer,\r\n}: PlacementOptions): PlacementResult {\r\n  // 避免修改调用方传入的 layerSize\r\n  const size = { width: layerSize.width, height: layerSize.height }\r\n  const { size: arrowSize, edgeLimit } = resolveArrowMetrics(layer)\r\n\r\n  const applyOffsets = (\r\n    pos: Omit<PlacementResult, 'placement'>,\r\n  ): Omit<PlacementResult, 'placement'> => ({\r\n    top: pos.top + offset.y,\r\n    left: pos.left + offset.x,\r\n    x: pos.x + arrowOffset.x,\r\n    y: pos.y + arrowOffset.y,\r\n  })\r\n\r\n  const resolve = (plc: PlacementType): PlacementResult => {\r\n    let raw: Omit<PlacementResult, 'placement'>\r\n    if (plc === 'center') {\r\n      raw = calcCenter(triggerRect, size)\r\n    } else if (plc === 'client-center') {\r\n      raw = calcClientCenter(triggerRect, size)\r\n    } else {\r\n      raw = calcSidePlacement(\r\n        plc,\r\n        triggerRect,\r\n        size,\r\n        gap,\r\n        arrowSize,\r\n        edgeLimit,\r\n      )\r\n    }\r\n    return { ...applyOffsets(raw), placement: plc }\r\n  }\r\n\r\n  let result = resolve(placement)\r\n\r\n  const skipAdjust =\r\n    adjustPosition === 'none' ||\r\n    placement === 'center' ||\r\n    placement === 'client-center'\r\n\r\n  if (\r\n    !skipAdjust &&\r\n    isOutOfViewport({\r\n      top: result.top,\r\n      left: result.left,\r\n      width: size.width,\r\n      height: size.height,\r\n    })\r\n  ) {\r\n    const next =\r\n      adjustPosition === 'auto'\r\n        ? pickBestPlacement(triggerRect)\r\n        : pickAlignedPlacement(adjustPosition, triggerRect)\r\n    result = resolve(next)\r\n  }\r\n\r\n  return result\r\n}\r\n"],"mappings":"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"}

package/dist/util/colors.d.ts

@@ -0,0 +1,78 @@
+export interface RgbaColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface HslaColor {
+    h: number;
+    /** 0–100 */
+    s: number;
+    /** 0–100 */
+    l: number;
+    a: number;
+}
+export interface HsvaColor {
+    h: number;
+    /** 0–100 */
+    s: number;
+    /** 0–100 */
+    v: number;
+    a: number;
+}
+/** 输出 / 检测用的颜色格式（auto 仅用于 format prop） */
+export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'auto';
+export type ResolvedColorFormat = Exclude<ColorFormat, 'auto'>;
+/**
+ * 将任意颜色字符串解析为 RGBA 对象。
+ * 支持 hex3/4/6/8、rgb/rgba、hsl/hsla（含现代空格分隔写法）、浏览器可识别色名。
+ */
+export declare function parseColor(color: string): RgbaColor;
+/** 根据输入字符串猜测格式族（用于 format=auto） */
+export declare function detectColorFormat(input: string): ResolvedColorFormat;
+export declare function isSameRgba(a: RgbaColor, b: RgbaColor, eps?: number): boolean;
+/**
+ * RGBA 转 HSLA（s/l 为 0–100）
+ */
+export declare function rgbaToHsla(rgba: RgbaColor): HslaColor;
+/**
+ * HSLA 转 RGBA（s/l 为 0–100）
+ */
+export declare function hslaToRgba(hsla: HslaColor): RgbaColor;
+/**
+ * RGBA 转 HSVA（s/v 为 0–100）
+ * 饱和面板（白→透明 / 透明→黑）对应 HSV，而非 HSL
+ *
+ * @param prevHue 无彩色（黑/灰，s=0 或 v=0）时 RGB 不含色相；传入可保留面板色相，避免跳回红（h=0）
+ */
+export declare function rgbaToHsva(rgba: RgbaColor, prevHue?: number): HsvaColor;
+/**
+ * HSVA 转 RGBA（s/v 为 0–100）
+ */
+export declare function hsvaToRgba(hsva: HsvaColor): RgbaColor;
+/**
+ * RGBA 转 Hex；includeAlpha 为 true 时始终输出 8 位
+ */
+export declare function rgbaToHex(rgba: RgbaColor, includeAlpha?: boolean): string;
+/**
+ * RGBA 转 RGB/RGBA 字符串
+ */
+export declare function rgbaToRgbaString(rgba: RgbaColor, forceAlpha?: boolean): string;
+/**
+ * RGBA 转 HSL/HSLA 字符串
+ */
+export declare function rgbaToHslaString(rgba: RgbaColor, forceAlpha?: boolean): string;
+/**
+ * 按指定格式输出颜色字符串。
+ * - hex：a<1 时升为 hexa
+ * - rgb/hsl：a<1 时升为 rgba/hsla，避免丢透明度
+ * - auto：根据 opts.source 或 detected 格式回写
+ */
+export declare function formatColor(rgba: RgbaColor, format?: ColorFormat, opts?: {
+    source?: string;
+    detected?: ResolvedColorFormat;
+}): string;
+/**
+ * 判断颜色是否是深色
+ */
+export declare function isDarkColor(rgba: RgbaColor): boolean;