@seed-ship/mcp-ui-solid 6.15.0 → 6.17.0

package/dist/components/CodeBlockRenderer.js

@@ -1,4 +1,4 @@
-import { delegateEvents, isServer, createComponent, getNextElement, template, getNextMarker, insert, effect, className, setAttribute, style, setProperty, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, isServer, createComponent, getNextElement, getNextMarker, insert, effect, className, setAttribute, style, setProperty, runHydrationEvents, template } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show, For } from "solid-js";
 import { useExpanded, ExpandableWrapper } from "./ExpandableWrapper.js";
 import { highlightQuery } from "./UIResourceRenderer.js";

package/dist/components/ComponentToolbar.js

@@ -1,4 +1,4 @@
-import { delegateEvents, getNextElement, template, insert, createComponent, effect, className, setAttribute, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, getNextElement, insert, createComponent, effect, className, template, setAttribute, runHydrationEvents } from "solid-js/web";
 import { For, createSignal } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2>`);
 const ICONS = {

package/dist/components/DataPreviewSection.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, runHydrationEvents, setStyleProperty, classList, memo, setProperty } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, getNextMarker, insert, effect, setAttribute, runHydrationEvents, setStyleProperty, classList, memo, setProperty, template } from "solid-js/web";
 import { createMemo, createSignal, createEffect, Show, For } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class="text-xs text-amber-600 dark:text-amber-400 p-2">[DataPreviewSection] Invalid content format`), _tmpl$2 = /* @__PURE__ */ template(`<span class=font-medium>`), _tmpl$3 = /* @__PURE__ */ template(`<span class="px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="flex items-center gap-1"><button class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">CSV</button><button class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">JSON`), _tmpl$5 = /* @__PURE__ */ template(`<span><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<span>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="flex items-center gap-1"><button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">&#x25C0; Prev</button><span class=px-2>Page <!$><!/> / <!$><!/></span><button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">Next &#x25B6;`), _tmpl$8 = /* @__PURE__ */ template(`<div class=data-preview-section><div class="flex items-center justify-between mb-2"><div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"><!$><!/><!$><!/></div><!$><!/></div><div class="overflow-x-auto rounded border border-gray-200 dark:border-gray-700"><table class="w-full text-sm"><thead><tr class="bg-gray-50 dark:bg-gray-800"></tr></thead><tbody></tbody></table></div><div class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400"><!$><!/><!$><!/><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<th class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"><span class="inline-flex items-center gap-1"><!$><!/><span class="text-[10px] leading-none">`), _tmpl$0 = /* @__PURE__ */ template(`<tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">`), _tmpl$1 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-gray-800 dark:text-gray-200">`);
 function formatNumber(value, format) {

package/dist/components/DegradedFallback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DegradedFallback.cjs","sources":["../../src/components/DegradedFallback.tsx"],"sourcesContent":["/**\n * DegradedFallback — the middle rung of the renderer fallback ladder\n * (audit 2026-05-30, P2.5).\n *\n * Each heavy renderer (graph / map / chart) follows the same contract:\n *   1. native render when its peer lib is available and succeeds;\n *   2. **degraded but useful** view when the native render throws — this\n *      component: a visible notice + a plain data table so the user still\n *      sees the underlying data instead of a blank space;\n *   3. (the caller also emits a `component:error` telemetry event).\n *\n * Pure / presentational — no peer deps, no side effects — so a render-path\n * failure in a heavy lib can never cascade into the fallback itself, and it\n * is trivially unit-testable. Rows/cells are rendered as text; callers are\n * responsible for stringifying complex cell values.\n */\n\nimport { Component, For, Show } from 'solid-js';\n\nexport interface DegradedFallbackProps {\n  /** Short, human-readable reason the native render was skipped/failed. */\n  message: string;\n  /**\n   * Column headers for the degraded data table. When omitted (or empty),\n   * only the notice banner is shown.\n   */\n  columns?: string[];\n  /** Row data — each row is an array of cells aligned to `columns`. */\n  rows?: Array<Array<string | number>>;\n  /**\n   * Caption under the table. Defaults to a generic\n   * \"interactive view unavailable\" line.\n   */\n  caption?: string;\n  /** Max rows to render before truncating (default 50). */\n  maxRows?: number;\n}\n\nexport const DegradedFallback: Component<DegradedFallbackProps> = (props) => {\n  const maxRows = () => props.maxRows ?? 50;\n  const allRows = () => props.rows ?? [];\n  const shownRows = () => allRows().slice(0, maxRows());\n  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);\n  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;\n\n  return (\n    <div\n      class=\"w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20\"\n      role=\"alert\"\n    >\n      <p class=\"text-sm font-medium text-amber-900 dark:text-amber-100\">{props.message}</p>\n      <p class=\"mt-0.5 text-xs text-amber-700 dark:text-amber-300\">\n        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}\n      </p>\n\n      <Show when={hasTable()}>\n        <div class=\"mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800\">\n          <table class=\"w-full border-collapse text-left text-xs\">\n            <thead class=\"sticky top-0 bg-amber-100 dark:bg-amber-900/40\">\n              <tr>\n                <For each={props.columns}>\n                  {(col) => (\n                    <th class=\"px-2 py-1 font-medium text-amber-900 dark:text-amber-100\">{col}</th>\n                  )}\n                </For>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={shownRows()}>\n                {(row) => (\n                  <tr class=\"border-t border-amber-100 dark:border-amber-800/60\">\n                    <For each={props.columns}>\n                      {(_col, i) => (\n                        <td class=\"px-2 py-1 text-amber-800 dark:text-amber-200\">\n                          {String(row[i()] ?? '')}\n                        </td>\n                      )}\n                    </For>\n                  </tr>\n                )}\n              </For>\n            </tbody>\n          </table>\n        </div>\n        <Show when={hiddenCount() > 0}>\n          <p class=\"mt-1 text-[10px] text-amber-600 dark:text-amber-400\">\n            +{hiddenCount()} more rows not shown.\n          </p>\n        </Show>\n      </Show>\n    </div>\n  );\n};\n"],"names":["DegradedFallback","props","maxRows","allRows","rows","shownRows","slice","hiddenCount","Math","max","length","hasTable","columns","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","nextSibling","_el$12","_el$13","_co$2","_$getNextMarker","_$insert","message","caption","_$createComponent","Show","when","children","_el$4","_tmpl$","_el$5","_el$6","_el$7","_el$8","For","each","col","_el$14","_tmpl$4","row","_el$15","_tmpl$5","_col","i","_el$16","_tmpl$6","String","_el$9","_tmpl$2","_el$0","_el$10","_el$11","_co$"],"mappings":";;;;;AAsCO,MAAMA,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,UAAUA,MAAMD,MAAMC,WAAW;AACvC,QAAMC,UAAUA,MAAMF,MAAMG,QAAQ,CAAA;AACpC,QAAMC,YAAYA,MAAMF,QAAAA,EAAUG,MAAM,GAAGJ,SAAS;AACpD,QAAMK,cAAcA,MAAMC,KAAKC,IAAI,GAAGN,UAAUO,SAASL,UAAAA,EAAYK,MAAM;AAC3E,QAAMC,WAAWA,MAAAA;;AAAOV,yBAAMW,YAANX,mBAAeS,WAAU,KAAK,KAAKP,UAAUO,SAAS;AAAA;AAE9E,UAAA,MAAA;AAAA,QAAAG,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,SAAAF,MAAAC,aAAA,CAAAE,QAAAC,KAAA,IAAAC,IAAAA,cAAAH,OAAAD,WAAA;AAAAK,QAAAA,OAAAR,OAAA,MAKuEf,MAAMwB,OAAO;AAAAD,QAAAA,OAAAN,OAAA,MAE7EjB,MAAMyB,WAAW,oEAAoE;AAAAF,eAAAX,MAAAc,IAAAA,gBAGvFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAmB,WAAA;AAAA,eAAA,EAAA,MAAA;AAAA,cAAAC,QAAAjB,IAAAA,eAAAkB,MAAA,GAAAC,QAAAF,MAAAd,YAAAiB,QAAAD,MAAAhB,YAAAkB,QAAAD,MAAAjB,YAAAmB,QAAAF,MAAAf;AAAAK,qBAAAW,OAAAR,IAAAA,gBAKXU,aAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAErC,MAAMW;AAAAA,YAAO;AAAA,YAAAkB,UACpBS,UAAG,MAAA;AAAA,kBAAAC,SAAA1B,IAAAA,eAAA2B,OAAA;AAAAjB,kBAAAA,OAAAgB,QACmED,GAAG;AAAA,qBAAAC;AAAAA,YAAA,GAAA;AAAA,UAAA,CAC1E,CAAA;AAAAhB,qBAAAY,OAAAT,IAAAA,gBAKJU,aAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEjC,UAAAA;AAAAA,YAAW;AAAA,YAAAyB,UAClBY,UAAG,MAAA;AAAA,kBAAAC,SAAA7B,IAAAA,eAAA8B,OAAA;AAAApB,yBAAAmB,QAAAhB,IAAAA,gBAEAU,aAAG;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErC,MAAMW;AAAAA,gBAAO;AAAA,gBAAAkB,UACrBA,CAACe,MAAMC,OAAC,MAAA;AAAA,sBAAAC,SAAAjC,IAAAA,eAAAkC,OAAA;AAAAxB,sBAAAA,OAAAuB,QAAA,MAEJE,OAAOP,IAAII,GAAG,KAAK,EAAE,CAAC;AAAA,yBAAAC;AAAAA,gBAAA,GAAA;AAAA,cAAA,CAE1B,CAAA;AAAA,qBAAAJ;AAAAA,YAAA,GAAA;AAAA,UAAA,CAGN,CAAA;AAAA,iBAAAZ;AAAAA,QAAA,GAAA,GAAAJ,IAAAA,gBAKRC,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEtB,gBAAgB;AAAA,UAAC;AAAA,UAAA,IAAAuB,WAAA;AAAA,gBAAAoB,QAAApC,IAAAA,eAAAqC,OAAA,GAAAC,QAAAF,MAAAjC,YAAAoC,SAAAD,MAAAjC,aAAA,CAAAmC,QAAAC,IAAA,IAAAhC,IAAAA,cAAA8B,OAAAlC,WAAA;AAAAmC,mBAAAnC;AAAAK,gBAAAA,OAAA0B,OAEvB3C,aAAW+C,QAAAC,IAAA;AAAA,mBAAAL;AAAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA7B,QAAAC,KAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAMzB;;"}
+{"version":3,"file":"DegradedFallback.cjs","sources":["../../src/components/DegradedFallback.tsx"],"sourcesContent":["/**\n * DegradedFallback — the middle rung of the renderer fallback ladder\n * (audit 2026-05-30, P2.5).\n *\n * Each heavy renderer (graph / map / chart) follows the same contract:\n *   1. native render when its peer lib is available and succeeds;\n *   2. **degraded but useful** view when the native render throws — this\n *      component: a visible notice + a plain data table so the user still\n *      sees the underlying data instead of a blank space;\n *   3. (the caller also emits a `render:error` telemetry event).\n *\n * Pure / presentational — no peer deps, no side effects — so a render-path\n * failure in a heavy lib can never cascade into the fallback itself, and it\n * is trivially unit-testable. Rows/cells are rendered as text; callers are\n * responsible for stringifying complex cell values.\n */\n\nimport { Component, For, Show } from 'solid-js';\n\nexport interface DegradedFallbackProps {\n  /** Short, human-readable reason the native render was skipped/failed. */\n  message: string;\n  /**\n   * Column headers for the degraded data table. When omitted (or empty),\n   * only the notice banner is shown.\n   */\n  columns?: string[];\n  /** Row data — each row is an array of cells aligned to `columns`. */\n  rows?: Array<Array<string | number>>;\n  /**\n   * Caption under the table. Defaults to a generic\n   * \"interactive view unavailable\" line.\n   */\n  caption?: string;\n  /** Max rows to render before truncating (default 50). */\n  maxRows?: number;\n}\n\nexport const DegradedFallback: Component<DegradedFallbackProps> = (props) => {\n  const maxRows = () => props.maxRows ?? 50;\n  const allRows = () => props.rows ?? [];\n  const shownRows = () => allRows().slice(0, maxRows());\n  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);\n  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;\n\n  return (\n    <div\n      class=\"w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20\"\n      role=\"alert\"\n    >\n      <p class=\"text-sm font-medium text-amber-900 dark:text-amber-100\">{props.message}</p>\n      <p class=\"mt-0.5 text-xs text-amber-700 dark:text-amber-300\">\n        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}\n      </p>\n\n      <Show when={hasTable()}>\n        <div class=\"mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800\">\n          <table class=\"w-full border-collapse text-left text-xs\">\n            <thead class=\"sticky top-0 bg-amber-100 dark:bg-amber-900/40\">\n              <tr>\n                <For each={props.columns}>\n                  {(col) => (\n                    <th class=\"px-2 py-1 font-medium text-amber-900 dark:text-amber-100\">{col}</th>\n                  )}\n                </For>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={shownRows()}>\n                {(row) => (\n                  <tr class=\"border-t border-amber-100 dark:border-amber-800/60\">\n                    <For each={props.columns}>\n                      {(_col, i) => (\n                        <td class=\"px-2 py-1 text-amber-800 dark:text-amber-200\">\n                          {String(row[i()] ?? '')}\n                        </td>\n                      )}\n                    </For>\n                  </tr>\n                )}\n              </For>\n            </tbody>\n          </table>\n        </div>\n        <Show when={hiddenCount() > 0}>\n          <p class=\"mt-1 text-[10px] text-amber-600 dark:text-amber-400\">\n            +{hiddenCount()} more rows not shown.\n          </p>\n        </Show>\n      </Show>\n    </div>\n  );\n};\n"],"names":["DegradedFallback","props","maxRows","allRows","rows","shownRows","slice","hiddenCount","Math","max","length","hasTable","columns","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","nextSibling","_el$12","_el$13","_co$2","_$getNextMarker","_$insert","message","caption","_$createComponent","Show","when","children","_el$4","_tmpl$","_el$5","_el$6","_el$7","_el$8","For","each","col","_el$14","_tmpl$4","row","_el$15","_tmpl$5","_col","i","_el$16","_tmpl$6","String","_el$9","_tmpl$2","_el$0","_el$10","_el$11","_co$"],"mappings":";;;;;AAsCO,MAAMA,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,UAAUA,MAAMD,MAAMC,WAAW;AACvC,QAAMC,UAAUA,MAAMF,MAAMG,QAAQ,CAAA;AACpC,QAAMC,YAAYA,MAAMF,QAAAA,EAAUG,MAAM,GAAGJ,SAAS;AACpD,QAAMK,cAAcA,MAAMC,KAAKC,IAAI,GAAGN,UAAUO,SAASL,UAAAA,EAAYK,MAAM;AAC3E,QAAMC,WAAWA,MAAAA;;AAAOV,yBAAMW,YAANX,mBAAeS,WAAU,KAAK,KAAKP,UAAUO,SAAS;AAAA;AAE9E,UAAA,MAAA;AAAA,QAAAG,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,SAAAF,MAAAC,aAAA,CAAAE,QAAAC,KAAA,IAAAC,IAAAA,cAAAH,OAAAD,WAAA;AAAAK,QAAAA,OAAAR,OAAA,MAKuEf,MAAMwB,OAAO;AAAAD,QAAAA,OAAAN,OAAA,MAE7EjB,MAAMyB,WAAW,oEAAoE;AAAAF,eAAAX,MAAAc,IAAAA,gBAGvFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAmB,WAAA;AAAA,eAAA,EAAA,MAAA;AAAA,cAAAC,QAAAjB,IAAAA,eAAAkB,MAAA,GAAAC,QAAAF,MAAAd,YAAAiB,QAAAD,MAAAhB,YAAAkB,QAAAD,MAAAjB,YAAAmB,QAAAF,MAAAf;AAAAK,qBAAAW,OAAAR,IAAAA,gBAKXU,aAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAErC,MAAMW;AAAAA,YAAO;AAAA,YAAAkB,UACpBS,UAAG,MAAA;AAAA,kBAAAC,SAAA1B,IAAAA,eAAA2B,OAAA;AAAAjB,kBAAAA,OAAAgB,QACmED,GAAG;AAAA,qBAAAC;AAAAA,YAAA,GAAA;AAAA,UAAA,CAC1E,CAAA;AAAAhB,qBAAAY,OAAAT,IAAAA,gBAKJU,aAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEjC,UAAAA;AAAAA,YAAW;AAAA,YAAAyB,UAClBY,UAAG,MAAA;AAAA,kBAAAC,SAAA7B,IAAAA,eAAA8B,OAAA;AAAApB,yBAAAmB,QAAAhB,IAAAA,gBAEAU,aAAG;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErC,MAAMW;AAAAA,gBAAO;AAAA,gBAAAkB,UACrBA,CAACe,MAAMC,OAAC,MAAA;AAAA,sBAAAC,SAAAjC,IAAAA,eAAAkC,OAAA;AAAAxB,sBAAAA,OAAAuB,QAAA,MAEJE,OAAOP,IAAII,GAAG,KAAK,EAAE,CAAC;AAAA,yBAAAC;AAAAA,gBAAA,GAAA;AAAA,cAAA,CAE1B,CAAA;AAAA,qBAAAJ;AAAAA,YAAA,GAAA;AAAA,UAAA,CAGN,CAAA;AAAA,iBAAAZ;AAAAA,QAAA,GAAA,GAAAJ,IAAAA,gBAKRC,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEtB,gBAAgB;AAAA,UAAC;AAAA,UAAA,IAAAuB,WAAA;AAAA,gBAAAoB,QAAApC,IAAAA,eAAAqC,OAAA,GAAAC,QAAAF,MAAAjC,YAAAoC,SAAAD,MAAAjC,aAAA,CAAAmC,QAAAC,IAAA,IAAAhC,IAAAA,cAAA8B,OAAAlC,WAAA;AAAAmC,mBAAAnC;AAAAK,gBAAAA,OAAA0B,OAEvB3C,aAAW+C,QAAAC,IAAA;AAAA,mBAAAL;AAAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA7B,QAAAC,KAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAMzB;;"}

