@simpleview/cms-foundation 0.0.5 → 0.0.7

package/dist/components/Preview/PreviewCivWrapper.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+function PreviewCivWrapper({
+  children,
+  civid,
+  onCivEnter,
+  highlighted,
+  register
+}) {
+  const onMouseEnter = (e) => {
+    e.stopPropagation();
+    onCivEnter(civid);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: highlighted === civid ? {
+        outlineOffset: 5,
+        outline: "rgb(217, 83, 30) solid 7px"
+      } : void 0,
+      onMouseEnter,
+      ref: register(civid),
+      children
+    }
+  );
+}
+export {
+  PreviewCivWrapper
+};
+//# sourceMappingURL=PreviewCivWrapper.js.map

package/dist/components/Preview/PreviewCivWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Preview/PreviewCivWrapper.tsx"],
+  "sourcesContent": ["import type { PropsWithChildren, MouseEventHandler } from \"react\";\r\nimport type { PreviewContextState } from \"./PreviewPageWrapper\";\r\n\r\ntype PreviewCivWrapper = PropsWithChildren<{\r\n\tcivid: string;\r\n}> &\r\n\tPreviewContextState;\r\n\r\nexport function PreviewCivWrapper({\r\n\tchildren,\r\n\tcivid,\r\n\tonCivEnter,\r\n\thighlighted,\r\n\tregister,\r\n}: PreviewCivWrapper) {\r\n\tconst onMouseEnter: MouseEventHandler = (e) => {\r\n\t\te.stopPropagation();\r\n\t\tonCivEnter(civid);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={\r\n\t\t\t\thighlighted === civid\r\n\t\t\t\t\t? {\r\n\t\t\t\t\t\t\toutlineOffset: 5,\r\n\t\t\t\t\t\t\toutline: \"rgb(217, 83, 30) solid 7px\",\r\n\t\t\t\t\t  }\r\n\t\t\t\t\t: undefined\r\n\t\t\t}\r\n\t\t\tonMouseEnter={onMouseEnter}\r\n\t\t\tref={register(civid)}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n}\r\n"],
+  "mappings": "AAqBE;AAbK,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrB,QAAM,eAAkC,CAAC,MAAM;AAC9C,MAAE,gBAAgB;AAClB,eAAW,KAAK;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OACC,gBAAgB,QACb;AAAA,QACA,eAAe;AAAA,QACf,SAAS;AAAA,MACT,IACA;AAAA,MAEJ;AAAA,MACA,KAAK,SAAS,KAAK;AAAA,MAElB;AAAA;AAAA,EACF;AAEF;",
+  "names": []
+}

package/dist/components/Preview/PreviewContent.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Section } from "@simpleview/cms-foundation/components";
+import { usePreview } from "./PreviewPageWrapper";
+function PreviewContent() {
+  const preview = usePreview();
+  if (!preview || !preview.pageData) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Section, { section: [preview.pageData.body] });
+}
+export {
+  PreviewContent
+};
+//# sourceMappingURL=PreviewContent.js.map

package/dist/components/Preview/PreviewContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Preview/PreviewContent.tsx"],
+  "sourcesContent": ["import { Section } from \"@simpleview/cms-foundation/components\";\r\nimport { usePreview } from \"./PreviewPageWrapper\";\r\n\r\nexport function PreviewContent() {\r\n\tconst preview = usePreview();\r\n\r\n\tif (!preview || !preview.pageData) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn <Section section={[preview.pageData.body]} />;\r\n}\r\n"],
+  "mappings": "AAUQ;AAVR,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAEpB,SAAS,iBAAiB;AAChC,QAAM,UAAU,WAAW;AAE3B,MAAI,CAAC,WAAW,CAAC,QAAQ,UAAU;AAClC,WAAO;AAAA,EACR;AAEA,SAAO,oBAAC,WAAQ,SAAS,CAAC,QAAQ,SAAS,IAAI,GAAG;AACnD;",
+  "names": []
+}

