@hanzo/rooms 0.1.0

package/dist/Profile.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The reader's own profile, in the column beside the room.
+//
+// A WORKSPACE OPENS A PROFILE IN A PANEL, not a page. The page exists — it is
+// /account, and it is where the whole record is edited — but reaching it from a
+// conversation costs the conversation: the room, the sidebar and the rail all
+// go, and coming back is a navigation rather than a close. Slack, Teams and
+// every app shaped like them put this in the right column for that reason, and
+// so does the thread view that will share this slot.
+//
+// EVERY CONTROL DOES ITS VERB. Slack's panel carries "Set a status" and "View
+// as" and this one does not, because IAM stores no status and there is nobody
+// to view as. What is here is what there is: the picture can be changed, the
+// record can be edited, and the rest is read.
+import { useRooms } from './host.js';
+import { site } from './where.js';
+import { useRef, useState } from 'react';
+import { Camera, Mail, Phone, X } from 'lucide-react';
+import { Box, Text, View, XStack, YStack } from '@hanzo/ui';
+import { sheet } from '@hanzo/ui/glass';
+import { pane } from './ground.js';
+import { useAccount } from './lib/account.js';
+import { reach } from './lib/reach.js';
+import { mark } from './lib/mark.js';
+import { BAD } from './lib/mix.js';
+/** Slack's is 380 and the thread panel that shares this slot is the same. */
+const WIDTH = 380;
+const ACCOUNT = '/account';
+export function Profile({ open, onClose }) {
+    const { Link } = useRooms();
+    const { user, updateUserProfile } = useAccount();
+    const picker = useRef(null);
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(null);
+    if (!open || !user)
+        return null;
+    const pick = async (file) => {
+        if (!file)
+            return;
+        setBusy(true);
+        setFailed(null);
+        try {
+            await updateUserProfile({ avatar: await mark(file) });
+        }
+        catch (e) {
+            // In the panel rather than a toast: the picture is here, so the reason it
+            // did not change belongs here too.
+            setFailed(reach(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(YStack, { ...pane(sheet(2).backgroundColor), width: WIDTH, maxW: "100%", shrink: 0, minH: 0, 
+        // A column on a laptop. On a phone the room is already the whole screen,
+        // so this covers it rather than squeezing it to nothing.
+        position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-panel)", $lg: { position: 'relative', z: 'var(--z-base)', l: 'auto' }, children: [_jsxs(XStack, { items: "center", px: "$4", py: "$3", gap: "$2", children: [_jsx(Text, { flex: 1, fontSize: "$5", fontWeight: "600", color: "$ink", children: "Profile" }), _jsx(Box, { render: "button", onClick: onClose, "aria-label": "Close profile", p: "$2", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$4", pb: "$5", gap: "$4", children: [_jsx("input", { ref: picker, type: "file", accept: "image/png,image/jpeg,image/gif,image/webp", hidden: true, onChange: (e) => {
+                            const file = e.target.files?.[0];
+                            e.target.value = '';
+                            void pick(file);
+                        } }), _jsxs(Box, { render: "button", onClick: () => {
+                            if (busy)
+                                return;
+                            picker.current?.click();
+                        }, "aria-label": "Change your picture", "aria-disabled": busy, width: "100%", aspectRatio: 1, rounded: "$5", overflow: "hidden", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", position: "relative", children: [user.avatar ? (_jsx(View, { render: _jsx("img", { src: user.avatar, alt: "" }), width: "100%", height: "100%", objectFit: "cover", display: "block" })) : (_jsx(YStack, { width: "100%", height: "100%", items: "center", justify: "center", children: _jsx(Text, { fontSize: 72, fontWeight: "600", color: "$soft", children: (user.name?.trim()[0] ?? '?').toUpperCase() }) })), _jsxs(XStack, { position: "absolute", l: 0, r: 0, b: 0, items: "center", justify: "center", gap: "$2", py: "$2", bg: "$background", opacity: 0.85, children: [_jsx(Camera, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: busy ? 'Saving…' : user.avatar ? 'Change picture' : 'Add a picture' })] })] }), failed ? (_jsx(Text, { fontSize: "$2", color: BAD, children: failed })) : null, _jsxs(XStack, { items: "baseline", gap: "$3", children: [_jsx(Text, { flex: 1, fontSize: "$6", fontWeight: "600", color: "$ink", numberOfLines: 2, children: user.name }), _jsx(Link, { href: site(ACCOUNT), children: _jsx(Text, { fontSize: "$2", color: "$quiet", children: "Edit" }) })] }), user.bio ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: user.bio })) : null, _jsxs(YStack, { gap: "$2", pt: "$3", borderTopWidth: 1, borderColor: "$edge", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Contact information" }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Mail, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$3", color: "$soft", children: user.email })] }), user.phone ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Phone, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$3", color: "$soft", children: user.phone })] })) : null] })] })] }));
+}

