import { useVoiceRecorder, useTranscribe } from '@localmode/react';

function VoiceInput() {
  const recorder = useVoiceRecorder();
  const transcriber = useTranscribe({ model });

  const handleStop = async () => {
    const blob = await recorder.stopRecording();
    if (blob) await transcriber.execute(blob);
  };

  return (
    <div>
      <button onClick={recorder.isRecording ? handleStop : recorder.startRecording}>
        {recorder.isRecording ? 'Stop' : 'Record'}
      </button>
      {recorder.error && <p>{recorder.error.message}</p>}
    </div>
  );
}

const recorder = useVoiceRecorder({
  deviceId: selectedMicId,
  constraints: { echoCancellation: true },
});

useEffect(() => {
  if (!recorder.isRecording) return;
  let raf: number;
  const tick = () => {
    setLevel(recorder.getVolume()); // RMS in [0, 1]
    raf = requestAnimationFrame(tick);
  };
  raf = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(raf);
}, [recorder.isRecording]);

import { toAppError } from '@localmode/react';
import type { AppError } from '@localmode/react';

// In a hook's return statement:
return {
  error: toAppError(error),          // { message: '...', recoverable: true } or null
  error: toAppError(error, false),   // { message: '...', recoverable: false }
};

// Without toAppError (verbose):
error: error ? { message: error.message, recoverable: true } : null

// With toAppError (clean):
error: toAppError(error)

// LocalModeError('Model failed', 'MODEL_LOAD_ERROR', { hint: 'Check your network' })
toAppError(error)
// → { message: 'Model failed — Check your network', code: 'MODEL_LOAD_ERROR', recoverable: true }

interface AppError {
  message: string;
  code?: string;
  recoverable?: boolean;
}

import { useModelLoad } from '@localmode/react';
import { transformers, isModelCached } from '@localmode/transformers';

const MODEL_ID = 'Xenova/all-MiniLM-L6-v2';

function SearchPanel() {
  const { status, progressValue, model, load, error } = useModelLoad({
    key: MODEL_ID,
    create: (onProgress) => transformers.embedding(MODEL_ID, { onProgress }),
    isCached: () => isModelCached(MODEL_ID),
  });

  if (status === 'error') return <p>Failed: {error?.message}</p>;
  if (status !== 'ready') {
    return (
      <button onClick={load} disabled={status === 'loading'}>
        Load model ({(progressValue.percent * 100).toFixed(0)}%)
      </button>
    );
  }
  return <SearchView model={model} />;
}

// transformers
create: (onProgress) => transformers.embedding(id, { onProgress })
// webllm
create: (onProgress) => webllm.languageModel(id, { onProgress })
// wllama
create: (onProgress) => wllama.languageModel(id, { onProgress })

// installed via: npx shadcn add @localmode/ui/local-first/model-downloader
import { DownloadProgress } from '@/components/ui/model-downloader';

const { progressValue } = useModelLoad({ key, create });

<DownloadProgress value={progressValue} />

import { useModelStatus } from '@localmode/react';

const model = transformers.embedding('Xenova/all-MiniLM-L6-v2');

function StatusBadge() {
  const { isReady, isLoading, progress, error } = useModelStatus(model);

  if (isLoading) return <p>Loading {(progress * 100).toFixed(0)}%...</p>;
  if (error) return <p>Failed to load: {error.message}</p>;
  return <p>{isReady ? 'Model ready' : 'Not loaded'}</p>;
}

import { useCapabilities } from '@localmode/react';

function Demo() {
  const { capabilities, isDetecting, error, refresh } = useCapabilities();

  if (isDetecting) return <p>Detecting...</p>;
  if (error) return <button onClick={refresh}>Retry detection</button>;

  return (
    <ul>
      <li>WebGPU: {capabilities?.features.webgpu ? 'Yes' : 'No'}</li>
      <li>WASM: {capabilities?.features.wasm ? 'Yes' : 'No'}</li>
      <li>IndexedDB: {capabilities?.features.indexedDB ? 'Yes' : 'No'}</li>
    </ul>
  );
}

import { useNetworkStatus } from '@localmode/react';

function Demo() {
  const { isOnline, isOffline } = useNetworkStatus();

  return <p>{isOnline ? 'Online' : 'Offline'}</p>;
}

import { useStorageQuota } from '@localmode/react';

