@legendapp/create-spark 0.0.0-stage → 0.0.1-next.6

package/templates/music-lite/assets.ts

@@ -0,0 +1,18 @@
+import * as Picker from "expo-document-picker";
+import * as Files from "expo-file-system/legacy";
+import type { Track } from "./model";
+export async function importTracks(): Promise<Track[]> {
+  const result = await Picker.getDocumentAsync({ type: "audio/*", multiple: true, copyToCacheDirectory: true });
+  if (result.canceled) return [];
+  if (!Files.documentDirectory) throw new Error("App document storage is unavailable");
+  const directory = `${Files.documentDirectory}music/`;
+  await Files.makeDirectoryAsync(directory, { intermediates: true });
+  const tracks: Track[] = [];
+  for (const asset of result.assets) {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const uri = `${directory}${id}-${asset.name.replace(/[^a-zA-Z0-9._-]/g, "_")}`;
+    await Files.copyAsync({ from: asset.uri, to: uri }); tracks.push({ id, name: asset.name, uri });
+  }
+  return tracks;
+}
+export const resolveTrack = async (track: Track) => ({ uri: track.uri, release() {} });

package/templates/music-lite/assets.web.ts

@@ -0,0 +1,37 @@
+import { projectId } from "./shared/identity";
+import type { Track } from "./model";
+async function database() {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    const request = indexedDB.open(`spark-music-${projectId}`, 1);
+    request.onupgradeneeded = () => request.result.createObjectStore("audio");
+    request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error);
+  });
+}
+async function store(id: string, file: File) {
+  const db = await database();
+  try { await new Promise<void>((resolve, reject) => {
+    const transaction = db.transaction("audio", "readwrite"); transaction.objectStore("audio").put(file, id);
+    transaction.oncomplete = () => resolve(); transaction.onerror = () => reject(transaction.error); transaction.onabort = () => reject(transaction.error ?? new Error("Audio import was aborted"));
+  }); } finally { db.close(); }
+}
+export async function importTracks(): Promise<Track[]> {
+  const files = await new Promise<File[]>(resolve => {
+    const input = document.createElement("input"); input.type = "file"; input.multiple = true; input.accept = "audio/*";
+    input.oncancel = () => resolve([]); input.onchange = () => resolve(Array.from(input.files ?? [])); input.click();
+  });
+  const tracks: Track[] = [];
+  for (const file of files) {
+    const id = crypto.randomUUID(); await store(id, file); tracks.push({ id, uri: `library:${id}`, name: file.name });
+  }
+  return tracks;
+}
+export async function resolveTrack(track: Track) {
+  const db = await database();
+  try {
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      const request = db.transaction("audio").objectStore("audio").get(track.id);
+      request.onsuccess = () => request.result instanceof Blob ? resolve(request.result) : reject(new Error("Audio is missing from browser storage. Import the file again.")); request.onerror = () => reject(request.error);
+    });
+    const uri = URL.createObjectURL(blob); return { uri, release() { URL.revokeObjectURL(uri); } };
+  } finally { db.close(); }
+}

package/templates/music-lite/assets.windows.ts

@@ -0,0 +1 @@
+export * from "./assets.desktop";

package/templates/music-lite/model.ts

