@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/home/apps_section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps_section.js","sourceRoot":"","sources":["../../src/home/apps_section.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAC;AAElB,MAAM,OAAO,GAAG,CAAC,EACf,GAAG,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,GAGtC,EAAE,EAAE,CAAC,CACJ,aACE,IAAI,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAC3C,GAAG,EAAE;QACH,IAAI,CAAC,CAAC,CAAC;QACP,GAAG,CAAA;;;0BAGiB,IAAI,CAAC,GAAG;;OAE3B;KACF,iBACW,UAAU,aACtB,gBAAM,GAAG,EAAE,OAAO,aAChB,eACE,GAAG,EAAE;wBACH,QAAQ;wBACR,GAAG,CAAA;qBACQ,IAAI,CAAC,GAAG;WAClB;qBACF,YACA,KAAK,GACD,EACP,eACE,GAAG,EAAE,GAAG,CAAA;mBACG,IAAI,CAAC,GAAG;;SAElB,YACD,KAAC,KAAK,IAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,GAC5C,IACF,EACP,eAAM,GAAG,EAAE,eAAe,YAAG,WAAW,IAAI,SAAS,KAAK,GAAG,GAAQ,EACrE,eAAM,GAAG,EAAE,WAAW,YACpB,eACE,GAAG,EAAE,GAAG,CAAA;mBACG,IAAI,CAAC,GAAG;SAClB,4BAEI,GACF,IACL,CACL,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE,CAAC,CACpD,aACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,UAAU,EACd,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBACd,cAAc,aAC1B,eACE,GAAG,EAAE;gBACH,QAAQ;gBACR,GAAG,CAAA;mBACQ,IAAI,CAAC,EAAE;SACjB;aACF,YACA,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,8BAA8B,GAC1D,EACP,eAAM,GAAG,EAAE,eAAe,YACvB,KAAK;gBACJ,CAAC,CAAC,gJAAgJ;gBAClJ,CAAC,CAAC,iFAAiF,GAChF,EACP,eACE,GAAG,EAAE,GAAG,CAAA;;;iBAGG,IAAI,CAAC,GAAG;OAClB,4CAEI,IACL,CACL,CAAC;AAEF,wGAAwG;AACxG,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAkC,EAAE,EAAE,CAAC,CACvE,sCACkB,4BAA4B,EAC5C,GAAG,EAAE,GAAG,CAAA;;;;KAIP,aACD,cAAK,GAAG,EAAE,YAAY,YACpB,aAAI,EAAE,EAAC,4BAA4B,EAAC,GAAG,EAAE,cAAc,6BAElD,GACD,EACN,eAAK,GAAG,EAAE,SAAS,aAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,KAAC,OAAO,IAAoB,GAAG,IAAjB,GAAG,CAAC,EAAE,CAAiB,CACtC,CAAC,EACF,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAI,IACpC,IACE,CACX,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 { css } from '@emotion/react';\n\nimport { Glyph } from '../chrome/primitive_glyph';\nimport { formatLocation } from '../chrome/route';\nimport type { StudioApp } from '../config';\n\nimport { APPS_DOCS_URL } from './links';\nimport {\n  helpTile,\n  HOME,\n  sectionHeading,\n  sectionLabel,\n  tile,\n  tileActions,\n  tileDescription,\n  tileName,\n  tilesGrid,\n  tileTop,\n} from './tokens';\n\nconst AppTile = ({\n  app: { id, title, description, icon },\n}: {\n  app: StudioApp;\n}) => (\n  <a\n    href={formatLocation({ app: id, path: '' })}\n    css={[\n      tile(3),\n      css`\n        &:hover,\n        &:focus-within {\n          border-color: ${HOME.app};\n        }\n      `,\n    ]}\n    data-testid=\"home-app\">\n    <span css={tileTop}>\n      <span\n        css={[\n          tileName,\n          css`\n            color: ${HOME.app};\n          `,\n        ]}>\n        {title}\n      </span>\n      <span\n        css={css`\n          color: ${HOME.app};\n          margin-top: 1px;\n        `}>\n        <Glyph svg={icon?.svg} label={title} size={18} />\n      </span>\n    </span>\n    <span css={tileDescription}>{description ?? `Opens ${title}.`}</span>\n    <span css={tileActions}>\n      <span\n        css={css`\n          color: ${HOME.app};\n        `}>\n        Open →\n      </span>\n    </span>\n  </a>\n);\n\nconst AddAppTile = ({ empty }: { empty: boolean }) => (\n  <a\n    href={APPS_DOCS_URL}\n    target=\"_blank\"\n    rel=\"noopener\"\n    css={helpTile(3, HOME.app)}\n    data-testid=\"home-add-app\">\n    <span\n      css={[\n        tileName,\n        css`\n          color: ${HOME.fg};\n        `,\n      ]}>\n      {empty ? 'No applications yet' : 'How do I add an application?'}\n    </span>\n    <span css={tileDescription}>\n      {empty\n        ? '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.'\n        : 'A page of the Studio that demonstrates the pack, declared in the config’s apps.'}\n    </span>\n    <span\n      css={css`\n        font-size: 12px;\n        font-weight: 600;\n        color: ${HOME.app};\n      `}>\n      Read the config docs ↗\n    </span>\n  </a>\n);\n\n/** One tile per configured app, then how to add one; with none, only the latter, as the empty state. */\nexport const AppsSection = ({ apps }: { apps: readonly StudioApp[] }) => (\n  <section\n    aria-labelledby=\"isomer-studio-applications\"\n    css={css`\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    `}>\n    <div css={sectionLabel}>\n      <h2 id=\"isomer-studio-applications\" css={sectionHeading}>\n        Applications\n      </h2>\n    </div>\n    <div css={tilesGrid}>\n      {apps.map((app) => (\n        <AppTile key={app.id} {...{ app }} />\n      ))}\n      <AddAppTile empty={apps.length === 0} />\n    </div>\n  </section>\n);\n"]}

package/dist/home/featured_strip.d.ts

