@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/chart/renderers/shared.ts

@@ -0,0 +1,263 @@
+/**
+ * 렌더러들이 공유하는 자잘한 것들.
+ *
+ * 여기서 만드는 props는 **Canvas 기본 요소**의 것뿐이다(``figure``/``text``/``svg``).
+ * 새 타입을 만들지 않는 게 이 설계의 전부다 — 내보내기 4경로가 전부 ``el.type``
+ * switch라서, 모르는 타입은 조용히 빠진다.
+ *
+ * ``figure``의 ``subType``도 내보내기가 아는 것만 쓴다: 기본 ``rect``와
+ * ``circle``/``ellipse``(``export/svg.ts:220``, ``export/ai.ts:128``, ``export/raster.ts:65``).
+ */
+
+import { encodeSvgDataUri } from "../../../detail-page-canvas/export/svg";
+// 글자 치수는 표와 같은 자를 쓴다(``spec-group/text-metrics``).
+import {
+  LINE_HEIGHT,
+  estimateTextWidth,
+  textHeight,
+} from "../../spec-group/text-metrics";
+
+import type { ChartNode, ChartStyle } from "../types";
+
+export { LINE_HEIGHT, estimateTextWidth, textHeight };
+
+export function rectNode(
+  key: string,
+  box: { x: number; y: number; width: number; height: number },
+  fill: string,
+  cornerRadius = 0,
+): ChartNode {
+  return {
+    key,
+    props: {
+      type: "figure",
+      subType: "rect",
+      x: Math.round(box.x),
+      y: Math.round(box.y),
+      width: Math.max(0, Math.round(box.width)),
+      height: Math.max(0, Math.round(box.height)),
+      fill,
+      cornerRadius: Math.round(cornerRadius),
+    },
+  };
+}
+
+export function textNode(
+  key: string,
+  box: { x: number; y: number; width: number },
+  text: string,
+  {
+    style,
+    fontSize,
+    fill,
+    align,
+    fontWeight,
+  }: {
+    style: ChartStyle;
+    fontSize: number;
+    fill: string;
+    align: "left" | "center" | "right";
+    fontWeight: "400" | "500" | "700";
+  },
+): ChartNode {
+  return {
+    key,
+    props: {
+      type: "text",
+      x: Math.round(box.x),
+      y: Math.round(box.y),
+      width: Math.max(1, Math.round(box.width)),
+      height: textHeight(fontSize),
+      text,
+      fontSize,
+      fontFamily: style.fontFamily,
+      fontWeight,
+      fill,
+      align,
+      lineHeight: LINE_HEIGHT,
+      verticalAlign: "top",
+    },
+  };
+}
+
+export function circleNode(
+  key: string,
+  center: { x: number; y: number },
+  radius: number,
+  fill: string,
+): ChartNode {
+  return {
+    key,
+    props: {
+      type: "figure",
+      subType: "circle",
+      x: Math.round(center.x - radius),
+      y: Math.round(center.y - radius),
+      width: Math.round(radius * 2),
+      height: Math.round(radius * 2),
+      fill,
+      cornerRadius: 0,
+    },
+  };
+}
+
+/**
+ * 곡선 기하(도넛·게이지·꺾은선)를 담는 ``svg`` 요소.
+ *
+ * **텍스트는 절대 여기에 넣지 않는다.** 스톡 편집기의 svg 요소는 ``<img>``로 래스터화되고,
+ * ``<img>``로 로드된 SVG는 문서의 ``@font-face``를 못 받아 시스템 폰트로 떨어진다.
+ * 그래서 글자는 언제나 네이티브 ``text`` 요소로 따로 얹는다.
+ *
+ * ``xmlns``는 반드시 넣는다 — 없으면 편집기의 색 치환이 파싱에서 깨진다.
+ */
+export function svgNode(
+  key: string,
+  box: { x: number; y: number; width: number; height: number },
+  body: string,
+): ChartNode {
+  const width = Math.max(1, Math.round(box.width));
+  const height = Math.max(1, Math.round(box.height));
+  const markup = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">${body}</svg>`;
+  return {
+    key,
+    props: {
+      type: "svg",
+      src: encodeSvgDataUri(markup),
+      x: Math.round(box.x),
+      y: Math.round(box.y),
+      width,
+      height,
+    },
+  };
+}
+
+/** 도(degree) 위의 점. 0도는 3시 방향이라 위쪽에서 시작하려면 -90도로 넘긴다. */
+export function polar(
+  cx: number,
+  cy: number,
+  radius: number,
+  degrees: number,
+): { x: number; y: number } {
+  const rad = (degrees * Math.PI) / 180;
+  return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+}
+
+function round(value: number): string {
+  return (Math.round(value * 100) / 100).toString();
+}
+
+/**
+ * 고리 조각(annulus sector)의 path.
+ *
+ * 한 바퀴를 다 채우면 SVG 호가 시작점과 끝점이 같아져 아무것도 안 그려진다.
+ * 그래서 359.9도에서 자른다 — 눈으로는 완전한 고리와 구분되지 않는다.
+ */
+export function ringSlicePath(
+  cx: number,
+  cy: number,
+  outer: number,
+  inner: number,
+  startDeg: number,
+  endDeg: number,
+): string {
+  const sweep = Math.min(359.9, Math.max(0, endDeg - startDeg));
+  if (sweep <= 0) return "";
+  const end = startDeg + sweep;
+  const large = sweep > 180 ? 1 : 0;
+  const o0 = polar(cx, cy, outer, startDeg);
+  const o1 = polar(cx, cy, outer, end);
+  const i1 = polar(cx, cy, inner, end);
+  const i0 = polar(cx, cy, inner, startDeg);
+  return [
+    `M ${round(o0.x)} ${round(o0.y)}`,
+    `A ${round(outer)} ${round(outer)} 0 ${large} 1 ${round(o1.x)} ${round(o1.y)}`,
+    `L ${round(i1.x)} ${round(i1.y)}`,
+    `A ${round(inner)} ${round(inner)} 0 ${large} 0 ${round(i0.x)} ${round(i0.y)}`,
+    "Z",
+  ].join(" ");
+}
+
+/** 점들을 잇는 폴리라인 ``d``. */
+export function polylinePath(points: { x: number; y: number }[]): string {
+  return points
+    .map((p, i) => `${i === 0 ? "M" : "L"} ${round(p.x)} ${round(p.y)}`)
+    .join(" ");
+}
+
+/** 범례 색 칩의 한 변. */
+export const LEGEND_CHIP = 12;
+
+/**
+ * 시리즈가 여럿일 때 위에 얹는 가로 범례(칩 + 이름).
+ *
+ * 한 줄에만 놓는다 — 상세페이지 차트에서 시리즈가 서너 개를 넘어가는 일은 거의 없고,
+ * 줄바꿈까지 얹으면 높이 계산이 폰트에 의존하게 된다.
+ */
+export function seriesLegend({
+  names,
+  colors,
+  style,
+  top,
+}: {
+  names: string[];
+  colors: string[];
+  style: ChartStyle;
+  top: number;
+}): { nodes: ChartNode[]; height: number } {
+  if (names.length <= 1) return { nodes: [], height: 0 };
+  const size = Math.round(style.labelSize * 0.9);
+  const rowH = Math.max(textHeight(size), LEGEND_CHIP);
+  const nodes: ChartNode[] = [];
+  let cursor = 0;
+  names.forEach((name, i) => {
+    nodes.push(
+      rectNode(
+        `legend:chip:${i}`,
+        {
+          x: cursor,
+          y: top + (rowH - LEGEND_CHIP) / 2,
+          width: LEGEND_CHIP,
+          height: LEGEND_CHIP,
+        },
+        colors[i] ?? style.mutedColor,
+        3,
+      ),
+    );
+    const textWidth = Math.max(24, estimateTextWidth(name, size) + 4);
+    nodes.push(
+      textNode(
+        `legend:label:${i}`,
+        {
+          x: cursor + LEGEND_CHIP + 6,
+          y: top + (rowH - textHeight(size)) / 2,
+          width: textWidth,
+        },
+        name,
+        {
+          style,
+          fontSize: size,
+          fill: style.labelColor,
+          align: "left",
+          fontWeight: "400",
+        },
+      ),
+    );
+    cursor += LEGEND_CHIP + 6 + textWidth + 16;
+  });
+  return { nodes, height: rowH };
+}
+
+/** 막대 모서리는 두께의 절반을 못 넘는다(넘으면 Konva가 알약을 찌그러뜨린다). */
+export function barRadius(style: ChartStyle, thickness: number): number {
+  return Math.min(style.cornerRadius, thickness / 2);
+}
+
+/**
+ * 값이 있는데 비율이 0에 가까워 막대가 사라지는 걸 막는 최소 길이.
+ *
+ * 0과 "아주 작은 값"이 똑같이 안 보이면 차트가 거짓말을 한다.
+ */
+export function visibleLength(length: number, ratio: number): number {
+  if (ratio <= 0) return 0;
+  return Math.max(2, length);
+}

