@buoy-gg/shared-ui 7.0.39 → 7.0.41

package/lib/module/license/AccountSetup.js

@@ -1,28 +1,20 @@
 "use strict";
 
 import React, { useState } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { FreeAccountPrompt } from "./FreeAccountPrompt.js";
-import { getUseAccountAccess } from "./licenseModule.js";
-import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { AccountSetupButton } from "./AccountSetupContent.js";
 
 /** The host app remains usable; only the Buoy launcher opens setup. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AccountSetup() {
-  const access = getUseAccountAccess()();
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/_jsxs(View, {
     pointerEvents: "box-none",
     style: styles.root,
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      accessibilityRole: "button",
-      accessibilityLabel: "Set up Buoy account",
-      onPress: () => setOpen(true),
-      style: styles.button,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.text,
-        children: access.status === "initializing" ? "BUOY · Checking…" : "BUOY · Sign in"
-      })
+    children: [/*#__PURE__*/_jsx(AccountSetupButton, {
+      expanded: open,
+      onPress: () => setOpen(true)
     }), /*#__PURE__*/_jsx(FreeAccountPrompt, {
       visible: open,
       onClose: () => setOpen(false)
@@ -35,18 +27,5 @@ const styles = StyleSheet.create({
     bottom: 30,
     right: 16,
     zIndex: 99999
-  },
-  button: {
-    backgroundColor: buoyColors.card,
-    borderWidth: 1,
-    borderColor: buoyColors.primary,
-    borderRadius: 24,
-    paddingVertical: 12,
-    paddingHorizontal: 16
-  },
-  text: {
-    color: buoyColors.primary,
-    fontWeight: "700",
-    fontSize: 12
   }
 });

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

@@ -1,77 +1,91 @@
 "use strict";
 
-import { useState } from "react";
-import { useAccountAccess, LicenseManager } from "@buoy-gg/license";
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AccountSetupButton, AccountSetupCard } from "./AccountSetupContent.js";
+import { night } from "../ui/night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AccountSetup() {
-  const access = useAccountAccess();
   const [open, setOpen] = useState(false);
-  return /*#__PURE__*/_jsxs("div", {
+  const root = useRef(null);
+  const panel = useRef(null);
+  const titleId = useId();
+  const close = (restoreFocus = true) => {
+    setOpen(false);
+    if (restoreFocus) root.current?.querySelector('[data-account-launcher] [role="button"]')?.focus({
+      preventScroll: true
+    });
+  };
+  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__*/createPortal(/*#__PURE__*/_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__*/_jsx("button", {
-      onClick: () => setOpen(!open),
-      style: {
-        background: "#080a0b",
-        color: "#20C997",
-        border: "1px solid #20C997",
-        borderRadius: 24,
-        padding: "12px 16px"
+    children: [/*#__PURE__*/_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 ${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__*/_jsx("div", {
+      "data-account-launcher": "",
+      children: /*#__PURE__*/_jsx(AccountSetupButton, {
+        expanded: open,
+        onPress: () => setOpen(value => !value)
+      })
+    }), open && /*#__PURE__*/_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__*/_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__*/_jsx("h3", {
-        children: "Sign in to use Buoy"
-      }), /*#__PURE__*/_jsx("p", {
-        children: "A Free or Pro account is required. Run this command in your project, then reload the app."
-      }), /*#__PURE__*/_jsx("pre", {
-        children: "npx buoy login"
-      }), LicenseManager.getState().error && /*#__PURE__*/_jsx("p", {
-        role: "status",
-        children: LicenseManager.getState().error
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: () => {
-          const key = LicenseManager.getState().licenseKey;
-          if (key) void LicenseManager.setLicenseKey(key, {
-            force: true
-          });
-        },
-        children: "Retry verification"
-      }), /*#__PURE__*/_jsx("p", {
-        children: /*#__PURE__*/_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__*/_jsx("a", {
-        style: {
-          color: "#20C997"
-        },
-        href: "mailto:support@buoy.gg",
-        children: "support@buoy.gg"
-      })]
+      children: /*#__PURE__*/_jsx(AccountSetupCard, {
+        titleId: titleId,
+        onClose: () => close()
+      })
     })]
-  });
+  }), document.body);
 }

package/lib/module/license/AccountSetupContent.js

