@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/docs/example_source.js

@@ -0,0 +1,56 @@
+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 { EuiButtonIcon, EuiCodeBlock, EuiCopy, EuiTab, EuiTabs, EuiThemeProvider, useEuiTheme, useGeneratedHtmlId, } from '@elastic/eui';
+import { printNodeJsx } from '@elastic/isomer-sdk/author';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+const FORMATS = ['jsx', 'json'];
+const SOURCE_MAX_HEIGHT = 280;
+const themeWrapper = {
+    css: css `
+    display: contents;
+  `,
+};
+const useExampleSource = (node) => {
+    const { schemaFor, shim } = useStudio();
+    return useMemo(() => ({
+        jsx: printNodeJsx(node, { schemaFor, shim }),
+        json: JSON.stringify(node, null, 2),
+    }), [node, schemaFor, shim]);
+};
+const SourcePanel = ({ format, source, onFormat, }) => {
+    const { euiTheme } = useEuiTheme();
+    const idPrefix = useGeneratedHtmlId({ prefix: 'exampleSource' });
+    const panelId = `${idPrefix}-panel`;
+    const tabId = (id) => `${idPrefix}-${id}`;
+    const text = source[format];
+    return (_jsxs("div", { css: css `
+        background: ${euiTheme.colors.backgroundBasePlain};
+        color: ${euiTheme.colors.text};
+        border-top: ${euiTheme.border.thin};
+      `, children: [_jsxs("div", { css: css `
+          display: flex;
+          align-items: center;
+          gap: ${euiTheme.size.s};
+          padding-inline: ${euiTheme.size.m};
+          border-bottom: ${euiTheme.border.thin};
+        `, children: [_jsx(EuiTabs, { size: "s", bottomBorder: false, "aria-label": "Example code format", css: css `
+            flex: 1;
+          `, children: FORMATS.map((id) => (_jsx(EuiTab, { id: tabId(id), isSelected: id === format, "aria-controls": panelId, onClick: () => onFormat(id), children: id.toUpperCase() }, id))) }), _jsx(EuiCopy, { textToCopy: text, children: (copy) => (_jsx(EuiButtonIcon, { iconType: "copy", "aria-label": format === 'jsx' ? 'Copy JSX' : 'Copy JSON', color: "text", onClick: copy })) })] }), _jsx("div", { role: "tabpanel", id: panelId, "aria-labelledby": tabId(format), css: css `
+          max-height: ${SOURCE_MAX_HEIGHT}px;
+          overflow: auto;
+        `, children: _jsx(EuiCodeBlock, { language: format, fontSize: "s", paddingSize: "m", transparentBackground: true, whiteSpace: "pre-wrap", children: text }) })] }));
+};
+/** The example node as JSX or JSON. */
+export const ExampleSource = ({ node, isOpen, }) => {
+    const source = useExampleSource(node);
+    const [format, setFormat] = useState('jsx');
+    return (_jsx("div", { hidden: !isOpen, children: _jsx(EuiThemeProvider, { colorMode: "dark", wrapperProps: themeWrapper, children: _jsx(SourcePanel, { format, source, onFormat: setFormat }) }) }));
+};
+//# sourceMappingURL=example_source.js.map

