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

package/dist/components/ActionGroupRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroupRenderer.js","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, isExecuting } = useAction()\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (props.action.action === 'tool-call' && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n      case 'secondary':\n        return 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500'\n      case 'outline':\n        return 'border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'ghost':\n        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'danger':\n        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'\n      default:\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={props.action.url || '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && props.action.action === 'tool-call'}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && props.action.action === 'tool-call')}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || 'Action group'}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","isExecuting","useAction","handleClick","e","action","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","_$delegateEvents"],"mappings":";;;;AAwBA,MAAMA,eAGAC,CAAAA,UAAU;AACd,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,EAAAA,IAAgBC,UAAAA;AAEjC,QAAMC,cAAc,OAAOC,MAAkB;AAC3C,QAAIL,MAAMM,OAAOC,SAAU;AAE3B,QAAIP,MAAMM,OAAOA,WAAW,eAAeN,MAAMM,OAAOE,UAAU;AAChEH,QAAEI,eAAAA;AACF,YAAMR,QAAQD,MAAMM,OAAOE,UAAUR,MAAMM,OAAOI,UAAU,EAAE;AAAA,IAChE,WAAWV,MAAMM,OAAOA,WAAW,UAAUN,MAAMM,OAAOK,KAAK;AAC7DC,aAAOC,KAAKb,MAAMM,OAAOK,KAAK,UAAU,qBAAqB;AAAA,IAC/D;AAAA,EACF;AAEA,QAAMG,aAAaA,MACjBd,MAAMM,OAAOC,YAAaP,MAAMM,OAAOA,WAAW,eAAeJ,YAAAA;AAEnE,QAAMa,eAAeA,MAAM;AACzB,YAAQf,MAAMM,OAAOU,SAAAA;AAAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,YAAYA,MAAM;AACtB,YAAQjB,MAAMM,OAAOY,MAAAA;AAAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAGA,MAAIlB,MAAMM,OAAOa,SAAS,UAAWnB,MAAMM,OAAOA,WAAW,UAAUN,MAAMM,OAAOK,KAAM;AACxF,YAAA,MAAA;AAAA,UAAAS,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAA,CAAAC,OAAAC,IAAA,IAAAC,cAAAJ,MAAAK,WAAA,GAAAC,QAAAJ,MAAAG,aAAA,CAAAE,OAAAC,KAAA,IAAAJ,cAAAE,MAAAD,WAAA;AAAAI,aAAAZ,MAAAa,gBASKC,MAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEnC,MAAMM,OAAO8B;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,cAAAC,QAAAjB,eAAAkB,MAAA;AAAAP,iBAAAM,OAAA,MACCtC,MAAMM,OAAO8B,IAAI;AAAA,iBAAAE;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAb,OAAAC,IAAA;AAAAM,aAAAZ,MAAA,MAE9CpB,MAAMM,OAAOkC,OAAKV,OAAAC,KAAA;AAAAU,aAAAC,CAAAA,QAAA;AAAA,YAAAC,MAVb3C,MAAMM,OAAOK,OAAO,KAAGiC,OAGtB,8IAA8I7B,aAAAA,CAAc,IAAIE,WAAW,IAChLH,eAAe,sDAAsD,EAAE;AACvE6B,gBAAAD,IAAArC,KAAAwC,aAAAzB,MAAA,QAAAsB,IAAArC,IAAAsC,GAAA;AAAAC,iBAAAF,IAAAI,KAAAC,UAAA3B,MAAAsB,IAAAI,IAAAF,IAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,QAAArC,GAAA2C;AAAAA,QAAAF,GAAAE;AAAAA,MAAAA,CAAA;AAAA,aAAA5B;AAAAA,IAAA,GAAA;AAAA,EAQR;AAEA,UAAA,MAAA;AAAA,QAAA6B,QAAA5B,eAAA6B,OAAA,GAAAC,QAAAF,MAAAzB,YAAA,CAAA4B,OAAAC,KAAA,IAAA1B,cAAAwB,MAAAvB,WAAA,GAAA0B,SAAAF,MAAAxB,aAAA,CAAA2B,QAAAC,KAAA,IAAA7B,cAAA2B,OAAA1B,WAAA,GAAA6B,SAAAF,OAAA3B,aAAA,CAAA8B,QAAAC,KAAA,IAAAhC,cAAA8B,OAAA7B,WAAA;AAAAqB,UAAAW,UAGaxD;AAAW4B,WAAAiB,OAAAhB,gBAMnBC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE0B,KAAA,MAAA,CAAA,CAAA3D,YAAAA,CAAa,EAAA,KAAIF,MAAMM,OAAOA,WAAW;AAAA,MAAW;AAAA,MAAA,IAAA+B,WAAA;AAAA,eAAAhB,eAAAyC,OAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAV,OAAAC,KAAA;AAAArB,WAAAiB,OAAAhB,gBAG/DC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE0B,aAAA7D,MAAMM,OAAO8B,IAAI,OAAI,EAAElC,YAAAA,KAAiBF,MAAMM,OAAOA,WAAW;AAAA,MAAY;AAAA,MAAA,IAAA+B,WAAA;AAAA,YAAA0B,QAAA1C,eAAAkB,MAAA;AAAAP,eAAA+B,OAAA,MAC1D/D,MAAMM,OAAO8B,IAAI;AAAA,eAAA2B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAR,QAAAC,KAAA;AAAAxB,WAAAiB,OAAA,MAE9CjD,MAAMM,OAAOkC,OAAKkB,QAAAC,KAAA;AAAAlB,WAAAC,CAAAA,QAAA;AAAA,UAAAsB,OAXTlD,WAAAA,GAAYmD,OACf,8IAA8IlD,aAAAA,CAAc,IAAIE,UAAAA,CAAW,IAChLH,WAAAA,IAAe,kCAAkC,EAAE;AACnDkD,eAAAtB,IAAArC,KAAA6D,YAAAjB,OAAA,YAAAP,IAAArC,IAAA2D,IAAA;AAAAC,eAAAvB,IAAAI,KAAAC,UAAAE,OAAAP,IAAAI,IAAAmB,IAAA;AAAA,aAAAvB;AAAAA,IAAA,GAAA;AAAA,MAAArC,GAAA2C;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAmB,uBAAAA;AAAA,WAAAlB;AAAAA,EAAA,GAAA;AAWR;AAuBO,MAAMmB,sBAA4DpE,CAAAA,UAAU;AACjF,QAAMU,SAASA,MAAAA;;AAAMV,iBAAMU,YAAWV,WAAMqE,cAANrE,mBAAiBU,WAAgC;AAAA,MAAE4D,SAAS,CAAA;AAAA,IAAA;AAAA;AAElG,QAAMC,cAAcA,MAAM;;AACxB,aAAQ7D,YAAAA,MAAAA,mBAAU8D,QAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,WAAWA,MAAM;;AACrB,aAAQ/D,YAAAA,MAAAA,mBAAUgE,KAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,UAAA,MAAA;AAAA,QAAAC,SAAAtD,eAAAuD,OAAA;AAAA5C,WAAA2C,QAAA1C,gBAMK4C,KAAG;AAAA,MAAA,IAACC,OAAI;;AAAA,iBAAEpE,YAAAA,MAAAA,mBAAU4D,YAAW,CAAA;AAAA,MAAE;AAAA,MAAAjC,UAC/BA,CAAC/B,QAAQyE,UAAK9C,gBAAMlC,cAAY;AAAA,QAACO;AAAAA,QAAc,IAAEyE,QAAK;AAAA,iBAAEA,MAAAA;AAAAA,QAAO;AAAA,MAAA,CAAA;AAAA,IAAA,CAAI,CAAA;AAAAtC,WAAAC,CAAAA,QAAA;;AAAA,UAAAsC,OAL/D,GAAGT,YAAAA,CAAa,IAAIE,UAAU,MAAI/D,YAAAA,MAAAA,mBAAUuE,aAAY,WAAW,EAAE,IAAEC,SAElExE,YAAAA,MAAAA,mBAAU8B,UAAS;AAAcwC,eAAAtC,IAAArC,KAAA0C,UAAA4B,QAAAjC,IAAArC,IAAA2E,IAAA;AAAAE,eAAAxC,IAAAI,KAAAD,aAAA8B,QAAA,cAAAjC,IAAAI,IAAAoC,IAAA;AAAA,aAAAxC;AAAAA,IAAA,GAAA;AAAA,MAAArC,GAAA2C;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA2B;AAAAA,EAAA,GAAA;AAOnD;AAACQ,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/ActionRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRenderer.cjs","sources":["../../src/components/ActionRenderer.tsx"],"sourcesContent":["import { Component, Show } from 'solid-js'\n// import type { ActionSpec } from '@seed-ship/mcp-ui-spec'\ntype ActionSpec = any\n\nexport interface ActionRendererProps {\n    action: ActionSpec\n    onExecute: (toolName: string, params: any) => Promise<any>\n    disabled?: boolean\n}\n\nexport const ActionRenderer: Component<ActionRendererProps> = (props) => {\n    const handleClick = async () => {\n        if (props.disabled) return\n        await props.onExecute(props.action.toolName, props.action.params)\n    }\n\n    const variantClasses: Record<string, string> = {\n        primary: 'bg-blue-600 hover:bg-blue-700 text-white',\n        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',\n        danger: 'bg-red-600 hover:bg-red-700 text-white'\n    }\n\n    return (\n        <button\n            onClick={handleClick}\n            disabled={props.disabled}\n            class={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${variantClasses[props.action.variant || 'primary']\n                } ${props.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n        >\n            {props.action.label}\n        </button>\n    )\n}\n"],"names":["ActionRenderer","props","handleClick","disabled","onExecute","action","toolName","params","variantClasses","primary","secondary","danger","_el$","_$getNextElement","_tmpl$","$$click","_$insert","label","_$effect","_p$","_v$","_v$2","variant","e","_$setProperty","t","_$className","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;AAUO,MAAMA,iBAAkDC,CAAAA,UAAU;AACrE,QAAMC,cAAc,YAAY;AAC5B,QAAID,MAAME,SAAU;AACpB,UAAMF,MAAMG,UAAUH,MAAMI,OAAOC,UAAUL,MAAMI,OAAOE,MAAM;AAAA,EACpE;AAEA,QAAMC,iBAAyC;AAAA,IAC3CC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,QAAQ;AAAA,EAAA;AAGZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA;AAAAF,SAAAG,UAEiBb;AAAWc,QAAAA,OAAAJ,MAAA,MAKnBX,MAAMI,OAAOY,KAAK;AAAAC,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAJTnB,MAAME,UAAQkB,OACjB,gEAAgEb,eAAeP,MAAMI,OAAOiB,WAAW,SAAS,CAAC,IAChHrB,MAAME,WAAW,kCAAkC,EAAE;AAAEiB,cAAAD,IAAAI,KAAAC,IAAAA,YAAAZ,MAAA,YAAAO,IAAAI,IAAAH,GAAA;AAAAC,eAAAF,IAAAM,KAAAC,IAAAA,UAAAd,MAAAO,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAK3E;AAACiB,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"ActionRenderer.cjs","sources":["../../src/components/ActionRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\n// import type { ActionSpec } from '@seed-ship/mcp-ui-spec'\ntype ActionSpec = any\n\nexport interface ActionRendererProps {\n    action: ActionSpec\n    onExecute: (toolName: string, params: any) => Promise<any>\n    disabled?: boolean\n}\n\nexport const ActionRenderer: Component<ActionRendererProps> = (props) => {\n    const handleClick = async () => {\n        if (props.disabled) return\n        await props.onExecute(props.action.toolName, props.action.params)\n    }\n\n    const variantClasses: Record<string, string> = {\n        primary: 'bg-blue-600 hover:bg-blue-700 text-white',\n        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',\n        danger: 'bg-red-600 hover:bg-red-700 text-white'\n    }\n\n    return (\n        <button\n            onClick={handleClick}\n            disabled={props.disabled}\n            class={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${variantClasses[props.action.variant || 'primary']\n                } ${props.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n        >\n            {props.action.label}\n        </button>\n    )\n}\n"],"names":["ActionRenderer","props","handleClick","disabled","onExecute","action","toolName","params","variantClasses","primary","secondary","danger","_el$","_$getNextElement","_tmpl$","$$click","_$insert","label","_$effect","_p$","_v$","_v$2","variant","e","_$setProperty","t","_$className","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;AAUO,MAAMA,iBAAkDC,CAAAA,UAAU;AACrE,QAAMC,cAAc,YAAY;AAC5B,QAAID,MAAME,SAAU;AACpB,UAAMF,MAAMG,UAAUH,MAAMI,OAAOC,UAAUL,MAAMI,OAAOE,MAAM;AAAA,EACpE;AAEA,QAAMC,iBAAyC;AAAA,IAC3CC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,QAAQ;AAAA,EAAA;AAGZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA;AAAAF,SAAAG,UAEiBb;AAAWc,QAAAA,OAAAJ,MAAA,MAKnBX,MAAMI,OAAOY,KAAK;AAAAC,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAJTnB,MAAME,UAAQkB,OACjB,gEAAgEb,eAAeP,MAAMI,OAAOiB,WAAW,SAAS,CAAC,IAChHrB,MAAME,WAAW,kCAAkC,EAAE;AAAEiB,cAAAD,IAAAI,KAAAC,IAAAA,YAAAZ,MAAA,YAAAO,IAAAI,IAAAH,GAAA;AAAAC,eAAAF,IAAAM,KAAAC,IAAAA,UAAAd,MAAAO,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAK3E;AAACiB,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ActionRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAA;AAE1C,KAAK,UAAU,GAAG,GAAG,CAAA;AAErB,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,UAAU,CAAA;IAClB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAsBzD,CAAA"}
+{"version":3,"file":"ActionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ActionRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,KAAK,UAAU,GAAG,GAAG,CAAA;AAErB,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,UAAU,CAAA;IAClB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAsBzD,CAAA"}

