@basictech/react 0.8.0-beta.1 → 0.8.0-beta.2

package/dist/index.js

@@ -238,9 +238,812 @@ var init_syncProtocol = __esm({
   }
 });
 
+// package.json
+var version;
+var init_package = __esm({
+  "package.json"() {
+    version = "0.8.0-beta.2";
+  }
+});
+
+// src/utils/network.ts
+function isDevelopment(debug) {
+  if (debug === true) return true;
+  if (typeof process !== "undefined" && process.env.NODE_ENV === "development") return true;
+  if (typeof window === "undefined" || !window.location) return false;
+  const host = window.location.hostname;
+  return host === "localhost" || host === "127.0.0.1" || host.includes("localhost") || host.includes("127.0.0.1") || host.includes(".local");
+}
+function normalizeVersion(v) {
+  if (v == null) return null;
+  const t = String(v).trim();
+  return t.length ? t : null;
+}
+function versionsMatch(a, b) {
+  const na = a.trim();
+  const nb = b.trim();
+  if (na === nb) return true;
+  const va = import_semver.default.valid(na);
+  const vb = import_semver.default.valid(nb);
+  if (va && vb) return import_semver.default.eq(va, vb);
+  return false;
+}
+function usesBetaDistTag(version2) {
+  const pre = import_semver.default.prerelease(version2);
+  const id = pre?.[0];
+  return typeof id === "string" && id.toLowerCase() === "beta";
+}
+async function checkForNewVersion() {
+  try {
+    const currentVersion = normalizeVersion(version);
+    if (!currentVersion) {
+      return { hasNewVersion: false, latestVersion: null, currentVersion: null };
+    }
+    const response = await fetch("https://registry.npmjs.org/@basictech/react", {
+      headers: { Accept: "application/vnd.npm.install-v1+json" }
+    });
+    if (!response.ok) {
+      throw new Error("Failed to fetch version from npm");
+    }
+    const data = await response.json();
+    const distTags = data["dist-tags"] ?? {};
+    const rawRegistry = usesBetaDistTag(currentVersion) ? distTags.beta ?? distTags.latest : distTags.latest;
+    const latestVersion = normalizeVersion(rawRegistry ?? null);
+    if (!latestVersion) {
+      throw new Error("Missing dist-tags from npm registry");
+    }
+    const same = versionsMatch(currentVersion, latestVersion);
+    if (!same && isDevelopment()) {
+      log("[basic] version check mismatch:", {
+        currentVersion,
+        registryVersion: latestVersion,
+        channel: usesBetaDistTag(currentVersion) ? "beta" : "latest"
+      });
+    }
+    if (!same) {
+      console.warn("[basic] New version available:", latestVersion, `
+run "npm install @basictech/react@${latestVersion}" to update`);
+    }
+    if (usesBetaDistTag(currentVersion)) {
+      log("thank you for being on basictech/react beta :)");
+    }
+    return {
+      hasNewVersion: !same,
+      latestVersion,
+      currentVersion
+    };
+  } catch (error) {
+    log("Error checking for new version:", error);
+    return {
+      hasNewVersion: false,
+      latestVersion: null,
+      currentVersion: null
+    };
+  }
+}
+function cleanOAuthParamsFromUrl() {
+  if (window.location.search.includes("code") || window.location.search.includes("state")) {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("code");
+    url.searchParams.delete("state");
+    window.history.pushState({}, document.title, url.pathname + url.search);
+    log("Cleaned OAuth parameters from URL");
+  }
+}
+function getSyncStatus(statusCode) {
+  switch (statusCode) {
+    case -1:
+      return "ERROR";
+    case 0:
+      return "OFFLINE";
+    case 1:
+      return "CONNECTING";
+    case 2:
+      return "ONLINE";
+    case 3:
+      return "SYNCING";
+    case 4:
+      return "ERROR_WILL_RETRY";
+    default:
+      return "UNKNOWN";
+  }
+}
+var import_semver;
+var init_network = __esm({
+  "src/utils/network.ts"() {
+    "use strict";
+    import_semver = __toESM(require("semver"));
+    init_config();
+    init_package();
+  }
+});
+
+// src/context.tsx
+function useBasic() {
+  return (0, import_react.useContext)(BasicContext);
+}
+var import_react, DBStatus, noDb, BasicContext;
+var init_context = __esm({
+  "src/context.tsx"() {
+    "use strict";
+    import_react = require("react");
+    DBStatus = /* @__PURE__ */ ((DBStatus2) => {
+      DBStatus2["LOADING"] = "LOADING";
+      DBStatus2["OFFLINE"] = "OFFLINE";
+      DBStatus2["CONNECTING"] = "CONNECTING";
+      DBStatus2["ONLINE"] = "ONLINE";
+      DBStatus2["SYNCING"] = "SYNCING";
+      DBStatus2["ERROR"] = "ERROR";
+      DBStatus2["ERROR_WILL_RETRY"] = "ERROR_WILL_RETRY";
+      DBStatus2["ERROR_TOKEN_EXPIRED"] = "ERROR_TOKEN_EXPIRED";
+      return DBStatus2;
+    })(DBStatus || {});
+    noDb = {
+      collection: () => {
+        throw new Error("no basicdb found - initialization failed. double check your schema.");
+      }
+    };
+    BasicContext = (0, import_react.createContext)({
+      isReady: false,
+      isSignedIn: false,
+      user: null,
+      did: null,
+      scope: null,
+      hasScope: () => false,
+      missingScopes: () => [],
+      signIn: () => Promise.resolve(),
+      signInWithHandle: () => Promise.resolve(),
+      signOut: () => Promise.resolve(),
+      signInWithCode: () => Promise.resolve({ success: false }),
+      getToken: (_options) => Promise.reject(new Error("no token")),
+      getSignInUrl: () => Promise.resolve(""),
+      db: noDb,
+      dbStatus: "LOADING" /* LOADING */,
+      dbMode: "sync",
+      devInfo: null,
+      refreshSchemaStatus: async () => {
+      },
+      isAuthReady: false,
+      signin: () => Promise.resolve(),
+      signout: () => Promise.resolve(),
+      signinWithCode: () => Promise.resolve({ success: false }),
+      getSignInLink: () => Promise.resolve("")
+    });
+  }
+});
+
+// src/dev/BasicDevToolbar.tsx
+var BasicDevToolbar_exports = {};
+__export(BasicDevToolbar_exports, {
+  BasicDevToolbar: () => BasicDevToolbar
+});
+function toneForAuth(isReady, isSignedIn) {
+  if (!isReady) return "muted";
+  if (isSignedIn) return "ok";
+  return "warn";
+}
+function toneForDb(dbMode, dbStatus) {
+  if (dbMode === "remote") return dbStatus === "ONLINE" /* ONLINE */ ? "ok" : "warn";
+  if (dbStatus === "ONLINE" /* ONLINE */ || dbStatus === "SYNCING" /* SYNCING */) return "ok";
+  if (dbStatus === "CONNECTING" /* CONNECTING */ || dbStatus === "LOADING" /* LOADING */) return "warn";
+  if (dbStatus === "OFFLINE" /* OFFLINE */) return "muted";
+  return "bad";
+}
+function toneForSchema(info) {
+  if (!info) return "muted";
+  if (info.valid && info.status === "current") return "ok";
+  if (info.status === "unpublished") return "warn";
+  if (info.status === "no_schema") return "muted";
+  return "bad";
+}
+function dbStatusLabel(status) {
+  switch (status) {
+    case "LOADING" /* LOADING */:
+      return "Initializing";
+    case "OFFLINE" /* OFFLINE */:
+      return "Offline";
+    case "CONNECTING" /* CONNECTING */:
+      return "Connecting";
+    case "ONLINE" /* ONLINE */:
+      return "Connected";
+    case "SYNCING" /* SYNCING */:
+      return "Syncing";
+    case "ERROR" /* ERROR */:
+      return "Error";
+    case "ERROR_WILL_RETRY" /* ERROR_WILL_RETRY */:
+      return "Retrying";
+    case "ERROR_TOKEN_EXPIRED" /* ERROR_TOKEN_EXPIRED */:
+      return "Token refresh";
+    default:
+      return String(status);
+  }
+}
+function chipColor(tone) {
+  switch (tone) {
+    case "ok":
+      return "#22c55e";
+    case "warn":
+      return "#eab308";
+    case "bad":
+      return "#ef4444";
+    default:
+      return "#71717a";
+  }
+}
+function displayDid(did) {
+  return did || "\u2014";
+}
+function displayUserLine(user) {
+  const parts = [];
+  if (user.sub) parts.push(`sub: ${user.sub}`);
+  if (user.email) parts.push(`email: ${user.email}`);
+  if (user.name) parts.push(`name: ${user.name}`);
+  return parts.length ? parts.join(" \xB7 ") : "\u2014";
+}
+function ClipboardIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        fontWeight: 700,
+        color: "#e4e4e7",
+        letterSpacing: "0.07em",
+        textTransform: "uppercase",
+        marginBottom: 8
+      },
+      children
+    }
+  );
+}
+function SectionRule() {
+  const bleed = PANEL_PAD_X;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "separator",
+      style: {
+        height: 1,
+        background: "rgba(255, 255, 255, 0.055)",
+        marginLeft: -bleed,
+        marginRight: -bleed,
+        marginTop: 14,
+        marginBottom: 10,
+        width: `calc(100% + ${bleed * 2}px)`
+      }
+    }
+  );
+}
+function CopyableRow({
+  rowKey,
+  label,
+  copyText,
+  copiedKey,
+  onCopied,
+  children
+}) {
+  const [hover, setHover] = (0, import_react2.useState)(false);
+  const canCopy = copyText.length > 0;
+  const handleClick = (0, import_react2.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      if (!canCopy) return;
+      void navigator.clipboard.writeText(copyText).then(() => onCopied(rowKey));
+    },
+    [canCopy, copyText, onCopied, rowKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: canCopy ? "button" : void 0,
+      tabIndex: canCopy ? 0 : void 0,
+      onClick: canCopy ? handleClick : void 0,
+      onKeyDown: canCopy ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(e);
+        }
+      } : void 0,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        display: "flex",
+        gap: 8,
+        marginBottom: 6,
+        alignItems: "flex-start",
+        borderRadius: 6,
+        padding: "4px 6px",
+        marginLeft: -6,
+        marginRight: -6,
+        cursor: canCopy ? "pointer" : "default",
+        background: hover && canCopy ? "rgba(255,255,255,0.06)" : "transparent",
+        transition: "background 0.12s ease"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#a1a1aa", minWidth: 88, flexShrink: 0, paddingTop: 2 }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              wordBreak: "break-all",
+              paddingTop: 2,
+              lineHeight: 1.35
+            },
+            children
+          }
+        ),
+        canCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              flexShrink: 0,
+              color: copiedKey === rowKey ? "#22c55e" : "#71717a",
+              opacity: hover || copiedKey === rowKey ? 1 : 0,
+              transition: "opacity 0.12s ease, color 0.12s ease",
+              paddingTop: 2,
+              display: "flex",
+              alignItems: "flex-start"
+            },
+            title: "Copy value",
+            children: copiedKey === rowKey ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10 }, children: "\u2713" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClipboardIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function BasicDevToolbar({ enabled = true, debug }) {
+  const {
+    isReady,
+    isSignedIn,
+    user,
+    did,
+    scope,
+    missingScopes,
+    dbMode,
+    dbStatus,
+    devInfo,
+    refreshSchemaStatus
+  } = useBasic();
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [refreshing, setRefreshing] = (0, import_react2.useState)(false);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const [rowCopied, setRowCopied] = (0, import_react2.useState)(null);
+  const show = enabled && typeof window !== "undefined" && isDevelopment(debug);
+  const authTone = toneForAuth(isReady, isSignedIn);
+  const dbTone = toneForDb(dbMode, dbStatus);
+  const schemaTone = toneForSchema(devInfo);
+  const syncTone = dbMode === "remote" ? "muted" : dbTone === "ok" || dbStatus === "SYNCING" /* SYNCING */ ? "ok" : dbTone === "warn" ? "warn" : dbTone === "bad" ? "bad" : "muted";
+  const handleRefreshSchema = (0, import_react2.useCallback)(async () => {
+    setRefreshing(true);
+    try {
+      await refreshSchemaStatus();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [refreshSchemaStatus]);
+  const missingList = missingScopes();
+  const debugPayload = (0, import_react2.useMemo)(() => {
+    return {
+      sdkVersion: version,
+      isReady,
+      isSignedIn,
+      did: did ?? null,
+      user: user ? {
+        sub: user.sub,
+        email: user.email,
+        name: user.name,
+        picture: user.picture
+      } : null,
+      scope,
+      missingScopes: missingList,
+      dbMode,
+      dbStatus,
+      indexedDbName: dbMode === "sync" ? INDEXED_DB_NAME : null,
+      schema: devInfo
+    };
+  }, [isReady, isSignedIn, did, user, scope, dbMode, dbStatus, devInfo, missingList]);
+  const handleCopy = (0, import_react2.useCallback)(async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(debugPayload, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [debugPayload]);
+  const onRowCopied = (0, import_react2.useCallback)((key) => {
+    setRowCopied(key);
+    setTimeout(() => setRowCopied((k) => k === key ? null : k), 1500);
+  }, []);
+  if (!show) return null;
+  const shell = {
+    position: "fixed",
+    bottom: 12,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 99999,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: 11,
+    color: "#e4e4e7",
+    pointerEvents: "auto"
+  };
+  const bar = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 12px",
+    borderRadius: 999,
+    background: "rgba(24, 24, 27, 0.92)",
+    border: "1px solid rgba(63, 63, 70, 0.9)",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.35)",
+    cursor: "pointer",
+    userSelect: "none"
+  };
+  const dot = (tone) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "block",
+        boxSizing: "border-box",
+        width: 6,
+        height: 6,
+        minWidth: 6,
+        minHeight: 6,
+        maxWidth: 6,
+        maxHeight: 6,
+        borderRadius: "50%",
+        background: chipColor(tone),
+        flexShrink: 0
+      }
+    }
+  );
+  const dotSlot = (title, tone) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      title,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 6,
+        height: 6,
+        flexShrink: 0,
+        lineHeight: 0
+      },
+      children: dot(tone)
+    }
+  );
+  const panel = {
+    marginBottom: 8,
+    maxHeight: "50vh",
+    overflow: "auto",
+    padding: PANEL_PAD_X,
+    borderRadius: 10,
+    background: "rgba(24, 24, 27, 0.96)",
+    border: "1px solid rgba(63, 63, 70, 0.9)",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.35)",
+    minWidth: 300,
+    maxWidth: "min(560px, calc(100vw - 24px))"
+  };
+  const syncStatusText = dbStatusLabel(dbStatus);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: shell, children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, fontSize: 12 }, children: "Basic SDK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "#71717a", fontSize: 10, marginTop: 2 }, children: [
+          "v",
+          version
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeader, { children: "Auth" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "ready",
+          label: "Ready",
+          copyText: String(isReady),
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: String(isReady)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "signedIn",
+          label: "Signed in",
+          copyText: String(isSignedIn),
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: String(isSignedIn)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "did",
+          label: "DID",
+          copyText: did || "",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: displayDid(did)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "user",
+          label: "User",
+          copyText: user ? displayUserLine(user) : "",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: user ? displayUserLine(user) : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "scopes",
+          label: "Scopes",
+          copyText: scope || "",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: scope || "\u2014"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "missingScopes",
+          label: "Missing scopes",
+          copyText: missingList.length ? missingList.join(", ") : "",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: missingList.length ? missingList.join(", ") : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionRule, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeader, { children: "Database" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "dbMode",
+          label: "Mode",
+          copyText: dbMode,
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: dbMode
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "indexedDb",
+          label: "IndexedDB",
+          copyText: dbMode === "sync" ? INDEXED_DB_NAME : "",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: dbMode === "sync" ? INDEXED_DB_NAME : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "syncStatus",
+          label: "Sync / status",
+          copyText: syncStatusText,
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: syncStatusText
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionRule, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeader, { children: "Schema" }),
+      devInfo ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaProject",
+            label: "Project",
+            copyText: devInfo.projectId ?? "",
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: devInfo.projectId ?? "\u2014"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaLocalVer",
+            label: "Local version",
+            copyText: devInfo.localVersion !== void 0 && devInfo.localVersion !== null ? String(devInfo.localVersion) : "",
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: devInfo.localVersion ?? "\u2014"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaRemote",
+            label: "Remote check",
+            copyText: devInfo.status,
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: devInfo.status
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaValid",
+            label: "Valid",
+            copyText: String(devInfo.valid),
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: String(devInfo.valid)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaChecked",
+            label: "Checked",
+            copyText: devInfo.lastCheckedAt ? new Date(devInfo.lastCheckedAt).toISOString() : "",
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: devInfo.lastCheckedAt ? new Date(devInfo.lastCheckedAt).toLocaleString() : "\u2014"
+          }
+        ),
+        devInfo.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CopyableRow,
+          {
+            rowKey: "schemaError",
+            label: "Error",
+            copyText: devInfo.error,
+            copiedKey: rowCopied,
+            onCopied: onRowCopied,
+            children: devInfo.error
+          }
+        ) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CopyableRow,
+        {
+          rowKey: "schemaStatus",
+          label: "Status",
+          copyText: "No schema on provider",
+          copiedKey: rowCopied,
+          onCopied: onRowCopied,
+          children: "No schema on provider"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              void handleRefreshSchema();
+            },
+            disabled: refreshing,
+            style: {
+              padding: "6px 10px",
+              borderRadius: 6,
+              border: "1px solid #3f3f46",
+              background: "#27272a",
+              color: "#e4e4e7",
+              cursor: refreshing ? "wait" : "pointer",
+              fontSize: 11,
+              fontFamily: "inherit"
+            },
+            children: refreshing ? "Refreshing\u2026" : "Refresh schema"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              void handleCopy();
+            },
+            style: {
+              padding: "6px 10px",
+              borderRadius: 6,
+              border: "1px solid #3f3f46",
+              background: "#27272a",
+              color: "#e4e4e7",
+              cursor: "pointer",
+              fontSize: 11,
+              fontFamily: "inherit"
+            },
+            children: copied ? "Copied" : "Copy debug info"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        style: {
+          ...bar,
+          border: "none",
+          width: "100%",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, letterSpacing: 0.02 }, children: "Basic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                marginLeft: 8,
+                height: 6,
+                flexShrink: 0,
+                lineHeight: 0
+              },
+              children: [
+                dotSlot("Auth", authTone),
+                dotSlot("DB", dbTone),
+                dotSlot("Sync", syncTone),
+                dotSlot("Schema", schemaTone)
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#71717a", marginLeft: 4 }, children: open ? "\u25BE" : "\u25B4" })
+        ]
+      }
+    )
+  ] });
+}
+var import_react2, import_jsx_runtime, INDEXED_DB_NAME, PANEL_PAD_X;
+var init_BasicDevToolbar = __esm({
+  "src/dev/BasicDevToolbar.tsx"() {
+    "use strict";
+    "use client";
+    import_react2 = require("react");
+    init_context();
+    init_package();
+    init_network();
+    import_jsx_runtime = require("react/jsx-runtime");
+    INDEXED_DB_NAME = "basicdb";
+    PANEL_PAD_X = 12;
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BasicDevToolbar: () => BasicDevToolbar,
   BasicProvider: () => BasicProvider,
   DBStatus: () => DBStatus,
   NotAuthenticatedError: () => NotAuthenticatedError,
@@ -257,7 +1060,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/AuthContext.tsx
-var import_react = require("react");
+var import_react3 = require("react");
 
 // src/sync/index.ts
 var import_uuid = require("uuid");
@@ -848,75 +1651,8 @@ async function resolveHandle(handle) {
   return resolved;
 }
 
-// src/utils/network.ts
-init_config();
-
-// package.json
-var version = "0.8.0-beta.1";
-
-// src/utils/network.ts
-function isDevelopment(debug) {
-  return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes("localhost") || window.location.hostname.includes("127.0.0.1") || window.location.hostname.includes(".local") || process.env.NODE_ENV === "development" || debug === true;
-}
-async function checkForNewVersion() {
-  try {
-    const isBeta = version.includes("beta");
-    const response = await fetch(`https://registry.npmjs.org/@basictech/react/${isBeta ? "beta" : "latest"}`);
-    if (!response.ok) {
-      throw new Error("Failed to fetch version from npm");
-    }
-    const data = await response.json();
-    const latestVersion = data.version;
-    if (latestVersion !== version) {
-      console.warn("[basic] New version available:", latestVersion, `
-run "npm install @basictech/react@${latestVersion}" to update`);
-    }
-    if (isBeta) {
-      log("thank you for being on basictech/react beta :)");
-    }
-    return {
-      hasNewVersion: version !== latestVersion,
-      latestVersion,
-      currentVersion: version
-    };
-  } catch (error) {
-    log("Error checking for new version:", error);
-    return {
-      hasNewVersion: false,
-      latestVersion: null,
-      currentVersion: null
-    };
-  }
-}
-function cleanOAuthParamsFromUrl() {
-  if (window.location.search.includes("code") || window.location.search.includes("state")) {
-    const url = new URL(window.location.href);
-    url.searchParams.delete("code");
-    url.searchParams.delete("state");
-    window.history.pushState({}, document.title, url.pathname + url.search);
-    log("Cleaned OAuth parameters from URL");
-  }
-}
-function getSyncStatus(statusCode) {
-  switch (statusCode) {
-    case -1:
-      return "ERROR";
-    case 0:
-      return "OFFLINE";
-    case 1:
-      return "CONNECTING";
-    case 2:
-      return "ONLINE";
-    case 3:
-      return "SYNCING";
-    case 4:
-      return "ERROR_WILL_RETRY";
-    default:
-      return "UNKNOWN";
-  }
-}
-
 // src/core/auth/AuthManager.ts
+init_network();
 init_config();
 function generateCodeVerifier() {
   const array = new Uint8Array(32);
@@ -1617,6 +2353,7 @@ var AuthManager = class {
 
 // src/AuthContext.tsx
 init_config();
+init_package();
 
 // src/updater/versionUpdater.ts
 init_config();
@@ -1741,6 +2478,9 @@ function getMigrations() {
   ];
 }
 
+// src/AuthContext.tsx
+init_network();
+
 // src/utils/schema.ts
 var import_schema3 = require("@basictech/schema");
 init_config();
@@ -1840,57 +2580,18 @@ async function validateAndCheckSchema(schema) {
 }
 
 // src/AuthContext.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+init_context();
+init_context();
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BasicDevToolbar2 = (0, import_react3.lazy)(
+  () => Promise.resolve().then(() => (init_BasicDevToolbar(), BasicDevToolbar_exports)).then((m) => ({ default: m.BasicDevToolbar }))
+);
 var DEFAULT_AUTH_CONFIG = {
   scopes: "profile,email,app:admin",
   pds_url: "https://pds.basic.id",
   admin_url: "https://api.basic.tech",
   ws_url: "wss://pds.basic.id/ws"
 };
-var DBStatus = /* @__PURE__ */ ((DBStatus2) => {
-  DBStatus2["LOADING"] = "LOADING";
-  DBStatus2["OFFLINE"] = "OFFLINE";
-  DBStatus2["CONNECTING"] = "CONNECTING";
-  DBStatus2["ONLINE"] = "ONLINE";
-  DBStatus2["SYNCING"] = "SYNCING";
-  DBStatus2["ERROR"] = "ERROR";
-  DBStatus2["ERROR_WILL_RETRY"] = "ERROR_WILL_RETRY";
-  DBStatus2["ERROR_TOKEN_EXPIRED"] = "ERROR_TOKEN_EXPIRED";
-  return DBStatus2;
-})(DBStatus || {});
-var noDb = {
-  collection: () => {
-    throw new Error("no basicdb found - initialization failed. double check your schema.");
-  }
-};
-var BasicContext = (0, import_react.createContext)({
-  // Auth state
-  isReady: false,
-  isSignedIn: false,
-  user: null,
-  did: null,
-  scope: null,
-  hasScope: () => false,
-  missingScopes: () => [],
-  // Auth actions
-  signIn: () => Promise.resolve(),
-  signInWithHandle: () => Promise.resolve(),
-  signOut: () => Promise.resolve(),
-  signInWithCode: () => Promise.resolve({ success: false }),
-  // Token management
-  getToken: (_options) => Promise.reject(new Error("no token")),
-  getSignInUrl: () => Promise.resolve(""),
-  // DB access
-  db: noDb,
-  dbStatus: "LOADING" /* LOADING */,
-  dbMode: "sync",
-  // Legacy aliases
-  isAuthReady: false,
-  signin: () => Promise.resolve(),
-  signout: () => Promise.resolve(),
-  signinWithCode: () => Promise.resolve({ success: false }),
-  getSignInLink: () => Promise.resolve("")
-});
 function snapshotAuth(mgr) {
   return {
     isSignedIn: mgr.isSignedIn,
@@ -1908,7 +2609,8 @@ function BasicProvider({
   debug = false,
   storage,
   auth,
-  dbMode = "sync"
+  dbMode = "sync",
+  devToolbar = false
 }) {
   const project_id = schema?.project_id || project_id_prop;
   if (auth?.server_url && !auth?.pds_url) {
@@ -1921,9 +2623,11 @@ function BasicProvider({
     ws_url: auth?.ws_url || DEFAULT_AUTH_CONFIG.ws_url
   };
   const scopesString = Array.isArray(authConfig.scopes) ? authConfig.scopes.join(" ") : authConfig.scopes;
-  const storageRef = (0, import_react.useRef)(storage || new LocalStorageAdapter());
+  const storageRef = (0, import_react3.useRef)(storage || new LocalStorageAdapter());
   const storageAdapter = storageRef.current;
-  const [authState, setAuthState] = (0, import_react.useState)({
+  const schemaRef = (0, import_react3.useRef)(schema);
+  schemaRef.current = schema;
+  const [authState, setAuthState] = (0, import_react3.useState)({
     isSignedIn: false,
     hasToken: false,
     isAuthReady: false,
@@ -1931,7 +2635,7 @@ function BasicProvider({
     did: null,
     tokenScope: null
   });
-  const authRef = (0, import_react.useRef)(null);
+  const authRef = (0, import_react3.useRef)(null);
   if (!authRef.current) {
     authRef.current = new AuthManager(
       {
@@ -1945,14 +2649,50 @@ function BasicProvider({
       () => setAuthState(snapshotAuth(authRef.current))
     );
   }
-  const syncRef = (0, import_react.useRef)(null);
-  const remoteDbRef = (0, import_react.useRef)(null);
-  const [shouldConnect, setShouldConnect] = (0, import_react.useState)(false);
-  const [dbStatus, setDbStatus] = (0, import_react.useState)("OFFLINE" /* OFFLINE */);
-  const [isReady, setIsReady] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
+  const syncRef = (0, import_react3.useRef)(null);
+  const remoteDbRef = (0, import_react3.useRef)(null);
+  const [shouldConnect, setShouldConnect] = (0, import_react3.useState)(false);
+  const [dbStatus, setDbStatus] = (0, import_react3.useState)("OFFLINE" /* OFFLINE */);
+  const [isReady, setIsReady] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [schemaDevInfo, setSchemaDevInfo] = (0, import_react3.useState)(null);
   const isDevMode = () => isDevelopment(debug);
-  (0, import_react.useEffect)(() => {
+  const refreshSchemaStatus = (0, import_react3.useCallback)(async () => {
+    const s = schemaRef.current;
+    if (!s) {
+      setSchemaDevInfo(
+        project_id ? {
+          projectId: project_id,
+          localVersion: void 0,
+          status: "no_schema",
+          valid: false,
+          lastCheckedAt: Date.now()
+        } : null
+      );
+      return;
+    }
+    const result = await validateAndCheckSchema(s);
+    if (!result.isValid) {
+      const errText = result.errors?.map((e) => e.message || "").join("; ") || "invalid";
+      setSchemaDevInfo({
+        projectId: s.project_id ?? null,
+        localVersion: s.version,
+        status: "invalid",
+        valid: false,
+        lastCheckedAt: Date.now(),
+        error: errText
+      });
+      return;
+    }
+    setSchemaDevInfo({
+      projectId: s.project_id ?? null,
+      localVersion: s.version,
+      status: result.schemaStatus.status ?? "unknown",
+      valid: result.schemaStatus.valid,
+      lastCheckedAt: Date.now()
+    });
+  }, [project_id]);
+  (0, import_react3.useEffect)(() => {
     const runVersionUpdater = async () => {
       try {
         const versionUpdater = createVersionUpdater(storageAdapter, version, getMigrations());
@@ -1970,7 +2710,7 @@ function BasicProvider({
     authRef.current.initialize();
     return authRef.current.setupNetworkListeners();
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     async function initSyncDb(options) {
       if (!syncRef.current) {
         log("Initializing Basic Sync DB");
@@ -2025,11 +2765,19 @@ function BasicProvider({
       if (!result.isValid) {
         let errorMessage = "";
         if (result.errors) {
-          result.errors.forEach((error2, index) => {
-            errorMessage += `${index + 1}: ${error2.message} - at ${error2.instancePath}
+          result.errors.forEach((err, index) => {
+            errorMessage += `${index + 1}: ${err.message} - at ${err.instancePath}
 `;
           });
         }
+        setSchemaDevInfo({
+          projectId: schema?.project_id ?? null,
+          localVersion: schema?.version,
+          status: "invalid",
+          valid: false,
+          lastCheckedAt: Date.now(),
+          error: errorMessage.trim() || void 0
+        });
         setError({
           code: "schema_invalid",
           title: "Basic Schema is invalid!",
@@ -2038,6 +2786,13 @@ function BasicProvider({
         setIsReady(true);
         return null;
       }
+      setSchemaDevInfo({
+        projectId: schema?.project_id ?? null,
+        localVersion: schema?.version,
+        status: result.schemaStatus.status ?? "unknown",
+        valid: result.schemaStatus.valid,
+        lastCheckedAt: Date.now()
+      });
       if (dbMode === "remote") {
         initRemoteDb();
       } else {
@@ -2057,6 +2812,15 @@ function BasicProvider({
     if (schema) {
       checkSchema();
     } else {
+      setSchemaDevInfo(
+        project_id ? {
+          projectId: project_id,
+          localVersion: void 0,
+          status: "no_schema",
+          valid: false,
+          lastCheckedAt: Date.now()
+        } : null
+      );
       if (dbMode === "remote" && project_id) {
         initRemoteDb();
       } else {
@@ -2064,7 +2828,7 @@ function BasicProvider({
       }
     }
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (authState.hasToken && syncRef.current && authState.isSignedIn && shouldConnect) {
       log("connecting to db...");
       syncRef.current?.connect({
@@ -2123,69 +2887,72 @@ function BasicProvider({
     return syncRef.current || noDb;
   };
   const contextValue = {
-    // Auth state
     isReady: authState.isAuthReady,
     isSignedIn: authState.isSignedIn,
     user: authState.user,
     did: authState.did,
     scope: authState.tokenScope,
-    hasScope: (scope) => authRef.current.hasScope(scope),
+    hasScope: (s) => authRef.current.hasScope(s),
     missingScopes: () => authRef.current.missingScopes(),
-    // Auth actions
     signIn: handleSignIn,
     signInWithHandle: handleSignInWithHandle,
     signOut: handleSignOut,
     signInWithCode: (code, state) => authRef.current.signInWithCode(code, state),
-    // Token management
     getToken: (opts) => authRef.current.getToken(opts),
     getSignInUrl: (redirectUri) => authRef.current.getSignInUrl(redirectUri),
-    // DB access
     db: getCurrentDb(),
     dbStatus,
     dbMode,
-    // Legacy aliases (deprecated)
+    devInfo: schemaDevInfo,
+    refreshSchemaStatus,
     isAuthReady: authState.isAuthReady,
     signin: handleSignIn,
     signout: handleSignOut,
     signinWithCode: (code, state) => authRef.current.signInWithCode(code, state),
     getSignInLink: (redirectUri) => authRef.current.getSignInUrl(redirectUri)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(BasicContext.Provider, { value: contextValue, children: [
-    error && isDevMode() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDisplay, { error }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BasicContext.Provider, { value: contextValue, children: [
+    error && isDevMode() && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorDisplay, { error }),
+    devToolbar && isDevMode() && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BasicDevToolbar2, { debug }) }),
     isReady && children
   ] });
 }
 function ErrorDisplay({ error }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
-    position: "absolute",
-    top: 20,
-    left: 20,
-    color: "black",
-    backgroundColor: "#f8d7da",
-    border: "1px solid #f5c6cb",
-    borderRadius: "4px",
-    padding: "20px",
-    maxWidth: "400px",
-    margin: "20px auto",
-    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-    fontFamily: "monospace"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: "0.8rem", opacity: 0.8 }, children: [
-      "code: ",
-      error.code
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: { fontSize: "1.2rem", lineHeight: "1.5" }, children: error.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: error.message })
-  ] });
-}
-function useBasic() {
-  return (0, import_react.useContext)(BasicContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 20,
+        left: 20,
+        color: "black",
+        backgroundColor: "#f8d7da",
+        border: "1px solid #f5c6cb",
+        borderRadius: "4px",
+        padding: "20px",
+        maxWidth: "400px",
+        margin: "20px auto",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+        fontFamily: "monospace"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { style: { fontSize: "0.8rem", opacity: 0.8 }, children: [
+          "code: ",
+          error.code
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { style: { fontSize: "1.2rem", lineHeight: 1.5 }, children: error.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: error.message })
+      ]
+    }
+  );
 }
 
 // src/index.ts
 var import_dexie_react_hooks = require("dexie-react-hooks");
+init_BasicDevToolbar();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BasicDevToolbar,
   BasicProvider,
   DBStatus,
   NotAuthenticatedError,