package/dist/Prose.d.ts

@@ -0,0 +1,5 @@
+/** One message's markdown, drawn. Empty in, nothing out — a streaming turn
+ *  asks on every token and the first is nothing. */
+export declare function Prose({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/Prose.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Text, View, XStack, YStack } from '@hanzo/gui';
+import { destination, read } from './lib/prose.js';
+const INK = 'var(--foreground)';
+const QUIET = 'var(--muted-foreground)';
+const EDGE = 'var(--border)';
+const GROUND = 'var(--secondary)';
+/** A heading's rung, by depth: one step down the type ramp per level. */
+const RUNG = ['$6', '$4', '$3', '$2', '$2', '$2'];
+/** The character references a model writes, as the characters they name. An
+ *  HTML renderer let the browser decode `&`; a string React sets is shown
+ *  exactly as written. */
+const NAMED = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' };
+const decode = (s) => s.replace(/&(?:#x([0-9a-f]{1,6})|#(\d{1,7})|([a-z]+));/gi, (all, hex, dec, name) => {
+    if (hex || dec) {
+        const n = hex ? parseInt(hex, 16) : Number(dec);
+        return n > 0 && n <= 0x10ffff ? String.fromCodePoint(n) : all;
+    }
+    return NAMED[name.toLowerCase()] ?? all;
+});
+/** One run of inline tokens, in `tone`, at the block's `rung`. */
+function inline(tokens, tone, rung = '$2') {
+    return (tokens ?? []).map((t, i) => {
+        switch (t.type) {
+            case 'strong':
+                return (_jsx(Text, { render: "strong", color: tone, fontWeight: "600", children: inline(t.tokens, tone, rung) }, i));
+            case 'em':
+                return (_jsx(Text, { render: "em", color: tone, fontStyle: "italic", children: inline(t.tokens, tone, rung) }, i));
+            case 'del':
+                return (_jsx(Text, { render: "del", color: tone, textDecorationLine: "line-through", opacity: 0.7, children: inline(t.tokens, tone, rung) }, i));
+            case 'codespan':
+                return (_jsx(Text, { render: "code", color: tone, fontFamily: "$mono", fontSize: "$1", px: "$1", rounded: 4, bg: GROUND, children: decode(t.text) }, i));
+            case 'br':
+                return _jsx("br", {}, i);
+            case 'link': {
+                const to = destination(t.href);
+                if (!to)
+                    return inline(t.tokens, tone, rung);
+                // AWAY IS A NEW TAB, HOME IS NOT. Someone else's page opened from a
+                // message never gets a handle on this one and never inherits the
+                // referrer; a link back into this app is a link.
+                return (_jsx(Anchor, { href: to.href, ...(to.away ? { target: '_blank', rel: 'noopener noreferrer nofollow' } : {}), ...(t.title ? { title: t.title } : {}), size: rung, color: INK, textDecorationLine: "underline", children: inline(t.tokens, INK, rung) }, i));
+            }
+            // An image is a fetch to wherever the message says, which is a reader's
+            // address leaking to whoever wrote it. The alt text is the message.
+            case 'image':
+                return decode(t.text);
+            // Raw HTML in a message is text somebody typed, shown as what it is.
+            case 'html':
+                return t.text;
+            case 'text':
+                return 'tokens' in t && t.tokens ? inline(t.tokens, tone, rung) : decode(t.text);
+            default:
+                return 'text' in t ? decode(String(t.text)) : null;
+        }
+    });
+}
+/** Running text: a paragraph, or a list item's own words. */
+function Line({ tokens, tone }) {
+    return (_jsx(Text, { render: "p", color: tone, fontSize: "$2", lineHeight: "$3", children: inline(tokens, tone) }));
+}
+function List({ list, tone }) {
+    const start = typeof list.start === 'number' ? list.start : 1;
+    return (_jsx(YStack, { render: list.ordered ? 'ol' : 'ul', m: 0, p: 0, gap: "$1", children: list.items.map((item, i) => (_jsxs(XStack, { render: "li", gap: "$1", children: [_jsx(Text, { "aria-hidden": true, color: tone, fontSize: "$2", lineHeight: "$3", minW: 14, text: "right", children: item.task ? (item.checked ? '☑' : '☐') : list.ordered ? `${start + i}.` : '•' }), _jsx(YStack, { flex: 1, minW: 0, gap: "$1", children: blocks(item.tokens, tone) })] }, i))) }));
+}
+/** A table is a grid: one track per column, as wide as what the column holds,
+ *  in a box that scrolls sideways rather than widening the message. Cells
+ *  share an edge by drawing their right and bottom ones; the first row adds
+ *  the top and the first column the left. */
+function Table({ table, tone }) {
+    const align = (c) => table.align[c] ?? 'left';
+    return (_jsx(View, { role: "table", display: "grid", gridTemplateColumns: `repeat(${table.header.length}, max-content)`, self: "flex-start", maxW: "100%", overflowX: "auto", children: [table.header, ...table.rows].map((row, r) => (_jsx(View, { role: "row", display: "contents", children: row.map((cell, c) => (_jsx(Text, { role: r ? 'cell' : 'columnheader', color: tone, fontSize: "$2", lineHeight: "$3", fontWeight: r ? '400' : '600', text: align(c), px: "$2", py: "$1", bg: r ? undefined : GROUND, borderColor: EDGE, borderStyle: "solid", borderRightWidth: 1, borderBottomWidth: 1, borderTopWidth: r ? 0 : 1, borderLeftWidth: c ? 0 : 1, children: inline(cell.tokens, tone) }, c))) }, r))) }));
+}
+/** A run of block tokens. A tight list item's words arrive as a `text` block. */
+function blocks(tokens, tone) {
+    return (tokens ?? []).map((t, i) => {
+        switch (t.type) {
+            case 'paragraph':
+                return _jsx(Line, { tokens: t.tokens, tone: tone }, i);
+            case 'text':
+                return _jsx(Line, { tokens: 'tokens' in t && t.tokens ? t.tokens : [t], tone: tone }, i);
+            case 'heading':
+                return (_jsx(Text, { render: `h${t.depth}`, m: 0, color: tone, fontSize: RUNG[t.depth - 1], lineHeight: RUNG[t.depth - 1], fontWeight: "600", children: inline(t.tokens, tone, RUNG[t.depth - 1]) }, i));
+            case 'list':
+                return _jsx(List, { list: t, tone: tone }, i);
+            case 'table':
+                return _jsx(Table, { table: t, tone: tone }, i);
+            // A fenced block scrolls SIDEWAYS on its own: wrapping code changes what
+            // it says, and letting it push the message wider drags the whole
+            // transcript into a horizontal scroll.
+            case 'code':
+                return (_jsx(View, { render: "pre", m: 0, overflowX: "auto", px: "$3.5", py: "$3", rounded: "$3", bg: GROUND, children: _jsx(Text, { render: "code", color: tone, fontFamily: "$mono", fontSize: "$1", lineHeight: "$2", whiteSpace: "pre", children: t.text }) }, i));
+            case 'blockquote':
+                return (_jsx(YStack, { render: "blockquote", m: 0, pl: "$3", gap: "$2", borderWidth: 0, borderLeftWidth: 2, borderStyle: "solid", borderColor: EDGE, children: blocks(t.tokens, QUIET) }, i));
+            case 'hr':
+                return _jsx(View, { render: "hr", m: 0, height: 0, borderWidth: 0, borderTopWidth: 1, borderStyle: "solid", borderColor: EDGE }, i);
+            case 'html':
+                return _jsx(Line, { tokens: [t], tone: tone }, i);
+            default:
+                return null;
+        }
+    });
+}
+/** One message's markdown, drawn. Empty in, nothing out — a streaming turn
+ *  asks on every token and the first is nothing. */
+export function Prose({ text }) {
+    if (!text)
+        return null;
+    return (_jsx(YStack, { "data-slot": "prose", gap: "$2", minW: 0, children: blocks(read(text), INK) }));
+}

package/dist/ProviderMark.d.ts

@@ -0,0 +1,17 @@
+export declare function ProviderMark({ org, provider, model, size, ink, }: {
+    org?: string;
+    provider?: string;
+    model?: string;
+    /** Edge of the square the glyph is drawn in, in px. */
+    size?: number;
+    /**
+     * Draw in the page's own colour rather than the lab's brand hue.
+     *
+     * A brand hue is IDENTIFICATION: in the catalog, in a scatter plot, in the
+     * integrations list, the colour is how a reader picks one lab out of forty,
+     * and dropping it there would cost real information. On a marketing band it
+     * identifies nothing — the name is right next to the mark — and eight brand
+     * palettes in a row on a monochrome page is a row of stickers.
+     */
+    ink?: boolean;
+}): import("react").JSX.Element;