@sandboxsonny/ace-kit 0.0.0-stage → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @sandboxsonny/ace-kit
+
+## 0.1.1
+
+### Patch Changes
+
+- 7cee0fb: Maintenance only, no change to the package: releases are now published with npm trusted publishing (GitHub proves its identity to npm) instead of a stored token.
+
+## 0.1.0
+
+### Minor Changes
+
+- First release. Everything a website needs to use CMS Ace:
+  
+  - A typed client for the public API (`createAceClient`) with short-lived caching, and errors that tell "not found" apart from "the CMS is unavailable" and "the preview has expired".
+  - `loadPage`, which works out what to do for a request (show an entry, redirect `/pages/home` to `/`, not found, unavailable, expired preview) the same way for every framework.
+  - `/{content type}/{entry}` addressing, menu links ready to draw, and responsive image attributes (`src`, `srcset`, `sizes`, dimensions, alt text).
+  - Rich text: a safe renderer for the editor's documents as HTML, plus Astro and React components.
+  - `AceTextArea` (Astro, React, React Router) and `renderTextArea` for plain Textarea fields: blank lines make paragraphs, a new line a line break, or `multiline={false}` for one line of text.
+  - Live preview support: framing policy, no-cache headers, and the script that refreshes the page when the editor saves a draft.
+  - An Astro integration (`@sandboxsonny/ace-kit/astro/integration`): add `ace()` to `astro.config.mjs` and the settings (`ACE_API_URL`, `ACE_SITE_DOMAIN`, `ACE_PREVIEW_ADMIN_ORIGIN`), the live-preview framing middleware and a ready-made client are in place. Pages then call `getPage(Astro)`, `getEntry`, `getEntries`, `getMenu` and `getMenuLinks` directly, with no client to create.
+  - Astro components: `AceImage`, `AceRichText`, `AceMenu` (a whole menu as a `<nav>`), `AceNotice` (the message for a missing, unavailable or expired page) and `AcePreviewRefresh`.
+  - React components and hooks (`AceImage`, `AceRichText`, `usePreviewRefresh`).
+  - A React Router 7 adapter (`@sandboxsonny/ace-kit/react-router` and `/react-router/server`) and a small Vite plugin (`/vite`): `createPageLoader` (the loader for the one route that draws every page, with real 404, 503, 403 and redirect responses), `createRootLoader` (the header menu and preview detection), `handleRequest` (a server entry that also lets the CMS frame the site for preview), `AceRichText` with router links, `AceNotice`, `createMeta`, and the `useAceMenu` and `useAcePreview` hooks. A site writes only its design: five small files.
+  - `ace-kit generate`, which reads a `.env` file in the folder it runs in and writes TypeScript types for your site's content types from the CMS, so `getEntry` and `getEntries` return the right shape. Needs a CMS Ace API that has `GET /public/content-types`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adams Development
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,80 @@
-# Temporary Holding Version
+# Ace Kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The website-side toolkit for **CMS Ace**: everything a site needs to read its content, draw it safely and support live preview, for Astro and React Router 7, with plain React and framework-free pieces underneath.
+
+- **A typed client** for the CMS Ace public API.
+- **Addressing, menus and images** ready to draw: `/{content type}/{entry}` pages, nested menus, responsive `<img>` attributes.
+- **Rich text** rendered safely (escaped, links checked) as Astro, React or an HTML string.
+- **Live preview** support: the framing header, the no-cache headers and the script that refreshes a page when the editor saves.
+- **Typed content**: `ace-kit generate` writes TypeScript types for your content types, so a change in the CMS shows up as a type error.
+- **No runtime dependencies**, ES modules with types, Node 22.12 or newer.
+
+> **You need a CMS Ace API to use it.** CMS Ace is a separate product and is not part of this repository; Ace Kit is the open source client side of it.
+
+```sh
+npm install @sandboxsonny/ace-kit
+```
+
+```ts
+import { createAceClient, loadPage } from "@sandboxsonny/ace-kit";
+
+const cms = createAceClient({ apiUrl: "https://api.example.com", siteDomain: "www.example.com" });
+
+const page = await loadPage(cms, { slug: "pages/about", url: new URL(request.url) });
+if (page.kind === "entry") console.log(page.entry.title, page.entry.values);
+```
+
+On Astro there is nothing to wire up by hand: add the integration to `astro.config.mjs` (`integrations: [ace()]`), set `ACE_API_URL` and `ACE_SITE_DOMAIN`, and read the CMS straight from a page:
+
+```astro
+---
+import { getEntry } from "@sandboxsonny/ace-kit/astro";
+import AceImage from "@sandboxsonny/ace-kit/astro/AceImage.astro";
+import AceRichText from "@sandboxsonny/ace-kit/astro/AceRichText.astro";
+import AceMenu from "@sandboxsonny/ace-kit/astro/AceMenu.astro";
+
+const about = await getEntry("pages", "about");
+---
+
+<AceMenu handle="main-menu" />
+<AceImage image={about.values.hero} sizes="100vw" lazy={false} />
+<AceRichText document={about.values.body} />
+```
+
+## Documentation
+
+|                                            |                                              |
+| ------------------------------------------ | -------------------------------------------- |
+| [Getting started](docs/getting-started.md) | Install, the client, `loadPage`              |
+| [Astro](docs/astro.md)                     | Settings, middleware, route, components      |
+| [React Router](docs/react-router.md)       | The React Router 7 adapter: five small files |
+| [React](docs/react.md)                     | Components for any React framework           |
+| [Live preview](docs/live-preview.md)       | What a site must do for the editor's preview |
+| [Typed content](docs/typed-content.md)     | `ace-kit generate`                           |
+| [Rich text](docs/rich-text.md)             | The document format and how it is drawn      |
+| [API reference](docs/api-reference.md)     | Every export                                 |
+| [Releasing](docs/releasing.md)             | Versions, the changelog and publishing       |
+
+The same pages, with live examples of the React components, are in Storybook: `npm run storybook`.
+
+## Status
+
+Ace Kit is **0.x**: it works and is tested, but until 1.0 a minor version may change an API. Every change is in the [changelog](CHANGELOG.md).
+
+## Compatibility
+
+Node 22.12 or newer. Astro 5 or newer, React 18 or newer, React Router 7 and Vite 5 or newer are optional: install the ones you use. A newer Ace Kit that needs a newer CMS Ace API says so in the changelog.
+
+## Development
+
+```sh
+npm install
+npm run check      # format, lint, types, tests, build, and a check of what would be published
+npm run storybook  # the documentation, with live components
+```
+
+See [CONTRIBUTING.md](CONTRIBUTING.md). To report a security problem, see [SECURITY.md](SECURITY.md).
+
+## Licence
+
+[MIT](LICENSE). The licence covers the code in this repository. It does not give a right to the names or logos "CMS Ace" or "Adams Development", and it does not cover the CMS Ace server.