package/lib/detail-page/chart/renderers/stack.ts

@@ -0,0 +1,121 @@
+/**
+ * 누적 막대 — 항목별 구성(성분 비중, 비용 구성)을 나란히 견준다.
+ *
+ * 축은 항목별 **합**으로 잡히므로(``resolveChart``) 가장 큰 기둥이 플롯을 꽉 채운다.
+ * 값 라벨은 조각마다 붙이지 않고 기둥 위에 합계 하나만 얹는다 — 조각 안에 숫자를 넣으면
+ * 얇은 조각에서 글자가 삐져나온다.
+ */
+
+import { formatChartValue } from "../format";
+import { ratioOf, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import { barRadius, rectNode, seriesLegend, textHeight, textNode } from "./shared";
+
+/** 칸 폭 대비 기둥이 차지하는 비율(명시적으로 더 두꺼운 값을 주면 그쪽을 따른다). */
+const COLUMN_FILL = 0.6;
+
+export function renderStack(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const width = spec.frame.width;
+  const count = Math.max(1, resolved.labels.length);
+  const nodes: ChartNode[] = [];
+
+  const seriesColors = resolved.series.map(
+    (_, i) =>
+      style.palette[i % Math.max(1, style.palette.length)] ?? style.mutedColor,
+  );
+  const legend = seriesLegend({
+    names: resolved.series.map((s) => s.name),
+    colors: seriesColors,
+    style,
+    top: 0,
+  });
+  nodes.push(...legend.nodes);
+
+  const valueH = textHeight(style.valueSize);
+  const labelH = textHeight(style.labelSize);
+  const headH =
+    (legend.height > 0 ? legend.height + style.labelGap : 0) +
+    (options.showValue ? valueH + style.labelGap : 0);
+  const plotTop = headH;
+  const plotBottom = plotTop + style.plotSize;
+
+  const colWidth = (width - style.gap * (count - 1)) / count;
+  const barWidth = Math.min(colWidth, Math.max(style.barSize, colWidth * COLUMN_FILL));
+  const radius = barRadius(style, barWidth);
+
+  resolved.labels.forEach((label, i) => {
+    const colX = i * (colWidth + style.gap);
+    const barX = colX + (colWidth - barWidth) / 2;
+    let total = 0;
+    let bottom = plotBottom;
+
+    if (style.showTrack) {
+      nodes.push(
+        rectNode(
+          `track:${i}`,
+          { x: barX, y: plotTop, width: barWidth, height: style.plotSize },
+          style.trackColor,
+          radius,
+        ),
+      );
+    }
+
+    resolved.series.forEach((series, s) => {
+      const value = series.values[i];
+      if (value === null || value <= 0) return;
+      total += value;
+      const height = style.plotSize * ratioOf(value, resolved.max);
+      bottom -= height;
+      nodes.push(
+        rectNode(
+          `bar:${s}:${i}`,
+          { x: barX, y: bottom, width: barWidth, height },
+          seriesColors[s],
+          // 조각마다 모서리를 둥글리면 기둥이 끊겨 보인다. 맨 위 조각만 둥글린다.
+          s === resolved.series.length - 1 ? radius : 0,
+        ),
+      );
+    });
+
+    if (options.showValue) {
+      nodes.push(
+        textNode(
+          `value:${i}`,
+          { x: colX, y: bottom - style.labelGap - valueH, width: colWidth },
+          formatChartValue(total > 0 ? total : null, {
+            decimals: options.decimals,
+            unit: options.unit,
+          }),
+          {
+            style,
+            fontSize: style.valueSize,
+            fill: style.valueColor,
+            align: "center",
+            fontWeight: "700",
+          },
+        ),
+      );
+    }
+
+    nodes.push(
+      textNode(
+        `label:${i}`,
+        { x: colX, y: plotBottom + style.labelGap, width: colWidth },
+        label,
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "center",
+          fontWeight: "400",
+        },
+      ),
+    );
+  });
+
+  return {
+    nodes,
+    size: { width, height: Math.round(plotBottom + style.labelGap + labelH) },
+  };
+}