@@ -0,0 +1,12 @@
+import type { PrimitiveDoc } from '../model/describe_runtime.js';
+export interface FeaturedStripProps {
+    featured: readonly PrimitiveDoc[];
+    /** How many primitives the runtime has, for the closing tile. */
+    total: number;
+}
+/**
+ * The featured primitives in a recessed well, a row at a time, paged by the buttons or scrolled, ending on
+ * a tile that opens the gallery.
+ */
+export declare const FeaturedStrip: ({ featured, total }: FeaturedStripProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=featured_strip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"featured_strip.d.ts","sourceRoot":"","sources":["../../src/home/featured_strip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAoB9D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AA8DD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,qBAAqB,kBAAkB,qDA4LpE,CAAC"}

package/dist/home/featured_strip.js

@@ -0,0 +1,176 @@
+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 { useCallback, useEffect, useRef, useState } from 'react';
+import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PrimitiveGlyph } from '../chrome/primitive_glyph.js';
+import { formatRoute, GALLERY } from '../chrome/route.js';
+import { actionCard, helpTile, HOME, HOME_NARROW, sectionHeading, sectionLabel, tile, TILE_COLUMNS, tileActions, tileDescription, tileName, tileTop, } from './tokens.js';
+const GAP = 12;
+const STACKED_PAGE_SIZE = 3;
+const PrimitiveTile = ({ doc }) => {
+    const { euiTheme: { font }, } = useEuiTheme();
+    const { type, label, group, purpose } = doc;
+    return (_jsxs("div", { css: [
+            tile(4),
+            actionCard,
+            css `
+          scroll-snap-align: start;
+          &:hover,
+          &:focus-within {
+            border-color: rgba(240, 78, 152, 0.75);
+          }
+          cursor: default;
+        `,
+        ], "data-testid": "featured-primitive", children: [_jsxs("span", { css: tileTop, children: [_jsx("span", { css: tileName, children: label }), _jsx("span", { css: css `
+            color: ${HOME.accent};
+            margin-top: 1px;
+          `, children: _jsx(PrimitiveGlyph, { type, size: 18 }) })] }), _jsx("span", { css: css `
+          font-family: ${font.familyCode};
+          font-size: 11px;
+          color: ${HOME.fg};
+        `, children: group }), _jsx("span", { css: tileDescription, children: purpose }), _jsxs("span", { css: tileActions, children: [_jsx("a", { href: formatRoute({ mode: 'docs', page: type, example: 0 }), css: css `
+            color: ${HOME.docs};
+            cursor: pointer;
+          `, children: "Reference \u2192" }), _jsx("a", { href: formatRoute({ mode: 'dev', page: type, example: 0 }), css: css `
+            color: ${HOME.dev};
+          `, children: "Workbench \u2192" })] })] }));
+};
+/**
+ * The featured primitives in a recessed well, a row at a time, paged by the buttons or scrolled, ending on
+ * a tile that opens the gallery.
+ */
+export const FeaturedStrip = ({ featured, total }) => {
+    const strip = useRef(null);
+    const [edges, setEdges] = useState({ start: true, end: true });
+    const [stacked, setStacked] = useState(false);
+    const [stackedPage, setStackedPage] = useState(0);
+    const lastStackedPage = Math.floor(featured.length / STACKED_PAGE_SIZE);
+    const currentStackedPage = Math.min(stackedPage, lastStackedPage);
+    const firstStackedTile = currentStackedPage * STACKED_PAGE_SIZE;
+    const sync = useCallback(() => {
+        const element = strip.current;
+        if (!element) {
+            return;
+        }
+        setStacked(getComputedStyle(element).gridAutoFlow === 'row');
+        setEdges({
+            start: element.scrollLeft <= 1,
+            end: element.scrollLeft + element.clientWidth >= element.scrollWidth - 1,
+        });
+    }, []);
+    useEffect(() => {
+        sync();
+        const element = strip.current;
+        const observer = typeof ResizeObserver === 'undefined'
+            ? undefined
+            : new ResizeObserver(sync);
+        if (element) {
+            observer?.observe(element);
+        }
+        window.addEventListener('resize', sync);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', sync);
+        };
+    }, [sync, featured]);
+    const page = (direction) => {
+        if (stacked) {
+            setStackedPage(Math.max(0, Math.min(currentStackedPage + direction, lastStackedPage)));
+            return;
+        }
+        const element = strip.current;
+        const first = element?.firstElementChild;
+        if (!element || !first) {
+            return;
+        }
+        const step = first.getBoundingClientRect().width + GAP;
+        const perPage = Math.max(1, Math.round((element.clientWidth + GAP) / step));
+        element.scrollBy({
+            left: direction * step * perPage,
+            behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches
+                ? 'instant'
+                : 'smooth',
+        });
+    };
+    const well = css `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px 16px 16px;
+    margin-inline: -16px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.18);
+    box-shadow:
+      inset 0 1px 0 rgba(0, 0, 0, 0.25),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+  `;
+    const pager = css `
+    background-color: ${HOME.surface3};
+    border-color: ${HOME.line3};
+    color: ${HOME.fg};
+    &:disabled {
+      background-color: ${HOME.surface1};
+      border-color: ${HOME.line1};
+      color: ${HOME.fg3};
+    }
+  `;
+    const tiles = css `
+    display: grid;
+    grid-template-rows: repeat(4, auto);
+    grid-auto-flow: column;
+    grid-auto-columns: calc(
+      (100% - ${GAP}px * (var(${TILE_COLUMNS}, 3) - 1)) /
+        var(${TILE_COLUMNS}, 3)
+    );
+    gap: ${GAP}px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    padding: 3px;
+    margin: -3px;
+    scroll-padding: 3px;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    ${HOME_NARROW} {
+      grid-auto-flow: row;
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: none;
+      grid-auto-columns: auto;
+      overflow-x: visible;
+      scroll-snap-type: none;
+      > :nth-child(-n + ${firstStackedTile}),
+      > :nth-child(n + ${firstStackedTile + STACKED_PAGE_SIZE + 1}) {
+        display: none;
+      }
+    }
+  `;
+    return (_jsxs("section", { css: well, "aria-labelledby": "isomer-studio-featured", children: [_jsxs("div", { css: sectionLabel, children: [_jsx("h2", { id: "isomer-studio-featured", css: sectionHeading, children: "Featured primitives" }), _jsxs("span", { css: css `
+            display: flex;
+            gap: 6px;
+          `, children: [_jsx(EuiButtonIcon, { iconType: "chevronSingleLeft", size: "xs", color: "text", display: "base", css: pager, "aria-label": "Previous primitives", isDisabled: stacked ? currentStackedPage === 0 : edges.start, onClick: () => page(-1) }), _jsx(EuiButtonIcon, { iconType: "chevronSingleRight", size: "xs", color: "text", display: "base", css: pager, "aria-label": "Next primitives", isDisabled: stacked ? currentStackedPage === lastStackedPage : edges.end, onClick: () => page(1) })] })] }), _jsxs("div", { ref: strip, css: tiles, onScroll: sync, children: [featured.map((doc) => (_jsx(PrimitiveTile, { doc }, doc.type))), _jsxs("a", { href: formatRoute({ mode: 'docs', page: GALLERY, example: 0 }), css: [
+                            helpTile(4, HOME.docs),
+                            actionCard,
+                            css `
+              scroll-snap-align: start;
+            `,
+                        ], children: [_jsx("span", { css: css `
+              font-size: 28px;
+              font-weight: 600;
+              line-height: 1;
+              color: ${HOME.fg};
+              font-variant-numeric: tabular-nums;
+            `, children: total }), _jsxs("span", { css: tileDescription, children: [total === 1 ? 'primitive' : 'primitives', " in this Studio"] }), _jsx("span", { css: css `
+              font-size: 12px;
+              font-weight: 600;
+              color: ${HOME.docs};
+            `, children: "Open the gallery \u2192" })] })] })] }));
+};
+//# sourceMappingURL=featured_strip.js.map