@@ -0,0 +1,91 @@
+import type { AudioPlayer, AudioStatus } from "@legendapp/spark/audio";
+export type Track = { id: string; name: string; uri: string };
+export type Library = { version: 1; tracks: Track[]; currentId: string | null; position: number };
+export function decodeLibrary(value: unknown): Library {
+  const data = value as Library;
+  if (data?.version !== 1 || !Array.isArray(data.tracks) || !data.tracks.every(track => track && typeof track.id === "string" && typeof track.name === "string" && typeof track.uri === "string") || !Number.isFinite(data.position) || data.position < 0 || (data.currentId !== null && typeof data.currentId !== "string")) throw new Error("Unsupported music library format");
+  return data;
+}
+const stopped: AudioStatus = { playing: false, currentTime: 0, duration: 0, didJustFinish: false, error: null, volume: 1 };
+export class MusicModel {
+  private state = { version: 1 as const, tracks: [] as Track[], currentId: null as string | null, position: 0, status: stopped, ready: false, busy: false, dirty: false, error: null as string | null };
+  private listeners = new Set<() => void>();
+  private player?: AudioPlayer;
+  private release?: () => void;
+  private loading?: Promise<void>;
+  private polling = false;
+  private lastSave = 0;
+  private finishedPlayback = false;
+  private revision = 0;
+  private activeOperation?: Promise<void>;
+  private disposing?: Promise<void>;
+  constructor(private records: { load(): Promise<{ value: Library | null; recovered: boolean }>; save(value: Library): Promise<void> }, private createPlayer: (track: Track) => Promise<{ player: AudioPlayer; release(): void }>) {}
+  getSnapshot = () => this.state;
+  subscribe = (listener: () => void) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; };
+  private update(patch: Partial<typeof this.state>) { this.state = { ...this.state, ...patch }; for (const listener of this.listeners) listener(); }
+  private changed(patch: Partial<typeof this.state>) { this.revision++; this.update({ ...patch, dirty: true }); }
+  load = () => this.loading ??= (async () => {
+    try { const saved = await this.records.load(); this.update({ ...saved.value, ready: true, error: saved.recovered ? "Recovered the previous saved queue." : null }); }
+    catch (error) { this.update({ error: String(error) }); }
+  })();
+  add = async (tracks: Track[]) => { if (!this.state.ready) return; const ids = new Set(this.state.tracks.map(track => track.id)); this.changed({ tracks: [...this.state.tracks, ...tracks.filter(track => !ids.has(track.id) && !!ids.add(track.id))] }); await this.flush(); };
+  private async operation(action: () => Promise<void>) {
+    if (this.disposing) await this.disposing;
+    if (this.state.busy || !this.state.ready) return;
+    this.update({ busy: true, error: null });
+    const pending = action(); this.activeOperation = pending;
+    try { await pending; } catch (error) { this.update({ error: String(error) }); }
+    finally { this.activeOperation = undefined; this.update({ busy: false }); }
+  }
+  play = (id = this.state.currentId ?? this.state.tracks[0]?.id) => this.operation(async () => {
+    const track = this.state.tracks.find(track => track.id === id); if (!track) return;
+    if (!this.player || id !== this.state.currentId) {
+      const next = await this.createPlayer(track);
+      try { if (this.player) await this.player.remove(); } catch (error) { await next.player.remove(); next.release(); throw error; }
+      this.release?.(); this.player = next.player; this.release = next.release;
+      const position = id === this.state.currentId ? this.state.position : 0;
+      this.changed({ currentId: id!, position, status: stopped });
+      if (position > 0) await this.player.seekTo(position);
+    }
+    if (this.state.status.didJustFinish) await this.player.seekTo(0);
+    this.finishedPlayback = false;
+    await this.player.play(); await this.tick(); await this.flush();
+  });
+  pause = () => this.operation(async () => { await this.player?.pause(); await this.tick(); await this.flush(); });
+  seek = (seconds: number) => this.operation(async () => { if (this.player) { await this.player.seekTo(Math.max(0, seconds)); await this.tick(); await this.flush(); } });
+  next = () => { const index = this.state.tracks.findIndex(track => track.id === this.state.currentId); const track = this.state.tracks[index + 1]; return track ? this.play(track.id) : this.pause(); };
+  tick = async () => {
+    if (!this.player || this.polling) return;
+    this.polling = true; const player = this.player;
+    try {
+      const status = await player.getStatus(); if (player !== this.player) return;
+      if (status.currentTime !== this.state.position) this.changed({ position: status.currentTime });
+      this.update({ status, ...(status.error ? { error: status.error } : {}) });
+      if (status.didJustFinish && !this.state.busy && !this.finishedPlayback) { this.finishedPlayback = true; void this.next(); }
+      if (Date.now() - this.lastSave > 5000) { this.lastSave = Date.now(); await this.flush(); }
+    } catch (error) { this.update({ error: String(error) }); }
+    finally { this.polling = false; }
+  };
+  flush = async () => {
+    if (!this.state.ready) return false;
+    if (!this.state.dirty) return true;
+    try {
+      while (this.state.dirty) {
+        const revision = this.revision;
+        const { tracks, currentId, position } = this.state;
+        await this.records.save({ version: 1, tracks, currentId, position });
+        if (revision === this.revision) this.update({ dirty: false });
+      }
+      return true;
+    }
+    catch (error) { this.update({ error: String(error) }); return false; }
+  };
+  dispose = () => this.disposing ??= (async () => {
+    try {
+      await this.activeOperation?.catch(() => {}); await this.flush();
+      const player = this.player, release = this.release;
+      this.player = undefined; this.release = undefined;
+      try { await player?.remove(); } finally { release?.(); this.update({ status: stopped }); }
+    } finally { this.disposing = undefined; }
+  })();
+}

package/templates/music-lite/store.ts

@@ -0,0 +1,10 @@
+import { createAudioPlayer } from "@legendapp/spark/audio";
+import { records } from "./shared/storage";
+import { resolveTrack } from "./assets";
+import { MusicModel, decodeLibrary } from "./model";
+export const music = new MusicModel(records("music", decodeLibrary), async track => {
+  const source = await resolveTrack(track);
+  try { return { player: await createAudioPlayer({ uri: source.uri, title: track.name }), release: source.release }; }
+  catch (error) { source.release(); throw error; }
+});
+export const dirty = () => music.getSnapshot().dirty;

package/templates/notes-lite/Activation.desktop.tsx

@@ -0,0 +1,5 @@
+import { readText } from "@legendapp/spark/files";
+import { OpenFiles } from "./shared/OpenFiles";
+import { notes } from "./store";
+const open = async (path: string) => { await notes.load(); if (!notes.getSnapshot().ready) throw new Error("Notes storage is unavailable"); const text = await readText(path); notes.create(text); };
+export function Activation({ windowId, onError }: { windowId: string; onError(message: string): void }) { return <OpenFiles windowId={windowId} onFile={open} onError={onError} />; }

package/templates/notes-lite/Activation.macos.tsx