package/astro/AceImage.astro

@@ -0,0 +1,29 @@
+---
+import { imageAttributes } from "../dist/index.js";
+import type { AceImageData } from "../dist/index.js";
+
+type Props = {
+  image: AceImageData;
+  /** How wide the image is shown, e.g. "(min-width: 64rem) 64rem, 100vw". The browser uses it to pick a copy from srcset. */
+  sizes: string;
+  /** Leave on for images below the first screen; turn off for the one at the top of the page. */
+  lazy?: boolean;
+  class?: string;
+};
+
+const { image, sizes, lazy = true, class: className } = Astro.props;
+const attributes = imageAttributes(image, { sizes, lazy });
+---
+
+<img
+  src={attributes.src}
+  srcset={attributes.srcSet}
+  sizes={attributes.sizes}
+  width={attributes.width}
+  height={attributes.height}
+  alt={attributes.alt}
+  loading={attributes.loading}
+  decoding={attributes.decoding}
+  fetchpriority={attributes.fetchPriority}
+  class={className}
+/>

package/astro/AceMenu.astro

@@ -0,0 +1,24 @@
+---
+import type { AceNavigationLink } from "../dist/index.js";
+import { getMenuLinks } from "../dist/astro.js";
+import AceMenuList from "./AceMenuList.astro";
+
+type Props = {
+  /** The handle of the menu in the CMS, e.g. "main-menu". */
+  handle: string;
+  /** Shown if the site has no such menu yet, or the CMS can't be reached. */
+  fallback?: AceNavigationLink[];
+  /** What the navigation is called for people using screen readers. */
+  label?: string;
+  class?: string;
+};
+
+const { handle, fallback = [], label = "Main", class: className } = Astro.props;
+const links = await getMenuLinks(handle, { fallback });
+---
+
+{links.length > 0 && (
+  <nav aria-label={label} class:list={["ace-menu", className]}>
+    <AceMenuList links={links} pathname={Astro.url.pathname} />
+  </nav>
+)}