package/dist/components/ActionRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRenderer.js","sources":["../../src/components/ActionRenderer.tsx"],"sourcesContent":["import { Component, Show } from 'solid-js'\n// import type { ActionSpec } from '@seed-ship/mcp-ui-spec'\ntype ActionSpec = any\n\nexport interface ActionRendererProps {\n    action: ActionSpec\n    onExecute: (toolName: string, params: any) => Promise<any>\n    disabled?: boolean\n}\n\nexport const ActionRenderer: Component<ActionRendererProps> = (props) => {\n    const handleClick = async () => {\n        if (props.disabled) return\n        await props.onExecute(props.action.toolName, props.action.params)\n    }\n\n    const variantClasses: Record<string, string> = {\n        primary: 'bg-blue-600 hover:bg-blue-700 text-white',\n        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',\n        danger: 'bg-red-600 hover:bg-red-700 text-white'\n    }\n\n    return (\n        <button\n            onClick={handleClick}\n            disabled={props.disabled}\n            class={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${variantClasses[props.action.variant || 'primary']\n                } ${props.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n        >\n            {props.action.label}\n        </button>\n    )\n}\n"],"names":["ActionRenderer","props","handleClick","disabled","onExecute","action","toolName","params","variantClasses","primary","secondary","danger","_el$","_$getNextElement","_tmpl$","$$click","_$insert","label","_$effect","_p$","_v$","_v$2","variant","e","_$setProperty","t","_$className","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;AAUO,MAAMA,iBAAkDC,CAAAA,UAAU;AACrE,QAAMC,cAAc,YAAY;AAC5B,QAAID,MAAME,SAAU;AACpB,UAAMF,MAAMG,UAAUH,MAAMI,OAAOC,UAAUL,MAAMI,OAAOE,MAAM;AAAA,EACpE;AAEA,QAAMC,iBAAyC;AAAA,IAC3CC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,QAAQ;AAAA,EAAA;AAGZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA;AAAAF,SAAAG,UAEiBb;AAAWc,WAAAJ,MAAA,MAKnBX,MAAMI,OAAOY,KAAK;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAJTnB,MAAME,UAAQkB,OACjB,gEAAgEb,eAAeP,MAAMI,OAAOiB,WAAW,SAAS,CAAC,IAChHrB,MAAME,WAAW,kCAAkC,EAAE;AAAEiB,cAAAD,IAAAI,KAAAC,YAAAZ,MAAA,YAAAO,IAAAI,IAAAH,GAAA;AAAAC,eAAAF,IAAAM,KAAAC,UAAAd,MAAAO,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAK3E;AAACiB,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"ActionRenderer.js","sources":["../../src/components/ActionRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\n// import type { ActionSpec } from '@seed-ship/mcp-ui-spec'\ntype ActionSpec = any\n\nexport interface ActionRendererProps {\n    action: ActionSpec\n    onExecute: (toolName: string, params: any) => Promise<any>\n    disabled?: boolean\n}\n\nexport const ActionRenderer: Component<ActionRendererProps> = (props) => {\n    const handleClick = async () => {\n        if (props.disabled) return\n        await props.onExecute(props.action.toolName, props.action.params)\n    }\n\n    const variantClasses: Record<string, string> = {\n        primary: 'bg-blue-600 hover:bg-blue-700 text-white',\n        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',\n        danger: 'bg-red-600 hover:bg-red-700 text-white'\n    }\n\n    return (\n        <button\n            onClick={handleClick}\n            disabled={props.disabled}\n            class={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${variantClasses[props.action.variant || 'primary']\n                } ${props.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n        >\n            {props.action.label}\n        </button>\n    )\n}\n"],"names":["ActionRenderer","props","handleClick","disabled","onExecute","action","toolName","params","variantClasses","primary","secondary","danger","_el$","_$getNextElement","_tmpl$","$$click","_$insert","label","_$effect","_p$","_v$","_v$2","variant","e","_$setProperty","t","_$className","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;AAUO,MAAMA,iBAAkDC,CAAAA,UAAU;AACrE,QAAMC,cAAc,YAAY;AAC5B,QAAID,MAAME,SAAU;AACpB,UAAMF,MAAMG,UAAUH,MAAMI,OAAOC,UAAUL,MAAMI,OAAOE,MAAM;AAAA,EACpE;AAEA,QAAMC,iBAAyC;AAAA,IAC3CC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,QAAQ;AAAA,EAAA;AAGZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA;AAAAF,SAAAG,UAEiBb;AAAWc,WAAAJ,MAAA,MAKnBX,MAAMI,OAAOY,KAAK;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAJTnB,MAAME,UAAQkB,OACjB,gEAAgEb,eAAeP,MAAMI,OAAOiB,WAAW,SAAS,CAAC,IAChHrB,MAAME,WAAW,kCAAkC,EAAE;AAAEiB,cAAAD,IAAAI,KAAAC,YAAAZ,MAAA,YAAAO,IAAAI,IAAAH,GAAA;AAAAC,eAAAF,IAAAM,KAAAC,UAAAd,MAAAO,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAK3E;AAACiB,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/CarouselRenderer.cjs

