@kgalexander/mcreate 1.0.1 → 1.0.3

package/dist/index.js

@@ -890,15 +890,15 @@ function propertyCardTripleMockMjml(block, context) {
     ${responsiveStyles}
     <mj-table align="center" width="${width}" padding="0" css-class="${trackingClasses}">
       <tr class="property-triple-row-${uniqueId}">
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
           ${cards[0] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"  ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[1] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px" ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[2] || ""}
         </th>
       </tr>
@@ -2004,6 +2004,7 @@ var init_editor = __esm({
           onImageUpload: null,
           onDuplicate: null,
           onDelete: null,
+          onTemplateCapture: null,
           previewMode: false,
           focusIdx: null,
           hoverIdx: null,
@@ -2044,7 +2045,7 @@ var init_editor = __esm({
             });
           },
           // Initialize store with external template (for npm package usage)
-          initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete) => {
+          initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture) => {
             set((state) => {
               state.templateId = templateId;
               state.template = template;
@@ -2054,6 +2055,7 @@ var init_editor = __esm({
               state.onImageUpload = onImageUpload ?? null;
               state.onDuplicate = onDuplicate ?? null;
               state.onDelete = onDelete ?? null;
+              state.onTemplateCapture = onTemplateCapture ?? null;
               state.isPaidLevel = data?.isPaidLevel ?? 0;
               state.images = data?.images ?? [];
               state.userData = data?.userData ?? null;
@@ -10727,24 +10729,24 @@ function autolink(options) {
           if (!isValidLinkStructure(linksBeforeSpace)) {
             return false;
           }
-          linksBeforeSpace.filter((link) => link.isLink).map((link) => ({
-            ...link,
-            from: lastWordAndBlockOffset + link.start + 1,
-            to: lastWordAndBlockOffset + link.end + 1
-          })).filter((link) => {
+          linksBeforeSpace.filter((link2) => link2.isLink).map((link2) => ({
+            ...link2,
+            from: lastWordAndBlockOffset + link2.start + 1,
+            to: lastWordAndBlockOffset + link2.end + 1
+          })).filter((link2) => {
             if (!newState.schema.marks.code) {
               return true;
             }
-            return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
-          }).filter((link) => options.validate(link.value)).filter((link) => options.shouldAutoLink(link.value)).forEach((link) => {
-            if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+            return !newState.doc.rangeHasMark(link2.from, link2.to, newState.schema.marks.code);
+          }).filter((link2) => options.validate(link2.value)).filter((link2) => options.shouldAutoLink(link2.value)).forEach((link2) => {
+            if (getMarksBetween(link2.from, link2.to, newState.doc).some((item) => item.mark.type === options.type)) {
               return;
             }
             tr2.addMark(
-              link.from,
-              link.to,
+              link2.from,
+              link2.to,
               options.type.create({
-                href: link.href
+                href: link2.href
               })
             );
           });
@@ -10769,21 +10771,21 @@ function clickHandler(options) {
         if (!view.editable) {
           return false;
         }
-        let link = null;
+        let link2 = null;
         if (event.target instanceof HTMLAnchorElement) {
-          link = event.target;
+          link2 = event.target;
         } else {
           const target = event.target;
           if (!target) {
             return false;
           }
           const root = options.editor.view.dom;
-          link = target.closest("a");
-          if (link && !root.contains(link)) {
-            link = null;
+          link2 = target.closest("a");
+          if (link2 && !root.contains(link2)) {
+            link2 = null;
           }
         }
-        if (!link) {
+        if (!link2) {
           return false;
         }
         let handled = false;
@@ -10793,8 +10795,8 @@ function clickHandler(options) {
         }
         if (options.openOnClick) {
           const attrs = getAttributes(view.state, options.type.name);
-          const href = (_a = link.href) != null ? _a : attrs.href;
-          const target = (_b = link.target) != null ? _b : attrs.target;
+          const href = (_a = link2.href) != null ? _a : attrs.href;
+          const target = (_b = link2.target) != null ? _b : attrs.target;
           if (href) {
             window.open(href, target);
             handled = true;
@@ -10821,14 +10823,14 @@ function pasteHandler(options) {
         slice.content.forEach((node) => {
           textContent += node.textContent;
         });
-        const link = find(textContent, { defaultProtocol: options.defaultProtocol }).find(
+        const link2 = find(textContent, { defaultProtocol: options.defaultProtocol }).find(
           (item) => item.isLink && item.value === textContent
         );
-        if (!textContent || !link || shouldAutoLink !== void 0 && !shouldAutoLink(link.value)) {
+        if (!textContent || !link2 || shouldAutoLink !== void 0 && !shouldAutoLink(link2.value)) {
           return false;
         }
         return options.editor.commands.setMark(options.type, {
-          href: link.href
+          href: link2.href
         });
       }
     }
@@ -11030,16 +11032,16 @@ var init_dist2 = __esm({
                   })
                 );
                 if (links.length) {
-                  links.forEach((link) => {
-                    if (!this.options.shouldAutoLink(link.value)) {
+                  links.forEach((link2) => {
+                    if (!this.options.shouldAutoLink(link2.value)) {
                       return;
                     }
                     foundLinks.push({
-                      text: link.value,
+                      text: link2.value,
                       data: {
-                        href: link.href
+                        href: link2.href
                       },
-                      index: link.start
+                      index: link2.start
                     });
                   });
                 }
@@ -16967,6 +16969,46 @@ function TemplateNameDialog() {
 
 // src/core/editor/components/email-template-v2/header.tsx
 init_editor();
+
+// src/core/editor/utils/capture-template.ts
+var import_html_to_image = require("html-to-image");
+var CAPTURE_WIDTH = 600;
+async function captureTemplateImage(compiledHtml) {
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  container.style.width = `${CAPTURE_WIDTH}px`;
+  container.style.backgroundColor = "#FFFFFF00";
+  container.style.overflow = "hidden";
+  container.style.maxHeight = "100vh";
+  container.style.opacity = "0";
+  container.innerHTML = compiledHtml;
+  document.body.appendChild(container);
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  try {
+    const dataUrl = await (0, import_html_to_image.toPng)(container, {
+      width: CAPTURE_WIDTH,
+      quality: 0.1,
+      pixelRatio: 1,
+      cacheBust: true,
+      imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
+      backgroundColor: "#ffffff",
+      fetchRequestInit: { mode: "cors" },
+      skipFonts: true,
+      // Override opacity on the cloned node (real element is opacity:0 to stay invisible)
+      style: { opacity: "1" }
+    });
+    return dataUrl;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+// src/core/editor/components/email-template-v2/header.tsx
+init_json2mjml();
 init_core();
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function TemplateHeader() {
@@ -16978,14 +17020,28 @@ function TemplateHeader() {
   const onExit = useEditorStore((s) => s.onExit);
   const onDuplicate = useEditorStore((s) => s.onDuplicate);
   const onDelete = useEditorStore((s) => s.onDelete);
+  const onTemplateCapture = useEditorStore((s) => s.onTemplateCapture);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, useEditorStore.getState().template);
+      const template = useEditorStore.getState().template;
+      await onSave(templateId, template);
       markAsSaved();
+      if (onTemplateCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          console.log("Result:", result.html);
+          const imageDataUrl = await captureTemplateImage(result.html);
+          await onTemplateCapture(templateId, imageDataUrl);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
+      }
       onExit?.();
       console.log("handleExit - onExit called");
     } catch (error) {
@@ -19530,8 +19586,1579 @@ init_editor();
 init_label();
 init_popover();
 
+// node_modules/color-name/index.js
+var colors = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50]
+};
+for (const key in colors) Object.freeze(colors[key]);
+var color_name_default = Object.freeze(colors);
+
+// node_modules/color-string/index.js
+var reverseNames = /* @__PURE__ */ Object.create(null);
+for (const name in color_name_default) {
+  if (Object.hasOwn(color_name_default, name)) {
+    reverseNames[color_name_default[name]] = name;
+  }
+}
+var cs = {
+  to: {},
+  get: {}
+};
+cs.get = function(string) {
+  const prefix = string.slice(0, 3).toLowerCase();
+  let value;
+  let model;
+  switch (prefix) {
+    case "hsl": {
+      value = cs.get.hsl(string);
+      model = "hsl";
+      break;
+    }
+    case "hwb": {
+      value = cs.get.hwb(string);
+      model = "hwb";
+      break;
+    }
+    default: {
+      value = cs.get.rgb(string);
+      model = "rgb";
+      break;
+    }
+  }
+  if (!value) {
+    return null;
+  }
+  return { model, value };
+};
+cs.get.rgb = function(string) {
+  if (!string) {
+    return null;
+  }
+  const abbr = /^#([a-f\d]{3,4})$/i;
+  const hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
+  const rgba = /^rgba?\(\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)\s*(?:[\s,|/]\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(%?)\s*)?\)$/i;
+  const per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
+  const keyword = /^(\w+)$/;
+  let rgb = [0, 0, 0, 1];
+  let match;
+  let i;
+  let hexAlpha;
+  if (match = string.match(hex)) {
+    hexAlpha = match[2];
+    match = match[1];
+    for (i = 0; i < 3; i++) {
+      const i2 = i * 2;
+      rgb[i] = Number.parseInt(match.slice(i2, i2 + 2), 16);
+    }
+    if (hexAlpha) {
+      rgb[3] = Number.parseInt(hexAlpha, 16) / 255;
+    }
+  } else if (match = string.match(abbr)) {
+    match = match[1];
+    hexAlpha = match[3];
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Number.parseInt(match[i] + match[i], 16);
+    }
+    if (hexAlpha) {
+      rgb[3] = Number.parseInt(hexAlpha + hexAlpha, 16) / 255;
+    }
+  } else if (match = string.match(rgba)) {
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Number.parseFloat(match[i + 1]);
+    }
+    if (match[4]) {
+      rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
+    }
+  } else if (match = string.match(per)) {
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Math.round(Number.parseFloat(match[i + 1]) * 2.55);
+    }
+    if (match[4]) {
+      rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
+    }
+  } else if (match = string.toLowerCase().match(keyword)) {
+    if (match[1] === "transparent") {
+      return [0, 0, 0, 0];
+    }
+    if (!Object.hasOwn(color_name_default, match[1])) {
+      return null;
+    }
+    rgb = color_name_default[match[1]].slice();
+    rgb[3] = 1;
+    return rgb;
+  } else {
+    return null;
+  }
+  for (i = 0; i < 3; i++) {
+    rgb[i] = clamp(rgb[i], 0, 255);
+  }
+  rgb[3] = clamp(rgb[3], 0, 1);
+  return rgb;
+};
+cs.get.hsl = function(string) {
+  if (!string) {
+    return null;
+  }
+  const hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
+  const match = string.match(hsl);
+  if (match) {
+    const alpha2 = Number.parseFloat(match[4]);
+    const h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+    const s = clamp(Number.parseFloat(match[2]), 0, 100);
+    const l = clamp(Number.parseFloat(match[3]), 0, 100);
+    const a = clamp(Number.isNaN(alpha2) ? 1 : alpha2, 0, 1);
+    return [h, s, l, a];
+  }
+  return null;
+};
+cs.get.hwb = function(string) {
+  if (!string) {
+    return null;
+  }
+  const hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*[\s,]\s*([+-]?[\d.]+)%\s*[\s,]\s*([+-]?[\d.]+)%\s*(?:[\s,]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
+  const match = string.match(hwb);
+  if (match) {
+    const alpha2 = Number.parseFloat(match[4]);
+    const h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+    const w = clamp(Number.parseFloat(match[2]), 0, 100);
+    const b = clamp(Number.parseFloat(match[3]), 0, 100);
+    const a = clamp(Number.isNaN(alpha2) ? 1 : alpha2, 0, 1);
+    return [h, w, b, a];
+  }
+  return null;
+};
+cs.to.hex = function(...rgba) {
+  return "#" + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : "");
+};
+cs.to.rgb = function(...rgba) {
+  return rgba.length < 4 || rgba[3] === 1 ? "rgb(" + Math.round(rgba[0]) + ", " + Math.round(rgba[1]) + ", " + Math.round(rgba[2]) + ")" : "rgba(" + Math.round(rgba[0]) + ", " + Math.round(rgba[1]) + ", " + Math.round(rgba[2]) + ", " + rgba[3] + ")";
+};
+cs.to.rgb.percent = function(...rgba) {
+  const r = Math.round(rgba[0] / 255 * 100);
+  const g = Math.round(rgba[1] / 255 * 100);
+  const b = Math.round(rgba[2] / 255 * 100);
+  return rgba.length < 4 || rgba[3] === 1 ? "rgb(" + r + "%, " + g + "%, " + b + "%)" : "rgba(" + r + "%, " + g + "%, " + b + "%, " + rgba[3] + ")";
+};
+cs.to.hsl = function(...hsla) {
+  return hsla.length < 4 || hsla[3] === 1 ? "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)" : "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
+};
+cs.to.hwb = function(...hwba) {
+  let a = "";
+  if (hwba.length >= 4 && hwba[3] !== 1) {
+    a = ", " + hwba[3];
+  }
+  return "hwb(" + hwba[0] + ", " + hwba[1] + "%, " + hwba[2] + "%" + a + ")";
+};
+cs.to.keyword = function(...rgb) {
+  return reverseNames[rgb.slice(0, 3)];
+};
+function clamp(number_, min, max) {
+  return Math.min(Math.max(min, number_), max);
+}
+function hexDouble(number_) {
+  const string_ = Math.round(number_).toString(16).toUpperCase();
+  return string_.length < 2 ? "0" + string_ : string_;
+}
+var color_string_default = cs;
+
+// node_modules/color-convert/conversions.js
+var reverseKeywords = {};
+for (const key of Object.keys(color_name_default)) {
+  reverseKeywords[color_name_default[key]] = key;
+}
+var convert = {
+  rgb: { channels: 3, labels: "rgb" },
+  hsl: { channels: 3, labels: "hsl" },
+  hsv: { channels: 3, labels: "hsv" },
+  hwb: { channels: 3, labels: "hwb" },
+  cmyk: { channels: 4, labels: "cmyk" },
+  xyz: { channels: 3, labels: "xyz" },
+  lab: { channels: 3, labels: "lab" },
+  oklab: { channels: 3, labels: ["okl", "oka", "okb"] },
+  lch: { channels: 3, labels: "lch" },
+  oklch: { channels: 3, labels: ["okl", "okc", "okh"] },
+  hex: { channels: 1, labels: ["hex"] },
+  keyword: { channels: 1, labels: ["keyword"] },
+  ansi16: { channels: 1, labels: ["ansi16"] },
+  ansi256: { channels: 1, labels: ["ansi256"] },
+  hcg: { channels: 3, labels: ["h", "c", "g"] },
+  apple: { channels: 3, labels: ["r16", "g16", "b16"] },
+  gray: { channels: 1, labels: ["gray"] }
+};
+var conversions_default = convert;
+var LAB_FT = (6 / 29) ** 3;
+function srgbNonlinearTransform(c) {
+  const cc = c > 31308e-7 ? 1.055 * c ** (1 / 2.4) - 0.055 : c * 12.92;
+  return Math.min(Math.max(0, cc), 1);
+}
+function srgbNonlinearTransformInv(c) {
+  return c > 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+}
+for (const model of Object.keys(convert)) {
+  if (!("channels" in convert[model])) {
+    throw new Error("missing channels property: " + model);
+  }
+  if (!("labels" in convert[model])) {
+    throw new Error("missing channel labels property: " + model);
+  }
+  if (convert[model].labels.length !== convert[model].channels) {
+    throw new Error("channel and label counts mismatch: " + model);
+  }
+  const { channels, labels } = convert[model];
+  delete convert[model].channels;
+  delete convert[model].labels;
+  Object.defineProperty(convert[model], "channels", { value: channels });
+  Object.defineProperty(convert[model], "labels", { value: labels });
+}
+convert.rgb.hsl = function(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+  switch (max) {
+    case min: {
+      h = 0;
+      break;
+    }
+    case r: {
+      h = (g - b) / delta;
+      break;
+    }
+    case g: {
+      h = 2 + (b - r) / delta;
+      break;
+    }
+    case b: {
+      h = 4 + (r - g) / delta;
+      break;
+    }
+  }
+  h = Math.min(h * 60, 360);
+  if (h < 0) {
+    h += 360;
+  }
+  const l = (min + max) / 2;
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+  return [h, s * 100, l * 100];
+};
+convert.rgb.hsv = function(rgb) {
+  let rdif;
+  let gdif;
+  let bdif;
+  let h;
+  let s;
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const v = Math.max(r, g, b);
+  const diff = v - Math.min(r, g, b);
+  const diffc = function(c) {
+    return (v - c) / 6 / diff + 1 / 2;
+  };
+  if (diff === 0) {
+    h = 0;
+    s = 0;
+  } else {
+    s = diff / v;
+    rdif = diffc(r);
+    gdif = diffc(g);
+    bdif = diffc(b);
+    switch (v) {
+      case r: {
+        h = bdif - gdif;
+        break;
+      }
+      case g: {
+        h = 1 / 3 + rdif - bdif;
+        break;
+      }
+      case b: {
+        h = 2 / 3 + gdif - rdif;
+        break;
+      }
+    }
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+  }
+  return [
+    h * 360,
+    s * 100,
+    v * 100
+  ];
+};
+convert.rgb.hwb = function(rgb) {
+  const r = rgb[0];
+  const g = rgb[1];
+  let b = rgb[2];
+  const h = convert.rgb.hsl(rgb)[0];
+  const w = 1 / 255 * Math.min(r, Math.min(g, b));
+  b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
+  return [h, w * 100, b * 100];
+};
+convert.rgb.oklab = function(rgb) {
+  const r = srgbNonlinearTransformInv(rgb[0] / 255);
+  const g = srgbNonlinearTransformInv(rgb[1] / 255);
+  const b = srgbNonlinearTransformInv(rgb[2] / 255);
+  const lp = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const mp = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const sp = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const l = 0.2104542553 * lp + 0.793617785 * mp - 0.0040720468 * sp;
+  const aa = 1.9779984951 * lp - 2.428592205 * mp + 0.4505937099 * sp;
+  const bb = 0.0259040371 * lp + 0.7827717662 * mp - 0.808675766 * sp;
+  return [l * 100, aa * 100, bb * 100];
+};
+convert.rgb.cmyk = function(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const k = Math.min(1 - r, 1 - g, 1 - b);
+  const c = (1 - r - k) / (1 - k) || 0;
+  const m = (1 - g - k) / (1 - k) || 0;
+  const y = (1 - b - k) / (1 - k) || 0;
+  return [c * 100, m * 100, y * 100, k * 100];
+};
+function comparativeDistance(x, y) {
+  return (x[0] - y[0]) ** 2 + (x[1] - y[1]) ** 2 + (x[2] - y[2]) ** 2;
+}
+convert.rgb.keyword = function(rgb) {
+  const reversed = reverseKeywords[rgb];
+  if (reversed) {
+    return reversed;
+  }
+  let currentClosestDistance = Number.POSITIVE_INFINITY;
+  let currentClosestKeyword;
+  for (const keyword of Object.keys(color_name_default)) {
+    const value = color_name_default[keyword];
+    const distance = comparativeDistance(rgb, value);
+    if (distance < currentClosestDistance) {
+      currentClosestDistance = distance;
+      currentClosestKeyword = keyword;
+    }
+  }
+  return currentClosestKeyword;
+};
+convert.keyword.rgb = function(keyword) {
+  return [...color_name_default[keyword]];
+};
+convert.rgb.xyz = function(rgb) {
+  const r = srgbNonlinearTransformInv(rgb[0] / 255);
+  const g = srgbNonlinearTransformInv(rgb[1] / 255);
+  const b = srgbNonlinearTransformInv(rgb[2] / 255);
+  const x = r * 0.4124564 + g * 0.3575761 + b * 0.1804375;
+  const y = r * 0.2126729 + g * 0.7151522 + b * 0.072175;
+  const z = r * 0.0193339 + g * 0.119192 + b * 0.9503041;
+  return [x * 100, y * 100, z * 100];
+};
+convert.rgb.lab = function(rgb) {
+  const xyz = convert.rgb.xyz(rgb);
+  let x = xyz[0];
+  let y = xyz[1];
+  let z = xyz[2];
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+  x = x > LAB_FT ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+  y = y > LAB_FT ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+  z = z > LAB_FT ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+  const l = 116 * y - 16;
+  const a = 500 * (x - y);
+  const b = 200 * (y - z);
+  return [l, a, b];
+};
+convert.hsl.rgb = function(hsl) {
+  const h = hsl[0] / 360;
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  let t3;
+  let value;
+  if (s === 0) {
+    value = l * 255;
+    return [value, value, value];
+  }
+  const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const t1 = 2 * l - t2;
+  const rgb = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + 1 / 3 * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+    if (t3 > 1) {
+      t3--;
+    }
+    if (6 * t3 < 1) {
+      value = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      value = t2;
+    } else if (3 * t3 < 2) {
+      value = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      value = t1;
+    }
+    rgb[i] = value * 255;
+  }
+  return rgb;
+};
+convert.hsl.hsv = function(hsl) {
+  const h = hsl[0];
+  let s = hsl[1] / 100;
+  let l = hsl[2] / 100;
+  let smin = s;
+  const lmin = Math.max(l, 0.01);
+  l *= 2;
+  s *= l <= 1 ? l : 2 - l;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (l + s) / 2;
+  const sv = l === 0 ? 2 * smin / (lmin + smin) : 2 * s / (l + s);
+  return [h, sv * 100, v * 100];
+};
+convert.hsv.rgb = function(hsv) {
+  const h = hsv[0] / 60;
+  const s = hsv[1] / 100;
+  let v = hsv[2] / 100;
+  const hi = Math.floor(h) % 6;
+  const f = h - Math.floor(h);
+  const p = 255 * v * (1 - s);
+  const q = 255 * v * (1 - s * f);
+  const t = 255 * v * (1 - s * (1 - f));
+  v *= 255;
+  switch (hi) {
+    case 0: {
+      return [v, t, p];
+    }
+    case 1: {
+      return [q, v, p];
+    }
+    case 2: {
+      return [p, v, t];
+    }
+    case 3: {
+      return [p, q, v];
+    }
+    case 4: {
+      return [t, p, v];
+    }
+    case 5: {
+      return [v, p, q];
+    }
+  }
+};
+convert.hsv.hsl = function(hsv) {
+  const h = hsv[0];
+  const s = hsv[1] / 100;
+  const v = hsv[2] / 100;
+  const vmin = Math.max(v, 0.01);
+  let sl;
+  let l;
+  l = (2 - s) * v;
+  const lmin = (2 - s) * vmin;
+  sl = s * vmin;
+  sl /= lmin <= 1 ? lmin : 2 - lmin;
+  sl = sl || 0;
+  l /= 2;
+  return [h, sl * 100, l * 100];
+};
+convert.hwb.rgb = function(hwb) {
+  const h = hwb[0] / 360;
+  let wh = hwb[1] / 100;
+  let bl = hwb[2] / 100;
+  const ratio = wh + bl;
+  let f;
+  if (ratio > 1) {
+    wh /= ratio;
+    bl /= ratio;
+  }
+  const i = Math.floor(6 * h);
+  const v = 1 - bl;
+  f = 6 * h - i;
+  if ((i & 1) !== 0) {
+    f = 1 - f;
+  }
+  const n = wh + f * (v - wh);
+  let r;
+  let g;
+  let b;
+  switch (i) {
+    default:
+    case 6:
+    case 0: {
+      r = v;
+      g = n;
+      b = wh;
+      break;
+    }
+    case 1: {
+      r = n;
+      g = v;
+      b = wh;
+      break;
+    }
+    case 2: {
+      r = wh;
+      g = v;
+      b = n;
+      break;
+    }
+    case 3: {
+      r = wh;
+      g = n;
+      b = v;
+      break;
+    }
+    case 4: {
+      r = n;
+      g = wh;
+      b = v;
+      break;
+    }
+    case 5: {
+      r = v;
+      g = wh;
+      b = n;
+      break;
+    }
+  }
+  return [r * 255, g * 255, b * 255];
+};
+convert.cmyk.rgb = function(cmyk) {
+  const c = cmyk[0] / 100;
+  const m = cmyk[1] / 100;
+  const y = cmyk[2] / 100;
+  const k = cmyk[3] / 100;
+  const r = 1 - Math.min(1, c * (1 - k) + k);
+  const g = 1 - Math.min(1, m * (1 - k) + k);
+  const b = 1 - Math.min(1, y * (1 - k) + k);
+  return [r * 255, g * 255, b * 255];
+};
+convert.xyz.rgb = function(xyz) {
+  const x = xyz[0] / 100;
+  const y = xyz[1] / 100;
+  const z = xyz[2] / 100;
+  let r;
+  let g;
+  let b;
+  r = x * 3.2404542 + y * -1.5371385 + z * -0.4985314;
+  g = x * -0.969266 + y * 1.8760108 + z * 0.041556;
+  b = x * 0.0556434 + y * -0.2040259 + z * 1.0572252;
+  r = srgbNonlinearTransform(r);
+  g = srgbNonlinearTransform(g);
+  b = srgbNonlinearTransform(b);
+  return [r * 255, g * 255, b * 255];
+};
+convert.xyz.lab = function(xyz) {
+  let x = xyz[0];
+  let y = xyz[1];
+  let z = xyz[2];
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+  x = x > LAB_FT ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+  y = y > LAB_FT ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+  z = z > LAB_FT ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+  const l = 116 * y - 16;
+  const a = 500 * (x - y);
+  const b = 200 * (y - z);
+  return [l, a, b];
+};
+convert.xyz.oklab = function(xyz) {
+  const x = xyz[0] / 100;
+  const y = xyz[1] / 100;
+  const z = xyz[2] / 100;
+  const lp = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
+  const mp = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
+  const sp = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);
+  const l = 0.2104542553 * lp + 0.793617785 * mp - 0.0040720468 * sp;
+  const a = 1.9779984951 * lp - 2.428592205 * mp + 0.4505937099 * sp;
+  const b = 0.0259040371 * lp + 0.7827717662 * mp - 0.808675766 * sp;
+  return [l * 100, a * 100, b * 100];
+};
+convert.oklab.oklch = function(oklab) {
+  return convert.lab.lch(oklab);
+};
+convert.oklab.xyz = function(oklab) {
+  const ll = oklab[0] / 100;
+  const a = oklab[1] / 100;
+  const b = oklab[2] / 100;
+  const l = (0.999999998 * ll + 0.396337792 * a + 0.215803758 * b) ** 3;
+  const m = (1.000000008 * ll - 0.105561342 * a - 0.063854175 * b) ** 3;
+  const s = (1.000000055 * ll - 0.089484182 * a - 1.291485538 * b) ** 3;
+  const x = 1.227013851 * l - 0.55779998 * m + 0.281256149 * s;
+  const y = -0.040580178 * l + 1.11225687 * m - 0.071676679 * s;
+  const z = -0.076381285 * l - 0.421481978 * m + 1.58616322 * s;
+  return [x * 100, y * 100, z * 100];
+};
+convert.oklab.rgb = function(oklab) {
+  const ll = oklab[0] / 100;
+  const aa = oklab[1] / 100;
+  const bb = oklab[2] / 100;
+  const l = (ll + 0.3963377774 * aa + 0.2158037573 * bb) ** 3;
+  const m = (ll - 0.1055613458 * aa - 0.0638541728 * bb) ** 3;
+  const s = (ll - 0.0894841775 * aa - 1.291485548 * bb) ** 3;
+  const r = srgbNonlinearTransform(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+  const g = srgbNonlinearTransform(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+  const b = srgbNonlinearTransform(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s);
+  return [r * 255, g * 255, b * 255];
+};
+convert.oklch.oklab = function(oklch) {
+  return convert.lch.lab(oklch);
+};
+convert.lab.xyz = function(lab) {
+  const l = lab[0];
+  const a = lab[1];
+  const b = lab[2];
+  let x;
+  let y;
+  let z;
+  y = (l + 16) / 116;
+  x = a / 500 + y;
+  z = y - b / 200;
+  const y2 = y ** 3;
+  const x2 = x ** 3;
+  const z2 = z ** 3;
+  y = y2 > LAB_FT ? y2 : (y - 16 / 116) / 7.787;
+  x = x2 > LAB_FT ? x2 : (x - 16 / 116) / 7.787;
+  z = z2 > LAB_FT ? z2 : (z - 16 / 116) / 7.787;
+  x *= 95.047;
+  y *= 100;
+  z *= 108.883;
+  return [x, y, z];
+};
+convert.lab.lch = function(lab) {
+  const l = lab[0];
+  const a = lab[1];
+  const b = lab[2];
+  let h;
+  const hr = Math.atan2(b, a);
+  h = hr * 360 / 2 / Math.PI;
+  if (h < 0) {
+    h += 360;
+  }
+  const c = Math.sqrt(a * a + b * b);
+  return [l, c, h];
+};
+convert.lch.lab = function(lch) {
+  const l = lch[0];
+  const c = lch[1];
+  const h = lch[2];
+  const hr = h / 360 * 2 * Math.PI;
+  const a = c * Math.cos(hr);
+  const b = c * Math.sin(hr);
+  return [l, a, b];
+};
+convert.rgb.ansi16 = function(args, saturation = null) {
+  const [r, g, b] = args;
+  let value = saturation === null ? convert.rgb.hsv(args)[2] : saturation;
+  value = Math.round(value / 50);
+  if (value === 0) {
+    return 30;
+  }
+  let ansi = 30 + (Math.round(b / 255) << 2 | Math.round(g / 255) << 1 | Math.round(r / 255));
+  if (value === 2) {
+    ansi += 60;
+  }
+  return ansi;
+};
+convert.hsv.ansi16 = function(args) {
+  return convert.rgb.ansi16(convert.hsv.rgb(args), args[2]);
+};
+convert.rgb.ansi256 = function(args) {
+  const r = args[0];
+  const g = args[1];
+  const b = args[2];
+  if (r >> 4 === g >> 4 && g >> 4 === b >> 4) {
+    if (r < 8) {
+      return 16;
+    }
+    if (r > 248) {
+      return 231;
+    }
+    return Math.round((r - 8) / 247 * 24) + 232;
+  }
+  const ansi = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g / 255 * 5) + Math.round(b / 255 * 5);
+  return ansi;
+};
+convert.ansi16.rgb = function(args) {
+  args = args[0];
+  let color = args % 10;
+  if (color === 0 || color === 7) {
+    if (args > 50) {
+      color += 3.5;
+    }
+    color = color / 10.5 * 255;
+    return [color, color, color];
+  }
+  const mult = (Math.trunc(args > 50) + 1) * 0.5;
+  const r = (color & 1) * mult * 255;
+  const g = (color >> 1 & 1) * mult * 255;
+  const b = (color >> 2 & 1) * mult * 255;
+  return [r, g, b];
+};
+convert.ansi256.rgb = function(args) {
+  args = args[0];
+  if (args >= 232) {
+    const c = (args - 232) * 10 + 8;
+    return [c, c, c];
+  }
+  args -= 16;
+  let rem;
+  const r = Math.floor(args / 36) / 5 * 255;
+  const g = Math.floor((rem = args % 36) / 6) / 5 * 255;
+  const b = rem % 6 / 5 * 255;
+  return [r, g, b];
+};
+convert.rgb.hex = function(args) {
+  const integer = ((Math.round(args[0]) & 255) << 16) + ((Math.round(args[1]) & 255) << 8) + (Math.round(args[2]) & 255);
+  const string = integer.toString(16).toUpperCase();
+  return "000000".slice(string.length) + string;
+};
+convert.hex.rgb = function(args) {
+  const match = args.toString(16).match(/[a-f\d]{6}|[a-f\d]{3}/i);
+  if (!match) {
+    return [0, 0, 0];
+  }
+  let colorString = match[0];
+  if (match[0].length === 3) {
+    colorString = [...colorString].map((char) => char + char).join("");
+  }
+  const integer = Number.parseInt(colorString, 16);
+  const r = integer >> 16 & 255;
+  const g = integer >> 8 & 255;
+  const b = integer & 255;
+  return [r, g, b];
+};
+convert.rgb.hcg = function(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const max = Math.max(Math.max(r, g), b);
+  const min = Math.min(Math.min(r, g), b);
+  const chroma = max - min;
+  let hue;
+  const grayscale = chroma < 1 ? min / (1 - chroma) : 0;
+  if (chroma <= 0) {
+    hue = 0;
+  } else if (max === r) {
+    hue = (g - b) / chroma % 6;
+  } else if (max === g) {
+    hue = 2 + (b - r) / chroma;
+  } else {
+    hue = 4 + (r - g) / chroma;
+  }
+  hue /= 6;
+  hue %= 1;
+  return [hue * 360, chroma * 100, grayscale * 100];
+};
+convert.hsl.hcg = function(hsl) {
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  const c = l < 0.5 ? 2 * s * l : 2 * s * (1 - l);
+  let f = 0;
+  if (c < 1) {
+    f = (l - 0.5 * c) / (1 - c);
+  }
+  return [hsl[0], c * 100, f * 100];
+};
+convert.hsv.hcg = function(hsv) {
+  const s = hsv[1] / 100;
+  const v = hsv[2] / 100;
+  const c = s * v;
+  let f = 0;
+  if (c < 1) {
+    f = (v - c) / (1 - c);
+  }
+  return [hsv[0], c * 100, f * 100];
+};
+convert.hcg.rgb = function(hcg) {
+  const h = hcg[0] / 360;
+  const c = hcg[1] / 100;
+  const g = hcg[2] / 100;
+  if (c === 0) {
+    return [g * 255, g * 255, g * 255];
+  }
+  const pure = [0, 0, 0];
+  const hi = h % 1 * 6;
+  const v = hi % 1;
+  const w = 1 - v;
+  let mg = 0;
+  switch (Math.floor(hi)) {
+    case 0: {
+      pure[0] = 1;
+      pure[1] = v;
+      pure[2] = 0;
+      break;
+    }
+    case 1: {
+      pure[0] = w;
+      pure[1] = 1;
+      pure[2] = 0;
+      break;
+    }
+    case 2: {
+      pure[0] = 0;
+      pure[1] = 1;
+      pure[2] = v;
+      break;
+    }
+    case 3: {
+      pure[0] = 0;
+      pure[1] = w;
+      pure[2] = 1;
+      break;
+    }
+    case 4: {
+      pure[0] = v;
+      pure[1] = 0;
+      pure[2] = 1;
+      break;
+    }
+    default: {
+      pure[0] = 1;
+      pure[1] = 0;
+      pure[2] = w;
+    }
+  }
+  mg = (1 - c) * g;
+  return [
+    (c * pure[0] + mg) * 255,
+    (c * pure[1] + mg) * 255,
+    (c * pure[2] + mg) * 255
+  ];
+};
+convert.hcg.hsv = function(hcg) {
+  const c = hcg[1] / 100;
+  const g = hcg[2] / 100;
+  const v = c + g * (1 - c);
+  let f = 0;
+  if (v > 0) {
+    f = c / v;
+  }
+  return [hcg[0], f * 100, v * 100];
+};
+convert.hcg.hsl = function(hcg) {
+  const c = hcg[1] / 100;
+  const g = hcg[2] / 100;
+  const l = g * (1 - c) + 0.5 * c;
+  let s = 0;
+  if (l > 0 && l < 0.5) {
+    s = c / (2 * l);
+  } else if (l >= 0.5 && l < 1) {
+    s = c / (2 * (1 - l));
+  }
+  return [hcg[0], s * 100, l * 100];
+};
+convert.hcg.hwb = function(hcg) {
+  const c = hcg[1] / 100;
+  const g = hcg[2] / 100;
+  const v = c + g * (1 - c);
+  return [hcg[0], (v - c) * 100, (1 - v) * 100];
+};
+convert.hwb.hcg = function(hwb) {
+  const w = hwb[1] / 100;
+  const b = hwb[2] / 100;
+  const v = 1 - b;
+  const c = v - w;
+  let g = 0;
+  if (c < 1) {
+    g = (v - c) / (1 - c);
+  }
+  return [hwb[0], c * 100, g * 100];
+};
+convert.apple.rgb = function(apple) {
+  return [apple[0] / 65535 * 255, apple[1] / 65535 * 255, apple[2] / 65535 * 255];
+};
+convert.rgb.apple = function(rgb) {
+  return [rgb[0] / 255 * 65535, rgb[1] / 255 * 65535, rgb[2] / 255 * 65535];
+};
+convert.gray.rgb = function(args) {
+  return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
+};
+convert.gray.hsl = function(args) {
+  return [0, 0, args[0]];
+};
+convert.gray.hsv = convert.gray.hsl;
+convert.gray.hwb = function(gray) {
+  return [0, 100, gray[0]];
+};
+convert.gray.cmyk = function(gray) {
+  return [0, 0, 0, gray[0]];
+};
+convert.gray.lab = function(gray) {
+  return [gray[0], 0, 0];
+};
+convert.gray.hex = function(gray) {
+  const value = Math.round(gray[0] / 100 * 255) & 255;
+  const integer = (value << 16) + (value << 8) + value;
+  const string = integer.toString(16).toUpperCase();
+  return "000000".slice(string.length) + string;
+};
+convert.rgb.gray = function(rgb) {
+  const value = (rgb[0] + rgb[1] + rgb[2]) / 3;
+  return [value / 255 * 100];
+};
+
+// node_modules/color-convert/route.js
+function buildGraph() {
+  const graph = {};
+  const models2 = Object.keys(conversions_default);
+  for (let { length } = models2, i = 0; i < length; i++) {
+    graph[models2[i]] = {
+      // http://jsperf.com/1-vs-infinity
+      // micro-opt, but this is simple.
+      distance: -1,
+      parent: null
+    };
+  }
+  return graph;
+}
+function deriveBFS(fromModel) {
+  const graph = buildGraph();
+  const queue = [fromModel];
+  graph[fromModel].distance = 0;
+  while (queue.length > 0) {
+    const current = queue.pop();
+    const adjacents = Object.keys(conversions_default[current]);
+    for (let { length } = adjacents, i = 0; i < length; i++) {
+      const adjacent = adjacents[i];
+      const node = graph[adjacent];
+      if (node.distance === -1) {
+        node.distance = graph[current].distance + 1;
+        node.parent = current;
+        queue.unshift(adjacent);
+      }
+    }
+  }
+  return graph;
+}
+function link(from, to) {
+  return function(args) {
+    return to(from(args));
+  };
+}
+function wrapConversion(toModel, graph) {
+  const path = [graph[toModel].parent, toModel];
+  let fn = conversions_default[graph[toModel].parent][toModel];
+  let cur = graph[toModel].parent;
+  while (graph[cur].parent) {
+    path.unshift(graph[cur].parent);
+    fn = link(conversions_default[graph[cur].parent][cur], fn);
+    cur = graph[cur].parent;
+  }
+  fn.conversion = path;
+  return fn;
+}
+function route(fromModel) {
+  const graph = deriveBFS(fromModel);
+  const conversion = {};
+  const models2 = Object.keys(graph);
+  for (let { length } = models2, i = 0; i < length; i++) {
+    const toModel = models2[i];
+    const node = graph[toModel];
+    if (node.parent === null) {
+      continue;
+    }
+    conversion[toModel] = wrapConversion(toModel, graph);
+  }
+  return conversion;
+}
+var route_default = route;
+
+// node_modules/color-convert/index.js
+var convert2 = {};
+var models = Object.keys(conversions_default);
+function wrapRaw(fn) {
+  const wrappedFn = function(...args) {
+    const arg0 = args[0];
+    if (arg0 === void 0 || arg0 === null) {
+      return arg0;
+    }
+    if (arg0.length > 1) {
+      args = arg0;
+    }
+    return fn(args);
+  };
+  if ("conversion" in fn) {
+    wrappedFn.conversion = fn.conversion;
+  }
+  return wrappedFn;
+}
+function wrapRounded(fn) {
+  const wrappedFn = function(...args) {
+    const arg0 = args[0];
+    if (arg0 === void 0 || arg0 === null) {
+      return arg0;
+    }
+    if (arg0.length > 1) {
+      args = arg0;
+    }
+    const result = fn(args);
+    if (typeof result === "object") {
+      for (let { length } = result, i = 0; i < length; i++) {
+        result[i] = Math.round(result[i]);
+      }
+    }
+    return result;
+  };
+  if ("conversion" in fn) {
+    wrappedFn.conversion = fn.conversion;
+  }
+  return wrappedFn;
+}
+for (const fromModel of models) {
+  convert2[fromModel] = {};
+  Object.defineProperty(convert2[fromModel], "channels", { value: conversions_default[fromModel].channels });
+  Object.defineProperty(convert2[fromModel], "labels", { value: conversions_default[fromModel].labels });
+  const routes = route_default(fromModel);
+  const routeModels = Object.keys(routes);
+  for (const toModel of routeModels) {
+    const fn = routes[toModel];
+    convert2[fromModel][toModel] = wrapRounded(fn);
+    convert2[fromModel][toModel].raw = wrapRaw(fn);
+  }
+}
+var color_convert_default = convert2;
+
+// node_modules/color/index.js
+var skippedModels = [
+  // To be honest, I don't really feel like keyword belongs in color convert, but eh.
+  "keyword",
+  // Gray conflicts with some method names, and has its own method defined.
+  "gray",
+  // Shouldn't really be in color-convert either...
+  "hex"
+];
+var hashedModelKeys = {};
+for (const model of Object.keys(color_convert_default)) {
+  hashedModelKeys[[...color_convert_default[model].labels].sort().join("")] = model;
+}
+var limiters = {};
+function Color2(object, model) {
+  if (!(this instanceof Color2)) {
+    return new Color2(object, model);
+  }
+  if (model && model in skippedModels) {
+    model = null;
+  }
+  if (model && !(model in color_convert_default)) {
+    throw new Error("Unknown model: " + model);
+  }
+  let i;
+  let channels;
+  if (object == null) {
+    this.model = "rgb";
+    this.color = [0, 0, 0];
+    this.valpha = 1;
+  } else if (object instanceof Color2) {
+    this.model = object.model;
+    this.color = [...object.color];
+    this.valpha = object.valpha;
+  } else if (typeof object === "string") {
+    const result = color_string_default.get(object);
+    if (result === null) {
+      throw new Error("Unable to parse color from string: " + object);
+    }
+    this.model = result.model;
+    channels = color_convert_default[this.model].channels;
+    this.color = result.value.slice(0, channels);
+    this.valpha = typeof result.value[channels] === "number" ? result.value[channels] : 1;
+  } else if (object.length > 0) {
+    this.model = model || "rgb";
+    channels = color_convert_default[this.model].channels;
+    const newArray = Array.prototype.slice.call(object, 0, channels);
+    this.color = zeroArray(newArray, channels);
+    this.valpha = typeof object[channels] === "number" ? object[channels] : 1;
+  } else if (typeof object === "number") {
+    this.model = "rgb";
+    this.color = [
+      object >> 16 & 255,
+      object >> 8 & 255,
+      object & 255
+    ];
+    this.valpha = 1;
+  } else {
+    this.valpha = 1;
+    const keys = Object.keys(object);
+    if ("alpha" in object) {
+      keys.splice(keys.indexOf("alpha"), 1);
+      this.valpha = typeof object.alpha === "number" ? object.alpha : 0;
+    }
+    const hashedKeys = keys.sort().join("");
+    if (!(hashedKeys in hashedModelKeys)) {
+      throw new Error("Unable to parse color from object: " + JSON.stringify(object));
+    }
+    this.model = hashedModelKeys[hashedKeys];
+    const { labels } = color_convert_default[this.model];
+    const color = [];
+    for (i = 0; i < labels.length; i++) {
+      color.push(object[labels[i]]);
+    }
+    this.color = zeroArray(color);
+  }
+  if (limiters[this.model]) {
+    channels = color_convert_default[this.model].channels;
+    for (i = 0; i < channels; i++) {
+      const limit = limiters[this.model][i];
+      if (limit) {
+        this.color[i] = limit(this.color[i]);
+      }
+    }
+  }
+  this.valpha = Math.max(0, Math.min(1, this.valpha));
+  if (Object.freeze) {
+    Object.freeze(this);
+  }
+}
+Color2.prototype = {
+  toString() {
+    return this.string();
+  },
+  toJSON() {
+    return this[this.model]();
+  },
+  string(places) {
+    let self = this.model in color_string_default.to ? this : this.rgb();
+    self = self.round(typeof places === "number" ? places : 1);
+    const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
+    return color_string_default.to[self.model](...arguments_);
+  },
+  percentString(places) {
+    const self = this.rgb().round(typeof places === "number" ? places : 1);
+    const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
+    return color_string_default.to.rgb.percent(...arguments_);
+  },
+  array() {
+    return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
+  },
+  object() {
+    const result = {};
+    const { channels } = color_convert_default[this.model];
+    const { labels } = color_convert_default[this.model];
+    for (let i = 0; i < channels; i++) {
+      result[labels[i]] = this.color[i];
+    }
+    if (this.valpha !== 1) {
+      result.alpha = this.valpha;
+    }
+    return result;
+  },
+  unitArray() {
+    const rgb = this.rgb().color;
+    rgb[0] /= 255;
+    rgb[1] /= 255;
+    rgb[2] /= 255;
+    if (this.valpha !== 1) {
+      rgb.push(this.valpha);
+    }
+    return rgb;
+  },
+  unitObject() {
+    const rgb = this.rgb().object();
+    rgb.r /= 255;
+    rgb.g /= 255;
+    rgb.b /= 255;
+    if (this.valpha !== 1) {
+      rgb.alpha = this.valpha;
+    }
+    return rgb;
+  },
+  round(places) {
+    places = Math.max(places || 0, 0);
+    return new Color2([...this.color.map(roundToPlace(places)), this.valpha], this.model);
+  },
+  alpha(value) {
+    if (value !== void 0) {
+      return new Color2([...this.color, Math.max(0, Math.min(1, value))], this.model);
+    }
+    return this.valpha;
+  },
+  // Rgb
+  red: getset("rgb", 0, maxfn(255)),
+  green: getset("rgb", 1, maxfn(255)),
+  blue: getset("rgb", 2, maxfn(255)),
+  hue: getset(["hsl", "hsv", "hsl", "hwb", "hcg"], 0, (value) => (value % 360 + 360) % 360),
+  saturationl: getset("hsl", 1, maxfn(100)),
+  lightness: getset("hsl", 2, maxfn(100)),
+  saturationv: getset("hsv", 1, maxfn(100)),
+  value: getset("hsv", 2, maxfn(100)),
+  chroma: getset("hcg", 1, maxfn(100)),
+  gray: getset("hcg", 2, maxfn(100)),
+  white: getset("hwb", 1, maxfn(100)),
+  wblack: getset("hwb", 2, maxfn(100)),
+  cyan: getset("cmyk", 0, maxfn(100)),
+  magenta: getset("cmyk", 1, maxfn(100)),
+  yellow: getset("cmyk", 2, maxfn(100)),
+  black: getset("cmyk", 3, maxfn(100)),
+  x: getset("xyz", 0, maxfn(95.047)),
+  y: getset("xyz", 1, maxfn(100)),
+  z: getset("xyz", 2, maxfn(108.833)),
+  l: getset("lab", 0, maxfn(100)),
+  a: getset("lab", 1),
+  b: getset("lab", 2),
+  keyword(value) {
+    if (value !== void 0) {
+      return new Color2(value);
+    }
+    return color_convert_default[this.model].keyword(this.color);
+  },
+  hex(value) {
+    if (value !== void 0) {
+      return new Color2(value);
+    }
+    return color_string_default.to.hex(...this.rgb().round().color);
+  },
+  hexa(value) {
+    if (value !== void 0) {
+      return new Color2(value);
+    }
+    const rgbArray = this.rgb().round().color;
+    let alphaHex = Math.round(this.valpha * 255).toString(16).toUpperCase();
+    if (alphaHex.length === 1) {
+      alphaHex = "0" + alphaHex;
+    }
+    return color_string_default.to.hex(...rgbArray) + alphaHex;
+  },
+  rgbNumber() {
+    const rgb = this.rgb().color;
+    return (rgb[0] & 255) << 16 | (rgb[1] & 255) << 8 | rgb[2] & 255;
+  },
+  luminosity() {
+    const rgb = this.rgb().color;
+    const lum = [];
+    for (const [i, element] of rgb.entries()) {
+      const chan = element / 255;
+      lum[i] = chan <= 0.04045 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+    }
+    return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+  },
+  contrast(color2) {
+    const lum1 = this.luminosity();
+    const lum2 = color2.luminosity();
+    if (lum1 > lum2) {
+      return (lum1 + 0.05) / (lum2 + 0.05);
+    }
+    return (lum2 + 0.05) / (lum1 + 0.05);
+  },
+  level(color2) {
+    const contrastRatio = this.contrast(color2);
+    if (contrastRatio >= 7) {
+      return "AAA";
+    }
+    return contrastRatio >= 4.5 ? "AA" : "";
+  },
+  isDark() {
+    const rgb = this.rgb().color;
+    const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 1e4;
+    return yiq < 128;
+  },
+  isLight() {
+    return !this.isDark();
+  },
+  negate() {
+    const rgb = this.rgb();
+    for (let i = 0; i < 3; i++) {
+      rgb.color[i] = 255 - rgb.color[i];
+    }
+    return rgb;
+  },
+  lighten(ratio) {
+    const hsl = this.hsl();
+    hsl.color[2] += hsl.color[2] * ratio;
+    return hsl;
+  },
+  darken(ratio) {
+    const hsl = this.hsl();
+    hsl.color[2] -= hsl.color[2] * ratio;
+    return hsl;
+  },
+  saturate(ratio) {
+    const hsl = this.hsl();
+    hsl.color[1] += hsl.color[1] * ratio;
+    return hsl;
+  },
+  desaturate(ratio) {
+    const hsl = this.hsl();
+    hsl.color[1] -= hsl.color[1] * ratio;
+    return hsl;
+  },
+  whiten(ratio) {
+    const hwb = this.hwb();
+    hwb.color[1] += hwb.color[1] * ratio;
+    return hwb;
+  },
+  blacken(ratio) {
+    const hwb = this.hwb();
+    hwb.color[2] += hwb.color[2] * ratio;
+    return hwb;
+  },
+  grayscale() {
+    const rgb = this.rgb().color;
+    const value = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
+    return Color2.rgb(value, value, value);
+  },
+  fade(ratio) {
+    return this.alpha(this.valpha - this.valpha * ratio);
+  },
+  opaquer(ratio) {
+    return this.alpha(this.valpha + this.valpha * ratio);
+  },
+  rotate(degrees) {
+    const hsl = this.hsl();
+    let hue = hsl.color[0];
+    hue = (hue + degrees) % 360;
+    hue = hue < 0 ? 360 + hue : hue;
+    hsl.color[0] = hue;
+    return hsl;
+  },
+  mix(mixinColor, weight) {
+    if (!mixinColor || !mixinColor.rgb) {
+      throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof mixinColor);
+    }
+    const color1 = mixinColor.rgb();
+    const color2 = this.rgb();
+    const p = weight === void 0 ? 0.5 : weight;
+    const w = 2 * p - 1;
+    const a = color1.alpha() - color2.alpha();
+    const w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2;
+    const w2 = 1 - w1;
+    return Color2.rgb(
+      w1 * color1.red() + w2 * color2.red(),
+      w1 * color1.green() + w2 * color2.green(),
+      w1 * color1.blue() + w2 * color2.blue(),
+      color1.alpha() * p + color2.alpha() * (1 - p)
+    );
+  }
+};
+for (const model of Object.keys(color_convert_default)) {
+  if (skippedModels.includes(model)) {
+    continue;
+  }
+  const { channels } = color_convert_default[model];
+  Color2.prototype[model] = function(...arguments_) {
+    if (this.model === model) {
+      return new Color2(this);
+    }
+    if (arguments_.length > 0) {
+      return new Color2(arguments_, model);
+    }
+    return new Color2([...assertArray(color_convert_default[this.model][model].raw(this.color)), this.valpha], model);
+  };
+  Color2[model] = function(...arguments_) {
+    let color = arguments_[0];
+    if (typeof color === "number") {
+      color = zeroArray(arguments_, channels);
+    }
+    return new Color2(color, model);
+  };
+}
+function roundTo(number, places) {
+  return Number(number.toFixed(places));
+}
+function roundToPlace(places) {
+  return function(number) {
+    return roundTo(number, places);
+  };
+}
+function getset(model, channel, modifier) {
+  model = Array.isArray(model) ? model : [model];
+  for (const m of model) {
+    (limiters[m] || (limiters[m] = []))[channel] = modifier;
+  }
+  model = model[0];
+  return function(value) {
+    let result;
+    if (value !== void 0) {
+      if (modifier) {
+        value = modifier(value);
+      }
+      result = this[model]();
+      result.color[channel] = value;
+      return result;
+    }
+    result = this[model]().color[channel];
+    if (modifier) {
+      result = modifier(result);
+    }
+    return result;
+  };
+}
+function maxfn(max) {
+  return function(v) {
+    return Math.max(0, Math.min(max, v));
+  };
+}
+function assertArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function zeroArray(array, length) {
+  for (let i = 0; i < length; i++) {
+    if (typeof array[i] !== "number") {
+      array[i] = 0;
+    }
+  }
+  return array;
+}
+var color_default = Color2;
+
 // src/components/ui/color-picker.tsx
-var import_color = __toESM(require("color"));
 var import_lucide_react48 = require("lucide-react");
 var import_radix_ui = require("radix-ui");
 var import_react56 = require("react");
@@ -19554,8 +21181,8 @@ var ColorPicker = ({
   className,
   ...props
 }) => {
-  const selectedColor = (0, import_color.default)(value);
-  const defaultColor = (0, import_color.default)(defaultValue);
+  const selectedColor = color_default(value);
+  const defaultColor = color_default(defaultValue);
   const [hue, setHue] = (0, import_react56.useState)(selectedColor.hue() || defaultColor.hue() || 0);
   const [saturation, setSaturation] = (0, import_react56.useState)(
     selectedColor.saturationl() || defaultColor.saturationl() || 100
@@ -19575,7 +21202,7 @@ var ColorPicker = ({
   alphaRef.current = alpha2;
   (0, import_react56.useEffect)(() => {
     if (value) {
-      const color = (0, import_color.default)(value);
+      const color = color_default(value);
       const hsl = color.hsl().object();
       setHue(hsl.h);
       setSaturation(hsl.s);
@@ -19609,7 +21236,7 @@ var ColorPicker = ({
       alphaRef.current = updates.a;
     }
     if (onChange) {
-      const color = import_color.default.hsl(newH, newS, newL).alpha(newA / 100);
+      const color = color_default.hsl(newH, newS, newL).alpha(newA / 100);
       const rgba = color.rgb().array();
       onChange([rgba[0], rgba[1], rgba[2], newA / 100]);
     }
@@ -19722,7 +21349,7 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
     try {
       const eyeDropper = new EyeDropper();
       const result = await eyeDropper.open();
-      const color = (0, import_color.default)(result.sRGBHex);
+      const color = color_default(result.sRGBHex);
       const [h, s, l] = color.hsl().array();
       updateColor({ h, s, l, a: 100 });
     } catch (error) {
@@ -19761,7 +21388,7 @@ var PercentageInput = ({ className, ...props }) => {
 };
 var ColorPickerFormat = ({ className, ...props }) => {
   const { hue, saturation, lightness, alpha: alpha2, mode } = useColorPicker();
-  const color = import_color.default.hsl(hue, saturation, lightness, alpha2 / 100);
+  const color = color_default.hsl(hue, saturation, lightness, alpha2 / 100);
   if (mode === "hex") {
     const hex = color.hex();
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
@@ -21271,14 +22898,14 @@ init_configuration();
 var import_react63 = require("react");
 function useEditableValue(options) {
   const { externalValue, onChange, toLocal, toExternal } = options;
-  const convert = toLocal ?? String;
-  const [localValue, setLocalValue] = (0, import_react63.useState)(convert(externalValue));
+  const convert3 = toLocal ?? String;
+  const [localValue, setLocalValue] = (0, import_react63.useState)(convert3(externalValue));
   const [isFocused, setIsFocused] = (0, import_react63.useState)(false);
-  const displayValue = isFocused ? localValue : convert(externalValue);
+  const displayValue = isFocused ? localValue : convert3(externalValue);
   const handleFocus = (0, import_react63.useCallback)(() => {
-    setLocalValue(convert(externalValue));
+    setLocalValue(convert3(externalValue));
     setIsFocused(true);
-  }, [externalValue, convert]);
+  }, [externalValue, convert3]);
   const handleBlur = (0, import_react63.useCallback)(() => {
     setIsFocused(false);
     if (toExternal) {
@@ -27121,10 +28748,11 @@ function TemplatePage({
   onImageUpload,
   onDuplicate,
   onDelete,
+  onTemplateCapture,
   data
 }) {
   (0, import_react97.useState)(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = (0, import_react97.useState)(false);