@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/surfaces/surface_frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_frame.js","sourceRoot":"","sources":["../../src/surfaces/surface_frame.tsx"],"names":[],"mappings":";AAWA,kGAAkG;AAClG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,QAAQ,GAIT,EAAE,EAAE,CACH,QAAQ,CAAC,CAAC,CAAC,CACT,cAAK,GAAG,EAAE,QAAQ,oBAAiB,cAAc,YAC9C,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,CACF,4BAAG,QAAQ,GAAI,CAChB,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 from 'react';\nimport type { SerializedStyles } from '@emotion/react';\n\n/** Holds a surface's render, apart from its diagnostics, so a clipping frame never hides them. */\nexport const SurfaceFrame = ({\n  frameCss,\n  children,\n}: {\n  frameCss?: SerializedStyles | undefined;\n  children: ReactNode;\n}) =>\n  frameCss ? (\n    <div css={frameCss} data-test-subj=\"surfaceFrame\">\n      {children}\n    </div>\n  ) : (\n    <>{children}</>\n  );\n"]}

package/dist/surfaces/surface_logos.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, SVGProps } from 'react';
+type LogoProps = SVGProps<SVGSVGElement>;
+export declare const ReactLogo: ComponentType<LogoProps>;
+export declare const MarkdownLogo: ComponentType<LogoProps>;
+/** PNG and the snapshot have no brand mark, so each is a badge with its label knocked out of a solid field. */
+export declare const PngLogo: ComponentType<LogoProps>;
+export declare const SnapshotLogo: ComponentType<LogoProps>;
+export {};
+//# sourceMappingURL=surface_logos.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface_logos.d.ts","sourceRoot":"","sources":["../../src/surfaces/surface_logos.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrD,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAYzC,eAAO,MAAM,SAAS,0BAGrB,CAAC;AAEF,eAAO,MAAM,YAAY,0BAGxB,CAAC;AAoCF,+GAA+G;AAC/G,eAAO,MAAM,OAAO,0BAAmB,CAAC;AACxC,eAAO,MAAM,YAAY,0BAAoB,CAAC"}

package/dist/surfaces/surface_logos.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useId } from 'react';
+/** Glyph paths for 24px viewBoxes from [Simple Icons](https://simpleicons.org) (CC0), filled with each brand's color. */
+const simpleIcon = (d, fill) => {
+    const Logo = (props) => (_jsx("svg", { viewBox: "0 0 24 24", ...props, children: _jsx("path", { d, fill }) }));
+    return Logo;
+};
+export const ReactLogo = simpleIcon('M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z', '#087EA4');
+export const MarkdownLogo = simpleIcon('M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z', 'currentColor');
+const fileBadge = (label) => {
+    const fontSize = label.length > 3 ? 6.5 : 8;
+    const Logo = (props) => {
+        const maskId = useId();
+        return (_jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [_jsxs("mask", { id: maskId, children: [_jsx("rect", { width: "24", height: "24", fill: "white" }), _jsx("text", { x: "12", y: 12 + fontSize * 0.4, textAnchor: "middle", fontSize: fontSize, fontWeight: "700", fontFamily: "Inter, Helvetica, Arial, sans-serif", fill: "black", children: label })] }), _jsx("rect", { x: "1", y: "5", width: "22", height: "14", rx: "3", fill: "currentColor", mask: `url(#${maskId})` })] }));
+    };
+    return Logo;
+};
+/** PNG and the snapshot have no brand mark, so each is a badge with its label knocked out of a solid field. */
+export const PngLogo = fileBadge('PNG');
+export const SnapshotLogo = fileBadge('SNAP');
+//# sourceMappingURL=surface_logos.js.map

