import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { a as c, b as u } from "../../../../sdk/dist/shared/chunk-AQPN5SE2.js";
import "../../../../sdk/dist/shared/chunk-DQXDGV67.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-7DMUDZ4H.js";
import "../../../../sdk/dist/shared/chunk-LSPN22SI.js";
import "../../../../sdk/dist/shared/chunk-ETYYRWLK.js";
import "../../../../sdk/dist/shared/chunk-4TH3C76A.js";
import "../../../../sdk/dist/shared/chunk-FKNNTHWX.js";
import "../../../../sdk/dist/shared/chunk-JS4K5JRM.js";
import "../../../../sdk/dist/shared/chunk-WU6Q4WYD.js";
import "../../../../sdk/dist/shared/chunk-QISTDGPP.js";
import "../../../../sdk/dist/shared/chunk-LFQZRGHS.js";
import "../../../../sdk/dist/shared/chunk-SLRU4CT6.js";
import "../../../../sdk/dist/shared/chunk-TTTXV7TJ.js";
import "../../../../sdk/dist/shared/chunk-UHF6IEKV.js";
import "../../../../sdk/dist/shared/chunk-LGP6GWIY.js";
import "../../../../sdk/dist/shared/chunk-X43MB5WD.js";
import "../../../../sdk/dist/shared/chunk-NNI225RG.js";
import "../../../../sdk/dist/shared/chunk-ZQGNYK5I.js";
import "../../../../sdk/dist/shared/chunk-KHFNN4P3.js";
import "../../../../sdk/dist/shared/chunk-BZGNY7LB.js";
import "../../../../sdk/dist/shared/chunk-IIFTGWFZ.js";
import "../../../../sdk/dist/shared/chunk-UU2MSQXY.js";
import "../../../../sdk/dist/shared/chunk-T3LIA4YB.js";
import "../../../../sdk/dist/shared/chunk-YBGPPF7T.js";
import "../../../../sdk/dist/shared/chunk-UMHXXXVP.js";
import "../../../../sdk/dist/shared/chunk-5N6MBJJ4.js";
import { useState as d, useMemo as f, useEffect as x } from "react";
import { useEditorHelpers as g } from "../../../../../use-editor.js";
import { tx as s } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle as b } from "./PanelBlockTitle.js";
import { IconRender as h } from "./IconRender.js";
import { nanoid as p } from "../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { h as y } from "../../../../sdk/dist/shared/chunk-NLEWXPVM.js";
import "lodash-es";
import { useSortable as j } from "../../../../../node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_d5e73c0d556c94305a83c95cc0a8798b/node_modules/@dnd-kit/react/sortable.js";
const k = {
  basic: "Basic elements",
  widgets: "Widgets",
  media: "Media",
  container: "Containers & utilities",
  layout: "Layout"
};
function se() {
  const { setMouseOverPanel: i } = g(), [t, l] = d(null);
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      onMouseEnter: () => i(!0),
      onMouseLeave: () => i(!1),
      className: "flex flex-col h-full",
      children: [
        /* @__PURE__ */ e.jsx(b, { children: "Library" }),
        /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3 flex-1", children: Object.entries(k).map(([n, m]) => /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
          /* @__PURE__ */ e.jsx("div", { className: "text-xs font-bold uppercase text-gray-600 bg-upstart-50 px-3 py-2", children: m }),
          /* @__PURE__ */ e.jsx(
            "div",
            {
              className: s("grid gap-1.5 mx-2"),
              style: {
                gridTemplateColumns: "repeat(auto-fill, minmax(66px, 1fr))"
              },
              children: Object.values(c).filter((r) => r.category === n && !r.hideInLibrary).filter((r) => !r.inlineDragDisabled).map((r, a) => /* @__PURE__ */ e.jsx(
                v,
                {
                  defaults: u[r.type],
                  index: a,
                  onMouseOver: (o) => {
                    l(r);
                  },
                  onMouseLeave: () => l(null)
                },
                r.type
              ))
            }
          )
        ] }, n)) }),
        /* @__PURE__ */ e.jsx(
          "div",
          {
            className: s(
              "mt-auto p-2 bg-upstart-50 font-normal text-upstart-700 text-xs rounded transition-opacity",
              t ? "opacity-100" : "opacity-0"
            ),
            children: t?.description
          }
        )
      ]
    }
  );
}
function v(i) {
  const {
    defaults: { manifest: t },
    index: l,
    ...n
  } = i, [m, r] = d(p()), a = f(() => y(t.type), [m]), o = j({
    // const draggable = useDraggable({
    id: a.id,
    type: "library",
    data: { manifest: t, brick: a, fromLibrary: !0 },
    feedback: "clone",
    index: 0
  });
  return x(() => {
    o.isDragging || r(p());
  }, [o.isDragging]), /* @__PURE__ */ e.jsx(
    "div",
    {
      "data-brick-template-type": a.type,
      "data-brick-min-w": t.minWidth?.desktop,
      "data-brick-min-h": t.minHeight?.desktop,
      "data-brick-default-w": t.defaultWidth?.desktop,
      "data-brick-default-h": t.defaultHeight?.desktop,
      ref: o.ref,
      ...n,
      className: s(
        `rounded border border-upstart-100 hover:border-upstart-600 hover:bg-upstart-50 bg-white dark:bg-dark-700 !cursor-grab
        active:!cursor-grabbing touch-none select-none pointer-events-auto draggable-brick group aspect-square
        z-[99999] flex flex-col items-center justify-center`,
        o.isDragging && "shadow-2xl border-upstart-600 scale-110"
      ),
      ...i,
      children: /* @__PURE__ */ e.jsxs(
        "div",
        {
          className: s(
            "flex-1 flex flex-col justify-center text-upstart-700 dark:text-upstart-400 items-center gap-1 rounded-[inherit]"
          ),
          children: [
            /* @__PURE__ */ e.jsx(h, { manifest: t }),
            /* @__PURE__ */ e.jsx("span", { className: s("text-center text-xs"), children: t.name })
          ]
        }
      )
    }
  );
}
export {
  se as default
};
//# sourceMappingURL=PanelLibrary.js.map