package/dist/components/Preview/PreviewPageWrapper.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+  useState,
+  useRef
+} from "react";
+const PreviewContext = createContext(
+  void 0
+);
+const usePreview = () => useContext(PreviewContext);
+const post = (message) => {
+  const parent = window.opener || window.parent;
+  const fullMessage = typeof message === "string" ? message : {
+    ...message,
+    namespace: "sv_preview"
+  };
+  parent.postMessage(fullMessage, "*");
+};
+function PreviewPageWrapper({
+  children,
+  pageContent
+}) {
+  const refs = useRef({});
+  const [highlighted, setHighlighted] = useState(
+    void 0
+  );
+  const [pageData, setPageData] = useState(
+    pageContent
+  );
+  useEffect(() => {
+    setPageData(pageContent);
+  }, [pageContent]);
+  useEffect(() => {
+    post("init");
+    const handleMessage = ({ data }) => {
+      if (!data || !("namespace" in data) || data.namespace !== "sv_preview" || !("event" in data) || !("args" in data)) {
+        return;
+      }
+      const { event, args } = data;
+      if (event === "highlight") {
+        setHighlighted(args.civid);
+      }
+      if (event === "scrollTo") {
+        if (!refs.current[args.civid]) {
+          return;
+        }
+        refs.current[args.civid].scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+      if (event === "update") {
+        setPageData((prevPageData) => {
+          if (!prevPageData) return null;
+          return { ...prevPageData, body: args.body };
+        });
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [setPageData]);
+  const previewContextState = useMemo(
+    () => ({
+      register: (civid) => {
+        return (ref) => refs.current[civid] = ref;
+      },
+      onCivEnter: (civid) => {
+        post({
+          event: "pbScrollTo",
+          args: { civid }
+        });
+        post({
+          event: "pbHighlight",
+          args: { civid }
+        });
+      },
+      highlighted,
+      pageData
+    }),
+    [highlighted, pageData]
+  );
+  return /* @__PURE__ */ jsx(PreviewContext.Provider, { value: previewContextState, children });
+}
+export {
+  PreviewPageWrapper,
+  usePreview
+};
+//# sourceMappingURL=PreviewPageWrapper.js.map

package/dist/components/Preview/PreviewPageWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Preview/PreviewPageWrapper.tsx"],
+  "sourcesContent": ["import type { PropsWithChildren } from \"react\";\r\nimport {\r\n\tcreateContext,\r\n\tuseContext,\r\n\tuseMemo,\r\n\tuseEffect,\r\n\tuseState,\r\n\tuseRef,\r\n} from \"react\";\r\nimport type { CivProps, PageData } from \"../../types\";\r\n\r\nexport interface PreviewContextState {\r\n\tonCivEnter: (civid: string) => void;\r\n\thighlighted?: string;\r\n\tregister: (civid: string) => (ref: HTMLDivElement) => void;\r\n\tpageData: PageData<CivProps> | null;\r\n}\r\n\r\nconst PreviewContext = createContext<PreviewContextState | undefined>(\r\n\tundefined\r\n);\r\n\r\nexport const usePreview = (): PreviewContextState | undefined =>\r\n\tuseContext(PreviewContext);\r\n\r\ntype PostMessage =\r\n\t| \"init\"\r\n\t| { event: \"pbScrollTo\"; args: { civid: string } }\r\n\t| { event: \"pbHighlight\"; args: { civid: string } }\r\n\t| { event: \"pbUpdate\"; args: { body: CivProps } };\r\n\r\nconst post = (message: PostMessage) => {\r\n\tconst parent = window.opener || window.parent;\r\n\tconst fullMessage =\r\n\t\ttypeof message === \"string\"\r\n\t\t\t? message\r\n\t\t\t: {\r\n\t\t\t\t\t...message,\r\n\t\t\t\t\tnamespace: \"sv_preview\",\r\n\t\t\t  };\r\n\r\n\tparent.postMessage(fullMessage, \"*\");\r\n};\r\n\r\nexport function PreviewPageWrapper({\r\n\tchildren,\r\n\tpageContent,\r\n}: PropsWithChildren<{ pageContent: PageData<CivProps> }>) {\r\n\tconst refs = useRef<Record<string, HTMLDivElement>>({});\r\n\tconst [highlighted, setHighlighted] = useState<string | undefined>(\r\n\t\tundefined\r\n\t);\r\n\tconst [pageData, setPageData] = useState<PageData<CivProps> | null>(\r\n\t\tpageContent\r\n\t);\r\n\r\n\tuseEffect(() => {\r\n\t\tsetPageData(pageContent);\r\n\t}, [pageContent]);\r\n\r\n\tuseEffect(() => {\r\n\t\tpost(\"init\");\r\n\r\n\t\tconst handleMessage = ({ data }: WindowEventMap[\"message\"]) => {\r\n\t\t\tif (\r\n\t\t\t\t!data ||\r\n\t\t\t\t!(\"namespace\" in data) ||\r\n\t\t\t\tdata.namespace !== \"sv_preview\" ||\r\n\t\t\t\t!(\"event\" in data) ||\r\n\t\t\t\t!(\"args\" in data)\r\n\t\t\t) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tconst { event, args } = data;\r\n\r\n\t\t\tif (event === \"highlight\") {\r\n\t\t\t\tsetHighlighted(args.civid);\r\n\t\t\t}\r\n\r\n\t\t\tif (event === \"scrollTo\") {\r\n\t\t\t\tif (!refs.current[args.civid]) {\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\trefs.current[args.civid].scrollIntoView({\r\n\t\t\t\t\tbehavior: \"smooth\",\r\n\t\t\t\t\tblock: \"nearest\",\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\tif (event === \"update\") {\r\n\t\t\t\tsetPageData((prevPageData) => {\r\n\t\t\t\t\tif (!prevPageData) return null;\r\n\t\t\t\t\treturn { ...prevPageData, body: args.body };\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\twindow.addEventListener(\"message\", handleMessage);\r\n\t\treturn () => window.removeEventListener(\"message\", handleMessage);\r\n\t}, [setPageData]);\r\n\r\n\tconst previewContextState = useMemo<PreviewContextState>(\r\n\t\t() => ({\r\n\t\t\tregister: (civid) => {\r\n\t\t\t\treturn (ref) => (refs.current[civid] = ref);\r\n\t\t\t},\r\n\t\t\tonCivEnter: (civid) => {\r\n\t\t\t\tpost({\r\n\t\t\t\t\tevent: \"pbScrollTo\",\r\n\t\t\t\t\targs: { civid },\r\n\t\t\t\t});\r\n\t\t\t\tpost({\r\n\t\t\t\t\tevent: \"pbHighlight\",\r\n\t\t\t\t\targs: { civid },\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t\thighlighted,\r\n\t\t\tpageData,\r\n\t\t}),\r\n\t\t[highlighted, pageData]\r\n\t);\r\n\r\n\treturn (\r\n\t\t<PreviewContext.Provider value={previewContextState}>\r\n\t\t\t{children}\r\n\t\t</PreviewContext.Provider>\r\n\t);\r\n}\r\n"],
+  "mappings": "AA6HE;AA5HF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAUP,MAAM,iBAAiB;AAAA,EACtB;AACD;AAEO,MAAM,aAAa,MACzB,WAAW,cAAc;AAQ1B,MAAM,OAAO,CAAC,YAAyB;AACtC,QAAM,SAAS,OAAO,UAAU,OAAO;AACvC,QAAM,cACL,OAAO,YAAY,WAChB,UACA;AAAA,IACA,GAAG;AAAA,IACH,WAAW;AAAA,EACX;AAEJ,SAAO,YAAY,aAAa,GAAG;AACpC;AAEO,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AACD,GAA2D;AAC1D,QAAM,OAAO,OAAuC,CAAC,CAAC;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IACrC;AAAA,EACD;AACA,QAAM,CAAC,UAAU,WAAW,IAAI;AAAA,IAC/B;AAAA,EACD;AAEA,YAAU,MAAM;AACf,gBAAY,WAAW;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACf,SAAK,MAAM;AAEX,UAAM,gBAAgB,CAAC,EAAE,KAAK,MAAiC;AAC9D,UACC,CAAC,QACD,EAAE,eAAe,SACjB,KAAK,cAAc,gBACnB,EAAE,WAAW,SACb,EAAE,UAAU,OACX;AACD;AAAA,MACD;AAEA,YAAM,EAAE,OAAO,KAAK,IAAI;AAExB,UAAI,UAAU,aAAa;AAC1B,uBAAe,KAAK,KAAK;AAAA,MAC1B;AAEA,UAAI,UAAU,YAAY;AACzB,YAAI,CAAC,KAAK,QAAQ,KAAK,KAAK,GAAG;AAC9B;AAAA,QACD;AAEA,aAAK,QAAQ,KAAK,KAAK,EAAE,eAAe;AAAA,UACvC,UAAU;AAAA,UACV,OAAO;AAAA,QACR,CAAC;AAAA,MACF;AAEA,UAAI,UAAU,UAAU;AACvB,oBAAY,CAAC,iBAAiB;AAC7B,cAAI,CAAC,aAAc,QAAO;AAC1B,iBAAO,EAAE,GAAG,cAAc,MAAM,KAAK,KAAK;AAAA,QAC3C,CAAC;AAAA,MACF;AAAA,IACD;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EACjE,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,sBAAsB;AAAA,IAC3B,OAAO;AAAA,MACN,UAAU,CAAC,UAAU;AACpB,eAAO,CAAC,QAAS,KAAK,QAAQ,KAAK,IAAI;AAAA,MACxC;AAAA,MACA,YAAY,CAAC,UAAU;AACtB,aAAK;AAAA,UACJ,OAAO;AAAA,UACP,MAAM,EAAE,MAAM;AAAA,QACf,CAAC;AACD,aAAK;AAAA,UACJ,OAAO;AAAA,UACP,MAAM,EAAE,MAAM;AAAA,QACf,CAAC;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EACvB;AAEA,SACC,oBAAC,eAAe,UAAf,EAAwB,OAAO,qBAC9B,UACF;AAEF;",
+  "names": []
+}

package/dist/components/Preview/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./PreviewPageWrapper";
+export * from "./PreviewCivWrapper";
+export * from "./PreviewPageWrapper";
+export * from "./PreviewContent";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Preview/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Preview/index.ts"],
+  "sourcesContent": ["export { default } from \"./PreviewPageWrapper\";\r\nexport * from \"./PreviewCivWrapper\";\r\nexport * from \"./PreviewPageWrapper\";\r\nexport * from \"./PreviewContent\";\r\n"],
+  "mappings": "AAAA,SAAS,WAAAA,gBAAe;AACxB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": ["default"]
+}

package/dist/components/Section/Section.js

@@ -1,30 +1,10 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-import { useComponentMap } from "../../contexts";
+import { SectionItem } from "./SectionItem";
 function Section({ section }) {
-  const map = useComponentMap();
   if (!Array.isArray(section) || !section.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: section.map((civ) => {
-    if (civ === void 0) {
-      return /* @__PURE__ */ jsx(
-        map.Error,
-        {
-          status: 500,
-          message: "Is the CMS API running? I bet it isn't \u{1F609}"
-        },
-        "error"
-      );
-    }
-    const Component = map.civs[civ.component];
-    if (Component === void 0) {
-      return /* @__PURE__ */ jsx(map.Unknown, { ...civ }, civ.civid);
-    }
-    return (
-      // <DC.PreviewSectionWrapper key={civ.civid}>
-      /* @__PURE__ */ jsx(Component, { ...civ }, civ.civid)
-    );
-  }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: section.map((civ) => /* @__PURE__ */ jsx(SectionItem, { ...civ }, civ.civid)) });
 }
 export {
   Section

package/dist/components/Section/Section.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Section/Section.tsx"],
-  "sourcesContent": ["import type { SectionProps } from \"./Section.types\";\r\n\r\nimport { useComponentMap } from \"../../contexts\";\r\n\r\nexport function Section({ section }: SectionProps) {\r\n\tconst map = useComponentMap();\r\n\r\n\tif (!Array.isArray(section) || !section.length) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{section.map((civ) => {\r\n\t\t\t\tif (civ === undefined) {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<map.Error\r\n\t\t\t\t\t\t\tkey=\"error\"\r\n\t\t\t\t\t\t\tstatus={500}\r\n\t\t\t\t\t\t\tmessage=\"Is the CMS API running? I bet it isn't \uD83D\uDE09\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst Component = map.civs[civ.component];\r\n\r\n\t\t\t\tif (Component === undefined) {\r\n\t\t\t\t\treturn <map.Unknown key={civ.civid} {...civ} />;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t// <DC.PreviewSectionWrapper key={civ.civid}>\r\n\t\t\t\t\t<Component key={civ.civid} {...civ} />\r\n\t\t\t\t\t// </DC.PreviewSectionWrapper >\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</>\r\n\t);\r\n}\r\n"],
-  "mappings": "AAYE,mBAII,WAJJ;AAVF,SAAS,uBAAuB;AAEzB,SAAS,QAAQ,EAAE,QAAQ,GAAiB;AAClD,QAAM,MAAM,gBAAgB;AAE5B,MAAI,CAAC,MAAM,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;AAC/C,WAAO;AAAA,EACR;AAEA,SACC,gCACE,kBAAQ,IAAI,CAAC,QAAQ;AACrB,QAAI,QAAQ,QAAW;AACtB,aACC;AAAA,QAAC,IAAI;AAAA,QAAJ;AAAA,UAEA,QAAQ;AAAA,UACR,SAAQ;AAAA;AAAA,QAFJ;AAAA,MAGL;AAAA,IAEF;AAEA,UAAM,YAAY,IAAI,KAAK,IAAI,SAAS;AAExC,QAAI,cAAc,QAAW;AAC5B,aAAO,oBAAC,IAAI,SAAJ,EAA6B,GAAG,OAAf,IAAI,KAAgB;AAAA,IAC9C;AAEA;AAAA;AAAA,MAEC,oBAAC,aAA2B,GAAG,OAAf,IAAI,KAAgB;AAAA;AAAA,EAGtC,CAAC,GACF;AAEF;",
+  "sourcesContent": ["import type { SectionProps } from \"./Section.types\";\r\nimport { SectionItem } from \"./SectionItem\";\r\n\r\nexport function Section({ section }: SectionProps) {\r\n\tif (!Array.isArray(section) || !section.length) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{section.map((civ) => (\r\n\t\t\t\t<SectionItem key={civ.civid} {...civ} />\r\n\t\t\t))}\r\n\t\t</>\r\n\t);\r\n}\r\n"],
+  "mappings": "AASE,mBAEE,WAFF;AARF,SAAS,mBAAmB;AAErB,SAAS,QAAQ,EAAE,QAAQ,GAAiB;AAClD,MAAI,CAAC,MAAM,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;AAC/C,WAAO;AAAA,EACR;AAEA,SACC,gCACE,kBAAQ,IAAI,CAAC,QACb,oBAAC,eAA6B,GAAG,OAAf,IAAI,KAAgB,CACtC,GACF;AAEF;",
   "names": []
 }

package/dist/components/Section/SectionItem.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { PreviewCivWrapper } from "../Preview";
+import { usePreview } from "../Preview/PreviewPageWrapper";
+import { SectionItemCiv } from "./SectionItemCiv";
+function SectionItem(civ) {
+  const preview = usePreview();
+  if (!preview) {
+    return /* @__PURE__ */ jsx(SectionItemCiv, { ...civ });
+  }
+  return /* @__PURE__ */ jsx(PreviewCivWrapper, { civid: civ.civid, ...preview, children: /* @__PURE__ */ jsx(SectionItemCiv, { ...civ }) });
+}
+export {
+  SectionItem
+};
+//# sourceMappingURL=SectionItem.js.map

package/dist/components/Section/SectionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Section/SectionItem.tsx"],
+  "sourcesContent": ["import type { CivProps } from \"../../types\";\r\nimport { PreviewCivWrapper } from \"../Preview\";\r\nimport { usePreview } from \"../Preview/PreviewPageWrapper\";\r\nimport { SectionItemCiv } from \"./SectionItemCiv\";\r\n\r\nexport function SectionItem(civ: CivProps) {\r\n\tconst preview = usePreview();\r\n\r\n\tif (!preview) {\r\n\t\treturn <SectionItemCiv {...civ} />;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<PreviewCivWrapper civid={civ.civid} {...preview}>\r\n\t\t\t<SectionItemCiv {...civ} />\r\n\t\t</PreviewCivWrapper>\r\n\t);\r\n}\r\n"],
+  "mappings": "AASS;AART,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAExB,SAAS,YAAY,KAAe;AAC1C,QAAM,UAAU,WAAW;AAE3B,MAAI,CAAC,SAAS;AACb,WAAO,oBAAC,kBAAgB,GAAG,KAAK;AAAA,EACjC;AAEA,SACC,oBAAC,qBAAkB,OAAO,IAAI,OAAQ,GAAG,SACxC,8BAAC,kBAAgB,GAAG,KAAK,GAC1B;AAEF;",
+  "names": []
+}

package/dist/components/Section/SectionItemCiv.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentMap } from "../../contexts";
+function SectionItemCiv(civ) {
+  const map = useComponentMap();
+  if (civ === void 0) {
+    return /* @__PURE__ */ jsx(
+      map.Error,
+      {
+        status: 500,
+        message: "Is the CMS API running? I bet it isn't \u{1F609}"
+      }
+    );
+  }
+  const Component = map.civs[civ.component];
+  if (Component === void 0) {
+    return /* @__PURE__ */ jsx(map.Unknown, { ...civ });
+  }
+  return /* @__PURE__ */ jsx(Component, { ...civ });
+}
+export {
+  SectionItemCiv
+};
+//# sourceMappingURL=SectionItemCiv.js.map