package/dist/surfaces/surface_logos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_logos.js","sourceRoot":"","sources":["../../src/surfaces/surface_logos.tsx"],"names":[],"mappings":";AAQA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAIrC,yHAAyH;AACzH,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,IAAY,EAA4B,EAAE;IACvE,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACjC,cAAK,OAAO,EAAC,WAAW,KAAK,KAAK,YAChC,eAAY,CAAC,EAAE,IAAI,GAAM,GACrB,CACP,CAAC;IACF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,mwFAAmwF,EACnwF,SAAS,CACV,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,mSAAmS,EACnS,cAAc,CACf,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAA4B,EAAE;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;QAChC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;QACvB,OAAO,CACL,eAAK,OAAO,EAAC,WAAW,KAAK,KAAK,aAChC,gBAAM,EAAE,EAAE,MAAM,aACd,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5C,eACE,CAAC,EAAC,IAAI,EACN,CAAC,EAAE,EAAE,GAAG,QAAQ,GAAG,GAAG,EACtB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAC,KAAK,EAChB,UAAU,EAAC,qCAAqC,EAChD,IAAI,EAAC,OAAO,YACX,KAAK,GACD,IACF,EACP,eACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,QAAQ,MAAM,GAAG,GACvB,IACE,CACP,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,+GAA+G;AAC/G,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AACxC,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,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 { ComponentType, SVGProps } from 'react';\nimport React, { useId } from 'react';\n\ntype LogoProps = SVGProps<SVGSVGElement>;\n\n/** Glyph paths for 24px viewBoxes from [Simple Icons](https://simpleicons.org) (CC0), filled with each brand's color. */\nconst simpleIcon = (d: string, fill: string): ComponentType<LogoProps> => {\n  const Logo = (props: LogoProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path {...{ d, fill }} />\n    </svg>\n  );\n  return Logo;\n};\n\nexport const ReactLogo = simpleIcon(\n  'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z',\n  '#087EA4'\n);\n\nexport const MarkdownLogo = simpleIcon(\n  'M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z',\n  'currentColor'\n);\n\nconst fileBadge = (label: string): ComponentType<LogoProps> => {\n  const fontSize = label.length > 3 ? 6.5 : 8;\n  const Logo = (props: LogoProps) => {\n    const maskId = useId();\n    return (\n      <svg viewBox=\"0 0 24 24\" {...props}>\n        <mask id={maskId}>\n          <rect width=\"24\" height=\"24\" fill=\"white\" />\n          <text\n            x=\"12\"\n            y={12 + fontSize * 0.4}\n            textAnchor=\"middle\"\n            fontSize={fontSize}\n            fontWeight=\"700\"\n            fontFamily=\"Inter, Helvetica, Arial, sans-serif\"\n            fill=\"black\">\n            {label}\n          </text>\n        </mask>\n        <rect\n          x=\"1\"\n          y=\"5\"\n          width=\"22\"\n          height=\"14\"\n          rx=\"3\"\n          fill=\"currentColor\"\n          mask={`url(#${maskId})`}\n        />\n      </svg>\n    );\n  };\n  return Logo;\n};\n\n/** PNG and the snapshot have no brand mark, so each is a badge with its label knocked out of a solid field. */\nexport const PngLogo = fileBadge('PNG');\nexport const SnapshotLogo = fileBadge('SNAP');\n"]}

package/dist/surfaces/surface_preview.d.ts

@@ -0,0 +1,32 @@
+import type { IconType } from '@elastic/eui';
+import type { Composition, ValidationResult } from '@elastic/isomer-sdk';
+import type { SerializedStyles } from '@emotion/react';
+import type { StudioSurface } from '../model/describe_runtime.js';
+import type { PreviewZoom } from './scaled_preview.js';
+export type SurfaceView = 'render' | 'source';
+export declare const SURFACE_ICONS: Readonly<Record<StudioSurface, IconType>>;
+/** Switches a surface between its rendered form and its source. */
+export declare const SurfaceViewToggle: ({ view, onChange, legend, }: {
+    view: SurfaceView;
+    onChange: (view: SurfaceView) => void;
+    legend: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export interface SurfacePreviewProps {
+    surface: StudioSurface;
+    composition: Composition;
+    validation: ValidationResult;
+    view: SurfaceView;
+    /** Scales the `react`, `html` and `snapshot` renders. Defaults to `fit`. */
+    zoom?: PreviewZoom;
+    /** Styles a frame around the render or source alone; diagnostics sit below it. */
+    frameCss?: SerializedStyles | undefined;
+    /** A relevant recovery destination when rendering fails. */
+    errorHref?: string | undefined;
+    /** `false` leaves out the composition's leading title. Defaults to `true`. */
+    heading?: boolean | undefined;
+    /** Runs the requested enhancements on React or shadow-DOM HTML previews. */
+    enhancements?: readonly string[] | undefined;
+}
+/** One surface's render or source, with what it reported. */
+export declare const SurfacePreview: ({ surface, composition, validation, view, zoom, frameCss, errorHref, heading, enhancements, }: SurfacePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface_preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface_preview.d.ts","sourceRoot":"","sources":["../../src/surfaces/surface_preview.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAU7C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAQ/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQpD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAOnE,CAAC;AAUF,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,GAAI,6BAI/B;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB,qDAcA,CAAC;AA+EF,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,aAAa,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACxC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;CAC9C;AAED,6DAA6D;AAC7D,eAAO,MAAM,cAAc,GAAI,+FAU5B,mBAAmB,qDA6ErB,CAAC"}

package/dist/surfaces/surface_preview.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useMemo } from 'react';
+import { EuiButton, EuiButtonGroup, EuiCallOut, EuiLink, EuiSpacer, EuiText, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { SURFACE_LABELS } from '../model/describe_runtime.js';
+import { useStudio } from '../studio_context.js';
+import { ShadowHtmlSurface } from './html_surface.js';
+import { ReactSurface } from './react_surface.js';
+import { renderSurfaceOutput } from './render_output.js';
+import { ScaledPreview } from './scaled_preview.js';
+import { blockKitBuilderUrl, SlackSurface } from './slack_surface.js';
+import { SnapshotSurface } from './snapshot_surface.js';
+import { SurfaceFrame } from './surface_frame.js';
+import { MarkdownLogo, ReactLogo, SnapshotLogo } from './surface_logos.js';
+import { MarkdownSurface, SourceView, TextSurface } from './text_surfaces.js';
+export const SURFACE_ICONS = {
+    react: ReactLogo,
+    html: 'code',
+    snapshot: SnapshotLogo,
+    markdown: MarkdownLogo,
+    text: 'text',
+    slack: 'logoSlack',
+};
+const VIEW_OPTIONS = [
+    { id: 'render', label: 'Rendered' },
+    { id: 'source', label: 'Output source' },
+];
+const isSurfaceView = (id) => id === 'render' || id === 'source';
+/** Switches a surface between its rendered form and its source. */
+export const SurfaceViewToggle = ({ view, onChange, legend, }) => (_jsx(EuiButtonGroup, { legend, buttonSize: "s", variant: "selection", idSelected: view, display: "highlighted", onChange: (id) => isSurfaceView(id) && onChange(id), children: VIEW_OPTIONS.map(({ id, label }) => (_jsx(EuiButton, { id: id, children: label }, id))) }));
+/** Pads surfaces that draw bare text to the inset a pack's boxed content (a callout) has. */
+const Inset = ({ children, isBottomFlush, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { m } = euiTheme.size;
+    return (_jsx("div", { css: css `
+        padding: ${m} ${m} ${isBottomFlush ? 0 : m};
+      `, children: children }));
+};
+const Rendered = ({ surface, composition, output, zoom, heading, enhancements, }) => {
+    const { source, slack, snapshot } = output;
+    switch (surface) {
+        case 'react':
+            return (_jsx(ScaledPreview, { zoom, children: _jsx(ReactSurface, { composition, heading, enhancements }) }));
+        case 'html':
+            return (_jsx(ScaledPreview, { zoom, children: _jsx(ShadowHtmlSurface, { html: source, title: `${SURFACE_LABELS.html} preview`, enhancementScript: output.enhancementScript }) }));
+        case 'markdown':
+            return (_jsx(Inset, { isBottomFlush: true, children: _jsx(MarkdownSurface, { markdown: source }) }));
+        case 'text':
+            return (_jsx(Inset, { children: _jsx(TextSurface, { text: source }) }));
+        case 'slack':
+            return slack ? _jsx(SlackSurface, { blocks: slack.blocks }) : null;
+        case 'snapshot':
+            return snapshot ? (_jsx(ScaledPreview, { zoom, children: _jsx(SnapshotSurface, { html: snapshot.html, stylesheet: snapshot.css }) })) : null;
+    }
+};
+/** One surface's render or source, with what it reported. */
+export const SurfacePreview = ({ surface, composition, validation, view, zoom = 'fit', frameCss, errorHref, heading, enhancements, }) => {
+    const { runtime } = useStudio();
+    const output = useMemo(() => renderSurfaceOutput(runtime, surface, composition, validation, {
+        heading,
+        enhancements,
+    }), [runtime, surface, composition, validation, heading, enhancements]);
+    const { error, warnings, slack } = output;
+    return (_jsxs(_Fragment, { children: [error ? (_jsx(EuiCallOut, { announceOnMount: true, size: "s", color: "danger", iconType: "error", title: "This surface could not render", text: _jsxs(_Fragment, { children: [_jsx("p", { children: error }), errorHref ? (_jsx(EuiLink, { href: errorHref, children: "Open this example in Workbench" })) : null] }) })) : (_jsx(SurfaceFrame, { frameCss, children: view === 'source' ? (_jsxs(_Fragment, { children: [_jsx(SourceView, { output }), slack ? (_jsxs(EuiText, { size: "xs", children: [_jsx(EuiSpacer, { size: "xs" }), _jsx(EuiLink, { href: blockKitBuilderUrl(slack.blocks), target: "_blank", external: true, children: "Open in Block Kit Builder" })] })) : null] })) : (_jsx(Rendered, { surface, composition, output, zoom, heading, enhancements })) })), warnings.length ? (_jsxs(_Fragment, { children: [_jsx(EuiSpacer, { size: "s" }), _jsx(EuiCallOut, { announceOnMount: true, size: "s", color: "warning", iconType: "warning", title: `${SURFACE_LABELS[surface]} warnings`, children: _jsx("ul", { children: warnings.map(({ path, message }) => (_jsx("li", { children: path ? `${path}: ${message}` : message }, `${path}:${message}`))) }) })] })) : null] }));
+};
+//# sourceMappingURL=surface_preview.js.map

package/dist/surfaces/surface_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_preview.js","sourceRoot":"","sources":["../../src/surfaces/surface_preview.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 } from 'react';\nimport type { IconType } from '@elastic/eui';\nimport {\n  EuiButton,\n  EuiButtonGroup,\n  EuiCallOut,\n  EuiLink,\n  EuiSpacer,\n  EuiText,\n  useEuiTheme,\n} from '@elastic/eui';\nimport type { Composition, ValidationResult } from '@elastic/isomer-sdk';\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\nimport type { StudioSurface } from '../model/describe_runtime';\nimport { SURFACE_LABELS } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\n\nimport { ShadowHtmlSurface } from './html_surface';\nimport { ReactSurface } from './react_surface';\nimport type { SurfaceOutput } from './render_output';\nimport { renderSurfaceOutput } from './render_output';\nimport type { PreviewZoom } from './scaled_preview';\nimport { ScaledPreview } from './scaled_preview';\nimport { blockKitBuilderUrl, SlackSurface } from './slack_surface';\nimport { SnapshotSurface } from './snapshot_surface';\nimport { SurfaceFrame } from './surface_frame';\nimport { MarkdownLogo, ReactLogo, SnapshotLogo } from './surface_logos';\nimport { MarkdownSurface, SourceView, TextSurface } from './text_surfaces';\n\nexport type SurfaceView = 'render' | 'source';\n\nexport const SURFACE_ICONS: Readonly<Record<StudioSurface, IconType>> = {\n  react: ReactLogo,\n  html: 'code',\n  snapshot: SnapshotLogo,\n  markdown: MarkdownLogo,\n  text: 'text',\n  slack: 'logoSlack',\n};\n\nconst VIEW_OPTIONS: { id: SurfaceView; label: string }[] = [\n  { id: 'render', label: 'Rendered' },\n  { id: 'source', label: 'Output source' },\n];\n\nconst isSurfaceView = (id: string): id is SurfaceView =>\n  id === 'render' || id === 'source';\n\n/** Switches a surface between its rendered form and its source. */\nexport const SurfaceViewToggle = ({\n  view,\n  onChange,\n  legend,\n}: {\n  view: SurfaceView;\n  onChange: (view: SurfaceView) => void;\n  legend: string;\n}) => (\n  <EuiButtonGroup\n    {...{ legend }}\n    buttonSize=\"s\"\n    variant=\"selection\"\n    idSelected={view}\n    display=\"highlighted\"\n    onChange={(id) => isSurfaceView(id) && onChange(id)}>\n    {VIEW_OPTIONS.map(({ id, label }) => (\n      <EuiButton key={id} id={id}>\n        {label}\n      </EuiButton>\n    ))}\n  </EuiButtonGroup>\n);\n\n/** Pads surfaces that draw bare text to the inset a pack's boxed content (a callout) has. */\nconst Inset = ({\n  children,\n  isBottomFlush,\n}: {\n  children: ReactNode;\n  isBottomFlush?: boolean;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const { m } = euiTheme.size;\n\n  return (\n    <div\n      css={css`\n        padding: ${m} ${m} ${isBottomFlush ? 0 : m};\n      `}>\n      {children}\n    </div>\n  );\n};\n\nconst Rendered = ({\n  surface,\n  composition,\n  output,\n  zoom,\n  heading,\n  enhancements,\n}: {\n  surface: StudioSurface;\n  composition: Composition;\n  output: SurfaceOutput;\n  zoom: PreviewZoom;\n  heading: boolean | undefined;\n  enhancements?: readonly string[] | undefined;\n}) => {\n  const { source, slack, snapshot } = output;\n  switch (surface) {\n    case 'react':\n      return (\n        <ScaledPreview {...{ zoom }}>\n          <ReactSurface {...{ composition, heading, enhancements }} />\n        </ScaledPreview>\n      );\n    case 'html':\n      return (\n        <ScaledPreview {...{ zoom }}>\n          <ShadowHtmlSurface\n            html={source}\n            title={`${SURFACE_LABELS.html} preview`}\n            enhancementScript={output.enhancementScript}\n          />\n        </ScaledPreview>\n      );\n    case 'markdown':\n      return (\n        <Inset isBottomFlush>\n          <MarkdownSurface markdown={source} />\n        </Inset>\n      );\n    case 'text':\n      return (\n        <Inset>\n          <TextSurface text={source} />\n        </Inset>\n      );\n    case 'slack':\n      return slack ? <SlackSurface blocks={slack.blocks} /> : null;\n    case 'snapshot':\n      return snapshot ? (\n        <ScaledPreview {...{ zoom }}>\n          <SnapshotSurface html={snapshot.html} stylesheet={snapshot.css} />\n        </ScaledPreview>\n      ) : null;\n  }\n};\n\nexport interface SurfacePreviewProps {\n  surface: StudioSurface;\n  composition: Composition;\n  validation: ValidationResult;\n  view: SurfaceView;\n  /** Scales the `react`, `html` and `snapshot` renders. Defaults to `fit`. */\n  zoom?: PreviewZoom;\n  /** Styles a frame around the render or source alone; diagnostics sit below it. */\n  frameCss?: SerializedStyles | undefined;\n  /** A relevant recovery destination when rendering fails. */\n  errorHref?: string | undefined;\n  /** `false` leaves out the composition's leading title. Defaults to `true`. */\n  heading?: boolean | undefined;\n  /** Runs the requested enhancements on React or shadow-DOM HTML previews. */\n  enhancements?: readonly string[] | undefined;\n}\n\n/** One surface's render or source, with what it reported. */\nexport const SurfacePreview = ({\n  surface,\n  composition,\n  validation,\n  view,\n  zoom = 'fit',\n  frameCss,\n  errorHref,\n  heading,\n  enhancements,\n}: SurfacePreviewProps) => {\n  const { runtime } = useStudio();\n  const output = useMemo(\n    () =>\n      renderSurfaceOutput(runtime, surface, composition, validation, {\n        heading,\n        enhancements,\n      }),\n    [runtime, surface, composition, validation, heading, enhancements]\n  );\n  const { error, warnings, slack } = output;\n\n  return (\n    <>\n      {error ? (\n        <EuiCallOut\n          announceOnMount\n          size=\"s\"\n          color=\"danger\"\n          iconType=\"error\"\n          title=\"This surface could not render\"\n          text={\n            <>\n              <p>{error}</p>\n              {errorHref ? (\n                <EuiLink href={errorHref}>\n                  Open this example in Workbench\n                </EuiLink>\n              ) : null}\n            </>\n          }\n        />\n      ) : (\n        <SurfaceFrame {...{ frameCss }}>\n          {view === 'source' ? (\n            <>\n              <SourceView {...{ output }} />\n              {slack ? (\n                <EuiText size=\"xs\">\n                  <EuiSpacer size=\"xs\" />\n                  <EuiLink\n                    href={blockKitBuilderUrl(slack.blocks)}\n                    target=\"_blank\"\n                    external>\n                    Open in Block Kit Builder\n                  </EuiLink>\n                </EuiText>\n              ) : null}\n            </>\n          ) : (\n            <Rendered\n              {...{ surface, composition, output, zoom, heading, enhancements }}\n            />\n          )}\n        </SurfaceFrame>\n      )}\n      {warnings.length ? (\n        <>\n          <EuiSpacer size=\"s\" />\n          <EuiCallOut\n            announceOnMount\n            size=\"s\"\n            color=\"warning\"\n            iconType=\"warning\"\n            title={`${SURFACE_LABELS[surface]} warnings`}>\n            <ul>\n              {warnings.map(({ path, message }) => (\n                <li key={`${path}:${message}`}>\n                  {path ? `${path}: ${message}` : message}\n                </li>\n              ))}\n            </ul>\n          </EuiCallOut>\n        </>\n      ) : null}\n    </>\n  );\n};\n"]}

package/dist/surfaces/surface_select.d.ts

@@ -0,0 +1,34 @@
+import type { IconType } from '@elastic/eui';
+import type { StudioSurface } from '../model/describe_runtime.js';
+/** A runtime surface, or the host's PNG of the snapshot surface. */
+export type PreviewSurface = StudioSurface | 'png';
+/** Every surface, or an explicit subset in display order. */
+export type SurfaceSelection = 'all' | readonly PreviewSurface[];
+export declare const PREVIEW_LABELS: Readonly<Record<PreviewSurface, string>>;
+/** The picker consolidates HTML, React, and Snapshot into one Web output. */
+export declare const outputLabel: (surface: PreviewSurface) => string;
+export declare const PREVIEW_ICONS: Readonly<Record<PreviewSurface, IconType>>;
+export declare const SURFACE_NOTES: Readonly<Record<PreviewSurface, string>>;
+/** Surfaces drawn at a fixed layout width, which a card shows as a scaled 16:9 frame. */
+export declare const isVisualSurface: (surface: PreviewSurface) => boolean;
+/** `selection` in `surfaces` order. An empty or stale subset shows every surface. */
+export declare const resolveSurfaces: (surfaces: readonly PreviewSurface[], selection: SurfaceSelection) => PreviewSurface[];
+/** From every surface, choosing one shows only it; otherwise the choice toggles, and removing the last shows every surface. */
+export declare const toggleSurface: (surfaces: readonly PreviewSurface[], selected: readonly PreviewSurface[], surface: PreviewSurface) => PreviewSurface[];
+export declare const surfaceSummary: (selected: readonly PreviewSurface[], surfaces: readonly PreviewSurface[]) => string;
+export declare const surfaceNote: (showing: readonly PreviewSurface[], available: number) => string;
+/** Adds host PNG output, optionally consolidating browser renders as HTML. */
+export declare const previewSurfaces: (supported: readonly StudioSurface[], canRasterize: boolean, consolidateBrowser?: boolean) => PreviewSurface[];
+/** The surfaces to show, and a setter that stores a full selection as `'all'`. */
+export declare const useSurfaceSelection: (surfaces: readonly PreviewSurface[], initial: SurfaceSelection) => {
+    showing: PreviewSurface[];
+    select: (next: readonly PreviewSurface[]) => void;
+};
+/** Checks the surfaces to compare. One shows at full size; several share the grid. */
+export declare const SurfaceSelect: ({ surfaces, selected, onChange, anchorPosition, }: {
+    surfaces: readonly PreviewSurface[];
+    selected: readonly PreviewSurface[];
+    onChange: (selected: readonly PreviewSurface[]) => void;
+    anchorPosition?: "downLeft" | "downRight";
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface_select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface_select.d.ts","sourceRoot":"","sources":["../../src/surfaces/surface_select.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAuB,QAAQ,EAAE,MAAM,cAAc,CAAC;AAYlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM/D,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,KAAK,CAAC;AAEnD,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,SAAS,cAAc,EAAE,CAAC;AAQjE,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAGnE,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,WAAW,GAAI,SAAS,cAAc,KAAG,MACA,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,CAGpE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAQlE,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,eAAe,GAAI,SAAS,cAAc,KAAG,OAIvC,CAAC;AAEpB,qFAAqF;AACrF,eAAO,MAAM,eAAe,GAC1B,UAAU,SAAS,cAAc,EAAE,EACnC,WAAW,gBAAgB,KAC1B,cAAc,EAMhB,CAAC;AAEF,+HAA+H;AAC/H,eAAO,MAAM,aAAa,GACxB,UAAU,SAAS,cAAc,EAAE,EACnC,UAAU,SAAS,cAAc,EAAE,EACnC,SAAS,cAAc,KACtB,cAAc,EAShB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,UAAU,SAAS,cAAc,EAAE,EACnC,UAAU,SAAS,cAAc,EAAE,KAClC,MAQF,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,SAAS,SAAS,cAAc,EAAE,EAClC,WAAW,MAAM,KAChB,MAQF,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,eAAe,GAC1B,WAAW,SAAS,aAAa,EAAE,EACnC,cAAc,OAAO,EACrB,4BAA0B,KACzB,cAAc,EAYb,CAAC;AAWL,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,SAAS,cAAc,EAAE,EACnC,SAAS,gBAAgB;;mBAGH,SAAS,cAAc,EAAE;CAGhD,CAAC;AAIF,sFAAsF;AACtF,eAAO,MAAM,aAAa,GAAI,mDAK3B;IACD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CAC3C,qDAgEA,CAAC"}

package/dist/surfaces/surface_select.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * 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 { useState } from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPopover, EuiSelectable, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { SURFACE_LABELS } from '../model/describe_runtime.js';
+import { PngLogo } from './surface_logos.js';
+import { SURFACE_ICONS } from './surface_preview.js';
+export const PREVIEW_LABELS = {
+    ...SURFACE_LABELS,
+    png: 'PNG',
+};
+/** The picker consolidates HTML, React, and Snapshot into one Web output. */
+export const outputLabel = (surface) => surface === 'html' ? 'Web' : PREVIEW_LABELS[surface];
+export const PREVIEW_ICONS = {
+    ...SURFACE_ICONS,
+    png: PngLogo,
+};
+export const SURFACE_NOTES = {
+    react: 'Live React, styled by the host.',
+    html: 'HTML and its stylesheet in shadow DOM.',
+    slack: 'Block Kit, drawn as Slack would.',
+    markdown: 'Markdown for chat and docs.',
+    text: 'Plain text with no markup.',
+    snapshot: 'The React render with the pack stylesheet, laid out for an image.',
+    png: 'The snapshot, rasterized by the host.',
+};
+/** Surfaces drawn at a fixed layout width, which a card shows as a scaled 16:9 frame. */
+export const isVisualSurface = (surface) => surface === 'react' ||
+    surface === 'html' ||
+    surface === 'snapshot' ||
+    surface === 'png';
+/** `selection` in `surfaces` order. An empty or stale subset shows every surface. */
+export const resolveSurfaces = (surfaces, selection) => {
+    if (selection === 'all') {
+        return [...surfaces];
+    }
+    const picked = surfaces.filter((surface) => selection.includes(surface));
+    return picked.length ? picked : [...surfaces];
+};
+/** From every surface, choosing one shows only it; otherwise the choice toggles, and removing the last shows every surface. */
+export const toggleSurface = (surfaces, selected, surface) => {
+    if (selected.length === surfaces.length) {
+        return [surface];
+    }
+    const next = selected.includes(surface)
+        ? selected.filter((item) => item !== surface)
+        : [...selected, surface];
+    const ordered = surfaces.filter((item) => next.includes(item));
+    return ordered.length ? ordered : [...surfaces];
+};
+export const surfaceSummary = (selected, surfaces) => {
+    if (selected.length === surfaces.length) {
+        return `${surfaces.length} outputs`;
+    }
+    const [only] = selected;
+    return selected.length === 1 && only
+        ? outputLabel(only)
+        : selected.map(outputLabel).join(', ');
+};
+export const surfaceNote = (showing, available) => {
+    const [only] = showing;
+    if (showing.length === 1 && only) {
+        return SURFACE_NOTES[only];
+    }
+    return showing.length === available
+        ? `All ${available} outputs from the same props. Pick an output above to inspect one at full size, or several to compare.`
+        : `Comparing ${showing.length} outputs from the same props.`;
+};
+/** Adds host PNG output, optionally consolidating browser renders as HTML. */
+export const previewSurfaces = (supported, canRasterize, consolidateBrowser = false) => supported.flatMap((surface) => {
+    if (consolidateBrowser &&
+        supported.includes('html') &&
+        (surface === 'react' || surface === 'snapshot')) {
+        return surface === 'snapshot' && canRasterize ? ['png'] : [];
+    }
+    return surface === 'snapshot' && canRasterize
+        ? [surface, 'png']
+        : [surface];
+});
+const Option = ({ icon, label }) => (_jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(EuiIcon, { type: icon, size: "m", "aria-hidden": true }) }), _jsx(EuiFlexItem, { children: label })] }));
+/** The surfaces to show, and a setter that stores a full selection as `'all'`. */
+export const useSurfaceSelection = (surfaces, initial) => {
+    const [selection, setSelection] = useState(initial);
+    const select = (next) => setSelection(next.length === surfaces.length ? 'all' : next);
+    return { showing: resolveSurfaces(surfaces, selection), select };
+};
+const MENU_WIDTH = 220;
+/** Checks the surfaces to compare. One shows at full size; several share the grid. */
+export const SurfaceSelect = ({ surfaces, selected, onChange, anchorPosition = 'downLeft', }) => {
+    const { euiTheme } = useEuiTheme();
+    const [isOpen, setOpen] = useState(false);
+    const summary = surfaceSummary(selected, surfaces);
+    const options = surfaces.map((surface) => ({
+        label: outputLabel(surface),
+        key: surface,
+        surface,
+        checked: selected.includes(surface) ? 'on' : undefined,
+    }));
+    return (_jsx(EuiPopover, { isOpen: isOpen, closePopover: () => setOpen(false), anchorPosition, panelPaddingSize: "none", button: _jsxs(EuiButton, { size: "s", color: "text", iconType: "chevronSingleDown", iconSide: "right", "aria-label": `Outputs: ${summary}`, onClick: () => setOpen((open) => !open), children: [_jsx("span", { css: css `
+              margin-inline-end: ${euiTheme.size.s};
+              color: ${euiTheme.colors.textSubdued};
+              font-weight: ${euiTheme.font.weight.regular};
+            `, children: "Outputs" }), _jsx("span", { css: css `
+              display: inline-block;
+              max-width: ${MENU_WIDTH}px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              vertical-align: bottom;
+            `, children: summary })] }), children: _jsx("div", { css: css `
+          min-width: ${MENU_WIDTH}px;
+        `, children: _jsx(EuiSelectable, { "aria-label": "Outputs", options, onChange: (_next, _event, { surface }) => onChange(toggleSurface(surfaces, selected, surface)), listProps: { bordered: false }, renderOption: ({ surface, label }) => (_jsx(Option, { icon: PREVIEW_ICONS[surface], label })), children: (list) => list }) }) }));
+};
+//# sourceMappingURL=surface_select.js.map

