@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/surfaces/applicable_enhancements.d.ts

@@ -0,0 +1,4 @@
+import type { ChildNodeWalker, Composition, EnhancementDefinition } from '@elastic/isomer-sdk';
+/** Registered enhancements whose `appliesTo` gate passes for `body`; a gate that throws on an invalid draft does not. */
+export declare const applicableEnhancements: (definitions: readonly EnhancementDefinition[], body: Composition["body"], walk: ChildNodeWalker) => EnhancementDefinition[];
+//# sourceMappingURL=applicable_enhancements.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"applicable_enhancements.d.ts","sourceRoot":"","sources":["../../src/surfaces/applicable_enhancements.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,yHAAyH;AACzH,eAAO,MAAM,sBAAsB,GACjC,aAAa,SAAS,qBAAqB,EAAE,EAC7C,MAAM,WAAW,CAAC,MAAM,CAAC,EACzB,MAAM,eAAe,KACpB,qBAAqB,EAOpB,CAAC"}

package/dist/surfaces/applicable_enhancements.js

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+/** Registered enhancements whose `appliesTo` gate passes for `body`; a gate that throws on an invalid draft does not. */
+export const applicableEnhancements = (definitions, body, walk) => definitions.filter((definition) => {
+    try {
+        return definition.appliesTo(body, walk);
+    }
+    catch {
+        return false;
+    }
+});
+//# sourceMappingURL=applicable_enhancements.js.map

package/dist/surfaces/applicable_enhancements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applicable_enhancements.js","sourceRoot":"","sources":["../../src/surfaces/applicable_enhancements.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,yHAAyH;AACzH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,WAA6C,EAC7C,IAAyB,EACzB,IAAqB,EACI,EAAE,CAC3B,WAAW,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE;IAChC,IAAI,CAAC;QACH,OAAO,UAAU,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,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 {\n  ChildNodeWalker,\n  Composition,\n  EnhancementDefinition,\n} from '@elastic/isomer-sdk';\n\n/** Registered enhancements whose `appliesTo` gate passes for `body`; a gate that throws on an invalid draft does not. */\nexport const applicableEnhancements = (\n  definitions: readonly EnhancementDefinition[],\n  body: Composition['body'],\n  walk: ChildNodeWalker\n): EnhancementDefinition[] =>\n  definitions.filter((definition) => {\n    try {\n      return definition.appliesTo(body, walk);\n    } catch {\n      return false;\n    }\n  });\n"]}

package/dist/surfaces/enhancement_select.d.ts

