@hanzo/rooms 0.1.0

package/dist/Drive.js

@@ -0,0 +1,466 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowRight, ChevronDown, ChevronRight, Clock, Cloud, Download, File as FileIcon, FileArchive, FileAudio, FileCode, FileImage, FileText, FileVideo, Folder, FolderInput, FolderPlus, HardDrive, LayoutGrid, List, MoreHorizontal, PanelLeft, Plus, Search, Trash2, Upload, } from 'lucide-react';
+import { Box, Button, Text, View, XStack, YStack } from '@hanzo/ui';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { useAi } from './lib/ai.js';
+import { useOpen } from './open.js';
+import { checkoutUrl } from './lib/plans.js';
+import { BAD, mix } from './lib/mix.js';
+const blame = (e) => {
+    const text = e instanceof Error ? e.message : String(e ?? '');
+    return text || 'The store did not say what went wrong.';
+};
+/** Format byte count nicely */
+const weigh = (bytes) => {
+    if (!bytes)
+        return '—';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const step = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const size = bytes / 1024 ** step;
+    return `${size < 10 && step > 0 ? size.toFixed(1) : Math.round(size)} ${units[step]}`;
+};
+/** Format timestamp */
+const when = (stamp) => {
+    if (!stamp)
+        return '';
+    const ms = stamp < 1e12 ? stamp * 1000 : stamp;
+    const d = new Date(ms);
+    const now = new Date();
+    const sameDay = d.toDateString() === now.toDateString();
+    if (sameDay)
+        return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    const sameYear = d.getFullYear() === now.getFullYear();
+    return d.toLocaleDateString([], sameYear ? { month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' });
+};
+/** The store publishes a bucket's own display name; the slug is the fallback. */
+const getBucketDisplayName = (b) => (typeof b === 'string' ? b : b?.displayName || b?.name) || 'Drive';
+const bucketName = (workspace) => workspace
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 40) || 'hanzo';
+const wire = (key) => key.split('/').map(encodeURIComponent).join('/');
+const objects = (bucket) => `/v1/s3/buckets/${encodeURIComponent(bucket)}/objects`;
+async function putBytes(client, bucket, key, body, type) {
+    const grant = await client.http.json({
+        method: 'POST',
+        path: objects(bucket),
+        body: { bucket, key },
+    });
+    if (!grant?.url)
+        throw new Error('The store issued no upload address.');
+    const sent = await fetch(grant.url, {
+        method: grant.method || 'PUT',
+        body,
+        headers: type ? { 'Content-Type': type } : undefined,
+    });
+    if (!sent.ok)
+        throw new Error(`${key.split('/').pop()} did not upload (${sent.status}).`);
+}
+async function urlFor(client, bucket, key) {
+    const grant = await client.http.json({ path: `${objects(bucket)}/${wire(key)}` });
+    if (!grant?.url)
+        throw new Error('The store issued no download address.');
+    return grant.url;
+}
+async function remove(client, bucket, key) {
+    await client.http.json({ method: 'DELETE', path: `${objects(bucket)}/${wire(key)}` });
+}
+function Glyph({ entry, size = 16 }) {
+    if (entry.isDir)
+        return _jsx(Folder, { size: size, color: "var(--foreground)", "aria-hidden": true });
+    const ext = (entry.key.split('.').pop() || '').toLowerCase();
+    if (/^(png|jpe?g|gif|webp|svg|heic|avif|bmp)$/.test(ext))
+        return _jsx(FileImage, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    if (/^(mp4|mov|webm|mkv|avi)$/.test(ext))
+        return _jsx(FileVideo, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    if (/^(mp3|wav|m4a|flac|ogg|aac)$/.test(ext))
+        return _jsx(FileAudio, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    if (/^(zip|tar|gz|tgz|7z|rar|bz2|xz)$/.test(ext))
+        return _jsx(FileArchive, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    if (/^(md|txt|rtf|doc|docx|pdf|csv|xls|xlsx|ppt|pptx)$/.test(ext))
+        return _jsx(FileText, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    if (/^(ts|tsx|js|jsx|py|go|rs|rb|java|kt|swift|c|h|cpp|cs|sh|json|ya?ml|toml|html|css|sql)$/.test(ext))
+        return _jsx(FileCode, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+    return _jsx(FileIcon, { size: size, color: "var(--muted-foreground)", "aria-hidden": true });
+}
+/** The tables' column templates, header and rows alike. */
+const FILES = 'minmax(200px, 2fr) 120px 140px 100px 48px';
+const PROJECTS = 'minmax(220px, 2fr) 120px 140px 100px 48px';
+/** A column heading. */
+const HEAD = { fontSize: '$1', fontWeight: '600', color: '$faint', letterSpacing: 0.6, textTransform: 'uppercase' };
+/** A row's name: one line, cut with an ellipsis. */
+const NAME = { fontSize: '$2', fontWeight: '500', color: '$ink', numberOfLines: 1 };
+/** A row's kind, set as a tag. */
+const CHIP = { fontSize: '$1', color: '$soft', bg: '$hover', px: 8, py: 2, rounded: 4 };
+/** A quiet cell: the date and the size. */
+const CELL = { fontSize: '$2', color: '$soft' };
+/** A row's "more" control. */
+function More({ onPress }) {
+    return (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onPress, "aria-label": "More", title: "More", children: _jsx(MoreHorizontal, { size: 15 }) }));
+}
+/** One line of a row's menu: a glyph and a word, the whole width. */
+function Pick({ icon: Icon, label, tone, onPress, }) {
+    return (_jsxs(Button, { variant: "ghost", size: "sm", width: "100%", justify: "flex-start", ...(tone ? { color: tone } : null), onClick: onPress, children: [_jsx(Icon, { size: 13 }), label] }));
+}
+/** A tooltip on a gui element: `title` is a DOM attribute gui passes through and does not type. */
+const tip = (title) => ({ title });
+/** A field with no chrome of its own, inside a box that draws it. */
+const BARE = { flex: 1, bg: 'transparent', borderWidth: 0, outlineStyle: 'none', color: '$ink', fontSize: '$2' };
+/** One line of the New menu. */
+const ITEM = { variant: 'ghost', size: 'sm', width: '100%', justify: 'flex-start' };
+/** A step of the breadcrumb: a link-styled Button; its ink says whether it is where you are. */
+const CRUMB = { variant: 'link', size: 'sm', px: 0, fontWeight: '600' };
+/** The buckets list's one line when it has no rows to show. */
+const NOTE = { display: 'block', px: 16, py: 24, fontSize: '$2', color: '$faint', text: 'center' };
+/** The drop target's veil: the page's own ground, nearly opaque. */
+const VEIL = mix('var(--background)', 90, 'srgb');
+export function Drive() {
+    const { client } = useAi();
+    const { user, isAuthenticated } = useIam();
+    const ready = Boolean(client && isAuthenticated);
+    const { bucket, openBucket } = useOpen();
+    const { currentOrg } = useOrganizations();
+    const workspace = currentOrg?.displayName || currentOrg?.name || 'hanzo';
+    const [navSection, setNavSection] = useState('my-drive');
+    const [viewMode, setViewMode] = useState('list');
+    const [searchQuery, setSearchQuery] = useState('');
+    const [buckets, setBuckets] = useState(null);
+    const [reload, setReload] = useState(0);
+    const [failed, setFailed] = useState(null);
+    const [entries, setEntries] = useState(null);
+    const [prefix, setPrefix] = useState('');
+    const [busy, setBusy] = useState(null);
+    const [over, setOver] = useState(false);
+    const [newMenuOpen, setNewMenuOpen] = useState(false);
+    // Below md the side column is a drawer over the files, opened from the bar.
+    const [menu, setMenu] = useState(false);
+    const [itemMenuKey, setItemMenuKey] = useState(null);
+    const [naming, setNaming] = useState(null);
+    const [projects, setProjects] = useState(null);
+    // What the drive actually holds, measured. There is no quota route, so there
+    // is no quota drawn: a number nobody publishes would be a number invented.
+    const [usage, setUsage] = useState(null);
+    const fileInputRef = useRef(null);
+    const folderInputRef = useRef(null);
+    const dragCounter = useRef(0);
+    // PROJECTS are the org's own, from the platform. `/v1/projects` answers every
+    // project this org owns; nothing stands in for it when it answers nothing.
+    useEffect(() => {
+        if (!ready || !client)
+            return;
+        let live = true;
+        client.http
+            .json({ path: '/v1/projects' })
+            .then((ps) => live && setProjects(Array.isArray(ps) ? ps : []))
+            .catch(() => live && setProjects([]));
+        return () => {
+            live = false;
+        };
+    }, [ready, client]);
+    // BUCKETS. Through the client, which carries the caller's IAM token and the
+    // API's own origin — a relative fetch reaches this site, not the platform,
+    // and answers HTML that JSON.parse then throws on.
+    useEffect(() => {
+        if (!ready || !client) {
+            setBuckets(null);
+            return;
+        }
+        let live = true;
+        client.http
+            .json({ path: '/v1/s3/buckets' })
+            .then((out) => live && setBuckets(out?.buckets ?? []))
+            .catch((e) => live && setFailed(blame(e)));
+        return () => {
+            live = false;
+        };
+    }, [ready, client, reload]);
+    // THE DRIVE IS A BUCKET THE ORG OWNS. It used to fall back to the literal
+    // "my-drive", which is a nav label rather than a name the store answers to —
+    // so every read 404'd and every write went nowhere.
+    const activeBucket = bucket || buckets?.[0]?.name || null;
+    // YOU LAND IN THE DRIVE, not in a chooser. The root view lists buckets and
+    // projects, and the toolbar's verbs all act on an OPEN bucket — so opening
+    // the org's first one is what makes New, upload and the listing agree about
+    // where they are. It is also what a drive does: the files, on arrival.
+    useEffect(() => {
+        if (!bucket && buckets && buckets.length > 0)
+            openBucket(buckets[0].name);
+    }, [bucket, buckets, openBucket]);
+    // WHAT IS AT THIS LEVEL. The store's listing takes `recursive`; passing
+    // `delimiter` (S3's own word) is silently ignored, so a flat listing came
+    // back and every folder read as a file.
+    const loadEntries = useCallback(() => {
+        if (!ready || !client || !activeBucket) {
+            setEntries(null);
+            return;
+        }
+        let live = true;
+        client.http
+            .collection('objects', { path: objects(activeBucket), query: { prefix } })
+            .then((found) => live && setEntries(found))
+            .catch((e) => live && setFailed(blame(e)));
+        return () => {
+            live = false;
+        };
+    }, [ready, client, activeBucket, prefix]);
+    useEffect(() => {
+        loadEntries();
+    }, [loadEntries, reload]);
+    // WHAT IT WEIGHS, measured rather than quoted: every object under the bucket,
+    // summed. The listing is bounded by the platform, so a bucket past that cap
+    // reports what was counted and says it is a floor.
+    useEffect(() => {
+        if (!ready || !client || !activeBucket) {
+            setUsage(null);
+            return;
+        }
+        let live = true;
+        client.http
+            .json({ path: objects(activeBucket), query: { recursive: 'true' } })
+            .then((out) => {
+            if (!live)
+                return;
+            const all = (out?.objects ?? []).filter((e) => !e.isDir);
+            setUsage({
+                bytes: all.reduce((n, e) => n + (e.size || 0), 0),
+                files: all.length,
+                capped: typeof out?.total === 'number' && out.total > all.length,
+            });
+        })
+            .catch(() => live && setUsage(null));
+        return () => {
+            live = false;
+        };
+    }, [ready, client, activeBucket, reload]);
+    /** One verb: say what is happening, re-read when it lands, blame when it does not. */
+    const run = useCallback(async (note, work) => {
+        if (!client || !activeBucket || busy)
+            return;
+        setBusy(note);
+        setFailed(null);
+        try {
+            await work(setBusy);
+            setReload((n) => n + 1);
+        }
+        catch (e) {
+            setFailed(blame(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [client, activeBucket, busy]);
+    // UPLOAD is two calls and the bytes skip the platform: mint a presigned PUT,
+    // then send the file straight to the store. A PUT at the object's own address
+    // is not a route the platform has — that address mints URLs and deletes.
+    const handleUpload = useCallback((files) => {
+        if (!files)
+            return;
+        const list = Array.from(files);
+        if (!list.length || !client || !activeBucket)
+            return;
+        void run(`Uploading ${list[0].name}`, async (say) => {
+            for (const file of list) {
+                say(`Uploading ${file.name}`);
+                const name = file.webkitRelativePath || file.name;
+                await putBytes(client, activeBucket, `${prefix}${name}`, file, file.type || undefined);
+            }
+        });
+    }, [client, activeBucket, prefix, run]);
+    const handleCreateFolder = useCallback((folderName) => {
+        const clean = folderName.trim().replace(/^\/+|\/+$/g, '');
+        if (!clean || !client || !activeBucket)
+            return;
+        void run(`Creating ${clean}`, () => putBytes(client, activeBucket, `${prefix}${clean}/`, new Blob([])));
+        setNaming(null);
+    }, [client, activeBucket, prefix, run]);
+    const handleRename = useCallback((entry, to) => {
+        const clean = to.trim().replace(/^\/+|\/+$/g, '');
+        if (!clean || !client || !activeBucket || entry.isDir)
+            return;
+        const from = `${prefix}${entry.key}`;
+        // The store has no copy, so a rename is the three verbs it does have.
+        void run(`Renaming ${entry.key}`, async () => {
+            const src = await fetch(await urlFor(client, activeBucket, from));
+            if (!src.ok)
+                throw new Error(`${entry.key} could not be read (${src.status}).`);
+            const body = await src.blob();
+            await putBytes(client, activeBucket, `${prefix}${clean}`, body, body.type || undefined);
+            await remove(client, activeBucket, from);
+        });
+        setNaming(null);
+    }, [client, activeBucket, prefix, run]);
+    const handleDelete = useCallback((entry) => {
+        if (!client || !activeBucket)
+            return;
+        const key = `${prefix}${entry.key}`;
+        void run(`Deleting ${entry.key}`, async (say) => {
+            if (!entry.isDir)
+                return remove(client, activeBucket, key);
+            const root = key.endsWith('/') ? key : `${key}/`;
+            const out = await client.http.json({ path: objects(activeBucket), query: { prefix: root, recursive: 'true' } });
+            for (const e of (out?.objects ?? []).filter((x) => !x.isDir)) {
+                say(`Deleting ${e.key}`);
+                await remove(client, activeBucket, root + e.key);
+            }
+            await remove(client, activeBucket, root).catch(() => { });
+        });
+    }, [client, activeBucket, prefix, run]);
+    // DOWNLOAD follows a presigned GET. The object's platform address answers a
+    // signed URL, not the bytes, and it needs the caller's token — which an
+    // anchor href does not carry.
+    const handleDownload = useCallback((entry) => {
+        if (!client || !activeBucket || entry.isDir)
+            return;
+        void run(`Fetching ${entry.key}`, async () => {
+            const url = await urlFor(client, activeBucket, `${prefix}${entry.key}`);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = entry.key.split('/').pop() || 'download';
+            a.rel = 'noreferrer';
+            a.target = '_blank';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        });
+    }, [client, activeBucket, prefix, run]);
+    const allProjects = useMemo(() => (projects ?? []).map((p) => ({
+        id: p.id || p.slug || p.name,
+        name: p.name || p.slug || p.id,
+        type: p.framework || 'Project',
+        updated: when(p.updatedAt || p.createdAt || 0),
+        size: '—',
+    })), [projects]);
+    const filteredProjects = useMemo(() => {
+        if (!searchQuery.trim())
+            return allProjects;
+        const q = searchQuery.toLowerCase();
+        return allProjects.filter((p) => p.name.toLowerCase().includes(q));
+    }, [allProjects, searchQuery]);
+    const filteredEntries = useMemo(() => {
+        if (!entries)
+            return null;
+        if (!searchQuery.trim())
+            return entries;
+        const q = searchQuery.toLowerCase();
+        return entries.filter((e) => e.key.toLowerCase().includes(q));
+    }, [entries, searchQuery]);
+    // Breadcrumbs
+    const crumbs = useMemo(() => {
+        if (!prefix)
+            return [];
+        return prefix.replace(/\/+$/, '').split('/');
+    }, [prefix]);
+    const userEmail = user?.email || '';
+    const userInitials = (user?.displayName || user?.name || userEmail)
+        .slice(0, 1)
+        .toUpperCase();
+    return (_jsxs(YStack, { flex: 1, height: "100%", bg: "$background", position: "relative", onDragEnter: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter.current += 1;
+            setOver(true);
+        }, onDragLeave: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter.current -= 1;
+            if (dragCounter.current <= 0) {
+                dragCounter.current = 0;
+                setOver(false);
+            }
+        }, onDragOver: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'copy';
+            setOver(true);
+        }, onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter.current = 0;
+            setOver(false);
+            if (e.dataTransfer.files)
+                handleUpload(e.dataTransfer.files);
+        }, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: (e) => {
+                    handleUpload(e.target.files);
+                    e.currentTarget.value = '';
+                } }), _jsx("input", { ref: folderInputRef, type: "file", 
+                // @ts-expect-error directory support
+                webkitdirectory: "true", directory: "true", multiple: true, hidden: true, onChange: (e) => {
+                    handleUpload(e.target.files);
+                    e.currentTarget.value = '';
+                } }), _jsxs(XStack, { height: 56, items: "center", justify: "space-between", px: "$5", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(XStack, { width: 220, shrink: 1, children: _jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setMenu((v) => !v), "aria-label": "Drive menu", "aria-expanded": menu, "aria-controls": "drive-menu", title: "Drive menu", children: _jsx(PanelLeft, { size: 16 }) }) }) }), _jsxs(XStack, { items: "center", gap: "$2", width: 460, maxW: "45%", height: 38, px: "$3", rounded: 8, bg: "$panel", borderWidth: 1, borderColor: "var(--border-control)", children: [_jsx(Search, { size: 15, color: "var(--muted-foreground)", "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search Drive", "aria-label": "Search Drive" }), ...BARE })] }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(Button, { size: "icon-sm", onClick: () => fileInputRef.current?.click(), "aria-label": "Upload", title: "Upload", children: _jsx(Upload, { size: 15 }) }), _jsx(Button, { size: "icon-sm", onClick: () => setNaming({ kind: 'folder', value: '' }), "aria-label": "Add Folder", title: "Add Folder", children: _jsx(Plus, { size: 16 }) }), _jsx(Text, { ...tip(userEmail), width: 32, height: 32, rounded: 9999, bg: "$raised", borderWidth: 1, borderColor: "$borderColor", display: "flex", items: "center", justify: "center", fontSize: "$2", fontWeight: "600", color: "$ink", children: userInitials })] })] }), _jsxs(XStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: [_jsx(View, { display: "none", "$max-md": { display: menu ? 'flex' : 'none' }, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-scrim)", bg: "var(--surface-scrim)", onPress: () => setMenu(false), "aria-hidden": true }), _jsxs(YStack, { id: "drive-menu", width: 240, minW: 240, bg: "$background", borderRightWidth: 1, borderColor: "$borderColor", px: "$3", py: "$4", justify: "space-between", "$max-md": {
+                            display: menu ? 'flex' : 'none',
+                            position: 'absolute',
+                            t: 0,
+                            b: 0,
+                            l: 0,
+                            z: 'var(--z-drawer)',
+                            overflowY: 'auto',
+                            boxShadow: 'var(--shadow-lg)',
+                        }, children: [_jsxs(YStack, { gap: "$4", children: [_jsxs(View, { position: "relative", children: [_jsxs(Button, { size: "lg", width: "100%", justify: "space-between", onClick: () => setNewMenuOpen((v) => !v), "aria-expanded": newMenuOpen, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Plus, { size: 16 }), _jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", children: "New" })] }), _jsx(ChevronDown, { size: 14, opacity: 0.65 })] }), newMenuOpen ? (_jsxs(YStack, { position: "absolute", t: "100%", mt: 6, l: 0, width: "100%", bg: "var(--popover)", borderWidth: 1, borderColor: "$borderColor", rounded: 10, boxShadow: "var(--shadow-lg)", z: "var(--z-dropdown)", p: 6, gap: 2, children: [_jsxs(Button, { ...ITEM, onClick: () => {
+                                                            setNewMenuOpen(false);
+                                                            setMenu(false);
+                                                            setNaming({ kind: 'folder', value: '' });
+                                                        }, children: [_jsx(FolderPlus, { size: 14 }), "New folder"] }), _jsx(View, { height: 1, bg: "$borderColor", my: 4 }), _jsxs(Button, { ...ITEM, onClick: () => {
+                                                            setNewMenuOpen(false);
+                                                            setMenu(false);
+                                                            fileInputRef.current?.click();
+                                                        }, children: [_jsx(Upload, { size: 14 }), "File upload"] }), _jsxs(Button, { ...ITEM, onClick: () => {
+                                                            setNewMenuOpen(false);
+                                                            setMenu(false);
+                                                            folderInputRef.current?.click();
+                                                        }, children: [_jsx(FolderInput, { size: 14 }), "Folder upload"] })] })) : null] }), _jsx(YStack, { gap: "$1", children: [
+                                            { id: 'my-drive', label: 'My Drive', icon: HardDrive },
+                                            { id: 'recent', label: 'Recent', icon: Clock },
+                                        ].map((item) => {
+                                            const isActive = navSection === item.id && !bucket && !prefix;
+                                            const Icon = item.icon;
+                                            return (_jsxs(Button, { variant: isActive ? 'secondary' : 'ghost', width: "100%", justify: "flex-start", gap: 12, px: 12, color: isActive ? '$ink' : '$soft', fontWeight: isActive ? '600' : '500', onClick: () => {
+                                                    setNavSection(item.id);
+                                                    openBucket(null);
+                                                    setPrefix('');
+                                                    setMenu(false);
+                                                }, children: [_jsx(Icon, { size: 16 }), item.label] }, item.id));
+                                        }) }), _jsxs(YStack, { gap: "$2", mt: "$2", px: "$2", children: [_jsx(Text, { fontSize: 11, fontWeight: "600", color: "$faint", letterSpacing: 0.6, children: "Storage" }), _jsx(Text, { fontSize: 12, color: "$quiet", children: usage ? `${usage.capped ? 'over ' : ''}${weigh(usage.bytes)} in ${usage.files.toLocaleString()} file${usage.files === 1 ? '' : 's'}` : 'Measuring…' }), _jsx(Button, { asChild: true, size: "sm", mt: 8, children: _jsx("a", { href: checkoutUrl(), target: "_blank", rel: "noreferrer", children: "Manage storage" }) })] })] }), _jsxs(YStack, { px: 14, py: 12, rounded: 10, borderWidth: 1, borderColor: "$borderColor", bg: "$panel", gap: 6, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Cloud, { size: 16, color: "var(--foreground)" }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Hanzo Drive" })] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: [userEmail, activeBucket].filter(Boolean).join(' · ') }), _jsx(Button, { asChild: true, variant: "link", size: "sm", px: 0, mt: 4, justify: "flex-start", children: _jsxs("a", { href: "https://docs.hanzo.ai/docs/openapi/s3/", target: "_blank", rel: "noreferrer", children: ["Documentation", _jsx(ArrowRight, { size: 12 })] }) })] })] }), _jsxs(YStack, { flex: 1, minH: 0, px: "$6", py: "$5", overflow: "scroll", gap: "$5", children: [bucket || prefix ? (_jsxs(XStack, { items: "center", gap: "$2", pb: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Button, { ...CRUMB, color: "$soft", onClick: () => {
+                                            openBucket(null);
+                                            setPrefix('');
+                                        }, children: "Drive" }), _jsx(ChevronRight, { size: 13, color: "var(--muted-foreground)" }), _jsx(Button, { ...CRUMB, color: crumbs.length === 0 ? '$ink' : '$soft', onClick: () => setPrefix(''), children: bucket || 'hanzo' }), crumbs.map((c, i) => (_jsxs(React.Fragment, { children: [_jsx(ChevronRight, { size: 13, color: "var(--muted-foreground)" }), _jsx(Button, { ...CRUMB, color: i === crumbs.length - 1 ? '$ink' : '$soft', onClick: () => setPrefix(crumbs.slice(0, i + 1).map((x) => `${x}/`).join('')), children: c })] }, `${i}-${c}`)))] })) : null, _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { render: "h1", fontSize: 26, fontWeight: "700", color: "$ink", children: "Drive" }), _jsx(Text, { fontSize: 13, color: "$soft", children: "Secure. Private. Built for builders." })] }), _jsx(XStack, { items: "center", bg: "$panel", rounded: 8, borderWidth: 1, borderColor: "$borderColor", p: 2, gap: 2, children: [
+                                            ['list', 'List View', List],
+                                            ['grid', 'Grid View', LayoutGrid],
+                                            ['details', 'Details View', MoreHorizontal],
+                                        ].map(([mode, label, Icon]) => (_jsx(Button, { variant: viewMode === mode ? 'secondary' : 'ghost', size: "icon-sm", color: viewMode === mode ? '$ink' : '$soft', onClick: () => setViewMode(mode), "aria-label": label, "aria-pressed": viewMode === mode, title: label, children: _jsx(Icon, { size: 14 }) }, mode))) })] }), naming ? (_jsxs(XStack, { items: "center", gap: "$3", py: 10, px: 14, rounded: 8, borderWidth: 1, borderColor: "var(--border-control)", bg: "$panel", children: [_jsx(Folder, { size: 16, color: "var(--foreground)" }), _jsx(Text, { render: _jsx("input", { autoFocus: true, value: naming.value, onChange: (e) => setNaming({ ...naming, value: e.target.value }), onKeyDown: (e) => {
+                                                if (e.key === 'Escape')
+                                                    setNaming(null);
+                                                if (e.key === 'Enter')
+                                                    handleCreateFolder(naming.value);
+                                            }, placeholder: "Folder name", "aria-label": "Folder name" }), ...BARE }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => handleCreateFolder(naming.value), children: "Create" }), _jsx(Button, { variant: "ghost", size: "sm", color: "$soft", onClick: () => setNaming(null), children: "Cancel" })] })) : null, busy ? (_jsxs(Text, { fontSize: "$2", color: "$soft", children: [busy, "\u2026"] })) : null, bucket || prefix ? (_jsx(YStack, { gap: "$2", children: _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: [_jsxs(View, { display: "grid", gridTemplateColumns: FILES, px: 16, py: 10, borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { ...HEAD, children: "NAME" }), _jsx(Text, { ...HEAD, children: "TYPE" }), _jsx(Text, { ...HEAD, children: "UPDATED \u2193" }), _jsx(Text, { ...HEAD, children: "SIZE" }), _jsx(View, {})] }), !filteredEntries || filteredEntries.length === 0 ? (_jsx(Text, { py: 36, px: 16, text: "center", fontSize: "$2", color: "$faint", children: "None" })) : (filteredEntries.map((e) => {
+                                            const isFolder = e.isDir || e.key.endsWith('/');
+                                            const cleanName = e.key.replace(/\/+$/, '');
+                                            return (_jsxs(View, { display: "grid", gridTemplateColumns: FILES, px: 16, py: 11, items: "center", cursor: "pointer", borderBottomWidth: 1, borderColor: "$borderColor", transition: "100ms", hoverStyle: { bg: '$hover' }, onClick: () => {
+                                                    if (isFolder) {
+                                                        setPrefix(`${prefix}${cleanName}/`);
+                                                    }
+                                                    else {
+                                                        handleDownload(e);
+                                                    }
+                                                }, children: [_jsxs(XStack, { items: "center", gap: "$2.5", minW: 0, children: [_jsx(Glyph, { entry: e, size: 16 }), _jsx(Text, { ...NAME, children: cleanName })] }), _jsx(View, { items: "flex-start", children: _jsx(Text, { ...CHIP, children: isFolder ? 'Folder' : cleanName.split('.').pop()?.toUpperCase() || 'File' }) }), _jsx(Text, { ...CELL, children: when(e.lastModified) }), _jsx(Text, { ...CELL, children: weigh(e.size) }), _jsxs(View, { position: "relative", items: "flex-start", children: [_jsx(More, { onPress: (ev) => {
+                                                                    ev.stopPropagation();
+                                                                    setItemMenuKey(itemMenuKey === e.key ? null : e.key);
+                                                                } }), itemMenuKey === e.key ? (_jsxs(YStack, { position: "absolute", r: 0, t: "100%", bg: "var(--popover)", borderWidth: 1, borderColor: "$borderColor", rounded: 8, boxShadow: "var(--shadow-lg)", z: "var(--z-dropdown)", p: 4, minW: 140, onClick: (ev) => ev.stopPropagation(), children: [!isFolder ? (_jsx(Pick, { icon: Download, label: "Download", onPress: () => {
+                                                                            setItemMenuKey(null);
+                                                                            handleDownload(e);
+                                                                        } })) : null, _jsx(Pick, { icon: Trash2, label: "Delete", tone: BAD, onPress: () => {
+                                                                            setItemMenuKey(null);
+                                                                            handleDelete(e);
+                                                                        } })] })) : null] })] }, e.key));
+                                        }))] }) })) : (_jsxs(_Fragment, { children: [_jsxs(YStack, { gap: "$2.5", children: [_jsx(Text, { fontSize: 12, fontWeight: "600", color: "$soft", children: "Storage Buckets" }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: failed ? (_jsxs(Text, { ...NOTE, children: [failed, _jsx(Button, { size: "sm", mx: "auto", mt: 10, onClick: () => {
+                                                                setFailed(null);
+                                                                setReload((n) => n + 1);
+                                                            }, children: "Try again" })] })) : !buckets ? (_jsx(Text, { ...NOTE, children: "Reading your storage\u2026" })) : buckets.length === 0 ? (_jsx(Text, { ...NOTE, children: "No buckets yet." })) : (buckets.map((b) => (_jsxs(XStack, { onClick: () => openBucket(b.name), items: "center", justify: "space-between", px: 16, py: 12, cursor: "pointer", bg: "transparent", transition: "100ms", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(Folder, { size: 17, color: "var(--foreground)" }), _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", children: getBucketDisplayName(b) })] }), _jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Text, { fontSize: "$2", color: "$faint", children: when(b.createdAt) }), _jsx(More, { onPress: (e) => e.stopPropagation() })] })] }, b.name)))) })] }), _jsxs(YStack, { gap: "$2.5", children: [_jsx(Text, { fontSize: 12, fontWeight: "600", color: "$soft", children: "Projects (Unified VFS)" }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: [_jsxs(View, { display: "grid", gridTemplateColumns: PROJECTS, px: 16, py: 10, borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { ...HEAD, children: "NAME" }), _jsx(Text, { ...HEAD, children: "TYPE" }), _jsx(Text, { ...HEAD, children: "UPDATED \u2193" }), _jsx(Text, { ...HEAD, children: "SIZE" }), _jsx(View, {})] }), filteredProjects.length === 0 ? (_jsx(Text, { py: 36, px: 16, text: "center", fontSize: "$2", color: "$faint", children: "None" })) : (filteredProjects.map((p) => (_jsxs(View, { onClick: () => {
+                                                            const targetBucket = buckets[0]?.name || 'hanzo';
+                                                            openBucket(targetBucket);
+                                                            setPrefix(`projects/${p.name || p.id}/`);
+                                                        }, display: "grid", gridTemplateColumns: PROJECTS, px: 16, py: 11, items: "center", cursor: "pointer", borderBottomWidth: 1, borderColor: "$borderColor", transition: "100ms", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { items: "center", gap: "$2.5", minW: 0, children: [_jsx(Folder, { size: 16, color: "var(--foreground)" }), _jsx(Text, { ...NAME, children: p.name })] }), _jsx(View, { items: "flex-start", children: _jsx(Text, { ...CHIP, children: p.type }) }), _jsx(Text, { ...CELL, children: p.updated }), _jsx(Text, { ...CELL, children: p.size }), _jsx(View, { items: "flex-start", children: _jsx(More, { onPress: (e) => e.stopPropagation() }) })] }, p.id))))] })] })] }))] })] }), over ? (_jsx(Box, { position: "absolute", t: 0, l: 0, r: 0, b: 0, z: 1000, bg: VEIL, borderWidth: 2, borderStyle: "dashed", borderColor: "var(--ring)", rounded: "$3", display: "flex", items: "center", justify: "center", pointerEvents: "none", children: _jsxs(YStack, { items: "center", gap: "$2", children: [_jsx(Upload, { size: 36, color: "currentColor" }), _jsxs(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: ["Drop files to upload to ", bucket || workspace] })] }) })) : null] }));
+}

