camox 0.78.0 → 0.80.0

package/dist/core/lib/artifact.d.ts

@@ -1,5 +1,5 @@
 import "../defineDocument.js";
-import "./artifactData.js";
+import { ArtifactData } from "./artifactData.js";
 import * as React from "react";
 import "@camox/api-contract";
 //#region src/core/lib/artifact.d.ts
@@ -20,6 +20,16 @@ export type ArtifactFrameProps = InlineArtifactFrameProps | (ArtifactFrameAttrib
   src: string;
   srcDoc?: never;
 });
+/**
+ * What a public page holds in place of an artifact source: the URL the website serves its
+ * document at, named by its shell and source hashes, and its title. Frames load it by URL, so
+ * neither the page's HTML nor its hydration data carries the source, and the client renders the
+ * same frames as the server.
+ */
+export type ArtifactSourceReference = {
+  artifactUrl: string;
+  title: string;
+};
 /** What `block.Artifact` passes to its render prop, to spread onto an `<iframe>`. */
 export type ArtifactRenderProps = ArtifactFrameProps & {
   /** Connects the frame to the `camox` runtime inside it. */
@@ -31,5 +41,20 @@ export type ArtifactRenderProps = ArtifactFrameProps & {
   /** The id of the Repeatable Item holding the artifact field, when an item's. */
   "data-camox-item"?: string;
 };
+/** What an artifact's document gets from the website besides its source. */
+export type ArtifactDocumentOptions = {
+  /** The website's font links as HTML, from `artifactFontLinks`. */
+  fontLinks?: string;
+  /** The initial Artifact Data, which the runtime exposes as `camox.data`. */
+  data?: ArtifactData;
+};
+/**
+ * The frame props for an artifact, with its initial Artifact Data and the website's font links.
+ * This getter is the boundary that hides how the source reaches the frame, so blocks never
+ * depend on it: a source is inlined with `srcdoc`, while a reference to one loads by URL, its
+ * initial Artifact Data in the URL's fragment.
+ */
+export declare function artifactFrameProps(source: string, options?: ArtifactDocumentOptions): InlineArtifactFrameProps;
+export declare function artifactFrameProps(artifact: string | ArtifactSourceReference, options?: ArtifactDocumentOptions): ArtifactFrameProps;
 //#endregion
 export {};

package/dist/core/lib/artifactData.d.ts

@@ -1 +1,5 @@
-import { TSchema } from "@sinclair/typebox";
+import { TSchema } from "@sinclair/typebox";
+//#region src/core/lib/artifactData.d.ts
+/** The values of the sibling fields and settings an artifact receives as `camox.data`. */
+export type ArtifactData = Record<string, unknown>;
+//#endregion

package/dist/core/lib/artifactHost.d.ts

@@ -0,0 +1,43 @@
+import { ArtifactData } from "./artifactData.js";
+//#region src/core/lib/artifactHost.d.ts
+/** The studio context an artifact sees as `camox.studio`; `null` on the website. */
+export type ArtifactStudio = {
+  editing: boolean;
+  canvas: boolean;
+};
+/** What the page shares with an artifact through its runtime. */
+export type ArtifactHostState = {
+  studio: ArtifactStudio | null;
+  /** The artifact's Artifact Data; the frame's `srcDoc` holds its initial value. */
+  data?: ArtifactData;
+  /**
+   * Whether the artifact runs in capture mode, as in the look document (ADR 0032): its Timeline's
+   * real time never advances, and the browser `look` drives seeks it through the frame's
+   * `LOOK_ARTIFACT_CAPTURE` property. Read once, when the host connects.
+   */
+  capture?: boolean;
+};
+/** How a block's artifact field sizes its frame, and what the page does for the artifact. */
+export type ArtifactHostOptions = {
+  /** With `"content"`, the artifact reports its height through `onHeight`. */
+  size?: "fill" | "content";
+  /** Applies the height the artifact's content needs, in CSS pixels. */
+  onHeight?: (height: number) => void;
+  /** Navigates the page's client router to an internal path (with its query and hash). */
+  navigate?: (path: string) => void;
+};
+export type ArtifactHost = {
+  /** Shares new state with the artifact; unchanged state sends nothing. */
+  update(state: ArtifactHostState): void;
+  disconnect(): void;
+};
+/**
+ * Connects an artifact frame to the `camox` runtime inside it, and owns the frame's message
+ * channel (see `artifactRuntime.ts` for the protocol).
+ *
+ * The block's code may run in another realm than the frame's parent (the studio renders its
+ * preview that way), so this only goes through the frame element's own document: never the
+ * global `window`, and never `event.source`, whose identity differs across realms.
+ */
+export declare function connectArtifactHost(frame: HTMLIFrameElement, initialState: ArtifactHostState, options?: ArtifactHostOptions): ArtifactHost;
+//#endregion

package/dist/features/brand/BrandPart.js

@@ -0,0 +1,116 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/brand/BrandPart.tsx
+/**
+* One part of the Brand Section, laid out like the Settings Section's: its heading beside what it
+* holds. The heading column stays in view while the part scrolls, with `aside` under it for what
+* acts on the whole part.
+*/
+function BrandPart(t0) {
+	const $ = c(30);
+	let aside;
+	let children;
+	let description;
+	let headingRef;
+	let props;
+	let title;
+	if ($[0] !== t0) {
+		({title, description, aside, headingRef, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = aside;
+		$[2] = children;
+		$[3] = description;
+		$[4] = headingRef;
+		$[5] = props;
+		$[6] = title;
+	} else {
+		aside = $[1];
+		children = $[2];
+		description = $[3];
+		headingRef = $[4];
+		props = $[5];
+		title = $[6];
+	}
+	let t1;
+	if ($[7] !== title) {
+		let t2;
+		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /\W+/g;
+			$[9] = t2;
+		} else t2 = $[9];
+		t1 = title.toLowerCase().replaceAll(t2, "-");
+		$[7] = title;
+		$[8] = t1;
+	} else t1 = $[8];
+	const id = `camox-brand-${t1}`;
+	const t2 = headingRef ? -1 : void 0;
+	let t3;
+	if ($[10] !== headingRef || $[11] !== id || $[12] !== t2 || $[13] !== title) {
+		t3 = /* @__PURE__ */ jsx("h2", {
+			id,
+			ref: headingRef,
+			tabIndex: t2,
+			className: "font-semibold outline-none",
+			children: title
+		});
+		$[10] = headingRef;
+		$[11] = id;
+		$[12] = t2;
+		$[13] = title;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== description) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mt-1 text-sm",
+			children: description
+		});
+		$[15] = description;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", { children: [t3, t4] });
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== aside || $[21] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 md:sticky md:top-6 md:self-start",
+			children: [t5, aside]
+		});
+		$[20] = aside;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== children) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 md:col-span-2",
+			children
+		});
+		$[23] = children;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== id || $[26] !== props || $[27] !== t6 || $[28] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("section", {
+			"aria-labelledby": id,
+			className: "grid gap-6 md:grid-cols-3 md:gap-8",
+			...props,
+			children: [t6, t7]
+		});
+		$[25] = id;
+		$[26] = props;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
+	return t8;
+}
+
+//#endregion
+export { BrandPart };