@kgalexander/mcreate 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -48,6 +48,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  campaign_validation_warnings,
   cn,
   formatBorder,
   getElementDisplayName,
@@ -59,8 +60,10 @@ import {
   parsePrice,
   setupDragImage,
   useEditorStore,
-  useSidebarContext
-} from "./chunk-B46UUREH.mjs";
+  useSidebarContext,
+  validate_campaign_onCreate,
+  validate_editor_onPreview
+} from "./chunk-R3LRNUKL.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -256,19 +259,23 @@ function TemplateHeader() {
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
+      const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==";
       const template = useEditorStore.getState().template;
+      const needsCapture = useEditorStore.getState().hasUnsavedChanges() || !template.image || template.image === PLACEHOLDER_IMAGE;
       let capturedImage;
-      try {
-        const { default: mjml2html } = await import("mjml-browser");
-        const mjmlString = json2mjml(template, "editing");
-        const result = mjml2html(mjmlString);
-        capturedImage = await captureTemplateImage(result.html);
-      } catch (err) {
-        console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+      if (needsCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          capturedImage = await captureTemplateImage(result.html);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
       }
       await onSave(templateId, template, capturedImage);
-      markAsSaved();
       onExit?.();
+      markAsSaved();
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {
@@ -2757,7 +2764,7 @@ function useTemplateColors() {
   return useMemo3(() => getTemplateColors(template), [template]);
 }
 
-// node_modules/color-name/index.js
+// node_modules/color-string/node_modules/color-name/index.js
 var colors = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
@@ -3079,10 +3086,164 @@ function hexDouble(number_) {
 }
 var color_string_default = cs;
 
-// node_modules/color-convert/conversions.js
+// node_modules/color/node_modules/color-name/index.js
+var colors2 = {
+  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 colors2) Object.freeze(colors2[key]);
+var color_name_default2 = Object.freeze(colors2);
+
+// node_modules/color/node_modules/color-convert/conversions.js
 var reverseKeywords = {};
-for (const key of Object.keys(color_name_default)) {
-  reverseKeywords[color_name_default[key]] = key;
+for (const key of Object.keys(color_name_default2)) {
+  reverseKeywords[color_name_default2[key]] = key;
 }
 var convert = {
   rgb: { channels: 3, labels: "rgb" },
@@ -3258,8 +3419,8 @@ convert.rgb.keyword = function(rgb) {
   }
   let currentClosestDistance = Number.POSITIVE_INFINITY;
   let currentClosestKeyword;
-  for (const keyword of Object.keys(color_name_default)) {
-    const value = color_name_default[keyword];
+  for (const keyword of Object.keys(color_name_default2)) {
+    const value = color_name_default2[keyword];
     const distance = comparativeDistance(rgb, value);
     if (distance < currentClosestDistance) {
       currentClosestDistance = distance;
@@ -3269,7 +3430,7 @@ convert.rgb.keyword = function(rgb) {
   return currentClosestKeyword;
 };
 convert.keyword.rgb = function(keyword) {
-  return [...color_name_default[keyword]];
+  return [...color_name_default2[keyword]];
 };
 convert.rgb.xyz = function(rgb) {
   const r = srgbNonlinearTransformInv(rgb[0] / 255);
@@ -3827,7 +3988,7 @@ convert.rgb.gray = function(rgb) {
   return [value / 255 * 100];
 };
 
-// node_modules/color-convert/route.js
+// node_modules/color/node_modules/color-convert/route.js
 function buildGraph() {
   const graph = {};
   const models2 = Object.keys(conversions_default);
@@ -3893,7 +4054,7 @@ function route(fromModel) {
 }
 var route_default = route;
 
-// node_modules/color-convert/index.js
+// node_modules/color/node_modules/color-convert/index.js
 var convert2 = {};
 var models = Object.keys(conversions_default);
 function wrapRaw(fn) {
@@ -4536,7 +4697,7 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
   return /* @__PURE__ */ jsx25(
     Button,
     {
-      className: cn("shrink-0 text-muted-foreground", className),
+      className: cn("shrink-0 text-muted-foreground shadow-none", className),
       onClick: handleEyeDropper,
       size: "icon",
       type: "button",
@@ -4568,26 +4729,23 @@ var ColorPickerFormat = ({ className, ...props }) => {
   const color = color_default.hsl(hue, saturation, lightness, alpha / 100);
   if (mode === "hex") {
     const hex = color.hex();
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx25(
       "div",
       {
         className: cn(
-          "-space-x-px relative flex w-full items-center rounded-md shadow-sm",
+          "-space-x-px relative flex w-full items-center rounded-[12px] shadow-none",
           className
         ),
         ...props,
-        children: [
-          /* @__PURE__ */ jsx25(
-            Input,
-            {
-              className: "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
-              readOnly: true,
-              type: "text",
-              value: hex
-            }
-          ),
-          /* @__PURE__ */ jsx25(PercentageInput, { value: alpha })
-        ]
+        children: /* @__PURE__ */ jsx25(
+          Input,
+          {
+            className: "h-[32px] py-0 pr-10 bg-accent dark:bg-accent border-border placeholder:text-muted-foreground rounded-[12px] shadow-none w-full",
+            readOnly: true,
+            type: "text",
+            value: hex
+          }
+        )
       }
     );
   }
@@ -4723,7 +4881,8 @@ var TRANSPARENT_ALLOWED_ELEMENTS = [
   "socialBgColor",
   "buttonBgColor",
   "highlightColor",
-  "propertyBgColor"
+  "propertyBgColor",
+  "dividerBgColor"
 ];
 var rgbToHex2 = (rgb) => {
   const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i);
@@ -4815,14 +4974,11 @@ function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "C
       ] }) })
     ] }),
     colorPalettes.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "w-full mb-4", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex flex-row items-center gap-2 h-[44px]", children: [
-          /* @__PURE__ */ jsx26(Hexagon, { className: "w-4 h-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium", children: "Brand colors" })
-        ] }),
-        /* @__PURE__ */ jsx26(Button, { variant: "link", className: "text-sm pr-0 cursor-pointer", children: "Edit" })
-      ] }),
-      /* @__PURE__ */ jsx26("div", { className: "w-full flex flex-col gap-4", children: colorPalettes.map((palette) => /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx26("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-row items-center gap-2 h-[44px]", children: [
+        /* @__PURE__ */ jsx26(Hexagon, { className: "w-4 h-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium", children: "Brand colors" })
+      ] }) }),
+      /* @__PURE__ */ jsx26("div", { className: "w-full flex flex-col gap-4", children: colorPalettes.map((palette) => palette.colors.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx26(Label, { className: "text-xs font-medium text-muted-foreground", children: palette.name }),
         /* @__PURE__ */ jsx26("div", { className: "w-full grid grid-cols-7 gap-2", children: palette.colors.map((c) => /* @__PURE__ */ jsx26(ColorButton, { colorName: c.name, color: c.hex, onColorSelect, currentColor }, c.color_id)) })
       ] }, palette.palette_id)) })
