@chaibuilder/sdk 2.4.3 → 2.4.4

package/dist/CssImportModal-CUuK4FZH.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),V=require("react"),l=require("./toggle-D0REpYUl.cjs"),T=require("culori"),w=require("@chaibuilder/runtime"),R=require("react-i18next");function k(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const x=k(V),y=k(T),d=e=>e?e%1===0?e:e.toFixed(4):"0",N=e=>`hsl(${d(e.h)} ${d(e.s*100)}% ${d(e.l*100)}%)`,E=(e,o="hsl",t="4")=>{try{const r=y.parse(e);if(!r)throw new Error("Invalid color input");switch(o){case"hsl":{const s=y.converter("hsl")(r);return t==="4"?N(s):`${d(s.h)} ${d(s.s*100)}% ${d(s.l*100)}%`}case"rgb":return y.formatRgb(r);case"oklch":{const s=y.converter("oklch")(r);return`oklch(${d(s.l)} ${d(s.c)} ${d(s.h)})`}case"hex":return y.formatHex(r);default:return e}}catch(r){return console.error(`Failed to convert color: ${e}`,r),e}},b=e=>E(e,"hex"),I=e=>{const o={fontFamily:{heading:"",body:""},borderRadius:"",colors:{}};try{const t=j(e);if(!t.isValid)return console.warn("CSS validation failed:",t.error),$();const r=C(e,":root"),s=C(e,".dark"),i=m(r,"--font-sans")||m(r,"--font-family")||m(r,"--font-heading")||m(r,"--font-body"),n=D(i);o.fontFamily={heading:n,body:n};const u=m(r,"--radius")||m(r,"--border-radius")||"0.5rem";o.borderRadius=P(u),["background","foreground","primary","primary-foreground","secondary","secondary-foreground","muted","muted-foreground","accent","accent-foreground","destructive","destructive-foreground","border","input","ring","card","card-foreground","popover","popover-foreground"].forEach(c=>{const p=m(r,`--${c}`),g=m(s,`--${c}`);if(p||g){const f=p?v(p):"#000000",S=g?v(g):f;o.colors[c]=[f,S]}})}catch(t){return console.error("Error parsing CSS to ChaiThemeValues:",t),$()}return o},C=(e,o)=>{var r,s;const t=new RegExp(`${F(o)}\\s*{([^}]+)}`);return((s=(r=e.match(t))==null?void 0:r[1])==null?void 0:s.trim())||null},m=(e,o)=>{var s;if(!e)return null;const t=new RegExp(`${F(o)}\\s*:\\s*([^;]+)`),r=e.match(t);return((s=r==null?void 0:r[1])==null?void 0:s.trim())||null},v=e=>{if(!e||typeof e!="string")return"#000000";try{const o=e.replace(/var\([^)]+\)/g,"").trim();if(!o)return"#000000";if(/^[a-z]+$/i.test(o))return b(o)||"#000000";if(/^#?([0-9A-F]{3,4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(o.replace(/#/g,""))){const r=o.startsWith("#")?o:`#${o}`;return r.length<=5?`#${r.slice(1).split("").map(s=>s+s).join("")}`.slice(0,7):r.length>7?r.slice(0,7):r}if(/^(rgb|hsl|oklch)a?\(/i.test(o))return b(o)||"#000000";const t=o.match(/^(\d+\.?\d*)\s+(\d+\.?\d*)%\s+(\d+\.?\d*)%$/);if(t){const[r,s,i,n]=t,u=`hsl(${s} ${i}% ${n}%)`;return b(u)||"#000000"}if(/^[\d.]+[\s,]+[\d.]+[\s,]+[\d.]+(?:[\s,/]+[\d.]+)?$/.test(o)){const r=o.split(/[\s,]+/).filter(Boolean);if(r.length>=3){const i=r.some(n=>n.includes("%"))?`hsl(${r[0]} ${r[1]} ${r[2]})`:`rgb(${r[0]}, ${r[1]}, ${r[2]})`;return b(i)||"#000000"}}return b(o)||"#000000"}catch(o){return console.warn("Failed to process color:",e,o),"#000000"}},D=e=>{const o=w.getAllRegisteredFonts();if(!e)return"ui-sans-serif, system-ui, sans-serif";try{const r=e.replace(/["']/g,"").trim().split(",")[0].trim(),s=o.find(i=>i.family.toLowerCase()===r.toLowerCase());return(s==null?void 0:s.family)||"ui-sans-serif, system-ui, sans-serif"}catch(t){return console.warn("Error processing font family:",e,t),"ui-sans-serif, system-ui, sans-serif"}},P=e=>{if(!e)return"8px";try{const o=e.trim();if(o.endsWith("px"))return o;if(o.endsWith("rem")){const r=parseFloat(o.replace("rem",""));if(!isNaN(r))return`${Math.round(r*16)}px`}if(o.endsWith("em")){const r=parseFloat(o.replace("em",""));if(!isNaN(r))return`${Math.round(r*16)}px`}const t=parseFloat(o);return isNaN(t)?"8px":`${Math.round(t)}px`}catch(o){return console.warn("Error converting border radius to px:",e,o),"8px"}},$=()=>({fontFamily:{heading:"ui-sans-serif, system-ui, sans-serif",body:"ui-sans-serif, system-ui, sans-serif"},borderRadius:"8px",colors:{background:["#ffffff","#000000"],foreground:["#000000","#ffffff"],primary:["#3b82f6","#60a5fa"],"primary-foreground":["#ffffff","#1e293b"],secondary:["#f1f5f9","#334155"],"secondary-foreground":["#0f172a","#f8fafc"],muted:["#f8fafc","#1e293b"],"muted-foreground":["#64748b","#94a3b8"],accent:["#f1f5f9","#334155"],"accent-foreground":["#0f172a","#f8fafc"],destructive:["#ef4444","#f87171"],"destructive-foreground":["#ffffff","#1e293b"],border:["#e2e8f0","#475569"],input:["#e2e8f0","#475569"],ring:["#3b82f6","#60a5fa"],card:["#ffffff","#0f172a"],"card-foreground":["#000000","#f8fafc"],popover:["#ffffff","#0f172a"],"popover-foreground":["#000000","#f8fafc"]}}),F=e=>e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),q=e=>["background","foreground","primary","primary-foreground"].every(r=>e.colors[r]&&Array.isArray(e.colors[r])&&e.colors[r].length>=2)&&!!e.fontFamily.heading&&!!e.fontFamily.body&&!!e.borderRadius,j=e=>{if(!e||typeof e!="string")return{isValid:!1,error:"Please enter valid CSS content"};const o=e.trim();if(!o)return{isValid:!1,error:"Please enter CSS content"};try{if(!o.includes("{")||!o.includes("}"))return{isValid:!1,error:"Invalid CSS format. CSS should contain proper block structure with { }"};const t=(o.match(/{/g)||[]).length,r=(o.match(/}/g)||[]).length;return t!==r?{isValid:!1,error:"Invalid CSS format. Unmatched braces detected"}:!o.includes("--")||!o.includes(":")?{isValid:!1,error:"Invalid CSS format. CSS should contain variable definitions like --primary: #color"}:!o.includes(":root")&&!o.includes(".dark")?{isValid:!1,error:"CSS should contain at least :root or .dark selector with theme variables"}:{isValid:!0}}catch(t){return console.error("CSS validation error:",t),{isValid:!1,error:"Failed to parse CSS. Please check your syntax."}}},M=`:root {
+  --background: 0 0% 100%;
+  --foreground: oklch(0.52 0.13 144.17);
+  --primary: #3e2723;
+  --primary-foreground: #ffffff;
+  }
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: hsl(37.50 36.36% 95.69%);
+  --primary: rgb(46, 125, 50);
+  --primary-foreground: #ffffff;
+}`,A=({open:e,onOpenChange:o,onImport:t})=>{const[r,s]=x.useState(""),[i,n]=x.useState(null),[u,h]=x.useState(!1),{t:c}=R.useTranslation(),p=async()=>{h(!0),n(null);try{const f=j(r);if(!f.isValid){n(f.error||"Invalid CSS format"),setTimeout(()=>{n(null)},5e3),h(!1);return}const S=I(r);if(!q(S)){n("The CSS doesn't contain enough theme information. Please ensure it includes at least background, foreground, primary, and primary-foreground colors."),setTimeout(()=>{n(null)},5e3),h(!1);return}t(S),s(""),n(null),o(!1)}catch(f){console.error("Error importing CSS:",f),n("Failed to parse CSS. Please check your syntax and try again."),setTimeout(()=>{n(null)},5e3)}finally{h(!1)}},g=()=>{s(""),n(null),o(!1)};return a.jsx(l.Dialog,{open:e,onOpenChange:o,children:a.jsxs(l.DialogContent,{className:"max-w-2xl max-h-[80vh] flex flex-col",children:[a.jsxs(l.DialogHeader,{children:[a.jsx(l.DialogTitle,{children:c("Import CSS Theme")}),a.jsx(l.DialogDescription,{children:c("Paste your CSS variables to import a custom theme. The CSS should contain :root and .dark blocks with CSS custom properties.")})]}),a.jsxs("div",{className:"flex-1 space-y-4 overflow-hidden",children:[a.jsxs("div",{className:"space-y-2",children:[a.jsx(l.Label,{htmlFor:"css-input",children:c("CSS Variables")}),a.jsx(l.Textarea,{id:"css-input",placeholder:M,value:r,onChange:f=>s(f.target.value),className:"min-h-[300px] font-mono text-sm resize-none",disabled:u})]}),i&&a.jsx("div",{className:"rounded-md border border-red-200 bg-red-50 p-3",children:a.jsx("p",{className:"text-sm text-red-600",children:i})})]}),a.jsxs(l.DialogFooter,{className:"gap-2",children:[a.jsx(l.Button,{variant:"outline",onClick:g,disabled:u,children:c("Cancel")}),a.jsx(l.Button,{onClick:p,disabled:!r.trim()||u,children:c(u?"Importing...":"Import Theme")})]})]})})};exports.CssImportModal=A;

package/dist/CssImportModal-DXUM3oRB.js

@@ -0,0 +1,296 @@
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import * as C from "react";
+import { a1 as T, a3 as w, a6 as R, a9 as E, a4 as N, au as I, b1 as D, a5 as A, v as x } from "./toggle-BKtuoy5e.js";
+import * as y from "culori";
+import { getAllRegisteredFonts as P } from "@chaibuilder/runtime";
+import { useTranslation as H } from "react-i18next";
+const f = (o) => o ? o % 1 === 0 ? o : o.toFixed(4) : "0", L = (o) => `hsl(${f(o.h)} ${f(o.s * 100)}% ${f(o.l * 100)}%)`, M = (o, e = "hsl", s = "4") => {
+  try {
+    const r = y.parse(o);
+    if (!r) throw new Error("Invalid color input");
+    switch (e) {
+      case "hsl": {
+        const t = y.converter("hsl")(r);
+        return s === "4" ? L(t) : `${f(t.h)} ${f(t.s * 100)}% ${f(t.l * 100)}%`;
+      }
+      case "rgb":
+        return y.formatRgb(r);
+      case "oklch": {
+        const t = y.converter("oklch")(r);
+        return `oklch(${f(t.l)} ${f(t.c)} ${f(t.h)})`;
+      }
+      case "hex":
+        return y.formatHex(r);
+      default:
+        return o;
+    }
+  } catch (r) {
+    return console.error(`Failed to convert color: ${o}`, r), o;
+  }
+}, S = (o) => M(o, "hex"), B = (o) => {
+  const e = {
+    fontFamily: {
+      heading: "",
+      body: ""
+    },
+    borderRadius: "",
+    colors: {}
+  };
+  try {
+    const s = V(o);
+    if (!s.isValid)
+      return console.warn("CSS validation failed:", s.error), F();
+    const r = v(o, ":root"), t = v(o, ".dark"), a = u(r, "--font-sans") || u(r, "--font-family") || u(r, "--font-heading") || u(r, "--font-body"), n = q(a);
+    e.fontFamily = {
+      heading: n,
+      body: n
+    };
+    const d = u(r, "--radius") || u(r, "--border-radius") || "0.5rem";
+    e.borderRadius = W(d), [
+      "background",
+      "foreground",
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "muted",
+      "muted-foreground",
+      "accent",
+      "accent-foreground",
+      "destructive",
+      "destructive-foreground",
+      "border",
+      "input",
+      "ring",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground"
+    ].forEach((i) => {
+      const h = u(r, `--${i}`), p = u(t, `--${i}`);
+      if (h || p) {
+        const l = h ? $(h) : "#000000", b = p ? $(p) : l;
+        e.colors[i] = [l, b];
+      }
+    });
+  } catch (s) {
+    return console.error("Error parsing CSS to ChaiThemeValues:", s), F();
+  }
+  return e;
+}, v = (o, e) => {
+  var r, t;
+  const s = new RegExp(`${k(e)}\\s*{([^}]+)}`);
+  return ((t = (r = o.match(s)) == null ? void 0 : r[1]) == null ? void 0 : t.trim()) || null;
+}, u = (o, e) => {
+  var t;
+  if (!o) return null;
+  const s = new RegExp(`${k(e)}\\s*:\\s*([^;]+)`), r = o.match(s);
+  return ((t = r == null ? void 0 : r[1]) == null ? void 0 : t.trim()) || null;
+}, $ = (o) => {
+  if (!o || typeof o != "string")
+    return "#000000";
+  try {
+    const e = o.replace(/var\([^)]+\)/g, "").trim();
+    if (!e) return "#000000";
+    if (/^[a-z]+$/i.test(e))
+      return S(e) || "#000000";
+    if (/^#?([0-9A-F]{3,4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(e.replace(/#/g, ""))) {
+      const r = e.startsWith("#") ? e : `#${e}`;
+      return r.length <= 5 ? `#${r.slice(1).split("").map((t) => t + t).join("")}`.slice(0, 7) : r.length > 7 ? r.slice(0, 7) : r;
+    }
+    if (/^(rgb|hsl|oklch)a?\(/i.test(e))
+      return S(e) || "#000000";
+    const s = e.match(/^(\d+\.?\d*)\s+(\d+\.?\d*)%\s+(\d+\.?\d*)%$/);
+    if (s) {
+      const [r, t, a, n] = s, d = `hsl(${t} ${a}% ${n}%)`;
+      return S(d) || "#000000";
+    }
+    if (/^[\d.]+[\s,]+[\d.]+[\s,]+[\d.]+(?:[\s,/]+[\d.]+)?$/.test(e)) {
+      const r = e.split(/[\s,]+/).filter(Boolean);
+      if (r.length >= 3) {
+        const a = r.some((n) => n.includes("%")) ? `hsl(${r[0]} ${r[1]} ${r[2]})` : `rgb(${r[0]}, ${r[1]}, ${r[2]})`;
+        return S(a) || "#000000";
+      }
+    }
+    return S(e) || "#000000";
+  } catch (e) {
+    return console.warn("Failed to process color:", o, e), "#000000";
+  }
+}, q = (o) => {
+  const e = P();
+  if (!o)
+    return "ui-sans-serif, system-ui, sans-serif";
+  try {
+    const r = o.replace(/["']/g, "").trim().split(",")[0].trim(), t = e.find((a) => a.family.toLowerCase() === r.toLowerCase());
+    return (t == null ? void 0 : t.family) || "ui-sans-serif, system-ui, sans-serif";
+  } catch (s) {
+    return console.warn("Error processing font family:", o, s), "ui-sans-serif, system-ui, sans-serif";
+  }
+}, W = (o) => {
+  if (!o)
+    return "8px";
+  try {
+    const e = o.trim();
+    if (e.endsWith("px"))
+      return e;
+    if (e.endsWith("rem")) {
+      const r = parseFloat(e.replace("rem", ""));
+      if (!isNaN(r))
+        return `${Math.round(r * 16)}px`;
+    }
+    if (e.endsWith("em")) {
+      const r = parseFloat(e.replace("em", ""));
+      if (!isNaN(r))
+        return `${Math.round(r * 16)}px`;
+    }
+    const s = parseFloat(e);
+    return isNaN(s) ? "8px" : `${Math.round(s)}px`;
+  } catch (e) {
+    return console.warn("Error converting border radius to px:", o, e), "8px";
+  }
+}, F = () => ({
+  fontFamily: {
+    heading: "ui-sans-serif, system-ui, sans-serif",
+    body: "ui-sans-serif, system-ui, sans-serif"
+  },
+  borderRadius: "8px",
+  colors: {
+    background: ["#ffffff", "#000000"],
+    foreground: ["#000000", "#ffffff"],
+    primary: ["#3b82f6", "#60a5fa"],
+    "primary-foreground": ["#ffffff", "#1e293b"],
+    secondary: ["#f1f5f9", "#334155"],
+    "secondary-foreground": ["#0f172a", "#f8fafc"],
+    muted: ["#f8fafc", "#1e293b"],
+    "muted-foreground": ["#64748b", "#94a3b8"],
+    accent: ["#f1f5f9", "#334155"],
+    "accent-foreground": ["#0f172a", "#f8fafc"],
+    destructive: ["#ef4444", "#f87171"],
+    "destructive-foreground": ["#ffffff", "#1e293b"],
+    border: ["#e2e8f0", "#475569"],
+    input: ["#e2e8f0", "#475569"],
+    ring: ["#3b82f6", "#60a5fa"],
+    card: ["#ffffff", "#0f172a"],
+    "card-foreground": ["#000000", "#f8fafc"],
+    popover: ["#ffffff", "#0f172a"],
+    "popover-foreground": ["#000000", "#f8fafc"]
+  }
+}), k = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), j = (o) => ["background", "foreground", "primary", "primary-foreground"].every(
+  (r) => o.colors[r] && Array.isArray(o.colors[r]) && o.colors[r].length >= 2
+) && !!o.fontFamily.heading && !!o.fontFamily.body && !!o.borderRadius, V = (o) => {
+  if (!o || typeof o != "string")
+    return { isValid: !1, error: "Please enter valid CSS content" };
+  const e = o.trim();
+  if (!e)
+    return { isValid: !1, error: "Please enter CSS content" };
+  try {
+    if (!e.includes("{") || !e.includes("}"))
+      return {
+        isValid: !1,
+        error: "Invalid CSS format. CSS should contain proper block structure with { }"
+      };
+    const s = (e.match(/{/g) || []).length, r = (e.match(/}/g) || []).length;
+    return s !== r ? {
+      isValid: !1,
+      error: "Invalid CSS format. Unmatched braces detected"
+    } : !e.includes("--") || !e.includes(":") ? {
+      isValid: !1,
+      error: "Invalid CSS format. CSS should contain variable definitions like --primary: #color"
+    } : !e.includes(":root") && !e.includes(".dark") ? {
+      isValid: !1,
+      error: "CSS should contain at least :root or .dark selector with theme variables"
+    } : { isValid: !0 };
+  } catch (s) {
+    return console.error("CSS validation error:", s), { isValid: !1, error: "Failed to parse CSS. Please check your syntax." };
+  }
+}, z = `:root {
+  --background: 0 0% 100%;
+  --foreground: oklch(0.52 0.13 144.17);
+  --primary: #3e2723;
+  --primary-foreground: #ffffff;
+  }
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: hsl(37.50 36.36% 95.69%);
+  --primary: rgb(46, 125, 50);
+  --primary-foreground: #ffffff;
+}`, J = ({
+  open: o,
+  onOpenChange: e,
+  onImport: s
+}) => {
+  const [r, t] = C.useState(""), [a, n] = C.useState(null), [d, m] = C.useState(!1), { t: i } = H(), h = async () => {
+    m(!0), n(null);
+    try {
+      const l = V(r);
+      if (!l.isValid) {
+        n(l.error || "Invalid CSS format"), setTimeout(() => {
+          n(null);
+        }, 5e3), m(!1);
+        return;
+      }
+      const b = B(r);
+      if (!j(b)) {
+        n("The CSS doesn't contain enough theme information. Please ensure it includes at least background, foreground, primary, and primary-foreground colors."), setTimeout(() => {
+          n(null);
+        }, 5e3), m(!1);
+        return;
+      }
+      s(b), t(""), n(null), e(!1);
+    } catch (l) {
+      console.error("Error importing CSS:", l), n("Failed to parse CSS. Please check your syntax and try again."), setTimeout(() => {
+        n(null);
+      }, 5e3);
+    } finally {
+      m(!1);
+    }
+  }, p = () => {
+    t(""), n(null), e(!1);
+  };
+  return /* @__PURE__ */ c(T, { open: o, onOpenChange: e, children: /* @__PURE__ */ g(w, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ c(E, { children: i("Import CSS Theme") }),
+      /* @__PURE__ */ c(N, { children: i("Paste your CSS variables to import a custom theme. The CSS should contain :root and .dark blocks with CSS custom properties.") })
+    ] }),
+    /* @__PURE__ */ g("div", { className: "flex-1 space-y-4 overflow-hidden", children: [
+      /* @__PURE__ */ g("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ c(I, { htmlFor: "css-input", children: i("CSS Variables") }),
+        /* @__PURE__ */ c(
+          D,
+          {
+            id: "css-input",
+            placeholder: z,
+            value: r,
+            onChange: (l) => t(l.target.value),
+            className: "min-h-[300px] font-mono text-sm resize-none",
+            disabled: d
+          }
+        )
+      ] }),
+      a && /* @__PURE__ */ c("div", { className: "rounded-md border border-red-200 bg-red-50 p-3", children: /* @__PURE__ */ c("p", { className: "text-sm text-red-600", children: a }) })
+    ] }),
+    /* @__PURE__ */ g(A, { className: "gap-2", children: [
+      /* @__PURE__ */ c(
+        x,
+        {
+          variant: "outline",
+          onClick: p,
+          disabled: d,
+          children: i("Cancel")
+        }
+      ),
+      /* @__PURE__ */ c(
+        x,
+        {
+          onClick: h,
+          disabled: !r.trim() || d,
+          children: i(d ? "Importing..." : "Import Theme")
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  J as CssImportModal
+};