@hanzo/rooms 0.1.46 → 0.1.48

package/dist/App.js

@@ -19,21 +19,27 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // where nothing fills it: drawn there it was an empty pane to the right of the
 // builder. So Dev's pane is cut on its own and the summary is Chat's alone.
 //
+// EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
+// included. Pressed on the page it names, a row moves nothing, and a drawer
+// that closed only on a new address stayed open over the page it had asked for.
+//
+// THE PLANS' OWN ADDRESS LEAVES for the pay site in its place (dev.tsx `leave`),
+// so the builder's own plans are never drawn.
+//
 // THE WINDOW IS A FRAME (`data-slot="frame"`): the column, the pane and the
 // column beside it are three panes floating on a lit floor (ground.ts), one
 // gutter round them and between them, `--pane-gap`, each sized by the edge
 // beside it.
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Menu } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { Builder, HostProvider, route } from '@hanzo/build';
 import { SidebarIconButton } from '@hanzo/ui/chat';
-import { scrim } from '@hanzo/ui/glass';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
 import { Column } from './Column.js';
-import { useDevHost } from './dev.js';
+import { isPlans, leave, useDevHost } from './dev.js';
 import { useRooms } from './host.js';
 import { wordmark } from './ModeMark.js';
 import { empty, openThread, useOpen } from './open.js';
@@ -42,10 +48,34 @@ import { floor, pane } from './ground.js';
 import { app, go, place, talk } from './lib/host.js';
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
+/**
+ * The dim under the phone's drawer: design's scrim at two fifths, so the page
+ * still reads through the drawer's glass the way it reads through the browser's
+ * own bar, rather than a black wall the glass has nothing to show of. gui
+ * carries a `color-mix()` to the page unchanged; its types only name custom
+ * properties.
+ */
+const DIM = 'color-mix(in srgb, var(--surface-scrim) 40%, transparent)';
+/** The phone's drawer stands the gutter off each edge, or the device's inset where that is wider. */
+const INSET = {
+    top: 'max(var(--pane-gap), var(--safe-top))',
+    bottom: 'max(var(--pane-gap), var(--safe-bottom))',
+    left: 'max(var(--pane-gap), var(--safe-left))',
+};
 /** Where each mode was last, so the switch goes back to it. */
 const last = { chat: '', dev: '' };
 export function App() {
-    const host = useDevHost();
+    const [drawer, setDrawer] = useState(false);
+    const shut = useCallback(() => setDrawer(false), []);
+    const dev = useDevHost();
+    // The builder's moves put the drawer away first.
+    const host = useMemo(() => ({
+        ...dev,
+        go: (to, how) => {
+            shut();
+            dev.go(to, how);
+        },
+    }), [dev, shut]);
     const { client } = useAi();
     const here = useRooms().path ?? '/';
     const at = place(here) ?? HOME;
@@ -54,7 +84,11 @@ export function App() {
     const run = at.mode === 'dev' && route(at.at).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
     const { thread } = useOpen();
-    const [drawer, setDrawer] = useState(false);
+    const plans = at.mode === 'dev' && isPlans(at.at);
+    useEffect(() => {
+        if (plans)
+            leave('app');
+    }, [plans]);
     // An address names Chat's conversation, and one just begun writes its id back.
     useEffect(() => {
         if (mode !== 'chat')
@@ -76,12 +110,12 @@ export function App() {
         last[mode] = `${window.location.pathname}${window.location.search}`;
         setDrawer(false);
     }, [mode, here]);
-    const toChat = () => go(last.chat || talk());
-    const toDev = () => go(last.dev || app(''));
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...floor, flex: 1, minW: 0, p: "var(--pane-gap)", gap: "var(--pane-gap)", height: "100dvh", overflow: "hidden", "$max-md": {
-                    p: 0,
-                    gap: 0,
-                    bg: 'var(--black)',
-                    backgroundImage: 'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.04), transparent 70%), linear-gradient(180deg, #000000 0%, #030303 50%, #080808 100%)',
-                }, children: [_jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: go }), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, gap: "var(--pane-gap)", "$max-md": { gap: 0 }, children: [_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: _jsx(Builder, { host: host, rail: false }) })) })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), ...scrim, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: "var(--pane-gap)", b: "var(--pane-gap)", l: "var(--pane-gap)", width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: go, drawer: true }) })] })) : null] }) }) }));
+    /** A move of the app's own: the drawer away, then the address. */
+    const move = useCallback((address) => {
+        shut();
+        go(address);
+    }, [shut]);
+    const toChat = () => move(last.chat || talk());
+    const toDev = () => move(last.dev || app(''));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...floor, flex: 1, minW: 0, p: "var(--pane-gap)", gap: "var(--pane-gap)", height: "100dvh", overflow: "hidden", "$max-md": { p: 0, gap: 0 }, children: [_jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: move }), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, gap: "var(--pane-gap)", "$max-md": { gap: 0 }, children: [_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: move, drawer: true }) })] })) : null] }) }) }));
 }

