@hanzo/rooms 0.1.56 → 0.1.58

package/dist/Shell.js

@@ -75,7 +75,6 @@ import { Profile } from "./Profile.js";
 import { SupportPicker } from "./Support.js";
 import { Find } from "./Find.js";
 import { Account } from "./Account.js";
-import { ModeMark } from "./ModeMark.js";
 import { called } from "./team.js";
 import { checkoutUrl } from './lib/pay.js';
 /** Tabs: the terminals, at their own host. */
@@ -116,7 +115,7 @@ const CONTROL = 28;
 import { getStoredPeople, getStoredAgents, getCustomThreads, createDirectChat, } from "./contacts-store.js";
 import { bare } from './lib/bare.js';
 import { BAD } from './lib/mix.js';
-import { brand, site, where } from './where.js';
+import { brand, site, where, wordmark } from './where.js';
 /**
  * The destinations, in rail order.
  *
@@ -570,13 +569,13 @@ function Team({ filter = "", onPick, navigate, }) {
     // this app climbs (see Home's `Waiting`). "Reading." never resolves for a
     // reader nobody is going to answer, so the session is asked first.
     if (!signedIn)
-        return _jsx(Note, { children: "Sign in to see your org's rooms." });
+        return _jsx(Note, { children: "Sign in to see your org's channels." });
     if (wrong)
-        return _jsx(Note, { children: say(wrong, "your rooms") });
+        return _jsx(Note, { children: say(wrong, "your channels") });
     if (rooms === null)
-        return _jsx(Note, { children: "Reading your rooms." });
+        return _jsx(Note, { children: "Reading your channels." });
     if (rooms.length === 0)
-        return _jsx(Note, { children: "No rooms yet. Open one and the conversation has somewhere to live." });
+        return _jsx(Note, { children: "No channels yet." });
     if (shown.length === 0)
         return _jsxs(Note, { children: ["No room matches \u201C", filter, "\u201D."] });
     return (_jsxs(_Fragment, { children: [favourites.length > 0 ? (_jsx(SidebarFolder, { name: "Favorites", defaultOpen: true, children: favourites.map((one) => (_jsx(SidebarItem, { active: teamKey(one) === room, icon: _jsx(Star, { size: 13, "aria-hidden": true }), onPress: () => {
@@ -1181,7 +1180,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
             // Drive names the company rather than the room.
             id: place.id,
             title: place.label,
-            category: "Rooms",
+            category: "Apps",
             icon: _jsx(place.icon, { size: 15, "aria-hidden": true }),
             href: place.route,
         })),
@@ -1210,7 +1209,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     const list = (_jsxs(Sidebar, { ref: side.ref, 
         // A phone's sheet is never wider than 280, whatever the laptop kept.
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Grip, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-switch", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(ModeMark, { mode: mode === "dev" ? "dev" : "chat", onChat: () => navigate?.("/chat"), onDev: () => navigate?.(dev()) }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
+        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Grip, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-name", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode === "dev" ? "dev" : "chat") }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
                                 if (!navigate || e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
                                     return;
                                 e.preventDefault();

package/dist/Talk.js

@@ -43,7 +43,7 @@ function when(ms) {
  * an empty header. The sigil is how a client DRAWS a room and is not stored, so
  * it is added here and only where there is a name to put it on.
  */
