@zea.cl/cranium-sdk 0.3.4

package/dist/index.mjs

@@ -0,0 +1,627 @@
+import React3, { useState, useCallback, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/CraniumShell.tsx
+function getAuthHeaders(options) {
+  const headers = {};
+  if (options.apiKey) headers["x-api-key"] = options.apiKey;
+  try {
+    const auth = JSON.parse(localStorage.getItem("thalamus_auth") || "null");
+    if (auth?.accessToken) headers["Authorization"] = `Bearer ${auth.accessToken}`;
+    if (auth?.user?.organization_id) headers["x-zea-org-id"] = auth.user.organization_id;
+  } catch {
+  }
+  return headers;
+}
+function useCranium(options) {
+  const [pieces, setPieces] = useState([]);
+  const [active, setActiveState] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const api = `${options.baseUrl || ""}/api/v1`;
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${api}/site`, { headers: getAuthHeaders(options) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const d = await res.json();
+      const enabled = (d?.pieces || []).filter((p) => p.enabled);
+      setPieces(enabled);
+      if (enabled.length > 0 && !active) setActiveState(enabled[0].slug);
+    } catch (e) {
+      setError(e.message);
+    }
+    setLoading(false);
+  }, [api, options.apiKey]);
+  useEffect(() => {
+    refresh();
+  }, []);
+  const setActive = (slug) => {
+    setActiveState(slug);
+    try {
+      localStorage.setItem("cranium:active", slug);
+    } catch {
+    }
+  };
+  const create = async (piece) => {
+    try {
+      const res = await fetch(`${api}/pieces`, {
+        method: "POST",
+        headers: { ...getAuthHeaders(options), "Content-Type": "application/json" },
+        body: JSON.stringify(piece)
+      });
+      if (res.ok) {
+        refresh();
+        return true;
+      }
+    } catch {
+    }
+    return false;
+  };
+  const remove = async (id) => {
+    try {
+      const res = await fetch(`${api}/pieces/${id}`, {
+        method: "DELETE",
+        headers: getAuthHeaders(options)
+      });
+      if (res.ok) {
+        refresh();
+        return true;
+      }
+    } catch {
+    }
+    return false;
+  };
+  useCallback((slug) => {
+    if (slug === active) setRefreshKey((k) => k + 1);
+  }, [active]);
+  return { pieces, active, setActive, loading, error, refresh, create, remove };
+}
+function useCraniumRouter() {
+  const [path, setPath] = useState(() => {
+    if (typeof window !== "undefined") return window.location.pathname;
+    return "/";
+  });
+  const parse = useCallback((p) => {
+    const parts = p.split("/").filter(Boolean);
+    if (parts[0] === "pieces" && parts[1]) {
+      return { piece: parts[1], section: null, sub: null };
+    }
+    if (parts[0] === "section" && parts[1]) {
+      return { piece: null, section: parts[1], sub: parts[2] || null };
+    }
+    return { piece: null, section: null, sub: null };
+  }, []);
+  const parsed = parse(path);
+  const navigate = useCallback((to) => {
+    if (typeof window === "undefined") return;
+    window.history.pushState({}, "", to);
+    setPath(to);
+  }, []);
+  const back = useCallback(() => {
+    if (typeof window === "undefined") return;
+    window.history.back();
+  }, []);
+  useEffect(() => {
+    const onPop = () => setPath(window.location.pathname);
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, []);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      if (params.has("code") || params.has("state")) {
+        return;
+      }
+    }
+  }, []);
+  return {
+    path,
+    activePiece: parsed.piece,
+    activeSection: parsed.section,
+    activeSub: parsed.sub,
+    navigate,
+    back
+  };
+}
+function CraniumTable({ columns, rows, onRowClick, emptyMessage = "No data", className }) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const sorted = useMemo(() => {
+    if (!sortKey) return rows;
+    return [...rows].sort((a, b) => {
+      const av = a[sortKey], bv = b[sortKey];
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      const cmp = String(av).localeCompare(String(bv), void 0, { numeric: true });
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [rows, sortKey, sortDir]);
+  const toggleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 32, textAlign: "center", color: "#8b949e", fontSize: 14 }, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontFamily: "system-ui, sans-serif", fontSize: 13 }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { style: { position: "sticky", top: 0, zIndex: 5 }, children: columns.map((col) => /* @__PURE__ */ jsxs(
+      "th",
+      {
+        onClick: () => col.sortable !== false && toggleSort(col.key),
+        style: {
+          padding: "10px 16px",
+          textAlign: "left",
+          fontWeight: 600,
+          fontSize: 11,
+          color: "#8b949e",
+          textTransform: "uppercase",
+          letterSpacing: "0.04em",
+          borderBottom: "1px solid #21262d",
+          background: "#0d1117",
+          cursor: col.sortable !== false ? "pointer" : "default",
+          userSelect: "none",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          col.label,
+          sortKey === col.key && /* @__PURE__ */ jsx("span", { style: { marginLeft: 4, fontSize: 10 }, children: sortDir === "asc" ? "\u25B2" : "\u25BC" })
+        ]
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sorted.map((row, i) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        onClick: () => onRowClick?.(row, i),
+        style: {
+          cursor: onRowClick ? "pointer" : "default",
+          borderBottom: "1px solid #21262d",
+          transition: "background 0.1s"
+        },
+        onMouseEnter: (e) => {
+          if (onRowClick) e.currentTarget.style.background = "#161b22";
+        },
+        onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+        children: columns.map((col) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            style: {
+              padding: "10px 16px",
+              color: "#e6edf3",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: 300
+            },
+            children: col.render ? col.render(row[col.key], row) : formatCell(row[col.key])
+          },
+          col.key
+        ))
+      },
+      row.id || i
+    )) })
+  ] }) });
+}
+function formatCell(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "boolean") return value ? "\u2713" : "\u2717";
+  if (value instanceof Date) return value.toLocaleDateString();
+  return String(value);
+}
+function CraniumDashboard({ widgets, className }) {
+  if (widgets.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 32, textAlign: "center", color: "#8b949e", fontSize: 14 }, children: "No widgets configured" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+        gap: 16,
+        padding: 20,
+        overflow: "auto",
+        height: "100%",
+        alignContent: "start",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: widgets.map((w, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            gridColumn: `span ${w.span || 1}`,
+            background: "#161b22",
+            border: "1px solid #21262d",
+            borderRadius: 8,
+            padding: 20
+          },
+          children: [
+            w.type === "card" && /* @__PURE__ */ jsx(CardWidget, { w }),
+            w.type === "chart" && /* @__PURE__ */ jsx(ChartWidget, { w }),
+            w.type === "list" && /* @__PURE__ */ jsx(ListWidget, { w })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function CardWidget({ w }) {
+  const trendColor = w.trend === "up" ? "#3fb950" : w.trend === "down" ? "#f85149" : "#8b949e";
+  const trendIcon = w.trend === "up" ? "\u2191" : w.trend === "down" ? "\u2193" : "\u2192";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#8b949e", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 8 }, children: w.title }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 28, fontWeight: 700, color: "#e6edf3" }, children: w.value }),
+      w.trend && /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: trendColor, fontWeight: 600 }, children: [
+        trendIcon,
+        " ",
+        w.subtitle
+      ] })
+    ] })
+  ] });
+}
+function ChartWidget({ w }) {
+  const max = Math.max(...(w.data || []).map((d) => d.value), 1);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#8b949e", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 12 }, children: w.title }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 6, height: 100 }, children: (w.data || []).map((d, i) => /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: `${d.value / max * 100}%`,
+            background: "#58a6ff",
+            borderRadius: "3px 3px 0 0",
+            minHeight: 2,
+            transition: "height 0.3s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: "#484f58", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "100%" }, children: d.label })
+    ] }, i)) })
+  ] });
+}
+function ListWidget({ w }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#8b949e", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 12 }, children: w.title }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: (w.data || []).map((d, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 13 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#e6edf3" }, children: d.label }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#8b949e", fontWeight: 600 }, children: d.value })
+    ] }, i)) })
+  ] });
+}
+function CraniumForm({ schema, onSubmit, submitLabel = "Save", className }) {
+  const [values, setValues] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await onSubmit(values);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const s = (p = {}) => ({
+    background: "#0d1117",
+    border: "1px solid #21262d",
+    borderRadius: 6,
+    color: "#e6edf3",
+    padding: "8px 12px",
+    fontSize: 13,
+    fontFamily: "system-ui, sans-serif",
+    width: "100%",
+    outline: "none",
+    ...p
+  });
+  return /* @__PURE__ */ jsx("div", { className, style: { maxWidth: 520, margin: "40px auto", padding: "0 24px" }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    schema.map((field) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { style: { display: "block", fontSize: 12, fontWeight: 600, color: "#8b949e", marginBottom: 4 }, children: [
+        field.label,
+        " ",
+        field.required && /* @__PURE__ */ jsx("span", { style: { color: "#f85149" }, children: "*" })
+      ] }),
+      field.type === "select" ? /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: values[field.key] || "",
+          onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.value })),
+          required: field.required,
+          style: s(),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+            (field.options || []).map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          ]
+        }
+      ) : field.type === "checkbox" ? /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!values[field.key],
+            onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.checked }))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#e6edf3" }, children: field.label })
+      ] }) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: field.type || "text",
+          value: values[field.key] || "",
+          onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.value })),
+          required: field.required,
+          placeholder: field.placeholder,
+          style: s()
+        }
+      )
+    ] }, field.key)),
+    error && /* @__PURE__ */ jsx("div", { style: { color: "#f85149", fontSize: 12 }, children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: loading,
+        style: {
+          background: "#238636",
+          color: "#fff",
+          border: "none",
+          borderRadius: 6,
+          padding: "10px 24px",
+          cursor: "pointer",
+          fontSize: 14,
+          fontWeight: 600,
+          fontFamily: "inherit",
+          opacity: loading ? 0.6 : 1
+        },
+        children: loading ? "Saving..." : submitLabel
+      }
+    )
+  ] }) });
+}
+function CraniumShell({ config, theme, brandName, rightPiece, sidebarSections, sidebarWidth: iSW = 240, rightWidth: iRW = 420, showRight: iR = true, className, headerContent, subHeaderContent, footerContent, renderIcon }) {
+  const { pieces, active, setActive, loading, error, refresh } = useCranium(config);
+  const router = useCraniumRouter();
+  const [sw, setSw] = useState(() => {
+    try {
+      return Number(localStorage.getItem("cr:sw") || iSW);
+    } catch {
+      return iSW;
+    }
+  });
+  const [rw, setRw] = useState(() => {
+    try {
+      return Number(localStorage.getItem("cr:rw") || iRW);
+    } catch {
+      return iRW;
+    }
+  });
+  const [rv, setRv] = useState(iR);
+  const activeFromRouter = router.activePiece || active;
+  const ap = pieces.find((p) => p.slug === activeFromRouter);
+  const handleSelect = (slug) => {
+    setActive(slug);
+    router.navigate(`/pieces/${slug}`);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `cr-shell ${className || ""}`, style: { gridTemplateColumns: `${sw}px 4px 1fr ${rv ? `4px ${rw}px` : "0px 0px"}` }, children: [
+    /* @__PURE__ */ jsx(Sidebar, { pieces, active: activeFromRouter, onSelect: handleSelect, loading, error, onRefresh: refresh, sections: sidebarSections, brandName, headerContent, subHeaderContent, footerContent, renderIcon }),
+    /* @__PURE__ */ jsx(Handle, { p: "cr:sw", w: sw, setW: setSw, min: 160, max: 400 }),
+    /* @__PURE__ */ jsx(Content, { piece: ap, rv, toggle: () => setRv((v) => !v), config }),
+    rv ? /* @__PURE__ */ jsx(Handle, { p: "cr:rw", w: rw, setW: setRw, min: 300, max: 700, dir: -1 }) : /* @__PURE__ */ jsx("div", {}),
+    rv ? /* @__PURE__ */ jsx("aside", { className: "cr-right-panel", children: rightPiece || /* @__PURE__ */ jsx(DefaultRight, {}) }) : /* @__PURE__ */ jsx("div", {})
+  ] });
+}
+function Sidebar({ pieces, active, onSelect, loading, error, onRefresh, sections, brandName, headerContent, subHeaderContent, footerContent, renderIcon }) {
+  const groups = pieces.reduce((acc, p) => {
+    const c = p.category || "General";
+    if (!acc[c]) acc[c] = [];
+    acc[c].push(p);
+    return acc;
+  }, {});
+  const secs = sections || [];
+  return /* @__PURE__ */ jsxs("aside", { className: "cr-sidebar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cr-sidebar-header", children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 14 }, children: (() => {
+        const parts = (brandName || "Cranium").split(" ");
+        if (parts.length > 1) {
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            parts[0].toUpperCase() === "ZEA" ? /* @__PURE__ */ jsx("img", { src: "https://zea.cl/text-zea.svg", alt: "ZEA", style: { height: 13, transform: "translateY(1px)" } }) : /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, color: "var(--cr-text)" }, children: parts[0] }),
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--cr-text-muted)" }, children: "|" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--cr-text-muted)", fontSize: 13, letterSpacing: "0.04em" }, children: parts.slice(1).join(" ").trim().toUpperCase() })
+          ] });
+        }
+        return /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--cr-text)" }, children: brandName || "Cranium" });
+      })() }),
+      headerContent && /* @__PURE__ */ jsx("div", { children: headerContent })
+    ] }),
+    subHeaderContent && /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px 0", flexShrink: 0 }, children: subHeaderContent }),
+    /* @__PURE__ */ jsxs("nav", { className: "cr-sidebar-nav", children: [
+      loading && /* @__PURE__ */ jsx("div", { style: { padding: "16px", color: "var(--cr-text-muted)", fontSize: 12 }, children: "Loading..." }),
+      error && /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { color: "#ff7b72", fontSize: 11, marginBottom: 6 }, children: error }),
+        /* @__PURE__ */ jsx("button", { onClick: onRefresh, className: "cr-btn", children: "Retry" })
+      ] }),
+      !loading && !error && Object.entries(groups).map(([cat, items]) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "cr-sidebar-section-title", children: cat }),
+        items.map((p) => /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(p.slug), className: `cr-sidebar-item ${active === p.slug ? "cr-sidebar-item--active" : ""}`, children: [
+          p.icon && /* @__PURE__ */ jsx("span", { style: { fontSize: 14, width: 20, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, opacity: active === p.slug ? 1 : 0.7 }, children: renderIcon ? renderIcon(p.icon) : p.icon }),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: p.name })
+        ] }, p.slug))
+      ] }, cat)),
+      secs.map((s) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "cr-sidebar-section-title", children: s.label }),
+        /* @__PURE__ */ jsx("div", { style: { padding: "0 0 8px 0" }, children: s.content })
+      ] }, s.id))
+    ] }),
+    footerContent ? /* @__PURE__ */ jsx("div", { className: "cr-sidebar-footer", children: footerContent }) : /* @__PURE__ */ jsxs("div", { className: "cr-sidebar-footer", style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 28, height: 28, borderRadius: "50%", background: "var(--cr-primary)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, flexShrink: 0 }, children: "?" }),
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, color: "var(--cr-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: "User" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        localStorage.removeItem("thalamus_auth");
+        window.location.reload();
+      }, className: "cr-btn", children: "Logout" })
+    ] })
+  ] });
+}
+function Content({ piece, rv, toggle, config }) {
+  const [data, setData] = useState(null);
+  const [fetchError, setFetchError] = useState(null);
+  const [fetchLoading, setFetchLoading] = useState(false);
+  const [formSchema, setFormSchema] = useState(null);
+  const [formConfig, setFormConfig] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  React3.useEffect(() => {
+    if (!piece || piece.renderMode === "iframe" || !piece.renderMode) return;
+    setFormSchema(null);
+    setFormConfig(null);
+    setFetchLoading(true);
+    setFetchError(null);
+    const headers = getApiHeaders(config.apiKey);
+    const auth = getToken();
+    let url = piece.url;
+    if (url.includes("auth.zea.localhost/api/users") && auth?.user?.organization_id) {
+      url += (url.includes("?") ? "&" : "?") + "organization_id=" + auth.user.organization_id;
+    }
+    fetch(url, { headers }).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    }).then((d) => setData(d)).catch((e) => setFetchError(e.message)).finally(() => setFetchLoading(false));
+  }, [piece?.slug, piece?.renderMode, piece?.url, refreshKey]);
+  useState(0)[1];
+  return /* @__PURE__ */ jsxs("main", { className: "cr-main", children: [
+    /* @__PURE__ */ jsxs("header", { className: "cr-header", children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: piece && /* @__PURE__ */ jsx("span", { style: { color: "var(--cr-text)", fontWeight: 500 }, children: piece.name }) }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        piece?.addAction && /* @__PURE__ */ jsxs("button", { onClick: () => {
+          fetch(piece.addAction.url).then((r) => r.json()).then((d) => {
+            setFormSchema(d.schema);
+            setFormConfig(d);
+          }).catch((e) => setFetchError(e.message));
+        }, className: "cr-btn cr-btn--primary", children: [
+          "+ ",
+          piece.addAction.label || "Add"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: toggle, className: "cr-btn", children: rv ? "Hide Panel" : "Panel" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cr-content-area", children: [
+      !piece && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--cr-text-muted)", fontSize: 14 }, children: "Select a piece from the sidebar" }),
+      piece && fetchLoading && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--cr-text-muted)", fontSize: 14 }, children: "Loading..." }),
+      piece && fetchError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 12 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { color: "#f85149", fontSize: 13 }, children: fetchError }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setFetchError(null), className: "cr-btn", children: "Retry" })
+      ] }),
+      piece && !fetchLoading && !fetchError && piece.renderMode === "table" && data && /* @__PURE__ */ jsx(Fragment, { children: formSchema ? /* @__PURE__ */ jsx(
+        CraniumForm,
+        {
+          schema: formSchema,
+          onSubmit: async (values) => {
+            const submitUrl = formConfig?.submitUrl;
+            if (submitUrl) {
+              const res = await fetch(submitUrl, {
+                method: formConfig?.submitMethod || "POST",
+                headers: { "Content-Type": "application/json", ...getApiHeaders() },
+                body: JSON.stringify(values)
+              });
+              if (!res.ok) throw new Error(`HTTP ${res.status}`);
+              await res.json();
+            }
+            setFormSchema(null);
+            setFormConfig(null);
+            setRefreshKey((k) => k + 1);
+          }
+        }
+      ) : /* @__PURE__ */ jsx(CraniumTable, { columns: piece.columns || buildColumns(data?.data || data?.items?.[0] ? data.items : data), rows: Array.isArray(data) ? data : data?.items || data?.data || data?.rows || [] }) }),
+      piece && !fetchLoading && !fetchError && piece.renderMode === "dashboard" && data && /* @__PURE__ */ jsx(CraniumDashboard, { widgets: data.widgets || (Array.isArray(data) ? data : buildDashboardWidgets(data)) }),
+      piece && !fetchLoading && !fetchError && piece.renderMode === "form" && data?.schema && /* @__PURE__ */ jsx(
+        CraniumForm,
+        {
+          schema: data.schema,
+          onSubmit: async (values) => {
+            const submitUrl = data?.submitUrl || piece.url;
+            if (submitUrl) {
+              const res = await fetch(submitUrl, {
+                method: data?.submitMethod || "POST",
+                headers: { "Content-Type": "application/json", ...getApiHeaders() },
+                body: JSON.stringify(values)
+              });
+              if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            }
+          }
+        }
+      ),
+      piece && !fetchLoading && !fetchError && (!piece.renderMode || piece.renderMode === "iframe") && /* @__PURE__ */ jsx("iframe", { src: piece.url, style: { width: "100%", height: "100%", border: "none" }, title: piece.name }, piece.slug)
+    ] })
+  ] });
+}
+function DefaultRight() {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--cr-text-muted)", fontSize: 13 }, children: "Right panel \u2014 integrate a piece here" });
+}
+function buildColumns(data) {
+  if (!data || !Array.isArray(data) || data.length === 0) return [];
+  return Object.keys(data[0]).map((k) => ({ key: k, label: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }));
+}
+function buildDashboardWidgets(data) {
+  return Object.entries(data).map(([key, value]) => ({
+    type: "card",
+    title: key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+    value: typeof value === "number" ? String(value) : String(value)
+  }));
+}
+function getToken() {
+  try {
+    const s = localStorage.getItem("thalamus_auth");
+    return s ? JSON.parse(s) : null;
+  } catch {
+    return null;
+  }
+}
+function getApiHeaders(apiKey) {
+  const headers = {};
+  if (apiKey) headers["x-api-key"] = apiKey;
+  const auth = getToken();
+  if (auth?.accessToken) headers["Authorization"] = `Bearer ${auth.accessToken}`;
+  if (auth?.user?.organization_id) headers["x-zea-org-id"] = auth.user.organization_id;
+  return headers;
+}
+function Handle({ p, w, setW, min, max, dir = 1 }) {
+  const down = (e) => {
+    e.preventDefault();
+    const sx = e.clientX, sw = w;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const mv = (ev) => {
+      setW(Math.min(max, Math.max(min, sw + (ev.clientX - sx) * dir)));
+    };
+    const up = () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      document.removeEventListener("mousemove", mv);
+      document.removeEventListener("mouseup", up);
+      try {
+        localStorage.setItem(p, String(w));
+      } catch {
+      }
+    };
+    document.addEventListener("mousemove", mv);
+    document.addEventListener("mouseup", up);
+  };
+  return /* @__PURE__ */ jsx("div", { onMouseDown: down, className: "cr-handle" });
+}
+
+export { CraniumDashboard, CraniumForm, CraniumShell, CraniumTable, useCranium, useCraniumRouter };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map