@@ -0,0 +1 @@
+export { Activation } from "./Activation.desktop";

package/templates/notes-lite/Activation.tsx

@@ -0,0 +1 @@
+export function Activation(_props: { windowId: string; onError(message: string): void }) { return null; }

package/templates/notes-lite/Activation.windows.tsx

@@ -0,0 +1 @@
+export { Activation } from "./Activation.desktop";

package/templates/notes-lite/App.tsx

@@ -0,0 +1,92 @@
+import { Activation } from "./Activation";
+import { memo, useEffect, useMemo, useRef, useState, useContext } from "react";
+import { FlatList, Pressable, SafeAreaView, StyleSheet, TextInput, useWindowDimensions, View } from "react-native";
+import { Button } from "@legendapp/spark/ui";
+import { io } from "./shared/io";
+import { Lifecycle } from "./shared/Lifecycle";
+import { useModel } from "./shared/useModel";
+import { notes, dirty } from "./store";
+import { title, type Note } from "./model";
+import { desktop, openNote, openSettings, showNotebook, restoreSession, watchSession, flushSession } from "./Desktop";
+import { requestSearch, onSearch } from "./search";
+import { Text, ThemeContext, usePalette } from "./Theme";
+const Row = memo(function Row({ note, selected }: { note: Note; selected: boolean }) {
+  const palette = useContext(ThemeContext);
+  return <Pressable accessibilityRole="button" accessibilityState={{ selected }} onPress={() => notes.select(note.id)} style={[styles.row, { borderColor: palette.border }, selected && { backgroundColor: palette.selected }]}>
+    <Text numberOfLines={1} style={styles.noteTitle}>{title(note)}</Text>
+    <Text numberOfLines={1}>{note.text.split("\n").slice(1).join(" ") || "Empty note"}</Text>
+  </Pressable>;
+});
+export default function App({ windowId = "main", windowProps }: { windowId?: string; windowProps?: { noteId?: string; settings?: boolean } }) {
+  const state = useModel(notes);
+  const palette = usePalette(state.theme ?? "system");
+  const { width } = useWindowDimensions();
+  const search = useRef<TextInput>(null);
+  const [query, setQuery] = useState("");
+  const [trash, setTrash] = useState(false);
+  const [settings, setSettings] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchRequested, setSearchRequested] = useState(0);
+  const selected = state.notes.find(note => note.id === (windowProps?.noteId ?? state.selectedId) && !note.deleted);
+  const isSettings = windowProps?.settings || settings;
+  const visible = useMemo(() => state.notes.filter(note => note.deleted === trash && note.text.toLowerCase().includes(query.toLowerCase())), [state.notes, query, trash]);
+  // Native menu/shortcut registrations retain these callbacks; read current model at invocation.
+  const commands = useMemo(() => {
+    const run = (action: () => void | Promise<unknown>) => () => { setError(null); void Promise.resolve().then(action).catch(error => setError(String(error))); };
+    const current = () => windowProps?.settings ? undefined : notes.getSnapshot().notes.find(note => note.id === (windowProps?.noteId ?? notes.getSnapshot().selectedId) && !note.deleted);
+    return [
+      { id: "new", title: "New note", key: "N", run: run(async () => { setSettings(false); setTrash(false); setQuery(""); const id = notes.create(); if (id && (windowProps?.noteId || windowProps?.settings)) await openNote(id); }) },
+      { id: "save", title: "Save notes", key: "S", run: run(async () => { await notes.flush(); }) },
+      { id: "open", title: "Import text…", key: "O", run: run(async () => { const file = await io.open(); if (file) { const id = notes.create(file.text); if (id && (windowProps?.noteId || windowProps?.settings)) await openNote(id); } }) },
+      { id: "search", title: "Search notes", key: "F", run: run(async () => { if (desktop) await showNotebook(); requestSearch(); }) },
+      { id: "delete", title: "Delete note", key: "Shift+Backspace", run: run(() => { const note = current(); if (note) notes.setDeleted(note.id, true); }) },
+      ...(desktop ? [{ id: "window", title: "Open in new window", key: "Shift+N", run: run(async () => { const note = current(); if (note) await openNote(note.id); }) }] : []),
+      { id: "settings", title: "Settings…", key: ",", run: run(async () => { if (desktop) await openSettings(); else setSettings(value => !value); }) },
+    ];
+  }, [windowProps?.noteId, windowProps?.settings]);
+  useEffect(() => { void notes.load(); }, []);
+  useEffect(() => {
+    if (windowId !== "main") return;
+    return onSearch(() => { setSettings(false); setTrash(false); notes.select(null); setSearchRequested(value => value + 1); });
+  }, [windowId]);
+  useEffect(() => {
+    if (!desktop || windowId !== "main") return;
+    void restoreSession().catch(error => setError(String(error)));
+    const subscription = watchSession(setError);
+    return () => subscription.remove();
+  }, [windowId]);
+  useEffect(() => { if (searchRequested) search.current?.focus(); }, [searchRequested]);
+  const sidebar = !windowProps?.noteId && (width >= 720 || !selected);
+  const fieldStyle = { color: palette.text, backgroundColor: palette.surface, borderColor: palette.border };
+  return <ThemeContext.Provider value={palette}><SafeAreaView style={[styles.root, { backgroundColor: palette.background }]}>
+    <Activation windowId={windowId} onError={setError} />
+    <Lifecycle title={isSettings ? "Notes Settings" : selected ? `${title(selected)} — Notes` : "Notes"} windowId={windowId} flush={notes.flush} quit={desktop ? flushSession : notes.flush} dirty={dirty} commands={commands} onError={setError} />
+    <View style={styles.header}><Text style={styles.heading}>{isSettings ? "Settings" : "Notes"}</Text><Text accessibilityLiveRegion="polite">{state.saving ? "Saving…" : state.dirty ? "Changes pending" : state.ready ? "Saved on this device" : "Opening notes…"}</Text>{!isSettings ? <Button onPress={commands.find(command => command.id === "settings")!.run}>Settings</Button> : null}</View>
+    {state.recovered ? <Text style={styles.notice}>Recovered the previous saved snapshot after an incomplete or unreadable write.</Text> : null}
+    {error ? <View style={styles.notice}><Text accessibilityRole="alert">{error}</Text><Button onPress={() => setError(null)}>Dismiss</Button></View> : null}
+    {state.error ? <View style={styles.notice}><Text accessibilityRole="alert">{state.error}</Text>{state.ready ? <Button onPress={() => { void notes.flush(); }}>Retry save</Button> : <Text>Storage could not be opened. Restart after resolving the storage problem.</Text>}</View> : null}
+    {isSettings ? <View style={styles.editorPane}><Text style={styles.noteTitle}>Appearance</Text><Text>Choose a theme for every Notes window.</Text><View style={styles.toolbar}>{(["system", "light", "dark"] as const).map(theme => <Button key={theme} disabled={!state.ready || (state.theme ?? "system") === theme} onPress={() => notes.setTheme(theme)}>{`${theme === "system" ? "System" : theme === "light" ? "Light" : "Dark"}${(state.theme ?? "system") === theme ? " ✓" : ""}`}</Button>)}</View>{!desktop ? <Button onPress={() => setSettings(false)}>Back to notes</Button> : null}</View> : <View style={styles.body}>
+      {sidebar ? <View style={[styles.sidebar, { borderColor: palette.border }, width < 720 && { width: "100%" }]}>
+        <TextInput ref={search} accessibilityLabel="Search notes" placeholder="Search notes" placeholderTextColor={palette.text} value={query} onChangeText={setQuery} style={[styles.search, fieldStyle]} />
+        <View style={styles.toolbar}><Button disabled={!state.ready} onPress={commands[0]!.run}>New note</Button><Button disabled={!state.ready} onPress={commands[2]!.run}>Import text</Button><Button onPress={commands.find(command => command.id === "search")!.run}>Search</Button><Button onPress={() => setTrash(value => !value)}>{trash ? "Show notes" : "Recently deleted"}</Button></View>
+        <FlatList data={visible} keyExtractor={note => note.id} extraData={state.selectedId} renderItem={({ item }) => trash ? <View style={styles.row}><Text>{title(item)}</Text><Button onPress={() => notes.setDeleted(item.id, false)}>Restore</Button></View> : <Row note={item} selected={item.id === state.selectedId} />} ListEmptyComponent={<Text style={styles.notice}>{query ? "No matching notes" : trash ? "No deleted notes" : "Create your first note"}</Text>} />
+      </View> : null}
+      {(!sidebar || width >= 720) ? selected ? <View style={styles.editorPane}>
+        <View style={styles.toolbar}>
+          {width < 720 && !windowProps?.noteId ? <Button onPress={() => notes.select(null)}>Back to notes</Button> : null}
+          <Button onPress={() => { void io.save({ name: `${title(selected).replace(/[^a-zA-Z0-9 _-]/g, "_")}.md` }, selected.text, "", true).catch(error => setError(String(error))); }}>Export text</Button>
+          <Button onPress={commands.find(command => command.id === "delete")!.run}>Delete note</Button>
+          {desktop ? <Button onPress={commands.find(command => command.id === "window")!.run}>Open in new window</Button> : null}
+        </View>
+        <TextInput key={selected.id} accessibilityLabel="Note text" testID="note-text" multiline value={selected.text} onChangeText={text => notes.edit(selected.id, text)} textAlignVertical="top" style={[styles.editor, fieldStyle]} autoFocus />
+      </View> : <View style={styles.editorPane}><Text>{windowProps?.noteId ? "This note was deleted. Restore it from Recently deleted in the main window." : "Select a note to begin."}</Text></View> : null}
+    </View>}
+  </SafeAreaView></ThemeContext.Provider>;
+}
+const styles = StyleSheet.create({
+  root: { flex: 1 }, header: { padding: 20, gap: 6 }, heading: { fontSize: 28, fontWeight: "600" },
+  body: { flex: 1, flexDirection: "row" }, sidebar: { width: 320, borderRightWidth: 1 },
+  toolbar: { flexDirection: "row", flexWrap: "wrap", gap: 8, padding: 12 }, search: { padding: 12, margin: 12, borderWidth: 1, borderRadius: 6 },
+  row: { padding: 16, gap: 6, borderBottomWidth: 1 }, noteTitle: { fontSize: 16, fontWeight: "600" },
+  editorPane: { flex: 1, padding: 12 }, editor: { flex: 1, minHeight: 180, padding: 16, fontSize: 17, borderWidth: 1, borderRadius: 6 }, notice: { padding: 12 },
+});

