@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/cli/run.js

@@ -0,0 +1,113 @@
+/*
+ * 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 { spawn } from 'node:child_process';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, isAbsolute, relative } from 'node:path';
+import { buildSite } from '../node/build_site.js';
+import { checkStudio } from '../node/check.js';
+import { startDevServer } from '../node/dev_server.js';
+import { writeInitConfig } from '../node/init_config.js';
+import { createStudioImporter, loadRenderToString, loadStudioConfig, resolveConfigPath, } from '../node/load_config.js';
+import { createRasterizer, imageFontsOf } from '../node/rasterize.js';
+import { formatReport, summarizeReport } from '../node/report.js';
+import { parseCliArgs, USAGE } from './args.js';
+const OPENERS = {
+    darwin: 'open',
+    win32: 'explorer',
+};
+/** Opens `url` in the default browser, reporting a missing or failing opener to `onError`. */
+export const openBrowser = (url, onError, command = OPENERS[process.platform] ?? 'xdg-open') => {
+    const opener = spawn(command, [url], { detached: true, stdio: 'ignore' });
+    opener.on('error', onError);
+    opener.unref();
+};
+const runCommand = async (args, io) => {
+    const { cwd, stdout, stderr } = io;
+    const { loader } = args;
+    if (args.command === 'init') {
+        const written = await writeInitConfig(args.cwd, { loader });
+        stdout(`Wrote ${displayPath(cwd, written)}. Run \`npx @elastic/isomer-studio\` to open the Studio.\n`);
+        return 0;
+    }
+    const configPath = resolveConfigPath(args.cwd, args.config);
+    io.onConfig?.(configPath);
+    switch (args.command) {
+        case 'dev': {
+            const server = await startDevServer({
+                configPath,
+                port: args.port,
+                loader,
+                log: (line) => stdout(`${line}\n`),
+            });
+            stdout(`Isomer Studio: ${server.url}\n`);
+            if (args.open) {
+                openBrowser(server.url, ({ message }) => stderr(`Could not open a browser: ${message}\n`));
+            }
+            io.onDevServer?.(server);
+            return 0;
+        }
+        case 'build': {
+            const { out, base } = args;
+            const { pngs, failures } = await buildSite({
+                configPath,
+                out,
+                base,
+                loader,
+            });
+            failures.forEach((failure) => stderr(`PNG skipped: ${failure}\n`));
+            stdout(`Wrote the Studio to ${displayPath(cwd, out)} for ${base} with ${pngs} PNGs.\n`);
+            return 0;
+        }
+        case 'check': {
+            const importModule = createStudioImporter(configPath, { loader });
+            const config = await loadStudioConfig(configPath, { importModule });
+            const rasterizePng = args.png
+                ? createRasterizer(config.runtime, imageFontsOf(config, configPath, importModule))
+                : undefined;
+            if (args.png && !rasterizePng) {
+                stderr('--png: the runtime has no snapshot surface, so no PNGs.\n');
+            }
+            const report = await checkStudio(config, {
+                renderToString: loadRenderToString(configPath),
+                surfaces: args.surfaces,
+                rasterizePng,
+            });
+            if (args.report !== undefined) {
+                mkdirSync(dirname(args.report), { recursive: true });
+                writeFileSync(args.report, formatReport(report, args.format));
+            }
+            (report.failed ? stderr : stdout)(summarizeReport(report));
+            return report.failed ? 1 : 0;
+        }
+    }
+};
+/** `path` relative to `cwd` when it is inside it, otherwise absolute. */
+const displayPath = (cwd, path) => {
+    const inside = relative(cwd, path);
+    return inside.startsWith('..') || isAbsolute(inside) ? path : inside || '.';
+};
+const isUsageError = (error) => error instanceof Error && error.name === 'UsageError';
+/** Runs one CLI invocation and resolves its exit code: 0, 1 on a failure, 2 on bad usage. */
+export const runCli = async (argv, io) => {
+    try {
+        const args = parseCliArgs(argv, io.cwd);
+        if (args.command === 'help') {
+            io.stdout(USAGE);
+            return 0;
+        }
+        return await runCommand(args, io);
+    }
+    catch (error) {
+        if (isUsageError(error)) {
+            io.stderr(`${error instanceof Error ? error.message : String(error)}\n\n${USAGE}`);
+            return 2;
+        }
+        io.stderr(`${error instanceof Error ? error.message : String(error)}\n`);
+        return 1;
+    }
+};
+//# sourceMappingURL=run.js.map

