@hanzo/rooms 0.1.0

package/dist/Shared.js

@@ -0,0 +1,113 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A conversation someone shared, read at /chat/shared.
+//
+// Opened from a link (`/chat/shared#<token>`), the token has already left the
+// address by the time this runs (lib/share.ts `SEAL`) and waits in this tab.
+// Signed out, the platform answers the title alone and the page asks the reader
+// to sign in or sign up — through this site's /login and /signup, which hand off
+// to Hanzo IAM and come back to /chat/shared, where the token is still waiting.
+// Signed in, from any organization, the reader is first told who shared it and
+// that opening it shows that person their name; one press opens it, records
+// them as a viewer, and the address becomes `/chat/shared?s=<share>`: the chat
+// is theirs to open again from Shared with you, and the token is forgotten.
+// Nothing about their organization is read or changed here (lib/share.ts). A
+// link that opens nothing says so.
+import { useEffect, useState } from 'react';
+import { useIam } from '@hanzo/iam/react';
+import { Anchor, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { useHydrated } from './lib/hydrated.js';
+import { enter, LOGIN, signUp } from './lib/destination.js';
+import { Prose } from './Prose.js';
+import { address, opened, opening, read, readShared, take } from './lib/share.js';
+function target() {
+    const token = opening();
+    if (token)
+        return { token };
+    const share = new URLSearchParams(window.location.search).get('s')?.trim();
+    return share ? { share } : null;
+}
+const MEASURE = 'var(--container-prose, 48rem)';
+export function Shared() {
+    const hydrated = useHydrated();
+    const { isLoading, isAuthenticated, accessToken } = useIam();
+    const [aim, setAim] = useState(undefined);
+    const [agreed, setAgreed] = useState(false);
+    const [state, setState] = useState({ kind: 'reading' });
+    // A link pasted into this tab while the page is open arrives as a new
+    // fragment: it is taken out of the address exactly as the head does.
+    useEffect(() => {
+        if (!hydrated)
+            return;
+        const on = () => {
+            take();
+            setAim(target());
+        };
+        on();
+        window.addEventListener('hashchange', on);
+        return () => window.removeEventListener('hashchange', on);
+    }, [hydrated]);
+    // Read once IAM has settled, and again when the session changes: signing in
+    // turns the title into the chat. Only a signed-in reader reads by share id.
+    useEffect(() => {
+        if (!hydrated || isLoading || !aim)
+            return;
+        if (!('token' in aim) && !isAuthenticated)
+            return;
+        let on = true;
+        const got = 'token' in aim ? read(aim.token, agreed) : readShared(aim.share);
+        got
+            .then((shared) => {
+            if (!on)
+                return;
+            if (shared?.full && shared.share && 'token' in aim) {
+                opened();
+                history.replaceState(null, '', address(shared.share));
+            }
+            setState(shared ? { kind: 'read', shared } : { kind: 'gone' });
+        })
+            .catch((e) => on && setState({ kind: 'wrong', said: e instanceof Error ? e.message : 'This chat could not be read. Try again.' }));
+        return () => {
+            on = false;
+        };
+    }, [hydrated, isLoading, aim, agreed, isAuthenticated, accessToken]);
+    const shown = hydrated && aim === null
+        ? { kind: 'missing' }
+        : hydrated && !isLoading && aim && !('token' in aim) && !isAuthenticated
+            ? { kind: 'ask' }
+            : state;
+    return (_jsxs(YStack, { role: "main", height: "100dvh", overflowY: "auto", bg: "$background", children: [_jsxs(XStack, { height: 48, px: "$4", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Anchor, { href: "/", "aria-label": "Hanzo", children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: "Hanzo" }) }), shown.kind === 'read' && shown.shared.full ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Shared with you \u00B7 Read only" })) : null] }), _jsx(YStack, { width: "100%", maxW: MEASURE, mx: "auto", px: "$4", py: "$6", gap: "$4", children: _jsx(Body, { state: shown, signedIn: Boolean(isAuthenticated), onOpen: () => setAgreed(true) }) })] }));
+}
+function Body({ state, signedIn, onOpen }) {
+    if (state.kind === 'reading') {
+        return (_jsx(Text, { fontSize: "$3", color: "$soft", "aria-live": "polite", children: "Opening the chat." }));
+    }
+    if (state.kind === 'missing' || state.kind === 'gone') {
+        return (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "600", color: "$ink", children: "This chat is no longer shared." }), _jsx(Text, { fontSize: "$3", color: "$soft", children: state.kind === 'missing' ? 'The link is incomplete. Ask for it again.' : 'The link was turned off, or it was never a link to a chat.' }), _jsx(Anchor, { href: "/", children: _jsx(Button, { size: "sm", variant: "outline", children: "Go to Hanzo" }) })] }));
+    }
+    if (state.kind === 'ask') {
+        return _jsx(Ask, { signedIn: signedIn });
+    }
+    if (state.kind === 'wrong') {
+        return (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(Text, { render: "h1", fontSize: "$6", fontWeight: "600", color: "$ink", children: "This chat could not be opened." }), _jsx(Text, { role: "alert", fontSize: "$3", color: "$soft", children: state.said }), _jsx(Button, { size: "sm", onClick: () => window.location.reload(), children: "Try again" })] }));
+    }
+    const { shared } = state;
+    const by = shared.by || 'The person who shared it';
+    if (!shared.full) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "600", color: "$ink", children: shared.title }), shared.confirm ? (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$backgroundHover", role: "region", "aria-label": "Open the chat", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: shared.by ? `${shared.by} shared this chat with you` : 'This chat was shared with you' }), _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["Opening it shows ", shared.by || 'them', " the name you signed in with, and keeps it under Shared with you."] }), _jsx(XStack, { children: _jsx(Button, { size: "sm", onClick: onOpen, children: `Open — ${by} will see your name` }) })] })) : (_jsx(Ask, { signedIn: signedIn }))] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "600", color: "$ink", children: shared.title }), shared.by ? (_jsxs(Text, { fontSize: "$2", color: "$soft", children: ["Shared by ", shared.by] })) : null, _jsx(YStack, { gap: "$4", render: "ol", m: 0, p: 0, "aria-label": "Messages", children: shared.messages.map((turn, i) => (_jsxs(YStack, { render: "li", gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: turn.role === 'user' ? 'Asked' : turn.model ? `Answered · ${turn.model}` : 'Recorded by the person who shared this' }), turn.role === 'assistant' && turn.model ? (_jsx(Prose, { text: turn.content })) : (_jsx(Text, { fontSize: "$3", color: "$ink", whiteSpace: "pre-wrap", children: turn.content }))] }, i))) })] }));
+}
+/**
+ * What a reader who is not signed in is shown under the title: sign up or sign
+ * in, and come back here. A reader who is signed in and still not shown the
+ * chat holds a session the platform did not accept, so they are asked to sign
+ * in again.
+ */
+function Ask({ signedIn }) {
+    const seen = 'The person who shared it will see that you opened it.';
+    if (signedIn) {
+        return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$backgroundHover", role: "region", "aria-label": "Sign in to read the chat", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: "Sign in again to read this chat" }), _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["Your session has ended; signing in brings you straight back here. ", seen] }), _jsx(XStack, { gap: "$2", children: _jsx(Button, { size: "sm", onClick: () => enter(LOGIN), children: "Sign in" }) })] }));
+    }
+    return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$backgroundHover", role: "region", "aria-label": "Sign in to read the chat", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: "Sign in to read this chat" }), _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["A free Hanzo account opens it, and you come straight back here. ", seen] }), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [_jsx(Button, { size: "sm", onClick: () => enter(signUp()), children: "Sign up to view" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => enter(LOGIN), children: "Sign in" })] })] }));
+}

