@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/home/loaded_panel.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { Glyph } from '../chrome/primitive_glyph.js';
+import { useStudio } from '../studio_context.js';
+import { PREVIEW_ICONS } from '../surfaces/surface_select.js';
+import { APPS_DOCS_URL, STUDIO_CONFIG_DOCS_URL, VIEWS_DOCS_URL } from './links.js';
+import { HOME } from './tokens.js';
+const Section = ({ title, count, children, }) => {
+    const { euiTheme: { font }, } = useEuiTheme();
+    return (_jsxs("section", { "aria-label": title, css: css `
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      `, children: [_jsxs("div", { css: css `
+          display: flex;
+          align-items: baseline;
+          justify-content: space-between;
+          font-size: 11px;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+          color: ${HOME.fg3};
+        `, children: [_jsx("span", { children: title }), _jsx("span", { css: css `
+            font-family: ${font.familyCode};
+            letter-spacing: 0;
+            text-transform: none;
+          `, children: count })] }), children] }));
+};
+const row = css `
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  font-size: 12px;
+`;
+const code = (familyCode) => css `
+  font-family: ${familyCode};
+  color: ${HOME.fg};
+  overflow-wrap: anywhere;
+`;
+const meta = css `
+  color: ${HOME.fg3};
+  text-wrap: pretty;
+`;
+const link = css `
+  font-weight: 600;
+  color: ${HOME.accent};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+/** A dashed box saying what is missing, how to add it, and where that is documented. */
+const Empty = ({ children, href, action, }) => (_jsxs("div", { css: css `
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 12px;
+      color: ${HOME.fg3};
+      padding: 8px 10px;
+      border: 1px dashed rgba(255, 255, 255, 0.25);
+      border-radius: 6px;
+      text-wrap: pretty;
+    `, children: [_jsx("span", { children: children }), _jsxs("a", { href: href, target: "_blank", rel: "noopener", css: link, children: [action, " \u2197"] })] }));
+/** What the runtime loaded: packs, views, apps and surfaces, then where that is configured. */
+export const LoadedPanel = ({ surfaces, }) => {
+    const { euiTheme: { font }, } = useEuiTheme();
+    const { runtime, apps, docs: { primitives, views }, } = useStudio();
+    const mono = code(font.familyCode);
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { css: css `
+          margin: 0;
+          font-size: 13px;
+          font-weight: 600;
+          color: ${HOME.fg};
+        `, children: "Loaded in this Studio" }), _jsx(Section, { title: "Primitive packs", count: runtime.packs.length, children: runtime.packs.map((pack) => {
+                    const groups = pack.authoring?.groups?.length ?? 0;
+                    const count = pack.primitives.length;
+                    return (_jsxs("div", { css: row, children: [_jsx("span", { css: mono, children: pack.id }), _jsxs("span", { css: meta, children: [count, " ", count === 1 ? 'primitive' : 'primitives', groups
+                                        ? ` · ${groups} ${groups === 1 ? 'group' : 'groups'}`
+                                        : ''] })] }, pack.id));
+                }) }), _jsx(Section, { title: "Views", count: views.length, children: views.length ? (views.map(({ id, title, description }) => (_jsxs("div", { css: row, children: [_jsx("span", { css: mono, children: id }), _jsx("span", { css: meta, children: description || title })] }, id)))) : (_jsxs(Empty, { href: VIEWS_DOCS_URL, action: "Read about views", children: ["None registered. A view is a host-owned composition the runtime builds by id: define one with defineView and pass it in createIsomerRuntime(", '{ views }', "), or register it on runtime.viewRegistry."] })) }), _jsx(Section, { title: "Apps", count: apps.length, children: apps.length ? (apps.map(({ id, title, description, icon }) => (_jsxs("div", { css: css `
+                display: flex;
+                align-items: flex-start;
+                gap: 10px;
+                min-width: 0;
+              `, children: [_jsx("span", { css: css `
+                  color: ${HOME.app};
+                  margin-top: 2px;
+                `, children: _jsx(Glyph, { svg: icon?.svg, label: title, size: 18 }) }), _jsxs("div", { css: row, children: [_jsx("span", { css: css `
+                    font-weight: 600;
+                    color: ${HOME.fg};
+                  `, children: title }), description ? _jsx("span", { css: meta, children: description }) : null] })] }, id)))) : (_jsxs(Empty, { href: APPS_DOCS_URL, action: "Read about apps", children: ["None configured. An app is a page of the Studio that shows the pack in use: add ", '{ id, title, description, load }', " to the config's apps."] })) }), _jsx(Section, { title: "Surfaces", count: surfaces.length, children: _jsx("div", { css: css `
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 6px 12px;
+          `, children: surfaces.map((surface) => (_jsxs("span", { css: css `
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                font-family: ${font.familyCode};
+                font-size: 12px;
+                color: ${HOME.fg};
+              `, children: [_jsx(EuiIcon, { type: PREVIEW_ICONS[surface], size: "m" }), surface] }, surface))) }) }), _jsxs("div", { css: css `
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          border-top: 1px solid ${HOME.line1};
+          padding-top: 16px;
+          font-size: 12px;
+          color: ${HOME.fg3};
+          text-wrap: pretty;
+        `, children: [_jsxs("p", { css: css `
+            margin: 0;
+          `, children: ["Everything here comes from the Studio config: the runtime and its packs, the apps, and which primitives are featured.", ' ', primitives.length, ' ', primitives.length === 1 ? 'primitive is' : 'primitives are', " loaded."] }), _jsx("a", { href: STUDIO_CONFIG_DOCS_URL, target: "_blank", rel: "noopener", css: link, children: "Edit the config \u2197" })] })] }));
+};
+//# sourceMappingURL=loaded_panel.js.map

package/dist/home/loaded_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaded_panel.js","sourceRoot":"","sources":["../../src/home/loaded_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 type { ReactNode } from 'react';\nimport React from 'react';\nimport { EuiIcon, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { Glyph } from '../chrome/primitive_glyph';\nimport { useStudio } from '../studio_context';\nimport type { PreviewSurface } from '../surfaces/surface_select';\nimport { PREVIEW_ICONS } from '../surfaces/surface_select';\n\nimport { APPS_DOCS_URL, STUDIO_CONFIG_DOCS_URL, VIEWS_DOCS_URL } from './links';\nimport { HOME } from './tokens';\n\nconst Section = ({\n  title,\n  count,\n  children,\n}: {\n  title: string;\n  count: number;\n  children: ReactNode;\n}) => {\n  const {\n    euiTheme: { font },\n  } = useEuiTheme();\n  return (\n    <section\n      aria-label={title}\n      css={css`\n        display: flex;\n        flex-direction: column;\n        gap: 7px;\n      `}>\n      <div\n        css={css`\n          display: flex;\n          align-items: baseline;\n          justify-content: space-between;\n          font-size: 11px;\n          letter-spacing: 0.06em;\n          text-transform: uppercase;\n          color: ${HOME.fg3};\n        `}>\n        <span>{title}</span>\n        <span\n          css={css`\n            font-family: ${font.familyCode};\n            letter-spacing: 0;\n            text-transform: none;\n          `}>\n          {count}\n        </span>\n      </div>\n      {children}\n    </section>\n  );\n};\n\nconst row = css`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n  font-size: 12px;\n`;\nconst code = (familyCode: string | undefined) => css`\n  font-family: ${familyCode};\n  color: ${HOME.fg};\n  overflow-wrap: anywhere;\n`;\nconst meta = css`\n  color: ${HOME.fg3};\n  text-wrap: pretty;\n`;\nconst link = css`\n  font-weight: 600;\n  color: ${HOME.accent};\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\n/** A dashed box saying what is missing, how to add it, and where that is documented. */\nconst Empty = ({\n  children,\n  href,\n  action,\n}: {\n  children: ReactNode;\n  href: string;\n  action: string;\n}) => (\n  <div\n    css={css`\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      font-size: 12px;\n      color: ${HOME.fg3};\n      padding: 8px 10px;\n      border: 1px dashed rgba(255, 255, 255, 0.25);\n      border-radius: 6px;\n      text-wrap: pretty;\n    `}>\n    <span>{children}</span>\n    <a href={href} target=\"_blank\" rel=\"noopener\" css={link}>\n      {action} ↗\n    </a>\n  </div>\n);\n\n/** What the runtime loaded: packs, views, apps and surfaces, then where that is configured. */\nexport const LoadedPanel = ({\n  surfaces,\n}: {\n  surfaces: readonly PreviewSurface[];\n}) => {\n  const {\n    euiTheme: { font },\n  } = useEuiTheme();\n  const {\n    runtime,\n    apps,\n    docs: { primitives, views },\n  } = useStudio();\n  const mono = code(font.familyCode);\n\n  return (\n    <>\n      <h2\n        css={css`\n          margin: 0;\n          font-size: 13px;\n          font-weight: 600;\n          color: ${HOME.fg};\n        `}>\n        Loaded in this Studio\n      </h2>\n\n      <Section title=\"Primitive packs\" count={runtime.packs.length}>\n        {runtime.packs.map((pack) => {\n          const groups = pack.authoring?.groups?.length ?? 0;\n          const count = pack.primitives.length;\n          return (\n            <div key={pack.id} css={row}>\n              <span css={mono}>{pack.id}</span>\n              <span css={meta}>\n                {count} {count === 1 ? 'primitive' : 'primitives'}\n                {groups\n                  ? ` · ${groups} ${groups === 1 ? 'group' : 'groups'}`\n                  : ''}\n              </span>\n            </div>\n          );\n        })}\n      </Section>\n\n      <Section title=\"Views\" count={views.length}>\n        {views.length ? (\n          views.map(({ id, title, description }) => (\n            <div key={id} css={row}>\n              <span css={mono}>{id}</span>\n              <span css={meta}>{description || title}</span>\n            </div>\n          ))\n        ) : (\n          <Empty href={VIEWS_DOCS_URL} action=\"Read about views\">\n            None registered. A view is a host-owned composition the runtime\n            builds by id: define one with defineView and pass it in\n            createIsomerRuntime({'{ views }'}), or register it on\n            runtime.viewRegistry.\n          </Empty>\n        )}\n      </Section>\n\n      <Section title=\"Apps\" count={apps.length}>\n        {apps.length ? (\n          apps.map(({ id, title, description, icon }) => (\n            <div\n              key={id}\n              css={css`\n                display: flex;\n                align-items: flex-start;\n                gap: 10px;\n                min-width: 0;\n              `}>\n              <span\n                css={css`\n                  color: ${HOME.app};\n                  margin-top: 2px;\n                `}>\n                <Glyph svg={icon?.svg} label={title} size={18} />\n              </span>\n              <div css={row}>\n                <span\n                  css={css`\n                    font-weight: 600;\n                    color: ${HOME.fg};\n                  `}>\n                  {title}\n                </span>\n                {description ? <span css={meta}>{description}</span> : null}\n              </div>\n            </div>\n          ))\n        ) : (\n          <Empty href={APPS_DOCS_URL} action=\"Read about apps\">\n            None configured. An app is a page of the Studio that shows the pack\n            in use: add {'{ id, title, description, load }'} to the\n            config&apos;s apps.\n          </Empty>\n        )}\n      </Section>\n\n      <Section title=\"Surfaces\" count={surfaces.length}>\n        <div\n          css={css`\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 6px 12px;\n          `}>\n          {surfaces.map((surface) => (\n            <span\n              key={surface}\n              css={css`\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                font-family: ${font.familyCode};\n                font-size: 12px;\n                color: ${HOME.fg};\n              `}>\n              <EuiIcon type={PREVIEW_ICONS[surface]} size=\"m\" />\n              {surface}\n            </span>\n          ))}\n        </div>\n      </Section>\n\n      <div\n        css={css`\n          display: flex;\n          flex-direction: column;\n          gap: 6px;\n          border-top: 1px solid ${HOME.line1};\n          padding-top: 16px;\n          font-size: 12px;\n          color: ${HOME.fg3};\n          text-wrap: pretty;\n        `}>\n        <p\n          css={css`\n            margin: 0;\n          `}>\n          Everything here comes from the Studio config: the runtime and its\n          packs, the apps, and which primitives are featured.{' '}\n          {primitives.length}{' '}\n          {primitives.length === 1 ? 'primitive is' : 'primitives are'} loaded.\n        </p>\n        <a\n          href={STUDIO_CONFIG_DOCS_URL}\n          target=\"_blank\"\n          rel=\"noopener\"\n          css={link}>\n          Edit the config ↗\n        </a>\n      </div>\n    </>\n  );\n};\n"]}

