@seamlet/astro 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Seamlet
+
+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,87 @@
-# Temporary Holding Version
+# @seamlet/astro
 
-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.
+Connects an [Astro](https://astro.build) site to the Seamlet CMS ([source](https://github.com/seamlet/sdk)): the owner of the site edits its texts, photos and records right on its pages, and the site keeps its own design, components and code.
+
+## How a site connects
+
+1. Install the package. The site needs an adapter, because the preview is rendered on request; its own pages may stay static.
+
+   ```bash
+   npm install @seamlet/astro
+   ```
+
+2. Describe the content with a schema, and mark the elements that show it:
+
+   ```ts
+   // src/schema.ts
+   import {
+     collection,
+     defineSchema,
+     number,
+     text,
+     type ContentOf,
+   } from "@seamlet/astro/schema";
+
+   export const schema = defineSchema({
+     title: text({ label: "Заголовок", maxLength: 60 }),
+     menu: collection({
+       label: "Меню",
+       itemTitle: "name",
+       item: {
+         name: text({ label: "Название" }),
+         price: number({ label: "Цена, ₽", min: 0 }),
+       },
+     }),
+   });
+
+   export type Content = ContentOf<typeof schema>;
+   ```
+
+   ```astro
+   ---
+   import { editable } from "@seamlet/astro/schema";
+   const edit = editable<Content>(); // a path the content does not have does not compile
+   ---
+
+   <h1 {...edit("title")}>{content.title}</h1>
+   ```
+
+3. Name the site's address in the CMS and its pages: components that take the content as their `content` prop.
+
+   ```ts
+   // src/seamlet.ts
+   import { defineSeamletSite } from "@seamlet/astro/site";
+   import HomePage from "./components/HomePage.astro";
+   import { schema } from "./schema";
+
+   export default defineSeamletSite({
+     id: "zerno",
+     schema,
+     pages: { "/": HomePage },
+   });
+   ```
+
+4. Add the integration:
+
+   ```js
+   // astro.config.mjs
+   import seamlet from "@seamlet/astro";
+
+   export default defineConfig({
+     integrations: [
+       seamlet({ cms: "https://cms.example.com", site: "./src/seamlet.ts" }),
+     ],
+   });
+   ```
+
+The site's pages take their published content with `site.loadPublishedContent()`: at build time for a static site, on request otherwise.
+
+## What the integration adds
+
+- `/preview` and `/preview/<page>`: the preview the CMS's editor frames. `GET` shows the published content; `POST` with the content as JSON shows that content without saving it, which is how the editor shows every edit at once. Only the CMS may frame it (`Content-Security-Policy: frame-ancestors`), and it is never indexed or cached.
+- The bridge on the preview: it tells the editor where the marked elements are and what a person does on the page, and types texts in place.
+- `/media/<site>/<file>`: the photos uploaded in the CMS, taken from it.
+
+A site never renders content as raw HTML (`set:html`): the editor acts on what its preview says.
+
+The preview's address goes on the site's settings page in the CMS: `https://<site>/preview`.

package/dist/bridge.d.ts

@@ -0,0 +1,18 @@
+import { F as Fields } from './content-DKVM1CUQ.js';
+import { P as PageMessage, E as EditorMessage } from './messages-DIMwt3Kn.js';
+import './parse-content-DF2dL2FG.js';
+
+interface BridgeOptions {
+    /** The origin of the CMS whose editor may frame the page, such as `https://cms.example.com`. */
+    readonly editorOrigin: string;
+}
+/** Waits for the editor when the page is in its frame; does nothing elsewhere. Returns a stop. */
+declare function connectToEditor(options: BridgeOptions): () => void;
+interface EditorConnection {
+    readonly receive: (message: EditorMessage) => void;
+    readonly stop: () => void;
+}
+/** What the page does for the editor once it connected. */
+declare function connectPage(document: Document, schema: Fields, send: (message: PageMessage) => void): EditorConnection;
+
+export { type BridgeOptions, connectPage, connectToEditor };

package/dist/bridge.js

@@ -0,0 +1,537 @@
+import {
+  PROTOCOL_VERSION,
+  carriesFiles,
+  closestMarkedPath,
+  imageFieldAt,
+  readEditorMessage,
+  shortcutOf
+} from "./chunk-HRAL4X6W.js";
+import {
+  FIELD_PATH_ATTRIBUTE
+} from "./chunk-EC42AIQC.js";
+
+// src/bridge/page-markers.ts
+var MARKER_SELECTOR = `[${FIELD_PATH_ATTRIBUTE}]`;
+var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+function markedElementAround(target) {
+  const element = asElement(target)?.closest(MARKER_SELECTOR);
+  const path = element?.getAttribute(FIELD_PATH_ATTRIBUTE);
+  const isMarked = isHtmlElement(element) && typeof path === "string";
+  return isMarked ? { element, path } : void 0;
+}
+function linkAround(target) {
+  const element = asElement(target)?.closest("a[href]");
+  const href = element?.getAttribute("href");
+  const isLink = isHtmlElement(element) && typeof href === "string";
+  return isLink ? { element, href } : void 0;
+}
+function findMarkedElement(document2, path) {
+  const element = document2.querySelector(
+    `[${FIELD_PATH_ATTRIBUTE}="${CSS.escape(path)}"]`
+  );
+  return isHtmlElement(element) ? element : void 0;
+}
+function allMarkedElements(document2) {
+  const elements = [...document2.querySelectorAll(MARKER_SELECTOR)];
+  return elements.flatMap((element) => {
+    const marked = markedElementAround(element);
+    return marked === void 0 ? [] : [marked];
+  });
+}
+function hasMarkedDescendants(element) {
+  return element.querySelector(MARKER_SELECTOR) !== null;
+}
+function findClosestMarkedElement(document2, path) {
+  const closestPath = closestMarkedPath(
+    path,
+    (marked) => findMarkedElement(document2, marked) !== void 0
+  );
+  return closestPath === void 0 ? void 0 : findMarkedElement(document2, closestPath);
+}
+function isHtmlElement(value) {
+  return asElement(value)?.namespaceURI === HTML_NAMESPACE;
+}
+function asElement(value) {
+  const isElement = typeof value === "object" && value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
+  return isElement ? value : void 0;
+}
+
+// src/bridge/page-events.ts
+var DRAG_GONE_AFTER_MS = 150;
+function listenToPage(document2, listeners) {
+  const view = document2.defaultView;
+  const hover = (event) => {
+    const link = nearerLink(event.target);
+    listeners.onHover(
+      link === void 0 ? markedElementAround(event.target)?.path : void 0
+    );
+    listeners.onLinkHover(link);
+  };
+  const leave = () => {
+    listeners.onHover(void 0);
+    listeners.onLinkHover(void 0);
+  };
+  const click = (event) => {
+    event.preventDefault();
+    const link = nearerLink(event.target);
+    if (link !== void 0) {
+      listeners.onLinkClick(link);
+      return;
+    }
+    const marked = markedElementAround(event.target);
+    listeners.onClick(
+      marked === void 0 ? void 0 : { ...marked, point: { x: event.clientX, y: event.clientY } }
+    );
+  };
+  const preventDefault = (event) => {
+    event.preventDefault();
+  };
+  let dragGoneTimer;
+  const dragFile = (event) => {
+    if (!carriesFiles(event)) return;
+    event.preventDefault();
+    clearTimeout(dragGoneTimer);
+    const path = markedElementAround(event.target)?.path;
+    const isTaken = listeners.onFileDragOver(path);
+    if (event.dataTransfer !== null) {
+      event.dataTransfer.dropEffect = isTaken ? "copy" : "none";
+    }
+  };
+  const dropFile = (event) => {
+    if (!carriesFiles(event)) return;
+    event.preventDefault();
+    clearTimeout(dragGoneTimer);
+    listeners.onFileDragEnd();
+    const path = markedElementAround(event.target)?.path;
+    const file = event.dataTransfer?.files[0];
+    if (path !== void 0 && file !== void 0)
+      listeners.onFileDrop(path, file);
+  };
+  const leaveWithFile = (event) => {
+    if (!carriesFiles(event)) return;
+    clearTimeout(dragGoneTimer);
+    dragGoneTimer = setTimeout(listeners.onFileDragEnd, DRAG_GONE_AFTER_MS);
+  };
+  const documentListeners = [
+    ["mouseover", hover],
+    ["click", click],
+    ["auxclick", preventDefault],
+    ["submit", preventDefault],
+    ["dragstart", preventDefault],
+    ["keydown", listeners.onKeyDown],
+    ["dragover", dragFile],
+    ["drop", dropFile],
+    ["dragleave", leaveWithFile],
+    ["scroll", listeners.onLayoutChange],
+    // Images load after the page is shown and move what is below them; load does not bubble.
+    ["load", listeners.onLayoutChange]
+  ];
+  for (const [type, listener] of documentListeners) {
+    document2.addEventListener(type, listener, true);
+  }
+  document2.documentElement.addEventListener("mouseleave", leave);
+  view?.addEventListener("resize", listeners.onLayoutChange);
+  return () => {
+    clearTimeout(dragGoneTimer);
+    for (const [type, listener] of documentListeners) {
+      document2.removeEventListener(type, listener, true);
+    }
+    document2.documentElement.removeEventListener("mouseleave", leave);
+    view?.removeEventListener("resize", listeners.onLayoutChange);
+  };
+}
+function nearerLink(target) {
+  const link = linkAround(target);
+  const marked = markedElementAround(target);
+  const isFieldInsideLink = marked !== void 0 && link !== void 0 && !marked.element.contains(link.element);
+  const isLinkTheField = marked !== void 0 && marked.element === link?.element;
+  return isFieldInsideLink || isLinkTheField ? void 0 : link;
+}
+
+// src/bridge/boxes.ts
+function boxOf(element) {
+  const rectangle = element.getBoundingClientRect();
+  const isShown = rectangle.width > 0 || rectangle.height > 0;
+  if (!isShown) {
+    return void 0;
+  }
+  return {
+    top: rectangle.top,
+    left: rectangle.left,
+    width: rectangle.width,
+    height: rectangle.height
+  };
+}
+
+// src/bridge/page-layout.ts
+function measureLayout(document2, link) {
+  const markers = allMarkedElements(document2).flatMap(
+    ({ element, path }) => {
+      const box = boxOf(element);
+      return box === void 0 ? [] : [{ path, box }];
+    }
+  );
+  const root = document2.documentElement;
+  const linkBox = link === void 0 ? void 0 : boxOf(link.element);
+  return {
+    markers,
+    viewport: { width: root.clientWidth, height: root.clientHeight },
+    link: link === void 0 || linkBox === void 0 ? void 0 : { href: link.href, box: linkBox }
+  };
+}
+function createLayoutReports(document2, report) {
+  const view = document2.defaultView;
+  let link;
+  let frame;
+  const cancel = () => {
+    if (frame !== void 0) view?.cancelAnimationFrame(frame);
+    frame = void 0;
+  };
+  const reportNow = () => {
+    cancel();
+    report(measureLayout(document2, link));
+  };
+  const schedule = () => {
+    if (frame !== void 0) return;
+    frame = view?.requestAnimationFrame(reportNow);
+  };
+  return {
+    schedule,
+    reportNow,
+    hoverLink: (hovered) => {
+      if (hovered?.element === link?.element) return;
+      link = hovered;
+      schedule();
+    },
+    stop: cancel
+  };
+}
+
+// src/bridge/page-rendering.ts
+function createPageRenderer(options) {
+  let request;
+  const render = (content) => {
+    request?.abort();
+    const currentRequest = new AbortController();
+    request = currentRequest;
+    fetchRenderedPage(
+      pageAddress(options.document),
+      content,
+      currentRequest.signal
+    ).then((html) => {
+      if (!options.canReplacePage()) return;
+      replacePageBody(options.document, html);
+      options.onRendered();
+    }).catch((error) => {
+      if (currentRequest.signal.aborted) return;
+      options.onFailed(error);
+    });
+  };
+  return {
+    render,
+    stop: () => {
+      request?.abort();
+    }
+  };
+}
+function pageAddress(document2) {
+  const url = new URL(document2.URL);
+  url.hash = "";
+  return url.href;
+}
+async function fetchRenderedPage(url, content, signal) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(content),
+    signal
+  });
+  if (!response.ok || response.redirected) {
+    throw new Error(
+      `Rendering the draft at ${url} failed with status ${String(response.status)}`
+    );
+  }
+  return response.text();
+}
+function replacePageBody(document2, html) {
+  const rendered = new DOMParser().parseFromString(html, "text/html");
+  document2.title = rendered.title;
+  document2.body.replaceWith(document2.importNode(rendered.body, true));
+}
+
+// src/bridge/element-text.ts
+var LINE_BREAK = "\n";
+var NO_BREAK_SPACE = /\u00a0/gu;
+var SPACES_BUT_LINE_BREAKS = /[^\S\n]+/gu;
+var COLLAPSIBLE_WHITESPACE = /[\t\n\f\r ]+/gu;
+var COLLAPSIBLE_SPACES = /[\t\f\r ]+/gu;
+var SPACES_AROUND_LINE_BREAK = / *\n */gu;
+var EDGE_WHITESPACE = /^[\n ]+|[\n ]+$/gu;
+var KEEPS_LINE_BREAKS = /* @__PURE__ */ new Set([
+  "pre",
+  "pre-wrap",
+  "pre-line",
+  "break-spaces"
+]);
+var KEEPS_SPACES = /* @__PURE__ */ new Set(["pre", "pre-wrap", "break-spaces"]);
+function readElementText(element) {
+  const whiteSpace = whiteSpaceOf(element);
+  const keepsLineBreaks = KEEPS_LINE_BREAKS.has(whiteSpace);
+  const keepsSpaces = KEEPS_SPACES.has(whiteSpace);
+  const collapsible = keepsLineBreaks ? COLLAPSIBLE_SPACES : COLLAPSIBLE_WHITESPACE;
+  const pieces = textPieces(element).map(
+    (piece) => piece.isLineBreak || keepsSpaces ? piece.text : piece.text.replace(collapsible, " ")
+  );
+  const joined = pieces.join("");
+  const tidied = keepsSpaces ? joined : joined.replace(COLLAPSIBLE_SPACES, " ").replace(SPACES_AROUND_LINE_BREAK, LINE_BREAK).replace(EDGE_WHITESPACE, "");
+  return tidied.replace(NO_BREAK_SPACE, " ");
+}
+function normalizeSpaces(text) {
+  return text.replace(SPACES_BUT_LINE_BREAKS, " ").replace(SPACES_AROUND_LINE_BREAK, LINE_BREAK).trim();
+}
+function canEditTextInPlace(element, value) {
+  const shownText = normalizeSpaces(readElementText(element));
+  const showsValueAsItIs = shownText === normalizeSpaces(value);
+  return showsValueAsItIs && !hasMarkedDescendants(element);
+}
+function textPieces(element) {
+  const document2 = element.ownerDocument;
+  const walker = document2.createTreeWalker(
+    element,
+    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT
+  );
+  const pieces = [];
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      pieces.push({ text: node.nodeValue ?? "", isLineBreak: false });
+    } else if (node.nodeName === "BR") {
+      pieces.push({ text: LINE_BREAK, isLineBreak: true });
+    }
+  }
+  return pieces;
+}
+function whiteSpaceOf(element) {
+  const view = element.ownerDocument.defaultView;
+  return view === null ? "normal" : view.getComputedStyle(element).whiteSpace;
+}
+
+// src/bridge/inline-text-editing.ts
+var EDITABLE_AS_PLAIN_TEXT = "plaintext-only";
+function startInlineTextEditing(element, options) {
+  const reportInput = () => {
+    options.onInput(readElementText(element));
+  };
+  const endOnKey = (event) => {
+    const isEnd = event.key === "Enter" && options.isSingleLine;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      end("reverted");
+    } else if (isEnd) {
+      event.preventDefault();
+      end("kept");
+    }
+  };
+  const endOnBlur = () => {
+    end("kept");
+  };
+  const stop = () => {
+    element.removeEventListener("input", reportInput);
+    element.removeEventListener("keydown", endOnKey);
+    element.removeEventListener("blur", endOnBlur);
+    element.removeAttribute("contenteditable");
+  };
+  let hasEnded = false;
+  const end = (outcome) => {
+    if (hasEnded) return;
+    hasEnded = true;
+    stop();
+    options.onEnd(outcome);
+  };
+  element.setAttribute("contenteditable", EDITABLE_AS_PLAIN_TEXT);
+  element.addEventListener("input", reportInput);
+  element.addEventListener("keydown", endOnKey);
+  element.addEventListener("blur", endOnBlur);
+  element.focus();
+  return () => {
+    end("kept");
+  };
+}
+function placeCaretAt(element, point) {
+  const document2 = element.ownerDocument;
+  const selection = document2.getSelection();
+  const range = caretRangeAt(document2, point);
+  if (selection === null || range === void 0) {
+    return;
+  }
+  const isInside = element.contains(range.startContainer);
+  if (!isInside) {
+    range.selectNodeContents(element);
+    range.collapse(false);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function caretRangeAt(document2, point) {
+  const lookup = document2;
+  if (lookup.caretPositionFromPoint !== void 0) {
+    const position = lookup.caretPositionFromPoint(point.x, point.y);
+    if (position === null) return void 0;
+    const range = document2.createRange();
+    range.setStart(position.offsetNode, position.offset);
+    return range;
+  }
+  return lookup.caretRangeFromPoint?.(point.x, point.y) ?? void 0;
+}
+
+// src/bridge/page-typing.ts
+function createPageTyping(options) {
+  let stopEditing;
+  const stop = () => {
+    stopEditing?.();
+  };
+  const start = (request) => {
+    stop();
+    const { path } = request;
+    const element = findMarkedElement(options.document, path);
+    const canType = element !== void 0 && canEditTextInPlace(element, request.text);
+    if (!canType) {
+      options.send({ type: "typing-refused", path });
+      return;
+    }
+    options.send({ type: "typing-started", path });
+    stopEditing = startInlineTextEditing(element, {
+      isSingleLine: request.isSingleLine,
+      onInput: (text) => {
+        options.send({ type: "typed", path, text });
+        options.onInput();
+      },
+      onEnd: (outcome) => {
+        stopEditing = void 0;
+        options.send({ type: "typing-ended", path, outcome });
+      }
+    });
+    placeCaretAt(element, request.point);
+  };
+  return { isTyping: () => stopEditing !== void 0, start, stop };
+}
+
+// src/bridge/connect-to-editor.ts
+function connectToEditor(options) {
+  const editor = window.parent;
+  const isFramed = editor !== window;
+  if (!isFramed) return () => void 0;
+  const send = (message) => {
+    editor.postMessage(message, options.editorOrigin);
+  };
+  let connection;
+  const receive = (event) => {
+    const isFromEditor = event.source === editor && event.origin === options.editorOrigin;
+    const message = isFromEditor ? readEditorMessage(event.data) : void 0;
+    if (message === void 0) return;
+    if (message.type === "connect") {
+      connection?.stop();
+      connection = connectPage(document, message.schema, send);
+      return;
+    }
+    connection?.receive(message);
+  };
+  window.addEventListener("message", receive);
+  send({ type: "ready", protocol: PROTOCOL_VERSION });
+  return () => {
+    window.removeEventListener("message", receive);
+    connection?.stop();
+  };
+}
+function connectPage(document2, schema, send) {
+  const layout = createLayoutReports(document2, (measured) => {
+    send({ type: "layout", layout: measured });
+  });
+  const typing = createPageTyping({ document: document2, send, onInput: layout.schedule });
+  const renderer = createPageRenderer({
+    document: document2,
+    // Replacing the page under a text being typed would throw the typing away.
+    canReplacePage: () => !typing.isTyping(),
+    onRendered: () => {
+      layout.reportNow();
+      send({ type: "rendered" });
+    },
+    onFailed: (error) => {
+      console.error(error);
+      send({ type: "render-failed" });
+    }
+  });
+  const pressKey = (event) => {
+    const key = editorKeyOf(event);
+    const isTypingEscape = key === "escape" && typing.isTyping();
+    if (key === void 0 || isTypingEscape) return;
+    event.preventDefault();
+    typing.stop();
+    send({ type: "key", key });
+  };
+  const stopListening = listenToPage(document2, {
+    onHover: (path) => {
+      send({ type: "hover", path });
+    },
+    onClick: (pointer) => {
+      const target = pointer === void 0 ? void 0 : { path: pointer.path, point: pointer.point };
+      send({ type: "click", target });
+    },
+    onLinkHover: layout.hoverLink,
+    onLinkClick: (link) => {
+      send({ type: "link-click", href: link.href });
+    },
+    onKeyDown: pressKey,
+    onFileDragOver: (path) => {
+      const isTaken = imageFieldAt(schema, path) !== void 0;
+      send({ type: "file-drag", path: isTaken ? path : void 0 });
+      return isTaken;
+    },
+    onFileDragEnd: () => {
+      send({ type: "file-drag-end" });
+    },
+    onFileDrop: (path, file) => {
+      const isTaken = imageFieldAt(schema, path) !== void 0;
+      if (isTaken) send({ type: "file-drop", path, file });
+    },
+    onLayoutChange: layout.schedule
+  });
+  layout.reportNow();
+  const receive = (message) => {
+    switch (message.type) {
+      case "connect":
+        break;
+      case "render":
+        renderer.render(message.content);
+        break;
+      case "start-typing":
+        typing.start(message);
+        break;
+      case "stop-typing":
+        typing.stop();
+        break;
+      case "scroll-to":
+        findClosestMarkedElement(document2, message.path)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+        break;
+    }
+  };
+  return {
+    receive,
+    stop: () => {
+      typing.stop();
+      renderer.stop();
+      layout.stop();
+      stopListening();
+    }
+  };
+}
+function editorKeyOf(event) {
+  if (event.key === "Escape") return "escape";
+  return shortcutOf(event);
+}
+export {
+  connectPage,
+  connectToEditor
+};