package/dist/surfaces/surface_select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_select.js","sourceRoot":"","sources":["../../src/surfaces/surface_select.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 React, { useState } from 'react';\nimport type { EuiSelectableOption, IconType } from '@elastic/eui';\nimport {\n  EuiButton,\n  EuiFlexGroup,\n  EuiFlexItem,\n  EuiIcon,\n  EuiPopover,\n  EuiSelectable,\n  useEuiTheme,\n} from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport type { StudioSurface } from '../model/describe_runtime';\nimport { SURFACE_LABELS } from '../model/describe_runtime';\n\nimport { PngLogo } from './surface_logos';\nimport { SURFACE_ICONS } from './surface_preview';\n\n/** A runtime surface, or the host's PNG of the snapshot surface. */\nexport type PreviewSurface = StudioSurface | 'png';\n\n/** Every surface, or an explicit subset in display order. */\nexport type SurfaceSelection = 'all' | readonly PreviewSurface[];\n\ninterface SurfaceOptionData {\n  surface: PreviewSurface;\n}\n\ntype SurfaceOption = EuiSelectableOption<SurfaceOptionData>;\n\nexport const PREVIEW_LABELS: Readonly<Record<PreviewSurface, string>> = {\n  ...SURFACE_LABELS,\n  png: 'PNG',\n};\n\n/** The picker consolidates HTML, React, and Snapshot into one Web output. */\nexport const outputLabel = (surface: PreviewSurface): string =>\n  surface === 'html' ? 'Web' : PREVIEW_LABELS[surface];\n\nexport const PREVIEW_ICONS: Readonly<Record<PreviewSurface, IconType>> = {\n  ...SURFACE_ICONS,\n  png: PngLogo,\n};\n\nexport const SURFACE_NOTES: Readonly<Record<PreviewSurface, string>> = {\n  react: 'Live React, styled by the host.',\n  html: 'HTML and its stylesheet in shadow DOM.',\n  slack: 'Block Kit, drawn as Slack would.',\n  markdown: 'Markdown for chat and docs.',\n  text: 'Plain text with no markup.',\n  snapshot: 'The React render with the pack stylesheet, laid out for an image.',\n  png: 'The snapshot, rasterized by the host.',\n};\n\n/** Surfaces drawn at a fixed layout width, which a card shows as a scaled 16:9 frame. */\nexport const isVisualSurface = (surface: PreviewSurface): boolean =>\n  surface === 'react' ||\n  surface === 'html' ||\n  surface === 'snapshot' ||\n  surface === 'png';\n\n/** `selection` in `surfaces` order. An empty or stale subset shows every surface. */\nexport const resolveSurfaces = (\n  surfaces: readonly PreviewSurface[],\n  selection: SurfaceSelection\n): PreviewSurface[] => {\n  if (selection === 'all') {\n    return [...surfaces];\n  }\n  const picked = surfaces.filter((surface) => selection.includes(surface));\n  return picked.length ? picked : [...surfaces];\n};\n\n/** From every surface, choosing one shows only it; otherwise the choice toggles, and removing the last shows every surface. */\nexport const toggleSurface = (\n  surfaces: readonly PreviewSurface[],\n  selected: readonly PreviewSurface[],\n  surface: PreviewSurface\n): PreviewSurface[] => {\n  if (selected.length === surfaces.length) {\n    return [surface];\n  }\n  const next = selected.includes(surface)\n    ? selected.filter((item) => item !== surface)\n    : [...selected, surface];\n  const ordered = surfaces.filter((item) => next.includes(item));\n  return ordered.length ? ordered : [...surfaces];\n};\n\nexport const surfaceSummary = (\n  selected: readonly PreviewSurface[],\n  surfaces: readonly PreviewSurface[]\n): string => {\n  if (selected.length === surfaces.length) {\n    return `${surfaces.length} outputs`;\n  }\n  const [only] = selected;\n  return selected.length === 1 && only\n    ? outputLabel(only)\n    : selected.map(outputLabel).join(', ');\n};\n\nexport const surfaceNote = (\n  showing: readonly PreviewSurface[],\n  available: number\n): string => {\n  const [only] = showing;\n  if (showing.length === 1 && only) {\n    return SURFACE_NOTES[only];\n  }\n  return showing.length === available\n    ? `All ${available} outputs from the same props. Pick an output above to inspect one at full size, or several to compare.`\n    : `Comparing ${showing.length} outputs from the same props.`;\n};\n\n/** Adds host PNG output, optionally consolidating browser renders as HTML. */\nexport const previewSurfaces = (\n  supported: readonly StudioSurface[],\n  canRasterize: boolean,\n  consolidateBrowser = false\n): PreviewSurface[] =>\n  supported.flatMap((surface): PreviewSurface[] => {\n    if (\n      consolidateBrowser &&\n      supported.includes('html') &&\n      (surface === 'react' || surface === 'snapshot')\n    ) {\n      return surface === 'snapshot' && canRasterize ? ['png'] : [];\n    }\n    return surface === 'snapshot' && canRasterize\n      ? [surface, 'png']\n      : [surface];\n  });\n\nconst Option = ({ icon, label }: { icon: IconType; label: string }) => (\n  <EuiFlexGroup gutterSize=\"s\" alignItems=\"center\" responsive={false}>\n    <EuiFlexItem grow={false}>\n      <EuiIcon type={icon} size=\"m\" aria-hidden={true} />\n    </EuiFlexItem>\n    <EuiFlexItem>{label}</EuiFlexItem>\n  </EuiFlexGroup>\n);\n\n/** The surfaces to show, and a setter that stores a full selection as `'all'`. */\nexport const useSurfaceSelection = (\n  surfaces: readonly PreviewSurface[],\n  initial: SurfaceSelection\n) => {\n  const [selection, setSelection] = useState<SurfaceSelection>(initial);\n  const select = (next: readonly PreviewSurface[]) =>\n    setSelection(next.length === surfaces.length ? 'all' : next);\n  return { showing: resolveSurfaces(surfaces, selection), select };\n};\n\nconst MENU_WIDTH = 220;\n\n/** Checks the surfaces to compare. One shows at full size; several share the grid. */\nexport const SurfaceSelect = ({\n  surfaces,\n  selected,\n  onChange,\n  anchorPosition = 'downLeft',\n}: {\n  surfaces: readonly PreviewSurface[];\n  selected: readonly PreviewSurface[];\n  onChange: (selected: readonly PreviewSurface[]) => void;\n  anchorPosition?: 'downLeft' | 'downRight';\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const [isOpen, setOpen] = useState(false);\n  const summary = surfaceSummary(selected, surfaces);\n  const options: SurfaceOption[] = surfaces.map((surface): SurfaceOption => ({\n    label: outputLabel(surface),\n    key: surface,\n    surface,\n    checked: selected.includes(surface) ? 'on' : undefined,\n  }));\n\n  return (\n    <EuiPopover\n      isOpen={isOpen}\n      closePopover={() => setOpen(false)}\n      {...{ anchorPosition }}\n      panelPaddingSize=\"none\"\n      button={\n        <EuiButton\n          size=\"s\"\n          color=\"text\"\n          iconType=\"chevronSingleDown\"\n          iconSide=\"right\"\n          aria-label={`Outputs: ${summary}`}\n          onClick={() => setOpen((open) => !open)}>\n          <span\n            css={css`\n              margin-inline-end: ${euiTheme.size.s};\n              color: ${euiTheme.colors.textSubdued};\n              font-weight: ${euiTheme.font.weight.regular};\n            `}>\n            Outputs\n          </span>\n          <span\n            css={css`\n              display: inline-block;\n              max-width: ${MENU_WIDTH}px;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              vertical-align: bottom;\n            `}>\n            {summary}\n          </span>\n        </EuiButton>\n      }>\n      <div\n        css={css`\n          min-width: ${MENU_WIDTH}px;\n        `}>\n        <EuiSelectable<SurfaceOptionData>\n          aria-label=\"Outputs\"\n          {...{ options }}\n          onChange={(_next, _event, { surface }) =>\n            onChange(toggleSurface(surfaces, selected, surface))\n          }\n          listProps={{ bordered: false }}\n          renderOption={({ surface, label }) => (\n            <Option icon={PREVIEW_ICONS[surface]} {...{ label }} />\n          )}>\n          {(list) => list}\n        </EuiSelectable>\n      </div>\n    </EuiPopover>\n  );\n};\n"]}

