@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/surfaces/render_output.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render_output.d.ts","sourceRoot":"","sources":["../../src/surfaces/render_output.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,WAAW,EAEX,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG/D,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,EAAE,CAAA;KAAE,CAAC;IAC/C,QAAQ,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACzE;AAsBD,+CAA+C;AAC/C,MAAM,WAAW,oBAAoB;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;CAC9C;AAmGD,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,GAC9B,SAAS,aAAa,EACtB,SAAS,aAAa,EACtB,aAAa,WAAW,EACxB,YAAY,gBAAgB,EAC5B,UAAS,oBAAyB,KACjC,aAwBF,CAAC"}

package/dist/surfaces/render_output.js

@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { warningsForSurface } from '@elastic/isomer-sdk';
+import { unmodeledSlackNotes } from '../model/slack_limits.js';
+const VALIDATION_SURFACE = {
+    react: 'react',
+    html: 'react',
+    snapshot: 'snapshot',
+    markdown: 'markdown',
+    text: 'text',
+    slack: 'slack',
+};
+const COLLECT = { onValidationError: 'collect' };
+const describeError = (error) => error instanceof Error ? error.message : String(error);
+const render = (runtime, surface, composition, { heading, enhancements }) => {
+    const { surfaces } = runtime;
+    const lead = heading === false ? { heading } : {};
+    const collect = { ...COLLECT, ...lead };
+    switch (surface) {
+        case 'react':
+            return {
+                source: surfaces.html.render(composition, {
+                    css: 'separate',
+                    minify: false,
+                    scripts: 'host',
+                    ...(enhancements ? { enhancements } : {}),
+                    ...lead,
+                }).html,
+                language: 'html',
+            };
+        case 'html': {
+            const result = surfaces.html.render(composition, {
+                minify: false,
+                ...lead,
+                ...(enhancements ? { enhancements, scripts: 'host' } : {}),
+            });
+            return {
+                source: result.html,
+                ...(enhancements ? { enhancementScript: result.js } : {}),
+                language: 'html',
+            };
+        }
+        case 'markdown':
+            return {
+                source: surfaces.markdown.render(composition, collect),
+                language: 'markdown',
+            };
+        case 'text':
+            return {
+                source: surfaces.text.render(composition, collect),
+                language: 'text',
+            };
+        case 'slack': {
+            const { text, blocks } = surfaces.slack.render(composition, collect);
+            return {
+                source: JSON.stringify({ text, blocks }, null, 2),
+                language: 'json',
+                slack: { text, blocks },
+                renderWarnings: unmodeledSlackNotes(blocks).map((message) => ({
+                    message,
+                })),
+            };
+        }
+        case 'snapshot': {
+            if (!surfaces.snapshot) {
+                return {
+                    source: '',
+                    language: 'html',
+                    error: 'This runtime has no frames.',
+                };
+            }
+            const { html, css, width, height, warnings } = surfaces.snapshot.render(composition, COLLECT);
+            return {
+                source: html,
+                language: 'html',
+                snapshot: { css, html, width, height },
+                renderWarnings: warnings,
+            };
+        }
+    }
+};
+/** Advisory findings for one surface, from validation and from the render itself, without duplicates. */
+const surfaceWarnings = (validation, surface, renderWarnings = []) => {
+    const seen = new Set();
+    return [
+        ...warningsForSurface(validation, surface),
+        ...renderWarnings.map((warning) => ({ ...warning, surface })),
+    ].filter(({ path = '', message }) => {
+        const key = `${path}\u0000${message}`;
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+};
+/** Renders `composition` on `surface`, collecting findings rather than throwing. */
+export const renderSurfaceOutput = (runtime, surface, composition, validation, options = {}) => {
+    try {
+        const { renderWarnings, ...output } = render(runtime, surface, composition, options);
+        return {
+            ...output,
+            warnings: surfaceWarnings(validation, VALIDATION_SURFACE[surface], renderWarnings),
+        };
+    }
+    catch (error) {
+        return {
+            source: '',
+            language: 'text',
+            warnings: surfaceWarnings(validation, VALIDATION_SURFACE[surface]),
+            error: describeError(error),
+        };
+    }
+};
+//# sourceMappingURL=render_output.js.map

package/dist/surfaces/render_output.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render_output.js","sourceRoot":"","sources":["../../src/surfaces/render_output.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type {\n  Composition,\n  SurfaceName,\n  ValidationResult,\n  ValidationWarning,\n} from '@elastic/isomer-sdk';\nimport { warningsForSurface } from '@elastic/isomer-sdk';\nimport type { SlackBlock } from '@elastic/isomer-sdk/slack';\n\nimport type { StudioRuntime } from '../config';\nimport type { StudioSurface } from '../model/describe_runtime';\nimport { unmodeledSlackNotes } from '../model/slack_limits';\n\nexport interface SurfaceOutput {\n  /** What the surface produced, as text. */\n  source: string;\n  language: 'html' | 'markdown' | 'text' | 'json';\n  warnings: ValidationWarning[];\n  error?: string;\n  enhancementScript?: string;\n  slack?: { text: string; blocks: SlackBlock[] };\n  snapshot?: { css: string; html: string; width: number; height: number };\n}\n\ntype RenderWarning = Omit<ValidationWarning, 'surface'>;\n\ntype RenderedOutput = Omit<SurfaceOutput, 'warnings'> & {\n  renderWarnings?: readonly RenderWarning[];\n};\n\nconst VALIDATION_SURFACE: Readonly<Record<StudioSurface, SurfaceName>> = {\n  react: 'react',\n  html: 'react',\n  snapshot: 'snapshot',\n  markdown: 'markdown',\n  text: 'text',\n  slack: 'slack',\n};\n\nconst COLLECT = { onValidationError: 'collect' } as const;\n\nconst describeError = (error: unknown): string =>\n  error instanceof Error ? error.message : String(error);\n\n/** Options for {@link renderSurfaceOutput}. */\nexport interface SurfaceOutputOptions {\n  /** `false` leaves out the composition's leading title. Defaults to `true`. */\n  heading?: boolean | undefined;\n  enhancements?: readonly string[] | undefined;\n}\n\nconst render = (\n  runtime: StudioRuntime,\n  surface: StudioSurface,\n  composition: Composition,\n  { heading, enhancements }: SurfaceOutputOptions\n): RenderedOutput => {\n  const { surfaces } = runtime;\n  const lead = heading === false ? { heading } : {};\n  const collect = { ...COLLECT, ...lead };\n  switch (surface) {\n    case 'react':\n      return {\n        source: surfaces.html.render(composition, {\n          css: 'separate',\n          minify: false,\n          scripts: 'host',\n          ...(enhancements ? { enhancements } : {}),\n          ...lead,\n        }).html,\n        language: 'html',\n      };\n    case 'html': {\n      const result = surfaces.html.render(composition, {\n        minify: false,\n        ...lead,\n        ...(enhancements ? { enhancements, scripts: 'host' as const } : {}),\n      });\n      return {\n        source: result.html,\n        ...(enhancements ? { enhancementScript: result.js } : {}),\n        language: 'html',\n      };\n    }\n    case 'markdown':\n      return {\n        source: surfaces.markdown.render(composition, collect),\n        language: 'markdown',\n      };\n    case 'text':\n      return {\n        source: surfaces.text.render(composition, collect),\n        language: 'text',\n      };\n    case 'slack': {\n      const { text, blocks } = surfaces.slack.render(composition, collect);\n      return {\n        source: JSON.stringify({ text, blocks }, null, 2),\n        language: 'json',\n        slack: { text, blocks },\n        renderWarnings: unmodeledSlackNotes(blocks).map((message) => ({\n          message,\n        })),\n      };\n    }\n    case 'snapshot': {\n      if (!surfaces.snapshot) {\n        return {\n          source: '',\n          language: 'html',\n          error: 'This runtime has no frames.',\n        };\n      }\n      const { html, css, width, height, warnings } = surfaces.snapshot.render(\n        composition,\n        COLLECT\n      );\n      return {\n        source: html,\n        language: 'html',\n        snapshot: { css, html, width, height },\n        renderWarnings: warnings,\n      };\n    }\n  }\n};\n\n/** Advisory findings for one surface, from validation and from the render itself, without duplicates. */\nconst surfaceWarnings = (\n  validation: ValidationResult,\n  surface: SurfaceName,\n  renderWarnings: readonly RenderWarning[] = []\n): ValidationWarning[] => {\n  const seen = new Set<string>();\n\n  return [\n    ...warningsForSurface(validation, surface),\n    ...renderWarnings.map((warning) => ({ ...warning, surface })),\n  ].filter(({ path = '', message }) => {\n    const key = `${path}\\u0000${message}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n};\n\n/** Renders `composition` on `surface`, collecting findings rather than throwing. */\nexport const renderSurfaceOutput = (\n  runtime: StudioRuntime,\n  surface: StudioSurface,\n  composition: Composition,\n  validation: ValidationResult,\n  options: SurfaceOutputOptions = {}\n): SurfaceOutput => {\n  try {\n    const { renderWarnings, ...output } = render(\n      runtime,\n      surface,\n      composition,\n      options\n    );\n    return {\n      ...output,\n      warnings: surfaceWarnings(\n        validation,\n        VALIDATION_SURFACE[surface],\n        renderWarnings\n      ),\n    };\n  } catch (error) {\n    return {\n      source: '',\n      language: 'text',\n      warnings: surfaceWarnings(validation, VALIDATION_SURFACE[surface]),\n      error: describeError(error),\n    };\n  }\n};\n"]}

package/dist/surfaces/scaled_preview.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/** `fit` scales content down to its container, never up; a number is a fixed scale. */
+export type PreviewZoom = 'fit' | number;
+export interface ScaledPreviewProps {
+    zoom?: PreviewZoom | undefined;
+    /** With `fit`, also scales content down to this height. */
+    maxHeight?: number | undefined;
+    children: ReactNode;
+}
+/**
+ * Lays `children` out at the width the zoom implies and scales them to it.
+ *
+ * Fluid content fills the container at every zoom; content with a fixed
+ * width, such as a 1920px slide, keeps it and is scaled as a whole.
+ */
+export declare const ScaledPreview: ({ zoom, maxHeight, children, }: ScaledPreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scaled_preview.d.ts.map

package/dist/surfaces/scaled_preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaled_preview.d.ts","sourceRoot":"","sources":["../../src/surfaces/scaled_preview.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,uFAAuF;AACvF,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AA8BD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,gCAI3B,kBAAkB,qDA4EpB,CAAC"}

package/dist/surfaces/scaled_preview.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { css } from '@emotion/react';
+const sameSize = (a, b) => a.width === b.width && a.height === b.height;
+/** Grows with content wider than the layout width, which `ResizeObserver` reports where overflow alone is not. */
+const contentBoxStyles = css `
+  width: fit-content;
+  min-width: 100%;
+`;
+const scaleFor = (zoom, available, content, maxHeight) => zoom === 'fit'
+    ? Math.min(1, available / content.width, maxHeight && content.height ? maxHeight / content.height : 1)
+    : zoom;
+/**
+ * Lays `children` out at the width the zoom implies and scales them to it.
+ *
+ * Fluid content fills the container at every zoom; content with a fixed
+ * width, such as a 1920px slide, keeps it and is scaled as a whole.
+ */
+export const ScaledPreview = ({ zoom = 'fit', maxHeight, children, }) => {
+    const outer = useRef(null);
+    const inner = useRef(null);
+    const contentBox = useRef(null);
+    const [available, setAvailable] = useState(0);
+    const [content, setContent] = useState({ width: 0, height: 0 });
+    useLayoutEffect(() => {
+        const outerElement = outer.current;
+        const innerElement = inner.current;
+        const contentElement = contentBox.current;
+        if (!outerElement || !innerElement || !contentElement) {
+            return;
+        }
+        const measure = () => {
+            setAvailable(outerElement.clientWidth);
+            const next = {
+                width: innerElement.scrollWidth,
+                height: innerElement.scrollHeight,
+            };
+            setContent((current) => (sameSize(current, next) ? current : next));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(outerElement);
+        observer.observe(contentElement);
+        return () => observer.disconnect();
+    }, []);
+    const isMeasured = available > 0 && content.width > 0;
+    const layoutWidth = zoom === 'fit' ? available : available / zoom;
+    const scale = isMeasured ? scaleFor(zoom, available, content, maxHeight) : 1;
+    const width = Math.max(content.width, layoutWidth);
+    return (_jsx("div", { ref: outer, css: css `
+        overflow-x: auto;
+      `, children: _jsx("div", { css: isMeasured
+                ? css `
+                position: relative;
+                overflow: hidden;
+                margin-inline: auto;
+                width: ${width * scale}px;
+                height: ${content.height * scale}px;
+              `
+                : undefined, children: _jsx("div", { ref: inner, css: isMeasured
+                    ? css `
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: ${layoutWidth}px;
+                  transform: scale(${scale});
+                  transform-origin: 0 0;
+                `
+                    : undefined, children: _jsx("div", { ref: contentBox, css: contentBoxStyles, children: children }) }) }) }));
+};
+//# sourceMappingURL=scaled_preview.js.map

package/dist/surfaces/scaled_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaled_preview.js","sourceRoot":"","sources":["../../src/surfaces/scaled_preview.tsx"],"names":[],"mappings":";AAQA,OAAc,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAiBrC,MAAM,QAAQ,GAAG,CAAC,CAAO,EAAE,CAAO,EAAE,EAAE,CACpC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC;AAE/C,kHAAkH;AAClH,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;CAG3B,CAAC;AAEF,MAAM,QAAQ,GAAG,CACf,IAAiB,EACjB,SAAiB,EACjB,OAAa,EACb,SAA6B,EACrB,EAAE,CACV,IAAI,KAAK,KAAK;IACZ,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,CAAC,EACD,SAAS,GAAG,OAAO,CAAC,KAAK,EACzB,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAC7D;IACH,CAAC,CAAC,IAAI,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtE,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;QACnC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;QACnC,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC;QAC1C,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,IAAI,CAAC,cAAc,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YACvC,MAAM,IAAI,GAAG;gBACX,KAAK,EAAE,YAAY,CAAC,WAAW;gBAC/B,MAAM,EAAE,YAAY,CAAC,YAAY;aAClC,CAAC;YACF,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7C,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC/B,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACjC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,IAAI,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC;IAClE,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAEnD,OAAO,CACL,cACE,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,GAAG,CAAA;;OAEP,YACD,cACE,GAAG,EACD,UAAU;gBACR,CAAC,CAAC,GAAG,CAAA;;;;yBAIQ,KAAK,GAAG,KAAK;0BACZ,OAAO,CAAC,MAAM,GAAG,KAAK;eACjC;gBACH,CAAC,CAAC,SAAS,YAEf,cACE,GAAG,EAAE,KAAK,EACV,GAAG,EACD,UAAU;oBACR,CAAC,CAAC,GAAG,CAAA;;;;2BAIQ,WAAW;qCACD,KAAK;;iBAEzB;oBACH,CAAC,CAAC,SAAS,YAEf,cAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,gBAAgB,YACxC,QAAQ,GACL,GACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { ReactNode } from 'react';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { css } from '@emotion/react';\n\n/** `fit` scales content down to its container, never up; a number is a fixed scale. */\nexport type PreviewZoom = 'fit' | number;\n\nexport interface ScaledPreviewProps {\n  zoom?: PreviewZoom | undefined;\n  /** With `fit`, also scales content down to this height. */\n  maxHeight?: number | undefined;\n  children: ReactNode;\n}\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\nconst sameSize = (a: Size, b: Size) =>\n  a.width === b.width && a.height === b.height;\n\n/** Grows with content wider than the layout width, which `ResizeObserver` reports where overflow alone is not. */\nconst contentBoxStyles = css`\n  width: fit-content;\n  min-width: 100%;\n`;\n\nconst scaleFor = (\n  zoom: PreviewZoom,\n  available: number,\n  content: Size,\n  maxHeight: number | undefined\n): number =>\n  zoom === 'fit'\n    ? Math.min(\n        1,\n        available / content.width,\n        maxHeight && content.height ? maxHeight / content.height : 1\n      )\n    : zoom;\n\n/**\n * Lays `children` out at the width the zoom implies and scales them to it.\n *\n * Fluid content fills the container at every zoom; content with a fixed\n * width, such as a 1920px slide, keeps it and is scaled as a whole.\n */\nexport const ScaledPreview = ({\n  zoom = 'fit',\n  maxHeight,\n  children,\n}: ScaledPreviewProps) => {\n  const outer = useRef<HTMLDivElement>(null);\n  const inner = useRef<HTMLDivElement>(null);\n  const contentBox = useRef<HTMLDivElement>(null);\n  const [available, setAvailable] = useState(0);\n  const [content, setContent] = useState<Size>({ width: 0, height: 0 });\n\n  useLayoutEffect(() => {\n    const outerElement = outer.current;\n    const innerElement = inner.current;\n    const contentElement = contentBox.current;\n    if (!outerElement || !innerElement || !contentElement) {\n      return;\n    }\n    const measure = () => {\n      setAvailable(outerElement.clientWidth);\n      const next = {\n        width: innerElement.scrollWidth,\n        height: innerElement.scrollHeight,\n      };\n      setContent((current) => (sameSize(current, next) ? current : next));\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measure);\n    observer.observe(outerElement);\n    observer.observe(contentElement);\n    return () => observer.disconnect();\n  }, []);\n\n  const isMeasured = available > 0 && content.width > 0;\n  const layoutWidth = zoom === 'fit' ? available : available / zoom;\n  const scale = isMeasured ? scaleFor(zoom, available, content, maxHeight) : 1;\n  const width = Math.max(content.width, layoutWidth);\n\n  return (\n    <div\n      ref={outer}\n      css={css`\n        overflow-x: auto;\n      `}>\n      <div\n        css={\n          isMeasured\n            ? css`\n                position: relative;\n                overflow: hidden;\n                margin-inline: auto;\n                width: ${width * scale}px;\n                height: ${content.height * scale}px;\n              `\n            : undefined\n        }>\n        <div\n          ref={inner}\n          css={\n            isMeasured\n              ? css`\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  width: ${layoutWidth}px;\n                  transform: scale(${scale});\n                  transform-origin: 0 0;\n                `\n              : undefined\n          }>\n          <div ref={contentBox} css={contentBoxStyles}>\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/surfaces/shadow_root.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface ShadowRootHostProps {
+    children: (root: ShadowRoot) => ReactNode;
+    title?: string | undefined;
+}
+/** Renders `children` into an open shadow root, isolating them from the page's styles and navigation. */
+export declare const ShadowRootHost: ({ children, title }: ShadowRootHostProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shadow_root.d.ts.map

package/dist/surfaces/shadow_root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow_root.d.ts","sourceRoot":"","sources":["../../src/surfaces/shadow_root.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAuBD,yGAAyG;AACzG,eAAO,MAAM,cAAc,GAAI,qBAAqB,mBAAmB,qDA8BtE,CAAC"}

package/dist/surfaces/shadow_root.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+/** Opens a previewed link in a new tab so following it cannot unload Studio; in-page fragments do nothing. */
+const containLinks = (event) => {
+    const { target, defaultPrevented } = event;
+    const link = target instanceof Element ? target.closest('a[href], area[href]') : null;
+    if (defaultPrevented || !link) {
+        return;
+    }
+    event.preventDefault();
+    const href = link.getAttribute('href') ?? '';
+    if (!href.startsWith('#')) {
+        window.open(new URL(href, document.baseURI).href, '_blank', 'noopener,noreferrer');
+    }
+};
+const containSubmit = (event) => event.preventDefault();
+/** Renders `children` into an open shadow root, isolating them from the page's styles and navigation. */
+export const ShadowRootHost = ({ children, title }) => {
+    const host = useRef(null);
+    const [root, setRoot] = useState();
+    useLayoutEffect(() => {
+        if (host.current) {
+            setRoot(host.current.shadowRoot ?? host.current.attachShadow({ mode: 'open' }));
+        }
+    }, []);
+    // Registered once the portal has mounted, so React's listener on the root runs first and its handlers can cancel navigation.
+    useEffect(() => {
+        if (!root) {
+            return;
+        }
+        root.addEventListener('click', containLinks);
+        root.addEventListener('submit', containSubmit);
+        return () => {
+            root.removeEventListener('click', containLinks);
+            root.removeEventListener('submit', containSubmit);
+        };
+    }, [root]);
+    return (_jsx("div", { ref: host, title: title, children: root ? createPortal(children(root), root) : null }));
+};
+//# sourceMappingURL=shadow_root.js.map

package/dist/surfaces/shadow_root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow_root.js","sourceRoot":"","sources":["../../src/surfaces/shadow_root.tsx"],"names":[],"mappings":";AAQA,OAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAOzC,8GAA8G;AAC9G,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;IACpC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,IAAI,GACR,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,IAAI,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC;QAC9B,OAAO;IACT,CAAC;IACD,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1B,MAAM,CAAC,IAAI,CACT,IAAI,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EACpC,QAAQ,EACR,qBAAqB,CACtB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAuB,EAAE,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAc,CAAC;IAE/C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CACvE,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,6HAA6H;IAC7H,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YAChD,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,YACzB,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,GAC7C,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { ReactNode } from 'react';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface ShadowRootHostProps {\n  children: (root: ShadowRoot) => ReactNode;\n  title?: string | undefined;\n}\n\n/** Opens a previewed link in a new tab so following it cannot unload Studio; in-page fragments do nothing. */\nconst containLinks = (event: Event) => {\n  const { target, defaultPrevented } = event;\n  const link =\n    target instanceof Element ? target.closest('a[href], area[href]') : null;\n  if (defaultPrevented || !link) {\n    return;\n  }\n  event.preventDefault();\n  const href = link.getAttribute('href') ?? '';\n  if (!href.startsWith('#')) {\n    window.open(\n      new URL(href, document.baseURI).href,\n      '_blank',\n      'noopener,noreferrer'\n    );\n  }\n};\n\nconst containSubmit = (event: Event) => event.preventDefault();\n\n/** Renders `children` into an open shadow root, isolating them from the page's styles and navigation. */\nexport const ShadowRootHost = ({ children, title }: ShadowRootHostProps) => {\n  const host = useRef<HTMLDivElement>(null);\n  const [root, setRoot] = useState<ShadowRoot>();\n\n  useLayoutEffect(() => {\n    if (host.current) {\n      setRoot(\n        host.current.shadowRoot ?? host.current.attachShadow({ mode: 'open' })\n      );\n    }\n  }, []);\n\n  // Registered once the portal has mounted, so React's listener on the root runs first and its handlers can cancel navigation.\n  useEffect(() => {\n    if (!root) {\n      return;\n    }\n    root.addEventListener('click', containLinks);\n    root.addEventListener('submit', containSubmit);\n    return () => {\n      root.removeEventListener('click', containLinks);\n      root.removeEventListener('submit', containSubmit);\n    };\n  }, [root]);\n\n  return (\n    <div ref={host} title={title}>\n      {root ? createPortal(children(root), root) : null}\n    </div>\n  );\n};\n"]}

package/dist/surfaces/slack_surface.d.ts

@@ -0,0 +1,12 @@
+import type { SlackBlock } from '@elastic/isomer-sdk/slack';
+/**
+ * The message as Slack would draw it, via `slack-blocks-to-jsx`.
+ *
+ * Its stylesheet, `slack-blocks-to-jsx/dist/style.css`, is the host's to load.
+ */
+export declare const SlackSurface: ({ blocks }: {
+    blocks: readonly SlackBlock[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** Opens the blocks in Slack's Block Kit Builder. */
+export declare const blockKitBuilderUrl: (blocks: readonly SlackBlock[]) => string;
+//# sourceMappingURL=slack_surface.d.ts.map

package/dist/surfaces/slack_surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slack_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/slack_surface.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAa5D;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,qDAqBzE,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,GAAI,QAAQ,SAAS,UAAU,EAAE,KAAG,MAC0B,CAAC"}

package/dist/surfaces/slack_surface.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { Message } from 'slack-blocks-to-jsx';
+const LOGO = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><rect width="36" height="36" rx="6" fill="#0B64DD"/><text x="18" y="24" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="700" fill="#fff" text-anchor="middle">I</text></svg>')}`;
+/** Both type the same Block Kit JSON, but disagree on which fields of some elements are optional. */
+const toMessageBlocks = (blocks) => [...blocks];
+/**
+ * The message as Slack would draw it, via `slack-blocks-to-jsx`.
+ *
+ * Its stylesheet, `slack-blocks-to-jsx/dist/style.css`, is the host's to load.
+ */
+export const SlackSurface = ({ blocks }) => {
+    const { colorMode, euiTheme } = useEuiTheme();
+    return (_jsx("div", { css: css `
+        padding: ${euiTheme.size.m};
+        /* Matches slack-blocks-to-jsx's message canvas. */
+        background: ${colorMode === 'DARK' ? 'rgb(26, 29, 33)' : '#fff'};
+        #slack_blocks_to_jsx .text-base {
+          font-size: 16px;
+          line-height: 1.5;
+        }
+      `, children: _jsx(Message, { blocks: toMessageBlocks(blocks), name: "Isomer", logo: LOGO, theme: colorMode === 'DARK' ? 'dark' : 'light' }) }));
+};
+/** Opens the blocks in Slack's Block Kit Builder. */
+export const blockKitBuilderUrl = (blocks) => `https://app.slack.com/block-kit-builder#${encodeURIComponent(JSON.stringify({ blocks }))}`;
+//# sourceMappingURL=slack_surface.js.map

package/dist/surfaces/slack_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slack_surface.js","sourceRoot":"","sources":["../../src/surfaces/slack_surface.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,IAAI,GAAG,sBAAsB,kBAAkB,CACnD,6PAA6P,CAC9P,EAAE,CAAC;AAEJ,qGAAqG;AACrG,MAAM,eAAe,GAAG,CAAC,MAA6B,EAAE,EAAE,CACxD,CAAC,GAAG,MAAM,CAAuB,CAAC;AAEpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAqC,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IAC9C,OAAO,CACL,cACE,GAAG,EAAE,GAAG,CAAA;mBACK,QAAQ,CAAC,IAAI,CAAC,CAAC;;sBAEZ,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM;;;;;OAKhE,YACD,KAAC,OAAO,IACN,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GAC9C,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,qDAAqD;AACrD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAA6B,EAAU,EAAE,CAC1E,2CAA2C,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React from 'react';\nimport { useEuiTheme } from '@elastic/eui';\nimport type { SlackBlock } from '@elastic/isomer-sdk/slack';\nimport { css } from '@emotion/react';\nimport type { Block } from 'slack-blocks-to-jsx';\nimport { Message } from 'slack-blocks-to-jsx';\n\nconst LOGO = `data:image/svg+xml,${encodeURIComponent(\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" rx=\"6\" fill=\"#0B64DD\"/><text x=\"18\" y=\"24\" font-family=\"Inter, Arial, sans-serif\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\" text-anchor=\"middle\">I</text></svg>'\n)}`;\n\n/** Both type the same Block Kit JSON, but disagree on which fields of some elements are optional. */\nconst toMessageBlocks = (blocks: readonly SlackBlock[]) =>\n  [...blocks] as unknown as Block[];\n\n/**\n * The message as Slack would draw it, via `slack-blocks-to-jsx`.\n *\n * Its stylesheet, `slack-blocks-to-jsx/dist/style.css`, is the host's to load.\n */\nexport const SlackSurface = ({ blocks }: { blocks: readonly SlackBlock[] }) => {\n  const { colorMode, euiTheme } = useEuiTheme();\n  return (\n    <div\n      css={css`\n        padding: ${euiTheme.size.m};\n        /* Matches slack-blocks-to-jsx's message canvas. */\n        background: ${colorMode === 'DARK' ? 'rgb(26, 29, 33)' : '#fff'};\n        #slack_blocks_to_jsx .text-base {\n          font-size: 16px;\n          line-height: 1.5;\n        }\n      `}>\n      <Message\n        blocks={toMessageBlocks(blocks)}\n        name=\"Isomer\"\n        logo={LOGO}\n        theme={colorMode === 'DARK' ? 'dark' : 'light'}\n      />\n    </div>\n  );\n};\n\n/** Opens the blocks in Slack's Block Kit Builder. */\nexport const blockKitBuilderUrl = (blocks: readonly SlackBlock[]): string =>\n  `https://app.slack.com/block-kit-builder#${encodeURIComponent(JSON.stringify({ blocks }))}`;\n"]}

package/dist/surfaces/snapshot_surface.d.ts

@@ -0,0 +1,6 @@
+/** The `snapshot` surface's frame, laid out against its own stylesheet in a sandboxed frame. */
+export declare const SnapshotSurface: ({ html, stylesheet, }: {
+    html: string;
+    stylesheet: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=snapshot_surface.d.ts.map

package/dist/surfaces/snapshot_surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/snapshot_surface.tsx"],"names":[],"mappings":"AAWA,gGAAgG;AAChG,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,qDAKA,CAAC"}

package/dist/surfaces/snapshot_surface.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { HtmlSurface } from './html_surface.js';
+/** The `snapshot` surface's frame, laid out against its own stylesheet in a sandboxed frame. */
+export const SnapshotSurface = ({ html, stylesheet, }) => (_jsx(HtmlSurface, { html: `<style>${stylesheet}</style>${html}`, title: "Snapshot preview" }));
+//# sourceMappingURL=snapshot_surface.js.map

package/dist/surfaces/snapshot_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot_surface.js","sourceRoot":"","sources":["../../src/surfaces/snapshot_surface.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,gGAAgG;AAChG,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,IAAI,EACJ,UAAU,GAIX,EAAE,EAAE,CAAC,CACJ,KAAC,WAAW,IACV,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,EAAE,EAC3C,KAAK,EAAC,kBAAkB,GACxB,CACH,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React from 'react';\n\nimport { HtmlSurface } from './html_surface';\n\n/** The `snapshot` surface's frame, laid out against its own stylesheet in a sandboxed frame. */\nexport const SnapshotSurface = ({\n  html,\n  stylesheet,\n}: {\n  html: string;\n  stylesheet: string;\n}) => (\n  <HtmlSurface\n    html={`<style>${stylesheet}</style>${html}`}\n    title=\"Snapshot preview\"\n  />\n);\n"]}

package/dist/surfaces/surface_board.d.ts

@@ -0,0 +1,19 @@
+import type { Composition, ValidationResult } from '@elastic/isomer-sdk';
+import type { PreviewZoom } from './scaled_preview.js';
+import type { SurfaceView } from './surface_preview.js';
+import type { PreviewSurface } from './surface_select.js';
+interface RenderProps {
+    composition: Composition;
+    validation: ValidationResult;
+    view: SurfaceView;
+    zoom: PreviewZoom;
+    enhancements?: readonly string[] | undefined;
+    errorHref?: string | undefined;
+}
+export interface SurfaceBoardProps extends RenderProps {
+    surfaces: readonly PreviewSurface[];
+}
+/** One surface at full size, or several in a vertical list. */
+export declare const SurfaceBoard: ({ surfaces, composition, validation, view, zoom, errorHref, }: SurfaceBoardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=surface_board.d.ts.map

package/dist/surfaces/surface_board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_board.d.ts","sourceRoot":"","sources":["../../src/surfaces/surface_board.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,WAAW;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAsJD,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC;AAMD,+DAA+D;AAC/D,eAAO,MAAM,YAAY,GAAI,+DAO1B,iBAAiB,qDAgInB,CAAC"}

package/dist/surfaces/surface_board.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { EuiIcon, EuiText, useEuiTheme } from '@elastic/eui';
+import { createChildNodeWalker } from '@elastic/isomer-sdk';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+import { applicableEnhancements } from './applicable_enhancements.js';
+import { EnhancementSelect } from './enhancement_select.js';
+import { PngSurface } from './png_surface.js';
+import { SurfacePreview } from './surface_preview.js';
+import { isVisualSurface, outputLabel, PREVIEW_ICONS, PREVIEW_LABELS, SURFACE_NOTES, } from './surface_select.js';
+const SurfaceRender = ({ surface, composition, validation, view, zoom, errorHref, frameCss, enhancements, }) => {
+    const { rasterizePng } = useStudio();
+    if (surface !== 'png') {
+        return (_jsx(SurfacePreview, { surface,
+            composition,
+            validation,
+            view,
+            zoom,
+            frameCss,
+            enhancements,
+            errorHref }));
+    }
+    return rasterizePng ? (_jsx(PngSurface, { composition, rasterizePng, zoom, frameCss })) : null;
+};
+const SurfaceCard = ({ surface, composition, validation, view, controls, title, note, enhancements, errorHref, zoom = 'fit', fullSize = false, }) => {
+    const { euiTheme } = useEuiTheme();
+    const label = title ?? PREVIEW_LABELS[surface];
+    const clipsRender = view === 'render' && isVisualSurface(surface);
+    return (_jsxs("section", { "aria-label": `${label} preview`, css: css `
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        border: ${euiTheme.border.thin};
+        border-radius: ${euiTheme.border.radius.medium};
+        overflow: hidden;
+      `, children: [_jsxs("div", { css: css `
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: ${euiTheme.size.s};
+          padding: ${euiTheme.size.s} ${euiTheme.size.m};
+          background: ${euiTheme.colors.backgroundBasePlain};
+          border-bottom: ${euiTheme.border.thin};
+        `, children: [_jsx(EuiIcon, { type: PREVIEW_ICONS[surface], size: "m", "aria-hidden": true }), _jsx(EuiText, { size: "xs", children: _jsx("h3", { css: css `
+              margin: 0;
+              font-size: inherit;
+              line-height: inherit;
+            `, children: _jsx("strong", { children: label }) }) }), _jsx(EuiText, { size: "xs", color: "subdued", css: css `
+            flex: 1 1 100%;
+            order: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          `, title: note ?? SURFACE_NOTES[surface], children: note ?? SURFACE_NOTES[surface] }), controls ? (_jsx("div", { css: css `
+              margin-inline-start: auto;
+            `, children: controls })) : null] }), _jsx(SurfaceRender, { surface,
+                composition,
+                validation,
+                view,
+                enhancements,
+                zoom,
+                errorHref, frameCss: fullSize
+                    ? undefined
+                    : css `
+                ${isVisualSurface(surface)
+                        ? css `
+                        aspect-ratio: 16 / 9;
+                      `
+                        : css `
+                        min-height: 16rem;
+                        max-height: 30rem;
+                      `}
+                overflow: ${clipsRender ? 'hidden' : 'auto'};
+                background: ${euiTheme.colors.backgroundBaseSubdued};
+              ` }, `${surface}-${enhancements?.join(',') ?? ''}`)] }));
+};
+const isBrowserSurface = (surface) => surface === 'react' || surface === 'html' || surface === 'snapshot';
+/** One surface at full size, or several in a vertical list. */
+export const SurfaceBoard = ({ surfaces, composition, validation, view, zoom, errorHref, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { runtime, createReactContext } = useStudio();
+    const [selectedEnhancements, setSelectedEnhancements] = useState([]);
+    const [only] = surfaces;
+    const browserSurfaces = surfaces.filter(isBrowserSurface);
+    const activeSurface = browserSurfaces.includes('html')
+        ? 'html'
+        : browserSurfaces[0];
+    const walk = useMemo(() => createChildNodeWalker(runtime.primitives), [runtime.primitives]);
+    const applicable = useMemo(() => applicableEnhancements(runtime.enhancements ?? [], composition.body, walk), [runtime.enhancements, composition.body, walk]);
+    const enhancementIds = applicable.map(({ id }) => id);
+    const canEnhance = (activeSurface === 'html' ||
+        (activeSurface === 'react' && Boolean(createReactContext))) &&
+        enhancementIds.length > 0;
+    const enabled = enhancementIds.filter((id) => selectedEnhancements.includes(id));
+    const enhancements = canEnhance && enabled.length ? enabled : undefined;
+    const visualSurfaces = surfaces.filter(isVisualSurface);
+    const otherSurfaces = surfaces.filter((surface) => !isVisualSurface(surface));
+    if (surfaces.length === 1 && only && !isBrowserSurface(only)) {
+        return (_jsxs("section", { "aria-labelledby": `surface-heading-${only}`, children: [_jsxs("h2", { id: `surface-heading-${only}`, css: css `
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+          `, children: [PREVIEW_LABELS[only], " preview"] }), _jsx(SurfaceRender, { surface: only, composition, validation, view, zoom, errorHref })] }));
+    }
+    const renderCards = (items) => items.map((surface) => (_jsx(SurfaceCard, { surface, composition, validation, view, errorHref }, surface)));
+    return (_jsxs("div", { children: [visualSurfaces.length ? (_jsx("section", { "aria-label": "Visual output previews", css: css `
+            margin-block-end: ${otherSurfaces.length ? euiTheme.size.m : 0};
+          `, children: _jsxs("div", { role: "region", "aria-label": "Visual preview grid", css: css `
+              display: grid;
+              grid-template-columns: minmax(0, 1fr);
+              gap: ${euiTheme.size.base};
+            `, children: [activeSurface ? (_jsx(SurfaceCard, { surface: activeSurface, title: outputLabel(activeSurface), note: activeSurface === 'html'
+                                ? 'HTML / React / Snapshot'
+                                : undefined, composition, validation, view, enhancements, errorHref, zoom: surfaces.length === 1 ? zoom : 'fit', fullSize: surfaces.length === 1, controls: _jsx(EnhancementSelect, { definitions: applicable, selected: enabled, disabled: !canEnhance || view !== 'render', onChange: setSelectedEnhancements }) })) : null, renderCards(visualSurfaces.filter((surface) => !isBrowserSurface(surface)))] }) })) : null, otherSurfaces.length ? (_jsx("section", { "aria-label": "Other output previews", children: _jsx("div", { css: css `
+              display: grid;
+              grid-template-columns: minmax(0, 1fr);
+              gap: ${euiTheme.size.base};
+            `, children: renderCards(otherSurfaces) }) })) : null] }));
+};
+//# sourceMappingURL=surface_board.js.map

package/dist/surfaces/surface_board.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_board.js","sourceRoot":"","sources":["../../src/surfaces/surface_board.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { ReactNode } from 'react';\nimport React, { useMemo, useState } from 'react';\nimport { EuiIcon, EuiText, useEuiTheme } from '@elastic/eui';\nimport type { Composition, ValidationResult } from '@elastic/isomer-sdk';\nimport { createChildNodeWalker } from '@elastic/isomer-sdk';\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\nimport { useStudio } from '../studio_context';\n\nimport { applicableEnhancements } from './applicable_enhancements';\nimport { EnhancementSelect } from './enhancement_select';\nimport { PngSurface } from './png_surface';\nimport type { PreviewZoom } from './scaled_preview';\nimport type { SurfaceView } from './surface_preview';\nimport { SurfacePreview } from './surface_preview';\nimport type { PreviewSurface } from './surface_select';\nimport {\n  isVisualSurface,\n  outputLabel,\n  PREVIEW_ICONS,\n  PREVIEW_LABELS,\n  SURFACE_NOTES,\n} from './surface_select';\n\ninterface RenderProps {\n  composition: Composition;\n  validation: ValidationResult;\n  view: SurfaceView;\n  zoom: PreviewZoom;\n  enhancements?: readonly string[] | undefined;\n  errorHref?: string | undefined;\n}\n\nconst SurfaceRender = ({\n  surface,\n  composition,\n  validation,\n  view,\n  zoom,\n  errorHref,\n  frameCss,\n  enhancements,\n}: RenderProps & {\n  surface: PreviewSurface;\n  frameCss?: SerializedStyles | undefined;\n}) => {\n  const { rasterizePng } = useStudio();\n  if (surface !== 'png') {\n    return (\n      <SurfacePreview\n        {...{\n          surface,\n          composition,\n          validation,\n          view,\n          zoom,\n          frameCss,\n          enhancements,\n          errorHref,\n        }}\n      />\n    );\n  }\n  return rasterizePng ? (\n    <PngSurface {...{ composition, rasterizePng, zoom, frameCss }} />\n  ) : null;\n};\n\nconst SurfaceCard = ({\n  surface,\n  composition,\n  validation,\n  view,\n  controls,\n  title,\n  note,\n  enhancements,\n  errorHref,\n  zoom = 'fit',\n  fullSize = false,\n}: Omit<RenderProps, 'zoom'> & {\n  surface: PreviewSurface;\n  controls?: ReactNode;\n  title?: string;\n  note?: string | undefined;\n  zoom?: PreviewZoom;\n  fullSize?: boolean;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const label = title ?? PREVIEW_LABELS[surface];\n  const clipsRender = view === 'render' && isVisualSurface(surface);\n\n  return (\n    <section\n      aria-label={`${label} preview`}\n      css={css`\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n        border: ${euiTheme.border.thin};\n        border-radius: ${euiTheme.border.radius.medium};\n        overflow: hidden;\n      `}>\n      <div\n        css={css`\n          display: flex;\n          flex-wrap: wrap;\n          align-items: center;\n          gap: ${euiTheme.size.s};\n          padding: ${euiTheme.size.s} ${euiTheme.size.m};\n          background: ${euiTheme.colors.backgroundBasePlain};\n          border-bottom: ${euiTheme.border.thin};\n        `}>\n        <EuiIcon type={PREVIEW_ICONS[surface]} size=\"m\" aria-hidden={true} />\n        <EuiText size=\"xs\">\n          <h3\n            css={css`\n              margin: 0;\n              font-size: inherit;\n              line-height: inherit;\n            `}>\n            <strong>{label}</strong>\n          </h3>\n        </EuiText>\n        <EuiText\n          size=\"xs\"\n          color=\"subdued\"\n          css={css`\n            flex: 1 1 100%;\n            order: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          `}\n          title={note ?? SURFACE_NOTES[surface]}>\n          {note ?? SURFACE_NOTES[surface]}\n        </EuiText>\n        {controls ? (\n          <div\n            css={css`\n              margin-inline-start: auto;\n            `}>\n            {controls}\n          </div>\n        ) : null}\n      </div>\n      <SurfaceRender\n        key={`${surface}-${enhancements?.join(',') ?? ''}`}\n        {...{\n          surface,\n          composition,\n          validation,\n          view,\n          enhancements,\n          zoom,\n          errorHref,\n        }}\n        frameCss={\n          fullSize\n            ? undefined\n            : css`\n                ${\n                  isVisualSurface(surface)\n                    ? css`\n                        aspect-ratio: 16 / 9;\n                      `\n                    : css`\n                        min-height: 16rem;\n                        max-height: 30rem;\n                      `\n                }\n                overflow: ${clipsRender ? 'hidden' : 'auto'};\n                background: ${euiTheme.colors.backgroundBaseSubdued};\n              `\n        }\n      />\n    </section>\n  );\n};\n\nexport interface SurfaceBoardProps extends RenderProps {\n  surfaces: readonly PreviewSurface[];\n}\n\ntype BrowserSurface = 'react' | 'html' | 'snapshot';\nconst isBrowserSurface = (surface: PreviewSurface): surface is BrowserSurface =>\n  surface === 'react' || surface === 'html' || surface === 'snapshot';\n\n/** One surface at full size, or several in a vertical list. */\nexport const SurfaceBoard = ({\n  surfaces,\n  composition,\n  validation,\n  view,\n  zoom,\n  errorHref,\n}: SurfaceBoardProps) => {\n  const { euiTheme } = useEuiTheme();\n  const { runtime, createReactContext } = useStudio();\n  const [selectedEnhancements, setSelectedEnhancements] = useState<string[]>(\n    []\n  );\n  const [only] = surfaces;\n  const browserSurfaces = surfaces.filter(isBrowserSurface);\n  const activeSurface = browserSurfaces.includes('html')\n    ? 'html'\n    : browserSurfaces[0];\n  const walk = useMemo(\n    () => createChildNodeWalker(runtime.primitives),\n    [runtime.primitives]\n  );\n  const applicable = useMemo(\n    () =>\n      applicableEnhancements(\n        runtime.enhancements ?? [],\n        composition.body,\n        walk\n      ),\n    [runtime.enhancements, composition.body, walk]\n  );\n  const enhancementIds = applicable.map(({ id }) => id);\n  const canEnhance =\n    (activeSurface === 'html' ||\n      (activeSurface === 'react' && Boolean(createReactContext))) &&\n    enhancementIds.length > 0;\n  const enabled = enhancementIds.filter((id) =>\n    selectedEnhancements.includes(id)\n  );\n  const enhancements = canEnhance && enabled.length ? enabled : undefined;\n  const visualSurfaces = surfaces.filter(isVisualSurface);\n  const otherSurfaces = surfaces.filter((surface) => !isVisualSurface(surface));\n\n  if (surfaces.length === 1 && only && !isBrowserSurface(only)) {\n    return (\n      <section aria-labelledby={`surface-heading-${only}`}>\n        <h2\n          id={`surface-heading-${only}`}\n          css={css`\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n          `}>\n          {PREVIEW_LABELS[only]} preview\n        </h2>\n        <SurfaceRender\n          surface={only}\n          {...{ composition, validation, view, zoom, errorHref }}\n        />\n      </section>\n    );\n  }\n\n  const renderCards = (items: readonly PreviewSurface[]) =>\n    items.map((surface) => (\n      <SurfaceCard\n        key={surface}\n        {...{ surface, composition, validation, view, errorHref }}\n      />\n    ));\n\n  return (\n    <div>\n      {visualSurfaces.length ? (\n        <section\n          aria-label=\"Visual output previews\"\n          css={css`\n            margin-block-end: ${otherSurfaces.length ? euiTheme.size.m : 0};\n          `}>\n          <div\n            role=\"region\"\n            aria-label=\"Visual preview grid\"\n            css={css`\n              display: grid;\n              grid-template-columns: minmax(0, 1fr);\n              gap: ${euiTheme.size.base};\n            `}>\n            {activeSurface ? (\n              <SurfaceCard\n                surface={activeSurface}\n                title={outputLabel(activeSurface)}\n                note={\n                  activeSurface === 'html'\n                    ? 'HTML / React / Snapshot'\n                    : undefined\n                }\n                {...{ composition, validation, view, enhancements, errorHref }}\n                zoom={surfaces.length === 1 ? zoom : 'fit'}\n                fullSize={surfaces.length === 1}\n                controls={\n                  <EnhancementSelect\n                    definitions={applicable}\n                    selected={enabled}\n                    disabled={!canEnhance || view !== 'render'}\n                    onChange={setSelectedEnhancements}\n                  />\n                }\n              />\n            ) : null}\n            {renderCards(\n              visualSurfaces.filter((surface) => !isBrowserSurface(surface))\n            )}\n          </div>\n        </section>\n      ) : null}\n      {otherSurfaces.length ? (\n        <section aria-label=\"Other output previews\">\n          <div\n            css={css`\n              display: grid;\n              grid-template-columns: minmax(0, 1fr);\n              gap: ${euiTheme.size.base};\n            `}>\n            {renderCards(otherSurfaces)}\n          </div>\n        </section>\n      ) : null}\n    </div>\n  );\n};\n"]}

package/dist/surfaces/surface_frame.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { SerializedStyles } from '@emotion/react';
+/** Holds a surface's render, apart from its diagnostics, so a clipping frame never hides them. */
+export declare const SurfaceFrame: ({ frameCss, children, }: {
+    frameCss?: SerializedStyles | undefined;
+    children: ReactNode;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface_frame.d.ts.map

package/dist/surfaces/surface_frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_frame.d.ts","sourceRoot":"","sources":["../../src/surfaces/surface_frame.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,kGAAkG;AAClG,eAAO,MAAM,YAAY,GAAI,yBAG1B;IACD,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB,qDAOE,CAAC"}

package/dist/surfaces/surface_frame.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** Holds a surface's render, apart from its diagnostics, so a clipping frame never hides them. */
+export const SurfaceFrame = ({ frameCss, children, }) => frameCss ? (_jsx("div", { css: frameCss, "data-test-subj": "surfaceFrame", children: children })) : (_jsx(_Fragment, { children: children }));
+//# sourceMappingURL=surface_frame.js.map