package/dist/Column.js

@@ -38,6 +38,16 @@ const GUTTER_END = 'calc(-1 * var(--pane-gap))';
 /** The sidebar fills the column. Its `width` is typed in px alone, though its frame takes any gui size — the type is
  *  @hanzo/ui's to widen. */
 const FILL = { width: '100%' };
+/**
+ * The phone's drawer floats over the page under the browser's own glass bar, so
+ * it is cut like that bar: the composer's corner, the strong hairline, the lit
+ * top edge and the floating drop. Its fill and blur stay the pane's.
+ */
+const FLOAT = {
+    borderRadius: 'var(--radius-composer)',
+    borderColor: 'var(--border-strong)',
+    boxShadow: 'var(--edge-highlight), var(--shadow-floating)',
+};
 /** The column's width, px: its default, and the two a drag holds it between. */
 const WIDTH = 272;
 const FLOOR = 220;
@@ -89,7 +99,7 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
                     groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }), link.id === NEW ? _jsx(Mark, {}) : null] }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...(drawer ? FLOAT : null), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             setWords('');
                                     }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }), _jsx(Row, {})] })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }), link.id === NEW ? _jsx(Row, {}) : null] }, link.id))) })] }, g.id))) })), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 

package/dist/dev.d.ts

@@ -1,3 +1,12 @@
 import { type Host } from '@hanzo/build';
+/** Whether a builder address names the plans. */
+export declare const isPlans: (to: string) => boolean;
+/**
+ * Leaves for the plans on the pay site (`/pay/cart`), for the organization in
+ * use. `from` is the page to come back to once paid: this one, or Dev when the
+ * address itself named the plans, which is replaced rather than returned to so
+ * Back and the pay site's return both land in the app.
+ */
+export declare function leave(from: 'here' | 'app'): void;
 /** The host for a signed-in reader. */
 export declare function useDevHost(): Host;

package/dist/dev.js

@@ -19,6 +19,14 @@
 // rooms' shell draws its own Settings pane, and the app has none, so Chat's
 // "See usage" opens the builder's Usage — the page the account menu's Usage
 // opens — rather than nothing.
+//
+// THE PLANS ARE THE PAY SITE'S. Every way the app reaches the plans — the
+// account menu's View all plans and its plan's Upgrade, Billing's Adjust plan,
+// an automation's See plans — names the builder's plans address, and `go`
+// leaves for the pay site's plans there (`leave`), for the organization in use,
+// coming back once paid. A typed or reloaded plans address leaves the same way
+// (App.tsx). A page load, at once, not a move inside the app: the pay site is
+// where a plan is bought.
 import { useEffect, useMemo } from 'react';
 import { useLook, useRooms } from './host.js';
 import { useIam } from '@hanzo/iam/react';
@@ -29,6 +37,7 @@ import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
 import { app, go, place } from './lib/host.js';
 import { link } from './lib/tags.js';