@@ -2,12 +2,15 @@
 Object.defineProperty(exports, 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="relative group"><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
 const CarouselRenderer = (props) => {
   let scrollContainer;
   const [canScrollLeft, setCanScrollLeft] = solidJs.createSignal(false);
   const [canScrollRight, setCanScrollRight] = solidJs.createSignal(true);
+  const {
+    renderComponent
+  } = RenderContext.useRenderContext();
   const checkScroll = () => {
     if (web.isServer || !scrollContainer) return;
     setCanScrollLeft(scrollContainer.scrollLeft > 0);
@@ -34,9 +37,7 @@ const CarouselRenderer = (props) => {
       },
       children: (item) => (() => {
         var _el$5 = web.getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
-        web.insert(_el$6, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
-          content: item
-        }));
+        web.insert(_el$6, () => renderComponent(item));
         return _el$5;
       })()
     }));

package/dist/components/CarouselRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.cjs","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n// Local definition to avoid missing module error\ntype UIComponent = any\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                <UIResourceRenderer content={item} />\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","UIResourceRenderer","content","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;;AAYO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,QAAAA,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,QAAAA,aAAa,IAAI;AAE7D,QAAMG,cAAcA,MAAM;AACtB,QAAIC,IAAAA,YAAY,CAACP,gBAAiB;AAClCE,qBAAiBF,gBAAgBQ,aAAa,CAAC;AAC/CH,sBACIL,gBAAgBQ,aAAaR,gBAAgBS,cAAcT,gBAAgBU,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,IAAAA,YAAY,CAACP,gBAAiB;AAClC,UAAMa,eAAeb,gBAAgBU,cAAc;AACnDV,oBAAgBc,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB3B;AAAe,WAAA2B,UAAA,aAAAC,IAAAA,IAAAD,OAAAH,KAAA,IAAfxB,kBAAewB;AAAAK,eAAAL,OAAAM,IAAAA,gBAKnBC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjC,MAAMkC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,IAAAA,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,mBAAAS,OAAAR,IAAAA,gBAGOS,uCAAkB;AAAA,UAACC,SAASL;AAAAA,QAAAA,CAAI,CAAA;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAG5C,CAAA;AAAAK,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,IAAAA,UAAA1B,OAAAsB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,IAAAA,UAAAxB,OAAAoB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AA0BtB;AAACiC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"CarouselRenderer.cjs","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;;AAUO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,QAAAA,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,QAAAA,aAAa,IAAI;AAG7D,QAAM;AAAA,IAAEG;AAAAA,EAAAA,IAAoBC,+BAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,IAAAA,YAAY,CAACT,gBAAiB;AAClCE,qBAAiBF,gBAAgBU,aAAa,CAAC;AAC/CL,sBACIL,gBAAgBU,aAAaV,gBAAgBW,cAAcX,gBAAgBY,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,IAAAA,YAAY,CAACT,gBAAiB;AAClC,UAAMe,eAAef,gBAAgBY,cAAc;AACnDZ,oBAAgBgB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB7B;AAAe,WAAA6B,UAAA,aAAAC,IAAAA,IAAAD,OAAAH,KAAA,IAAf1B,kBAAe0B;AAAAK,eAAAL,OAAAM,IAAAA,gBAKnBC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,MAAMoC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,IAAAA,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,YAAAA,OAAAS,OAAA,MAGOlC,gBAAgB+B,IAAI,CAAC;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAGjC,CAAA;AAAAG,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,IAAAA,UAAAxB,OAAAoB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,IAAAA,UAAAtB,OAAAkB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAA9B;AAAAA,EAAA,GAAA;AA0BtB;AAAC+B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/components/CarouselRenderer.d.ts

