@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/dev/monaco_editor.js

@@ -0,0 +1,159 @@
+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 '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 { useEffect, useRef } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { editor, languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api';
+import { AUTHORING_MODULE } from '../model/authoring_types.js';
+import { registerComponentCompletions, registerTsx } from './tsx_language.js';
+registerTsx();
+const ROOT = 'file:///isomer-studio';
+const THEMES = {
+    light: 'isomer-studio-light',
+    dark: 'isomer-studio-dark',
+};
+let modelCount = 0;
+const modelUri = (format) => {
+    modelCount += 1;
+    return Uri.parse(`${ROOT}/composition-${modelCount}.${format === 'jsx' ? 'tsx' : 'isomer.json'}`);
+};
+/** Points the global TypeScript and JSON services at this runtime's types. */
+const configureLanguages = ({ declarations, bodySchema }) => {
+    const { typescriptDefaults, JsxEmit, ScriptTarget } = languages.typescript;
+    typescriptDefaults.setCompilerOptions({
+        target: ScriptTarget.ESNext,
+        jsx: JsxEmit.ReactJSX,
+        jsxImportSource: AUTHORING_MODULE,
+        strict: true,
+        noEmit: true,
+        allowNonTsExtensions: true,
+        lib: ['es2020'],
+    });
+    typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+    });
+    typescriptDefaults.setEagerModelSync(true);
+    typescriptDefaults.setExtraLibs([
+        { content: declarations, filePath: `${ROOT}/runtime.d.ts` },
+    ]);
+    languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: false,
+        enableSchemaRequest: false,
+        schemas: [
+            {
+                uri: `${ROOT}/body.schema.json`,
+                fileMatch: ['*.isomer.json'],
+                schema: bodySchema,
+            },
+        ],
+    });
+};
+const hex = (color) => /^#[\da-f]{6,8}$/i.test(color) ? color : undefined;
+/** Monaco on this runtime's types: TypeScript checks JSX, the Composition schema checks JSON. */
+export const MonacoEditor = ({ format, value, onChange, ariaLabel, authoring, }) => {
+    const { euiTheme, colorMode } = useEuiTheme();
+    const container = useRef(null);
+    const instance = useRef();
+    const current = useRef(value);
+    const notify = useRef(onChange);
+    notify.current = onChange;
+    useEffect(() => configureLanguages(authoring), [authoring]);
+    useEffect(() => {
+        const provider = registerComponentCompletions(authoring.components);
+        return () => provider.dispose();
+    }, [authoring.components]);
+    useEffect(() => {
+        const { colors } = euiTheme;
+        const background = hex(colors.backgroundBaseSubdued);
+        const themeColors = Object.fromEntries(Object.entries({
+            'editor.background': background,
+            'editorGutter.background': background,
+            'editor.foreground': hex(colors.textParagraph),
+            'editorLineNumber.foreground': hex(colors.textSubdued),
+        }).flatMap(([key, color]) => color ? [[key, color]] : []));
+        const name = colorMode === 'DARK' ? THEMES.dark : THEMES.light;
+        editor.defineTheme(name, {
+            base: colorMode === 'DARK' ? 'vs-dark' : 'vs',
+            inherit: true,
+            rules: [],
+            colors: themeColors,
+        });
+        editor.setTheme(name);
+    }, [euiTheme, colorMode]);
+    useEffect(() => {
+        if (!container.current) {
+            return;
+        }
+        const created = editor.create(container.current, {
+            model: null,
+            automaticLayout: true,
+            fixedOverflowWidgets: true,
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false,
+            wordBasedSuggestions: false,
+            wordWrap: 'on',
+            tabSize: 2,
+            fontSize: 12,
+            lineNumbersMinChars: 3,
+            renderLineHighlight: 'none',
+            overviewRulerLanes: 0,
+            padding: { top: 12, bottom: 12 },
+        });
+        instance.current = created;
+        return () => {
+            created.dispose();
+            instance.current = undefined;
+        };
+    }, []);
+    useEffect(() => {
+        const { familyCode } = euiTheme.font;
+        instance.current?.updateOptions({
+            ariaLabel,
+            ...(familyCode ? { fontFamily: familyCode } : {}),
+        });
+    }, [ariaLabel, euiTheme.font]);
+    useEffect(() => {
+        current.current = value;
+        const model = instance.current?.getModel();
+        if (!model || model.getValue() === value) {
+            return;
+        }
+        model.pushEditOperations([], [{ range: model.getFullModelRange(), text: value }], () => null);
+    }, [value]);
+    useEffect(() => {
+        const created = instance.current;
+        if (!created) {
+            return;
+        }
+        const model = editor.createModel(current.current, format === 'jsx' ? 'typescript' : 'json', modelUri(format));
+        created.setModel(model);
+        const subscription = model.onDidChangeContent(() => {
+            const next = model.getValue();
+            if (next !== current.current) {
+                current.current = next;
+                notify.current(next);
+            }
+        });
+        return () => {
+            subscription.dispose();
+            created.setModel(null);
+            model.dispose();
+        };
+    }, [format]);
+    return (_jsx("div", { ref: container, css: css `
+        flex: 1;
+        min-height: 240px;
+        border-block-start: ${euiTheme.border.thin};
+      ` }));
+};
+//# sourceMappingURL=monaco_editor.js.map

