chordia-ui 3.3.8 → 3.3.9

package/dist/components/layout.es.js

@@ -1,11 +1,1536 @@
-import { D as e, F as o, L as n, O as s, S as t } from "../SplitPane.es.js";
-import { I as l } from "../IntegrationCard.es.js";
+import { jsxs as t, jsx as e, Fragment as D } from "react/jsx-runtime";
+import { useState as x, useRef as F, useCallback as H, useLayoutEffect as ee, useEffect as X } from "react";
+import { CheckCircle2 as E, X as j, Upload as te, Sparkles as N, Link as Q, FolderOpen as re, Users as ne, BookOpen as oe, Settings as ie, ChevronRight as P, Circle as ae, Mail as le, Lock as se, EyeOff as de, Eye as ce, ArrowRight as pe } from "lucide-react";
+import { I as Ce } from "../IntegrationCard.es.js";
+function fe({
+  onUploadCall: v,
+  onConnectSource: h,
+  onUseSample: p,
+  showExamples: l = !1
+}) {
+  const [f, C] = x(null), [a, m] = x(null), [u, k] = x(null), [d, r] = x(null), b = F(null), z = [
+    { id: "five9", name: "Five9", status: "available", description: "Cloud contact center platform" },
+    { id: "twilio", name: "Twilio Flex", status: "available", description: "Programmable contact center" },
+    { id: "genesys", name: "Genesys Cloud", status: "available", description: "All-in-one cloud contact center" },
+    { id: "zoom", name: "Zoom Phone", status: "coming-soon", description: "Cloud phone system" }
+  ], y = [
+    {
+      id: "retail-support",
+      name: "Retail Customer Support",
+      description: "Sample interactions from retail customer service team",
+      interactions: 24,
+      dateRange: "Last 30 days"
+    },
+    {
+      id: "healthcare-billing",
+      name: "Healthcare Billing Inquiries",
+      description: "Patient billing and insurance verification calls",
+      interactions: 18,
+      dateRange: "Last 2 weeks"
+    },
+    {
+      id: "financial-services",
+      name: "Financial Services Compliance",
+      description: "Banking and financial advisory interactions",
+      interactions: 32,
+      dateRange: "Last 45 days"
+    }
+  ], M = (o) => {
+    var g;
+    const n = (g = o.target.files) == null ? void 0 : g[0];
+    if (n) {
+      const i = n.type.startsWith("audio/"), I = n.type.startsWith("video/");
+      i || I ? (m({
+        name: n.name,
+        type: n.type,
+        size: n.size,
+        lastModified: new Date(n.lastModified)
+      }), v ? v(n) : console.log("File uploaded:", n.name, n.type, `(${(n.size / 1024 / 1024).toFixed(2)} MB)`)) : alert("Please select an audio or video file.");
+    }
+    b.current && (b.current.value = "");
+  }, R = (o) => {
+    const n = z.find((g) => g.id === o);
+    n && n.status === "available" && (k(n), h ? h(n) : console.log("Connected to:", n.name));
+  }, W = (o) => {
+    const n = y.find((g) => g.id === o);
+    n && (r(n), p ? p(n) : console.log("Selected project:", n.name));
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        minHeight: "100vh",
+        background: "var(--surface-warm)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "32px"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: b,
+            type: "file",
+            accept: "audio/*,video/*",
+            onChange: M,
+            style: { display: "none" }
+          }
+        ),
+        /* @__PURE__ */ t("div", { style: { maxWidth: "680px", width: "100%" }, children: [
+          /* @__PURE__ */ t("div", { style: { textAlign: "center", marginBottom: "48px" }, children: [
+            /* @__PURE__ */ e(
+              "h1",
+              {
+                style: {
+                  fontSize: "32px",
+                  fontWeight: 760,
+                  letterSpacing: "-0.02em",
+                  color: "rgba(30, 33, 37, 0.92)",
+                  marginBottom: "12px",
+                  lineHeight: 1.2
+                },
+                children: "Experience Compass with one interaction"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                style: {
+                  fontSize: "15px",
+                  color: "rgba(30, 33, 37, 0.65)",
+                  lineHeight: 1.5,
+                  maxWidth: "520px",
+                  margin: "0 auto"
+                },
+                children: "Compass surfaces evidence, signals, and actionable insights from customer interactions. Start by exploring what it reveals."
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "16px"
+              },
+              children: [
+                {
+                  id: "upload",
+                  icon: te,
+                  title: "Upload an interaction",
+                  description: "Drop an audio or video recording to see what Compass surfaces",
+                  recommended: !1,
+                  onClick: () => {
+                    b.current && b.current.click();
+                  }
+                },
+                {
+                  id: "sample",
+                  icon: N,
+                  title: "Explore a demonstration project",
+                  description: "See how Chordia Compass surfaces insights from real interaction data",
+                  recommended: !0,
+                  onClick: () => {
+                    l && !d || p && p(d || { id: "default", name: "Demo Project" });
+                  }
+                },
+                {
+                  id: "connect",
+                  icon: Q,
+                  title: "Connect a data source",
+                  description: "Link your existing system to automatically analyze interactions",
+                  recommended: !1,
+                  onClick: () => {
+                    l && !u || h && h(u || { id: "default", name: "Data Source" });
+                  }
+                }
+              ].map((o) => {
+                const n = o.icon, g = f === o.id;
+                return /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: o.onClick,
+                    onMouseEnter: () => C(o.id),
+                    onMouseLeave: () => C(null),
+                    style: {
+                      position: "relative",
+                      width: "100%",
+                      padding: "24px 28px",
+                      background: g ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.85)",
+                      border: o.recommended ? "2px solid rgba(184, 156, 106, 0.35)" : g ? "1px solid rgba(52, 58, 64, 0.20)" : "1px solid rgba(52, 58, 64, 0.12)",
+                      borderRadius: "16px",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      transition: "all 0.2s ease",
+                      transform: g ? "translateY(-2px)" : "translateY(0)",
+                      boxShadow: g ? "0 12px 28px rgba(30, 33, 37, 0.12)" : "0 4px 12px rgba(30, 33, 37, 0.06)"
+                    },
+                    children: [
+                      o.recommended && /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: "16px",
+                            right: "20px",
+                            fontSize: "10px",
+                            fontWeight: 650,
+                            letterSpacing: "0.06em",
+                            textTransform: "uppercase",
+                            color: "rgba(184, 156, 106, 0.75)",
+                            background: "rgba(184, 156, 106, 0.12)",
+                            padding: "4px 8px",
+                            borderRadius: "6px",
+                            border: "1px solid rgba(184, 156, 106, 0.2)"
+                          },
+                          children: "Recommended"
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "flex-start",
+                            gap: "18px"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              "div",
+                              {
+                                style: {
+                                  width: "48px",
+                                  height: "48px",
+                                  borderRadius: "12px",
+                                  background: o.recommended ? "rgba(184, 156, 106, 0.12)" : "rgba(231, 212, 162, 0.20)",
+                                  border: o.recommended ? "1px solid rgba(184, 156, 106, 0.25)" : "1px solid rgba(231, 212, 162, 0.35)",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  flexShrink: 0
+                                },
+                                children: /* @__PURE__ */ e(
+                                  n,
+                                  {
+                                    size: 22,
+                                    style: {
+                                      color: o.recommended ? "rgba(184, 156, 106, 0.75)" : "rgba(30, 33, 37, 0.52)"
+                                    }
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ t("div", { style: { flex: 1, paddingTop: "2px" }, children: [
+                              /* @__PURE__ */ e(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: "17px",
+                                    fontWeight: 680,
+                                    letterSpacing: "-0.01em",
+                                    color: "rgba(30, 33, 37, 0.92)",
+                                    marginBottom: "6px",
+                                    lineHeight: 1.3
+                                  },
+                                  children: o.title
+                                }
+                              ),
+                              /* @__PURE__ */ e(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: "13.5px",
+                                    color: "rgba(30, 33, 37, 0.62)",
+                                    lineHeight: 1.5
+                                  },
+                                  children: o.description
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  o.id
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                marginTop: "32px",
+                textAlign: "center",
+                fontSize: "12px",
+                color: "rgba(30, 33, 37, 0.52)",
+                lineHeight: 1.5
+              },
+              children: "Your workspace has been created automatically. You can configure settings and add teammates later."
+            }
+          ),
+          l && /* @__PURE__ */ t("div", { style: { marginTop: "48px", paddingTop: "32px", borderTop: "1px solid rgba(52, 58, 64, 0.12)" }, children: [
+            /* @__PURE__ */ e(
+              "h2",
+              {
+                style: {
+                  fontSize: "20px",
+                  fontWeight: 680,
+                  letterSpacing: "-0.01em",
+                  color: "rgba(30, 33, 37, 0.92)",
+                  marginBottom: "24px"
+                },
+                children: "Testing Examples"
+              }
+            ),
+            a && /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  marginBottom: "24px",
+                  padding: "16px",
+                  background: "rgba(255, 255, 255, 0.85)",
+                  border: "1px solid rgba(52, 58, 64, 0.12)",
+                  borderRadius: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+                    /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: "File Uploaded" })
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => m(null),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ t("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: [
+                    /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("strong", { children: "Name:" }),
+                      " ",
+                      a.name
+                    ] }),
+                    /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("strong", { children: "Type:" }),
+                      " ",
+                      a.type
+                    ] }),
+                    /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("strong", { children: "Size:" }),
+                      " ",
+                      (a.size / 1024 / 1024).toFixed(2),
+                      " MB"
+                    ] }),
+                    /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("strong", { children: "Uploaded:" }),
+                      " ",
+                      a.lastModified.toLocaleString()
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            !d && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
+              /* @__PURE__ */ e(
+                "h3",
+                {
+                  style: {
+                    fontSize: "15px",
+                    fontWeight: 650,
+                    color: "rgba(30, 33, 37, 0.82)",
+                    marginBottom: "12px"
+                  },
+                  children: "Select a Demonstration Project:"
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: y.map((o) => /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => W(o.id),
+                  style: {
+                    padding: "12px 16px",
+                    background: "rgba(255, 255, 255, 0.85)",
+                    border: "1px solid rgba(52, 58, 64, 0.12)",
+                    borderRadius: "8px",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    transition: "all 0.15s ease"
+                  },
+                  onMouseEnter: (n) => {
+                    n.currentTarget.style.background = "rgba(255, 255, 255, 0.95)", n.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.20)";
+                  },
+                  onMouseLeave: (n) => {
+                    n.currentTarget.style.background = "rgba(255, 255, 255, 0.85)", n.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)";
+                  },
+                  children: [
+                    /* @__PURE__ */ e("div", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)", marginBottom: "4px" }, children: o.name }),
+                    /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "rgba(30, 33, 37, 0.62)", marginBottom: "4px" }, children: o.description }),
+                    /* @__PURE__ */ t("div", { style: { fontSize: "11px", color: "rgba(30, 33, 37, 0.52)" }, children: [
+                      o.interactions,
+                      " interactions · ",
+                      o.dateRange
+                    ] })
+                  ]
+                },
+                o.id
+              )) })
+            ] }),
+            d && /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  marginBottom: "24px",
+                  padding: "16px",
+                  background: "rgba(255, 255, 255, 0.85)",
+                  border: "1px solid rgba(52, 58, 64, 0.12)",
+                  borderRadius: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+                    /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ t("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: [
+                        "Project Selected: ",
+                        d.name
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => r(null),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ t("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: [
+                    /* @__PURE__ */ e("div", { children: d.description }),
+                    /* @__PURE__ */ t("div", { style: { marginTop: "4px" }, children: [
+                      /* @__PURE__ */ e("strong", { children: d.interactions }),
+                      " interactions · ",
+                      /* @__PURE__ */ e("strong", { children: d.dateRange })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            !u && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
+              /* @__PURE__ */ e(
+                "h3",
+                {
+                  style: {
+                    fontSize: "15px",
+                    fontWeight: 650,
+                    color: "rgba(30, 33, 37, 0.82)",
+                    marginBottom: "12px"
+                  },
+                  children: "Connect a Data Source:"
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: z.map((o) => /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => R(o.id),
+                  disabled: o.status === "coming-soon",
+                  style: {
+                    padding: "12px 16px",
+                    background: o.status === "coming-soon" ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 0.85)",
+                    border: "1px solid rgba(52, 58, 64, 0.12)",
+                    borderRadius: "8px",
+                    textAlign: "left",
+                    cursor: o.status === "coming-soon" ? "not-allowed" : "pointer",
+                    transition: "all 0.15s ease",
+                    opacity: o.status === "coming-soon" ? 0.6 : 1
+                  },
+                  onMouseEnter: (n) => {
+                    o.status !== "coming-soon" && (n.currentTarget.style.background = "rgba(255, 255, 255, 0.95)", n.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.20)");
+                  },
+                  onMouseLeave: (n) => {
+                    o.status !== "coming-soon" && (n.currentTarget.style.background = "rgba(255, 255, 255, 0.85)", n.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)");
+                  },
+                  children: /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("div", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)", marginBottom: "4px" }, children: o.name }),
+                      /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "rgba(30, 33, 37, 0.62)" }, children: o.description })
+                    ] }),
+                    o.status === "coming-soon" && /* @__PURE__ */ e(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 600,
+                          color: "rgba(30, 33, 37, 0.42)",
+                          background: "rgba(30, 33, 37, 0.08)",
+                          padding: "4px 8px",
+                          borderRadius: "4px"
+                        },
+                        children: "Coming Soon"
+                      }
+                    )
+                  ] })
+                },
+                o.id
+              )) })
+            ] }),
+            u && /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  marginBottom: "24px",
+                  padding: "16px",
+                  background: "rgba(255, 255, 255, 0.85)",
+                  border: "1px solid rgba(52, 58, 64, 0.12)",
+                  borderRadius: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+                    /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ t("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: [
+                        "Connected: ",
+                        u.name
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => k(null),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: u.description })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function me({
+  onDismiss: v,
+  onItemClick: h,
+  completedItems: p = []
+}) {
+  const [l, f] = x(!1), [C, a] = x(null), m = [
+    {
+      id: "name-project",
+      title: "Name your workspace",
+      description: "Give your default project a meaningful name",
+      icon: re,
+      completed: p.includes("name-project"),
+      optional: !0
+    },
+    {
+      id: "evaluate-second-interaction",
+      title: "Evaluate another interaction",
+      description: "Upload or connect a second interaction to see patterns",
+      icon: N,
+      completed: p.includes("evaluate-second-interaction")
+    },
+    {
+      id: "connect-source",
+      title: "Connect a data source",
+      description: "Link your system or platform for automatic evaluation",
+      icon: Q,
+      completed: p.includes("connect-source")
+    },
+    {
+      id: "invite-team",
+      title: "Add teammates",
+      description: "Invite managers or QA team members to collaborate",
+      icon: ne,
+      completed: p.includes("invite-team"),
+      optional: !0
+    },
+    {
+      id: "learn-concepts",
+      title: "Understand Chordia concepts",
+      description: "Learn how conditions, evidence, and confidence work",
+      icon: oe,
+      completed: p.includes("learn-concepts"),
+      optional: !0
+    },
+    {
+      id: "configure-scope",
+      title: "Clarify evaluation scope",
+      description: "Customize which signals and conditions matter for your team",
+      icon: ie,
+      completed: p.includes("configure-scope"),
+      optional: !0
+    }
+  ], u = m.filter((r) => r.completed).length, k = m.length, d = u / k * 100;
+  return l ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: () => f(!1),
+      style: {
+        width: "100%",
+        padding: "14px 16px",
+        background: "rgba(255, 255, 255, 0.85)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "12px",
+        cursor: "pointer",
+        textAlign: "left",
+        transition: "all 0.15s ease",
+        boxShadow: "0 2px 8px rgba(30, 33, 37, 0.04)"
+      },
+      onMouseEnter: (r) => {
+        r.currentTarget.style.background = "rgba(255, 255, 255, 0.95)", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.18)";
+      },
+      onMouseLeave: (r) => {
+        r.currentTarget.style.background = "rgba(255, 255, 255, 0.85)", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)";
+      },
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px"
+          },
+          children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "rgba(30, 33, 37, 0.75)"
+                },
+                children: [
+                  "Getting started (",
+                  u,
+                  "/",
+                  k,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(P, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        background: "rgba(255, 255, 255, 0.85)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "16px",
+        overflow: "hidden",
+        boxShadow: "0 4px 16px rgba(30, 33, 37, 0.06)"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              padding: "18px 20px 16px",
+              borderBottom: "1px solid rgba(52, 58, 64, 0.08)"
+            },
+            children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ t("div", { style: { flex: 1 }, children: [
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "15px",
+                            fontWeight: 680,
+                            letterSpacing: "-0.01em",
+                            color: "rgba(30, 33, 37, 0.92)",
+                            marginBottom: "6px",
+                            lineHeight: 1.3
+                          },
+                          children: "Getting started with Chordia"
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "12px",
+                            color: "rgba(30, 33, 37, 0.58)",
+                            lineHeight: 1.4
+                          },
+                          children: [
+                            u,
+                            " of ",
+                            k,
+                            " completed"
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ t("div", { style: { display: "flex", gap: "4px" }, children: [
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => f(!0),
+                          style: {
+                            width: "28px",
+                            height: "28px",
+                            borderRadius: "6px",
+                            background: "transparent",
+                            border: "1px solid rgba(52, 58, 64, 0.12)",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: "all 0.15s ease",
+                            color: "rgba(30, 33, 37, 0.52)"
+                          },
+                          onMouseEnter: (r) => {
+                            r.currentTarget.style.background = "rgba(231, 212, 162, 0.12)", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.18)";
+                          },
+                          onMouseLeave: (r) => {
+                            r.currentTarget.style.background = "transparent", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)";
+                          },
+                          title: "Collapse",
+                          children: /* @__PURE__ */ e(P, { size: 14 })
+                        }
+                      ),
+                      v && /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: v,
+                          style: {
+                            width: "28px",
+                            height: "28px",
+                            borderRadius: "6px",
+                            background: "transparent",
+                            border: "1px solid rgba(52, 58, 64, 0.12)",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: "all 0.15s ease",
+                            color: "rgba(30, 33, 37, 0.52)"
+                          },
+                          onMouseEnter: (r) => {
+                            r.currentTarget.style.background = "rgba(231, 212, 162, 0.12)", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.18)";
+                          },
+                          onMouseLeave: (r) => {
+                            r.currentTarget.style.background = "transparent", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)";
+                          },
+                          title: "Dismiss checklist",
+                          children: /* @__PURE__ */ e(j, { size: 14 })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    marginTop: "14px",
+                    height: "6px",
+                    background: "rgba(30, 33, 37, 0.08)",
+                    borderRadius: "999px",
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        height: "100%",
+                        width: `${d}%`,
+                        background: "linear-gradient(90deg, rgba(184, 156, 106, 0.75) 0%, rgba(139, 157, 127, 0.75) 100%)",
+                        borderRadius: "999px",
+                        transition: "width 0.4s ease"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { style: { padding: "8px" }, children: m.map((r, b) => {
+          const z = r.icon, y = C === r.id;
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => h == null ? void 0 : h(r.id),
+              onMouseEnter: () => a(r.id),
+              onMouseLeave: () => a(null),
+              disabled: r.completed,
+              style: {
+                width: "100%",
+                padding: "12px 14px",
+                background: r.completed ? "rgba(139, 157, 127, 0.06)" : y ? "rgba(231, 212, 162, 0.12)" : "transparent",
+                border: "none",
+                borderRadius: "10px",
+                cursor: r.completed ? "default" : "pointer",
+                textAlign: "left",
+                transition: "all 0.15s ease",
+                marginBottom: b < m.length - 1 ? "4px" : "0",
+                opacity: r.completed ? 0.7 : 1
+              },
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "20px",
+                          height: "20px",
+                          marginTop: "1px",
+                          flexShrink: 0
+                        },
+                        children: r.completed ? /* @__PURE__ */ e(
+                          E,
+                          {
+                            size: 20,
+                            style: { color: "rgba(139, 157, 127, 0.75)" }
+                          }
+                        ) : /* @__PURE__ */ e(
+                          ae,
+                          {
+                            size: 20,
+                            style: { color: "rgba(30, 33, 37, 0.24)" }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ t("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            marginBottom: "3px"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              z,
+                              {
+                                size: 14,
+                                style: { color: "rgba(30, 33, 37, 0.52)", flexShrink: 0 }
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "13px",
+                                  fontWeight: 600,
+                                  color: r.completed ? "rgba(30, 33, 37, 0.52)" : "rgba(30, 33, 37, 0.85)",
+                                  textDecoration: r.completed ? "line-through" : "none",
+                                  lineHeight: 1.3
+                                },
+                                children: r.title
+                              }
+                            ),
+                            r.optional && !r.completed && /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "9px",
+                                  fontWeight: 600,
+                                  letterSpacing: "0.04em",
+                                  textTransform: "uppercase",
+                                  color: "rgba(30, 33, 37, 0.42)",
+                                  background: "rgba(30, 33, 37, 0.06)",
+                                  padding: "2px 5px",
+                                  borderRadius: "4px"
+                                },
+                                children: "Optional"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "11.5px",
+                            color: "rgba(30, 33, 37, 0.52)",
+                            lineHeight: 1.4,
+                            paddingLeft: "22px"
+                          },
+                          children: r.description
+                        }
+                      )
+                    ] }),
+                    !r.completed && y && /* @__PURE__ */ e(
+                      P,
+                      {
+                        size: 16,
+                        style: {
+                          color: "rgba(30, 33, 37, 0.32)",
+                          marginTop: "2px",
+                          flexShrink: 0
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            r.id
+          );
+        }) }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              padding: "12px 20px 16px",
+              borderTop: "1px solid rgba(52, 58, 64, 0.08)"
+            },
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: "rgba(30, 33, 37, 0.52)",
+                  lineHeight: 1.5,
+                  fontStyle: "italic"
+                },
+                children: [
+                  "You can dismiss this checklist anytime. These steps help you get the most from Chordia, but ",
+                  "aren't",
+                  " required."
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ye({
+  text: v = "Demo Project",
+  accentColor: h = "#B89C6A",
+  textColor: p = "rgba(255, 255, 255, 0.95)",
+  size: l = "medium",
+  position: f = "fixed"
+}) {
+  const a = {
+    small: {
+      width: 140,
+      height: 140,
+      fontSize: "11px",
+      letterSpacing: "0.08em",
+      fontWeight: 650
+    },
+    medium: {
+      width: 180,
+      height: 180,
+      fontSize: "12px",
+      letterSpacing: "0.1em",
+      fontWeight: 680
+    },
+    large: {
+      width: 220,
+      height: 220,
+      fontSize: "13px",
+      letterSpacing: "0.12em",
+      fontWeight: 700
+    }
+  }[l];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        position: f,
+        top: 0,
+        right: 0,
+        width: a.width,
+        height: a.height,
+        overflow: "hidden",
+        zIndex: f === "fixed" ? 9999 : 1,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: 0,
+              height: 0,
+              borderStyle: "solid",
+              borderWidth: `0 ${a.width}px ${a.height}px 0`,
+              borderColor: `transparent ${h} transparent transparent`,
+              opacity: 0.92
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: 0,
+              height: 0,
+              borderStyle: "solid",
+              borderWidth: `0 ${a.width}px ${a.height}px 0`,
+              borderColor: "transparent rgba(0, 0, 0, 0.08) transparent transparent"
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: l === "small" ? "28px" : l === "medium" ? "38px" : "48px",
+              right: l === "small" ? "-32px" : l === "medium" ? "-42px" : "-52px",
+              width: l === "small" ? "160px" : l === "medium" ? "200px" : "240px",
+              transform: "rotate(45deg)",
+              transformOrigin: "center",
+              textAlign: "center"
+            },
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  fontSize: a.fontSize,
+                  fontWeight: a.fontWeight,
+                  letterSpacing: a.letterSpacing,
+                  textTransform: "uppercase",
+                  color: p,
+                  textShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
+                  whiteSpace: "nowrap",
+                  userSelect: "none"
+                },
+                children: v
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: a.width,
+              height: a.height,
+              background: "linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.04) 100%)",
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const ge = "../../assets/chordia-logo.png";
+function ve({
+  title: v = "Chordia",
+  subtitle: h = "Sign in to continue",
+  logo: p,
+  onLogin: l,
+  loading: f = !1,
+  error: C = null,
+  footer: a,
+  showLabels: m = !0,
+  emailPlaceholder: u = "you@company.com",
+  passwordPlaceholder: k = "Password",
+  onForgotPassword: d,
+  compact: r = !1
+}) {
+  const [b, z] = x(""), [y, M] = x(""), [R, W] = x(!1), [s, S] = x(null), T = (i) => {
+    i.preventDefault(), !(!b || !y || f) && (l == null || l(b, y));
+  }, w = b && y && !f, o = "var(--rail-compliance)", n = "201, 138, 90", g = /* @__PURE__ */ t("div", { style: {
+    width: "100%",
+    maxWidth: 400,
+    background: "var(--paper-elevated)",
+    border: "1px solid var(--border)",
+    borderRadius: "var(--radius-lg)",
+    padding: "44px 36px 36px",
+    boxShadow: "0 8px 32px rgba(30, 33, 37, 0.06), 0 1px 3px rgba(30, 33, 37, 0.04)",
+    position: "relative",
+    overflow: "hidden"
+  }, children: [
+    /* @__PURE__ */ e("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 3,
+      background: `linear-gradient(90deg, var(--state-unknown), ${o})`,
+      opacity: 0.6
+    } }),
+    /* @__PURE__ */ e("div", { style: { textAlign: "center", marginBottom: 32 }, children: p || /* @__PURE__ */ t(D, { children: [
+      /* @__PURE__ */ e("div", { style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "12px 24px",
+        borderRadius: "var(--radius-lg)",
+        background: "rgba(30, 33, 37, 0.92)",
+        marginBottom: 16
+      }, children: /* @__PURE__ */ e(
+        "img",
+        {
+          src: ge,
+          alt: v,
+          style: { height: 28, display: "block" }
+        }
+      ) }),
+      h && /* @__PURE__ */ e("p", { style: {
+        fontSize: "var(--text-sm)",
+        color: "var(--text-muted)",
+        marginTop: 4,
+        marginBottom: 0
+      }, children: h })
+    ] }) }),
+    /* @__PURE__ */ t("form", { onSubmit: T, children: [
+      /* @__PURE__ */ t("div", { style: { marginBottom: 18 }, children: [
+        m && /* @__PURE__ */ e("label", { style: {
+          display: "block",
+          fontSize: "var(--text-sm)",
+          fontWeight: 550,
+          color: "var(--text-strong)",
+          marginBottom: 6,
+          fontFamily: "var(--font-sans)"
+        }, children: "Email" }),
+        /* @__PURE__ */ t("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e(le, { size: 15, style: {
+            position: "absolute",
+            left: 12,
+            color: s === "email" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
+            pointerEvents: "none",
+            transition: "color 0.2s ease"
+          } }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "email",
+              value: b,
+              onChange: (i) => z(i.target.value),
+              placeholder: u,
+              required: !0,
+              autoFocus: !0,
+              autoComplete: "email",
+              style: {
+                width: "100%",
+                padding: "11px 12px 11px 38px",
+                fontSize: "var(--text-md)",
+                border: "1px solid",
+                borderColor: s === "email" ? o : "var(--border)",
+                borderRadius: "var(--radius)",
+                backgroundColor: s === "email" ? "rgba(255,255,255,0.95)" : "var(--paper)",
+                color: "var(--text-ink)",
+                fontFamily: "var(--font-sans)",
+                outline: "none",
+                transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
+                boxShadow: s === "email" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
+              },
+              onFocus: () => S("email"),
+              onBlur: () => S(null)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { style: { marginBottom: 6 }, children: [
+        m && /* @__PURE__ */ e("label", { style: {
+          display: "block",
+          fontSize: "var(--text-sm)",
+          fontWeight: 550,
+          color: "var(--text-strong)",
+          marginBottom: 6,
+          fontFamily: "var(--font-sans)"
+        }, children: "Password" }),
+        /* @__PURE__ */ t("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e(se, { size: 15, style: {
+            position: "absolute",
+            left: 12,
+            color: s === "password" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
+            pointerEvents: "none",
+            transition: "color 0.2s ease"
+          } }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: R ? "text" : "password",
+              value: y,
+              onChange: (i) => M(i.target.value),
+              placeholder: k,
+              required: !0,
+              autoComplete: "current-password",
+              style: {
+                width: "100%",
+                padding: "11px 42px 11px 38px",
+                fontSize: "var(--text-md)",
+                border: "1px solid",
+                borderColor: s === "password" ? o : "var(--border)",
+                borderRadius: "var(--radius)",
+                backgroundColor: s === "password" ? "rgba(255,255,255,0.95)" : "var(--paper)",
+                color: "var(--text-ink)",
+                fontFamily: "var(--font-sans)",
+                outline: "none",
+                transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
+                boxShadow: s === "password" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
+              },
+              onFocus: () => S("password"),
+              onBlur: () => S(null)
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => W(!R),
+              style: {
+                position: "absolute",
+                right: 8,
+                background: "none",
+                border: "none",
+                padding: 4,
+                cursor: "pointer",
+                color: "var(--text-faint)",
+                display: "flex",
+                alignItems: "center",
+                transition: "color 0.15s ease",
+                borderRadius: "var(--radius-sm)"
+              },
+              tabIndex: -1,
+              onMouseEnter: (i) => {
+                i.currentTarget.style.color = "var(--text-muted)";
+              },
+              onMouseLeave: (i) => {
+                i.currentTarget.style.color = "var(--text-faint)";
+              },
+              children: R ? /* @__PURE__ */ e(de, { size: 16 }) : /* @__PURE__ */ e(ce, { size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      d && /* @__PURE__ */ e("div", { style: { textAlign: "right", marginBottom: 4 }, children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: d,
+          style: {
+            background: "none",
+            border: "none",
+            padding: "2px 0",
+            fontSize: "var(--text-xs)",
+            color: "var(--text-muted)",
+            cursor: "pointer",
+            fontFamily: "var(--font-sans)",
+            transition: "color 0.15s ease"
+          },
+          onMouseEnter: (i) => {
+            i.currentTarget.style.color = "var(--text-strong)";
+          },
+          onMouseLeave: (i) => {
+            i.currentTarget.style.color = "var(--text-muted)";
+          },
+          children: "Forgot password?"
+        }
+      ) }),
+      C && /* @__PURE__ */ e("div", { style: {
+        fontSize: "var(--text-sm)",
+        color: "var(--text-strong)",
+        marginTop: 12,
+        padding: "8px 12px",
+        background: "color-mix(in srgb, var(--state-unknown) 10%, transparent)",
+        border: "1px solid color-mix(in srgb, var(--state-unknown) 25%, transparent)",
+        borderRadius: "var(--radius-sm)",
+        textAlign: "center",
+        fontWeight: 500
+      }, children: C }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "submit",
+          disabled: !w,
+          style: {
+            width: "100%",
+            padding: "11px 0",
+            marginTop: 20,
+            background: w ? "var(--text-ink)" : "var(--text-xfaint)",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: "var(--radius)",
+            fontSize: "var(--text-md)",
+            fontWeight: 600,
+            fontFamily: "var(--font-sans)",
+            cursor: w ? "pointer" : "not-allowed",
+            transition: "opacity 0.15s ease, transform 0.1s ease",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          },
+          onMouseEnter: (i) => {
+            w && (i.currentTarget.style.opacity = "0.85", i.currentTarget.style.transform = "translateY(-1px)");
+          },
+          onMouseLeave: (i) => {
+            i.currentTarget.style.opacity = "1", i.currentTarget.style.transform = "translateY(0)";
+          },
+          onMouseDown: (i) => {
+            w && (i.currentTarget.style.transform = "translateY(0)");
+          },
+          onMouseUp: (i) => {
+            w && (i.currentTarget.style.transform = "translateY(-1px)");
+          },
+          children: f ? "Signing in…" : /* @__PURE__ */ t(D, { children: [
+            "Sign In",
+            /* @__PURE__ */ e(pe, { size: 16 })
+          ] })
+        }
+      )
+    ] }),
+    a && /* @__PURE__ */ t(D, { children: [
+      /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        margin: "24px 0 16px"
+      }, children: [
+        /* @__PURE__ */ e("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+        /* @__PURE__ */ e("span", { style: { fontSize: "var(--text-xs)", color: "var(--text-faint)" }, children: "or" }),
+        /* @__PURE__ */ e("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+      ] }),
+      /* @__PURE__ */ e("div", { style: {
+        textAlign: "center",
+        fontSize: "var(--text-xs)",
+        color: "var(--text-faint)"
+      }, children: a })
+    ] })
+  ] });
+  return r ? g : /* @__PURE__ */ e("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100vh",
+    background: "var(--bg-chordia)",
+    padding: "var(--spacing-6)"
+  }, children: g });
+}
+function ke({
+  left: v,
+  right: h,
+  defaultWidth: p = 260,
+  defaultRatio: l,
+  minWidth: f = 180,
+  maxWidth: C = 450,
+  minRatio: a,
+  maxRatio: m,
+  collapsedWidth: u = 0,
+  collapsed: k,
+  onCollapsedChange: d,
+  collapseSide: r = "left",
+  collapseThreshold: b,
+  dividerWidth: z = 7,
+  style: y
+}) {
+  const M = k !== void 0, [R, W] = x(!1), s = M ? k : R, S = H(
+    (c) => {
+      const B = typeof c == "function" ? c(s) : c;
+      M || W(B), d == null || d(B);
+    },
+    [M, s, d]
+  ), T = F(null), [w, o] = x(0), [n, g] = x(p), [i, I] = x(!1), [V, Z] = x(!1), $ = F(0), U = F(0);
+  ee(() => {
+    if (!T.current)
+      return;
+    const c = T.current.offsetWidth;
+    o(c), !V && c > 0 && (l != null && g(Math.round(c * l)), Z(!0));
+  }, []), X(() => {
+    if (!T.current)
+      return;
+    const c = new ResizeObserver((B) => {
+      for (const A of B)
+        o(A.contentRect.width);
+    });
+    return c.observe(T.current), () => c.disconnect();
+  }, []);
+  const L = a != null ? Math.round(w * a) : f, O = m != null ? Math.round(w * m) : C, Y = b ?? (r === "none" ? 0 : L - 40), _ = H(
+    (c) => {
+      c.preventDefault(), $.current = c.clientX, U.current = s ? u : n, I(!0);
+    },
+    [n, s, u]
+  );
+  X(() => {
+    if (!i)
+      return;
+    const c = (A) => {
+      const K = A.clientX - $.current, q = U.current + K;
+      if ((r === "left" || r === "both") && q < Y) {
+        s || S(!0);
+        return;
+      }
+      s && S(!1), g(Math.min(Math.max(q, L), O));
+    }, B = () => I(!1);
+    return document.addEventListener("mousemove", c), document.addEventListener("mouseup", B), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", () => {
+      document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", B), document.body.style.userSelect = "", document.body.style.cursor = "";
+    };
+  }, [
+    i,
+    s,
+    L,
+    O,
+    Y,
+    w,
+    z,
+    r,
+    S
+  ]);
+  const J = H(() => {
+    r !== "none" && S((c) => !c);
+  }, [S, r]), G = s ? u : n;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: T,
+      style: {
+        display: "flex",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        ...y
+      },
+      children: [
+        (G > 0 || !s) && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: G,
+              flexShrink: 0,
+              overflow: "hidden",
+              transition: i ? "none" : "width 0.2s ease",
+              height: "100%",
+              border: "1px solid",
+              borderColor: "var(--border-subtle)"
+            },
+            children: !s && v
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            onMouseDown: _,
+            onDoubleClick: J,
+            style: {
+              width: `${z}px`,
+              flexShrink: 0,
+              cursor: "col-resize",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+              zIndex: 2
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    width: "5px",
+                    height: "28px",
+                    borderRadius: "3px",
+                    background: i ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))",
+                    opacity: i ? 1 : 0,
+                    transition: "opacity 0.15s ease, background 0.15s ease"
+                  },
+                  className: "splitpane-grip"
+                }
+              ),
+              /* @__PURE__ */ e("style", { children: `
+          div:hover > .splitpane-grip { opacity: 0.7 !important; }
+        ` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              height: "100%"
+            },
+            children: h
+          }
+        )
+      ]
+    }
+  );
+}
 export {
-  e as DemoProjectBanner,
-  o as FirstCallScreen,
-  l as IntegrationCard,
-  n as LoginForm,
-  s as OnboardingChecklist,
-  t as SplitPane
+  ye as DemoProjectBanner,
+  fe as FirstCallScreen,
+  Ce as IntegrationCard,
+  ve as LoginForm,
+  me as OnboardingChecklist,
+  ke as SplitPane
 };
 //# sourceMappingURL=layout.es.js.map