@stealthscale/component-media 0.2.1 → 0.2.2

package/dist/pages/carousel/carousel.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"AutoplayIndicatorProps": {"conditions": 0, "foreign": 0}, "AutoplayTriggerProps": {"conditions": 284, "foreign": 1051}, "ControlProps": {"conditions": 284, "foreign": 1041}, "IndicatorGroupProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1051}, "IndicatorsProps": {"conditions": 0, "foreign": 0}, "ItemGroupProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1041}, "NextTriggerProps": {"conditions": 284, "foreign": 1051}, "PrevTriggerProps": {"conditions": 284, "foreign": 1051}, "ProgressTextProps": {"conditions": 284, "foreign": 1040}, "RootProps": {"conditions": 284, "foreign": 1037}};
+export const parts = {"AutoplayIndicatorProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "pause", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph shown while the carousel rotates, the action a press takes."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "play", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph shown while the carousel does not rotate."}], "AutoplayTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "startLabel", "refers": [], "required": false, "says": "Name of the control while the carousel does not rotate, \"Start slide rotation\" unless the caller passes another."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "stopLabel", "refers": [], "required": false, "says": "Name of the control while the carousel rotates, \"Stop slide rotation\" unless the caller passes another."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ControlProps": [], "IndicatorGroupProps": [], "IndicatorProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Index of the page the dot moves to, from zero."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the dot, \"Go to slide N\" unless the caller passes another."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "readOnly", "refers": [], "required": false, "says": "Whether the dot only shows its page and a press does nothing."}], "IndicatorsProps": [{"accepts": "((page: number) => string)", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Returns the accessible name of a dot from its page, counted from one. \"Go to slide N\" unless the caller passes another function."}], "ItemGroupProps": [], "ItemProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Position of the slide among the slides, from zero."}, {"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "option", "name": "snapAlign", "refers": [], "required": false, "says": "Edge of the slide the scroller snaps to, `start` unless the caller passes another."}], "NextTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Next slide\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "PrevTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Previous slide\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ProgressTextProps": [{"accepts": "((details: ProgressTextDetails) => string)", "fallback": "", "kind": "option", "name": "text", "refers": ["carousel.ProgressTextDetails"], "required": false, "says": "Returns the text from the current page and the number of pages, both counted from one."}], "RootProps": [{"accepts": "boolean", "fallback": "false", "kind": "option", "name": "allowMouseDrag", "refers": [], "required": false, "says": "Whether to allow scrolling via dragging with mouse"}, {"accepts": "boolean | { delay: number; }", "fallback": "false", "kind": "option", "name": "autoplay", "refers": [], "required": false, "says": "Whether to scroll automatically. The default delay is 4000ms."}, {"accepts": "boolean", "fallback": "false", "kind": "option", "name": "autoSize", "refers": [], "required": false, "says": "Whether to enable variable width slides."}, {"accepts": "\"outside\" | \"overlay\"", "fallback": "", "kind": "variant", "name": "controls", "refers": [], "required": false, "says": "Where the controls go: beside the slides in the root's flow, or over the slides."}, {"accepts": "number", "fallback": "0", "kind": "option", "name": "defaultPage", "refers": [], "required": false, "says": "The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["carousel.ElementIds"], "required": false, "says": "The ids of the elements in the carousel. Useful for composition."}, {"accepts": "number | number[]", "fallback": "0.6", "kind": "option", "name": "inViewThreshold", "refers": [], "required": false, "says": "The threshold for determining if an item is in view."}, {"accepts": "boolean", "fallback": "false", "kind": "option", "name": "loop", "refers": [], "required": false, "says": "Whether the carousel should loop around."}, {"accepts": "((details: AutoplayStatusDetails) => void)", "fallback": "", "kind": "option", "name": "onAutoplayStatusChange", "refers": ["carousel.AutoplayStatusDetails"], "required": false, "says": "Function called when the autoplay status changes."}, {"accepts": "((details: DragStatusDetails) => void)", "fallback": "", "kind": "option", "name": "onDragStatusChange", "refers": ["carousel.DragStatusDetails"], "required": false, "says": "Function called when the drag status changes."}, {"accepts": "((details: PageChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onPageChange", "refers": ["carousel.PageChangeDetails"], "required": false, "says": "Function called when the page changes."}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "\"horizontal\"", "kind": "option", "name": "orientation", "refers": [], "required": false, "says": "The orientation of the element."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "padding", "refers": [], "required": false, "says": "Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "page", "refers": [], "required": false, "says": "The controlled page of the carousel."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of the dots."}, {"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius token of the slides and of the scroller's focus ring."}, {"accepts": "Ratio", "fallback": "", "kind": "variant", "name": "ratio", "refers": ["kit.Ratio"], "required": false, "says": "Aspect ratio token of the scroller, whose height a vertical carousel needs. A horizontal carousel without it is as tall as its slides."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "slideCount", "refers": [], "required": true, "says": "The total number of slides. Useful for SSR to render the initial ating the snap points."}, {"accepts": "number | \"auto\"", "fallback": "\"auto\"", "kind": "option", "name": "slidesPerMove", "refers": [], "required": false, "says": "The number of slides to scroll at a time."}, {"accepts": "number", "fallback": "1", "kind": "option", "name": "slidesPerPage", "refers": [], "required": false, "says": "The number of slides to show at a time."}, {"accepts": "\"mandatory\" | \"proximity\"", "fallback": "\"mandatory\"", "kind": "option", "name": "snapType", "refers": [], "required": false, "says": "The snap type of the item."}, {"accepts": "string", "fallback": "\"0px\"", "kind": "option", "name": "spacing", "refers": [], "required": false, "says": "The amount of space between items."}]};
+export const shapes = {"react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "carousel.ProgressTextDetails": [{"accepts": "number", "name": "page", "says": ""}, {"accepts": "number", "name": "totalPages", "says": ""}], "carousel.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "((index: number) => string)", "name": "item", "says": ""}, {"accepts": "string", "name": "itemGroup", "says": ""}, {"accepts": "string", "name": "nextTrigger", "says": ""}, {"accepts": "string", "name": "prevTrigger", "says": ""}, {"accepts": "string", "name": "indicatorGroup", "says": ""}, {"accepts": "((index: number) => string)", "name": "indicator", "says": ""}], "carousel.PageChangeDetails": [{"accepts": "number", "name": "page", "says": ""}, {"accepts": "number", "name": "pageSnapPoint", "says": ""}], "carousel.DragStatusDetails": [{"accepts": "\"dragging\" | \"dragging.end\" | \"dragging.start\"", "name": "type", "says": ""}, {"accepts": "number", "name": "page", "says": ""}, {"accepts": "boolean", "name": "isDragging", "says": ""}], "carousel.AutoplayStatusDetails": [{"accepts": "\"autoplay\" | \"autoplay.start\" | \"autoplay.stop\"", "name": "type", "says": ""}, {"accepts": "number", "name": "page", "says": ""}, {"accepts": "boolean", "name": "isPlaying", "says": ""}], "kit.Ratio": [{"accepts": "", "name": "\"golden\"", "says": ""}, {"accepts": "", "name": "\"landscape\"", "says": ""}, {"accepts": "", "name": "\"portrait\"", "says": ""}, {"accepts": "", "name": "\"square\"", "says": ""}, {"accepts": "", "name": "\"ultrawide\"", "says": ""}, {"accepts": "", "name": "\"video\"", "says": ""}, {"accepts": "", "name": "\"wide\"", "says": ""}]};

