@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/floating.ts

@@ -1,99 +1,99 @@
-/**
- * Where a floating panel (popover, menu, tooltip) goes next to its anchor:
- * on the preferred side when it fits, on the other side when it doesn't,
- * and always kept inside the viewport. Pure maths, no DOM, so it is the
- * same on the canvas and in the manager. `Popover`, `ContextMenu` and the
- * tooltip directive all place themselves through it.
- */
-
-export type Side = "top" | "bottom" | "left" | "right";
-export type Align = "start" | "center" | "end";
-export type Placement = Side | `${Side}-${Exclude<Align, "center">}`;
-
-export interface Rect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export interface PlaceOptions {
-  placement?: Placement;
-  /** Space between the anchor and the panel. */
-  gap?: number;
-  /** Space the panel keeps from the viewport edge. */
-  margin?: number;
-}
-
-export interface Placed {
-  x: number;
-  y: number;
-  /** The side it ended up on, after any flip. */
-  side: Side;
-}
-
-const OPPOSITE: Record<Side, Side> = { top: "bottom", bottom: "top", left: "right", right: "left" };
-
-export function splitPlacement(p: Placement): { side: Side; align: Align } {
-  const [side, align] = p.split("-") as [Side, Exclude<Align, "center"> | undefined];
-  return { side, align: align ?? "center" };
-}
-
-function room(side: Side, a: Rect, view: Size, gap: number, margin: number): number {
-  switch (side) {
-    case "top": return a.top - gap - margin;
-    case "bottom": return view.height - (a.top + a.height) - gap - margin;
-    case "left": return a.left - gap - margin;
-    case "right": return view.width - (a.left + a.width) - gap - margin;
-  }
-}
-
-function clamp(v: number, min: number, max: number): number {
-  return max < min ? min : Math.min(Math.max(v, min), max);
-}
-
-export function placeFloating(anchor: Rect, panel: Size, view: Size, opts: PlaceOptions = {}): Placed {
-  const gap = opts.gap ?? 6;
-  const margin = opts.margin ?? 8;
-  const { side: want, align } = splitPlacement(opts.placement ?? "bottom-start");
-  const vertical = want === "top" || want === "bottom";
-  const need = vertical ? panel.height : panel.width;
-
-  // Flip only when the other side has more room; a panel too big for both
-  // stays on the side with more space and gets clamped.
-  let side = want;
-  if (room(want, anchor, view, gap, margin) < need) {
-    const other = OPPOSITE[want];
-    if (room(other, anchor, view, gap, margin) > room(want, anchor, view, gap, margin)) side = other;
-  }
-
-  let x: number;
-  let y: number;
-  if (vertical) {
-    y = side === "bottom" ? anchor.top + anchor.height + gap : anchor.top - gap - panel.height;
-    x = align === "start" ? anchor.left
-      : align === "end" ? anchor.left + anchor.width - panel.width
-      : anchor.left + (anchor.width - panel.width) / 2;
-  } else {
-    x = side === "right" ? anchor.left + anchor.width + gap : anchor.left - gap - panel.width;
-    y = align === "start" ? anchor.top
-      : align === "end" ? anchor.top + anchor.height - panel.height
-      : anchor.top + (anchor.height - panel.height) / 2;
-  }
-
-  return {
-    x: Math.round(clamp(x, margin, view.width - margin - panel.width)),
-    y: Math.round(clamp(y, margin, view.height - margin - panel.height)),
-    side,
-  };
-}
-
-/** The viewport, for callers that have a window. */
-export function viewportSize(): Size {
-  return { width: window.innerWidth, height: window.innerHeight };
-}
+/**
+ * Where a floating panel (popover, menu, tooltip) goes next to its anchor:
+ * on the preferred side when it fits, on the other side when it doesn't,
+ * and always kept inside the viewport. Pure maths, no DOM, so it is the
+ * same on the canvas and in the manager. `Popover`, `ContextMenu` and the
+ * tooltip directive all place themselves through it.
+ */
+
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export type Placement = Side | `${Side}-${Exclude<Align, "center">}`;
+
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface PlaceOptions {
+  placement?: Placement;
+  /** Space between the anchor and the panel. */
+  gap?: number;
+  /** Space the panel keeps from the viewport edge. */
+  margin?: number;
+}
+
+export interface Placed {
+  x: number;
+  y: number;
+  /** The side it ended up on, after any flip. */
+  side: Side;
+}
+
+const OPPOSITE: Record<Side, Side> = { top: "bottom", bottom: "top", left: "right", right: "left" };
+
+export function splitPlacement(p: Placement): { side: Side; align: Align } {
+  const [side, align] = p.split("-") as [Side, Exclude<Align, "center"> | undefined];
+  return { side, align: align ?? "center" };
+}
+
+function room(side: Side, a: Rect, view: Size, gap: number, margin: number): number {
+  switch (side) {
+    case "top": return a.top - gap - margin;
+    case "bottom": return view.height - (a.top + a.height) - gap - margin;
+    case "left": return a.left - gap - margin;
+    case "right": return view.width - (a.left + a.width) - gap - margin;
+  }
+}
+
+function clamp(v: number, min: number, max: number): number {
+  return max < min ? min : Math.min(Math.max(v, min), max);
+}
+
+export function placeFloating(anchor: Rect, panel: Size, view: Size, opts: PlaceOptions = {}): Placed {
+  const gap = opts.gap ?? 6;
+  const margin = opts.margin ?? 8;
+  const { side: want, align } = splitPlacement(opts.placement ?? "bottom-start");
+  const vertical = want === "top" || want === "bottom";
+  const need = vertical ? panel.height : panel.width;
+
+  // Flip only when the other side has more room; a panel too big for both
+  // stays on the side with more space and gets clamped.
+  let side = want;
+  if (room(want, anchor, view, gap, margin) < need) {
+    const other = OPPOSITE[want];
+    if (room(other, anchor, view, gap, margin) > room(want, anchor, view, gap, margin)) side = other;
+  }
+
+  let x: number;
+  let y: number;
+  if (vertical) {
+    y = side === "bottom" ? anchor.top + anchor.height + gap : anchor.top - gap - panel.height;
+    x = align === "start" ? anchor.left
+      : align === "end" ? anchor.left + anchor.width - panel.width
+      : anchor.left + (anchor.width - panel.width) / 2;
+  } else {
+    x = side === "right" ? anchor.left + anchor.width + gap : anchor.left - gap - panel.width;
+    y = align === "start" ? anchor.top
+      : align === "end" ? anchor.top + anchor.height - panel.height
+      : anchor.top + (anchor.height - panel.height) / 2;
+  }
+
+  return {
+    x: Math.round(clamp(x, margin, view.width - margin - panel.width)),
+    y: Math.round(clamp(y, margin, view.height - margin - panel.height)),
+    side,
+  };
+}
+
+/** The viewport, for callers that have a window. */
+export function viewportSize(): Size {
+  return { width: window.innerWidth, height: window.innerHeight };
+}