@@ -0,0 +1,476 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
+import { Check, ChevronRight, Copy, RefreshCw, X } from "../icons/lucide-icons.js";
+import { copyToClipboard } from "../clipboard/index.js";
+import { monoFont } from "../ui/fonts.js";
+import { night } from "../ui/night/nightTheme.js";
+import { getAccountAccess, getUseAccountAccess, getUseLicense, retryAccountAccess } from "./licenseModule.js";
+import { openPricing } from "./openPricing.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LOGIN_COMMAND = "npx buoy login";
+
+/** Shared account UI; each platform supplies positioning and dismissal. */
+export function AccountSetupButton({
+  onPress,
+  expanded = false
+}) {
+  const access = getUseAccountAccess()();
+  const checking = access.status === "initializing";
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: "Sign in to Buoy",
+    accessibilityState: {
+      expanded
+    },
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.launcher, expanded && styles.launcherOpen, pressed && styles.pressed],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.brandDot
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.launcherBrand,
+      children: "BUOY"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.launcherDivider
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.launcherLabel,
+      children: checking ? "Checking…" : "Sign in"
+    }), checking ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: 14,
+      color: night.color.accent
+    }) : /*#__PURE__*/_jsx(ChevronRight, {
+      size: 14,
+      color: night.color.textSecondary
+    })]
+  });
+}
+export function AccountSetupCard({
+  onClose,
+  titleId
+}) {
+  const access = getUseAccountAccess()();
+  const useLicenseHook = getUseLicense();
+  const license = useLicenseHook?.();
+  const [copied, setCopied] = useState(false);
+  const [retrying, setRetrying] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+  const timer = useRef(null);
+  const mounted = useRef(true);
+  const retryPending = useRef(false);
+  const checking = retrying || access.status === "initializing";
+  const statusMessage = license?.error || feedback;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  const handleCopy = useCallback(async () => {
+    const ok = await 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 = useCallback(async () => {
+    if (retryPending.current) return;
+    retryPending.current = true;
+    setRetrying(true);
+    setFeedback(null);
+    try {
+      await retryAccountAccess();
+      if (mounted.current && 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__*/_jsxs(View, {
+    style: styles.card,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.brand,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.brandDot
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.wordmark,
+          children: "BUOY"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerLabel,
+          children: "Developer tools"
+        })]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close account setup",
+        onPress: onClose,
+        hitSlop: 6,
+        style: ({
+          pressed
+        }) => [styles.close, pressed && styles.pressed],
+        children: /*#__PURE__*/_jsx(X, {
+          size: 16,
+          color: night.color.textSecondary
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Text, {
+      nativeID: titleId,
+      accessibilityRole: "header",
+      style: styles.title,
+      children: ["Connect your", "\n", "Buoy account"]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.description,
+      children: "Sign in with a Free or Pro account to open your developer tools."
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.terminal,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.terminalHeader,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.terminalLabel,
+          children: "RUN IN YOUR PROJECT"
+        }), /*#__PURE__*/_jsxs(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: copied ? "Login command copied" : "Copy login command",
+          onPress: handleCopy,
+          style: ({
+            pressed
+          }) => [styles.copy, pressed && styles.pressed],
+          children: [copied ? /*#__PURE__*/_jsx(Check, {
+            size: 13,
+            color: night.color.accent
+          }) : /*#__PURE__*/_jsx(Copy, {
+            size: 13,
+            color: night.color.textSecondary
+          }), /*#__PURE__*/_jsx(Text, {
+            accessibilityLiveRegion: "polite",
+            style: [styles.copyText, copied && styles.accentText],
+            children: copied ? "Copied" : "Copy"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.command,
+        children: [/*#__PURE__*/_jsx(Text, {
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          style: styles.prompt,
+          children: "$"
+        }), /*#__PURE__*/_jsx(Text, {
+          selectable: true,
+          style: styles.commandText,
+          children: LOGIN_COMMAND
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.hint,
+      children: "Finish signing in, then reload your app."
+    }), /*#__PURE__*/_jsxs(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__*/_jsx(ActivityIndicator, {
+        size: 15,
+        color: night.color.onAccent
+      }) : /*#__PURE__*/_jsx(RefreshCw, {
+        size: 15,
+        color: night.color.onAccent
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.primaryText,
+        children: checking ? "Checking connection…" : "Check connection"
+      })]
+    }), statusMessage && /*#__PURE__*/_jsx(Text, {
+      accessibilityRole: "alert",
+      accessibilityLiveRegion: "polite",
+      style: styles.feedback,
+      children: statusMessage
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.footerLabel,
+        children: "Need a hand?"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.links,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "link",
+          onPress: () => openPricing("https://github.com/Buoy-gg/buoy/issues/new/choose"),
+          style: styles.link,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.linkText,
+            children: "GitHub"
+          })
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "link",
+          accessibilityLabel: "Email support@buoy.gg",
+          onPress: () => openPricing("mailto:support@buoy.gg"),
+          style: styles.link,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.linkText,
+            children: "Email"
+          })
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "link",
+          accessibilityLabel: "View Buoy plans",
+          onPress: () => openPricing(),
+          style: styles.link,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.linkText,
+            children: "Plans"
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = 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: night.color.accentBorderStrong
+  },
+  launcherBrand: {
+    color: night.color.text,
+    fontSize: 11,
+    fontWeight: "800",
+    letterSpacing: 1.2,
+    lineHeight: 16
+  },
+  launcherDivider: {
+    width: 1,
+    height: 16,
+    backgroundColor: "#35383C",
+    marginHorizontal: 2
+  },
+  launcherLabel: {
+    color: night.color.text,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 18
+  },
+  brandDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 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: night.color.text,
+    fontSize: 11,
+    fontWeight: "800",
+    letterSpacing: 1.4,
+    lineHeight: 16
+  },
+  headerLabel: {
+    color: night.color.textSecondary,
+    fontSize: 11,
+    lineHeight: 16,
+    marginLeft: 4
+  },
+  close: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: night.color.fill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    color: 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: night.color.textSecondary,
+    fontSize: 11,
+    fontWeight: "500",
+    lineHeight: 16
+  },
+  accentText: {
+    color: night.color.accent
+  },
+  command: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 6,
+    paddingBottom: 18
+  },
+  prompt: {
+    color: night.color.accent,
+    fontSize: 15,
+    fontFamily: monoFont,
+    lineHeight: 22
+  },
+  commandText: {
+    color: night.color.text,
+    fontSize: 15,
+    fontFamily: monoFont,
+    lineHeight: 22,
+    flexShrink: 1
+  },
+  hint: {
+    color: night.color.textSecondary,
+    fontSize: 12,
+    lineHeight: 18,
+    marginTop: 10,
+    marginBottom: 22
+  },
+  primary: {
+    minHeight: 42,
+    borderRadius: 10,
+    backgroundColor: night.color.accent,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  primaryPressed: {
+    backgroundColor: night.color.accentPressed
+  },
+  primaryBusy: {
+    opacity: 0.75
+  },
+  primaryText: {
+    color: 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: night.color.separator,
+    marginTop: 20,
+    paddingTop: 8
+  },
+  footerLabel: {
+    color: 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
+  }
+});