@@ -5884,7 +6040,7 @@ function ParentBreadcrumb() {
     /* @__PURE__ */ jsx31(BreadcrumbItem, { children: /* @__PURE__ */ jsxs29(Tooltip, { children: [
       /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
         /* @__PURE__ */ jsx31(Button, { variant: "ghost", disabled: true, className: "p-0 px-1.5 shadow-none transition-none cursor-pointer", children: currentName }),
-        /* @__PURE__ */ jsx31("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-white pointer-events-none" })
+        /* @__PURE__ */ jsx31("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-background pointer-events-none" })
       ] }) }),
       /* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", className: "z-51", children: currentName })
     ] }) })
@@ -6475,7 +6631,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-r-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-r-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Decrease Font Size",
           onClick: handleDecrease,
@@ -6491,7 +6647,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
           InputGroupInput,
           {
             type: "number",
-            className: "text-center w-12 border-0 shadow-none px-0",
+            className: "text-center w-12 border-0 shadow-none px-0 bg-background",
             placeholder: "--",
             value: input.displayValue,
             onChange: (e) => input.setLocalValue(e.target.value),
@@ -6535,7 +6691,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-l-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-l-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Increase Font Size",
           onClick: handleIncrease,
@@ -7231,6 +7387,15 @@ var parseFontSize = (value) => {
 // src/core/editor/components/element-gear/text/toolbar.tsx
 import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var ALIGNMENTS = ["left", "center", "right", "justify"];
+var TEXT_TYPE_TO_BRAND_FONT = {
+  h1: "heading",
+  h2: "subheading",
+  h3: "subheading",
+  paragraph: "body",
+  list: "body",
+  "numbered-list": "body",
+  ordered: "body"
+};
 var HEADING_MULTIPLIERS = {
   paragraph: 1,
   h1: 2,
@@ -7250,7 +7415,16 @@ var TextToolbar = () => {
   const textEditingStyles = useEditorStore((s) => s.textEditing?.styles);
   const template = useEditorStore((s) => s.template);
   const mergeFields = useEditorStore((s) => s.mergeFields);
+  const userData = useEditorStore((s) => s.userData);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
+  const brandFonts = useMemo14(() => {
+    const fonts = userData?.brand_kits?.[0]?.fonts ?? [];
+    const map = {};
+    for (const f of fonts) {
+      map[f.type] = f;
+    }
+    return map;
+  }, [userData]);
   const [updateCounter, forceUpdate] = useState17(0);
   const [overflowOpen, setOverflowOpen] = useState17(false);
   const isInSectionColumn = useMemo14(() => {
@@ -7374,8 +7548,28 @@ var TextToolbar = () => {
     };
     const level = levelMap[type];
     tiptapEditor.chain().focus().setHeadingLevel(level).run();
+    const brandFontType = TEXT_TYPE_TO_BRAND_FONT[type];
+    const brandFont = brandFontType ? brandFonts[brandFontType] : null;
+    if (brandFont) {
+      const { from, to } = tiptapEditor.state.selection;
+      const $from = tiptapEditor.state.doc.resolve(from);
+      const paragraphStart = $from.start($from.depth);
+      const paragraphEnd = $from.end($from.depth);
+      let chain = tiptapEditor.chain().setTextSelection({ from: paragraphStart, to: paragraphEnd }).setFontFamily(brandFont.family).setFontSize(`${brandFont.size}px`);
+      if (level > 0 && !brandFont.isBold) {
+        chain = chain.unsetMark("bold");
+      } else if (level === 0 && brandFont.isBold) {
+        chain = chain.setMark("bold");
+      }
+      if (brandFont.isItalic) {
+        chain = chain.setMark("italic");
+      } else {
+        chain = chain.unsetMark("italic");
+      }
+      chain.setTextSelection({ from, to }).focus().run();
+    }
     forceUpdate((n) => n + 1);
-  }, [tiptapEditor]);
+  }, [tiptapEditor, brandFonts]);
   const handleDelete = () => {
     if (focusIdx) {
       deleteElement(focusIdx);
@@ -8543,7 +8737,7 @@ var ButtonToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleButtonAlign,
-          children: /* @__PURE__ */ jsx52("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx52("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx52(TooltipContent, { side: "bottom", children: "Align" })
@@ -9741,14 +9935,10 @@ var SocialToolbar = () => {
             className: "shadow-none transition-none cursor-pointer",
             size: "icon",
             onClick: handleCycleAlign,
-            children: /* @__PURE__ */ jsx61("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx61("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
           }
         ) }),
-        /* @__PURE__ */ jsxs50(TooltipContent, { side: "bottom", className: "z-51", children: [
-          "Align (",
-          currentAlign,
-          ")"
-        ] })
+        /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
       ] })
     ] })
   ] });
@@ -10318,7 +10508,7 @@ var DividerToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx64("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx64("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
@@ -10431,7 +10621,7 @@ var ImageToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx65("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx65("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx65(TooltipContent, { side: "bottom", children: "Align" })
@@ -11708,7 +11898,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-FWDS3AQF.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-HIQH4BAG.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -11791,5 +11981,8 @@ export {
   Editor,
   MAX_TEMPLATE_SIZE,
   TemplatePage,
-  json2mjml
+  campaign_validation_warnings,
+  json2mjml,
+  validate_campaign_onCreate,
+  validate_editor_onPreview
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kgalexander/mcreate",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Maillow email template editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",