@hanzo/rooms 0.1.0

package/dist/tours.js

@@ -0,0 +1,311 @@
+'use client';
+export const seen = (el) => {
+    if (!el)
+        return null;
+    const r = el.getBoundingClientRect();
+    if (r.width < 6 || r.height < 6)
+        return null;
+    const s = getComputedStyle(el);
+    if (s.visibility === 'hidden' || s.display === 'none' || Number(s.opacity) === 0)
+        return null;
+    return el;
+};
+export const byLabel = (...labels) => {
+    for (const l of labels) {
+        const el = seen(document.querySelector(`[aria-label="${l}"]`));
+        if (el)
+            return el;
+    }
+    return null;
+};
+const byAttr = (attr, ...values) => {
+    for (const v of values) {
+        const el = seen(document.querySelector(`[${attr}="${v}"]`));
+        if (el)
+            return el;
+    }
+    return null;
+};
+export const byPlaceholder = (...values) => byAttr('placeholder', ...values);
+export const byTitle = (...values) => byAttr('title', ...values);
+/** The smallest element whose own text is exactly this word. */
+export const byText = (text, within) => {
+    const root = within ?? document.body;
+    let best = null;
+    for (const el of root.querySelectorAll('button,a,[role="button"]')) {
+        if ((el.textContent || '').trim() !== text)
+            continue;
+        const ok = seen(el);
+        if (!ok)
+            continue;
+        if (!best || el.getBoundingClientRect().width < best.getBoundingClientRect().width)
+            best = el;
+    }
+    return best;
+};
+/** A field whose placeholder starts with these words. */
+const byPlaceholderStart = (start) => {
+    for (const el of document.querySelectorAll('input,textarea')) {
+        if ((el.getAttribute('placeholder') || '').startsWith(start) && seen(el))
+            return el;
+    }
+    return null;
+};
+/** The composer is the one visible textarea in the room. */
+export const composer = () => {
+    const all = [...document.querySelectorAll('textarea')].map(seen).filter(Boolean);
+    return all.sort((a, b) => b.getBoundingClientRect().width - a.getBoundingClientRect().width)[0] ?? null;
+};
+/** The Enso control on the composer: effort, and the model override inside it. */
+export const modelChip = () => seen(document.querySelector('[aria-label^="Enso"]'));
+/** A place on the rail, by the word under its icon. */
+const rail = (label) => {
+    const b = byText(label);
+    return b?.parentElement ?? b;
+};
+const CHAT = [
+    {
+        id: 'composer',
+        title: 'What are you interested in? How can Hanzo help you?',
+        body: 'Type what you want in plain words. Paste an error, describe a feature, or drop in a file.',
+        side: 'top',
+        find: composer,
+    },
+    {
+        id: 'model',
+        title: 'Perfectly tuned with 500+ of the leading models',
+        body: 'Enso reads your question and picks the best model for it. Tap here to choose one yourself.',
+        side: 'top',
+        find: modelChip,
+    },
+    {
+        id: 'work',
+        title: 'Audit the work-flow',
+        body: "Show work opens the AI's steps and the tools it used. Turn it on when an answer surprises you.",
+        side: 'top',
+        find: () => byText('Show work') || byText('Hide work'),
+    },
+    {
+        id: 'scene',
+        title: 'More than chat',
+        body: 'Chat with a bot, bring in the team, and take it to a call. Watch one happen.',
+        side: 'right',
+        scene: true,
+        find: () => rail('Chat'),
+    },
+    {
+        id: 'roster',
+        title: 'People and agents, one list',
+        body: 'Your team and your AI agents sit together. Click any of them to start talking. An agent answers like a person.',
+        side: 'right',
+        find: () => {
+            const az = byLabel('A-Z', 'Sort A-Z');
+            if (az?.parentElement)
+                return az.parentElement;
+            const dir = byText('Directory');
+            return dir?.parentElement ?? dir;
+        },
+    },
+    {
+        id: 'find',
+        title: 'Find anything',
+        body: 'Press ⌘K to search chats, people, agents and every section at once.',
+        side: 'bottom',
+        find: () => {
+            for (const b of document.querySelectorAll('button,[role="button"]')) {
+                if (/^Search\b/.test((b.textContent || '').trim()) && seen(b))
+                    return b;
+            }
+            return null;
+        },
+    },
+    {
+        id: 'aside',
+        title: 'Results stay beside you',
+        body: 'Files, sources and previews collect in the side panel, so the chat stays easy to read.',
+        side: 'bottom',
+        find: () => byLabel('Open side panel', 'Close side panel'),
+    },
+    {
+        id: 'orgs',
+        title: 'Switch workspaces',
+        body: 'Each icon on the far left is a workspace, with its own chats, agents, files and billing.',
+        side: 'right',
+        find: () => {
+            // The rail is a column of small square marks pinned to the far edge —
+            // that shape is what identifies it, not a label, because each mark is
+            // labelled with its own workspace ("LUX", "ZOO", an initial) and none of
+            // them names the rail. Take their common parent.
+            const marks = [...document.querySelectorAll('button,[role="button"]')].filter((el) => {
+                const r = el.getBoundingClientRect();
+                return r.left < 64 && r.width >= 26 && r.width <= 60 && Math.abs(r.width - r.height) < 10 && seen(el);
+            });
+            if (marks.length < 2)
+                return byLabel('Switch organization');
+            let node = marks[0].parentElement;
+            while (node && !marks.every((m) => node.contains(m)))
+                node = node.parentElement;
+            return seen(node) ?? marks[0];
+        },
+    },
+    {
+        id: 'account',
+        title: 'Your plan',
+        body: 'See your credit, manage payment and change settings. Free uses the open models. Paid unlocks the rest.',
+        side: 'top',
+        find: () => byLabel('Account, plan and workspace'),
+    },
+];
+const MEET = [
+    {
+        id: 'start',
+        title: 'Start a meeting',
+        body: 'One click opens a room. Share the link and anyone can join from a browser.',
+        side: 'bottom',
+        find: () => byText('Start Instant Meeting'),
+    },
+    {
+        id: 'join',
+        title: 'Join with a code',
+        body: 'Paste a meeting code or link here to join a call someone else started.',
+        side: 'bottom',
+        find: () => byPlaceholder('Enter meeting code or link'),
+    },
+    {
+        id: 'transcript',
+        title: 'Every call is written down',
+        body: 'A Hanzo bot sits in and transcribes. What everyone said is saved with the meeting.',
+        side: 'left',
+        find: () => {
+            for (const el of document.querySelectorAll('div,p,section')) {
+                if (el.childElementCount === 0 && /transcription/i.test(el.textContent || '') && seen(el))
+                    return el.parentElement ?? el;
+            }
+            return null;
+        },
+    },
+];
+const CALENDAR = [
+    {
+        id: 'schedule',
+        title: 'Add an event or a routine',
+        body: 'A meeting, a reminder, or a job an agent runs on a schedule. Name it and pick the time.',
+        side: 'bottom',
+        find: () => byText('Schedule Event / Routine'),
+    },
+    {
+        id: 'crons',
+        title: 'Bots on a timer',
+        body: 'Bot Crons lists what your bots run and when. Change a time here and the bot follows it.',
+        side: 'bottom',
+        find: () => byText('Bot Crons'),
+    },
+    {
+        id: 'booker',
+        title: 'Let people book you',
+        body: 'A public page where anyone can pick a free time on your calendar.',
+        side: 'bottom',
+        find: () => byText('Public Booker'),
+    },
+];
+const CONTACTS = [
+    {
+        id: 'search',
+        title: 'Everyone in one place',
+        body: 'People and agents, side by side. Search by name to find anyone fast.',
+        side: 'bottom',
+        find: () => byLabel('Search contacts') || byPlaceholder('Search'),
+    },
+    {
+        id: 'invite',
+        title: 'Invite your team',
+        body: 'Send an invite by email, or share a link anyone can use to join your organization.',
+        side: 'bottom',
+        find: () => byLabel('Invite') || byText('Invite'),
+    },
+    {
+        id: 'agent',
+        title: 'Make an agent',
+        body: 'Give it a name and a job. It joins the roster next to your people and answers like one.',
+        side: 'bottom',
+        find: () => byText('New agent'),
+    },
+];
+const INBOX = [
+    {
+        id: 'connect',
+        title: 'Every channel, one inbox',
+        body: 'Connect Slack, email, Discord and the rest. Their messages land here together.',
+        side: 'bottom',
+        find: () => byText('Connect an app'),
+    },
+    {
+        id: 'channels',
+        title: 'Your channels',
+        body: 'Each connected app is a channel on the left. Nothing gets lost between them.',
+        side: 'right',
+        find: () => byLabel('Resize inbox channel list')?.parentElement ?? null,
+    },
+    {
+        id: 'reply',
+        title: 'Reply where it came from',
+        body: 'Answer here and it goes back on the same channel the message arrived on.',
+        side: 'top',
+        find: () => byPlaceholderStart('Reply on'),
+    },
+];
+const DRIVE = [
+    {
+        id: 'search',
+        title: 'Search everything',
+        body: 'Every file your team and your agents made, found by name or by what is inside it.',
+        side: 'bottom',
+        find: () => byLabel('Search Drive'),
+    },
+    {
+        id: 'upload',
+        title: 'Bring files in',
+        body: 'Upload anything. Agents can read it, and it shows up in chat when you ask.',
+        side: 'bottom',
+        find: () => byTitle('Upload'),
+    },
+    {
+        id: 'folder',
+        title: 'Keep it tidy',
+        body: 'Make folders for projects, clients or agents. Drag files between them.',
+        side: 'bottom',
+        find: () => byTitle('Add Folder'),
+    },
+];
+const BOARD = [
+    {
+        id: 'add',
+        title: 'Add a card',
+        body: 'One card per task. Give it a date, a priority, and a person or an agent to do it.',
+        side: 'bottom',
+        find: () => byText('Add a card') || byPlaceholder('Add an item'),
+    },
+    {
+        id: 'planner',
+        title: 'Plan by day',
+        body: 'Planner lays the cards out by date, so today is one column and next week is a glance away.',
+        side: 'bottom',
+        find: () => byText('Planner'),
+    },
+    {
+        id: 'filter',
+        title: 'See only what matters now',
+        body: 'Filter by who, by when, or by what is finished.',
+        side: 'bottom',
+        find: () => byText('Filter'),
+    },
+];
+export const TOURS = {
+    chat: CHAT,
+    meet: MEET,
+    calendar: CALENDAR,
+    contacts: CONTACTS,
+    inbox: INBOX,
+    drive: DRIVE,
+    board: BOARD,
+};

