@positronic/core 0.0.52 → 0.0.53

package/dist/src/ui/generate-ui.js

@@ -0,0 +1,601 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import { v4 as uuidv4 } from 'uuid';
+import { z } from 'zod';
+import { parseTemplate } from '../yaml/parser.js';
+import { inferDataType, validateDataBindings } from '../yaml/data-validator.js';
+import { extractFormSchema, validateAgainstZod } from '../yaml/schema-extractor.js';
+import { describeDataShape } from '../yaml/type-inference.js';
+/**
+ * Get the type name from a Zod schema for documentation.
+ */ function getZodTypeName(schema) {
+    if (_instanceof(schema, z.ZodString)) return 'string';
+    if (_instanceof(schema, z.ZodNumber)) return 'number';
+    if (_instanceof(schema, z.ZodBoolean)) return 'boolean';
+    if (_instanceof(schema, z.ZodEnum)) {
+        var values = schema._def.values;
+        return values.map(function(v) {
+            return '"'.concat(v, '"');
+        }).join(' | ');
+    }
+    if (_instanceof(schema, z.ZodArray)) {
+        return "".concat(getZodTypeName(schema.element), "[]");
+    }
+    if (_instanceof(schema, z.ZodOptional)) {
+        return getZodTypeName(schema.unwrap());
+    }
+    if (_instanceof(schema, z.ZodDefault)) {
+        return getZodTypeName(schema._def.innerType);
+    }
+    if (_instanceof(schema, z.ZodObject)) {
+        return 'object';
+    }
+    return 'unknown';
+}
+/**
+ * Format a Zod object schema into documentation for the LLM.
+ */ function formatPropsSchema(schema) {
+    var shape = schema.shape;
+    var lines = [];
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = Object.entries(shape)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var _step_value = _sliced_to_array(_step.value, 2), key = _step_value[0], fieldSchema = _step_value[1];
+            var zodField = fieldSchema;
+            var isOptional = _instanceof(zodField, z.ZodOptional) || _instanceof(zodField, z.ZodDefault);
+            var typeName = getZodTypeName(zodField);
+            var description = zodField._def.description || '';
+            var optionalMarker = isOptional ? '?' : '';
+            var descPart = description ? " - ".concat(description) : '';
+            lines.push("  - ".concat(key).concat(optionalMarker, ": ").concat(typeName).concat(descPart));
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Convert a ComponentNode tree to a flat array of Placements.
+ */ function treeToPlacementsRecursive(node, parentId, placements) {
+    var id = uuidv4();
+    // Convert PropValue to raw values
+    var props = {};
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = Object.entries(node.props)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var _step_value = _sliced_to_array(_step.value, 2), key = _step_value[0], propValue = _step_value[1];
+            if (propValue.type === 'binding') {
+                props[key] = "{{".concat(propValue.path, "}}");
+            } else {
+                props[key] = propValue.value;
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    placements.push({
+        id: id,
+        component: node.component,
+        props: props,
+        parentId: parentId
+    });
+    var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+    try {
+        // Recurse into children
+        for(var _iterator1 = node.children[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
+            var child = _step1.value;
+            treeToPlacementsRecursive(child, id, placements);
+        }
+    } catch (err) {
+        _didIteratorError1 = true;
+        _iteratorError1 = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                _iterator1.return();
+            }
+        } finally{
+            if (_didIteratorError1) {
+                throw _iteratorError1;
+            }
+        }
+    }
+    return id;
+}
+/**
+ * Convert a ComponentNode tree to a flat Placements array.
+ */ function treeToPlacements(root) {
+    var placements = [];
+    treeToPlacementsRecursive(root, null, placements);
+    return placements;
+}
+/**
+ * Create the validate_template tool for YAML validation.
+ */ function createValidateTemplateTool(components, schema, data) {
+    var dataType = inferDataType(data);
+    return {
+        description: "Validate a YAML template. Checks that:\n1. The YAML is valid and can be parsed\n2. All component names are valid\n3. All data bindings (like {{email.subject}}) reference valid paths in the provided data\n4. Form components have a Button for submission\n5. The form fields will produce data matching the expected schema (if schema provided)\n\nCall this after generating your YAML template to verify it's correct before finalizing.",
+        inputSchema: z.object({
+            yaml: z.string().describe('The complete YAML template to validate')
+        }),
+        execute: function(args) {
+            var _errors, _errors1;
+            var yaml = args.yaml;
+            var errors = [];
+            // 1. Parse YAML
+            var root;
+            try {
+                var template = parseTemplate(yaml);
+                root = template.root;
+            } catch (error) {
+                return {
+                    valid: false,
+                    errors: [
+                        {
+                            type: 'parse-error',
+                            message: _instanceof(error, Error) ? error.message : 'Failed to parse YAML'
+                        }
+                    ]
+                };
+            }
+            // 2. Validate component names
+            var componentNames = new Set(Object.keys(components));
+            componentNames.add('List'); // Built-in loop component
+            var unknownComponents = validateComponentNames(root, componentNames);
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = unknownComponents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var compName = _step.value;
+                    errors.push({
+                        type: 'unknown-component',
+                        message: 'Unknown component: "'.concat(compName, '"')
+                    });
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            // 3. Validate data bindings
+            var bindingResult = validateDataBindings(root, dataType);
+            (_errors = errors).push.apply(_errors, _to_consumable_array(bindingResult.errors));
+            // 4. Validate Form components have a Button for submission
+            var formButtonErrors = validateFormHasButton(root);
+            (_errors1 = errors).push.apply(_errors1, _to_consumable_array(formButtonErrors));
+            // 5. Validate form schema if provided
+            var extractedFields;
+            if (schema) {
+                var _errors2;
+                var extracted = extractFormSchema(root);
+                extractedFields = extracted.fields.map(function(f) {
+                    return {
+                        name: f.name,
+                        type: f.type
+                    };
+                });
+                var schemaErrors = validateAgainstZod(extracted, schema);
+                (_errors2 = errors).push.apply(_errors2, _to_consumable_array(schemaErrors));
+            }
+            return {
+                valid: errors.length === 0,
+                errors: errors.map(function(e) {
+                    return {
+                        type: e.type,
+                        message: e.message
+                    };
+                }),
+                extractedFields: extractedFields
+            };
+        }
+    };
+}
+/**
+ * Recursively find all component names that aren't in the allowed set.
+ */ function validateComponentNames(node, allowed) {
+    var unknown = [];
+    if (!allowed.has(node.component)) {
+        unknown.push(node.component);
+    }
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = node.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var child = _step.value;
+            var _unknown;
+            (_unknown = unknown).push.apply(_unknown, _to_consumable_array(validateComponentNames(child, allowed)));
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return unknown;
+}
+/**
+ * Check if a component tree contains a Button component.
+ */ function hasButtonDescendant(node) {
+    if (node.component === 'Button') {
+        return true;
+    }
+    return node.children.some(hasButtonDescendant);
+}
+/**
+ * Validate that all Form components have a Button for submission.
+ */ function validateFormHasButton(root) {
+    var errors = [];
+    function checkNode(node) {
+        if (node.component === 'Form') {
+            if (!hasButtonDescendant(node)) {
+                errors.push({
+                    type: 'form-missing-submit-button',
+                    message: 'Form component requires a Button for submission'
+                });
+            }
+        }
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            // Check children for nested forms
+            for(var _iterator = node.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var child = _step.value;
+                checkNode(child);
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    checkNode(root);
+    return errors;
+}
+/**
+ * Build the system prompt describing the YAML DSL.
+ */ function buildSystemPrompt(components, hasSchema) {
+    var componentDocs = Object.entries(components).map(function(param) {
+        var _param = _sliced_to_array(param, 2), name = _param[0], comp = _param[1];
+        var desc = comp.description.split('\n')[0];
+        if (comp.propsSchema) {
+            var propsDoc = formatPropsSchema(comp.propsSchema);
+            return "### ".concat(name, "\n").concat(desc, "\nProps:\n").concat(propsDoc);
+        }
+        return "### ".concat(name, "\n").concat(desc);
+    }).join('\n\n');
+    return 'You are a UI generator that creates YAML templates for dynamic pages.\n\n## YAML Format\n\nGenerate a YAML template with a single root component. Components are objects where the key is the component name and the value contains props and children.\n\n```yaml\nForm:\n  submitLabel: "Submit"\n  children:\n    - Heading:\n        content: "Contact Form"\n        level: "1"\n    - Input:\n        name: "email"\n        label: "Email Address"\n        type: "email"\n        required: true\n    - TextArea:\n        name: "message"\n        label: "Your Message"\n```\n\n## Data Bindings\n\nUse `{{path}}` syntax to bind props to data values:\n- `{{user.name}}` - binds to the "name" property of "user" in the data\n- `{{items}}` - binds to the "items" array\n\n## List Component (Loops)\n\nUse the List component to iterate over arrays:\n\n```yaml\nList:\n  items: "{{emails}}"\n  as: "email"\n  children:\n    - Container:\n        children:\n          - Text:\n              content: "{{email.subject}}"\n          - Checkbox:\n              name: "selectedIds"\n              value: "{{email.id}}"\n              label: "Select"\n```\n\nThe `as` prop defines the variable name for each item (defaults to "item").\nInside the List\'s children, you can reference `{{email.fieldName}}` for item properties.\n\n## Available Components\n\n'.concat(componentDocs, "\n\n## Important Rules\n\n1. Generate ONLY valid YAML - no markdown code fences, no extra text\n2. Use proper YAML indentation (2 spaces)\n3. String values with special characters should be quoted\n4. The root must be a single component (usually Form or Container)\n5. Use `children:` array for nested components\n6. Do NOT use markdown formatting in content strings - no **bold**, *italic*, or [links](url). These are React components, not markdown. URLs should be included as plain text.\n").concat(hasSchema ? '7. After generating the YAML, call validate_template to verify it matches the expected schema' : '');
+}
+/**
+ * Build the user prompt with data shape and instructions.
+ */ function buildUserPrompt(prompt, data, schema) {
+    var dataShape = describeDataShape(data);
+    var userPrompt = "## Available Data\n```typescript\n".concat(dataShape, "\n```\n\n## Instructions\n").concat(prompt);
+    if (schema) {
+        var schemaFields = Object.entries(schema.shape).map(function(param) {
+            var _param = _sliced_to_array(param, 2), name = _param[0], field = _param[1];
+            var isOptional = _instanceof(field, z.ZodOptional);
+            var baseType = isOptional ? field.unwrap() : field;
+            var typeName = 'unknown';
+            if (_instanceof(baseType, z.ZodString)) typeName = 'string';
+            else if (_instanceof(baseType, z.ZodNumber)) typeName = 'number';
+            else if (_instanceof(baseType, z.ZodBoolean)) typeName = 'boolean';
+            else if (_instanceof(baseType, z.ZodArray)) typeName = "".concat(typeName, "[]");
+            return "- ".concat(name, ": ").concat(typeName).concat(isOptional ? ' (optional)' : '');
+        }).join('\n');
+        userPrompt += "\n\n## Expected Form Output\nThe form must collect these fields:\n".concat(schemaFields, "\n\nCall validate_template after generating your YAML to verify correctness.");
+    }
+    return userPrompt;
+}
+/**
+ * Generate a UI page using an LLM agent loop with YAML templates.
+ *
+ * The agent receives the user's prompt and generates a YAML template describing
+ * the component tree. The template is validated and converted to placements.
+ *
+ * @example
+ * ```typescript
+ * import { components } from '@positronic/gen-ui-components';
+ *
+ * const result = await generateUI({
+ *   client,
+ *   prompt: 'Create a form to collect user name and email',
+ *   components,
+ *   schema: z.object({ name: z.string(), email: z.string() }),
+ *   data: { user: { name: 'John' } },
+ * });
+ *
+ * // result.placements contains the component tree as a flat array
+ * // result.rootId is the ID of the root component
+ * // result.yaml is the generated YAML template
+ * ```
+ */ export function generateUI(params) {
+    return _async_to_generator(function() {
+        var client, prompt, components, schema, _params_data, data, _params_maxSteps, maxSteps, _params_system, systemPrompt, userPrompt, validateTool, result, _result_text, yamlContent, yamlMatch, placements, rootId, _placements_find, template;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    client = params.client, prompt = params.prompt, components = params.components, schema = params.schema, _params_data = params.data, data = _params_data === void 0 ? {} : _params_data, _params_maxSteps = params.maxSteps, maxSteps = _params_maxSteps === void 0 ? 10 : _params_maxSteps;
+                    systemPrompt = (_params_system = params.system) !== null && _params_system !== void 0 ? _params_system : buildSystemPrompt(components, !!schema);
+                    userPrompt = buildUserPrompt(prompt, data, schema);
+                    // Create the validate_template tool
+                    validateTool = createValidateTemplateTool(components, schema, data);
+                    return [
+                        4,
+                        client.streamText({
+                            system: systemPrompt,
+                            prompt: userPrompt,
+                            tools: {
+                                validate_template: validateTool
+                            },
+                            maxSteps: maxSteps
+                        })
+                    ];
+                case 1:
+                    result = _state.sent();
+                    // Extract YAML from the response text
+                    // The LLM should output YAML directly or in a code block
+                    yamlContent = (_result_text = result.text) !== null && _result_text !== void 0 ? _result_text : '';
+                    // Strip markdown code fences if present
+                    yamlMatch = yamlContent.match(/```(?:yaml)?\s*([\s\S]*?)```/);
+                    if (yamlMatch) {
+                        yamlContent = yamlMatch[1].trim();
+                    } else {
+                        yamlContent = yamlContent.trim();
+                    }
+                    // Try to parse and convert to placements
+                    placements = [];
+                    if (yamlContent) {
+                        try {
+                            ;
+                            template = parseTemplate(yamlContent);
+                            placements = treeToPlacements(template.root);
+                            rootId = (_placements_find = placements.find(function(p) {
+                                return p.parentId === null;
+                            })) === null || _placements_find === void 0 ? void 0 : _placements_find.id;
+                        } catch (e) {
+                        // If parsing fails, return empty placements
+                        // The validation tool should have caught this during generation
+                        }
+                    }
+                    return [
+                        2,
+                        {
+                            placements: placements,
+                            rootId: rootId,
+                            yaml: yamlContent || undefined,
+                            text: result.text,
+                            usage: result.usage
+                        }
+                    ];
+            }
+        });
+    })();
+}