package/dist/docs/example_source.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example_source.js","sourceRoot":"","sources":["../../src/docs/example_source.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useMemo, useState } from 'react';\nimport {\n  EuiButtonIcon,\n  EuiCodeBlock,\n  EuiCopy,\n  EuiTab,\n  EuiTabs,\n  EuiThemeProvider,\n  useEuiTheme,\n  useGeneratedHtmlId,\n} from '@elastic/eui';\nimport type { PrimitiveNode } from '@elastic/isomer-sdk';\nimport { printNodeJsx } from '@elastic/isomer-sdk/author';\nimport { css } from '@emotion/react';\n\nimport { useStudio } from '../studio_context';\n\nconst FORMATS = ['jsx', 'json'] as const;\n\ntype SourceFormat = (typeof FORMATS)[number];\n\nconst SOURCE_MAX_HEIGHT = 280;\n\nconst themeWrapper = {\n  css: css`\n    display: contents;\n  `,\n};\n\nconst useExampleSource = (node: PrimitiveNode) => {\n  const { schemaFor, shim } = useStudio();\n  return useMemo(\n    () => ({\n      jsx: printNodeJsx(node, { schemaFor, shim }),\n      json: JSON.stringify(node, null, 2),\n    }),\n    [node, schemaFor, shim]\n  );\n};\n\nconst SourcePanel = ({\n  format,\n  source,\n  onFormat,\n}: {\n  format: SourceFormat;\n  source: Record<SourceFormat, string>;\n  onFormat: (format: SourceFormat) => void;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const idPrefix = useGeneratedHtmlId({ prefix: 'exampleSource' });\n  const panelId = `${idPrefix}-panel`;\n  const tabId = (id: SourceFormat) => `${idPrefix}-${id}`;\n  const text = source[format];\n\n  return (\n    <div\n      css={css`\n        background: ${euiTheme.colors.backgroundBasePlain};\n        color: ${euiTheme.colors.text};\n        border-top: ${euiTheme.border.thin};\n      `}>\n      <div\n        css={css`\n          display: flex;\n          align-items: center;\n          gap: ${euiTheme.size.s};\n          padding-inline: ${euiTheme.size.m};\n          border-bottom: ${euiTheme.border.thin};\n        `}>\n        <EuiTabs\n          size=\"s\"\n          bottomBorder={false}\n          aria-label=\"Example code format\"\n          css={css`\n            flex: 1;\n          `}>\n          {FORMATS.map((id) => (\n            <EuiTab\n              key={id}\n              id={tabId(id)}\n              isSelected={id === format}\n              aria-controls={panelId}\n              onClick={() => onFormat(id)}>\n              {id.toUpperCase()}\n            </EuiTab>\n          ))}\n        </EuiTabs>\n        <EuiCopy textToCopy={text}>\n          {(copy) => (\n            <EuiButtonIcon\n              iconType=\"copy\"\n              aria-label={format === 'jsx' ? 'Copy JSX' : 'Copy JSON'}\n              color=\"text\"\n              onClick={copy}\n            />\n          )}\n        </EuiCopy>\n      </div>\n      <div\n        role=\"tabpanel\"\n        id={panelId}\n        aria-labelledby={tabId(format)}\n        css={css`\n          max-height: ${SOURCE_MAX_HEIGHT}px;\n          overflow: auto;\n        `}>\n        <EuiCodeBlock\n          language={format}\n          fontSize=\"s\"\n          paddingSize=\"m\"\n          transparentBackground\n          whiteSpace=\"pre-wrap\">\n          {text}\n        </EuiCodeBlock>\n      </div>\n    </div>\n  );\n};\n\n/** The example node as JSX or JSON. */\nexport const ExampleSource = ({\n  node,\n  isOpen,\n}: {\n  node: PrimitiveNode;\n  isOpen: boolean;\n}) => {\n  const source = useExampleSource(node);\n  const [format, setFormat] = useState<SourceFormat>('jsx');\n\n  return (\n    <div hidden={!isOpen}>\n      <EuiThemeProvider colorMode=\"dark\" wrapperProps={themeWrapper}>\n        <SourcePanel {...{ format, source }} onFormat={setFormat} />\n      </EuiThemeProvider>\n    </div>\n  );\n};\n"]}

package/dist/docs/examples_panel.d.ts

@@ -0,0 +1,10 @@
+import type { PrimitiveDoc } from '../model/describe_runtime.js';
+export interface ExamplesPanelProps {
+    doc: PrimitiveDoc;
+    example: number;
+    onExampleChange: (example: number) => void;
+    devHref: string;
+}
+/** One example at a time, on one surface or all of them. */
+export declare const ExamplesPanel: ({ doc, example, onExampleChange, devHref, }: ExamplesPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=examples_panel.d.ts.map

package/dist/docs/examples_panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples_panel.d.ts","sourceRoot":"","sources":["../../src/docs/examples_panel.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAwB9D,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,YAAY,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,4DAA4D;AAC5D,eAAO,MAAM,aAAa,GAAI,6CAK3B,kBAAkB,qDAiHpB,CAAC"}

package/dist/docs/examples_panel.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useMemo, useState } from 'react';
+import { EuiButton, EuiButtonEmpty, EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useStudio } from '../studio_context.js';
+import { ExamplePicker } from '../surfaces/example_picker.js';
+import { SurfaceBoard } from '../surfaces/surface_board.js';
+import { previewSurfaces, SurfaceSelect, useSurfaceSelection, } from '../surfaces/surface_select.js';
+import { ExampleSource } from './example_source.js';
+const EXAMPLE_VIEW_OPTIONS = [
+    { id: 'example', label: 'Example source' },
+    { id: 'render', label: 'Rendered' },
+    { id: 'source', label: 'Output source' },
+];
+const isExamplesView = (id) => id === 'render' || id === 'source' || id === 'example';
+/** One example at a time, on one surface or all of them. */
+export const ExamplesPanel = ({ doc, example, onExampleChange, devHref, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { runtime, compose, rasterizePng } = useStudio();
+    const { examples } = doc;
+    const surfaces = previewSurfaces(doc.surfaces, Boolean(rasterizePng), true);
+    const { showing, select } = useSurfaceSelection(surfaces, surfaces[0] ? [surfaces[0]] : 'all');
+    const [view, setView] = useState('render');
+    const selected = examples[example];
+    const composition = useMemo(() => compose(selected ? [selected.node] : []), [compose, selected]);
+    const validation = useMemo(() => runtime.validate(composition), [runtime, composition]);
+    const bar = css `
+    padding: ${euiTheme.size.s} ${euiTheme.size.base};
+  `;
+    return (_jsxs(EuiPanel, { paddingSize: "none", hasShadow: true, 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(ExamplePicker, { examples, example, onChange: onExampleChange }) }), _jsx(EuiFlexItem, {}), _jsx(EuiFlexItem, { grow: false, children: _jsx(SurfaceSelect, { surfaces, selected: showing, anchorPosition: "downRight", onChange: select }) })] }), _jsx("div", { hidden: view === 'example', css: css `
+          padding: ${euiTheme.size.l};
+          background: ${euiTheme.colors.backgroundBaseSubdued};
+        `, children: _jsx(SurfaceBoard, { surfaces: showing, view: view === 'example' ? 'render' : view, composition, validation, errorHref: devHref, zoom: "fit" }) }), selected ? (_jsx(ExampleSource, { node: selected.node, isOpen: view === 'example' })) : null, selected?.description ? (_jsx(EuiText, { size: "s", color: "subdued", css: css `
+            padding: ${euiTheme.size.s} ${euiTheme.size.base} 0;
+          `, children: _jsx("p", { children: selected.description }) })) : null, _jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, wrap: true, css: css `
+          ${bar};
+          border-top: ${euiTheme.border.thin};
+        `, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(EuiButtonGroup, { legend: "Example view", buttonSize: "s", variant: "selection", idSelected: view, display: "highlighted", onChange: (id) => isExamplesView(id) && setView(id), children: EXAMPLE_VIEW_OPTIONS.map(({ id, label }) => (_jsx(EuiButton, { id: id, children: label }, id))) }) }), _jsx(EuiFlexItem, { css: css `
+            align-items: flex-end;
+          `, children: _jsx(EuiButtonEmpty, { size: "s", href: devHref, iconType: "code", children: "Open in Workbench" }) })] })] }));
+};
+//# sourceMappingURL=examples_panel.js.map