package/dist/cli/run.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"run.js","sourceRoot":"","sources":["../../src/cli/run.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 { spawn } from 'node:child_process';\nimport { mkdirSync, writeFileSync } from 'node:fs';\nimport { dirname, isAbsolute, relative } from 'node:path';\n\nimport { buildSite } from '../node/build_site';\nimport { checkStudio } from '../node/check';\nimport type { DevServer } from '../node/dev_server';\nimport { startDevServer } from '../node/dev_server';\nimport { writeInitConfig } from '../node/init_config';\nimport {\n  createStudioImporter,\n  loadRenderToString,\n  loadStudioConfig,\n  resolveConfigPath,\n} from '../node/load_config';\nimport { createRasterizer, imageFontsOf } from '../node/rasterize';\nimport { formatReport, summarizeReport } from '../node/report';\n\nimport type { CliArgs } from './args';\nimport { parseCliArgs, USAGE } from './args';\n\nexport interface CliIo {\n  cwd: string;\n  stdout: (text: string) => void;\n  stderr: (text: string) => void;\n  /** Called with the running dev server, which keeps the process alive until it closes. */\n  onDevServer?: ((server: DevServer) => void) | undefined;\n  /** Called with the config before it loads; the binary passes `registerProjectResolution`. */\n  onConfig?: ((configPath: string) => void) | undefined;\n}\n\nconst OPENERS: Readonly<Partial<Record<NodeJS.Platform, string>>> = {\n  darwin: 'open',\n  win32: 'explorer',\n};\n\n/** Opens `url` in the default browser, reporting a missing or failing opener to `onError`. */\nexport const openBrowser = (\n  url: string,\n  onError: (error: Error) => void,\n  command = OPENERS[process.platform] ?? 'xdg-open'\n): void => {\n  const opener = spawn(command, [url], { detached: true, stdio: 'ignore' });\n  opener.on('error', onError);\n  opener.unref();\n};\n\nconst runCommand = async (\n  args: Exclude<CliArgs, { command: 'help' }>,\n  io: CliIo\n): Promise<number> => {\n  const { cwd, stdout, stderr } = io;\n  const { loader } = args;\n  if (args.command === 'init') {\n    const written = await writeInitConfig(args.cwd, { loader });\n    stdout(\n      `Wrote ${displayPath(cwd, written)}. Run \\`npx @elastic/isomer-studio\\` to open the Studio.\\n`\n    );\n    return 0;\n  }\n  const configPath = resolveConfigPath(args.cwd, args.config);\n  io.onConfig?.(configPath);\n\n  switch (args.command) {\n    case 'dev': {\n      const server = await startDevServer({\n        configPath,\n        port: args.port,\n        loader,\n        log: (line) => stdout(`${line}\\n`),\n      });\n      stdout(`Isomer Studio: ${server.url}\\n`);\n      if (args.open) {\n        openBrowser(server.url, ({ message }) =>\n          stderr(`Could not open a browser: ${message}\\n`)\n        );\n      }\n      io.onDevServer?.(server);\n      return 0;\n    }\n    case 'build': {\n      const { out, base } = args;\n      const { pngs, failures } = await buildSite({\n        configPath,\n        out,\n        base,\n        loader,\n      });\n      failures.forEach((failure) => stderr(`PNG skipped: ${failure}\\n`));\n      stdout(\n        `Wrote the Studio to ${displayPath(cwd, out)} for ${base} with ${pngs} PNGs.\\n`\n      );\n      return 0;\n    }\n    case 'check': {\n      const importModule = createStudioImporter(configPath, { loader });\n      const config = await loadStudioConfig(configPath, { importModule });\n      const rasterizePng = args.png\n        ? createRasterizer(\n            config.runtime,\n            imageFontsOf(config, configPath, importModule)\n          )\n        : undefined;\n      if (args.png && !rasterizePng) {\n        stderr('--png: the runtime has no snapshot surface, so no PNGs.\\n');\n      }\n      const report = await checkStudio(config, {\n        renderToString: loadRenderToString(configPath),\n        surfaces: args.surfaces,\n        rasterizePng,\n      });\n      if (args.report !== undefined) {\n        mkdirSync(dirname(args.report), { recursive: true });\n        writeFileSync(args.report, formatReport(report, args.format));\n      }\n      (report.failed ? stderr : stdout)(summarizeReport(report));\n      return report.failed ? 1 : 0;\n    }\n  }\n};\n\n/** `path` relative to `cwd` when it is inside it, otherwise absolute. */\nconst displayPath = (cwd: string, path: string): string => {\n  const inside = relative(cwd, path);\n  return inside.startsWith('..') || isAbsolute(inside) ? path : inside || '.';\n};\n\nconst isUsageError = (error: unknown): boolean =>\n  error instanceof Error && error.name === 'UsageError';\n\n/** Runs one CLI invocation and resolves its exit code: 0, 1 on a failure, 2 on bad usage. */\nexport const runCli = async (\n  argv: readonly string[],\n  io: CliIo\n): Promise<number> => {\n  try {\n    const args = parseCliArgs(argv, io.cwd);\n    if (args.command === 'help') {\n      io.stdout(USAGE);\n      return 0;\n    }\n    return await runCommand(args, io);\n  } catch (error) {\n    if (isUsageError(error)) {\n      io.stderr(\n        `${error instanceof Error ? error.message : String(error)}\\n\\n${USAGE}`\n      );\n      return 2;\n    }\n    io.stderr(`${error instanceof Error ? error.message : String(error)}\\n`);\n    return 1;\n  }\n};\n"]}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,22 @@
+/*
+ * 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 { runCli } from './cli/run.js';
+import { registerProjectResolution } from './node/load_config.js';
+const shutdown = [];
+process.exitCode = await runCli(process.argv.slice(2), {
+    cwd: process.cwd(),
+    stdout: (text) => process.stdout.write(text),
+    stderr: (text) => process.stderr.write(text),
+    onDevServer: (server) => shutdown.push(server.close),
+    onConfig: registerProjectResolution,
+});
+const stop = () => {
+    void Promise.all(shutdown.map((close) => close())).then(() => process.exit());
+};
+process.once('SIGINT', stop);
+process.once('SIGTERM', stop);
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,QAAQ,GAA+B,EAAE,CAAC;AAEhD,OAAO,CAAC,QAAQ,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;IACrD,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACpD,QAAQ,EAAE,yBAAyB;CACpC,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,KAAK,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;AAChF,CAAC,CAAC;AACF,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,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 { runCli } from './cli/run';\nimport { registerProjectResolution } from './node/load_config';\n\nconst shutdown: Array<() => Promise<void>> = [];\n\nprocess.exitCode = await runCli(process.argv.slice(2), {\n  cwd: process.cwd(),\n  stdout: (text) => process.stdout.write(text),\n  stderr: (text) => process.stderr.write(text),\n  onDevServer: (server) => shutdown.push(server.close),\n  onConfig: registerProjectResolution,\n});\n\nconst stop = () => {\n  void Promise.all(shutdown.map((close) => close())).then(() => process.exit());\n};\nprocess.once('SIGINT', stop);\nprocess.once('SIGTERM', stop);\n"]}

package/dist/config.d.ts

@@ -0,0 +1,118 @@
+import type { ComponentType } from 'react';
+import type { IsomerRuntime } from '@elastic/isomer-runtime';
+import type { Composition, PrimitiveIcon, PrimitiveNode, StyledRenderContext } from '@elastic/isomer-sdk';
+import type { StudioSurface } from './model/describe_runtime.js';
+import type { PreviewZoom } from './surfaces/scaled_preview.js';
+import type { RenderPdf } from './types.js';
+/** A runtime whose React renderers resolve style handles through `resolveClassName`. */
+export type StudioRuntime = IsomerRuntime<unknown, StyledRenderContext>;
+export type StudioTheme = 'light' | 'dark';
+/** Wraps example nodes in a composition the runtime's frame accepts. */
+export type StudioCompose = (nodes: readonly PrimitiveNode[], options: {
+    theme: StudioTheme;
+}) => Composition;
+export type StudioPreviewProps = ({
+    nodes: readonly PrimitiveNode[];
+    composition?: never;
+} | {
+    composition: Composition;
+    nodes?: never;
+}) & {
+    /** Defaults to `fit`. */
+    zoom?: PreviewZoom | undefined;
+    /** With `fit`, also scales down to this height. */
+    maxHeight?: number | undefined;
+    /** `false` leaves out the composition's leading title, as a slide on its own wants. Defaults to `true`. */
+    heading?: boolean | undefined;
+    /** Enhancement ids passed to the React surface, such as the slides pack's `SLIDE_BUILDS`. */
+    enhancements?: readonly string[] | undefined;
+    /** Called with the shadow root after each render commits, for a host step such as `showSlideBuild`. Never called on the `html` fallback. */
+    onCommit?: ((root: ShadowRoot) => void) | undefined;
+};
+/** A surface an app can show: one of the runtime's, or `png`, the host's rasterized snapshot. */
+export type StudioAppSurface = StudioSurface | 'png';
+export interface StudioSurfaceProps {
+    composition: Composition;
+    surface: StudioAppSurface;
+    /** `source` shows what the surface produced, as text. Defaults to `render`. */
+    view?: 'render' | 'source' | undefined;
+    /** Scales the `react`, `html`, `snapshot` and `png` renders. Defaults to `fit`. */
+    zoom?: PreviewZoom | undefined;
+    /** `false` leaves out the composition's leading title. Defaults to `true`. */
+    heading?: boolean | undefined;
+}
+/** What the Studio hands an app's page. */
+export interface StudioAppProps {
+    /** Renders pack output in a shadow root, isolated from the app's and the Studio's styles. `nodes` go through the config's `compose`. */
+    Preview: ComponentType<StudioPreviewProps>;
+    runtime: StudioRuntime;
+    theme: StudioTheme;
+    /** The part of the hash after `#/app/<id>/`, which may contain slashes. */
+    path: string;
+    navigate: (path: string) => void;
+    /** Renders a finished composition on one surface, with what it reported, as the Studio's own previews do. */
+    Surface: ComponentType<StudioSurfaceProps>;
+    /** The surfaces `Surface` can show, in display order, with their labels; `png` only when the host rasterizes. */
+    surfaces: readonly {
+        id: StudioAppSurface;
+        label: string;
+    }[];
+    /** Present when the host can write PDFs, as `dev` does. */
+    renderPdf?: RenderPdf | undefined;
+}
+/** A nav row under an app, listed without loading it. */
+export interface StudioAppPage {
+    /** The page's `path` under `#/app/<id>/`, one or more segments; the page is active for it and every path below it. */
+    path: string;
+    title: string;
+    /** Pages with the same `section` are listed under it, in order of first appearance. */
+    section?: string | undefined;
+}
+/** A page of the Studio that demonstrates the pack, under `#/app/<id>/`. */
+export interface StudioApp {
+    /** A URL-safe hash segment, unique within the config: `/^[a-z][a-z0-9-]*$/`. */
+    id: string;
+    title: string;
+    /** One line on what the app shows, on the Home page's tile and its Loaded panel. */
+    description?: string | undefined;
+    icon?: PrimitiveIcon | undefined;
+    /** A module whose default export is the app's page. Node never calls it, so server-only code stays out of it. */
+    load: () => Promise<{
+        default: ComponentType<StudioAppProps>;
+    }>;
+    pages?: readonly StudioAppPage[] | undefined;
+}
+/** What a pack hands `isomer-studio`, as the default export of its config file. */
+export interface StudioConfig {
+    /**
+     * Replaces the header, the page title, and the `check` report name, which are `Isomer Studio`.
+     * A pack's name belongs in the nav.
+     */
+    title?: string | undefined;
+    runtime: StudioRuntime;
+    /** Host styling for the React surface inside a shadow root; without it, or `stylesheet`, the React preview falls back to the `html` surface. */
+    createReactContext?: ((root: ShadowRoot) => StyledRenderContext) | undefined;
+    /** The CSS the React surface needs, adopted into its shadow root before `createReactContext` runs. Called once per config. */
+    stylesheet?: (() => string) | undefined;
+    /** Defaults to `{ type: 'view', body: nodes, theme }`. Return a node that is already a valid root as is. Wins over `previewExample`. */
+    compose?: StudioCompose | undefined;
+    /** The composition one node is shown in on its own; the Studio adds the theme, and puts several nodes in a `view`. */
+    previewExample?: ((node: PrimitiveNode) => Composition) | undefined;
+    /** Pages listed under the app in the nav. */
+    apps?: readonly StudioApp[] | undefined;
+    /**
+     * A module path, relative to the config, whose default export lists the takumi `FontLoader`s PNGs and PDFs are drawn with.
+     * Node imports it and the browser never does, so it may read files. Without it, PNGs use takumi's built-in face and PDFs can't draw text.
+     */
+    imageFonts?: string | undefined;
+    /**
+     * Primitive `type`s the Home page features, in this order. Without it, Home picks {@link FEATURED_COUNT}
+     * at random on each load.
+     */
+    featured?: readonly string[] | undefined;
+}
+/** How many primitives Home features when the config names none. */
+export declare const FEATURED_COUNT = 6;
+/** Types a config file's default export. */
+export declare const defineStudioConfig: (config: StudioConfig) => StudioConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"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"}