package/dist/Find.d.ts

@@ -0,0 +1,7 @@
+import { type OrgCommandItem } from "@hanzogui/shell";
+export declare function Find({ doors, onClose, navigate, }: {
+    /** Where the shell can go without asking anyone: its rooms and its panes. */
+    doors: OrgCommandItem[];
+    onClose: () => void;
+    navigate?: (route: string) => void;
+}): import("react").JSX.Element;

package/dist/Find.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ⌘K, in the workspace.
+ *
+ * The estate's palette — `OrgCommandPalette`, the same frame the marketing
+ * pages open — so the chord means one thing wherever a reader presses it. Here
+ * it used to focus the column's filter box, which left the shortcut that finds
+ * anything on every other page of this site narrowing one list in the app: a
+ * conversation in the room next door was unreachable from a control offering to
+ * search the workspace.
+ *
+ * MOUNTED ONLY WHILE OPEN. Its rows are read from the platform, and a palette
+ * that stayed mounted would fetch every conversation and every project on each
+ * load of a room that draws neither.
+ */
+import { dev } from "./lib/host.js";
+import { useEffect, useState } from "react";
+import { OrgCommandPalette } from "@hanzogui/shell";
+import { useThreads } from "@hanzo/ai/react";
+import { useAi } from "./lib/ai.js";
+import { useOpen } from "./open.js";
+export function Find({ doors, onClose, navigate, }) {
+    const { threads } = useThreads();
+    const { client } = useAi();
+    const { open } = useOpen();
+    const [projects, setProjects] = useState([]);
+    useEffect(() => {
+        if (!client)
+            return;
+        let live = true;
+        client.http
+            .json({ path: "/v1/projects" })
+            .then((found) => live && setProjects(found))
+            .catch(() => {
+            // A palette that cannot read the projects still finds the rooms.
+        });
+        return () => {
+            live = false;
+        };
+    }, [client]);
+    const rows = [
+        ...doors,
+        // A conversation and a project are OPENED, not navigated to: the address is
+        // the room, and which one is open belongs to the store — so a href would
+        // land the reader in /chat with whatever they had before still on screen.
+        ...threads.map((t) => ({
+            id: `thread-${t.id}`,
+            title: t.title || "Untitled",
+            category: "Conversations",
+            action: () => {
+                open(t.id);
+                navigate?.("/chat");
+            },
+        })),
+        ...projects.map((p) => ({
+            id: `project-${p.id}`,
+            title: p.name,
+            category: "Projects",
+            action: () => {
+                navigate?.(dev(p.name));
+            },
+        })),
+    ];
+    return (_jsx(OrgCommandPalette, { open: true, currentAppId: "chat", commands: rows, onOpenChange: (next) => {
+            if (!next)
+                onClose();
+        }, onNavigate: (href, external) => {
+            if (external)
+                window.open(href, "_blank", "noopener");
+            else
+                navigate?.(href);
+            onClose();
+        }, 
+        // THIS ROOM IS THE AI. A question nobody indexed opens a conversation
+        // here, rather than a second copy of the product the reader is in.
+        onAsk: (question) => {
+            open(null);
+            navigate?.(`/chat?q=${encodeURIComponent(question)}`);
+            onClose();
+        } }));
+}

package/dist/Guide.d.ts

@@ -0,0 +1,6 @@
+import { type Tour } from './tours.js';
+export declare function Guide({ room }: {
+    room?: Tour;
+}): import("react").ReactPortal;
+/** Let a room's guide be asked for again — a menu row can call this and reload. */
+export declare function replayGuide(room?: Tour): void;