@chaibuilder/sdk 4.0.0-beta.30 → 4.0.0-beta.31

package/dist/{json-diff-viewer-DRQSNhaS.cjs → json-diff-viewer-BkrnLb3B.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("./index-D30xvFa5.cjs"),L=require("./register-chai-top-bar-DyW9GPzV.cjs"),z=require("date-fns"),p=require("lodash-es"),N=require("lucide-react"),b=require("react"),M=require("react-diff-view"),O=require("./index-Bzn_gpaK.cjs"),H=require("@tanstack/react-query");function K(t,r){const o=O.useApiUrl(),n=O.useFetch(),d=p.startsWith(t.uid,"draft:")||p.startsWith(r.uid,"live:");return H.useQuery({queryKey:["revision-comparison",t.uid,r.uid],queryFn:async()=>{if(!t.uid||!r.uid)throw new Error("Both revision IDs are required for comparison");const l=h=>h==="draft"||h==="live"?h:"revision",s=h=>p.replace(h.uid,`${h.label}:`,"");return await n(o,{action:O.ACTIONS.GET_COMPARE_DATA,data:{versions:{version1:{type:l(t.label),id:s(t)},version2:{type:l(r.label),id:s(r)}}}})},enabled:!!t.uid&&!!r.uid,staleTime:d?0:1/0,refetchOnMount:d?"always":!1,gcTime:d?0:void 0})}const V=({version:t})=>{const r=t==null?void 0:t.item,{data:o}=O.useChaiUserInfo(r==null?void 0:r.currentEditor),n=t.label==="live",d=t.label==="draft";return e.jsxs("span",{className:`flex min-h-8 items-center gap-x-2 rounded border bg-white px-2 text-xs shadow-lg ${n?"border-green-500/30":d?"border-amber-500/30":"border-purple-500/30"}`,children:[e.jsx("div",{className:"h-full items-center rounded px-1.5 py-0.5 font-medium capitalize"+(n?" bg-green-500 text-green-50":d?" bg-amber-500 text-amber-50":" bg-purple-500 text-purple-50"),children:t.label}),e.jsxs("div",{className:"py-1 text-xs font-light leading-none text-gray-800",children:[e.jsxs("div",{children:[e.jsx("span",{className:"font-light opacity-90",children:d?"Currently editing":"Published by"}),!d&&e.jsx("span",{className:"pl-1 font-medium",children:(o==null?void 0:o.name)||"Unknown"})]}),(r==null?void 0:r.createdAt)&&e.jsx("div",{className:"pt-0.5 text-[10px] leading-tight",children:z.formatDate(r.createdAt,"dd MMM yyyy, h:mm a")})]})]})},F=({version:t})=>e.jsx(V,{version:t});function U(t,r,o="data.json"){const n=JSON.stringify(t,null,2),d=JSON.stringify(r,null,2),l=n.split(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("./index-mPCp0j2h.cjs"),L=require("./register-chai-top-bar-DyW9GPzV.cjs"),z=require("date-fns"),p=require("lodash-es"),N=require("lucide-react"),b=require("react"),M=require("react-diff-view"),O=require("./index-CAhDwfHE.cjs"),H=require("@tanstack/react-query");function K(t,r){const o=O.useApiUrl(),n=O.useFetch(),d=p.startsWith(t.uid,"draft:")||p.startsWith(r.uid,"live:");return H.useQuery({queryKey:["revision-comparison",t.uid,r.uid],queryFn:async()=>{if(!t.uid||!r.uid)throw new Error("Both revision IDs are required for comparison");const l=h=>h==="draft"||h==="live"?h:"revision",s=h=>p.replace(h.uid,`${h.label}:`,"");return await n(o,{action:O.ACTIONS.GET_COMPARE_DATA,data:{versions:{version1:{type:l(t.label),id:s(t)},version2:{type:l(r.label),id:s(r)}}}})},enabled:!!t.uid&&!!r.uid,staleTime:d?0:1/0,refetchOnMount:d?"always":!1,gcTime:d?0:void 0})}const V=({version:t})=>{const r=t==null?void 0:t.item,{data:o}=O.useChaiUserInfo(r==null?void 0:r.currentEditor),n=t.label==="live",d=t.label==="draft";return e.jsxs("span",{className:`flex min-h-8 items-center gap-x-2 rounded border bg-white px-2 text-xs shadow-lg ${n?"border-green-500/30":d?"border-amber-500/30":"border-purple-500/30"}`,children:[e.jsx("div",{className:"h-full items-center rounded px-1.5 py-0.5 font-medium capitalize"+(n?" bg-green-500 text-green-50":d?" bg-amber-500 text-amber-50":" bg-purple-500 text-purple-50"),children:t.label}),e.jsxs("div",{className:"py-1 text-xs font-light leading-none text-gray-800",children:[e.jsxs("div",{children:[e.jsx("span",{className:"font-light opacity-90",children:d?"Currently editing":"Published by"}),!d&&e.jsx("span",{className:"pl-1 font-medium",children:(o==null?void 0:o.name)||"Unknown"})]}),(r==null?void 0:r.createdAt)&&e.jsx("div",{className:"pt-0.5 text-[10px] leading-tight",children:z.formatDate(r.createdAt,"dd MMM yyyy, h:mm a")})]})]})},F=({version:t})=>e.jsx(V,{version:t});function U(t,r,o="data.json"){const n=JSON.stringify(t,null,2),d=JSON.stringify(r,null,2),l=n.split(`
 `),s=d.split(`
 `);let u=`--- a/${o}
 `;u+=`+++ b/${o}

package/dist/{json-diff-viewer-B5wAR5GY.js → json-diff-viewer-D3N3w3Ax.js}

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { D as V, e as _, f as q, g as G, ac as $, a6 as A, ad as P } from "./index-BFnMzGe6.js";
+import { D as V, e as _, f as q, g as G, aa as $, a6 as A, ab as P } from "./index-DsQXiNA_.js";
 import { B as z } from "./register-chai-top-bar-D6GjnauV.js";
 import { formatDate as Q } from "date-fns";
 import { startsWith as T, replace as W, isString as X, trim as Y, isArray as Z, map as ee, isPlainObject as te, mapValues as re } from "lodash-es";
 import { FileJson as B, Loader as ne, Check as F, Copy as H } from "lucide-react";
 import { useState as D, useMemo as I } from "react";
-import { parseDiff as se, Diff as le, Hunk as ae } from "react-diff-view";
-import { ar as ie, as as oe, A as ce, ap as de } from "./index-CA1OwKJX.js";
+import { parseDiff as se, Diff as ae, Hunk as le } from "react-diff-view";
+import { ar as ie, as as oe, A as ce, ap as de } from "./index-DtMksfXx.js";
 import { useQuery as fe } from "@tanstack/react-query";
 function me(t, n) {
   const o = ie(), s = oe(), d = T(t.uid, "draft:") || T(n.uid, "live:");
@@ -15,13 +15,13 @@ function me(t, n) {
     queryFn: async () => {
       if (!t.uid || !n.uid)
         throw new Error("Both revision IDs are required for comparison");
-      const l = (m) => m === "draft" || m === "live" ? m : "revision", r = (m) => W(m.uid, `${m.label}:`, "");
+      const a = (m) => m === "draft" || m === "live" ? m : "revision", r = (m) => W(m.uid, `${m.label}:`, "");
       return await s(o, {
         action: ce.GET_COMPARE_DATA,
         data: {
           versions: {
-            version1: { type: l(t.label), id: r(t) },
-            version2: { type: l(n.label), id: r(n) }
+            version1: { type: a(t.label), id: r(t) },
+            version2: { type: a(n.label), id: r(n) }
           }
         }
       });
@@ -58,7 +58,7 @@ const he = ({ version: t }) => {
   );
 }, K = ({ version: t }) => /* @__PURE__ */ e(he, { version: t });
 function ue(t, n, o = "data.json") {
-  const s = JSON.stringify(t, null, 2), d = JSON.stringify(n, null, 2), l = s.split(`
+  const s = JSON.stringify(t, null, 2), d = JSON.stringify(n, null, 2), a = s.split(`
 `), r = d.split(`
 `);
   let f = `--- a/${o}
@@ -67,35 +67,35 @@ function ue(t, n, o = "data.json") {
 `;
   const m = [];
   let c = 0, p = 0;
-  for (; c < l.length || p < r.length; ) {
-    const g = l[c] || "", N = r[p] || "";
+  for (; c < a.length || p < r.length; ) {
+    const g = a[c] || "", N = r[p] || "";
     if (g === N)
       m.push(` ${g}`), c++, p++;
     else {
       let h = -1, x = -1;
-      for (let a = c + 1; a < l.length; a++)
-        if (r[p] === l[a]) {
-          h = a;
+      for (let l = c + 1; l < a.length; l++)
+        if (r[p] === a[l]) {
+          h = l;
           break;
         }
-      for (let a = p + 1; a < r.length; a++)
-        if (l[c] === r[a]) {
-          x = a;
+      for (let l = p + 1; l < r.length; l++)
+        if (a[c] === r[l]) {
+          x = l;
           break;
         }
       if (h !== -1 && (x === -1 || h - c <= x - p)) {
-        for (let a = c; a < h; a++)
-          m.push(`-${l[a]}`);
+        for (let l = c; l < h; l++)
+          m.push(`-${a[l]}`);
         c = h;
       } else if (x !== -1) {
-        for (let a = p; a < x; a++)
-          m.push(`+${r[a]}`);
+        for (let l = p; l < x; l++)
+          m.push(`+${r[l]}`);
         p = x;
       } else
         g && m.push(`-${g}`), N && m.push(`+${N}`), c++, p++;
     }
   }
-  const y = l.length, O = r.length;
+  const y = a.length, O = r.length;
   return f += `@@ -1,${y} +1,${O} @@
 `, f += m.join(`
 `) + `
@@ -106,8 +106,8 @@ function S(t, n = !0, o = !1) {
     const s = Y(t);
     if (T(s, "{") || T(s, "[") || n && (s === "true" || s === "false" || s === "null" || /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(s)))
       try {
-        const l = JSON.parse(s);
-        return S(l, n, o);
+        const a = JSON.parse(s);
+        return S(a, n, o);
       } catch {
         if (o)
           throw new Error(`Invalid JSON string: ${s}`);
@@ -140,11 +140,11 @@ const pe = (t) => {
       o.add(c);
   });
   const d = [];
-  let l = -1;
+  let a = -1;
   return t.forEach((r, f) => {
     if (o.has(f)) {
-      if (l !== -1 && f - l > 1) {
-        const m = t[l].lineNumber != null ? t[l].lineNumber + 1 : l + 2, c = t[f].lineNumber != null ? t[f].lineNumber - 1 : f;
+      if (a !== -1 && f - a > 1) {
+        const m = t[a].lineNumber != null ? t[a].lineNumber + 1 : a + 2, c = t[f].lineNumber != null ? t[f].lineNumber - 1 : f;
         d.push({
           content: /* @__PURE__ */ e(P, { className: "pointer-events-none w-60 -translate-x-1/2 cursor-default border-none bg-transparent py-1 shadow-none", children: /* @__PURE__ */ u("span", { className: "rounded border border-border bg-muted px-3 py-1 text-xs font-light leading-none text-muted-foreground", children: [
             "No changes from ",
@@ -155,16 +155,16 @@ const pe = (t) => {
           ] }) })
         });
       }
-      d.push(r), l = f;
+      d.push(r), a = f;
     }
   }), d;
 };
 function Oe({ open: t, compare: n, onOpenChange: o }) {
-  const s = n[0], d = n[1], [l, r] = D(null), [f, m] = D("split"), [c, p] = D(!1), [y, O] = D(!0), [g, N] = D("blocks"), { data: h, isLoading: x } = me(s, d), { leftData: a, rightData: w, options: U } = I(() => {
+  const s = n[0], d = n[1], [a, r] = D(null), [f, m] = D("split"), [c, p] = D(!1), [y, O] = D(!0), [g, N] = D("blocks"), { data: h, isLoading: x } = me(s, d), { leftData: l, rightData: w, options: U } = I(() => {
     var b, R;
     const i = (b = h == null ? void 0 : h.version1) == null ? void 0 : b[g], v = (R = h == null ? void 0 : h.version2) == null ? void 0 : R[g], k = S(i), C = S(v), J = ge(h == null ? void 0 : h.version1, h == null ? void 0 : h.version2);
     return { leftData: k, rightData: C, options: J };
-  }, [h, g]), j = I(() => !a || !w ? "" : ue(a, w), [a, w]), M = I(() => {
+  }, [h, g]), j = I(() => !l || !w ? "" : ue(l, w), [l, w]), M = I(() => {
     if (!j) return [];
     try {
       return se(j);
@@ -223,15 +223,15 @@ function Oe({ open: t, compare: n, onOpenChange: o }) {
       ] }),
       c ? /* @__PURE__ */ u("div", { className: "grid h-full grid-cols-2 gap-3 rounded-lg border", children: [
         /* @__PURE__ */ u("div", { className: "relative flex min-h-0 flex-col border-r", children: [
-          /* @__PURE__ */ e("div", { className: "absolute -top-4 right-4 z-50", children: /* @__PURE__ */ u(z, { variant: "outline", size: "sm", onClick: () => E(a, "left"), children: [
-            l === "left" ? /* @__PURE__ */ e(F, { className: "text-green-500" }) : /* @__PURE__ */ e(H, {}),
+          /* @__PURE__ */ e("div", { className: "absolute -top-4 right-4 z-50", children: /* @__PURE__ */ u(z, { variant: "outline", size: "sm", onClick: () => E(l, "left"), children: [
+            a === "left" ? /* @__PURE__ */ e(F, { className: "text-green-500" }) : /* @__PURE__ */ e(H, {}),
             "Copy"
           ] }) }),
-          /* @__PURE__ */ e(A, { className: "flex-1 rounded-lg bg-slate-50 p-3 dark:bg-slate-900", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap font-mono text-xs", children: L(a) }) })
+          /* @__PURE__ */ e(A, { className: "flex-1 rounded-lg bg-slate-50 p-3 dark:bg-slate-900", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap font-mono text-xs", children: L(l) }) })
         ] }),
         /* @__PURE__ */ u("div", { className: "relative flex min-h-0 flex-col", children: [
           /* @__PURE__ */ e("div", { className: "absolute -top-4 right-4 z-50", children: /* @__PURE__ */ u(z, { variant: "outline", size: "sm", onClick: () => E(w, "right"), children: [
-            l === "right" ? /* @__PURE__ */ e(F, { className: "text-green-500" }) : /* @__PURE__ */ e(H, {}),
+            a === "right" ? /* @__PURE__ */ e(F, { className: "text-green-500" }) : /* @__PURE__ */ e(H, {}),
             "Copy"
           ] }) }),
           /* @__PURE__ */ e(A, { className: "flex-1 rounded-lg bg-slate-50 p-3 dark:bg-slate-900", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap font-mono text-xs", children: L(w) }) })
@@ -240,7 +240,7 @@ function Oe({ open: t, compare: n, onOpenChange: o }) {
         /* @__PURE__ */ e(B, { className: "mx-auto mb-2 h-8 w-8 opacity-50" }),
         /* @__PURE__ */ e("p", { children: "No differences found or unable to parse diff" })
       ] }) }) : /* @__PURE__ */ e("div", { children: M.map((i, v) => /* @__PURE__ */ e("div", { className: "relative mb-4", children: /* @__PURE__ */ e(
-        le,
+        ae,
         {
           viewType: f,
           diffType: i.type,
@@ -248,7 +248,7 @@ function Oe({ open: t, compare: n, onOpenChange: o }) {
           className: "rounded-lg text-xs",
           children: (k) => k.map((C, J) => {
             const b = y ? xe(C.changes) : C.changes;
-            return (b == null ? void 0 : b.length) === 0 ? /* @__PURE__ */ e("div", { className: "absolute h-full w-full border-l pt-64 text-center font-sans text-sm", children: /* @__PURE__ */ e("span", { children: "No difference found" }) }) : /* @__PURE__ */ e(ae, { hunk: { ...C, changes: b } }, J);
+            return (b == null ? void 0 : b.length) === 0 ? /* @__PURE__ */ e("div", { className: "absolute h-full w-full border-l pt-64 text-center font-sans text-sm", children: /* @__PURE__ */ e("span", { children: "No difference found" }) }) : /* @__PURE__ */ e(le, { hunk: { ...C, changes: b } }, J);
           })
         },
         y ? "hide-common-data" : "show-common-data"

package/dist/{lang-panel-q04hEq5o.js → lang-panel-BAaaP4Qc.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as s, Fragment as M } from "react/jsx-runtime";
 import { D as j, z as F, B as A } from "./register-chai-top-bar-D6GjnauV.js";
-import { D as B, e as H, f as O, g as W, p as q, q as R, r as J, d as K, s as Q, t as V, v as X, w } from "./index-BFnMzGe6.js";
-import { au as Y, m as T, L as I, av as Z, l as ee, aw as se, j as ae, ax as f, ay as o } from "./index-CA1OwKJX.js";
+import { D as B, e as H, f as O, g as W, p as q, q as R, r as J, d as K, s as Q, t as V, v as X, w } from "./index-DsQXiNA_.js";
+import { au as Y, m as T, L as I, av as Z, l as ee, aw as se, j as ae, ax as f, ay as o } from "./index-DtMksfXx.js";
 import { find as G, startsWith as E, isEqual as ne, filter as te, get as D, map as le, isEmpty as ie } from "lodash-es";
 import { AlertCircle as re, StarIcon as ce, MoreHorizontal as oe, PencilIcon as de, Power as me, TrashIcon as ue } from "lucide-react";
 import { useState as S, useMemo as he, Suspense as L, lazy as z } from "react";
@@ -81,7 +81,7 @@ const fe = ({ page: a, onClose: g }) => {
       /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(A, { type: "submit", disabled: y || !E(i, `/${d}`) || ne(a == null ? void 0 : a.slug, i), children: l(y ? "Changing..." : "Change Slug") }) })
     ] })
   ] }) });
-}, Ne = z(() => import("./delete-page-41tvYcEw.js")), ye = z(() => import("./unpublish-page-CxkjTzBB.js")), ke = () => {
+}, Ne = z(() => import("./delete-page-LnzR01A8.js")), ye = z(() => import("./unpublish-page-U_79Pwc0.js")), ke = () => {
   const { t: a } = U(), g = pe(Z), { selectedLang: l, fallbackLang: i, setSelectedLang: v } = K(), { data: N, isFetching: y } = ee(), { data: t } = se(), { data: r } = T(), x = he(() => {
     const n = r == null ? void 0 : r.find((h) => h.key === (t == null ? void 0 : t.pageType));
     return t != null && t.dynamic ? n == null ? void 0 : n.dynamicSlug : "";

package/dist/{lang-panel-BZsICcBR.cjs → lang-panel-BjDRrpwN.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("./register-chai-top-bar-DyW9GPzV.cjs"),a=require("./index-D30xvFa5.cjs"),n=require("./index-Bzn_gpaK.cjs"),r=require("lodash-es"),j=require("lucide-react"),c=require("react"),I=require("react-i18next"),L=require("sonner"),k=require("jotai"),M=({page:s,onClose:p})=>{const{t:l}=I.useTranslation(),[o,P]=c.useState(s.slug||""),{mutate:y,isPending:f}=n.useChangeSlug(),{data:i}=n.usePageTypes(),d=r.find(i,{key:s==null?void 0:s.pageType}),E=h=>{if(h.preventDefault(),!(s!=null&&s.primaryPage)&&Object.keys(n.LANGUAGES).some(S=>o===`/${S}`||r.startsWith(o,`/${S}/`))){L.toast.error(l("Error"),{description:l("Slugs cannot start with a language code for primary page")});return}y({...s,slug:o},{onSuccess:p})},m=(s==null?void 0:s.lang)||"";return e.jsx(a.Dialog,{open:!!s,onOpenChange:p,children:e.jsxs(a.DialogContent,{children:[e.jsxs(a.DialogHeader,{children:[e.jsx(a.DialogTitle,{children:l("Change Slug")}),e.jsx(a.DialogDescription,{className:"text-xs",children:e.jsxs(N.Alert,{variant:"destructive",className:"mt-2",children:[e.jsx(j.AlertCircle,{className:"h-4 w-4"}),l("Changing the slug may have impact on your SEO. Please proceed with caution.")]})})]}),e.jsxs("form",{onSubmit:E,children:[e.jsxs("div",{className:"space-y-4 py-4 text-sm",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{children:[e.jsxs("span",{children:[l("Type"),":"]}),e.jsxs("span",{className:"font-medium text-gray-600",children:[" ",(d==null?void 0:d.name)||(s==null?void 0:s.pageType)]})]}),e.jsxs("div",{children:[e.jsxs("span",{children:[l("Name"),":"]}),e.jsxs("span",{className:"font-medium text-gray-600",children:[" ",s.name]})]})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs(a.Label,{htmlFor:"slug",className:"text-right",children:[l("Slug")," ",e.jsxs("small",{className:"font-light text-gray-500",children:[l("Slug should start with")," /",m]})]}),e.jsx(N.Input,{id:"slug",value:o,onChange:h=>{const x=h.target.value;r.startsWith(x,`/${m}`)&&P(x)},className:"col-span-3",required:!0,pattern:"^/.*",title:l("Slug must start with /"),placeholder:l("Enter page slug")})]})]}),e.jsx(a.DialogFooter,{children:e.jsx(N.Button,{type:"submit",disabled:f||!r.startsWith(o,`/${m}`)||r.isEqual(s==null?void 0:s.slug,o),children:l(f?"Changing...":"Change Slug")})})]})]})})},T=c.lazy(()=>Promise.resolve().then(()=>require("./delete-page-BHPlx8ec.cjs"))),q=c.lazy(()=>Promise.resolve().then(()=>require("./unpublish-page-CPjHmtSM.cjs"))),_=()=>{const{t:s}=I.useTranslation(),p=k.useSetAtom(n.addNewLangAtom),{selectedLang:l,fallbackLang:o,setSelectedLang:P}=a.useLanguages(),{data:y,isFetching:f}=n.useLanguagePages(),{data:i}=n.useChaiCurrentPage(),{data:d}=n.usePageTypes(),E=c.useMemo(()=>{const t=d==null?void 0:d.find(g=>g.key===(i==null?void 0:i.pageType));return i!=null&&i.dynamic?t==null?void 0:t.dynamicSlug:""},[d,i==null?void 0:i.pageType,i==null?void 0:i.dynamic]),[m,h]=c.useState(null),[x,C]=c.useState(null),[S,A]=c.useState(null),{data:b}=n.useWebsiteSetting(),D=r.filter(r.get(b,"languages")||["en"],t=>!r.find(y,{lang:t})&&t!==r.get(b,"fallbackLang"));return e.jsxs("div",{className:"space-y-4",children:[e.jsx("ul",{className:"space-y-2",children:f?e.jsxs("div",{className:"w-full space-y-3 py-4",children:[e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"}),e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"}),e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"})]}):r.map(y,t=>{const g=t.lang,v=t.slug,w=!t.primaryPage,G=g===l;return e.jsxs(e.Fragment,{children:[e.jsxs("li",{className:`flex w-full cursor-pointer items-center justify-between rounded p-2 text-slate-500 ${G?"bg-gray-200":"hover:bg-gray-100"}`,onClick:()=>P(g),children:[e.jsxs("div",{className:"flex-1 gap-x-3",children:[e.jsxs("div",{className:"flex items-center gap-x-2 text-[13px] text-slate-800",children:[e.jsx("div",{className:`h-2.5 w-2.5 rounded-full ${t.online?"bg-green-300":"bg-gray-300"}`}),r.get(n.LANGUAGES,w?o:g,g)]}),e.jsxs("div",{children:[v&&e.jsxs("div",{className:"text-[11px] font-light text-slate-600",children:["Slug: ",e.jsx("b",{className:"font-mono font-medium",children:E?`${v}/${E}`:v})]}),e.jsxs("div",{className:"text-[11px] font-light text-slate-600",children:["Name:",e.jsxs("b",{className:"font-medium",children:[" ",t.name," "]})]})]})]}),w?e.jsxs("div",{className:"flex items-center gap-x-1 text-[11px] text-orange-500",children:[e.jsx(j.StarIcon,{fill:"orange",className:"h-3 w-3"}),e.jsx("b",{children:" Primary"})]}):e.jsx("div",{className:"flex items-center gap-x-3",children:e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.EDIT_PAGE,n.PAGES_PERMISSIONS.DELETE_PAGE,n.PAGES_PERMISSIONS.UNPUBLISH_PAGE],children:e.jsxs(a.DropdownMenu,{children:[e.jsx(a.DropdownMenuTrigger,{asChild:!0,onClick:u=>u.stopPropagation(),children:e.jsx(N.Button,{variant:"ghost",size:"sm",className:"h-8 w-8 p-0",children:e.jsx(j.MoreHorizontal,{className:"h-4 w-4"})})}),e.jsxs(a.DropdownMenuContent,{align:"end",className:"z-[9999] text-sm",children:[e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.EDIT_PAGE],children:e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),p({edit:!0,id:t.id,primaryPage:t.primaryPage})},children:[e.jsx(j.PencilIcon,{className:"size-3"}),s("Edit")]})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.UNPUBLISH_PAGE],children:(t==null?void 0:t.online)&&e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),C(t)},children:[e.jsx(j.Power,{className:"size-3"}),s("Unpublish")]})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.DELETE_PAGE],children:e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),h(t)},children:[e.jsx(j.TrashIcon,{className:"size-3"}),s("Delete")]})})]})]})})})]},t.id),e.jsx("div",{className:"h-1 w-full border-b"})]})})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.ADD_PAGE],children:e.jsx("div",{className:"flex w-full justify-center",children:e.jsx(N.Button,{variant:"default",size:"sm",disabled:r.isEmpty(D),onClick:()=>{p({primaryPage:i==null?void 0:i.id,edit:!1})},children:s("Add new language page")})})}),m&&e.jsx(c.Suspense,{children:e.jsx(T,{page:m,onClose:()=>h(null)})}),x&&e.jsx(c.Suspense,{children:e.jsx(q,{page:x,onClose:()=>C(null)})}),S&&e.jsx(c.Suspense,{children:e.jsx(M,{page:S,onClose:()=>A(null)})})]})};exports.default=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("./register-chai-top-bar-DyW9GPzV.cjs"),a=require("./index-mPCp0j2h.cjs"),n=require("./index-CAhDwfHE.cjs"),r=require("lodash-es"),j=require("lucide-react"),c=require("react"),I=require("react-i18next"),L=require("sonner"),k=require("jotai"),M=({page:s,onClose:p})=>{const{t:l}=I.useTranslation(),[o,P]=c.useState(s.slug||""),{mutate:y,isPending:f}=n.useChangeSlug(),{data:i}=n.usePageTypes(),d=r.find(i,{key:s==null?void 0:s.pageType}),E=h=>{if(h.preventDefault(),!(s!=null&&s.primaryPage)&&Object.keys(n.LANGUAGES).some(S=>o===`/${S}`||r.startsWith(o,`/${S}/`))){L.toast.error(l("Error"),{description:l("Slugs cannot start with a language code for primary page")});return}y({...s,slug:o},{onSuccess:p})},m=(s==null?void 0:s.lang)||"";return e.jsx(a.Dialog,{open:!!s,onOpenChange:p,children:e.jsxs(a.DialogContent,{children:[e.jsxs(a.DialogHeader,{children:[e.jsx(a.DialogTitle,{children:l("Change Slug")}),e.jsx(a.DialogDescription,{className:"text-xs",children:e.jsxs(N.Alert,{variant:"destructive",className:"mt-2",children:[e.jsx(j.AlertCircle,{className:"h-4 w-4"}),l("Changing the slug may have impact on your SEO. Please proceed with caution.")]})})]}),e.jsxs("form",{onSubmit:E,children:[e.jsxs("div",{className:"space-y-4 py-4 text-sm",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{children:[e.jsxs("span",{children:[l("Type"),":"]}),e.jsxs("span",{className:"font-medium text-gray-600",children:[" ",(d==null?void 0:d.name)||(s==null?void 0:s.pageType)]})]}),e.jsxs("div",{children:[e.jsxs("span",{children:[l("Name"),":"]}),e.jsxs("span",{className:"font-medium text-gray-600",children:[" ",s.name]})]})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs(a.Label,{htmlFor:"slug",className:"text-right",children:[l("Slug")," ",e.jsxs("small",{className:"font-light text-gray-500",children:[l("Slug should start with")," /",m]})]}),e.jsx(N.Input,{id:"slug",value:o,onChange:h=>{const x=h.target.value;r.startsWith(x,`/${m}`)&&P(x)},className:"col-span-3",required:!0,pattern:"^/.*",title:l("Slug must start with /"),placeholder:l("Enter page slug")})]})]}),e.jsx(a.DialogFooter,{children:e.jsx(N.Button,{type:"submit",disabled:f||!r.startsWith(o,`/${m}`)||r.isEqual(s==null?void 0:s.slug,o),children:l(f?"Changing...":"Change Slug")})})]})]})})},T=c.lazy(()=>Promise.resolve().then(()=>require("./delete-page-D0tdn6VW.cjs"))),q=c.lazy(()=>Promise.resolve().then(()=>require("./unpublish-page-DEPFjGuu.cjs"))),_=()=>{const{t:s}=I.useTranslation(),p=k.useSetAtom(n.addNewLangAtom),{selectedLang:l,fallbackLang:o,setSelectedLang:P}=a.useLanguages(),{data:y,isFetching:f}=n.useLanguagePages(),{data:i}=n.useChaiCurrentPage(),{data:d}=n.usePageTypes(),E=c.useMemo(()=>{const t=d==null?void 0:d.find(g=>g.key===(i==null?void 0:i.pageType));return i!=null&&i.dynamic?t==null?void 0:t.dynamicSlug:""},[d,i==null?void 0:i.pageType,i==null?void 0:i.dynamic]),[m,h]=c.useState(null),[x,C]=c.useState(null),[S,A]=c.useState(null),{data:b}=n.useWebsiteSetting(),D=r.filter(r.get(b,"languages")||["en"],t=>!r.find(y,{lang:t})&&t!==r.get(b,"fallbackLang"));return e.jsxs("div",{className:"space-y-4",children:[e.jsx("ul",{className:"space-y-2",children:f?e.jsxs("div",{className:"w-full space-y-3 py-4",children:[e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"}),e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"}),e.jsx("div",{className:"h-8 w-full animate-pulse rounded bg-gray-300"})]}):r.map(y,t=>{const g=t.lang,v=t.slug,w=!t.primaryPage,G=g===l;return e.jsxs(e.Fragment,{children:[e.jsxs("li",{className:`flex w-full cursor-pointer items-center justify-between rounded p-2 text-slate-500 ${G?"bg-gray-200":"hover:bg-gray-100"}`,onClick:()=>P(g),children:[e.jsxs("div",{className:"flex-1 gap-x-3",children:[e.jsxs("div",{className:"flex items-center gap-x-2 text-[13px] text-slate-800",children:[e.jsx("div",{className:`h-2.5 w-2.5 rounded-full ${t.online?"bg-green-300":"bg-gray-300"}`}),r.get(n.LANGUAGES,w?o:g,g)]}),e.jsxs("div",{children:[v&&e.jsxs("div",{className:"text-[11px] font-light text-slate-600",children:["Slug: ",e.jsx("b",{className:"font-mono font-medium",children:E?`${v}/${E}`:v})]}),e.jsxs("div",{className:"text-[11px] font-light text-slate-600",children:["Name:",e.jsxs("b",{className:"font-medium",children:[" ",t.name," "]})]})]})]}),w?e.jsxs("div",{className:"flex items-center gap-x-1 text-[11px] text-orange-500",children:[e.jsx(j.StarIcon,{fill:"orange",className:"h-3 w-3"}),e.jsx("b",{children:" Primary"})]}):e.jsx("div",{className:"flex items-center gap-x-3",children:e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.EDIT_PAGE,n.PAGES_PERMISSIONS.DELETE_PAGE,n.PAGES_PERMISSIONS.UNPUBLISH_PAGE],children:e.jsxs(a.DropdownMenu,{children:[e.jsx(a.DropdownMenuTrigger,{asChild:!0,onClick:u=>u.stopPropagation(),children:e.jsx(N.Button,{variant:"ghost",size:"sm",className:"h-8 w-8 p-0",children:e.jsx(j.MoreHorizontal,{className:"h-4 w-4"})})}),e.jsxs(a.DropdownMenuContent,{align:"end",className:"z-[9999] text-sm",children:[e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.EDIT_PAGE],children:e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),p({edit:!0,id:t.id,primaryPage:t.primaryPage})},children:[e.jsx(j.PencilIcon,{className:"size-3"}),s("Edit")]})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.UNPUBLISH_PAGE],children:(t==null?void 0:t.online)&&e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),C(t)},children:[e.jsx(j.Power,{className:"size-3"}),s("Unpublish")]})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.DELETE_PAGE],children:e.jsxs(a.DropdownMenuItem,{className:"flex cursor-pointer items-center gap-2",onClick:u=>{u.stopPropagation(),h(t)},children:[e.jsx(j.TrashIcon,{className:"size-3"}),s("Delete")]})})]})]})})})]},t.id),e.jsx("div",{className:"h-1 w-full border-b"})]})})}),e.jsx(n.PermissionChecker,{permissions:[n.PAGES_PERMISSIONS.ADD_PAGE],children:e.jsx("div",{className:"flex w-full justify-center",children:e.jsx(N.Button,{variant:"default",size:"sm",disabled:r.isEmpty(D),onClick:()=>{p({primaryPage:i==null?void 0:i.id,edit:!1})},children:s("Add new language page")})})}),m&&e.jsx(c.Suspense,{children:e.jsx(T,{page:m,onClose:()=>h(null)})}),x&&e.jsx(c.Suspense,{children:e.jsx(q,{page:x,onClose:()=>C(null)})}),S&&e.jsx(c.Suspense,{children:e.jsx(M,{page:S,onClose:()=>A(null)})})]})};exports.default=_;

package/dist/library-blocks/bento/agency-showcase/agency-showcase.html

@@ -0,0 +1,175 @@
+<section chai-name="Agency Showcase Bento" class="relative overflow-hidden bg-background px-6 py-20 lg:py-28">
+  <div
+    class="absolute bottom-0 right-0 -z-10 h-80 w-80 translate-x-1/3 translate-y-1/3 rounded-full bg-primary/5 blur-3xl"></div>
+
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-14 text-center">
+      <span class="mb-3 inline-block font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary"
+        >Why Choose Us</span
+      >
+      <h2
+        class="mx-auto mb-4 max-w-3xl text-3xl font-extrabold leading-tight tracking-tight text-foreground sm:text-4xl lg:text-5xl">
+        A full-service agency built for the <span class="text-primary">modern era.</span>
+      </h2>
+      <p class="mx-auto max-w-lg text-base text-muted-foreground">
+        We combine strategy, design, and technology to deliver experiences that move the needle.
+      </p>
+    </div>
+
+    <div chai-name="Bento Grid" class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-3 lg:grid-rows-3">
+      <div class="group relative overflow-hidden rounded-md border border-border bg-card md:col-span-2 md:row-span-2">
+        <img
+          src="https://picsum.photos/seed/agency-hero-work/900/700"
+          alt="Agency team working on a large-scale brand campaign in a modern studio"
+          class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+          width="900"
+          height="700" />
+        <div class="absolute inset-0 bg-gradient-to-t from-card via-card/30 to-transparent"></div>
+        <div class="absolute bottom-0 left-0 right-0 p-8">
+          <span
+            class="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-primary-foreground"
+            >Case Study</span
+          >
+          <h3 class="mb-2 text-2xl font-bold text-foreground">Vectro Global Launch</h3>
+          <p class="max-w-md text-sm text-muted-foreground">
+            Full rebrand, website, and launch campaign that drove 340% increase in qualified leads within 90 days.
+          </p>
+          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-primary">
+            Read case study
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
+          </a>
+        </div>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-primary p-8 text-primary-foreground transition-all hover:shadow-lg">
+        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-primary-foreground/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-primary-foreground">
+            <path
+              d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-lg font-bold">Award-Winning</h3>
+        <p class="text-sm leading-relaxed text-primary-foreground/70">
+          15+ industry awards including Webby, Awwwards, and Communication Arts.
+        </p>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-card p-8 transition-all hover:border-primary/30 hover:shadow-lg">
+        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-accent">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-accent-foreground">
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-lg font-bold text-foreground">Fast Turnaround</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Agile sprints with weekly deliverables. Most projects launch within 6–8 weeks.
+        </p>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-card p-8 transition-all hover:border-primary/30 hover:shadow-lg md:col-span-2">
+        <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div>
+            <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-secondary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-secondary-foreground">
+                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
+            </div>
+            <h3 class="mb-2 text-lg font-bold text-foreground">Dedicated Team Model</h3>
+            <p class="max-w-sm text-sm leading-relaxed text-muted-foreground">
+              Every client gets a dedicated strategist, designer, and developer. No hand-offs, no miscommunication.
+            </p>
+          </div>
+          <div class="flex flex-shrink-0 items-center gap-6 rounded-md border border-border bg-background px-6 py-4">
+            <div class="text-center">
+              <div class="text-2xl font-bold text-foreground">48</div>
+              <div class="text-[10px] text-muted-foreground">Team members</div>
+            </div>
+            <div class="h-8 w-px bg-border"></div>
+            <div class="text-center">
+              <div class="text-2xl font-bold text-foreground">6</div>
+              <div class="text-[10px] text-muted-foreground">Time zones</div>
+            </div>
+            <div class="h-8 w-px bg-border"></div>
+            <div class="text-center">
+              <div class="text-2xl font-bold text-foreground">3</div>
+              <div class="text-[10px] text-muted-foreground">Offices</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-foreground p-8 text-background transition-all hover:shadow-lg">
+        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-background/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-background">
+            <path
+              d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9" />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-lg font-bold">Global Reach</h3>
+        <p class="text-sm leading-relaxed text-background/70">
+          Clients across 28 countries. Multilingual campaigns in 12+ languages.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/bento/creative-portfolio/creative-portfolio.html

@@ -0,0 +1,116 @@
+<section chai-name="Creative Portfolio Bento" class="relative bg-card px-6 py-20 lg:py-28">
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-14 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <div class="mb-3 flex items-center gap-3">
+          <div class="h-px w-10 bg-primary"></div>
+          <span class="text-sm font-semibold text-primary">Selected Work</span>
+        </div>
+        <h2 class="max-w-md font-serif text-3xl font-light leading-tight text-foreground sm:text-4xl lg:text-5xl">
+          Projects that
+          <em class="not-italic text-primary">define</em> brands.
+        </h2>
+      </div>
+      <a
+        href="#"
+        class="inline-flex items-center gap-2 text-sm font-semibold text-foreground underline underline-offset-4 transition-colors hover:text-primary">
+        View all projects
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path d="m7 7 10 10" />
+          <path d="M17 7v10H7" />
+        </svg>
+      </a>
+    </div>
+
+    <div chai-name="Bento Mosaic" class="grid grid-cols-2 gap-3 md:grid-cols-4 md:grid-rows-3 lg:gap-4">
+      <div class="group relative col-span-2 row-span-2 overflow-hidden rounded-md border border-border bg-background">
+        <img
+          src="https://picsum.photos/seed/portfolio-hero-project/800/700"
+          alt="Brand identity project for luxury fashion label"
+          class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+          width="800"
+          height="700" />
+        <div class="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
+        <div class="absolute bottom-0 left-0 right-0 p-6 lg:p-8">
+          <span
+            class="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-primary-foreground"
+            >Featured</span
+          >
+          <h3 class="mb-1 text-xl font-bold text-foreground lg:text-2xl">Meridian Rebrand</h3>
+          <p class="text-sm text-muted-foreground">Brand Identity &amp; Digital Strategy</p>
+        </div>
+      </div>
+
+      <div class="group relative overflow-hidden rounded-md border border-border bg-background">
+        <img
+          src="https://picsum.photos/seed/portfolio-project2/400/350"
+          alt="Mobile app interface design for fintech startup"
+          class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+          width="400"
+          height="350" />
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-background/90 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
+          <div class="absolute bottom-0 left-0 right-0 p-4">
+            <h3 class="text-sm font-bold text-foreground">Flux Finance</h3>
+            <p class="text-xs text-muted-foreground">Mobile App Design</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="group relative overflow-hidden rounded-md border border-border bg-background">
+        <img
+          src="https://picsum.photos/seed/portfolio-project3/400/350"
+          alt="E-commerce website redesign with modern aesthetics"
+          class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+          width="400"
+          height="350" />
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-background/90 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
+          <div class="absolute bottom-0 left-0 right-0 p-4">
+            <h3 class="text-sm font-bold text-foreground">Aura Commerce</h3>
+            <p class="text-xs text-muted-foreground">E-commerce Redesign</p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-primary p-6 transition-all hover:shadow-lg">
+        <div class="flex h-full flex-col justify-between">
+          <div>
+            <div class="text-4xl font-black text-primary-foreground">140+</div>
+            <div class="mt-1 text-sm text-primary-foreground/70">Projects delivered worldwide</div>
+          </div>
+          <div class="mt-4 flex items-center gap-2">
+            <div class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary-foreground"></div>
+            <span class="text-xs font-medium text-primary-foreground/80">Currently accepting projects</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="group relative overflow-hidden rounded-md border border-border bg-background">
+        <img
+          src="https://picsum.photos/seed/portfolio-project4/400/350"
+          alt="Packaging design for organic skincare brand"
+          class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+          width="400"
+          height="350" />
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-background/90 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
+          <div class="absolute bottom-0 left-0 right-0 p-4">
+            <h3 class="text-sm font-bold text-foreground">Botanica Packaging</h3>
+            <p class="text-xs text-muted-foreground">Packaging &amp; Print</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>