@buoy-gg/shared-ui 7.0.39 → 7.0.41

package/lib/commonjs/license/AccountSetup.js

@@ -7,26 +7,18 @@ exports.AccountSetup = AccountSetup;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _FreeAccountPrompt = require("./FreeAccountPrompt.js");
-var _licenseModule = require("./licenseModule.js");
-var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _AccountSetupContent = require("./AccountSetupContent.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /** The host app remains usable; only the Buoy launcher opens setup. */
 function AccountSetup() {
-  const access = (0, _licenseModule.getUseAccountAccess)()();
   const [open, setOpen] = (0, _react.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     pointerEvents: "box-none",
     style: styles.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      accessibilityRole: "button",
-      accessibilityLabel: "Set up Buoy account",
-      onPress: () => setOpen(true),
-      style: styles.button,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.text,
-        children: access.status === "initializing" ? "BUOY · Checking…" : "BUOY · Sign in"
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetupContent.AccountSetupButton, {
+      expanded: open,
+      onPress: () => setOpen(true)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FreeAccountPrompt.FreeAccountPrompt, {
       visible: open,
       onClose: () => setOpen(false)
@@ -39,18 +31,5 @@ const styles = _reactNative.StyleSheet.create({
     bottom: 30,
     right: 16,
     zIndex: 99999
-  },
-  button: {
-    backgroundColor: _gameUIColors.buoyColors.card,
-    borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.primary,
-    borderRadius: 24,
-    paddingVertical: 12,
-    paddingHorizontal: 16
-  },
-  text: {
-    color: _gameUIColors.buoyColors.primary,
-    fontWeight: "700",
-    fontSize: 12
   }
 });

package/lib/commonjs/license/AccountSetup.web.js

@@ -5,77 +5,91 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AccountSetup = AccountSetup;
 var _react = require("react");
-var _license = require("@buoy-gg/license");
+var _reactDom = require("react-dom");
+var _AccountSetupContent = require("./AccountSetupContent.js");
+var _nightTheme = require("../ui/night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function AccountSetup() {
-  const access = (0, _license.useAccountAccess)();
   const [open, setOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  const root = (0, _react.useRef)(null);
+  const panel = (0, _react.useRef)(null);
+  const titleId = (0, _react.useId)();
+  const close = (restoreFocus = true) => {
+    setOpen(false);
+    if (restoreFocus) root.current?.querySelector('[data-account-launcher] [role="button"]')?.focus({
+      preventScroll: true
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (!open) return;
+    panel.current?.focus({
+      preventScroll: true
+    });
+    const onPointerDown = event => {
+      if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = event => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      root.current?.querySelector('[data-account-launcher] [role="button"]')?.focus({
+        preventScroll: true
+      });
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  if (typeof document === "undefined") return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: root,
+    "data-buoy-account": "",
     style: {
       position: "fixed",
-      right: 16,
-      bottom: 30,
+      right: "max(16px, env(safe-area-inset-right))",
+      bottom: "max(20px, env(safe-area-inset-bottom))",
       zIndex: 99999,
-      color: "#e2e8f0",
-      fontFamily: "system-ui"
+      colorScheme: "dark",
+      fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      onClick: () => setOpen(!open),
-      style: {
-        background: "#080a0b",
-        color: "#20C997",
-        border: "1px solid #20C997",
-        borderRadius: 24,
-        padding: "12px 16px"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+      children: `
+        [data-buoy-account] { font-size: 14px; line-height: 1.5; text-align: left; }
+        [data-buoy-account] [role="button"], [data-buoy-account] [role="link"] { cursor: pointer; }
+        [data-buoy-account] [role="button"]:focus-visible, [data-buoy-account] [role="link"]:focus-visible { outline: 2px solid ${_nightTheme.night.color.accent}; outline-offset: 3px; }
+        [data-buoy-account] [role="link"]:hover { background: rgba(255,255,255,.06); }
+        [data-buoy-account] [aria-disabled="true"] { cursor: wait; }
+        [data-buoy-account] .buoy-account-panel {
+          position: absolute; right: 0; bottom: calc(100% + 12px);
+          width: 368px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px);
+          overflow-y: auto; overscroll-behavior: contain; border-radius: 20px;
+          box-shadow: 0 18px 60px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
+          outline: none;
+        }
+      `
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-account-launcher": "",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetupContent.AccountSetupButton, {
+        expanded: open,
+        onPress: () => setOpen(value => !value)
+      })
+    }), open && /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      ref: panel,
+      className: "buoy-account-panel",
+      role: "dialog",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      onBlur: event => {
+        if (event.relatedTarget instanceof Node && !root.current?.contains(event.relatedTarget)) close(false);
       },
-      children: access.status === "initializing" ? "BUOY · Checking…" : "BUOY · Sign in"
-    }), open && /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-      "aria-label": "Buoy account setup",
-      style: {
-        position: "absolute",
-        right: 0,
-        bottom: 55,
-        width: 300,
-        maxWidth: "85vw",
-        background: "#080a0b",
-        border: "1px solid #20C997",
-        borderRadius: 12,
-        padding: 20
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-        children: "Sign in to use Buoy"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: "A Free or Pro account is required. Run this command in your project, then reload the app."
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
-        children: "npx buoy login"
-      }), _license.LicenseManager.getState().error && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        role: "status",
-        children: _license.LicenseManager.getState().error
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: () => {
-          const key = _license.LicenseManager.getState().licenseKey;
-          if (key) void _license.LicenseManager.setLicenseKey(key, {
-            force: true
-          });
-        },
-        children: "Retry verification"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-          style: {
-            color: "#20C997"
-          },
-          href: "https://github.com/Buoy-gg/buoy/issues/new/choose",
-          target: "_blank",
-          rel: "noreferrer",
-          children: "Contact support on GitHub"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        style: {
-          color: "#20C997"
-        },
-        href: "mailto:support@buoy.gg",
-        children: "support@buoy.gg"
-      })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetupContent.AccountSetupCard, {
+        titleId: titleId,
+        onClose: () => close()
+      })
     })]