@@ -1,9 +1,8 @@
 import { Component } from 'solid-js';
-type UIComponent = any;
+import type { UIComponent } from '../types';
 export interface CarouselRendererProps {
     items: UIComponent[];
     height?: string;
 }
 export declare const CarouselRenderer: Component<CarouselRendererProps>;
-export {};
 //# sourceMappingURL=CarouselRenderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CarouselRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,UAAU,CAAA;AAKhE,KAAK,WAAW,GAAG,GAAG,CAAA;AAEtB,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAgE7D,CAAA"}
+{"version":3,"file":"CarouselRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CarouselRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,UAAU,CAAA;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAmE7D,CAAA"}

package/dist/components/CarouselRenderer.js

@@ -1,11 +1,14 @@
 import { delegateEvents, getNextElement, template, insert, createComponent, effect, className, runHydrationEvents, isServer, use } from "solid-js/web";
 import { createSignal, For } from "solid-js";
-import { UIResourceRenderer } from "./UIResourceRenderer.js";
+import { useRenderContext } from "./RenderContext.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class="relative group"><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
 const CarouselRenderer = (props) => {
   let scrollContainer;
   const [canScrollLeft, setCanScrollLeft] = createSignal(false);
   const [canScrollRight, setCanScrollRight] = createSignal(true);
+  const {
+    renderComponent
+  } = useRenderContext();
   const checkScroll = () => {
     if (isServer || !scrollContainer) return;
     setCanScrollLeft(scrollContainer.scrollLeft > 0);
@@ -32,9 +35,7 @@ const CarouselRenderer = (props) => {
       },
       children: (item) => (() => {
         var _el$5 = getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
-        insert(_el$6, createComponent(UIResourceRenderer, {
-          content: item
-        }));
+        insert(_el$6, () => renderComponent(item));
         return _el$5;
       })()
     }));