package/dist/config.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+/** How many primitives Home features when the config names none. */
+export const FEATURED_COUNT = 6;
+/** Types a config file's default export. */
+export const defineStudioConfig = (config) => config;
+//# sourceMappingURL=config.js.map

package/dist/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AA6HH,oEAAoE;AACpE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEhC,4CAA4C;AAC5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAgB,EAAE,CACvE,MAAM,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { ComponentType } from 'react';\nimport type { IsomerRuntime } from '@elastic/isomer-runtime';\nimport type {\n  Composition,\n  PrimitiveIcon,\n  PrimitiveNode,\n  StyledRenderContext,\n} from '@elastic/isomer-sdk';\n\nimport type { StudioSurface } from './model/describe_runtime';\nimport type { PreviewZoom } from './surfaces/scaled_preview';\nimport type { RenderPdf } from './types';\n\n/** A runtime whose React renderers resolve style handles through `resolveClassName`. */\nexport type StudioRuntime = IsomerRuntime<unknown, StyledRenderContext>;\n\nexport type StudioTheme = 'light' | 'dark';\n\n/** Wraps example nodes in a composition the runtime's frame accepts. */\nexport type StudioCompose = (\n  nodes: readonly PrimitiveNode[],\n  options: { theme: StudioTheme }\n) => Composition;\n\nexport type StudioPreviewProps = (\n  | { nodes: readonly PrimitiveNode[]; composition?: never }\n  | { composition: Composition; nodes?: never }\n) & {\n  /** Defaults to `fit`. */\n  zoom?: PreviewZoom | undefined;\n  /** With `fit`, also scales down to this height. */\n  maxHeight?: number | undefined;\n  /** `false` leaves out the composition's leading title, as a slide on its own wants. Defaults to `true`. */\n  heading?: boolean | undefined;\n  /** Enhancement ids passed to the React surface, such as the slides pack's `SLIDE_BUILDS`. */\n  enhancements?: readonly string[] | undefined;\n  /** Called with the shadow root after each render commits, for a host step such as `showSlideBuild`. Never called on the `html` fallback. */\n  onCommit?: ((root: ShadowRoot) => void) | undefined;\n};\n\n/** A surface an app can show: one of the runtime's, or `png`, the host's rasterized snapshot. */\nexport type StudioAppSurface = StudioSurface | 'png';\n\nexport interface StudioSurfaceProps {\n  composition: Composition;\n  surface: StudioAppSurface;\n  /** `source` shows what the surface produced, as text. Defaults to `render`. */\n  view?: 'render' | 'source' | undefined;\n  /** Scales the `react`, `html`, `snapshot` and `png` renders. Defaults to `fit`. */\n  zoom?: PreviewZoom | undefined;\n  /** `false` leaves out the composition's leading title. Defaults to `true`. */\n  heading?: boolean | undefined;\n}\n\n/** What the Studio hands an app's page. */\nexport interface StudioAppProps {\n  /** Renders pack output in a shadow root, isolated from the app's and the Studio's styles. `nodes` go through the config's `compose`. */\n  Preview: ComponentType<StudioPreviewProps>;\n  runtime: StudioRuntime;\n  theme: StudioTheme;\n  /** The part of the hash after `#/app/<id>/`, which may contain slashes. */\n  path: string;\n  navigate: (path: string) => void;\n  /** Renders a finished composition on one surface, with what it reported, as the Studio's own previews do. */\n  Surface: ComponentType<StudioSurfaceProps>;\n  /** The surfaces `Surface` can show, in display order, with their labels; `png` only when the host rasterizes. */\n  surfaces: readonly { id: StudioAppSurface; label: string }[];\n  /** Present when the host can write PDFs, as `dev` does. */\n  renderPdf?: RenderPdf | undefined;\n}\n\n/** A nav row under an app, listed without loading it. */\nexport interface StudioAppPage {\n  /** The page's `path` under `#/app/<id>/`, one or more segments; the page is active for it and every path below it. */\n  path: string;\n  title: string;\n  /** Pages with the same `section` are listed under it, in order of first appearance. */\n  section?: string | undefined;\n}\n\n/** A page of the Studio that demonstrates the pack, under `#/app/<id>/`. */\nexport interface StudioApp {\n  /** A URL-safe hash segment, unique within the config: `/^[a-z][a-z0-9-]*$/`. */\n  id: string;\n  title: string;\n  /** One line on what the app shows, on the Home page's tile and its Loaded panel. */\n  description?: string | undefined;\n  icon?: PrimitiveIcon | undefined;\n  /** A module whose default export is the app's page. Node never calls it, so server-only code stays out of it. */\n  load: () => Promise<{ default: ComponentType<StudioAppProps> }>;\n  pages?: readonly StudioAppPage[] | undefined;\n}\n\n/** What a pack hands `isomer-studio`, as the default export of its config file. */\nexport interface StudioConfig {\n  /**\n   * Replaces the header, the page title, and the `check` report name, which are `Isomer Studio`.\n   * A pack's name belongs in the nav.\n   */\n  title?: string | undefined;\n  runtime: StudioRuntime;\n  /** Host styling for the React surface inside a shadow root; without it, or `stylesheet`, the React preview falls back to the `html` surface. */\n  createReactContext?: ((root: ShadowRoot) => StyledRenderContext) | undefined;\n  /** The CSS the React surface needs, adopted into its shadow root before `createReactContext` runs. Called once per config. */\n  stylesheet?: (() => string) | undefined;\n  /** Defaults to `{ type: 'view', body: nodes, theme }`. Return a node that is already a valid root as is. Wins over `previewExample`. */\n  compose?: StudioCompose | undefined;\n  /** The composition one node is shown in on its own; the Studio adds the theme, and puts several nodes in a `view`. */\n  previewExample?: ((node: PrimitiveNode) => Composition) | undefined;\n  /** Pages listed under the app in the nav. */\n  apps?: readonly StudioApp[] | undefined;\n  /**\n   * A module path, relative to the config, whose default export lists the takumi `FontLoader`s PNGs and PDFs are drawn with.\n   * Node imports it and the browser never does, so it may read files. Without it, PNGs use takumi's built-in face and PDFs can't draw text.\n   */\n  imageFonts?: string | undefined;\n  /**\n   * Primitive `type`s the Home page features, in this order. Without it, Home picks {@link FEATURED_COUNT}\n   * at random on each load.\n   */\n  featured?: readonly string[] | undefined;\n}\n\n/** How many primitives Home features when the config names none. */\nexport const FEATURED_COUNT = 6;\n\n/** Types a config file's default export. */\nexport const defineStudioConfig = (config: StudioConfig): StudioConfig =>\n  config;\n"]}

