@hanzo/build 0.2.56 → 0.2.57

package/lib/index.d.ts

@@ -45,4 +45,5 @@ export { catalog, EFFORTS, FIRST, keep, kept, nameOf, reasons, useCatalog, useCh
 export { cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, Tune, useEar, type PromptOptions } from './prompt.tsx';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker, type Artifact, type Listen } from './reply.tsx';
 export { frames, Page, Panel, PanelToggle, type Kind, type PageProps, type PanelProps, type Suggestion } from './panel.tsx';
+export { kinds, Summary, useKinds, type Entry, type Section } from './summary.tsx';
 export { address, destination, located, name, PAGE, SEARCH, useDeck, useKey, usePanel, useShown, type Deck, type Tab, type Tabs } from './tabs.ts';

package/lib/index.js

@@ -40,4 +40,5 @@ export { catalog, EFFORTS, FIRST, keep, kept, nameOf, reasons, useCatalog, useCh
 export { cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, Tune, useEar } from './prompt.js';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker } from './reply.js';
 export { frames, Page, Panel, PanelToggle } from './panel.js';
+export { kinds, Summary, useKinds } from './summary.js';
 export { address, destination, located, name, PAGE, SEARCH, useDeck, useKey, usePanel, useShown } from './tabs.js';

package/lib/panel.d.ts

@@ -63,6 +63,8 @@ export interface PageProps extends Acts {
     onForward?: () => void;
     /** The title the page gave itself. */
     onTitle?: (title: string) => void;
+    /** Pin the tab, or let it go. */
+    onPin?: (on: boolean) => void;
     suggested?: readonly Suggestion[];
 }
 /**
@@ -73,7 +75,7 @@ export interface PageProps extends Acts {
  * an answer wrote runs without `allow-same-origin`, never with our storage. A
  * remote page takes its own origin, and withholding same-origin breaks it.
  */
-export declare function Page({ tab, onGo, onBack, onForward, onTitle, suggested, ...acts }: PageProps): import("react").JSX.Element;
+export declare function Page({ tab, onGo, onBack, onForward, onTitle, onPin, suggested, ...acts }: PageProps): import("react").JSX.Element;
 export interface PanelProps extends Acts {
     side: Deck;
     kinds: readonly Kind[];

package/lib/panel.js

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the panel is a sheet over the page instead (`sheet`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minus, MoreHorizontal, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
+import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minus, MoreHorizontal, Pin, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -163,7 +163,7 @@ function Skills({ skills, here }) {
  * page itself for a frame it may reach — and one that needs a page is dim on
  * an empty tab.
  */
-function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser, }) {
+function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser, onPin, }) {
     const shown = here ? { id: tab.id, ...here } : null;
     const none = !shown;
     const pick = () => {
@@ -197,6 +197,7 @@ function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser
         acts.skills?.length ? _jsx(Skills, { skills: acts.skills, here: here }, "skills") : null,
         _jsx(Row, { label: "Open in a new window", disabled: none, onSelect: () => popOut(tab) }, "out"),
         _jsx(Row, { label: "Copy link", disabled: none || !tab.url, onSelect: () => tab.url && void navigator.clipboard?.writeText(tab.url) }, "copy"),
+        onPin ? _jsx(Row, { label: tab.pinned ? 'Unpin tab' : 'Pin tab', onSelect: () => onPin(!tab.pinned) }, "pin") : null,
     ].filter(Boolean);
     const page = [
         browser?.find ? _jsx(Row, { label: "Find in page", disabled: none, onSelect: () => shown && browser.find?.(shown) }, "find") : null,
@@ -223,7 +224,7 @@ function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser
  * an answer wrote runs without `allow-same-origin`, never with our storage. A
  * remote page takes its own origin, and withholding same-origin breaks it.
  */
-export function Page({ tab, onGo, onBack, onForward, onTitle, suggested = [], ...acts }) {
+export function Page({ tab, onGo, onBack, onForward, onTitle, onPin, suggested = [], ...acts }) {
     const Browse = useBrowse();
     const browser = useBrowser();
     const frame = useRef(null);
@@ -288,10 +289,10 @@ export function Page({ tab, onGo, onBack, onForward, onTitle, suggested = [], ..
                                 fontSize: 14,
                                 // The resting bar reads centred, as a browser's new tab does; typed in, it reads from the left.
                                 textAlign: typing || typed ? 'left' : 'center',
-                            } }, tab.id) }), _jsx(Actions, { tab: tab, here: here, frame: frame, framed: framed, same: same, level: level, onLevel: zoomTo, acts: acts, browser: browser })] }), !src ? (_jsx(Suggested, { suggested: suggested, onGo: onGo })) : native && Browse ? (_jsx(YStack, { flex: 1, minH: 0, children: _jsx(Browse, { url: src, title: tab.title, onGo: onGo, onTitle: onTitle }) }, round)) : elsewhere ? (_jsx(Elsewhere, { tab: tab })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', ...(scale ? { transform: scale.transform } : null) } }, round) })) : shows ? (_jsx(YStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: _jsx("iframe", { ref: frame, src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms allow-modals', style: { position: 'absolute', top: 0, left: 0, border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)', ...scale } }, round) })) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
+                            } }, tab.id) }), _jsx(Actions, { tab: tab, here: here, frame: frame, framed: framed, same: same, level: level, onLevel: zoomTo, acts: acts, browser: browser, onPin: onPin })] }), !src ? (_jsx(Suggested, { suggested: suggested, onGo: onGo })) : native && Browse ? (_jsx(YStack, { flex: 1, minH: 0, children: _jsx(Browse, { url: src, title: tab.title, onGo: onGo, onTitle: onTitle }) }, round)) : elsewhere ? (_jsx(Elsewhere, { tab: tab })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', ...(scale ? { transform: scale.transform } : null) } }, round) })) : shows ? (_jsx(YStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: _jsx("iframe", { ref: frame, src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms allow-modals', style: { position: 'absolute', top: 0, left: 0, border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)', ...scale } }, round) })) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
 }
 const DRAG = 'text/x-hanzo-tab';