package/dist/Shell.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+export type Mode = "home" | "chat" | "dev" | "inbox" | "agents" | "tasks" | "drive" | "contacts" | "bots" | "meet" | "cal";
+export interface ConsoleProduct {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    href: string;
+}
+export declare const CONSOLE_PRODUCTS: ConsoleProduct[];
+/**
+ * WHERE "GO THERE" COMES FROM, and why it is a prop.
+ *
+ * The rail moves between rooms, which is the one thing in this shell only the
+ * HOST can do: a Next route pushes through its router, a Tauri window swaps a
+ * view, an embedded surface may refuse to navigate at all. Taking `navigate`
+ * as a prop is what leaves this file — and every component under it — with no
+ * import from any framework, so the same shell mounts under Next, under Vite
+ * in a desktop webview, or under a test that just records where it was asked
+ * to go.
+ *
+ * Measured before the change: `next/navigation` here and `next/link` in
+ * `Chat.tsx` were the ONLY two framework imports in the whole /chat + /dev
+ * surface — 13 files, all `'use client'`, no RSC. Those two were the entire
+ * cost of the port, and this removes one of them.
+ */
+export declare function Workspace({ mode, children, navigate, back, forward, }: {
+    mode: Mode;
+    children: ReactNode;
+    /** Take the reader to a route. Absent, the rail's places do not navigate. */
+    navigate?: (route: string) => void;
+    /** Step back through this reader's own history. Absent, the arrows are not drawn. */
+    back?: () => void;
+    /** And forward again. */
+    forward?: () => void;
+}): import("react").JSX.Element;
+/** Whether the room is drawn in the app's frame (`Paned framed`), where what
+ *  floats on the frame's ground is cut as a pane. */
+export declare const Framed: import("react").Context<boolean>;
+/** Puts its children in the column beside the room. Draws nothing where the
+ *  frame has no column open. */
+export declare function Beside({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal;
+/**
+ * A PANE AND THE COLUMN BESIDE IT. The room draws the pane; the column is open
+ * while `useOpen().aside` names one, and `Beside` fills it. The rooms' frame and
+ * the app at `/` lay a room out with this, so a room's column is one mechanism.
+ * `swap` stands in the pane in the room's place (a chosen Settings row).
+ *
+ * `framed` is the app at `/`: both are panes floating on the frame's ground
+ * (app/_web.tsx), filled with `--pane-fill` and cut by `pane()`, and the edge
+ * that sizes the column sits in the gutter between them. In a room they lie on
+ * the paper ladder instead. In the rooms' shell the two are its `pane` and
+ * `side` grid areas. `bare` leaves the framed pane uncut, for a room that floats
+ * panes of its own: a Dev run, which @hanzo/build draws as two.
+ */
+export declare function Paned({ children, swap, framed, bare, }: {
+    children: ReactNode;
+    swap?: ReactNode;
+    framed?: boolean;
+    bare?: boolean;
+}): import("react").JSX.Element;