function Demo() {
  const { quota, isLoading, error, refresh } = useStorageQuota();

  if (error) return <p>Quota unavailable: {error.message}</p>;

  return (
    <div>
      {quota && (
        <p>
          {quota.percentUsed.toFixed(1)}% used
          ({(quota.availableBytes / 1024 / 1024).toFixed(0)} MB free)
          {quota.isPersisted ? ' — persisted' : ''}
        </p>
      )}
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

import { readFileAsDataUrl } from '@localmode/react';

const handleFile = async (file: File) => {
  const dataUrl = await readFileAsDataUrl(file);
  await captioner.execute(dataUrl);
};

import { validateFile } from '@localmode/react';

const error = validateFile({
  file,
  accept: ['image/png', 'image/jpeg', 'image/webp'],
  maxSize: 10_000_000, // 10MB
});

if (error) {
  setError(error); // { message: '...', recoverable: true }
  return;
}

import { downloadBlob } from '@localmode/react';

// Download text content
downloadBlob('transcript text...', 'transcript.txt');

// Download binary content
downloadBlob(audioBlob, 'recording.webm', 'audio/webm');

import { useObjectUrl } from '@localmode/react';

function NotePlayback({ audio }: { audio: Blob | null }) {
  const src = useObjectUrl(audio);
  return src ? <audio controls src={src} /> : null;
}

import { useModelLoader } from '@localmode/react';

function ModelManager() {
  const { downloads, isDownloading, error, prefetch, cancel, evict } = useModelLoader({
    maxCacheSize: '2GB',
  });

  if (error) return <p>Loader unavailable: {error.message}</p>; // e.g. IndexedDB blocked

  return (
    <button onClick={() => prefetch([{
      url: 'https://your-cdn.com/models/custom-model.onnx',
      modelId: 'custom-model'
    }])}>
      Download Model
    </button>
  );
}

import { useInferenceQueue } from '@localmode/react';

function QueueDemo() {
  const { queue, stats, isProcessing } = useInferenceQueue({
    concurrency: 1,
    priorities: ['interactive', 'background'],
  });

  const handleSearch = async (query: string) => {
    const result = await queue.add(
      () => embed({ model, value: query }),
      { priority: 'interactive' }
    );
  };

  return (
    <div>
      {stats && <p>Pending: {stats.pending}, Active: {stats.active}</p>}
    </div>
  );
}

import { useSemanticCache } from '@localmode/react';
import { transformers } from '@localmode/transformers';

function CachedApp() {
  const { cache, stats, isLoading } = useSemanticCache({
    embeddingModel: transformers.embedding('Xenova/bge-small-en-v1.5'),
    threshold: 0.92,
    maxEntries: 100,
  });

  if (isLoading || !cache) return <p>Initializing cache...</p>;

  return (
    <div>
      <p>Entries: {stats.entries}</p>
      <p>Hit rate: {(stats.hitRate * 100).toFixed(1)}%</p>
    </div>
  );
}

import { useAuditLog } from '@localmode/react';
import type { AuditLog } from '@localmode/core';

function AuditPanel({ log }: { log: AuditLog }) {
  const { entries, append, verify, lastVerification, isLoading, error } = useAuditLog(log);

  return (
    <div>
      {entries.map((e) => <div key={e.id}>{e.kind}</div>)}
      <button onClick={() => append('user.click', {})}>Log click</button>
      <button onClick={verify}>Verify chain</button>
      {lastVerification && <p>{lastVerification.ok ? 'Chain intact' : `Chain broken at #${lastVerification.brokenAt}`}</p>}
    </div>
  );
}

import { useEncryptedVault } from '@localmode/react';

function Vault() {
  const { status, items, error, unlock, lock, createItem, deleteItem } =
    useEncryptedVault<{ note: string }>({ name: 'notes' });

  if (status !== 'unlocked') {
    return (
      <form onSubmit={(e) => { e.preventDefault(); unlock(passphraseInput); }}>
        <button>{status === 'uninitialized' ? 'Create vault' : 'Unlock'}</button>
        {error?.name === 'VaultPassphraseError' && <p>Wrong passphrase</p>}
      </form>
    );
  }
  return (
    <div>
      {items.map((i) => (
        <div key={i.id}>
          {i.data.note} <button onClick={() => deleteItem(i.id)}>x</button>
        </div>
      ))}
      <button onClick={() => createItem({ note: 'hello' })}>Add</button>
      <button onClick={lock}>Lock</button>
    </div>
  );
}