uicastbeta

import z from "zod";
import { createComponentDefinition } from "@uicast/core";
 
export const CounterDef = createComponentDefinition({
  name: "Counter",
  description: "A button that shows a number and increments it on each click.",
  props: z.object({
    count: z.number().default(0).meta({ description: "The number to display" }),
  }),
  callbacks: {
    onClick: z.null().meta({ description: "Fires when the counter is pressed" }),
  },
});

import { createComponentImplementation } from "@uicast/react";
import { Button } from "@/components/ui/button";
import { CounterDef } from "./def";
 
export const CounterImpl = createComponentImplementation({
  def: CounterDef,
  render: ({ count, onClick }) => (
    <Button variant="outline" onClick={() => onClick()}>
      Count: {count}
    </Button>
  ),
});

import { Evaluator } from "@uicast/expr";
import { EntriesRenderer, RendererProvider } from "@uicast/react";
import { CounterImpl } from "./impl";
import counterEntries from "./entries.json";
 
const implementations = [CounterImpl];
const evaluator = new Evaluator();
 
export function Counter() {
  return (
    <RendererProvider implementations={implementations} evaluator={evaluator}>
      <EntriesRenderer entries={counterEntries} />
    </RendererProvider>
  );
}

import z from "zod";
import { createComponentDefinition } from "@uicast/core";
 
export const TrackPadDef = createComponentDefinition({
  name: "TrackPad",
  description: "A square surface that reports the pointer position while hovered or pressed.",
  props: z.object({
    x: z.number().optional().meta({ description: "Pointer x, in px from the left edge" }),
    y: z.number().optional().meta({ description: "Pointer y, in px from the top edge" }),
  }),
  callbacks: {
    onMove: z
      .object({
        x: z.number().meta({ description: "Pointer x inside the square" }),
        y: z.number().meta({ description: "Pointer y inside the square" }),
      })
      .meta({ description: "Fires on every pointer move over the square" }),
    onLeave: z.null().meta({ description: "Fires when the pointer leaves" }),
  },
});

import { createComponentImplementation } from "@uicast/react";
import { Card, CardContent } from "@/components/ui/card";
import { TrackPadDef } from "./def";
 
export const TrackPadImpl = createComponentImplementation({
  def: TrackPadDef,
  render: ({ x, y, onMove, onLeave }) => (
    <Card className="w-55">
      <CardContent
        className="relative grid h-40 cursor-crosshair touch-none place-items-center select-none"
        onPointerMove={(e) => {
          const rect = e.currentTarget.getBoundingClientRect();
          onMove({
            x: Math.round(e.clientX - rect.left),
            y: Math.round(e.clientY - rect.top),
          });
        }}
        onPointerLeave={() => onLeave()}
      >
        {x === undefined || y === undefined ? (
          <span className="text-sm text-muted-foreground">Hover or tap here</span>
        ) : (
          <>
            <span className="font-mono text-sm">
              x: {x} · y: {y}
            </span>
            <span
              className="pointer-events-none absolute size-1.5 -translate-1/2 rounded-full bg-foreground"
              style={{ left: x, top: y }}
            />
          </>
        )}
      </CardContent>
    </Card>
  ),
});

import { Evaluator } from "@uicast/expr";
import { EntriesRenderer, RendererProvider } from "@uicast/react";
import { TrackPadImpl } from "./impl";
import trackerEntries from "./entries.json";
 
const implementations = [TrackPadImpl];
const evaluator = new Evaluator();
 
export function Tracker() {
  return (
    <RendererProvider implementations={implementations} evaluator={evaluator}>
      <EntriesRenderer entries={trackerEntries} />
    </RendererProvider>
  );
}

import z from "zod";
import { createComponentDefinition } from "@uicast/core";
 
export const WeatherCardDef = createComponentDefinition({
  name: "WeatherCard",
  description: "Shows the weather for a selectable city.",
  props: z.object({
    city: z.string().meta({ description: "The selected city" }),
    tempC: z.number().optional().meta({ description: "Temperature, °C" }),
    condition: z.string().optional().meta({ description: "Sky condition" }),
  }),
  callbacks: {
    onCity: z
      .object({ city: z.string().meta({ description: "The newly picked city" }) })
      .meta({ description: "Fires when the user picks a city" }),
  },
});

import { createComponentImplementation } from "@uicast/react";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { WeatherCardDef } from "./def";
 
const CITIES = ["Amsterdam", "Tokyo", "Oslo"];
 
export const WeatherCardImpl = createComponentImplementation({
  def: WeatherCardDef,
  render: ({ city, tempC, condition, onCity }) => (
    <Card className="w-55">
      <CardContent className="grid gap-3 text-center">
        <Select value={city} onValueChange={(value) => onCity({ city: value })}>
          <SelectTrigger size="sm" className="justify-self-center">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {CITIES.map((name) => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {tempC === undefined ? (
          <div className="text-sm text-muted-foreground">Loading…</div>
        ) : (
          <>
            <div className="text-3xl font-semibold">{tempC}°C</div>
            <div className="text-sm text-muted-foreground">{condition}</div>
          </>
        )}
      </CardContent>
    </Card>
  ),
});

import z from "zod";
import { standardTool } from "standard-tool";
 
const LATENCY_MS = 500;
 
const TABLE: Record<string, { tempC: number; condition: string }> = {
  Amsterdam: { tempC: 14, condition: "Drizzle" },
  Tokyo: { tempC: 24, condition: "Clear" },
  Oslo: { tempC: 8, condition: "Cloudy" },
};
 
export const getWeather = standardTool({
  name: "getWeather",
  description: "Current weather for a city.",
  inputSchema: z.object({
    city: z.string().meta({ description: "City name" }),
  }),
  outputSchema: z.object({
    tempC: z.number().meta({ description: "Temperature, °C" }),
    condition: z.string().meta({ description: "One-word sky condition" }),
  }),
  async execute({ city }) {
    await new Promise((resolve) => setTimeout(resolve, LATENCY_MS));
    return TABLE[city] ?? { tempC: 20, condition: "Unknown" };
  },
});

import { Evaluator } from "@uicast/expr";
import { EntriesRenderer, RendererProvider } from "@uicast/react";
import { WeatherCardImpl } from "./impl";
import { getWeather } from "./tools";
import weatherEntries from "./entries.json";
 
const implementations = [WeatherCardImpl];
const evaluator = new Evaluator({ functions: [getWeather] });
 
export function Weather() {
  return (
    <RendererProvider implementations={implementations} evaluator={evaluator}>
      <EntriesRenderer entries={weatherEntries} />
    </RendererProvider>
  );
}