package/dist/surfaces/text_surfaces.d.ts

@@ -0,0 +1,14 @@
+import type { SurfaceOutput } from './render_output.js';
+/** Markdown as a reader sees it. */
+export declare const MarkdownSurface: ({ markdown }: {
+    markdown: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** Plain text, which looks the same rendered as it does as source. */
+export declare const TextSurface: ({ text }: {
+    text: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** A surface's output as source, formatted once the formatter has loaded. */
+export declare const SourceView: ({ output: { source, language }, }: {
+    output: SurfaceOutput;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=text_surfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text_surfaces.d.ts","sourceRoot":"","sources":["../../src/surfaces/text_surfaces.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,oCAAoC;AACpC,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,qDAEjE,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,WAAW,GAAI,UAAU;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,qDAQrD,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,UAAU,GAAI,mCAExB;IACD,MAAM,EAAE,aAAa,CAAC;CACvB,qDA4BA,CAAC"}

package/dist/surfaces/text_surfaces.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/*
+ * 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 { useEffect, useState } from 'react';
+import { EuiCodeBlock, EuiMarkdownFormat } from '@elastic/eui';
+import { formatSource } from './format_source.js';
+/** Markdown as a reader sees it. */
+export const MarkdownSurface = ({ markdown }) => (_jsx(EuiMarkdownFormat, { textSize: "m", children: markdown }));
+/** Plain text, which looks the same rendered as it does as source. */
+export const TextSurface = ({ text }) => (_jsx(EuiCodeBlock, { language: "text", fontSize: "l", paddingSize: "none", transparentBackground: true, children: text }));
+/** A surface's output as source, formatted once the formatter has loaded. */
+export const SourceView = ({ output: { source, language }, }) => {
+    const [formatted, setFormatted] = useState();
+    useEffect(() => {
+        let isCurrent = true;
+        void formatSource(source, language).then((text) => {
+            if (isCurrent) {
+                setFormatted({ source, text });
+            }
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [source, language]);
+    return (_jsx(EuiCodeBlock, { language: language, fontSize: "s", paddingSize: "s", isCopyable: true, overflowHeight: 480, children: formatted?.source === source ? formatted.text : source }));
+};
+//# sourceMappingURL=text_surfaces.js.map

package/dist/surfaces/text_surfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text_surfaces.js","sourceRoot":"","sources":["../../src/surfaces/text_surfaces.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,oCAAoC;AACpC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE,CAAC,CACrE,KAAC,iBAAiB,IAAC,QAAQ,EAAC,GAAG,YAAE,QAAQ,GAAqB,CAC/D,CAAC;AAEF,sEAAsE;AACtE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CACzD,KAAC,YAAY,IACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,GAAG,EACZ,WAAW,EAAC,MAAM,EAClB,qBAAqB,kBACpB,IAAI,GACQ,CAChB,CAAC;AAEF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAG7B,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAGtC,CAAC;IAEL,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,KAAK,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YAChD,IAAI,SAAS,EAAE,CAAC;gBACd,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,GAAG,EACZ,WAAW,EAAC,GAAG,EACf,UAAU,QACV,cAAc,EAAE,GAAG,YAClB,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,GAC1C,CAChB,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 React, { useEffect, useState } from 'react';\nimport { EuiCodeBlock, EuiMarkdownFormat } from '@elastic/eui';\n\nimport { formatSource } from './format_source';\nimport type { SurfaceOutput } from './render_output';\n\n/** Markdown as a reader sees it. */\nexport const MarkdownSurface = ({ markdown }: { markdown: string }) => (\n  <EuiMarkdownFormat textSize=\"m\">{markdown}</EuiMarkdownFormat>\n);\n\n/** Plain text, which looks the same rendered as it does as source. */\nexport const TextSurface = ({ text }: { text: string }) => (\n  <EuiCodeBlock\n    language=\"text\"\n    fontSize=\"l\"\n    paddingSize=\"none\"\n    transparentBackground>\n    {text}\n  </EuiCodeBlock>\n);\n\n/** A surface's output as source, formatted once the formatter has loaded. */\nexport const SourceView = ({\n  output: { source, language },\n}: {\n  output: SurfaceOutput;\n}) => {\n  const [formatted, setFormatted] = useState<{\n    source: string;\n    text: string;\n  }>();\n\n  useEffect(() => {\n    let isCurrent = true;\n    void formatSource(source, language).then((text) => {\n      if (isCurrent) {\n        setFormatted({ source, text });\n      }\n    });\n    return () => {\n      isCurrent = false;\n    };\n  }, [source, language]);\n\n  return (\n    <EuiCodeBlock\n      language={language}\n      fontSize=\"s\"\n      paddingSize=\"s\"\n      isCopyable\n      overflowHeight={480}>\n      {formatted?.source === source ? formatted.text : source}\n    </EuiCodeBlock>\n  );\n};\n"]}

package/dist/surfaces/zoom_select.d.ts

@@ -0,0 +1,9 @@
+import type { PreviewZoom } from './scaled_preview.js';
+export declare const zoomLabel: (zoom: PreviewZoom) => string;
+/** Chooses how the visual surfaces scale: fit to the panel, or a fixed zoom. */
+export declare const ZoomSelect: ({ zoom, onChange, isDisabled, }: {
+    zoom: PreviewZoom;
+    onChange: (zoom: PreviewZoom) => void;
+    isDisabled?: boolean;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=zoom_select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zoom_select.d.ts","sourceRoot":"","sources":["../../src/surfaces/zoom_select.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,eAAO,MAAM,SAAS,GAAI,MAAM,WAAW,KAAG,MACe,CAAC;AAE9D,gFAAgF;AAChF,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,qDAgDA,CAAC"}

package/dist/surfaces/zoom_select.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/*
+ * 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 { useState } from 'react';
+import { EuiButtonEmpty, EuiPopover, EuiSelectable } from '@elastic/eui';
+import { css } from '@emotion/react';
+const ZOOMS = ['fit', 0.5, 0.75, 1, 1.5, 2];
+export const zoomLabel = (zoom) => zoom === 'fit' ? 'Fit width' : `${Math.round(zoom * 100)}%`;
+/** Chooses how the visual surfaces scale: fit to the panel, or a fixed zoom. */
+export const ZoomSelect = ({ zoom, onChange, isDisabled = false, }) => {
+    const [isOpen, setOpen] = useState(false);
+    const options = ZOOMS.map((candidate) => ({
+        key: String(candidate),
+        label: zoomLabel(candidate),
+        checked: candidate === zoom ? 'on' : undefined,
+    }));
+    return (_jsx(EuiPopover, { "aria-label": "Zoom", isOpen: isOpen, closePopover: () => setOpen(false), panelPaddingSize: "none", anchorPosition: "downRight", button: _jsx(EuiButtonEmpty, { size: "xs", color: "text", iconType: "chevronSingleDown", iconSide: "right", isDisabled, onClick: () => setOpen((open) => !open), "aria-label": `Zoom: ${zoomLabel(zoom)}`, children: zoomLabel(zoom) }), children: _jsx(EuiSelectable, { "aria-label": "Zoom", singleSelection: "always", options: options, onChange: (next) => {
+                const index = next.findIndex(({ checked }) => checked === 'on');
+                const selected = ZOOMS[index];
+                if (selected !== undefined) {
+                    onChange(selected);
+                    setOpen(false);
+                }
+            }, listProps: { bordered: false }, css: css `
+          min-width: 180px;
+        `, children: (list) => list }) }));
+};
+//# sourceMappingURL=zoom_select.js.map

package/dist/surfaces/zoom_select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom_select.js","sourceRoot":"","sources":["../../src/surfaces/zoom_select.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAIrC,MAAM,KAAK,GAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAiB,EAAU,EAAE,CACrD,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC;AAE9D,gFAAgF;AAChF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,UAAU,GAAG,KAAK,GAKnB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,SAAS,EAAuB,EAAE,CAAC,CAAC;QAC7D,GAAG,EAAE,MAAM,CAAC,SAAS,CAAC;QACtB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC;QAC3B,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;KAC/C,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,KAAC,UAAU,kBACE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAClC,gBAAgB,EAAC,MAAM,EACvB,cAAc,EAAC,WAAW,EAC1B,MAAM,EACJ,KAAC,cAAc,IACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,mBAAmB,EAC5B,QAAQ,EAAC,OAAO,EACV,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAC3B,SAAS,SAAS,CAAC,IAAI,CAAC,EAAE,YACrC,SAAS,CAAC,IAAI,CAAC,GACD,YAEnB,KAAC,aAAa,kBACD,MAAM,EACjB,eAAe,EAAC,QAAQ,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;gBACjB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC;gBAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC9B,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;oBAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;oBACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC,EACD,SAAS,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAC9B,GAAG,EAAE,GAAG,CAAA;;SAEP,YACA,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GACD,GACL,CACd,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 React, { useState } from 'react';\nimport type { EuiSelectableOption } from '@elastic/eui';\nimport { EuiButtonEmpty, EuiPopover, EuiSelectable } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport type { PreviewZoom } from './scaled_preview';\n\nconst ZOOMS: readonly PreviewZoom[] = ['fit', 0.5, 0.75, 1, 1.5, 2];\n\nexport const zoomLabel = (zoom: PreviewZoom): string =>\n  zoom === 'fit' ? 'Fit width' : `${Math.round(zoom * 100)}%`;\n\n/** Chooses how the visual surfaces scale: fit to the panel, or a fixed zoom. */\nexport const ZoomSelect = ({\n  zoom,\n  onChange,\n  isDisabled = false,\n}: {\n  zoom: PreviewZoom;\n  onChange: (zoom: PreviewZoom) => void;\n  isDisabled?: boolean;\n}) => {\n  const [isOpen, setOpen] = useState(false);\n\n  const options = ZOOMS.map((candidate): EuiSelectableOption => ({\n    key: String(candidate),\n    label: zoomLabel(candidate),\n    checked: candidate === zoom ? 'on' : undefined,\n  }));\n\n  return (\n    <EuiPopover\n      aria-label=\"Zoom\"\n      isOpen={isOpen}\n      closePopover={() => setOpen(false)}\n      panelPaddingSize=\"none\"\n      anchorPosition=\"downRight\"\n      button={\n        <EuiButtonEmpty\n          size=\"xs\"\n          color=\"text\"\n          iconType=\"chevronSingleDown\"\n          iconSide=\"right\"\n          {...{ isDisabled }}\n          onClick={() => setOpen((open) => !open)}\n          aria-label={`Zoom: ${zoomLabel(zoom)}`}>\n          {zoomLabel(zoom)}\n        </EuiButtonEmpty>\n      }>\n      <EuiSelectable\n        aria-label=\"Zoom\"\n        singleSelection=\"always\"\n        options={options}\n        onChange={(next) => {\n          const index = next.findIndex(({ checked }) => checked === 'on');\n          const selected = ZOOMS[index];\n          if (selected !== undefined) {\n            onChange(selected);\n            setOpen(false);\n          }\n        }}\n        listProps={{ bordered: false }}\n        css={css`\n          min-width: 180px;\n        `}>\n        {(list) => list}\n      </EuiSelectable>\n    </EuiPopover>\n  );\n};\n"]}

package/dist/types.d.ts

@@ -0,0 +1,32 @@
+import type { Composition } from '@elastic/isomer-sdk';
+import type { StudioConfig } from './config.js';
+/**
+ * Compiles JSX source to JavaScript using the classic runtime: elements become `h(...)` calls and
+ * fragments `Fragment`.
+ */
+export type JsxTransform = (source: string) => Promise<string>;
+/** Raster pixels per CSS pixel in a {@link RasterizePng} image. */
+export declare const PNG_SCALE = 2;
+/**
+ * Rasterizes a composition to PNG on the host, which can run `@elastic/isomer-image-takumi` where the browser can't.
+ * The image is drawn at {@link PNG_SCALE}, and the preview shows it at its size in CSS pixels.
+ */
+export type RasterizePng = (composition: Composition, options: {
+    signal: AbortSignal;
+}) => Promise<Blob>;
+/** Writes compositions as one PDF on the host, a page each, drawn like {@link RasterizePng}'s images. */
+export type RenderPdf = (compositions: readonly Composition[], options?: {
+    title?: string | undefined;
+    signal?: AbortSignal | undefined;
+}) => Promise<Blob>;
+export interface IsomerStudioProps extends StudioConfig {
+    /** Compiles edited JSX; without it the editor offers JSON only. */
+    transformJsx?: JsxTransform | undefined;
+    /** Adds a PNG preview beneath the `snapshot` surface; without it there is none. */
+    rasterizePng?: RasterizePng | undefined;
+    /** Lets apps download PDFs; without it they can't. */
+    renderPdf?: RenderPdf | undefined;
+    /** Why the config's latest apps were rejected, shown above the page. */
+    configProblems?: readonly string[] | undefined;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAE/D,mEAAmE;AACnE,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,CACzB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;IAAE,MAAM,EAAE,WAAW,CAAA;CAAE,KAC7B,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,yGAAyG;AACzG,MAAM,MAAM,SAAS,GAAG,CACtB,YAAY,EAAE,SAAS,WAAW,EAAE,EACpC,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,KACvE,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,wEAAwE;IACxE,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;CAChD"}

package/dist/types.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+/** Raster pixels per CSS pixel in a {@link RasterizePng} image. */
+export const PNG_SCALE = 2;
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,mEAAmE;AACnE,MAAM,CAAC,MAAM,SAAS,GAAG,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 { Composition } from '@elastic/isomer-sdk';\n\nimport type { StudioConfig } from './config';\n\n/**\n * Compiles JSX source to JavaScript using the classic runtime: elements become `h(...)` calls and\n * fragments `Fragment`.\n */\nexport type JsxTransform = (source: string) => Promise<string>;\n\n/** Raster pixels per CSS pixel in a {@link RasterizePng} image. */\nexport const PNG_SCALE = 2;\n\n/**\n * Rasterizes a composition to PNG on the host, which can run `@elastic/isomer-image-takumi` where the browser can't.\n * The image is drawn at {@link PNG_SCALE}, and the preview shows it at its size in CSS pixels.\n */\nexport type RasterizePng = (\n  composition: Composition,\n  options: { signal: AbortSignal }\n) => Promise<Blob>;\n\n/** Writes compositions as one PDF on the host, a page each, drawn like {@link RasterizePng}'s images. */\nexport type RenderPdf = (\n  compositions: readonly Composition[],\n  options?: { title?: string | undefined; signal?: AbortSignal | undefined }\n) => Promise<Blob>;\n\nexport interface IsomerStudioProps extends StudioConfig {\n  /** Compiles edited JSX; without it the editor offers JSON only. */\n  transformJsx?: JsxTransform | undefined;\n  /** Adds a PNG preview beneath the `snapshot` surface; without it there is none. */\n  rasterizePng?: RasterizePng | undefined;\n  /** Lets apps download PDFs; without it they can't. */\n  renderPdf?: RenderPdf | undefined;\n  /** Why the config's latest apps were rejected, shown above the page. */\n  configProblems?: readonly string[] | undefined;\n}\n"]}