@definable/ui 0.1.13 → 0.1.15

package/dist/components/image-cropper-modal.js

@@ -1,2 +1,250 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../jsx-runtime-BYECrxsp.cjs"),o=require("react"),C=require("./button.js"),B=require("./modal.js"),U=require("./label.js"),k=require("lucide-react");function A({isOpen:x,onClose:j,imageSrc:m,onCrop:D,title:Y="Crop Your Image",outputSize:h=200}){const[t,g]=o.useState({x:0,y:0,size:100}),[y,b]=o.useState(!1),[R,w]=o.useState(!1),[z,I]=o.useState({x:0,y:0}),[r,P]=o.useState({width:0,height:0}),E=o.useRef(null),p=o.useRef(null),q=o.useCallback(()=>{if(p.current){const e=p.current,n=400,l=e.naturalWidth/e.naturalHeight;let a,i;l>1?(a=n,i=n/l):(i=n,a=n*l),P({width:a,height:i});const c=Math.min(a,i)*.6;g({x:(a-c)/2,y:(i-c)/2,size:c})}},[]),f=o.useCallback((e,n)=>{e.preventDefault();const l=e.currentTarget.getBoundingClientRect(),a=e.clientX-l.left,i=e.clientY-l.top;if(n==="resize"){w(!0);const c=t.x+t.size/2,u=t.y+t.size/2,d=Math.sqrt((a-c)**2+(i-u)**2);I({x:d,y:0})}else b(!0),I({x:a-t.x,y:i-t.y})},[t]),$=o.useCallback(e=>{if(!y&&!R)return;const n=e.currentTarget.getBoundingClientRect(),l=e.clientX-n.left,a=e.clientY-n.top;if(R){const i=t.x+t.size/2,c=t.y+t.size/2,u=Math.sqrt((l-i)**2+(a-c)**2),d=Math.max(50,Math.min(Math.min(r.width,r.height),u*2));g({x:Math.max(0,Math.min(r.width-d,i-d/2)),y:Math.max(0,Math.min(r.height-d,c-d/2)),size:d})}else if(y){const i=l-z.x,c=a-z.y,u=r.width-t.size,d=r.height-t.size;g(N=>({...N,x:Math.max(0,Math.min(u,i)),y:Math.max(0,Math.min(d,c))}))}},[y,R,z,r,t]),X=o.useCallback(()=>{b(!1),w(!1)},[]),L=o.useCallback(()=>{if(r.width&&r.height){const e=Math.min(r.width,r.height)*.6;g({x:(r.width-e)/2,y:(r.height-e)/2,size:e})}},[r]),S=o.useCallback(()=>{if(!E.current||!p.current)return;const e=E.current,n=e.getContext("2d");if(!n)return;const l=p.current;e.width=h,e.height=h;const a=l.naturalWidth/r.width,i=l.naturalHeight/r.height,c=t.x*a,u=t.y*i,d=t.size*Math.min(a,i);n.beginPath(),n.arc(h/2,h/2,h/2,0,Math.PI*2),n.clip(),n.drawImage(l,c,u,d,d,0,0,h,h);const N=e.toDataURL("image/png");D(N),j()},[t,r,D,j,h]),v=o.useCallback(()=>{b(!1),w(!1),g({x:0,y:0,size:100}),j()},[j]),M=o.useCallback(e=>{e.key==="Escape"&&x&&(e.stopPropagation(),v())},[x,v]);return o.useEffect(()=>{if(x)return document.addEventListener("keydown",M,!0),()=>document.removeEventListener("keydown",M,!0)},[x,M]),o.useEffect(()=>{x&&m&&(b(!1),w(!1),P({width:0,height:0}))},[x,m]),m?s.jsxRuntimeExports.jsx(B.Modal,{isOpen:x,onClose:v,title:Y,size:"2xl",zIndexClassName:"z-[60]",footer:s.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-between w-full",children:[s.jsxRuntimeExports.jsxs(C.Button,{variant:"ghost",size:"sm",onClick:L,className:"flex items-center gap-2",children:[s.jsxRuntimeExports.jsx(k.RotateCcw,{className:"h-4 w-4"}),"Reset"]}),s.jsxRuntimeExports.jsxs("div",{className:"flex gap-3",children:[s.jsxRuntimeExports.jsxs(C.Button,{variant:"outline",onClick:v,children:[s.jsxRuntimeExports.jsx(k.X,{className:"h-4 w-4 mr-2"}),"Cancel"]}),s.jsxRuntimeExports.jsxs(C.Button,{onClick:S,children:[s.jsxRuntimeExports.jsx(k.Check,{className:"h-4 w-4 mr-2"}),"Crop Image"]})]})]}),children:s.jsxRuntimeExports.jsxs("div",{className:"p-6",children:[s.jsxRuntimeExports.jsxs("div",{className:"space-y-6",children:[s.jsxRuntimeExports.jsx("div",{className:"text-center",children:s.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:"Drag the circle to move • Drag corners to resize • Click reset to center"})}),s.jsxRuntimeExports.jsx("div",{className:"flex justify-center",children:s.jsxRuntimeExports.jsxs("div",{className:"relative bg-gray-100 rounded-xl overflow-hidden select-none border",style:{width:r.width,height:r.height},onMouseMove:$,onMouseUp:X,onMouseLeave:X,children:[s.jsxRuntimeExports.jsx("img",{ref:p,src:m,alt:"Crop preview",className:"block",style:{width:r.width,height:r.height},onLoad:q,draggable:!1}),s.jsxRuntimeExports.jsxs("div",{className:"absolute border-2 border-white rounded-full shadow-lg cursor-move",style:{left:t.x,top:t.y,width:t.size,height:t.size},onMouseDown:e=>f(e,"move"),children:[s.jsxRuntimeExports.jsx("div",{className:"w-full h-full rounded-full border-2 border-primary border-dashed"}),s.jsxRuntimeExports.jsx("div",{className:"absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-nw-resize -top-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",onMouseDown:e=>{e.stopPropagation(),f(e,"resize")},children:s.jsxRuntimeExports.jsx("div",{className:"w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors"})}),s.jsxRuntimeExports.jsx("div",{className:"absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-ne-resize -bottom-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",onMouseDown:e=>{e.stopPropagation(),f(e,"resize")},children:s.jsxRuntimeExports.jsx("div",{className:"w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors"})}),s.jsxRuntimeExports.jsx("div",{className:"absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-sw-resize -bottom-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",onMouseDown:e=>{e.stopPropagation(),f(e,"resize")},children:s.jsxRuntimeExports.jsx("div",{className:"w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors"})}),s.jsxRuntimeExports.jsx("div",{className:"absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-se-resize -top-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",onMouseDown:e=>{e.stopPropagation(),f(e,"resize")},children:s.jsxRuntimeExports.jsx("div",{className:"w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors"})})]}),s.jsxRuntimeExports.jsx("div",{className:"absolute inset-0 bg-black/50 pointer-events-none",style:{clipPath:`circle(${t.size/2}px at ${t.x+t.size/2}px ${t.y+t.size/2}px)`}})]})}),s.jsxRuntimeExports.jsx("div",{className:"flex justify-center",children:s.jsxRuntimeExports.jsxs("div",{className:"text-center",children:[s.jsxRuntimeExports.jsx(U.Label,{className:"text-xs font-medium text-muted-foreground mb-2 block",children:"Preview"}),s.jsxRuntimeExports.jsx("div",{className:"rounded-full border-2 border-border bg-background overflow-hidden mx-auto",style:{width:80,height:80},children:s.jsxRuntimeExports.jsx("div",{className:"w-full h-full bg-gray-100",style:{backgroundImage:`url(${m})`,backgroundSize:`${r.width/t.size*80}px ${r.height/t.size*80}px`,backgroundPosition:`-${t.x/t.size*80}px -${t.y/t.size*80}px`,backgroundRepeat:"no-repeat"}})})]})})]}),s.jsxRuntimeExports.jsx("canvas",{ref:E,className:"hidden"})]})}):null}exports.ImageCropperModal=A;
-//# sourceMappingURL=image-cropper-modal.js.map
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { useState as x, useRef as L, useCallback as m, useEffect as E } from "react";
+import { Button as P } from "./button.js";
+import { Modal as q } from "./modal.js";
+import { Label as T } from "./label.js";
+import { RotateCcw as K, X as F, Check as G } from "lucide-react";
+function O({
+  isOpen: g,
+  onClose: v,
+  imageSrc: f,
+  onCrop: j,
+  title: U = "Crop Your Image",
+  outputSize: h = 200
+}) {
+  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, y] = x(!1), [k, z] = x(!1), [C, X] = x({ x: 0, y: 0 }), [r, Y] = x({ width: 0, height: 0 }), D = L(null), b = L(null), A = m(() => {
+    if (b.current) {
+      const e = b.current, i = 400, a = e.naturalWidth / e.naturalHeight;
+      let n, o;
+      a > 1 ? (n = i, o = i / a) : (o = i, n = i * a), Y({ width: n, height: o });
+      const l = Math.min(n, o) * 0.6;
+      w({
+        x: (n - l) / 2,
+        y: (o - l) / 2,
+        size: l
+      });
+    }
+  }, []), p = m((e, i) => {
+    e.preventDefault();
+    const a = e.currentTarget.getBoundingClientRect(), n = e.clientX - a.left, o = e.clientY - a.top;
+    if (i === "resize") {
+      z(!0);
+      const l = t.x + t.size / 2, u = t.y + t.size / 2, c = Math.sqrt((n - l) ** 2 + (o - u) ** 2);
+      X({ x: c, y: 0 });
+    } else
+      y(!0), X({ x: n - t.x, y: o - t.y });
+  }, [t]), B = m((e) => {
+    if (!N && !k) return;
+    const i = e.currentTarget.getBoundingClientRect(), a = e.clientX - i.left, n = e.clientY - i.top;
+    if (k) {
+      const o = t.x + t.size / 2, l = t.y + t.size / 2, u = Math.sqrt((a - o) ** 2 + (n - l) ** 2), c = Math.max(50, Math.min(Math.min(r.width, r.height), u * 2));
+      w({
+        x: Math.max(0, Math.min(r.width - c, o - c / 2)),
+        y: Math.max(0, Math.min(r.height - c, l - c / 2)),
+        size: c
+      });
+    } else if (N) {
+      const o = a - C.x, l = n - C.y, u = r.width - t.size, c = r.height - t.size;
+      w((R) => ({
+        ...R,
+        x: Math.max(0, Math.min(u, o)),
+        y: Math.max(0, Math.min(c, l))
+      }));
+    }
+  }, [N, k, C, r, t]), $ = m(() => {
+    y(!1), z(!1);
+  }, []), H = m(() => {
+    if (r.width && r.height) {
+      const e = Math.min(r.width, r.height) * 0.6;
+      w({
+        x: (r.width - e) / 2,
+        y: (r.height - e) / 2,
+        size: e
+      });
+    }
+  }, [r]), W = m(() => {
+    if (!D.current || !b.current) return;
+    const e = D.current, i = e.getContext("2d");
+    if (!i) return;
+    const a = b.current;
+    e.width = h, e.height = h;
+    const n = a.naturalWidth / r.width, o = a.naturalHeight / r.height, l = t.x * n, u = t.y * o, c = t.size * Math.min(n, o);
+    i.beginPath(), i.arc(h / 2, h / 2, h / 2, 0, Math.PI * 2), i.clip(), i.drawImage(
+      a,
+      l,
+      u,
+      c,
+      c,
+      0,
+      0,
+      h,
+      h
+    );
+    const R = e.toDataURL("image/png");
+    j(R), v();
+  }, [t, r, j, v, h]), M = m(() => {
+    y(!1), z(!1), w({ x: 0, y: 0, size: 100 }), v();
+  }, [v]), I = m((e) => {
+    e.key === "Escape" && g && (e.stopPropagation(), M());
+  }, [g, M]);
+  return E(() => {
+    if (g)
+      return document.addEventListener("keydown", I, !0), () => document.removeEventListener("keydown", I, !0);
+  }, [g, I]), E(() => {
+    g && f && (y(!1), z(!1), Y({ width: 0, height: 0 }));
+  }, [g, f]), f ? /* @__PURE__ */ s(
+    q,
+    {
+      isOpen: g,
+      onClose: M,
+      title: U,
+      size: "2xl",
+      zIndexClassName: "z-[60]",
+      footer: /* @__PURE__ */ d("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ d(
+          P,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: H,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ s(K, { className: "h-4 w-4" }),
+              "Reset"
+            ]
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ d(P, { variant: "outline", onClick: M, children: [
+            /* @__PURE__ */ s(F, { className: "h-4 w-4 mr-2" }),
+            "Cancel"
+          ] }),
+          /* @__PURE__ */ d(P, { onClick: W, children: [
+            /* @__PURE__ */ s(G, { className: "h-4 w-4 mr-2" }),
+            "Crop Image"
+          ] })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ d("div", { className: "p-6", children: [
+        /* @__PURE__ */ d("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ s("div", { className: "text-center", children: /* @__PURE__ */ s("p", { className: "text-sm text-muted-foreground", children: "Drag the circle to move • Drag corners to resize • Click reset to center" }) }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d(
+            "div",
+            {
+              className: "relative bg-gray-100 rounded-xl overflow-hidden select-none border",
+              style: { width: r.width, height: r.height },
+              onMouseMove: B,
+              onMouseUp: $,
+              onMouseLeave: $,
+              children: [
+                /* @__PURE__ */ s(
+                  "img",
+                  {
+                    ref: b,
+                    src: f,
+                    alt: "Crop preview",
+                    className: "block",
+                    style: { width: r.width, height: r.height },
+                    onLoad: A,
+                    draggable: !1
+                  }
+                ),
+                /* @__PURE__ */ d(
+                  "div",
+                  {
+                    className: "absolute border-2 border-white rounded-full shadow-lg cursor-move",
+                    style: {
+                      left: t.x,
+                      top: t.y,
+                      width: t.size,
+                      height: t.size
+                    },
+                    onMouseDown: (e) => p(e, "move"),
+                    children: [
+                      /* @__PURE__ */ s("div", { className: "w-full h-full rounded-full border-2 border-primary border-dashed" }),
+                      /* @__PURE__ */ s(
+                        "div",
+                        {
+                          className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-nw-resize -top-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
+                          onMouseDown: (e) => {
+                            e.stopPropagation(), p(e, "resize");
+                          },
+                          children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        "div",
+                        {
+                          className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-ne-resize -bottom-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
+                          onMouseDown: (e) => {
+                            e.stopPropagation(), p(e, "resize");
+                          },
+                          children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        "div",
+                        {
+                          className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-sw-resize -bottom-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
+                          onMouseDown: (e) => {
+                            e.stopPropagation(), p(e, "resize");
+                          },
+                          children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        "div",
+                        {
+                          className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-se-resize -top-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
+                          onMouseDown: (e) => {
+                            e.stopPropagation(), p(e, "resize");
+                          },
+                          children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "absolute inset-0 bg-black/50 pointer-events-none",
+                    style: {
+                      clipPath: `circle(${t.size / 2}px at ${t.x + t.size / 2}px ${t.y + t.size / 2}px)`
+                    }
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d("div", { className: "text-center", children: [
+            /* @__PURE__ */ s(T, { className: "text-xs font-medium text-muted-foreground mb-2 block", children: "Preview" }),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                className: "rounded-full border-2 border-border bg-background overflow-hidden mx-auto",
+                style: { width: 80, height: 80 },
+                children: /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "w-full h-full bg-gray-100",
+                    style: {
+                      backgroundImage: `url(${f})`,
+                      backgroundSize: `${r.width / t.size * 80}px ${r.height / t.size * 80}px`,
+                      backgroundPosition: `-${t.x / t.size * 80}px -${t.y / t.size * 80}px`,
+                      backgroundRepeat: "no-repeat"
+                    }
+                  }
+                )
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ s("canvas", { ref: D, className: "hidden" })
+      ] })
+    }
+  ) : null;
+}
+export {
+  O as ImageCropperModal
+};

package/dist/components/image-cropper.js

@@ -1,2 +1,130 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),r=require("react"),p=require("./button.js"),i=require("lucide-react"),w=require("./image-cropper-modal.js"),I=require("../utils-DSKoFOjv.cjs");function M({value:c,onChange:n,size:a=120,className:j,placeholder:g="Upload Image",title:h="Crop Your Image",outputSize:R=200}){const[f,u]=r.useState(!1),[b,l]=r.useState(null),o=r.useRef(null),E=r.useCallback(t=>{var m;const s=(m=t.target.files)==null?void 0:m[0];if(s){const x=new FileReader;x.onload=y=>{var d;const k=(d=y.target)==null?void 0:d.result;l(k),u(!0)},x.readAsDataURL(s)}t.target.value=""},[]),C=r.useCallback(t=>{n(t),l(null)},[n]),v=r.useCallback(()=>{u(!1),l(null),o.current&&(o.current.value="")},[]),N=r.useCallback(()=>{n(null)},[n]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("div",{className:I.cn("space-y-3",j),children:[c?e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsxRuntimeExports.jsx("div",{className:"rounded-full border-2 border-border overflow-hidden bg-background",style:{width:a,height:a},children:e.jsxRuntimeExports.jsx("img",{src:c,alt:"Agent avatar",className:"w-full h-full object-cover"})}),e.jsxRuntimeExports.jsxs("div",{className:"flex gap-2",children:[e.jsxRuntimeExports.jsxs(p.Button,{variant:"outline",size:"sm",onClick:t=>{var s;t.stopPropagation(),(s=o.current)==null||s.click()},children:[e.jsxRuntimeExports.jsx(i.RotateCw,{className:"h-3 w-3 mr-1"}),"Replace"]}),e.jsxRuntimeExports.jsxs(p.Button,{variant:"outline",size:"sm",onClick:N,children:[e.jsxRuntimeExports.jsx(i.X,{className:"h-3 w-3 mr-1"}),"Remove"]})]})]}):e.jsxRuntimeExports.jsxs("button",{onClick:t=>{var s;t.stopPropagation(),(s=o.current)==null||s.click()},className:"w-full border-2 border-dashed border-border/50 rounded-lg p-6 hover:border-primary/50 hover:bg-primary/2 transition-colors group",children:[e.jsxRuntimeExports.jsx("div",{className:"mx-auto rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/15 transition-colors mb-3",style:{width:Math.min(a/2,60),height:Math.min(a/2,60)},children:e.jsxRuntimeExports.jsx(i.Upload,{className:"h-6 w-6 text-primary"})}),e.jsxRuntimeExports.jsx("p",{className:"text-sm font-medium text-foreground mb-1",children:g}),e.jsxRuntimeExports.jsx("p",{className:"text-xs text-muted-foreground",children:"Click to browse"})]}),e.jsxRuntimeExports.jsx("input",{ref:o,type:"file",accept:"image/*",onChange:E,className:"hidden"})]}),e.jsxRuntimeExports.jsx(w.ImageCropperModal,{isOpen:f,onClose:v,imageSrc:b,onCrop:C,title:h,outputSize:R})]})}exports.ImageCropper=M;
-//# sourceMappingURL=image-cropper.js.map
+import { jsxs as t, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { useState as f, useRef as S, useCallback as i } from "react";
+import { Button as h } from "./button.js";
+import { RotateCw as F, X as O, Upload as U } from "lucide-react";
+import { ImageCropperModal as A } from "./image-cropper-modal.js";
+import { cn as E } from "../lib/utils.js";
+function Y({
+  value: c,
+  onChange: a,
+  size: n = 120,
+  className: g,
+  placeholder: b = "Upload Image",
+  title: v = "Crop Your Image",
+  outputSize: x = 200
+}) {
+  const [C, d] = f(!1), [N, s] = f(null), l = S(null), w = i((r) => {
+    var m;
+    const o = (m = r.target.files) == null ? void 0 : m[0];
+    if (o) {
+      const p = new FileReader();
+      p.onload = (R) => {
+        var u;
+        const M = (u = R.target) == null ? void 0 : u.result;
+        s(M), d(!0);
+      }, p.readAsDataURL(o);
+    }
+    r.target.value = "";
+  }, []), y = i((r) => {
+    a(r), s(null);
+  }, [a]), k = i(() => {
+    d(!1), s(null), l.current && (l.current.value = "");
+  }, []), I = i(() => {
+    a(null);
+  }, [a]);
+  return /* @__PURE__ */ t(j, { children: [
+    /* @__PURE__ */ t("div", { className: E("space-y-3", g), children: [
+      c ? /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "rounded-full border-2 border-border/50 overflow-hidden bg-background",
+            style: { width: n, height: n },
+            children: /* @__PURE__ */ e(
+              "img",
+              {
+                src: c,
+                alt: "Agent avatar",
+                className: "w-full h-full object-cover"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ t(
+            h,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: (r) => {
+                var o;
+                r.stopPropagation(), (o = l.current) == null || o.click();
+              },
+              children: [
+                /* @__PURE__ */ e(F, { className: "h-3 w-3 mr-1" }),
+                "Replace"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            h,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: I,
+              children: [
+                /* @__PURE__ */ e(O, { className: "h-3 w-3 mr-1" }),
+                "Remove"
+              ]
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: (r) => {
+            var o;
+            r.stopPropagation(), (o = l.current) == null || o.click();
+          },
+          className: "w-full border-2 border-dashed border-border/50 rounded-lg p-6 hover:border-primary/50 hover:bg-primary/2 transition-colors group",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "mx-auto rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/15 transition-colors mb-3",
+                style: { width: Math.min(n / 2, 60), height: Math.min(n / 2, 60) },
+                children: /* @__PURE__ */ e(U, { className: "h-6 w-6 text-primary" })
+              }
+            ),
+            /* @__PURE__ */ e("p", { className: "text-sm font-medium text-foreground mb-1", children: b }),
+            /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: "Click to browse" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: l,
+          type: "file",
+          accept: "image/*",
+          onChange: w,
+          className: "hidden"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      A,
+      {
+        isOpen: C,
+        onClose: k,
+        imageSrc: N,
+        onCrop: y,
+        title: v,
+        outputSize: x
+      }
+    )
+  ] });
+}
+export {
+  Y as ImageCropper
+};

package/dist/components/input.js

@@ -1,2 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../jsx-runtime-BYECrxsp.cjs"),s=require("react"),u=require("../utils-DSKoFOjv.cjs");function l(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const c=l(s),o=c.forwardRef(({className:e,type:r,...t},n)=>i.jsxRuntimeExports.jsx("input",{type:r,className:u.cn("flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e),ref:n,...t}));o.displayName="Input";exports.Input=o;
-//# sourceMappingURL=input.js.map
+import { jsx as a } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as i } from "../lib/utils.js";
+const l = d.forwardRef(
+  ({ className: r, type: o, ...e }, t) => /* @__PURE__ */ a(
+    "input",
+    {
+      type: o,
+      className: i(
+        "h-10 w-full rounded-lg border-2 border-gray-300 bg-white px-4 py-2 text-sm outline-none transition-colors placeholder:text-gray-400 focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+        r
+      ),
+      ref: t,
+      ...e
+    }
+  )
+);
+l.displayName = "Input";
+export {
+  l as Input
+};

package/dist/components/label.js

@@ -1,2 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../jsx-runtime-BYECrxsp.cjs"),c=require("react"),l=require("@radix-ui/react-label"),u=require("../utils-DSKoFOjv.cjs");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const d=a(c),n=a(l),i=d.forwardRef(({className:e,...r},t)=>s.jsxRuntimeExports.jsx(n.Root,{ref:t,className:u.cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",e),...r}));i.displayName=n.Root.displayName;exports.Label=i;
-//# sourceMappingURL=label.js.map
+import { jsx as m } from "react/jsx-runtime";
+import * as t from "react";
+import * as o from "@radix-ui/react-label";
+import { cn as i } from "../lib/utils.js";
+const s = t.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ m(
+  o.Root,
+  {
+    ref: r,
+    className: i(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      e
+    ),
+    ...a
+  }
+));
+s.displayName = o.Root.displayName;
+export {
+  s as Label
+};

