@hanzo/build 0.2.22 → 0.2.24

package/lib/api/projects.d.ts

@@ -24,6 +24,8 @@ export interface Project {
     live: string;
     /** `public` or `private`, or '' when the platform did not say. */
     visibility: '' | Visibility;
+    /** The catalog template's slug, or `<org>/<slug>` of the published project, this was taken from; '' for neither. */
+    forked: string;
     /** Unix seconds; 0 when unknown. A deploy does not move `updated`. */
     created: number;
     updated: number;
@@ -51,6 +53,8 @@ export interface Template {
     framework: string;
     /** The repository the starter is cut from. */
     source: string;
+    /** The starter's own live page, or '' when it has none the preview may frame. */
+    demo: string;
 }
 /** The public catalog. It is reference content: no bearer, no org. */
 export declare function templates(t: Target): Promise<Template[]>;

package/lib/api/projects.js

@@ -44,6 +44,7 @@ export function project(raw) {
         status: str(p.status),
         live: safe(str(p.liveUrl)),
         visibility: p.visibility === 'public' || p.visibility === 'private' ? p.visibility : '',
+        forked: str(p.forkedFrom),
         created: num(p.createdAt),
         updated: num(p.updatedAt),
     };
@@ -92,6 +93,7 @@ export async function templates(t) {
             description: str(o.description),
             framework: str(o.framework),
             source: str(o.source),
+            demo: safe(str(o.demo)),
         };
     })
         .filter((x) => x.slug);

package/lib/builder.js

@@ -47,7 +47,7 @@ import { Run } from './run.js';
 import { DOTS } from './section.js';
 import { Artifacts, Templates } from './shelf.js';
 import { Find } from './find.js';
-import { DOCS, Slack, Who } from './foot.js';
+import { DOCS, Slack, useWho, Who } from './foot.js';
 import { Settings } from './settings/index.js';
 function Shell() {
     const host = useHost();
@@ -58,7 +58,7 @@ function Shell() {
     const [drawer, setDrawer] = useState(false);
     const [order, setOrder] = useState('newest');
     const [finding, setFinding] = useState(false);
-    const [menu, setMenu] = useState(false);
+    const who = useWho();
     const [slack, setSlack] = useKept('hanzo.build.slack', false);
     const go = (p) => {
         setDrawer(false);
@@ -82,10 +82,10 @@ function Shell() {
                                 name: [host.person.name || host.person.email, host.org].filter(Boolean).join(' · '),
                                 onPress: () => {
                                     setDrawer(false);
-                                    setMenu(true);
+                                    who.toggle();
                                 },
                             }
-                            : { name: 'Sign in', onPress: () => host.signIn?.() }, collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 92, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(YStack, { position: "absolute", t: 10, l: 8, r: 8, z: 2, gap: "$2.5", "$max-md": { display: 'none' }, children: [_jsx(XStack, { px: "$2.5", children: name }), _jsxs(XStack, { render: "button", "aria-label": "Search runs", onPress: () => setFinding(true), items: "center", gap: "$2", px: "$2.5", height: 34, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 15, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Search" })] })] })), host.person ? _jsx(Who, { open: menu, onOpenChange: setMenu, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), name, _jsx(XStack, { flex: 1 }), _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setFinding(true), "aria-label": "Search runs", children: _jsx(Search, { size: 18 }) })] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+                            : { name: 'Sign in', onPress: () => host.signIn?.() }, collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 92, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(YStack, { position: "absolute", t: 10, l: 8, r: 8, z: 2, gap: "$2.5", "$max-md": { display: 'none' }, children: [_jsx(XStack, { px: "$2.5", children: name }), _jsxs(XStack, { render: "button", "aria-label": "Search runs", onPress: () => setFinding(true), items: "center", gap: "$2", px: "$2.5", height: 34, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 15, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Search" })] })] })), host.person ? _jsx(Who, { open: who.open, onOpenChange: who.onOpenChange, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), name, _jsx(XStack, { flex: 1 }), _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setFinding(true), "aria-label": "Search runs", children: _jsx(Search, { size: 18 }) })] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
 }
 /**
  * The builder's places, as a rail draws them: four in view and the rest under

package/lib/foot.d.ts

@@ -4,6 +4,20 @@ export declare function Slack({ onOpen, onDismiss }: {
     onOpen: () => void;
     onDismiss: () => void;
 }): import("react").JSX.Element;
+/**
+ * The account menu's open state, for whatever row opens it.
+ *
+ * The row that opens the menu lies outside it, so a press on the row while the
+ * menu is open reaches the popover first as a press outside, which closes it —
+ * and a row that then simply opened it put it straight back, a flicker instead
+ * of a close. So the open state is noted as each press BEGINS, before the popover
+ * acts on it, and `toggle` (the row's press) closes a menu that was open then.
+ */
+export declare function useWho(): {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    toggle: () => void;
+};
 /**
  * The account menu. The rail draws the account row and says when it was pressed,
  * so the menu hangs off an anchor laid over the rail's foot: above it on the

package/lib/foot.js

@@ -6,6 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Everything it opens is an address of this page, but help, which is the
  * documentation.
  */
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Popover, SizableText, XStack, YStack } from '@hanzo/gui';
 import { Gauge, LifeBuoy, LogOut, Settings, Slack as Mark, Sparkles, X } from '@hanzogui/lucide-icons-2';
 import { MenuLabel, MenuRow, MenuRule } from '@hanzo/ui/product';