package/dist/components/CarouselRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.js","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal, onMount } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n// Local definition to avoid missing module error\ntype UIComponent = any\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                <UIResourceRenderer content={item} />\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","UIResourceRenderer","content","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;AAYO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,aAAa,IAAI;AAE7D,QAAMG,cAAcA,MAAM;AACtB,QAAIC,YAAY,CAACP,gBAAiB;AAClCE,qBAAiBF,gBAAgBQ,aAAa,CAAC;AAC/CH,sBACIL,gBAAgBQ,aAAaR,gBAAgBS,cAAcT,gBAAgBU,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,YAAY,CAACP,gBAAiB;AAClC,UAAMa,eAAeb,gBAAgBU,cAAc;AACnDV,oBAAgBc,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB3B;AAAe,WAAA2B,UAAA,aAAAC,IAAAD,OAAAH,KAAA,IAAfxB,kBAAewB;AAAAK,WAAAL,OAAAM,gBAKnBC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjC,MAAMkC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,eAAAS,OAAAR,gBAGOS,oBAAkB;AAAA,UAACC,SAASL;AAAAA,QAAAA,CAAI,CAAA;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAG5C,CAAA;AAAAK,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,UAAA1B,OAAAsB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,UAAAxB,OAAAoB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AA0BtB;AAACiC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"CarouselRenderer.js","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;AAUO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,aAAa,IAAI;AAG7D,QAAM;AAAA,IAAEG;AAAAA,EAAAA,IAAoBC,iBAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,YAAY,CAACT,gBAAiB;AAClCE,qBAAiBF,gBAAgBU,aAAa,CAAC;AAC/CL,sBACIL,gBAAgBU,aAAaV,gBAAgBW,cAAcX,gBAAgBY,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,YAAY,CAACT,gBAAiB;AAClC,UAAMe,eAAef,gBAAgBY,cAAc;AACnDZ,oBAAgBgB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB7B;AAAe,WAAA6B,UAAA,aAAAC,IAAAD,OAAAH,KAAA,IAAf1B,kBAAe0B;AAAAK,WAAAL,OAAAM,gBAKnBC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,MAAMoC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,eAAAS,OAAA,MAGOlC,gBAAgB+B,IAAI,CAAC;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAGjC,CAAA;AAAAG,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,UAAAxB,OAAAoB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,UAAAtB,OAAAkB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAA9B;AAAAA,EAAA,GAAA;AA0BtB;AAAC+B,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/ChartJSRenderer.cjs