package/dist/dev/code_editor.d.ts

@@ -0,0 +1,10 @@
+import type { EditorFormat } from './use_editor.js';
+export interface CodeEditorProps {
+    format: EditorFormat;
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+}
+/** The source editor, type-checked against the runtime's authoring types. */
+export declare const CodeEditor: ({ format, value, onChange, ariaLabel, }: CodeEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code_editor.d.ts.map

package/dist/dev/code_editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code_editor.d.ts","sourceRoot":"","sources":["../../src/dev/code_editor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQjD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,6EAA6E;AAC7E,eAAO,MAAM,UAAU,GAAI,yCAKxB,eAAe,qDAoBjB,CAAC"}

package/dist/dev/code_editor.js

@@ -0,0 +1,22 @@
+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 { lazy, Suspense } from 'react';
+import { EuiFlexGroup, EuiLoadingSpinner } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+const MonacoEditor = lazy(() => import('./monaco_editor.js').then(({ MonacoEditor: component }) => ({
+    default: component,
+})));
+/** The source editor, type-checked against the runtime's authoring types. */
+export const CodeEditor = ({ format, value, onChange, ariaLabel, }) => {
+    const { docs: { authoring }, } = useStudio();
+    return (_jsx(Suspense, { fallback: _jsx(EuiFlexGroup, { justifyContent: "center", alignItems: "center", css: css `
+            flex: 1;
+          `, children: _jsx(EuiLoadingSpinner, { size: "l" }) }), children: _jsx(MonacoEditor, { format, value, onChange, ariaLabel, authoring }) }));
+};
+//# sourceMappingURL=code_editor.js.map

package/dist/dev/code_editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code_editor.js","sourceRoot":"","sources":["../../src/dev/code_editor.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAC7B,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC,CACJ,CAAC;AASF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,GACO,EAAE,EAAE;IACpB,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,GACpB,GAAG,SAAS,EAAE,CAAC;IAEhB,OAAO,CACL,KAAC,QAAQ,IACP,QAAQ,EACN,KAAC,YAAY,IACX,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,GAAG,CAAA;;WAEP,YACD,KAAC,iBAAiB,IAAC,IAAI,EAAC,GAAG,GAAG,GACjB,YAEjB,KAAC,YAAY,IAAO,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAM,GAC9D,CACZ,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, { lazy, Suspense } from 'react';\nimport { EuiFlexGroup, EuiLoadingSpinner } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { useStudio } from '../studio_context';\n\nimport type { EditorFormat } from './use_editor';\n\nconst MonacoEditor = lazy(() =>\n  import('./monaco_editor').then(({ MonacoEditor: component }) => ({\n    default: component,\n  }))\n);\n\nexport interface CodeEditorProps {\n  format: EditorFormat;\n  value: string;\n  onChange: (value: string) => void;\n  ariaLabel: string;\n}\n\n/** The source editor, type-checked against the runtime's authoring types. */\nexport const CodeEditor = ({\n  format,\n  value,\n  onChange,\n  ariaLabel,\n}: CodeEditorProps) => {\n  const {\n    docs: { authoring },\n  } = useStudio();\n\n  return (\n    <Suspense\n      fallback={\n        <EuiFlexGroup\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          css={css`\n            flex: 1;\n          `}>\n          <EuiLoadingSpinner size=\"l\" />\n        </EuiFlexGroup>\n      }>\n      <MonacoEditor {...{ format, value, onChange, ariaLabel, authoring }} />\n    </Suspense>\n  );\n};\n"]}

package/dist/dev/dev_view.d.ts

@@ -0,0 +1,9 @@
+import type { StudioRoute } from '../chrome/route.js';
+export interface DevViewProps {
+    route: StudioRoute;
+    stacked: boolean;
+    navigate: (next: Partial<StudioRoute>) => void;
+}
+/** The workbench: edit one example beside the previews, or above them when space is tight. */
+export declare const DevView: ({ route: { page, example }, stacked, navigate, }: DevViewProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=dev_view.d.ts.map

package/dist/dev/dev_view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev_view.d.ts","sourceRoot":"","sources":["../../src/dev/dev_view.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAiHnD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,8FAA8F;AAC9F,eAAO,MAAM,OAAO,GAAI,kDAIrB,YAAY,4DAgBd,CAAC"}

package/dist/dev/dev_view.js

@@ -0,0 +1,65 @@
+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 { useId, useState } from 'react';
+import { EuiPanel, EuiResizableContainer, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PrimitiveHeading } from '../chrome/primitive_heading.js';
+import { useStudio } from '../studio_context.js';
+import { EditorPanel, WorkbenchStatus } from './editor_panel.js';
+import { PreviewPanel } from './preview_panel.js';
+import { PropReference } from './prop_reference.js';
+import { useEditor } from './use_editor.js';
+const Workbench = ({ doc, example, stacked, onExampleChange, }) => {
+    const { euiTheme } = useEuiTheme();
+    const editor = useEditor(doc.examples[example]?.node ?? { type: doc.type });
+    const { composition, validation } = editor;
+    const [referenceOpen, setReferenceOpen] = useState(false);
+    const referenceId = useId();
+    return (_jsxs("div", { css: css `
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        padding: ${euiTheme.size.l};
+      `, children: [_jsx("div", { css: css `
+          margin-bottom: ${euiTheme.size.base};
+        `, children: _jsx(PrimitiveHeading, { doc, layout: "inline" }) }), _jsxs(EuiPanel, { role: "region", "aria-label": "Composition workbench", paddingSize: "none", css: css `
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        `, children: [_jsx(EuiResizableContainer, { direction: stacked ? 'vertical' : 'horizontal', css: css `
+            flex: 1;
+            min-height: 0;
+          `, children: (Panel, Resizer) => (_jsxs(_Fragment, { children: [_jsx(Panel, { initialSize: 40, minSize: "360px", paddingSize: "none", color: "transparent", children: _jsx(EditorPanel, { doc, example, editor, onExampleChange }) }), _jsx(Resizer, { indicator: "border" }), _jsx(Panel, { initialSize: 60, minSize: "0px", paddingSize: "none", color: "transparent", children: _jsx(PreviewPanel, { composition, validation, supported: doc.surfaces }) })] })) }), _jsxs("div", { css: css `
+            flex: 0 1 auto;
+            min-height: 0;
+            max-height: 40%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            border-top: ${euiTheme.border.thin};
+          `, children: [_jsx("div", { css: css `
+              flex: 0 1 auto;
+              min-height: 0;
+              display: flex;
+              flex-direction: column;
+              padding: ${euiTheme.size.s} ${euiTheme.size.base};
+            `, children: _jsx(WorkbenchStatus, { editor, referenceOpen, referenceId, onToggleReference: () => setReferenceOpen((open) => !open) }) }), referenceOpen ? (_jsx(PropReference, { doc, nodes: editor.nodes, id: referenceId })) : null] })] })] }));
+};
+/** The workbench: edit one example beside the previews, or above them when space is tight. */
+export const DevView = ({ route: { page, example }, stacked, navigate, }) => {
+    const { docs: { primitives }, } = useStudio();
+    const doc = primitives.find(({ type }) => type === page);
+    if (!doc) {
+        return null;
+    }
+    return (_jsx(Workbench, { doc, example, stacked, onExampleChange: (next) => navigate({ example: next }) }, `${page}/${example}`));
+};
+//# sourceMappingURL=dev_view.js.map

package/dist/dev/dev_view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev_view.js","sourceRoot":"","sources":["../../src/dev/dev_view.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, { useId, useState } from 'react';\nimport { EuiPanel, EuiResizableContainer, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { PrimitiveHeading } from '../chrome/primitive_heading';\nimport type { StudioRoute } from '../chrome/route';\nimport type { PrimitiveDoc } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\n\nimport { EditorPanel, WorkbenchStatus } from './editor_panel';\nimport { PreviewPanel } from './preview_panel';\nimport { PropReference } from './prop_reference';\nimport { useEditor } from './use_editor';\n\nconst Workbench = ({\n  doc,\n  example,\n  stacked,\n  onExampleChange,\n}: {\n  doc: PrimitiveDoc;\n  example: number;\n  stacked: boolean;\n  onExampleChange: (example: number) => void;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const editor = useEditor(doc.examples[example]?.node ?? { type: doc.type });\n  const { composition, validation } = editor;\n  const [referenceOpen, setReferenceOpen] = useState(false);\n  const referenceId = useId();\n\n  return (\n    <div\n      css={css`\n        height: 100%;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        padding: ${euiTheme.size.l};\n      `}>\n      <div\n        css={css`\n          margin-bottom: ${euiTheme.size.base};\n        `}>\n        <PrimitiveHeading {...{ doc }} layout=\"inline\" />\n      </div>\n      <EuiPanel\n        role=\"region\"\n        aria-label=\"Composition workbench\"\n        paddingSize=\"none\"\n        css={css`\n          flex: 1;\n          min-height: 0;\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        `}>\n        <EuiResizableContainer\n          direction={stacked ? 'vertical' : 'horizontal'}\n          css={css`\n            flex: 1;\n            min-height: 0;\n          `}>\n          {(Panel, Resizer) => (\n            <>\n              <Panel\n                initialSize={40}\n                minSize=\"360px\"\n                paddingSize=\"none\"\n                color=\"transparent\">\n                <EditorPanel {...{ doc, example, editor, onExampleChange }} />\n              </Panel>\n              <Resizer indicator=\"border\" />\n              <Panel\n                initialSize={60}\n                minSize=\"0px\"\n                paddingSize=\"none\"\n                color=\"transparent\">\n                <PreviewPanel\n                  {...{ composition, validation }}\n                  supported={doc.surfaces}\n                />\n              </Panel>\n            </>\n          )}\n        </EuiResizableContainer>\n        <div\n          css={css`\n            flex: 0 1 auto;\n            min-height: 0;\n            max-height: 40%;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n            border-top: ${euiTheme.border.thin};\n          `}>\n          <div\n            css={css`\n              flex: 0 1 auto;\n              min-height: 0;\n              display: flex;\n              flex-direction: column;\n              padding: ${euiTheme.size.s} ${euiTheme.size.base};\n            `}>\n            <WorkbenchStatus\n              {...{ editor, referenceOpen, referenceId }}\n              onToggleReference={() => setReferenceOpen((open) => !open)}\n            />\n          </div>\n          {referenceOpen ? (\n            <PropReference {...{ doc }} nodes={editor.nodes} id={referenceId} />\n          ) : null}\n        </div>\n      </EuiPanel>\n    </div>\n  );\n};\n\nexport interface DevViewProps {\n  route: StudioRoute;\n  stacked: boolean;\n  navigate: (next: Partial<StudioRoute>) => void;\n}\n\n/** The workbench: edit one example beside the previews, or above them when space is tight. */\nexport const DevView = ({\n  route: { page, example },\n  stacked,\n  navigate,\n}: DevViewProps) => {\n  const {\n    docs: { primitives },\n  } = useStudio();\n  const doc = primitives.find(({ type }) => type === page);\n  if (!doc) {\n    return null;\n  }\n\n  return (\n    <Workbench\n      key={`${page}/${example}`}\n      {...{ doc, example, stacked }}\n      onExampleChange={(next) => navigate({ example: next })}\n    />\n  );\n};\n"]}

package/dist/dev/editor_panel.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveDoc } from '../model/describe_runtime.js';
+import type { EditorState } from './use_editor.js';
+export declare const WorkbenchStatus: ({ editor: { parseError, isParsing, validation, format }, referenceOpen, referenceId, onToggleReference, }: {
+    editor: EditorState;
+    referenceOpen: boolean;
+    referenceId: string;
+    onToggleReference: () => void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export interface EditorPanelProps {
+    doc: PrimitiveDoc;
+    example: number;
+    editor: EditorState;
+    onExampleChange: (example: number) => void;
+}
+/** The example picker and source editor above the shared workbench status. */
+export declare const EditorPanel: ({ doc, example, editor, onExampleChange, }: EditorPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor_panel.d.ts.map

package/dist/dev/editor_panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor_panel.d.ts","sourceRoot":"","sources":["../../src/dev/editor_panel.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,cAAc,CAAC;AAK9D,eAAO,MAAM,eAAe,GAAI,2GAK7B;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,qDAqEA,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,YAAY,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,8EAA8E;AAC9E,eAAO,MAAM,WAAW,GAAI,4CAKzB,gBAAgB,qDAoFlB,CAAC"}

package/dist/dev/editor_panel.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { EuiButton, EuiButtonEmpty, EuiButtonGroup, EuiButtonIcon, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText, EuiToolTip, useEuiTheme, } from '@elastic/eui';
+import { formatValidationError } from '@elastic/isomer-sdk';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+import { ExamplePicker } from '../surfaces/example_picker.js';
+import { CodeEditor } from './code_editor.js';
+const isFormat = (id) => id === 'jsx' || id === 'json';
+export const WorkbenchStatus = ({ editor: { parseError, isParsing, validation, format }, referenceOpen, referenceId, onToggleReference, }) => {
+    const { errors } = validation;
+    const health = parseError
+        ? { color: 'danger', label: format === 'jsx' ? 'JSX error' : 'JSON error' }
+        : isParsing
+            ? { color: 'subdued', label: 'Checking…' }
+            : errors.length
+                ? {
+                    color: 'danger',
+                    label: `Invalid · ${errors.length} ${errors.length === 1 ? 'error' : 'errors'}`,
+                }
+                : { color: 'success', label: 'Valid' };
+    return (_jsxs(_Fragment, { children: [_jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, css: css `
+          flex: none;
+        `, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(EuiButtonEmpty, { size: "xs", color: "text", iconType: referenceOpen ? 'chevronSingleDown' : 'chevronSingleRight', "aria-expanded": referenceOpen, "aria-controls": referenceId, onClick: onToggleReference, children: "Props" }) }), _jsx(EuiFlexItem, {}), _jsx(EuiFlexItem, { grow: false, children: _jsx(EuiHealth, { color: health.color, textSize: "xs", children: health.label }) })] }), parseError || errors.length ? (_jsx(EuiText, { size: "xs", color: "danger", role: "region", tabIndex: 0, "aria-label": "Validation errors", css: css `
+            flex: 0 1 auto;
+            min-height: 0;
+            overflow-y: auto;
+          `, children: _jsx("ul", { children: parseError ? (_jsx("li", { children: parseError })) : (errors.map((error) => (_jsx("li", { children: formatValidationError(error) }, formatValidationError(error))))) }) })) : null] }));
+};
+/** The example picker and source editor above the shared workbench status. */
+export const EditorPanel = ({ doc, example, editor, onExampleChange, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { transformJsx } = useStudio();
+    const { label, examples } = doc;
+    const { format, setFormat, source, setSource } = editor;
+    const jsxButton = (_jsx(EuiButton, { id: "jsx", isDisabled: !transformJsx, hasAriaDisabled: true, children: "JSX" }));
+    return (_jsxs("div", { role: "region", "aria-label": "Source editor", css: css `
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+
+        @media (max-width: 1120px) {
+          width: 100%;
+        }
+      `, children: [_jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, css: css `
+          flex-grow: 0;
+          padding: ${euiTheme.size.s} ${euiTheme.size.base};
+        `, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(ExamplePicker, { examples, example, onChange: onExampleChange }) }), _jsx(EuiFlexItem, {}), _jsx(EuiFlexItem, { grow: false, children: _jsxs(EuiButtonGroup, { legend: "Source format", buttonSize: "s", variant: "selection", idSelected: format, display: "highlighted", onChange: (id) => isFormat(id) && setFormat(id), children: [transformJsx ? (jsxButton) : (_jsx(EuiToolTip, { content: "The host supplied no JSX transform.", children: jsxButton })), _jsx(EuiButton, { id: "json", children: "JSON" })] }) }), _jsx(EuiFlexItem, { grow: false, children: _jsx(EuiCopy, { textToCopy: source, children: (copy) => (_jsx(EuiToolTip, { content: format === 'jsx' ? 'Copy JSX' : 'Copy JSON', children: _jsx(EuiButtonIcon, { size: "s", color: "text", iconType: "copy", "aria-label": format === 'jsx' ? 'Copy JSX' : 'Copy JSON', onClick: copy }) })) }) })] }), _jsx(CodeEditor, { format, value: source, onChange: setSource, ariaLabel: `${label} source` })] }));
+};
+//# sourceMappingURL=editor_panel.js.map