package/dist/components/DegradedFallback.d.ts

@@ -7,7 +7,7 @@
  *   2. **degraded but useful** view when the native render throws — this
  *      component: a visible notice + a plain data table so the user still
  *      sees the underlying data instead of a blank space;
- *   3. (the caller also emits a `component:error` telemetry event).
+ *   3. (the caller also emits a `render:error` telemetry event).
  *
  * Pure / presentational — no peer deps, no side effects — so a render-path
  * failure in a heavy lib can never cascade into the fallback itself, and it

package/dist/components/DegradedFallback.js

@@ -1,4 +1,4 @@
-import { getNextElement, template, getNextMarker, insert, createComponent } from "solid-js/web";
+import { getNextElement, getNextMarker, insert, createComponent, template } from "solid-js/web";
 import { Show, For } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class="mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800"><table class="w-full border-collapse text-left text-xs"><thead class="sticky top-0 bg-amber-100 dark:bg-amber-900/40"><tr></tr></thead><tbody>`), _tmpl$2 = /* @__PURE__ */ template(`<p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">+<!$><!/> more rows not shown.`), _tmpl$3 = /* @__PURE__ */ template(`<div class="w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20"role=alert><p class="text-sm font-medium text-amber-900 dark:text-amber-100"></p><p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300"></p><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<th class="px-2 py-1 font-medium text-amber-900 dark:text-amber-100">`), _tmpl$5 = /* @__PURE__ */ template(`<tr class="border-t border-amber-100 dark:border-amber-800/60">`), _tmpl$6 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-amber-800 dark:text-amber-200">`);
 const DegradedFallback = (props) => {

package/dist/components/DegradedFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"DegradedFallback.js","sources":["../../src/components/DegradedFallback.tsx"],"sourcesContent":["/**\n * DegradedFallback — the middle rung of the renderer fallback ladder\n * (audit 2026-05-30, P2.5).\n *\n * Each heavy renderer (graph / map / chart) follows the same contract:\n *   1. native render when its peer lib is available and succeeds;\n *   2. **degraded but useful** view when the native render throws — this\n *      component: a visible notice + a plain data table so the user still\n *      sees the underlying data instead of a blank space;\n *   3. (the caller also emits a `component:error` telemetry event).\n *\n * Pure / presentational — no peer deps, no side effects — so a render-path\n * failure in a heavy lib can never cascade into the fallback itself, and it\n * is trivially unit-testable. Rows/cells are rendered as text; callers are\n * responsible for stringifying complex cell values.\n */\n\nimport { Component, For, Show } from 'solid-js';\n\nexport interface DegradedFallbackProps {\n  /** Short, human-readable reason the native render was skipped/failed. */\n  message: string;\n  /**\n   * Column headers for the degraded data table. When omitted (or empty),\n   * only the notice banner is shown.\n   */\n  columns?: string[];\n  /** Row data — each row is an array of cells aligned to `columns`. */\n  rows?: Array<Array<string | number>>;\n  /**\n   * Caption under the table. Defaults to a generic\n   * \"interactive view unavailable\" line.\n   */\n  caption?: string;\n  /** Max rows to render before truncating (default 50). */\n  maxRows?: number;\n}\n\nexport const DegradedFallback: Component<DegradedFallbackProps> = (props) => {\n  const maxRows = () => props.maxRows ?? 50;\n  const allRows = () => props.rows ?? [];\n  const shownRows = () => allRows().slice(0, maxRows());\n  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);\n  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;\n\n  return (\n    <div\n      class=\"w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20\"\n      role=\"alert\"\n    >\n      <p class=\"text-sm font-medium text-amber-900 dark:text-amber-100\">{props.message}</p>\n      <p class=\"mt-0.5 text-xs text-amber-700 dark:text-amber-300\">\n        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}\n      </p>\n\n      <Show when={hasTable()}>\n        <div class=\"mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800\">\n          <table class=\"w-full border-collapse text-left text-xs\">\n            <thead class=\"sticky top-0 bg-amber-100 dark:bg-amber-900/40\">\n              <tr>\n                <For each={props.columns}>\n                  {(col) => (\n                    <th class=\"px-2 py-1 font-medium text-amber-900 dark:text-amber-100\">{col}</th>\n                  )}\n                </For>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={shownRows()}>\n                {(row) => (\n                  <tr class=\"border-t border-amber-100 dark:border-amber-800/60\">\n                    <For each={props.columns}>\n                      {(_col, i) => (\n                        <td class=\"px-2 py-1 text-amber-800 dark:text-amber-200\">\n                          {String(row[i()] ?? '')}\n                        </td>\n                      )}\n                    </For>\n                  </tr>\n                )}\n              </For>\n            </tbody>\n          </table>\n        </div>\n        <Show when={hiddenCount() > 0}>\n          <p class=\"mt-1 text-[10px] text-amber-600 dark:text-amber-400\">\n            +{hiddenCount()} more rows not shown.\n          </p>\n        </Show>\n      </Show>\n    </div>\n  );\n};\n"],"names":["DegradedFallback","props","maxRows","allRows","rows","shownRows","slice","hiddenCount","Math","max","length","hasTable","columns","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","nextSibling","_el$12","_el$13","_co$2","_$getNextMarker","_$insert","message","caption","_$createComponent","Show","when","children","_el$4","_tmpl$","_el$5","_el$6","_el$7","_el$8","For","each","col","_el$14","_tmpl$4","row","_el$15","_tmpl$5","_col","i","_el$16","_tmpl$6","String","_el$9","_tmpl$2","_el$0","_el$10","_el$11","_co$"],"mappings":";;;AAsCO,MAAMA,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,UAAUA,MAAMD,MAAMC,WAAW;AACvC,QAAMC,UAAUA,MAAMF,MAAMG,QAAQ,CAAA;AACpC,QAAMC,YAAYA,MAAMF,QAAAA,EAAUG,MAAM,GAAGJ,SAAS;AACpD,QAAMK,cAAcA,MAAMC,KAAKC,IAAI,GAAGN,UAAUO,SAASL,UAAAA,EAAYK,MAAM;AAC3E,QAAMC,WAAWA,MAAAA;;AAAOV,yBAAMW,YAANX,mBAAeS,WAAU,KAAK,KAAKP,UAAUO,SAAS;AAAA;AAE9E,UAAA,MAAA;AAAA,QAAAG,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,SAAAF,MAAAC,aAAA,CAAAE,QAAAC,KAAA,IAAAC,cAAAH,OAAAD,WAAA;AAAAK,WAAAR,OAAA,MAKuEf,MAAMwB,OAAO;AAAAD,WAAAN,OAAA,MAE7EjB,MAAMyB,WAAW,oEAAoE;AAAAF,WAAAX,MAAAc,gBAGvFC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAmB,WAAA;AAAA,eAAA,EAAA,MAAA;AAAA,cAAAC,QAAAjB,eAAAkB,MAAA,GAAAC,QAAAF,MAAAd,YAAAiB,QAAAD,MAAAhB,YAAAkB,QAAAD,MAAAjB,YAAAmB,QAAAF,MAAAf;AAAAK,iBAAAW,OAAAR,gBAKXU,KAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAErC,MAAMW;AAAAA,YAAO;AAAA,YAAAkB,UACpBS,UAAG,MAAA;AAAA,kBAAAC,SAAA1B,eAAA2B,OAAA;AAAAjB,qBAAAgB,QACmED,GAAG;AAAA,qBAAAC;AAAAA,YAAA,GAAA;AAAA,UAAA,CAC1E,CAAA;AAAAhB,iBAAAY,OAAAT,gBAKJU,KAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEjC,UAAAA;AAAAA,YAAW;AAAA,YAAAyB,UAClBY,UAAG,MAAA;AAAA,kBAAAC,SAAA7B,eAAA8B,OAAA;AAAApB,qBAAAmB,QAAAhB,gBAEAU,KAAG;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErC,MAAMW;AAAAA,gBAAO;AAAA,gBAAAkB,UACrBA,CAACe,MAAMC,OAAC,MAAA;AAAA,sBAAAC,SAAAjC,eAAAkC,OAAA;AAAAxB,yBAAAuB,QAAA,MAEJE,OAAOP,IAAII,GAAG,KAAK,EAAE,CAAC;AAAA,yBAAAC;AAAAA,gBAAA,GAAA;AAAA,cAAA,CAE1B,CAAA;AAAA,qBAAAJ;AAAAA,YAAA,GAAA;AAAA,UAAA,CAGN,CAAA;AAAA,iBAAAZ;AAAAA,QAAA,GAAA,GAAAJ,gBAKRC,MAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEtB,gBAAgB;AAAA,UAAC;AAAA,UAAA,IAAAuB,WAAA;AAAA,gBAAAoB,QAAApC,eAAAqC,OAAA,GAAAC,QAAAF,MAAAjC,YAAAoC,SAAAD,MAAAjC,aAAA,CAAAmC,QAAAC,IAAA,IAAAhC,cAAA8B,OAAAlC,WAAA;AAAAmC,mBAAAnC;AAAAK,mBAAA0B,OAEvB3C,aAAW+C,QAAAC,IAAA;AAAA,mBAAAL;AAAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA7B,QAAAC,KAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAMzB;"}
+{"version":3,"file":"DegradedFallback.js","sources":["../../src/components/DegradedFallback.tsx"],"sourcesContent":["/**\n * DegradedFallback — the middle rung of the renderer fallback ladder\n * (audit 2026-05-30, P2.5).\n *\n * Each heavy renderer (graph / map / chart) follows the same contract:\n *   1. native render when its peer lib is available and succeeds;\n *   2. **degraded but useful** view when the native render throws — this\n *      component: a visible notice + a plain data table so the user still\n *      sees the underlying data instead of a blank space;\n *   3. (the caller also emits a `render:error` telemetry event).\n *\n * Pure / presentational — no peer deps, no side effects — so a render-path\n * failure in a heavy lib can never cascade into the fallback itself, and it\n * is trivially unit-testable. Rows/cells are rendered as text; callers are\n * responsible for stringifying complex cell values.\n */\n\nimport { Component, For, Show } from 'solid-js';\n\nexport interface DegradedFallbackProps {\n  /** Short, human-readable reason the native render was skipped/failed. */\n  message: string;\n  /**\n   * Column headers for the degraded data table. When omitted (or empty),\n   * only the notice banner is shown.\n   */\n  columns?: string[];\n  /** Row data — each row is an array of cells aligned to `columns`. */\n  rows?: Array<Array<string | number>>;\n  /**\n   * Caption under the table. Defaults to a generic\n   * \"interactive view unavailable\" line.\n   */\n  caption?: string;\n  /** Max rows to render before truncating (default 50). */\n  maxRows?: number;\n}\n\nexport const DegradedFallback: Component<DegradedFallbackProps> = (props) => {\n  const maxRows = () => props.maxRows ?? 50;\n  const allRows = () => props.rows ?? [];\n  const shownRows = () => allRows().slice(0, maxRows());\n  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);\n  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;\n\n  return (\n    <div\n      class=\"w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20\"\n      role=\"alert\"\n    >\n      <p class=\"text-sm font-medium text-amber-900 dark:text-amber-100\">{props.message}</p>\n      <p class=\"mt-0.5 text-xs text-amber-700 dark:text-amber-300\">\n        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}\n      </p>\n\n      <Show when={hasTable()}>\n        <div class=\"mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800\">\n          <table class=\"w-full border-collapse text-left text-xs\">\n            <thead class=\"sticky top-0 bg-amber-100 dark:bg-amber-900/40\">\n              <tr>\n                <For each={props.columns}>\n                  {(col) => (\n                    <th class=\"px-2 py-1 font-medium text-amber-900 dark:text-amber-100\">{col}</th>\n                  )}\n                </For>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={shownRows()}>\n                {(row) => (\n                  <tr class=\"border-t border-amber-100 dark:border-amber-800/60\">\n                    <For each={props.columns}>\n                      {(_col, i) => (\n                        <td class=\"px-2 py-1 text-amber-800 dark:text-amber-200\">\n                          {String(row[i()] ?? '')}\n                        </td>\n                      )}\n                    </For>\n                  </tr>\n                )}\n              </For>\n            </tbody>\n          </table>\n        </div>\n        <Show when={hiddenCount() > 0}>\n          <p class=\"mt-1 text-[10px] text-amber-600 dark:text-amber-400\">\n            +{hiddenCount()} more rows not shown.\n          </p>\n        </Show>\n      </Show>\n    </div>\n  );\n};\n"],"names":["DegradedFallback","props","maxRows","allRows","rows","shownRows","slice","hiddenCount","Math","max","length","hasTable","columns","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","nextSibling","_el$12","_el$13","_co$2","_$getNextMarker","_$insert","message","caption","_$createComponent","Show","when","children","_el$4","_tmpl$","_el$5","_el$6","_el$7","_el$8","For","each","col","_el$14","_tmpl$4","row","_el$15","_tmpl$5","_col","i","_el$16","_tmpl$6","String","_el$9","_tmpl$2","_el$0","_el$10","_el$11","_co$"],"mappings":";;;AAsCO,MAAMA,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,UAAUA,MAAMD,MAAMC,WAAW;AACvC,QAAMC,UAAUA,MAAMF,MAAMG,QAAQ,CAAA;AACpC,QAAMC,YAAYA,MAAMF,QAAAA,EAAUG,MAAM,GAAGJ,SAAS;AACpD,QAAMK,cAAcA,MAAMC,KAAKC,IAAI,GAAGN,UAAUO,SAASL,UAAAA,EAAYK,MAAM;AAC3E,QAAMC,WAAWA,MAAAA;;AAAOV,yBAAMW,YAANX,mBAAeS,WAAU,KAAK,KAAKP,UAAUO,SAAS;AAAA;AAE9E,UAAA,MAAA;AAAA,QAAAG,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,SAAAF,MAAAC,aAAA,CAAAE,QAAAC,KAAA,IAAAC,cAAAH,OAAAD,WAAA;AAAAK,WAAAR,OAAA,MAKuEf,MAAMwB,OAAO;AAAAD,WAAAN,OAAA,MAE7EjB,MAAMyB,WAAW,oEAAoE;AAAAF,WAAAX,MAAAc,gBAGvFC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAmB,WAAA;AAAA,eAAA,EAAA,MAAA;AAAA,cAAAC,QAAAjB,eAAAkB,MAAA,GAAAC,QAAAF,MAAAd,YAAAiB,QAAAD,MAAAhB,YAAAkB,QAAAD,MAAAjB,YAAAmB,QAAAF,MAAAf;AAAAK,iBAAAW,OAAAR,gBAKXU,KAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAErC,MAAMW;AAAAA,YAAO;AAAA,YAAAkB,UACpBS,UAAG,MAAA;AAAA,kBAAAC,SAAA1B,eAAA2B,OAAA;AAAAjB,qBAAAgB,QACmED,GAAG;AAAA,qBAAAC;AAAAA,YAAA,GAAA;AAAA,UAAA,CAC1E,CAAA;AAAAhB,iBAAAY,OAAAT,gBAKJU,KAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEjC,UAAAA;AAAAA,YAAW;AAAA,YAAAyB,UAClBY,UAAG,MAAA;AAAA,kBAAAC,SAAA7B,eAAA8B,OAAA;AAAApB,qBAAAmB,QAAAhB,gBAEAU,KAAG;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErC,MAAMW;AAAAA,gBAAO;AAAA,gBAAAkB,UACrBA,CAACe,MAAMC,OAAC,MAAA;AAAA,sBAAAC,SAAAjC,eAAAkC,OAAA;AAAAxB,yBAAAuB,QAAA,MAEJE,OAAOP,IAAII,GAAG,KAAK,EAAE,CAAC;AAAA,yBAAAC;AAAAA,gBAAA,GAAA;AAAA,cAAA,CAE1B,CAAA;AAAA,qBAAAJ;AAAAA,YAAA,GAAA;AAAA,UAAA,CAGN,CAAA;AAAA,iBAAAZ;AAAAA,QAAA,GAAA,GAAAJ,gBAKRC,MAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEtB,gBAAgB;AAAA,UAAC;AAAA,UAAA,IAAAuB,WAAA;AAAA,gBAAAoB,QAAApC,eAAAqC,OAAA,GAAAC,QAAAF,MAAAjC,YAAAoC,SAAAD,MAAAjC,aAAA,CAAAmC,QAAAC,IAAA,IAAAhC,cAAA8B,OAAAlC,WAAA;AAAAmC,mBAAAnC;AAAAK,mBAAA0B,OAEvB3C,aAAW+C,QAAAC,IAAA;AAAA,mBAAAL;AAAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA7B,QAAAC,KAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAMzB;"}

