@seed-ship/mcp-ui-solid 1.2.2 → 2.0.0

package/dist/components/FormRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.cjs","sources":["../../src/components/FormRenderer.tsx"],"sourcesContent":["/**\n * FormRenderer - Main form component\n * Sprint 1: Form Foundation\n * Sprint 2: Conditional field visibility (showWhen)\n * Sprint 4: Form state persistence\n */\n\nimport { Component, createSignal, For, Show, onMount, createEffect } from 'solid-js'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { UIComponent, FormComponentParams, FormFieldParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { validateFormData } from '../services/validation'\nimport { evaluateCondition } from '../hooks/useConditionalField'\nimport { useFormPersistence } from '../hooks/useFormPersistence'\n\nexport interface FormRendererProps {\n  component: UIComponent\n  onSubmit?: (data: Record<string, any>) => void\n  onError?: (errors: Record<string, string>) => void\n}\n\n/**\n * Get default value for a field type\n */\nfunction getFieldDefault(type: FormFieldParams['type']): any {\n  switch (type) {\n    case 'checkbox':\n      return false\n    case 'number':\n      return undefined\n    case 'select':\n    case 'radio':\n      return ''\n    default:\n      return ''\n  }\n}\n\nexport const FormRenderer: Component<FormRendererProps> = (props) => {\n  const params = () => props.component.params as FormComponentParams\n  const [formData, setFormData] = createSignal<Record<string, any>>({})\n  const [errors, setErrors] = createSignal<Record<string, string>>({})\n  const [isSubmitting, setIsSubmitting] = createSignal(false)\n  const { execute } = useAction()\n\n  // Form persistence (Sprint 4)\n  let clearPersisted: (() => void) | undefined\n\n  /**\n   * Get fields that are currently visible based on showWhen conditions\n   */\n  const getVisibleFields = (): FormFieldParams[] => {\n    return params().fields.filter((field) => {\n      if (!field.showWhen) return true\n      return evaluateCondition(field.showWhen, formData())\n    })\n  }\n\n  // Initialize form data with default values\n  const initializeForm = (clearStorage = false) => {\n    const initial: Record<string, any> = {}\n    for (const field of params().fields) {\n      initial[field.name] = field.defaultValue ?? getFieldDefault(field.type)\n    }\n    setFormData(initial)\n    setErrors({})\n\n    // Clear persisted data if requested\n    if (clearStorage && clearPersisted) {\n      clearPersisted()\n    }\n  }\n\n  // Initialize on mount\n  onMount(() => {\n    initializeForm()\n  })\n\n  // Setup persistence if persistKey is provided (Sprint 4)\n  createEffect(() => {\n    const persistKey = params().persistKey\n    if (persistKey) {\n      const persistence = useFormPersistence({\n        persistKey,\n        formData,\n        setFormData,\n        excludeFields: params().excludeFromPersistence,\n        expiresIn: params().persistExpiresIn,\n      })\n      clearPersisted = persistence.clearPersisted\n    }\n  })\n\n  const handleFieldChange = (name: string, value: any) => {\n    setFormData((prev) => ({ ...prev, [name]: value }))\n    // Clear error on change\n    if (errors()[name]) {\n      setErrors((prev) => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const { [name]: _removed, ...rest } = prev\n        return rest\n      })\n    }\n  }\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault()\n    setIsSubmitting(true)\n    setErrors({})\n\n    // Get only visible fields for validation and submission\n    const visibleFields = getVisibleFields()\n    const visibleFieldNames = new Set(visibleFields.map((f) => f.name))\n\n    // Filter form data to only include visible fields\n    const visibleFormData: Record<string, any> = {}\n    for (const [key, value] of Object.entries(formData())) {\n      if (visibleFieldNames.has(key)) {\n        visibleFormData[key] = value\n      }\n    }\n\n    // Validate only visible fields\n    const validationResult = validateFormData(visibleFormData, visibleFields)\n    if (!validationResult.valid) {\n      setErrors(validationResult.errors)\n      setIsSubmitting(false)\n      props.onError?.(validationResult.errors)\n      return\n    }\n\n    // Submit via tool call if specified\n    if (params().submitAction?.toolName) {\n      try {\n        const result = await execute(params().submitAction!.toolName, {\n          ...params().submitAction!.params,\n          formData: visibleFormData,\n        })\n        if (!result.success) {\n          setErrors({ _form: result.error || 'Submission failed' })\n          setIsSubmitting(false)\n          props.onError?.({ _form: result.error || 'Submission failed' })\n          return\n        }\n      } catch (error) {\n        const errorMessage = error instanceof Error ? error.message : 'Submission failed'\n        setErrors({ _form: errorMessage })\n        setIsSubmitting(false)\n        props.onError?.({ _form: errorMessage })\n        return\n      }\n    }\n\n    // Clear persisted data on successful submit\n    if (clearPersisted) {\n      clearPersisted()\n    }\n\n    props.onSubmit?.(visibleFormData)\n    setIsSubmitting(false)\n  }\n\n  const layoutClass = () => {\n    switch (params().layout) {\n      case 'horizontal':\n        return 'grid grid-cols-2 gap-4'\n      case 'inline':\n        return 'flex flex-wrap gap-4 items-end'\n      default:\n        return 'space-y-4'\n    }\n  }\n\n  return (\n    <div class=\"w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4\">\n      <Show when={params().title}>\n        <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-4\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <form onSubmit={handleSubmit} noValidate>\n        <div class={layoutClass()}>\n          <For each={params().fields}>\n            {(field) => (\n              <FormFieldRenderer\n                field={field}\n                value={formData()[field.name]}\n                error={errors()[field.name]}\n                onChange={(value) => handleFieldChange(field.name, value)}\n                disabled={isSubmitting() || field.disabled}\n                formData={formData}\n              />\n            )}\n          </For>\n        </div>\n\n        <Show when={errors()._form}>\n          <div class=\"mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md\">\n            <p class=\"text-sm text-red-600 dark:text-red-400\" role=\"alert\">\n              {errors()._form}\n            </p>\n          </div>\n        </Show>\n\n        <div class=\"flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700\">\n          <button\n            type=\"submit\"\n            disabled={isSubmitting()}\n            class=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {isSubmitting() ? (\n              <span class=\"flex items-center gap-2\">\n                <span class=\"animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full\" />\n                Submitting...\n              </span>\n            ) : (\n              params().submitLabel || 'Submit'\n            )}\n          </button>\n          <Show when={params().showReset}>\n            <button\n              type=\"button\"\n              onClick={() => initializeForm(true)}\n              disabled={isSubmitting()}\n              class=\"px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              Reset\n            </button>\n          </Show>\n        </div>\n      </form>\n    </div>\n  )\n}\n"],"names":["getFieldDefault","type","undefined","FormRenderer","props","params","component","formData","setFormData","createSignal","errors","setErrors","isSubmitting","setIsSubmitting","execute","useAction","clearPersisted","getVisibleFields","fields","filter","field","showWhen","evaluateCondition","initializeForm","clearStorage","initial","name","defaultValue","onMount","createEffect","persistKey","persistence","useFormPersistence","excludeFields","excludeFromPersistence","expiresIn","persistExpiresIn","handleFieldChange","value","prev","_removed","rest","handleSubmit","e","preventDefault","visibleFields","visibleFieldNames","Set","map","f","visibleFormData","key","Object","entries","has","validationResult","validateFormData","valid","onError","submitAction","toolName","result","success","_form","error","errorMessage","Error","message","onSubmit","layoutClass","layout","_el$","_$getNextElement","_tmpl$4","_el$12","firstChild","_el$13","_co$3","_$getNextMarker","nextSibling","_el$3","_el$4","_el$10","_el$11","_co$2","_el$7","_el$8","_el$0","_el$1","_co$","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","addEventListener","For","each","FormFieldRenderer","onChange","disabled","_el$5","_tmpl$2","_el$6","_c$","_$memo","_tmpl$5","submitLabel","showReset","_el$9","_tmpl$3","$$click","_$effect","_$setProperty","_$runHydrationEvents","_p$","_v$","_v$2","_$className","t","_$delegateEvents"],"mappings":";;;;;;;;;;AAwBA,SAASA,gBAAgBC,MAAoC;AAC3D,UAAQA,MAAAA;AAAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAOC;AAAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb;AAEO,MAAMC,eAA8CC,CAAAA,UAAU;AACnE,QAAMC,SAASA,MAAMD,MAAME,UAAUD;AACrC,QAAM,CAACE,UAAUC,WAAW,IAAIC,QAAAA,aAAkC,CAAA,CAAE;AACpE,QAAM,CAACC,QAAQC,SAAS,IAAIF,QAAAA,aAAqC,CAAA,CAAE;AACnE,QAAM,CAACG,cAAcC,eAAe,IAAIJ,QAAAA,aAAa,KAAK;AAC1D,QAAM;AAAA,IAAEK;AAAAA,EAAAA,IAAYC,oBAAAA;AAGpB,MAAIC;AAKJ,QAAMC,mBAAmBA,MAAyB;AAChD,WAAOZ,OAAAA,EAASa,OAAOC,OAAQC,CAAAA,UAAU;AACvC,UAAI,CAACA,MAAMC,SAAU,QAAO;AAC5B,aAAOC,sCAAkBF,MAAMC,UAAUd,SAAAA,CAAU;AAAA,IACrD,CAAC;AAAA,EACH;AAGA,QAAMgB,iBAAiBA,CAACC,eAAe,UAAU;AAC/C,UAAMC,UAA+B,CAAA;AACrC,eAAWL,SAASf,OAAAA,EAASa,QAAQ;AACnCO,cAAQL,MAAMM,IAAI,IAAIN,MAAMO,gBAAgB3B,gBAAgBoB,MAAMnB,IAAI;AAAA,IACxE;AACAO,gBAAYiB,OAAO;AACnBd,cAAU,CAAA,CAAE;AAGZ,QAAIa,gBAAgBR,gBAAgB;AAClCA,qBAAAA;AAAAA,IACF;AAAA,EACF;AAGAY,UAAAA,QAAQ,MAAM;AACZL,mBAAAA;AAAAA,EACF,CAAC;AAGDM,UAAAA,aAAa,MAAM;AACjB,UAAMC,aAAazB,SAASyB;AAC5B,QAAIA,YAAY;AACd,YAAMC,cAAcC,mBAAAA,mBAAmB;AAAA,QACrCF;AAAAA,QACAvB;AAAAA,QACAC;AAAAA,QACAyB,eAAe5B,SAAS6B;AAAAA,QACxBC,WAAW9B,SAAS+B;AAAAA,MAAAA,CACrB;AACDpB,uBAAiBe,YAAYf;AAAAA,IAC/B;AAAA,EACF,CAAC;AAED,QAAMqB,oBAAoBA,CAACX,MAAcY,UAAe;AACtD9B,gBAAa+B,CAAAA,UAAU;AAAA,MAAE,GAAGA;AAAAA,MAAM,CAACb,IAAI,GAAGY;AAAAA,IAAAA,EAAQ;AAElD,QAAI5B,OAAAA,EAASgB,IAAI,GAAG;AAClBf,gBAAW4B,CAAAA,SAAS;AAElB,cAAM;AAAA,UAAE,CAACb,IAAI,GAAGc;AAAAA,UAAU,GAAGC;AAAAA,QAAAA,IAASF;AACtC,eAAOE;AAAAA,MACT,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAMC,eAAe,OAAOC,MAAa;;AACvCA,MAAEC,eAAAA;AACF/B,oBAAgB,IAAI;AACpBF,cAAU,CAAA,CAAE;AAGZ,UAAMkC,gBAAgB5B,iBAAAA;AACtB,UAAM6B,oBAAoB,IAAIC,IAAIF,cAAcG,IAAKC,CAAAA,MAAMA,EAAEvB,IAAI,CAAC;AAGlE,UAAMwB,kBAAuC,CAAA;AAC7C,eAAW,CAACC,KAAKb,KAAK,KAAKc,OAAOC,QAAQ9C,SAAAA,CAAU,GAAG;AACrD,UAAIuC,kBAAkBQ,IAAIH,GAAG,GAAG;AAC9BD,wBAAgBC,GAAG,IAAIb;AAAAA,MACzB;AAAA,IACF;AAGA,UAAMiB,mBAAmBC,WAAAA,iBAAiBN,iBAAiBL,aAAa;AACxE,QAAI,CAACU,iBAAiBE,OAAO;AAC3B9C,gBAAU4C,iBAAiB7C,MAAM;AACjCG,sBAAgB,KAAK;AACrBT,kBAAMsD,YAANtD,+BAAgBmD,iBAAiB7C;AACjC;AAAA,IACF;AAGA,SAAIL,YAAAA,EAASsD,iBAATtD,mBAAuBuD,UAAU;AACnC,UAAI;AACF,cAAMC,SAAS,MAAM/C,QAAQT,OAAAA,EAASsD,aAAcC,UAAU;AAAA,UAC5D,GAAGvD,OAAAA,EAASsD,aAActD;AAAAA,UAC1BE,UAAU2C;AAAAA,QAAAA,CACX;AACD,YAAI,CAACW,OAAOC,SAAS;AACnBnD,oBAAU;AAAA,YAAEoD,OAAOF,OAAOG,SAAS;AAAA,UAAA,CAAqB;AACxDnD,0BAAgB,KAAK;AACrBT,sBAAMsD,YAANtD,+BAAgB;AAAA,YAAE2D,OAAOF,OAAOG,SAAS;AAAA,UAAA;AACzC;AAAA,QACF;AAAA,MACF,SAASA,OAAO;AACd,cAAMC,eAAeD,iBAAiBE,QAAQF,MAAMG,UAAU;AAC9DxD,kBAAU;AAAA,UAAEoD,OAAOE;AAAAA,QAAAA,CAAc;AACjCpD,wBAAgB,KAAK;AACrBT,oBAAMsD,YAANtD,+BAAgB;AAAA,UAAE2D,OAAOE;AAAAA,QAAAA;AACzB;AAAA,MACF;AAAA,IACF;AAGA,QAAIjD,gBAAgB;AAClBA,qBAAAA;AAAAA,IACF;AAEAZ,gBAAMgE,aAANhE,+BAAiB8C;AACjBrC,oBAAgB,KAAK;AAAA,EACvB;AAEA,QAAMwD,cAAcA,MAAM;AACxB,YAAQhE,OAAAA,EAASiE,QAAAA;AAAAA,MACf,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,mBAAAC,OAAA,GAAAC,SAAAH,KAAAI,YAAA,CAAAC,QAAAC,KAAA,IAAAC,IAAAA,cAAAJ,OAAAK,WAAA,GAAAC,QAAAJ,OAAAG,aAAAE,QAAAD,MAAAL,YAAAO,SAAAD,MAAAF,aAAA,CAAAI,QAAAC,KAAA,IAAAN,kBAAAI,OAAAH,WAAA,GAAAM,QAAAF,OAAAJ,aAAAO,QAAAD,MAAAV,YAAAY,QAAAD,MAAAP,aAAA,CAAAS,OAAAC,IAAA,IAAAX,IAAAA,cAAAS,MAAAR,WAAA;AAAAW,eAAAnB,MAAAoB,IAAAA,gBAEKC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExF,SAASyF;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAxB,IAAAA,eAAAyB,MAAA;AAAAP,YAAAA,OAAAM,OAAA,MAErB3F,OAAAA,EAASyF,KAAK;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAApB,QAAAC,KAAA;AAAAG,UAAAkB,iBAAA,UAIHxD,YAAY;AAAAgD,eAAAT,OAAAU,IAAAA,gBAEvBQ,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE/F,SAASa;AAAAA,MAAM;AAAA,MAAA6E,UACtB3E,CAAAA,UAAKuE,IAAAA,gBACJU,qCAAiB;AAAA,QAChBjF;AAAAA,QAAY,IACZkB,QAAK;AAAA,iBAAE/B,SAAAA,EAAWa,MAAMM,IAAI;AAAA,QAAC;AAAA,QAAA,IAC7BsC,QAAK;AAAA,iBAAEtD,OAAAA,EAASU,MAAMM,IAAI;AAAA,QAAC;AAAA,QAC3B4E,UAAWhE,CAAAA,UAAUD,kBAAkBjB,MAAMM,MAAMY,KAAK;AAAA,QAAC,IACzDiE,WAAQ;AAAA,iBAAE3F,aAAAA,KAAkBQ,MAAMmF;AAAAA,QAAQ;AAAA,QAC1ChG;AAAAA,MAAAA,CAAkB;AAAA,IAAA,CAErB,CAAA;AAAAmF,eAAAV,OAAAW,IAAAA,gBAIJC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnF,SAASqD;AAAAA,MAAK;AAAA,MAAA,IAAAgC,WAAA;AAAA,YAAAS,QAAAhC,IAAAA,eAAAiC,OAAA,GAAAC,QAAAF,MAAA7B;AAAAe,YAAAA,OAAAgB,OAAA,MAGnBhG,OAAAA,EAASqD,KAAK;AAAA,eAAAyC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAArB,QAAAC,KAAA;AAAAM,QAAAA,OAAAJ,QAAA,MAAA;AAAA,UAAAqB,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAWhBhG,cAAc;AAAA,aAAA,MAAd+F,QAAAnC,IAAAA,eAAAqC,OAAA,IAMCxG,OAAAA,EAASyG,eAAe;AAAA,IACzB,IAAA;AAAApB,eAAAL,OAAAM,IAAAA,gBAEFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExF,SAAS0G;AAAAA,MAAS;AAAA,MAAA,IAAAhB,WAAA;AAAA,YAAAiB,QAAAxC,IAAAA,eAAAyC,OAAA;AAAAD,cAAAE,UAGjB,MAAM3F,eAAe,IAAI;AAAC4F,YAAAA,aAAAC,IAAAA,YAAAJ,OAAA,YACzBpG,aAAAA,CAAc,CAAA;AAAAyG,+BAAAA;AAAA,eAAAL;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAxB,OAAAC,IAAA;AAAA0B,QAAAA,OAAAG,CAAAA,QAAA;AAAA,UAAAC,MA1ClBlD,eAAamD,OA0BX5G,aAAAA;AAAc2G,cAAAD,IAAA3E,KAAA8E,IAAAA,UAAAxC,OAAAqC,IAAA3E,IAAA4E,GAAA;AAAAC,eAAAF,IAAAI,KAAAN,IAAAA,YAAA9B,OAAA,YAAAgC,IAAAI,IAAAF,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAA3E,GAAAzC;AAAAA,MAAAwH,GAAAxH;AAAAA,IAAAA,CAAA;AAAA,WAAAqE;AAAAA,EAAA,GAAA;AA0BpC;AAACoD,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/components/FormRenderer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FormRenderer - Main form component
+ * Sprint 1: Form Foundation
+ * Sprint 2: Conditional field visibility (showWhen)
+ * Sprint 4: Form state persistence
+ */
+import { Component } from 'solid-js';
+import type { UIComponent } from '../types';
+export interface FormRendererProps {
+    component: UIComponent;
+    onSubmit?: (data: Record<string, any>) => void;
+    onError?: (errors: Record<string, string>) => void;
+}
+export declare const FormRenderer: Component<FormRendererProps>;
+//# sourceMappingURL=FormRenderer.d.ts.map

package/dist/components/FormRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.d.ts","sourceRoot":"","sources":["../../src/components/FormRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAkD,MAAM,UAAU,CAAA;AAEpF,OAAO,KAAK,EAAE,WAAW,EAAwC,MAAM,UAAU,CAAA;AAMjF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;CACnD;AAmBD,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CAoMrD,CAAA"}

package/dist/components/FormRenderer.js

@@ -0,0 +1,217 @@
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, memo, effect, setProperty, runHydrationEvents, className } from "solid-js/web";
+import { createSignal, onMount, createEffect, Show, For } from "solid-js";
+import { FormFieldRenderer } from "./FormFieldRenderer.js";
+import { useAction } from "../hooks/useAction.js";
+import { validateFormData } from "../services/validation.js";
+import { evaluateCondition } from "../hooks/useConditionalField.js";
+import { useFormPersistence } from "../hooks/useFormPersistence.js";
+var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md"><p class="text-sm text-red-600 dark:text-red-400"role=alert>`), _tmpl$3 = /* @__PURE__ */ template(`<button type=button class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Reset`), _tmpl$4 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4"><!$><!/><form novalidate><div></div><!$><!/><div class="flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700"><button type=submit class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"></button><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<span class="flex items-center gap-2"><span class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></span>Submitting...`);
+function getFieldDefault(type) {
+  switch (type) {
+    case "checkbox":
+      return false;
+    case "number":
+      return void 0;
+    case "select":
+    case "radio":
+      return "";
+    default:
+      return "";
+  }
+}
+const FormRenderer = (props) => {
+  const params = () => props.component.params;
+  const [formData, setFormData] = createSignal({});
+  const [errors, setErrors] = createSignal({});
+  const [isSubmitting, setIsSubmitting] = createSignal(false);
+  const {
+    execute
+  } = useAction();
+  let clearPersisted;
+  const getVisibleFields = () => {
+    return params().fields.filter((field) => {
+      if (!field.showWhen) return true;
+      return evaluateCondition(field.showWhen, formData());
+    });
+  };
+  const initializeForm = (clearStorage = false) => {
+    const initial = {};
+    for (const field of params().fields) {
+      initial[field.name] = field.defaultValue ?? getFieldDefault(field.type);
+    }
+    setFormData(initial);
+    setErrors({});
+    if (clearStorage && clearPersisted) {
+      clearPersisted();
+    }
+  };
+  onMount(() => {
+    initializeForm();
+  });
+  createEffect(() => {
+    const persistKey = params().persistKey;
+    if (persistKey) {
+      const persistence = useFormPersistence({
+        persistKey,
+        formData,
+        setFormData,
+        excludeFields: params().excludeFromPersistence,
+        expiresIn: params().persistExpiresIn
+      });
+      clearPersisted = persistence.clearPersisted;
+    }
+  });
+  const handleFieldChange = (name, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+    if (errors()[name]) {
+      setErrors((prev) => {
+        const {
+          [name]: _removed,
+          ...rest
+        } = prev;
+        return rest;
+      });
+    }
+  };
+  const handleSubmit = async (e) => {
+    var _a, _b, _c, _d, _e;
+    e.preventDefault();
+    setIsSubmitting(true);
+    setErrors({});
+    const visibleFields = getVisibleFields();
+    const visibleFieldNames = new Set(visibleFields.map((f) => f.name));
+    const visibleFormData = {};
+    for (const [key, value] of Object.entries(formData())) {
+      if (visibleFieldNames.has(key)) {
+        visibleFormData[key] = value;
+      }
+    }
+    const validationResult = validateFormData(visibleFormData, visibleFields);
+    if (!validationResult.valid) {
+      setErrors(validationResult.errors);
+      setIsSubmitting(false);
+      (_a = props.onError) == null ? void 0 : _a.call(props, validationResult.errors);
+      return;
+    }
+    if ((_b = params().submitAction) == null ? void 0 : _b.toolName) {
+      try {
+        const result = await execute(params().submitAction.toolName, {
+          ...params().submitAction.params,
+          formData: visibleFormData
+        });
+        if (!result.success) {
+          setErrors({
+            _form: result.error || "Submission failed"
+          });
+          setIsSubmitting(false);
+          (_c = props.onError) == null ? void 0 : _c.call(props, {
+            _form: result.error || "Submission failed"
+          });
+          return;
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Submission failed";
+        setErrors({
+          _form: errorMessage
+        });
+        setIsSubmitting(false);
+        (_d = props.onError) == null ? void 0 : _d.call(props, {
+          _form: errorMessage
+        });
+        return;
+      }
+    }
+    if (clearPersisted) {
+      clearPersisted();
+    }
+    (_e = props.onSubmit) == null ? void 0 : _e.call(props, visibleFormData);
+    setIsSubmitting(false);
+  };
+  const layoutClass = () => {
+    switch (params().layout) {
+      case "horizontal":
+        return "grid grid-cols-2 gap-4";
+      case "inline":
+        return "flex flex-wrap gap-4 items-end";
+      default:
+        return "space-y-4";
+    }
+  };
+  return (() => {
+    var _el$ = getNextElement(_tmpl$4), _el$12 = _el$.firstChild, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling), _el$3 = _el$13.nextSibling, _el$4 = _el$3.firstChild, _el$10 = _el$4.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$7 = _el$11.nextSibling, _el$8 = _el$7.firstChild, _el$0 = _el$8.nextSibling, [_el$1, _co$] = getNextMarker(_el$0.nextSibling);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return params().title;
+      },
+      get children() {
+        var _el$2 = getNextElement(_tmpl$);
+        insert(_el$2, () => params().title);
+        return _el$2;
+      }
+    }), _el$13, _co$3);
+    _el$3.addEventListener("submit", handleSubmit);
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return params().fields;
+      },
+      children: (field) => createComponent(FormFieldRenderer, {
+        field,
+        get value() {
+          return formData()[field.name];
+        },
+        get error() {
+          return errors()[field.name];
+        },
+        onChange: (value) => handleFieldChange(field.name, value),
+        get disabled() {
+          return isSubmitting() || field.disabled;
+        },
+        formData
+      })
+    }));
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return errors()._form;
+      },
+      get children() {
+        var _el$5 = getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
+        insert(_el$6, () => errors()._form);
+        return _el$5;
+      }
+    }), _el$11, _co$2);
+    insert(_el$8, (() => {
+      var _c$ = memo(() => !!isSubmitting());
+      return () => _c$() ? getNextElement(_tmpl$5) : params().submitLabel || "Submit";
+    })());
+    insert(_el$7, createComponent(Show, {
+      get when() {
+        return params().showReset;
+      },
+      get children() {
+        var _el$9 = getNextElement(_tmpl$3);
+        _el$9.$$click = () => initializeForm(true);
+        effect(() => setProperty(_el$9, "disabled", isSubmitting()));
+        runHydrationEvents();
+        return _el$9;
+      }
+    }), _el$1, _co$);
+    effect((_p$) => {
+      var _v$ = layoutClass(), _v$2 = isSubmitting();
+      _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+      _v$2 !== _p$.t && setProperty(_el$8, "disabled", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  FormRenderer
+};
+//# sourceMappingURL=FormRenderer.js.map

package/dist/components/FormRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.js","sources":["../../src/components/FormRenderer.tsx"],"sourcesContent":["/**\n * FormRenderer - Main form component\n * Sprint 1: Form Foundation\n * Sprint 2: Conditional field visibility (showWhen)\n * Sprint 4: Form state persistence\n */\n\nimport { Component, createSignal, For, Show, onMount, createEffect } from 'solid-js'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { UIComponent, FormComponentParams, FormFieldParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { validateFormData } from '../services/validation'\nimport { evaluateCondition } from '../hooks/useConditionalField'\nimport { useFormPersistence } from '../hooks/useFormPersistence'\n\nexport interface FormRendererProps {\n  component: UIComponent\n  onSubmit?: (data: Record<string, any>) => void\n  onError?: (errors: Record<string, string>) => void\n}\n\n/**\n * Get default value for a field type\n */\nfunction getFieldDefault(type: FormFieldParams['type']): any {\n  switch (type) {\n    case 'checkbox':\n      return false\n    case 'number':\n      return undefined\n    case 'select':\n    case 'radio':\n      return ''\n    default:\n      return ''\n  }\n}\n\nexport const FormRenderer: Component<FormRendererProps> = (props) => {\n  const params = () => props.component.params as FormComponentParams\n  const [formData, setFormData] = createSignal<Record<string, any>>({})\n  const [errors, setErrors] = createSignal<Record<string, string>>({})\n  const [isSubmitting, setIsSubmitting] = createSignal(false)\n  const { execute } = useAction()\n\n  // Form persistence (Sprint 4)\n  let clearPersisted: (() => void) | undefined\n\n  /**\n   * Get fields that are currently visible based on showWhen conditions\n   */\n  const getVisibleFields = (): FormFieldParams[] => {\n    return params().fields.filter((field) => {\n      if (!field.showWhen) return true\n      return evaluateCondition(field.showWhen, formData())\n    })\n  }\n\n  // Initialize form data with default values\n  const initializeForm = (clearStorage = false) => {\n    const initial: Record<string, any> = {}\n    for (const field of params().fields) {\n      initial[field.name] = field.defaultValue ?? getFieldDefault(field.type)\n    }\n    setFormData(initial)\n    setErrors({})\n\n    // Clear persisted data if requested\n    if (clearStorage && clearPersisted) {\n      clearPersisted()\n    }\n  }\n\n  // Initialize on mount\n  onMount(() => {\n    initializeForm()\n  })\n\n  // Setup persistence if persistKey is provided (Sprint 4)\n  createEffect(() => {\n    const persistKey = params().persistKey\n    if (persistKey) {\n      const persistence = useFormPersistence({\n        persistKey,\n        formData,\n        setFormData,\n        excludeFields: params().excludeFromPersistence,\n        expiresIn: params().persistExpiresIn,\n      })\n      clearPersisted = persistence.clearPersisted\n    }\n  })\n\n  const handleFieldChange = (name: string, value: any) => {\n    setFormData((prev) => ({ ...prev, [name]: value }))\n    // Clear error on change\n    if (errors()[name]) {\n      setErrors((prev) => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const { [name]: _removed, ...rest } = prev\n        return rest\n      })\n    }\n  }\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault()\n    setIsSubmitting(true)\n    setErrors({})\n\n    // Get only visible fields for validation and submission\n    const visibleFields = getVisibleFields()\n    const visibleFieldNames = new Set(visibleFields.map((f) => f.name))\n\n    // Filter form data to only include visible fields\n    const visibleFormData: Record<string, any> = {}\n    for (const [key, value] of Object.entries(formData())) {\n      if (visibleFieldNames.has(key)) {\n        visibleFormData[key] = value\n      }\n    }\n\n    // Validate only visible fields\n    const validationResult = validateFormData(visibleFormData, visibleFields)\n    if (!validationResult.valid) {\n      setErrors(validationResult.errors)\n      setIsSubmitting(false)\n      props.onError?.(validationResult.errors)\n      return\n    }\n\n    // Submit via tool call if specified\n    if (params().submitAction?.toolName) {\n      try {\n        const result = await execute(params().submitAction!.toolName, {\n          ...params().submitAction!.params,\n          formData: visibleFormData,\n        })\n        if (!result.success) {\n          setErrors({ _form: result.error || 'Submission failed' })\n          setIsSubmitting(false)\n          props.onError?.({ _form: result.error || 'Submission failed' })\n          return\n        }\n      } catch (error) {\n        const errorMessage = error instanceof Error ? error.message : 'Submission failed'\n        setErrors({ _form: errorMessage })\n        setIsSubmitting(false)\n        props.onError?.({ _form: errorMessage })\n        return\n      }\n    }\n\n    // Clear persisted data on successful submit\n    if (clearPersisted) {\n      clearPersisted()\n    }\n\n    props.onSubmit?.(visibleFormData)\n    setIsSubmitting(false)\n  }\n\n  const layoutClass = () => {\n    switch (params().layout) {\n      case 'horizontal':\n        return 'grid grid-cols-2 gap-4'\n      case 'inline':\n        return 'flex flex-wrap gap-4 items-end'\n      default:\n        return 'space-y-4'\n    }\n  }\n\n  return (\n    <div class=\"w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4\">\n      <Show when={params().title}>\n        <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-4\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <form onSubmit={handleSubmit} noValidate>\n        <div class={layoutClass()}>\n          <For each={params().fields}>\n            {(field) => (\n              <FormFieldRenderer\n                field={field}\n                value={formData()[field.name]}\n                error={errors()[field.name]}\n                onChange={(value) => handleFieldChange(field.name, value)}\n                disabled={isSubmitting() || field.disabled}\n                formData={formData}\n              />\n            )}\n          </For>\n        </div>\n\n        <Show when={errors()._form}>\n          <div class=\"mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md\">\n            <p class=\"text-sm text-red-600 dark:text-red-400\" role=\"alert\">\n              {errors()._form}\n            </p>\n          </div>\n        </Show>\n\n        <div class=\"flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700\">\n          <button\n            type=\"submit\"\n            disabled={isSubmitting()}\n            class=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {isSubmitting() ? (\n              <span class=\"flex items-center gap-2\">\n                <span class=\"animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full\" />\n                Submitting...\n              </span>\n            ) : (\n              params().submitLabel || 'Submit'\n            )}\n          </button>\n          <Show when={params().showReset}>\n            <button\n              type=\"button\"\n              onClick={() => initializeForm(true)}\n              disabled={isSubmitting()}\n              class=\"px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              Reset\n            </button>\n          </Show>\n        </div>\n      </form>\n    </div>\n  )\n}\n"],"names":["getFieldDefault","type","undefined","FormRenderer","props","params","component","formData","setFormData","createSignal","errors","setErrors","isSubmitting","setIsSubmitting","execute","useAction","clearPersisted","getVisibleFields","fields","filter","field","showWhen","evaluateCondition","initializeForm","clearStorage","initial","name","defaultValue","onMount","createEffect","persistKey","persistence","useFormPersistence","excludeFields","excludeFromPersistence","expiresIn","persistExpiresIn","handleFieldChange","value","prev","_removed","rest","handleSubmit","e","preventDefault","visibleFields","visibleFieldNames","Set","map","f","visibleFormData","key","Object","entries","has","validationResult","validateFormData","valid","onError","submitAction","toolName","result","success","_form","error","errorMessage","Error","message","onSubmit","layoutClass","layout","_el$","_$getNextElement","_tmpl$4","_el$12","firstChild","_el$13","_co$3","_$getNextMarker","nextSibling","_el$3","_el$4","_el$10","_el$11","_co$2","_el$7","_el$8","_el$0","_el$1","_co$","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","addEventListener","For","each","FormFieldRenderer","onChange","disabled","_el$5","_tmpl$2","_el$6","_c$","_$memo","_tmpl$5","submitLabel","showReset","_el$9","_tmpl$3","$$click","_$effect","_$setProperty","_$runHydrationEvents","_p$","_v$","_v$2","_$className","t","_$delegateEvents"],"mappings":"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"}

package/dist/components/GenerativeUIErrorBoundary.cjs

@@ -107,7 +107,7 @@ const GenerativeUIErrorBoundary = (props) => {
     },
     get children() {
       return (() => {
-        retryKey();
+        void retryKey();
         return web.memo(() => props.children);
       })();
     }

package/dist/components/GenerativeUIErrorBoundary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenerativeUIErrorBoundary.cjs","sources":["../../src/components/GenerativeUIErrorBoundary.tsx"],"sourcesContent":["/**\n * Generative UI Error Boundary with Telemetry\n * Phase 0: Error isolation + structured logging\n *\n * Features:\n * - Component-level error isolation\n * - Structured logging with context\n * - Performance timing\n * - Retry mechanism\n * - User-friendly fallback UI\n */\n\nimport { Component, ErrorBoundary, createSignal, Show, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { createLogger } from '../utils/logger'\nimport type { RendererError } from '../types'\n\nconst logger = createLogger('generative-ui')\n\n/**\n * Props for GenerativeUIErrorBoundary\n */\nexport interface GenerativeUIErrorBoundaryProps {\n  /**\n   * Component identifier for telemetry\n   */\n  componentId: string\n\n  /**\n   * Component type for context\n   */\n  componentType: string\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Allow retry on error\n   */\n  allowRetry?: boolean\n\n  /**\n   * Child components to wrap\n   */\n  children: any\n\n  /**\n   * Custom fallback UI (optional)\n   */\n  fallback?: (error: Error, retry?: () => void) => any\n}\n\n/**\n * Default fallback UI for errors\n */\nfunction DefaultErrorFallback(props: {\n  error: Error\n  componentId: string\n  componentType: string\n  allowRetry?: boolean\n  onRetry?: () => void\n}) {\n  return (\n    <div class=\"w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-shrink-0\">\n          <svg\n            class=\"w-5 h-5 text-yellow-600 dark:text-yellow-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n        <div class=\"flex-1 min-w-0\">\n          <p class=\"text-sm font-medium text-yellow-900 dark:text-yellow-100\">\n            Component Failed to Render\n          </p>\n          <p class=\"text-xs text-yellow-700 dark:text-yellow-300 mt-1\">\n            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...\n          </p>\n          <Show when={import.meta.env.DEV}>\n            <p class=\"text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono\">\n              {props.error.message}\n            </p>\n          </Show>\n          <Show when={props.allowRetry}>\n            <button\n              onClick={props.onRetry}\n              class=\"mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline\"\n            >\n              Retry Rendering\n            </button>\n          </Show>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Generative UI Error Boundary Component\n */\nexport const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps> = (props) => {\n  const [retryKey, setRetryKey] = createSignal(0)\n  const [renderStartTime, setRenderStartTime] = createSignal(0)\n\n  // SSR-safe: Initialize performance timing on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setRenderStartTime(performance.now())\n    }\n  })\n\n  // Handle error with telemetry\n  const handleError = (error: Error) => {\n    // SSR-safe: Calculate render duration\n    const renderDuration = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - renderStartTime()\n      : 0\n\n    // SSR-safe: Get client-only context\n    const userAgent = !isServer && typeof navigator !== 'undefined'\n      ? navigator.userAgent\n      : 'server'\n    const viewport = !isServer && typeof window !== 'undefined'\n      ? { width: window.innerWidth, height: window.innerHeight }\n      : { width: 0, height: 0 }\n\n    // Structure error context\n    const errorContext = {\n      componentId: props.componentId,\n      componentType: props.componentType,\n      errorMessage: error.message,\n      errorStack: error.stack,\n      renderDuration,\n      retryCount: retryKey(),\n      timestamp: new Date().toISOString(),\n      userAgent,\n      viewport,\n    }\n\n    // Log to structured logger\n    logger.error(`Component render failed: ${props.componentType}`, errorContext)\n\n    // Call error callback\n    props.onError?.({\n      type: 'render',\n      message: error.message,\n      componentId: props.componentId,\n      details: errorContext,\n    })\n\n    // In production, send to monitoring service\n    if (import.meta.env.PROD) {\n      // Future: Send to Sentry or other APM\n      // Sentry.captureException(error, { contexts: { component: errorContext } })\n    }\n  }\n\n  // Retry mechanism\n  const handleRetry = () => {\n    const newRetryCount = retryKey() + 1\n    logger.info(`Retrying component render: ${props.componentType}`, {\n      componentId: props.componentId,\n      retryCount: newRetryCount,\n    })\n    setRetryKey(newRetryCount)\n  }\n\n  return (\n    <ErrorBoundary\n      fallback={(error) => {\n        handleError(error)\n\n        // Use custom fallback if provided\n        if (props.fallback) {\n          return props.fallback(error, props.allowRetry ? handleRetry : undefined)\n        }\n\n        // Default fallback\n        return (\n          <DefaultErrorFallback\n            error={error}\n            componentId={props.componentId}\n            componentType={props.componentType}\n            allowRetry={props.allowRetry}\n            onRetry={handleRetry}\n          />\n        )\n      }}\n    >\n      {/* Key prop for forcing remount on retry */}\n      {(() => {\n        const _ = retryKey() // Access signal to track changes\n        return <>{props.children}</>\n      })()}\n    </ErrorBoundary>\n  )\n}\n\n/**\n * Performance monitoring wrapper\n * Logs render times for performance analysis\n */\nexport function withPerformanceMonitoring<P extends { componentId: string; componentType: string }>(\n  WrappedComponent: Component<P>\n) {\n  return (props: P) => {\n    const [renderStart, setRenderStart] = createSignal(0)\n\n    // Log render start\n    logger.debug(`Component render start: ${props.componentType}`, {\n      componentId: props.componentId,\n      timestamp: new Date().toISOString(),\n    })\n\n    // SSR-safe: Measure on mount completion (client-side only)\n    onMount(() => {\n      if (typeof performance !== 'undefined') {\n        setRenderStart(performance.now())\n\n        requestAnimationFrame(() => {\n          const renderEnd = performance.now()\n          const duration = renderEnd - renderStart()\n\n          logger.info(`Component rendered: ${props.componentType}`, {\n            componentId: props.componentId,\n            renderDuration: duration,\n            timestamp: new Date().toISOString(),\n          })\n\n          // Warn if render is slow (>50ms target)\n          if (duration > 50) {\n            logger.warn(`Slow component render: ${props.componentType}`, {\n              componentId: props.componentId,\n              renderDuration: duration,\n              threshold: 50,\n            })\n          }\n        })\n      }\n    })\n\n    return <WrappedComponent {...props} />\n  }\n}\n\n/**\n * Hook to track component lifecycle events\n */\nexport function useComponentTelemetry(componentId: string, componentType: string) {\n  const [mountTime, setMountTime] = createSignal(0)\n\n  // SSR-safe: Initialize mount time on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setMountTime(performance.now())\n    }\n\n    // Log mount\n    logger.debug(`Component mounted: ${componentType}`, {\n      componentId,\n      timestamp: new Date().toISOString(),\n    })\n  })\n\n  // Return cleanup function for unmount\n  return () => {\n    const lifetime = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - mountTime()\n      : 0\n    logger.debug(`Component unmounted: ${componentType}`, {\n      componentId,\n      lifetime,\n      timestamp: new Date().toISOString(),\n    })\n  }\n}\n"],"names":["logger","createLogger","DefaultErrorFallback","props","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$0","_el$1","_co$","_$getNextMarker","_el$8","_el$10","_el$11","_co$2","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","componentType","componentId","slice","_$createComponent","Show","when","import","children","_el$12","_tmpl$","error","message","allowRetry","_el$13","_tmpl$2","_$addEventListener","onRetry","_$runHydrationEvents","GenerativeUIErrorBoundary","retryKey","setRetryKey","createSignal","renderStartTime","setRenderStartTime","onMount","performance","now","handleError","renderDuration","isServer","userAgent","navigator","viewport","window","width","innerWidth","height","innerHeight","errorContext","errorMessage","errorStack","stack","retryCount","timestamp","Date","toISOString","onError","type","details","handleRetry","newRetryCount","info","ErrorBoundary","fallback","undefined","_$memo","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"GenerativeUIErrorBoundary.cjs","sources":["../../src/components/GenerativeUIErrorBoundary.tsx"],"sourcesContent":["/**\n * Generative UI Error Boundary with Telemetry\n * Phase 0: Error isolation + structured logging\n *\n * Features:\n * - Component-level error isolation\n * - Structured logging with context\n * - Performance timing\n * - Retry mechanism\n * - User-friendly fallback UI\n */\n\nimport { Component, ErrorBoundary, createSignal, Show, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { createLogger } from '../utils/logger'\nimport type { RendererError } from '../types'\n\nconst logger = createLogger('generative-ui')\n\n/**\n * Props for GenerativeUIErrorBoundary\n */\nexport interface GenerativeUIErrorBoundaryProps {\n  /**\n   * Component identifier for telemetry\n   */\n  componentId: string\n\n  /**\n   * Component type for context\n   */\n  componentType: string\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Allow retry on error\n   */\n  allowRetry?: boolean\n\n  /**\n   * Child components to wrap\n   */\n  children: any\n\n  /**\n   * Custom fallback UI (optional)\n   */\n  fallback?: (error: Error, retry?: () => void) => any\n}\n\n/**\n * Default fallback UI for errors\n */\nfunction DefaultErrorFallback(props: {\n  error: Error\n  componentId: string\n  componentType: string\n  allowRetry?: boolean\n  onRetry?: () => void\n}) {\n  return (\n    <div class=\"w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-shrink-0\">\n          <svg\n            class=\"w-5 h-5 text-yellow-600 dark:text-yellow-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n        <div class=\"flex-1 min-w-0\">\n          <p class=\"text-sm font-medium text-yellow-900 dark:text-yellow-100\">\n            Component Failed to Render\n          </p>\n          <p class=\"text-xs text-yellow-700 dark:text-yellow-300 mt-1\">\n            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...\n          </p>\n          <Show when={import.meta.env.DEV}>\n            <p class=\"text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono\">\n              {props.error.message}\n            </p>\n          </Show>\n          <Show when={props.allowRetry}>\n            <button\n              onClick={props.onRetry}\n              class=\"mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline\"\n            >\n              Retry Rendering\n            </button>\n          </Show>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Generative UI Error Boundary Component\n */\nexport const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps> = (props) => {\n  const [retryKey, setRetryKey] = createSignal(0)\n  const [renderStartTime, setRenderStartTime] = createSignal(0)\n\n  // SSR-safe: Initialize performance timing on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setRenderStartTime(performance.now())\n    }\n  })\n\n  // Handle error with telemetry\n  const handleError = (error: Error) => {\n    // SSR-safe: Calculate render duration\n    const renderDuration = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - renderStartTime()\n      : 0\n\n    // SSR-safe: Get client-only context\n    const userAgent = !isServer && typeof navigator !== 'undefined'\n      ? navigator.userAgent\n      : 'server'\n    const viewport = !isServer && typeof window !== 'undefined'\n      ? { width: window.innerWidth, height: window.innerHeight }\n      : { width: 0, height: 0 }\n\n    // Structure error context\n    const errorContext = {\n      componentId: props.componentId,\n      componentType: props.componentType,\n      errorMessage: error.message,\n      errorStack: error.stack,\n      renderDuration,\n      retryCount: retryKey(),\n      timestamp: new Date().toISOString(),\n      userAgent,\n      viewport,\n    }\n\n    // Log to structured logger\n    logger.error(`Component render failed: ${props.componentType}`, errorContext)\n\n    // Call error callback\n    props.onError?.({\n      type: 'render',\n      message: error.message,\n      componentId: props.componentId,\n      details: errorContext,\n    })\n\n    // In production, send to monitoring service\n    if (import.meta.env.PROD) {\n      // Future: Send to Sentry or other APM\n      // Sentry.captureException(error, { contexts: { component: errorContext } })\n    }\n  }\n\n  // Retry mechanism\n  const handleRetry = () => {\n    const newRetryCount = retryKey() + 1\n    logger.info(`Retrying component render: ${props.componentType}`, {\n      componentId: props.componentId,\n      retryCount: newRetryCount,\n    })\n    setRetryKey(newRetryCount)\n  }\n\n  return (\n    <ErrorBoundary\n      fallback={(error) => {\n        handleError(error)\n\n        // Use custom fallback if provided\n        if (props.fallback) {\n          return props.fallback(error, props.allowRetry ? handleRetry : undefined)\n        }\n\n        // Default fallback\n        return (\n          <DefaultErrorFallback\n            error={error}\n            componentId={props.componentId}\n            componentType={props.componentType}\n            allowRetry={props.allowRetry}\n            onRetry={handleRetry}\n          />\n        )\n      }}\n    >\n      {/* Key prop for forcing remount on retry */}\n      {(() => {\n        void retryKey() // Access signal to track changes\n        return <>{props.children}</>\n      })()}\n    </ErrorBoundary>\n  )\n}\n\n/**\n * Performance monitoring wrapper\n * Logs render times for performance analysis\n */\nexport function withPerformanceMonitoring<P extends { componentId: string; componentType: string }>(\n  WrappedComponent: Component<P>\n) {\n  return (props: P) => {\n    const [renderStart, setRenderStart] = createSignal(0)\n\n    // Log render start\n    logger.debug(`Component render start: ${props.componentType}`, {\n      componentId: props.componentId,\n      timestamp: new Date().toISOString(),\n    })\n\n    // SSR-safe: Measure on mount completion (client-side only)\n    onMount(() => {\n      if (typeof performance !== 'undefined') {\n        setRenderStart(performance.now())\n\n        requestAnimationFrame(() => {\n          const renderEnd = performance.now()\n          const duration = renderEnd - renderStart()\n\n          logger.info(`Component rendered: ${props.componentType}`, {\n            componentId: props.componentId,\n            renderDuration: duration,\n            timestamp: new Date().toISOString(),\n          })\n\n          // Warn if render is slow (>50ms target)\n          if (duration > 50) {\n            logger.warn(`Slow component render: ${props.componentType}`, {\n              componentId: props.componentId,\n              renderDuration: duration,\n              threshold: 50,\n            })\n          }\n        })\n      }\n    })\n\n    return <WrappedComponent {...props} />\n  }\n}\n\n/**\n * Hook to track component lifecycle events\n */\nexport function useComponentTelemetry(componentId: string, componentType: string) {\n  const [mountTime, setMountTime] = createSignal(0)\n\n  // SSR-safe: Initialize mount time on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setMountTime(performance.now())\n    }\n\n    // Log mount\n    logger.debug(`Component mounted: ${componentType}`, {\n      componentId,\n      timestamp: new Date().toISOString(),\n    })\n  })\n\n  // Return cleanup function for unmount\n  return () => {\n    const lifetime = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - mountTime()\n      : 0\n    logger.debug(`Component unmounted: ${componentType}`, {\n      componentId,\n      lifetime,\n      timestamp: new Date().toISOString(),\n    })\n  }\n}\n"],"names":["logger","createLogger","DefaultErrorFallback","props","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$0","_el$1","_co$","_$getNextMarker","_el$8","_el$10","_el$11","_co$2","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","componentType","componentId","slice","_$createComponent","Show","when","import","children","_el$12","_tmpl$","error","message","allowRetry","_el$13","_tmpl$2","_$addEventListener","onRetry","_$runHydrationEvents","GenerativeUIErrorBoundary","retryKey","setRetryKey","createSignal","renderStartTime","setRenderStartTime","onMount","performance","now","handleError","renderDuration","isServer","userAgent","navigator","viewport","window","width","innerWidth","height","innerHeight","errorContext","errorMessage","errorStack","stack","retryCount","timestamp","Date","toISOString","onError","type","details","handleRetry","newRetryCount","info","ErrorBoundary","fallback","undefined","_$memo","_$delegateEvents"],"mappings":"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"}

package/dist/components/GenerativeUIErrorBoundary.js

@@ -105,7 +105,7 @@ const GenerativeUIErrorBoundary = (props) => {
     },
     get children() {
       return (() => {
-        retryKey();
+        void retryKey();
         return memo(() => props.children);
       })();
     }

package/dist/components/GenerativeUIErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenerativeUIErrorBoundary.js","sources":["../../src/components/GenerativeUIErrorBoundary.tsx"],"sourcesContent":["/**\n * Generative UI Error Boundary with Telemetry\n * Phase 0: Error isolation + structured logging\n *\n * Features:\n * - Component-level error isolation\n * - Structured logging with context\n * - Performance timing\n * - Retry mechanism\n * - User-friendly fallback UI\n */\n\nimport { Component, ErrorBoundary, createSignal, Show, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { createLogger } from '../utils/logger'\nimport type { RendererError } from '../types'\n\nconst logger = createLogger('generative-ui')\n\n/**\n * Props for GenerativeUIErrorBoundary\n */\nexport interface GenerativeUIErrorBoundaryProps {\n  /**\n   * Component identifier for telemetry\n   */\n  componentId: string\n\n  /**\n   * Component type for context\n   */\n  componentType: string\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Allow retry on error\n   */\n  allowRetry?: boolean\n\n  /**\n   * Child components to wrap\n   */\n  children: any\n\n  /**\n   * Custom fallback UI (optional)\n   */\n  fallback?: (error: Error, retry?: () => void) => any\n}\n\n/**\n * Default fallback UI for errors\n */\nfunction DefaultErrorFallback(props: {\n  error: Error\n  componentId: string\n  componentType: string\n  allowRetry?: boolean\n  onRetry?: () => void\n}) {\n  return (\n    <div class=\"w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-shrink-0\">\n          <svg\n            class=\"w-5 h-5 text-yellow-600 dark:text-yellow-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n        <div class=\"flex-1 min-w-0\">\n          <p class=\"text-sm font-medium text-yellow-900 dark:text-yellow-100\">\n            Component Failed to Render\n          </p>\n          <p class=\"text-xs text-yellow-700 dark:text-yellow-300 mt-1\">\n            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...\n          </p>\n          <Show when={import.meta.env.DEV}>\n            <p class=\"text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono\">\n              {props.error.message}\n            </p>\n          </Show>\n          <Show when={props.allowRetry}>\n            <button\n              onClick={props.onRetry}\n              class=\"mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline\"\n            >\n              Retry Rendering\n            </button>\n          </Show>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Generative UI Error Boundary Component\n */\nexport const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps> = (props) => {\n  const [retryKey, setRetryKey] = createSignal(0)\n  const [renderStartTime, setRenderStartTime] = createSignal(0)\n\n  // SSR-safe: Initialize performance timing on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setRenderStartTime(performance.now())\n    }\n  })\n\n  // Handle error with telemetry\n  const handleError = (error: Error) => {\n    // SSR-safe: Calculate render duration\n    const renderDuration = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - renderStartTime()\n      : 0\n\n    // SSR-safe: Get client-only context\n    const userAgent = !isServer && typeof navigator !== 'undefined'\n      ? navigator.userAgent\n      : 'server'\n    const viewport = !isServer && typeof window !== 'undefined'\n      ? { width: window.innerWidth, height: window.innerHeight }\n      : { width: 0, height: 0 }\n\n    // Structure error context\n    const errorContext = {\n      componentId: props.componentId,\n      componentType: props.componentType,\n      errorMessage: error.message,\n      errorStack: error.stack,\n      renderDuration,\n      retryCount: retryKey(),\n      timestamp: new Date().toISOString(),\n      userAgent,\n      viewport,\n    }\n\n    // Log to structured logger\n    logger.error(`Component render failed: ${props.componentType}`, errorContext)\n\n    // Call error callback\n    props.onError?.({\n      type: 'render',\n      message: error.message,\n      componentId: props.componentId,\n      details: errorContext,\n    })\n\n    // In production, send to monitoring service\n    if (import.meta.env.PROD) {\n      // Future: Send to Sentry or other APM\n      // Sentry.captureException(error, { contexts: { component: errorContext } })\n    }\n  }\n\n  // Retry mechanism\n  const handleRetry = () => {\n    const newRetryCount = retryKey() + 1\n    logger.info(`Retrying component render: ${props.componentType}`, {\n      componentId: props.componentId,\n      retryCount: newRetryCount,\n    })\n    setRetryKey(newRetryCount)\n  }\n\n  return (\n    <ErrorBoundary\n      fallback={(error) => {\n        handleError(error)\n\n        // Use custom fallback if provided\n        if (props.fallback) {\n          return props.fallback(error, props.allowRetry ? handleRetry : undefined)\n        }\n\n        // Default fallback\n        return (\n          <DefaultErrorFallback\n            error={error}\n            componentId={props.componentId}\n            componentType={props.componentType}\n            allowRetry={props.allowRetry}\n            onRetry={handleRetry}\n          />\n        )\n      }}\n    >\n      {/* Key prop for forcing remount on retry */}\n      {(() => {\n        const _ = retryKey() // Access signal to track changes\n        return <>{props.children}</>\n      })()}\n    </ErrorBoundary>\n  )\n}\n\n/**\n * Performance monitoring wrapper\n * Logs render times for performance analysis\n */\nexport function withPerformanceMonitoring<P extends { componentId: string; componentType: string }>(\n  WrappedComponent: Component<P>\n) {\n  return (props: P) => {\n    const [renderStart, setRenderStart] = createSignal(0)\n\n    // Log render start\n    logger.debug(`Component render start: ${props.componentType}`, {\n      componentId: props.componentId,\n      timestamp: new Date().toISOString(),\n    })\n\n    // SSR-safe: Measure on mount completion (client-side only)\n    onMount(() => {\n      if (typeof performance !== 'undefined') {\n        setRenderStart(performance.now())\n\n        requestAnimationFrame(() => {\n          const renderEnd = performance.now()\n          const duration = renderEnd - renderStart()\n\n          logger.info(`Component rendered: ${props.componentType}`, {\n            componentId: props.componentId,\n            renderDuration: duration,\n            timestamp: new Date().toISOString(),\n          })\n\n          // Warn if render is slow (>50ms target)\n          if (duration > 50) {\n            logger.warn(`Slow component render: ${props.componentType}`, {\n              componentId: props.componentId,\n              renderDuration: duration,\n              threshold: 50,\n            })\n          }\n        })\n      }\n    })\n\n    return <WrappedComponent {...props} />\n  }\n}\n\n/**\n * Hook to track component lifecycle events\n */\nexport function useComponentTelemetry(componentId: string, componentType: string) {\n  const [mountTime, setMountTime] = createSignal(0)\n\n  // SSR-safe: Initialize mount time on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setMountTime(performance.now())\n    }\n\n    // Log mount\n    logger.debug(`Component mounted: ${componentType}`, {\n      componentId,\n      timestamp: new Date().toISOString(),\n    })\n  })\n\n  // Return cleanup function for unmount\n  return () => {\n    const lifetime = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - mountTime()\n      : 0\n    logger.debug(`Component unmounted: ${componentType}`, {\n      componentId,\n      lifetime,\n      timestamp: new Date().toISOString(),\n    })\n  }\n}\n"],"names":["logger","createLogger","DefaultErrorFallback","props","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$0","_el$1","_co$","_$getNextMarker","_el$8","_el$10","_el$11","_co$2","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","componentType","componentId","slice","_$createComponent","Show","when","import","children","_el$12","_tmpl$","error","message","allowRetry","_el$13","_tmpl$2","_$addEventListener","onRetry","_$runHydrationEvents","GenerativeUIErrorBoundary","retryKey","setRetryKey","createSignal","renderStartTime","setRenderStartTime","onMount","performance","now","handleError","renderDuration","isServer","userAgent","navigator","viewport","window","width","innerWidth","height","innerHeight","errorContext","errorMessage","errorStack","stack","retryCount","timestamp","Date","toISOString","onError","type","details","handleRetry","newRetryCount","info","ErrorBoundary","fallback","undefined","_$memo","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"GenerativeUIErrorBoundary.js","sources":["../../src/components/GenerativeUIErrorBoundary.tsx"],"sourcesContent":["/**\n * Generative UI Error Boundary with Telemetry\n * Phase 0: Error isolation + structured logging\n *\n * Features:\n * - Component-level error isolation\n * - Structured logging with context\n * - Performance timing\n * - Retry mechanism\n * - User-friendly fallback UI\n */\n\nimport { Component, ErrorBoundary, createSignal, Show, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { createLogger } from '../utils/logger'\nimport type { RendererError } from '../types'\n\nconst logger = createLogger('generative-ui')\n\n/**\n * Props for GenerativeUIErrorBoundary\n */\nexport interface GenerativeUIErrorBoundaryProps {\n  /**\n   * Component identifier for telemetry\n   */\n  componentId: string\n\n  /**\n   * Component type for context\n   */\n  componentType: string\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Allow retry on error\n   */\n  allowRetry?: boolean\n\n  /**\n   * Child components to wrap\n   */\n  children: any\n\n  /**\n   * Custom fallback UI (optional)\n   */\n  fallback?: (error: Error, retry?: () => void) => any\n}\n\n/**\n * Default fallback UI for errors\n */\nfunction DefaultErrorFallback(props: {\n  error: Error\n  componentId: string\n  componentType: string\n  allowRetry?: boolean\n  onRetry?: () => void\n}) {\n  return (\n    <div class=\"w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-shrink-0\">\n          <svg\n            class=\"w-5 h-5 text-yellow-600 dark:text-yellow-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n        <div class=\"flex-1 min-w-0\">\n          <p class=\"text-sm font-medium text-yellow-900 dark:text-yellow-100\">\n            Component Failed to Render\n          </p>\n          <p class=\"text-xs text-yellow-700 dark:text-yellow-300 mt-1\">\n            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...\n          </p>\n          <Show when={import.meta.env.DEV}>\n            <p class=\"text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono\">\n              {props.error.message}\n            </p>\n          </Show>\n          <Show when={props.allowRetry}>\n            <button\n              onClick={props.onRetry}\n              class=\"mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline\"\n            >\n              Retry Rendering\n            </button>\n          </Show>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Generative UI Error Boundary Component\n */\nexport const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps> = (props) => {\n  const [retryKey, setRetryKey] = createSignal(0)\n  const [renderStartTime, setRenderStartTime] = createSignal(0)\n\n  // SSR-safe: Initialize performance timing on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setRenderStartTime(performance.now())\n    }\n  })\n\n  // Handle error with telemetry\n  const handleError = (error: Error) => {\n    // SSR-safe: Calculate render duration\n    const renderDuration = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - renderStartTime()\n      : 0\n\n    // SSR-safe: Get client-only context\n    const userAgent = !isServer && typeof navigator !== 'undefined'\n      ? navigator.userAgent\n      : 'server'\n    const viewport = !isServer && typeof window !== 'undefined'\n      ? { width: window.innerWidth, height: window.innerHeight }\n      : { width: 0, height: 0 }\n\n    // Structure error context\n    const errorContext = {\n      componentId: props.componentId,\n      componentType: props.componentType,\n      errorMessage: error.message,\n      errorStack: error.stack,\n      renderDuration,\n      retryCount: retryKey(),\n      timestamp: new Date().toISOString(),\n      userAgent,\n      viewport,\n    }\n\n    // Log to structured logger\n    logger.error(`Component render failed: ${props.componentType}`, errorContext)\n\n    // Call error callback\n    props.onError?.({\n      type: 'render',\n      message: error.message,\n      componentId: props.componentId,\n      details: errorContext,\n    })\n\n    // In production, send to monitoring service\n    if (import.meta.env.PROD) {\n      // Future: Send to Sentry or other APM\n      // Sentry.captureException(error, { contexts: { component: errorContext } })\n    }\n  }\n\n  // Retry mechanism\n  const handleRetry = () => {\n    const newRetryCount = retryKey() + 1\n    logger.info(`Retrying component render: ${props.componentType}`, {\n      componentId: props.componentId,\n      retryCount: newRetryCount,\n    })\n    setRetryKey(newRetryCount)\n  }\n\n  return (\n    <ErrorBoundary\n      fallback={(error) => {\n        handleError(error)\n\n        // Use custom fallback if provided\n        if (props.fallback) {\n          return props.fallback(error, props.allowRetry ? handleRetry : undefined)\n        }\n\n        // Default fallback\n        return (\n          <DefaultErrorFallback\n            error={error}\n            componentId={props.componentId}\n            componentType={props.componentType}\n            allowRetry={props.allowRetry}\n            onRetry={handleRetry}\n          />\n        )\n      }}\n    >\n      {/* Key prop for forcing remount on retry */}\n      {(() => {\n        void retryKey() // Access signal to track changes\n        return <>{props.children}</>\n      })()}\n    </ErrorBoundary>\n  )\n}\n\n/**\n * Performance monitoring wrapper\n * Logs render times for performance analysis\n */\nexport function withPerformanceMonitoring<P extends { componentId: string; componentType: string }>(\n  WrappedComponent: Component<P>\n) {\n  return (props: P) => {\n    const [renderStart, setRenderStart] = createSignal(0)\n\n    // Log render start\n    logger.debug(`Component render start: ${props.componentType}`, {\n      componentId: props.componentId,\n      timestamp: new Date().toISOString(),\n    })\n\n    // SSR-safe: Measure on mount completion (client-side only)\n    onMount(() => {\n      if (typeof performance !== 'undefined') {\n        setRenderStart(performance.now())\n\n        requestAnimationFrame(() => {\n          const renderEnd = performance.now()\n          const duration = renderEnd - renderStart()\n\n          logger.info(`Component rendered: ${props.componentType}`, {\n            componentId: props.componentId,\n            renderDuration: duration,\n            timestamp: new Date().toISOString(),\n          })\n\n          // Warn if render is slow (>50ms target)\n          if (duration > 50) {\n            logger.warn(`Slow component render: ${props.componentType}`, {\n              componentId: props.componentId,\n              renderDuration: duration,\n              threshold: 50,\n            })\n          }\n        })\n      }\n    })\n\n    return <WrappedComponent {...props} />\n  }\n}\n\n/**\n * Hook to track component lifecycle events\n */\nexport function useComponentTelemetry(componentId: string, componentType: string) {\n  const [mountTime, setMountTime] = createSignal(0)\n\n  // SSR-safe: Initialize mount time on client only\n  onMount(() => {\n    if (typeof performance !== 'undefined') {\n      setMountTime(performance.now())\n    }\n\n    // Log mount\n    logger.debug(`Component mounted: ${componentType}`, {\n      componentId,\n      timestamp: new Date().toISOString(),\n    })\n  })\n\n  // Return cleanup function for unmount\n  return () => {\n    const lifetime = !isServer && typeof performance !== 'undefined'\n      ? performance.now() - mountTime()\n      : 0\n    logger.debug(`Component unmounted: ${componentType}`, {\n      componentId,\n      lifetime,\n      timestamp: new Date().toISOString(),\n    })\n  }\n}\n"],"names":["logger","createLogger","DefaultErrorFallback","props","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$0","_el$1","_co$","_$getNextMarker","_el$8","_el$10","_el$11","_co$2","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","componentType","componentId","slice","_$createComponent","Show","when","import","children","_el$12","_tmpl$","error","message","allowRetry","_el$13","_tmpl$2","_$addEventListener","onRetry","_$runHydrationEvents","GenerativeUIErrorBoundary","retryKey","setRetryKey","createSignal","renderStartTime","setRenderStartTime","onMount","performance","now","handleError","renderDuration","isServer","userAgent","navigator","viewport","window","width","innerWidth","height","innerHeight","errorContext","errorMessage","errorStack","stack","retryCount","timestamp","Date","toISOString","onError","type","details","handleRetry","newRetryCount","info","ErrorBoundary","fallback","undefined","_$memo","_$delegateEvents"],"mappings":";;;;AAiBA,MAAMA,SAASC,aAAa,eAAe;AAwC3C,SAASC,qBAAqBC,OAM3B;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAD,MAAAL,YAAAO,QAAAD,MAAAH,aAAA,CAAAK,OAAAC,IAAA,IAAAC,cAAAH,MAAAJ,WAAA,GAAAQ,QAAAH,MAAAL,aAAAS,SAAAD,MAAAR,aAAA,CAAAU,QAAAC,KAAA,IAAAJ,cAAAE,OAAAT,WAAA;AAAAU,WAAAV;AAAAA,QAAAY,SAAAV,MAAAF,aAAA,CAAAa,QAAAC,KAAA,IAAAP,cAAAK,OAAAZ,WAAA,GAAAe,SAAAF,OAAAb,aAAA,CAAAgB,QAAAC,KAAA,IAAAV,cAAAQ,OAAAf,WAAA;AAAAkB,WAAAhB,OAAA,MAuBiBV,MAAM2B,iBAAiB,WAASd,OAAAC,IAAA;AAAAY,WAAAhB,OAAA;;AAASV,0BAAM4B,gBAAN5B,mBAAmB6B,MAAM,GAAG,OAAM;AAAA,OAASX,QAAAC,KAAA;AAAAO,WAAAnB,OAAAuB,gBAE5FC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC;AAAAA,MAAmB;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,SAAAjC,eAAAkC,MAAA;AAAAV,eAAAS,QAAA,MAE1BnC,MAAMqC,MAAMC,OAAO;AAAA,eAAAH;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAd,QAAAC,KAAA;AAAAI,WAAAnB,OAAAuB,gBAGvBC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhC,MAAMuC;AAAAA,MAAU;AAAA,MAAA,IAAAL,WAAA;AAAA,YAAAM,SAAAtC,eAAAuC,OAAA;AAAAC,yBAAAF,QAAA,SAEfxC,MAAM2C,SAAO,IAAA;AAAAC,2BAAAA;AAAA,eAAAJ;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAhB,QAAAC,KAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAUpC;AAKO,MAAM4C,4BAAwE7C,CAAAA,UAAU;AAC7F,QAAM,CAAC8C,UAAUC,WAAW,IAAIC,aAAa,CAAC;AAC9C,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIF,aAAa,CAAC;AAG5DG,UAAQ,MAAM;AACZ,QAAI,OAAOC,gBAAgB,aAAa;AACtCF,yBAAmBE,YAAYC,KAAK;AAAA,IACtC;AAAA,EACF,CAAC;AAGD,QAAMC,cAAcA,CAACjB,UAAiB;;AAEpC,UAAMkB,iBAAiB,CAACC,YAAY,OAAOJ,gBAAgB,cACvDA,YAAYC,IAAAA,IAAQJ,gBAAAA,IACpB;AAGJ,UAAMQ,YAAY,CAACD,YAAY,OAAOE,cAAc,cAChDA,UAAUD,YACV;AACJ,UAAME,WAAW,CAACH,YAAY,OAAOI,WAAW,cAC5C;AAAA,MAAEC,OAAOD,OAAOE;AAAAA,MAAYC,QAAQH,OAAOI;AAAAA,IAAAA,IAC3C;AAAA,MAAEH,OAAO;AAAA,MAAGE,QAAQ;AAAA,IAAA;AAGxB,UAAME,eAAe;AAAA,MACnBrC,aAAa5B,MAAM4B;AAAAA,MACnBD,eAAe3B,MAAM2B;AAAAA,MACrBuC,cAAc7B,MAAMC;AAAAA,MACpB6B,YAAY9B,MAAM+B;AAAAA,MAClBb;AAAAA,MACAc,YAAYvB,SAAAA;AAAAA,MACZwB,YAAW,oBAAIC,KAAAA,GAAOC,YAAAA;AAAAA,MACtBf;AAAAA,MACAE;AAAAA,IAAAA;AAIF9D,WAAOwC,MAAM,4BAA4BrC,MAAM2B,aAAa,IAAIsC,YAAY;AAG5EjE,gBAAMyE,YAANzE,+BAAgB;AAAA,MACd0E,MAAM;AAAA,MACNpC,SAASD,MAAMC;AAAAA,MACfV,aAAa5B,MAAM4B;AAAAA,MACnB+C,SAASV;AAAAA,IAAAA;AAAAA,EAQb;AAGA,QAAMW,cAAcA,MAAM;AACxB,UAAMC,gBAAgB/B,aAAa;AACnCjD,WAAOiF,KAAK,8BAA8B9E,MAAM2B,aAAa,IAAI;AAAA,MAC/DC,aAAa5B,MAAM4B;AAAAA,MACnByC,YAAYQ;AAAAA,IAAAA,CACb;AACD9B,gBAAY8B,aAAa;AAAA,EAC3B;AAEA,SAAA/C,gBACGiD,eAAa;AAAA,IACZC,UAAW3C,CAAAA,UAAU;AACnBiB,kBAAYjB,KAAK;AAGjB,UAAIrC,MAAMgF,UAAU;AAClB,eAAOhF,MAAMgF,SAAS3C,OAAOrC,MAAMuC,aAAaqC,cAAcK,MAAS;AAAA,MACzE;AAGA,aAAAnD,gBACG/B,sBAAoB;AAAA,QACnBsC;AAAAA,QAAY,IACZT,cAAW;AAAA,iBAAE5B,MAAM4B;AAAAA,QAAW;AAAA,QAAA,IAC9BD,gBAAa;AAAA,iBAAE3B,MAAM2B;AAAAA,QAAa;AAAA,QAAA,IAClCY,aAAU;AAAA,iBAAEvC,MAAMuC;AAAAA,QAAU;AAAA,QAC5BI,SAASiC;AAAAA,MAAAA,CAAW;AAAA,IAG1B;AAAA,IAAC,IAAA1C,WAAA;AAAA,cAGC,MAAM;AACN,aAAKY,SAAAA;AACL,eAAAoC,KAAA,MAAUlF,MAAMkC,QAAQ;AAAA,MAC1B,GAAA;AAAA,IAAI;AAAA,EAAA,CAAA;AAGV;AA+ECiD,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/GridRenderer.cjs

@@ -2,9 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
-const UIResourceRenderer = require("./UIResourceRenderer.cjs");
+const RenderContext = require("./RenderContext.cjs");
 var _tmpl$ = /* @__PURE__ */ web.template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"data-component-type=grid><div class="p-4 h-full">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="min-w-0 h-full">`);
-function getGridItemStyle(position, areas) {
+function getGridItemStyle(position, _areas) {
   if (!position) {
     return "grid-column: 1 / -1; grid-row: auto";
   }
@@ -26,6 +26,9 @@ function buildGridTemplateAreas(areas) {
   return areas.map((row) => `"${row.join(" ")}"`).join(" ");
 }
 const GridRenderer = (props) => {
+  const {
+    renderComponent
+  } = RenderContext.useRenderContext();
   const params = solidJs.createMemo(() => {
     const p = props.component.params;
     return {
@@ -55,12 +58,7 @@ const GridRenderer = (props) => {
       },
       children: (child) => (() => {
         var _el$3 = web.getNextElement(_tmpl$2);
-        web.insert(_el$3, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
-          content: child,
-          get onError() {
-            return props.onError;
-          }
-        }));
+        web.insert(_el$3, () => renderComponent(child, props.onError));
         web.effect((_$p) => web.style(_el$3, getGridItemStyle(child.position, params().areas), _$p));
         return _el$3;
       })()

package/dist/components/GridRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridRenderer.cjs","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      class=\"w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use UIResourceRenderer for recursive rendering */}\n              <UIResourceRenderer content={child} onError={props.onError} />\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","map","row","join","GridRenderer","props","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","UIResourceRenderer","content","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;;AAuDA,SAASA,iBAAiBC,UAAoCC,OAA4B;AAExF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,QAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,aAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,aAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBN,OAA2B;AACzD,SAAOA,MAAMO,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAMC,SAASC,QAAAA,WAAW,MAAM;AAC9B,UAAMC,IAAIH,MAAMI,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBlB,OAAOc,EAAEd;AAAAA,MACTmB,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,QAAAA,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIP,QAAQ,gDAAgDS,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBb,eAAS,4BAA4BS,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEd,SAASc,EAAEd,MAAMqB,SAAS,GAAG;AACjChB,eAAS,0BAA0BC,uBAAuBQ,EAAEd,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOK;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAiB,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,eAAAF,OAAAG,IAAAA,gBAOOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,IAAAA,eAAAU,OAAA;AAAAN,mBAAAK,OAAAJ,IAAAA,gBAMFM,uCAAkB;AAAA,UAACC,SAASJ;AAAAA,UAAK,IAAEK,UAAO;AAAA,mBAAEzB,MAAMyB;AAAAA,UAAO;AAAA,QAAA,CAAA,CAAA;AAAAC,YAAAA,OAAAC,CAAAA,QAAAC,IAAAA,MAAAP,OAJnDlC,iBAAiBiC,MAAMhC,UAAUa,OAAAA,EAASZ,KAAK,GAACsC,GAAA,CAAA;AAAA,eAAAN;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAK,QAAAA,OAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMI,UAAU2B,IAAEC,OAENvB,mBAAAA;AAAoBqB,cAAAD,IAAAI,KAAAC,IAAAA,aAAAvB,MAAA,qBAAAkB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,IAAAA,MAAAd,OAAAkB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAezD;;;"}
+{"version":3,"file":"GridRenderer.cjs","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n * Updated: Uses RenderContext to avoid circular dependencies\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { useRenderContext } from './RenderContext'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, _areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Use render context to avoid circular dependency\n  const { renderComponent } = useRenderContext()\n\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      class=\"w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use RenderContext for recursive rendering (avoids circular dependency) */}\n              {renderComponent(child, props.onError)}\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","_areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","areas","map","row","join","GridRenderer","props","renderComponent","useRenderContext","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;;AAwDA,SAASA,iBAAiBC,UAAoCC,QAA6B;AAEzF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,QAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,aAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,aAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBC,OAA2B;AACzD,SAAOA,MAAMC,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAoBC,+BAAAA;AAG5B,QAAMC,SAASC,QAAAA,WAAW,MAAM;AAC9B,UAAMC,IAAIL,MAAMM,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBd,OAAOU,EAAEV;AAAAA,MACTe,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,QAAAA,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIV,QAAQ,gDAAgDY,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBhB,eAAS,4BAA4BY,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEV,SAASU,EAAEV,MAAMiB,SAAS,GAAG;AACjCnB,eAAS,0BAA0BC,uBAAuBW,EAAEV,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOF;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAoB,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,eAAAF,OAAAG,IAAAA,gBAOOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,IAAAA,eAAAU,OAAA;AAAAN,YAAAA,OAAAK,OAAA,MAMFtB,gBAAgBqB,OAAOtB,MAAMyB,OAAO,CAAC;AAAAC,YAAAA,OAAAC,CAAAA,QAAAC,IAAAA,MAAAL,OAJ/BrC,iBAAiBoC,MAAMnC,UAAUgB,OAAAA,EAASR,KAAK,GAACgC,GAAA,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAG,QAAAA,OAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMM,UAAUyB,IAAEC,OAENrB,mBAAAA;AAAoBmB,cAAAD,IAAAI,KAAAC,IAAAA,aAAArB,MAAA,qBAAAgB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,IAAAA,MAAAZ,OAAAgB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAvB;AAAAA,EAAA,GAAA;AAezD;;;"}

package/dist/components/GridRenderer.d.ts

@@ -1,6 +1,7 @@
 /**
  * GridRenderer - CSS Grid layout component for nested layouts
  * Phase 5.0: Quick Wins - Enables template builder layouts
+ * Updated: Uses RenderContext to avoid circular dependencies
  */
 import { Component } from 'solid-js';
 import type { UIComponent } from '../types';

package/dist/components/GridRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GridRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAmB,MAAM,UAAU,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAGzD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IAElB;;OAEG;IACH,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAiCD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CAkDrD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"GridRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GridRenderer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAmB,MAAM,UAAU,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAGzD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IAElB;;OAEG;IACH,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAiCD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CAqDrD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/GridRenderer.js

@@ -1,8 +1,8 @@
 import { getNextElement, template, insert, createComponent, effect, style, setAttribute } from "solid-js/web";
 import { createMemo, For } from "solid-js";
-import { UIResourceRenderer } from "./UIResourceRenderer.js";
+import { useRenderContext } from "./RenderContext.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"data-component-type=grid><div class="p-4 h-full">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="min-w-0 h-full">`);
-function getGridItemStyle(position, areas) {
+function getGridItemStyle(position, _areas) {
   if (!position) {
     return "grid-column: 1 / -1; grid-row: auto";
   }
@@ -24,6 +24,9 @@ function buildGridTemplateAreas(areas) {
   return areas.map((row) => `"${row.join(" ")}"`).join(" ");
 }
 const GridRenderer = (props) => {
+  const {
+    renderComponent
+  } = useRenderContext();
   const params = createMemo(() => {
     const p = props.component.params;
     return {
@@ -53,12 +56,7 @@ const GridRenderer = (props) => {
       },
       children: (child) => (() => {
         var _el$3 = getNextElement(_tmpl$2);
-        insert(_el$3, createComponent(UIResourceRenderer, {
-          content: child,
-          get onError() {
-            return props.onError;
-          }
-        }));
+        insert(_el$3, () => renderComponent(child, props.onError));
         effect((_$p) => style(_el$3, getGridItemStyle(child.position, params().areas), _$p));
         return _el$3;
       })()