+import { payUrl } from './lib/pay.js';
 import { showSettings, useOpen } from './open.js';
 /** Where the builder links out: every one of them an address of this site. */
 const LINKS = {
@@ -37,6 +46,24 @@ const LINKS = {
     settings: app('-/settings'),
     home: '/',
 };
+/** The builder's address for the plans. */
+const PLANS = path({ kind: 'screen', screen: 'plans' });
+/** Whether a builder address names the plans. */
+export const isPlans = (to) => path(route(to)) === PLANS;
+/**
+ * Leaves for the plans on the pay site (`/pay/cart`), for the organization in
+ * use. `from` is the page to come back to once paid: this one, or Dev when the
+ * address itself named the plans, which is replaced rather than returned to so
+ * Back and the pay site's return both land in the app.
+ */
+export function leave(from) {
+    const back = from === 'here' ? window.location.href : `${window.location.origin}${app('')}`;
+    const to = payUrl('/cart', { org: org(), returnUrl: back });
+    if (from === 'here')
+        window.location.assign(to);
+    else
+        window.location.replace(to);
+}
 /** The person's theme, when they have chosen one the builder can name. */
 const theme = (t) => (t === 'light' || t === 'dark' || t === 'system' ? t : undefined);
 /** The builder address a pathname names: Dev's place, or New for a path that is not Dev's. */
@@ -88,7 +115,7 @@ export function useDevHost() {
         person: { name, email, avatar },
         admin: administers(bearer(), scoped),
         path: here,
-        go: (to, how) => go(app(to), how?.replace),
+        go: (to, how) => (isPlans(to) ? leave('here') : go(app(to), how?.replace)),
         links: LINKS,
         // An address of the app moves the app, another of this site moves in the
         // router, and another origin is left in this tab. platform.hanzo.ai is

package/dist/lib/destination.d.ts

@@ -54,6 +54,21 @@ export declare function door(): string;
  * the page is `door()`'s; a control that says "Sign in" names LOGIN.
  */
 export declare function enter(to?: string): void;
+/**
+ * The campaign a visit arrived with: the UTM parameters and the ad platforms'
+ * click ids. They ride to the sign-in page as its own parameters, so the page a
+ * campaign's visitor signs up on is a landing with that campaign, not one with
+ * it folded inside `next=`.
+ */
+export declare const CAMPAIGN: readonly ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content", "gclid", "gbraid", "wbraid", "fbclid", "li_fat_id", "twclid", "ttclid"];
+/**
+ * The sign-in address for a reader on `here`: `to`, with `here` as its `next=`
+ * when that is a page worth coming back to, and the campaign `here` carries as
+ * `to`'s own parameters. The page itself is written in the address too, so the
+ * place (a room, a prompt in `?q=`) survives what sessionStorage does not: a new
+ * tab, a pasted link.
+ */
+export declare function entry(to: string, here: string): string;
 /**
  * The `?next=` a sign-in page was opened with, when it is an address on this
  * site (`safe`): where the sign-in goes on to. Anything else is undefined.

package/dist/lib/destination.js

@@ -119,10 +119,39 @@ export function enter(to = door()) {
     if (handoff(here))
         return;
     rememberDestination();
-    // Written in the address too, so the place (a room, a prompt in `?q=`)
-    // survives what sessionStorage does not: a new tab, a pasted link.
+    window.location.assign(entry(to, here));
+}
+/**
+ * The campaign a visit arrived with: the UTM parameters and the ad platforms'
+ * click ids. They ride to the sign-in page as its own parameters, so the page a
+ * campaign's visitor signs up on is a landing with that campaign, not one with
+ * it folded inside `next=`.
+ */
+export const CAMPAIGN = [
+    "utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content",
+    "gclid", "gbraid", "wbraid", "fbclid", "li_fat_id", "twclid", "ttclid",
+];
+/**
+ * The sign-in address for a reader on `here`: `to`, with `here` as its `next=`
+ * when that is a page worth coming back to, and the campaign `here` carries as
+ * `to`'s own parameters. The page itself is written in the address too, so the
+ * place (a room, a prompt in `?q=`) survives what sessionStorage does not: a new
+ * tab, a pasted link.
+ */
+export function entry(to, here) {
+    const [path, query = ""] = to.split("?");
+    const out = new URLSearchParams(query);
     const back = safe(here, "");
-    window.location.assign(back && back !== "/" ? `${to}?next=${encodeURIComponent(back)}` : to);
+    if (back && back !== "/")
+        out.set("next", back);
+    const from = new URLSearchParams(here.split("#")[0].split("?")[1] ?? "");
+    for (const k of CAMPAIGN) {
+        const v = from.get(k)?.trim();
+        if (v && !out.has(k))
+            out.set(k, v);
+    }
+    const q = out.toString();
+    return q ? `${path}?${q}` : path;
 }
 /**
  * The `?next=` a sign-in page was opened with, when it is an address on this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",