package/dist/dev/monaco_editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monaco_editor.js","sourceRoot":"","sources":["../../src/dev/monaco_editor.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 'monaco-editor/esm/vs/editor/edcore.main';\nimport 'monaco-editor/esm/vs/language/json/monaco.contribution';\nimport 'monaco-editor/esm/vs/language/typescript/monaco.contribution';\n\nimport React, { useEffect, useRef } from 'react';\nimport { useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\nimport { editor, languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport type { AuthoringTypes } from '../model/authoring_types';\nimport { AUTHORING_MODULE } from '../model/authoring_types';\n\nimport { registerComponentCompletions, registerTsx } from './tsx_language';\nimport type { EditorFormat } from './use_editor';\n\nregisterTsx();\n\nexport interface MonacoEditorProps {\n  format: EditorFormat;\n  value: string;\n  onChange: (value: string) => void;\n  ariaLabel: string;\n  authoring: AuthoringTypes;\n}\n\nconst ROOT = 'file:///isomer-studio';\nconst THEMES = {\n  light: 'isomer-studio-light',\n  dark: 'isomer-studio-dark',\n} as const;\n\nlet modelCount = 0;\n\nconst modelUri = (format: EditorFormat): Uri => {\n  modelCount += 1;\n  return Uri.parse(\n    `${ROOT}/composition-${modelCount}.${format === 'jsx' ? 'tsx' : 'isomer.json'}`\n  );\n};\n\n/** Points the global TypeScript and JSON services at this runtime's types. */\nconst configureLanguages = ({ declarations, bodySchema }: AuthoringTypes) => {\n  const { typescriptDefaults, JsxEmit, ScriptTarget } = languages.typescript;\n  typescriptDefaults.setCompilerOptions({\n    target: ScriptTarget.ESNext,\n    jsx: JsxEmit.ReactJSX,\n    jsxImportSource: AUTHORING_MODULE,\n    strict: true,\n    noEmit: true,\n    allowNonTsExtensions: true,\n    lib: ['es2020'],\n  });\n  typescriptDefaults.setDiagnosticsOptions({\n    noSemanticValidation: false,\n    noSyntaxValidation: false,\n  });\n  typescriptDefaults.setEagerModelSync(true);\n  typescriptDefaults.setExtraLibs([\n    { content: declarations, filePath: `${ROOT}/runtime.d.ts` },\n  ]);\n\n  languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    allowComments: false,\n    enableSchemaRequest: false,\n    schemas: [\n      {\n        uri: `${ROOT}/body.schema.json`,\n        fileMatch: ['*.isomer.json'],\n        schema: bodySchema,\n      },\n    ],\n  });\n};\n\nconst hex = (color: string): string | undefined =>\n  /^#[\\da-f]{6,8}$/i.test(color) ? color : undefined;\n\n/** Monaco on this runtime's types: TypeScript checks JSX, the Composition schema checks JSON. */\nexport const MonacoEditor = ({\n  format,\n  value,\n  onChange,\n  ariaLabel,\n  authoring,\n}: MonacoEditorProps) => {\n  const { euiTheme, colorMode } = useEuiTheme();\n  const container = useRef<HTMLDivElement>(null);\n  const instance = useRef<editor.IStandaloneCodeEditor>();\n  const current = useRef(value);\n  const notify = useRef(onChange);\n  notify.current = onChange;\n\n  useEffect(() => configureLanguages(authoring), [authoring]);\n\n  useEffect(() => {\n    const provider = registerComponentCompletions(authoring.components);\n    return () => provider.dispose();\n  }, [authoring.components]);\n\n  useEffect(() => {\n    const { colors } = euiTheme;\n    const background = hex(colors.backgroundBaseSubdued);\n    const themeColors = Object.fromEntries(\n      Object.entries({\n        'editor.background': background,\n        'editorGutter.background': background,\n        'editor.foreground': hex(colors.textParagraph),\n        'editorLineNumber.foreground': hex(colors.textSubdued),\n      }).flatMap(([key, color]): Array<[string, string]> =>\n        color ? [[key, color]] : []\n      )\n    );\n    const name = colorMode === 'DARK' ? THEMES.dark : THEMES.light;\n    editor.defineTheme(name, {\n      base: colorMode === 'DARK' ? 'vs-dark' : 'vs',\n      inherit: true,\n      rules: [],\n      colors: themeColors,\n    });\n    editor.setTheme(name);\n  }, [euiTheme, colorMode]);\n\n  useEffect(() => {\n    if (!container.current) {\n      return;\n    }\n    const created = editor.create(container.current, {\n      model: null,\n      automaticLayout: true,\n      fixedOverflowWidgets: true,\n      minimap: { enabled: false },\n      scrollBeyondLastLine: false,\n      wordBasedSuggestions: false,\n      wordWrap: 'on',\n      tabSize: 2,\n      fontSize: 12,\n      lineNumbersMinChars: 3,\n      renderLineHighlight: 'none',\n      overviewRulerLanes: 0,\n      padding: { top: 12, bottom: 12 },\n    });\n    instance.current = created;\n    return () => {\n      created.dispose();\n      instance.current = undefined;\n    };\n  }, []);\n\n  useEffect(() => {\n    const { familyCode } = euiTheme.font;\n    instance.current?.updateOptions({\n      ariaLabel,\n      ...(familyCode ? { fontFamily: familyCode } : {}),\n    });\n  }, [ariaLabel, euiTheme.font]);\n\n  useEffect(() => {\n    current.current = value;\n    const model = instance.current?.getModel();\n    if (!model || model.getValue() === value) {\n      return;\n    }\n    model.pushEditOperations(\n      [],\n      [{ range: model.getFullModelRange(), text: value }],\n      () => null\n    );\n  }, [value]);\n\n  useEffect(() => {\n    const created = instance.current;\n    if (!created) {\n      return;\n    }\n    const model = editor.createModel(\n      current.current,\n      format === 'jsx' ? 'typescript' : 'json',\n      modelUri(format)\n    );\n    created.setModel(model);\n    const subscription = model.onDidChangeContent(() => {\n      const next = model.getValue();\n      if (next !== current.current) {\n        current.current = next;\n        notify.current(next);\n      }\n    });\n    return () => {\n      subscription.dispose();\n      created.setModel(null);\n      model.dispose();\n    };\n  }, [format]);\n\n  return (\n    <div\n      ref={container}\n      css={css`\n        flex: 1;\n        min-height: 240px;\n        border-block-start: ${euiTheme.border.thin};\n      `}\n    />\n  );\n};\n"]}

