@superad/ui 0.1.1

package/es/Table/canvas/chipPainters.mjs

@@ -0,0 +1,408 @@
+"use client";
+import { toneFor } from "../core/tagTone.mjs";
+import { getCanvasPalette } from "./canvasPalette.mjs";
+import { formatDuration, formatLinkLabel, resolveDurationRange, resolveOption, resolveUser, toValueList } from "../core/cellValue.mjs";
+import { editHintGutterFor, fitLabel, measureArrayChipWidth, measureLabelWidth, measureLinkPillWidth, measureOverflowBadgeWidth, measureTagWidth, overflowBadgeWidth, packItems } from "./paintUtils.mjs";
+import { createEmptyCellText } from "./textPainters.mjs";
+import { CustomLayout } from "@visactor/vtable";
+//#region src/Table/canvas/chipPainters.ts
+/**
+* "+N" badge shown when chips do not fit. Shared by every chip layout so the badge
+* keeps one size, colour and baseline.
+*/
+const createOverflowText = (count, palette, height, x) => new CustomLayout.Text({
+	fontFamily: palette.fontFamily,
+	fill: palette.text,
+	fontSize: 13,
+	pickable: false,
+	text: `+${count}`,
+	textAlign: "left",
+	textBaseline: "middle",
+	x,
+	y: height / 2
+});
+/**
+* 打包用的可用宽度。绘制是从 `palette.paddingX` 起笔的，不减掉左右内边距的话，最后一个
+* chip 会顶到甚至越过单元格右边界 —— 自定义容器没有 clip，会盖到相邻单元格上。
+* 文本 painter 早就是这么算的（`width - paddingX * 2`）。
+*/
+const availableWidth = (width, paddingX) => Math.max(width - paddingX * 2, 48);
+/**
+* 各个 chip 布局共用的排布：打包 → 按可用宽截断 → 从左往右累加 x。
+*
+* 抽成自由函数是因为**画布与 DOM 悬停浮层必须共用同一份计算**：浮层要在画布画出来的 chip
+* 正上方盖一个 ×，两边各算一次就会错位。用到的度量（`measureLabelWidth` / `fitLabel` /
+* `packItems`）都是纯函数、不依赖 canvas 上下文，所以 DOM 这边也能直接调。
+*
+* `Extra` 让调用方带上自己的载荷（标签带 option、人员带 user），排布本身不关心那是什么。
+*/
+const layoutChips = (items, widthOf, overflowOf, { paddingX, width }) => {
+	const available = availableWidth(width, paddingX);
+	const packed = packItems(items.map(({ label }) => widthOf(label)), available, overflowOf);
+	const boxes = [];
+	let x = paddingX;
+	items.slice(0, packed.visible).forEach((item) => {
+		const label = fitLabel(item.label, available - overflowBadgeWidth(packed.overflow), widthOf);
+		const chipWidth = widthOf(label);
+		boxes.push({
+			...item,
+			label,
+			width: chipWidth,
+			x
+		});
+		x += chipWidth + 4;
+	});
+	return {
+		boxes,
+		overflow: packed.overflow,
+		overflowX: x
+	};
+};
+/**
+* 标签 chip 的排布。供悬停浮层在画布画出来的 chip 上盖 × 用。
+*
+* 值的容器类型不同（数组 / 单个字符串）不影响排布 —— `packed.visible` 之外的那些由 +N 徽标
+* 代表，`index` 始终是**原始数组下标**。
+*/
+/**
+* 状态 chip 外标注的时长文案与它占的宽度。**画布与悬停浮层必须用同一份**：打包预算要把它
+* 预留掉，两边各算一遍截断点就会漂移。
+*/
+const tagDurationSuffix = (record, duration) => {
+	const text = formatDuration(resolveDurationRange(record, duration));
+	if (text === "") return {
+		suffix: "",
+		width: 0
+	};
+	const suffix = ` ${text}`;
+	return {
+		suffix,
+		width: 4 + measureLabelWidth(suffix, 13)
+	};
+};
+const layoutTagChips = ({ options, paddingX, reserve = 0, value, width }) => layoutChips(toValueList(value).map((item) => resolveOption(item, options)).map((option, index) => ({
+	index,
+	label: option.label,
+	option
+})), measureTagWidth, (rest) => measureOverflowBadgeWidth(`+${rest}`), {
+	paddingX,
+	width: width - reserve
+});
+const createTagLayout = (options, placeholder, duration) => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 120;
+	const height = args.rect?.height ?? 40;
+	const record = args.table?.getCellOriginRecord?.(args.col, args.row);
+	const { suffix, width: suffixWidth } = tagDurationSuffix(record, duration);
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	const { boxes, overflow, overflowX } = layoutTagChips({
+		options,
+		paddingX: palette.paddingX,
+		reserve: suffixWidth + editHintGutterFor(args.table, args.col, args.row),
+		value: args.value,
+		width
+	});
+	if (boxes.length === 0) {
+		if (placeholder) root.add(createEmptyCellText(placeholder, palette, height, args.table));
+		return {
+			enableCellPadding: false,
+			renderDefault: false,
+			rootContainer: root
+		};
+	}
+	const chipHeight = 24;
+	const chipTop = Math.max(0, (height - chipHeight) / 2);
+	boxes.forEach(({ label, option, width: chipWidth, x }) => {
+		const tone = toneFor(option.value, option.color, palette.isDarkMode, palette.checkboxBg);
+		const textFill = palette.isDarkMode ? tone.color : palette.text;
+		root.add(new CustomLayout.Rect({
+			cornerRadius: 6,
+			fill: tone.bg,
+			height: chipHeight,
+			lineWidth: tone.border ? 1 : 0,
+			pickable: false,
+			stroke: tone.border,
+			width: chipWidth,
+			x,
+			y: chipTop
+		}));
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: textFill,
+			fontSize: 13,
+			pickable: false,
+			text: label,
+			textAlign: "left",
+			textBaseline: "middle",
+			x: x + 14,
+			y: height / 2
+		}));
+	});
+	let after = overflowX;
+	if (suffix !== "") {
+		const remaining = Math.max(0, width - palette.paddingX - (overflowX + 4));
+		const drawnSuffix = remaining >= suffixWidth ? suffix : fitLabel(suffix, remaining, (label) => measureLabelWidth(label, 13));
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: palette.textMuted,
+			fontSize: 13,
+			pickable: false,
+			text: drawnSuffix,
+			textAlign: "left",
+			textBaseline: "middle",
+			x: overflowX + 4,
+			y: height / 2
+		}));
+		after += suffixWidth;
+	}
+	if (overflow > 0) root.add(createOverflowText(overflow, palette, height, after));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+/**
+* 人员 chip 的排布。
+*
+* 抽成自由函数是因为**画布与 DOM 悬停浮层必须共用同一份计算**：浮层要在画布画出来的 chip
+* 正上方盖一个 ×，两边各算一次就会错位。用到的度量（`measureLabelWidth` / `fitLabel` /
+* `packItems`）都是纯函数、不依赖 canvas 上下文，所以 DOM 这边也能直接调。
+*/
+const layoutUserChips = ({ paddingX, users, width }) => layoutChips(users.map(({ index, user }) => ({
+	index,
+	label: user.name,
+	user
+})), (label) => 18 + measureLabelWidth(label, 13) + 22, () => 24, {
+	paddingX,
+	width
+});
+/** 值的每一项解析成人员并保留**原始下标**；没有可用名字的（`{}` / `{ id }` / `{ name: 42 }`）
+* 一律丢掉 —— `isEmptyCellValue({})` 判它是空值，两条路径口径必须一致。 */
+const resolveUserEntries = (value) => toValueList(value).map(resolveUser).map((user, index) => ({
+	index,
+	user
+})).filter(({ user }) => user.name !== "");
+const createUserLayout = (placeholder) => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 140;
+	const height = args.rect?.height ?? 40;
+	const entries = resolveUserEntries(args.value);
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	if (entries.length === 0) {
+		if (placeholder) root.add(createEmptyCellText(placeholder, palette, height, args.table));
+		return {
+			enableCellPadding: false,
+			renderDefault: false,
+			rootContainer: root
+		};
+	}
+	const chipTop = Math.max(0, (height - 24) / 2);
+	const { boxes, overflow, overflowX } = layoutUserChips({
+		paddingX: palette.paddingX,
+		users: entries,
+		width: width - editHintGutterFor(args.table, args.col, args.row)
+	});
+	boxes.forEach(({ label, user, width: chipWidth, x }) => {
+		const tone = toneFor(user.name, void 0, palette.isDarkMode, palette.checkboxBg);
+		const initials = user.name.trim().slice(0, 1) || "?";
+		root.add(new CustomLayout.Rect({
+			cornerRadius: 4,
+			fill: palette.pillBg,
+			height: 24,
+			pickable: false,
+			width: chipWidth,
+			x,
+			y: chipTop
+		}));
+		if (user.avatar) root.add(new CustomLayout.Image({
+			cornerRadius: 999,
+			height: 14,
+			pickable: false,
+			shape: "square",
+			src: user.avatar,
+			width: 14,
+			x: x + 4,
+			y: chipTop + 5
+		}));
+		else {
+			root.add(new CustomLayout.Rect({
+				cornerRadius: 999,
+				fill: tone.bg,
+				height: 14,
+				pickable: false,
+				width: 14,
+				x: x + 4,
+				y: chipTop + 5
+			}));
+			root.add(new CustomLayout.Text({
+				fontFamily: palette.fontFamily,
+				fill: tone.color,
+				fontSize: 9,
+				pickable: false,
+				text: initials,
+				textAlign: "center",
+				textBaseline: "middle",
+				x: x + 4 + 7,
+				y: chipTop + 5 + 7
+			}));
+		}
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: palette.text,
+			fontSize: 13,
+			pickable: false,
+			text: label,
+			textAlign: "left",
+			textBaseline: "middle",
+			x: x + 4 + 14 + 4,
+			y: height / 2
+		}));
+	});
+	if (overflow > 0) root.add(createOverflowText(overflow, palette, height, overflowX));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+/** 值 → 文本项，保留**原始下标**；空串不画（与 painter 原先的 `filter(Boolean)` 同口径）。
+* 下标必须是原始的：记录是 `['', '核心']` 时画面上只有一枚 chip，点它的 × 要删掉「核心」。 */
+const resolveTextEntries = (value) => toValueList(value).map((item) => String(item)).map((label, index) => ({
+	index,
+	label
+})).filter(({ label }) => label !== "");
+/** 链接 pill 的排布。文案与画布同源：`kind === 'link'` 时要一起剥掉 scheme。 */
+const layoutLinkChips = ({ kind, paddingX, value, width }) => layoutChips(resolveTextEntries(value).map(({ index, label }) => ({
+	index,
+	label: kind === "link" ? formatLinkLabel(label) : label
+})), measureLinkPillWidth, () => 24, {
+	paddingX,
+	width
+});
+const createLinkLayout = (kind, placeholder) => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 140;
+	const height = args.rect?.height ?? 40;
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	const { boxes, overflow, overflowX } = layoutLinkChips({
+		kind,
+		paddingX: palette.paddingX,
+		value: args.value,
+		width: width - editHintGutterFor(args.table, args.col, args.row)
+	});
+	if (boxes.length === 0) {
+		if (placeholder) root.add(createEmptyCellText(placeholder, palette, height, args.table));
+		return {
+			enableCellPadding: false,
+			renderDefault: false,
+			rootContainer: root
+		};
+	}
+	const pillHeight = 24;
+	const pillTop = Math.max(0, (height - pillHeight) / 2);
+	boxes.forEach(({ label, width: pillWidth, x }) => {
+		root.add(new CustomLayout.Rect({
+			cornerRadius: 999,
+			fill: palette.pillBg,
+			height: pillHeight,
+			lineWidth: 1,
+			pickable: false,
+			stroke: palette.overlayBorder,
+			width: pillWidth,
+			x,
+			y: pillTop
+		}));
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: palette.text,
+			fontSize: 13,
+			pickable: false,
+			text: label,
+			textAlign: "left",
+			textBaseline: "middle",
+			x: x + 14,
+			y: height / 2
+		}));
+	});
+	if (overflow > 0) root.add(createOverflowText(overflow, palette, height, overflowX));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+/** 数组 chip 的排布。内边距与标签 / 链接同为 CHIP_PAD —— 右内边距要整颗装下悬停的 ×。 */
+const layoutArrayChips = ({ paddingX, value, width }) => layoutChips(resolveTextEntries(value), measureArrayChipWidth, () => 24, {
+	paddingX,
+	width
+});
+const createArrayLayout = (placeholder) => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 140;
+	const height = args.rect?.height ?? 40;
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	const { boxes, overflow, overflowX } = layoutArrayChips({
+		paddingX: palette.paddingX,
+		value: args.value,
+		width: width - editHintGutterFor(args.table, args.col, args.row)
+	});
+	if (boxes.length === 0) {
+		if (placeholder) root.add(createEmptyCellText(placeholder, palette, height, args.table));
+		return {
+			enableCellPadding: false,
+			renderDefault: false,
+			rootContainer: root
+		};
+	}
+	const chipHeight = 24;
+	const chipTop = Math.max(0, (height - chipHeight) / 2);
+	boxes.forEach(({ label, width: chipWidth, x }) => {
+		root.add(new CustomLayout.Rect({
+			cornerRadius: 4,
+			fill: palette.pillBg,
+			height: chipHeight,
+			pickable: false,
+			width: chipWidth,
+			x,
+			y: chipTop
+		}));
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: palette.text,
+			fontSize: 13,
+			pickable: false,
+			text: label,
+			textAlign: "left",
+			textBaseline: "middle",
+			x: x + 14,
+			y: height / 2
+		}));
+	});
+	if (overflow > 0) root.add(createOverflowText(overflow, palette, height, overflowX));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+//#endregion
+export { createArrayLayout, createLinkLayout, createTagLayout, createUserLayout, layoutArrayChips, layoutLinkChips, layoutTagChips, layoutUserChips, resolveUserEntries, tagDurationSuffix };
+
+//# sourceMappingURL=chipPainters.mjs.map

