@renderx-plugins/library/dist/chunk-ZDTCKDK3.js

RenderX Library UI plugin (temporary in-repo workspace package)

import {
  LibraryPreview,
  getCategoryDisplayName,
  groupComponentsByCategory
} from "./chunk-XIR2ZRQZ.js";

// src/ui/LibraryPanel.tsx
import React from "react";
import {
  useConductor,
  resolveInteraction,
  EventRouter
} from "@renderx-plugins/host-sdk";
import { isFlagEnabled } from "@renderx-plugins/host-sdk";
async function registerCssForComponents(items, conductor) {
  var _a, _b, _c, _d;
  try {
    const seen = /* @__PURE__ */ new Set();
    for (const item of Array.isArray(items) ? items : []) {
      const tpl = (item == null ? void 0 : item.template) ?? item;
      let css = tpl == null ? void 0 : tpl.css;
      if (!css && ((_b = (_a = item == null ? void 0 : item.ui) == null ? void 0 : _a.styles) == null ? void 0 : _b.css)) css = item.ui.styles.css;
      if (typeof css !== "string" || !css.trim()) continue;
      const classes = Array.isArray(tpl == null ? void 0 : tpl.classes) ? tpl.classes : [];
      const base = classes.find((c) => c.startsWith("rx-") && c !== "rx-comp");
      const metaType = ((_c = item == null ? void 0 : item.metadata) == null ? void 0 : _c.replaces) || ((_d = item == null ? void 0 : item.metadata) == null ? void 0 : _d.type);
      const name = base || (metaType ? `rx-${metaType}` : void 0);
      if (!name || seen.has(name)) continue;
      seen.add(name);
      try {
        await EventRouter.publish(
          "control.panel.css.edit.requested",
          { id: name, className: name, content: css },
          conductor
        );
      } catch {
      }
      try {
        await EventRouter.publish(
          "control.panel.css.create.requested",
          { id: name, className: name, content: css },
          conductor
        );
      } catch {
      }
    }
  } catch {
  }
}
function LibraryPanel() {
  const conductor = useConductor();
  const [items, setItems] = React.useState([]);
  const safeItems = Array.isArray(items) ? items : [];
  React.useEffect(() => {
    const run = async () => {
      var _a;
      try {
        await EventRouter.publish(
          "library.load.requested",
          {
            onComponentsLoaded: (list) => setItems(list)
          },
          conductor
        );
      } catch {
      }
      try {
        const r = resolveInteraction("library.load");
        if (!(r == null ? void 0 : r.pluginId) || !(r == null ? void 0 : r.sequenceId)) {
          throw new Error("Unknown interaction 'library.load'");
        }
        await ((_a = conductor == null ? void 0 : conductor.play) == null ? void 0 : _a.call(conductor, r.pluginId, r.sequenceId, {
          onComponentsLoaded: (list) => setItems(list)
        }));
      } catch (err) {
        if (isFlagEnabled("ui.layout-manifest")) {
          console.warn(
            "LibraryPanel: fallback routing unavailable (no host router and unknown interaction 'library.load').",
            err
          );
        }
      }
    };
    run();
  }, [conductor]);
  React.useEffect(() => {
    if (!conductor || !(safeItems == null ? void 0 : safeItems.length)) return;
    registerCssForComponents(safeItems, conductor);
  }, [safeItems, conductor]);
  const groupedComponents = groupComponentsByCategory(safeItems);
  return /* @__PURE__ */ React.createElement("div", { className: "library-sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "library-sidebar-header" }, /* @__PURE__ */ React.createElement("h2", { className: "library-sidebar-title" }, "\u{1F9E9} Component Library"), /* @__PURE__ */ React.createElement("p", { className: "library-sidebar-subtitle" }, "Drag components to the canvas")), /* @__PURE__ */ React.createElement("div", { className: "library-component-library rx-lib" }, Object.entries(groupedComponents).map(([category, components]) => /* @__PURE__ */ React.createElement("div", { key: category, className: "library-component-category" }, /* @__PURE__ */ React.createElement("div", { className: "library-category-title" }, getCategoryDisplayName(category)), /* @__PURE__ */ React.createElement("div", { className: "library-component-grid" }, components.map((component) => /* @__PURE__ */ React.createElement(
    LibraryPreview,
    {
      key: component.id,
      component,
      conductor
    }
  )))))));
}

export {
  registerCssForComponents,
  LibraryPanel
};
//# sourceMappingURL=chunk-ZDTCKDK3.js.map