package/dist/components/DraggableGridItem.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const ResizeHandle = require("./ResizeHandle.cjs");
@@ -129,5 +129,4 @@ const DraggableGridItem = (props) => {
   })();
 };
 exports.DraggableGridItem = DraggableGridItem;
-exports.default = DraggableGridItem;
 //# sourceMappingURL=DraggableGridItem.cjs.map

package/dist/components/DraggableGridItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableGridItem.cjs","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  dragProps?: {\n    draggable: boolean\n    onDragStart: (e: DragEvent) => void\n    onDragOver: (e: DragEvent) => void\n    onDragEnter: (e: DragEvent) => void\n    onDragLeave: (e: DragEvent) => void\n    onDrop: (e: DragEvent) => void\n    onDragEnd: (e: DragEvent) => void\n  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => {\n    props.onResizeStart?.(edge, event)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","event","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}
+{"version":3,"file":"DraggableGridItem.cjs","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  dragProps?: {\n    draggable: boolean\n    onDragStart: (e: DragEvent) => void\n    onDragOver: (e: DragEvent) => void\n    onDragEnter: (e: DragEvent) => void\n    onDragLeave: (e: DragEvent) => void\n    onDrop: (e: DragEvent) => void\n    onDragEnd: (e: DragEvent) => void\n  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => {\n    props.onResizeStart?.(edge, event)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","event","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}

package/dist/components/DraggableGridItem.js

@@ -1,4 +1,4 @@
-import { getNextElement, template, getNextMarker, spread, mergeProps as mergeProps$1, insert, createComponent, memo, runHydrationEvents } from "solid-js/web";
+import { getNextElement, getNextMarker, spread, mergeProps as mergeProps$1, insert, createComponent, memo, runHydrationEvents, template } from "solid-js/web";
 import { mergeProps, createMemo, Show } from "solid-js";
 import { ResizeHandle } from "./ResizeHandle.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class=mcp-drag-handle style="position:absolute;top:4px;left:50%;transform:translateX(-50%);width:40px;height:4px;background-color:rgba(0, 0, 0, 0.2);border-radius:2px;cursor:grab;opacity:0;transition:opacity 150ms ease;z-index:5">`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mcp-drop-indicator style=position:absolute;top:-2px;left:0;right:0;height:4px;background-color:#3b82f6;border-radius:2px;z-index:20>`), _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><div class=mcp-grid-item-content style=position:relative;z-index:1>`);
@@ -127,7 +127,6 @@ const DraggableGridItem = (props) => {
   })();
 };
 export {
-  DraggableGridItem,
-  DraggableGridItem as default
+  DraggableGridItem
 };
 //# sourceMappingURL=DraggableGridItem.js.map