-/** One tab in the strip: its mark, its title, and its cross. */
+/** One tab in the strip: its mark, its title, and its cross, or its pin when it is pinned. */
 function Leaf({ tab, on, side, index, label, icon }) {
     return (_jsxs(XStack, { "data-slot": "side-tab", "data-tab": tab.id, items: "center", gap: "$1", pl: "$2.5", pr: "$1", height: 30, 
         // As wide as a title wants up to a browser tab's width, sharing the strip
@@ -299,7 +300,7 @@ function Leaf({ tab, on, side, index, label, icon }) {
         flexBasis: 236, shrink: 1, minW: 56, maxW: 236, rounded: 8, borderWidth: 1, borderColor: on ? '$borderColor' : 'transparent', bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover' }, ...{
             // A middle press shuts any tab, as a browser's does; the chosen one also has its cross.
             onAuxClick: (e) => {
-                if (e.button !== 1)
+                if (e.button !== 1 || tab.pinned)
                     return;
                 e.preventDefault();
                 side.shut(tab.id);
@@ -337,13 +338,13 @@ function Leaf({ tab, on, side, index, label, icon }) {
                         queueMicrotask(() => document.getElementById(`side-tab-${next.id}`)?.focus());
                         return;
                     }
-                    if (e.key === 'Delete' || e.key === 'Backspace') {
+                    if ((e.key === 'Delete' || e.key === 'Backspace') && !tab.pinned) {
                         e.preventDefault?.();
                         side.shut(tab.id);
                     }
-                }, flex: 1, minW: 0, items: "center", gap: "$2", cursor: "pointer", children: [icon ? (_jsx(XStack, { "aria-hidden": true, shrink: 0, opacity: on ? 1 : 0.7, children: icon })) : null, _jsx(SizableText, { fontSize: 13, color: on ? '$ink' : '$soft', numberOfLines: 1, children: label })] }), _jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, 
+                }, flex: 1, minW: 0, items: "center", gap: "$2", cursor: "pointer", children: [icon ? (_jsx(XStack, { "aria-hidden": true, shrink: 0, opacity: on ? 1 : 0.7, children: icon })) : null, _jsx(SizableText, { fontSize: 13, color: on ? '$ink' : '$soft', numberOfLines: 1, children: label })] }), tab.pinned ? (_jsx(XStack, { render: "button", role: "button", "aria-label": `Unpin ${label}`, tabIndex: -1, onPress: () => side.unpin(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.55, hoverStyle: { bg: '$hover', opacity: 1 }, children: _jsx(Pin, { size: 12 }) })) : (_jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, 
                 // The chosen tab's cross: the others keep their room for their titles when the strip is shared.
-                display: on ? 'flex' : 'none', children: _jsx(X, { size: 12 }) })] }));
+                display: on ? 'flex' : 'none', children: _jsx(X, { size: 12 }) }))] }));
 }
 /** The panel: the strip, and the chosen tab. */
 export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel', suggested, ...acts }) {