@@ -0,0 +1,138 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 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"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4"><!$><!/><!$><!/><!$><!/><div class="w-full h-[250px]"><canvas>`);
+let ChartJS = null;
+let chartJSLoadPromise = null;
+const loadChartJS = async () => {
+  if (ChartJS) return ChartJS;
+  if (!chartJSLoadPromise) {
+    chartJSLoadPromise = import("chart.js/auto").then((module2) => {
+      ChartJS = module2.default || module2.Chart;
+      return ChartJS;
+    }).catch((err) => {
+      chartJSLoadPromise = null;
+      throw err;
+    });
+  }
+  return chartJSLoadPromise;
+};
+async function isChartJSAvailable() {
+  try {
+    await loadChartJS();
+    return true;
+  } catch {
+    return false;
+  }
+}
+const ChartJSRenderer = (props) => {
+  const [isLoading, setIsLoading] = solidJs.createSignal(true);
+  const [error, setError] = solidJs.createSignal();
+  let canvasRef;
+  let chartInstance;
+  const params = () => props.component.params;
+  solidJs.createEffect(async () => {
+    var _a, _b, _c, _d;
+    if (!canvasRef) return;
+    const chartParams = params();
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const Chart = await loadChartJS();
+      if (chartInstance) {
+        chartInstance.destroy();
+        chartInstance = null;
+      }
+      chartInstance = new Chart(canvasRef, {
+        type: chartParams.type,
+        data: chartParams.data,
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          ...chartParams.options,
+          plugins: {
+            ...(_a = chartParams.options) == null ? void 0 : _a.plugins,
+            legend: {
+              display: true,
+              position: "bottom",
+              ...(_c = (_b = chartParams.options) == null ? void 0 : _b.plugins) == null ? void 0 : _c.legend
+            }
+          }
+        }
+      });
+      setIsLoading(false);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Chart rendering failed");
+      setError(error2.message);
+      setIsLoading(false);
+      (_d = props.onError) == null ? void 0 : _d.call(props, error2);
+    }
+  });
+  solidJs.onCleanup(() => {
+    if (chartInstance) {
+      chartInstance.destroy();
+      chartInstance = null;
+    }
+  });
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$4), _el$1 = _el$.firstChild, [_el$10, _co$] = web.getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = web.getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = web.getNextMarker(_el$13.nextSibling), _el$9 = _el$14.nextSibling, _el$0 = _el$9.firstChild;
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return params().title;
+      },
+      get children() {
+        var _el$2 = web.getNextElement(_tmpl$);
+        web.insert(_el$2, () => params().title);
+        return _el$2;
+      }
+    }), _el$10, _co$);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return isLoading();
+      },
+      get children() {
+        return web.getNextElement(_tmpl$2);
+      }
+    }), _el$12, _co$2);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return error();
+      },
+      get children() {
+        var _el$4 = web.getNextElement(_tmpl$3), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+        web.insert(_el$8, error);
+        return _el$4;
+      }
+    }), _el$14, _co$3);
+    var _ref$ = canvasRef;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$0) : canvasRef = _el$0;
+    web.effect((_$p) => web.setStyleProperty(_el$9, "display", error() ? "none" : "block"));
+    return _el$;
+  })();
+};
+exports.ChartJSRenderer = ChartJSRenderer;
+exports.isChartJSAvailable = isChartJSAvailable;
+//# sourceMappingURL=ChartJSRenderer.cjs.map

package/dist/components/ChartJSRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartJSRenderer.cjs","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <div class=\"relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4\">\n      <Show when={params().title}>\n        <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white mb-3\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <Show when={isLoading()}>\n        <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n          <div class=\"flex flex-col items-center gap-2\">\n            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n            <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n          </div>\n        </div>\n      </Show>\n\n      <Show when={error()}>\n        <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n          <div class=\"text-center\">\n            <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n              <svg\n                class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\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            <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n            <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n          </div>\n        </div>\n      </Show>\n\n      <div\n        class=\"w-full h-[250px]\"\n        style={{ display: error() ? 'none' : 'block' }}\n      >\n        <canvas ref={canvasRef} />\n      </div>\n    </div>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_el$","_$getNextElement","_tmpl$4","_el$1","firstChild","_el$10","_co$","_$getNextMarker","nextSibling","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","_el$9","_el$0","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_tmpl$2","_el$4","_tmpl$3","_el$5","_el$6","_el$7","_el$8","_ref$","_$use","_$effect","_$p","_$setStyleProperty"],"mappings":"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"}

package/dist/components/ChartJSRenderer.d.ts

@@ -0,0 +1,49 @@
+/**
+ * ChartJSRenderer - Native Chart.js rendering
+ * Sprint 4: State & Charts
+ *
+ * Requires chart.js peer dependency:
+ * ```
+ * pnpm add chart.js
+ * ```
+ */
+import { Component } from 'solid-js';
+import type { UIComponent } from '../types';
+/**
+ * Check if Chart.js is available
+ */
+export declare function isChartJSAvailable(): Promise<boolean>;
+export interface ChartJSRendererProps {
+    /**
+     * UIComponent with chart params
+     */
+    component: UIComponent;
+    /**
+     * Error callback
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Native Chart.js renderer component
+ *
+ * @example
+ * ```tsx
+ * const chartComponent: UIComponent = {
+ *   id: 'revenue-chart',
+ *   type: 'chart',
+ *   position: { colStart: 1, colSpan: 6 },
+ *   params: {
+ *     type: 'bar',
+ *     title: 'Monthly Revenue',
+ *     data: {
+ *       labels: ['Jan', 'Feb', 'Mar'],
+ *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]
+ *     },
+ *     renderer: 'native',
+ *   },
+ * }
+ * <ChartJSRenderer component={chartComponent} />
+ * ```
+ */
+export declare const ChartJSRenderer: Component<ChartJSRendererProps>;
+//# sourceMappingURL=ChartJSRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartJSRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ChartJSRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAA+C,MAAM,UAAU,CAAA;AACjF,OAAO,KAAK,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAA;AAwBjE;;GAEG;AACH,wBAAsB,kBAAkB,IAAI,OAAO,CAAC,OAAO,CAAC,CAO3D;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CAgH3D,CAAA"}

package/dist/components/ChartJSRenderer.js

@@ -0,0 +1,116 @@
+import { getNextElement, template, getNextMarker, insert, createComponent, effect, setStyleProperty, use } from "solid-js/web";
+import { createSignal, createEffect, onCleanup, Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...`), _tmpl$3 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 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"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4"><!$><!/><!$><!/><!$><!/><div class="w-full h-[250px]"><canvas>`);
+let ChartJS = null;
+let chartJSLoadPromise = null;
+const loadChartJS = async () => {
+  if (ChartJS) return ChartJS;
+  if (!chartJSLoadPromise) {
+    chartJSLoadPromise = import("chart.js/auto").then((module) => {
+      ChartJS = module.default || module.Chart;
+      return ChartJS;
+    }).catch((err) => {
+      chartJSLoadPromise = null;
+      throw err;
+    });
+  }
+  return chartJSLoadPromise;
+};
+async function isChartJSAvailable() {
+  try {
+    await loadChartJS();
+    return true;
+  } catch {
+    return false;
+  }
+}
+const ChartJSRenderer = (props) => {
+  const [isLoading, setIsLoading] = createSignal(true);
+  const [error, setError] = createSignal();
+  let canvasRef;
+  let chartInstance;
+  const params = () => props.component.params;
+  createEffect(async () => {
+    var _a, _b, _c, _d;
+    if (!canvasRef) return;
+    const chartParams = params();
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const Chart = await loadChartJS();
+      if (chartInstance) {
+        chartInstance.destroy();
+        chartInstance = null;
+      }
+      chartInstance = new Chart(canvasRef, {
+        type: chartParams.type,
+        data: chartParams.data,
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          ...chartParams.options,
+          plugins: {
+            ...(_a = chartParams.options) == null ? void 0 : _a.plugins,
+            legend: {
+              display: true,
+              position: "bottom",
+              ...(_c = (_b = chartParams.options) == null ? void 0 : _b.plugins) == null ? void 0 : _c.legend
+            }
+          }
+        }
+      });
+      setIsLoading(false);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Chart rendering failed");
+      setError(error2.message);
+      setIsLoading(false);
+      (_d = props.onError) == null ? void 0 : _d.call(props, error2);
+    }
+  });
+  onCleanup(() => {
+    if (chartInstance) {
+      chartInstance.destroy();
+      chartInstance = null;
+    }
+  });
+  return (() => {
+    var _el$ = getNextElement(_tmpl$4), _el$1 = _el$.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$9 = _el$14.nextSibling, _el$0 = _el$9.firstChild;
+    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$10, _co$);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isLoading();
+      },
+      get children() {
+        return getNextElement(_tmpl$2);
+      }
+    }), _el$12, _co$2);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return error();
+      },
+      get children() {
+        var _el$4 = getNextElement(_tmpl$3), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+        insert(_el$8, error);
+        return _el$4;
+      }
+    }), _el$14, _co$3);
+    var _ref$ = canvasRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$0) : canvasRef = _el$0;
+    effect((_$p) => setStyleProperty(_el$9, "display", error() ? "none" : "block"));
+    return _el$;
+  })();
+};
+export {
+  ChartJSRenderer,
+  isChartJSAvailable
+};
+//# sourceMappingURL=ChartJSRenderer.js.map

package/dist/components/ChartJSRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartJSRenderer.js","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <div class=\"relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4\">\n      <Show when={params().title}>\n        <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white mb-3\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <Show when={isLoading()}>\n        <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n          <div class=\"flex flex-col items-center gap-2\">\n            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n            <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n          </div>\n        </div>\n      </Show>\n\n      <Show when={error()}>\n        <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n          <div class=\"text-center\">\n            <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n              <svg\n                class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\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            <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n            <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n          </div>\n        </div>\n      </Show>\n\n      <div\n        class=\"w-full h-[250px]\"\n        style={{ display: error() ? 'none' : 'block' }}\n      >\n        <canvas ref={canvasRef} />\n      </div>\n    </div>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_el$","_$getNextElement","_tmpl$4","_el$1","firstChild","_el$10","_co$","_$getNextMarker","nextSibling","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","_el$9","_el$0","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_tmpl$2","_el$4","_tmpl$3","_el$5","_el$6","_el$7","_el$8","_ref$","_$use","_$effect","_$p","_$setStyleProperty"],"mappings":"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"}