package/dist/home/featured_strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured_strip.js","sourceRoot":"","sources":["../../src/home/featured_strip.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { EuiButtonIcon, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { PrimitiveGlyph } from '../chrome/primitive_glyph';\nimport { formatRoute, GALLERY } from '../chrome/route';\nimport type { PrimitiveDoc } from '../model/describe_runtime';\n\nimport {\n  actionCard,\n  helpTile,\n  HOME,\n  HOME_NARROW,\n  sectionHeading,\n  sectionLabel,\n  tile,\n  TILE_COLUMNS,\n  tileActions,\n  tileDescription,\n  tileName,\n  tileTop,\n} from './tokens';\n\nconst GAP = 12;\nconst STACKED_PAGE_SIZE = 3;\n\nexport interface FeaturedStripProps {\n  featured: readonly PrimitiveDoc[];\n  /** How many primitives the runtime has, for the closing tile. */\n  total: number;\n}\n\nconst PrimitiveTile = ({ doc }: { doc: PrimitiveDoc }) => {\n  const {\n    euiTheme: { font },\n  } = useEuiTheme();\n  const { type, label, group, purpose } = doc;\n  return (\n    <div\n      css={[\n        tile(4),\n        actionCard,\n        css`\n          scroll-snap-align: start;\n          &:hover,\n          &:focus-within {\n            border-color: rgba(240, 78, 152, 0.75);\n          }\n          cursor: default;\n        `,\n      ]}\n      data-testid=\"featured-primitive\">\n      <span css={tileTop}>\n        <span css={tileName}>{label}</span>\n        <span\n          css={css`\n            color: ${HOME.accent};\n            margin-top: 1px;\n          `}>\n          <PrimitiveGlyph {...{ type }} size={18} />\n        </span>\n      </span>\n      <span\n        css={css`\n          font-family: ${font.familyCode};\n          font-size: 11px;\n          color: ${HOME.fg};\n        `}>\n        {group}\n      </span>\n      <span css={tileDescription}>{purpose}</span>\n      <span css={tileActions}>\n        <a\n          href={formatRoute({ mode: 'docs', page: type, example: 0 })}\n          css={css`\n            color: ${HOME.docs};\n            cursor: pointer;\n          `}>\n          Reference →\n        </a>\n        <a\n          href={formatRoute({ mode: 'dev', page: type, example: 0 })}\n          css={css`\n            color: ${HOME.dev};\n          `}>\n          Workbench →\n        </a>\n      </span>\n    </div>\n  );\n};\n\n/**\n * The featured primitives in a recessed well, a row at a time, paged by the buttons or scrolled, ending on\n * a tile that opens the gallery.\n */\nexport const FeaturedStrip = ({ featured, total }: FeaturedStripProps) => {\n  const strip = useRef<HTMLDivElement>(null);\n  const [edges, setEdges] = useState({ start: true, end: true });\n  const [stacked, setStacked] = useState(false);\n  const [stackedPage, setStackedPage] = useState(0);\n  const lastStackedPage = Math.floor(featured.length / STACKED_PAGE_SIZE);\n  const currentStackedPage = Math.min(stackedPage, lastStackedPage);\n  const firstStackedTile = currentStackedPage * STACKED_PAGE_SIZE;\n\n  const sync = useCallback(() => {\n    const element = strip.current;\n    if (!element) {\n      return;\n    }\n    setStacked(getComputedStyle(element).gridAutoFlow === 'row');\n    setEdges({\n      start: element.scrollLeft <= 1,\n      end: element.scrollLeft + element.clientWidth >= element.scrollWidth - 1,\n    });\n  }, []);\n\n  useEffect(() => {\n    sync();\n    const element = strip.current;\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? undefined\n        : new ResizeObserver(sync);\n    if (element) {\n      observer?.observe(element);\n    }\n    window.addEventListener('resize', sync);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', sync);\n    };\n  }, [sync, featured]);\n\n  const page = (direction: -1 | 1) => {\n    if (stacked) {\n      setStackedPage(\n        Math.max(0, Math.min(currentStackedPage + direction, lastStackedPage))\n      );\n      return;\n    }\n    const element = strip.current;\n    const first = element?.firstElementChild;\n    if (!element || !first) {\n      return;\n    }\n    const step = first.getBoundingClientRect().width + GAP;\n    const perPage = Math.max(1, Math.round((element.clientWidth + GAP) / step));\n    element.scrollBy({\n      left: direction * step * perPage,\n      behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches\n        ? 'instant'\n        : 'smooth',\n    });\n  };\n\n  const well = css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    padding: 14px 16px 16px;\n    margin-inline: -16px;\n    border-radius: 12px;\n    box-sizing: border-box;\n    background: rgba(0, 0, 0, 0.18);\n    box-shadow:\n      inset 0 1px 0 rgba(0, 0, 0, 0.25),\n      inset 0 0 0 1px rgba(255, 255, 255, 0.06);\n  `;\n  const pager = css`\n    background-color: ${HOME.surface3};\n    border-color: ${HOME.line3};\n    color: ${HOME.fg};\n    &:disabled {\n      background-color: ${HOME.surface1};\n      border-color: ${HOME.line1};\n      color: ${HOME.fg3};\n    }\n  `;\n  const tiles = css`\n    display: grid;\n    grid-template-rows: repeat(4, auto);\n    grid-auto-flow: column;\n    grid-auto-columns: calc(\n      (100% - ${GAP}px * (var(${TILE_COLUMNS}, 3) - 1)) /\n        var(${TILE_COLUMNS}, 3)\n    );\n    gap: ${GAP}px;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n    padding: 3px;\n    margin: -3px;\n    scroll-padding: 3px;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    ${HOME_NARROW} {\n      grid-auto-flow: row;\n      grid-template-columns: minmax(0, 1fr);\n      grid-template-rows: none;\n      grid-auto-columns: auto;\n      overflow-x: visible;\n      scroll-snap-type: none;\n      > :nth-child(-n + ${firstStackedTile}),\n      > :nth-child(n + ${firstStackedTile + STACKED_PAGE_SIZE + 1}) {\n        display: none;\n      }\n    }\n  `;\n\n  return (\n    <section css={well} aria-labelledby=\"isomer-studio-featured\">\n      <div css={sectionLabel}>\n        <h2 id=\"isomer-studio-featured\" css={sectionHeading}>\n          Featured primitives\n        </h2>\n        <span\n          css={css`\n            display: flex;\n            gap: 6px;\n          `}>\n          <EuiButtonIcon\n            iconType=\"chevronSingleLeft\"\n            size=\"xs\"\n            color=\"text\"\n            display=\"base\"\n            css={pager}\n            aria-label=\"Previous primitives\"\n            isDisabled={stacked ? currentStackedPage === 0 : edges.start}\n            onClick={() => page(-1)}\n          />\n          <EuiButtonIcon\n            iconType=\"chevronSingleRight\"\n            size=\"xs\"\n            color=\"text\"\n            display=\"base\"\n            css={pager}\n            aria-label=\"Next primitives\"\n            isDisabled={\n              stacked ? currentStackedPage === lastStackedPage : edges.end\n            }\n            onClick={() => page(1)}\n          />\n        </span>\n      </div>\n      <div ref={strip} css={tiles} onScroll={sync}>\n        {featured.map((doc) => (\n          <PrimitiveTile key={doc.type} {...{ doc }} />\n        ))}\n        <a\n          href={formatRoute({ mode: 'docs', page: GALLERY, example: 0 })}\n          css={[\n            helpTile(4, HOME.docs),\n            actionCard,\n            css`\n              scroll-snap-align: start;\n            `,\n          ]}>\n          <span\n            css={css`\n              font-size: 28px;\n              font-weight: 600;\n              line-height: 1;\n              color: ${HOME.fg};\n              font-variant-numeric: tabular-nums;\n            `}>\n            {total}\n          </span>\n          <span css={tileDescription}>\n            {total === 1 ? 'primitive' : 'primitives'} in this Studio\n          </span>\n          <span\n            css={css`\n              font-size: 12px;\n              font-weight: 600;\n              color: ${HOME.docs};\n            `}>\n            Open the gallery →\n          </span>\n        </a>\n      </div>\n    </section>\n  );\n};\n"]}

package/dist/home/home_view.d.ts

@@ -0,0 +1,11 @@
+import type { StudioRouter } from '../chrome/route.js';
+export interface HomeViewProps {
+    title: string;
+    router: Pick<StudioRouter, 'route' | 'navigate'>;
+    /** The config's `featured`; without it Home draws at random. */
+    featured?: readonly string[] | undefined;
+    configProblems?: readonly string[] | undefined;
+}
+/** The landing page: search, featured primitives, apps, where to go next, and what the runtime loaded. */
+export declare const HomeView: ({ title, router: { route, navigate }, featured: featuredTypes, configProblems, }: HomeViewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=home_view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home_view.d.ts","sourceRoot":"","sources":["../../src/home/home_view.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAyBpD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;IACjD,gEAAgE;IAChE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACzC,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;CAChD;AAmGD,0GAA0G;AAC1G,eAAO,MAAM,QAAQ,GAAI,kFAKtB,aAAa,qDAoVf,CAAC"}

package/dist/home/home_view.js

@@ -0,0 +1,261 @@
+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 } from 'react';
+import { EuiCallOut, EuiIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PrimitiveGlyph } from '../chrome/primitive_glyph.js';
+import { PrimitiveSearch } from '../chrome/primitive_search.js';
+import { formatRoute, GALLERY } from '../chrome/route.js';
+import { pickFeatured } from '../model/featured.js';
+import { useStudio } from '../studio_context.js';
+import { previewSurfaces } from '../surfaces/surface_select.js';
+import { AppsSection } from './apps_section.js';
+import { FeaturedStrip } from './featured_strip.js';
+import { DOCS_URL, LICENSE_URL, REPO_URL } from './links.js';
+import { LoadedPanel } from './loaded_panel.js';
+import { SurfaceChart } from './surface_chart.js';
+import { actionCard, CONTENT_WIDTH, GUTTER, HOME, HOME_NARROW, PANEL_WIDTH, sectionHeading, sectionLabel, TILE_COLUMNS, WIDE, WIDE_CONTENT_WIDTH, } from './tokens.js';
+const Door = ({ href, external = false, color, tag, title, children, action, }) => (_jsxs("a", { href: href, ...(external ? { target: '_blank', rel: 'noopener' } : {}), css: css `
+      ${actionCard};
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: span 3;
+      row-gap: 5px;
+      padding: 14px 16px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      min-height: 96px;
+      border: 1px solid ${HOME.line2};
+      color: ${HOME.fg2};
+      text-decoration: none;
+      transition:
+        background 0.12s,
+        border-color 0.12s;
+      &:hover,
+      &:focus-visible {
+        border-color: ${color};
+        text-decoration: none;
+      }
+      &:hover .isomer-studio-door-action {
+        text-decoration: underline;
+      }
+    `, children: [_jsxs("span", { css: css `
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 8px;
+      `, children: [_jsx("b", { css: css `
+          font-size: 15px;
+          font-weight: 600;
+          color: ${HOME.fg};
+        `, children: title }), _jsx("span", { css: css `
+          margin-top: 3px;
+          font-size: 11px;
+          font-weight: 500;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+          padding: 2px 7px;
+          border-radius: 999px;
+          border: 1px solid ${color};
+          color: ${color};
+          white-space: nowrap;
+        `, children: tag })] }), _jsx("span", { css: css `
+        font-size: 12.5px;
+        text-wrap: pretty;
+      `, children: children }), _jsx("span", { className: "isomer-studio-door-action", css: css `
+        margin-top: auto;
+        padding-top: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${color};
+      `, children: action })] }));
+/** The landing page: search, featured primitives, apps, where to go next, and what the runtime loaded. */
+export const HomeView = ({ title, router: { route, navigate }, featured: featuredTypes, configProblems = [], }) => {
+    const { euiTheme: { font }, } = useEuiTheme();
+    const { docs: { primitives, groups, surfaces: supported }, rasterizePng, apps, } = useStudio();
+    const featured = useMemo(() => pickFeatured(primitives, featuredTypes), [primitives, featuredTypes]);
+    const surfaces = previewSurfaces(supported, Boolean(rasterizePng));
+    const first = groups[0]?.types[0] ?? primitives[0]?.type ?? '';
+    const year = new Date().getFullYear();
+    const page = css `
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    color: ${HOME.fg2};
+    font-size: 14px;
+    line-height: 1.5;
+    a:focus-visible,
+    button:focus-visible {
+      outline: 2px solid ${HOME.fg};
+      outline-offset: 2px;
+    }
+  `;
+    const columns = css `
+    flex: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) ${PANEL_WIDTH}px;
+    width: 100%;
+    max-width: ${WIDE_CONTENT_WIDTH + 5 * GUTTER + PANEL_WIDTH}px;
+    margin-inline: auto;
+    @media (max-width: 900px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  `;
+    const main = css `
+    min-width: 0;
+    padding: 20px ${GUTTER}px 48px;
+    @media (max-width: 900px) {
+      padding-inline: 16px;
+    }
+  `;
+    const content = css `
+    container: isomer-home / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    max-width: ${CONTENT_WIDTH}px;
+    margin-inline: auto;
+    ${WIDE} {
+      max-width: ${WIDE_CONTENT_WIDTH}px;
+      ${TILE_COLUMNS}: 4;
+    }
+  `;
+    const aside = css `
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    border-left: 1px solid ${HOME.line1};
+    border-image: linear-gradient(
+        to bottom,
+        transparent,
+        ${HOME.line1} 70px,
+        ${HOME.line1} calc(100% - 70px),
+        transparent
+      )
+      1;
+    padding: 44px ${GUTTER}px 32px 32px;
+    @media (max-width: 900px) {
+      border-image: none;
+      border-left: 0;
+      border-top: 1px solid ${HOME.line1};
+      padding-inline: 16px;
+    }
+  `;
+    const chips = css `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: -8px;
+  `;
+    const chip = css `
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 6px 12px 6px 10px;
+    border-radius: 999px;
+    border: 1px solid ${HOME.line2};
+    background: ${HOME.surface1};
+    font-size: 13px;
+    font-weight: 500;
+    color: ${HOME.fg};
+    text-decoration: none;
+    &:hover,
+    &:focus-visible {
+      background: ${HOME.surface3};
+      border-color: ${HOME.docs};
+      text-decoration: none;
+    }
+  `;
+    const footer = css `
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px 24px;
+    font-size: 12px;
+    color: ${HOME.fg3};
+    padding: 14px ${GUTTER}px;
+    a {
+      color: ${HOME.fg2};
+      text-decoration: none;
+    }
+    a:hover {
+      color: ${HOME.fg};
+      text-decoration: underline;
+    }
+    @media (max-width: 900px) {
+      padding-inline: 16px;
+    }
+  `;
+    return (_jsxs("div", { css: page, "data-testid": "home", children: [configProblems.length ? (_jsx(EuiCallOut, { announceOnMount: true, color: "danger", iconType: "error", title: "The config is invalid; the Studio keeps the last valid one", children: _jsx("ul", { children: configProblems.map((problem) => (_jsx("li", { children: problem }, problem))) }) })) : null, _jsxs("div", { css: columns, children: [_jsx("main", { css: main, children: _jsxs("div", { css: content, children: [_jsxs("div", { css: css `
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+              `, children: [_jsxs("div", { css: css `
+                  font-family: ${font.familyCode};
+                  font-size: 12px;
+                  color: ${HOME.accent};
+                `, children: ["isomer", ' ', _jsx("span", { css: css `
+                    color: ${HOME.fg3};
+                  `, children: "n." }), ' ', "one formula, many forms"] }), _jsx("h1", { css: css `
+                  margin: 0;
+                  font-size: 44px;
+                  font-weight: 600;
+                  letter-spacing: -0.025em;
+                  line-height: 1.05;
+                  color: ${HOME.fg};
+                  text-wrap: balance;
+                  @media (max-width: 900px) {
+                    font-size: 32px;
+                  }
+                `, children: "What are we rendering today?" }), _jsx("p", { css: css `
+                  margin: 0;
+                  font-size: 16px;
+                  text-wrap: pretty;
+                `, children: "Isomer Studio is a workbench for primitives, primitive packs, compositions, views, tools, and applications built on Isomer." })] }), _jsx(PrimitiveSearch, { size: "large", placeholder: "Search primitives by name, purpose or prop", onSelectPrimitive: (type) => navigate({ mode: route.mode, page: type, example: 0 }) }), groups.length ? (_jsx("nav", { "aria-label": "Primitive categories", css: chips, children: groups.map(({ title: group, types }) => (_jsxs("a", { href: formatRoute({
+                                            mode: 'docs',
+                                            page: GALLERY,
+                                            example: 0,
+                                            group,
+                                        }), css: chip, children: [types[0] ? (_jsx("span", { css: css `
+                          color: ${HOME.fg2};
+                        `, children: _jsx(PrimitiveGlyph, { type: types[0], size: 16 }) })) : null, group, _jsx("span", { css: css `
+                        font-family: ${font.familyCode};
+                        font-size: 11px;
+                        color: ${HOME.fg3};
+                      `, children: types.length })] }, group))) })) : null, _jsx(FeaturedStrip, { featured, total: primitives.length }), _jsx(AppsSection, { apps }), _jsxs("section", { "aria-labelledby": "isomer-studio-learn", css: css `
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+              `, children: [_jsx("div", { css: sectionLabel, children: _jsx("h2", { id: "isomer-studio-learn", css: sectionHeading, children: "Learn more about Isomer" }) }), _jsxs("div", { css: css `
+                  display: grid;
+                  grid-template-columns: repeat(3, minmax(0, 1fr));
+                  gap: 12px;
+                  ${HOME_NARROW} {
+                    grid-template-columns: minmax(0, 1fr);
+                  }
+                `, children: [_jsx(Door, { href: formatRoute({
+                                                        mode: 'docs',
+                                                        page: GALLERY,
+                                                        example: 0,
+                                                    }), color: HOME.docs, tag: "Reference", title: "Understand primitives", action: "Browse reference \u2192", children: "Every primitive in the pack, with its purpose, props and examples." }), _jsx(Door, { href: formatRoute({ mode: 'dev', page: first, example: 0 }), color: HOME.dev, tag: "Workbench", title: "Experiment and edit", action: "Open the workbench \u2192", children: "Edit a composition and watch it render on every surface the runtime has." }), _jsx(Door, { href: DOCS_URL, external: true, color: HOME.accent, tag: "Guide", title: "Learn how Isomer works", action: "Read the docs \u2197", children: "The composition contract, packs, surfaces and the agent tools." })] })] }), _jsx(SurfaceChart, { surfaces })] }) }), _jsx("aside", { css: aside, children: _jsx(LoadedPanel, { surfaces }) })] }), _jsxs("footer", { css: footer, children: [_jsxs("span", { css: css `
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: ${HOME.fg};
+            font-weight: 500;
+          `, children: [_jsx(EuiIcon, { type: "logoElastic", color: "ghost", size: "m" }), "Built by Elastic"] }), _jsxs("span", { css: css `
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px 18px;
+          `, children: [_jsx("a", { href: REPO_URL, target: "_blank", rel: "noopener", children: "github.com/elastic/isomer \u2197" }), _jsx("a", { href: DOCS_URL, target: "_blank", rel: "noopener", children: "Docs \u2197" }), _jsx("a", { href: LICENSE_URL, target: "_blank", rel: "noopener", children: "Elastic License 2.0" })] }), _jsxs("small", { children: ["\u00A9 ", year, " Elasticsearch B.V. \u00B7 ", title] })] })] }));
+};
+//# sourceMappingURL=home_view.js.map

package/dist/home/home_view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"home_view.js","sourceRoot":"","sources":["../../src/home/home_view.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useMemo } from 'react';\nimport { EuiCallOut, EuiIcon, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { PrimitiveGlyph } from '../chrome/primitive_glyph';\nimport { PrimitiveSearch } from '../chrome/primitive_search';\nimport type { StudioRouter } from '../chrome/route';\nimport { formatRoute, GALLERY } from '../chrome/route';\nimport { pickFeatured } from '../model/featured';\nimport { useStudio } from '../studio_context';\nimport { previewSurfaces } from '../surfaces/surface_select';\n\nimport { AppsSection } from './apps_section';\nimport { FeaturedStrip } from './featured_strip';\nimport { DOCS_URL, LICENSE_URL, REPO_URL } from './links';\nimport { LoadedPanel } from './loaded_panel';\nimport { SurfaceChart } from './surface_chart';\nimport {\n  actionCard,\n  CONTENT_WIDTH,\n  GUTTER,\n  HOME,\n  HOME_NARROW,\n  PANEL_WIDTH,\n  sectionHeading,\n  sectionLabel,\n  TILE_COLUMNS,\n  WIDE,\n  WIDE_CONTENT_WIDTH,\n} from './tokens';\n\nexport interface HomeViewProps {\n  title: string;\n  router: Pick<StudioRouter, 'route' | 'navigate'>;\n  /** The config's `featured`; without it Home draws at random. */\n  featured?: readonly string[] | undefined;\n  configProblems?: readonly string[] | undefined;\n}\n\nconst Door = ({\n  href,\n  external = false,\n  color,\n  tag,\n  title,\n  children,\n  action,\n}: {\n  href: string;\n  external?: boolean;\n  color: string;\n  tag: string;\n  title: string;\n  children: string;\n  action: string;\n}) => (\n  <a\n    href={href}\n    {...(external ? { target: '_blank', rel: 'noopener' } : {})}\n    css={css`\n      ${actionCard};\n      display: grid;\n      grid-template-rows: subgrid;\n      grid-row: span 3;\n      row-gap: 5px;\n      padding: 14px 16px;\n      border-radius: 10px;\n      box-sizing: border-box;\n      min-height: 96px;\n      border: 1px solid ${HOME.line2};\n      color: ${HOME.fg2};\n      text-decoration: none;\n      transition:\n        background 0.12s,\n        border-color 0.12s;\n      &:hover,\n      &:focus-visible {\n        border-color: ${color};\n        text-decoration: none;\n      }\n      &:hover .isomer-studio-door-action {\n        text-decoration: underline;\n      }\n    `}>\n    <span\n      css={css`\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 8px;\n      `}>\n      <b\n        css={css`\n          font-size: 15px;\n          font-weight: 600;\n          color: ${HOME.fg};\n        `}>\n        {title}\n      </b>\n      <span\n        css={css`\n          margin-top: 3px;\n          font-size: 11px;\n          font-weight: 500;\n          letter-spacing: 0.04em;\n          text-transform: uppercase;\n          padding: 2px 7px;\n          border-radius: 999px;\n          border: 1px solid ${color};\n          color: ${color};\n          white-space: nowrap;\n        `}>\n        {tag}\n      </span>\n    </span>\n    <span\n      css={css`\n        font-size: 12.5px;\n        text-wrap: pretty;\n      `}>\n      {children}\n    </span>\n    <span\n      className=\"isomer-studio-door-action\"\n      css={css`\n        margin-top: auto;\n        padding-top: 4px;\n        font-size: 12px;\n        font-weight: 500;\n        color: ${color};\n      `}>\n      {action}\n    </span>\n  </a>\n);\n\n/** The landing page: search, featured primitives, apps, where to go next, and what the runtime loaded. */\nexport const HomeView = ({\n  title,\n  router: { route, navigate },\n  featured: featuredTypes,\n  configProblems = [],\n}: HomeViewProps) => {\n  const {\n    euiTheme: { font },\n  } = useEuiTheme();\n  const {\n    docs: { primitives, groups, surfaces: supported },\n    rasterizePng,\n    apps,\n  } = useStudio();\n  const featured = useMemo(\n    () => pickFeatured(primitives, featuredTypes),\n    [primitives, featuredTypes]\n  );\n  const surfaces = previewSurfaces(supported, Boolean(rasterizePng));\n  const first = groups[0]?.types[0] ?? primitives[0]?.type ?? '';\n  const year = new Date().getFullYear();\n\n  const page = css`\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    color: ${HOME.fg2};\n    font-size: 14px;\n    line-height: 1.5;\n    a:focus-visible,\n    button:focus-visible {\n      outline: 2px solid ${HOME.fg};\n      outline-offset: 2px;\n    }\n  `;\n  const columns = css`\n    flex: 1;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) ${PANEL_WIDTH}px;\n    width: 100%;\n    max-width: ${WIDE_CONTENT_WIDTH + 5 * GUTTER + PANEL_WIDTH}px;\n    margin-inline: auto;\n    @media (max-width: 900px) {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  `;\n  const main = css`\n    min-width: 0;\n    padding: 20px ${GUTTER}px 48px;\n    @media (max-width: 900px) {\n      padding-inline: 16px;\n    }\n  `;\n  const content = css`\n    container: isomer-home / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n    max-width: ${CONTENT_WIDTH}px;\n    margin-inline: auto;\n    ${WIDE} {\n      max-width: ${WIDE_CONTENT_WIDTH}px;\n      ${TILE_COLUMNS}: 4;\n    }\n  `;\n  const aside = css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    border-left: 1px solid ${HOME.line1};\n    border-image: linear-gradient(\n        to bottom,\n        transparent,\n        ${HOME.line1} 70px,\n        ${HOME.line1} calc(100% - 70px),\n        transparent\n      )\n      1;\n    padding: 44px ${GUTTER}px 32px 32px;\n    @media (max-width: 900px) {\n      border-image: none;\n      border-left: 0;\n      border-top: 1px solid ${HOME.line1};\n      padding-inline: 16px;\n    }\n  `;\n  const chips = css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: -8px;\n  `;\n  const chip = css`\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 12px 6px 10px;\n    border-radius: 999px;\n    border: 1px solid ${HOME.line2};\n    background: ${HOME.surface1};\n    font-size: 13px;\n    font-weight: 500;\n    color: ${HOME.fg};\n    text-decoration: none;\n    &:hover,\n    &:focus-visible {\n      background: ${HOME.surface3};\n      border-color: ${HOME.docs};\n      text-decoration: none;\n    }\n  `;\n  const footer = css`\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px 24px;\n    font-size: 12px;\n    color: ${HOME.fg3};\n    padding: 14px ${GUTTER}px;\n    a {\n      color: ${HOME.fg2};\n      text-decoration: none;\n    }\n    a:hover {\n      color: ${HOME.fg};\n      text-decoration: underline;\n    }\n    @media (max-width: 900px) {\n      padding-inline: 16px;\n    }\n  `;\n\n  return (\n    <div css={page} data-testid=\"home\">\n      {configProblems.length ? (\n        <EuiCallOut\n          announceOnMount\n          color=\"danger\"\n          iconType=\"error\"\n          title=\"The config is invalid; the Studio keeps the last valid one\">\n          <ul>\n            {configProblems.map((problem) => (\n              <li key={problem}>{problem}</li>\n            ))}\n          </ul>\n        </EuiCallOut>\n      ) : null}\n      <div css={columns}>\n        <main css={main}>\n          <div css={content}>\n            <div\n              css={css`\n                display: flex;\n                flex-direction: column;\n                gap: 12px;\n              `}>\n              <div\n                css={css`\n                  font-family: ${font.familyCode};\n                  font-size: 12px;\n                  color: ${HOME.accent};\n                `}>\n                isomer{' '}\n                <span\n                  css={css`\n                    color: ${HOME.fg3};\n                  `}>\n                  n.\n                </span>{' '}\n                one formula, many forms\n              </div>\n              <h1\n                css={css`\n                  margin: 0;\n                  font-size: 44px;\n                  font-weight: 600;\n                  letter-spacing: -0.025em;\n                  line-height: 1.05;\n                  color: ${HOME.fg};\n                  text-wrap: balance;\n                  @media (max-width: 900px) {\n                    font-size: 32px;\n                  }\n                `}>\n                What are we rendering today?\n              </h1>\n              <p\n                css={css`\n                  margin: 0;\n                  font-size: 16px;\n                  text-wrap: pretty;\n                `}>\n                Isomer Studio is a workbench for primitives, primitive packs,\n                compositions, views, tools, and applications built on Isomer.\n              </p>\n            </div>\n\n            <PrimitiveSearch\n              size=\"large\"\n              placeholder=\"Search primitives by name, purpose or prop\"\n              onSelectPrimitive={(type) =>\n                navigate({ mode: route.mode, page: type, example: 0 })\n              }\n            />\n\n            {groups.length ? (\n              <nav aria-label=\"Primitive categories\" css={chips}>\n                {groups.map(({ title: group, types }) => (\n                  <a\n                    key={group}\n                    href={formatRoute({\n                      mode: 'docs',\n                      page: GALLERY,\n                      example: 0,\n                      group,\n                    })}\n                    css={chip}>\n                    {types[0] ? (\n                      <span\n                        css={css`\n                          color: ${HOME.fg2};\n                        `}>\n                        <PrimitiveGlyph type={types[0]} size={16} />\n                      </span>\n                    ) : null}\n                    {group}\n                    <span\n                      css={css`\n                        font-family: ${font.familyCode};\n                        font-size: 11px;\n                        color: ${HOME.fg3};\n                      `}>\n                      {types.length}\n                    </span>\n                  </a>\n                ))}\n              </nav>\n            ) : null}\n\n            <FeaturedStrip {...{ featured }} total={primitives.length} />\n\n            <AppsSection {...{ apps }} />\n\n            <section\n              aria-labelledby=\"isomer-studio-learn\"\n              css={css`\n                display: flex;\n                flex-direction: column;\n                gap: 10px;\n              `}>\n              <div css={sectionLabel}>\n                <h2 id=\"isomer-studio-learn\" css={sectionHeading}>\n                  Learn more about Isomer\n                </h2>\n              </div>\n              <div\n                css={css`\n                  display: grid;\n                  grid-template-columns: repeat(3, minmax(0, 1fr));\n                  gap: 12px;\n                  ${HOME_NARROW} {\n                    grid-template-columns: minmax(0, 1fr);\n                  }\n                `}>\n                <Door\n                  href={formatRoute({\n                    mode: 'docs',\n                    page: GALLERY,\n                    example: 0,\n                  })}\n                  color={HOME.docs}\n                  tag=\"Reference\"\n                  title=\"Understand primitives\"\n                  action=\"Browse reference →\">\n                  Every primitive in the pack, with its purpose, props and\n                  examples.\n                </Door>\n                <Door\n                  href={formatRoute({ mode: 'dev', page: first, example: 0 })}\n                  color={HOME.dev}\n                  tag=\"Workbench\"\n                  title=\"Experiment and edit\"\n                  action=\"Open the workbench →\">\n                  Edit a composition and watch it render on every surface the\n                  runtime has.\n                </Door>\n                <Door\n                  href={DOCS_URL}\n                  external\n                  color={HOME.accent}\n                  tag=\"Guide\"\n                  title=\"Learn how Isomer works\"\n                  action=\"Read the docs ↗\">\n                  The composition contract, packs, surfaces and the agent tools.\n                </Door>\n              </div>\n            </section>\n\n            <SurfaceChart {...{ surfaces }} />\n          </div>\n        </main>\n\n        <aside css={aside}>\n          <LoadedPanel {...{ surfaces }} />\n        </aside>\n      </div>\n\n      <footer css={footer}>\n        <span\n          css={css`\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            color: ${HOME.fg};\n            font-weight: 500;\n          `}>\n          <EuiIcon type=\"logoElastic\" color=\"ghost\" size=\"m\" />\n          Built by Elastic\n        </span>\n        <span\n          css={css`\n            display: flex;\n            flex-wrap: wrap;\n            gap: 4px 18px;\n          `}>\n          <a href={REPO_URL} target=\"_blank\" rel=\"noopener\">\n            github.com/elastic/isomer ↗\n          </a>\n          <a href={DOCS_URL} target=\"_blank\" rel=\"noopener\">\n            Docs ↗\n          </a>\n          <a href={LICENSE_URL} target=\"_blank\" rel=\"noopener\">\n            Elastic License 2.0\n          </a>\n        </span>\n        <small>\n          © {year} Elasticsearch B.V. · {title}\n        </small>\n      </footer>\n    </div>\n  );\n};\n"]}

