@sandboxsonny/ace-kit 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @sandboxsonny/ace-kit
 
+## 0.4.0
+
+### Minor Changes
+
+- 7efae5a: Dev sites: against a hosted CMS, the dev server now works on your own private copy of the site instead of the live one.
+  
+  - On start (the Astro integration, and the `ace()` Vite plugin), the dev server finds or makes your dev site of the site `ACE_SITE_DOMAIN` names, points the site at it for as long as the server runs (`.env` is unchanged), and tells the CMS where the dev server runs so the live preview shows it.
+  - Section sync goes to the dev site, so it is now allowed automatically against a hosted CMS without `ACE_SYNC_SECTIONS=remote`. The live site only changes when you run `npx ace-kit sync` yourself.
+  - Without a login, or with an account that can't have a dev site, the dev server says why and shows the live site read-only, with section sync off.
+  - `ACE_DEV_SITE=false` turns it off; `ACE_DEV_SITE=true` uses one even against a CMS on your own machine.
+  
+  Needs a CMS Ace API with dev sites (migration 00022), and a partner or super admin account.
+- 7efae5a: Sections defined in code, and synced to the CMS as you work.
+  
+  - `defineSection` describes a kind of section (its fields, and the blocks it can hold) in a `*.schema.ts` file next to the component that draws it. `SectionOf<typeof schema>` gives the type of such a section, so a component's props follow its schema: a required field is always there, a select is the union of its options, an image is `AceImageData`, and a block's values depend on its kind.
+  - While the dev server runs (the Astro integration, and the `ace()` Vite plugin on React Router), saving a schema file syncs the site's section types to the CMS. `ace-kit sync` does the same once, for a build server (with `ACE_TOKEN`). Nothing is deleted: what you take out of your code is kept in the CMS, hidden. If any schema file can't be loaded, or none are found, nothing is synced. Automatic sync only runs against a local CMS unless `ACE_SYNC_SECTIONS=remote`.
+  - `AceSections` draws a sections field, giving each section to the component for its kind: `AceSections.astro`, and `AceSections` from `/react` and `/react-router`.
+  - `ace-kit generate` types a sections field as `AceSection[]`.
+  
+  Needs a CMS Ace API with sections (migration 00019) and command-line sign-in (00020). Schema files are TypeScript: Node 22.18 or newer runs them as they are.
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -51,7 +51,9 @@ const about = await getEntry("pages", "about");
 | [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`                           |
-| [The command line](docs/command-line.md)   | `ace-kit login`, `logout`, `whoami`          |
+| [The command line](docs/command-line.md)   | `ace-kit login`, `logout`, `whoami`, `sync`  |
+| [Sections](docs/sections.md)               | `defineSection`, `AceSections`, the sync     |
+| [Dev sites](docs/dev-sites.md)             | your private copy of a site to build against |
 | [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       |

package/astro/AceSections.astro

@@ -0,0 +1,28 @@
+---
+import type { AceSection } from "../dist/index.js";
+
+type Props = {
+  /** An entry's sections field, as the CMS gives it: a list of sections, or nothing. */
+  sections: readonly AceSection[] | null | undefined;
+  /**
+   * The component that draws each kind of section, by the section's `type` (the handle in its schema). Each one is
+   * given the section as its `section` prop. A kind with no component is left out (and noted in development).
+   */
+  components: Record<string, unknown>;
+};
+
+const { sections, components } = Astro.props;
+const list = Array.isArray(sections) ? sections : [];
+---
+
+{list.map((section) => {
+  // An Astro component's props are checked where it is written (its own schema types them), not here.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Component = Object.hasOwn(components, section.type) ? (components[section.type] as any) : undefined;
+  if (!Component) {
+    if (import.meta.env.DEV)
+      console.warn(`AceSections: no component draws the section type "${section.type}", so it was left out.`);
+    return null;
+  }
+  return <Component section={section} />;
+})}

package/dist/astro-integration.d.ts

@@ -7,7 +7,9 @@ import { AstroIntegration } from 'astro';
  *     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.
+ * The settings are read when the server starts, not baked into the build, so one build runs anywhere. While the dev
+ * server runs it also syncs the site's section types (its `*.schema.ts` files) to the CMS whenever they change; see
+ * `ace-kit sync`.
  *
  * | Setting                    | Default                 | Meaning                                                  |
  * | -------------------------- | ----------------------- | -------------------------------------------------------- |

package/dist/astro-integration.js

@@ -1,11 +1,20 @@
+import { startDevSite, sectionSync } from './chunk-O3NAJNUN.js';
 import { envField } from 'astro/config';
+import { fileURLToPath } from 'url';
 
-// src/astro/integration.ts
 function ace() {
+  let devSite = null;
   return {
     name: "ace-kit",
     hooks: {
-      "astro:config:setup": ({ updateConfig, addMiddleware }) => {
+      "astro:config:setup": async ({ command, config, logger, updateConfig, addMiddleware }) => {
+        if (command === "dev") {
+          devSite = await startDevSite({
+            root: fileURLToPath(config.root),
+            mode: "development",
+            log: { info: (text) => logger.info(text), warn: (text) => logger.warn(text) }
+          });
+        }
         updateConfig({
           env: {
             schema: {
@@ -21,9 +30,12 @@ function ace() {
           },
           // 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"] } }
+          vite: { ssr: { noExternal: ["@sandboxsonny/ace-kit"] }, plugins: [sectionSync()] }
         });
         addMiddleware({ entrypoint: "@sandboxsonny/ace-kit/astro/middleware", order: "pre" });
+      },
+      "astro:server:start": async ({ address }) => {
+        if (devSite) await devSite.setPreviewUrl(`http://localhost:${address.port}`);
       }
     }
   };