package/dist/dev/preview_panel.d.ts

@@ -0,0 +1,10 @@
+import type { Composition, ValidationResult } from '@elastic/isomer-sdk';
+import type { StudioSurface } from '../model/describe_runtime.js';
+export interface PreviewPanelProps {
+    composition: Composition;
+    validation: ValidationResult;
+    supported: readonly StudioSurface[];
+}
+/** The output column, with its own toolbar and scroll area. */
+export declare const PreviewPanel: ({ composition, validation, supported, }: PreviewPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=preview_panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview_panel.d.ts","sourceRoot":"","sources":["../../src/dev/preview_panel.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAa/D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,SAAS,EAAE,SAAS,aAAa,EAAE,CAAC;CACrC;AAED,+DAA+D;AAC/D,eAAO,MAAM,YAAY,GAAI,yCAI1B,iBAAiB,qDAsEnB,CAAC"}

package/dist/dev/preview_panel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+import { SurfaceBoard } from '../surfaces/surface_board.js';
+import { SurfaceViewToggle } from '../surfaces/surface_preview.js';
+import { previewSurfaces, SurfaceSelect, useSurfaceSelection, } from '../surfaces/surface_select.js';
+import { ZoomSelect } from '../surfaces/zoom_select.js';
+/** The output column, with its own toolbar and scroll area. */
+export const PreviewPanel = ({ composition, validation, supported, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { rasterizePng } = useStudio();
+    const [view, setView] = useState('render');
+    const [zoom, setZoom] = useState('fit');
+    const surfaces = previewSurfaces(supported, Boolean(rasterizePng), true);
+    const { showing, select } = useSurfaceSelection(surfaces, 'all');
+    const bar = css `
+    flex-grow: 0;
+    padding: ${euiTheme.size.s} ${euiTheme.size.base};
+  `;
+    return (_jsxs("div", { role: "region", "aria-label": "Outputs", css: css `
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+      `, children: [_jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, wrap: true, css: css `
+          ${bar};
+          border-bottom: ${euiTheme.border.thin};
+        `, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(SurfaceSelect, { surfaces, selected: showing, onChange: select }) }), _jsx(EuiFlexItem, {}), _jsx(EuiFlexItem, { grow: false, children: _jsx(SurfaceViewToggle, { view, onChange: setView, legend: "Surface view" }) }), _jsx(EuiFlexItem, { grow: false, children: _jsx(ZoomSelect, { zoom, onChange: setZoom, isDisabled: showing.length !== 1 }) })] }), _jsx("div", { css: css `
+          flex: 1;
+          min-height: 0;
+          overflow: auto;
+          padding: ${euiTheme.size.base};
+          background: ${euiTheme.colors.backgroundBaseRecessed};
+        `, children: _jsx(SurfaceBoard, { surfaces: showing, composition, validation, view, zoom }) })] }));
+};
+//# sourceMappingURL=preview_panel.js.map