package/dist/components/loader.js

@@ -1,2 +1,69 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),s=require("framer-motion");function u({size:n="md",fullScreen:a=!1,center:r=!1,loadingText:o="Initializing App",loadingTextDescription:l="Setting up your workspace...",isDark:c=!1}){const m={sm:"w-1 h-1",md:"w-1.5 h-1.5",lg:"w-2 h-2"},d={sm:"gap-0.5",md:"gap-1",lg:"gap-1.5"},x={hidden:{opacity:0,y:20},visible:t=>({opacity:1,y:0,transition:{delay:t*.1,duration:.5,repeat:1/0,repeatType:"reverse"}})},i=e.jsxRuntimeExports.jsx("div",{className:`flex items-center ${d[n]}`,children:[0,1,2].map(t=>e.jsxRuntimeExports.jsx(s.motion.div,{custom:t,variants:x,initial:"hidden",animate:"visible",className:`${m[n]} rounded-full ${c?"bg-primary/80":"bg-primary/60"}`},t))});return a?e.jsxRuntimeExports.jsx("div",{className:"fixed inset-0 bg-background flex items-center justify-center z-[9999]",children:e.jsxRuntimeExports.jsxs(s.motion.div,{className:"text-center",initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{duration:.3},children:[e.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center gap-2 mb-6",children:i}),e.jsxRuntimeExports.jsxs(s.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.3,duration:.3},children:[e.jsxRuntimeExports.jsx("h2",{className:"text-lg font-medium mb-2",children:o}),e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:l})]})]})}):r?e.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center w-full h-full min-h-[200px]",children:i}):i}exports.Loader=u;
-//# sourceMappingURL=loader.js.map
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { motion as a } from "framer-motion";
+function h({
+  size: n = "md",
+  fullScreen: s = !1,
+  center: l = !1,
+  loadingText: c = "Initializing App",
+  loadingTextDescription: d = "Setting up your workspace...",
+  isDark: m = !1
+}) {
+  const o = {
+    sm: "w-1 h-1",
+    md: "w-1.5 h-1.5",
+    lg: "w-2 h-2"
+  }, p = {
+    sm: "gap-0.5",
+    md: "gap-1",
+    lg: "gap-1.5"
+  }, f = {
+    hidden: { opacity: 0, y: 20 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        repeat: 1 / 0,
+        repeatType: "reverse"
+      }
+    })
+  }, t = /* @__PURE__ */ e("div", { className: `flex items-center ${p[n]}`, children: [0, 1, 2].map((i) => /* @__PURE__ */ e(
+    a.div,
+    {
+      custom: i,
+      variants: f,
+      initial: "hidden",
+      animate: "visible",
+      className: `${o[n]} rounded-full ${m ? "bg-primary/80" : "bg-primary/60"}`
+    },
+    i
+  )) });
+  return s ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-background flex items-center justify-center z-[9999]", children: /* @__PURE__ */ r(
+    a.div,
+    {
+      className: "text-center",
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      transition: { duration: 0.3 },
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-center gap-2 mb-6", children: t }),
+        /* @__PURE__ */ r(
+          a.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.3, duration: 0.3 },
+            children: [
+              /* @__PURE__ */ e("h2", { className: "text-lg font-medium mb-2", children: c }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: d })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) : l ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center w-full h-full min-h-[200px]", children: t }) : t;
+}
+export {
+  h as Loader
+};

package/dist/components/loading-placeholder.js

@@ -1,2 +1,24 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),s=require("../utils-DSKoFOjv.cjs");function a({className:o,count:i=1,animate:r=!0,variant:t="shimmer"}){return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:Array.from({length:i}).map((l,n)=>e.jsxRuntimeExports.jsx("div",{className:s.cn("relative overflow-hidden bg-muted/30 rounded",r&&t==="shimmer"&&"before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",r&&t==="pulse"&&"animate-pulse",o)},n))})}exports.LoadingPlaceholder=a;
-//# sourceMappingURL=loading-placeholder.js.map
+import { jsx as o, Fragment as a } from "react/jsx-runtime";
+import { cn as m } from "../lib/utils.js";
+function b({
+  className: t,
+  count: n = 1,
+  animate: e = !0,
+  variant: r = "shimmer"
+}) {
+  return /* @__PURE__ */ o(a, { children: Array.from({ length: n }).map((f, i) => /* @__PURE__ */ o(
+    "div",
+    {
+      className: m(
+        "relative overflow-hidden bg-muted/30 rounded",
+        e && r === "shimmer" && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
+        e && r === "pulse" && "animate-pulse",
+        t
+      )
+    },
+    i
+  )) });
+}
+export {
+  b as LoadingPlaceholder
+};