package/templates/notes-lite/Desktop.desktop.ts

@@ -0,0 +1,47 @@
+import { addWindowListener, getDisplays, listWindows, openWindow, setWindowBounds, showWindow } from "@legendapp/spark/windows";
+import type { AsyncRegistration } from "@legendapp/spark/contracts";
+import { notes } from "./store";
+import { WindowSession } from "./window-session";
+export const desktop = true;
+const session = new WindowSession(notes, {
+  list: async () => (await listWindows()).map(window => ({ id: window.id, frame: window.bounds })),
+  workAreas: async () => (await getDisplays()).sort((a, b) => Number(b.primary) - Number(a.primary)).map(display => ({ ...display.workArea, displayId: display.id })),
+  show: showWindow,
+  frame: setWindowBounds,
+  open: window => openWindow({ id: window.id, component: "main", title: window.id === "settings" ? "Notes Settings" : "Notes", size: { width: window.frame.width, height: window.frame.height }, position: { displayId: window.frame.displayId, x: window.frame.x, y: window.frame.y }, props: { windowId: window.id, windowProps: window.id === "settings" ? { settings: true } : { noteId: window.noteId } } }),
+});
+const watchers = new Set<(message: string) => void>();
+const registrations = new Map<string, AsyncRegistration[]>();
+let generation = 0, timer: ReturnType<typeof setTimeout> | undefined;
+function report(error: unknown) { for (const watcher of watchers) watcher(String(error)); }
+function changed() { clearTimeout(timer); timer = setTimeout(() => { void session.capture().catch(report); }, 150); }
+let pending: Promise<void> = Promise.resolve();
+function observeWindows() {
+  const epoch = generation;
+  const task = pending.then(async () => {
+    if (!watchers.size || epoch !== generation) return;
+    for (const window of await listWindows()) {
+      if (!session.known(window.id) || registrations.has(window.id)) continue;
+      const owned: AsyncRegistration[] = [];
+      try {
+        owned.push(await addWindowListener(window.id, "boundsChanged", changed));
+        owned.push(await addWindowListener(window.id, "closed", () => { registrations.delete(window.id); for (const value of owned) void value.remove().catch(report); changed(); }));
+        if (watchers.size && epoch === generation) registrations.set(window.id, owned);
+        else for (const value of owned) await value.remove();
+      } catch (error) { for (const value of owned) await value.remove(); throw error; }
+    }
+  });
+  pending = task.catch(() => {}); return task;
+}
+export async function openNote(noteId: string) { await session.openNote(noteId); await observeWindows(); }
+export async function openSettings() { await session.openSettings(); await observeWindows(); }
+export const showNotebook = () => showWindow("main");
+export async function restoreSession() { await session.restore(); await observeWindows(); }
+export const flushSession = session.quit;
+export function watchSession(onError: (message: string) => void) {
+  watchers.add(onError); void observeWindows().catch(report);
+  return { remove() {
+    watchers.delete(onError);
+    if (!watchers.size) { generation++; clearTimeout(timer); for (const owned of registrations.values()) for (const value of owned) void value.remove().catch(console.error); registrations.clear(); }
+  } };
+}