package/lib/detail-page/chart/sync.ts

@@ -0,0 +1,92 @@
+/**
+ * 차트 스펙 ↔ Canvas 스토어.
+ *
+ * 스토어를 만지는 방법은 차트와 표가 똑같아서 ``spec-group/sync``에 한 벌로 있다 —
+ * 키 기반 diff, 한 번의 undo, 그룹 base 좌표 0, 자식을 잠그지 않기. **함정 설명은
+ * 거기 있다.** 여기서는 "차트를 어떻게 그리고 어떻게 알아보는가"만 정한다.
+ */
+
+import {
+  detachSpecGroup,
+  groupBox,
+  insertSpecGroup,
+  readSpec,
+  syncSpecGroup,
+  writeSpec,
+  type Box,
+  type ElementLike,
+  type SpecBinding,
+  type StoreLike,
+} from "../spec-group/sync";
+
+import { absorbResize, renderChart } from "./render";
+import { CHART_PART, type ChartSpec } from "./types";
+
+export type { ElementLike, StoreLike };
+export { documentFontFamily } from "../spec-group/sync";
+
+/**
+ * 저장된 문서에서 오는 값이라 형태를 믿지 않는다 — 최소한의 골격(버전·데이터 배열)만
+ * 확인하고, 세부 필드는 렌더러의 기본값 처리에 맡긴다.
+ */
+function parseChartSpec(raw: unknown): ChartSpec | null {
+  const spec = raw as Partial<ChartSpec>;
+  if (spec.v !== 1) return null;
+  if (!spec.kind || !spec.data || !Array.isArray(spec.data.labels)) return null;
+  if (!Array.isArray(spec.data.series)) return null;
+  return spec as ChartSpec;
+}
+
+const CHART_BINDING: SpecBinding<ChartSpec> = {
+  customKey: "chart",
+  partKey: CHART_PART,
+  defaultName: "차트",
+  render: renderChart,
+  parse: parseChartSpec,
+  absorbResize,
+};
+
+/** 그룹에서 차트 스펙을 꺼낸다. 차트가 아니면 ``null``. */
+export function readChartSpec(el: ElementLike | null | undefined): ChartSpec | null {
+  return readSpec(CHART_BINDING, el);
+}
+
+/** 스펙을 그룹에 되쓴다(다른 custom 키는 보존). */
+export function writeChartSpec(el: ElementLike, spec: ChartSpec): void {
+  writeSpec(CHART_BINDING, el, spec);
+}
+
+/** 그룹이 실제로 차지하는 상자. 그룹 모델이 아니라 자식에서 잰다. */
+export function chartBox(group: ElementLike): Box | null {
+  return groupBox(group);
+}
+
+export type InsertChartOptions = {
+  /** 프레임 좌상단(페이지 좌표). 없으면 페이지 가운데. */
+  origin?: { x: number; y: number };
+  /** 레이어 트리에 뜰 이름. */
+  name?: string;
+};
+
+/** 새 차트를 페이지에 놓고 그 그룹을 돌려준다. */
+export function insertChart(
+  store: StoreLike,
+  spec: ChartSpec,
+  options: InsertChartOptions = {},
+): ElementLike | null {
+  return insertSpecGroup(CHART_BINDING, store, spec, options);
+}
+
+/** 스펙이 바뀐 차트를 다시 그린다. 저장된 스펙(실제 frame이 채워진)을 돌려준다. */
+export function syncChartGroup(
+  store: StoreLike,
+  group: ElementLike,
+  next: ChartSpec,
+): ChartSpec {
+  return syncSpecGroup(CHART_BINDING, store, group, next);
+}
+
+/** 차트를 일반 그룹으로 푼다(되돌리기는 제공하지 않는다). */
+export function detachChart(group: ElementLike): void {
+  detachSpecGroup(CHART_BINDING, group);
+}

