bleam 0.0.11 → 0.0.13

package/dist/state.d.ts

@@ -1,159 +1,164 @@
-import { a as FieldValue, f as SchemaOutput, l as SchemaInput, m as SchemaShape, t as BleamSchema } from "./schema-CYh6n8GS.js";
+import { A as array, C as SchemaOutput, E as SchemaShape, F as number, I as object, P as literal, R as string, _ as ObjectField, b as SchemaInput, c as FieldPath, j as boolean, k as ValueAtFieldPath, s as FieldOutput, w as SchemaPatch } from "./schema-LxnzAfgw.js";
+import "jotai/vanilla";
 
 //#region src/state/atom.d.ts
-type Listener = () => void;
-interface Store<Value> {
-  get(): Value;
-  subscribe(listener: Listener): () => void;
+declare const atomValue: unique symbol;
+declare const atomWrite: unique symbol;
+interface Atom<Value> {
+  readonly [atomValue]: Value;
 }
-interface WritableStore<Value> extends Store<Value> {
-  set(value: Value): void;
-  update(updater: (value: Value) => Value): void;
-}
-declare class LiveStore<Value> implements WritableStore<Value> {
-  private value;
-  private listeners;
-  constructor(value: Value);
-  get(): Value;
-  set(value: Value): void;
-  update(updater: (value: Value) => Value): void;
-  subscribe(listener: Listener): () => void;
+interface WritableAtom<Value, Args$1 extends unknown[], Result$1> extends Atom<Value> {
+  readonly [atomWrite]: {
+    args: Args$1;
+    result: Result$1;
+  };
 }
-type Atom<Value> = WritableStore<Value>;
-type SetStoreValue<Value> = (value: Value | ((current: Value) => Value)) => void;
-declare function atom<Value>(initialValue: Value): Atom<Value>;
-declare function useStore<Value>(store: Store<Value>): Value;
-declare function useAtom<Value>(value: Atom<Value>): readonly [Value, SetStoreValue<Value>];
+type SetStateAction<Value> = Value | ((current: Value) => Value);
+type PrimitiveAtom<Value> = WritableAtom<Value, [SetStateAction<Value>], void>;
+type Getter = <Value>(value: Atom<Value>) => Value;
+type Setter = <Value, Args$1 extends unknown[], Result$1>(value: WritableAtom<Value, Args$1, Result$1>, ...args: Args$1) => Result$1;
+type AtomOptions = {
+  storage?: string;
+};
+declare function atom<Value, Args$1 extends unknown[], Result$1>(read: (get: Getter) => Value, write: (get: Getter, set: Setter, ...args: Args$1) => Result$1): WritableAtom<Value, Args$1, Result$1>;
+declare function atom<Value>(read: (get: Getter) => Value): Atom<Value>;
+declare function atom<Value>(initialValue: Value, options?: AtomOptions): PrimitiveAtom<Value>;
+declare function useAtomValue<Value>(value: Atom<Value>): Awaited<Value>;
+declare function useSetAtom<Value, Args$1 extends unknown[], Result$1>(value: WritableAtom<Value, Args$1, Result$1>): (...args: Args$1) => Result$1;
+declare function useAtom<Value, Args$1 extends unknown[], Result$1>(value: WritableAtom<Value, Args$1, Result$1>): [Awaited<Value>, (...args: Args$1) => Result$1];
 //#endregion
 //#region src/state/collection.d.ts
-type FieldRecord = Record<string, FieldValue | undefined>;
-type CollectionFields<Shape extends SchemaShape> = SchemaOutput<Shape>;
-type CollectionInput<Shape extends SchemaShape> = SchemaInput<Shape>;
-type CollectionData<Shape extends SchemaShape> = CollectionFields<Shape>;
-type CollectionFieldKey<Shape extends SchemaShape> = Extract<keyof Shape, string>;
-type CollectionFieldValue<Shape extends SchemaShape, Key extends CollectionFieldKey<Shape>> = Key extends keyof CollectionData<Shape> ? CollectionData<Shape>[Key] : undefined;
-type Entry<Value> = {
-  value: Value | undefined;
-  error: unknown;
-  promise: Promise<unknown> | null;
-  version: number;
-  listeners: Set<Listener>;
-};
-type RawCollectionView = {
-  id: string;
-  collection: string;
-  createdAt: string;
-  updatedAt: string;
-  data: FieldRecord;
-  links: Record<string, string[]>;
-};
-type RecordEntry = Entry<RawCollectionView | null>;
-type ListEntry = Entry<string[]> & {
-  dependencies: ListDependencies;
-};
-type CollectionReference = {
-  readonly name: string;
-  get(id: string): Promise<unknown>;
+declare const collectionBrand: unique symbol;
+type AnyShape = SchemaShape;
+type AnyCollection = CollectionAtom<AnyShape>;
+type Scalar = string | number | boolean;
+type MaybePromise<Value> = Value | Promise<Value>;
+type Order = 'asc' | 'desc';
+type Comparison = 'equals' | 'greater-than' | 'less-than' | 'contains';
+type ComparisonFor<Value> = Value extends number ? Exclude<Comparison, 'contains'> : Value extends string ? 'equals' | 'contains' : 'equals';
+type WhereClauseValue<Value> = Value | readonly [ComparisonFor<Value>, Value] | ReadonlyArray<readonly [ComparisonFor<Value>, Value]>;
+type ScalarFieldPath<Shape extends SchemaShape> = { [Key in Extract<keyof Shape, string>]: Shape[Key] extends {
+  kind: 'object';
+  shape: infer Nested extends SchemaShape;
+} ? `${Key}.${ScalarFieldPath<Nested>}` : Shape[Key] extends {
+  kind: 'array';
+} ? never : Key }[Extract<keyof Shape, string>];
+type ScalarAtPath<Shape extends SchemaShape, Path$1 extends ScalarFieldPath<Shape>> = Path$1 extends `${infer Key}.${infer Rest}` ? Key extends keyof Shape ? Shape[Key] extends ObjectField<infer Nested> ? Rest extends ScalarFieldPath<Nested> ? ScalarAtPath<Nested, Rest> : never : never : never : Path$1 extends keyof Shape ? Extract<FieldOutput<Shape[Path$1]>, Scalar> : never;
+type CollectionRow<Shape extends SchemaShape> = {
+  readonly id: string;
+  readonly collection: string;
+  readonly version: number;
+  readonly createdAt: string;
+  readonly updatedAt: string;
+  readonly data: SchemaOutput<Shape>;
+  readonly links: Readonly<Record<string, readonly string[]>>;
 };
-type ViewOptions = {
-  links?: CollectionReference[];
+interface CollectionAtom<Shape extends SchemaShape> extends Atom<Promise<readonly string[]>> {
+  readonly [collectionBrand]: Shape;
+}
+declare class CollectionVersionConflictError extends Error {
+  readonly collection: string;
+  readonly id: string;
+  readonly expectedVersion: number;
+  readonly actualVersion: number;
+  readonly name = "CollectionVersionConflictError";
+  constructor(collection: string, id: string, expectedVersion: number, actualVersion: number);
+}
+type UpdateOptions = {
+  ifVersion?: number;
 };
-type ListWhereValue = FieldValue | ['equals' | 'greater-than' | 'less-than' | 'contains', FieldValue] | Array<['equals' | 'greater-than' | 'less-than' | 'contains', FieldValue]>;
-type ListOptions<Shape extends SchemaShape> = {
-  where?: Partial<Record<CollectionFieldKey<Shape>, ListWhereValue>>;
-  sortBy?: CollectionFieldKey<Shape> | 'createdAt' | 'updatedAt';
-  order?: 'asc' | 'desc';
-  take?: number;
+type RowOptions = {
+  links?: readonly AnyCollection[];
 };
-type NormalizedListOptions = {
-  where?: Record<string, Array<[string, FieldValue]>>;
-  sortBy?: string;
-  order?: 'asc' | 'desc';
-  take?: number;
+type CollectionWhere<Shape extends SchemaShape> = Partial<{ [Path in ScalarFieldPath<Shape>]: WhereClauseValue<ScalarAtPath<Shape, Path>> }>;
+type WhereClause = {
+  path: string;
+  comparison: Comparison;
+  operand: Scalar;
 };
-type RecordChange = {
-  collection: string;
-  id: string;
-  previous: RawCollectionView | null;
-  next: RawCollectionView | null;
-  changedPaths: Set<string>;
-};
-type EdgeChange = {
-  type: 'link' | 'unlink';
-  left: {
+type QueryPlan = {
+  terminal: 'ids' | 'row' | 'field';
+  where: WhereClause[];
+  from?: {
     collection: string;
     id: string;
   };
-  right: {
-    collection: string;
-    id: string;
+  sort?: {
+    path: string;
+    order: Order;
   };
+  take?: number;
+  id?: string;
+  path?: string;
+  links?: string[];
 };
-type ListDependencies = {
-  collection: string;
-  paths: Set<string>;
-  options: NormalizedListOptions;
+type QueryTerminal<Shape extends SchemaShape, Result$1> = {
+  readonly plan: QueryPlan;
+  readonly result?: Result$1;
+  readonly shape?: Shape;
 };
-type CollectionView<Shape extends SchemaShape> = {
-  readonly id: string;
-  readonly collection: string;
-  readonly createdAt: string;
-  readonly updatedAt: string;
-  readonly data: CollectionData<Shape>;
-  readonly links: Record<string, string[]>;
+interface QueryBuilder<Shape extends SchemaShape> {
+  where(filters: CollectionWhere<Shape>): QueryBuilder<Shape>;
+  from<OtherShape extends SchemaShape>(other: CollectionAtom<OtherShape>, id: string): QueryBuilder<Shape>;
+  sortBy(path: ScalarFieldPath<Shape> | 'createdAt' | 'updatedAt', order?: Order): QueryBuilder<Shape>;
+  take(count: number): QueryBuilder<Shape>;
+  ids(): QueryTerminal<Shape, readonly string[]>;
+  row(id: string, options?: RowOptions): QueryTerminal<Shape, CollectionRow<Shape> | null>;
+  field<Path$1 extends FieldPath<Shape>>(id: string, path: Path$1): QueryTerminal<Shape, ValueAtFieldPath<Shape, Path$1> | undefined>;
+}
+type InsertTerminal<Shape extends SchemaShape> = {
+  kind: 'insert';
+  args: [SchemaInput<Shape>];
+  result: string;
 };
-declare class Collection<Shape extends SchemaShape> {
-  readonly name: string;
-  readonly shape: Shape;
-  readonly validator: BleamSchema<SchemaInput<Shape>, SchemaOutput<Shape>>;
-  private records;
-  private lists;
-  private fields;
-  constructor(name: string, shape: Shape);
-  validateListOptions(options?: ListOptions<Shape>): void;
-  getRecordEntry(id: string): RecordEntry;
-  getListEntry(options?: ListOptions<Shape>): ListEntry;
-  private getFieldEntry;
-  private notifyFields;
-  private setRecordValue;
-  private rawRecord;
-  private loadRecord;
-  private loadListRows;
-  private selectListRows;
-  private applyListOptions;
-  private refreshListEntry;
-  invalidateChanges(recordChanges: RecordChange[], edgeChanges?: EdgeChange[]): Promise<void>;
-  private refreshLoadedLinks;
-  private peekRecord;
-  insert(value: CollectionInput<Shape>): Promise<string>;
-  update(id: string, value: Partial<CollectionInput<Shape>>): Promise<void>;
-  delete(id: string): Promise<void>;
-  all(): Promise<CollectionView<Shape>[]>;
-  get(id: string): Promise<CollectionView<Shape> | null>;
-  subscribeRecord(id: string, listener: Listener): () => void;
-  subscribeList(options: ListOptions<Shape> | undefined, listener: Listener): () => void;
-  subscribeField(id: string, path: string, listener: Listener): () => void;
-  getRecordVersion(id: string): number;
-  getListVersion(options?: ListOptions<Shape>): number;
-  getFieldVersion(id: string, path: string): number;
-  getRecordSnapshot(id: string, options?: ViewOptions): CollectionView<Shape> | null | undefined;
-  getListSnapshot(options?: ListOptions<Shape>): string[] | undefined;
-  ensureRecord(id: string, options?: ViewOptions): Promise<RawCollectionView | null>;
-  ensureList(options?: ListOptions<Shape>): Promise<string[]>;
-  private deleteLinksForRecord;
+type UpdateTerminal<Shape extends SchemaShape> = {
+  kind: 'update';
+  id: string;
+  args: [SchemaPatch<Shape>, UpdateOptions?];
+  result: CollectionRow<Shape>;
+};
+type RemoveTerminal = {
+  kind: 'remove';
+  id: string;
+  args: [];
+  result: boolean;
+};
+type LinkTerminal = {
+  kind: 'link' | 'unlink';
+  id: string;
+  other: AnyCollection;
+  args: [string];
+  result: boolean;
+};
+type MutationTerminal<Shape extends SchemaShape> = InsertTerminal<Shape> | UpdateTerminal<Shape> | RemoveTerminal | LinkTerminal;
+interface MutationBuilder<Shape extends SchemaShape> {
+  insert(): InsertTerminal<Shape>;
+  update(id: string): UpdateTerminal<Shape>;
+  remove(id: string): RemoveTerminal;
+  link<OtherShape extends SchemaShape>(id: string, other: CollectionAtom<OtherShape>): LinkTerminal;
+  unlink<OtherShape extends SchemaShape>(id: string, other: CollectionAtom<OtherShape>): LinkTerminal;
 }
-declare function collection<Shape extends SchemaShape>(name: string, shape: Shape): Collection<Shape>;
-declare function link<FirstShape extends SchemaShape, SecondShape extends SchemaShape>(firstCollection: Collection<FirstShape>, firstId: string, secondCollection: Collection<SecondShape>, secondId: string): Promise<void>;
-declare function unlink<FirstShape extends SchemaShape, SecondShape extends SchemaShape>(firstCollection: Collection<FirstShape>, firstId: string, secondCollection: Collection<SecondShape>, secondId: string): Promise<void>;
-declare function isLinked<FirstShape extends SchemaShape, SecondShape extends SchemaShape>(firstCollection: Collection<FirstShape>, firstId: string, secondCollection: Collection<SecondShape>, secondId: string): Promise<boolean>;
-declare function useList<Shape extends SchemaShape>(collection: Collection<Shape>, options?: ListOptions<Shape>): string[];
-declare function useView<Shape extends SchemaShape>(collection: Collection<Shape>, id: string, options?: ViewOptions): CollectionView<Shape> | null | undefined;
-declare function useField<Shape extends SchemaShape, Key extends CollectionFieldKey<Shape>>(collection: Collection<Shape>, id: string, key: Key): CollectionFieldValue<Shape, Key> | undefined;
-//#endregion
-//#region src/state/setting.d.ts
-type Setting<Value> = WritableStore<Value>;
-type SetSettingValue<Value> = SetStoreValue<Value>;
-declare function setting<Value extends string | number | boolean>(key: string, initialValue: Value): Setting<Value>;
-declare function useSetting<Value>(value: Setting<Value>): readonly [Value, SetStoreValue<Value>];
+type TerminalArgs<Terminal> = Terminal extends {
+  args: infer Args extends unknown[];
+} ? Args : never;
+type TerminalResult<Terminal> = Terminal extends {
+  result: infer Result;
+} ? Result : never;
+declare function atomCollection<const Shape extends SchemaShape>(name: string, shape: Shape): CollectionAtom<Shape>;
+declare function queryAtom<Shape extends SchemaShape, Result$1>(collection: CollectionAtom<Shape>, build: (builder: QueryBuilder<Shape>) => QueryTerminal<Shape, Result$1>): Atom<Promise<Result$1>>;
+declare function mutateAtom<Shape extends SchemaShape, Terminal extends MutationTerminal<Shape>>(collection: CollectionAtom<Shape>, build: (builder: MutationBuilder<Shape>) => Terminal): WritableAtom<null, TerminalArgs<Terminal>, Promise<TerminalResult<Terminal>>>;
+interface TransactionContext {
+  get<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, id: string, options?: RowOptions): Promise<CollectionRow<Shape> | null>;
+  query<Shape extends SchemaShape, Result$1>(collection: CollectionAtom<Shape>, build: (builder: QueryBuilder<Shape>) => QueryTerminal<Shape, Result$1>): Promise<Result$1>;
+  insert<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, value: SchemaInput<Shape>): Promise<string>;
+  update<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, id: string, patch: SchemaPatch<Shape>, options?: UpdateOptions): Promise<CollectionRow<Shape>>;
+  remove<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, id: string): Promise<boolean>;
+  link<LeftShape extends SchemaShape, RightShape extends SchemaShape>(collection: CollectionAtom<LeftShape>, id: string, other: CollectionAtom<RightShape>, otherId: string): Promise<boolean>;
+  unlink<LeftShape extends SchemaShape, RightShape extends SchemaShape>(collection: CollectionAtom<LeftShape>, id: string, other: CollectionAtom<RightShape>, otherId: string): Promise<boolean>;
+}
+declare function transactionAtom<Args$1 extends unknown[], Result$1>(action: (context: TransactionContext, ...args: Args$1) => MaybePromise<Result$1>): WritableAtom<null, Args$1, Promise<Result$1>>;
+declare function useList<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, build?: (builder: QueryBuilder<Shape>) => QueryTerminal<Shape, readonly string[]>): readonly string[];
+declare function useRow<Shape extends SchemaShape>(collection: CollectionAtom<Shape>, id: string, options?: RowOptions): CollectionRow<Shape> | null;
+declare function useField<Shape extends SchemaShape, Path$1 extends FieldPath<Shape>>(collection: CollectionAtom<Shape>, id: string, path: Path$1): ValueAtFieldPath<Shape, Path$1> | undefined;
 //#endregion
-export { Atom, Collection, CollectionView, ListOptions, Listener, LiveStore, SetSettingValue, SetStoreValue, Setting, Store, WritableStore, atom, collection, isLinked, link, setting, unlink, useAtom, useField, useList, useSetting, useStore, useView };
+export { type Atom, type AtomOptions, CollectionAtom, CollectionRow, CollectionVersionConflictError, CollectionWhere, type Getter, MutationBuilder, type PrimitiveAtom, QueryBuilder, RowOptions, type SetStateAction, type Setter, TransactionContext, UpdateOptions, type WritableAtom, array, atom, atomCollection, boolean, literal, mutateAtom, number, object, queryAtom, string, transactionAtom, useAtom, useAtomValue, useField, useList, useRow, useSetAtom };

package/dist/state.js

@@ -1,6 +1,7 @@
 import "./native-runtime-C85Nuc4F.js";
 import "./crypto-BB92-Upx.js";
-import { a as isLinked, c as useField, d as LiveStore, f as atom, i as collection, l as useList, m as useStore, n as useSetting, o as link, p as useAtom, r as Collection, s as unlink, t as setting, u as useView } from "./state-CAwe-Vw1.js";
-import "./schema-Bo5Jvqus.js";
+import "./app-storage-Isi5Bo0R.js";
+import { c as object, n as array, o as literal, r as boolean, s as number, u as string } from "./schema-B7ELMpuI.js";
+import { a as transactionAtom, c as useRow, h as useSetAtom, i as queryAtom, l as atom, m as useAtomValue, n as atomCollection, o as useField, p as useAtom, r as mutateAtom, s as useList, t as CollectionVersionConflictError } from "./state-DkaRFkZJ.js";
 
-export { Collection, LiveStore, atom, collection, isLinked, link, setting, unlink, useAtom, useField, useList, useSetting, useStore, useView };
+export { CollectionVersionConflictError, array, atom, atomCollection, boolean, literal, mutateAtom, number, object, queryAtom, string, transactionAtom, useAtom, useAtomValue, useField, useList, useRow, useSetAtom };

package/dist/window.d.cts

@@ -1,4 +1,4 @@
-import { p as SymbolName } from "./ui-1WepaMS4.cjs";
+import { n as SymbolName } from "./elements-CFk0QHw0.cjs";
 import * as react3 from "react";
 import { ComponentType } from "react";
 import { StyleProp, ViewStyle } from "react-native";

package/dist/window.d.ts

@@ -1,5 +1,5 @@
-import { p as SymbolName } from "./ui-CHc4xEs_.js";
-import * as react3 from "react";
+import { n as SymbolName } from "./elements-ClGQ41Sc.js";
+import * as react5 from "react";
 import { ComponentType } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 
@@ -55,7 +55,7 @@ type SidebarNavigatorConfig<Routes extends SidebarScreenMap> = {
   style?: StyleProp<ViewStyle>;
 };
 declare function createSidebarNavigator<const Routes extends SidebarScreenMap>(config: SidebarNavigatorConfig<Routes>): {
-  Navigator: () => react3.JSX.Element;
+  Navigator: () => react5.JSX.Element;
   useNavigation: () => SidebarNavigation<Routes>;
   useRoute: () => SidebarRouteState<Routes>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bleam",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "packageManager": "yarn@1.22.22",
   "type": "module",
   "files": [
@@ -35,6 +35,8 @@
     "@types/react": "~19.2.17",
     "expo": "57",
     "expo-splash-screen": "57.0.2",
+    "jotai": "2.20.2",
+    "jotai-family": "1.0.2",
     "react": "19.2.3",
     "react-native": "0.86.0",
     "tsx": "^4.21.0",
@@ -95,6 +97,11 @@
       "import": "./dist/dev-protocol.js",
       "require": "./dist/dev-protocol.cjs"
     },
+    "./elements": {
+      "types": "./dist/elements.d.ts",
+      "import": "./dist/elements.js",
+      "require": "./dist/elements.cjs"
+    },
     "./files": {
       "types": "./dist/files.d.ts",
       "import": "./dist/files.js",
@@ -115,6 +122,11 @@
       "import": "./dist/schema.js",
       "require": "./dist/schema.cjs"
     },
+    "./secrets": {
+      "types": "./dist/secrets.d.ts",
+      "import": "./dist/secrets.js",
+      "require": "./dist/secrets.cjs"
+    },
     "./state": {
       "types": "./dist/state.d.ts",
       "import": "./dist/state.js",
@@ -125,11 +137,6 @@
       "import": "./dist/styles.js",
       "require": "./dist/styles.cjs"
     },
-    "./ui": {
-      "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js",
-      "require": "./dist/ui.cjs"
-    },
     "./window": {
       "types": "./dist/window.d.ts",
       "import": "./dist/window.js",

package/templates/basic/app/index.tsx

@@ -1,6 +1,6 @@
+import { Button } from 'bleam/elements'
 import { atom, useAtom } from 'bleam/state'
 import { sx } from 'bleam/styles'
-import { Button } from 'bleam/ui'
 import { Toolbar, Window } from 'bleam/window'
 import { Text, View } from 'react-native'
 
@@ -125,7 +125,7 @@ export default function App() {
               </View>
 
               <Button
-                title={`Count is ${count}`}
+                label={`Count is ${count}`}
                 variant="secondary"
                 size="regular"
                 onPress={() => setCount((value) => value + 1)}

package/templates/foundation-models/app/index.tsx

@@ -1,32 +1,94 @@
-import { generate } from 'bleam/ai'
+import { chat, useChat, useChatList } from 'bleam/ai'
+import { Button } from 'bleam/elements'
 import { sx } from 'bleam/styles'
-import { Button } from 'bleam/ui'
 import { Window } from 'bleam/window'
-import { useState } from 'react'
-import { Text, View } from 'react-native'
+import { useEffect, useRef, useState } from 'react'
+import { Text, TextInput, View } from 'react-native'
 
 const appName = 'Bleam Basic'
 
 export default function App() {
-  const [answer, setAnswer] = useState('Ask the on-device model for an idea.')
+  const chats = useChatList()
+  const creating = useRef(false)
+  const [error, setError] = useState('')
 
-  async function ask() {
-    setAnswer('Thinking...')
-    try {
-      setAnswer(
-        await generate({ prompt: 'Suggest one useful native Mac app.' }),
+  useEffect(() => {
+    if (chats.length > 0 || creating.current) return
+    creating.current = true
+    void chat
+      .create({ title: 'App ideas' })
+      .catch((nextError) =>
+        setError(
+          nextError instanceof Error ? nextError.message : String(nextError),
+        ),
       )
-    } catch (error) {
-      setAnswer(error instanceof Error ? error.message : String(error))
-    }
-  }
+  }, [chats.length])
 
   return (
     <View style={sx('flex-1', 'p-8', 'gap-6')}>
       <Window title={appName} />
       <Text style={sx('text-3xl', 'font-semibold')}>Foundation Models</Text>
-      <Text style={sx('text-lg', 'text-secondary-label')}>{answer}</Text>
-      <Button title="Generate an idea" onPress={ask} />
+      <Text style={sx('text-secondary-label')}>
+        Chats persist on this Mac and use Apple Foundation Models by default.
+      </Text>
+      {error ? <Text style={sx('text-system-red')}>{error}</Text> : null}
+      {chats[0] ? (
+        <Conversation id={chats[0].id} />
+      ) : (
+        <Text>Creating chat...</Text>
+      )}
+    </View>
+  )
+}
+
+function Conversation({ id }: { id: string }) {
+  const conversation = useChat(id, {
+    system: 'You suggest practical, concise native Mac app ideas.',
+  })
+  const [prompt, setPrompt] = useState('Suggest one useful native Mac app.')
+  const latestAssistant = conversation.messages.findLast(
+    (message) => message.role === 'assistant',
+  )
+  const retryable =
+    latestAssistant?.status === 'failed' ||
+    latestAssistant?.status === 'canceled'
+      ? latestAssistant
+      : null
+
+  return (
+    <View style={sx('gap-4')}>
+      <TextInput
+        value={prompt}
+        onChangeText={setPrompt}
+        style={sx('rounded-xl', 'border', 'border-separator', 'p-4')}
+      />
+      <View style={sx('flex-row', 'gap-3')}>
+        <Button
+          label="Send"
+          loading={conversation.isGenerating}
+          disabled={!conversation.canSend}
+          onPress={() => void conversation.send(prompt)}
+        />
+        <Button
+          label="Cancel"
+          variant="secondary"
+          disabled={!conversation.canCancel}
+          onPress={() => void conversation.cancel()}
+        />
+        {retryable ? (
+          <Button
+            label="Retry"
+            variant="secondary"
+            onPress={() => void conversation.retry(retryable.id)}
+          />
+        ) : null}
+      </View>
+      {conversation.messages.map((message) => (
+        <Text key={message.id} style={sx('text-lg', 'text-label')}>
+          {message.role === 'user' ? 'You: ' : 'Assistant: '}
+          {message.content || message.status}
+        </Text>
+      ))}
     </View>
   )
 }

package/templates/image-generation/app/index.tsx

@@ -1,6 +1,6 @@
-import { bonsai, generateImage } from 'bleam/ai'
+import { bonsai, image } from 'bleam/ai'
+import { Button } from 'bleam/elements'
 import { sx } from 'bleam/styles'
-import { Button } from 'bleam/ui'
 import { Window } from 'bleam/window'
 import { useState } from 'react'
 import { Image, Text, View } from 'react-native'
@@ -15,7 +15,7 @@ export default function App() {
   async function create() {
     setStatus('Generating...')
     try {
-      const result = await generateImage({
+      const result = await image.generate({
         model,
         prompt: 'A precise editorial illustration of a small native Mac app',
         aspectRatio: '1:1',
@@ -35,7 +35,7 @@ export default function App() {
         <Image source={{ uri }} style={sx('w-96', 'h-96', 'rounded-xl')} />
       ) : null}
       <Text style={sx('text-secondary-label')}>{status}</Text>
-      <Button title="Generate image" onPress={create} />
+      <Button label="Generate image" onPress={create} />
     </View>
   )
 }