@@ -366,7 +367,7 @@ export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = '
                             { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: blank },
                         ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(Maximize2, { size: 14 }) }), _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Hide tabs", "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Hide tabs (${KEYS})` }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
                 // What a tab lays over itself (a door's "Connecting…") stays inside it, under the strip.
-                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: "No tabs open." }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
+                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: "No tabs open." }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), onPin: (on) => (on ? side.pin(tab.id) : side.unpin(tab.id)), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
     if (!sheet || typeof document === 'undefined')
         return body;
     // A phone: a sheet from the foot of the window over a dim, the same panel in it.

package/lib/summary.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A surface's summary: what it made and what went into it, as sections of
+ * rows, each one press from a tab beside it. Chat draws its Outputs and Sources
+ * here; Studio its artifacts. The rows are the caller's: this draws them and
+ * knows nothing of a conversation.
+ *
+ * `Summary` is the popover off the header's outline mark: each section's
+ * heading with what it adds at its end, its leading action (Chat's Create file
+ * or site), its rows, and one quiet line when it has none. `useKinds` makes
+ * each section a kind of tab for `Panel`, the same rows in the panel.
+ */
+import { type ReactNode } from 'react';
+import type { Kind } from './panel.tsx';
+/** One row: what it is called, its mark, and what pressing it opens. */
+export interface Entry {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    /** A quieter second line: what a lookup asked, what came back. */
+    detail?: string;
+    open?: () => void;
+}
+/** A section: its heading, its rows, and what it says with none. */
+export interface Section {
+    id: string;
+    title: string;
+    entries: readonly Entry[];
+    /** The line drawn when it has no rows; none, and it draws only its heading. */
+    empty?: string;
+    /** At the heading's end: what adds to it (Chat's `+` on Sources). */
+    action?: ReactNode;
+    /** A row before the others that does something rather than opens something. */
+    lead?: {
+        title: string;
+        run: () => void;
+    };
+}
+/**
+ * The summary, from the outline mark in a header. `onOpen` runs after a row is
+ * pressed, for the host to show the panel the row opened a tab in.
+ */
+export declare function Summary({ sections, onOpen, label }: {
+    sections: readonly Section[];
+    onOpen?: () => void;
+    label?: string;
+}): import("react").JSX.Element;
+/** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
+export declare function kinds(sections: readonly Section[], icons?: Record<string, ReactNode>): Kind[];
+/** `kinds`, kept while the sections are the same. */
+export declare function useKinds(sections: readonly Section[], icons?: Record<string, ReactNode>): Kind[];

package/lib/summary.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A surface's summary: what it made and what went into it, as sections of
+ * rows, each one press from a tab beside it. Chat draws its Outputs and Sources
+ * here; Studio its artifacts. The rows are the caller's: this draws them and
+ * knows nothing of a conversation.
+ *
+ * `Summary` is the popover off the header's outline mark: each section's
+ * heading with what it adds at its end, its leading action (Chat's Create file
+ * or site), its rows, and one quiet line when it has none. `useKinds` makes
+ * each section a kind of tab for `Panel`, the same rows in the panel.
+ */
+import { useMemo, useState } from 'react';
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ListTodo } from '@hanzogui/lucide-icons-2';
+import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
+/** A row of the summary: its mark and its name, one press from a tab. */
+function Line({ icon, children, detail, onPress, quiet = false }) {
+    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 13, color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, children: detail })) : null] })] }));
+}
+/** A section's heading, with what it adds at its end. */
+const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
+/** One section's rows; `done` runs after a row is pressed (the popover puts itself away). */
+function Rows({ section, done, details = false }) {
+    const { entries, empty, lead } = section;
+    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { quiet: true, onPress: () => {
+                    done?.();
+                    lead.run();
+                }, children: lead.title })) : null, entries.map((e) => (_jsx(Line, { icon: e.icon, detail: details ? e.detail : undefined, onPress: e.open
+                    ? () => {
+                        done?.();
+                        e.open?.();
+                    }
+                    : undefined, children: e.title }, e.id))), !entries.length && empty ? _jsx(Line, { quiet: true, children: empty }) : null] }));
+}
+/**
+ * The summary, from the outline mark in a header. `onOpen` runs after a row is
+ * pressed, for the host to show the panel the row opened a tab in.
+ */
+export function Summary({ sections, onOpen, label = 'Summary' }) {
+    const [open, setOpen] = useState(false);
+    const done = () => {
+        setOpen(false);
+        onOpen?.();
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { gap: 1, children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
+}
+/** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
+export function kinds(sections, icons = {}) {
+    return sections.map((s) => ({
+        id: s.id,
+        label: s.title,
+        icon: icons[s.id],
+        render: () => (_jsxs(YStack, { gap: 1, children: [_jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, details: true })] })),
+    }));
+}
+/** `kinds`, kept while the sections are the same. */
+export function useKinds(sections, icons) {
+    return useMemo(() => kinds(sections, icons), [sections, icons]);
+}

package/lib/tabs.d.ts

@@ -11,6 +11,8 @@ export interface Tab {
     /** The addresses a page came from, oldest first, and those Back stepped over, nearest first. */
     back?: string[];
     ahead?: string[];
+    /** Leads the strip, and closes only on purpose. */
+    pinned?: boolean;
 }
 /** The tabs in a scope, in order, and the chosen one. */
 export interface Tabs {
@@ -26,8 +28,12 @@ export declare function opened(was: Tabs, tab: Omit<Tab, 'id'> & {
 }): Tabs;
 /** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
 export declare function shut(was: Tabs, id: string): Tabs;
-/** A tab moved to `to`, the others closing up around it. */
+/** A tab moved to `to`, the others closing up around it, and kept in its group: pinned or not. */
 export declare function moved(was: Tabs, id: string, to: number): Tabs;
+/** A tab pinned, or let go: it joins the end of the pinned tabs, or leads the rest. */
+export declare function pinned(was: Tabs, id: string, on: boolean): Tabs;
+/** Every tab closed but the pinned ones and those `keep` names; the chosen one stays if it is left. */
+export declare function cleared(was: Tabs, keep?: (t: Tab) => boolean): Tabs;
 export interface Deck extends Tabs {
     open: (tab: Omit<Tab, 'id'> & {
         id?: string;
@@ -35,6 +41,11 @@ export interface Deck extends Tabs {
     pick: (id: string) => void;
     shut: (id: string) => void;
     move: (id: string, to: number) => void;
+    /** Pin a tab: it leads the strip and closes only on purpose. */
+    pin: (id: string) => void;
+    unpin: (id: string) => void;
+    /** Close every tab but the pinned ones and those `keep` names. */
+    clear: (keep?: (t: Tab) => boolean) => void;
     /** Point a page somewhere else: where it was goes on its Back, and Forward is forgotten. */
     go: (id: string, url: string) => void;
     /** A page's Back and Forward. */

package/lib/tabs.js

@@ -15,6 +15,11 @@
  * A page keeps the addresses it went through (`back`, `ahead`), so its bar's
  * Back and Forward walk them as a browser's do.
  *
+ * A PINNED tab leads the strip and closes only on purpose: its own close (`shut`)
+ * takes it, and nothing that closes tabs in bulk (`clear`) does. Pinned tabs
+ * keep their order among themselves, the others theirs; a tab moved stays in
+ * its group.
+ *
  */
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 export const PAGE = 'page';
@@ -53,7 +58,7 @@ export function read(scope) {
         if (raw) {
             const v = JSON.parse(raw);
             // An object URL dies with the document that minted it: a page holding only one is not kept.
-            const tabs = (Array.isArray(v.tabs) ? v.tabs.filter(isTab) : []).filter((t) => t.kind !== PAGE || t.body !== undefined || !t.url?.startsWith('blob:'));
+            const tabs = ranked((Array.isArray(v.tabs) ? v.tabs.filter(isTab) : []).filter((t) => t.kind !== PAGE || t.body !== undefined || !t.url?.startsWith('blob:')));
             held = { tabs, at: tabs.some((t) => t.id === v.at) ? v.at : (tabs[0]?.id ?? null) };
         }
     }
@@ -74,6 +79,10 @@ function write(scope, next) {
     }
     announce();
 }
+/** Pinned tabs first, each group in the order it had. */
+function ranked(tabs) {
+    return [...tabs.filter((t) => t.pinned), ...tabs.filter((t) => !t.pinned)];
+}
 let minted = 0;
 const mint = () => `p${Date.now().toString(36)}${(minted++).toString(36)}`;
 /** A tab opened: a kind already open is chosen, a page already open on the same thing is chosen. */
@@ -82,7 +91,7 @@ export function opened(was, tab) {
     if (same)
         return { ...was, at: same.id };
     const id = tab.id ?? (tab.kind === PAGE ? mint() : tab.kind);
-    return { tabs: [...was.tabs, { ...tab, id }], at: id };
+    return { tabs: ranked([...was.tabs, { ...tab, id }]), at: id };
 }
 /** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
 export function shut(was, id) {
@@ -94,16 +103,37 @@ export function shut(was, id) {
         return { ...was, tabs };
     return { tabs, at: (tabs[gone] ?? tabs[gone - 1])?.id ?? null };
 }
-/** A tab moved to `to`, the others closing up around it. */
+/** A tab moved to `to`, the others closing up around it, and kept in its group: pinned or not. */
 export function moved(was, id, to) {
     const from = was.tabs.findIndex((t) => t.id === id);
     if (from < 0)
         return was;
     const tabs = was.tabs.slice();
     const [tab] = tabs.splice(from, 1);
-    tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, tab);
+    const pins = tabs.filter((t) => t.pinned).length;
+    const [low, high] = tab.pinned ? [0, pins] : [pins, tabs.length];
+    tabs.splice(Math.max(low, Math.min(high, to)), 0, tab);
     return { ...was, tabs };
 }
+/** A tab pinned, or let go: it joins the end of the pinned tabs, or leads the rest. */
+export function pinned(was, id, on) {
+    const tab = was.tabs.find((t) => t.id === id);
+    if (!tab || Boolean(tab.pinned) === on)
+        return was;
+    const rest = was.tabs.filter((t) => t.id !== id);
+    const pins = rest.filter((t) => t.pinned);
+    const others = rest.filter((t) => !t.pinned);
+    const plain = { ...tab };
+    delete plain.pinned;
+    return { ...was, tabs: on ? [...pins, { ...tab, pinned: true }, ...others] : [...pins, plain, ...others] };
+}
+/** Every tab closed but the pinned ones and those `keep` names; the chosen one stays if it is left. */
+export function cleared(was, keep = () => false) {
+    const tabs = was.tabs.filter((t) => t.pinned || keep(t));
+    if (tabs.length === was.tabs.length)
+        return was;
+    return { tabs, at: tabs.some((t) => t.id === was.at) ? was.at : (tabs[0]?.id ?? null) };
+}
 /** How many addresses a page's Back keeps. */
 const DEPTH = 50;
 /** A page pointed at `url`, where it was on its Back. */
@@ -136,6 +166,9 @@ export function useDeck(scope, seed) {
         pick: (id) => change((was) => ({ ...was, at: id })),
         shut: (id) => change((was) => shut(was, id)),
         move: (id, to) => change((was) => moved(was, id, to)),
+        pin: (id) => change((was) => pinned(was, id, true)),
+        unpin: (id) => change((was) => pinned(was, id, false)),
+        clear: (keep) => change((was) => cleared(was, keep)),
         go: (id, url) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? went(t, url) : t)) })),
         back: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'back') : t)) })),
         forward: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'forward') : t)) })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "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.",