package/astro/AceMenuList.astro

@@ -0,0 +1,25 @@
+---
+import { isCurrentPage } from "../dist/index.js";
+import type { AceNavigationLink } from "../dist/index.js";
+
+type Props = {
+  links: AceNavigationLink[];
+  pathname: string;
+  depth?: number;
+};
+
+const { links, pathname, depth = 0 } = Astro.props;
+---
+
+<ul class={depth === 0 ? "ace-menu__list" : "ace-menu__sublist"}>
+  {links.map((link) => (
+    <li>
+      <a href={link.to} aria-current={isCurrentPage(link, pathname) ? "page" : undefined}>
+        {link.label}
+      </a>
+      {link.children && link.children.length > 0 && (
+        <Astro.self links={link.children} pathname={pathname} depth={depth + 1} />
+      )}
+    </li>
+  ))}
+</ul>

package/astro/AceNotice.astro

@@ -0,0 +1,19 @@
+---
+import { pageNotices } from "../dist/index.js";
+import type { AcePage } from "../dist/index.js";
+
+type Props = {
+  /** The answer from `getPage` when it isn't an entry. */
+  page: Exclude<AcePage, { kind: "entry" }>;
+  class?: string;
+};
+
+const { page, class: className } = Astro.props;
+const { heading, message } = pageNotices[page.kind];
+---
+
+<div class={className}>
+  <h1>{heading}</h1>
+  <p>{message}</p>
+  {page.kind !== "preview-expired" && <a href="/">Back to the home page</a>}
+</div>

package/astro/AcePreviewRefresh.astro

@@ -0,0 +1,15 @@
+---
+import { ACE_PREVIEW_ADMIN_ORIGIN } from "astro:env/server";
+
+import { previewTokenFrom } from "../dist/index.js";
+
+// Only a page opened by the CMS's editor (it carries a preview token) listens for the editor's messages.
+const isPreview = previewTokenFrom(Astro.url) !== null;
+---
+
+{isPreview && <div data-ace-preview-origin={ACE_PREVIEW_ADMIN_ORIGIN} hidden />}
+
+<!-- In the CMS preview frame, this refetches the page when the editor saves a draft. It does nothing elsewhere. -->
+<script>
+  import "../dist/preview-script.js";
+</script>

package/astro/AceRichText.astro

@@ -0,0 +1,12 @@
+---
+import { renderRichText } from "../dist/index.js";
+import type { AceRichTextDocument } from "../dist/index.js";
+
+type Props = {
+  document: AceRichTextDocument;
+};
+
+const { document } = Astro.props;
+---
+
+<Fragment set:html={renderRichText(document)} />

package/astro/AceTextArea.astro

@@ -0,0 +1,14 @@
+---
+import { renderTextArea } from "../dist/index.js";
+
+type Props = {
+  /** The text area field's value. Missing or blank draws nothing. */
+  value: string | undefined;
+  /** True (the default): blank lines start new paragraphs and a single new line is a line break. False: one line of text. */
+  multiline?: boolean;
+};
+
+const { value, multiline = true } = Astro.props;
+---
+
+<Fragment set:html={renderTextArea(value, { multiline })} />

package/dist/astro-integration.d.ts

@@ -0,0 +1,20 @@
+import { AstroIntegration } from 'astro';
+
+/**
+ * The Astro integration. Add it once to `astro.config.mjs` and a site is wired up:
+ *
+ *     import ace from "@sandboxsonny/ace-kit/astro/integration";
+ *     export default defineConfig({ output: "server", integrations: [ace()] });
+ *
+ * It declares the three settings below, and lets the CMS's admin app (and only it) frame the site for live preview.
+ * The settings are read when the server starts, not baked into the build, so one build runs anywhere.
+ *
+ * | Setting                    | Default                 | Meaning                                                  |
+ * | -------------------------- | ----------------------- | -------------------------------------------------------- |
+ * | `ACE_API_URL`              | `http://localhost:8080` | where the CMS Ace API lives                              |
+ * | `ACE_SITE_DOMAIN`          | `localhost`             | the domain this site has in the CMS                      |
+ * | `ACE_PREVIEW_ADMIN_ORIGIN` | `http://localhost:5173` | where the CMS admin app runs (may frame the site)        |
+ */
+declare function ace(): AstroIntegration;
+
+export { ace as default };