-const titleOf = (room) => room.name ? `#${room.name}` : room.direct ? 'Direct message' : 'Room';
+const titleOf = (room) => room.name ? `#${room.name}` : room.direct ? 'Direct message' : 'Channel';
 /** Adds `@name ` to a draft, after a space where the draft needs one. */
 const mention = (draft, name) => `${draft && !/\s$/.test(draft) ? `${draft} ` : draft}@${name} `;
 export function Talk({ room }) {
@@ -70,14 +70,14 @@ export function Talk({ room }) {
         }
         catch (e) {
             setDraft(text);
-            setRefused(say(e, 'this room', 'save'));
+            setRefused(say(e, 'this channel', 'save'));
         }
         finally {
             setPending((held) => held.filter((one) => one.key !== key));
         }
     };
     const name = (of) => setDraft((held) => mention(held, of));
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(ChannelHeader, { name: titleOf(room), children: [room.topic ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: room.topic })) : null, _jsx(Box, { render: "button", "aria-label": aside === 'roster' ? 'Hide directory & roster' : 'Show directory & roster', "aria-pressed": aside === 'roster', onClick: () => showAside(aside === 'roster' ? null : 'roster'), ml: "auto", p: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Users, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", p: "$4", gap: "$3", children: [failed ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: say(failed, 'this room') })) : messages === null ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the room." })) : messages.length === 0 && pending.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing has been said here yet." })) : (messages.map((one) => (_jsx(Line, { member: memberOf(members, one.author), fallback: one.author, stamp: when(one.createdOn), text: one.text }, one.id)))), pending
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(ChannelHeader, { name: titleOf(room), children: [room.topic ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: room.topic })) : null, _jsx(Box, { render: "button", "aria-label": aside === 'roster' ? 'Hide directory & roster' : 'Show directory & roster', "aria-pressed": aside === 'roster', onClick: () => showAside(aside === 'roster' ? null : 'roster'), ml: "auto", p: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Users, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", p: "$4", gap: "$3", children: [failed ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: say(failed, 'this channel') })) : messages === null ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the room." })) : messages.length === 0 && pending.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing has been said here yet." })) : (messages.map((one) => (_jsx(Line, { member: memberOf(members, one.author), fallback: one.author, stamp: when(one.createdOn), text: one.text }, one.id)))), pending
                         .filter((one) => !messages?.some((said) => said.author === me && said.text === one.text))
                         .map((one) => (_jsx(Line, { member: mine, fallback: "You", text: one.text, soft: true }, `pending-${one.key}`)))] }), _jsxs(YStack, { p: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Composer, { value: draft, onChange: setDraft, onSend: () => void speak(), placeholder: `Message ${titleOf(room)}`, label: `Message ${titleOf(room)}`, hint: agents.length ? 'Mention an agent with @name and it answers.' : undefined, children: agents.length ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", shrink: 1, minW: 0, children: agents.map((one) => (_jsx(Box, { render: "button", "aria-label": `Mention ${one.name}`, onClick: () => name(one.name), px: "$2", py: "$1", rounded: "$10", hoverStyle: { bg: '$hover' }, children: _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["@", one.name] }) }, one.id))) })) : null }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] }), _jsx(Beside, { children: aside === 'roster' ? _jsx(Roster, { members: members, wrong: wrong, onMention: name }) : null })] }));
 }

package/dist/host.js

@@ -25,7 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import { useIam, useOrganizations } from '@hanzo/iam/react';
 import { useAppearance } from '@hanzo/appearance';
-import { where } from './where.js';
+import { iam } from './lib/api.js';
 const Plain = ({ prefetch: _prefetch, ...rest }) => _jsx("a", { ...rest });
 const Context = createContext({
     router: {
@@ -59,7 +59,7 @@ export function useLook() {
     // passing through a room on the way to sign in sends nothing to the issuer.
     return useAppearance({
         org: org.id,
-        account: accessToken ? { base: (where().iam ?? 'https://hanzo.id').replace(/\/+$/, ''), token: accessToken } : undefined,
+        account: accessToken ? { base: iam(), token: accessToken } : undefined,
     });
 }
 /**

package/dist/lib/host.js

@@ -207,9 +207,11 @@ const DEVNET = '-dev.hanzo.ai';
  * either: it is hanzo.ai/dev's old address and redirects there.
  */
 export function devnet(hostname) {
-    if (!hostname.endsWith(DEVNET))
+    // A fully qualified name (app-dev.hanzo.ai.) is the same host.
+    const host = hostname.endsWith('.') ? hostname.slice(0, -1) : hostname;
+    if (!host.endsWith(DEVNET))
         return false;
-    const label = hostname.slice(0, -'.hanzo.ai'.length);
+    const label = host.slice(0, -'.hanzo.ai'.length);
     return label.length > '-dev'.length && !label.includes('.');
 }
 /**

package/dist/lib/pay.d.ts

@@ -17,6 +17,14 @@
  * hanzo.bot, and the checkout lives on hanzo.ai.
  */
 export declare const BILLING_URL = "https://hanzo.ai/pay";
+/**
+ * The devnet's checkout: the same /pay mount on the devnet's site host, which
+ * charges Square's sandbox through the devnet's cloud. A page on a devnet host
+ * sends a buyer here and never to production's checkout.
+ */
+export declare const BILLING_DEV = "https://app-dev.hanzo.ai/pay";
+/** The checkout for the page in front of us: the devnet's on a devnet host, hanzo.ai's everywhere else. */
+export declare function billing(): string;
 /**
  * The checkout address, opened on a plan when one is named, and returning to
  * `back` once the buyer has paid. Without `back` a paid buyer lands on the pay

package/dist/lib/pay.js

@@ -4,6 +4,7 @@
  * Kept apart from `plans.ts`, which reads the bundled plan catalogue: a page
  * that only links the pay page or prints a price carries none of it.
  */
+import { devnet } from "./host.js";
 import { org } from "./session.js";
 /**
  * Where money changes hands: the checkout, mounted at hanzo.ai/pay so a buyer
@@ -18,6 +19,16 @@ import { org } from "./session.js";
  * hanzo.bot, and the checkout lives on hanzo.ai.
  */
 export const BILLING_URL = "https://hanzo.ai/pay";
+/**
+ * The devnet's checkout: the same /pay mount on the devnet's site host, which
+ * charges Square's sandbox through the devnet's cloud. A page on a devnet host
+ * sends a buyer here and never to production's checkout.
+ */
+export const BILLING_DEV = "https://app-dev.hanzo.ai/pay";
+/** The checkout for the page in front of us: the devnet's on a devnet host, hanzo.ai's everywhere else. */
+export function billing() {
+    return typeof window !== "undefined" && devnet(window.location.hostname) ? BILLING_DEV : BILLING_URL;
+}
 /**
  * The checkout address, opened on a plan when one is named, and returning to
  * `back` once the buyer has paid. Without `back` a paid buyer lands on the pay
@@ -50,9 +61,10 @@ export function payUrl(path, query) {
         if (v)
             q.set(k, v);
     const s = q.toString();
+    const at = billing();
     if (path === "/" && !s)
-        return BILLING_URL;
-    return `${BILLING_URL}${path}${s ? `?${s}` : ""}`;
+        return at;
+    return `${at}${path}${s ? `?${s}` : ""}`;
 }
 export const dollars = (n) => `$${n.toFixed(2)}`;
 /** Money as a sentence says it: whole dollars bare, anything else to the cent — $20, $16.67. */

package/dist/lib/plans.js

@@ -32,7 +32,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { where } from "../where.js";
 import { api } from "./api.js";
-import { BILLING_URL, checkoutUrl, dollars, money, payUrl } from "./pay.js";
+import { billing, checkoutUrl, dollars, money, payUrl } from "./pay.js";
 /**
  * The checkout a plan's CTA opens.
  *
@@ -52,7 +52,7 @@ export function planCheckoutUrl(plan, back) {
 export function term(href, interval) {
     if (interval === "month")
         return href;
-    const url = new URL(href, BILLING_URL);
+    const url = new URL(href, billing());
     url.searchParams.set("interval", "year");
     return url.toString();
 }

package/dist/recent.js

@@ -1,6 +1,6 @@
 // The Recents list as data: each mode's rows, the views a menu offers, and the
 // list a view makes of them. No React, so a spec reads it as it is.
-export const PLAIN = { status: 'all', since: 'any', group: 'date', sort: 'activity' };
+export const PLAIN = { status: 'all', since: 'any', group: 'none', sort: 'activity' };
 const STATUSES = [
     { id: 'all', label: 'All' },
     { id: 'running', label: 'Running' },

package/dist/rooms.js

@@ -87,7 +87,7 @@ export function useTeamRooms() {
     }, [client, user, now]);
     const open = useCallback(async (room) => {
         if (!client)
-            throw Object.assign(new Error('Sign in to open a room'), { status: 401 });
+            throw Object.assign(new Error('Sign in to open a channel'), { status: 401 });
         const made = await client.http.json({
             method: 'POST',
             path: '/v1/team/rooms',
@@ -180,7 +180,7 @@ export function useRoomMessages(room, space) {
     /** Says it and answers the stored row, or throws with the platform's status. */
     const send = useCallback(async (text) => {
         if (!client || !room || !space) {
-            throw Object.assign(new Error('This room has no address to send to'), { status: 503 });
+            throw Object.assign(new Error('This channel has no address to send to'), { status: 503 });
         }
         const row = await client.http.json({
             method: 'POST',

package/dist/thread.d.ts

@@ -55,3 +55,11 @@ export declare function ThreadRow({ t, active, aside, listed, children, }: {
     listed?: boolean;
     children: ReactElement;
 }): import("react").JSX.Element;
+/**
+ * The ⋯ of the conversation a pane holds, in its header: the trigger of the
+ * menu its row opens, drawn inside a `ConversationMenu` of that one
+ * conversation, so the header and the row offer one menu.
+ */
+export declare function ThreadMore({ t }: {
+    t: Thread;
+}): import("react").JSX.Element;

package/dist/thread.js

@@ -373,6 +373,21 @@ export function ThreadRow({ t, active = false, aside, listed = true, children, }
                         // Before gui's own press handler, which opens the menu and stops there.
                         onPointerDownCapture: aim, onKeyDownCapture: aim, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }));
 }
+/**
+ * The ⋯ of the conversation a pane holds, in its header: the trigger of the
+ * menu its row opens, drawn inside a `ConversationMenu` of that one
+ * conversation, so the header and the row offer one menu.
+ */
+export function ThreadMore({ t }) {
+    const menus = useContext(Rows);
+    if (!menus)
+        throw new Error('ThreadMore is drawn inside a ConversationMenu, which holds its menu.');
+    // gui types these handlers by React Native's event; on the web they carry the DOM's.
+    const aim = (e) => menus.aim(t, e.currentTarget);
+    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": "Conversation options", ...{ title: 'More' }, "data-slot": "conversation-options", width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: menus.open === t.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
+            // Before gui's own press handler, which opens the menu and stops there.
+            onPointerDownCapture: aim, onKeyDownCapture: aim, children: _jsx(MoreHorizontal, { size: 16, "aria-hidden": true }) }) }));
+}
 /** A conversation's title, written again: one line, never empty. */
 function Rename({ t, open, onOpenChange, onCloseAutoFocus, save, }) {
     const [words, setWords] = useState('');

package/dist/where.d.ts

@@ -67,5 +67,7 @@ export declare function configure(given: Partial<Addresses>): void;
 export declare const where: () => Addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export declare const brand: () => string;
+/** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
+export declare const wordmark: (mode: 'chat' | 'dev') => string;
 /** A page of the app's own, from wherever the rooms are mounted. */
 export declare const site: (path: string) => string;

package/dist/where.js

@@ -11,5 +11,7 @@ export function configure(given) {
 export const where = () => addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export const brand = () => addresses.brand ?? 'Hanzo AI';
+/** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
 /** A page of the app's own, from wherever the rooms are mounted. */
 export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "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",

package/dist/ModeMark.d.ts

@@ -1,8 +0,0 @@
-/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export declare const wordmark: (mode: 'chat' | 'dev') => string;
-export declare function ModeMark({ mode, onChat, onDev, stacked, }: {
-    mode: 'chat' | 'dev';
-    onChat: () => void;
-    onDev: () => void;
-    stacked?: boolean;
-}): import("react").JSX.Element;

package/dist/ModeMark.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageSquare, Code2 } from 'lucide-react';
-import { XStack, YStack, Text, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
-import { brand } from './where.js';
-/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
-/** One side of the switch: an icon button named for its mode, with the name as its tooltip. */
-function Side({ name, on, onPress, children }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(XStack, { render: "button", "aria-label": name, "aria-pressed": on, onPress: onPress, width: 28, height: 24, rounded: 999, items: "center", justify: "center", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: children }) }), _jsx(TooltipContent, { children: _jsx(Text, { fontSize: "$2", children: name }) })] }));
-}
-export function ModeMark({ mode, onChat, onDev, stacked = false, }) {
-    const dev = mode === 'dev';
-    const Group = stacked ? YStack : XStack;
-    const toggle = (_jsxs(Group, { role: "group", "aria-label": "Switch Hanzo", items: "center", gap: 2, p: 2, rounded: 999, bg: "$edge", shrink: 0, children: [_jsx(Side, { name: "Chat", on: !dev, onPress: onChat, children: _jsx(MessageSquare, { size: 14, "aria-hidden": true }) }), _jsx(Side, { name: "Dev", on: dev, onPress: onDev, children: _jsx(Code2, { size: 14, "aria-hidden": true }) })] }));
-    if (stacked)
-        return toggle;
-    return (_jsxs(XStack, { flex: 1, items: "center", justify: "space-between", gap: "$2", minW: 0, children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), toggle] }));
-}