package/dist/pages/iframe/iframe.js

@@ -0,0 +1,206 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { r as recipe } from "../../recipes-CBo6SSP8.js";
+import { f as Iframe } from "../../shared-DH0DrBx7.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/iframe/examples/email.example.tsx
+var email_example_exports = /* @__PURE__ */ __exportAll({
+	Email: () => Email,
+	source: () => source$1
+});
+const BODY$1 = "margin:0;padding:24px;font:15px/1.5 system-ui,sans-serif;color:#1f2328;background:#fff";
+function Email(props) {
+	const $ = c(20);
+	const { i18n, t } = useWords("iframe");
+	const t0 = `<!doctype html><html lang="${i18n.language}"><body style="${BODY$1}">`;
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("email.from");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = `<p style="margin:0 0 16px;font-weight:600">${t1}</p>`;
+	let t3;
+	if ($[2] !== t) {
+		t3 = t("email.heading");
+		$[2] = t;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = `<h1 style="margin:0 0 8px;font-size:20px">${t3}</h1>`;
+	let t5;
+	if ($[4] !== t) {
+		t5 = t("email.body");
+		$[4] = t;
+		$[5] = t5;
+	} else t5 = $[5];
+	const t6 = `<p style="margin:0 0 16px">${t5}</p>`;
+	let t7;
+	if ($[6] !== t) {
+		t7 = t("email.amount");
+		$[6] = t;
+		$[7] = t7;
+	} else t7 = $[7];
+	const t8 = `<p style="margin:0;font-size:24px;font-weight:600">${t7}</p>`;
+	let t9;
+	if ($[8] !== t0 || $[9] !== t2 || $[10] !== t4 || $[11] !== t6 || $[12] !== t8) {
+		t9 = [
+			t0,
+			t2,
+			t4,
+			t6,
+			t8,
+			"</body></html>"
+		];
+		$[8] = t0;
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t6;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	const html = t9.join("");
+	let t10;
+	if ($[14] !== t) {
+		t10 = t("email.title");
+		$[14] = t;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[16] !== html || $[17] !== props || $[18] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Iframe, {
+			srcDoc: html,
+			title: t10,
+			...props
+		});
+		$[16] = html;
+		$[17] = props;
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	return t11;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Iframe, IframeProps } from \"@stealthscale/component-media\";\n\nconst BODY =\n  \"margin:0;padding:24px;font:15px/1.5 system-ui,sans-serif;color:#1f2328;background:#fff\";\n\nexport function Email(props: Omit<IframeProps, \"title\">): ReactElement {\n  const { i18n, t } = useWords(\"iframe\");\n  const html = [\n    `<!doctype html><html lang=\"${i18n.language}\"><body style=\"${BODY}\">`,\n    `<p style=\"margin:0 0 16px;font-weight:600\">${t(\"email.from\")}</p>`,\n    `<h1 style=\"margin:0 0 8px;font-size:20px\">${t(\"email.heading\")}</h1>`,\n    `<p style=\"margin:0 0 16px\">${t(\"email.body\")}</p>`,\n    `<p style=\"margin:0;font-size:24px;font-weight:600\">${t(\"email.amount\")}</p>`,\n    \"</body></html>\",\n  ].join(\"\");\n\n  return <Iframe srcDoc={html} title={t(\"email.title\")} {...props} />;\n}\n";
+//#endregion
+//#region src/iframe/examples/widget.example.tsx
+var widget_example_exports = /* @__PURE__ */ __exportAll({
+	Widget: () => Widget,
+	source: () => source
+});
+const BODY = "margin:0;padding:16px;font:15px/1.5 system-ui,sans-serif;color:#1f2328;background:#fff";
+const SCRIPT = "const input=document.querySelector('input');const output=document.querySelector('output');const show=()=>{output.textContent=(Number(input.value)*0.92).toFixed(2)};input.addEventListener('input',show);show();";
+function Widget() {
+	const $ = c(13);
+	const { i18n, t } = useWords("iframe");
+	const t0 = `<!doctype html><html lang="${i18n.language}"><body style="${BODY}">`;
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("widget.amount");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = `<label style="display:block;margin:0 0 8px">${t1} `;
+	let t3;
+	if ($[2] !== t) {
+		t3 = t("widget.converted");
+		$[2] = t;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = `<p style="margin:0">${t3} <output>0</output> EUR</p>`;
+	let t5;
+	if ($[4] !== t0 || $[5] !== t2 || $[6] !== t4) {
+		t5 = [
+			t0,
+			t2,
+			"<input inputmode=\"decimal\" style=\"font:inherit;width:8em\" value=\"250\"></label>",
+			t4,
+			`<script>${SCRIPT}<\/script>`,
+			"</body></html>"
+		];
+		$[4] = t0;
+		$[5] = t2;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	const html = t5.join("");
+	let t6;
+	if ($[8] !== t) {
+		t6 = t("widget.title");
+		$[8] = t;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== html || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Iframe, {
+			ratio: "wide",
+			sandbox: "allow-scripts",
+			srcDoc: html,
+			title: t6
+		});
+		$[10] = html;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	return t7;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Iframe } from \"@stealthscale/component-media\";\n\nconst BODY =\n  \"margin:0;padding:16px;font:15px/1.5 system-ui,sans-serif;color:#1f2328;background:#fff\";\n\nconst SCRIPT =\n  \"const input=document.querySelector('input');const output=document.querySelector('output');\" +\n  \"const show=()=>{output.textContent=(Number(input.value)*0.92).toFixed(2)};\" +\n  \"input.addEventListener('input',show);show();\";\n\nexport function Widget(): ReactElement {\n  const { i18n, t } = useWords(\"iframe\");\n  const html = [\n    `<!doctype html><html lang=\"${i18n.language}\"><body style=\"${BODY}\">`,\n    `<label style=\"display:block;margin:0 0 8px\">${t(\"widget.amount\")} `,\n    '<input inputmode=\"decimal\" style=\"font:inherit;width:8em\" value=\"250\"></label>',\n    `<p style=\"margin:0\">${t(\"widget.converted\")} <output>0</output> EUR</p>`,\n    `<script>${SCRIPT}<\/script>`,\n    \"</body></html>\",\n  ].join(\"\");\n\n  return <Iframe ratio=\"wide\" sandbox=\"allow-scripts\" srcDoc={html} title={t(\"widget.title\")} />;\n}\n";
+//#endregion
+//#region src/iframe/iframe.specimen.tsx
+/**
+* Catalogue page for the sandboxed frame.
+*
+* @remarks
+*   `scenesOf` generates the ratio and corner scenes from the email preview, each frame in an `sm`
+*   room. The corner scene holds the square ratio, which fits the whole email at every width.
+*   The hand-written scenes show the preview with the sandbox that grants nothing, and a
+*   converter that needs scripts with the one capability it needs. Every frame renders its document
+*   from `srcDoc`, so no scene loads from the network. The words are keys under `iframe` in
+*   `locales/en/specimen/iframe.json`.
+*/
+/**
+* Hand-written scene for an email preview in a frame that grants nothing.
+*/
+const preview = {
+	about: "iframe.preview.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Email, { ratio: "portrait" })
+	}),
+	example: email_example_exports,
+	props: { ratio: "portrait" },
+	title: "iframe.preview.title"
+};
+/**
+* Hand-written scene for a framed converter that needs scripts.
+*/
+const scripted = {
+	about: "iframe.scripted.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Widget, {})
+	}),
+	example: widget_example_exports,
+	title: "iframe.scripted.title"
+};
+var iframe_specimen_default = specimen({
+	about: "iframe.about",
+	id: "components/media/iframe",
+	imports: "import { Iframe } from \"@stealthscale/component-media\";",
+	scenes: [
+		preview,
+		scripted,
+		...scenesOf(recipe, {
+			axes: { radius: { with: { ratio: "square" } } },
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "sm",
+				children: /* @__PURE__ */ jsx(Email, { ...props })
+			}),
+			example: email_example_exports,
+			namespace: "iframe",
+			order: ["ratio", "radius"]
+		})
+	],
+	title: "iframe.title"
+});
+//#endregion
+export { iframe_specimen_default as default, preview, scripted };

package/dist/pages/iframe/iframe.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"IframeProps": {"conditions": 284, "foreign": 1054}};
+export const parts = {"IframeProps": [{"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius token. The axis leaves out `full`, because a framed document's content reaches the frame's corners and a fully round corner clips it."}, {"accepts": "Ratio", "fallback": "", "kind": "variant", "name": "ratio", "refers": ["kit.Ratio"], "required": false, "says": "Aspect ratio token the frame keeps before and after its document loads."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "title", "refers": [], "required": true, "says": "Accessible name of the frame: what it shows, such as \"Preview of the March invoice email\", for a reader who cannot see it."}]};
+export const shapes = {"kit.Ratio": [{"accepts": "", "name": "\"golden\"", "says": ""}, {"accepts": "", "name": "\"landscape\"", "says": ""}, {"accepts": "", "name": "\"portrait\"", "says": ""}, {"accepts": "", "name": "\"square\"", "says": ""}, {"accepts": "", "name": "\"ultrawide\"", "says": ""}, {"accepts": "", "name": "\"video\"", "says": ""}, {"accepts": "", "name": "\"wide\"", "says": ""}]};