Concepts

import z from "zod";
import { createComponentDefinition } from "@uicast/core";
 
// card/def.ts
export const CardDef = createComponentDefinition({
  name: "Card",
  description: "A bordered container.",
});
 
// heading/def.ts
export const HeadingDef = createComponentDefinition({
  name: "Heading",
  description: "A section heading.",
  props: z.object({
    text: z.string().meta({ description: "The heading text" }),
  }),
});
 
// button/def.ts
export const ButtonDef = createComponentDefinition({
  name: "Button",
  description: "A click target.",
  props: z.object({
    label: z.string().meta({ description: "Button text" }),
  }),
  callbacks: {
    onClick: z.null().meta({ description: "Fires when pressed" }),
  },
});
 
// product-row/def.ts
export const ProductRowDef = createComponentDefinition({
  name: "ProductRow",
  description: "One product: its name, unit price, and an editable quantity.",
  props: z.object({
    name: z.string().meta({ description: "Product name" }),
    price: z.number().meta({ description: "Unit price, in dollars" }),
    qty: z.number().meta({ description: "Quantity in the cart" }),
  }),
  callbacks: {
    onQtyChange: z.object({
      value: z.number().meta({ description: "The new quantity" }),
    }),
    onEdit: z.null().meta({ description: "Fires when the edit button is pressed" }),
  },
});
 
// edit-dialog/def.ts
export const EditDialogDef = createComponentDefinition({
  name: "EditDialog",
  description: "A modal editing a product's name and unit price.",
  props: z.object({
    name: z.string().meta({ description: "The product name being edited" }),
    price: z.number().meta({ description: "The unit price being edited" }),
  }),
  callbacks: {
    onNameChange: z.object({
      value: z.string().meta({ description: "The new name" }),
    }),
    onPriceChange: z.object({
      value: z.number().meta({ description: "The new price" }),
    }),
    onSave: z.null().meta({ description: "Fires on Save" }),
    onCancel: z.null().meta({ description: "Fires on Cancel" }),
  },
});

import { createComponentImplementation } from "@uicast/react";
import { Button as UIButton } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ButtonDef, CardDef, EditDialogDef, HeadingDef, ProductRowDef } from "./def";
 
// card/impl.tsx
export const CardImpl = createComponentImplementation({
  def: CardDef,
  render: ({ children }, { loading }) => (
    <Card className={loading ? "w-72 animate-pulse opacity-60" : "w-72"} aria-busy={loading || undefined}>
      <CardContent className="grid gap-2">{children}</CardContent>
    </Card>
  ),
});
 
// heading/impl.tsx
export const HeadingImpl = createComponentImplementation({
  def: HeadingDef,
  render: ({ text }) => <div className="font-semibold">{text}</div>,
});
 
// button/impl.tsx
export const ButtonImpl = createComponentImplementation({
  def: ButtonDef,
  render: ({ label, onClick }) => (
    <UIButton variant="outline" size="sm" className="justify-self-start" onClick={() => onClick()}>
      {label}
    </UIButton>
  ),
});
 
// product-row/impl.tsx
export const ProductRowImpl = createComponentImplementation({
  def: ProductRowDef,
  render: ({ name, price, qty, onQtyChange, onEdit }) => (
    <div className="flex items-center gap-2 border-t pt-1 text-sm">
      <span className="truncate">{name}</span>
      <UIButton variant="ghost" size="sm" className="mr-auto h-6 px-1.5" onClick={() => onEdit()}>
        ✎
      </UIButton>
      <span className="w-12 text-right text-muted-foreground">${price} ×</span>
      <input
        type="number"
        min={0}
        value={qty}
        onChange={(e) => onQtyChange({ value: e.target.valueAsNumber || 0 })}
        className="w-14 rounded border bg-transparent px-1 py-0.5 text-right"
      />
    </div>
  ),
});
 
// edit-dialog/impl.tsx
export const EditDialogImpl = createComponentImplementation({
  def: EditDialogDef,
  render: ({ name, price, onNameChange, onPriceChange, onSave, onCancel }) => (
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/40">
      <div className="grid w-64 gap-2 rounded-lg border bg-background p-4 shadow-lg">
        <div className="font-semibold">Edit product</div>
        <input
          value={name}
          onChange={(e) => onNameChange({ value: e.target.value })}
          className="rounded border bg-transparent px-2 py-1 text-sm"
        />
        <div className="flex items-center gap-1 text-sm">
          <span className="text-muted-foreground">$</span>
          <input
            type="number"
            min={0}
            value={price}
            onChange={(e) => onPriceChange({ value: e.target.valueAsNumber || 0 })}
            className="flex-1 rounded border bg-transparent px-2 py-1"
          />
        </div>
        <div className="flex justify-end gap-2">
          <UIButton variant="outline" size="sm" onClick={() => onCancel()}>
            Cancel
          </UIButton>
          <UIButton size="sm" onClick={() => onSave()}>
            Save
          </UIButton>
        </div>
      </div>
    </div>
  ),
});

