@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/node/resolve_hooks.js

@@ -0,0 +1,104 @@
+/*
+ * 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 { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { isAbsolute, join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { isStudioSpecifier, sharedResolveDir } from './project_resolution.js';
+const parentIn = (dir) => pathToFileURL(join(dir, 'package.json')).href;
+/** Where to resolve `specifier` from, in order; every parent but the last is passed over when it finds nothing. */
+export const parentsFor = (specifier, parentURL, { projectDir, studioDir }) => {
+    const importer = parentURL?.startsWith('file:')
+        ? fileURLToPath(parentURL)
+        : undefined;
+    const shared = sharedResolveDir(specifier, importer, projectDir);
+    return [
+        ...(shared === undefined ? [] : [parentIn(shared)]),
+        parentURL,
+        ...(isStudioSpecifier(specifier) ? [parentIn(studioDir)] : []),
+    ];
+};
+/** The Studio's own `import` entry, which `require` cannot resolve from its ESM-only `exports` but can load. */
+const studioEntry = (studioDir) => {
+    const { exports } = JSON.parse(readFileSync(join(studioDir, 'package.json'), 'utf8'));
+    return pathToFileURL(join(studioDir, exports['.'].import)).href;
+};
+const isNotFound = (error) => error instanceof Error &&
+    'code' in error &&
+    (error.code === 'ERR_MODULE_NOT_FOUND' || error.code === 'MODULE_NOT_FOUND');
+/** For `module.registerHooks`, which also sees `require`. */
+export const resolveSync = (data) => (specifier, context, nextResolve) => {
+    const isRequire = context.conditions.includes('require');
+    // Its `exports` are `import` only, so a `require` of it, installed or not, takes the running Studio.
+    if (isRequire && specifier === '@elastic/isomer-studio') {
+        return { url: studioEntry(data.studioDir), shortCircuit: true };
+    }
+    // `require` resolves from the requiring module whatever `parentURL` says, so another parent resolves here.
+    const resolveFrom = (parentURL) => parentURL === context.parentURL || parentURL === undefined || !isRequire
+        ? nextResolve(specifier, { ...context, parentURL })
+        : {
+            url: pathToFileURL(createRequire(parentURL).resolve(specifier))
+                .href,
+            shortCircuit: true,
+        };
+    const attempt = ([parentURL, ...rest]) => {
+        try {
+            return resolveFrom(parentURL);
+        }
+        catch (error) {
+            if (!rest.length || !isNotFound(error)) {
+                throw error;
+            }
+            return attempt(rest);
+        }
+    };
+    return attempt(parentsFor(specifier, context.parentURL, data));
+};
+/** Applies {@link resolveSync} to `require` on a Node without `registerHooks`, wrapping the resolver as `tsx` does. */
+export const patchRequire = (hooksData) => {
+    const loader = createRequire(import.meta.url)('node:module');
+    const original = loader._resolveFilename;
+    const resolveRequire = resolveSync(hooksData);
+    loader._resolveFilename = function (request, parent, ...rest) {
+        const { url } = resolveRequire(request, {
+            conditions: ['require', 'node'],
+            importAttributes: {},
+            parentURL: parent?.filename
+                ? pathToFileURL(parent.filename).href
+                : undefined,
+        }, (specifier) => {
+            const resolved = original.call(this, specifier, parent, ...rest);
+            return {
+                url: isAbsolute(resolved) ? pathToFileURL(resolved).href : resolved,
+            };
+        });
+        return url.startsWith('file:') ? fileURLToPath(url) : url;
+    };
+};
+let data;
+/** For `module.register`, on a Node without `registerHooks`. */
+export const initialize = (given) => {
+    data = given;
+};
+export const resolve = async (specifier, context, nextResolve) => {
+    if (data === undefined) {
+        return nextResolve(specifier, context);
+    }
+    const attempt = async ([parentURL, ...rest]) => {
+        try {
+            return await nextResolve(specifier, { ...context, parentURL });
+        }
+        catch (error) {
+            if (!rest.length || !isNotFound(error)) {
+                throw error;
+            }
+            return attempt(rest);
+        }
+    };
+    return attempt(parentsFor(specifier, context.parentURL, data));
+};
+//# sourceMappingURL=resolve_hooks.js.map