package/dist/home/links.d.ts

@@ -0,0 +1,8 @@
+/** The published docs site. */
+export declare const DOCS_URL = "https://elastic.github.io/isomer/";
+export declare const STUDIO_CONFIG_DOCS_URL = "https://elastic.github.io/isomer/studio/config/";
+export declare const APPS_DOCS_URL = "https://elastic.github.io/isomer/studio/config/#apps";
+export declare const VIEWS_DOCS_URL = "https://elastic.github.io/isomer/runtime/view-registry/";
+export declare const REPO_URL = "https://github.com/elastic/isomer";
+export declare const LICENSE_URL = "https://github.com/elastic/isomer/blob/main/LICENSE.txt";
+//# sourceMappingURL=links.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../src/home/links.ts"],"names":[],"mappings":"AAOA,+BAA+B;AAC/B,eAAO,MAAM,QAAQ,sCAAsC,CAAC;AAC5D,eAAO,MAAM,sBAAsB,oDAA8B,CAAC;AAClE,eAAO,MAAM,aAAa,yDAAmC,CAAC;AAC9D,eAAO,MAAM,cAAc,4DAAsC,CAAC;AAClE,eAAO,MAAM,QAAQ,sCAAsC,CAAC;AAC5D,eAAO,MAAM,WAAW,4DAAsC,CAAC"}