package/templates/notes-lite/Desktop.macos.ts

@@ -0,0 +1 @@
+export * from "./Desktop.desktop";

package/templates/notes-lite/Desktop.ts

@@ -0,0 +1,7 @@
+export const desktop = false;
+export async function openNote(_noteId: string) {}
+export async function showNotebook() {}
+export async function openSettings() {}
+export async function restoreSession() {}
+export async function flushSession() { return true; }
+export function watchSession(_onError: (message: string) => void) { return { remove() {} }; }

package/templates/notes-lite/Desktop.windows.ts

@@ -0,0 +1 @@
+export * from "./Desktop.desktop";

package/templates/notes-lite/Theme.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext, useEffect, type ComponentProps } from "react";
+import { Appearance, Platform, Text as NativeText, useColorScheme } from "react-native";
+import type { Theme } from "./session";
+const light = { background: "#faf9f6", surface: "#ffffff", text: "#222222", border: "#d8d5cf", selected: "#dce9ef" };
+const dark = { background: "#191919", surface: "#252525", text: "#eeeeee", border: "#505050", selected: "#29475b" };
+export const ThemeContext = createContext(light);
+export function usePalette(theme: Theme) {
+  const system = useColorScheme();
+  useEffect(() => {
+    if (Platform.OS !== "web") Appearance.setColorScheme(theme === "system" ? null : theme);
+  }, [theme]);
+  return (theme === "system" ? system : theme) === "dark" ? dark : light;
+}
+export function Text(props: ComponentProps<typeof NativeText>) {
+  const palette = useContext(ThemeContext);
+  return <NativeText {...props} style={[{ color: palette.text }, props.style]} />;
+}

