@buoy-gg/shared-ui 7.0.41 → 7.0.43

package/lib/module/license/AccountSetupContent.js

@@ -1,476 +1 @@
-"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
-  }
-});
+"use strict";import{useCallback as R,useEffect as W,useRef as C,useState as x}from"react";import{ActivityIndicator as H,Pressable as l,StyleSheet as I,Text as i,View as n}from"react-native";import{Check as j,ChevronRight as v,Copy as O,RefreshCw as F,X as N}from"../icons/lucide-icons.js";import{copyToClipboard as U}from"../clipboard/index.js";import{monoFont as T}from"../ui/fonts.js";import{night as o}from"../ui/night/nightTheme.js";import{getAccountAccess as E,getUseAccountAccess as B,getUseLicense as V,retryAccountAccess as M}from"./licenseModule.js";import{openPricing as S}from"./openPricing.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";export const LOGIN_COMMAND="npx buoy login";export function AccountSetupButton({onPress:p,expanded:u=false}){const m=B()();const y=m.status==="initializing";return r(l,{accessibilityRole:"button",accessibilityLabel:"Sign in to Buoy",accessibilityState:{expanded:u},onPress:p,style:({pressed:b})=>[e.launcher,u&&e.launcherOpen,b&&e.pressed],children:[t(n,{style:e.brandDot}),t(i,{style:e.launcherBrand,children:"BUOY"}),t(n,{style:e.launcherDivider}),t(i,{style:e.launcherLabel,children:y?"Checking\u2026":"Sign in"}),y?t(H,{size:14,color:o.color.accent}):t(v,{size:14,color:o.color.textSecondary})]})}export function AccountSetupCard({onClose:p,titleId:u}){const m=B()();const y=V();const b=y?.();const[g,k]=x(false);const[L,w]=x(false);const[A,d]=x(null);const h=C(null);const a=C(true);const f=C(false);const s=L||m.status==="initializing";const z=b?.error||A;W(()=>{a.current=true;return()=>{a.current=false;if(h.current)clearTimeout(h.current)}},[]);const D=R(async()=>{const c=await U(LOGIN_COMMAND);if(!a.current)return;if(!c){d("Select the command to copy it, then run it in your project terminal.");return}d(null);k(true);if(h.current)clearTimeout(h.current);h.current=setTimeout(()=>k(false),2e3)},[]);const P=R(async()=>{if(f.current)return;f.current=true;w(true);d(null);try{await M();if(a.current&&E().status!=="admitted"){d("No account connected yet. Run the command, sign in, then reload your app.")}}catch{if(a.current)d("Couldn't verify your account. Check your connection and try again.")}finally{f.current=false;if(a.current)w(false)}},[]);return r(n,{style:e.card,children:[r(n,{style:e.header,children:[r(n,{style:e.brand,children:[t(n,{style:e.brandDot}),t(i,{style:e.wordmark,children:"BUOY"}),t(i,{style:e.headerLabel,children:"Developer tools"})]}),t(l,{accessibilityRole:"button",accessibilityLabel:"Close account setup",onPress:p,hitSlop:6,style:({pressed:c})=>[e.close,c&&e.pressed],children:t(N,{size:16,color:o.color.textSecondary})})]}),r(i,{nativeID:u,accessibilityRole:"header",style:e.title,children:["Connect your","\n","Buoy account"]}),t(i,{style:e.description,children:"Sign in with a Free or Pro account to open your developer tools."}),r(n,{style:e.terminal,children:[r(n,{style:e.terminalHeader,children:[t(i,{style:e.terminalLabel,children:"RUN IN YOUR PROJECT"}),r(l,{accessibilityRole:"button",accessibilityLabel:g?"Login command copied":"Copy login command",onPress:D,style:({pressed:c})=>[e.copy,c&&e.pressed],children:[g?t(j,{size:13,color:o.color.accent}):t(O,{size:13,color:o.color.textSecondary}),t(i,{accessibilityLiveRegion:"polite",style:[e.copyText,g&&e.accentText],children:g?"Copied":"Copy"})]})]}),r(n,{style:e.command,children:[t(i,{accessibilityElementsHidden:true,importantForAccessibility:"no",style:e.prompt,children:"$"}),t(i,{selectable:true,style:e.commandText,children:LOGIN_COMMAND})]})]}),t(i,{style:e.hint,children:"Finish signing in, then reload your app."}),r(l,{accessibilityRole:"button",accessibilityState:{disabled:s,busy:s},disabled:s,onPress:P,style:({pressed:c})=>[e.primary,c&&e.primaryPressed,s&&e.primaryBusy],children:[s?t(H,{size:15,color:o.color.onAccent}):t(F,{size:15,color:o.color.onAccent}),t(i,{style:e.primaryText,children:s?"Checking connection\u2026":"Check connection"})]}),z&&t(i,{accessibilityRole:"alert",accessibilityLiveRegion:"polite",style:e.feedback,children:z}),r(n,{style:e.footer,children:[t(i,{style:e.footerLabel,children:"Need a hand?"}),r(n,{style:e.links,children:[t(l,{accessibilityRole:"link",onPress:()=>S("https://github.com/Buoy-gg/buoy/issues/new/choose"),style:e.link,children:t(i,{style:e.linkText,children:"GitHub"})}),t(l,{accessibilityRole:"link",accessibilityLabel:"Email support@buoy.gg",onPress:()=>S("mailto:support@buoy.gg"),style:e.link,children:t(i,{style:e.linkText,children:"Email"})}),t(l,{accessibilityRole:"link",accessibilityLabel:"View Buoy plans",onPress:()=>S(),style:e.link,children:t(i,{style:e.linkText,children:"Plans"})})]})]})]})}const e=I.create({launcher:{flexDirection:"row",alignItems:"center",gap:10,minHeight:44,paddingHorizontal:16,borderRadius:14,backgroundColor:"#111315",borderWidth:1,borderColor:"#303437",shadowColor:"#000",shadowOpacity:.28,shadowRadius:14,shadowOffset:{width:0,height:4},elevation:8},launcherOpen:{borderColor:o.color.accentBorderStrong},launcherBrand:{color:o.color.text,fontSize:11,fontWeight:"800",letterSpacing:1.2,lineHeight:16},launcherDivider:{width:1,height:16,backgroundColor:"#35383C",marginHorizontal:2},launcherLabel:{color:o.color.text,fontSize:12,fontWeight:"500",lineHeight:18},brandDot:{width:6,height:6,borderRadius:3,backgroundColor:o.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:o.color.text,fontSize:11,fontWeight:"800",letterSpacing:1.4,lineHeight:16},headerLabel:{color:o.color.textSecondary,fontSize:11,lineHeight:16,marginLeft:4},close:{width:28,height:28,borderRadius:8,backgroundColor:o.color.fill,alignItems:"center",justifyContent:"center"},title:{color:o.color.text,fontSize:25,fontWeight:"600",lineHeight:31,letterSpacing:-.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:.8,lineHeight:14},copy:{minWidth:68,minHeight:32,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,borderRadius:6},copyText:{color:o.color.textSecondary,fontSize:11,fontWeight:"500",lineHeight:16},accentText:{color:o.color.accent},command:{flexDirection:"row",alignItems:"center",gap:12,paddingHorizontal:16,paddingTop:6,paddingBottom:18},prompt:{color:o.color.accent,fontSize:15,fontFamily:T,lineHeight:22},commandText:{color:o.color.text,fontSize:15,fontFamily:T,lineHeight:22,flexShrink:1},hint:{color:o.color.textSecondary,fontSize:12,lineHeight:18,marginTop:10,marginBottom:22},primary:{minHeight:42,borderRadius:10,backgroundColor:o.color.accent,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:9,paddingHorizontal:12,paddingVertical:10},primaryPressed:{backgroundColor:o.color.accentPressed},primaryBusy:{opacity:.75},primaryText:{color:o.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:o.color.separator,marginTop:20,paddingTop:8},footerLabel:{color:o.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:.7}});