@chaibuilder/sdk 4.0.0-beta.4 → 4.0.0-beta.40

package/dist/manage-design-tokens-CHpHE-dx.js

@@ -0,0 +1,446 @@
+import { jsxs as a, Fragment as A, jsx as e } from "react/jsx-runtime";
+import { Z as he, _ as fe, $ as pe, a0 as K, a1 as ge, a2 as xe, a3 as ve, a4 as ke, a5 as Ne, a6 as be, a7 as Te, p as ye, a8 as Ce, a9 as we, aa as Ae } from "./index-DpeytsiB.js";
+import { z as X, B as v } from "./register-chai-top-bar-D6GjnauV.js";
+import { D as De } from "./STRINGS-BExFecZW.js";
+import { MagnifyingGlassIcon as q, PlusIcon as J, TokensIcon as je, ArrowLeftIcon as Oe, EyeOpenIcon as Y, Pencil1Icon as Se } from "@radix-ui/react-icons";
+import { useAtom as Ee } from "jotai";
+import { nanoid as Ie } from "nanoid";
+import { useState as x, useRef as U, useCallback as F, useMemo as Pe, useEffect as ee, Suspense as ze, lazy as Re } from "react";
+import { useTranslation as Le } from "react-i18next";
+import { toast as p } from "sonner";
+import { twMerge as Me } from "tailwind-merge";
+const W = (o) => {
+  const m = o.trim();
+  return m.length === 0 || m.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(m);
+}, $e = (o, m, n, i = !1, u) => {
+  const h = o.trim();
+  return h.length === 0 ? "" : h.length > 25 ? n("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(h) ? Object.entries(m).find(
+    ([k, C]) => C.name === h && (!i || k !== u)
+  ) ? n("Token name already exists") : "" : n("Only alphanumeric characters and hyphens allowed");
+}, Be = (o) => o.replace(/\s+/g, "-"), Fe = Re(() => import("./design-token-usage-11kPk5n1.js")), te = ({
+  tokenId: o,
+  token: m,
+  isDisabled: n,
+  isSelected: i,
+  isArchived: u = !1,
+  onSelect: h,
+  onEdit: y,
+  onUnarchive: N
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    onClick: () => h(o),
+    className: `group relative flex cursor-pointer items-center justify-between overflow-hidden rounded border p-2 transition-all duration-150 ${u ? "border-muted bg-muted/30 opacity-60" : i ? "border-primary bg-primary/10" : "hover:bg-muted/90"}`,
+    children: [
+      /* @__PURE__ */ a("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ e("div", { className: `text-xs font-semibold ${u ? "text-muted-foreground" : ""}`, children: m.name }),
+        /* @__PURE__ */ e("div", { className: `w-full max-w-52 truncate text-[10px] font-light ${u ? "text-muted-foreground" : ""}`, children: m.value })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "absolute right-1 top-1 flex flex-shrink-0 items-center opacity-0 transition-opacity duration-150 group-hover:opacity-100", children: [
+        !u && /* @__PURE__ */ a(A, { children: [
+          /* @__PURE__ */ e(ze, { fallback: null, children: /* @__PURE__ */ e(Fe, { tokenId: o, tokenName: m.name, children: /* @__PURE__ */ e(
+            v,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",
+              children: /* @__PURE__ */ e(Y, { className: "h-3 w-3" })
+            }
+          ) }) }),
+          /* @__PURE__ */ e(
+            v,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: (k) => {
+                k.stopPropagation(), y(o);
+              },
+              disabled: n,
+              className: "h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",
+              children: /* @__PURE__ */ e(Se, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        u && /* @__PURE__ */ e(
+          v,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: (k) => {
+              k.stopPropagation(), N == null || N(o);
+            },
+            disabled: n,
+            className: "h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",
+            children: /* @__PURE__ */ e(Y, { className: "h-3 w-3" })
+          }
+        )
+      ] })
+    ]
+  }
+), tt = ({ onActiveTokenChange: o, onDirtyStateChange: m }) => {
+  const { t: n } = Le(), [i, u] = Ee(he), h = fe(), { saveDesignTokens: y, debouncedSaveDesignTokens: N } = pe(), k = K("pageId", ""), C = K("siteWideUsage", {}), [f, z] = x("view"), [g, R] = x(null), [b, Z] = x(null), [l, D] = x(""), [c, j] = x(""), [O, S] = x(""), [E, ne] = x(""), [se, L] = x(!1), M = U(null), [I, $] = x({
+    isOpen: !1,
+    tokenId: null,
+    tokenName: "",
+    pageCount: 0,
+    partialCount: 0
+  }), P = U(null), re = F(
+    (t) => {
+      if (!C) return { pageCount: 0, partialCount: 0 };
+      let s = 0, r = 0;
+      return Object.entries(C).forEach(([d, T]) => {
+        if (d === k || !(T != null && T.designTokens)) return;
+        Object.keys(T.designTokens).some((ue) => ue === t) && (T.isPartial ? r++ : s++);
+      }), { pageCount: s, partialCount: r };
+    },
+    [C, k]
+  ), B = Pe(() => Object.entries(i).filter(
+    ([, t]) => t.name.toLowerCase().includes(E.toLowerCase()) || t.value.toLowerCase().includes(E.toLowerCase())
+  ), [i, E]);
+  ee(() => {
+    if (!m)
+      return;
+    const t = f === "add" && (l && l.trim().length > 0 || c && c.trim().length > 0);
+    m(t);
+  }, [f, l, c, m]), ee(() => {
+    if (o)
+      if (f === "edit" || f === "add")
+        o(l && c ? {
+          name: l,
+          value: c,
+          id: g || void 0
+        } : null);
+      else if (f === "view" && b && i[b]) {
+        const t = i[b];
+        o({
+          name: t.name,
+          value: t.value,
+          id: b
+        });
+      } else
+        o(null);
+  }, [f, l, c, g, b, i, o]);
+  const ae = () => {
+    if (!l.trim() || !c.trim()) {
+      p.error(n("Please fill in both token name and classes"));
+      return;
+    }
+    if (!W(l)) {
+      p.error(n("Invalid design token name format"));
+      return;
+    }
+    if (Object.entries(i).find(
+      ([s, r]) => r.name === l.trim() && s !== g
+    )) {
+      p.error(n("Token already exists"));
+      return;
+    }
+    g && ie(l, c);
+  }, w = F(() => {
+    R(null), D(""), j(""), S(""), L(!1), z("view");
+  }, []), ie = F(
+    (t, s) => {
+      !g || f !== "edit" || !t.trim() || !s.trim() || !W(t) || Object.entries(i).find(
+        ([d, T]) => T.name === t.trim() && d !== g
+      ) || (L(!0), M.current && clearTimeout(M.current), M.current = setTimeout(() => {
+        const d = {
+          ...i,
+          [g]: {
+            name: t.trim(),
+            value: s.trim()
+          }
+        };
+        u(d), h(), N(), L(!1), p.success(n("Token updated successfully")), w();
+      }, 10));
+    },
+    [
+      g,
+      f,
+      i,
+      u,
+      h,
+      N,
+      n,
+      w
+    ]
+  ), oe = () => {
+    if (!l.trim() || !c.trim()) {
+      p.error(n("Please fill in both token name and classes"));
+      return;
+    }
+    if (!W(l)) {
+      p.error(n("Invalid design token name format"));
+      return;
+    }
+    if (Object.values(i).find((d) => d.name === l.trim())) {
+      p.error(n("Token already exists"));
+      return;
+    }
+    const s = `${De}${Ie(12)}`, r = {
+      ...i,
+      [s]: {
+        name: l.trim(),
+        value: c.trim()
+      }
+    };
+    u(r), h(), y(), p.success(n("Token added successfully")), w();
+  }, G = (t) => {
+    const s = i[t];
+    if (!s) return;
+    const { pageCount: r, partialCount: d } = re(t);
+    $({
+      isOpen: !0,
+      tokenId: t,
+      tokenName: s.name,
+      pageCount: r,
+      partialCount: d
+    }), P.current = t;
+  }, le = () => {
+    const t = P.current;
+    if (!t) return;
+    const s = {
+      ...i,
+      [t]: {
+        ...i[t],
+        archived: !0
+      }
+    };
+    u(s), h(), y(), p.success(n("Token archived successfully")), $({
+      isOpen: !1,
+      tokenId: null,
+      tokenName: "",
+      pageCount: 0,
+      partialCount: 0
+    }), P.current = null;
+  }, V = (t) => {
+    const s = {
+      ...i,
+      [t]: {
+        name: i[t].name,
+        value: i[t].value
+      }
+    };
+    u(s), h(), p.success(n("Token unarchived successfully"));
+  }, _ = (t) => {
+    const s = i[t];
+    s && (R(t), D(s.name), j(s.value), S(""), z("edit"));
+  }, Q = () => {
+    R(null), D(""), j(""), S(""), z("add");
+  }, ce = (t) => {
+    const s = Be(t);
+    D(s);
+    const r = $e(s, i, n, f === "edit", g || void 0);
+    S(r);
+  }, H = (t) => {
+    j(t);
+  }, de = (t) => {
+    const s = we(Ae(Me(c, t)));
+    H(s);
+  }, me = (t) => {
+    const s = c.split(" ").filter((r) => r !== t).join(" ");
+    H(s);
+  };
+  return /* @__PURE__ */ a(A, { children: [
+    /* @__PURE__ */ e("div", { className: "flex h-full w-full flex-col", children: f === "view" ? (() => {
+      const t = B.filter(([, r]) => !r.archived), s = B.filter(([, r]) => r.archived);
+      return /* @__PURE__ */ a(A, { children: [
+        Object.entries(i).length > 0 && /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-x-2", children: [
+          /* @__PURE__ */ a("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ e(q, { className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ e(
+              X,
+              {
+                placeholder: n("Search tokens"),
+                value: E,
+                onChange: (r) => ne(r.target.value),
+                className: "h-6 pl-7 text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(
+            v,
+            {
+              variant: "outline",
+              onClick: Q,
+              size: "sm",
+              className: "h-6 border-primary text-xs text-primary hover:bg-primary/10 hover:text-primary",
+              children: [
+                /* @__PURE__ */ e(J, { className: "h-3 w-3" }),
+                n("Add")
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "no-scrollbar flex flex-1 flex-col overflow-hidden pt-2", children: /* @__PURE__ */ e(Te, { className: "flex h-full flex-1 items-center justify-center", children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          Object.entries(i).length === 0 ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-muted bg-muted/20 py-8", children: [
+            /* @__PURE__ */ e("div", { className: "mb-2 text-3xl", children: /* @__PURE__ */ e(je, { className: "h-12 w-12 text-muted-foreground" }) }),
+            /* @__PURE__ */ e("p", { className: "mb-1 text-sm font-medium text-foreground", children: n("No design tokens yet") }),
+            /* @__PURE__ */ e("p", { className: "text-center text-xs text-muted-foreground", children: n("Create reusable design tokens to streamline your styling") }),
+            /* @__PURE__ */ a(v, { variant: "default", onClick: Q, size: "sm", className: "mt-4 h-7 text-xs leading-tight", children: [
+              /* @__PURE__ */ e(J, { className: "mr-1 h-3 w-3" }),
+              n("Add first design token")
+            ] })
+          ] }) : B.length === 0 ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-muted bg-muted/20 py-8", children: [
+            /* @__PURE__ */ e("div", { className: "mb-2", children: /* @__PURE__ */ e(q, { className: "h-10 w-10 text-muted-foreground" }) }),
+            /* @__PURE__ */ e("p", { className: "mb-1 text-sm font-medium text-foreground", children: n("No tokens found") }),
+            /* @__PURE__ */ e("p", { className: "text-center text-xs text-muted-foreground", children: n("No design tokens match your search") })
+          ] }) : /* @__PURE__ */ a(A, { children: [
+            t.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-1", children: t.map(([r, d]) => /* @__PURE__ */ e(
+              te,
+              {
+                token: d,
+                tokenId: r,
+                isSelected: b === r,
+                isArchived: !1,
+                onSelect: Z,
+                onEdit: _,
+                onArchive: G,
+                onUnarchive: V,
+                isDisabled: !1
+              },
+              r
+            )) }),
+            s.length > 0 && /* @__PURE__ */ a("div", { className: "mt-4 space-y-1", children: [
+              /* @__PURE__ */ e("div", { className: "px-2 py-1 text-[10px] font-semibold text-muted-foreground", children: n("Archived") }),
+              s.map(([r, d]) => /* @__PURE__ */ e(
+                te,
+                {
+                  token: d,
+                  tokenId: r,
+                  isSelected: b === r,
+                  isArchived: !0,
+                  onSelect: Z,
+                  onEdit: _,
+                  onArchive: G,
+                  onUnarchive: V,
+                  isDisabled: !1
+                },
+                r
+              ))
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-44" })
+        ] }) }) })
+      ] });
+    })() : (() => {
+      const t = f === "edit", s = n(t ? "Edit Design Token" : "Add Design Token"), r = n(t ? "Update design token" : "Create a reusable design token");
+      return /* @__PURE__ */ a("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ a("div", { className: "mb-3 flex items-center gap-2 rounded-md border border-border/50 bg-muted p-1.5", children: [
+          /* @__PURE__ */ e(
+            v,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: w,
+              className: "h-6 w-6 rounded-full p-0 hover:bg-muted",
+              children: /* @__PURE__ */ e(Oe, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "flex-1", children: [
+            /* @__PURE__ */ e("h3", { className: "text-xs font-semibold text-foreground", children: s }),
+            /* @__PURE__ */ e("p", { className: "text-[10px] text-muted-foreground", children: r })
+          ] }),
+          t && se && /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-[10px] text-muted-foreground", children: /* @__PURE__ */ e("div", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-primary" }) })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex-1 space-y-3 overflow-y-auto", children: [
+          /* @__PURE__ */ a("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ e(ye, { htmlFor: "token-name", className: "text-xs font-medium", children: n("Token Name") }),
+            /* @__PURE__ */ e(
+              X,
+              {
+                id: "token-name",
+                placeholder: "Button-Primary",
+                value: l,
+                onChange: (d) => ce(d.target.value),
+                className: "h-7 text-xs"
+              }
+            ),
+            O ? /* @__PURE__ */ e("span", { className: "text-[10px] text-destructive", children: O }) : /* @__PURE__ */ e("span", { className: "text-[10px] font-light text-muted-foreground", children: n("Button-Primary, Card-Header, Text-Large etc.") })
+          ] }),
+          /* @__PURE__ */ e(
+            Ce,
+            {
+              from: "designToken",
+              classFromProps: c,
+              onAddNew: de,
+              onRemove: me,
+              showDesignTokenSuggestions: !1
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "mt-3 flex items-center justify-end gap-2 pt-3", children: [
+            /* @__PURE__ */ e(v, { variant: "outline", onClick: w, className: "h-7 text-xs", children: n("Cancel") }),
+            t ? /* @__PURE__ */ e(
+              v,
+              {
+                onClick: ae,
+                disabled: !l.trim() || !c.trim() || !!O,
+                className: "h-7 text-xs",
+                children: n("Save Token")
+              }
+            ) : /* @__PURE__ */ e(
+              v,
+              {
+                onClick: oe,
+                disabled: !l.trim() || !c.trim() || !!O,
+                className: "h-7 text-xs",
+                children: n("Add Token")
+              }
+            )
+          ] })
+        ] })
+      ] });
+    })() }),
+    /* @__PURE__ */ e(
+      ge,
+      {
+        open: I.isOpen,
+        onOpenChange: (t) => {
+          t || ($({
+            isOpen: !1,
+            tokenId: null,
+            tokenName: "",
+            pageCount: 0,
+            partialCount: 0
+          }), P.current = null);
+        },
+        children: /* @__PURE__ */ a(xe, { children: [
+          /* @__PURE__ */ e(ve, { children: n("Archive Design Token") }),
+          /* @__PURE__ */ a(ke, { className: "space-y-3", children: [
+            /* @__PURE__ */ a("p", { children: [
+              n("This token is used on"),
+              " ",
+              /* @__PURE__ */ e("span", { className: "font-semibold", children: I.pageCount }),
+              " ",
+              n("pages"),
+              I.partialCount > 0 && /* @__PURE__ */ a(A, { children: [
+                " ",
+                n("and"),
+                " ",
+                /* @__PURE__ */ e("span", { className: "font-semibold", children: I.partialCount }),
+                " ",
+                n("partials")
+              ] }),
+              "."
+            ] }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: n("Archiving this token will remove the styling for those blocks.") }),
+            /* @__PURE__ */ e("p", { children: n("Do you wish to continue?") })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ e(Ne, { children: n("Cancel") }),
+            /* @__PURE__ */ e(
+              be,
+              {
+                onClick: le,
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                children: n("Archive")
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  tt as default
+};

package/dist/manage-design-tokens-modal-Bug5H8PT.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-P-2SvZA9.cjs"),y=require("@radix-ui/react-icons"),c=require("react"),j=require("react-i18next"),g=require("./default-theme-options-DN-3gIjM.cjs"),o=require("lodash-es"),b=require("@tailwindcss/aspect-ratio"),v=require("@tailwindcss/container-queries"),w=require("@tailwindcss/forms"),C=require("@tailwindcss/typography"),D=require("./fonts-D5fTqvSS.cjs"),F=require("./manage-design-tokens-B_-TrQgu.cjs"),N=()=>{const[s]=t.useTheme(),r=t.useThemeOptions(),[l]=t.useDarkMode(),{document:n,window:d}=t.useFrame(),i=D.useRegisteredFonts();c.useEffect(()=>{l?n==null||n.documentElement.classList.add("dark"):n==null||n.documentElement.classList.remove("dark")},[l,n]),c.useEffect(()=>{!d||!d.tailwind||(d.tailwind.config={darkMode:"class",theme:{extend:{container:{center:!0,padding:"1rem",screens:{"2xl":"1400px"}},...g.getChaiThemeOptions(r)}},plugins:[C,w,b,v,g.plugin(function({addBase:a,theme:m}){a({"h1,h2,h3,h4,h5,h6":{fontFamily:m("fontFamily.heading")},body:{fontFamily:m("fontFamily.body"),color:m("colors.foreground"),backgroundColor:m("colors.background")}})})]})},[s,r,d]);const u=c.useMemo(()=>{const a=o.get(s,"fontFamily.heading"),m=o.get(s,"fontFamily.body");return i.filter(f=>f.family===a||f.family===m)},[s,i]),p=c.useMemo(()=>g.getThemeFontsUrls(o.filter(u,a=>o.has(a,"url"))),[u]),h=c.useMemo(()=>g.getThemeCustomFontFace(o.filter(u,a=>o.has(a,"src"))),[u]);return e.jsxs(e.Fragment,{children:[e.jsx(t.CssThemeVariables,{theme:s}),p.map((a,m)=>e.jsx("link",{rel:"stylesheet",href:a},`preview-font-${m}`)),e.jsx("style",{id:"chai-custom-fonts",dangerouslySetInnerHTML:{__html:h}})]})},T=({content:s,classes:r="",className:l="w-full rounded border-0",style:n={minHeight:80},title:d="Preview"})=>{const i=c.useMemo(()=>t.IframeInitialContent.replace('dir="__HTML_DIR__"','dir="ltr"'),[]);return e.jsxs(t.ChaiFrame,{className:l,style:n,title:d,initialContent:i,children:[e.jsx(N,{}),e.jsx("div",{className:"h-full p-4",children:e.jsx("div",{className:r||void 0,dangerouslySetInnerHTML:{__html:s}})})]})},x=["xs","sm","md","lg","xl","2xl"],k=s=>{if(s=s.trim().replace(/ +(?= )/g,""),o.isEmpty(s))return"";const r=o.map(s.split(" "),t.constructClassObject),l=[];for(const n of r){const d=n.mq;if(!l.includes(n.fullCls))for(let i=x.indexOf(d)+1;i<x.length;i++){const u=o.find(r,{property:n.property,mq:x[i]});if(u&&u.cls!==n.cls)break;o.find(r,{cls:n.cls,mq:x[i]})&&l.push(`${x[i]}:${n.cls}`)}}return o.filter(o.map(r,n=>l.includes(n.fullCls)?null:n.fullCls),n=>n!==null).join(" ")},q=({activeToken:s})=>{const{t:r}=j.useTranslation(),l=s!=null&&s.value?k(s.value):"",n=s&&s.name&&s.value;return e.jsx(t.ScrollArea,{className:"h-full",children:e.jsx("div",{className:"space-y-4 pr-4",children:e.jsxs("div",{className:"space-y-2 rounded-lg border bg-card p-4",children:[n&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-semibold",children:s.name}),s.id&&e.jsx("span",{className:"rounded bg-muted px-2 py-0.5 font-mono text-[9px] text-muted-foreground",children:s.id})]})}),e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-[10px] font-medium text-muted-foreground",children:r("Preview:")}),e.jsx(T,{content:r("Sample text with token styles applied"),classes:l,style:{minHeight:80},title:r("Token Preview")})]})]})})})},A=({open:s,onOpenChange:r})=>{const{t:l}=j.useTranslation(),[n,d]=c.useState(null),[i,u]=c.useState(!1),[p,h]=c.useState(!1),a=c.useCallback(f=>{if(!f&&i){h(!0);return}r(f)},[i,r]),m=c.useCallback(()=>{h(!1),u(!1),r(!1)},[r]);return e.jsxs(e.Fragment,{children:[e.jsx(t.Dialog,{open:s,onOpenChange:a,children:e.jsxs(t.DialogContent,{className:"flex h-[540px] max-w-6xl flex-col gap-0 p-0",children:[e.jsx(t.DialogHeader,{className:"border-b border-border px-6 py-4",children:e.jsxs(t.DialogTitle,{className:"flex items-center gap-2",children:[e.jsx(y.TokensIcon,{className:"h-5 w-5 text-primary"}),l("Design Token Management")]})}),e.jsxs("div",{className:"flex flex-1 overflow-hidden",children:[e.jsx("div",{className:"flex w-1/2 flex-col border-r border-border p-4",children:e.jsx(F.default,{onActiveTokenChange:d,onDirtyStateChange:u})}),e.jsxs("div",{className:"flex w-1/2 flex-col p-4",children:[e.jsx("div",{className:"mb-3 flex items-center justify-between",children:e.jsx("h3",{className:"text-sm font-semibold",children:l("Live Preview")})}),e.jsx("div",{className:"flex-1 overflow-y-auto",children:e.jsx(q,{activeToken:n})})]})]})]})}),e.jsx(t.AlertDialog,{open:p,onOpenChange:h,children:e.jsxs(t.AlertDialogContent,{children:[e.jsxs(t.AlertDialogHeader,{children:[e.jsx(t.AlertDialogTitle,{children:l("Unsaved Changes")}),e.jsx(t.AlertDialogDescription,{children:l("You have unsaved changes. Are you sure you want to close? Your changes will be lost.")})]}),e.jsxs(t.AlertDialogFooter,{children:[e.jsx(t.AlertDialogCancel,{children:l("Continue Editing")}),e.jsx(t.AlertDialogAction,{onClick:m,children:l("Discard Changes")})]})]})})]})};exports.default=A;

package/dist/manage-design-tokens-modal-DO_tHkgp.js

@@ -0,0 +1,161 @@
+import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { al as k, am as A, an as T, ao as M, ap as H, aq as _, ar as j, as as I, a7 as P, D as S, e as L, f as E, g as O, a1 as U, a2 as q, at as R, a3 as $, a4 as V, au as Y, a5 as z, a6 as B } from "./index-DpeytsiB.js";
+import { TokensIcon as Q } from "@radix-ui/react-icons";
+import { useMemo as u, useEffect as b, useState as g, useCallback as w } from "react";
+import { useTranslation as F } from "react-i18next";
+import { p as W, g as G, a as J, b as K } from "./default-theme-options-saBIkWGT.js";
+import { get as v, filter as x, has as C, isEmpty as X, map as D, find as N } from "lodash-es";
+import Z from "@tailwindcss/aspect-ratio";
+import ee from "@tailwindcss/container-queries";
+import se from "@tailwindcss/forms";
+import ne from "@tailwindcss/typography";
+import { u as ae } from "./fonts-B3UYxuJI.js";
+import re from "./manage-design-tokens-CHpHE-dx.js";
+const te = () => {
+  const [s] = T(), a = M(), [r] = H(), { document: n, window: i } = _(), t = ae();
+  b(() => {
+    r ? n == null || n.documentElement.classList.add("dark") : n == null || n.documentElement.classList.remove("dark");
+  }, [r, n]), b(() => {
+    !i || !i.tailwind || (i.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          container: {
+            center: !0,
+            padding: "1rem",
+            screens: {
+              "2xl": "1400px"
+            }
+          },
+          ...G(a)
+        }
+      },
+      plugins: [
+        ne,
+        se,
+        Z,
+        ee,
+        W(function({ addBase: o, theme: d }) {
+          o({
+            "h1,h2,h3,h4,h5,h6": {
+              fontFamily: d("fontFamily.heading")
+            },
+            body: {
+              fontFamily: d("fontFamily.body"),
+              color: d("colors.foreground"),
+              backgroundColor: d("colors.background")
+            }
+          });
+        })
+      ]
+    });
+  }, [s, a, i]);
+  const c = u(() => {
+    const o = v(s, "fontFamily.heading"), d = v(s, "fontFamily.body");
+    return t.filter((h) => h.family === o || h.family === d);
+  }, [s, t]), p = u(
+    () => J(x(c, (o) => C(o, "url"))),
+    [c]
+  ), m = u(
+    () => K(x(c, (o) => C(o, "src"))),
+    [c]
+  );
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ e(j, { theme: s }),
+    p.map((o, d) => /* @__PURE__ */ e("link", { rel: "stylesheet", href: o }, `preview-font-${d}`)),
+    /* @__PURE__ */ e("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: m } })
+  ] });
+}, le = ({
+  content: s,
+  classes: a = "",
+  className: r = "w-full rounded border-0",
+  style: n = { minHeight: 80 },
+  title: i = "Preview"
+}) => {
+  const t = u(() => k.replace('dir="__HTML_DIR__"', 'dir="ltr"'), []);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ l(A, { className: r, style: n, title: i, initialContent: t, children: [
+      /* @__PURE__ */ e(te, {}),
+      /* @__PURE__ */ e("div", { className: "h-full p-4", children: /* @__PURE__ */ e("div", { className: a || void 0, dangerouslySetInnerHTML: { __html: s } }) })
+    ] })
+  );
+}, f = ["xs", "sm", "md", "lg", "xl", "2xl"], oe = (s) => {
+  if (s = s.trim().replace(/ +(?= )/g, ""), X(s)) return "";
+  const a = D(s.split(" "), I), r = [];
+  for (const n of a) {
+    const i = n.mq;
+    if (!r.includes(n.fullCls))
+      for (let t = f.indexOf(i) + 1; t < f.length; t++) {
+        const c = N(a, { property: n.property, mq: f[t] });
+        if (c && c.cls !== n.cls)
+          break;
+        N(a, { cls: n.cls, mq: f[t] }) && r.push(`${f[t]}:${n.cls}`);
+      }
+  }
+  return x(
+    D(a, (n) => r.includes(n.fullCls) ? null : n.fullCls),
+    (n) => n !== null
+  ).join(" ");
+}, ie = ({ activeToken: s }) => {
+  const { t: a } = F(), r = s != null && s.value ? oe(s.value) : "", n = s && s.name && s.value;
+  return /* @__PURE__ */ e(P, { className: "h-full", children: /* @__PURE__ */ e("div", { className: "space-y-4 pr-4", children: /* @__PURE__ */ l("div", { className: "space-y-2 rounded-lg border bg-card p-4", children: [
+    n && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ l("div", { className: "mb-3 flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: s.name }),
+      s.id && /* @__PURE__ */ e("span", { className: "rounded bg-muted px-2 py-0.5 font-mono text-[9px] text-muted-foreground", children: s.id })
+    ] }) }),
+    /* @__PURE__ */ l("div", { children: [
+      /* @__PURE__ */ e("div", { className: "mb-2 text-[10px] font-medium text-muted-foreground", children: a("Preview:") }),
+      /* @__PURE__ */ e(
+        le,
+        {
+          content: a("Sample text with token styles applied"),
+          classes: r,
+          style: { minHeight: 80 },
+          title: a("Token Preview")
+        }
+      )
+    ] })
+  ] }) }) });
+}, Ce = ({ open: s, onOpenChange: a }) => {
+  const { t: r } = F(), [n, i] = g(null), [t, c] = g(!1), [p, m] = g(!1), o = w(
+    (h) => {
+      if (!h && t) {
+        m(!0);
+        return;
+      }
+      a(h);
+    },
+    [t, a]
+  ), d = w(() => {
+    m(!1), c(!1), a(!1);
+  }, [a]);
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ e(S, { open: s, onOpenChange: o, children: /* @__PURE__ */ l(L, { className: "flex h-[540px] max-w-6xl flex-col gap-0 p-0", children: [
+      /* @__PURE__ */ e(E, { className: "border-b border-border px-6 py-4", children: /* @__PURE__ */ l(O, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(Q, { className: "h-5 w-5 text-primary" }),
+        r("Design Token Management")
+      ] }) }),
+      /* @__PURE__ */ l("div", { className: "flex flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ e("div", { className: "flex w-1/2 flex-col border-r border-border p-4", children: /* @__PURE__ */ e(re, { onActiveTokenChange: i, onDirtyStateChange: c }) }),
+        /* @__PURE__ */ l("div", { className: "flex w-1/2 flex-col p-4", children: [
+          /* @__PURE__ */ e("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ e("h3", { className: "text-sm font-semibold", children: r("Live Preview") }) }),
+          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ e(ie, { activeToken: n }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(U, { open: p, onOpenChange: m, children: /* @__PURE__ */ l(q, { children: [
+      /* @__PURE__ */ l(R, { children: [
+        /* @__PURE__ */ e($, { children: r("Unsaved Changes") }),
+        /* @__PURE__ */ e(V, { children: r("You have unsaved changes. Are you sure you want to close? Your changes will be lost.") })
+      ] }),
+      /* @__PURE__ */ l(Y, { children: [
+        /* @__PURE__ */ e(z, { children: r("Continue Editing") }),
+        /* @__PURE__ */ e(B, { onClick: d, children: r("Discard Changes") })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  Ce as default
+};

package/dist/{mark-as-template-CpWEBJGd.cjs → mark-as-template-BEnMYTql.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./register-chai-top-bar-BqwKw4uy.cjs"),t=require("./index-C99FhuF1.cjs"),y=require("./index-C0-pgg_p.cjs"),w=require("lodash-es"),m=require("lucide-react"),l=require("react"),M=require("react-i18next"),k=require("sonner"),B=1*1024*1024,A=({page:r,onClose:u})=>{const{t:s}=M.useTranslation(),[f,p]=l.useState(!1),[j,T]=l.useState(""),[c,N]=l.useState(""),[v,x]=l.useState(!1),i=l.useRef(null),C=y.useMarkAsTemplate(),{data:h}=y.usePageTypes(),g=h==null?void 0:h.find(a=>a.key===r.pageType),I=(g==null?void 0:g.name)||w.startCase(r.pageType),D=l.useCallback(a=>{var b;const d=(b=a.target.files)==null?void 0:b[0];if(d){if(d.size>B){k.toast.error(s("File too large"),{description:`${s("Maximum file size is 1MB. Selected file is")} ${(d.size/1024).toFixed(2)}KB.`}),i.current&&(i.current.value="");return}try{x(!0);const n=new FileReader;n.onloadend=()=>{N(n.result),x(!1)},n.readAsDataURL(d)}catch(n){console.error("Error reading file:",n),x(!1),k.toast.error(s("Failed to process image"),{description:n instanceof Error?n.message:s("Unknown error")})}}},[s]),F=()=>{N(""),i.current&&(i.current.value="")},S=()=>{var a;(a=i.current)==null||a.click()},q=()=>{p(!0),C.mutate({page:r,name:r.name,description:j.trim()||void 0,pageType:r.pageType,...c?{previewImage:c}:{}},{onSuccess:()=>{p(!1),u()},onError:()=>{p(!1)}})};return e.jsx(t.Dialog,{open:!0,onOpenChange:u,children:e.jsxs(t.DialogContent,{children:[e.jsxs(t.DialogHeader,{children:[e.jsx(t.DialogTitle,{children:s("Mark as template")}),e.jsxs(t.DialogDescription,{className:"space-y-1 py-4 text-xs text-slate-500",children:[s("Are you sure you want to mark this page as a template?"),e.jsx("br",{}),s("Templates can be used to create new pages with the same content.")]})]}),e.jsxs("div",{className:"mb-4 space-y-4 text-xs",children:[e.jsxs("div",{className:"space-y-3 rounded border bg-slate-50 p-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m.Tag,{className:"h-4 w-4 text-slate-500"}),e.jsxs("span",{className:"font-medium text-slate-500",children:[s("Page Name"),":"]}),e.jsx("span",{className:"font-semibold",children:w.startCase(r.name)})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m.File,{className:"h-4 w-4 text-slate-500"}),e.jsxs("span",{className:"font-medium text-slate-500",children:[s("Type"),":"]}),e.jsx("span",{className:"font-semibold",children:I})]})]}),e.jsxs("div",{children:[e.jsx(t.Label,{htmlFor:"description",className:"text-xs font-medium",children:s("Description (Optional)")}),e.jsx(t.Textarea,{id:"description",placeholder:s("Describe this template's purpose"),className:"mt-1 h-24 resize-none text-xs",value:j,onChange:a=>T(a.target.value)})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Label,{htmlFor:"previewImage",className:"text-xs font-medium",children:s("Preview Image (Optional)")}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(o.Input,{type:"file",id:"previewImage",ref:i,onChange:D,accept:"image/*",className:"hidden"}),e.jsx(o.Button,{type:"button",variant:"outline",onClick:S,disabled:v,className:"w-full",children:v?e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"}),s("Uploading...")]}):e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(m.ImageIcon,{className:"h-4 w-4"}),s("Select image")]})}),c&&e.jsx(o.Button,{type:"button",variant:"outline",size:"icon",onClick:F,children:e.jsx(m.X,{className:"h-4 w-4"})})]}),c&&e.jsx("div",{className:"aspect-video overflow-hidden rounded-md border",children:e.jsx("img",{src:c,alt:s("Preview"),className:"h-full max-h-[200px] w-full object-contain"})}),e.jsx("p",{className:"text-xs text-muted-foreground",children:s("max 1mb")})]})]})]}),e.jsxs(t.DialogFooter,{className:f?"pointer-events-none opacity-75":"",children:[e.jsx(o.Button,{variant:"outline",onClick:a=>{a.stopPropagation(),u()},children:s("Cancel")}),e.jsx(o.Button,{variant:"default",disabled:f,onClick:q,children:s("Mark as template")})]})]})})};exports.default=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./register-chai-top-bar-DyW9GPzV.cjs"),t=require("./index-P-2SvZA9.cjs"),y=require("./index-CQf0jL1k.cjs"),w=require("lodash-es"),m=require("lucide-react"),l=require("react"),M=require("react-i18next"),k=require("sonner"),B=1*1024*1024,A=({page:r,onClose:u})=>{const{t:s}=M.useTranslation(),[f,p]=l.useState(!1),[j,T]=l.useState(""),[c,N]=l.useState(""),[v,x]=l.useState(!1),i=l.useRef(null),C=y.useMarkAsTemplate(),{data:h}=y.usePageTypes(),g=h==null?void 0:h.find(a=>a.key===r.pageType),I=(g==null?void 0:g.name)||w.startCase(r.pageType),D=l.useCallback(a=>{var b;const d=(b=a.target.files)==null?void 0:b[0];if(d){if(d.size>B){k.toast.error(s("File too large"),{description:`${s("Maximum file size is 1MB. Selected file is")} ${(d.size/1024).toFixed(2)}KB.`}),i.current&&(i.current.value="");return}try{x(!0);const n=new FileReader;n.onloadend=()=>{N(n.result),x(!1)},n.readAsDataURL(d)}catch(n){console.error("Error reading file:",n),x(!1),k.toast.error(s("Failed to process image"),{description:n instanceof Error?n.message:s("Unknown error")})}}},[s]),F=()=>{N(""),i.current&&(i.current.value="")},S=()=>{var a;(a=i.current)==null||a.click()},q=()=>{p(!0),C.mutate({page:r,name:r.name,description:j.trim()||void 0,pageType:r.pageType,...c?{previewImage:c}:{}},{onSuccess:()=>{p(!1),u()},onError:()=>{p(!1)}})};return e.jsx(t.Dialog,{open:!0,onOpenChange:u,children:e.jsxs(t.DialogContent,{children:[e.jsxs(t.DialogHeader,{children:[e.jsx(t.DialogTitle,{children:s("Mark as template")}),e.jsxs(t.DialogDescription,{className:"space-y-1 py-4 text-xs text-slate-500",children:[s("Are you sure you want to mark this page as a template?"),e.jsx("br",{}),s("Templates can be used to create new pages with the same content.")]})]}),e.jsxs("div",{className:"mb-4 space-y-4 text-xs",children:[e.jsxs("div",{className:"space-y-3 rounded border bg-slate-50 p-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m.Tag,{className:"h-4 w-4 text-slate-500"}),e.jsxs("span",{className:"font-medium text-slate-500",children:[s("Page Name"),":"]}),e.jsx("span",{className:"font-semibold",children:w.startCase(r.name)})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(m.File,{className:"h-4 w-4 text-slate-500"}),e.jsxs("span",{className:"font-medium text-slate-500",children:[s("Type"),":"]}),e.jsx("span",{className:"font-semibold",children:I})]})]}),e.jsxs("div",{children:[e.jsx(t.Label,{htmlFor:"description",className:"text-xs font-medium",children:s("Description (Optional)")}),e.jsx(t.Textarea,{id:"description",placeholder:s("Describe this template's purpose"),className:"mt-1 h-24 resize-none text-xs",value:j,onChange:a=>T(a.target.value)})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Label,{htmlFor:"previewImage",className:"text-xs font-medium",children:s("Preview Image (Optional)")}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(o.Input,{type:"file",id:"previewImage",ref:i,onChange:D,accept:"image/*",className:"hidden"}),e.jsx(o.Button,{type:"button",variant:"outline",onClick:S,disabled:v,className:"w-full",children:v?e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"}),s("Uploading...")]}):e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(m.ImageIcon,{className:"h-4 w-4"}),s("Select image")]})}),c&&e.jsx(o.Button,{type:"button",variant:"outline",size:"icon",onClick:F,children:e.jsx(m.X,{className:"h-4 w-4"})})]}),c&&e.jsx("div",{className:"aspect-video overflow-hidden rounded-md border",children:e.jsx("img",{src:c,alt:s("Preview"),className:"h-full max-h-[200px] w-full object-contain"})}),e.jsx("p",{className:"text-xs text-muted-foreground",children:s("max 1mb")})]})]})]}),e.jsxs(t.DialogFooter,{className:f?"pointer-events-none opacity-75":"",children:[e.jsx(o.Button,{variant:"outline",onClick:a=>{a.stopPropagation(),u()},children:s("Cancel")}),e.jsx(o.Button,{variant:"default",disabled:f,onClick:q,children:s("Mark as template")})]})]})})};exports.default=A;