package/dist/docs/examples_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples_panel.js","sourceRoot":"","sources":["../../src/docs/examples_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, { useMemo, useState } from 'react';\nimport {\n  EuiButton,\n  EuiButtonEmpty,\n  EuiButtonGroup,\n  EuiFlexGroup,\n  EuiFlexItem,\n  EuiPanel,\n  EuiText,\n  useEuiTheme,\n} from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport type { PrimitiveDoc } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\nimport { ExamplePicker } from '../surfaces/example_picker';\nimport { SurfaceBoard } from '../surfaces/surface_board';\nimport type { SurfaceView } from '../surfaces/surface_preview';\nimport {\n  previewSurfaces,\n  SurfaceSelect,\n  useSurfaceSelection,\n} from '../surfaces/surface_select';\n\nimport { ExampleSource } from './example_source';\n\ntype ExamplesView = SurfaceView | 'example';\n\nconst EXAMPLE_VIEW_OPTIONS: { id: ExamplesView; label: string }[] = [\n  { id: 'example', label: 'Example source' },\n  { id: 'render', label: 'Rendered' },\n  { id: 'source', label: 'Output source' },\n];\n\nconst isExamplesView = (id: string): id is ExamplesView =>\n  id === 'render' || id === 'source' || id === 'example';\n\nexport interface ExamplesPanelProps {\n  doc: PrimitiveDoc;\n  example: number;\n  onExampleChange: (example: number) => void;\n  devHref: string;\n}\n\n/** One example at a time, on one surface or all of them. */\nexport const ExamplesPanel = ({\n  doc,\n  example,\n  onExampleChange,\n  devHref,\n}: ExamplesPanelProps) => {\n  const { euiTheme } = useEuiTheme();\n  const { runtime, compose, rasterizePng } = useStudio();\n  const { examples } = doc;\n  const surfaces = previewSurfaces(doc.surfaces, Boolean(rasterizePng), true);\n  const { showing, select } = useSurfaceSelection(\n    surfaces,\n    surfaces[0] ? [surfaces[0]] : 'all'\n  );\n  const [view, setView] = useState<ExamplesView>('render');\n  const selected = examples[example];\n\n  const composition = useMemo(\n    () => compose(selected ? [selected.node] : []),\n    [compose, selected]\n  );\n  const validation = useMemo(\n    () => runtime.validate(composition),\n    [runtime, composition]\n  );\n  const bar = css`\n    padding: ${euiTheme.size.s} ${euiTheme.size.base};\n  `;\n\n  return (\n    <EuiPanel paddingSize=\"none\" hasShadow>\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          <ExamplePicker\n            {...{ examples, example }}\n            onChange={onExampleChange}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem />\n        <EuiFlexItem grow={false}>\n          <SurfaceSelect\n            {...{ surfaces }}\n            selected={showing}\n            anchorPosition=\"downRight\"\n            onChange={select}\n          />\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <div\n        hidden={view === 'example'}\n        css={css`\n          padding: ${euiTheme.size.l};\n          background: ${euiTheme.colors.backgroundBaseSubdued};\n        `}>\n        <SurfaceBoard\n          surfaces={showing}\n          view={view === 'example' ? 'render' : view}\n          {...{ composition, validation }}\n          errorHref={devHref}\n          zoom=\"fit\"\n        />\n      </div>\n      {selected ? (\n        <ExampleSource node={selected.node} isOpen={view === 'example'} />\n      ) : null}\n      {selected?.description ? (\n        <EuiText\n          size=\"s\"\n          color=\"subdued\"\n          css={css`\n            padding: ${euiTheme.size.s} ${euiTheme.size.base} 0;\n          `}>\n          <p>{selected.description}</p>\n        </EuiText>\n      ) : null}\n      <EuiFlexGroup\n        gutterSize=\"s\"\n        alignItems=\"center\"\n        responsive={false}\n        wrap\n        css={css`\n          ${bar};\n          border-top: ${euiTheme.border.thin};\n        `}>\n        <EuiFlexItem grow={false}>\n          <EuiButtonGroup\n            legend=\"Example view\"\n            buttonSize=\"s\"\n            variant=\"selection\"\n            idSelected={view}\n            display=\"highlighted\"\n            onChange={(id) => isExamplesView(id) && setView(id)}>\n            {EXAMPLE_VIEW_OPTIONS.map(({ id, label }) => (\n              <EuiButton key={id} id={id}>\n                {label}\n              </EuiButton>\n            ))}\n          </EuiButtonGroup>\n        </EuiFlexItem>\n        <EuiFlexItem\n          css={css`\n            align-items: flex-end;\n          `}>\n          <EuiButtonEmpty size=\"s\" href={devHref} iconType=\"code\">\n            Open in Workbench\n          </EuiButtonEmpty>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </EuiPanel>\n  );\n};\n"]}

package/dist/docs/gallery_view.d.ts