package/lib/detail-page/chart/types.ts

@@ -0,0 +1,145 @@
+/**
+ * 상세페이지 편집기 차트의 **데이터 모델**.
+ *
+ * 차트는 새 element 타입이 아니라 ``group`` 하나이고, 이 스펙은 그 그룹의
+ * ``custom.chart``에 통째로 얹힌다. 그래서 저장·불러오기·undo가 공짜로 따라오고,
+ * 내보내기(.ai/.psd/.svg/GIF)는 자식이 전부 기존 타입(figure/svg/text)이라 어댑터
+ * 없이 그대로 동작한다. 자세한 근거는 ``docs/detail-page-chart-element-plan.md``.
+ *
+ * 이 파일과 같은 폴더의 모듈은 **canvas를 import하지 않는다**. 순수 계산만 담아야
+ * 캔버스 없이 vitest에서 돌릴 수 있다(스토어를 만지는 건 ``sync.ts`` 하나뿐이고,
+ * 그것도 구조적 타입으로만 접근한다).
+ */
+
+export type ChartKind =
+  | "bar-h"
+  | "bar-v"
+  | "donut"
+  | "line"
+  | "stack"
+  | "gauge";
+
+/** 종류를 바꿔도 살아남는 정규형 데이터. 렌더러는 이걸 읽기만 한다. */
+export type ChartData = {
+  labels: string[];
+  series: ChartSeries[];
+};
+
+export type ChartSeries = {
+  name: string;
+  /** 빈 칸은 ``null``. 렌더러가 0으로 눌러버리면 "값 없음"과 "0"이 구분되지 않는다. */
+  values: (number | null)[];
+};
+
+export type ChartOptions = {
+  /** 축 최댓값. ``"auto"``면 데이터에서 뽑는다. */
+  max: number | "auto";
+  /** 값 뒤에 붙는 단위("%", "ms", "점"). */
+  unit: string;
+  decimals: number;
+  showValue: boolean;
+  sort: "none" | "desc" | "asc";
+  /**
+   * 강조할 항목 인덱스(보통 "우리 제품").
+   *
+   * 지정하면 그 항목만 팔레트 색, 나머지는 ``mutedColor``가 된다 — 템플릿의
+   * ``.bar`` vs ``.bar.alt`` 대비를 그대로 옮긴 것.
+   */
+  highlightIndex: number | null;
+};
+
+export type ChartStyle = {
+  /** 항목/시리즈 색. 강조 항목이 지정되면 첫 색만 쓰인다. */
+  palette: string[];
+  /** 강조 대상이 아닌 항목 색. */
+  mutedColor: string;
+  /** 막대 트랙(빈 부분) 색. */
+  trackColor: string;
+  labelColor: string;
+  valueColor: string;
+  fontFamily: string;
+  labelSize: number;
+  valueSize: number;
+  /** 막대 두께(가로형은 높이, 세로형은 폭). */
+  barSize: number;
+  /** 항목 사이 간격. */
+  gap: number;
+  /** 라벨 줄과 막대 사이 간격. */
+  labelGap: number;
+  /** 세로형·라인의 플롯 높이(가로형은 프레임 폭이 축 길이라 안 쓴다). */
+  plotSize: number;
+  cornerRadius: number;
+  /** 빈 트랙을 깔지 여부. 끄면 막대만 뜬다. */
+  showTrack: boolean;
+  /**
+   * 판 크롬 — 축·눈금선·기둥 밴드·눈금 라벨.
+   *
+   * 브랜드 상세페이지의 막대그래프는 이걸 전부 갖고 있고, 지금은 그 좌표를 손으로
+   * 계산해 통짜 SVG로 굽는다("1% = 6.5px"를 네 곳에 반영). 여기 옵션으로 들어오면
+   * 그 환산이 렌더러 한 줄이 된다.
+   *
+   * ``undefined``면 아무것도 안 그린다 — 기존 프리셋의 렌더 결과가 안 바뀐다.
+   * 세로 막대(``bar-v``)만 읽는다.
+   */
+  plot?: ChartPlotChrome;
+  /**
+   * 차트를 감싸는 카드(바탕 + 테두리 + 안여백). 종류와 무관하게 걸린다.
+   *
+   * ``undefined``면 카드를 안 그린다.
+   */
+  card?: ChartCard;
+};
+
+export type ChartPlotChrome = {
+  /** 항목 뒤에 까는 옅은 기둥. ``null``이면 안 깐다. */
+  bands: string | null;
+  /** 가로 눈금선. ``count``는 0선을 뺀 칸 수다. */
+  grid: { count: number; color: string; dash: boolean } | null;
+  /** 좌·하 축선. */
+  axis: { color: string; width: number } | null;
+  /** 왼쪽 눈금 라벨. ``unitCap``은 맨 위에 얹는 단위 표기("(%)"). */
+  ticks: { color: string; size: number; unitCap: string; gutter: number } | null;
+};
+
+export type ChartCard = {
+  fill: string;
+  stroke: string | null;
+  width: number;
+  radius: number;
+  pad: number;
+};
+
+export type ChartSpec = {
+  v: 1;
+  kind: ChartKind;
+  /**
+   * 차트의 논리 크기. ``width``는 입력값이고 ``height``는 렌더 결과로 갱신된다
+   * (행이 늘면 자연히 키가 커야 하므로 높이를 사용자가 정하게 두지 않는다).
+   */
+  frame: { width: number; height: number };
+  data: ChartData;
+  options: ChartOptions;
+  style: ChartStyle;
+};
+
+/**
+ * 렌더러가 뱉는 요소 하나.
+ *
+ * ``key``는 재생성 사이에 유지되는 안정 식별자다. sync가 이 키로 기존 자식을 찾아
+ * ``set``하기 때문에 요소 id가 보존되고, 그래서 선택·undo·레이어 트리가 흔들리지 않는다.
+ * ``props.x``/``props.y``는 **프레임 좌상단 기준 로컬 좌표**이고, 페이지 좌표로 옮기는
+ * 건 sync의 몫이다.
+ */
+export type ChartNode = {
+  key: string;
+  props: Record<string, unknown>;
+};
+
+export type ChartRender = {
+  nodes: ChartNode[];
+  /** 이 스펙이 실제로 차지하는 크기. ``spec.frame``에 되먹임한다. */
+  size: { width: number; height: number };
+};
+
+/** 차트 자식임을 표시하는 custom 키(레이어 트리·해제에서 쓴다). */
+export const CHART_PART = "chartPart";