package/dist/node/resolve_hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve_hooks.js","sourceRoot":"","sources":["../../src/node/resolve_hooks.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOvC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAQ3E,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAU,EAAE,CACvC,aAAa,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;AAEhD,mHAAmH;AACnH,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,SAAiB,EACjB,SAA6B,EAC7B,EAAE,UAAU,EAAE,SAAS,EAAoB,EACnB,EAAE;IAC1B,MAAM,QAAQ,GAAG,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;QAC7C,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC;QAC1B,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACjE,OAAO;QACL,GAAG,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QACnD,SAAS;QACT,GAAG,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC/D,CAAC;AACJ,CAAC,CAAC;AAEF,gHAAgH;AAChH,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAU,EAAE;IAChD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAC5B,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,CACV,CAAC;IAC9C,OAAO,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAc,EAAW,EAAE,CAC7C,KAAK,YAAY,KAAK;IACtB,MAAM,IAAI,KAAK;IACf,CAAC,KAAK,CAAC,IAAI,KAAK,sBAAsB,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAkB,CAAC,CAAC;AAE/E,6DAA6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GACtB,CAAC,IAAsB,EAAmB,EAAE,CAC5C,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;IAClC,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACzD,qGAAqG;IACrG,IAAI,SAAS,IAAI,SAAS,KAAK,wBAAwB,EAAE,CAAC;QACxD,OAAO,EAAE,GAAG,EAAE,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;IAClE,CAAC;IACD,2GAA2G;IAC3G,MAAM,WAAW,GAAG,CAAC,SAA6B,EAAmB,EAAE,CACrE,SAAS,KAAK,OAAO,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,IAAI,CAAC,SAAS;QACtE,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,EAAE,GAAG,OAAO,EAAE,SAAS,EAAE,CAAC;QACnD,CAAC,CAAC;YACE,GAAG,EAAE,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;iBAC5D,IAAI;YACP,YAAY,EAAE,IAAI;SACnB,CAAC;IACR,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,IAAI,CAEjC,EAAmB,EAAE;QACtB,IAAI,CAAC;YACH,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvC,MAAM,KAAK,CAAC;YACd,CAAC;YACD,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,OAAO,CAAC,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC;AAYJ,uHAAuH;AACvH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAA2B,EAAQ,EAAE;IAChE,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAC3C,aAAa,CACI,CAAC;IACpB,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC;IACzC,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,CAAC,gBAAgB,GAAG,UAAU,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI;QAC1D,MAAM,EAAE,GAAG,EAAE,GAAG,cAAc,CAC5B,OAAO,EACP;YACE,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;YAC/B,gBAAgB,EAAE,EAAE;YACpB,SAAS,EAAE,MAAM,EAAE,QAAQ;gBACzB,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI;gBACrC,CAAC,CAAC,SAAS;SACd,EACD,CAAC,SAAS,EAAE,EAAE;YACZ,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;YACjE,OAAO;gBACL,GAAG,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ;aACpE,CAAC;QACJ,CAAC,CACF,CAAC;QACF,OAAO,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,IAAkC,CAAC;AAEvC,gEAAgE;AAChE,MAAM,CAAC,MAAM,UAAU,GAAqC,CAAC,KAAK,EAAE,EAAE;IACpE,IAAI,GAAG,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAgB,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;IAC5E,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,CAAC;IACD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC,SAAS,EAAE,GAAG,IAAI,CAEvC,EAA4B,EAAE;QAC/B,IAAI,CAAC;YACH,OAAO,MAAM,WAAW,CAAC,SAAS,EAAE,EAAE,GAAG,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;QACjE,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvC,MAAM,KAAK,CAAC;YACd,CAAC;YACD,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,OAAO,CAAC,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;AACjE,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 { readFileSync } from 'node:fs';\nimport type {\n  InitializeHook,\n  ResolveFnOutput,\n  ResolveHook,\n  ResolveHookSync,\n} from 'node:module';\nimport { createRequire } from 'node:module';\nimport { isAbsolute, join } from 'node:path';\nimport { fileURLToPath, pathToFileURL } from 'node:url';\n\nimport { isStudioSpecifier, sharedResolveDir } from './project_resolution';\n\n/** Node module hooks applying `sharedResolveDir` and the Studio fallback to every `import` and `require`. */\nexport interface ResolveHooksData {\n  projectDir: string;\n  studioDir: string;\n}\n\nconst parentIn = (dir: string): string =>\n  pathToFileURL(join(dir, 'package.json')).href;\n\n/** Where to resolve `specifier` from, in order; every parent but the last is passed over when it finds nothing. */\nexport const parentsFor = (\n  specifier: string,\n  parentURL: string | undefined,\n  { projectDir, studioDir }: ResolveHooksData\n): (string | undefined)[] => {\n  const importer = parentURL?.startsWith('file:')\n    ? fileURLToPath(parentURL)\n    : undefined;\n  const shared = sharedResolveDir(specifier, importer, projectDir);\n  return [\n    ...(shared === undefined ? [] : [parentIn(shared)]),\n    parentURL,\n    ...(isStudioSpecifier(specifier) ? [parentIn(studioDir)] : []),\n  ];\n};\n\n/** The Studio's own `import` entry, which `require` cannot resolve from its ESM-only `exports` but can load. */\nconst studioEntry = (studioDir: string): string => {\n  const { exports } = JSON.parse(\n    readFileSync(join(studioDir, 'package.json'), 'utf8')\n  ) as { exports: { '.': { import: string } } };\n  return pathToFileURL(join(studioDir, exports['.'].import)).href;\n};\n\nconst isNotFound = (error: unknown): boolean =>\n  error instanceof Error &&\n  'code' in error &&\n  (error.code === 'ERR_MODULE_NOT_FOUND' || error.code === 'MODULE_NOT_FOUND');\n\n/** For `module.registerHooks`, which also sees `require`. */\nexport const resolveSync =\n  (data: ResolveHooksData): ResolveHookSync =>\n  (specifier, context, nextResolve) => {\n    const isRequire = context.conditions.includes('require');\n    // Its `exports` are `import` only, so a `require` of it, installed or not, takes the running Studio.\n    if (isRequire && specifier === '@elastic/isomer-studio') {\n      return { url: studioEntry(data.studioDir), shortCircuit: true };\n    }\n    // `require` resolves from the requiring module whatever `parentURL` says, so another parent resolves here.\n    const resolveFrom = (parentURL: string | undefined): ResolveFnOutput =>\n      parentURL === context.parentURL || parentURL === undefined || !isRequire\n        ? nextResolve(specifier, { ...context, parentURL })\n        : {\n            url: pathToFileURL(createRequire(parentURL).resolve(specifier))\n              .href,\n            shortCircuit: true,\n          };\n    const attempt = ([parentURL, ...rest]: (\n      string | undefined\n    )[]): ResolveFnOutput => {\n      try {\n        return resolveFrom(parentURL);\n      } catch (error) {\n        if (!rest.length || !isNotFound(error)) {\n          throw error;\n        }\n        return attempt(rest);\n      }\n    };\n    return attempt(parentsFor(specifier, context.parentURL, data));\n  };\n\n/** Node's CommonJS resolver, which `module.register` hooks never see. */\ninterface CommonJsLoader {\n  _resolveFilename: (\n    this: unknown,\n    request: string,\n    parent: { filename?: string | null } | undefined,\n    ...rest: unknown[]\n  ) => string;\n}\n\n/** Applies {@link resolveSync} to `require` on a Node without `registerHooks`, wrapping the resolver as `tsx` does. */\nexport const patchRequire = (hooksData: ResolveHooksData): void => {\n  const loader = createRequire(import.meta.url)(\n    'node:module'\n  ) as CommonJsLoader;\n  const original = loader._resolveFilename;\n  const resolveRequire = resolveSync(hooksData);\n  loader._resolveFilename = function (request, parent, ...rest) {\n    const { url } = resolveRequire(\n      request,\n      {\n        conditions: ['require', 'node'],\n        importAttributes: {},\n        parentURL: parent?.filename\n          ? pathToFileURL(parent.filename).href\n          : undefined,\n      },\n      (specifier) => {\n        const resolved = original.call(this, specifier, parent, ...rest);\n        return {\n          url: isAbsolute(resolved) ? pathToFileURL(resolved).href : resolved,\n        };\n      }\n    );\n    return url.startsWith('file:') ? fileURLToPath(url) : url;\n  };\n};\n\nlet data: ResolveHooksData | undefined;\n\n/** For `module.register`, on a Node without `registerHooks`. */\nexport const initialize: InitializeHook<ResolveHooksData> = (given) => {\n  data = given;\n};\n\nexport const resolve: ResolveHook = async (specifier, context, nextResolve) => {\n  if (data === undefined) {\n    return nextResolve(specifier, context);\n  }\n  const attempt = async ([parentURL, ...rest]: (\n    string | undefined\n  )[]): Promise<ResolveFnOutput> => {\n    try {\n      return await nextResolve(specifier, { ...context, parentURL });\n    } catch (error) {\n      if (!rest.length || !isNotFound(error)) {\n        throw error;\n      }\n      return attempt(rest);\n    }\n  };\n  return attempt(parentsFor(specifier, context.parentURL, data));\n};\n"]}

package/dist/studio.d.ts

@@ -0,0 +1,4 @@
+import type { IsomerStudioProps } from './types.js';
+/** A home, dev and docs shell for an Isomer runtime, built only from what the runtime reports. */
+export declare const IsomerStudio: (props: IsomerStudioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=studio.d.ts.map

package/dist/studio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../src/studio.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwUjD,kGAAkG;AAClG,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,qDAYpD,CAAC"}

package/dist/studio.js

@@ -0,0 +1,188 @@
+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 { useCallback, useEffect, useMemo, useState } from 'react';
+import { EuiCallOut, EuiProvider, EuiThemeProvider, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { AppHost } from './apps/app_host.js';
+import { useAccent } from './chrome/accent.js';
+import { useColorMode } from './chrome/color_mode.js';
+import { DEV_TINT } from './chrome/dev_tint.js';
+import { StudioHeader } from './chrome/header.js';
+import { NAV_WIDTH, StudioNav } from './chrome/nav.js';
+import { GALLERY, isAppRoute, isHomeRoute, useStudioRoute, } from './chrome/route.js';
+import { DevView } from './dev/dev_view.js';
+import { DocsView } from './docs/docs_view.js';
+import { GalleryView } from './docs/gallery_view.js';
+import { HomeView } from './home/home_view.js';
+import { homeBackground } from './home/tokens.js';
+import { createShim } from './model/compile_jsx.js';
+import { composeExample, composeOf } from './model/compose_example.js';
+import { describeRuntime } from './model/describe_runtime.js';
+import { StudioContextProvider, useStudio } from './studio_context.js';
+import { reactContextOf } from './surfaces/adopt_stylesheet.js';
+const darkWrapper = {
+    css: css `
+    display: contents;
+  `,
+};
+const NO_TINT = {};
+const NO_APPS = [];
+const fill = css `
+  height: 100%;
+`;
+const docsBackground = css `
+  background-color: #0b2347;
+  background-image:
+    radial-gradient(circle at 0% 0%, rgba(27, 169, 245, 0.3), transparent 24%),
+    radial-gradient(
+      circle at 4% 100%,
+      rgba(240, 78, 152, 0.2),
+      transparent 22%
+    ),
+    radial-gradient(circle at 40% 0%, rgba(0, 191, 179, 0.14), transparent 18%);
+`;
+const devBackground = css `
+  background-color: #0b3a2c;
+  background-image:
+    radial-gradient(circle at 0% 0%, rgba(0, 191, 179, 0.3), transparent 24%),
+    radial-gradient(
+      circle at 4% 100%,
+      rgba(254, 197, 20, 0.2),
+      transparent 22%
+    ),
+    radial-gradient(circle at 40% 0%, rgba(27, 169, 245, 0.14), transparent 18%);
+`;
+const compactNavQuery = () => typeof window === 'undefined'
+    ? undefined
+    : window.matchMedia(`(max-width: ${NAV_WIDTH.compactAt}px)`);
+const BACKGROUNDS = {
+    dev: devBackground,
+    docs: docsBackground,
+    home: homeBackground,
+};
+const Layout = ({ title = 'Isomer Studio', router, configProblems = [], colorMode, onColorModeChange, }) => {
+    const { location, route, navigate, openApp, goHome } = router;
+    const { euiTheme } = useEuiTheme();
+    const { apps, featured, docs: { primitives }, } = useStudio();
+    const home = isHomeRoute(location);
+    const app = isAppRoute(location)
+        ? apps.find(({ id }) => id === location.app)
+        : undefined;
+    const { page } = route;
+    const mode = app || home ? undefined : route.mode;
+    const look = home ? 'home' : (mode ?? 'docs');
+    const accent = useAccent(look === 'home' ? 'docs' : look);
+    const [isCompactNav, setCompactNav] = useState(() => compactNavQuery()?.matches ?? false);
+    const [isNavOpen, setNavOpen] = useState(() => !isCompactNav);
+    const [devRoute, setDevRoute] = useState(mode === 'dev' ? route : undefined);
+    if (mode === 'dev' && devRoute !== route) {
+        setDevRoute(route);
+    }
+    useEffect(() => {
+        const query = compactNavQuery();
+        if (!query) {
+            return;
+        }
+        const update = () => {
+            setCompactNav(query.matches);
+            setNavOpen(!query.matches);
+        };
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    const shell = css `
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    color: ${euiTheme.colors.textParagraph};
+    ${BACKGROUNDS[look]};
+  `;
+    const body = css `
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    position: relative;
+    grid-template-columns: ${isCompactNav
+        ? NAV_WIDTH.closed
+        : isNavOpen
+            ? NAV_WIDTH.open
+            : NAV_WIDTH.closed}px minmax(0, 1fr);
+    transition: grid-template-columns ${euiTheme.animation.normal}
+      ${euiTheme.animation.resistance};
+  `;
+    const main = css `
+    grid-column: 2;
+    min-height: 0;
+    margin: 0 ${euiTheme.size.m} ${euiTheme.size.m} 0;
+    /* Contain absolute descendants (EUI screen-reader text) so they cannot overflow the shell. */
+    position: relative;
+    overflow: auto;
+    border-radius: ${euiTheme.border.radius.frame};
+    background: ${euiTheme.colors.backgroundBasePlain};
+  `;
+    const onSelectPrimitive = useCallback((type) => navigate({ page: type, example: 0 }), [navigate]);
+    return (_jsxs("div", { css: shell, children: [_jsx(EuiThemeProvider, { colorMode: "dark", wrapperProps: darkWrapper, children: _jsx(StudioHeader, { title,
+                    mode,
+                    home,
+                    appTitle: app?.title,
+                    colorMode,
+                    onColorModeChange,
+                    onSelectPrimitive, onModeChange: (next) => navigate({ mode: next }), onHome: goHome }) }), home ? (_jsx(EuiThemeProvider, { colorMode: "dark", wrapperProps: darkWrapper, children: _jsx(HomeView, { title, featured, configProblems, router: { route, navigate } }) })) : (_jsxs("div", { css: body, children: [_jsx(EuiThemeProvider, { colorMode: "dark", wrapperProps: darkWrapper, children: _jsx(StudioNav, { page, mode: route.mode, app: app?.id, appPath: isAppRoute(location) ? location.path : undefined, isOpen: isNavOpen, isCompact: isCompactNav, onToggle: () => setNavOpen((open) => !open), onSelect: (next) => navigate(next === GALLERY
+                                ? { mode: 'docs', page: GALLERY }
+                                : { page: next, example: 0 }), onSelectApp: openApp }) }), _jsxs("main", { css: main, children: [configProblems.length ? (_jsx(EuiCallOut, { announceOnMount: true, color: "danger", iconType: "error", title: "The config is invalid; the Studio keeps the last valid one", children: _jsx("ul", { children: configProblems.map((problem) => (_jsx("li", { children: problem }, problem))) }) })) : null, app && isAppRoute(location) ? (_jsx(AppHost, { path: location.path, app, openApp }, app.id)) : null, !primitives.length ? null : (_jsxs(_Fragment, { children: [devRoute ? (_jsx("div", { hidden: mode !== 'dev', css: fill, children: _jsx(DevView, { route: devRoute, stacked: isCompactNav, navigate }) })) : null, mode !== 'docs' ? null : page === GALLERY ? (_jsx(GalleryView, { group: route.group })) : (_jsx(DocsView, { route, navigate, accent }))] }))] })] }))] }));
+};
+const Studio = ({ title, runtime, apps = NO_APPS, featured, createReactContext: configReactContext, stylesheet, compose: configCompose, previewExample, transformJsx, rasterizePng, renderPdf, configProblems, theme, colorMode, onColorModeChange, }) => {
+    const docs = useMemo(() => describeRuntime(runtime), [runtime]);
+    const shim = useMemo(() => createShim(runtime.primitives), [runtime]);
+    const schemaFor = useCallback((type) => runtime.primitives.find((definition) => definition.type === type)?.schema, [runtime]);
+    const appIds = useMemo(() => apps.map(({ id }) => id), [apps]);
+    const router = useStudioRoute(docs, appIds);
+    const composeNodes = useMemo(() => composeOf({ compose: configCompose, previewExample }), [configCompose, previewExample]);
+    const compose = useCallback((nodes) => composeExample(composeNodes, nodes, theme), [composeNodes, theme]);
+    const createReactContext = useMemo(() => reactContextOf({ createReactContext: configReactContext, stylesheet }), [configReactContext, stylesheet]);
+    const value = useMemo(() => ({
+        runtime,
+        apps,
+        featured,
+        docs,
+        shim,
+        schemaFor,
+        theme,
+        compose,
+        createReactContext,
+        transformJsx,
+        rasterizePng,
+        renderPdf,
+    }), [
+        runtime,
+        apps,
+        featured,
+        docs,
+        shim,
+        schemaFor,
+        theme,
+        compose,
+        createReactContext,
+        transformJsx,
+        rasterizePng,
+        renderPdf,
+    ]);
+    const { location } = router;
+    const tinted = !isAppRoute(location) &&
+        !isHomeRoute(location) &&
+        router.route.mode === 'dev';
+    return (_jsx(StudioContextProvider, { value, children: _jsx(EuiThemeProvider, { modify: tinted ? DEV_TINT : NO_TINT, wrapperProps: darkWrapper, children: _jsx(Layout, { title, router, configProblems, colorMode, onColorModeChange }) }) }));
+};
+/** A home, dev and docs shell for an Isomer runtime, built only from what the runtime reports. */
+export const IsomerStudio = (props) => {
+    const { preference: colorMode, theme, setPreference: onColorModeChange, } = useColorMode();
+    return (_jsx(EuiProvider, { colorMode: theme, children: _jsx(Studio, { ...props, theme, colorMode, onColorModeChange }) }));
+};
+//# sourceMappingURL=studio.js.map

package/dist/studio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio.js","sourceRoot":"","sources":["../src/studio.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, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  EuiCallOut,\n  EuiProvider,\n  EuiThemeProvider,\n  useEuiTheme,\n} from '@elastic/eui';\nimport type { PrimitiveNode } from '@elastic/isomer-sdk';\nimport { css } from '@emotion/react';\n\nimport { AppHost } from './apps/app_host';\nimport { useAccent } from './chrome/accent';\nimport type { ColorModePreference } from './chrome/color_mode';\nimport { useColorMode } from './chrome/color_mode';\nimport { DEV_TINT } from './chrome/dev_tint';\nimport { StudioHeader } from './chrome/header';\nimport { NAV_WIDTH, StudioNav } from './chrome/nav';\nimport type { StudioRouter } from './chrome/route';\nimport {\n  GALLERY,\n  isAppRoute,\n  isHomeRoute,\n  useStudioRoute,\n} from './chrome/route';\nimport type { StudioApp } from './config';\nimport { DevView } from './dev/dev_view';\nimport { DocsView } from './docs/docs_view';\nimport { GalleryView } from './docs/gallery_view';\nimport { HomeView } from './home/home_view';\nimport { homeBackground } from './home/tokens';\nimport { createShim } from './model/compile_jsx';\nimport { composeExample, composeOf } from './model/compose_example';\nimport { describeRuntime } from './model/describe_runtime';\nimport type { StudioContextValue, StudioTheme } from './studio_context';\nimport { StudioContextProvider, useStudio } from './studio_context';\nimport { reactContextOf } from './surfaces/adopt_stylesheet';\nimport type { IsomerStudioProps } from './types';\n\nconst darkWrapper = {\n  css: css`\n    display: contents;\n  `,\n};\n\nconst NO_TINT = {};\n\nconst NO_APPS: readonly StudioApp[] = [];\n\nconst fill = css`\n  height: 100%;\n`;\n\nconst docsBackground = css`\n  background-color: #0b2347;\n  background-image:\n    radial-gradient(circle at 0% 0%, rgba(27, 169, 245, 0.3), transparent 24%),\n    radial-gradient(\n      circle at 4% 100%,\n      rgba(240, 78, 152, 0.2),\n      transparent 22%\n    ),\n    radial-gradient(circle at 40% 0%, rgba(0, 191, 179, 0.14), transparent 18%);\n`;\nconst devBackground = css`\n  background-color: #0b3a2c;\n  background-image:\n    radial-gradient(circle at 0% 0%, rgba(0, 191, 179, 0.3), transparent 24%),\n    radial-gradient(\n      circle at 4% 100%,\n      rgba(254, 197, 20, 0.2),\n      transparent 22%\n    ),\n    radial-gradient(circle at 40% 0%, rgba(27, 169, 245, 0.14), transparent 18%);\n`;\n\ntype Look = 'dev' | 'docs' | 'home';\n\nconst compactNavQuery = () =>\n  typeof window === 'undefined'\n    ? undefined\n    : window.matchMedia(`(max-width: ${NAV_WIDTH.compactAt}px)`);\n\nconst BACKGROUNDS = {\n  dev: devBackground,\n  docs: docsBackground,\n  home: homeBackground,\n} as const;\n\nconst Layout = ({\n  title = 'Isomer Studio',\n  router,\n  configProblems = [],\n  colorMode,\n  onColorModeChange,\n}: {\n  title?: string | undefined;\n  router: StudioRouter;\n  configProblems?: readonly string[] | undefined;\n  colorMode: ColorModePreference;\n  onColorModeChange: (colorMode: ColorModePreference) => void;\n}) => {\n  const { location, route, navigate, openApp, goHome } = router;\n  const { euiTheme } = useEuiTheme();\n  const {\n    apps,\n    featured,\n    docs: { primitives },\n  } = useStudio();\n  const home = isHomeRoute(location);\n  const app = isAppRoute(location)\n    ? apps.find(({ id }) => id === location.app)\n    : undefined;\n  const { page } = route;\n  const mode = app || home ? undefined : route.mode;\n  const look: Look = home ? 'home' : (mode ?? 'docs');\n  const accent = useAccent(look === 'home' ? 'docs' : look);\n  const [isCompactNav, setCompactNav] = useState(\n    () => compactNavQuery()?.matches ?? false\n  );\n  const [isNavOpen, setNavOpen] = useState(() => !isCompactNav);\n  const [devRoute, setDevRoute] = useState(mode === 'dev' ? route : undefined);\n  if (mode === 'dev' && devRoute !== route) {\n    setDevRoute(route);\n  }\n\n  useEffect(() => {\n    const query = compactNavQuery();\n    if (!query) {\n      return;\n    }\n    const update = () => {\n      setCompactNav(query.matches);\n      setNavOpen(!query.matches);\n    };\n    update();\n    query.addEventListener('change', update);\n    return () => query.removeEventListener('change', update);\n  }, []);\n\n  const shell = css`\n    height: 100vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    color: ${euiTheme.colors.textParagraph};\n    ${BACKGROUNDS[look]};\n  `;\n  const body = css`\n    flex: 1;\n    min-height: 0;\n    display: grid;\n    position: relative;\n    grid-template-columns: ${\n      isCompactNav\n        ? NAV_WIDTH.closed\n        : isNavOpen\n          ? NAV_WIDTH.open\n          : NAV_WIDTH.closed\n    }px minmax(0, 1fr);\n    transition: grid-template-columns ${euiTheme.animation.normal}\n      ${euiTheme.animation.resistance};\n  `;\n  const main = css`\n    grid-column: 2;\n    min-height: 0;\n    margin: 0 ${euiTheme.size.m} ${euiTheme.size.m} 0;\n    /* Contain absolute descendants (EUI screen-reader text) so they cannot overflow the shell. */\n    position: relative;\n    overflow: auto;\n    border-radius: ${euiTheme.border.radius.frame};\n    background: ${euiTheme.colors.backgroundBasePlain};\n  `;\n\n  const onSelectPrimitive = useCallback(\n    (type: string) => navigate({ page: type, example: 0 }),\n    [navigate]\n  );\n\n  return (\n    <div css={shell}>\n      <EuiThemeProvider colorMode=\"dark\" wrapperProps={darkWrapper}>\n        <StudioHeader\n          {...{\n            title,\n            mode,\n            home,\n            appTitle: app?.title,\n            colorMode,\n            onColorModeChange,\n            onSelectPrimitive,\n          }}\n          onModeChange={(next) => navigate({ mode: next })}\n          onHome={goHome}\n        />\n      </EuiThemeProvider>\n      {home ? (\n        <EuiThemeProvider colorMode=\"dark\" wrapperProps={darkWrapper}>\n          <HomeView\n            {...{ title, featured, configProblems }}\n            router={{ route, navigate }}\n          />\n        </EuiThemeProvider>\n      ) : (\n        <div css={body}>\n          <EuiThemeProvider colorMode=\"dark\" wrapperProps={darkWrapper}>\n            <StudioNav\n              {...{ page }}\n              mode={route.mode}\n              app={app?.id}\n              appPath={isAppRoute(location) ? location.path : undefined}\n              isOpen={isNavOpen}\n              isCompact={isCompactNav}\n              onToggle={() => setNavOpen((open) => !open)}\n              onSelect={(next) =>\n                navigate(\n                  next === GALLERY\n                    ? { mode: 'docs', page: GALLERY }\n                    : { page: next, example: 0 }\n                )\n              }\n              onSelectApp={openApp}\n            />\n          </EuiThemeProvider>\n          <main css={main}>\n            {configProblems.length ? (\n              <EuiCallOut\n                announceOnMount\n                color=\"danger\"\n                iconType=\"error\"\n                title=\"The config is invalid; the Studio keeps the last valid one\">\n                <ul>\n                  {configProblems.map((problem) => (\n                    <li key={problem}>{problem}</li>\n                  ))}\n                </ul>\n              </EuiCallOut>\n            ) : null}\n            {app && isAppRoute(location) ? (\n              <AppHost\n                key={app.id}\n                path={location.path}\n                {...{ app, openApp }}\n              />\n            ) : null}\n            {!primitives.length ? null : (\n              <>\n                {devRoute ? (\n                  <div hidden={mode !== 'dev'} css={fill}>\n                    <DevView\n                      route={devRoute}\n                      stacked={isCompactNav}\n                      {...{ navigate }}\n                    />\n                  </div>\n                ) : null}\n                {mode !== 'docs' ? null : page === GALLERY ? (\n                  <GalleryView group={route.group} />\n                ) : (\n                  <DocsView {...{ route, navigate, accent }} />\n                )}\n              </>\n            )}\n          </main>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst Studio = ({\n  title,\n  runtime,\n  apps = NO_APPS,\n  featured,\n  createReactContext: configReactContext,\n  stylesheet,\n  compose: configCompose,\n  previewExample,\n  transformJsx,\n  rasterizePng,\n  renderPdf,\n  configProblems,\n  theme,\n  colorMode,\n  onColorModeChange,\n}: IsomerStudioProps & {\n  theme: StudioTheme;\n  colorMode: ColorModePreference;\n  onColorModeChange: (colorMode: ColorModePreference) => void;\n}) => {\n  const docs = useMemo(() => describeRuntime(runtime), [runtime]);\n  const shim = useMemo(() => createShim(runtime.primitives), [runtime]);\n  const schemaFor = useCallback(\n    (type: string) =>\n      runtime.primitives.find((definition) => definition.type === type)?.schema,\n    [runtime]\n  );\n  const appIds = useMemo(() => apps.map(({ id }) => id), [apps]);\n  const router = useStudioRoute(docs, appIds);\n  const composeNodes = useMemo(\n    () => composeOf({ compose: configCompose, previewExample }),\n    [configCompose, previewExample]\n  );\n  const compose = useCallback(\n    (nodes: readonly PrimitiveNode[]) =>\n      composeExample(composeNodes, nodes, theme),\n    [composeNodes, theme]\n  );\n  const createReactContext = useMemo(\n    () =>\n      reactContextOf({ createReactContext: configReactContext, stylesheet }),\n    [configReactContext, stylesheet]\n  );\n\n  const value = useMemo(\n    (): StudioContextValue => ({\n      runtime,\n      apps,\n      featured,\n      docs,\n      shim,\n      schemaFor,\n      theme,\n      compose,\n      createReactContext,\n      transformJsx,\n      rasterizePng,\n      renderPdf,\n    }),\n    [\n      runtime,\n      apps,\n      featured,\n      docs,\n      shim,\n      schemaFor,\n      theme,\n      compose,\n      createReactContext,\n      transformJsx,\n      rasterizePng,\n      renderPdf,\n    ]\n  );\n\n  const { location } = router;\n  const tinted =\n    !isAppRoute(location) &&\n    !isHomeRoute(location) &&\n    router.route.mode === 'dev';\n\n  return (\n    <StudioContextProvider {...{ value }}>\n      <EuiThemeProvider\n        modify={tinted ? DEV_TINT : NO_TINT}\n        wrapperProps={darkWrapper}>\n        <Layout\n          {...{ title, router, configProblems, colorMode, onColorModeChange }}\n        />\n      </EuiThemeProvider>\n    </StudioContextProvider>\n  );\n};\n\n/** A home, dev and docs shell for an Isomer runtime, built only from what the runtime reports. */\nexport const IsomerStudio = (props: IsomerStudioProps) => {\n  const {\n    preference: colorMode,\n    theme,\n    setPreference: onColorModeChange,\n  } = useColorMode();\n\n  return (\n    <EuiProvider colorMode={theme}>\n      <Studio {...props} {...{ theme, colorMode, onColorModeChange }} />\n    </EuiProvider>\n  );\n};\n"]}

package/dist/studio_context.d.ts

@@ -0,0 +1,27 @@
+import type { PrimitiveNode, StyledRenderContext } from '@elastic/isomer-sdk';
+import type { Composition } from '@elastic/isomer-sdk';
+import type { JsxShim } from '@elastic/isomer-sdk/author';
+import type { ZodType } from 'zod';
+import type { StudioApp, StudioRuntime, StudioTheme } from './config.js';
+import type { RuntimeDocs } from './model/describe_runtime.js';
+import type { JsxTransform, RasterizePng, RenderPdf } from './types.js';
+export type { StudioTheme } from './config.js';
+export interface StudioContextValue {
+    runtime: StudioRuntime;
+    apps: readonly StudioApp[];
+    /** The config's `featured`, or undefined to draw at random on Home. */
+    featured?: readonly string[] | undefined;
+    docs: RuntimeDocs;
+    shim: JsxShim;
+    schemaFor: (type: string) => ZodType | undefined;
+    theme: StudioTheme;
+    /** Wraps nodes in the pack's composition for the current theme, through `composeExample`. */
+    compose: (nodes: readonly PrimitiveNode[]) => Composition;
+    createReactContext?: ((root: ShadowRoot) => StyledRenderContext) | undefined;
+    transformJsx?: JsxTransform | undefined;
+    rasterizePng?: RasterizePng | undefined;
+    renderPdf?: RenderPdf | undefined;
+}
+export declare const StudioContextProvider: import("react").Provider<StudioContextValue | undefined>;
+export declare const useStudio: () => StudioContextValue;
+//# sourceMappingURL=studio_context.d.ts.map

package/dist/studio_context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio_context.d.ts","sourceRoot":"","sources":["../src/studio_context.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEnC,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAErE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAC;IACjD,KAAK,EAAE,WAAW,CAAC;IACnB,6FAA6F;IAC7F,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,KAAK,WAAW,CAAC;IAC1D,kBAAkB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,mBAAmB,CAAC,GAAG,SAAS,CAAC;IAC7E,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAID,eAAO,MAAM,qBAAqB,0DAAyB,CAAC;AAE5D,eAAO,MAAM,SAAS,QAAO,kBAM5B,CAAC"}

package/dist/studio_context.js

@@ -0,0 +1,17 @@
+/*
+ * 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 { createContext, useContext } from 'react';
+const StudioContext = createContext(undefined);
+export const StudioContextProvider = StudioContext.Provider;
+export const useStudio = () => {
+    const value = useContext(StudioContext);
+    if (!value) {
+        throw new Error('useStudio must be used inside IsomerStudio.');
+    }
+    return value;
+};
+//# sourceMappingURL=studio_context.js.map

package/dist/studio_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio_context.js","sourceRoot":"","sources":["../src/studio_context.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA6BlD,MAAM,aAAa,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5D,MAAM,CAAC,MAAM,SAAS,GAAG,GAAuB,EAAE;IAChD,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,KAAK,CAAC;AACf,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 { createContext, useContext } from 'react';\nimport type { PrimitiveNode, StyledRenderContext } from '@elastic/isomer-sdk';\nimport type { Composition } from '@elastic/isomer-sdk';\nimport type { JsxShim } from '@elastic/isomer-sdk/author';\nimport type { ZodType } from 'zod';\n\nimport type { StudioApp, StudioRuntime, StudioTheme } from './config';\nimport type { RuntimeDocs } from './model/describe_runtime';\nimport type { JsxTransform, RasterizePng, RenderPdf } from './types';\n\nexport type { StudioTheme } from './config';\n\nexport interface StudioContextValue {\n  runtime: StudioRuntime;\n  apps: readonly StudioApp[];\n  /** The config's `featured`, or undefined to draw at random on Home. */\n  featured?: readonly string[] | undefined;\n  docs: RuntimeDocs;\n  shim: JsxShim;\n  schemaFor: (type: string) => ZodType | undefined;\n  theme: StudioTheme;\n  /** Wraps nodes in the pack's composition for the current theme, through `composeExample`. */\n  compose: (nodes: readonly PrimitiveNode[]) => Composition;\n  createReactContext?: ((root: ShadowRoot) => StyledRenderContext) | undefined;\n  transformJsx?: JsxTransform | undefined;\n  rasterizePng?: RasterizePng | undefined;\n  renderPdf?: RenderPdf | undefined;\n}\n\nconst StudioContext = createContext<StudioContextValue | undefined>(undefined);\n\nexport const StudioContextProvider = StudioContext.Provider;\n\nexport const useStudio = (): StudioContextValue => {\n  const value = useContext(StudioContext);\n  if (!value) {\n    throw new Error('useStudio must be used inside IsomerStudio.');\n  }\n  return value;\n};\n"]}

package/dist/surfaces/adopt_stylesheet.d.ts

@@ -0,0 +1,7 @@
+import type { StyledRenderContext } from '@elastic/isomer-sdk';
+import type { StudioConfig } from '../config.js';
+/** Parses `css` once per document and adopts that sheet onto `root`. */
+export declare const adoptStylesheet: (root: ShadowRoot, css: string) => void;
+/** The config's `createReactContext`, adopting `stylesheet` first; with only a stylesheet, the context is empty. */
+export declare const reactContextOf: ({ createReactContext, stylesheet, }: Pick<StudioConfig, "createReactContext" | "stylesheet">) => ((root: ShadowRoot) => StyledRenderContext) | undefined;
+//# sourceMappingURL=adopt_stylesheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adopt_stylesheet.d.ts","sourceRoot":"","sources":["../../src/surfaces/adopt_stylesheet.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiD9C,wEAAwE;AACxE,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU,EAAE,KAAK,MAAM,KAAG,IAU/D,CAAC;AAEF,oHAAoH;AACpH,eAAO,MAAM,cAAc,GAAI,qCAG5B,IAAI,CAAC,YAAY,EAAE,oBAAoB,GAAG,YAAY,CAAC,KACxD,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,mBAAmB,CAAC,GAAG,SAU/C,CAAC"}

package/dist/surfaces/adopt_stylesheet.js

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+const sheetsByDocument = new WeakMap();
+const sheetConstructor = (root) => {
+    const Sheet = root.ownerDocument.defaultView?.CSSStyleSheet;
+    if (typeof Sheet !== 'function' ||
+        typeof Sheet.prototype.replaceSync !== 'function' ||
+        !Array.isArray(root.adoptedStyleSheets)) {
+        return undefined;
+    }
+    return Sheet;
+};
+const appendStyleElement = (root, css) => {
+    const present = [...root.querySelectorAll('style')].some((style) => style.textContent === css);
+    if (present) {
+        return;
+    }
+    const style = root.ownerDocument.createElement('style');
+    style.textContent = css;
+    root.append(style);
+};
+const sharedSheet = (document, Sheet, css) => {
+    let sheets = sheetsByDocument.get(document);
+    if (!sheets) {
+        sheets = new Map();
+        sheetsByDocument.set(document, sheets);
+    }
+    let sheet = sheets.get(css);
+    if (!sheet) {
+        sheet = new Sheet();
+        sheet.replaceSync(css);
+        sheets.set(css, sheet);
+    }
+    return sheet;
+};
+/** Parses `css` once per document and adopts that sheet onto `root`. */
+export const adoptStylesheet = (root, css) => {
+    const Sheet = sheetConstructor(root);
+    if (!Sheet) {
+        appendStyleElement(root, css);
+        return;
+    }
+    const sheet = sharedSheet(root.ownerDocument, Sheet, css);
+    if (!root.adoptedStyleSheets.includes(sheet)) {
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    }
+};
+/** The config's `createReactContext`, adopting `stylesheet` first; with only a stylesheet, the context is empty. */
+export const reactContextOf = ({ createReactContext, stylesheet, }) => {
+    if (!stylesheet) {
+        return createReactContext;
+    }
+    let css;
+    return (root) => {
+        css ??= stylesheet();
+        adoptStylesheet(root, css);
+        return createReactContext?.(root) ?? {};
+    };
+};
+//# sourceMappingURL=adopt_stylesheet.js.map

package/dist/surfaces/adopt_stylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adopt_stylesheet.js","sourceRoot":"","sources":["../../src/surfaces/adopt_stylesheet.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { StyledRenderContext } from '@elastic/isomer-sdk';\n\nimport type { StudioConfig } from '../config';\n\nconst sheetsByDocument = new WeakMap<Document, Map<string, CSSStyleSheet>>();\n\nconst sheetConstructor = (\n  root: ShadowRoot\n): typeof CSSStyleSheet | undefined => {\n  const Sheet = root.ownerDocument.defaultView?.CSSStyleSheet;\n  if (\n    typeof Sheet !== 'function' ||\n    typeof Sheet.prototype.replaceSync !== 'function' ||\n    !Array.isArray(root.adoptedStyleSheets)\n  ) {\n    return undefined;\n  }\n  return Sheet;\n};\n\nconst appendStyleElement = (root: ShadowRoot, css: string): void => {\n  const present = [...root.querySelectorAll('style')].some(\n    (style) => style.textContent === css\n  );\n  if (present) {\n    return;\n  }\n  const style = root.ownerDocument.createElement('style');\n  style.textContent = css;\n  root.append(style);\n};\n\nconst sharedSheet = (\n  document: Document,\n  Sheet: typeof CSSStyleSheet,\n  css: string\n): CSSStyleSheet => {\n  let sheets = sheetsByDocument.get(document);\n  if (!sheets) {\n    sheets = new Map();\n    sheetsByDocument.set(document, sheets);\n  }\n  let sheet = sheets.get(css);\n  if (!sheet) {\n    sheet = new Sheet();\n    sheet.replaceSync(css);\n    sheets.set(css, sheet);\n  }\n  return sheet;\n};\n\n/** Parses `css` once per document and adopts that sheet onto `root`. */\nexport const adoptStylesheet = (root: ShadowRoot, css: string): void => {\n  const Sheet = sheetConstructor(root);\n  if (!Sheet) {\n    appendStyleElement(root, css);\n    return;\n  }\n  const sheet = sharedSheet(root.ownerDocument, Sheet, css);\n  if (!root.adoptedStyleSheets.includes(sheet)) {\n    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];\n  }\n};\n\n/** The config's `createReactContext`, adopting `stylesheet` first; with only a stylesheet, the context is empty. */\nexport const reactContextOf = ({\n  createReactContext,\n  stylesheet,\n}: Pick<StudioConfig, 'createReactContext' | 'stylesheet'>):\n  ((root: ShadowRoot) => StyledRenderContext) | undefined => {\n  if (!stylesheet) {\n    return createReactContext;\n  }\n  let css: string | undefined;\n  return (root) => {\n    css ??= stylesheet();\n    adoptStylesheet(root, css);\n    return createReactContext?.(root) ?? {};\n  };\n};\n"]}

package/dist/surfaces/app_preview.d.ts

@@ -0,0 +1,4 @@
+import type { StudioPreviewProps } from '../config.js';
+/** The `Preview` an app receives: the React surface at the Studio's theme, read from context so its identity never changes. */
+export declare const AppPreview: ({ nodes, composition: given, zoom, maxHeight, heading, enhancements, onCommit, }: StudioPreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app_preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app_preview.d.ts","sourceRoot":"","sources":["../../src/surfaces/app_preview.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAQpD,+HAA+H;AAC/H,eAAO,MAAM,UAAU,GAAI,kFAQxB,kBAAkB,qDAiCpB,CAAC"}

package/dist/surfaces/app_preview.js

@@ -0,0 +1,28 @@
+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 { useMemo } from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import { useStudio } from '../studio_context.js';
+import { ReactSurface } from './react_surface.js';
+import { ScaledPreview } from './scaled_preview.js';
+/** The `Preview` an app receives: the React surface at the Studio's theme, read from context so its identity never changes. */
+export const AppPreview = ({ nodes, composition: given, zoom, maxHeight, heading, enhancements, onCommit, }) => {
+    const { compose } = useStudio();
+    const composed = useMemo(() => {
+        try {
+            return { composition: given ?? compose(nodes ?? []) };
+        }
+        catch (error) {
+            return { error };
+        }
+    }, [given, nodes, compose]);
+    return 'error' in composed ? (_jsx(EuiCallOut, { announceOnMount: true, size: "s", color: "danger", iconType: "error", title: "The config's compose threw", text: _jsx("p", { children: composed.error instanceof Error
+                ? composed.error.message
+                : String(composed.error) }) })) : (_jsx(ScaledPreview, { zoom, maxHeight, children: _jsx(ReactSurface, { composition: composed.composition, heading, enhancements, onCommit }) }));
+};
+//# sourceMappingURL=app_preview.js.map

package/dist/surfaces/app_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app_preview.js","sourceRoot":"","sources":["../../src/surfaces/app_preview.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,+HAA+H;AAC/H,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,WAAW,EAAE,KAAK,EAClB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAa,EAAE;QACtC,IAAI,CAAC;YACH,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;QACxD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,EAAE,KAAK,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,OAAO,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,UAAU,IACT,eAAe,QACf,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EACF,sBACG,QAAQ,CAAC,KAAK,YAAY,KAAK;gBAC9B,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO;gBACxB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GACxB,GAEN,CACH,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAO,IAAI,EAAE,SAAS,YAClC,KAAC,YAAY,IACX,WAAW,EAAE,QAAQ,CAAC,WAAW,EAC3B,OAAO,EAAE,YAAY,EAAE,QAAQ,GACrC,GACY,CACjB,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, { useMemo } from 'react';\nimport { EuiCallOut } from '@elastic/eui';\nimport type { Composition } from '@elastic/isomer-sdk';\n\nimport type { StudioPreviewProps } from '../config';\nimport { useStudio } from '../studio_context';\n\nimport { ReactSurface } from './react_surface';\nimport { ScaledPreview } from './scaled_preview';\n\ntype Composed = { composition: Composition } | { error: unknown };\n\n/** The `Preview` an app receives: the React surface at the Studio's theme, read from context so its identity never changes. */\nexport const AppPreview = ({\n  nodes,\n  composition: given,\n  zoom,\n  maxHeight,\n  heading,\n  enhancements,\n  onCommit,\n}: StudioPreviewProps) => {\n  const { compose } = useStudio();\n  const composed = useMemo((): Composed => {\n    try {\n      return { composition: given ?? compose(nodes ?? []) };\n    } catch (error) {\n      return { error };\n    }\n  }, [given, nodes, compose]);\n\n  return 'error' in composed ? (\n    <EuiCallOut\n      announceOnMount\n      size=\"s\"\n      color=\"danger\"\n      iconType=\"error\"\n      title=\"The config's compose threw\"\n      text={\n        <p>\n          {composed.error instanceof Error\n            ? composed.error.message\n            : String(composed.error)}\n        </p>\n      }\n    />\n  ) : (\n    <ScaledPreview {...{ zoom, maxHeight }}>\n      <ReactSurface\n        composition={composed.composition}\n        {...{ heading, enhancements, onCommit }}\n      />\n    </ScaledPreview>\n  );\n};\n"]}

package/dist/surfaces/app_surface.d.ts

@@ -0,0 +1,9 @@
+import type { StudioAppSurface, StudioRuntime, StudioSurfaceProps } from '../config.js';
+/** The surfaces {@link AppSurface} can show, in the Studio's order, with `png` after `snapshot` when the host rasterizes. */
+export declare const appSurfaces: (runtime: Pick<StudioRuntime, "surfaces">, hasPng: boolean) => {
+    id: StudioAppSurface;
+    label: string;
+}[];
+/** The `Surface` an app receives, read from context so its identity never changes. */
+export declare const AppSurface: ({ composition, surface, view, zoom, heading, }: StudioSurfaceProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=app_surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app_surface.d.ts","sourceRoot":"","sources":["../../src/surfaces/app_surface.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EACnB,MAAM,WAAW,CAAC;AAOnB,6HAA6H;AAC7H,eAAO,MAAM,WAAW,GACtB,SAAS,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EACxC,QAAQ,OAAO,KACd;IAAE,EAAE,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAGzC,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,UAAU,GAAI,gDAMxB,kBAAkB,4DAgBpB,CAAC"}

package/dist/surfaces/app_surface.js

@@ -0,0 +1,27 @@
+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 { useMemo } from 'react';
+import { runtimeSurfaces, SURFACE_LABELS } from '../model/describe_runtime.js';
+import { useStudio } from '../studio_context.js';
+import { PngSurface } from './png_surface.js';
+import { SurfacePreview } from './surface_preview.js';
+/** The surfaces {@link AppSurface} can show, in the Studio's order, with `png` after `snapshot` when the host rasterizes. */
+export const appSurfaces = (runtime, hasPng) => [
+    ...runtimeSurfaces(runtime).map((id) => ({ id, label: SURFACE_LABELS[id] })),
+    ...(hasPng ? [{ id: 'png', label: 'PNG' }] : []),
+];
+/** The `Surface` an app receives, read from context so its identity never changes. */
+export const AppSurface = ({ composition, surface, view = 'render', zoom = 'fit', heading, }) => {
+    const { runtime, rasterizePng } = useStudio();
+    const validation = useMemo(() => runtime.validate(composition), [runtime, composition]);
+    if (surface === 'png') {
+        return rasterizePng ? (_jsx(PngSurface, { composition, rasterizePng, zoom })) : null;
+    }
+    return (_jsx(SurfacePreview, { surface, composition, validation, view, zoom, heading }));
+};
+//# sourceMappingURL=app_surface.js.map

package/dist/surfaces/app_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app_surface.js","sourceRoot":"","sources":["../../src/surfaces/app_surface.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,6HAA6H;AAC7H,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,OAAwC,EACxC,MAAe,EAC4B,EAAE,CAAC;IAC9C,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5E,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAc,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;CAC1D,CAAC;AAEF,sFAAsF;AACtF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,WAAW,EACX,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,OAAO,GACY,EAAE,EAAE;IACvB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IAC9C,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EACnC,CAAC,OAAO,EAAE,WAAW,CAAC,CACvB,CAAC;IACF,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;QACtB,OAAO,YAAY,CAAC,CAAC,CAAC,CACpB,KAAC,UAAU,IAAO,WAAW,EAAE,YAAY,EAAE,IAAI,GAAM,CACxD,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IACD,OAAO,CACL,KAAC,cAAc,IACP,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,GAC3D,CACH,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, { useMemo } from 'react';\n\nimport type {\n  StudioAppSurface,\n  StudioRuntime,\n  StudioSurfaceProps,\n} from '../config';\nimport { runtimeSurfaces, SURFACE_LABELS } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\n\nimport { PngSurface } from './png_surface';\nimport { SurfacePreview } from './surface_preview';\n\n/** The surfaces {@link AppSurface} can show, in the Studio's order, with `png` after `snapshot` when the host rasterizes. */\nexport const appSurfaces = (\n  runtime: Pick<StudioRuntime, 'surfaces'>,\n  hasPng: boolean\n): { id: StudioAppSurface; label: string }[] => [\n  ...runtimeSurfaces(runtime).map((id) => ({ id, label: SURFACE_LABELS[id] })),\n  ...(hasPng ? [{ id: 'png' as const, label: 'PNG' }] : []),\n];\n\n/** The `Surface` an app receives, read from context so its identity never changes. */\nexport const AppSurface = ({\n  composition,\n  surface,\n  view = 'render',\n  zoom = 'fit',\n  heading,\n}: StudioSurfaceProps) => {\n  const { runtime, rasterizePng } = useStudio();\n  const validation = useMemo(\n    () => runtime.validate(composition),\n    [runtime, composition]\n  );\n  if (surface === 'png') {\n    return rasterizePng ? (\n      <PngSurface {...{ composition, rasterizePng, zoom }} />\n    ) : null;\n  }\n  return (\n    <SurfacePreview\n      {...{ surface, composition, validation, view, zoom, heading }}\n    />\n  );\n};\n"]}