@hanzo/build 0.2.0

package/lib/tools.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The composer's quiet controls, once, for every composer the builder draws:
+ * attach files (which ride the prompt as text — nothing is uploaded anywhere
+ * else) and dictate (recorded here, transcribed by the platform).
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { ChevronDown, Mic, MicOff, Paperclip, Plus, X } from '@hanzogui/lucide-icons-2';
+import { ComposerTool } from '@hanzo/ui/chat';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useRef } from 'react';
+import { useTarget } from './host.js';
+import { useDictation } from './voice.js';
+const EACH = 100_000;
+const ALL = 200_000;
+/** The ask with its attachments appended as fenced text. */
+export function compose(prompt, files) {
+    if (!files.length)
+        return prompt;
+    return prompt + files.map((f) => `\n\n\`${f.name}\`:\n\`\`\`\n${f.text}\n\`\`\``).join('');
+}
+/** Read `list` into `have`, within the caps; answers the new list and what was refused. */
+export async function read(have, list) {
+    const files = [...have];
+    let total = files.reduce((n, f) => n + f.text.length, 0);
+    let note = '';
+    for (const file of Array.from(list)) {
+        if (file.size > EACH) {
+            note = `${file.name} is over 100 KB; attach a smaller file or point the run at the repository.`;
+            continue;
+        }
+        const text = await file.text();
+        if (total + text.length > ALL) {
+            note = 'Attachments are capped at 200 KB in all.';
+            break;
+        }
+        total += text.length;
+        files.push({ name: file.name, text });
+    }
+    return { files, note };
+}
+export function Attach({ files, onFiles, onNote }) {
+    const picker = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(ComposerTool, { label: "Attach files", icon: _jsx(Plus, { size: 14 }), onPress: () => picker.current?.click() }), _jsx("input", { ref: picker, type: "file", multiple: true, hidden: true, 
+                // `hidden` alone loses to a reset that sets `display` on inputs.
+                style: { display: 'none' }, tabIndex: -1, "aria-hidden": true, onChange: (e) => {
+                    const input = e.currentTarget;
+                    if (!input.files)
+                        return;
+                    void read(files, input.files).then(({ files: next, note }) => {
+                        onFiles(next);
+                        onNote(note);
+                        input.value = '';
+                    });
+                } })] }));
+}
+/** The attached files as small removable marks. */
+export function Files({ files, onFiles }) {
+    return (_jsx(_Fragment, { children: files.map((f) => (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", height: 24, rounded: "$2", bg: "$raised", children: [_jsx(Paperclip, { size: 12 }), _jsx(SizableText, { size: "$1", color: "$ink", numberOfLines: 1, maxW: 140, children: f.name }), _jsx(ComposerTool, { label: `Remove ${f.name}`, icon: _jsx(X, { size: 12 }), onPress: () => onFiles(files.filter((x) => x !== f)) })] }, f.name))) }));
+}
+export function Dictate({ onText, onNote }) {
+    const voice = useDictation(useTarget(), onText, onNote);
+    return (_jsxs(XStack, { items: "center", children: [_jsx(ComposerTool, { label: !voice.able ? 'Dictation needs a microphone this page can record' : voice.on ? 'Stop and transcribe' : voice.busy ? 'Transcribing…' : 'Dictate', icon: voice.on ? _jsx(MicOff, { size: 14 }) : _jsx(Mic, { size: 14 }), onPress: () => void voice.toggle(), disabled: !voice.able || voice.busy, "aria-pressed": voice.on }), _jsx(ChipSelect, { quiet: true, name: "Dictation language", icon: _jsx(ChevronDown, { size: 12 }), label: "", chosen: voice.languages.find((l) => l.id === voice.language) ?? null, items: voice.languages, onChange: (l) => voice.setLanguage(l.id), placeholder: "Search languages\u2026", disabled: !voice.able })] }));
+}

package/lib/voice.d.ts

@@ -0,0 +1,17 @@
+import type { Target } from './api/call.ts';
+export declare const LANGUAGES: {
+    id: string;
+    label: string;
+}[];
+export declare function useDictation(t: Target, onText: (text: string) => void, onNote: (note: string) => void): {
+    on: boolean;
+    busy: boolean;
+    able: boolean;
+    toggle: () => Promise<void>;
+    language: string;
+    setLanguage: import("react").Dispatch<import("react").SetStateAction<string>>;
+    languages: {
+        id: string;
+        label: string;
+    }[];
+};

package/lib/voice.js

@@ -0,0 +1,86 @@
+/**
+ * Dictation into the draft, heard by the platform.
+ *
+ * The microphone is recorded in this browser and the recording is transcribed
+ * by `POST /v1/audio/transcriptions` on the platform, through `@hanzo/voice` —
+ * never by a browser's built-in recognizer, which ships the audio to its
+ * vendor. Press to record, press again to stop; the words land in the draft.
+ * Where there is no microphone or no recorder, `able` is false and the control
+ * says so rather than recording into nothing.
+ */
+import { speech } from '@hanzo/voice';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export const LANGUAGES = [
+    { id: 'en', label: 'English' },
+    { id: 'es', label: 'Español' },
+    { id: 'fr', label: 'Français' },
+    { id: 'de', label: 'Deutsch' },
+    { id: 'ja', label: '日本語' },
+    { id: 'zh', label: '中文' },
+];
+/** Whether this browser can record the microphone at all. */
+function recordable() {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined')
+        return false;
+    return typeof window.MediaRecorder === 'function' && Boolean(navigator.mediaDevices?.getUserMedia);
+}
+export function useDictation(t, onText, onNote) {
+    const [on, setOn] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [able, setAble] = useState(false);
+    const [language, setLanguage] = useState(() => {
+        const nav = typeof navigator !== 'undefined' ? navigator.language.split('-')[0] : 'en';
+        return LANGUAGES.some((l) => l.id === nav) ? nav : 'en';
+    });
+    const rec = useRef(null);
+    const said = useRef(onText);
+    said.current = onText;
+    const note = useRef(onNote);
+    note.current = onNote;
+    const ear = useMemo(() => speech({ baseUrl: t.api, token: t.token, ear: 'whisper' }), [t]);
+    useEffect(() => setAble(recordable()), []);
+    const toggle = useCallback(async () => {
+        if (rec.current) {
+            rec.current.stop();
+            return;
+        }
+        let stream;
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
+        }
+        catch {
+            note.current('The microphone is not available to this page.');
+            return;
+        }
+        const chunks = [];
+        const r = new MediaRecorder(stream);
+        r.ondataavailable = (e) => {
+            if (e.data.size)
+                chunks.push(e.data);
+        };
+        r.onstop = () => {
+            rec.current = null;
+            setOn(false);
+            for (const track of stream.getTracks())
+                track.stop();
+            const audio = new Blob(chunks, { type: r.mimeType || 'audio/webm' });
+            if (!audio.size)
+                return;
+            setBusy(true);
+            ear
+                .transcribe(audio, { language })
+                .then((text) => {
+                const words = text.trim();
+                if (words)
+                    said.current(words);
+            })
+                .catch((e) => note.current(e instanceof Error ? e.message : 'The platform could not transcribe that.'))
+                .finally(() => setBusy(false));
+        };
+        rec.current = r;
+        r.start();
+        setOn(true);
+    }, [ear, language]);
+    useEffect(() => () => rec.current?.stop(), []);
+    return { on, busy, able, toggle, language, setLanguage, languages: LANGUAGES };
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@hanzo/build",
+  "version": "0.2.0",
+  "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 page (hanzo.build) and as a component (platform.hanzo.ai/dev).",
+  "engines": {
+    "node": ">=22.18"
+  },
+  "devDependencies": {
+    "@hanzo/font": "1.9.3",
+    "@hanzo/gui": "8.3.5",
+    "@hanzo/iam": "0.21.18",
+    "@hanzo/ui": "8.27.16",
+    "@hanzo/vite": "0.1.4",
+    "@hanzo/voice": "0.1.8",
+    "@hanzogui/lucide-icons-2": "8.3.5",
+    "@hanzogui/next-theme": "8.3.5",
+    "@types/node": "26.5.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "next-themes": "^0.4.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "^7.87.0",
+    "react-native-web": "^0.21.2",
+    "react-router": "^8.3.1",
+    "typescript": "7.0.2",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "LICENSE-APACHE",
+    "LICENSE-MIT",
+    "NOTICE"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/build.git"
+  },
+  "peerDependencies": {
+    "@hanzo/gui": ">=8.3.5",
+    "@hanzo/ui": ">=8.27.16",
+    "@hanzogui/lucide-icons-2": ">=8.3.5",
+    "react": ">=19.2.8",
+    "@hanzo/voice": ">=0.1.8"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "build:lib": "rm -rf lib && tsc -p tsconfig.lib.json",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "test": "vitest run"
+  }
+}