package/lib/detail-page/css-color.ts

@@ -0,0 +1,34 @@
+/**
+ * Canvas/Konva 색 문자열을 HEX로 접는다.
+ *
+ * 편집기는 같은 색을 `#17150f` 로도 `rgb(23, 21, 15)` 로도 돌려준다(요소를 어떻게
+ * 만들었는지에 따라 다르다). 반면 텍스트 GIF 같은 백엔드 엔드포인트는 색을 SVG 속성값에
+ * 그대로 박기 때문에 짧은 HEX만 받는다. 그래서 보내기 직전에 여기서 정규화한다.
+ */
+
+const HEX_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB_RE =
+  /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*\.?\d+)\s*)?\)$/i;
+
+/**
+ * `value` 를 `#rrggbb`(알파가 있으면 `#rrggbbaa`)로 바꾼다.
+ * 아는 형태가 아니면 `fallback` 을 돌려준다 — 백엔드에서 422를 맞느니 기본색이 낫다.
+ */
+export function toHexColor(value: unknown, fallback: string): string {
+  if (typeof value !== "string") return fallback;
+
+  const text = value.trim();
+  if (HEX_RE.test(text)) return text.toLowerCase();
+
+  const match = RGB_RE.exec(text);
+  if (!match) return fallback;
+
+  const channels = [match[1], match[2], match[3]].map(Number);
+  if (channels.some((channel) => channel > 255)) return fallback;
+
+  const hex = `#${channels.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  if (match[4] === undefined) return hex;
+
+  const alpha = Math.round(Math.min(1, Math.max(0, Number(match[4]))) * 255);
+  return alpha === 255 ? hex : `${hex}${alpha.toString(16).padStart(2, "0")}`;
+}