package/dist/components/EditableUIResourceRenderer.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const useDragDrop = require("../hooks/useDragDrop.cjs");
@@ -195,5 +195,4 @@ const EditableUIResourceRenderer = (props) => {
   })();
 };
 exports.EditableUIResourceRenderer = EditableUIResourceRenderer;
-exports.default = EditableUIResourceRenderer;
 //# sourceMappingURL=EditableUIResourceRenderer.cjs.map

package/dist/components/EditableUIResourceRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableUIResourceRenderer.cjs","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge, event) => {\n                  setActiveResizeId(component.id)\n                  resize.handleResizeStart(event, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","event","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":";;;;;;;;;AAmEA,MAAMA,cAAiEC,CAAAA,UAAU;AAC/E,SAAAC,IAAAA,gBACGC,QAAAA,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEH,MAAMI;AAAAA,IAAO;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,IAAAA,eAAAC,MAAA;AAAAC,iBAAAH,MAAAL,IAAAA,gBAcpBS,aAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,MAAMZ,MAAMa,OAAO,EAAEC,KAAK,CAAC;AAAA,QAAC;AAAA,QAAAT,UACpCA,MAAAE,IAAAA,eAAAQ,OAAA;AAAA,MAAA,CASA,CAAA;AAAAC,UAAAA,OAAAC,CAAAA,QAAAC,IAAAA,iBAAAZ,MAAA,yBAjBwB,UAAUN,MAAMa,OAAO,QAAQ,CAAA;AAAA,aAAAP;AAAAA,IAAA;AAAA,EAAA,CAAA;AAsBlE;AAKO,MAAMa,6BAA0EnB,CAAAA,UAAU;;AAE/F,QAAM,CAACoB,YAAYC,aAAa,IAAIC,QAAAA,aAA4BtB,MAAMuB,OAAOH,UAAU;AACvF,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIH,QAAAA,aAA4B,IAAI;AAC5E,QAAM,CAACI,kBAAkBC,mBAAmB,IAAIL,QAAAA,aAAwC,oBAAIM,KAAK;AACjG,QAAM,CAACC,kBAAkBC,mBAAmB,IAAIR,QAAAA,aAAiC,IAAI;AAGrFS,UAAAA,aAAaC,QAAAA,GAAG,MAAMhC,MAAMuB,OAAOH,YAAaa,CAAAA,kBAAkB;AAChEZ,kBAAcY,aAAa;AAAA,EAC7B,CAAC,CAAC;AAGF,QAAMC,iBAAiBC,QAAAA,WAAW,MAAA;;AAAO;AAAA,MACvCC,WAASpC,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgBoC,YAAW;AAAA,MACpCE,WAAStC,WAAMqC,aAANrC,mBAAgBsC,YAAW;AAAA,MACpCC,UAAQvC,WAAMqC,aAANrC,mBAAgBuC,WAAU;AAAA,MAClCC,eAAaxC,WAAMqC,aAANrC,mBAAgBwC,gBAAe,CAAA;AAAA,MAC5CC,iBAAezC,WAAMqC,aAANrC,mBAAgByC,kBAAiB;AAAA,MAChDC,qBAAmB1C,WAAMqC,aAANrC,mBAAgB0C,sBAAqB;AAAA,IAAA;AAAA,GACxD;AAGF,QAAMC,gBAAgBA,CAACV,kBAAiC;;AACtDZ,kBAAcY,aAAa;AAE3B,UAAMW,YAAsB;AAAA,MAC1B,GAAG5C,MAAMuB;AAAAA,MACTH,YAAYa;AAAAA,IAAAA;AAGdjC,WAAAA,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgB6C,cAAhB7C,wBAAAA,KAA4BiC;AAC5BjC,sBAAMqC,aAANrC,mBAAgB8C,aAAhB9C,4BAA2B4C;AAC3B5C,gBAAM+C,mBAAN/C,+BAAuB4C;AAAAA,EACzB;AAGA,QAAMI,eAAeA,CAACC,aAAqBC,gBAA8B;;AACvE,UAAMC,oBAAoB/B,WAAAA,EAAagC,IAAIC,CAAAA,MACzCA,EAAEC,OAAOL,cAAc;AAAA,MAAE,GAAGI;AAAAA,MAAGE,UAAUL;AAAAA,IAAAA,IAAgBG,CAC3D;AAEAhC,kBAAc8B,iBAAiB;AAC/B1B,sBAAkB,IAAI;AACtBE,wBAAoB,oBAAIC,KAAK;AAE7B,UAAMgB,YAAsB;AAAA,MAC1B,GAAG5C,MAAMuB;AAAAA,MACTH,YAAY+B;AAAAA,IAAAA;AAGdnD,WAAAA,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgBwD,aAAhBxD,wBAAAA,KAA2BiD,aAAaC;AACxClD,sBAAMqC,aAANrC,mBAAgB8C,aAAhB9C,4BAA2B4C;AAC3B5C,gBAAM+C,mBAAN/C,+BAAuB4C;AAAAA,EACzB;AAGA,QAAMa,sBAAsBA,CAACR,aAAqBS,oBAAkC;AAClF/B,wBAAoBgC,CAAAA,SAAQ;AAC1B,YAAMC,OAAO,IAAIhC,IAAI+B,IAAI;AACzBC,WAAKC,IAAIZ,aAAaS,eAAe;AACrC,aAAOE;AAAAA,IACT,CAAC;AAAA,EACH;AAGA,QAAMvB,WAAWyB,YAAAA,YAAY;AAAA,IAC3B1C;AAAAA,IACAyB,WAAWF;AAAAA,IACXP,SAASF,eAAAA,EAAiBE,WAAWF,iBAAiBI;AAAAA,EAAAA,CACvD;AAGD,QAAMyB,qBAAqB5B,QAAAA,WAAW,OAA0B;AAAA,IAC9D6B,SAAS;AAAA,IACT,yBAAyB,UAAUhE,MAAMuB,OAAO0C,KAAKpD,OAAO;AAAA,IAC5DqD,KAAKlE,MAAMuB,OAAO0C,KAAKC;AAAAA,IACvBX,UAAU;AAAA,EAAA,EACV;AAGF,QAAMY,cAAchC,QAAAA,WAAW,MAC7BD,iBAAiBO,kBAAkBJ,SAAS+B,WAAAA,KAAgB5C,eAAAA,MAAqB,KACnF;AAGA,QAAM6C,uBAAuBA,CAACC,cAAyC;AACrE,UAAMC,UAAU7C,iBAAAA,EAAmB8C,IAAIF,UAAUhB,EAAE;AACnD,WAAOiB,WAAWD,UAAUf;AAAAA,EAC9B;AAGA,MAAI,GAACvD,WAAMqC,aAANrC,mBAAgBoC,UAAS;AAC5B,WAAAnC,IAAAA,gBACGwE,mBAAAA,oBAAkB;AAAA,MAAA,IACjBC,UAAO;AAAA,eAAE1E,MAAMuB;AAAAA,MAAM;AAAA,MAAA,IACrBoD,UAAO;AAAA,eAAE3E,MAAM2E;AAAAA,MAAO;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACf3E,MAAM4E;AAAAA,MAAK;AAAA,IAAA,CAAA;AAAA,EAGxB;AAEA,UAAA,MAAA;AAAA,QAAAC,QAAAtE,IAAAA,eAAAuE,OAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAA,CAAAE,OAAAC,IAAA,IAAAC,IAAAA,cAAAH,MAAAI,WAAA,GAAAC,QAAAJ,MAAAG,aAAA,CAAAE,OAAAC,KAAA,IAAAJ,kBAAAE,MAAAD,WAAA;AAAAI,QAAAA,IAGW3D,qBAAmBiD,KAAA;AAAAtE,eAAAsE,OAAA9E,IAAAA,gBAMvBF,aAAW;AAAA,MAAA,IACVc,UAAO;AAAA,eAAEb,MAAMuB,OAAO0C,KAAKpD;AAAAA,MAAO;AAAA,MAAA,IAClCT,UAAO;AAAA,eAAE+D,YAAAA;AAAAA,MAAa;AAAA,IAAA,CAAA,GAAAe,OAAAC,IAAA;AAAA1E,eAAAsE,OAAA9E,IAAAA,gBAIvBS,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAES,WAAAA;AAAAA,MAAY;AAAA,MAAAf,UACnBiE,CAAAA,cAAc;AAEd,cAAM/B,SAASmD,UAAAA,UAAU;AAAA,UACvBzC,aAAaqB,UAAUhB;AAAAA,UACvBqC,iBAAiBA,MAAMrB,UAAUf;AAAAA,UACjCC,UAAWoC,CAAAA,QAAQ5C,aAAasB,UAAUhB,IAAIsC,GAAG;AAAA,UACjDC,iBAAkBD,CAAAA,QAAQnC,oBAAoBa,UAAUhB,IAAIsC,GAAG;AAAA,UAC/DpD,aAAaN,iBAAiBM;AAAAA,UAC9BsD,eAAejE;AAAAA,UACfkE,aAAa/F,MAAMuB,OAAO0C,KAAKpD;AAAAA,UAC/BuB,SAASF,eAAAA,EAAiBE,WAAWF,iBAAiBK;AAAAA,QAAAA,CACvD;AAED,cAAMyD,oBAAoBA,MAAM3B,qBAAqBC,SAAS;AAE9D,eAAArE,IAAAA,gBACGgG,kBAAAA,mBAAiB;AAAA,UAAA,IAChB3C,KAAE;AAAA,mBAAEgB,UAAUhB;AAAAA,UAAE;AAAA,UAAA,IAChBC,WAAQ;AAAA,mBAAEyC,kBAAAA;AAAAA,UAAmB;AAAA,UAAA,IAC7BE,YAAS;AAAA,mBAAEC,IAAAA,KAAA,MAAA,CAAA,CAAAjE,eAAAA,EAAiBE,OAAO,EAAA,KAAIF,eAAAA,EAAiBI;AAAAA,UAAO;AAAA,UAAA,IAC/D8D,YAAS;AAAA,mBAAED,IAAAA,KAAA,MAAA,CAAA,CAAAjE,eAAAA,EAAiBE,OAAO,EAAA,KAAIF,eAAAA,EAAiBK;AAAAA,UAAM;AAAA,UAAA,IAC9DC,cAAW;AAAA,mBAAEN,iBAAiBM;AAAAA,UAAW;AAAA,UAAA,IACzC4B,aAAU;AAAA,mBAAE/B,SAASgE,oBAAoB/B,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAAA,IACtDgD,eAAY;AAAA,mBAAEjE,SAASiE,aAAahC,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAAA,IACjDiD,aAAU;AAAA,mBAAE/E,eAAAA,MAAqB8C,UAAUhB;AAAAA,UAAE;AAAA,UAAA,IAC7CI,kBAAe;AAAA,mBAAEhC,iBAAAA,EAAmB8C,IAAIF,UAAUhB,EAAE,KAAK;AAAA,UAAI;AAAA,UAAA,IAC7DkD,YAAS;AAAA,mBAAEnE,SAASoE,aAAanC,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAC9CoD,eAAeA,CAACC,MAAMC,UAAU;AAC9BnF,8BAAkB6C,UAAUhB,EAAE;AAC9Bf,mBAAOsE,kBAAkBD,OAAOD,IAAkB;AAAA,UACpD;AAAA,UAAC,IAAAtG,WAAA;AAAA,mBAAAJ,IAAAA,gBAGAwE,mBAAAA,oBAAkB;AAAA,cACjBC,SAASJ;AAAAA,cAAS,IAClBK,UAAO;AAAA,uBAAE3E,MAAM2E;AAAAA,cAAO;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAI9B;AAAA,IAAA,CAAC,GAAAY,OAAAC,KAAA;AAAAxE,QAAAA,OAAA8F,CAAAA,QAAA;AAAA,UAAAC,MAtDK,+BAA+B/G,MAAM4E,SAAS,EAAE,IAAEoC,OAInDjD,mBAAAA;AAAoBgD,cAAAD,IAAAG,KAAAC,IAAAA,UAAArC,OAAAiC,IAAAG,IAAAF,GAAA;AAAAD,UAAAK,IAAAC,IAAAA,MAAArC,OAAAiC,MAAAF,IAAAK,CAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxC;AAAAA,EAAA,GAAA;AAuDnC;;;"}
+{"version":3,"file":"EditableUIResourceRenderer.cjs","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge, event) => {\n                  setActiveResizeId(component.id)\n                  resize.handleResizeStart(event, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","event","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":"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"}

package/dist/components/EditableUIResourceRenderer.js

@@ -1,4 +1,4 @@
-import { createComponent, getNextElement, template, getNextMarker, use, insert, memo, effect, className, style, setStyleProperty } from "solid-js/web";
+import { createComponent, getNextElement, getNextMarker, use, insert, memo, effect, className, style, template, setStyleProperty } from "solid-js/web";
 import { createSignal, createEffect, on, createMemo, For, Show } from "solid-js";
 import { useDragDrop } from "../hooks/useDragDrop.js";
 import { useResize } from "../hooks/useResize.js";
@@ -193,7 +193,6 @@ const EditableUIResourceRenderer = (props) => {
   })();
 };
 export {
-  EditableUIResourceRenderer,
-  EditableUIResourceRenderer as default
+  EditableUIResourceRenderer
 };
 //# sourceMappingURL=EditableUIResourceRenderer.js.map