@@ -0,0 +1,10 @@
+import type { EnhancementDefinition } from '@elastic/isomer-sdk';
+export interface EnhancementSelectProps {
+    definitions: readonly EnhancementDefinition[];
+    selected: readonly string[];
+    disabled: boolean;
+    onChange: (ids: string[]) => void;
+}
+/** Opt-in checklist for enhancements that apply to the current composition. */
+export declare const EnhancementSelect: ({ definitions, selected, disabled, onChange, }: EnhancementSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhancement_select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enhancement_select.d.ts","sourceRoot":"","sources":["../../src/surfaces/enhancement_select.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC9C,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnC;AAED,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB,GAAI,gDAK/B,sBAAsB,qDAiExB,CAAC"}

package/dist/surfaces/enhancement_select.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { EuiButtonEmpty, EuiCheckbox, EuiPopover, EuiSpacer, EuiText, } from '@elastic/eui';
+import { css } from '@emotion/react';
+/** Opt-in checklist for enhancements that apply to the current composition. */
+export const EnhancementSelect = ({ definitions, selected, disabled, onChange, }) => {
+    const [open, setOpen] = useState(false);
+    const ids = definitions.map(({ id }) => id);
+    const enabled = ids.filter((id) => selected.includes(id));
+    return (_jsx(EuiPopover, { isOpen: open && !disabled, closePopover: () => setOpen(false), anchorPosition: "downRight", panelPaddingSize: "s", button: _jsxs(EuiButtonEmpty, { size: "xs", color: "text", iconType: "chevronSingleDown", iconSide: "right", isDisabled: disabled, onClick: () => setOpen((value) => !value), children: ["Enhancements (", enabled.length, "/", ids.length, ")"] }), children: _jsx("div", { role: "group", "aria-label": "Enhancements", children: definitions.map(({ id, name, description }) => {
+                const label = name ?? id;
+                const helpId = description
+                    ? `studio-enhancement-help-${id}`
+                    : undefined;
+                return (_jsxs("div", { children: [_jsx(EuiCheckbox, { id: `studio-enhancement-${id}`, label: label, disabled: disabled, checked: selected.includes(id), "aria-describedby": helpId, onChange: (event) => onChange(event.target.checked
+                                ? [...selected, id]
+                                : selected.filter((value) => value !== id)) }), description ? (_jsxs(_Fragment, { children: [_jsx(EuiSpacer, { size: "xs" }), _jsx(EuiText, { id: helpId, size: "xs", color: "subdued", css: css `
+                      padding-inline-start: 28px;
+                    `, children: description }), _jsx(EuiSpacer, { size: "s" })] })) : null] }, id));
+            }) }) }));
+};
+//# sourceMappingURL=enhancement_select.js.map

package/dist/surfaces/enhancement_select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhancement_select.js","sourceRoot":"","sources":["../../src/surfaces/enhancement_select.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,cAAc,EACd,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AASrC,+EAA+E;AAC/E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACe,EAAE,EAAE;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,UAAU,IACT,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,EACzB,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAClC,cAAc,EAAC,WAAW,EAC1B,gBAAgB,EAAC,GAAG,EACpB,MAAM,EACJ,MAAC,cAAc,IACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,mBAAmB,EAC5B,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,+BAC1B,OAAO,CAAC,MAAM,OAAG,GAAG,CAAC,MAAM,SAC3B,YAEnB,cAAK,IAAI,EAAC,OAAO,gBAAY,cAAc,YACxC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;gBAC7C,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;gBACzB,MAAM,MAAM,GAAG,WAAW;oBACxB,CAAC,CAAC,2BAA2B,EAAE,EAAE;oBACjC,CAAC,CAAC,SAAS,CAAC;gBACd,OAAO,CACL,0BACE,KAAC,WAAW,IACV,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAC9B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,sBACZ,MAAM,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,QAAQ,CACN,KAAK,CAAC,MAAM,CAAC,OAAO;gCAClB,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,EAAE,CAAC;gCACnB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,CAC7C,GAEH,EACD,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,OAAO,IACN,EAAE,EAAE,MAAM,EACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,CAAA;;qBAEP,YACA,WAAW,GACJ,EACV,KAAC,SAAS,IAAC,IAAI,EAAC,GAAG,GAAG,IACrB,CACJ,CAAC,CAAC,CAAC,IAAI,KA7BA,EAAE,CA8BN,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACK,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 {\n  EuiButtonEmpty,\n  EuiCheckbox,\n  EuiPopover,\n  EuiSpacer,\n  EuiText,\n} from '@elastic/eui';\nimport type { EnhancementDefinition } from '@elastic/isomer-sdk';\nimport { css } from '@emotion/react';\n\nexport interface EnhancementSelectProps {\n  definitions: readonly EnhancementDefinition[];\n  selected: readonly string[];\n  disabled: boolean;\n  onChange: (ids: string[]) => void;\n}\n\n/** Opt-in checklist for enhancements that apply to the current composition. */\nexport const EnhancementSelect = ({\n  definitions,\n  selected,\n  disabled,\n  onChange,\n}: EnhancementSelectProps) => {\n  const [open, setOpen] = useState(false);\n  const ids = definitions.map(({ id }) => id);\n  const enabled = ids.filter((id) => selected.includes(id));\n\n  return (\n    <EuiPopover\n      isOpen={open && !disabled}\n      closePopover={() => setOpen(false)}\n      anchorPosition=\"downRight\"\n      panelPaddingSize=\"s\"\n      button={\n        <EuiButtonEmpty\n          size=\"xs\"\n          color=\"text\"\n          iconType=\"chevronSingleDown\"\n          iconSide=\"right\"\n          isDisabled={disabled}\n          onClick={() => setOpen((value) => !value)}>\n          Enhancements ({enabled.length}/{ids.length})\n        </EuiButtonEmpty>\n      }>\n      <div role=\"group\" aria-label=\"Enhancements\">\n        {definitions.map(({ id, name, description }) => {\n          const label = name ?? id;\n          const helpId = description\n            ? `studio-enhancement-help-${id}`\n            : undefined;\n          return (\n            <div key={id}>\n              <EuiCheckbox\n                id={`studio-enhancement-${id}`}\n                label={label}\n                disabled={disabled}\n                checked={selected.includes(id)}\n                aria-describedby={helpId}\n                onChange={(event) =>\n                  onChange(\n                    event.target.checked\n                      ? [...selected, id]\n                      : selected.filter((value) => value !== id)\n                  )\n                }\n              />\n              {description ? (\n                <>\n                  <EuiSpacer size=\"xs\" />\n                  <EuiText\n                    id={helpId}\n                    size=\"xs\"\n                    color=\"subdued\"\n                    css={css`\n                      padding-inline-start: 28px;\n                    `}>\n                    {description}\n                  </EuiText>\n                  <EuiSpacer size=\"s\" />\n                </>\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n    </EuiPopover>\n  );\n};\n"]}

package/dist/surfaces/example_picker.d.ts

@@ -0,0 +1,11 @@
+import type { StudioExample } from '../model/read_examples.js';
+export interface ExamplePickerProps {
+    examples: readonly StudioExample[];
+    example: number;
+    onChange: (example: number) => void;
+    /** Defaults to `downLeft`. */
+    anchorPosition?: 'downLeft' | 'downRight';
+}
+/** A button naming the current example that opens every example, rendered, to pick from. */
+export declare const ExamplePicker: ({ examples, example, onChange, anchorPosition, }: ExamplePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=example_picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"example_picker.d.ts","sourceRoot":"","sources":["../../src/surfaces/example_picker.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAoD5D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,8BAA8B;IAC9B,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CAC3C;AAED,4FAA4F;AAC5F,eAAO,MAAM,aAAa,GAAI,kDAK3B,kBAAkB,qDA+CpB,CAAC"}

package/dist/surfaces/example_picker.js

@@ -0,0 +1,44 @@
+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 { useMemo, useState } from 'react';
+import { EuiButton, EuiCard, EuiPopover, EuiPopoverTitle, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+import { ReactSurface } from './react_surface.js';
+import { ScaledPreview } from './scaled_preview.js';
+const PREVIEW_HEIGHT = 112;
+const PREVIEW_PADDING = 8;
+const ExampleOption = ({ example: { name, description, node }, isSelected, onSelect, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { compose } = useStudio();
+    const composition = useMemo(() => compose([node]), [compose, node]);
+    return (_jsx(EuiCard, { title: name, titleSize: "xs", titleElement: "span", ...(description === undefined ? {} : { description }), textAlign: "left", paddingSize: "s", hasBorder: true, display: isSelected ? 'primary' : 'plain', onClick: onSelect, image: _jsx("div", { "aria-hidden": true, css: css `
+            height: ${PREVIEW_HEIGHT}px;
+            overflow: hidden;
+            pointer-events: none;
+            padding: ${PREVIEW_PADDING}px;
+            background: ${euiTheme.colors.backgroundBaseSubdued};
+          `, children: _jsx(ScaledPreview, { maxHeight: PREVIEW_HEIGHT - 2 * PREVIEW_PADDING, children: _jsx(ReactSurface, { composition }) }) }) }));
+};
+/** A button naming the current example that opens every example, rendered, to pick from. */
+export const ExamplePicker = ({ examples, example, onChange, anchorPosition = 'downLeft', }) => {
+    const { euiTheme } = useEuiTheme();
+    const [isOpen, setOpen] = useState(false);
+    const name = examples[example]?.name ?? 'No examples';
+    return (_jsxs(EuiPopover, { isOpen: isOpen, closePopover: () => setOpen(false), anchorPosition, panelPaddingSize: "s", "aria-label": "Examples", button: _jsx(EuiButton, { size: "s", color: "text", iconType: "chevronSingleDown", iconSide: "right", isDisabled: !examples.length, onClick: () => setOpen((open) => !open), "aria-label": `Example: ${name}`, children: name }), children: [_jsx(EuiPopoverTitle, { paddingSize: "s", children: "Examples" }), _jsx("div", { css: css `
+          display: grid;
+          grid-template-columns: repeat(2, 260px);
+          gap: ${euiTheme.size.s};
+          max-height: 60vh;
+          overflow: auto;
+        `, children: examples.map((candidate, index) => (_jsx(ExampleOption, { example: candidate, isSelected: index === example, onSelect: () => {
+                        setOpen(false);
+                        onChange(index);
+                    } }, candidate.name))) })] }));
+};
+//# sourceMappingURL=example_picker.js.map

package/dist/surfaces/example_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example_picker.js","sourceRoot":"","sources":["../../src/surfaces/example_picker.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, { useMemo, useState } from 'react';\nimport {\n  EuiButton,\n  EuiCard,\n  EuiPopover,\n  EuiPopoverTitle,\n  useEuiTheme,\n} from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport type { StudioExample } from '../model/read_examples';\nimport { useStudio } from '../studio_context';\n\nimport { ReactSurface } from './react_surface';\nimport { ScaledPreview } from './scaled_preview';\n\nconst PREVIEW_HEIGHT = 112;\nconst PREVIEW_PADDING = 8;\n\nconst ExampleOption = ({\n  example: { name, description, node },\n  isSelected,\n  onSelect,\n}: {\n  example: StudioExample;\n  isSelected: boolean;\n  onSelect: () => void;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const { compose } = useStudio();\n  const composition = useMemo(() => compose([node]), [compose, node]);\n\n  return (\n    <EuiCard\n      title={name}\n      titleSize=\"xs\"\n      titleElement=\"span\"\n      {...(description === undefined ? {} : { description })}\n      textAlign=\"left\"\n      paddingSize=\"s\"\n      hasBorder\n      display={isSelected ? 'primary' : 'plain'}\n      onClick={onSelect}\n      image={\n        <div\n          aria-hidden={true}\n          css={css`\n            height: ${PREVIEW_HEIGHT}px;\n            overflow: hidden;\n            pointer-events: none;\n            padding: ${PREVIEW_PADDING}px;\n            background: ${euiTheme.colors.backgroundBaseSubdued};\n          `}>\n          <ScaledPreview maxHeight={PREVIEW_HEIGHT - 2 * PREVIEW_PADDING}>\n            <ReactSurface {...{ composition }} />\n          </ScaledPreview>\n        </div>\n      }\n    />\n  );\n};\n\nexport interface ExamplePickerProps {\n  examples: readonly StudioExample[];\n  example: number;\n  onChange: (example: number) => void;\n  /** Defaults to `downLeft`. */\n  anchorPosition?: 'downLeft' | 'downRight';\n}\n\n/** A button naming the current example that opens every example, rendered, to pick from. */\nexport const ExamplePicker = ({\n  examples,\n  example,\n  onChange,\n  anchorPosition = 'downLeft',\n}: ExamplePickerProps) => {\n  const { euiTheme } = useEuiTheme();\n  const [isOpen, setOpen] = useState(false);\n  const name = examples[example]?.name ?? 'No examples';\n\n  return (\n    <EuiPopover\n      isOpen={isOpen}\n      closePopover={() => setOpen(false)}\n      {...{ anchorPosition }}\n      panelPaddingSize=\"s\"\n      aria-label=\"Examples\"\n      button={\n        <EuiButton\n          size=\"s\"\n          color=\"text\"\n          iconType=\"chevronSingleDown\"\n          iconSide=\"right\"\n          isDisabled={!examples.length}\n          onClick={() => setOpen((open) => !open)}\n          aria-label={`Example: ${name}`}>\n          {name}\n        </EuiButton>\n      }>\n      <EuiPopoverTitle paddingSize=\"s\">Examples</EuiPopoverTitle>\n      <div\n        css={css`\n          display: grid;\n          grid-template-columns: repeat(2, 260px);\n          gap: ${euiTheme.size.s};\n          max-height: 60vh;\n          overflow: auto;\n        `}>\n        {examples.map((candidate, index) => (\n          <ExampleOption\n            key={candidate.name}\n            example={candidate}\n            isSelected={index === example}\n            onSelect={() => {\n              setOpen(false);\n              onChange(index);\n            }}\n          />\n        ))}\n      </div>\n    </EuiPopover>\n  );\n};\n"]}

package/dist/surfaces/format_source.d.ts

@@ -0,0 +1,4 @@
+import type { SurfaceOutput } from './render_output.js';
+/** Pretty-prints HTML and its inline CSS, and returns other languages and unparsable markup as is. */
+export declare const formatSource: (source: string, language: SurfaceOutput["language"]) => Promise<string>;
+//# sourceMappingURL=format_source.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format_source.d.ts","sourceRoot":"","sources":["../../src/surfaces/format_source.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,sGAAsG;AACtG,eAAO,MAAM,YAAY,GACvB,QAAQ,MAAM,EACd,UAAU,aAAa,CAAC,UAAU,CAAC,KAClC,OAAO,CAAC,MAAM,CAoBhB,CAAC"}

package/dist/surfaces/format_source.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+/** Pretty-prints HTML and its inline CSS, and returns other languages and unparsable markup as is. */
+export const formatSource = async (source, language) => {
+    if (language !== 'html' || !source) {
+        return source;
+    }
+    try {
+        const [{ format }, html, postcss] = await Promise.all([
+            import('prettier/standalone'),
+            import('prettier/plugins/html'),
+            import('prettier/plugins/postcss'),
+        ]);
+        const formatted = await format(source, {
+            parser: 'html',
+            plugins: [html, postcss],
+            printWidth: 80,
+            htmlWhitespaceSensitivity: 'ignore',
+        });
+        return formatted.trimEnd();
+    }
+    catch {
+        return source;
+    }
+};
+//# sourceMappingURL=format_source.js.map

package/dist/surfaces/format_source.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format_source.js","sourceRoot":"","sources":["../../src/surfaces/format_source.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,sGAAsG;AACtG,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC/B,MAAc,EACd,QAAmC,EAClB,EAAE;IACnB,IAAI,QAAQ,KAAK,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;QACnC,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,IAAI,CAAC;QACH,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,CAAC,qBAAqB,CAAC;YAC7B,MAAM,CAAC,uBAAuB,CAAC;YAC/B,MAAM,CAAC,0BAA0B,CAAC;SACnC,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAM,MAAM,CAAC,MAAM,EAAE;YACrC,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;YACxB,UAAU,EAAE,EAAE;YACd,yBAAyB,EAAE,QAAQ;SACpC,CAAC,CAAC;QACH,OAAO,SAAS,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,MAAM,CAAC;IAChB,CAAC;AACH,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 { SurfaceOutput } from './render_output';\n\n/** Pretty-prints HTML and its inline CSS, and returns other languages and unparsable markup as is. */\nexport const formatSource = async (\n  source: string,\n  language: SurfaceOutput['language']\n): Promise<string> => {\n  if (language !== 'html' || !source) {\n    return source;\n  }\n  try {\n    const [{ format }, html, postcss] = await Promise.all([\n      import('prettier/standalone'),\n      import('prettier/plugins/html'),\n      import('prettier/plugins/postcss'),\n    ]);\n    const formatted = await format(source, {\n      parser: 'html',\n      plugins: [html, postcss],\n      printWidth: 80,\n      htmlWhitespaceSensitivity: 'ignore',\n    });\n    return formatted.trimEnd();\n  } catch {\n    return source;\n  }\n};\n"]}

package/dist/surfaces/html_surface.d.ts

@@ -0,0 +1,14 @@
+/** Rendered markup in a sandboxed frame that runs no scripts, sized to its content. */
+export declare const HtmlSurface: ({ html, title, }: {
+    html: string;
+    title: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface ShadowHtmlProps {
+    html: string;
+    title: string;
+    enhancementScript?: string | undefined;
+}
+/** HTML and its stylesheet in a shadow root; only host-provided enhancement scripts run. */
+export declare const ShadowHtmlSurface: (props: ShadowHtmlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=html_surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/html_surface.tsx"],"names":[],"mappings":"AAsDA,uFAAuF;AACvF,eAAO,MAAM,WAAW,GAAI,kBAGzB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,qDA0DA,CAAC;AAEF,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC;AAsCD,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,OAAO,eAAe,qDAiBvD,CAAC"}

package/dist/surfaces/html_surface.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import { runEnhancementScript } from '@elastic/isomer-sdk/react';
+import { css } from '@emotion/react';
+import { ShadowRootHost } from './shadow_root.js';
+const MIN_HEIGHT = 48;
+const frameStyles = css `
+  display: block;
+  width: 100%;
+  border: 0;
+`;
+const EDITABLE = 'input, select, textarea, [contenteditable]:not([contenteditable="false"])';
+/** Duck-typed: the framed document's elements belong to its own realm. */
+const isEditable = (target) => typeof target === 'object' &&
+    target !== null &&
+    'closest' in target &&
+    typeof target.closest === 'function' &&
+    target.closest(EDITABLE) !== null;
+/** Re-dispatches a key pressed inside the frame from the frame element, so the page's key handlers still see it; keys typed into the frame's own fields stay there. */
+const forwardKey = (frame) => (event) => {
+    const { key, code, location, repeat, shiftKey, altKey, ctrlKey, metaKey } = event;
+    if (event.defaultPrevented || isEditable(event.target)) {
+        return;
+    }
+    const forwarded = new KeyboardEvent(event.type, {
+        ...{ key, code, location, repeat, shiftKey, altKey, ctrlKey, metaKey },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+    });
+    if (!frame.dispatchEvent(forwarded)) {
+        event.preventDefault();
+    }
+};
+const documentFor = (html) => `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;display:flow-root}</style></head><body>${html}</body></html>`;
+/** Rendered markup in a sandboxed frame that runs no scripts, sized to its content. */
+export const HtmlSurface = ({ html, title, }) => {
+    const frame = useRef(null);
+    const [height, setHeight] = useState(MIN_HEIGHT);
+    useEffect(() => {
+        const element = frame.current;
+        if (!element) {
+            return;
+        }
+        let observer;
+        let framed;
+        const onKey = forwardKey(element);
+        const measure = () => {
+            framed?.removeEventListener('keydown', onKey);
+            framed = element.contentDocument ?? undefined;
+            framed?.addEventListener('keydown', onKey);
+            const body = framed?.body;
+            if (!body) {
+                return;
+            }
+            // A frame clips what overflows it, so a fixed-width document widens the frame to show it.
+            // The width is set on the node so each measurement starts from the container's width.
+            const update = () => {
+                element.style.width = '';
+                const { scrollWidth } = body.ownerDocument.documentElement;
+                element.style.width =
+                    scrollWidth > element.clientWidth ? `${scrollWidth}px` : '';
+                setHeight(Math.max(MIN_HEIGHT, body.offsetHeight));
+            };
+            update();
+            observer?.disconnect();
+            if (typeof ResizeObserver !== 'undefined') {
+                observer = new ResizeObserver(update);
+                observer.observe(body);
+                // A frame widened past its container no longer resizes with it.
+                if (element.parentElement) {
+                    observer.observe(element.parentElement);
+                }
+            }
+        };
+        element.addEventListener('load', measure);
+        return () => {
+            element.removeEventListener('load', measure);
+            framed?.removeEventListener('keydown', onKey);
+            observer?.disconnect();
+        };
+    }, []);
+    return (_jsx("iframe", { ref: frame, title: title, sandbox: "allow-same-origin", srcDoc: documentFor(html), css: frameStyles, style: { height } }));
+};
+const ShadowHtmlContent = ({ html, enhancementScript, onError, }) => {
+    const content = useRef(null);
+    useLayoutEffect(() => {
+        const element = content.current;
+        if (!element) {
+            return;
+        }
+        element.innerHTML = html;
+        onError(undefined);
+        if (enhancementScript) {
+            try {
+                const root = element.querySelector('.isomer');
+                if (!root) {
+                    throw new Error('The HTML output has no .isomer enhancement root.');
+                }
+                runEnhancementScript(enhancementScript, root);
+            }
+            catch (error) {
+                onError(error instanceof Error ? error.message : String(error));
+            }
+        }
+        return () => element.replaceChildren();
+    }, [html, enhancementScript, onError]);
+    return (_jsx("div", { ref: content, style: { all: 'initial', display: 'flow-root', colorScheme: 'inherit' } }));
+};
+/** HTML and its stylesheet in a shadow root; only host-provided enhancement scripts run. */
+export const ShadowHtmlSurface = (props) => {
+    const [error, setError] = useState();
+    return (_jsxs(_Fragment, { children: [error ? (_jsx(EuiCallOut, { size: "s", color: "danger", title: "HTML enhancements failed", text: _jsx("p", { children: error }) })) : null, _jsx(ShadowRootHost, { title: props.title, children: () => _jsx(ShadowHtmlContent, { ...props, onError: setError }) })] }));
+};
+//# sourceMappingURL=html_surface.js.map

package/dist/surfaces/html_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html_surface.js","sourceRoot":"","sources":["../../src/surfaces/html_surface.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, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { EuiCallOut } from '@elastic/eui';\nimport { runEnhancementScript } from '@elastic/isomer-sdk/react';\nimport { css } from '@emotion/react';\n\nimport { ShadowRootHost } from './shadow_root';\n\nconst MIN_HEIGHT = 48;\n\nconst frameStyles = css`\n  display: block;\n  width: 100%;\n  border: 0;\n`;\n\nconst EDITABLE =\n  'input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])';\n\n/** Duck-typed: the framed document's elements belong to its own realm. */\nconst isEditable = (target: EventTarget | null): boolean =>\n  typeof target === 'object' &&\n  target !== null &&\n  'closest' in target &&\n  typeof target.closest === 'function' &&\n  (target as Element).closest(EDITABLE) !== null;\n\n/** Re-dispatches a key pressed inside the frame from the frame element, so the page's key handlers still see it; keys typed into the frame's own fields stay there. */\nconst forwardKey = (frame: HTMLIFrameElement) => (event: KeyboardEvent) => {\n  const { key, code, location, repeat, shiftKey, altKey, ctrlKey, metaKey } =\n    event;\n  if (event.defaultPrevented || isEditable(event.target)) {\n    return;\n  }\n  const forwarded = new KeyboardEvent(event.type, {\n    ...{ key, code, location, repeat, shiftKey, altKey, ctrlKey, metaKey },\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  });\n  if (!frame.dispatchEvent(forwarded)) {\n    event.preventDefault();\n  }\n};\n\nconst documentFor = (html: string) =>\n  `<!doctype html><html><head><meta charset=\"utf-8\"><style>body{margin:0;display:flow-root}</style></head><body>${html}</body></html>`;\n\n/** Rendered markup in a sandboxed frame that runs no scripts, sized to its content. */\nexport const HtmlSurface = ({\n  html,\n  title,\n}: {\n  html: string;\n  title: string;\n}) => {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const [height, setHeight] = useState(MIN_HEIGHT);\n\n  useEffect(() => {\n    const element = frame.current;\n    if (!element) {\n      return;\n    }\n    let observer: ResizeObserver | undefined;\n    let framed: Document | undefined;\n    const onKey = forwardKey(element);\n    const measure = () => {\n      framed?.removeEventListener('keydown', onKey);\n      framed = element.contentDocument ?? undefined;\n      framed?.addEventListener('keydown', onKey);\n      const body = framed?.body;\n      if (!body) {\n        return;\n      }\n      // A frame clips what overflows it, so a fixed-width document widens the frame to show it.\n      // The width is set on the node so each measurement starts from the container's width.\n      const update = () => {\n        element.style.width = '';\n        const { scrollWidth } = body.ownerDocument.documentElement;\n        element.style.width =\n          scrollWidth > element.clientWidth ? `${scrollWidth}px` : '';\n        setHeight(Math.max(MIN_HEIGHT, body.offsetHeight));\n      };\n      update();\n      observer?.disconnect();\n      if (typeof ResizeObserver !== 'undefined') {\n        observer = new ResizeObserver(update);\n        observer.observe(body);\n        // A frame widened past its container no longer resizes with it.\n        if (element.parentElement) {\n          observer.observe(element.parentElement);\n        }\n      }\n    };\n    element.addEventListener('load', measure);\n    return () => {\n      element.removeEventListener('load', measure);\n      framed?.removeEventListener('keydown', onKey);\n      observer?.disconnect();\n    };\n  }, []);\n\n  return (\n    <iframe\n      ref={frame}\n      title={title}\n      sandbox=\"allow-same-origin\"\n      srcDoc={documentFor(html)}\n      css={frameStyles}\n      style={{ height }}\n    />\n  );\n};\n\ninterface ShadowHtmlProps {\n  html: string;\n  title: string;\n  enhancementScript?: string | undefined;\n}\n\nconst ShadowHtmlContent = ({\n  html,\n  enhancementScript,\n  onError,\n}: ShadowHtmlProps & {\n  onError: (error: string | undefined) => void;\n}) => {\n  const content = useRef<HTMLDivElement>(null);\n  useLayoutEffect(() => {\n    const element = content.current;\n    if (!element) {\n      return;\n    }\n    element.innerHTML = html;\n    onError(undefined);\n    if (enhancementScript) {\n      try {\n        const root = element.querySelector('.isomer');\n        if (!root) {\n          throw new Error('The HTML output has no .isomer enhancement root.');\n        }\n        runEnhancementScript(enhancementScript, root);\n      } catch (error) {\n        onError(error instanceof Error ? error.message : String(error));\n      }\n    }\n    return () => element.replaceChildren();\n  }, [html, enhancementScript, onError]);\n  return (\n    <div\n      ref={content}\n      style={{ all: 'initial', display: 'flow-root', colorScheme: 'inherit' }}\n    />\n  );\n};\n\n/** HTML and its stylesheet in a shadow root; only host-provided enhancement scripts run. */\nexport const ShadowHtmlSurface = (props: ShadowHtmlProps) => {\n  const [error, setError] = useState<string>();\n  return (\n    <>\n      {error ? (\n        <EuiCallOut\n          size=\"s\"\n          color=\"danger\"\n          title=\"HTML enhancements failed\"\n          text={<p>{error}</p>}\n        />\n      ) : null}\n      <ShadowRootHost title={props.title}>\n        {() => <ShadowHtmlContent {...props} onError={setError} />}\n      </ShadowRootHost>\n    </>\n  );\n};\n"]}

package/dist/surfaces/png_surface.d.ts

@@ -0,0 +1,13 @@
+import type { Composition } from '@elastic/isomer-sdk';
+import type { SerializedStyles } from '@emotion/react';
+import type { RasterizePng } from '../types.js';
+import type { PreviewZoom } from './scaled_preview.js';
+/** The host's PNG of `composition`, refreshed as it changes. */
+export declare const PngSurface: ({ composition, rasterizePng, zoom, frameCss, }: {
+    composition: Composition;
+    rasterizePng: RasterizePng;
+    zoom?: PreviewZoom;
+    /** Styles a frame around the image alone; diagnostics sit outside it. */
+    frameCss?: SerializedStyles | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=png_surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"png_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/png_surface.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAcpD,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,gDAKxB;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACzC,qDAmGA,CAAC"}

package/dist/surfaces/png_surface.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { EuiCallOut, EuiLoadingSpinner } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { isPngUnavailableError } from '../model/png_manifest.js';
+import { PNG_SCALE } from '../types.js';
+import { ScaledPreview } from './scaled_preview.js';
+import { SurfaceFrame } from './surface_frame.js';
+const RASTERIZE_DELAY = 250;
+const describeError = (error) => error instanceof Error ? error.message : String(error);
+/** The host's PNG of `composition`, refreshed as it changes. */
+export const PngSurface = ({ composition, rasterizePng, zoom = 'fit', frameCss, }) => {
+    const [image, setImage] = useState();
+    const [error, setError] = useState();
+    const [isUnavailable, setUnavailable] = useState(false);
+    const [isLoading, setLoading] = useState(true);
+    const [width, setWidth] = useState();
+    useEffect(() => {
+        const controller = new AbortController();
+        const { signal } = controller;
+        setLoading(true);
+        const rasterize = async () => {
+            try {
+                const blob = await rasterizePng(composition, { signal });
+                if (!signal.aborted) {
+                    setImage({ url: URL.createObjectURL(blob), bytes: blob.size });
+                    setError(undefined);
+                    setUnavailable(false);
+                }
+            }
+            catch (rasterizeError) {
+                if (!signal.aborted) {
+                    setError(describeError(rasterizeError));
+                    setUnavailable(isPngUnavailableError(rasterizeError));
+                }
+            }
+            finally {
+                if (!signal.aborted) {
+                    setLoading(false);
+                }
+            }
+        };
+        const timer = setTimeout(() => void rasterize(), RASTERIZE_DELAY);
+        return () => {
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [composition, rasterizePng]);
+    useEffect(() => {
+        if (!image) {
+            return;
+        }
+        return () => URL.revokeObjectURL(image.url);
+    }, [image]);
+    return (_jsx(_Fragment, { children: isUnavailable ? (_jsx(EuiCallOut, { announceOnMount: true, size: "s", iconType: "info", title: "No prerendered PNG", text: _jsxs("p", { children: ["PNG previews of edited compositions need", ' ', _jsx("code", { children: "isomer-studio dev" }), "."] }) })) : error ? (_jsx(EuiCallOut, { announceOnMount: true, size: "s", color: "danger", iconType: "error", title: "This surface could not render", text: _jsx("p", { children: error }) })) : (_jsx(SurfaceFrame, { frameCss, children: image ? (_jsx("div", { css: css `
+                opacity: ${isLoading ? 0.6 : 1};
+              `, children: _jsx(ScaledPreview, { zoom, children: _jsx("img", { src: image.url, alt: "PNG preview", style: { width }, onLoad: ({ currentTarget: { naturalWidth } }) => setWidth(naturalWidth / PNG_SCALE), css: css `
+                    display: block;
+                    visibility: ${width ? 'visible' : 'hidden'};
+                  ` }) }) })) : (_jsx(EuiLoadingSpinner, { size: "m", "aria-label": "Rendering PNG" })) })) }));
+};
+//# sourceMappingURL=png_surface.js.map

package/dist/surfaces/png_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"png_surface.js","sourceRoot":"","sources":["../../src/surfaces/png_surface.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, { useEffect, useState } from 'react';\nimport { EuiCallOut, EuiLoadingSpinner } from '@elastic/eui';\nimport type { Composition } from '@elastic/isomer-sdk';\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\nimport { isPngUnavailableError } from '../model/png_manifest';\nimport type { RasterizePng } from '../types';\nimport { PNG_SCALE } from '../types';\n\nimport type { PreviewZoom } from './scaled_preview';\nimport { ScaledPreview } from './scaled_preview';\nimport { SurfaceFrame } from './surface_frame';\n\nconst RASTERIZE_DELAY = 250;\n\ninterface Rasterized {\n  url: string;\n  bytes: number;\n}\n\nconst describeError = (error: unknown): string =>\n  error instanceof Error ? error.message : String(error);\n\n/** The host's PNG of `composition`, refreshed as it changes. */\nexport const PngSurface = ({\n  composition,\n  rasterizePng,\n  zoom = 'fit',\n  frameCss,\n}: {\n  composition: Composition;\n  rasterizePng: RasterizePng;\n  zoom?: PreviewZoom;\n  /** Styles a frame around the image alone; diagnostics sit outside it. */\n  frameCss?: SerializedStyles | undefined;\n}) => {\n  const [image, setImage] = useState<Rasterized>();\n  const [error, setError] = useState<string>();\n  const [isUnavailable, setUnavailable] = useState(false);\n  const [isLoading, setLoading] = useState(true);\n  const [width, setWidth] = useState<number>();\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n    setLoading(true);\n\n    const rasterize = async () => {\n      try {\n        const blob = await rasterizePng(composition, { signal });\n        if (!signal.aborted) {\n          setImage({ url: URL.createObjectURL(blob), bytes: blob.size });\n          setError(undefined);\n          setUnavailable(false);\n        }\n      } catch (rasterizeError) {\n        if (!signal.aborted) {\n          setError(describeError(rasterizeError));\n          setUnavailable(isPngUnavailableError(rasterizeError));\n        }\n      } finally {\n        if (!signal.aborted) {\n          setLoading(false);\n        }\n      }\n    };\n    const timer = setTimeout(() => void rasterize(), RASTERIZE_DELAY);\n\n    return () => {\n      clearTimeout(timer);\n      controller.abort();\n    };\n  }, [composition, rasterizePng]);\n\n  useEffect(() => {\n    if (!image) {\n      return;\n    }\n    return () => URL.revokeObjectURL(image.url);\n  }, [image]);\n\n  return (\n    <>\n      {isUnavailable ? (\n        <EuiCallOut\n          announceOnMount\n          size=\"s\"\n          iconType=\"info\"\n          title=\"No prerendered PNG\"\n          text={\n            <p>\n              PNG previews of edited compositions need{' '}\n              <code>isomer-studio dev</code>.\n            </p>\n          }\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={<p>{error}</p>}\n        />\n      ) : (\n        <SurfaceFrame {...{ frameCss }}>\n          {image ? (\n            <div\n              css={css`\n                opacity: ${isLoading ? 0.6 : 1};\n              `}>\n              <ScaledPreview {...{ zoom }}>\n                <img\n                  src={image.url}\n                  alt=\"PNG preview\"\n                  style={{ width }}\n                  onLoad={({ currentTarget: { naturalWidth } }) =>\n                    setWidth(naturalWidth / PNG_SCALE)\n                  }\n                  css={css`\n                    display: block;\n                    visibility: ${width ? 'visible' : 'hidden'};\n                  `}\n                />\n              </ScaledPreview>\n            </div>\n          ) : (\n            <EuiLoadingSpinner size=\"m\" aria-label=\"Rendering PNG\" />\n          )}\n        </SurfaceFrame>\n      )}\n    </>\n  );\n};\n"]}

package/dist/surfaces/react_surface.d.ts

@@ -0,0 +1,11 @@
+import type { Composition } from '@elastic/isomer-sdk';
+export interface ReactSurfaceProps {
+    composition: Composition;
+    heading?: boolean | undefined;
+    enhancements?: readonly string[] | undefined;
+    /** Runs after each commit of the shadow root's content; the `html` fallback has no root to hand it. */
+    onCommit?: ((root: ShadowRoot) => void) | undefined;
+}
+/** The React surface in a shadow root, styled by the host, or the `html` surface when it supplies no styling. */
+export declare const ReactSurface: ({ composition, heading, enhancements, onCommit, }: ReactSurfaceProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=react_surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/react_surface.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AA6C5E,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7C,uGAAuG;IACvG,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AA+CD,iHAAiH;AACjH,eAAO,MAAM,YAAY,GAAI,mDAK1B,iBAAiB,qDAyBnB,CAAC"}

package/dist/surfaces/react_surface.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Component, useLayoutEffect, useMemo } from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import { useStudio } from '../studio_context.js';
+import { HtmlSurface } from './html_surface.js';
+import { ShadowRootHost } from './shadow_root.js';
+/** Keeps a renderer that throws on a half-edited node from taking the Studio down. */
+class RenderBoundary extends Component {
+    state = {};
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidUpdate({ resetKey }) {
+        if (resetKey !== this.props.resetKey && this.state.error) {
+            this.setState({ error: undefined });
+        }
+    }
+    render() {
+        const { error } = this.state;
+        return error ? (_jsx(EuiCallOut, { announceOnMount: true, size: "s", color: "danger", iconType: "error", title: "The React renderer threw", text: _jsx("p", { children: error.message }) })) : (this.props.children);
+    }
+}
+const ReactContent = ({ root, composition, heading, enhancements, onCommit, createReactContext, }) => {
+    const { runtime } = useStudio();
+    const context = useMemo(() => createReactContext(root), [createReactContext, root]);
+    useLayoutEffect(() => {
+        onCommit?.(root);
+    });
+    return (_jsx(_Fragment, { children: runtime.surfaces.react.render(composition, {
+            wrapper: true,
+            context,
+            ...(heading === false ? { heading } : {}),
+            ...(enhancements ? { enhancements } : {}),
+        }) }));
+};
+const HtmlContent = ({ composition, heading, enhancements, }) => {
+    const { runtime } = useStudio();
+    const { html } = runtime.surfaces.html.render(composition, {
+        scripts: 'host',
+        ...(heading === false ? { heading } : {}),
+        ...(enhancements ? { enhancements } : {}),
+    });
+    return _jsx(HtmlSurface, { html, title: "React preview" });
+};
+/** The React surface in a shadow root, styled by the host, or the `html` surface when it supplies no styling. */
+export const ReactSurface = ({ composition, heading, enhancements, onCommit, }) => {
+    const { createReactContext } = useStudio();
+    return (_jsx(RenderBoundary, { resetKey: composition, children: createReactContext ? (_jsx(ShadowRootHost, { children: (root) => (_jsx(ReactContent, { root,
+                composition,
+                heading,
+                enhancements,
+                onCommit,
+                createReactContext })) })) : (_jsx(HtmlContent, { composition, heading, enhancements })) }));
+};
+//# sourceMappingURL=react_surface.js.map

package/dist/surfaces/react_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react_surface.js","sourceRoot":"","sources":["../../src/surfaces/react_surface.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, { Component, useLayoutEffect, useMemo } from 'react';\nimport { EuiCallOut } from '@elastic/eui';\nimport type { Composition, StyledRenderContext } from '@elastic/isomer-sdk';\n\nimport { useStudio } from '../studio_context';\n\nimport { HtmlSurface } from './html_surface';\nimport { ShadowRootHost } from './shadow_root';\n\ninterface BoundaryState {\n  error?: Error | undefined;\n}\n\n/** Keeps a renderer that throws on a half-edited node from taking the Studio down. */\nclass RenderBoundary extends Component<\n  { children: ReactNode; resetKey: unknown },\n  BoundaryState\n> {\n  state: BoundaryState = {};\n\n  static getDerivedStateFromError(error: Error): BoundaryState {\n    return { error };\n  }\n\n  componentDidUpdate({ resetKey }: { resetKey: unknown }) {\n    if (resetKey !== this.props.resetKey && this.state.error) {\n      this.setState({ error: undefined });\n    }\n  }\n\n  render() {\n    const { error } = this.state;\n    return error ? (\n      <EuiCallOut\n        announceOnMount\n        size=\"s\"\n        color=\"danger\"\n        iconType=\"error\"\n        title=\"The React renderer threw\"\n        text={<p>{error.message}</p>}\n      />\n    ) : (\n      this.props.children\n    );\n  }\n}\n\nexport interface ReactSurfaceProps {\n  composition: Composition;\n  heading?: boolean | undefined;\n  enhancements?: readonly string[] | undefined;\n  /** Runs after each commit of the shadow root's content; the `html` fallback has no root to hand it. */\n  onCommit?: ((root: ShadowRoot) => void) | undefined;\n}\n\nconst ReactContent = ({\n  root,\n  composition,\n  heading,\n  enhancements,\n  onCommit,\n  createReactContext,\n}: ReactSurfaceProps & {\n  root: ShadowRoot;\n  createReactContext: (root: ShadowRoot) => StyledRenderContext;\n}) => {\n  const { runtime } = useStudio();\n  const context = useMemo(\n    () => createReactContext(root),\n    [createReactContext, root]\n  );\n  useLayoutEffect(() => {\n    onCommit?.(root);\n  });\n  return (\n    <>\n      {runtime.surfaces.react.render(composition, {\n        wrapper: true,\n        context,\n        ...(heading === false ? { heading } : {}),\n        ...(enhancements ? { enhancements } : {}),\n      })}\n    </>\n  );\n};\n\nconst HtmlContent = ({\n  composition,\n  heading,\n  enhancements,\n}: Pick<ReactSurfaceProps, 'composition' | 'heading' | 'enhancements'>) => {\n  const { runtime } = useStudio();\n  const { html } = runtime.surfaces.html.render(composition, {\n    scripts: 'host',\n    ...(heading === false ? { heading } : {}),\n    ...(enhancements ? { enhancements } : {}),\n  });\n  return <HtmlSurface {...{ html }} title=\"React preview\" />;\n};\n\n/** The React surface in a shadow root, styled by the host, or the `html` surface when it supplies no styling. */\nexport const ReactSurface = ({\n  composition,\n  heading,\n  enhancements,\n  onCommit,\n}: ReactSurfaceProps) => {\n  const { createReactContext } = useStudio();\n\n  return (\n    <RenderBoundary resetKey={composition}>\n      {createReactContext ? (\n        <ShadowRootHost>\n          {(root) => (\n            <ReactContent\n              {...{\n                root,\n                composition,\n                heading,\n                enhancements,\n                onCommit,\n                createReactContext,\n              }}\n            />\n          )}\n        </ShadowRootHost>\n      ) : (\n        <HtmlContent {...{ composition, heading, enhancements }} />\n      )}\n    </RenderBoundary>\n  );\n};\n"]}

package/dist/surfaces/render_output.d.ts

@@ -0,0 +1,31 @@
+import type { Composition, ValidationResult, ValidationWarning } from '@elastic/isomer-sdk';
+import type { SlackBlock } from '@elastic/isomer-sdk/slack';
+import type { StudioRuntime } from '../config.js';
+import type { StudioSurface } from '../model/describe_runtime.js';
+export interface SurfaceOutput {
+    /** What the surface produced, as text. */
+    source: string;
+    language: 'html' | 'markdown' | 'text' | 'json';
+    warnings: ValidationWarning[];
+    error?: string;
+    enhancementScript?: string;
+    slack?: {
+        text: string;
+        blocks: SlackBlock[];
+    };
+    snapshot?: {
+        css: string;
+        html: string;
+        width: number;
+        height: number;
+    };
+}
+/** Options for {@link renderSurfaceOutput}. */
+export interface SurfaceOutputOptions {
+    /** `false` leaves out the composition's leading title. Defaults to `true`. */
+    heading?: boolean | undefined;
+    enhancements?: readonly string[] | undefined;
+}
+/** Renders `composition` on `surface`, collecting findings rather than throwing. */
+export declare const renderSurfaceOutput: (runtime: StudioRuntime, surface: StudioSurface, composition: Composition, validation: ValidationResult, options?: SurfaceOutputOptions) => SurfaceOutput;
+//# sourceMappingURL=render_output.d.ts.map