package/dist/astro-integration.js

@@ -0,0 +1,32 @@
+import { envField } from 'astro/config';
+
+// src/astro/integration.ts
+function ace() {
+  return {
+    name: "ace-kit",
+    hooks: {
+      "astro:config:setup": ({ updateConfig, addMiddleware }) => {
+        updateConfig({
+          env: {
+            schema: {
+              // "secret" only because Astro reads secrets when the server starts, while "public" values are baked into the build.
+              ACE_API_URL: envField.string({ context: "server", access: "secret", default: "http://localhost:8080" }),
+              ACE_SITE_DOMAIN: envField.string({ context: "server", access: "secret", default: "localhost" }),
+              ACE_PREVIEW_ADMIN_ORIGIN: envField.string({
+                context: "server",
+                access: "secret",
+                default: "http://localhost:5173"
+              })
+            }
+          },
+          // The kit reads those settings through `astro:env`, which only Vite understands, so Vite must process the
+          // kit itself rather than leave it to Node.
+          vite: { ssr: { noExternal: ["@sandboxsonny/ace-kit"] } }
+        });
+        addMiddleware({ entrypoint: "@sandboxsonny/ace-kit/astro/middleware", order: "pre" });
+      }
+    }
+  };
+}
+
+export { ace as default };

package/dist/astro-middleware.js

@@ -0,0 +1,10 @@
+import { addFramingPolicy } from './chunk-YLO6IAXF.js';
+import { ACE_PREVIEW_ADMIN_ORIGIN } from 'astro:env/server';
+
+async function onRequest(_context, next) {
+  const response = await next();
+  addFramingPolicy(response.headers, ACE_PREVIEW_ADMIN_ORIGIN);
+  return response;
+}
+
+export { onRequest };

package/dist/astro.d.ts