@@ -16,6 +17,34 @@ export const DOCS = 'https://docs.hanzo.ai/docs/dev';
 export function Slack({ onOpen, onDismiss }) {
     return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Try Hanzo in Slack" }), _jsx(XStack, { render: "button", "aria-label": "Set up Hanzo in Slack", onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Set up" }) })] }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
 }
+/**
+ * The account menu's open state, for whatever row opens it.
+ *
+ * The row that opens the menu lies outside it, so a press on the row while the
+ * menu is open reaches the popover first as a press outside, which closes it —
+ * and a row that then simply opened it put it straight back, a flicker instead
+ * of a close. So the open state is noted as each press BEGINS, before the popover
+ * acts on it, and `toggle` (the row's press) closes a menu that was open then.
+ */
+export function useWho() {
+    const [open, setOpen] = useState(false);
+    const shown = useRef(open);
+    shown.current = open;
+    const began = useRef(false);
+    useEffect(() => {
+        const down = () => {
+            began.current = shown.current;
+        };
+        document.addEventListener('pointerdown', down, true);
+        return () => document.removeEventListener('pointerdown', down, true);
+    }, []);
+    const toggle = useCallback(() => {
+        const was = began.current || shown.current;
+        began.current = false;
+        setOpen(!was);
+    }, []);
+    return { open, onOpenChange: setOpen, toggle };
+}
 /**
  * The account menu. The rail draws the account row and says when it was pressed,
  * so the menu hangs off an anchor laid over the rail's foot: above it on the

package/lib/index.d.ts

@@ -12,7 +12,7 @@
 export { Builder, nav } from './builder.tsx';
 export { DevSection, DOTS, useSessions } from './section.tsx';
 export { HostProvider } from './host.tsx';
-export { Slack, Who } from './foot.tsx';
+export { Slack, useWho, Who } from './foot.tsx';
 export { administers } from './claims.ts';
 export type { Host, Person } from './host.tsx';
 export type { Session, Status } from './api/sessions.ts';

package/lib/index.js

@@ -12,6 +12,6 @@
 export { Builder, nav } from './builder.js';
 export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
-export { Slack, Who } from './foot.js';
+export { Slack, useWho, Who } from './foot.js';
 export { administers } from './claims.js';
 export { path, route, SESSION, SLUG } from './route.js';

package/lib/project.js

@@ -28,7 +28,7 @@ import { HanzoMark } from '@hanzo/ui/product';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { start } from './api/coding.js';
 import { blob, tree } from './api/git.js';
-import { name as repoName, ours } from './api/projects.js';
+import { name as repoName, ours, templates } from './api/projects.js';
 import { list, message, stop } from './api/sessions.js';
 import { outcome, pull, said, who } from './api/turn.js';
 import { verdict as record } from './api/verdict.js';
@@ -124,7 +124,13 @@ export function Project({ slug }) {
             .filter((e) => !e.dir && /\.html?$/i.test(e.name) && !/^index\.html?$/i.test(e.name))
             .map((e) => ({ id: `/${e.path}`, label: e.name.replace(/\.html?$/i, '') })),
     ], [root.value]);
-    const src = project?.live ? new URL(page, project.live).toString() : null;
+    // A project taken from a starter and not yet published shows the starter's own
+    // live page, which is what the copy is until its first publish.
+    const forked = project && !project.live ? project.forked : '';
+    const starters = useRead(forked ? () => templates(t) : null, [], [t.api, forked]);
+    const starter = forked ? starters.value.find((s) => s.slug === forked && s.demo) : undefined;
+    const shown = project?.live || starter?.demo || '';
+    const src = shown ? new URL(page, shown).toString() : null;
     const lines = useMemo(() => [
         ...run.events
             .filter((e) => e.kind === 'log' || e.kind === 'tool-call' || e.kind === 'status')
@@ -221,7 +227,13 @@ export function Project({ slug }) {
     }
     const chat = (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$4", gap: "$4", children: ordered.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$ink", px: "$2", children: runs.loading
                         ? 'Reading this project’s runs…'
-                        : `${project?.name ?? slug} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { px: "$3", pb: "$3", gap: "$2", children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
+                        : project?.live
+                            ? `${project.name} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.`
+                            : starter
+                                ? `${project?.name} is loaded — the preview shows the ${starter.title} starter until your copy is published. Say what to change and it gets built.`
+                                : project
+                                    ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
+                                    : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { px: "$3", pb: "$3", gap: "$2", children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
                             ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
                             : undefined, busy: busy || (running && !draft.trim()), rows: 3, placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", children: [_jsx(Attach, { files: attached, onFiles: setAttached, onNote: setNote }), _jsx(XStack, { flex: 1 }), _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), self: "center" }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote })] })] })] }));
     const body = view === 'preview' ? (_jsx(PreviewFrame, { ref: frame, src: src, title: `${project?.name ?? slug} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Nothing deployed yet" }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: "Publish this project and its page appears here." })] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? 'Stop picking elements' : 'Pick an element to edit', onPress: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",