@seed-ship/mcp-ui-solid 2.2.4 → 2.2.6

package/dist/components/ComponentToolbar.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div>`), _tmpl$2 = /* @__PURE__ */ web.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 = {
+  copy: "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",
+  check: "M5 13l4 4L19 7",
+  download: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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",
+  expand: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5",
+  wordwrap: "M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4"
+};
+const ComponentToolbar = (props) => {
+  const positionClasses = () => {
+    switch (props.position) {
+      case "top-left":
+        return "top-2 left-2";
+      case "bottom-right":
+        return "bottom-2 right-2";
+      default:
+        return "top-2 right-2";
+    }
+  };
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$);
+    web.insert(_el$, web.createComponent(solidJs.For, {
+      get each() {
+        return props.actions;
+      },
+      children: (action) => web.createComponent(ToolbarButton, {
+        action
+      })
+    }));
+    web.effect(() => web.className(_el$, `absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`));
+    return _el$;
+  })();
+};
+const ToolbarButton = (props) => {
+  const [showCheck, setShowCheck] = solidJs.createSignal(false);
+  const handleClick = () => {
+    props.action.onClick();
+    if (props.action.showFeedback) {
+      setShowCheck(true);
+      setTimeout(() => setShowCheck(false), 2e3);
+    }
+  };
+  const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon];
+  const isActive = () => props.action.active;
+  const colorClass = () => {
+    if (showCheck()) return "text-green-500";
+    if (isActive()) return "text-blue-500 dark:text-blue-400";
+    return "text-gray-500 dark:text-gray-400";
+  };
+  return (() => {
+    var _el$2 = web.getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    _el$2.$$click = handleClick;
+    web.effect((_p$) => {
+      var _v$ = props.action.label, _v$2 = props.action.label, _v$3 = `w-3 h-3 ${colorClass()}`, _v$4 = iconPath();
+      _v$ !== _p$.e && web.setAttribute(_el$2, "title", _p$.e = _v$);
+      _v$2 !== _p$.t && web.setAttribute(_el$2, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && web.setAttribute(_el$3, "class", _p$.a = _v$3);
+      _v$4 !== _p$.o && web.setAttribute(_el$4, "d", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    web.runHydrationEvents();
+    return _el$2;
+  })();
+};
+web.delegateEvents(["click"]);
+exports.ComponentToolbar = ComponentToolbar;
+//# sourceMappingURL=ComponentToolbar.cjs.map

package/dist/components/ComponentToolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentToolbar.cjs","sources":["../../src/components/ComponentToolbar.tsx"],"sourcesContent":["/**\n * ComponentToolbar - Unified toolbar for component actions\n * v2.2.5: Consistent icon set, position, and hover behavior across all components\n */\n\nimport { Component, For, Show, createSignal } from 'solid-js'\n\n/** SVG icon paths for toolbar actions */\nconst ICONS = {\n  copy: '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',\n  check: 'M5 13l4 4L19 7',\n  download: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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',\n  expand: 'M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5',\n  wordwrap: 'M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4',\n} as const\n\nexport type ToolbarIcon = keyof typeof ICONS\n\nexport interface ToolbarAction {\n  /** Icon to display */\n  icon: ToolbarIcon\n  /** Tooltip label */\n  label: string\n  /** Click handler */\n  onClick: () => void\n  /** Whether to show a success state (green check) after click */\n  showFeedback?: boolean\n  /** Active/toggled state (e.g. word wrap on) */\n  active?: boolean\n}\n\nexport interface ComponentToolbarProps {\n  /** Actions to display */\n  actions: ToolbarAction[]\n  /** Corner position */\n  position?: 'top-right' | 'top-left' | 'bottom-right'\n}\n\n/**\n * Renders a row of small icon buttons, visible on parent hover (requires parent `group` class).\n *\n * @example\n * <div class=\"relative group\">\n *   <MyContent />\n *   <ComponentToolbar actions={[\n *     { icon: 'copy', label: 'Copy', onClick: handleCopy, showFeedback: true },\n *     { icon: 'download', label: 'Download CSV', onClick: handleDownload },\n *   ]} />\n * </div>\n */\nexport const ComponentToolbar: Component<ComponentToolbarProps> = (props) => {\n  const positionClasses = () => {\n    switch (props.position) {\n      case 'top-left': return 'top-2 left-2'\n      case 'bottom-right': return 'bottom-2 right-2'\n      default: return 'top-2 right-2'\n    }\n  }\n\n  return (\n    <div class={`absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`}>\n      <For each={props.actions}>\n        {(action) => <ToolbarButton action={action} />}\n      </For>\n    </div>\n  )\n}\n\n/** Individual toolbar button with optional feedback state */\nconst ToolbarButton: Component<{ action: ToolbarAction }> = (props) => {\n  const [showCheck, setShowCheck] = createSignal(false)\n\n  const handleClick = () => {\n    props.action.onClick()\n    if (props.action.showFeedback) {\n      setShowCheck(true)\n      setTimeout(() => setShowCheck(false), 2000)\n    }\n  }\n\n  const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon]\n  const isActive = () => props.action.active\n  const colorClass = () => {\n    if (showCheck()) return 'text-green-500'\n    if (isActive()) return 'text-blue-500 dark:text-blue-400'\n    return 'text-gray-500 dark:text-gray-400'\n  }\n\n  return (\n    <button\n      onClick={handleClick}\n      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`}\n      title={props.action.label}\n      aria-label={props.action.label}\n    >\n      <svg class={`w-3 h-3 ${colorClass()}`} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d={iconPath()} />\n      </svg>\n    </button>\n  )\n}\n"],"names":["ICONS","copy","check","download","expand","wordwrap","ComponentToolbar","props","positionClasses","position","_el$","_$getNextElement","_tmpl$","_$insert","_$createComponent","For","each","actions","children","action","ToolbarButton","_$effect","_$className","showCheck","setShowCheck","createSignal","handleClick","onClick","showFeedback","setTimeout","iconPath","icon","isActive","active","colorClass","_el$2","_tmpl$2","_el$3","firstChild","_el$4","$$click","_p$","_v$","label","_v$2","_v$3","_v$4","e","_$setAttribute","t","a","o","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;AAQA,MAAMA,QAAQ;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,UAAU;AACZ;AAoCO,MAAMC,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,kBAAkBA,MAAM;AAC5B,YAAQD,MAAME,UAAAA;AAAAA,MACZ,KAAK;AAAY,eAAO;AAAA,MACxB,KAAK;AAAgB,eAAO;AAAA,MAC5B;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA;AAAAC,eAAAH,MAAAI,IAAAA,gBAEKC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,MAAMU;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,WAAML,IAAAA,gBAAMM,eAAa;AAAA,QAACD;AAAAA,MAAAA,CAAc;AAAA,IAAA,CAAI,CAAA;AAAAE,eAAA,MAAAC,IAAAA,UAAAZ,MAFtC,YAAYF,gBAAAA,CAAiB,oFAAoF,CAAA;AAAA,WAAAE;AAAAA,EAAA,GAAA;AAMjI;AAGA,MAAMU,gBAAuDb,CAAAA,UAAU;AACrE,QAAM,CAACgB,WAAWC,YAAY,IAAIC,QAAAA,aAAa,KAAK;AAEpD,QAAMC,cAAcA,MAAM;AACxBnB,UAAMY,OAAOQ,QAAAA;AACb,QAAIpB,MAAMY,OAAOS,cAAc;AAC7BJ,mBAAa,IAAI;AACjBK,iBAAW,MAAML,aAAa,KAAK,GAAG,GAAI;AAAA,IAC5C;AAAA,EACF;AAEA,QAAMM,WAAWA,MAAMP,UAAAA,IAAcvB,MAAME,QAAQF,MAAMO,MAAMY,OAAOY,IAAI;AAC1E,QAAMC,WAAWA,MAAMzB,MAAMY,OAAOc;AACpC,QAAMC,aAAaA,MAAM;AACvB,QAAIX,UAAAA,EAAa,QAAO;AACxB,QAAIS,SAAAA,EAAY,QAAO;AACvB,WAAO;AAAA,EACT;AAEA,UAAA,MAAA;AAAA,QAAAG,QAAAxB,mBAAAyB,OAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAEad;AAAWL,QAAAA,OAAAoB,CAAAA,QAAA;AAAA,UAAAC,MAEbnC,MAAMY,OAAOwB,OAAKC,OACbrC,MAAMY,OAAOwB,OAAKE,OAElB,WAAWX,WAAAA,CAAY,IAAEY,OACsChB,SAAAA;AAAUY,cAAAD,IAAAM,KAAAC,IAAAA,aAAAb,OAAA,SAAAM,IAAAM,IAAAL,GAAA;AAAAE,eAAAH,IAAAQ,KAAAD,IAAAA,aAAAb,OAAA,cAAAM,IAAAQ,IAAAL,IAAA;AAAAC,eAAAJ,IAAAS,KAAAF,IAAAA,aAAAX,OAAA,SAAAI,IAAAS,IAAAL,IAAA;AAAAC,eAAAL,IAAAU,KAAAH,IAAAA,aAAAT,OAAA,KAAAE,IAAAU,IAAAL,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAM,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAAlB;AAAAA,EAAA,GAAA;AAI3F;AAACmB,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/components/ComponentToolbar.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ComponentToolbar - Unified toolbar for component actions
+ * v2.2.5: Consistent icon set, position, and hover behavior across all components
+ */
+import { Component } from 'solid-js';
+/** SVG icon paths for toolbar actions */
+declare const ICONS: {
+    readonly copy: "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";
+    readonly check: "M5 13l4 4L19 7";
+    readonly download: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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";
+    readonly expand: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5";
+    readonly wordwrap: "M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4";
+};
+export type ToolbarIcon = keyof typeof ICONS;
+export interface ToolbarAction {
+    /** Icon to display */
+    icon: ToolbarIcon;
+    /** Tooltip label */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Whether to show a success state (green check) after click */
+    showFeedback?: boolean;
+    /** Active/toggled state (e.g. word wrap on) */
+    active?: boolean;
+}
+export interface ComponentToolbarProps {
+    /** Actions to display */
+    actions: ToolbarAction[];
+    /** Corner position */
+    position?: 'top-right' | 'top-left' | 'bottom-right';
+}
+/**
+ * Renders a row of small icon buttons, visible on parent hover (requires parent `group` class).
+ *
+ * @example
+ * <div class="relative group">
+ *   <MyContent />
+ *   <ComponentToolbar actions={[
+ *     { icon: 'copy', label: 'Copy', onClick: handleCopy, showFeedback: true },
+ *     { icon: 'download', label: 'Download CSV', onClick: handleDownload },
+ *   ]} />
+ * </div>
+ */
+export declare const ComponentToolbar: Component<ComponentToolbarProps>;
+export {};
+//# sourceMappingURL=ComponentToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentToolbar.d.ts","sourceRoot":"","sources":["../../src/components/ComponentToolbar.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAA2B,MAAM,UAAU,CAAA;AAE7D,yCAAyC;AACzC,QAAA,MAAM,KAAK;;;;;;CAMD,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAA;AAE5C,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,IAAI,EAAE,WAAW,CAAA;IACjB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,yBAAyB;IACzB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,CAAA;CACrD;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAgB7D,CAAA"}