@@ -0,0 +1,139 @@
+/** A field of a content type as `GET /public/content-types` describes it. */
+type AceFieldSchema = {
+  handle: string;
+  label: string;
+  /** `text`, `textarea`, `select`, `number`, `checkbox`, `image` or `richtext`. */
+  component_key: string;
+  config: { required?: boolean; options?: string[] } | null;
+};
+
+/** A content type as `GET /public/content-types` describes it. */
+type AceContentTypeSchema = {
+  handle: string;
+  name: string;
+  fields: AceFieldSchema[];
+};
+
+/** One link of a menu as the public API returns it, with its address already worked out. */
+type AceMenuItem = {
+  label: string;
+  /** A path on this site for a link to an entry, or the address as typed. */
+  url: string;
+  kind: "entry" | "url";
+  /** The entry an entry link goes to; null for a typed address. */
+  entry: { id: number; title: string; handle: string; content_type_handle: string } | null;
+  children: AceMenuItem[];
+};
+
+type AceMenu = {
+  name: string;
+  handle: string;
+  items: AceMenuItem[];
+};
+
+/** One link in a navigation bar, ready to draw. */
+type AceNavigationLink = {
+  label: string;
+  to: string;
+  /** Links shown under this one. */
+  children?: AceNavigationLink[];
+};
+
+/** A live entry from the public API. `Values` is the shape of its content type's fields. */
+type AceEntry<Values = Record<string, unknown>> = {
+  id: number;
+  content_type_id: number;
+  /** The content type's handle, which is the first part of the entry's address. */
+  content_type_handle: string;
+  title: string;
+  handle: string;
+  description: string;
+  values: Values;
+  created_at: string;
+  updated_at: string;
+  /** Only on a preview: true when the entry has a draft and this is it. */
+  is_draft?: boolean;
+};
+
+/**
+ * The shape of each content type's values, keyed by the content type's handle. It starts empty; running
+ * `ace-kit generate` fills it in for your site (by declaration merging), and the client then returns the right
+ * type for each content type.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface AceContentTypes {}
+
+/** The handles of your content types once types are generated; any text before that. */
+type AceContentTypeHandle = keyof AceContentTypes extends never
+  ? string
+  : Extract<keyof AceContentTypes, string>;
+
+/** The values of a content type's entries: what was generated for it, or loose before that. */
+type AceValuesOf<Handle extends string> = Handle extends keyof AceContentTypes
+  ? AceContentTypes[Handle]
+  : Record<string, unknown>;
+
+/** What to do with a request for a page: show an entry, redirect, or explain. */
+type AcePage<Values = Record<string, unknown>> =
+  | { kind: "entry"; status: 200; entry: AceEntry<Values>; headers: Record<string, string> }
+  | { kind: "redirect"; status: 301 | 302; location: string; headers: Record<string, string> }
+  | { kind: "not-found"; status: 404; headers: Record<string, string> }
+  | { kind: "unavailable"; status: 503; headers: Record<string, string> }
+  | { kind: "preview-expired"; status: 403; headers: Record<string, string> };
+
+/** The client for this site, made from the integration's settings. Most pages only need the functions below. */
+declare const ace: {
+    getEntry<Handle extends AceContentTypeHandle>(contentTypeHandle: Handle, handle: string, options?: {
+        previewToken?: string | null;
+    }): Promise<AceEntry<AceValuesOf<Handle>> | null>;
+    getEntries<Handle extends AceContentTypeHandle>(contentTypeHandle: Handle, options?: {
+        limit?: number;
+    }): Promise<AceEntry<AceValuesOf<Handle>>[]>;
+    getMenu(handle: string): Promise<AceMenu | null>;
+    getContentTypes(): Promise<AceContentTypeSchema[]>;
+};
+/** One live entry of a content type by its handle, or `null`. See `createAceClient`. */
+declare const getEntry: <Handle extends AceContentTypeHandle>(contentTypeHandle: Handle, handle: string, options?: {
+    previewToken?: string | null;
+}) => Promise<AceEntry<AceValuesOf<Handle>> | null>;
+/** A content type's live entries, newest first. */
+declare const getEntries: <Handle extends AceContentTypeHandle>(contentTypeHandle: Handle, options?: {
+    limit?: number;
+}) => Promise<AceEntry<AceValuesOf<Handle>>[]>;
+/** A navigation menu with every link worked out, or `null`. */
+declare const getMenu: (handle: string) => Promise<AceMenu | null>;
+/**
+ * A menu's links, ready to draw: `[{ label, to, children? }]`. If the site has no such menu, or the CMS can't be
+ * reached, you get `fallback` instead, so a missing menu never takes a page down.
+ *
+ *     const links = await getMenuLinks("main-menu", { fallback: [{ label: "Home", to: "/" }] });
+ */
+declare function getMenuLinks(handle: string, options?: {
+    fallback?: AceNavigationLink[];
+}): Promise<AceNavigationLink[]>;
+/** Puts a page's status and headers (no caching or indexing for previews, and so on) on Astro's response. */
+declare function applyPage(response: {
+    status?: number;
+    headers: Headers;
+}, page: {
+    status: number;
+    headers: Record<string, string>;
+}): void;
+/**
+ * What to show for the page being requested, from the address alone (any catch-all route will do). It also sets
+ * the response's status and headers. Only a redirect is left to you, because Astro makes only a page do that:
+ *
+ *     const page = await getPage(Astro);
+ *     if (page.kind === "redirect") return Astro.redirect(page.location, page.status);
+ *
+ * `page.kind` is `entry` (see `page.entry`), `not-found`, `unavailable`, `preview-expired` or `redirect`.
+ */
+declare function getPage<Values = Record<string, unknown>>(astro: {
+    url: URL;
+    response: {
+        status?: number;
+        headers: Headers;
+    };
+}): Promise<AcePage<Values>>;
+
+export { ace, applyPage, getEntries, getEntry, getMenu, getMenuLinks, getPage };

package/dist/astro.js

