import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { usePreviewMode } from "../../../../../use-editor.js";
import { RxSection } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/rx/index.js";
import "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { ScrollablePanelTab } from "./ScrollablePanelTab.js";
import { useLocalStorage } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@19.1.1/node_modules/usehooks-ts/dist/index.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle } from "./PanelBlockTitle.js";
import SectionSettingsView from "./SectionSettingsView.js";
import PageHierarchy from "./PageHierarchy.js";
import { Root as m } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as n, Text as u } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
function PanelSectionInspector({ section }) {
  usePreviewMode();
  const [tabsMapping, setTabsMapping] = useLocalStorage("inspector_tabs_map", {});
  const selectedTab = tabsMapping[section.id] ?? "settings";
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center group", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(RxSection, { className: "inline-block mr-2 w-5 h-5 text-upstart-600" }),
        "Section ",
        section.label ?? "unnamed"
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "span",
        {
          className: D(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(section.id);
          },
          children: section.id
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      m,
      {
        value: selectedTab,
        onValueChange: (val) => {
          setTabsMapping((prev) => ({ ...prev, [section.id]: val }));
        },
        className: "flex-1 flex flex-col",
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollablePanelTab, { tab: "settings", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsTab, { section }) })
      }
    )
  ] }, `section-inspector-${section.id}`);
}
function SettingsTab({ section }) {
  const previewMode = usePreviewMode();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
    previewMode === "mobile" && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { size: "1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(u, { size: "1", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SectionSettingsView, { section }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(PageHierarchy, { section, className: "h-[50cqh]" })
  ] });
}
export {
  PanelSectionInspector as default
};
//# sourceMappingURL=PanelSectionInspector.js.map