package/dist/components/ExpandableWrapper.js

@@ -1,5 +1,5 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, Portal, use, effect, setAttribute, runHydrationEvents, className } from "solid-js/web";
-import { createContext, useContext, createSignal, createEffect, onCleanup, Show } from "solid-js";
+import { delegateEvents, getNextElement, getNextMarker, insert, createComponent, Portal, use, effect, setAttribute, runHydrationEvents, className, template } from "solid-js/web";
+import { createContext, createSignal, createEffect, onCleanup, Show, useContext } from "solid-js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
 var _tmpl$ = /* @__PURE__ */ template(`<svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="fixed inset-0 z-50 flex flex-col bg-black/50 backdrop-blur-sm"role=dialog aria-modal=true tabindex=-1 style="animation:expandable-fade-in 0.15s ease-out"><div class="relative flex flex-col m-4 flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"style="animation:expandable-scale-in 0.15s ease-out"><div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0"><h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate"></h2><div class="flex items-center gap-2"><!$><!/><button class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div></div><div class="flex-1 min-h-0 overflow-auto p-4 flex flex-col">`), _tmpl$4 = /* @__PURE__ */ template(`<style>
             @keyframes expandable-fade-in {

package/dist/components/FeedbackInline.js

@@ -1,4 +1,4 @@
-import { delegateEvents, getNextElement, template, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className } from "solid-js/web";
+import { delegateEvents, getNextElement, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, template } from "solid-js/web";
 import { createSignal, Show } from "solid-js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
 var _tmpl$ = /* @__PURE__ */ template(`<button type=button class="p-1 rounded hover:bg-green-500/10 text-deposium-slate-500 hover:text-green-500 transition-colors"aria-label="Mark response as useful"data-feedback-inline-rating=positive><svg class="w-3.5 h-3.5"fill=none stroke=currentColor viewBox="0 0 24 24"><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z M3 15v7">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="p-1 rounded hover:bg-red-500/10 text-deposium-slate-500 hover:text-red-500 transition-colors"aria-label="Mark response as not useful"data-feedback-inline-rating=negative><svg class="w-3.5 h-3.5"fill=none stroke=currentColor viewBox="0 0 24 24"><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z M21 4v7">`), _tmpl$3 = /* @__PURE__ */ template(`<div>`), _tmpl$4 = /* @__PURE__ */ template(`<span class="text-[11px] text-deposium-slate-500">`);

package/dist/components/FooterRenderer.js

@@ -1,4 +1,4 @@
-import { getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute } from "solid-js/web";
+import { getNextElement, getNextMarker, insert, createComponent, effect, setAttribute, template } from "solid-js/web";
 import { Show, For } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<span class=font-medium>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><!$><!/>ms`), _tmpl$3 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg><!$><!/> sources`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex gap-3">`), _tmpl$6 = /* @__PURE__ */ template(`<div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4"><!$><!/><!$><!/><!$><!/><!$><!/><div class=flex-grow></div><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`);
 const FooterRenderer = (props) => {

package/dist/components/FormFieldRenderer.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents, template } from "solid-js/web";
 import { createSignal, Show, Switch, Match, For, createEffect, onCleanup } from "solid-js";
 import { useConditionalField } from "../hooks/useConditionalField.js";
 var _tmpl$ = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<input>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<p>`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ template(`<option>`), _tmpl$22 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$25 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 mb-1 text-xs text-gray-400"><span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full"></span>Resolving...`), _tmpl$31 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$34 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);