@@ -0,0 +1,9 @@
+/** Columns in the gallery grid. That many previews mount immediately. */
+export declare const GALLERY_COLUMNS = 3;
+/** A heading id the Home page's category chips can scroll to. */
+export declare const galleryGroupId: (title: string) => string;
+/** Every example of every primitive on the React surface, by group, beside an "On this page" gutter; `group` scrolls to that group. */
+export declare const GalleryView: ({ group }: {
+    group?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=gallery_view.d.ts.map

package/dist/docs/gallery_view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery_view.d.ts","sourceRoot":"","sources":["../../src/docs/gallery_view.tsx"],"names":[],"mappings":"AAqCA,yEAAyE;AACzE,eAAO,MAAM,eAAe,IAAI,CAAC;AAoFjC,iEAAiE;AACjE,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MACO,CAAC;AAEvD,uIAAuI;AACvI,eAAO,MAAM,WAAW,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,qDAyGpE,CAAC"}

package/dist/docs/gallery_view.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { formatRoute } from '../chrome/route.js';
+import { useStudio } from '../studio_context.js';
+import { ReactSurface } from '../surfaces/react_surface.js';
+import { ScaledPreview } from '../surfaces/scaled_preview.js';
+import { CONTENT_BASIS, OnThisPage, PAGE_WIDTH, TOC_GAP, useActiveEntry, } from './on_this_page.js';
+/** Columns in the gallery grid. That many previews mount immediately. */
+export const GALLERY_COLUMNS = 3;
+/** How far ahead of the viewport a preview mounts. */
+const PREVIEW_ROOT_MARGIN = '240px';
+/** 16:9 matches a 1920×1080 slide, so later rows stay outside the first paint. */
+const previewWell = css `
+  aspect-ratio: 16 / 9;
+`;
+const DeferredPreview = ({ eager, children, }) => {
+    const host = useRef(null);
+    const [visible, setVisible] = useState(eager);
+    useEffect(() => {
+        if (visible) {
+            return;
+        }
+        const element = host.current;
+        if (!element || typeof IntersectionObserver === 'undefined') {
+            setVisible(true);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some(({ isIntersecting }) => isIntersecting)) {
+                observer.disconnect();
+                setVisible(true);
+            }
+        }, { rootMargin: PREVIEW_ROOT_MARGIN });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [visible]);
+    return _jsx("div", { ref: host, children: visible ? children : _jsx("div", { css: previewWell }) });
+};
+const ExampleTile = ({ doc: { label }, name, composition, devHref, eager, }) => (_jsxs(EuiPanel, { hasBorder: true, hasShadow: false, paddingSize: "m", children: [_jsxs(EuiFlexGroup, { gutterSize: "s", alignItems: "center", responsive: false, children: [_jsx(EuiFlexItem, { children: _jsxs(EuiText, { size: "xs", children: [_jsx("strong", { children: label }), " \u00B7 ", name] }) }), _jsx(EuiFlexItem, { grow: false, children: _jsx(EuiText, { size: "xs", children: _jsx(EuiLink, { href: devHref, "aria-label": `Open ${label} ${name} in Workbench`, children: "Open in Workbench" }) }) })] }), _jsx(EuiSpacer, { size: "s" }), _jsx(DeferredPreview, { eager, children: _jsx(ScaledPreview, { children: _jsx(ReactSurface, { composition }) }) })] }));
+/** A heading id the Home page's category chips can scroll to. */
+export const galleryGroupId = (title) => `isomer-studio-gallery-${encodeURIComponent(title)}`;
+/** Every example of every primitive on the React surface, by group, beside an "On this page" gutter; `group` scrolls to that group. */
+export const GalleryView = ({ group }) => {
+    const { euiTheme } = useEuiTheme();
+    const { docs: { primitives, groups }, compose, } = useStudio();
+    const compositions = useMemo(() => new Map(primitives.map(({ type, examples }) => [
+        type,
+        examples.map(({ node }) => compose([node])),
+    ])), [primitives, compose]);
+    useEffect(() => {
+        if (group === undefined) {
+            return;
+        }
+        document
+            .getElementById(galleryGroupId(group))
+            ?.scrollIntoView({ block: 'start' });
+    }, [group]);
+    const entries = useMemo(() => groups.map(({ title }) => ({ id: galleryGroupId(title), title })), [groups]);
+    const ids = useMemo(() => entries.map(({ id }) => id), [entries]);
+    const [active, setActive] = useActiveEntry(ids, '');
+    let rendered = 0;
+    return (_jsxs("div", { css: css `
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: ${TOC_GAP}px;
+        max-width: ${PAGE_WIDTH}px;
+        margin-inline: auto;
+        padding: ${euiTheme.size.xl} ${euiTheme.size.xxl} ${euiTheme.size.xxxxl};
+      `, children: [_jsx(OnThisPage, { entries, active, onSelect: setActive }), _jsxs("div", { css: css `
+          flex: 1 1 ${CONTENT_BASIS}px;
+          display: flex;
+          flex-direction: column;
+          gap: ${euiTheme.size.l};
+          min-width: 0;
+        `, children: [_jsx(EuiTitle, { size: "l", children: _jsx("h1", { children: "Gallery" }) }), groups.map(({ title, types }) => (_jsxs("section", { id: galleryGroupId(title), "aria-label": title, css: css `
+              display: flex;
+              flex-direction: column;
+              gap: ${euiTheme.size.m};
+              scroll-margin-top: ${euiTheme.size.l};
+            `, children: [_jsx(EuiTitle, { size: "s", children: _jsx("h2", { children: title }) }), _jsx(EuiFlexGrid, { columns: GALLERY_COLUMNS, gutterSize: "m", children: types.flatMap((type) => {
+                                    const doc = primitives.find((candidate) => candidate.type === type);
+                                    return doc
+                                        ? doc.examples.map(({ name }, index) => {
+                                            const eager = rendered < GALLERY_COLUMNS;
+                                            rendered += 1;
+                                            return (_jsx(ExampleTile, { doc, name, eager, composition: compositions.get(type)?.[index] ?? compose([]), devHref: formatRoute({
+                                                    mode: 'dev',
+                                                    page: type,
+                                                    example: index,
+                                                }) }, `${type}/${index}`));
+                                        })
+                                        : [];
+                                }) })] }, title)))] })] }));
+};
+//# sourceMappingURL=gallery_view.js.map

package/dist/docs/gallery_view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery_view.js","sourceRoot":"","sources":["../../src/docs/gallery_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 type { ReactNode } from 'react';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  EuiFlexGrid,\n  EuiFlexGroup,\n  EuiFlexItem,\n  EuiLink,\n  EuiPanel,\n  EuiSpacer,\n  EuiText,\n  EuiTitle,\n  useEuiTheme,\n} from '@elastic/eui';\nimport type { Composition } from '@elastic/isomer-sdk';\nimport { css } from '@emotion/react';\n\nimport { formatRoute } from '../chrome/route';\nimport type { PrimitiveDoc } from '../model/describe_runtime';\nimport { useStudio } from '../studio_context';\nimport { ReactSurface } from '../surfaces/react_surface';\nimport { ScaledPreview } from '../surfaces/scaled_preview';\n\nimport {\n  CONTENT_BASIS,\n  OnThisPage,\n  PAGE_WIDTH,\n  TOC_GAP,\n  useActiveEntry,\n} from './on_this_page';\n\n/** Columns in the gallery grid. That many previews mount immediately. */\nexport const GALLERY_COLUMNS = 3;\n\n/** How far ahead of the viewport a preview mounts. */\nconst PREVIEW_ROOT_MARGIN = '240px';\n\n/** 16:9 matches a 1920×1080 slide, so later rows stay outside the first paint. */\nconst previewWell = css`\n  aspect-ratio: 16 / 9;\n`;\n\nconst DeferredPreview = ({\n  eager,\n  children,\n}: {\n  eager: boolean;\n  children: ReactNode;\n}) => {\n  const host = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(eager);\n\n  useEffect(() => {\n    if (visible) {\n      return;\n    }\n    const element = host.current;\n    if (!element || typeof IntersectionObserver === 'undefined') {\n      setVisible(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some(({ isIntersecting }) => isIntersecting)) {\n          observer.disconnect();\n          setVisible(true);\n        }\n      },\n      { rootMargin: PREVIEW_ROOT_MARGIN }\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [visible]);\n\n  return <div ref={host}>{visible ? children : <div css={previewWell} />}</div>;\n};\n\nconst ExampleTile = ({\n  doc: { label },\n  name,\n  composition,\n  devHref,\n  eager,\n}: {\n  doc: PrimitiveDoc;\n  name: string;\n  composition: Composition;\n  devHref: string;\n  eager: boolean;\n}) => (\n  <EuiPanel hasBorder hasShadow={false} paddingSize=\"m\">\n    <EuiFlexGroup gutterSize=\"s\" alignItems=\"center\" responsive={false}>\n      <EuiFlexItem>\n        <EuiText size=\"xs\">\n          <strong>{label}</strong> · {name}\n        </EuiText>\n      </EuiFlexItem>\n      <EuiFlexItem grow={false}>\n        <EuiText size=\"xs\">\n          <EuiLink\n            href={devHref}\n            aria-label={`Open ${label} ${name} in Workbench`}>\n            Open in Workbench\n          </EuiLink>\n        </EuiText>\n      </EuiFlexItem>\n    </EuiFlexGroup>\n    <EuiSpacer size=\"s\" />\n    <DeferredPreview {...{ eager }}>\n      <ScaledPreview>\n        <ReactSurface {...{ composition }} />\n      </ScaledPreview>\n    </DeferredPreview>\n  </EuiPanel>\n);\n\n/** A heading id the Home page's category chips can scroll to. */\nexport const galleryGroupId = (title: string): string =>\n  `isomer-studio-gallery-${encodeURIComponent(title)}`;\n\n/** Every example of every primitive on the React surface, by group, beside an \"On this page\" gutter; `group` scrolls to that group. */\nexport const GalleryView = ({ group }: { group?: string | undefined }) => {\n  const { euiTheme } = useEuiTheme();\n  const {\n    docs: { primitives, groups },\n    compose,\n  } = useStudio();\n\n  const compositions = useMemo(\n    () =>\n      new Map(\n        primitives.map(({ type, examples }) => [\n          type,\n          examples.map(({ node }) => compose([node])),\n        ])\n      ),\n    [primitives, compose]\n  );\n\n  useEffect(() => {\n    if (group === undefined) {\n      return;\n    }\n    document\n      .getElementById(galleryGroupId(group))\n      ?.scrollIntoView({ block: 'start' });\n  }, [group]);\n\n  const entries = useMemo(\n    () => groups.map(({ title }) => ({ id: galleryGroupId(title), title })),\n    [groups]\n  );\n  const ids = useMemo(() => entries.map(({ id }) => id), [entries]);\n  const [active, setActive] = useActiveEntry(ids, '');\n\n  let rendered = 0;\n\n  return (\n    <div\n      css={css`\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        gap: ${TOC_GAP}px;\n        max-width: ${PAGE_WIDTH}px;\n        margin-inline: auto;\n        padding: ${euiTheme.size.xl} ${euiTheme.size.xxl} ${euiTheme.size.xxxxl};\n      `}>\n      <OnThisPage {...{ entries, active }} onSelect={setActive} />\n      <div\n        css={css`\n          flex: 1 1 ${CONTENT_BASIS}px;\n          display: flex;\n          flex-direction: column;\n          gap: ${euiTheme.size.l};\n          min-width: 0;\n        `}>\n        <EuiTitle size=\"l\">\n          <h1>Gallery</h1>\n        </EuiTitle>\n        {groups.map(({ title, types }) => (\n          <section\n            key={title}\n            id={galleryGroupId(title)}\n            aria-label={title}\n            css={css`\n              display: flex;\n              flex-direction: column;\n              gap: ${euiTheme.size.m};\n              scroll-margin-top: ${euiTheme.size.l};\n            `}>\n            <EuiTitle size=\"s\">\n              <h2>{title}</h2>\n            </EuiTitle>\n            <EuiFlexGrid columns={GALLERY_COLUMNS} gutterSize=\"m\">\n              {types.flatMap((type) => {\n                const doc = primitives.find(\n                  (candidate) => candidate.type === type\n                );\n                return doc\n                  ? doc.examples.map(({ name }, index) => {\n                      const eager = rendered < GALLERY_COLUMNS;\n                      rendered += 1;\n                      return (\n                        <ExampleTile\n                          key={`${type}/${index}`}\n                          {...{ doc, name, eager }}\n                          composition={\n                            compositions.get(type)?.[index] ?? compose([])\n                          }\n                          devHref={formatRoute({\n                            mode: 'dev',\n                            page: type,\n                            example: index,\n                          })}\n                        />\n                      );\n                    })\n                  : [];\n              })}\n            </EuiFlexGrid>\n          </section>\n        ))}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/docs/inline_code.d.ts

@@ -0,0 +1,11 @@
+/** `text` split into prose and code: backtick spans, and any of `names` standing as a whole word. */
+export declare const splitCode: (text: string, names?: readonly string[]) => Array<{
+    text: string;
+    isCode: boolean;
+}>;
+/** Prose with its backtick spans and primitive names set as inline code. */
+export declare const InlineCode: ({ text, names, }: {
+    text: string;
+    names?: readonly string[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline_code.d.ts.map

package/dist/docs/inline_code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline_code.d.ts","sourceRoot":"","sources":["../../src/docs/inline_code.tsx"],"names":[],"mappings":"AAYA,qGAAqG;AACrG,eAAO,MAAM,SAAS,GACpB,MAAM,MAAM,EACZ,QAAO,SAAS,MAAM,EAAO,KAC5B,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAazC,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,GAAI,kBAGxB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B,qDAUA,CAAC"}

package/dist/docs/inline_code.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EuiCode } from '@elastic/eui';
+const escape = (name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/** `text` split into prose and code: backtick spans, and any of `names` standing as a whole word. */
+export const splitCode = (text, names = []) => {
+    const words = names.length
+        ? new RegExp(`\\b(${names.map(escape).join('|')})\\b`, 'g')
+        : undefined;
+    return text
+        .split(/`([^`]+)`/)
+        .flatMap((part, index) => index % 2 === 1
+        ? [{ text: part, isCode: true }]
+        : (words ? part.split(words) : [part]).flatMap((piece, pieceIndex) => piece ? [{ text: piece, isCode: pieceIndex % 2 === 1 }] : []));
+};
+/** Prose with its backtick spans and primitive names set as inline code. */
+export const InlineCode = ({ text, names, }) => (_jsx(_Fragment, { children: splitCode(text, names).map(({ text: part, isCode }, index) => isCode ? (_jsx(EuiCode, { children: part }, index)) : (_jsx(React.Fragment, { children: part }, index))) }));
+//# sourceMappingURL=inline_code.js.map

package/dist/docs/inline_code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline_code.js","sourceRoot":"","sources":["../../src/docs/inline_code.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAE7E,qGAAqG;AACrG,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,QAA2B,EAAE,EACa,EAAE;IAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM;QACxB,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;QAC3D,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,IAAI;SACR,KAAK,CAAC,WAAW,CAAC;SAClB,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACvB,KAAK,GAAG,CAAC,KAAK,CAAC;QACb,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CACjE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAC7D,CACN,CAAC;AACN,CAAC,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,KAAK,GAIN,EAAE,EAAE,CAAC,CACJ,4BACG,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAC5D,MAAM,CAAC,CAAC,CAAC,CACP,KAAC,OAAO,cAAc,IAAI,IAAZ,KAAK,CAAkB,CACtC,CAAC,CAAC,CAAC,CACF,KAAC,KAAK,CAAC,QAAQ,cAAc,IAAI,IAAZ,KAAK,CAAyB,CACpD,CACF,GACA,CACJ,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 from 'react';\nimport { EuiCode } from '@elastic/eui';\n\nconst escape = (name: string) => name.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\n/** `text` split into prose and code: backtick spans, and any of `names` standing as a whole word. */\nexport const splitCode = (\n  text: string,\n  names: readonly string[] = []\n): Array<{ text: string; isCode: boolean }> => {\n  const words = names.length\n    ? new RegExp(`\\\\b(${names.map(escape).join('|')})\\\\b`, 'g')\n    : undefined;\n  return text\n    .split(/`([^`]+)`/)\n    .flatMap((part, index) =>\n      index % 2 === 1\n        ? [{ text: part, isCode: true }]\n        : (words ? part.split(words) : [part]).flatMap((piece, pieceIndex) =>\n            piece ? [{ text: piece, isCode: pieceIndex % 2 === 1 }] : []\n          )\n    );\n};\n\n/** Prose with its backtick spans and primitive names set as inline code. */\nexport const InlineCode = ({\n  text,\n  names,\n}: {\n  text: string;\n  names?: readonly string[];\n}) => (\n  <>\n    {splitCode(text, names).map(({ text: part, isCode }, index) =>\n      isCode ? (\n        <EuiCode key={index}>{part}</EuiCode>\n      ) : (\n        <React.Fragment key={index}>{part}</React.Fragment>\n      )\n    )}\n  </>\n);\n"]}

package/dist/docs/on_this_page.d.ts

@@ -0,0 +1,17 @@
+export declare const PAGE_WIDTH = 1320;
+export declare const CONTENT_BASIS = 560;
+export declare const TOC_GAP = 48;
+export interface TocEntry {
+    /** The `id` of the element the entry scrolls to. */
+    id: string;
+    title: string;
+}
+/** The id of the topmost element in view, or the first when the browser can't observe intersections. */
+export declare const useActiveEntry: (ids: readonly string[], resetKey: string) => [string, (id: string) => void];
+/** A sticky "On this page" gutter when wide, a row above the content when narrow. Render it before the content. */
+export declare const OnThisPage: ({ entries, active, onSelect, }: {
+    entries: readonly TocEntry[];
+    active: string;
+    onSelect: (id: string) => void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=on_this_page.d.ts.map

package/dist/docs/on_this_page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"on_this_page.d.ts","sourceRoot":"","sources":["../../src/docs/on_this_page.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,OAAO,CAAC;AAC/B,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,OAAO,KAAK,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wGAAwG;AACxG,eAAO,MAAM,cAAc,GACzB,KAAK,SAAS,MAAM,EAAE,EACtB,UAAU,MAAM,KACf,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CA+B/B,CAAC;AAEF,mHAAmH;AACnH,eAAO,MAAM,UAAU,GAAI,gCAIxB;IACD,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,qDAyDA,CAAC"}

package/dist/docs/on_this_page.js

@@ -0,0 +1,77 @@
+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 { useEffect, useState } from 'react';
+import { EuiButtonEmpty, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+export const PAGE_WIDTH = 1320;
+export const CONTENT_BASIS = 560;
+const TOC_WIDTH = 180;
+export const TOC_GAP = 48;
+/** The id of the topmost element in view, or the first when the browser can't observe intersections. */
+export const useActiveEntry = (ids, resetKey) => {
+    const [active, setActive] = useState(ids[0] ?? '');
+    useEffect(() => {
+        setActive(ids[0] ?? '');
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const visible = new Set();
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(({ target: { id }, isIntersecting }) => isIntersecting ? visible.add(id) : visible.delete(id));
+            const first = ids.find((id) => visible.has(id));
+            if (first) {
+                setActive(first);
+            }
+        }, { rootMargin: '0px 0px -60% 0px' });
+        ids.forEach((id) => {
+            const element = document.getElementById(id);
+            if (element) {
+                observer.observe(element);
+            }
+        });
+        return () => observer.disconnect();
+    }, [ids, resetKey]);
+    return [active, setActive];
+};
+/** A sticky "On this page" gutter when wide, a row above the content when narrow. Render it before the content. */
+export const OnThisPage = ({ entries, active, onSelect, }) => {
+    const { euiTheme } = useEuiTheme();
+    return (_jsxs("nav", { "aria-label": "On this page", css: css `
+        flex: 0 0 ${TOC_WIDTH}px;
+        order: 1;
+        position: sticky;
+        top: ${euiTheme.size.xl};
+        height: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: ${euiTheme.size.xxs};
+
+        @media (max-width: 1200px) {
+          flex: 1 1 100%;
+          order: 0;
+          position: static;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: ${euiTheme.size.xxs} ${euiTheme.size.s};
+        }
+      `, children: [_jsx(EuiText, { size: "xs", color: "subdued", css: css `
+          text-transform: uppercase;
+          font-weight: ${euiTheme.font.weight.semiBold};
+
+          @media (max-width: 1200px) {
+            flex: 0 0 100%;
+          }
+        `, children: "On this page" }), entries.map(({ id, title }) => (_jsx(EuiButtonEmpty, { size: "xs", flush: "left", color: id === active ? 'primary' : 'text', "aria-current": id === active ? 'location' : undefined, css: css `
+            align-self: flex-start;
+          `, onClick: () => {
+                    onSelect(id);
+                    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+                }, children: title }, id)))] }));
+};
+//# sourceMappingURL=on_this_page.js.map

package/dist/docs/on_this_page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on_this_page.js","sourceRoot":"","sources":["../../src/docs/on_this_page.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useEffect, useState } from 'react';\nimport { EuiButtonEmpty, EuiText, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nexport const PAGE_WIDTH = 1320;\nexport const CONTENT_BASIS = 560;\nconst TOC_WIDTH = 180;\nexport const TOC_GAP = 48;\n\nexport interface TocEntry {\n  /** The `id` of the element the entry scrolls to. */\n  id: string;\n  title: string;\n}\n\n/** The id of the topmost element in view, or the first when the browser can't observe intersections. */\nexport const useActiveEntry = (\n  ids: readonly string[],\n  resetKey: string\n): [string, (id: string) => void] => {\n  const [active, setActive] = useState(ids[0] ?? '');\n\n  useEffect(() => {\n    setActive(ids[0] ?? '');\n    if (typeof IntersectionObserver === 'undefined') {\n      return;\n    }\n    const visible = new Set<string>();\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(({ target: { id }, isIntersecting }) =>\n          isIntersecting ? visible.add(id) : visible.delete(id)\n        );\n        const first = ids.find((id) => visible.has(id));\n        if (first) {\n          setActive(first);\n        }\n      },\n      { rootMargin: '0px 0px -60% 0px' }\n    );\n    ids.forEach((id) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observer.observe(element);\n      }\n    });\n    return () => observer.disconnect();\n  }, [ids, resetKey]);\n\n  return [active, setActive];\n};\n\n/** A sticky \"On this page\" gutter when wide, a row above the content when narrow. Render it before the content. */\nexport const OnThisPage = ({\n  entries,\n  active,\n  onSelect,\n}: {\n  entries: readonly TocEntry[];\n  active: string;\n  onSelect: (id: string) => void;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  return (\n    <nav\n      aria-label=\"On this page\"\n      css={css`\n        flex: 0 0 ${TOC_WIDTH}px;\n        order: 1;\n        position: sticky;\n        top: ${euiTheme.size.xl};\n        height: fit-content;\n        display: flex;\n        flex-direction: column;\n        gap: ${euiTheme.size.xxs};\n\n        @media (max-width: 1200px) {\n          flex: 1 1 100%;\n          order: 0;\n          position: static;\n          flex-direction: row;\n          flex-wrap: wrap;\n          align-items: center;\n          gap: ${euiTheme.size.xxs} ${euiTheme.size.s};\n        }\n      `}>\n      <EuiText\n        size=\"xs\"\n        color=\"subdued\"\n        css={css`\n          text-transform: uppercase;\n          font-weight: ${euiTheme.font.weight.semiBold};\n\n          @media (max-width: 1200px) {\n            flex: 0 0 100%;\n          }\n        `}>\n        On this page\n      </EuiText>\n      {entries.map(({ id, title }) => (\n        <EuiButtonEmpty\n          key={id}\n          size=\"xs\"\n          flush=\"left\"\n          color={id === active ? 'primary' : 'text'}\n          aria-current={id === active ? 'location' : undefined}\n          css={css`\n            align-self: flex-start;\n          `}\n          onClick={() => {\n            onSelect(id);\n            document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\n          }}>\n          {title}\n        </EuiButtonEmpty>\n      ))}\n    </nav>\n  );\n};\n"]}

package/dist/docs/props_table.d.ts

@@ -0,0 +1,14 @@
+import type { PropDescriptor } from '@elastic/isomer-runtime';
+import type { Accent } from '../chrome/accent.js';
+/** An enum's values as a TypeScript union literal, such as `"l" | "m" | "s"`. */
+export declare const enumLiteral: (values: readonly string[]) => string;
+/** A primitive's props, read from its authoring JSON Schema. */
+export declare const PropsTable: ({ props, accent, names, compact, }: {
+    props: PropDescriptor[];
+    accent: Accent;
+    /** Primitive types to set as code where a description names them. */
+    names: readonly string[];
+    /** Uses proportional column widths for the shared Dev drawer. */
+    compact?: boolean;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=props_table.d.ts.map

package/dist/docs/props_table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props_table.d.ts","sourceRoot":"","sources":["../../src/docs/props_table.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI/C,iFAAiF;AACjF,eAAO,MAAM,WAAW,GAAI,QAAQ,SAAS,MAAM,EAAE,KAAG,MACE,CAAC;AAyE3D,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,oCAKxB;IACD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,qDAQA,CAAC"}

package/dist/docs/props_table.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { EuiBadge, EuiBasicTable, EuiCode, EuiFlexGroup, EuiFlexItem, EuiText, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { InlineCode } from './inline_code.js';
+/** An enum's values as a TypeScript union literal, such as `"l" | "m" | "s"`. */
+export const enumLiteral = (values) => values.map((value) => JSON.stringify(value)).join(' | ');
+const columnsFor = ({ text, light }, names, compact = false) => [
+    {
+        name: 'Name',
+        width: compact ? '24%' : '14em',
+        valign: 'top',
+        render: ({ name, required }) => (_jsx("div", { children: _jsxs(EuiFlexGroup, { gutterSize: "xs", alignItems: "center", responsive: false, wrap: true, children: [_jsx(EuiFlexItem, { grow: false, children: _jsx(EuiCode, { css: css `
+                color: ${text};
+                background: ${light};
+              `, children: name }) }), required ? (_jsx(EuiFlexItem, { grow: false, children: _jsx(EuiBadge, { color: "hollow", children: "required" }) })) : null] }) })),
+    },
+    {
+        name: 'Type',
+        width: compact ? '24%' : '12em',
+        valign: 'top',
+        render: ({ type, values }) => values ? (_jsx(EuiCode, { children: enumLiteral(values) })) : (_jsx(EuiText, { size: "s", color: "subdued", children: type })),
+    },
+    {
+        name: 'Description',
+        valign: 'top',
+        render: ({ description }) => description ? (_jsx(EuiText, { size: "s", children: _jsx("p", { children: _jsx("span", { css: css `
+                display: inline-block;
+                max-inline-size: 72ch;
+              `, children: _jsx(InlineCode, { text: description, names }) }) }) })) : (_jsx(EuiText, { size: "s", color: "subdued", children: "\u2014" })),
+    },
+];
+/** A primitive's props, read from its authoring JSON Schema. */
+export const PropsTable = ({ props, accent, names, compact = false, }) => (_jsx(EuiBasicTable, { tableCaption: "Props", items: props, columns: columnsFor(accent, names, compact), itemId: "name", noItemsMessage: "This primitive has no props besides its type." }));
+//# sourceMappingURL=props_table.js.map

package/dist/docs/props_table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props_table.js","sourceRoot":"","sources":["../../src/docs/props_table.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,YAAY,EACZ,WAAW,EACX,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAIrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,iFAAiF;AACjF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAyB,EAAU,EAAE,CAC/D,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE3D,MAAM,UAAU,GAAG,CACjB,EAAE,IAAI,EAAE,KAAK,EAAU,EACvB,KAAwB,EACxB,OAAO,GAAG,KAAK,EAC6B,EAAE,CAAC;IAC/C;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;QAC/B,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAkB,EAAE,EAAE,CAAC,CAC9C,wBACE,MAAC,YAAY,IACX,UAAU,EAAC,IAAI,EACf,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAE,KAAK,EACjB,IAAI,mBACJ,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,YACtB,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,CAAA;yBACG,IAAI;8BACC,KAAK;eACpB,YACA,IAAI,GACG,GACE,EACb,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,YACtB,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,yBAAoB,GAChC,CACf,CAAC,CAAC,CAAC,IAAI,IACK,GACX,CACP;KACF;IACD;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;QAC/B,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAkB,EAAE,EAAE,CAC3C,MAAM,CAAC,CAAC,CAAC,CACP,KAAC,OAAO,cAAE,WAAW,CAAC,MAAM,CAAC,GAAW,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,IAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,YAC9B,IAAI,GACG,CACX;KACJ;IACD;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,CAAC,EAAE,WAAW,EAAkB,EAAE,EAAE,CAC1C,WAAW,CAAC,CAAC,CAAC,CACZ,KAAC,OAAO,IAAC,IAAI,EAAC,GAAG,YACf,sBACE,eACE,GAAG,EAAE,GAAG,CAAA;;;eAGP,YACD,KAAC,UAAU,IAAC,IAAI,EAAE,WAAW,EAAQ,KAAK,GAAM,GAC3C,GACL,GACI,CACX,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,IAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,uBAEvB,CACX;KACJ;CACF,CAAC;AAEF,gEAAgE;AAChE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAO,GAAG,KAAK,GAQhB,EAAE,EAAE,CAAC,CACJ,KAAC,aAAa,IACZ,YAAY,EAAC,OAAO,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,EAC3C,MAAM,EAAC,MAAM,EACb,cAAc,EAAC,+CAA+C,GAC9D,CACH,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 from 'react';\nimport type { EuiBasicTableColumn } from '@elastic/eui';\nimport {\n  EuiBadge,\n  EuiBasicTable,\n  EuiCode,\n  EuiFlexGroup,\n  EuiFlexItem,\n  EuiText,\n} from '@elastic/eui';\nimport type { PropDescriptor } from '@elastic/isomer-runtime';\nimport { css } from '@emotion/react';\n\nimport type { Accent } from '../chrome/accent';\n\nimport { InlineCode } from './inline_code';\n\n/** An enum's values as a TypeScript union literal, such as `\"l\" | \"m\" | \"s\"`. */\nexport const enumLiteral = (values: readonly string[]): string =>\n  values.map((value) => JSON.stringify(value)).join(' | ');\n\nconst columnsFor = (\n  { text, light }: Accent,\n  names: readonly string[],\n  compact = false\n): Array<EuiBasicTableColumn<PropDescriptor>> => [\n  {\n    name: 'Name',\n    width: compact ? '24%' : '14em',\n    valign: 'top',\n    render: ({ name, required }: PropDescriptor) => (\n      <div>\n        <EuiFlexGroup\n          gutterSize=\"xs\"\n          alignItems=\"center\"\n          responsive={false}\n          wrap>\n          <EuiFlexItem grow={false}>\n            <EuiCode\n              css={css`\n                color: ${text};\n                background: ${light};\n              `}>\n              {name}\n            </EuiCode>\n          </EuiFlexItem>\n          {required ? (\n            <EuiFlexItem grow={false}>\n              <EuiBadge color=\"hollow\">required</EuiBadge>\n            </EuiFlexItem>\n          ) : null}\n        </EuiFlexGroup>\n      </div>\n    ),\n  },\n  {\n    name: 'Type',\n    width: compact ? '24%' : '12em',\n    valign: 'top',\n    render: ({ type, values }: PropDescriptor) =>\n      values ? (\n        <EuiCode>{enumLiteral(values)}</EuiCode>\n      ) : (\n        <EuiText size=\"s\" color=\"subdued\">\n          {type}\n        </EuiText>\n      ),\n  },\n  {\n    name: 'Description',\n    valign: 'top',\n    render: ({ description }: PropDescriptor) =>\n      description ? (\n        <EuiText size=\"s\">\n          <p>\n            <span\n              css={css`\n                display: inline-block;\n                max-inline-size: 72ch;\n              `}>\n              <InlineCode text={description} {...{ names }} />\n            </span>\n          </p>\n        </EuiText>\n      ) : (\n        <EuiText size=\"s\" color=\"subdued\">\n          —\n        </EuiText>\n      ),\n  },\n];\n\n/** A primitive's props, read from its authoring JSON Schema. */\nexport const PropsTable = ({\n  props,\n  accent,\n  names,\n  compact = false,\n}: {\n  props: PropDescriptor[];\n  accent: Accent;\n  /** Primitive types to set as code where a description names them. */\n  names: readonly string[];\n  /** Uses proportional column widths for the shared Dev drawer. */\n  compact?: boolean;\n}) => (\n  <EuiBasicTable<PropDescriptor>\n    tableCaption=\"Props\"\n    items={props}\n    columns={columnsFor(accent, names, compact)}\n    itemId=\"name\"\n    noItemsMessage=\"This primitive has no props besides its type.\"\n  />\n);\n"]}

package/dist/home/apps_section.d.ts

@@ -0,0 +1,6 @@
+import type { StudioApp } from '../config.js';
+/** One tile per configured app, then how to add one; with none, only the latter, as the empty state. */
+export declare const AppsSection: ({ apps }: {
+    apps: readonly StudioApp[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=apps_section.d.ts.map

package/dist/home/apps_section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps_section.d.ts","sourceRoot":"","sources":["../../src/home/apps_section.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AA+F3C,wGAAwG;AACxG,eAAO,MAAM,WAAW,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,SAAS,EAAE,CAAA;CAAE,qDAoBnE,CAAC"}

package/dist/home/apps_section.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { Glyph } from '../chrome/primitive_glyph.js';
+import { formatLocation } from '../chrome/route.js';
+import { APPS_DOCS_URL } from './links.js';
+import { helpTile, HOME, sectionHeading, sectionLabel, tile, tileActions, tileDescription, tileName, tilesGrid, tileTop, } from './tokens.js';
+const AppTile = ({ app: { id, title, description, icon }, }) => (_jsxs("a", { href: formatLocation({ app: id, path: '' }), css: [
+        tile(3),
+        css `
+        &:hover,
+        &:focus-within {
+          border-color: ${HOME.app};
+        }
+      `,
+    ], "data-testid": "home-app", children: [_jsxs("span", { css: tileTop, children: [_jsx("span", { css: [
+                        tileName,
+                        css `
+            color: ${HOME.app};
+          `,
+                    ], children: title }), _jsx("span", { css: css `
+          color: ${HOME.app};
+          margin-top: 1px;
+        `, children: _jsx(Glyph, { svg: icon?.svg, label: title, size: 18 }) })] }), _jsx("span", { css: tileDescription, children: description ?? `Opens ${title}.` }), _jsx("span", { css: tileActions, children: _jsx("span", { css: css `
+          color: ${HOME.app};
+        `, children: "Open \u2192" }) })] }));
+const AddAppTile = ({ empty }) => (_jsxs("a", { href: APPS_DOCS_URL, target: "_blank", rel: "noopener", css: helpTile(3, HOME.app), "data-testid": "home-add-app", children: [_jsx("span", { css: [
+                tileName,
+                css `
+          color: ${HOME.fg};
+        `,
+            ], children: empty ? 'No applications yet' : 'How do I add an application?' }), _jsx("span", { css: tileDescription, children: empty
+                ? 'An app is a page of the Studio that demonstrates the pack. Add one to the config’s apps, with an id, a title and a load that imports its page.'
+                : 'A page of the Studio that demonstrates the pack, declared in the config’s apps.' }), _jsx("span", { css: css `
+        font-size: 12px;
+        font-weight: 600;
+        color: ${HOME.app};
+      `, children: "Read the config docs \u2197" })] }));
+/** One tile per configured app, then how to add one; with none, only the latter, as the empty state. */
+export const AppsSection = ({ apps }) => (_jsxs("section", { "aria-labelledby": "isomer-studio-applications", css: css `
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    `, children: [_jsx("div", { css: sectionLabel, children: _jsx("h2", { id: "isomer-studio-applications", css: sectionHeading, children: "Applications" }) }), _jsxs("div", { css: tilesGrid, children: [apps.map((app) => (_jsx(AppTile, { app }, app.id))), _jsx(AddAppTile, { empty: apps.length === 0 })] })] }));
+//# sourceMappingURL=apps_section.js.map