package/es/Table/canvas/chipPainters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipPainters.mjs","names":[],"sources":["../../../src/Table/canvas/chipPainters.ts"],"sourcesContent":["'use client';\n\nimport { CustomLayout } from '@visactor/vtable';\nimport type { ICustomLayoutFuc } from '@visactor/vtable/es/ts-types/customLayout';\n\nimport {\n  formatDuration,\n  formatLinkLabel,\n  type LinkKind,\n  resolveDurationRange,\n  resolveOption,\n  resolveUser,\n  toValueList,\n} from '../core/cellValue';\nimport { toneFor } from '../core/tagTone';\nimport type { TableSelectOption, TableUser } from '../type';\nimport { type CanvasPalette, getCanvasPalette } from './canvasPalette';\nimport {\n  ARRAY_PAD_LEFT,\n  editHintGutterFor,\n  fitLabel,\n  LINK_PAD_LEFT,\n  measureArrayChipWidth,\n  measureLabelWidth,\n  measureLinkPillWidth,\n  measureOverflowBadgeWidth,\n  measureTagWidth,\n  overflowBadgeWidth,\n  packItems,\n  TAG_FONT_SIZE,\n  TAG_GAP,\n  TAG_PAD_LEFT,\n} from './paintUtils';\nimport { createEmptyCellText } from './textPainters';\n\nexport { EDIT_HINT_GUTTER, editHintGutterFor } from './paintUtils';\n\n/**\n * \"+N\" badge shown when chips do not fit. Shared by every chip layout so the badge\n * keeps one size, colour and baseline.\n */\nconst createOverflowText = (count: number, palette: CanvasPalette, height: number, x: number) =>\n  new CustomLayout.Text({\n    fontFamily: palette.fontFamily,\n    fill: palette.text,\n    fontSize: 13,\n    pickable: false,\n    text: `+${count}`,\n    textAlign: 'left',\n    textBaseline: 'middle',\n    x,\n    y: height / 2,\n  } as never);\n\n/**\n * 打包用的可用宽度。绘制是从 `palette.paddingX` 起笔的，不减掉左右内边距的话，最后一个\n * chip 会顶到甚至越过单元格右边界 —— 自定义容器没有 clip，会盖到相邻单元格上。\n * 文本 painter 早就是这么算的（`width - paddingX * 2`）。\n */\nconst availableWidth = (width: number, paddingX: number): number =>\n  Math.max(width - paddingX * 2, 48);\n\n/** 画布与 DOM 悬停浮层共用的 chip 排布结果。 */\nexport interface ChipBox {\n  /** 在**记录原始数组**里的下标 —— 移除时按它 splice，不能用过滤后的位置。 */\n  index: number;\n  /** 画进 chip 的文字（可能已被截断）。 */\n  label: string;\n  width: number;\n  /** 相对单元格左边界的起点，与 painter 的落笔位置同源。 */\n  x: number;\n}\n\n/**\n * 各个 chip 布局共用的排布：打包 → 按可用宽截断 → 从左往右累加 x。\n *\n * 抽成自由函数是因为**画布与 DOM 悬停浮层必须共用同一份计算**：浮层要在画布画出来的 chip\n * 正上方盖一个 ×，两边各算一次就会错位。用到的度量（`measureLabelWidth` / `fitLabel` /\n * `packItems`）都是纯函数、不依赖 canvas 上下文，所以 DOM 这边也能直接调。\n *\n * `Extra` 让调用方带上自己的载荷（标签带 option、人员带 user），排布本身不关心那是什么。\n */\nconst layoutChips = <Extra>(\n  items: ({ index: number; label: string } & Extra)[],\n  widthOf: (label: string) => number,\n  overflowOf: (rest: number) => number,\n  { paddingX, width }: { paddingX: number; width: number },\n): { boxes: (ChipBox & Extra)[]; overflow: number; overflowX: number } => {\n  const available = availableWidth(width, paddingX);\n  const packed = packItems(\n    items.map(({ label }) => widthOf(label)),\n    available,\n    overflowOf,\n  );\n  const boxes: (ChipBox & Extra)[] = [];\n  let x = paddingX;\n\n  items.slice(0, packed.visible).forEach((item) => {\n    // 截断必须发生在**算宽度之前**：只截文本节点的话矩形仍按完整标签算宽，照样越界。\n    const label = fitLabel(item.label, available - overflowBadgeWidth(packed.overflow), widthOf);\n    const chipWidth = widthOf(label);\n\n    boxes.push({ ...item, label, width: chipWidth, x });\n    x += chipWidth + TAG_GAP;\n  });\n\n  // `x` 已经停在下一枚 chip 该落笔的位置，正好是 +N 徽标的起点。\n  return { boxes, overflow: packed.overflow, overflowX: x };\n};\n\n/**\n * 标签 chip 的排布。供悬停浮层在画布画出来的 chip 上盖 × 用。\n *\n * 值的容器类型不同（数组 / 单个字符串）不影响排布 —— `packed.visible` 之外的那些由 +N 徽标\n * 代表，`index` 始终是**原始数组下标**。\n */\n/**\n * 状态 chip 外标注的时长文案与它占的宽度。**画布与悬停浮层必须用同一份**：打包预算要把它\n * 预留掉，两边各算一遍截断点就会漂移。\n */\nexport const tagDurationSuffix = (\n  record: unknown,\n  duration?: string | { from: string; to: string },\n): { suffix: string; width: number } => {\n  const text = formatDuration(resolveDurationRange(record, duration));\n  if (text === '') return { suffix: '', width: 0 };\n\n  const suffix = ` ${text}`;\n  return { suffix, width: TAG_GAP + measureLabelWidth(suffix, TAG_FONT_SIZE) };\n};\n\nexport const layoutTagChips = ({\n  options,\n  paddingX,\n  reserve = 0,\n  value,\n  width,\n}: {\n  options: TableSelectOption[] | undefined;\n  paddingX: number;\n  /** chip 之后还要放独立文字（「5天」这类时长）时预留的宽度（含间距）。 */\n  reserve?: number;\n  value: unknown;\n  width: number;\n}): {\n  boxes: (ChipBox & { option: TableSelectOption })[];\n  overflow: number;\n  overflowX: number;\n} =>\n  layoutChips(\n    toValueList(value)\n      .map((item) => resolveOption(item, options))\n      .map((option, index) => ({ index, label: option.label, option })),\n    measureTagWidth,\n    (rest) => measureOverflowBadgeWidth(`+${rest}`),\n    { paddingX, width: width - reserve },\n  );\n\nexport const createTagLayout =\n  (\n    options: TableSelectOption[] | undefined,\n    placeholder?: string,\n    duration?: string | { from: string; to: string },\n  ): ICustomLayoutFuc =>\n  (args) => {\n    const palette = getCanvasPalette(args.table);\n    const width = args.rect?.width ?? 120;\n    const height = args.rect?.height ?? 40;\n    // 状态标题后跟的时长（「5天 / 1个月」）：`duration` 指名记录里存日期范围的字段，时长现算，\n    // 作为 chip **外面**的独立文字画出来 —— 参考图里它就是 chip 后面的标注，不是 chip 的一部分。\n    const record = (args.table as any)?.getCellOriginRecord?.(args.col, args.row);\n    const { suffix, width: suffixWidth } = tagDurationSuffix(record, duration);\n    const root = new CustomLayout.Group({ height, pickable: false, width });\n    const { boxes, overflow, overflowX } = layoutTagChips({\n      options,\n      paddingX: palette.paddingX,\n      reserve: suffixWidth + editHintGutterFor(args.table as never, args.col, args.row),\n      value: args.value,\n      width,\n    });\n\n    if (boxes.length === 0) {\n      if (placeholder) {\n        root.add(createEmptyCellText(placeholder, palette, height, args.table));\n      }\n\n      return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n    }\n\n    const chipHeight = 24;\n    const chipTop = Math.max(0, (height - chipHeight) / 2);\n\n    boxes.forEach(({ label, option, width: chipWidth, x }) => {\n      const tone = toneFor(option.value, option.color, palette.isDarkMode, palette.checkboxBg);\n      // 文字是主题文字色而不是 tone.color：浅底 + 统一近黑字是「状态」参考图的样式，也正好是\n      // antd Tag 默认的「浅底 + colorText 字」。tone.color 仍是色相源（hex 吸附、暗色提亮都靠\n      // 它），暗色下 chip 底是彩色半透明，白字对比度没有保证，所以暗色继续用 tone 的提亮色。\n      const textFill = palette.isDarkMode ? tone.color : palette.text;\n\n      root.add(\n        new CustomLayout.Rect({\n          cornerRadius: 6,\n          fill: tone.bg,\n          height: chipHeight,\n          lineWidth: tone.border ? 1 : 0,\n          pickable: false,\n          stroke: tone.border,\n          width: chipWidth,\n          x,\n          y: chipTop,\n        } as never),\n      );\n      root.add(\n        new CustomLayout.Text({\n          fontFamily: palette.fontFamily,\n          fill: textFill,\n          fontSize: TAG_FONT_SIZE,\n          pickable: false,\n          text: label,\n          textAlign: 'left',\n          textBaseline: 'middle',\n          x: x + TAG_PAD_LEFT,\n          y: height / 2,\n        } as never),\n      );\n    });\n\n    // 时长文字画在**最后一枚 chip 的外面**（参考图里「4天」是 chip 后面的标注），\n    // 用弱色 —— 它是补充信息，不能与 chip 标题同权重。已通过 `reserve` 参与打包预算。\n    // 极窄列 + 长时长时剩余宽度装不下完整标注，按剩余宽度截断 —— 不能顶出单元格。\n    let after = overflowX;\n    if (suffix !== '') {\n      const remaining = Math.max(0, width - palette.paddingX - (overflowX + TAG_GAP));\n      const drawnSuffix =\n        remaining >= suffixWidth\n          ? suffix\n          : fitLabel(suffix, remaining, (label) => measureLabelWidth(label, TAG_FONT_SIZE));\n      root.add(\n        new CustomLayout.Text({\n          fontFamily: palette.fontFamily,\n          fill: palette.textMuted,\n          fontSize: TAG_FONT_SIZE,\n          pickable: false,\n          text: drawnSuffix,\n          textAlign: 'left',\n          textBaseline: 'middle',\n          x: overflowX + TAG_GAP,\n          y: height / 2,\n        } as never),\n      );\n      after += suffixWidth;\n    }\n\n    if (overflow > 0) {\n      root.add(createOverflowText(overflow, palette, height, after));\n    }\n\n    return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n  };\n\n/** 人员 chip 的固定尺寸，画布与 DOM 悬停浮层共用。 */\nexport const USER_CHIP_HEIGHT = 24;\nexport const USER_CHIP_AVATAR = 14;\n/**\n * chip 右侧留白。**不是纯装饰**：悬停时要在这一格里盖一个 14px 的移除按钮。\n *\n * 取值有下界：文字从 `x + 22` 起笔，按钮是「贴右 + margin-inline-end 2px」，所以留白必须\n * ≥ 4 + 2 + 14 = 20 才不压到字上。留 8px 时按钮整个盖在最后一个字上 —— 近黑的 × 叠在近黑的\n * 笔画上等于没画，实测截图里完全看不见。22 是 20 再加 2px 余量。\n */\nexport const USER_CHIP_TRAILING = 22;\n\nexport interface UserChipBox extends ChipBox {\n  user: TableUser;\n}\n\n/**\n * 人员 chip 的排布。\n *\n * 抽成自由函数是因为**画布与 DOM 悬停浮层必须共用同一份计算**：浮层要在画布画出来的 chip\n * 正上方盖一个 ×，两边各算一次就会错位。用到的度量（`measureLabelWidth` / `fitLabel` /\n * `packItems`）都是纯函数、不依赖 canvas 上下文，所以 DOM 这边也能直接调。\n */\nexport const layoutUserChips = ({\n  paddingX,\n  users,\n  width,\n}: {\n  paddingX: number;\n  users: { index: number; user: TableUser }[];\n  width: number;\n}): { boxes: UserChipBox[]; overflow: number; overflowX: number } =>\n  layoutChips(\n    users.map(({ index, user }) => ({ index, label: user.name, user })),\n    // Packing and drawing must share one expression: the avatar's width is what makes them\n    // differ, and a mismatch would shift the +N overflow count.\n    (label) => USER_CHIP_AVATAR + 4 + measureLabelWidth(label, 13) + USER_CHIP_TRAILING,\n    () => 24,\n    { paddingX, width },\n  );\n\n/** 值的每一项解析成人员并保留**原始下标**；没有可用名字的（`{}` / `{ id }` / `{ name: 42 }`）\n * 一律丢掉 —— `isEmptyCellValue({})` 判它是空值，两条路径口径必须一致。 */\nexport const resolveUserEntries = (value: unknown): { index: number; user: TableUser }[] =>\n  toValueList(value)\n    .map(resolveUser)\n    .map((user, index) => ({ index, user }))\n    .filter(({ user }) => user.name !== '');\n\nexport const createUserLayout =\n  (placeholder?: string): ICustomLayoutFuc =>\n  (args) => {\n    const palette = getCanvasPalette(args.table);\n    const width = args.rect?.width ?? 140;\n    const height = args.rect?.height ?? 40;\n    const entries = resolveUserEntries(args.value);\n    const root = new CustomLayout.Group({ height, pickable: false, width });\n\n    if (entries.length === 0) {\n      if (placeholder) {\n        root.add(createEmptyCellText(placeholder, palette, height, args.table));\n      }\n\n      return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n    }\n\n    const chipTop = Math.max(0, (height - USER_CHIP_HEIGHT) / 2);\n    const { boxes, overflow, overflowX } = layoutUserChips({\n      paddingX: palette.paddingX,\n      users: entries,\n      width: width - editHintGutterFor(args.table as never, args.col, args.row),\n    });\n\n    boxes.forEach(({ label, user, width: chipWidth, x }) => {\n      const tone = toneFor(user.name, undefined, palette.isDarkMode, palette.checkboxBg);\n      const initials = user.name.trim().slice(0, 1) || '?';\n\n      root.add(\n        new CustomLayout.Rect({\n          cornerRadius: 4,\n          fill: palette.pillBg,\n          height: USER_CHIP_HEIGHT,\n          pickable: false,\n          width: chipWidth,\n          x,\n          y: chipTop,\n        } as never),\n      );\n      if (user.avatar) {\n        root.add(\n          new CustomLayout.Image({\n            cornerRadius: 999,\n            height: USER_CHIP_AVATAR,\n            pickable: false,\n            shape: 'square',\n            src: user.avatar,\n            width: USER_CHIP_AVATAR,\n            x: x + 4,\n            y: chipTop + (USER_CHIP_HEIGHT - USER_CHIP_AVATAR) / 2,\n          } as never),\n        );\n      } else {\n        root.add(\n          new CustomLayout.Rect({\n            // 圆形：人员头像一律是圆的（参考图里单元格 chip 与选择面板同形）。\n            cornerRadius: 999,\n            fill: tone.bg,\n            height: USER_CHIP_AVATAR,\n            pickable: false,\n            width: USER_CHIP_AVATAR,\n            x: x + 4,\n            y: chipTop + (USER_CHIP_HEIGHT - USER_CHIP_AVATAR) / 2,\n          } as never),\n        );\n        root.add(\n          new CustomLayout.Text({\n            fontFamily: palette.fontFamily,\n            fill: tone.color,\n            fontSize: 9,\n            pickable: false,\n            text: initials,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            x: x + 4 + USER_CHIP_AVATAR / 2,\n            y: chipTop + (USER_CHIP_HEIGHT - USER_CHIP_AVATAR) / 2 + USER_CHIP_AVATAR / 2,\n          } as never),\n        );\n      }\n      root.add(\n        new CustomLayout.Text({\n          fontFamily: palette.fontFamily,\n          fill: palette.text,\n          fontSize: 13,\n          pickable: false,\n          text: label,\n          textAlign: 'left',\n          textBaseline: 'middle',\n          x: x + 4 + USER_CHIP_AVATAR + 4,\n          y: height / 2,\n        } as never),\n      );\n    });\n\n    if (overflow > 0) {\n      root.add(createOverflowText(overflow, palette, height, overflowX));\n    }\n\n    return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n  };\n\n/** 值 → 文本项，保留**原始下标**；空串不画（与 painter 原先的 `filter(Boolean)` 同口径）。\n * 下标必须是原始的：记录是 `['', '核心']` 时画面上只有一枚 chip，点它的 × 要删掉「核心」。 */\nconst resolveTextEntries = (value: unknown): { index: number; label: string }[] =>\n  toValueList(value)\n    .map((item) => String(item))\n    .map((label, index) => ({ index, label }))\n    .filter(({ label }) => label !== '');\n\n/** 链接 pill 的排布。文案与画布同源：`kind === 'link'` 时要一起剥掉 scheme。 */\nexport const layoutLinkChips = ({\n  kind,\n  paddingX,\n  value,\n  width,\n}: {\n  kind: LinkKind;\n  paddingX: number;\n  value: unknown;\n  width: number;\n}): { boxes: ChipBox[]; overflow: number; overflowX: number } =>\n  layoutChips(\n    resolveTextEntries(value).map(({ index, label }) => ({\n      index,\n      label: kind === 'link' ? formatLinkLabel(label) : label,\n    })),\n    measureLinkPillWidth,\n    () => 24,\n    { paddingX, width },\n  );\n\nexport const createLinkLayout =\n  (kind: LinkKind, placeholder?: string): ICustomLayoutFuc =>\n  (args) => {\n    const palette = getCanvasPalette(args.table);\n    const width = args.rect?.width ?? 140;\n    const height = args.rect?.height ?? 40;\n    const root = new CustomLayout.Group({ height, pickable: false, width });\n    const { boxes, overflow, overflowX } = layoutLinkChips({\n      kind,\n      paddingX: palette.paddingX,\n      value: args.value,\n      width: width - editHintGutterFor(args.table as never, args.col, args.row),\n    });\n\n    if (boxes.length === 0) {\n      if (placeholder) {\n        root.add(createEmptyCellText(placeholder, palette, height, args.table));\n      }\n\n      return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n    }\n\n    const pillHeight = 24;\n    const pillTop = Math.max(0, (height - pillHeight) / 2);\n\n    boxes.forEach(({ label, width: pillWidth, x }) => {\n      root.add(\n        new CustomLayout.Rect({\n          cornerRadius: 999,\n          fill: palette.pillBg,\n          height: pillHeight,\n          lineWidth: 1,\n          pickable: false,\n          stroke: palette.overlayBorder,\n          width: pillWidth,\n          x,\n          y: pillTop,\n        } as never),\n      );\n      root.add(\n        new CustomLayout.Text({\n          fontFamily: palette.fontFamily,\n          fill: palette.text,\n          fontSize: 13,\n          pickable: false,\n          text: label,\n          textAlign: 'left',\n          textBaseline: 'middle',\n          x: x + LINK_PAD_LEFT,\n          y: height / 2,\n        } as never),\n      );\n    });\n\n    if (overflow > 0) {\n      root.add(createOverflowText(overflow, palette, height, overflowX));\n    }\n\n    return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n  };\n\n/** 数组 chip 的排布。内边距与标签 / 链接同为 CHIP_PAD —— 右内边距要整颗装下悬停的 ×。 */\nexport const layoutArrayChips = ({\n  paddingX,\n  value,\n  width,\n}: {\n  paddingX: number;\n  value: unknown;\n  width: number;\n}): { boxes: ChipBox[]; overflow: number; overflowX: number } =>\n  layoutChips(resolveTextEntries(value), measureArrayChipWidth, () => 24, { paddingX, width });\n\nexport const createArrayLayout =\n  (placeholder?: string): ICustomLayoutFuc =>\n  (args) => {\n    const palette = getCanvasPalette(args.table);\n    const width = args.rect?.width ?? 140;\n    const height = args.rect?.height ?? 40;\n    const root = new CustomLayout.Group({ height, pickable: false, width });\n    const { boxes, overflow, overflowX } = layoutArrayChips({\n      paddingX: palette.paddingX,\n      value: args.value,\n      width: width - editHintGutterFor(args.table as never, args.col, args.row),\n    });\n\n    if (boxes.length === 0) {\n      if (placeholder) {\n        root.add(createEmptyCellText(placeholder, palette, height, args.table));\n      }\n\n      return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n    }\n\n    const chipHeight = 24;\n    const chipTop = Math.max(0, (height - chipHeight) / 2);\n\n    boxes.forEach(({ label, width: chipWidth, x }) => {\n      root.add(\n        new CustomLayout.Rect({\n          cornerRadius: 4,\n          fill: palette.pillBg,\n          height: chipHeight,\n          pickable: false,\n          width: chipWidth,\n          x,\n          y: chipTop,\n        } as never),\n      );\n      root.add(\n        new CustomLayout.Text({\n          fontFamily: palette.fontFamily,\n          fill: palette.text,\n          fontSize: 13,\n          pickable: false,\n          text: label,\n          textAlign: 'left',\n          textBaseline: 'middle',\n          x: x + ARRAY_PAD_LEFT,\n          y: height / 2,\n        } as never),\n      );\n    });\n\n    if (overflow > 0) {\n      root.add(createOverflowText(overflow, palette, height, overflowX));\n    }\n\n    return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n  };\n"],"mappings":"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"}

package/es/Table/canvas/controlPainters.mjs

@@ -0,0 +1,193 @@
+"use client";
+import { resolveOnAccent } from "./theme.mjs";
+import { getCanvasPalette } from "./canvasPalette.mjs";
+import { toBoolean, toRating } from "../core/cellValue.mjs";
+import { CustomLayout } from "@visactor/vtable";
+//#region src/Table/canvas/controlPainters.ts
+const CHECK_MARK_POINTS = [
+	{
+		x: 3,
+		y: 7.2
+	},
+	{
+		x: 5.8,
+		y: 10
+	},
+	{
+		x: 11,
+		y: 4
+	}
+];
+const drawCheckMark = (root, centerX, centerY, size, color) => {
+	const scale = size / 14;
+	const left = centerX - size / 2;
+	const top = centerY - size / 2;
+	root.add(new CustomLayout.Line({
+		lineCap: "round",
+		lineJoin: "round",
+		lineWidth: 1.6 * scale,
+		pickable: false,
+		points: CHECK_MARK_POINTS.map((point) => ({
+			x: left + point.x * scale,
+			y: top + point.y * scale
+		})),
+		stroke: color
+	}));
+};
+const CROSS_MARK_SEGMENTS = [[{
+	x: 4,
+	y: 4
+}, {
+	x: 10,
+	y: 10
+}], [{
+	x: 10,
+	y: 4
+}, {
+	x: 4,
+	y: 10
+}]];
+const drawCrossMark = (root, centerX, centerY, size, color) => {
+	const scale = size / 14;
+	const left = centerX - size / 2;
+	const top = centerY - size / 2;
+	CROSS_MARK_SEGMENTS.forEach((segment) => {
+		root.add(new CustomLayout.Line({
+			lineCap: "round",
+			lineWidth: 1.6 * scale,
+			pickable: false,
+			points: segment.map((point) => ({
+				x: left + point.x * scale,
+				y: top + point.y * scale
+			})),
+			stroke: color
+		}));
+	});
+};
+const createCheckboxLayout = () => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 64;
+	const height = args.rect?.height ?? 40;
+	const checked = toBoolean(args.value) === true;
+	const size = 16;
+	const x = palette.paddingX;
+	const y = (height - size) / 2;
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	root.add(new CustomLayout.Rect({
+		cornerRadius: 4,
+		fill: checked ? palette.accent : palette.checkboxBg,
+		height: size,
+		lineWidth: 1,
+		pickable: false,
+		stroke: checked ? palette.accent : palette.overlayBorder,
+		width: size,
+		x,
+		y
+	}));
+	if (checked) drawCheckMark(root, x + size / 2, height / 2, 12, resolveOnAccent(palette.accent));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+const createRatingLayout = () => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 96;
+	const height = args.rect?.height ?? 40;
+	const rating = toRating(args.value);
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	const starSize = 16;
+	for (let star = 1; star <= 5; star += 1) {
+		const active = star <= rating;
+		root.add(new CustomLayout.Text({
+			fontFamily: palette.fontFamily,
+			fill: active ? palette.starOn : palette.starOff,
+			fontSize: 14,
+			pickable: false,
+			text: active ? "★" : "☆",
+			textAlign: "left",
+			textBaseline: "middle",
+			x: palette.paddingX + (star - 1) * starSize,
+			y: height / 2
+		}));
+	}
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+const createBooleanLayout = (editable) => (args) => {
+	const palette = getCanvasPalette(args.table);
+	const width = args.rect?.width ?? 80;
+	const height = args.rect?.height ?? 40;
+	const flag = toBoolean(args.value);
+	const root = new CustomLayout.Group({
+		height,
+		pickable: false,
+		width
+	});
+	if (flag == null && editable === false) return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+	const checked = flag === true;
+	if (checked) drawCheckMark(root, palette.paddingX + 7, height / 2, 13, palette.success);
+	else drawCrossMark(root, palette.paddingX + 7, height / 2, 13, palette.textMuted);
+	root.add(new CustomLayout.Text({
+		fontFamily: palette.fontFamily,
+		fill: palette.text,
+		fontSize: 13,
+		pickable: false,
+		text: checked ? "是" : "否",
+		textAlign: "left",
+		textBaseline: "middle",
+		x: palette.paddingX + 14,
+		y: height / 2
+	}));
+	return {
+		enableCellPadding: false,
+		renderDefault: false,
+		rootContainer: root
+	};
+};
+const drawSeriesCheckbox = (root, centerX, centerY, size, checked, indeterminate, palette) => {
+	const x = centerX - size / 2;
+	const y = centerY - size / 2;
+	const active = checked || indeterminate;
+	root.add(new CustomLayout.Rect({
+		cornerRadius: 4,
+		fill: active ? palette.accent : palette.checkboxBg,
+		height: size,
+		lineWidth: 1,
+		pickable: false,
+		stroke: active ? palette.accent : palette.overlayBorder,
+		width: size,
+		x,
+		y
+	}));
+	if (checked) drawCheckMark(root, centerX, centerY, size - 4, resolveOnAccent(palette.accent));
+	else if (indeterminate) root.add(new CustomLayout.Rect({
+		cornerRadius: 999,
+		fill: resolveOnAccent(palette.accent),
+		height: 2,
+		pickable: false,
+		width: 8,
+		x: centerX - 4,
+		y: centerY - 1
+	}));
+};
+//#endregion
+export { createBooleanLayout, createCheckboxLayout, createRatingLayout, drawSeriesCheckbox };
+
+//# sourceMappingURL=controlPainters.mjs.map

package/es/Table/canvas/controlPainters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlPainters.mjs","names":[],"sources":["../../../src/Table/canvas/controlPainters.ts"],"sourcesContent":["'use client';\n\nimport { CustomLayout } from '@visactor/vtable';\nimport type { ICustomLayoutFuc } from '@visactor/vtable/es/ts-types/customLayout';\n\nimport { toBoolean, toRating } from '../core/cellValue';\nimport { type CanvasPalette, getCanvasPalette } from './canvasPalette';\nimport { resolveOnAccent } from './theme';\n\nconst CHECK_MARK_POINTS = [\n  { x: 3, y: 7.2 },\n  { x: 5.8, y: 10 },\n  { x: 11, y: 4 },\n];\n\nconst drawCheckMark = (\n  root: any,\n  centerX: number,\n  centerY: number,\n  size: number,\n  color: string,\n): void => {\n  const scale = size / 14;\n  const left = centerX - size / 2;\n  const top = centerY - size / 2;\n\n  root.add(\n    new CustomLayout.Line({\n      lineCap: 'round',\n      lineJoin: 'round',\n      lineWidth: 1.6 * scale,\n      pickable: false,\n      points: CHECK_MARK_POINTS.map((point) => ({\n        x: left + point.x * scale,\n        y: top + point.y * scale,\n      })),\n      stroke: color,\n    } as never),\n  );\n};\n\nconst CROSS_MARK_SEGMENTS = [\n  [\n    { x: 4, y: 4 },\n    { x: 10, y: 10 },\n  ],\n  [\n    { x: 10, y: 4 },\n    { x: 4, y: 10 },\n  ],\n];\n\nconst drawCrossMark = (\n  root: any,\n  centerX: number,\n  centerY: number,\n  size: number,\n  color: string,\n): void => {\n  const scale = size / 14;\n  const left = centerX - size / 2;\n  const top = centerY - size / 2;\n\n  CROSS_MARK_SEGMENTS.forEach((segment) => {\n    root.add(\n      new CustomLayout.Line({\n        lineCap: 'round',\n        lineWidth: 1.6 * scale,\n        pickable: false,\n        points: segment.map((point) => ({\n          x: left + point.x * scale,\n          y: top + point.y * scale,\n        })),\n        stroke: color,\n      } as never),\n    );\n  });\n};\n\nexport const createCheckboxLayout = (): ICustomLayoutFuc => (args) => {\n  const palette = getCanvasPalette(args.table);\n  const width = args.rect?.width ?? 64;\n  const height = args.rect?.height ?? 40;\n  const checked = toBoolean(args.value) === true;\n  const size = 16;\n  const x = palette.paddingX;\n  const y = (height - size) / 2;\n  const root = new CustomLayout.Group({ height, pickable: false, width });\n\n  root.add(\n    new CustomLayout.Rect({\n      cornerRadius: 4,\n      fill: checked ? palette.accent : palette.checkboxBg,\n      height: size,\n      lineWidth: 1,\n      pickable: false,\n      stroke: checked ? palette.accent : palette.overlayBorder,\n      width: size,\n      x,\n      y,\n    } as never),\n  );\n\n  if (checked) {\n    drawCheckMark(root, x + size / 2, height / 2, size - 4, resolveOnAccent(palette.accent));\n  }\n\n  return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n};\n\nexport const createRatingLayout = (): ICustomLayoutFuc => (args) => {\n  const palette = getCanvasPalette(args.table);\n  const width = args.rect?.width ?? 96;\n  const height = args.rect?.height ?? 40;\n  const rating = toRating(args.value);\n  const root = new CustomLayout.Group({ height, pickable: false, width });\n  const starSize = 16;\n\n  for (let star = 1; star <= 5; star += 1) {\n    const active = star <= rating;\n\n    root.add(\n      new CustomLayout.Text({\n        fontFamily: palette.fontFamily,\n        fill: active ? palette.starOn : palette.starOff,\n        fontSize: 14,\n        pickable: false,\n        text: active ? '★' : '☆',\n        textAlign: 'left',\n        textBaseline: 'middle',\n        x: palette.paddingX + (star - 1) * starSize,\n        y: height / 2,\n      } as never),\n    );\n  }\n\n  return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n};\n\nexport const createBooleanLayout =\n  (editable?: boolean): ICustomLayoutFuc =>\n  (args) => {\n    const palette = getCanvasPalette(args.table);\n    const width = args.rect?.width ?? 80;\n    const height = args.rect?.height ?? 40;\n    const flag = toBoolean(args.value);\n    const root = new CustomLayout.Group({ height, pickable: false, width });\n\n    if (flag == null && editable === false) {\n      return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n    }\n\n    const checked = flag === true;\n\n    if (checked) {\n      drawCheckMark(root, palette.paddingX + 7, height / 2, 13, palette.success);\n    } else {\n      drawCrossMark(root, palette.paddingX + 7, height / 2, 13, palette.textMuted);\n    }\n    root.add(\n      new CustomLayout.Text({\n        fontFamily: palette.fontFamily,\n        fill: palette.text,\n        fontSize: 13,\n        pickable: false,\n        text: checked ? '是' : '否',\n        textAlign: 'left',\n        textBaseline: 'middle',\n        x: palette.paddingX + 14,\n        y: height / 2,\n      } as never),\n    );\n\n    return { enableCellPadding: false, renderDefault: false, rootContainer: root };\n  };\n\nexport const drawSeriesCheckbox = (\n  root: any,\n  centerX: number,\n  centerY: number,\n  size: number,\n  checked: boolean,\n  indeterminate: boolean,\n  palette: CanvasPalette,\n): void => {\n  const x = centerX - size / 2;\n  const y = centerY - size / 2;\n  const active = checked || indeterminate;\n\n  root.add(\n    new CustomLayout.Rect({\n      cornerRadius: 4,\n      fill: active ? palette.accent : palette.checkboxBg,\n      height: size,\n      lineWidth: 1,\n      pickable: false,\n      stroke: active ? palette.accent : palette.overlayBorder,\n      width: size,\n      x,\n      y,\n    } as never),\n  );\n\n  if (checked) {\n    drawCheckMark(root, centerX, centerY, size - 4, resolveOnAccent(palette.accent));\n  } else if (indeterminate) {\n    root.add(\n      new CustomLayout.Rect({\n        cornerRadius: 999,\n        fill: resolveOnAccent(palette.accent),\n        height: 2,\n        pickable: false,\n        width: 8,\n        x: centerX - 4,\n        y: centerY - 1,\n      } as never),\n    );\n  }\n};\n"],"mappings":"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"}