package/dist/waiting.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What a route shows while it is handing the reader somewhere else.
+ *
+ * IAM owns the sign-in form, so /login, /signup and /auth/callback each do one
+ * thing: say where you are going, and go. All three drew that screen from their
+ * own copy of the same markup, and each asked for a whole viewport of it inside
+ * a layout that already supplies a header and a footer — so a page carrying one
+ * line of text scrolled, and the line sat below the middle of it.
+ *
+ * It takes the space a short message needs and leaves the rest to the layout.
+ */
+export declare function Waiting({ title, lede }: {
+    title: string;
+    lede?: string;
+}): import("react").JSX.Element;

package/dist/waiting.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner, Text, YStack } from '@hanzo/gui';
+/**
+ * What a route shows while it is handing the reader somewhere else.
+ *
+ * IAM owns the sign-in form, so /login, /signup and /auth/callback each do one
+ * thing: say where you are going, and go. All three drew that screen from their
+ * own copy of the same markup, and each asked for a whole viewport of it inside
+ * a layout that already supplies a header and a footer — so a page carrying one
+ * line of text scrolled, and the line sat below the middle of it.
+ *
+ * It takes the space a short message needs and leaves the rest to the layout.
+ */
+export function Waiting({ title, lede }) {
+    return (_jsxs(YStack, { items: "center", justify: "center", gap: "$5", minH: 360, px: "$4", py: "$10", children: [_jsx(Spinner, { size: "small", color: "$ink", width: 28, height: 28, shrink: 0 }), _jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "500", color: "$ink", text: "center", children: title }), lede ? (_jsx(Text, { fontSize: "$4", color: "$soft", text: "center", children: lede })) : null] }));
+}