package/dist/components/Section/SectionItemCiv.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Section/SectionItemCiv.tsx"],
+  "sourcesContent": ["import { useComponentMap } from \"../../contexts\";\r\nimport type { CivProps } from \"../../types\";\r\n\r\nexport function SectionItemCiv(civ: CivProps) {\r\n\tconst map = useComponentMap();\r\n\r\n\tif (civ === undefined) {\r\n\t\treturn (\r\n\t\t\t<map.Error\r\n\t\t\t\tstatus={500}\r\n\t\t\t\tmessage=\"Is the CMS API running? I bet it isn't \uD83D\uDE09\"\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n\r\n\tconst Component = map.civs[civ.component];\r\n\r\n\tif (Component === undefined) {\r\n\t\treturn <map.Unknown {...civ} />;\r\n\t}\r\n\r\n\treturn <Component {...civ} />;\r\n}\r\n"],
+  "mappings": "AAQG;AARH,SAAS,uBAAuB;AAGzB,SAAS,eAAe,KAAe;AAC7C,QAAM,MAAM,gBAAgB;AAE5B,MAAI,QAAQ,QAAW;AACtB,WACC;AAAA,MAAC,IAAI;AAAA,MAAJ;AAAA,QACA,QAAQ;AAAA,QACR,SAAQ;AAAA;AAAA,IACT;AAAA,EAEF;AAEA,QAAM,YAAY,IAAI,KAAK,IAAI,SAAS;AAExC,MAAI,cAAc,QAAW;AAC5B,WAAO,oBAAC,IAAI,SAAJ,EAAa,GAAG,KAAK;AAAA,EAC9B;AAEA,SAAO,oBAAC,aAAW,GAAG,KAAK;AAC5B;",
+  "names": []
+}