-  });
+  }), document.body);
 }

package/lib/commonjs/license/AccountSetupContent.js

@@ -0,0 +1,482 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccountSetupButton = AccountSetupButton;
+exports.AccountSetupCard = AccountSetupCard;
+exports.LOGIN_COMMAND = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _lucideIcons = require("../icons/lucide-icons.js");
+var _index = require("../clipboard/index.js");
+var _fonts = require("../ui/fonts.js");
+var _nightTheme = require("../ui/night/nightTheme.js");
+var _licenseModule = require("./licenseModule.js");
+var _openPricing = require("./openPricing.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const LOGIN_COMMAND = exports.LOGIN_COMMAND = "npx buoy login";
+
+/** Shared account UI; each platform supplies positioning and dismissal. */
+function AccountSetupButton({
+  onPress,
+  expanded = false
+}) {
+  const access = (0, _licenseModule.getUseAccountAccess)()();
+  const checking = access.status === "initializing";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: "Sign in to Buoy",
+    accessibilityState: {
+      expanded
+    },
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.launcher, expanded && styles.launcherOpen, pressed && styles.pressed],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.brandDot
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.launcherBrand,
+      children: "BUOY"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.launcherDivider
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.launcherLabel,
+      children: checking ? "Checking…" : "Sign in"
+    }), checking ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      size: 14,
+      color: _nightTheme.night.color.accent
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronRight, {
+      size: 14,
+      color: _nightTheme.night.color.textSecondary
+    })]
+  });
+}
+function AccountSetupCard({
+  onClose,
+  titleId
+}) {
+  const access = (0, _licenseModule.getUseAccountAccess)()();
+  const useLicenseHook = (0, _licenseModule.getUseLicense)();
+  const license = useLicenseHook?.();
+  const [copied, setCopied] = (0, _react.useState)(false);
+  const [retrying, setRetrying] = (0, _react.useState)(false);
+  const [feedback, setFeedback] = (0, _react.useState)(null);
+  const timer = (0, _react.useRef)(null);
+  const mounted = (0, _react.useRef)(true);
+  const retryPending = (0, _react.useRef)(false);
+  const checking = retrying || access.status === "initializing";
+  const statusMessage = license?.error || feedback;
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  const handleCopy = (0, _react.useCallback)(async () => {
+    const ok = await (0, _index.copyToClipboard)(LOGIN_COMMAND);
+    if (!mounted.current) return;
+    if (!ok) {
+      setFeedback("Select the command to copy it, then run it in your project terminal.");
+      return;
+    }
+    setFeedback(null);
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 2000);
+  }, []);
+  const handleRetry = (0, _react.useCallback)(async () => {
+    if (retryPending.current) return;
+    retryPending.current = true;
+    setRetrying(true);
+    setFeedback(null);
+    try {
+      await (0, _licenseModule.retryAccountAccess)();
+      if (mounted.current && (0, _licenseModule.getAccountAccess)().status !== "admitted") {
+        setFeedback("No account connected yet. Run the command, sign in, then reload your app.");
+      }
+    } catch {
+      if (mounted.current) setFeedback("Couldn't verify your account. Check your connection and try again.");
+    } finally {
+      retryPending.current = false;
+      if (mounted.current) setRetrying(false);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.card,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.brand,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.brandDot
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.wordmark,
+          children: "BUOY"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerLabel,
+          children: "Developer tools"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close account setup",
+        onPress: onClose,
+        hitSlop: 6,
+        style: ({
+          pressed
+        }) => [styles.close, pressed && styles.pressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.X, {
+          size: 16,
+          color: _nightTheme.night.color.textSecondary
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      nativeID: titleId,
+      accessibilityRole: "header",
+      style: styles.title,
+      children: ["Connect your", "\n", "Buoy account"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.description,
+      children: "Sign in with a Free or Pro account to open your developer tools."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.terminal,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.terminalHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.terminalLabel,
+          children: "RUN IN YOUR PROJECT"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: copied ? "Login command copied" : "Copy login command",
+          onPress: handleCopy,
+          style: ({
+            pressed
+          }) => [styles.copy, pressed && styles.pressed],
+          children: [copied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Check, {
+            size: 13,
+            color: _nightTheme.night.color.accent
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Copy, {
+            size: 13,
+            color: _nightTheme.night.color.textSecondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            accessibilityLiveRegion: "polite",
+            style: [styles.copyText, copied && styles.accentText],
+            children: copied ? "Copied" : "Copy"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.command,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          style: styles.prompt,
+          children: "$"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          selectable: true,
+          style: styles.commandText,
+          children: LOGIN_COMMAND
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.hint,
+      children: "Finish signing in, then reload your app."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: checking,
+        busy: checking
+      },
+      disabled: checking,
+      onPress: handleRetry,
+      style: ({
+        pressed
+      }) => [styles.primary, pressed && styles.primaryPressed, checking && styles.primaryBusy],
+      children: [checking ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: 15,
+        color: _nightTheme.night.color.onAccent
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.RefreshCw, {
+        size: 15,
+        color: _nightTheme.night.color.onAccent
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.primaryText,
+        children: checking ? "Checking connection…" : "Check connection"
+      })]
+    }), statusMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      accessibilityRole: "alert",
+      accessibilityLiveRegion: "polite",
+      style: styles.feedback,
+      children: statusMessage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.footerLabel,
+        children: "Need a hand?"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.links,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "link",
+          onPress: () => (0, _openPricing.openPricing)("https://github.com/Buoy-gg/buoy/issues/new/choose"),
+          style: styles.link,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.linkText,
+            children: "GitHub"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "link",
+          accessibilityLabel: "Email support@buoy.gg",
+          onPress: () => (0, _openPricing.openPricing)("mailto:support@buoy.gg"),
+          style: styles.link,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.linkText,
+            children: "Email"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "link",
+          accessibilityLabel: "View Buoy plans",
+          onPress: () => (0, _openPricing.openPricing)(),
+          style: styles.link,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.linkText,
+            children: "Plans"
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  launcher: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 44,
+    paddingHorizontal: 16,
+    borderRadius: 14,
+    backgroundColor: "#111315",
+    borderWidth: 1,
+    borderColor: "#303437",
+    shadowColor: "#000",
+    shadowOpacity: 0.28,
+    shadowRadius: 14,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 8
+  },
+  launcherOpen: {
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  launcherBrand: {
+    color: _nightTheme.night.color.text,
+    fontSize: 11,
+    fontWeight: "800",
+    letterSpacing: 1.2,
+    lineHeight: 16
+  },
+  launcherDivider: {
+    width: 1,
+    height: 16,
+    backgroundColor: "#35383C",
+    marginHorizontal: 2
+  },
+  launcherLabel: {
+    color: _nightTheme.night.color.text,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 18
+  },
+  brandDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: _nightTheme.night.color.accent
+  },
+  card: {
+    width: "100%",
+    backgroundColor: "#111315",
+    borderColor: "#303437",
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 24,
+    paddingTop: 18,
+    paddingBottom: 12
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 24
+  },
+  brand: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  wordmark: {
+    color: _nightTheme.night.color.text,
+    fontSize: 11,
+    fontWeight: "800",
+    letterSpacing: 1.4,
+    lineHeight: 16
+  },
+  headerLabel: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: 11,
+    lineHeight: 16,
+    marginLeft: 4
+  },
+  close: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: _nightTheme.night.color.fill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    color: _nightTheme.night.color.text,
+    fontSize: 25,
+    fontWeight: "600",
+    lineHeight: 31,
+    letterSpacing: -0.6,
+    marginBottom: 10
+  },
+  description: {
+    color: "#A4AAAF",
+    fontSize: 13,
+    lineHeight: 20,
+    marginBottom: 22
+  },
+  terminal: {
+    backgroundColor: "#090B0D",
+    borderWidth: 1,
+    borderColor: "#292C30",
+    borderRadius: 12
+  },
+  terminalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingLeft: 14,
+    paddingRight: 6,
+    paddingTop: 6
+  },
+  terminalLabel: {
+    color: "#93999F",
+    fontSize: 9,
+    fontWeight: "600",
+    letterSpacing: 0.8,
+    lineHeight: 14
+  },
+  copy: {
+    minWidth: 68,
+    minHeight: 32,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 5,
+    borderRadius: 6
+  },
+  copyText: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: 11,
+    fontWeight: "500",
+    lineHeight: 16
+  },
+  accentText: {
+    color: _nightTheme.night.color.accent
+  },
+  command: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 6,
+    paddingBottom: 18
+  },
+  prompt: {
+    color: _nightTheme.night.color.accent,
+    fontSize: 15,
+    fontFamily: _fonts.monoFont,
+    lineHeight: 22
+  },
+  commandText: {
+    color: _nightTheme.night.color.text,
+    fontSize: 15,
+    fontFamily: _fonts.monoFont,
+    lineHeight: 22,
+    flexShrink: 1
+  },
+  hint: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: 12,
+    lineHeight: 18,
+    marginTop: 10,
+    marginBottom: 22
+  },
+  primary: {
+    minHeight: 42,
+    borderRadius: 10,
+    backgroundColor: _nightTheme.night.color.accent,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  primaryPressed: {
+    backgroundColor: _nightTheme.night.color.accentPressed
+  },
+  primaryBusy: {
+    opacity: 0.75
+  },
+  primaryText: {
+    color: _nightTheme.night.color.onAccent,
+    fontSize: 13,
+    fontWeight: "600",
+    lineHeight: 20
+  },
+  feedback: {
+    color: "#B5BBC0",
+    fontSize: 12,
+    lineHeight: 18,
+    marginTop: 12
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    borderTopWidth: 1,
+    borderTopColor: _nightTheme.night.color.separator,
+    marginTop: 20,
+    paddingTop: 8
+  },
+  footerLabel: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: 11,
+    lineHeight: 16
+  },
+  links: {
+    flexDirection: "row",
+    gap: 2
+  },
+  link: {
+    paddingHorizontal: 7,
+    paddingVertical: 10,
+    borderRadius: 6
+  },
+  linkText: {
+    color: "#B5BBC0",
+    fontSize: 11,
+    fontWeight: "500",
+    lineHeight: 16
+  },
+  pressed: {
+    opacity: 0.7
+  }
+});