package/dist/dev/preview_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview_panel.js","sourceRoot":"","sources":["../../src/dev/preview_panel.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EACL,eAAe,EACf,aAAa,EACb,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQrD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,EACX,UAAU,EACV,SAAS,GACS,EAAE,EAAE;IACtB,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IACrC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,QAAQ,CAAC,CAAC;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,KAAK,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,CAAC;IACzE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACjE,MAAM,GAAG,GAAG,GAAG,CAAA;;eAEF,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI;GACjD,CAAC;IAEF,OAAO,CACL,eACE,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,GAAG,EAAE,GAAG,CAAA;;;;;;OAMP,aACD,MAAC,YAAY,IACX,UAAU,EAAC,GAAG,EACd,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAE,KAAK,EACjB,IAAI,QACJ,GAAG,EAAE,GAAG,CAAA;YACJ,GAAG;2BACY,QAAQ,CAAC,MAAM,CAAC,IAAI;SACtC,aACD,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,YACtB,KAAC,aAAa,IACN,QAAQ,EACd,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,GAChB,GACU,EACd,KAAC,WAAW,KAAG,EACf,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,YACtB,KAAC,iBAAiB,IACV,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAC,cAAc,GACrB,GACU,EACd,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,YACtB,KAAC,UAAU,IACH,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC,GAChC,GACU,IACD,EACf,cACE,GAAG,EAAE,GAAG,CAAA;;;;qBAIK,QAAQ,CAAC,IAAI,CAAC,IAAI;wBACf,QAAQ,CAAC,MAAM,CAAC,sBAAsB;SACrD,YACD,KAAC,YAAY,IACX,QAAQ,EAAE,OAAO,EACX,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,GACzC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useState } from 'react';\nimport { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';\nimport type { Composition, ValidationResult } from '@elastic/isomer-sdk';\nimport { css } from '@emotion/react';\n\nimport type { StudioSurface } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\nimport type { PreviewZoom } from '../surfaces/scaled_preview';\nimport { SurfaceBoard } from '../surfaces/surface_board';\nimport type { SurfaceView } from '../surfaces/surface_preview';\nimport { SurfaceViewToggle } from '../surfaces/surface_preview';\nimport {\n  previewSurfaces,\n  SurfaceSelect,\n  useSurfaceSelection,\n} from '../surfaces/surface_select';\nimport { ZoomSelect } from '../surfaces/zoom_select';\n\nexport interface PreviewPanelProps {\n  composition: Composition;\n  validation: ValidationResult;\n  supported: readonly StudioSurface[];\n}\n\n/** The output column, with its own toolbar and scroll area. */\nexport const PreviewPanel = ({\n  composition,\n  validation,\n  supported,\n}: PreviewPanelProps) => {\n  const { euiTheme } = useEuiTheme();\n  const { rasterizePng } = useStudio();\n  const [view, setView] = useState<SurfaceView>('render');\n  const [zoom, setZoom] = useState<PreviewZoom>('fit');\n  const surfaces = previewSurfaces(supported, Boolean(rasterizePng), true);\n  const { showing, select } = useSurfaceSelection(surfaces, 'all');\n  const bar = css`\n    flex-grow: 0;\n    padding: ${euiTheme.size.s} ${euiTheme.size.base};\n  `;\n\n  return (\n    <div\n      role=\"region\"\n      aria-label=\"Outputs\"\n      css={css`\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n      `}>\n      <EuiFlexGroup\n        gutterSize=\"s\"\n        alignItems=\"center\"\n        responsive={false}\n        wrap\n        css={css`\n          ${bar};\n          border-bottom: ${euiTheme.border.thin};\n        `}>\n        <EuiFlexItem grow={false}>\n          <SurfaceSelect\n            {...{ surfaces }}\n            selected={showing}\n            onChange={select}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem />\n        <EuiFlexItem grow={false}>\n          <SurfaceViewToggle\n            {...{ view }}\n            onChange={setView}\n            legend=\"Surface view\"\n          />\n        </EuiFlexItem>\n        <EuiFlexItem grow={false}>\n          <ZoomSelect\n            {...{ zoom }}\n            onChange={setZoom}\n            isDisabled={showing.length !== 1}\n          />\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <div\n        css={css`\n          flex: 1;\n          min-height: 0;\n          overflow: auto;\n          padding: ${euiTheme.size.base};\n          background: ${euiTheme.colors.backgroundBaseRecessed};\n        `}>\n        <SurfaceBoard\n          surfaces={showing}\n          {...{ composition, validation, view, zoom }}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/dev/prop_reference.d.ts

@@ -0,0 +1,9 @@
+import type { PrimitiveNode } from '@elastic/isomer-sdk';
+import type { PrimitiveDoc } from '../model/describe_runtime.js';
+/** Props for the selected primitive, its branded JSX children, and other nodes in the draft. */
+export declare const PropReference: ({ doc, nodes, id, }: {
+    doc: PrimitiveDoc;
+    nodes: readonly PrimitiveNode[];
+    id: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=prop_reference.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prop_reference.d.ts","sourceRoot":"","sources":["../../src/dev/prop_reference.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AA4F9D,gGAAgG;AAChG,eAAO,MAAM,aAAa,GAAI,qBAI3B;IACD,GAAG,EAAE,YAAY,CAAC;IAClB,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ,qDAoFA,CAAC"}

package/dist/dev/prop_reference.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useMemo, useState } from 'react';
+import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
+import { createChildNodeWalker } from '@elastic/isomer-sdk';
+import { readAuthoredSpec } from '@elastic/isomer-sdk/author';
+import { css } from '@emotion/react';
+import { toJSONSchema } from 'zod';
+import { useAccent } from '../chrome/accent.js';
+import { PropsTable } from '../docs/props_table.js';
+import { useStudio } from '../studio_context.js';
+const isSchema = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const schemaType = (schema, defs, seen = new Set()) => {
+    if (typeof schema.$ref === 'string') {
+        const name = schema.$ref.replace(/^#\/\$defs\//, '');
+        const target = defs[name];
+        return !seen.has(name) && isSchema(target)
+            ? schemaType(target, defs, new Set(seen).add(name))
+            : name;
+    }
+    if ('const' in schema) {
+        return JSON.stringify(schema.const);
+    }
+    if (Array.isArray(schema.enum)) {
+        return schema.enum.map((value) => JSON.stringify(value)).join(' | ');
+    }
+    const variants = schema.anyOf ?? schema.oneOf;
+    if (Array.isArray(variants)) {
+        return variants
+            .filter(isSchema)
+            .map((value) => schemaType(value, defs, seen))
+            .join(' | ');
+    }
+    if (schema.type === 'array' && isSchema(schema.items)) {
+        const item = schemaType(schema.items, defs, seen);
+        return `${item.includes(' | ') ? `(${item})` : item}[]`;
+    }
+    return typeof schema.type === 'string' ? schema.type : 'unknown';
+};
+const childProps = (schema) => {
+    const json = toJSONSchema(schema, { io: 'input', unrepresentable: 'any' });
+    const defs = isSchema(json.$defs) ? json.$defs : {};
+    const properties = isSchema(json.properties) ? json.properties : {};
+    const required = new Set(json.required ?? []);
+    return Object.entries(properties).flatMap(([name, value]) => isSchema(value)
+        ? [
+            {
+                name,
+                type: schemaType(value, defs),
+                kind: 'other',
+                required: required.has(name),
+                ...(typeof value.description === 'string'
+                    ? { description: value.description }
+                    : {}),
+            },
+        ]
+        : []);
+};
+const childReferences = (schema, name, ancestors = new Set()) => {
+    if (ancestors.has(schema)) {
+        return [];
+    }
+    const seen = new Set(ancestors).add(schema);
+    const references = readAuthoredSpec(schema).children.flatMap((field) => {
+        const childName = `${name}.${field.name.charAt(0).toUpperCase()}${field.name.slice(1)}`;
+        return [
+            {
+                name: childName,
+                props: childProps(field.propsSchema ?? field.itemSchema),
+            },
+            ...(field.toItem ? [] : childReferences(field.itemSchema, name, seen)),
+        ];
+    });
+    return [
+        ...new Map(references.map((reference) => [reference.name, reference])).values(),
+    ];
+};
+/** Props for the selected primitive, its branded JSX children, and other nodes in the draft. */
+export const PropReference = ({ doc, nodes, id, }) => {
+    const { euiTheme } = useEuiTheme();
+    const accent = useAccent('dev');
+    const [selected, setSelected] = useState();
+    const { runtime, docs: { primitives }, } = useStudio();
+    const references = useMemo(() => {
+        const walk = createChildNodeWalker(runtime.primitives);
+        // A primitive's child walker may assume schema-valid props.
+        const walkChildren = (node) => {
+            try {
+                return walk(node);
+            }
+            catch {
+                return [];
+            }
+        };
+        const types = new Set([doc.type]);
+        const visited = new Set();
+        const visit = (node) => {
+            if (!isSchema(node) || visited.has(node)) {
+                return;
+            }
+            visited.add(node);
+            if (typeof node.type === 'string') {
+                types.add(node.type);
+            }
+            walkChildren(node).forEach(({ node: child }) => visit(child));
+        };
+        nodes.forEach(visit);
+        return [...types].flatMap((type) => {
+            const primitive = primitives.find((item) => item.type === type);
+            if (!primitive) {
+                return [];
+            }
+            const name = type.charAt(0).toUpperCase() + type.slice(1);
+            return [
+                { name, props: primitive.props },
+                ...childReferences(primitive.definition.schema, name),
+            ];
+        });
+    }, [doc.type, nodes, primitives, runtime.primitives]);
+    const active = references.find(({ name }) => name === selected) ?? references[0];
+    return (_jsxs("section", { id: id, "aria-label": "Primitive prop reference", css: css `
+        flex: 0 1 auto;
+        min-height: 0;
+        overflow: auto;
+        padding: ${euiTheme.size.base};
+        border-top: ${euiTheme.border.thin};
+      `, children: [_jsx(EuiTabs, { size: "s", "aria-label": "Prop reference components", children: references.map(({ name }) => (_jsx(EuiTab, { isSelected: name === active?.name, "aria-controls": `${id}-table`, id: `${id}-${name}`, onClick: () => setSelected(name), children: name }, name))) }), active ? (_jsx("section", { id: `${id}-table`, role: "tabpanel", "aria-labelledby": `${id}-${active.name}`, children: _jsx(PropsTable, { props: active.props, accent, compact: true, names: primitives.map(({ type }) => type) }) })) : null] }));
+};
+//# sourceMappingURL=prop_reference.js.map

package/dist/dev/prop_reference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop_reference.js","sourceRoot":"","sources":["../../src/dev/prop_reference.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useMemo, useState } from 'react';\nimport { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';\nimport type { PropDescriptor } from '@elastic/isomer-runtime';\nimport type { PrimitiveNode } from '@elastic/isomer-sdk';\nimport { createChildNodeWalker } from '@elastic/isomer-sdk';\nimport { readAuthoredSpec } from '@elastic/isomer-sdk/author';\nimport { css } from '@emotion/react';\nimport type { ZodType } from 'zod';\nimport { toJSONSchema } from 'zod';\n\nimport { useAccent } from '../chrome/accent';\nimport { PropsTable } from '../docs/props_table';\nimport type { PrimitiveDoc } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\n\ntype Schema = Record<string, unknown>;\nconst isSchema = (value: unknown): value is Schema =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst schemaType = (\n  schema: Schema,\n  defs: Schema,\n  seen = new Set<string>()\n): string => {\n  if (typeof schema.$ref === 'string') {\n    const name = schema.$ref.replace(/^#\\/\\$defs\\//, '');\n    const target = defs[name];\n    return !seen.has(name) && isSchema(target)\n      ? schemaType(target, defs, new Set(seen).add(name))\n      : name;\n  }\n  if ('const' in schema) {\n    return JSON.stringify(schema.const);\n  }\n  if (Array.isArray(schema.enum)) {\n    return schema.enum.map((value) => JSON.stringify(value)).join(' | ');\n  }\n  const variants = schema.anyOf ?? schema.oneOf;\n  if (Array.isArray(variants)) {\n    return variants\n      .filter(isSchema)\n      .map((value) => schemaType(value, defs, seen))\n      .join(' | ');\n  }\n  if (schema.type === 'array' && isSchema(schema.items)) {\n    const item = schemaType(schema.items, defs, seen);\n    return `${item.includes(' | ') ? `(${item})` : item}[]`;\n  }\n  return typeof schema.type === 'string' ? schema.type : 'unknown';\n};\n\nconst childProps = (schema: ZodType): PropDescriptor[] => {\n  const json = toJSONSchema(schema, { io: 'input', unrepresentable: 'any' });\n  const defs = isSchema(json.$defs) ? json.$defs : {};\n  const properties = isSchema(json.properties) ? json.properties : {};\n  const required = new Set(json.required ?? []);\n  return Object.entries(properties).flatMap(([name, value]) =>\n    isSchema(value)\n      ? [\n          {\n            name,\n            type: schemaType(value, defs),\n            kind: 'other' as const,\n            required: required.has(name),\n            ...(typeof value.description === 'string'\n              ? { description: value.description }\n              : {}),\n          },\n        ]\n      : []\n  );\n};\n\ninterface Reference {\n  name: string;\n  props: PropDescriptor[];\n}\n\nconst childReferences = (\n  schema: ZodType,\n  name: string,\n  ancestors = new Set<ZodType>()\n): Reference[] => {\n  if (ancestors.has(schema)) {\n    return [];\n  }\n  const seen = new Set(ancestors).add(schema);\n  const references = readAuthoredSpec(schema).children.flatMap((field) => {\n    const childName = `${name}.${field.name.charAt(0).toUpperCase()}${field.name.slice(1)}`;\n    return [\n      {\n        name: childName,\n        props: childProps(field.propsSchema ?? field.itemSchema),\n      },\n      ...(field.toItem ? [] : childReferences(field.itemSchema, name, seen)),\n    ];\n  });\n  return [\n    ...new Map(\n      references.map((reference) => [reference.name, reference])\n    ).values(),\n  ];\n};\n\n/** Props for the selected primitive, its branded JSX children, and other nodes in the draft. */\nexport const PropReference = ({\n  doc,\n  nodes,\n  id,\n}: {\n  doc: PrimitiveDoc;\n  nodes: readonly PrimitiveNode[];\n  id: string;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const accent = useAccent('dev');\n  const [selected, setSelected] = useState<string>();\n  const {\n    runtime,\n    docs: { primitives },\n  } = useStudio();\n  const references = useMemo(() => {\n    const walk = createChildNodeWalker(runtime.primitives);\n    // A primitive's child walker may assume schema-valid props.\n    const walkChildren = (node: Schema) => {\n      try {\n        return walk(node);\n      } catch {\n        return [];\n      }\n    };\n    const types = new Set([doc.type]);\n    const visited = new Set<unknown>();\n    const visit = (node: unknown) => {\n      if (!isSchema(node) || visited.has(node)) {\n        return;\n      }\n      visited.add(node);\n      if (typeof node.type === 'string') {\n        types.add(node.type);\n      }\n      walkChildren(node).forEach(({ node: child }) => visit(child));\n    };\n    nodes.forEach(visit);\n    return [...types].flatMap((type): Reference[] => {\n      const primitive = primitives.find((item) => item.type === type);\n      if (!primitive) {\n        return [];\n      }\n      const name = type.charAt(0).toUpperCase() + type.slice(1);\n      return [\n        { name, props: primitive.props },\n        ...childReferences(primitive.definition.schema, name),\n      ];\n    });\n  }, [doc.type, nodes, primitives, runtime.primitives]);\n  const active =\n    references.find(({ name }) => name === selected) ?? references[0];\n\n  return (\n    <section\n      id={id}\n      aria-label=\"Primitive prop reference\"\n      css={css`\n        flex: 0 1 auto;\n        min-height: 0;\n        overflow: auto;\n        padding: ${euiTheme.size.base};\n        border-top: ${euiTheme.border.thin};\n      `}>\n      <EuiTabs size=\"s\" aria-label=\"Prop reference components\">\n        {references.map(({ name }) => (\n          <EuiTab\n            key={name}\n            isSelected={name === active?.name}\n            aria-controls={`${id}-table`}\n            id={`${id}-${name}`}\n            onClick={() => setSelected(name)}>\n            {name}\n          </EuiTab>\n        ))}\n      </EuiTabs>\n      {active ? (\n        <section\n          id={`${id}-table`}\n          role=\"tabpanel\"\n          aria-labelledby={`${id}-${active.name}`}>\n          <PropsTable\n            props={active.props}\n            {...{ accent }}\n            compact\n            names={primitives.map(({ type }) => type)}\n          />\n        </section>\n      ) : null}\n    </section>\n  );\n};\n"]}