package/dist/components/Section/index.js

@@ -1,3 +1,5 @@
 export * from "./Section";
+export * from "./SectionItem";
+export * from "./SectionItemCiv";
 export * from "./Section.types";
 //# sourceMappingURL=index.js.map

package/dist/components/Section/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Section/index.ts"],
-  "sourcesContent": ["export * from \"./Section\";\r\nexport * from \"./Section.types\";\r\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from \"./Section\";\r\nexport * from \"./SectionItem\";\r\nexport * from \"./SectionItemCiv\";\r\nexport * from \"./Section.types\";\r\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/components/index.js

@@ -1,6 +1,8 @@
 export * from "./App";
 export * from "./Error";
 export * from "./Layout";
+export * from "./Preview";
 export * from "./Section";
 export * from "./Unknown";
+export * from "./Preview";
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/index.ts"],
-  "sourcesContent": ["export * from \"./App\";\r\nexport * from \"./Error\";\r\nexport * from \"./Layout\";\r\nexport * from \"./Section\";\r\nexport * from \"./Unknown\";\r\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from \"./App\";\r\nexport * from \"./Error\";\r\nexport * from \"./Layout\";\r\nexport * from \"./Preview\";\r\nexport * from \"./Section\";\r\nexport * from \"./Unknown\";\r\nexport * from \"./Preview\";\r\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/contexts/ComponentMapContext.js

@@ -3,7 +3,7 @@ import { createContext, useContext } from "react";
 const ComponentMapContext = createContext({
   civs: {},
   Error,
-  Unknown
+  Unknown: () => null
 });
 const ComponentMapProvider = ComponentMapContext.Provider;
 const useComponentMap = () => useContext(ComponentMapContext);

package/dist/contexts/ComponentMapContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/contexts/ComponentMapContext.tsx"],
-  "sourcesContent": ["import { Unknown, Error, type ErrorProps } from \"../components\";\r\nimport type { CivProps, ComponentMap } from \"../types\";\r\nimport { createContext, useContext, type FC } from \"react\";\r\n\r\nconst ComponentMapContext = createContext<{\r\n\tcivs: ComponentMap;\r\n\tError: FC<ErrorProps>;\r\n\tUnknown: FC<CivProps>;\r\n}>({\r\n\tcivs: {},\r\n\tError,\r\n\tUnknown,\r\n});\r\n\r\nexport const ComponentMapProvider = ComponentMapContext.Provider;\r\n\r\nexport const useComponentMap = () => useContext(ComponentMapContext);\r\n"],
-  "mappings": "AAAA,SAAS,SAAS,aAA8B;AAEhD,SAAS,eAAe,kBAA2B;AAEnD,MAAM,sBAAsB,cAIzB;AAAA,EACF,MAAM,CAAC;AAAA,EACP;AAAA,EACA;AACD,CAAC;AAEM,MAAM,uBAAuB,oBAAoB;AAEjD,MAAM,kBAAkB,MAAM,WAAW,mBAAmB;",
+  "sourcesContent": ["import { Unknown, Error, type ErrorProps } from \"../components\";\r\nimport type { CivProps, ComponentMap } from \"../types\";\r\nimport { createContext, useContext, type FC } from \"react\";\r\n\r\nconst ComponentMapContext = createContext<{\r\n\tcivs: ComponentMap;\r\n\tError: FC<ErrorProps>;\r\n\tUnknown: FC<CivProps>;\r\n}>({\r\n\tcivs: {},\r\n\tError,\r\n\tUnknown: () => null,\r\n});\r\n\r\nexport const ComponentMapProvider = ComponentMapContext.Provider;\r\n\r\nexport const useComponentMap = () => useContext(ComponentMapContext);\r\n"],
+  "mappings": "AAAA,SAAS,SAAS,aAA8B;AAEhD,SAAS,eAAe,kBAA2B;AAEnD,MAAM,sBAAsB,cAIzB;AAAA,EACF,MAAM,CAAC;AAAA,EACP;AAAA,EACA,SAAS,MAAM;AAChB,CAAC;AAEM,MAAM,uBAAuB,oBAAoB;AAEjD,MAAM,kBAAkB,MAAM,WAAW,mBAAmB;",
   "names": []
 }

package/dist/types/components/Preview/PreviewCivWrapper.d.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+import type { PreviewContextState } from "./PreviewPageWrapper";
+type PreviewCivWrapper = PropsWithChildren<{
+    civid: string;
+}> & PreviewContextState;
+export declare function PreviewCivWrapper({ children, civid, onCivEnter, highlighted, register, }: PreviewCivWrapper): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Preview/PreviewContent.d.ts

@@ -0,0 +1 @@
+export declare function PreviewContent(): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/Preview/PreviewPageWrapper.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react";
+import type { CivProps, PageData } from "../../types";
+export interface PreviewContextState {
+    onCivEnter: (civid: string) => void;
+    highlighted?: string;
+    register: (civid: string) => (ref: HTMLDivElement) => void;
+    pageData: PageData<CivProps> | null;
+}
+export declare const usePreview: () => PreviewContextState | undefined;
+export declare function PreviewPageWrapper({ children, pageContent, }: PropsWithChildren<{
+    pageContent: PageData<CivProps>;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Preview/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./PreviewPageWrapper";
+export * from "./PreviewCivWrapper";
+export * from "./PreviewPageWrapper";
+export * from "./PreviewContent";

package/dist/types/components/Section/SectionItem.d.ts

@@ -0,0 +1,2 @@
+import type { CivProps } from "../../types";
+export declare function SectionItem(civ: CivProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Section/SectionItemCiv.d.ts

@@ -0,0 +1,2 @@
+import type { CivProps } from "../../types";
+export declare function SectionItemCiv(civ: CivProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Section/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Section";
+export * from "./SectionItem";
+export * from "./SectionItemCiv";
 export * from "./Section.types";

package/dist/types/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./App";
 export * from "./Error";
 export * from "./Layout";
+export * from "./Preview";
 export * from "./Section";
 export * from "./Unknown";
+export * from "./Preview";

package/dist/types/types/cms.d.ts

@@ -167,7 +167,7 @@ export interface CivProps<D = any, TD = any> {
     name: string;
     type: string;
     component: string;
-    content: Record<string, CivProps[]>;
+    content?: Record<string, CivProps[]>;
     data: D;
     templateData: TD;
 }

package/dist/utils/getPageContent.js

@@ -1,13 +1,12 @@
-import { IncomingMessage } from "http";
 import { getCmsUrl } from "./getCmsUrl";
+const previewPath = "/includes/plugins/nav/preview_civs/";
 async function getPageContent(req) {
-  let data;
-  const parsed_url = new URL(req.url, "http://placeholder.com");
-  const cmsUrl = getCmsUrl(parsed_url.host);
-  if (/\.[^/]+$/.test(parsed_url.pathname)) {
-    cmsUrl.pathname = parsed_url.pathname + "/content.json";
+  const incomingUrl = new URL(req.url, "http://placeholder.com");
+  const cmsUrl = getCmsUrl(incomingUrl.host);
+  if (/\.[^/]+$/.test(incomingUrl.pathname)) {
+    cmsUrl.pathname = incomingUrl.pathname + "/content.json";
   } else {
-    cmsUrl.pathname = parsed_url.pathname + "content.json";
+    cmsUrl.pathname = incomingUrl.pathname + "content.json";
   }
   const headers = {
     "Accept-Encoding": "gzip",
@@ -15,10 +14,23 @@ async function getPageContent(req) {
     "User-Agent": req.headers.get("user-agent") || ""
   };
   try {
+    let body = void 0;
+    if (req.method === "POST" && incomingUrl.pathname === previewPath) {
+      incomingUrl.searchParams.forEach((val, key) => {
+        cmsUrl.searchParams.set(key, val);
+      });
+      const formData = await req.formData();
+      const civs = formData.get("headless_civs");
+      const data = JSON.parse(atob(civs));
+      return data;
+    }
     const url = cmsUrl.toString();
     const { method } = req;
-    const body = JSON.stringify(data);
-    const fetchParams = { method, headers, body };
+    const fetchParams = {
+      method,
+      headers,
+      body
+    };
     console.log("Making page content request:", {
       url,
       ...fetchParams

package/dist/utils/getPageContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/getPageContent.ts"],
-  "sourcesContent": ["import { IncomingMessage } from \"http\";\r\nimport type { CivProps, PageData } from \"../types\";\r\nimport { getCmsUrl } from \"./getCmsUrl\";\r\n\r\nexport type { PageData };\r\n\r\nexport async function getPageContent(\r\n\treq: Request\r\n): Promise<PageData<CivProps>> {\r\n\tlet data: undefined | IncomingMessage;\r\n\r\n\t// if (req.method === \"POST\") {\r\n\t// \t// if we have a POST req (most likely for Page Editor preview) then\r\n\t// \t// we'll pass the incoming req stream directly on to our outgoing\r\n\t// \t// req to the CMS. We don't do anything with the data here.\r\n\t// \tdata = req;\r\n\t// }\r\n\r\n\tconst parsed_url = new URL(req.url, \"http://placeholder.com\");\r\n\tconst cmsUrl = getCmsUrl(parsed_url.host);\r\n\r\n\tif (/\\.[^/]+$/.test(parsed_url.pathname)) {\r\n\t\t// If it's a file request, we append /content.json\r\n\t\tcmsUrl.pathname = parsed_url.pathname + \"/content.json\";\r\n\t} else {\r\n\t\t// If it's not a file request, we just append content.json since it already ends with a \"/\"\r\n\t\tcmsUrl.pathname = parsed_url.pathname + \"content.json\";\r\n\t}\r\n\r\n\tconst headers: Record<string, string> = {\r\n\t\t\"Accept-Encoding\": \"gzip\",\r\n\t\t\"X-Forwarded-For\":\r\n\t\t\treq.headers.get(\"x-real-ip\") ||\r\n\t\t\treq.headers.get(\"x-forwarded-host\") ||\r\n\t\t\t\"\",\r\n\t\t\"User-Agent\": req.headers.get(\"user-agent\") || \"\",\r\n\t};\r\n\r\n\ttry {\r\n\t\tconst url = cmsUrl.toString();\r\n\t\tconst { method } = req;\r\n\t\tconst body = JSON.stringify(data);\r\n\t\tconst fetchParams = { method, headers, body };\r\n\r\n\t\tconsole.log(\"Making page content request:\", {\r\n\t\t\turl,\r\n\t\t\t...fetchParams,\r\n\t\t});\r\n\r\n\t\tconst result = await fetch(url, fetchParams).then((res) => res.json());\r\n\r\n\t\treturn result;\r\n\t} catch (err: unknown) {\r\n\t\tconst status =\r\n\t\t\t(err as { response?: { status?: number } })?.response?.status ||\r\n\t\t\t500;\r\n\t\tconst message =\r\n\t\t\t(err as { response?: { statusText?: string } })?.response\r\n\t\t\t\t?.statusText || \"Server Error\";\r\n\t\tthrow new Error(`Status ${status}: ${message}`);\r\n\t}\r\n}\r\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAEhC,SAAS,iBAAiB;AAI1B,eAAsB,eACrB,KAC8B;AAC9B,MAAI;AASJ,QAAM,aAAa,IAAI,IAAI,IAAI,KAAK,wBAAwB;AAC5D,QAAM,SAAS,UAAU,WAAW,IAAI;AAExC,MAAI,WAAW,KAAK,WAAW,QAAQ,GAAG;AAEzC,WAAO,WAAW,WAAW,WAAW;AAAA,EACzC,OAAO;AAEN,WAAO,WAAW,WAAW,WAAW;AAAA,EACzC;AAEA,QAAM,UAAkC;AAAA,IACvC,mBAAmB;AAAA,IACnB,mBACC,IAAI,QAAQ,IAAI,WAAW,KAC3B,IAAI,QAAQ,IAAI,kBAAkB,KAClC;AAAA,IACD,cAAc,IAAI,QAAQ,IAAI,YAAY,KAAK;AAAA,EAChD;AAEA,MAAI;AACH,UAAM,MAAM,OAAO,SAAS;AAC5B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,OAAO,KAAK,UAAU,IAAI;AAChC,UAAM,cAAc,EAAE,QAAQ,SAAS,KAAK;AAE5C,YAAQ,IAAI,gCAAgC;AAAA,MAC3C;AAAA,MACA,GAAG;AAAA,IACJ,CAAC;AAED,UAAM,SAAS,MAAM,MAAM,KAAK,WAAW,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAErE,WAAO;AAAA,EACR,SAAS,KAAc;AACtB,UAAM,SACJ,KAA4C,UAAU,UACvD;AACD,UAAM,UACJ,KAAgD,UAC9C,cAAc;AAClB,UAAM,IAAI,MAAM,UAAU,MAAM,KAAK,OAAO,EAAE;AAAA,EAC/C;AACD;",
+  "sourcesContent": ["import type { CivProps, PageData } from \"../types\";\r\nimport { getCmsUrl } from \"./getCmsUrl\";\r\n\r\nexport type { PageData };\r\n\r\nconst previewPath = \"/includes/plugins/nav/preview_civs/\";\r\n\r\nexport async function getPageContent(\r\n\treq: Request\r\n): Promise<PageData<CivProps>> {\r\n\tconst incomingUrl = new URL(req.url, \"http://placeholder.com\");\r\n\tconst cmsUrl = getCmsUrl(incomingUrl.host);\r\n\r\n\tif (/\\.[^/]+$/.test(incomingUrl.pathname)) {\r\n\t\t// If it's a file request, we append /content.json\r\n\t\tcmsUrl.pathname = incomingUrl.pathname + \"/content.json\";\r\n\t} else {\r\n\t\t// If it's not a file request, we just append content.json since it already ends with a \"/\"\r\n\t\tcmsUrl.pathname = incomingUrl.pathname + \"content.json\";\r\n\t}\r\n\r\n\tconst headers: Record<string, string> = {\r\n\t\t\"Accept-Encoding\": \"gzip\",\r\n\t\t\"X-Forwarded-For\":\r\n\t\t\treq.headers.get(\"x-real-ip\") ||\r\n\t\t\treq.headers.get(\"x-forwarded-host\") ||\r\n\t\t\t\"\",\r\n\t\t\"User-Agent\": req.headers.get(\"user-agent\") || \"\",\r\n\t};\r\n\r\n\ttry {\r\n\t\tlet body: URLSearchParams | undefined = undefined;\r\n\r\n\t\t/**\r\n\t\t * If this is the live preview page, we need to append the search params from the incoming URL\r\n\t\t * and send the CIVs along with the request.\r\n\t\t */\r\n\t\tif (req.method === \"POST\" && incomingUrl.pathname === previewPath) {\r\n\t\t\tincomingUrl.searchParams.forEach((val, key) => {\r\n\t\t\t\tcmsUrl.searchParams.set(key, val);\r\n\t\t\t});\r\n\r\n\t\t\tconst formData = await req.formData();\r\n\t\t\tconst civs = formData.get(\"headless_civs\");\r\n\t\t\tconst data = JSON.parse(atob(civs));\r\n\r\n\t\t\treturn data;\r\n\t\t}\r\n\r\n\t\tconst url = cmsUrl.toString();\r\n\t\tconst { method } = req;\r\n\t\tconst fetchParams: RequestInit = {\r\n\t\t\tmethod,\r\n\t\t\theaders,\r\n\t\t\tbody,\r\n\t\t};\r\n\r\n\t\tconsole.log(\"Making page content request:\", {\r\n\t\t\turl,\r\n\t\t\t...fetchParams,\r\n\t\t});\r\n\r\n\t\tconst result = await fetch(url, fetchParams).then((res) => res.json());\r\n\t\treturn result;\r\n\t} catch (err: unknown) {\r\n\t\tconst status =\r\n\t\t\t(err as { response?: { status?: number } })?.response?.status ||\r\n\t\t\t500;\r\n\t\tconst message =\r\n\t\t\t(err as { response?: { statusText?: string } })?.response\r\n\t\t\t\t?.statusText || \"Server Error\";\r\n\t\tthrow new Error(`Status ${status}: ${message}`);\r\n\t}\r\n}\r\n"],
+  "mappings": "AACA,SAAS,iBAAiB;AAI1B,MAAM,cAAc;AAEpB,eAAsB,eACrB,KAC8B;AAC9B,QAAM,cAAc,IAAI,IAAI,IAAI,KAAK,wBAAwB;AAC7D,QAAM,SAAS,UAAU,YAAY,IAAI;AAEzC,MAAI,WAAW,KAAK,YAAY,QAAQ,GAAG;AAE1C,WAAO,WAAW,YAAY,WAAW;AAAA,EAC1C,OAAO;AAEN,WAAO,WAAW,YAAY,WAAW;AAAA,EAC1C;AAEA,QAAM,UAAkC;AAAA,IACvC,mBAAmB;AAAA,IACnB,mBACC,IAAI,QAAQ,IAAI,WAAW,KAC3B,IAAI,QAAQ,IAAI,kBAAkB,KAClC;AAAA,IACD,cAAc,IAAI,QAAQ,IAAI,YAAY,KAAK;AAAA,EAChD;AAEA,MAAI;AACH,QAAI,OAAoC;AAMxC,QAAI,IAAI,WAAW,UAAU,YAAY,aAAa,aAAa;AAClE,kBAAY,aAAa,QAAQ,CAAC,KAAK,QAAQ;AAC9C,eAAO,aAAa,IAAI,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,YAAM,WAAW,MAAM,IAAI,SAAS;AACpC,YAAM,OAAO,SAAS,IAAI,eAAe;AACzC,YAAM,OAAO,KAAK,MAAM,KAAK,IAAI,CAAC;AAElC,aAAO;AAAA,IACR;AAEA,UAAM,MAAM,OAAO,SAAS;AAC5B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,cAA2B;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,YAAQ,IAAI,gCAAgC;AAAA,MAC3C;AAAA,MACA,GAAG;AAAA,IACJ,CAAC;AAED,UAAM,SAAS,MAAM,MAAM,KAAK,WAAW,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AACrE,WAAO;AAAA,EACR,SAAS,KAAc;AACtB,UAAM,SACJ,KAA4C,UAAU,UACvD;AACD,UAAM,UACJ,KAAgD,UAC9C,cAAc;AAClB,UAAM,IAAI,MAAM,UAAU,MAAM,KAAK,OAAO,EAAE;AAAA,EAC/C;AACD;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@simpleview/cms-foundation",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"description": "Provides helper types and components to assist when working with Granicus CMS Reactor.",
 	"packageManager": "yarn@4.6.0+sha224.acd0786f07ffc6c933940eb65fc1d627131ddf5455bddcc295dc90fd",
 	"scripts": {