database-devtools 0.1.3 → 0.1.5

package/README.md

@@ -94,3 +94,16 @@ For **local development only**. The hub listens on `0.0.0.0`. The RN overlay is
 ## License
 
 MIT © [tamangRajkumar/database-devtools](https://github.com/tamangRajkumar/database-devtools)
+
+## Publishing (maintainers)
+
+The npm package ships **two artifacts**: the JS library (`dist/*.js`) and the static browser hub (`dist/web/` including `sql-wasm.wasm`).
+
+Always run the **full** build before publishing:
+
+```bash
+pnpm build                    # from monorepo root
+pnpm --filter database-devtools publish --no-git-checks --otp=CODE
+```
+
+Do **not** run `tsup` alone — it wipes `dist/` and does not rebuild the web UI. `prepublishOnly` will fail if `dist/web` or wasm assets are missing.

package/dist/{DatabaseDevTools-CdpQJBqG.d.ts → DatabaseDevTools-CQXd9NST.d.ts}

@@ -32,8 +32,12 @@ type DatabaseDevToolsProps = {
     onFloatingPositionChange?: (position: FloatingButtonPosition) => void;
     /** Optional style for the floating button database icon. */
     style?: StyleProp<TextStyle>;
+    /** Floating button background color. */
+    buttonColor?: string;
+    /** Database icon color. */
+    iconColor?: string;
     onConnectionStateChange?: (state: ConnectionState) => void;
 };
-declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
+declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, buttonColor, iconColor, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
 
 export { DatabaseDevTools as D, type FloatingButtonPosition as F, type DatabaseDevToolsProps as a, type DatabaseDialect as b };

package/dist/{DatabaseDevTools-sw1wX5nW.d.cts → DatabaseDevTools-CZmvO9uq.d.cts}

@@ -32,8 +32,12 @@ type DatabaseDevToolsProps = {
     onFloatingPositionChange?: (position: FloatingButtonPosition) => void;
     /** Optional style for the floating button database icon. */
     style?: StyleProp<TextStyle>;
+    /** Floating button background color. */
+    buttonColor?: string;
+    /** Database icon color. */
+    iconColor?: string;
     onConnectionStateChange?: (state: ConnectionState) => void;
 };
-declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
+declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, buttonColor, iconColor, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
 
 export { DatabaseDevTools as D, type FloatingButtonPosition as F, type DatabaseDevToolsProps as a, type DatabaseDialect as b };

package/dist/{chunk-NHHA5CZP.js → chunk-SFLXGLHQ.js}

@@ -580,6 +580,10 @@ function DevToolsProvider({
         setDeviceId(persistedId);
         setDeviceIdReady(true);
       }
+    }).catch(() => {
+      if (!cancelled) {
+        setDeviceIdReady(true);
+      }
     });
     return () => {
       cancelled = true;
@@ -1340,9 +1344,12 @@ function isFloatingButtonTap(totalMovement) {
 }
 var DEFAULT_ICON_SIZE = 22;
 var DEFAULT_ICON_COLOR = "#f8fafc";
+var DEFAULT_BUTTON_COLOR = "#1e293b";
 function FloatingDevToolsButton({
   position = "bottom-right",
   iconStyle,
+  buttonColor,
+  iconColor,
   draggable = true,
   snapToEdges = true,
   floatingPosition,
@@ -1446,22 +1453,24 @@ function FloatingDevToolsButton({
   if (!renderedPosition) {
     return null;
   }
+  const resolvedButtonColor = buttonColor ?? DEFAULT_BUTTON_COLOR;
+  const resolvedIconColor = iconColor ?? StyleSheet.flatten(iconStyle)?.color ?? DEFAULT_ICON_COLOR;
+  const buttonStyle = { backgroundColor: resolvedButtonColor };
+  const statusDotStyle = {
+    backgroundColor: getConnectionDotColor(connectionState),
+    borderColor: resolvedButtonColor
+  };
   const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       MaterialCommunityIcons,
       {
-        color: DEFAULT_ICON_COLOR,
+        color: resolvedIconColor,
         name: "database",
         size: DEFAULT_ICON_SIZE,
         style: iconStyle
       }
     ),
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: [styles4.statusDot, { backgroundColor: getConnectionDotColor(connectionState) }]
-      }
-    )
+    /* @__PURE__ */ jsx(View, { style: [styles4.statusDot, statusDotStyle] })
   ] });
   if (!draggable) {
     const positionStyle = position === "bottom-left" ? styles4.bottomLeft : styles4.bottomRight;
@@ -1471,7 +1480,11 @@ function FloatingDevToolsButton({
         accessibilityLabel: "Open Database DevTools",
         accessibilityRole: "button",
         onPress: openLauncher,
-        style: ({ pressed }) => [styles4.button, pressed && styles4.buttonPressed],
+        style: ({ pressed }) => [
+          styles4.button,
+          buttonStyle,
+          pressed && styles4.buttonPressed
+        ],
         children: buttonContent
       }
     ) });
@@ -1496,7 +1509,7 @@ function FloatingDevToolsButton({
           accessibilityHint: "Drag to move. Tap to open DevTools launcher.",
           accessibilityLabel: "Open Database DevTools",
           accessibilityRole: "button",
-          style: [styles4.button, dragPosition && styles4.buttonDragging],
+          style: [styles4.button, buttonStyle, dragPosition && styles4.buttonDragging],
           children: buttonContent
         }
       )
@@ -1525,7 +1538,6 @@ var styles4 = StyleSheet.create({
     width: FLOATING_BUTTON_SIZE,
     height: FLOATING_BUTTON_SIZE,
     borderRadius: FLOATING_BUTTON_SIZE / 2,
-    backgroundColor: "#1e293b",
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
@@ -1548,8 +1560,7 @@ var styles4 = StyleSheet.create({
     width: 10,
     height: 10,
     borderRadius: 5,
-    borderWidth: 2,
-    borderColor: "#1e293b"
+    borderWidth: 2
   }
 });
 var explorerColors = {
@@ -2692,6 +2703,8 @@ function DatabaseDevTools({
   floatingPosition,
   onFloatingPositionChange,
   style,
+  buttonColor,
+  iconColor,
   onConnectionStateChange
 }) {
   if (!isDevToolsEnabled(enabled)) {
@@ -2709,8 +2722,10 @@ function DatabaseDevTools({
         /* @__PURE__ */ jsx(
           FloatingDevToolsButton,
           {
+            buttonColor,
             draggable,
             floatingPosition,
+            iconColor,
             iconStyle: style,
             onFloatingPositionChange,
             position,
@@ -2726,5 +2741,5 @@ function DatabaseDevTools({
 }
 
 export { DatabaseDevTools, createExpoSqliteInspector, handleBeginTransaction, handleCommitTransaction, handleExecuteWrite, handleRollbackTransaction, isEditableDatabaseAdapter, isWritableDatabaseAdapter };
-//# sourceMappingURL=chunk-NHHA5CZP.js.map
-//# sourceMappingURL=chunk-NHHA5CZP.js.map
+//# sourceMappingURL=chunk-SFLXGLHQ.js.map
+//# sourceMappingURL=chunk-SFLXGLHQ.js.map