package/dist/dev/tsx_language.d.ts

@@ -0,0 +1,10 @@
+import type { IDisposable } from 'monaco-editor/esm/vs/editor/editor.api';
+import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
+/** Whether `text` ends where an element's children go. Reads the brackets {@link tokens} marks. */
+export declare const endsInJsxChildren: (text: string) => boolean;
+/** Offers `components` as tag openers in element children, or over a tag name already started, on an explicit invoke. */
+export declare const componentCompletionProvider: (components: readonly string[]) => languages.CompletionItemProvider;
+export declare const registerComponentCompletions: (components: readonly string[]) => IDisposable;
+/** Replaces the `typescript` language's tokenizer, so every TypeScript model reads JSX. */
+export declare const registerTsx: () => void;
+//# sourceMappingURL=tsx_language.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsx_language.d.ts","sourceRoot":"","sources":["../../src/dev/tsx_language.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAU,SAAS,EAAE,MAAM,wCAAwC,CAAC;AA0N3E,mGAAmG;AACnG,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,KAAG,OAClB,CAAC;AAiChC,yHAAyH;AACzH,eAAO,MAAM,2BAA2B,GACtC,YAAY,SAAS,MAAM,EAAE,KAC5B,SAAS,CAAC,sBAgCX,CAAC;AAEH,eAAO,MAAM,4BAA4B,GACvC,YAAY,SAAS,MAAM,EAAE,KAC5B,WAIA,CAAC;AAEJ,2FAA2F;AAC3F,eAAO,MAAM,WAAW,YASvB,CAAC"}