@hanzo/rooms 0.1.38 → 0.1.39

package/README.md

@@ -11,13 +11,13 @@ import { CalScheduler } from '@hanzo/rooms/CalScheduler'
 
 configure({ site: '', home: '/home', signUp: '/signup' })
 
-<Rooms router={router} search={search} path={pathname} route={route} Link={Link}>
+<Rooms router={router} path={pathname} route={route} Link={Link}>
   <Room mode="cal"><CalScheduler /></Room>
 </Rooms>
 ```
 
 `configure()` names the host's addresses (where its own pages live, the
 gateway and IAM, the plan catalogue to paint first). `<Rooms>` carries what
-moves: the router, the query, the path, the route and the link component. The rooms
+moves: the router, the path, the route and the link component. The rooms
 import nothing from a host, and their look comes from `@hanzo/appearance` and
 `@hanzo/design` through `@hanzo/ui`.

package/dist/Account.js

@@ -3,22 +3,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * WHO YOU ARE, at the foot of the sidebar: the person, and the person's menu.
  *
- * Profile, appearance, usage, API keys, security and sign out — the account, and
- * nothing that belongs to the workspace. Which workspace you stand in is the
- * switcher at the TOP of the sidebar, and what it may spend is its Billing, so
- * this card shows neither: a balance here read as the person's money when it is
- * the workspace's.
+ * The plan leads it — @hanzo/build's `Meter`, the block every account menu opens
+ * with: the plan by its family and its windows as shares, the free allowance on
+ * Free, the balance only with no plan. Then profile, appearance, usage, billing,
+ * API keys, security and sign out — the account, and nothing that belongs to the
+ * workspace. Which workspace you stand in is the switcher at the TOP of the
+ * sidebar, and what it may spend is its Billing: a plan never sits beside a
+ * balance here.
  */
-import { useEffect, useRef, useState } from 'react';
-import { Activity, ChevronsUpDown, KeyRound, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Activity, ChevronsUpDown, CreditCard, KeyRound, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
+import { Meter, useStanding } from '@hanzo/build';
 import { XStack, YStack, Text, Box } from '@hanzo/ui';
 import { sheet } from '@hanzo/ui/glass';
 import { useIam } from '@hanzo/iam/react';
 import { useSignOut } from './lib/signout.js';
 import { useAccount } from './lib/account.js';
 import { Face } from './cast.js';
-import { iam } from './lib/api.js';
+import { api, iam } from './lib/api.js';
+import { bearer, org } from './lib/session.js';
 import { link } from './lib/tags.js';
+import { showSettings } from './open.js';
+import { site } from './where.js';
 function Row({ icon, onPress, children, }) {
     return (_jsx(Box, { render: "button", onClick: onPress, width: "100%", px: "$3", py: "$2", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", children: [icon, _jsx(Text, { fontSize: "$2", color: "$ink", children: children })] }) }));
 }
@@ -29,6 +35,9 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, on
     const { user: account } = useAccount();
     const [open, setOpen] = useState(false);
     const holder = useRef(null);
+    const scoped = org();
+    const target = useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
+    const plan = useStanding(target, open);
     useEffect(() => {
         if (!open)
             return;
@@ -55,5 +64,5 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, on
     // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
     , { 
         // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
-        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, onUsage ? (_jsx(Row, { icon: _jsx(Activity, { size: 15, "aria-hidden": true }), onPress: act(onUsage), children: "Usage" })) : null, onKeys ? (_jsx(Row, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), onPress: act(onKeys), children: "API keys" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
+        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Meter, { read: plan, onPlans: act(() => window.location.assign(site('/pricing'))), onBilling: act(() => showSettings('billing')) }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, onUsage ? (_jsx(Row, { icon: _jsx(Activity, { size: 15, "aria-hidden": true }), onPress: act(onUsage), children: "Usage" })) : null, _jsx(Row, { icon: _jsx(CreditCard, { size: 15, "aria-hidden": true }), onPress: act(() => showSettings('billing')), children: "Billing" }), onKeys ? (_jsx(Row, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), onPress: act(onKeys), children: "API keys" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
 }