import z from "zod";
import { standardTool } from "standard-tool";
 
const LATENCY_MS = 350;
 
const PRODUCTS = [
  { id: 7, name: "Filter Papers", price: 8, qty: 5 },
  { id: 8, name: "Espresso Beans", price: 15, qty: 1 },
  { id: 9, name: "Pour-Over Kettle", price: 23, qty: 4 },
  { id: 10, name: "Ceramic Mug", price: 14, qty: 2 },
];
 
// Edits are per-id overrides in localStorage, so they survive a reload.
const KEY = "uicast-docs-products";
 
type Override = { name?: string; price?: number; qty?: number };
 
function readOverrides(): Record<string, Override> {
  try {
    return JSON.parse(localStorage.getItem(KEY) ?? "{}");
  } catch {
    return {};
  }
}
 
export const listProducts = standardTool({
  name: "listProducts",
  description: "The three most recently stocked products.",
  outputSchema: z.array(
    z.object({
      id: z.number().int().meta({ description: "Product id" }),
      name: z.string().meta({ description: "Product name" }),
      price: z.number().meta({ description: "Unit price, in dollars" }),
      qty: z.number().meta({ description: "Quantity in the cart" }),
    }),
  ),
  async execute() {
    await new Promise((resolve) => setTimeout(resolve, LATENCY_MS));
    // The list rotates on every call, so a refetch shows it change.
    PRODUCTS.push(...PRODUCTS.splice(0, 1));
    const overrides = readOverrides();
    return PRODUCTS.slice(0, 3).map((product) => ({ ...product, ...overrides[product.id] }));
  },
});
 
export const updateProduct = standardTool({
  name: "updateProduct",
  description: "Update one product's name, unit price, or quantity.",
  inputSchema: z.object({
    id: z.number().int().meta({ description: "Product id" }),
    name: z.string().optional().meta({ description: "New product name" }),
    price: z.number().optional().meta({ description: "New unit price" }),
    qty: z.number().optional().meta({ description: "New quantity" }),
  }),
  async execute({ id, name, price, qty }) {
    const overrides = readOverrides();
    overrides[id] = {
      ...overrides[id],
      ...(name !== undefined && { name }),
      ...(price !== undefined && { price }),
      ...(qty !== undefined && { qty }),
    };
    try {
      localStorage.setItem(KEY, JSON.stringify(overrides));
    } catch {
      // Storage unavailable (private mode) — the edit still lives in state.
    }
  },
});

import type { ComponentEntry } from "@uicast/core";
import { Evaluator } from "@uicast/expr";
import { type ConfirmComponentProps, EntriesRenderer, RendererProvider } from "@uicast/react";
import { Button } from "@/components/ui/button";
import { ButtonImpl, CardImpl, EditDialogImpl, HeadingImpl, ProductRowImpl } from "./impl";
import { listProducts, updateProduct } from "./tools";
 
const implementations = [CardImpl, HeadingImpl, ButtonImpl, ProductRowImpl, EditDialogImpl];
const evaluator = new Evaluator({ functions: [listProducts, updateProduct] });
 
// Without it the engine falls back to window.confirm.
const fallbackComponents = {
  confirm: ({ open, message, onConfirm, onCancel }: ConfirmComponentProps) =>
    open ? (
      <div className="fixed inset-0 z-[60] grid place-items-center bg-black/40">
        <div className="grid w-64 gap-3 rounded-lg border bg-background p-4 shadow-lg">
          <div className="text-sm">{message}</div>
          <div className="flex justify-end gap-2">
            <Button variant="outline" size="sm" onClick={onCancel}>
              Cancel
            </Button>
            <Button size="sm" onClick={onConfirm}>
              Confirm
            </Button>
          </div>
        </div>
      </div>
    ) : null,
};
 
export function Products({ entries }: { entries: ComponentEntry[] }) {
  return (
    <RendererProvider implementations={implementations} evaluator={evaluator} fallbackComponents={fallbackComponents}>
      <EntriesRenderer entries={entries} />
    </RendererProvider>
  );
}