package/dist/components/ComponentToolbar.js

@@ -0,0 +1,76 @@
+import { delegateEvents, getNextElement, template, insert, createComponent, effect, className, 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 = {
+  copy: "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",
+  check: "M5 13l4 4L19 7",
+  download: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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",
+  expand: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5",
+  wordwrap: "M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4"
+};
+const ComponentToolbar = (props) => {
+  const positionClasses = () => {
+    switch (props.position) {
+      case "top-left":
+        return "top-2 left-2";
+      case "bottom-right":
+        return "bottom-2 right-2";
+      default:
+        return "top-2 right-2";
+    }
+  };
+  return (() => {
+    var _el$ = getNextElement(_tmpl$);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.actions;
+      },
+      children: (action) => createComponent(ToolbarButton, {
+        action
+      })
+    }));
+    effect(() => className(_el$, `absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`));
+    return _el$;
+  })();
+};
+const ToolbarButton = (props) => {
+  const [showCheck, setShowCheck] = createSignal(false);
+  const handleClick = () => {
+    props.action.onClick();
+    if (props.action.showFeedback) {
+      setShowCheck(true);
+      setTimeout(() => setShowCheck(false), 2e3);
+    }
+  };
+  const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon];
+  const isActive = () => props.action.active;
+  const colorClass = () => {
+    if (showCheck()) return "text-green-500";
+    if (isActive()) return "text-blue-500 dark:text-blue-400";
+    return "text-gray-500 dark:text-gray-400";
+  };
+  return (() => {
+    var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    _el$2.$$click = handleClick;
+    effect((_p$) => {
+      var _v$ = props.action.label, _v$2 = props.action.label, _v$3 = `w-3 h-3 ${colorClass()}`, _v$4 = iconPath();
+      _v$ !== _p$.e && setAttribute(_el$2, "title", _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && setAttribute(_el$3, "class", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$4, "d", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    runHydrationEvents();
+    return _el$2;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  ComponentToolbar
+};
+//# sourceMappingURL=ComponentToolbar.js.map

package/dist/components/ComponentToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentToolbar.js","sources":["../../src/components/ComponentToolbar.tsx"],"sourcesContent":["/**\n * ComponentToolbar - Unified toolbar for component actions\n * v2.2.5: Consistent icon set, position, and hover behavior across all components\n */\n\nimport { Component, For, Show, createSignal } from 'solid-js'\n\n/** SVG icon paths for toolbar actions */\nconst ICONS = {\n  copy: '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',\n  check: 'M5 13l4 4L19 7',\n  download: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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',\n  expand: 'M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5',\n  wordwrap: 'M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4',\n} as const\n\nexport type ToolbarIcon = keyof typeof ICONS\n\nexport interface ToolbarAction {\n  /** Icon to display */\n  icon: ToolbarIcon\n  /** Tooltip label */\n  label: string\n  /** Click handler */\n  onClick: () => void\n  /** Whether to show a success state (green check) after click */\n  showFeedback?: boolean\n  /** Active/toggled state (e.g. word wrap on) */\n  active?: boolean\n}\n\nexport interface ComponentToolbarProps {\n  /** Actions to display */\n  actions: ToolbarAction[]\n  /** Corner position */\n  position?: 'top-right' | 'top-left' | 'bottom-right'\n}\n\n/**\n * Renders a row of small icon buttons, visible on parent hover (requires parent `group` class).\n *\n * @example\n * <div class=\"relative group\">\n *   <MyContent />\n *   <ComponentToolbar actions={[\n *     { icon: 'copy', label: 'Copy', onClick: handleCopy, showFeedback: true },\n *     { icon: 'download', label: 'Download CSV', onClick: handleDownload },\n *   ]} />\n * </div>\n */\nexport const ComponentToolbar: Component<ComponentToolbarProps> = (props) => {\n  const positionClasses = () => {\n    switch (props.position) {\n      case 'top-left': return 'top-2 left-2'\n      case 'bottom-right': return 'bottom-2 right-2'\n      default: return 'top-2 right-2'\n    }\n  }\n\n  return (\n    <div class={`absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`}>\n      <For each={props.actions}>\n        {(action) => <ToolbarButton action={action} />}\n      </For>\n    </div>\n  )\n}\n\n/** Individual toolbar button with optional feedback state */\nconst ToolbarButton: Component<{ action: ToolbarAction }> = (props) => {\n  const [showCheck, setShowCheck] = createSignal(false)\n\n  const handleClick = () => {\n    props.action.onClick()\n    if (props.action.showFeedback) {\n      setShowCheck(true)\n      setTimeout(() => setShowCheck(false), 2000)\n    }\n  }\n\n  const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon]\n  const isActive = () => props.action.active\n  const colorClass = () => {\n    if (showCheck()) return 'text-green-500'\n    if (isActive()) return 'text-blue-500 dark:text-blue-400'\n    return 'text-gray-500 dark:text-gray-400'\n  }\n\n  return (\n    <button\n      onClick={handleClick}\n      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`}\n      title={props.action.label}\n      aria-label={props.action.label}\n    >\n      <svg class={`w-3 h-3 ${colorClass()}`} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d={iconPath()} />\n      </svg>\n    </button>\n  )\n}\n"],"names":["ICONS","copy","check","download","expand","wordwrap","ComponentToolbar","props","positionClasses","position","_el$","_$getNextElement","_tmpl$","_$insert","_$createComponent","For","each","actions","children","action","ToolbarButton","_$effect","_$className","showCheck","setShowCheck","createSignal","handleClick","onClick","showFeedback","setTimeout","iconPath","icon","isActive","active","colorClass","_el$2","_tmpl$2","_el$3","firstChild","_el$4","$$click","_p$","_v$","label","_v$2","_v$3","_v$4","e","_$setAttribute","t","a","o","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;AAQA,MAAMA,QAAQ;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,UAAU;AACZ;AAoCO,MAAMC,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,kBAAkBA,MAAM;AAC5B,YAAQD,MAAME,UAAAA;AAAAA,MACZ,KAAK;AAAY,eAAO;AAAA,MACxB,KAAK;AAAgB,eAAO;AAAA,MAC5B;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA;AAAAC,WAAAH,MAAAI,gBAEKC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,MAAMU;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,WAAML,gBAAMM,eAAa;AAAA,QAACD;AAAAA,MAAAA,CAAc;AAAA,IAAA,CAAI,CAAA;AAAAE,WAAA,MAAAC,UAAAZ,MAFtC,YAAYF,gBAAAA,CAAiB,oFAAoF,CAAA;AAAA,WAAAE;AAAAA,EAAA,GAAA;AAMjI;AAGA,MAAMU,gBAAuDb,CAAAA,UAAU;AACrE,QAAM,CAACgB,WAAWC,YAAY,IAAIC,aAAa,KAAK;AAEpD,QAAMC,cAAcA,MAAM;AACxBnB,UAAMY,OAAOQ,QAAAA;AACb,QAAIpB,MAAMY,OAAOS,cAAc;AAC7BJ,mBAAa,IAAI;AACjBK,iBAAW,MAAML,aAAa,KAAK,GAAG,GAAI;AAAA,IAC5C;AAAA,EACF;AAEA,QAAMM,WAAWA,MAAMP,UAAAA,IAAcvB,MAAME,QAAQF,MAAMO,MAAMY,OAAOY,IAAI;AAC1E,QAAMC,WAAWA,MAAMzB,MAAMY,OAAOc;AACpC,QAAMC,aAAaA,MAAM;AACvB,QAAIX,UAAAA,EAAa,QAAO;AACxB,QAAIS,SAAAA,EAAY,QAAO;AACvB,WAAO;AAAA,EACT;AAEA,UAAA,MAAA;AAAA,QAAAG,QAAAxB,eAAAyB,OAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAEad;AAAWL,WAAAoB,CAAAA,QAAA;AAAA,UAAAC,MAEbnC,MAAMY,OAAOwB,OAAKC,OACbrC,MAAMY,OAAOwB,OAAKE,OAElB,WAAWX,WAAAA,CAAY,IAAEY,OACsChB,SAAAA;AAAUY,cAAAD,IAAAM,KAAAC,aAAAb,OAAA,SAAAM,IAAAM,IAAAL,GAAA;AAAAE,eAAAH,IAAAQ,KAAAD,aAAAb,OAAA,cAAAM,IAAAQ,IAAAL,IAAA;AAAAC,eAAAJ,IAAAS,KAAAF,aAAAX,OAAA,SAAAI,IAAAS,IAAAL,IAAA;AAAAC,eAAAL,IAAAU,KAAAH,aAAAT,OAAA,KAAAE,IAAAU,IAAAL,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAM,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAAlB;AAAAA,EAAA,GAAA;AAI3F;AAACmB,eAAA,CAAA,OAAA,CAAA;"}

package/dist/index.cjs

@@ -20,6 +20,7 @@ const DraggableGridItem = require("./components/DraggableGridItem.cjs");
 const ResizeHandle = require("./components/ResizeHandle.cjs");
 const EditableUIResourceRenderer = require("./components/EditableUIResourceRenderer.cjs");
 const ExpandableWrapper = require("./components/ExpandableWrapper.cjs");
+const ComponentToolbar = require("./components/ComponentToolbar.cjs");
 const GhostText = require("./components/GhostText.cjs");
 const AutocompleteDropdown = require("./components/AutocompleteDropdown.cjs");
 const AutocompleteFormField = require("./components/AutocompleteFormField.cjs");
@@ -45,6 +46,7 @@ exports.DraggableGridItem = DraggableGridItem.DraggableGridItem;
 exports.ResizeHandle = ResizeHandle.ResizeHandle;
 exports.EditableUIResourceRenderer = EditableUIResourceRenderer.EditableUIResourceRenderer;
 exports.ExpandableWrapper = ExpandableWrapper.ExpandableWrapper;
+exports.ComponentToolbar = ComponentToolbar.ComponentToolbar;
 exports.GhostText = GhostText.GhostText;
 exports.GhostTextInput = GhostText.GhostTextInput;
 exports.AutocompleteDropdown = AutocompleteDropdown.AutocompleteDropdown;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.cts

@@ -32,6 +32,7 @@ export { DraggableGridItem } from './components/DraggableGridItem';
 export { ResizeHandle } from './components/ResizeHandle';
 export { EditableUIResourceRenderer } from './components/EditableUIResourceRenderer';
 export { ExpandableWrapper } from './components/ExpandableWrapper';
+export { ComponentToolbar } from './components/ComponentToolbar';
 export { GhostText, GhostTextInput } from './components/GhostText';
 export { AutocompleteDropdown } from './components/AutocompleteDropdown';
 export { AutocompleteFormField } from './components/AutocompleteFormField';
@@ -40,6 +41,7 @@ export type { DraggableGridItemProps } from './components/DraggableGridItem';
 export type { ResizeHandleProps as ResizeHandleComponentProps } from './components/ResizeHandle';
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer';
 export type { ExpandableWrapperProps } from './components/ExpandableWrapper';
+export type { ComponentToolbarProps, ToolbarAction, ToolbarIcon } from './components/ComponentToolbar';
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText';
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown';
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField';

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { DraggableGridItem } from './components/DraggableGridItem';
 export { ResizeHandle } from './components/ResizeHandle';
 export { EditableUIResourceRenderer } from './components/EditableUIResourceRenderer';
 export { ExpandableWrapper } from './components/ExpandableWrapper';
+export { ComponentToolbar } from './components/ComponentToolbar';
 export { GhostText, GhostTextInput } from './components/GhostText';
 export { AutocompleteDropdown } from './components/AutocompleteDropdown';
 export { AutocompleteFormField } from './components/AutocompleteFormField';
@@ -40,6 +41,7 @@ export type { DraggableGridItemProps } from './components/DraggableGridItem';
 export type { ResizeHandleProps as ResizeHandleComponentProps } from './components/ResizeHandle';
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer';
 export type { ExpandableWrapperProps } from './components/ExpandableWrapper';
+export type { ComponentToolbarProps, ToolbarAction, ToolbarIcon } from './components/ComponentToolbar';
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText';
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown';
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -18,6 +18,7 @@ import { DraggableGridItem } from "./components/DraggableGridItem.js";
 import { ResizeHandle } from "./components/ResizeHandle.js";
 import { EditableUIResourceRenderer } from "./components/EditableUIResourceRenderer.js";
 import { ExpandableWrapper } from "./components/ExpandableWrapper.js";
+import { ComponentToolbar } from "./components/ComponentToolbar.js";
 import { GhostText, GhostTextInput } from "./components/GhostText.js";
 import { AutocompleteDropdown } from "./components/AutocompleteDropdown.js";
 import { AutocompleteFormField } from "./components/AutocompleteFormField.js";
@@ -41,6 +42,7 @@ export {
   AutocompleteFormField,
   AutocompleteProvider,
   ComponentRegistry,
+  ComponentToolbar,
   DEFAULT_IFRAME_DOMAINS,
   DEFAULT_RESOURCE_LIMITS,
   DraggableGridItem,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}