package/dist/dev/editor_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor_panel.js","sourceRoot":"","sources":["../../src/dev/editor_panel.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 from 'react';\nimport {\n  EuiButton,\n  EuiButtonEmpty,\n  EuiButtonGroup,\n  EuiButtonIcon,\n  EuiCopy,\n  EuiFlexGroup,\n  EuiFlexItem,\n  EuiHealth,\n  EuiText,\n  EuiToolTip,\n  useEuiTheme,\n} from '@elastic/eui';\nimport { formatValidationError } from '@elastic/isomer-sdk';\nimport { css } from '@emotion/react';\n\nimport type { PrimitiveDoc } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\nimport { ExamplePicker } from '../surfaces/example_picker';\n\nimport { CodeEditor } from './code_editor';\nimport type { EditorFormat, EditorState } from './use_editor';\n\nconst isFormat = (id: string): id is EditorFormat =>\n  id === 'jsx' || id === 'json';\n\nexport const WorkbenchStatus = ({\n  editor: { parseError, isParsing, validation, format },\n  referenceOpen,\n  referenceId,\n  onToggleReference,\n}: {\n  editor: EditorState;\n  referenceOpen: boolean;\n  referenceId: string;\n  onToggleReference: () => void;\n}) => {\n  const { errors } = validation;\n  const health = parseError\n    ? { color: 'danger', label: format === 'jsx' ? 'JSX error' : 'JSON error' }\n    : isParsing\n      ? { color: 'subdued', label: 'Checking…' }\n      : errors.length\n        ? {\n            color: 'danger',\n            label: `Invalid · ${errors.length} ${errors.length === 1 ? 'error' : 'errors'}`,\n          }\n        : { color: 'success', label: 'Valid' };\n\n  return (\n    <>\n      <EuiFlexGroup\n        gutterSize=\"s\"\n        alignItems=\"center\"\n        responsive={false}\n        css={css`\n          flex: none;\n        `}>\n        <EuiFlexItem grow={false}>\n          <EuiButtonEmpty\n            size=\"xs\"\n            color=\"text\"\n            iconType={\n              referenceOpen ? 'chevronSingleDown' : 'chevronSingleRight'\n            }\n            aria-expanded={referenceOpen}\n            aria-controls={referenceId}\n            onClick={onToggleReference}>\n            Props\n          </EuiButtonEmpty>\n        </EuiFlexItem>\n        <EuiFlexItem />\n        <EuiFlexItem grow={false}>\n          <EuiHealth color={health.color} textSize=\"xs\">\n            {health.label}\n          </EuiHealth>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      {parseError || errors.length ? (\n        <EuiText\n          size=\"xs\"\n          color=\"danger\"\n          role=\"region\"\n          tabIndex={0}\n          aria-label=\"Validation errors\"\n          css={css`\n            flex: 0 1 auto;\n            min-height: 0;\n            overflow-y: auto;\n          `}>\n          <ul>\n            {parseError ? (\n              <li>{parseError}</li>\n            ) : (\n              errors.map((error) => (\n                <li key={formatValidationError(error)}>\n                  {formatValidationError(error)}\n                </li>\n              ))\n            )}\n          </ul>\n        </EuiText>\n      ) : null}\n    </>\n  );\n};\n\nexport interface EditorPanelProps {\n  doc: PrimitiveDoc;\n  example: number;\n  editor: EditorState;\n  onExampleChange: (example: number) => void;\n}\n\n/** The example picker and source editor above the shared workbench status. */\nexport const EditorPanel = ({\n  doc,\n  example,\n  editor,\n  onExampleChange,\n}: EditorPanelProps) => {\n  const { euiTheme } = useEuiTheme();\n  const { transformJsx } = useStudio();\n  const { label, examples } = doc;\n  const { format, setFormat, source, setSource } = editor;\n\n  const jsxButton = (\n    <EuiButton id=\"jsx\" isDisabled={!transformJsx} hasAriaDisabled>\n      JSX\n    </EuiButton>\n  );\n\n  return (\n    <div\n      role=\"region\"\n      aria-label=\"Source editor\"\n      css={css`\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n\n        @media (max-width: 1120px) {\n          width: 100%;\n        }\n      `}>\n      <EuiFlexGroup\n        gutterSize=\"s\"\n        alignItems=\"center\"\n        responsive={false}\n        css={css`\n          flex-grow: 0;\n          padding: ${euiTheme.size.s} ${euiTheme.size.base};\n        `}>\n        <EuiFlexItem grow={false}>\n          <ExamplePicker\n            {...{ examples, example }}\n            onChange={onExampleChange}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem />\n        <EuiFlexItem grow={false}>\n          <EuiButtonGroup\n            legend=\"Source format\"\n            buttonSize=\"s\"\n            variant=\"selection\"\n            idSelected={format}\n            display=\"highlighted\"\n            onChange={(id) => isFormat(id) && setFormat(id)}>\n            {transformJsx ? (\n              jsxButton\n            ) : (\n              <EuiToolTip content=\"The host supplied no JSX transform.\">\n                {jsxButton}\n              </EuiToolTip>\n            )}\n            <EuiButton id=\"json\">JSON</EuiButton>\n          </EuiButtonGroup>\n        </EuiFlexItem>\n        <EuiFlexItem grow={false}>\n          <EuiCopy textToCopy={source}>\n            {(copy) => (\n              <EuiToolTip content={format === 'jsx' ? 'Copy JSX' : 'Copy JSON'}>\n                <EuiButtonIcon\n                  size=\"s\"\n                  color=\"text\"\n                  iconType=\"copy\"\n                  aria-label={format === 'jsx' ? 'Copy JSX' : 'Copy JSON'}\n                  onClick={copy}\n                />\n              </EuiToolTip>\n            )}\n          </EuiCopy>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <CodeEditor\n        {...{ format }}\n        value={source}\n        onChange={setSource}\n        ariaLabel={`${label} source`}\n      />\n    </div>\n  );\n};\n"]}

package/dist/dev/monaco_editor.d.ts

@@ -0,0 +1,15 @@
+import 'monaco-editor/esm/vs/editor/edcore.main';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import type { AuthoringTypes } from '../model/authoring_types.js';
+import type { EditorFormat } from './use_editor.js';
+export interface MonacoEditorProps {
+    format: EditorFormat;
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+    authoring: AuthoringTypes;
+}
+/** Monaco on this runtime's types: TypeScript checks JSX, the Composition schema checks JSON. */
+export declare const MonacoEditor: ({ format, value, onChange, ariaLabel, authoring, }: MonacoEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=monaco_editor.d.ts.map

package/dist/dev/monaco_editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"monaco_editor.d.ts","sourceRoot":"","sources":["../../src/dev/monaco_editor.tsx"],"names":[],"mappings":"AAOA,OAAO,yCAAyC,CAAC;AACjD,OAAO,wDAAwD,CAAC;AAChE,OAAO,8DAA8D,CAAC;AAOtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,cAAc,CAAC;CAC3B;AAuDD,iGAAiG;AACjG,eAAO,MAAM,YAAY,GAAI,oDAM1B,iBAAiB,qDAwHnB,CAAC"}