@plenary/react 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,97 @@
+# @plenary/react
+
+The React renderer for Plenary's page builder: render an entry's `blocks`
+component tree, register your own components so editors can use them, and
+embed the live-preview bridge that lets the Plenary console edit your site
+in place.
+
+```sh
+npm install @plenary/react @plenary/client
+```
+
+ESM-only; React 18 or 19.
+
+## Rendering a page
+
+`PlenaryPage` is an async server component that renders a `PlenaryDocument` —
+the JSON DOM stored in an entry's `blocks` field:
+
+```tsx
+import { createClient } from "@plenary/client";
+import { PlenaryPage } from "@plenary/react";
+
+const plenary = createClient({
+  baseUrl: process.env.PLENARY_URL!,
+  siteKey: "main",
+  apiKey: process.env.PLENARY_API_KEY!,
+  locale: "en",
+});
+
+export default async function Page({ params }) {
+  const entry = await plenary.getEntry("page", params.slug);
+  return <PlenaryPage document={entry.data.blocks} client={plenary} />;
+}
+```
+
+The built-in components — `Box`, `Section`, `Text`, `Image`, `Video`, `Form` —
+cover layout, media (with server-generated variants and focal-point crops),
+and form rendering out of the box. Pass a `client` so media and form props
+resolve; interactive pieces (form submission) need your tree wrapped in a
+`PlenaryProvider`:
+
+```tsx
+import { PlenaryProvider } from "@plenary/react";
+
+<PlenaryProvider client={plenary}>{children}</PlenaryProvider>
+```
+
+## Registering your own components
+
+Editors can only place components the site registers. Registration pairs a
+React component with the metadata the console's page builder needs — prop
+definitions, named slots, style panels:
+
+```tsx
+import { register } from "@plenary/react";
+
+function Hero({ heading, children }) {
+  return (
+    <header>
+      <h1>{heading}</h1>
+      {children}
+    </header>
+  );
+}
+
+register(Hero, {
+  key: "hero",
+  label: "Hero",
+  props: [{ key: "heading", type: "text" }],
+  slots: [{ name: "children", label: "Content" }],
+});
+```
+
+`registerTheme` declares the site's design tokens so the console's style
+editor offers them alongside raw CSS.
+
+## Live preview
+
+`PlenaryBridge` (from `@plenary/react/bridge`) turns a page into a live
+preview surface for the console: rendered inside the page builder's iframe,
+it receives draft edits over postMessage and re-renders in place, reporting
+the registered component manifest back to the editor.
+
+```tsx
+import { PlenaryBridge } from "@plenary/react/bridge";
+
+<PlenaryBridge
+  region="blocks"
+  editorOrigins={["https://cms.example.com", "http://localhost:*"]}
+/>
+```
+
+Only messages from `editorOrigins` are honored — exact origins,
+`https://*.example.com` subdomain patterns, or `http://localhost:*` port
+patterns; everything else is ignored.
+
+Full documentation at [docs.plenarycms.com](https://docs.plenarycms.com).

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @plenary/react — the DOM renderer, component registry, and built-in\n * components (Box/Section/Text/Image/Video/Form) for rendering a Page's `dom`\n * tree. Custom components register on top of the built-ins. The preview bridge\n * lands in Phase 5.\n */\n\nexport {\n  PlenaryPage,\n  renderDocument,\n  renderDocumentSync,\n  type PlenaryPageProps,\n  type SyncRenderOptions,\n} from \"./render.js\";\nexport {\n  Registry,\n  registry,\n  register,\n  registerTheme,\n  Plenary,\n  getManifest,\n  getTheme,\n} from \"./registry.js\";\nexport { Box, type BoxProps } from \"./components/Box.js\";\nexport { Section, type SectionProps } from \"./components/Section.js\";\nexport { Text, type TextProps } from \"./components/Text.js\";\nexport { Image, type ImageProps } from \"./components/Image.js\";\nexport { Video, type VideoProps } from \"./components/Video.js\";\nexport { Form, type FormProps } from \"./components/Form.js\";\nexport { Placeholder, type PlaceholderProps } from \"./components/Placeholder.js\";\nexport {\n  resolveMedia,\n  toResolvedMedia,\n  type MediaValue,\n  type ResolvedMedia,\n} from \"./media.js\";\nexport { toResolvedForm, type FormValue, type ResolvedForm } from \"./form.js\";\nexport {\n  PlenaryProvider,\n  usePlenaryClient,\n  type PlenaryProviderProps,\n} from \"./context.js\";\nexport type {\n  PlenaryComponent,\n  RegisteredComponent,\n  RenderContext,\n  SlotProps,\n} from \"./types.js\";\n"],"mappings":"AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAA0B;AACnC,SAAS,eAAkC;AAC3C,SAAS,YAA4B;AACrC,SAAS,aAA8B;AACvC,SAAS,aAA8B;AACvC,SAAS,YAA4B;AACrC,SAAS,mBAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAyD;AAClE;AAAA,EACE;AAAA,EACA;AAAA,OAEK;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @plenary/react — the DOM renderer, component registry, and built-in\n * components (Box/Section/Text/Image/Video/Form) for rendering a Page's `dom`\n * tree. Custom components register on top of the built-ins; the preview bridge\n * lives in the `./bridge` export.\n */\n\nexport {\n  PlenaryPage,\n  renderDocument,\n  renderDocumentSync,\n  type PlenaryPageProps,\n  type SyncRenderOptions,\n} from \"./render.js\";\nexport {\n  Registry,\n  registry,\n  register,\n  registerTheme,\n  Plenary,\n  getManifest,\n  getTheme,\n} from \"./registry.js\";\nexport { Box, type BoxProps } from \"./components/Box.js\";\nexport { Section, type SectionProps } from \"./components/Section.js\";\nexport { Text, type TextProps } from \"./components/Text.js\";\nexport { Image, type ImageProps } from \"./components/Image.js\";\nexport { Video, type VideoProps } from \"./components/Video.js\";\nexport { Form, type FormProps } from \"./components/Form.js\";\nexport { Placeholder, type PlaceholderProps } from \"./components/Placeholder.js\";\nexport {\n  resolveMedia,\n  toResolvedMedia,\n  type MediaValue,\n  type ResolvedMedia,\n} from \"./media.js\";\nexport { toResolvedForm, type FormValue, type ResolvedForm } from \"./form.js\";\nexport {\n  PlenaryProvider,\n  usePlenaryClient,\n  type PlenaryProviderProps,\n} from \"./context.js\";\nexport type {\n  PlenaryComponent,\n  RegisteredComponent,\n  RenderContext,\n  SlotProps,\n} from \"./types.js\";\n"],"mappings":"AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAA0B;AACnC,SAAS,eAAkC;AAC3C,SAAS,YAA4B;AACrC,SAAS,aAA8B;AACvC,SAAS,aAA8B;AACvC,SAAS,YAA4B;AACrC,SAAS,mBAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAyD;AAClE;AAAA,EACE;AAAA,EACA;AAAA,OAEK;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plenary/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Plenary React renderer, component registry, built-in components, and preview bridge.",
   "type": "module",
   "sideEffects": false,
@@ -20,8 +20,8 @@
     "dist"
   ],
   "dependencies": {
-    "@plenary/client": "0.1.0",
-    "@plenary/core": "0.1.0"
+    "@plenary/client": "0.1.1",
+    "@plenary/core": "0.1.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",