package/dist/where.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The host's addresses — where its own pages live, which gateway and IAM to
+ * talk to, the plan catalogue to paint first — stated once with `configure()`.
+ *
+ * A plain module, with no client directive, because plain modules read it:
+ * `api()`, `iam()`, `site()` and the plan reads run in server components and
+ * outside any component, where a client module's export is only a reference
+ * and calling it throws.
+ */
+import type { ComponentType } from 'react';
+import type { BillingPlan } from './lib/plans.js';
+import type { Integration } from './lib/integrations.js';
+/** The addresses a host serves from, which plain modules read. */
+export interface Addresses {
+    /** The gateway's origin. Absent, the rooms derive it from the page's host. */
+    api?: string;
+    /** IAM's origin. Absent, hanzo.id. */
+    iam?: string;
+    /**
+     * Where the app's own pages live — `/dev`, `/account`, `/legal/*`.
+     * Empty on the site that serves them; `https://hanzo.ai` on hanzo.team.
+     */
+    site: string;
+    /** The rooms' Home: `/home` beside the app, `/` on hanzo.team. */
+    home: string;
+    /** Where a new account starts: `/signup`, or hanzo.team's `/start`. */
+    signUp: string;
+    /** The publishable key anonymous calls carry. */
+    key?: string;
+    /** The plan catalogue as the host's build last read it: the first paint. */
+    plans?: BillingPlan[];
+    /** The SDKs and frameworks Directory lists, which the host publishes. */
+    integrations?: Integration[];
+    /**
+     * The host's front door, for a workspace rooted at `/` (hanzo.team): what a
+     * stranger at Home is shown instead of the sign-in, and the business sign-up
+     * `/start` draws. A host without one gets the sign-in.
+     */
+    Landing?: ComponentType<{
+        member?: boolean;
+    }>;
+    Signup?: ComponentType;
+}
+/**
+ * State the host's addresses, at module scope, before anything renders. Each
+ * call adds to what is stated, so a host can name its cheap addresses at its
+ * root and the heavy ones (the plan catalogue, the integrations) only where the
+ * rooms are drawn.
+ */
+export declare function configure(given: Partial<Addresses>): void;
+/** The host's addresses, for code that runs outside a component. */
+export declare const where: () => Addresses;
+/** A page of the app's own, from wherever the rooms are mounted. */
+export declare const site: (path: string) => string;