package/dist/astro.d.ts

@@ -2,7 +2,7 @@
 type AceFieldSchema = {
   handle: string;
   label: string;
-  /** `text`, `textarea`, `select`, `number`, `checkbox`, `image`, `richtext`, `date` or `link`. */
+  /** `text`, `textarea`, `select`, `number`, `checkbox`, `image`, `richtext`, `date`, `link` or `sections`. */
   component_key: string;
   config: { required?: boolean; options?: string[] } | null;
 };

package/dist/chunk-O3NAJNUN.js

@@ -0,0 +1,477 @@
+import { loadEnv } from 'vite';
+import { readdir, readFile, mkdir, writeFile, rename } from 'fs/promises';
+import { homedir } from 'os';
+import { join, relative, dirname } from 'path';
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+
+// src/dev-site/start-dev-site.ts
+
+// src/auth/login-store.ts
+function normaliseApiUrl(address) {
+  let parsed;
+  try {
+    parsed = new URL(address.trim());
+  } catch {
+    throw new Error(`"${address}" is not a web address. Write the API address like http://localhost:8080.`);
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error(`The API address must start with http:// or https:// (it was "${address}").`);
+  }
+  if (parsed.username || parsed.password) {
+    throw new Error("The API address must not contain a username or password.");
+  }
+  return `${parsed.origin}${parsed.pathname.replace(/\/+$/, "")}`;
+}
+function hasExpired(login, now) {
+  const endsAt = Date.parse(login.expiresAt);
+  return Number.isNaN(endsAt) || endsAt <= now;
+}
+function parseStoredLogin(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const { token, expiresAt, email } = value;
+  if (typeof token !== "string" || token === "" || typeof expiresAt !== "string" || typeof email !== "string")
+    return null;
+  return { token, expiresAt, email };
+}
+
+// src/auth/file-store.ts
+function defaultLoginFile(variables, platform) {
+  if (platform === "win32" && variables.APPDATA) return join(variables.APPDATA, "ace-kit", "credentials.json");
+  const configFolder = variables.XDG_CONFIG_HOME || join(homedir(), ".config");
+  return join(configFolder, "ace-kit", "credentials.json");
+}
+function createFileStore(path) {
+  async function readAll() {
+    let text;
+    try {
+      text = await readFile(path, "utf8");
+    } catch {
+      return {};
+    }
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return {};
+    }
+    const found = {};
+    if (typeof parsed === "object" && parsed !== null) {
+      for (const [address, value] of Object.entries(parsed)) {
+        const login = parseStoredLogin(value);
+        if (login) found[address] = login;
+      }
+    }
+    return found;
+  }
+  async function writeAll(logins) {
+    await mkdir(dirname(path), { recursive: true, mode: 448 });
+    const temporary = `${path}.${process.pid}.tmp`;
+    await writeFile(temporary, `${JSON.stringify(logins, null, 2)}
+`, { mode: 384 });
+    await rename(temporary, path);
+  }
+  return {
+    description: path,
+    async read(apiUrl) {
+      return (await readAll())[normaliseApiUrl(apiUrl)] ?? null;
+    },
+    async write(apiUrl, login) {
+      const logins = await readAll();
+      logins[normaliseApiUrl(apiUrl)] = login;
+      await writeAll(logins);
+    },
+    async remove(apiUrl) {
+      const logins = await readAll();
+      delete logins[normaliseApiUrl(apiUrl)];
+      await writeAll(logins);
+    }
+  };
+}
+
+// src/auth/keychain-store.ts
+var keychainService = "ace-kit";
+function createKeychainStore(run) {
+  async function read(apiUrl) {
+    const found = await run("security", [
+      "find-generic-password",
+      "-s",
+      keychainService,
+      "-a",
+      normaliseApiUrl(apiUrl),
+      "-w"
+    ]);
+    if (found.exitCode !== 0) return null;
+    try {
+      return parseStoredLogin(JSON.parse(Buffer.from(found.stdout.trim(), "base64").toString("utf8")));
+    } catch {
+      return null;
+    }
+  }
+  return {
+    description: "the macOS Keychain",
+    read,
+    async write(apiUrl, login) {
+      const account = normaliseApiUrl(apiUrl);
+      if (/["\\\s]/.test(account)) throw new Error("That API address can't be kept in the Keychain.");
+      const secret = Buffer.from(JSON.stringify(login), "utf8").toString("base64");
+      await run(
+        "security",
+        ["-i"],
+        `add-generic-password -s "${keychainService}" -a "${account}" -l "Ace Kit login" -w "${secret}" -U
+`
+      );
+      const kept = await read(apiUrl);
+      if (kept?.token !== login.token) throw new Error("The login could not be saved in the macOS Keychain.");
+    },
+    async remove(apiUrl) {
+      await run("security", ["delete-generic-password", "-s", keychainService, "-a", normaliseApiUrl(apiUrl)]);
+    }
+  };
+}
+
+// src/auth/choose-store.ts
+async function chooseLoginStore(options) {
+  const file = createFileStore(defaultLoginFile(options.variables, options.platform));
+  if (options.platform !== "darwin" || options.variables.ACE_KIT_CREDENTIALS === "file") return file;
+  try {
+    await options.run("security", ["help"]);
+    return createKeychainStore(options.run);
+  } catch {
+    return file;
+  }
+}
+var runCommand = (command, commandArguments, input) => new Promise((resolve, reject) => {
+  const child = spawn(command, commandArguments, { stdio: ["pipe", "pipe", "ignore"] });
+  let stdout = "";
+  child.stdout.on("data", (chunk) => {
+    stdout += chunk.toString("utf8");
+  });
+  child.on("error", reject);
+  child.on("close", (exitCode) => resolve({ exitCode: exitCode ?? 1, stdout }));
+  child.stdin.on("error", () => {
+  });
+  child.stdin.end(input ?? "");
+});
+
+// src/dev-site/find-or-create.ts
+var requestTimeoutMilliseconds = 6e4;
+async function readMessage(response, fallback) {
+  try {
+    const body = await response.json();
+    if (typeof body.error === "string") return body.error;
+  } catch {
+  }
+  return fallback;
+}
+async function findOrCreateDevSite(options) {
+  const { apiUrl, siteDomain, token, previewUrl, fetchImplementation } = options;
+  const headers = { Accept: "application/json", Authorization: `Bearer ${token}` };
+  let sitesResponse;
+  try {
+    sitesResponse = await fetchImplementation(`${apiUrl}/sites`, {
+      headers,
+      signal: AbortSignal.timeout(requestTimeoutMilliseconds)
+    });
+  } catch {
+    return { kind: "unreachable" };
+  }
+  if (sitesResponse.status === 401) return { kind: "login-ended" };
+  if (!sitesResponse.ok) {
+    return {
+      kind: "rejected",
+      message: await readMessage(sitesResponse, `The CMS answered with an error (${sitesResponse.status}).`)
+    };
+  }
+  const sites = await sitesResponse.json().catch(() => []);
+  const wanted = siteDomain.trim().toLowerCase();
+  const site = sites.find((candidate) => candidate.domain.toLowerCase() === wanted);
+  if (!site) {
+    return {
+      kind: "site-not-found",
+      domain: siteDomain,
+      available: sites.filter((candidate) => candidate.kind !== "dev").map((candidate) => candidate.domain)
+    };
+  }
+  if (site.kind === "dev") return { kind: "found", site };
+  let response;
+  try {
+    response = await fetchImplementation(`${apiUrl}/sites/${site.id}/dev-site`, {
+      method: "PUT",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: previewUrl === void 0 ? void 0 : JSON.stringify({ preview_url: previewUrl }),
+      signal: AbortSignal.timeout(requestTimeoutMilliseconds)
+    });
+  } catch {
+    return { kind: "unreachable" };
+  }
+  if (response.status === 401) return { kind: "login-ended" };
+  if (response.status === 403) {
+    return {
+      kind: "forbidden",
+      message: await readMessage(response, "Your account can't have a dev site of this site.")
+    };
+  }
+  if (!response.ok) {
+    return {
+      kind: "rejected",
+      message: await readMessage(response, `The CMS answered with an error (${response.status}).`)
+    };
+  }
+  const made = await response.json().catch(() => null);
+  if (!made || typeof made.id !== "number" || typeof made.domain !== "string") {
+    return { kind: "rejected", message: "The CMS sent an unexpected reply." };
+  }
+  return {
+    kind: response.status === 201 ? "created" : "found",
+    site: { id: made.id, name: made.name, domain: made.domain }
+  };
+}
+
+// src/auth/resolve-login.ts
+async function resolveLogin(options) {
+  const fromEnvironment = options.variables.ACE_TOKEN?.trim();
+  if (fromEnvironment) return { token: fromEnvironment, source: "the ACE_TOKEN setting" };
+  const stored = await options.store.read(options.apiUrl);
+  if (!stored || hasExpired(stored, options.now())) return null;
+  return { token: stored.token, email: stored.email, source: options.store.description };
+}
+
+// src/cli/api-url.ts
+function isLocalApiUrl(apiUrl) {
+  return ["localhost", "127.0.0.1", "[::1]"].includes(new URL(apiUrl).hostname);
+}
+
+// src/dev-site/prepare-dev-site.ts
+var off = ["false", "off", "no", "0"];
+var on = ["true", "on", "yes", "1"];
+function wantsDevSite(variables, apiUrl) {
+  const setting = (variables.ACE_DEV_SITE ?? "").trim().toLowerCase();
+  if (off.includes(setting)) return false;
+  if (on.includes(setting)) return true;
+  return !isLocalApiUrl(apiUrl);
+}
+async function prepareDevSite(options) {
+  const { apiUrl, variables, store, now, fetchImplementation } = options;
+  if (!wantsDevSite(variables, apiUrl)) return { kind: "off" };
+  const login = await resolveLogin({ apiUrl, variables, store, now });
+  if (!login) return { kind: "waiting-for-login", apiUrl };
+  const siteDomain = variables.ACE_SITE_DOMAIN?.trim() || "localhost";
+  const outcome = await findOrCreateDevSite({ apiUrl, siteDomain, token: login.token, fetchImplementation });
+  switch (outcome.kind) {
+    case "created":
+    case "found":
+      return { kind: "ready", site: outcome.site, created: outcome.kind === "created" };
+    case "login-ended":
+      return { kind: "waiting-for-login", apiUrl };
+    case "site-not-found":
+      return {
+        kind: "problem",
+        message: `The CMS at ${apiUrl} has no site with the domain "${outcome.domain}" that you can see` + (outcome.available.length > 0 ? ` (your sites: ${outcome.available.join(", ")})` : "") + ". Set ACE_SITE_DOMAIN."
+      };
+    case "forbidden":
+      return {
+        kind: "problem",
+        message: `${outcome.message[0].toUpperCase()}${outcome.message.slice(1)}. Dev sites are for partner accounts and super admins. Ask for a partner account, or set ACE_DEV_SITE=false to stop trying.`
+      };
+    case "rejected":
+      return { kind: "problem", message: outcome.message };
+    case "unreachable":
+      return { kind: "problem", message: `Could not reach the CMS at ${apiUrl}.` };
+  }
+}
+
+// src/dev-site/start-dev-site.ts
+var defaultApiUrl = "http://localhost:8080";
+async function startDevSite(options) {
+  const { root, mode, log } = options;
+  if (mode === "test" || process.env.VITEST) return null;
+  const variables = options.environment?.variables ?? { ...loadEnv(mode, root, "ACE_"), ...process.env };
+  let apiUrl;
+  try {
+    apiUrl = normaliseApiUrl(variables.ACE_API_URL ?? defaultApiUrl);
+  } catch {
+    return null;
+  }
+  const environment = options.environment ?? {
+    variables,
+    store: await chooseLoginStore({ platform: process.platform, variables, run: runCommand }),
+    now: Date.now,
+    fetchImplementation: (input, init) => fetch(input, init)
+  };
+  const outcome = await prepareDevSite({ apiUrl, ...environment });
+  switch (outcome.kind) {
+    case "off":
+      return null;
+    case "waiting-for-login":
+      log.warn(
+        `You are not signed in to ${outcome.apiUrl}, so this is showing the live site and section sync is off. Run: npx ace-kit login --api-url ${outcome.apiUrl}`
+      );
+      return null;
+    case "problem":
+      log.warn(`No dev site: ${outcome.message} Showing the live site, and section sync is off.`);
+      return null;
+    case "ready": {
+      process.env.ACE_SITE_DOMAIN = outcome.site.domain;
+      process.env.ACE_DEV_SITE_ACTIVE = "1";
+      log.info(
+        outcome.created ? `Made you a dev site, "${outcome.site.name}", as a copy of the live site (${outcome.site.domain}). This dev server reads and syncs to it; the live site is not touched.` : `Using your dev site, "${outcome.site.name}" (${outcome.site.domain}). The live site is not touched.`
+      );
+      const siteDomain = variables.ACE_SITE_DOMAIN?.trim() || "localhost";
+      return {
+        domain: outcome.site.domain,
+        setPreviewUrl: async (previewUrl) => {
+          const login = environment.variables.ACE_TOKEN?.trim() ? { token: environment.variables.ACE_TOKEN.trim() } : await environment.store.read(apiUrl);
+          if (!login) return;
+          const result = await findOrCreateDevSite({
+            apiUrl,
+            siteDomain,
+            token: login.token,
+            previewUrl,
+            fetchImplementation: environment.fetchImplementation
+          });
+          if (result.kind !== "found" && result.kind !== "created") {
+            log.warn(
+              "Could not tell the CMS where this dev server runs, so its live preview may show another address."
+            );
+          }
+        }
+      };
+    }
+  }
+}
+var schemaFilePattern = /\.schema\.(?:ts|mts|js|mjs)$/;
+var skippedFolders = /* @__PURE__ */ new Set([
+  "node_modules",
+  ".git",
+  "dist",
+  "build",
+  ".astro",
+  ".react-router",
+  ".output",
+  "coverage"
+]);
+async function findSchemaFiles(root, folder = "src") {
+  const start = join(root, folder);
+  const found = [];
+  async function walk(directory) {
+    let entries;
+    try {
+      entries = await readdir(directory, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const path = join(directory, entry.name);
+      if (entry.isDirectory()) {
+        if (!skippedFolders.has(entry.name)) await walk(path);
+      } else if (entry.isFile() && schemaFilePattern.test(entry.name) && !entry.name.endsWith(".d.ts")) {
+        found.push(path);
+      }
+    }
+  }
+  await walk(start);
+  return found.sort((first, second) => {
+    const [firstName, secondName] = [relative(root, first), relative(root, second)];
+    return firstName < secondName ? -1 : firstName > secondName ? 1 : 0;
+  });
+}
+
+// src/vite/section-sync.ts
+function nodeFlags(version) {
+  const [major, minor] = version.split(".").map(Number);
+  return major === 22 && minor < 18 ? ["--experimental-strip-types", "--no-warnings"] : [];
+}
+function runSyncProgram(root) {
+  return new Promise((resolve) => {
+    const program = fileURLToPath(new URL("./cli.js", import.meta.url));
+    const child = spawn(process.execPath, [...nodeFlags(process.versions.node), program, "sync", "--automatic"], {
+      cwd: root,
+      env: process.env,
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    let standardOutput = "";
+    let standardError = "";
+    child.stdout.on("data", (chunk) => standardOutput += chunk.toString("utf8"));
+    child.stderr.on("data", (chunk) => standardError += chunk.toString("utf8"));
+    const lines = (text) => text.split("\n").map((line) => line.trimEnd()).filter((line) => line !== "");
+    child.on(
+      "error",
+      (error) => resolve({ output: [], errors: [`Could not run ace-kit sync: ${error.message}`], failed: true })
+    );
+    child.on(
+      "close",
+      (exitCode) => resolve({ output: lines(standardOutput), errors: lines(standardError), failed: exitCode !== 0 })
+    );
+  });
+}
+function startSectionSync(server, options = {}) {
+  if (server.config.mode === "test" || process.env.VITEST) return () => void 0;
+  const root = server.config.root;
+  const logger = server.config.logger;
+  const runSync = options.runSync ?? runSyncProgram;
+  const debounceMilliseconds = options.debounceMilliseconds ?? 250;
+  let timer;
+  let running = false;
+  let again = false;
+  let stopped = false;
+  async function run() {
+    if (stopped) return;
+    if (running) {
+      again = true;
+      return;
+    }
+    running = true;
+    try {
+      const result = await runSync(root);
+      for (const line of result.output) logger.info(`[ace-kit] ${line}`, { timestamp: true });
+      for (const line of result.errors) logger.warn(`[ace-kit] ${line}`, { timestamp: true });
+      if (result.failed && result.errors.length === 0)
+        logger.warn("[ace-kit] The section sync failed.", { timestamp: true });
+    } catch (error) {
+      logger.warn(`[ace-kit] The section sync failed: ${error instanceof Error ? error.message : String(error)}`, {
+        timestamp: true
+      });
+    } finally {
+      running = false;
+    }
+    if (again && !stopped) {
+      again = false;
+      await run();
+    }
+  }
+  function schedule() {
+    if (stopped) return;
+    clearTimeout(timer);
+    timer = setTimeout(() => void run(), debounceMilliseconds);
+  }
+  const onFileEvent = (path) => {
+    if (schemaFilePattern.test(path) && !path.endsWith(".d.ts")) schedule();
+  };
+  for (const event of ["add", "change", "unlink"]) server.watcher.on(event, onFileEvent);
+  const start = () => {
+    void findSchemaFiles(root).then((files) => {
+      if (files.length > 0) schedule();
+    });
+  };
+  if (server.httpServer && !server.httpServer.listening) server.httpServer.once("listening", start);
+  else start();
+  const stop = () => {
+    stopped = true;
+    clearTimeout(timer);
+    for (const event of ["add", "change", "unlink"]) server.watcher.off(event, onFileEvent);
+  };
+  server.httpServer?.once("close", stop);
+  return stop;
+}
+function sectionSync(options) {
+  return {
+    name: "ace-kit:section-sync",
+    apply: "serve",
+    configureServer(server) {
+      startSectionSync(server, options);
+    }
+  };
+}
+
+export { sectionSync, startDevSite, startSectionSync };

package/dist/{chunk-2MXND4HG.js → chunk-XS6Z7BMM.js}

@@ -55,6 +55,20 @@ function Node({ node, Link }) {
 function AceRichText({ document, link = PlainLink2 }) {
   return /* @__PURE__ */ jsx(Fragment, { children: renderNodes(document.content, link) });
 }
+var warned = /* @__PURE__ */ new Set();
+function AceSections({ sections, components, fallback: Fallback }) {
+  if (!Array.isArray(sections)) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
+    const Component = Object.hasOwn(components, section.type) ? components[section.type] : void 0;
+    if (Component) return /* @__PURE__ */ jsx(Component, { section }, section.id);
+    if (Fallback) return /* @__PURE__ */ jsx(Fallback, { section }, section.id);
+    if (process.env.NODE_ENV !== "production" && !warned.has(section.type)) {
+      warned.add(section.type);
+      console.warn(`AceSections: no component draws the section type "${section.type}", so it was left out.`);
+    }
+    return null;
+  }) });
+}
 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: [
@@ -69,4 +83,4 @@ function usePreviewRefresh(adminOrigin, refresh) {
   }, [adminOrigin, refresh]);
 }
 
-export { AceImage, AceLink, AceRichText, AceTextArea, usePreviewRefresh };
+export { AceImage, AceLink, AceRichText, AceSections, AceTextArea, usePreviewRefresh };