///
import { CellLike, type JSONSchema, NAME, recipe, UI } from "commontools";
type IFrameRecipe = {
src: string;
argumentSchema: JSONSchema;
resultSchema: JSONSchema;
spec: string;
plan?: string;
goal?: string;
name: string;
};
const inst: IFrameRecipe = /* IFRAME-V0 */ {
"src":
'\n\n\n\n\n\n\n\n\n\n\n \n',
"spec":
"The counter charm displays a numeric value with adjacent increment and decrement buttons. Clicking the increment button increases the count by 1, while clicking the decrement button decreases it by 1. The counter displays the current value prominently in the center.",
"plan":
"1. Create the counter UI with a display area, increment button, and decrement button\n2. Implement increment/decrement functions that update the count value in state\n3. Add styling to make the counter visually appealing with clear buttons",
"goal": "make a counter with an inc/dec button",
"argumentSchema": {
"type": "object",
"properties": {
"count": {
"type": "integer",
"title": "Count",
"description": "The current counter value",
"default": 0,
},
},
"title": "Simple Counter Charm",
"description":
"A counter widget to track numeric values with increment and decrement buttons.",
},
"resultSchema": {
"type": "object",
"title": "Counter",
"description":
"A simple counter with increment and decrement functionality",
"properties": {
"count": {
"type": "integer",
"title": "Count",
"description": "The current counter value",
"default": 0,
},
},
"required": [
"count",
],
},
"name": "Simple Counter",
}; /* IFRAME-V0 */
const runIframeRecipe = (
{ argumentSchema, resultSchema, src, name }: IFrameRecipe,
) =>
recipe(argumentSchema, resultSchema, (data) => ({
[NAME]: name,
[UI]: }>,
count: data.count,
}));
export default runIframeRecipe(inst);