package/dist/where.js

@@ -0,0 +1,14 @@
+let addresses = { site: '', home: '/home', signUp: '/signup' };
+/**
+ * State the host's addresses, at module scope, before anything renders. Each
+ * call adds to what is stated, so a host can name its cheap addresses at its
+ * root and the heavy ones (the plan catalogue, the integrations) only where the
+ * rooms are drawn.
+ */
+export function configure(given) {
+    addresses = { ...addresses, ...given };
+}
+/** The host's addresses, for code that runs outside a component. */
+export const where = () => addresses;
+/** A page of the app's own, from wherever the rooms are mounted. */
+export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@hanzo/rooms",
+  "version": "0.1.0",
+  "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",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js",
+      "default": "./dist/lib/*.js"
+    },
+    "./bots/*": {
+      "types": "./dist/bots/*.d.ts",
+      "import": "./dist/bots/*.js",
+      "default": "./dist/bots/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE-APACHE",
+    "LICENSE-MIT"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "Apache-2.0 OR MIT",
+  "dependencies": {
+    "@hanzo/personas": "1.0.5",
+    "marked": "18.0.12",
+    "simple-icons": "16.30.0"
+  },
+  "peerDependencies": {
+    "@hanzo/ai": ">=0.6.17",
+    "@hanzo/appearance": ">=0.2.6",
+    "@hanzo/build": ">=0.2.34",
+    "@hanzo/composer": ">=0.2.0",
+    "@hanzo/event": ">=0.3.56",
+    "@hanzo/gui": "^8.3.5",
+    "@hanzo/iam": ">=0.21.28",
+    "@hanzo/logo": ">=1.0.26",
+    "@hanzo/plans": ">=1.8.9",
+    "@hanzo/ui": ">=8.27.51",
+    "@hanzo/usage": ">=0.1.17",
+    "@hanzo/voice": ">=0.1.8",
+    "@hanzogui/shell": "^8.3.20",
+    "lucide-react": ">=1.42.0",
+    "react": ">=19.2.8",
+    "react-dom": ">=19.2.8"
+  },
+  "devDependencies": {
+    "@hanzo/ai": "0.6.17",
+    "@hanzo/appearance": "0.2.6",
+    "@hanzo/build": "0.2.34",
+    "@hanzo/composer": "0.2.0",
+    "@hanzo/event": "0.3.56",
+    "@hanzo/gui": "8.3.5",
+    "@hanzo/iam": "0.21.28",
+    "@hanzo/logo": "1.0.26",
+    "@hanzo/plans": "1.8.9",
+    "@hanzo/ui": "8.27.51",
+    "@hanzo/usage": "0.1.17",
+    "@hanzo/voice": "0.1.8",
+    "@hanzogui/config": "8.3.5",
+    "@hanzogui/core": "8.3.5",
+    "@hanzogui/shell": "8.3.20",
+    "@hanzogui/web": "8.3.5",
+    "@types/node": "26.5.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "lucide-react": "1.42.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-native-web": "0.21.2",
+    "typescript": "7.0.2",
+    "vitest": "4.1.11",
+    "@hanzo/design": "0.5.33",
+    "@hanzogui/lucide-icons-2": "8.3.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/rooms.git"
+  },
+  "engines": {
+    "node": ">=22.18"
+  },
+  "scripts": {
+    "gen": "node scripts/team.mjs",
+    "build": "rm -rf dist && node scripts/team.mjs && tsc -p tsconfig.build.json && node scripts/specifiers.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint:design": "hanzo-design-lint src"
+  }
+}