package/dist/components/FormRenderer.js

@@ -1,4 +1,4 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, runHydrationEvents, memo, effect, setProperty, setAttribute, className } from "solid-js/web";
+import { delegateEvents, getNextElement, getNextMarker, insert, createComponent, runHydrationEvents, memo, effect, setProperty, setAttribute, className, template } from "solid-js/web";
 import { createSignal, onCleanup, onMount, createEffect, Show, For } from "solid-js";
 import { FormFieldRenderer } from "./FormFieldRenderer.js";
 import { useAction } from "../hooks/useAction.js";

package/dist/components/GenerativeUIErrorBoundary.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, memo, isServer, getNextElement, template, getNextMarker, insert, addEventListener, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, createComponent, memo, isServer, getNextElement, getNextMarker, insert, addEventListener, runHydrationEvents, template } from "solid-js/web";
 import { createSignal, onMount, ErrorBoundary, Show } from "solid-js";
 import { createLogger } from "../utils/logger.js";
 import { useTelemetry } from "../context/MCPUITelemetryContext.js";

package/dist/components/GhostText.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 var _tmpl$ = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-overlay aria-hidden=true style=position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;white-space:pre;padding:inherit;font:inherit;line-height:inherit;letter-spacing:inherit><span style=visibility:hidden></span><span style=color:#9ca3af;opacity:0.7>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-hint style="position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:0.75rem;color:#6b7280;background-color:rgba(255, 255, 255, 0.9);padding:2px 6px;border-radius:4px;pointer-events:none">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-loading style=position:absolute;right:8px;top:50%;transform:translateY(-50%)><span style="display:inline-block;width:12px;height:12px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div style=position:relative;display:inline-block;width:100%><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-input-wrapper style=position:relative><!$><!/><input style=position:relative;background-color:transparent;caret-color:inherit>`);
@@ -101,5 +101,4 @@ const GhostTextInput = (props) => {
 web.delegateEvents(["input", "keydown"]);
 exports.GhostText = GhostText;
 exports.GhostTextInput = GhostTextInput;
-exports.default = GhostText;
 //# sourceMappingURL=GhostText.cjs.map

package/dist/components/GhostText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GhostText.cjs","sources":["../../src/components/GhostText.tsx"],"sourcesContent":["/**\n * GhostText Component\n * Displays LLM-style ghost text completion overlay\n *\n * Sprint Autocomplete Feature\n */\n\nimport { Component, Show, JSX, createMemo } from 'solid-js'\n\n/**\n * Props for GhostText component\n */\nexport interface GhostTextProps {\n  /**\n   * Current input value\n   */\n  inputValue: string\n\n  /**\n   * Ghost text to show (the completion after input)\n   */\n  ghostText: string\n\n  /**\n   * Whether ghost text is visible\n   */\n  visible?: boolean\n\n  /**\n   * Custom class for the container\n   */\n  class?: string\n\n  /**\n   * Custom class for the ghost text\n   */\n  ghostClass?: string\n\n  /**\n   * Accept hint text (e.g., \"Tab to accept\")\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n}\n\n/**\n * GhostText Component\n * Overlays ghost text on an input field to show completion suggestions\n */\nexport const GhostText: Component<GhostTextProps> = (props) => {\n  const shouldShow = createMemo(() =>\n    props.visible !== false && props.ghostText && props.ghostText.length > 0\n  )\n\n  return (\n    <div\n      class={`mcp-ghost-text-container ${props.class || ''}`}\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '100%'\n      }}\n    >\n      {/* Ghost text overlay */}\n      <Show when={shouldShow()}>\n        <div\n          class=\"mcp-ghost-text-overlay\"\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            'pointer-events': 'none',\n            overflow: 'hidden',\n            'white-space': 'pre',\n            padding: 'inherit',\n            font: 'inherit',\n            'line-height': 'inherit',\n            'letter-spacing': 'inherit'\n          }}\n          aria-hidden=\"true\"\n        >\n          {/* Invisible placeholder for input text */}\n          <span style={{ visibility: 'hidden' }}>{props.inputValue}</span>\n          {/* Visible ghost text */}\n          <span\n            class={`mcp-ghost-text ${props.ghostClass || ''}`}\n            style={{\n              color: '#9ca3af',\n              opacity: '0.7'\n            }}\n          >\n            {props.ghostText}\n          </span>\n        </div>\n      </Show>\n\n      {/* Hint text */}\n      <Show when={shouldShow() && props.hintText}>\n        <div\n          class=\"mcp-ghost-text-hint\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)',\n            'font-size': '0.75rem',\n            color: '#6b7280',\n            'background-color': 'rgba(255, 255, 255, 0.9)',\n            padding: '2px 6px',\n            'border-radius': '4px',\n            'pointer-events': 'none'\n          }}\n        >\n          {props.hintText}\n        </div>\n      </Show>\n\n      {/* Loading indicator */}\n      <Show when={props.isLoading}>\n        <div\n          class=\"mcp-ghost-text-loading\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)'\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              width: '12px',\n              height: '12px',\n              border: '2px solid #e5e7eb',\n              'border-top-color': '#3b82f6',\n              'border-radius': '50%',\n              animation: 'mcp-spin 0.6s linear infinite'\n            }}\n          />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Input wrapper that includes ghost text functionality\n */\nexport interface GhostTextInputProps {\n  /**\n   * Current input value\n   */\n  value: string\n\n  /**\n   * Ghost text to show\n   */\n  ghostText: string\n\n  /**\n   * onChange handler\n   */\n  onInput?: (value: string) => void\n\n  /**\n   * onKeyDown handler\n   */\n  onKeyDown?: (e: KeyboardEvent) => void\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n\n  /**\n   * Input type\n   */\n  type?: 'text' | 'email' | 'search'\n\n  /**\n   * Whether input is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Input name\n   */\n  name?: string\n\n  /**\n   * Input ID\n   */\n  id?: string\n\n  /**\n   * Custom class for input\n   */\n  class?: string\n\n  /**\n   * Accept hint\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n\n  /**\n   * Whether ghost text is visible\n   */\n  showGhost?: boolean\n\n  /**\n   * Additional input attributes\n   */\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * GhostTextInput Component\n * Input field with integrated ghost text overlay\n */\nexport const GhostTextInput: Component<GhostTextInputProps> = (props) => {\n  return (\n    <div class=\"mcp-ghost-text-input-wrapper\" style={{ position: 'relative' }}>\n      <GhostText\n        inputValue={props.value}\n        ghostText={props.ghostText}\n        visible={props.showGhost}\n        hintText={props.hintText}\n        isLoading={props.isLoading}\n      />\n      <input\n        type={props.type || 'text'}\n        id={props.id}\n        name={props.name}\n        value={props.value}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        class={`mcp-ghost-text-input ${props.class || ''}`}\n        style={{\n          position: 'relative',\n          'background-color': 'transparent',\n          'caret-color': 'inherit'\n        }}\n        onInput={(e) => props.onInput?.(e.currentTarget.value)}\n        onKeyDown={(e) => props.onKeyDown?.(e)}\n        {...(props.inputProps || {})}\n      />\n    </div>\n  )\n}\n\nexport default GhostText\n"],"names":["GhostText","props","shouldShow","createMemo","visible","ghostText","length","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$","_el$3","_el$4","inputValue","_$effect","_$className","ghostClass","_$memo","hintText","_el$5","_tmpl$2","isLoading","_el$6","_tmpl$3","class","GhostTextInput","_el$12","_tmpl$5","_el$14","_el$15","_co$4","_el$13","value","showGhost","$$keydown","e","onKeyDown","$$input","onInput","currentTarget","_$spread","_$mergeProps","type","id","name","placeholder","disabled","inputProps","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"GhostText.cjs","sources":["../../src/components/GhostText.tsx"],"sourcesContent":["/**\n * GhostText Component\n * Displays LLM-style ghost text completion overlay\n *\n * Sprint Autocomplete Feature\n */\n\nimport { Component, Show, JSX, createMemo } from 'solid-js'\n\n/**\n * Props for GhostText component\n */\nexport interface GhostTextProps {\n  /**\n   * Current input value\n   */\n  inputValue: string\n\n  /**\n   * Ghost text to show (the completion after input)\n   */\n  ghostText: string\n\n  /**\n   * Whether ghost text is visible\n   */\n  visible?: boolean\n\n  /**\n   * Custom class for the container\n   */\n  class?: string\n\n  /**\n   * Custom class for the ghost text\n   */\n  ghostClass?: string\n\n  /**\n   * Accept hint text (e.g., \"Tab to accept\")\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n}\n\n/**\n * GhostText Component\n * Overlays ghost text on an input field to show completion suggestions\n */\nexport const GhostText: Component<GhostTextProps> = (props) => {\n  const shouldShow = createMemo(() =>\n    props.visible !== false && props.ghostText && props.ghostText.length > 0\n  )\n\n  return (\n    <div\n      class={`mcp-ghost-text-container ${props.class || ''}`}\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '100%'\n      }}\n    >\n      {/* Ghost text overlay */}\n      <Show when={shouldShow()}>\n        <div\n          class=\"mcp-ghost-text-overlay\"\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            'pointer-events': 'none',\n            overflow: 'hidden',\n            'white-space': 'pre',\n            padding: 'inherit',\n            font: 'inherit',\n            'line-height': 'inherit',\n            'letter-spacing': 'inherit'\n          }}\n          aria-hidden=\"true\"\n        >\n          {/* Invisible placeholder for input text */}\n          <span style={{ visibility: 'hidden' }}>{props.inputValue}</span>\n          {/* Visible ghost text */}\n          <span\n            class={`mcp-ghost-text ${props.ghostClass || ''}`}\n            style={{\n              color: '#9ca3af',\n              opacity: '0.7'\n            }}\n          >\n            {props.ghostText}\n          </span>\n        </div>\n      </Show>\n\n      {/* Hint text */}\n      <Show when={shouldShow() && props.hintText}>\n        <div\n          class=\"mcp-ghost-text-hint\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)',\n            'font-size': '0.75rem',\n            color: '#6b7280',\n            'background-color': 'rgba(255, 255, 255, 0.9)',\n            padding: '2px 6px',\n            'border-radius': '4px',\n            'pointer-events': 'none'\n          }}\n        >\n          {props.hintText}\n        </div>\n      </Show>\n\n      {/* Loading indicator */}\n      <Show when={props.isLoading}>\n        <div\n          class=\"mcp-ghost-text-loading\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)'\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              width: '12px',\n              height: '12px',\n              border: '2px solid #e5e7eb',\n              'border-top-color': '#3b82f6',\n              'border-radius': '50%',\n              animation: 'mcp-spin 0.6s linear infinite'\n            }}\n          />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Input wrapper that includes ghost text functionality\n */\nexport interface GhostTextInputProps {\n  /**\n   * Current input value\n   */\n  value: string\n\n  /**\n   * Ghost text to show\n   */\n  ghostText: string\n\n  /**\n   * onChange handler\n   */\n  onInput?: (value: string) => void\n\n  /**\n   * onKeyDown handler\n   */\n  onKeyDown?: (e: KeyboardEvent) => void\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n\n  /**\n   * Input type\n   */\n  type?: 'text' | 'email' | 'search'\n\n  /**\n   * Whether input is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Input name\n   */\n  name?: string\n\n  /**\n   * Input ID\n   */\n  id?: string\n\n  /**\n   * Custom class for input\n   */\n  class?: string\n\n  /**\n   * Accept hint\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n\n  /**\n   * Whether ghost text is visible\n   */\n  showGhost?: boolean\n\n  /**\n   * Additional input attributes\n   */\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * GhostTextInput Component\n * Input field with integrated ghost text overlay\n */\nexport const GhostTextInput: Component<GhostTextInputProps> = (props) => {\n  return (\n    <div class=\"mcp-ghost-text-input-wrapper\" style={{ position: 'relative' }}>\n      <GhostText\n        inputValue={props.value}\n        ghostText={props.ghostText}\n        visible={props.showGhost}\n        hintText={props.hintText}\n        isLoading={props.isLoading}\n      />\n      <input\n        type={props.type || 'text'}\n        id={props.id}\n        name={props.name}\n        value={props.value}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        class={`mcp-ghost-text-input ${props.class || ''}`}\n        style={{\n          position: 'relative',\n          'background-color': 'transparent',\n          'caret-color': 'inherit'\n        }}\n        onInput={(e) => props.onInput?.(e.currentTarget.value)}\n        onKeyDown={(e) => props.onKeyDown?.(e)}\n        {...(props.inputProps || {})}\n      />\n    </div>\n  )\n}\n\nexport default GhostText\n"],"names":["GhostText","props","shouldShow","createMemo","visible","ghostText","length","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$","_el$3","_el$4","inputValue","_$effect","_$className","ghostClass","_$memo","hintText","_el$5","_tmpl$2","isLoading","_el$6","_tmpl$3","class","GhostTextInput","_el$12","_tmpl$5","_el$14","_el$15","_co$4","_el$13","value","showGhost","$$keydown","e","onKeyDown","$$input","onInput","currentTarget","_$spread","_$mergeProps","type","id","name","placeholder","disabled","inputProps","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}

package/dist/components/GhostText.js

@@ -1,4 +1,4 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, className, memo, spread, mergeProps, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, getNextElement, getNextMarker, insert, createComponent, effect, className, memo, spread, mergeProps, runHydrationEvents, template } from "solid-js/web";
 import { createMemo, Show } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class=mcp-ghost-text-overlay aria-hidden=true style=position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;white-space:pre;padding:inherit;font:inherit;line-height:inherit;letter-spacing:inherit><span style=visibility:hidden></span><span style=color:#9ca3af;opacity:0.7>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-hint style="position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:0.75rem;color:#6b7280;background-color:rgba(255, 255, 255, 0.9);padding:2px 6px;border-radius:4px;pointer-events:none">`), _tmpl$3 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-loading style=position:absolute;right:8px;top:50%;transform:translateY(-50%)><span style="display:inline-block;width:12px;height:12px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite">`), _tmpl$4 = /* @__PURE__ */ template(`<div style=position:relative;display:inline-block;width:100%><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-input-wrapper style=position:relative><!$><!/><input style=position:relative;background-color:transparent;caret-color:inherit>`);
 const GhostText = (props) => {
@@ -99,7 +99,6 @@ const GhostTextInput = (props) => {
 delegateEvents(["input", "keydown"]);
 export {
   GhostText,
-  GhostTextInput,
-  GhostText as default
+  GhostTextInput
 };
 //# sourceMappingURL=GhostText.js.map

package/dist/components/GraphRenderer.cjs

@@ -6,6 +6,7 @@ const ExpandableWrapper = require("./ExpandableWrapper.cjs");
 const PortalDropdownMenu = require("./PortalDropdownMenu.cjs");
 const DegradedFallback = require("./DegradedFallback.cjs");
 const degradedProjections = require("../utils/degraded-projections.cjs");
+const escapeHtml = require("../utils/escape-html.cjs");
 const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
 var _tmpl$ = /* @__PURE__ */ web.template(`<div><div class="absolute right-2 top-2 z-10"><button type=button class="px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"title="Export graph"aria-label="Export graph"aria-haspopup=menu>Export ▾</button><!$><!/></div><div></div><!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="w-full p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"><p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">Graph rendering unavailable</p><p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">Install <code>@antv/g6</code> peer dependency to render <code>type: "graph"</code> components.`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="w-full p-4 bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-lg animate-pulse"><div class="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div><div class="h-3 w-48 bg-gray-200 dark:bg-gray-700 rounded">`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 last:border-b-0"><div class=font-medium></div><div class="text-[10px] text-gray-500 dark:text-gray-400">`);
 let g6ModulePromise;
@@ -136,7 +137,7 @@ const GraphRenderer = (props) => {
             if (!item) return "";
             const label = item.label ?? item.id ?? "";
             const data = item.data ? JSON.stringify(item.data) : "";
-            return `<div style="padding:4px 8px"><strong>${escapeHtml(String(label))}</strong>${data ? `<br><span style="font-size:11px;opacity:0.7">${escapeHtml(data)}</span>` : ""}</div>`;
+            return `<div style="padding:4px 8px"><strong>${escapeHtml.escapeHtml(String(label))}</strong>${data ? `<br><span style="font-size:11px;opacity:0.7">${escapeHtml.escapeHtml(data)}</span>` : ""}</div>`;
           }
         }];
       }
@@ -305,24 +306,6 @@ async function downloadDataUrl(dataUrl, filename) {
   const blob = await res.blob();
   downloadBlob(blob, filename);
 }
-function escapeHtml(s) {
-  return s.replace(/[&<>"']/g, (c) => {
-    switch (c) {
-      case "&":
-        return "&amp;";
-      case "<":
-        return "&lt;";
-      case ">":
-        return "&gt;";
-      case '"':
-        return "&quot;";
-      case "'":
-        return "&#39;";
-      default:
-        return c;
-    }
-  });
-}
 web.delegateEvents(["click"]);
 exports.GraphRenderer = GraphRenderer;
 exports.graphToJSON = toJSON;