@@ -0,0 +1,24 @@
+import { createAceClient, loadMenuLinks, loadPage } from './chunk-KLRCWAE4.js';
+import './chunk-M5WR5TCR.js';
+import './chunk-YLO6IAXF.js';
+import { ACE_SITE_DOMAIN, ACE_API_URL } from 'astro:env/server';
+
+var ace = createAceClient({ apiUrl: ACE_API_URL, siteDomain: ACE_SITE_DOMAIN });
+var getEntry = ace.getEntry;
+var getEntries = ace.getEntries;
+var getMenu = ace.getMenu;
+function getMenuLinks(handle, options = {}) {
+  return loadMenuLinks(ace, handle, options.fallback ?? []);
+}
+function applyPage(response, page) {
+  response.status = page.status;
+  for (const [name, value] of Object.entries(page.headers)) response.headers.set(name, value);
+}
+async function getPage(astro) {
+  const slug = astro.url.pathname.replace(/^\/+|\/+$/g, "");
+  const page = await loadPage(ace, { slug, url: astro.url });
+  applyPage(astro.response, page);
+  return page;
+}
+
+export { ace, applyPage, getEntries, getEntry, getMenu, getMenuLinks, getPage };

package/dist/chunk-KEV3YAWN.js

@@ -0,0 +1,66 @@
+import { imageAttributes, textAreaSingleLine, textAreaParagraphs, textAreaLines, richTextImageSizes, listStart, headingLevel, linkAddress } from './chunk-URLKW2YS.js';
+import { listenForPreviewRefresh } from './chunk-YN7LJWGI.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1, useEffect } from 'react';
+
+function AceImage({ image, sizes, lazy, ...rest }) {
+  const attributes = imageAttributes(image, { sizes, lazy });
+  return /* @__PURE__ */ jsx("img", { ...rest, ...attributes });
+}
+var PlainLink = ({ href, children }) => /* @__PURE__ */ jsx("a", { href, children });
+function renderText(node, Link) {
+  return (node.marks ?? []).reduce((inner, mark) => {
+    if (mark.type === "bold") return /* @__PURE__ */ jsx("strong", { children: inner });
+    if (mark.type === "italic") return /* @__PURE__ */ jsx("em", { children: inner });
+    const address = linkAddress(mark.attrs.href);
+    return address ? /* @__PURE__ */ jsx(Link, { href: address, children: inner }) : inner;
+  }, node.text ?? "");
+}
+function renderNodes(nodes, Link) {
+  return (nodes ?? []).map((node, index) => /* @__PURE__ */ jsx(Node, { node, Link }, index));
+}
+function Node({ node, Link }) {
+  const children = renderNodes(node.content, Link);
+  switch (node.type) {
+    case "text":
+      return renderText(node, Link);
+    case "hardBreak":
+      return /* @__PURE__ */ jsx("br", {});
+    case "paragraph":
+      return /* @__PURE__ */ jsx("p", { children });
+    case "heading": {
+      const Heading = `h${headingLevel(node)}`;
+      return /* @__PURE__ */ jsx(Heading, { children });
+    }
+    case "bulletList":
+      return /* @__PURE__ */ jsx("ul", { children });
+    case "orderedList":
+      return /* @__PURE__ */ jsx("ol", { start: listStart(node), children });
+    case "listItem":
+      return /* @__PURE__ */ jsx("li", { children });
+    case "blockquote":
+      return /* @__PURE__ */ jsx("blockquote", { children });
+    case "image":
+      return node.attrs?.image ? /* @__PURE__ */ jsx("figure", { children: /* @__PURE__ */ jsx("img", { ...imageAttributes(node.attrs.image, { sizes: richTextImageSizes }) }) }) : null;
+    default:
+      return null;
+  }
+}
+function AceRichText({ document, link = PlainLink }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: renderNodes(document.content, link) });
+}
+function AceTextArea({ value, multiline = true }) {
+  if (!multiline) return /* @__PURE__ */ jsx(Fragment, { children: textAreaSingleLine(value) });
+  return /* @__PURE__ */ jsx(Fragment, { children: textAreaParagraphs(value).map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx("p", { children: textAreaLines(paragraph).map((line, lineIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    lineIndex > 0 ? /* @__PURE__ */ jsx("br", {}) : null,
+    line
+  ] }, lineIndex)) }, paragraphIndex)) });
+}
+function usePreviewRefresh(adminOrigin, refresh) {
+  useEffect(() => {
+    if (!adminOrigin) return;
+    return listenForPreviewRefresh(adminOrigin, refresh);
+  }, [adminOrigin, refresh]);
+}
+
+export { AceImage, AceRichText, AceTextArea, usePreviewRefresh };