package/templates/notes-lite/model.ts

@@ -0,0 +1,61 @@
+import { decodeWindows, type SavedWindow, type Theme } from "./session";
+export type Note = { id: string; text: string; updatedAt: number; deleted: boolean };
+export type Notebook = { version: 1; notes: Note[]; selectedId: string | null; theme?: Theme; windows?: SavedWindow[] };
+export function decodeNotebook(value: unknown): Notebook {
+  const data = value as Notebook;
+  if (data?.version !== 1 || !Array.isArray(data.notes) || !data.notes.every(note => note && typeof note.id === "string" && typeof note.text === "string" && Number.isFinite(note.updatedAt) && typeof note.deleted === "boolean") || new Set(data.notes.map(note => note.id)).size !== data.notes.length || (data.selectedId !== null && typeof data.selectedId !== "string")) throw new Error("Unsupported notes format");
+  if (data.theme !== undefined && !["system", "light", "dark"].includes(data.theme)) throw new Error("Unsupported theme");
+  decodeWindows(data.windows);
+  return data;
+}
+export type NotesState = Notebook & { ready: boolean; dirty: boolean; saving: boolean; error: string | null; recovered: boolean };
+export class NotesModel {
+  private state: NotesState = { version: 1, notes: [], selectedId: null, ready: false, dirty: false, saving: false, error: null, recovered: false };
+  private listeners = new Set<() => void>();
+  private timer: ReturnType<typeof setTimeout> | undefined;
+  private revision = 0;
+  private loading?: Promise<void>;
+  private saving?: Promise<boolean>;
+  constructor(private records: { load(): Promise<{ value: Notebook | null; recovered: boolean }>; save(value: Notebook): Promise<void> }) {}
+  subscribe = (listener: () => void) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; };
+  getSnapshot = () => this.state;
+  private update(patch: Partial<NotesState>) { this.state = { ...this.state, ...patch }; for (const listener of this.listeners) listener(); }
+  load = () => this.loading ??= (async () => {
+    try { const saved = await this.records.load(); this.update({ ...saved.value, ready: true, recovered: saved.recovered }); }
+    catch (error) { this.update({ error: String(error) }); }
+  })();
+  private change(patch: Partial<Notebook>) {
+    if (!this.state.ready) return;
+    this.revision++; this.update({ ...patch, dirty: true });
+    clearTimeout(this.timer); this.timer = setTimeout(() => { void this.flush(); }, 250);
+  }
+  setTheme = (theme: Theme) => { if (theme !== (this.state.theme ?? "system")) this.change({ theme }); };
+  setWindows = (windows: SavedWindow[]) => { if (JSON.stringify(windows) !== JSON.stringify(this.state.windows ?? [])) this.change({ windows }); };
+  create = (text = "") => {
+    if (!this.state.ready) return;
+    const id = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+    this.change({ notes: [{ id, text, updatedAt: Date.now(), deleted: false }, ...this.state.notes], selectedId: id });
+    return id;
+  };
+  select = (selectedId: string | null) => { if (selectedId !== this.state.selectedId) this.change({ selectedId }); };
+  edit = (id: string, text: string) => {
+    const note = this.state.notes.find(item => item.id === id);
+    if (!note || note.text === text || note.deleted) return;
+    this.change({ notes: this.state.notes.map(item => item.id === id ? { ...item, text, updatedAt: Date.now() } : item) });
+  };
+  setDeleted = (id: string, deleted: boolean) => this.change({ notes: this.state.notes.map(note => note.id === id ? { ...note, deleted, updatedAt: Date.now() } : note), selectedId: this.state.selectedId === id && deleted ? null : this.state.selectedId });
+  flush = (): Promise<boolean> => {
+    clearTimeout(this.timer);
+    if (this.saving) return this.saving.then(ok => ok ? this.flush() : false);
+    if (!this.state.ready) return Promise.resolve(false);
+    if (!this.state.dirty) return Promise.resolve(true);
+    const revision = this.revision;
+    const { notes, selectedId, theme, windows } = this.state;
+    this.update({ saving: true, error: null });
+    this.saving = this.records.save({ version: 1, notes, selectedId, theme, windows }).then(() => {
+      this.update({ dirty: revision !== this.revision }); return true;
+    }, error => { this.update({ error: String(error) }); return false; }).finally(() => { this.saving = undefined; this.update({ saving: false }); });
+    return this.saving.then(ok => ok && this.state.dirty ? this.flush() : ok);
+  };
+}
+export const title = (note: Note) => note.text.split("\n").find(line => line.trim())?.replace(/^#+\s*/, "").slice(0, 80) || "Untitled note";

package/templates/notes-lite/search.ts

@@ -0,0 +1,3 @@
+const listeners = new Set<() => void>();
+export function requestSearch() { for (const listener of listeners) listener(); }
+export function onSearch(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; }

package/templates/notes-lite/session.ts

@@ -0,0 +1,15 @@
+export type Theme = "system" | "light" | "dark";
+export type Frame = { displayId: string; x: number; y: number; width: number; height: number };
+export type SavedWindow = { id: string; noteId?: string; frame: Frame };
+export function decodeWindows(value: unknown): SavedWindow[] {
+  if (value === undefined) return [];
+  if (!Array.isArray(value) || !value.every(item => item && typeof item.id === "string" && /^(main|settings|note-[a-zA-Z0-9_-]+)$/.test(item.id) && (item.noteId === undefined || typeof item.noteId === "string") && item.frame && typeof item.frame.displayId === "string" && item.frame.displayId.length > 0 && ["x", "y", "width", "height"].every(key => Number.isFinite(item.frame[key])) && item.frame.width >= 100 && item.frame.height >= 100 && item.frame.width <= 20000 && item.frame.height <= 20000) || new Set(value.map(item => item.id)).size !== value.length) throw new Error("Unsupported window session");
+  return value;
+}
+/** Saved bounds and work areas use the same display-relative logical units. */
+export function fitFrame(frame: Frame, workAreas: Frame[]): Frame {
+  if (!workAreas.length) return frame;
+  const area = workAreas.find(area => area.displayId === frame.displayId) ?? workAreas[0];
+  const width = Math.min(frame.width, area.width), height = Math.min(frame.height, area.height);
+  return { displayId: area.displayId, x: Math.max(area.x, Math.min(frame.x, area.x + area.width - width)), y: Math.max(area.y, Math.min(frame.y, area.y + area.height - height)), width, height };
+}

package/templates/notes-lite/store.ts

@@ -0,0 +1,4 @@
+import { records } from "./shared/storage";
+import { decodeNotebook, NotesModel } from "./model";
+export const notes = new NotesModel(records("notes", decodeNotebook));
+export const dirty = () => notes.getSnapshot().dirty;

package/templates/notes-lite/window-session.ts

@@ -0,0 +1,63 @@
+import { fitFrame, type Frame, type SavedWindow } from "./session";
+import type { NotesModel } from "./model";
+export type WindowHost = {
+  list(): Promise<{ id: string; frame: Frame }[]>;
+  workAreas(): Promise<Frame[]>;
+  open(window: SavedWindow): Promise<unknown>;
+  show(id: string): Promise<unknown>;
+  frame(id: string, frame: Frame): Promise<unknown>;
+};
+/** One controller per JS runtime; all React windows share its session and writer. */
+export class WindowSession {
+  private noteIds = new Map<string, string>();
+  private restored?: Promise<void>;
+  private quitting = false;
+  private queue: Promise<void> = Promise.resolve();
+  constructor(private notes: NotesModel, private host: WindowHost) {}
+  known = (id: string) => id === "main" || id === "settings" || this.noteIds.has(id);
+  async openNote(noteId: string) {
+    await this.restore();
+    const id = `note-${noteId}`;
+    this.noteIds.set(id, noteId);
+    if ((await this.host.list()).some(window => window.id === id)) await this.host.show(id);
+    else await this.host.open({ id, noteId, frame: fitFrame({ displayId: "", x: 0, y: 0, width: 700, height: 600 }, await this.host.workAreas()) });
+    await this.capture();
+  }
+  async openSettings() {
+    await this.restore();
+    if ((await this.host.list()).some(window => window.id === "settings")) await this.host.show("settings");
+    else await this.host.open({ id: "settings", frame: fitFrame({ displayId: "", x: 0, y: 0, width: 460, height: 360 }, await this.host.workAreas()) });
+    await this.capture();
+  }
+  capture = () => {
+    const task = this.queue.then(async () => {
+      if (this.quitting) return;
+      const windows = await this.host.list();
+      this.notes.setWindows(windows.filter(window => this.known(window.id)).map(window => ({ id: window.id, noteId: this.noteIds.get(window.id), frame: window.frame })));
+    });
+    this.queue = task.catch(() => {});
+    return task;
+  };
+  restore = () => this.restored ??= (async () => {
+    await this.notes.load();
+    if (!this.notes.getSnapshot().ready) return;
+    const saved = [...(this.notes.getSnapshot().windows ?? [])];
+    const areas = await this.host.workAreas();
+    for (const window of saved) {
+      if (window.id !== "main" && window.id !== "settings" && !this.notes.getSnapshot().notes.some(note => note.id === window.noteId && !note.deleted)) continue;
+      if (window.noteId) this.noteIds.set(window.id, window.noteId);
+      const frame = fitFrame(window.frame, areas);
+      if (window.id !== "main" && !(await this.host.list()).some(item => item.id === window.id)) await this.host.open({ ...window, frame });
+      await this.host.frame(window.id, frame);
+    }
+    await this.capture();
+  })();
+  quit = async () => {
+    await this.restore();
+    await this.capture();
+    const ok = await this.notes.flush();
+    // Native quit may close windows individually. Keep their last complete session.
+    if (ok) this.quitting = true;
+    return ok;
+  };
+}

package/templates/universal/.claude/skills/spark/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: spark
+description: Develop, build, diagnose, or upgrade a Legend Spark desktop app.
+---
+
+<!-- spark:skill:start -->
+From the app root, read [Spark's app development skill](node_modules/@legendapp/spark/skills/spark/SKILL.md) before working on this app.
+The installed Spark version owns these instructions; do not copy them here.
+<!-- spark:skill:end -->

package/templates/universal/AGENTS.md

@@ -0,0 +1,4 @@
+<!-- spark:skill:start -->
+From the app root, read [Spark's app development skill](node_modules/@legendapp/spark/skills/spark/SKILL.md) before working on this app.
+The installed Spark version owns these instructions; do not copy them here.
+<!-- spark:skill:end -->

package/templates/universal/App.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Uniwind } from "uniwind";
+import { ScrollView, Text, View } from "react-native";
+import { Button, TextInput, Select } from "@legendapp/spark/ui/uniwind";
+import * as Clipboard from "@legendapp/spark/clipboard";
+import * as SecureStore from "@legendapp/spark/secure-storage";
+import * as Linking from "@legendapp/spark/links";
+
+const themes = [{ label: "System", value: "system" }, { label: "Light", value: "light" }, { label: "Dark", value: "dark" }];
+
+export default function Settings() {
+  const [name, setName] = useState("");
+  const [theme, setTheme] = useState("system");
+  const [status, setStatus] = useState("Preferences are held in memory for this demo.");
+  const [busy, setBusy] = useState(false);
+  async function action(work: () => Promise<string>) {
+    setBusy(true);
+    try { setStatus(await work()); } catch (error) { setStatus(error instanceof Error ? error.message : String(error)); }
+    finally { setBusy(false); }
+  }
+  function changeTheme(value: string) {
+    if (value !== "system" && value !== "light" && value !== "dark") return;
+    Uniwind.setTheme(value);
+    setTheme(value);
+  }
+  return <ScrollView contentInsetAdjustmentBehavior="always" className="flex-1 bg-background" contentContainerClassName="grow items-center p-4 sm:p-6">
+    <View className="w-full max-w-2xl gap-3 rounded-xl border border-border bg-surface p-4 sm:p-6" testID="settings-panel">
+      <Text accessibilityRole="header" className="text-3xl font-semibold text-foreground">Settings</Text>
+      <Text className="text-base text-muted">One screen shared across mobile, web, and desktop.</Text>
+      <Text className="mt-2 text-base font-semibold text-foreground">Display name</Text>
+      <TextInput accessibilityLabel="Display name" defaultValue="" onChangeText={setName} className="w-full" testID="settings-name" />
+      <Text className="mt-2 text-base font-semibold text-foreground">Appearance preference</Text>
+      <Select accessibilityLabel="Appearance preference" options={themes} value={theme} onValueChange={changeTheme} className="w-full" testID="settings-theme" />
+      <Text className="text-base text-muted">Hello {name || "there"}. Preferred appearance: {theme}.</Text>
+      <View className="mt-3 flex-row flex-wrap gap-3">
+        <Button className="w-full sm:w-56" disabled={busy} onPress={() => void action(async () => {
+          if (!await Clipboard.setStringAsync(JSON.stringify({ name, theme }))) throw new Error("The browser did not permit clipboard access.");
+          return "Copied preferences.";
+        })}>Copy preferences</Button>
+        <Button className="w-full sm:w-56" disabled={busy} onPress={() => void action(async () => {
+          if (!await SecureStore.isAvailableAsync()) return "Secure storage is unavailable on this platform.";
+          const key = `settings-demo-${Date.now()}`;
+          // A disposable synthetic value; no real credentials are entered or displayed.
+          try {
+            await SecureStore.setItemAsync(key, "demo");
+            if (await SecureStore.getItemAsync(key) !== "demo") throw new Error("Secure storage check failed.");
+            return "Secure storage verified; demo value removed.";
+          } finally { await SecureStore.deleteItemAsync(key); }
+        })}>Check secure storage</Button>
+        <Button className="w-full sm:w-56" disabled={busy} onPress={() => void action(async () => {
+          await Linking.openURL("https://legendapp.com"); return "Opened the Legend website.";
+        })}>Open Legend website</Button>
+      </View>
+      <Text accessibilityLiveRegion="polite" className="mt-3 text-sm text-foreground" testID="settings-status">{status}</Text>
+    </View>
+  </ScrollView>;
+}

package/templates/universal/CLAUDE.md

@@ -0,0 +1,4 @@
+<!-- spark:skill:start -->
+From the app root, read [Spark's app development skill](node_modules/@legendapp/spark/skills/spark/SKILL.md) before working on this app.
+The installed Spark version owns these instructions; do not copy them here.
+<!-- spark:skill:end -->

package/templates/universal/README.md

@@ -0,0 +1,15 @@
+# Spark app
+
+Run the app with `macos` using your chosen package manager:
+
+```sh
+npm run macos
+```
+
+macOS opens in Spark Runner. Windows requires a custom development build and is
+an unverified preview. JavaScript edits use Fast Refresh. Use `npm run build` for
+a standalone macOS app; native builds require Xcode and CocoaPods.
+
+Use the equivalent `bun run`, `pnpm run`, or `yarn` commands for those managers.
+See [Spark documentation](https://legend.so/spark) for configuration, upgrades,
+platform prerequisites, and distribution.