@open-press/cli 0.7.1 → 1.0.0

package/template/core/src/openpress/app/WorkspaceGalleryPage.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
+import type { HtmlPageBlock, ReaderDocument, WorkspaceManifest, WorkspaceManifestPress } from "../document-model";
+
+interface Props {
+  manifest: WorkspaceManifest;
+  // Called when the reader navigates into a specific Press. The host
+  // is responsible for routing (history.pushState, hash, etc.); the
+  // gallery just emits the chosen slug.
+  onSelectPress: (press: WorkspaceManifestPress) => void;
+}
+
+// Reader landing page for multi-Press workspaces. Shows a Figma-style
+// uniform-grid card per Press; each card lazily loads that Press's
+// document.json and renders the first page as a thumbnail preview.
+// Single-Press workspaces skip the gallery entirely.
+export function WorkspaceGalleryPage({ manifest, onSelectPress }: Props) {
+  const heading = manifest.name ?? "Workspace";
+  const pressCount = String(manifest.presses.length).padStart(2, "0");
+
+  return (
+    <main className="openpress-workspace-gallery" aria-labelledby="workspace-gallery-heading">
+      <header className="openpress-workspace-gallery__header">
+        <div className="openpress-workspace-gallery__headline">
+          <p className="openpress-workspace-gallery__eyebrow">Workspace</p>
+          <h1 id="workspace-gallery-heading">{heading}</h1>
+        </div>
+        <p className="openpress-workspace-gallery__count">
+          <span>{pressCount}</span>
+          <small>{manifest.presses.length === 1 ? "document" : "documents"}</small>
+        </p>
+      </header>
+
+      <ul className="openpress-workspace-gallery__grid" role="list">
+        {manifest.presses.map((press) => (
+          <li key={press.slug || "root"} className="openpress-workspace-gallery__item">
+            <PressCard press={press} onSelect={() => onSelectPress(press)} />
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}
+
+// Card is a div+role=button (not <button>) so it can contain the
+// rendered page HTML — buttons may only hold phrasing content, and
+// page HTML is block-level.
+function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelect: () => void }) {
+  const handleKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect();
+    }
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="openpress-workspace-gallery__card"
+      onClick={onSelect}
+      onKeyDown={handleKey}
+      aria-label={`Open ${press.title}`}
+    >
+      <PressThumbnail press={press} />
+      <div className="openpress-workspace-gallery__body">
+        <div className="openpress-workspace-gallery__title">{press.title}</div>
+        <div className="openpress-workspace-gallery__meta">
+          {press.slug ? <span className="openpress-workspace-gallery__slug">{press.slug}</span> : null}
+          {press.page?.pageLabel ? (
+            <span className="openpress-workspace-gallery__geom">{press.page.pageLabel}</span>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PressThumbnail({ press }: { press: WorkspaceManifestPress }) {
+  const [state, setState] = useState<ThumbnailState>({ status: "loading" });
+
+  // Lazy-load each Press's document.json so the gallery doesn't block
+  // on a network waterfall when there are many Press. Errors degrade
+  // to the geometry-only placeholder used by the loading state.
+  useEffect(() => {
+    let cancelled = false;
+    fetchFirstPage(press.documentUrl).then((page) => {
+      if (cancelled) return;
+      setState(page ? { status: "ready", page } : { status: "error" });
+    }).catch(() => {
+      if (!cancelled) setState({ status: "error" });
+    });
+    return () => { cancelled = true; };
+  }, [press.documentUrl]);
+
+  // Outer card is uniform 4:3 (set in CSS). The page itself letterboxes
+  // inside via centered scale, so A4 portrait renders tall-and-narrow,
+  // social square renders centered, 16:9 slide stretches edge-to-edge.
+  return (
+    <div className="openpress-workspace-gallery__thumb" aria-hidden="true">
+      {state.status === "ready" ? (
+        <PageMiniature page={state.page} press={press} />
+      ) : (
+        <div className="openpress-workspace-gallery__thumb-placeholder" data-state={state.status}>
+          <div className="openpress-workspace-gallery__thumb-skel" style={skelAspectStyle(press)} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function skelAspectStyle(press: WorkspaceManifestPress): CSSProperties {
+  const w = parsePxLength(press.page?.pageWidth);
+  const h = parsePxLength(press.page?.pageHeight);
+  if (w && h) return { aspectRatio: `${w} / ${h}`, height: "75%" };
+  return { aspectRatio: "1 / 1.414", height: "75%" };
+}
+
+function PageMiniature({ page, press }: { page: HtmlPageBlock; press: WorkspaceManifestPress }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState<number | null>(null);
+  const pageWidthPx = parsePxLength(press.page?.pageWidth) ?? 1080;
+  const pageHeightPx = parsePxLength(press.page?.pageHeight) ?? pageWidthPx;
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (w > 0 && h > 0) {
+        setScale(Math.min(w / pageWidthPx, h / pageHeightPx));
+      }
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [pageWidthPx, pageHeightPx]);
+
+  const scaledWidth = scale ? pageWidthPx * scale : 0;
+  const scaledHeight = scale ? pageHeightPx * scale : 0;
+  const frameStyle: CSSProperties = {
+    width: `${scaledWidth}px`,
+    height: `${scaledHeight}px`,
+    position: "relative",
+    visibility: scale ? "visible" : "hidden",
+  };
+
+  // Match the wrapping used by PublicReaderPage so scoped CSS targeting
+  // `.openpress-html-page__html` selectors lights up identically. The
+  // outer frame owns centering; the page only scales from its top-left
+  // origin, which avoids mixed translate/scale centering drift.
+  const pageStyle: CSSProperties = {
+    "--openpress-page-width": `${pageWidthPx}px`,
+    "--openpress-page-height": `${pageHeightPx}px`,
+    width: `${pageWidthPx}px`,
+    height: `${pageHeightPx}px`,
+    transform: scale ? `scale(${scale})` : undefined,
+    transformOrigin: "top left",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  } as CSSProperties;
+  const pageClass = page.className
+    ? `openpress-html-page ${page.className}`
+    : "openpress-html-page";
+
+  return (
+    <div className="openpress-workspace-gallery__thumb-stage" ref={containerRef}>
+      <div className="openpress-workspace-gallery__thumb-frame" style={frameStyle}>
+        <div className={pageClass} style={pageStyle} data-openpress-thumb-page="true">
+          <div
+            className="openpress-html-page__html"
+            // Trusted HTML — same source as the reader's main render path.
+            dangerouslySetInnerHTML={{ __html: page.html }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type ThumbnailState =
+  | { status: "loading" }
+  | { status: "error" }
+  | { status: "ready"; page: HtmlPageBlock };
+
+async function fetchFirstPage(url: string): Promise<HtmlPageBlock | null> {
+  try {
+    const response = await fetch(url, { cache: "no-store" });
+    if (!response.ok) return null;
+    const doc = (await response.json()) as ReaderDocument;
+    const firstPage = doc.blocks.find((b): b is HtmlPageBlock => b.kind === "htmlPage");
+    return firstPage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+// Convert a CSS length string (px / mm / cm / in) into device pixels
+// at 96 dpi. A4 pages are stored as "210mm" / "297mm" so the gallery
+// and thumbnail scalers need this to compute their fit ratio — using
+// the bare string would always fall back to the default fallback.
+function parsePxLength(value: string | undefined): number | null {
+  if (!value) return null;
+  const match = value.trim().match(/^([\d.]+)\s*(px|mm|cm|in)$/i);
+  if (!match) return null;
+  const n = Number(match[1]);
+  if (!Number.isFinite(n) || n <= 0) return null;
+  const unit = match[2].toLowerCase();
+  switch (unit) {
+    case "px": return n;
+    case "mm": return n * (96 / 25.4);
+    case "cm": return n * (96 / 2.54);
+    case "in": return n * 96;
+    default: return null;
+  }
+}

package/template/core/src/openpress/app/index.ts

@@ -0,0 +1,2 @@
+export { OpenPressApp } from "./OpenPressApp";
+export { OpenPressRuntime } from "./OpenPressRuntime";

package/template/core/src/openpress/core/Frame.tsx

@@ -1,18 +1,15 @@
-import { useContext, type ReactNode } from "react";
+import { useContext } from "react";
+import { cn } from "./cn";
 import { FrameContext, type FrameContextValue } from "./FrameContext";
 import { PressContext } from "./Press";
 import type { FrameProps } from "./types";
+import { createFrameObjectEntityId, createPageObjectEntityId, createScopedObjectEntityId } from "../document-model/objectEntityModel";
 
 // Substring reserved for the overflow extension pipeline.
 const RESERVED_EXTENDED = ":extended:";
 
 export const FRAME_MARKER: unique symbol = Symbol.for("@open-press/core:Frame");
 
-function classNames(...values: Array<string | undefined>) {
-  const joined = values.filter(Boolean).join(" ");
-  return joined.length > 0 ? joined : undefined;
-}
-
 export function Frame({
   frameKey,
   role,
@@ -31,37 +28,51 @@ export function Frame({
     );
   }
 
+  const parentFrame = useContext(FrameContext);
   const press = useContext(PressContext);
   const allocation = press?.allocation ?? null;
   const frameAllocation = frameKey && allocation ? allocation[frameKey] : undefined;
+  const pageId = parentFrame?.pageId ?? createPageObjectEntityId(frameKey);
+  const objectId = parentFrame
+    ? createScopedObjectEntityId("frame", parentFrame.objectId, frameKey)
+    : createFrameObjectEntityId(frameKey);
 
   // Mutable per-render counter. SSR renders a Frame exactly once, so a plain
   // object is fine — no useRef needed.
   const areaCounts: Record<string, number> = {};
   const frameContextValue: FrameContextValue = {
     frameKey: frameKey ?? "",
-    consumeArea(chainId: string): ReactNode | null {
+    objectId,
+    pageId,
+    consumeArea(chainId: string) {
       const index = areaCounts[chainId] ?? 0;
       areaCounts[chainId] = index + 1;
-      if (!frameAllocation) return null;
+      if (!frameAllocation) return { indexInFrame: index, blocks: null };
       const chainSlots = frameAllocation[chainId];
-      if (!chainSlots) return null;
-      return chainSlots[index] ?? null;
+      if (!chainSlots) return { indexInFrame: index, blocks: null };
+      return { indexInFrame: index, blocks: chainSlots[index] ?? null };
     },
   };
 
   const pageKind = derivePageKind(role);
+  const isNestedFrame = Boolean(parentFrame);
 
   return (
     <FrameContext.Provider value={frameContextValue}>
       <section
         {...(rest as Record<string, unknown>)}
-        className={classNames("reader-page", className)}
-        data-openpress-frame-key={frameKey}
+        className={cn(isNestedFrame ? undefined : "reader-page", className)}
+        data-openpress-frame-key={isNestedFrame ? undefined : frameKey}
+        data-openpress-region-frame-key={isNestedFrame ? frameKey : undefined}
+        data-openpress-object-id={objectId}
+        data-openpress-object-kind="frame"
+        data-openpress-object-label={role ?? frameKey}
+        data-openpress-object-parent-id={parentFrame?.objectId ?? (isNestedFrame ? undefined : pageId)}
+        data-openpress-object-page-id={pageId}
         data-frame-role={role}
-        data-page-kind={pageKind}
-        data-frame-chrome={chrome ? "true" : "false"}
-        data-page-footer={chrome ? "true" : "false"}
+        data-page-kind={isNestedFrame ? undefined : pageKind}
+        data-frame-chrome={isNestedFrame ? undefined : chrome ? "true" : "false"}
+        data-page-footer={isNestedFrame ? undefined : chrome ? "true" : "false"}
       >
         {children}
       </section>

package/template/core/src/openpress/core/FrameContext.tsx

@@ -9,11 +9,18 @@ import { createContext, type ReactNode } from "react";
 // and so on. Empty Frames (no allocation) return null, which renders the
 // MdxArea as a measurement placeholder.
 
+export interface ConsumedMdxArea {
+  indexInFrame: number;
+  // Null when the frame has no allocation (measurement pass) or no blocks
+  // for this chain at the claimed index.
+  blocks: ReactNode | null;
+}
+
 export interface FrameContextValue {
   frameKey: string;
-  // Consume the next allocation slot for this chainId. Returns null if the
-  // frame has no allocation (measurement pass) or no blocks for this chain.
-  consumeArea(chainId: string): ReactNode | null;
+  objectId: string;
+  pageId: string;
+  consumeArea(chainId: string): ConsumedMdxArea;
 }
 
 export const FrameContext = createContext<FrameContextValue | null>(null);

package/template/core/src/openpress/core/MdxArea.tsx

@@ -1,11 +1,8 @@
 import { useContext, type ReactNode } from "react";
+import { cn } from "./cn";
 import { FrameContext } from "./FrameContext";
 import type { MdxAreaProps } from "./types";
-
-function classNames(...values: Array<string | undefined>) {
-  const joined = values.filter(Boolean).join(" ");
-  return joined.length > 0 ? joined : undefined;
-}
+import { createMdxAreaObjectEntityId } from "../document-model/objectEntityModel";
 
 export function MdxArea({
   chainId,
@@ -14,20 +11,22 @@ export function MdxArea({
   ...rest
 }: MdxAreaProps) {
   const frame = useContext(FrameContext);
-
-  let blocks: ReactNode | null = null;
-  if (frame) {
-    blocks = frame.consumeArea(chainId);
-  }
+  const consumed = frame?.consumeArea(chainId) ?? null;
+  const blocks: ReactNode | null = consumed?.blocks ?? null;
+  const objectId = frame && consumed
+    ? createMdxAreaObjectEntityId(frame.frameKey, chainId, consumed.indexInFrame)
+    : undefined;
 
   return (
     <div
       {...(rest as Record<string, unknown>)}
-      className={classNames("openpress-mdx-area", className)}
+      className={cn("openpress-mdx-area", className)}
       data-openpress-mdx-area="true"
       data-openpress-mdx-area-chain={chainId}
+      data-openpress-mdx-area-index={consumed?.indexInFrame}
+      data-openpress-object-id={objectId}
       data-openpress-mdx-area-overflow={overflow}
-      data-openpress-mdx-area-empty={blocks == null ? "true" : undefined}
+      data-openpress-mdx-area-empty={blocks == null ? "true" : "false"}
     >
       {blocks}
     </div>

package/template/core/src/openpress/core/Press.tsx

@@ -1,5 +1,5 @@
-import { createContext, Fragment, type ReactNode } from "react";
-import type { FrameAllocation, ResolvedSource, TocEntry } from "./types";
+import { createContext, Fragment } from "react";
+import type { FrameAllocation, PressProps, ResolvedSource, TocEntry } from "./types";
 
 // Marker the engine uses to distinguish a Press default export from any other
 // React component. Workspaces register a default export whose `type` is this
@@ -14,6 +14,18 @@ export interface AllocationHints {
   totalPagesPerChain: Record<string, number>;
 }
 
+// Metadata read from <Press> props by the engine pipeline. The 1.0 contract
+// declares these on the component; v0.x reads them from openpress.config.mjs
+// instead and leaves these as undefined. The engine merges both sources
+// (props override config) until v1.0 removes config support.
+export interface PressMetadata {
+  title?: string;
+  page?: PressProps["page"];
+  slug?: string;
+  theme?: string;
+  componentsDir?: string;
+}
+
 export interface PressContextValue {
   sources: Record<string, ResolvedSource>;
   // Allocation map keyed by frameKey -> chainId -> areaIndex -> blocks.
@@ -23,12 +35,21 @@ export interface PressContextValue {
   // the first measurement pass.
   hints: AllocationHints | null;
   toc: Record<string, TocEntry[]> | null;
+  // Metadata declared on <Press> props in v1.0. Engine providers may
+  // omit this on v0.x; consumers should treat undefined as "no metadata
+  // declared on Press — fall back to openpress.config.mjs values".
+  metadata?: PressMetadata;
 }
 
 export const PressContext = createContext<PressContextValue | null>(null);
 
-export function Press({ children }: { children: ReactNode }) {
-  return <Fragment>{children}</Fragment>;
+export function Press(props: PressProps) {
+  // Press is intentionally inert at render time — the engine reads its
+  // props and children through React.Children inspection during the
+  // export pipeline, then injects context above any nested helpers.
+  // For the v0.x shape (children-only usage), this still passes children
+  // through unchanged.
+  return <Fragment>{props.children}</Fragment>;
 }
 
 (Press as unknown as { openpressMarker: typeof PRESS_MARKER }).openpressMarker = PRESS_MARKER;

package/template/core/src/openpress/core/Workspace.tsx

@@ -0,0 +1,36 @@
+import { createContext, Fragment } from "react";
+import type { WorkspaceProps } from "./types";
+
+// Marker the engine uses to identify a Workspace default export, in the
+// same way PRESS_MARKER identifies Press. Multi-doc projects nest one
+// or more <Press> children inside <Workspace>; single-doc projects use
+// a Workspace with one Press child (uniform shape — no exceptions).
+export const WORKSPACE_MARKER: unique symbol = Symbol.for("@open-press/core:Workspace");
+
+export interface WorkspaceContextValue {
+  // Project-level label surfaced in the gallery header / tab bar / PDF
+  // metadata. Undefined if the Workspace did not declare a name.
+  name?: string;
+  // Workspace-level shared theme directory. Press children that don't
+  // set their own `theme` prop inherit from this.
+  theme?: string;
+  // Workspace-level shared media directory.
+  media?: string;
+  // Number of Press children registered in this Workspace. Set by the
+  // engine during expansion; useful to detect "gallery vs single-doc"
+  // routing without re-walking the tree.
+  pressCount: number;
+}
+
+export const WorkspaceContext = createContext<WorkspaceContextValue | null>(null);
+
+// Workspace is intentionally inert at render time. The engine inspects
+// its props (name / theme / media) and iterates Press children during
+// the export pipeline; rendering just passes children through so the
+// Press → Frame → MdxArea tree underneath behaves identically to v0.x
+// when there's only one Press child.
+export function Workspace(props: WorkspaceProps) {
+  return <Fragment>{props.children}</Fragment>;
+}
+
+(Workspace as unknown as { openpressMarker: typeof WORKSPACE_MARKER }).openpressMarker = WORKSPACE_MARKER;

package/template/core/src/openpress/core/cn.ts

@@ -0,0 +1,4 @@
+export function cn(...values: Array<string | false | null | undefined>) {
+  const joined = values.filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : undefined;
+}

package/template/core/src/openpress/core/index.tsx

@@ -6,11 +6,12 @@
 // the engine is not allowed to know about higher-level conventions.
 
 export { Press, PressContext, PRESS_MARKER } from "./Press";
+export { Workspace, WorkspaceContext, WORKSPACE_MARKER } from "./Workspace";
 export { Frame, FRAME_MARKER } from "./Frame";
 export { FrameContext } from "./FrameContext";
 export { MdxArea } from "./MdxArea";
 export { useSource } from "./useSource";
-export { BaseFigure, BaseCallout } from "./primitives";
+export { ObjectEntity, Text, BaseFigure, BaseCallout, MediaFigure, ImageFigure } from "./primitives";
 
 export type {
   FrameProps,
@@ -18,10 +19,16 @@ export type {
   MdxAreaProps,
   MdxAreaOverflow,
   PressProps,
+  PageGeometry,
+  PressSource,
+  WorkspaceProps,
   BaseFigureProps,
+  MediaFigureProps,
   BaseCalloutKind,
   BaseCalloutProps,
-  Manifest,
+  ObjectEntityElement,
+  ObjectEntityProps,
+  TextProps,
   // Source-side types are re-exported here for convenience so authors can
   // import `ResolvedSource` from the same place they import primitives.
   ResolvedSource,
@@ -35,5 +42,6 @@ export type {
   FrameAllocation,
 } from "./types";
 
-export type { PressContextValue, AllocationHints } from "./Press";
+export type { PressContextValue, AllocationHints, PressMetadata } from "./Press";
+export type { WorkspaceContextValue } from "./Workspace";
 export type { FrameContextValue } from "./FrameContext";

package/template/core/src/openpress/core/primitives.tsx

@@ -1,13 +1,56 @@
-import type { BaseCalloutProps, BaseFigureProps } from "./types";
+import { cn } from "./cn";
+import { useContext } from "react";
+import { FrameContext } from "./FrameContext";
+import type { BaseCalloutProps, BaseFigureProps, MediaFigureProps, ObjectEntityProps, TextProps } from "./types";
+import { createScopedObjectEntityId } from "../document-model/objectEntityModel";
 
-function classNames(...values: Array<string | undefined>) {
-  const joined = values.filter(Boolean).join(" ");
-  return joined.length > 0 ? joined : undefined;
+export function ObjectEntity({
+  as: Element = "span",
+  objectId,
+  kind,
+  label,
+  parentId,
+  pageId,
+  blockId,
+  frameKey,
+  chainId,
+  source,
+  metadata,
+  children,
+  ...entityProps
+}: ObjectEntityProps) {
+  const frame = useContext(FrameContext);
+  const resolvedParentId = parentId ?? frame?.objectId;
+  const resolvedPageId = pageId ?? frame?.pageId;
+  const resolvedFrameKey = frameKey ?? frame?.frameKey;
+  const resolvedObjectId = createScopedObjectEntityId(kind, resolvedParentId, objectId);
+
+  return (
+    <Element
+      {...entityProps}
+      data-openpress-object-id={resolvedObjectId}
+      data-openpress-object-kind={kind}
+      data-openpress-object-label={label}
+      data-openpress-object-parent-id={resolvedParentId}
+      data-openpress-object-page-id={resolvedPageId}
+      data-openpress-block-id={blockId}
+      data-openpress-object-frame-key={resolvedFrameKey}
+      data-openpress-object-chain-id={chainId}
+      data-openpress-object-source={source ? JSON.stringify(source) : undefined}
+      data-openpress-object-metadata={metadata ? JSON.stringify(metadata) : undefined}
+    >
+      {children}
+    </Element>
+  );
+}
+
+export function Text(props: TextProps) {
+  return <ObjectEntity {...props} kind="text" />;
 }
 
 export function BaseFigure({ caption, className, children, ...figureProps }: BaseFigureProps) {
   return (
-    <figure {...figureProps} className={classNames("openpress-figure", className)}>
+    <figure {...figureProps} className={cn("openpress-figure", className)}>
       <div data-figure-body>{children}</div>
       {caption === undefined ? null : <figcaption>{caption}</figcaption>}
     </figure>
@@ -16,8 +59,33 @@ export function BaseFigure({ caption, className, children, ...figureProps }: Bas
 
 export function BaseCallout({ kind = "info", className, children, ...calloutProps }: BaseCalloutProps) {
   return (
-    <aside {...calloutProps} className={classNames("openpress-callout", className)} data-callout-kind={kind}>
+    <aside {...calloutProps} className={cn("openpress-callout", className)} data-callout-kind={kind}>
       {children}
     </aside>
   );
 }
+
+export function MediaFigure({
+  src,
+  alt,
+  caption,
+  className,
+  imgClassName,
+  loading = "eager",
+  ...figureProps
+}: MediaFigureProps) {
+  return (
+    <BaseFigure {...figureProps} className={cn("openpress-media-figure", className)} caption={caption}>
+      <img src={resolveMediaSrc(src)} alt={alt} loading={loading} className={imgClassName} />
+    </BaseFigure>
+  );
+}
+
+export const ImageFigure = MediaFigure;
+
+function resolveMediaSrc(src: string) {
+  const trimmed = String(src ?? "").trim();
+  if (!trimmed) return "";
+  if (/^(?:[a-z][a-z0-9+.-]*:|\/)/i.test(trimmed)) return trimmed;
+  return `/openpress/media/${trimmed.replace(/^\.?\/*/, "")}`;
+}