package/dist/home/surface_chart.d.ts

@@ -0,0 +1,6 @@
+import type { PreviewSurface } from '../surfaces/surface_select.js';
+/** The composition on top, wired like an org chart to one white card per surface the runtime has. */
+export declare const SurfaceChart: ({ surfaces, }: {
+    surfaces: readonly PreviewSurface[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface_chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface_chart.d.ts","sourceRoot":"","sources":["../../src/home/surface_chart.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AA2BjE,qGAAqG;AACrG,eAAO,MAAM,YAAY,GAAI,eAE1B;IACD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,qDA4UA,CAAC"}

package/dist/home/surface_chart.js

@@ -0,0 +1,263 @@
+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 { useLayoutEffect, useRef, useState } from 'react';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { IsomerMark } from '../chrome/isomer_mark.js';
+import { PREVIEW_ICONS, PREVIEW_LABELS, SURFACE_NOTES, } from '../surfaces/surface_select.js';
+import { CONTENT_WIDTH, HOME, quietLabel, WIDE } from './tokens.js';
+const COMPOSITION_NOTE = 'composition: one typed Composition, validated once, rendered to every surface the runtime has.';
+/** Percent of the stage: the pill's center, the bus below it, the row of cards, and half a card's height. */
+const PILL_Y = 16;
+const HUB_Y = 26;
+const BUS_Y = 48;
+const ROW_Y = 74;
+const CARD_HALF = 15.8;
+const CARD_WIDTH = 64;
+const CARD_HEIGHT = 82;
+const spotsFor = (count) => count === 1
+    ? [50]
+    : Array.from({ length: count }, (_, i) => 10 + (i * 80) / (count - 1));
+/** The composition on top, wired like an org chart to one white card per surface the runtime has. */
+export const SurfaceChart = ({ surfaces, }) => {
+    const { euiTheme: { font }, } = useEuiTheme();
+    const [note, setNote] = useState('');
+    const stageRef = useRef(null);
+    const [connections, setConnections] = useState([]);
+    useLayoutEffect(() => {
+        const element = stageRef.current;
+        if (!element) {
+            return;
+        }
+        const measure = () => {
+            const stageBox = element.getBoundingClientRect();
+            const [source, ...cards] = Array.from(element.querySelectorAll('[tabindex="0"]')).map((item) => item.getBoundingClientRect());
+            if (!source) {
+                return;
+            }
+            const sourceX = source.left + source.width / 2 - stageBox.left;
+            const sourceY = source.bottom - stageBox.top;
+            const hubY = sourceY + 14;
+            setConnections(cards.map((box) => {
+                const x = box.left + box.width / 2 - stageBox.left;
+                const y = box.top - stageBox.top;
+                return `M ${sourceX} ${sourceY} V ${hubY} H 4 V ${y - 14} H ${x} V ${y}`;
+            }));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [surfaces]);
+    const spots = spotsFor(surfaces.length);
+    const first = spots[0] ?? 50;
+    const last = spots[spots.length - 1] ?? 50;
+    const stage = css `
+    position: relative;
+    width: 100%;
+    max-width: ${CONTENT_WIDTH}px;
+    margin-inline: auto;
+    aspect-ratio: 62 / 26;
+    @container (max-width: ${CONTENT_WIDTH - 1}px) {
+      aspect-ratio: auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(${CARD_WIDTH}px, 1fr));
+      justify-items: center;
+      gap: 28px 10px;
+      padding: 8px 0 8px 16px;
+      box-sizing: border-box;
+    }
+  `;
+    const wires = css `
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    color: ${HOME.accent};
+    pointer-events: none;
+    @container (max-width: ${CONTENT_WIDTH - 1}px) {
+      display: none;
+    }
+  `;
+    const wrappedWires = css `
+    ${wires};
+    display: none;
+    @container (max-width: ${CONTENT_WIDTH - 1}px) {
+      display: block;
+    }
+  `;
+    const pill = css `
+    position: absolute;
+    left: 50%;
+    top: ${PILL_Y}%;
+    translate: -50% -50%;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: clamp(150px, 30%, 190px);
+    height: 50px;
+    border-radius: 999px;
+    background: ${HOME.surface3};
+    border: 1px solid ${HOME.accentBorder};
+    box-shadow:
+      0 0 0 4px rgba(240, 78, 152, 0.18),
+      0 4px 14px rgba(0, 0, 0, 0.4);
+    font-family: ${font.familyCode};
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: ${HOME.accent};
+    cursor: default;
+    transition:
+      scale 0.12s,
+      box-shadow 0.12s,
+      background 0.12s;
+    &:hover,
+    &:focus-visible {
+      background: rgba(255, 255, 255, 0.16);
+      box-shadow:
+        0 0 0 6px rgba(240, 78, 152, 0.28),
+        0 6px 18px rgba(0, 0, 0, 0.45);
+      scale: 1.04;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      &:hover,
+      &:focus-visible {
+        scale: none;
+      }
+    }
+    @container (max-width: ${CONTENT_WIDTH - 1}px) {
+      position: static;
+      translate: none;
+      grid-column: 1 / -1;
+      width: 190px;
+    }
+  `;
+    const card = (x) => css `
+    position: absolute;
+    left: ${x}%;
+    top: ${ROW_Y}%;
+    margin: -${CARD_HEIGHT / 2}px 0 0 -${CARD_WIDTH / 2}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: ${CARD_WIDTH}px;
+    height: ${CARD_HEIGHT}px;
+    border-radius: 8px;
+    background: #ffffff;
+    color: ${HOME.shell};
+    box-shadow:
+      0 2px 6px rgba(0, 0, 0, 0.35),
+      0 0 0 1px rgba(0, 0, 0, 0.08);
+    font-family: ${font.familyCode};
+    font-size: 11px;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    cursor: default;
+    transition: transform 0.12s;
+    &:hover,
+    &:focus-visible {
+      z-index: 1;
+      transform: translateY(-6px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      &:hover,
+      &:focus-visible {
+        transform: none;
+        outline: 2px solid ${HOME.accent};
+        outline-offset: 2px;
+      }
+    }
+    @container (max-width: ${CONTENT_WIDTH - 1}px) {
+      position: static;
+      margin: 0;
+    }
+  `;
+    const body = css `
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'blurb'
+      'chart';
+    gap: 20px;
+    ${WIDE} {
+      grid-template-columns: ${CONTENT_WIDTH}px minmax(0, 1fr);
+      grid-template-areas: 'chart blurb';
+      gap: 32px;
+      align-items: center;
+    }
+  `;
+    const blurb = css `
+    grid-area: blurb;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 52ch;
+  `;
+    const blurbTitle = css `
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    text-wrap: balance;
+    color: ${HOME.fg};
+  `;
+    const blurbText = css `
+    margin: 0;
+    font-size: 14px;
+    color: ${HOME.fg2};
+    text-wrap: pretty;
+  `;
+    const chart = css `
+    grid-area: chart;
+    container-type: inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+  `;
+    return (_jsxs("section", { "aria-labelledby": "isomer-studio-surfaces", css: css `
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      `, children: [_jsx("div", { css: quietLabel, children: _jsx("span", { id: "isomer-studio-surfaces", children: "One composition, every surface" }) }), _jsxs("div", { css: body, children: [_jsxs("div", { css: blurb, children: [_jsx("h2", { css: blurbTitle, children: "Author once, render anywhere." }), _jsx("p", { css: blurbText, children: "Isomer turns one typed composition into every surface your product speaks: web, Slack, Markdown, images." }), _jsx("p", { css: blurbText, children: "Hosts keep their data, authorization and routing. Isomer owns the contract, the primitive catalog, validation and rendering." })] }), _jsxs("div", { css: chart, children: [_jsxs("div", { ref: stageRef, css: stage, onMouseLeave: () => setNote(''), onBlur: (event) => {
+                                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                                        setNote('');
+                                    }
+                                }, children: [_jsxs("div", { css: pill, tabIndex: 0, onMouseEnter: () => setNote(COMPOSITION_NOTE), onFocus: () => setNote(COMPOSITION_NOTE), children: [_jsx(IsomerMark, { size: 26 }), _jsx("span", { children: "composition" })] }), _jsx("svg", { "data-surface-connections": "wide", css: wires, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": true, children: [
+                                            [50, HUB_Y, 50, BUS_Y],
+                                            [first, BUS_Y, last, BUS_Y],
+                                            ...spots.map((x) => [x, BUS_Y, x, ROW_Y - CARD_HALF]),
+                                        ].map(([x1, y1, x2, y2], index) => (_jsx("line", { x1, y1, x2, y2, stroke: "currentColor", strokeWidth: "1", opacity: "0.55", vectorEffect: "non-scaling-stroke" }, index))) }), _jsx("svg", { "data-surface-connections": "wrapped", css: wrappedWires, opacity: "0.55", "aria-hidden": true, children: connections.map((d, index) => (_jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "1" }, surfaces[index]))) }), surfaces.map((surface, index) => {
+                                        const text = `${surface}: ${SURFACE_NOTES[surface]}`;
+                                        return (_jsxs("div", { css: card(spots[index] ?? 50), tabIndex: 0, "aria-label": PREVIEW_LABELS[surface], onMouseEnter: () => setNote(text), onFocus: () => setNote(text), children: [_jsx(EuiIcon, { type: PREVIEW_ICONS[surface], size: "xl" }), _jsx("span", { children: surface === 'snapshot'
+                                                        ? 'snap'
+                                                        : surface === 'markdown'
+                                                            ? 'md'
+                                                            : surface })] }, surface));
+                                    })] }), _jsx("div", { "aria-live": "polite", css: css `
+              min-height: 20px;
+              text-align: center;
+              font-size: 12.5px;
+              color: ${HOME.fg2};
+              text-wrap: pretty;
+            `, children: note })] })] })] }));
+};
+//# sourceMappingURL=surface_chart.js.map

package/dist/home/surface_chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface_chart.js","sourceRoot":"","sources":["../../src/home/surface_chart.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EACL,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEjE,MAAM,gBAAgB,GACpB,gGAAgG,CAAC;AAEnG,6GAA6G;AAC7G,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,MAAM,SAAS,GAAG,IAAI,CAAC;AAEvB,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAY,EAAE,CAC3C,KAAK,KAAK,CAAC;IACT,CAAC,CAAC,CAAC,EAAE,CAAC;IACN,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;AAE3E,qGAAqG;AACrG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,EACJ,QAAQ,EAAE,EAAE,IAAI,EAAE,GACnB,GAAG,WAAW,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IACtE,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACjD,MAAM,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CACnC,OAAO,CAAC,gBAAgB,CAAc,gBAAgB,CAAC,CACxD,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO;YACT,CAAC;YACD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC/D,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;YAC7C,MAAM,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC;YAC1B,cAAc,CACZ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBAChB,MAAM,CAAC,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;gBACnD,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;gBACjC,OAAO,KAAK,OAAO,IAAI,OAAO,MAAM,IAAI,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3E,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;YAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC3C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAE3C,MAAM,KAAK,GAAG,GAAG,CAAA;;;iBAGF,aAAa;;;6BAGD,aAAa,GAAG,CAAC;;;uDAGS,UAAU;;;;;;GAM9D,CAAC;IACF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;aAKN,IAAI,CAAC,MAAM;;6BAEK,aAAa,GAAG,CAAC;;;GAG3C,CAAC;IACF,MAAM,YAAY,GAAG,GAAG,CAAA;MACpB,KAAK;;6BAEkB,aAAa,GAAG,CAAC;;;GAG3C,CAAC;IACF,MAAM,IAAI,GAAG,GAAG,CAAA;;;WAGP,MAAM;;;;;;;;;;kBAUC,IAAI,CAAC,QAAQ;wBACP,IAAI,CAAC,YAAY;;;;mBAItB,IAAI,CAAC,UAAU;;;;;aAKrB,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;6BAqBK,aAAa,GAAG,CAAC;;;;;;GAM3C,CAAC;IACF,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAA;;YAErB,CAAC;WACF,KAAK;eACD,WAAW,GAAG,CAAC,WAAW,UAAU,GAAG,CAAC;;;;;;aAM1C,UAAU;cACT,WAAW;;;aAGZ,IAAI,CAAC,KAAK;;;;mBAIJ,IAAI,CAAC,UAAU;;;;;;;;;;;;;;;;6BAgBL,IAAI,CAAC,MAAM;;;;6BAIX,aAAa,GAAG,CAAC;;;;GAI3C,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;MAOZ,IAAI;+BACqB,aAAa;;;;;GAKzC,CAAC;IACF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;GAMhB,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;aAOX,IAAI,CAAC,EAAE;GACjB,CAAC;IACF,MAAM,SAAS,GAAG,GAAG,CAAA;;;aAGV,IAAI,CAAC,GAAG;;GAElB,CAAC;IACF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;GAOhB,CAAC;IAEF,OAAO,CACL,sCACkB,wBAAwB,EACxC,GAAG,EAAE,GAAG,CAAA;;;;OAIP,aACD,cAAK,GAAG,EAAE,UAAU,YAClB,eAAM,EAAE,EAAC,wBAAwB,+CAAsC,GACnE,EACN,eAAK,GAAG,EAAE,IAAI,aACZ,eAAK,GAAG,EAAE,KAAK,aACb,aAAI,GAAG,EAAE,UAAU,8CAAoC,EACvD,YAAG,GAAG,EAAE,SAAS,yHAGb,EACJ,YAAG,GAAG,EAAE,SAAS,6IAGb,IACA,EACN,eAAK,GAAG,EAAE,KAAK,aACb,eACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,KAAK,EACV,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oCAChB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;wCACvD,OAAO,CAAC,EAAE,CAAC,CAAC;oCACd,CAAC;gCACH,CAAC,aACD,eACE,GAAG,EAAE,IAAI,EACT,QAAQ,EAAE,CAAC,EACX,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,aACxC,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,GAAI,EACxB,yCAAwB,IACpB,EACN,0CAC2B,MAAM,EAC/B,GAAG,EAAE,KAAK,EACV,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,MAAM,iBACb,IAAI,YAChB;4CACC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC;4CACtB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC;4CAC3B,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC,CAAC;yCACtD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,eAEQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACpB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,MAAM,EACd,YAAY,EAAC,oBAAoB,IAL5B,KAAK,CAMV,CACH,CAAC,GACE,EACN,0CAC2B,SAAS,EAClC,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,MAAM,iBACD,IAAI,YAChB,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,eAEE,CAAC,EAAE,CAAC,EACJ,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,IAJV,QAAQ,CAAC,KAAK,CAAC,CAKpB,CACH,CAAC,GACE,EACL,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wCAC/B,MAAM,IAAI,GAAG,GAAG,OAAO,KAAK,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;wCACrD,OAAO,CACL,eAEE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAC7B,QAAQ,EAAE,CAAC,gBACC,cAAc,CAAC,OAAO,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,aAC5B,KAAC,OAAO,IAAC,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG,EACnD,yBACG,OAAO,KAAK,UAAU;wDACrB,CAAC,CAAC,MAAM;wDACR,CAAC,CAAC,OAAO,KAAK,UAAU;4DACtB,CAAC,CAAC,IAAI;4DACN,CAAC,CAAC,OAAO,GACR,KAbF,OAAO,CAcR,CACP,CAAC;oCACJ,CAAC,CAAC,IACE,EACN,2BACY,QAAQ,EAClB,GAAG,EAAE,GAAG,CAAA;;;;uBAIG,IAAI,CAAC,GAAG;;aAElB,YACA,IAAI,GACD,IACF,IACF,IACE,CACX,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, { useLayoutEffect, useRef, useState } from 'react';\nimport { EuiIcon, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { IsomerMark } from '../chrome/isomer_mark';\nimport type { PreviewSurface } from '../surfaces/surface_select';\nimport {\n  PREVIEW_ICONS,\n  PREVIEW_LABELS,\n  SURFACE_NOTES,\n} from '../surfaces/surface_select';\n\nimport { CONTENT_WIDTH, HOME, quietLabel, WIDE } from './tokens';\n\nconst COMPOSITION_NOTE =\n  'composition: one typed Composition, validated once, rendered to every surface the runtime has.';\n\n/** Percent of the stage: the pill's center, the bus below it, the row of cards, and half a card's height. */\nconst PILL_Y = 16;\nconst HUB_Y = 26;\nconst BUS_Y = 48;\nconst ROW_Y = 74;\nconst CARD_HALF = 15.8;\n\nconst CARD_WIDTH = 64;\nconst CARD_HEIGHT = 82;\n\nconst spotsFor = (count: number): number[] =>\n  count === 1\n    ? [50]\n    : Array.from({ length: count }, (_, i) => 10 + (i * 80) / (count - 1));\n\n/** The composition on top, wired like an org chart to one white card per surface the runtime has. */\nexport const SurfaceChart = ({\n  surfaces,\n}: {\n  surfaces: readonly PreviewSurface[];\n}) => {\n  const {\n    euiTheme: { font },\n  } = useEuiTheme();\n  const [note, setNote] = useState('');\n  const stageRef = useRef<HTMLDivElement>(null);\n  const [connections, setConnections] = useState<readonly string[]>([]);\n  useLayoutEffect(() => {\n    const element = stageRef.current;\n    if (!element) {\n      return;\n    }\n    const measure = () => {\n      const stageBox = element.getBoundingClientRect();\n      const [source, ...cards] = Array.from(\n        element.querySelectorAll<HTMLElement>('[tabindex=\"0\"]')\n      ).map((item) => item.getBoundingClientRect());\n      if (!source) {\n        return;\n      }\n      const sourceX = source.left + source.width / 2 - stageBox.left;\n      const sourceY = source.bottom - stageBox.top;\n      const hubY = sourceY + 14;\n      setConnections(\n        cards.map((box) => {\n          const x = box.left + box.width / 2 - stageBox.left;\n          const y = box.top - stageBox.top;\n          return `M ${sourceX} ${sourceY} V ${hubY} H 4 V ${y - 14} H ${x} V ${y}`;\n        })\n      );\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', measure);\n      return () => window.removeEventListener('resize', measure);\n    }\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [surfaces]);\n  const spots = spotsFor(surfaces.length);\n  const first = spots[0] ?? 50;\n  const last = spots[spots.length - 1] ?? 50;\n\n  const stage = css`\n    position: relative;\n    width: 100%;\n    max-width: ${CONTENT_WIDTH}px;\n    margin-inline: auto;\n    aspect-ratio: 62 / 26;\n    @container (max-width: ${CONTENT_WIDTH - 1}px) {\n      aspect-ratio: auto;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(${CARD_WIDTH}px, 1fr));\n      justify-items: center;\n      gap: 28px 10px;\n      padding: 8px 0 8px 16px;\n      box-sizing: border-box;\n    }\n  `;\n  const wires = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    color: ${HOME.accent};\n    pointer-events: none;\n    @container (max-width: ${CONTENT_WIDTH - 1}px) {\n      display: none;\n    }\n  `;\n  const wrappedWires = css`\n    ${wires};\n    display: none;\n    @container (max-width: ${CONTENT_WIDTH - 1}px) {\n      display: block;\n    }\n  `;\n  const pill = css`\n    position: absolute;\n    left: 50%;\n    top: ${PILL_Y}%;\n    translate: -50% -50%;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    width: clamp(150px, 30%, 190px);\n    height: 50px;\n    border-radius: 999px;\n    background: ${HOME.surface3};\n    border: 1px solid ${HOME.accentBorder};\n    box-shadow:\n      0 0 0 4px rgba(240, 78, 152, 0.18),\n      0 4px 14px rgba(0, 0, 0, 0.4);\n    font-family: ${font.familyCode};\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: ${HOME.accent};\n    cursor: default;\n    transition:\n      scale 0.12s,\n      box-shadow 0.12s,\n      background 0.12s;\n    &:hover,\n    &:focus-visible {\n      background: rgba(255, 255, 255, 0.16);\n      box-shadow:\n        0 0 0 6px rgba(240, 78, 152, 0.28),\n        0 6px 18px rgba(0, 0, 0, 0.45);\n      scale: 1.04;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n      &:hover,\n      &:focus-visible {\n        scale: none;\n      }\n    }\n    @container (max-width: ${CONTENT_WIDTH - 1}px) {\n      position: static;\n      translate: none;\n      grid-column: 1 / -1;\n      width: 190px;\n    }\n  `;\n  const card = (x: number) => css`\n    position: absolute;\n    left: ${x}%;\n    top: ${ROW_Y}%;\n    margin: -${CARD_HEIGHT / 2}px 0 0 -${CARD_WIDTH / 2}px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: ${CARD_WIDTH}px;\n    height: ${CARD_HEIGHT}px;\n    border-radius: 8px;\n    background: #ffffff;\n    color: ${HOME.shell};\n    box-shadow:\n      0 2px 6px rgba(0, 0, 0, 0.35),\n      0 0 0 1px rgba(0, 0, 0, 0.08);\n    font-family: ${font.familyCode};\n    font-size: 11px;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    cursor: default;\n    transition: transform 0.12s;\n    &:hover,\n    &:focus-visible {\n      z-index: 1;\n      transform: translateY(-6px);\n    }\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n      &:hover,\n      &:focus-visible {\n        transform: none;\n        outline: 2px solid ${HOME.accent};\n        outline-offset: 2px;\n      }\n    }\n    @container (max-width: ${CONTENT_WIDTH - 1}px) {\n      position: static;\n      margin: 0;\n    }\n  `;\n\n  const body = css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas:\n      'blurb'\n      'chart';\n    gap: 20px;\n    ${WIDE} {\n      grid-template-columns: ${CONTENT_WIDTH}px minmax(0, 1fr);\n      grid-template-areas: 'chart blurb';\n      gap: 32px;\n      align-items: center;\n    }\n  `;\n  const blurb = css`\n    grid-area: blurb;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    max-width: 52ch;\n  `;\n  const blurbTitle = css`\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    letter-spacing: -0.01em;\n    line-height: 1.25;\n    text-wrap: balance;\n    color: ${HOME.fg};\n  `;\n  const blurbText = css`\n    margin: 0;\n    font-size: 14px;\n    color: ${HOME.fg2};\n    text-wrap: pretty;\n  `;\n  const chart = css`\n    grid-area: chart;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    min-width: 0;\n  `;\n\n  return (\n    <section\n      aria-labelledby=\"isomer-studio-surfaces\"\n      css={css`\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      `}>\n      <div css={quietLabel}>\n        <span id=\"isomer-studio-surfaces\">One composition, every surface</span>\n      </div>\n      <div css={body}>\n        <div css={blurb}>\n          <h2 css={blurbTitle}>Author once, render anywhere.</h2>\n          <p css={blurbText}>\n            Isomer turns one typed composition into every surface your product\n            speaks: web, Slack, Markdown, images.\n          </p>\n          <p css={blurbText}>\n            Hosts keep their data, authorization and routing. Isomer owns the\n            contract, the primitive catalog, validation and rendering.\n          </p>\n        </div>\n        <div css={chart}>\n          <div\n            ref={stageRef}\n            css={stage}\n            onMouseLeave={() => setNote('')}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) {\n                setNote('');\n              }\n            }}>\n            <div\n              css={pill}\n              tabIndex={0}\n              onMouseEnter={() => setNote(COMPOSITION_NOTE)}\n              onFocus={() => setNote(COMPOSITION_NOTE)}>\n              <IsomerMark size={26} />\n              <span>composition</span>\n            </div>\n            <svg\n              data-surface-connections=\"wide\"\n              css={wires}\n              viewBox=\"0 0 100 100\"\n              preserveAspectRatio=\"none\"\n              aria-hidden={true}>\n              {[\n                [50, HUB_Y, 50, BUS_Y],\n                [first, BUS_Y, last, BUS_Y],\n                ...spots.map((x) => [x, BUS_Y, x, ROW_Y - CARD_HALF]),\n              ].map(([x1, y1, x2, y2], index) => (\n                <line\n                  key={index}\n                  {...{ x1, y1, x2, y2 }}\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1\"\n                  opacity=\"0.55\"\n                  vectorEffect=\"non-scaling-stroke\"\n                />\n              ))}\n            </svg>\n            <svg\n              data-surface-connections=\"wrapped\"\n              css={wrappedWires}\n              opacity=\"0.55\"\n              aria-hidden={true}>\n              {connections.map((d, index) => (\n                <path\n                  key={surfaces[index]}\n                  d={d}\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1\"\n                />\n              ))}\n            </svg>\n            {surfaces.map((surface, index) => {\n              const text = `${surface}: ${SURFACE_NOTES[surface]}`;\n              return (\n                <div\n                  key={surface}\n                  css={card(spots[index] ?? 50)}\n                  tabIndex={0}\n                  aria-label={PREVIEW_LABELS[surface]}\n                  onMouseEnter={() => setNote(text)}\n                  onFocus={() => setNote(text)}>\n                  <EuiIcon type={PREVIEW_ICONS[surface]} size=\"xl\" />\n                  <span>\n                    {surface === 'snapshot'\n                      ? 'snap'\n                      : surface === 'markdown'\n                        ? 'md'\n                        : surface}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n          <div\n            aria-live=\"polite\"\n            css={css`\n              min-height: 20px;\n              text-align: center;\n              font-size: 12.5px;\n              color: ${HOME.fg2};\n              text-wrap: pretty;\n            `}>\n            {note}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n"]}

package/dist/home/tokens.d.ts

@@ -0,0 +1,49 @@
+/** Home's own palette: one dark look on the plum shell, whatever the color mode. */
+export declare const HOME: {
+    readonly shell: "#3E3748";
+    readonly fg: "#FFFFFF";
+    readonly fg2: "rgba(255, 255, 255, 0.72)";
+    readonly fg3: "rgba(255, 255, 255, 0.55)";
+    readonly surface1: "rgba(255, 255, 255, 0.05)";
+    readonly surface2: "rgba(255, 255, 255, 0.07)";
+    readonly surface3: "rgba(255, 255, 255, 0.11)";
+    readonly field: "rgba(22, 12, 30, 0.5)";
+    readonly line1: "rgba(255, 255, 255, 0.12)";
+    readonly line2: "rgba(255, 255, 255, 0.14)";
+    readonly line3: "rgba(255, 255, 255, 0.18)";
+    readonly accent: "#F78BBB";
+    readonly accentBorder: "#F04E98";
+    readonly docs: "#1BA9F5";
+    readonly dev: "#00BFB3";
+    readonly app: "#FEC514";
+    readonly actionSurface: "#302938";
+    readonly actionSurfaceHover: "#382F40";
+};
+/** The glows behind the shell: the same stops as Workbench and Reference, in the logo's palette. */
+export declare const homeBackground: import("@emotion/react").SerializedStyles;
+export declare const CONTENT_WIDTH = 620;
+export declare const HOME_NARROW = "@container isomer-home (max-width: 619px)";
+export declare const WIDE_CONTENT_WIDTH = 880;
+export declare const PANEL_WIDTH = 360;
+export declare const GUTTER = 48;
+/** Where the main column fits {@link WIDE_CONTENT_WIDTH} beside the panel. */
+export declare const WIDE = "@media (min-width: 1400px)";
+/** Tiles per row, set on the main column and read by every tile grid inside it. */
+export declare const TILE_COLUMNS = "--isomer-studio-tile-columns";
+export declare const sectionLabel: import("@emotion/react").SerializedStyles;
+export declare const sectionHeading: import("@emotion/react").SerializedStyles;
+export declare const quietLabel: import("@emotion/react").SerializedStyles;
+/** A tile's chrome. Rows line up across a grid through subgrid, so a wrapped title shifts its neighbours too. */
+export declare const tile: (rows: number) => import("@emotion/react").SerializedStyles;
+/** Opaque plum keeps the logo-colored actions readable over the shell's glows. */
+export declare const actionCard: import("@emotion/react").SerializedStyles;
+export declare const tileTop: import("@emotion/react").SerializedStyles;
+export declare const tileName: import("@emotion/react").SerializedStyles;
+export declare const tileDescription: import("@emotion/react").SerializedStyles;
+/** The bottom row of links, shown on hover or focus; always shown where there is no hover. */
+export declare const tileActions: import("@emotion/react").SerializedStyles;
+/** A dashed tile that points somewhere else: the gallery, or the docs on adding an app. */
+export declare const helpTile: (rows: number, color: string) => import("@emotion/react").SerializedStyles;
+export declare const tilesGrid: import("@emotion/react").SerializedStyles;
+export declare const monoFont: (familyCode: string) => import("@emotion/react").SerializedStyles;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/home/tokens.ts"],"names":[],"mappings":"AAWA,oFAAoF;AACpF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAmBP,CAAC;AAEX,oGAAoG;AACpG,eAAO,MAAM,cAAc,2CAU1B,CAAC;AAEF,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,WAAW,8CAA+D,CAAC;AACxF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,MAAM,KAAK,CAAC;AAEzB,8EAA8E;AAC9E,eAAO,MAAM,IAAI,+BAAgF,CAAC;AAElG,mFAAmF;AACnF,eAAO,MAAM,YAAY,iCAAiC,CAAC;AAE3D,eAAO,MAAM,YAAY,2CAQxB,CAAC;AAEF,eAAO,MAAM,cAAc,2CAG1B,CAAC;AAEF,eAAO,MAAM,UAAU,2CAOtB,CAAC;AAEF,iHAAiH;AACjH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,8CAqBhC,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,UAAU,2CAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,2CAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAIpB,CAAC;AAEF,eAAO,MAAM,eAAe,2CAI3B,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,WAAW,2CAsBvB,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,8CAenD,CAAC;AAEF,eAAO,MAAM,SAAS,2CAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,YAAY,MAAM,8CAE1C,CAAC"}