package/src/highlight.ts

@@ -0,0 +1,199 @@
+/**
+ * Syntax colours for CodeBlock: a small lexer per language, no dependency.
+ * It splits code into tokens of a few kinds; CodeBlock draws each kind in a
+ * shared colour token, so a block wears the colours of the side it is on.
+ *
+ *   highlight('{"a": 1}', "json")  →  [{ kind: "punct", text: "{" }, { kind: "key", text: '"a"' }, …]
+ *
+ * Languages: json, ts (also js), html (also vue, xml), css, sh (also bash,
+ * shell, Modelfile), prompt (the Wildcard Pipeline template grammar: `$var`,
+ * `@{ref}`, `{a|b}`, `{2$$a|b}`, `$$` / `@@` escapes, `(word:1.2)` weights). Anything
+ * else comes back as one plain token. Every character of the input is in
+ * exactly one token, in order, so joining the tokens gives the input back.
+ */
+import { tokenizeRich } from "./rich-tokenize";
+
+export type HighlightKind =
+  | "plain" | "keyword" | "string" | "number" | "comment" | "punct"
+  | "key" | "tag" | "attr" | "fn" | "var" | "ref" | "brace" | "escape";
+
+export interface HighlightToken {
+  kind: HighlightKind;
+  text: string;
+}
+
+export type HighlightLanguage = "json" | "ts" | "html" | "css" | "sh" | "prompt";
+
+const ALIASES: Record<string, HighlightLanguage> = {
+  json: "json",
+  ts: "ts", typescript: "ts", js: "ts", javascript: "ts", tsx: "ts", jsx: "ts",
+  html: "html", vue: "html", xml: "html", svg: "html",
+  css: "css",
+  sh: "sh", bash: "sh", shell: "sh", zsh: "sh", console: "sh", modelfile: "sh", dockerfile: "sh",
+  prompt: "prompt", template: "prompt", wildcard: "prompt",
+};
+
+/** The grammar for a language name ("JSON", "Vue", "bash" …), or null. */
+export function highlightLanguage(name: string | null | undefined): HighlightLanguage | null {
+  if (!name) return null;
+  return ALIASES[name.trim().toLowerCase()] ?? null;
+}
+
+type Rule = [HighlightKind, RegExp];
+
+const TS_KEYWORDS = /^(?:import|from|export|default|const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|class|extends|interface|type|enum|as|in|of|typeof|instanceof|async|await|try|catch|finally|throw|void|this|null|undefined|true|false|readonly|public|private|protected|static|satisfies|keyof)$/;
+
+const RULES: Record<Exclude<HighlightLanguage, "prompt" | "html">, Rule[]> = {
+  json: [
+    ["key", /"(?:[^"\\\n]|\\.)*"(?=\s*:)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"/y],
+    ["number", /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y],
+    ["keyword", /\b(?:true|false|null)\b/y],
+    ["punct", /[{}[\],:]/y],
+  ],
+  ts: [
+    ["comment", /\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`/y],
+    ["number", /\b\d+(?:\.\d+)?\b/y],
+    ["fn", /[A-Za-z_$][\w$]*(?=\s*\()/y],
+    ["plain", /[A-Za-z_$][\w$]*/y],
+    ["punct", /[{}()[\];,.<>=!&|?:+\-*/%]+/y],
+  ],
+  css: [
+    ["comment", /\/\*[\s\S]*?(?:\*\/|$)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'/y],
+    ["key", /[\w-]+(?=\s*:[^:{]*[;}\n])/y],
+    ["var", /--[\w-]+/y],
+    ["number", /#[\da-fA-F]{3,8}\b|-?\d*\.?\d+(?:px|em|rem|%|vh|vw|s|ms|deg|fr)?\b/y],
+    ["fn", /[\w-]+(?=\()/y],
+    ["tag", /[.#]?[\w-]+(?::{1,2}[\w-]+)*(?=[^{};]*\{)/y],
+    ["punct", /[{}();:,>+~*]/y],
+  ],
+  sh: [
+    ["comment", /#[^\n]*/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'[^'\n]*'/y],
+    ["var", /\$\{?[\w]+\}?/y],
+    ["attr", /(?<=\s)--?[\w-]+/y],
+    ["fn", /(?<=^|\n|[|;&]\s*)[A-Za-z_][\w.-]*/y],
+    ["punct", /[|&;<>()]+/y],
+  ],
+};
+
+function lex(code: string, rules: Rule[]): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  let plain = "";
+  let i = 0;
+  const flush = (): void => { if (plain) { out.push({ kind: "plain", text: plain }); plain = ""; } };
+  outer: while (i < code.length) {
+    for (const [kind, re] of rules) {
+      re.lastIndex = i;
+      const m = re.exec(code);
+      if (m && m[0].length > 0) {
+        let k = kind;
+        if (rules === RULES.ts && kind === "plain" && TS_KEYWORDS.test(m[0])) k = "keyword";
+        if (k === "plain") plain += m[0];
+        else { flush(); out.push({ kind: k, text: m[0] }); }
+        i += m[0].length;
+        continue outer;
+      }
+    }
+    plain += code[i];
+    i += 1;
+  }
+  flush();
+  return out;
+}
+
+/** HTML and Vue templates: tags, attributes, their values, `{{ }}` as TS. */
+function lexHtml(code: string): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  const re = /<!--[\s\S]*?(?:-->|$)|<\/?[A-Za-z][\w.:-]*|\/?>|\{\{[\s\S]*?(?:\}\}|$)/g;
+  let at = 0;
+  let inTag = false;
+  const text = (s: string): void => {
+    if (!s) return;
+    if (!inTag) { out.push({ kind: "plain", text: s }); return; }
+    // Attributes inside a tag: name, =, "value".
+    const attr = /("[^"]*"|'[^']*')|([:@#]?[\w.:@#-]+)|(=)|(\s+)|([^\s"'=]+)/g;
+    for (const m of s.matchAll(attr)) {
+      if (m[1]) out.push({ kind: "string", text: m[1] });
+      else if (m[2]) out.push({ kind: "attr", text: m[2] });
+      else if (m[3]) out.push({ kind: "punct", text: m[3] });
+      else out.push({ kind: "plain", text: m[0] });
+    }
+  };
+  for (const m of code.matchAll(re)) {
+    const idx = m.index ?? 0;
+    text(code.slice(at, idx));
+    const t = m[0];
+    if (t.startsWith("<!--")) out.push({ kind: "comment", text: t });
+    else if (t.startsWith("{{") && !inTag) {
+      out.push({ kind: "punct", text: "{{" });
+      const inner = t.slice(2, t.endsWith("}}") ? -2 : undefined);
+      out.push(...lex(inner, RULES.ts));
+      if (t.endsWith("}}")) out.push({ kind: "punct", text: "}}" });
+    } else if (t.startsWith("<")) {
+      out.push({ kind: "punct", text: t.startsWith("</") ? "</" : "<" });
+      out.push({ kind: "tag", text: t.replace(/^<\/?/, "") });
+      inTag = true;
+    } else if (t.endsWith(">")) {
+      out.push({ kind: "punct", text: t });
+      inTag = false;
+    } else {
+      text(t);
+    }
+    at = idx + t.length;
+  }
+  text(code.slice(at));
+  return out;
+}
+
+/** The template grammar, through the kit's own tokenizer; `(word:1.2)` weights too. */
+function lexPrompt(code: string): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  const plain = (text: string): void => {
+    // Plain text: pick out `:1.2)` weights.
+    let at = 0;
+    for (const m of text.matchAll(/:(-?\d+(?:\.\d+)?)(?=\))/g)) {
+      const idx = (m.index ?? 0) + 1;
+      if (idx > at) out.push({ kind: "plain", text: text.slice(at, idx) });
+      out.push({ kind: "number", text: m[1] ?? "" });
+      at = idx + (m[1]?.length ?? 0);
+    }
+    if (at < text.length) out.push({ kind: "plain", text: text.slice(at) });
+  };
+  let at = 0;
+  for (const t of tokenizeRich(code)) {
+    // The tokenizer may leave gaps (it reports what it recognises); keep them as text.
+    if (t.start > at) plain(code.slice(at, t.start));
+    const text = code.slice(t.start, t.end);
+    if (t.kind === "var") out.push({ kind: "var", text });
+    else if (t.kind === "ref") out.push({ kind: "ref", text });
+    else if (t.kind === "dp-brace" || t.kind === "dp-multi") out.push({ kind: "brace", text });
+    else if (t.kind === "escape") out.push({ kind: "escape", text });
+    else plain(text);
+    at = Math.max(at, t.end);
+  }
+  if (at < code.length) plain(code.slice(at));
+  return out;
+}
+
+export function highlight(code: string, language: HighlightLanguage | null): HighlightToken[] {
+  if (!language || !code) return [{ kind: "plain", text: code }];
+  if (language === "html") return lexHtml(code);
+  if (language === "prompt") return lexPrompt(code);
+  return lex(code, RULES[language]);
+}
+
+/** Tokens cut at line breaks, for numbered lines. */
+export function highlightLines(tokens: HighlightToken[]): HighlightToken[][] {
+  const lines: HighlightToken[][] = [[]];
+  for (const t of tokens) {
+    const parts = t.text.split("\n");
+    parts.forEach((p, i) => {
+      if (i > 0) lines.push([]);
+      if (p) lines[lines.length - 1]?.push({ kind: t.kind, text: p });
+    });
+  }
+  return lines;
+}

package/src/hsv.ts

@@ -1,100 +1,100 @@
-/**
- * HSV / RGB / hex color conversion utilities.
- *
- * `h` in `[0, 360)`, `s` and `v` in `[0, 1]`. Hex strings are `#rrggbb`
- * lowercase. Functions are tolerant of out-of-range input — they clamp
- * rather than throw, which keeps the picker UI robust under fast drags.
- *
- * Lives in shared/ so both the manager-side ColorPicker / TweaksPanel
- * AND the canvas-side bundle modal can drive the same HsvPicker
- * without a cross-package import.
- */
-
-export interface Hsv {
-  h: number;
-  s: number;
-  v: number;
-}
-
-export interface Rgb {
-  r: number;
-  g: number;
-  b: number;
-}
-
-const HEX_PATTERN = /^#?([0-9a-fA-F]{6})$/;
-
-function clamp(n: number, lo: number, hi: number): number {
-  if (Number.isNaN(n)) return lo;
-  return Math.min(hi, Math.max(lo, n));
-}
-
-export function hsvToRgb(hsv: Hsv): Rgb {
-  const H = (((hsv.h % 360) + 360) % 360);
-  const S = clamp(hsv.s, 0, 1);
-  const V = clamp(hsv.v, 0, 1);
-
-  const C = V * S;
-  const X = C * (1 - Math.abs(((H / 60) % 2) - 1));
-  const M = V - C;
-  let r1 = 0;
-  let g1 = 0;
-  let b1 = 0;
-  if (H < 60)        { r1 = C; g1 = X; b1 = 0; }
-  else if (H < 120)  { r1 = X; g1 = C; b1 = 0; }
-  else if (H < 180)  { r1 = 0; g1 = C; b1 = X; }
-  else if (H < 240)  { r1 = 0; g1 = X; b1 = C; }
-  else if (H < 300)  { r1 = X; g1 = 0; b1 = C; }
-  else               { r1 = C; g1 = 0; b1 = X; }
-  return {
-    r: Math.round((r1 + M) * 255),
-    g: Math.round((g1 + M) * 255),
-    b: Math.round((b1 + M) * 255),
-  };
-}
-
-export function rgbToHsv(rgb: Rgb): Hsv {
-  const R = clamp(rgb.r, 0, 255) / 255;
-  const G = clamp(rgb.g, 0, 255) / 255;
-  const B = clamp(rgb.b, 0, 255) / 255;
-  const max = Math.max(R, G, B);
-  const min = Math.min(R, G, B);
-  const delta = max - min;
-
-  let h = 0;
-  if (delta > 0) {
-    if (max === R)      h = ((G - B) / delta) % 6;
-    else if (max === G) h = (B - R) / delta + 2;
-    else                h = (R - G) / delta + 4;
-    h *= 60;
-    if (h < 0) h += 360;
-  }
-  const s = max === 0 ? 0 : delta / max;
-  const v = max;
-  return { h, s, v };
-}
-
-export function rgbToHex(rgb: Rgb): string {
-  const part = (n: number): string => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
-  return `#${part(rgb.r)}${part(rgb.g)}${part(rgb.b)}`;
-}
-
-export function hexToRgb(hex: string): Rgb | null {
-  const matches = hex.trim().match(HEX_PATTERN);
-  if (!matches) return null;
-  const v = matches[1];
-  return {
-    r: parseInt(v.slice(0, 2), 16),
-    g: parseInt(v.slice(2, 4), 16),
-    b: parseInt(v.slice(4, 6), 16),
-  };
-}
-
-export function hexToHsv(hex: string): Hsv | null {
-  const rgb = hexToRgb(hex);
-  return rgb ? rgbToHsv(rgb) : null;
-}
-
-export function hsvToHex(hsv: Hsv): string {
-  return rgbToHex(hsvToRgb(hsv));
-}
+/**
+ * HSV / RGB / hex color conversion utilities.
+ *
+ * `h` in `[0, 360)`, `s` and `v` in `[0, 1]`. Hex strings are `#rrggbb`
+ * lowercase. Functions are tolerant of out-of-range input — they clamp
+ * rather than throw, which keeps the picker UI robust under fast drags.
+ *
+ * Lives in shared/ so both the manager-side ColorPicker / TweaksPanel
+ * AND the canvas-side bundle modal can drive the same HsvPicker
+ * without a cross-package import.
+ */
+
+export interface Hsv {
+  h: number;
+  s: number;
+  v: number;
+}
+
+export interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+
+const HEX_PATTERN = /^#?([0-9a-fA-F]{6})$/;
+
+function clamp(n: number, lo: number, hi: number): number {
+  if (Number.isNaN(n)) return lo;
+  return Math.min(hi, Math.max(lo, n));
+}
+
+export function hsvToRgb(hsv: Hsv): Rgb {
+  const H = (((hsv.h % 360) + 360) % 360);
+  const S = clamp(hsv.s, 0, 1);
+  const V = clamp(hsv.v, 0, 1);
+
+  const C = V * S;
+  const X = C * (1 - Math.abs(((H / 60) % 2) - 1));
+  const M = V - C;
+  let r1 = 0;
+  let g1 = 0;
+  let b1 = 0;
+  if (H < 60)        { r1 = C; g1 = X; b1 = 0; }
+  else if (H < 120)  { r1 = X; g1 = C; b1 = 0; }
+  else if (H < 180)  { r1 = 0; g1 = C; b1 = X; }
+  else if (H < 240)  { r1 = 0; g1 = X; b1 = C; }
+  else if (H < 300)  { r1 = X; g1 = 0; b1 = C; }
+  else               { r1 = C; g1 = 0; b1 = X; }
+  return {
+    r: Math.round((r1 + M) * 255),
+    g: Math.round((g1 + M) * 255),
+    b: Math.round((b1 + M) * 255),
+  };
+}
+
+export function rgbToHsv(rgb: Rgb): Hsv {
+  const R = clamp(rgb.r, 0, 255) / 255;
+  const G = clamp(rgb.g, 0, 255) / 255;
+  const B = clamp(rgb.b, 0, 255) / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const delta = max - min;
+
+  let h = 0;
+  if (delta > 0) {
+    if (max === R)      h = ((G - B) / delta) % 6;
+    else if (max === G) h = (B - R) / delta + 2;
+    else                h = (R - G) / delta + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : delta / max;
+  const v = max;
+  return { h, s, v };
+}
+
+export function rgbToHex(rgb: Rgb): string {
+  const part = (n: number): string => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+  return `#${part(rgb.r)}${part(rgb.g)}${part(rgb.b)}`;
+}
+
+export function hexToRgb(hex: string): Rgb | null {
+  const matches = hex.trim().match(HEX_PATTERN);
+  if (!matches) return null;
+  const v = matches[1];
+  return {
+    r: parseInt(v.slice(0, 2), 16),
+    g: parseInt(v.slice(2, 4), 16),
+    b: parseInt(v.slice(4, 6), 16),
+  };
+}
+
+export function hexToHsv(hex: string): Hsv | null {
+  const rgb = hexToRgb(hex);
+  return rgb ? rgbToHsv(rgb) : null;
+}
+
+export function hsvToHex(hsv: Hsv): string {
+  return rgbToHex(hsvToRgb(hsv));
+}