package/dist/home/links.js

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+/** The published docs site. */
+export const DOCS_URL = 'https://elastic.github.io/isomer/';
+export const STUDIO_CONFIG_DOCS_URL = `${DOCS_URL}studio/config/`;
+export const APPS_DOCS_URL = `${STUDIO_CONFIG_DOCS_URL}#apps`;
+export const VIEWS_DOCS_URL = `${DOCS_URL}runtime/view-registry/`;
+export const REPO_URL = 'https://github.com/elastic/isomer';
+export const LICENSE_URL = `${REPO_URL}/blob/main/LICENSE.txt`;
+//# sourceMappingURL=links.js.map

package/dist/home/links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"links.js","sourceRoot":"","sources":["../../src/home/links.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,+BAA+B;AAC/B,MAAM,CAAC,MAAM,QAAQ,GAAG,mCAAmC,CAAC;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,QAAQ,gBAAgB,CAAC;AAClE,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,sBAAsB,OAAO,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,QAAQ,wBAAwB,CAAC;AAClE,MAAM,CAAC,MAAM,QAAQ,GAAG,mCAAmC,CAAC;AAC5D,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,QAAQ,wBAAwB,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\n/** The published docs site. */\nexport const DOCS_URL = 'https://elastic.github.io/isomer/';\nexport const STUDIO_CONFIG_DOCS_URL = `${DOCS_URL}studio/config/`;\nexport const APPS_DOCS_URL = `${STUDIO_CONFIG_DOCS_URL}#apps`;\nexport const VIEWS_DOCS_URL = `${DOCS_URL}runtime/view-registry/`;\nexport const REPO_URL = 'https://github.com/elastic/isomer';\nexport const LICENSE_URL = `${REPO_URL}/blob/main/LICENSE.txt`;\n"]}

package/dist/home/loaded_panel.d.ts

@@ -0,0 +1,6 @@
+import type { PreviewSurface } from '../surfaces/surface_select.js';
+/** What the runtime loaded: packs, views, apps and surfaces, then where that is configured. */
+export declare const LoadedPanel: ({ surfaces, }: {
+    surfaces: readonly PreviewSurface[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loaded_panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loaded_panel.d.ts","sourceRoot":"","sources":["../../src/home/loaded_panel.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAyGjE,+FAA+F;AAC/F,eAAO,MAAM,WAAW,GAAI,eAEzB;IACD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,qDAyJA,CAAC"}